designtopack/src/components/project/virtual-sample/VirtualSample.vue

<template>
  <Dialog
    id="virtual-sample"
    v-model:visible="isOpen"
    modal
    :draggable="false"
    dismissableMask="true"
    header="Titre du rendu"
    class="dialog"
    :class="[{ 'with-comments': isCommentsOpen }, activeTab]"
    :closeOnEscape="true"
  >
    <template #header>
      <div class="dialog__tabs" role="tablist">
        <button
          v-if="step.files.dynamic"
          type="button"
          role="tab"
          class="btn btn--transparent | font-serif"
          data-icon="cursor"
          :aria-pressed="activeTab === 'dynamic' ? true : false"
          aria-controls="dynamic"
          @click="activeTab = 'dynamic'"
        >
          <span>Vue Dynamique</span>
        </button>
        <button
          v-if="step.files.static"
          type="button"
          role="tab"
          @click="activeTab = 'static'"
          class="btn btn--transparent | font-serif"
          data-icon="image"
          :aria-pressed="activeTab === 'static' ? true : false"
          aria-controls="static"
        >
          <span>Vue statique</span>
        </button>
      </div>
      <h2 class="font-serif text-lg">Échantillon virtuel</h2>
    </template>

    <DynamicView id="dynamic" v-if="activeTab === 'dynamic'" />
    <StaticView id="static" v-if="activeTab === 'static'" />

    <template #footer>
      <a
        v-if="currentFile"
        id="download-image"
        class="btn btn--white-10"
        data-icon="download"
        :href="currentFile.url"
        download
      >
        <span>{{
          activeTab === "dynamic" ? "Télécharger l’image" : "Télécharger le PDF"
        }}</span>
      </a>
      <button
        id="loop-animation"
        class="btn btn--transparent btn--outline"
        data-icon="loop"
      >
        <span>Animation en boucle</span>
      </button>
      <button
        id="toggle-comments"
        :aria-pressed="isCommentsOpen"
        class="btn btn--transparent btn--outline"
        data-icon="comment"
        @click="isCommentsOpen = !isCommentsOpen"
      >
        <span class="sr-only">Afficher les commentaires</span>
      </button>
    </template>
  </Dialog>
</template>

<script setup>
import { storeToRefs } from "pinia";
import Dialog from "primevue/dialog";
import DynamicView from "./DynamicView.vue";
import StaticView from "./StaticView.vue";
import { ref, watch } from "vue";
import { useVirtualSampleStore } from "../../../stores/virtualSample";
import { useDialogStore } from "../../../stores/dialog";
import { useRoute, useRouter } from "vue-router";

const { file } = defineProps({
  file: Object,
});

const { activeTab, currentFile, step } = storeToRefs(useVirtualSampleStore());
const { isCommentsOpen } = storeToRefs(useDialogStore());

// Variables
const router = useRouter();
const route = useRoute();
const isOpen = ref(true);
watch(isOpen, (newValue) => {
  router.push({ name: route.name });
});
</script>

<style scoped>
.dialog__inner {
  padding: var(--space-16);
}
</style>