designtopack/src/components/project/VirtualSample.vue

<template>
  <Dialog
    id="virtual-sample"
    v-model:visible="isOpen"
    modal
    :draggable="false"
    header="Titre du rendu"
    class="dialog"
    :class="{ 'with-comments': isCommentsOpen }"
    :closeOnEscape="true"
  >
    <template #header>
      <div class="dialog__tabs">
        <button
          class="btn btn--transparent | font-serif"
          data-icon="cursor"
          aria-pressed="true"
        >
          <span>Vue Dynamique</span>
        </button>
        <button class="btn btn--transparent | font-serif" data-icon="image">
          <span>Vue statique</span>
        </button>
      </div>
      <h2 class="font-serif text-lg">Titre du rendu</h2>
    </template>
    <div class="dialog__inner">
      <header class="flex">
        <div class="options-selector">
          <button
            class="btn btn--image"
            aria-pressed="true"
            style="
              --btn-image: url('https://images.unsplash.com/photo-1708486855543-6010a133280f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHBhcmZ1bWUlMjBib3R0bGV8ZW58MHx8MHx8fDA%3D');
            "
          >
            <span>Piste 1</span>
          </button>
          <button
            class="btn btn--image"
            style="
              --btn-image: url('https://images.unsplash.com/photo-1680607622631-1e243ddd6782?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8cGFyZnVtZSUyMGJvdHRsZXxlbnwwfHwwfHx8MA%3D%3D');
            "
          >
            <span>Piste 2</span>
          </button>
        </div>
        <button class="btn | ml-auto">
          <span>Comparer les pistes</span>
        </button>
      </header>
    </div>
    <template #footer>
      <button
        id="download-image"
        class="btn btn--white-10"
        data-icon="download"
      >
        <span>Sauvegarder l’image</span>
      </button>
      <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>
      <Comments
        v-if="isCommentsOpen"
        :current-page-index="currentPageIndex"
        :file="file"
        :comments="file.comments"
        @update:file="changeFile"
      />
    </template>
  </Dialog>
</template>

<script setup>
import Dialog from "primevue/dialog";
import { ref, watch } from "vue";

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

// Variables
const isOpen = ref(false);
watch(isOpen, (newValue) => {
  emits("close");
});
const isCommentsOpen = ref(false);
</script>

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