virtual sample : create dynamic vue component

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

@@ -0,0 +1,174 @@
+<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>
+
+    <Dynamic />
+
+    <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 { storeToRefs } from "pinia";
+import Dialog from "primevue/dialog";
+import Dynamic from "./Dynamic.vue";
+import { computed, ref } from "vue";
+import { usePageStore } from "../../../stores/page";
+import { useDialogStore } from "../../../stores/dialog";
+
+const { file } = defineProps({
+  file: Object,
+});
+
+const { comments } = storeToRefs(useDialogStore());
+
+// Variables
+const isOpen = ref(true);
+const isCommentsOpen = ref(false);
+</script>
+
+<style scoped>
+.dialog__inner {
+  padding: var(--space-16);
+}
+
+.track-container {
+  --w: 100%;
+  --h: calc(100% - 74px);
+  --x-steps: 14;
+  --y-steps: 5;
+  width: var(--w);
+  height: var(--h);
+  position: relative;
+  margin: var(--space-16) auto;
+  border-radius: var(--rounded-lg);
+}
+
+.track-container figure {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.track-container img {
+  display: block;
+  position: absolute;
+  inset: 0;
+  width: inherit;
+  height: inherit;
+  object-fit: contain;
+}
+.track-container fieldset {
+  --p: 0rem;
+  margin: 0;
+  padding: 0;
+  width: var(--w);
+  height: var(--h);
+  border: none;
+}
+.track-container button,
+.track-container input {
+  position: absolute;
+}
+
+/* Buttons */
+.track-container .btn--icon {
+  --icon-size: var(--space-24);
+  --icon-color: var(--color-grey-700);
+  width: var(--space-48);
+  height: var(--space-48);
+  max-height: var(--space-48);
+  background: transparent;
+  padding: var(--space-12);
+}
+.track-container .btn--icon:hover {
+  background: var(--color-black-10);
+}
+#y-up {
+  top: var(--p);
+}
+#y-up::before {
+  transform: rotate(90deg);
+}
+#y-down {
+  bottom: var(--p);
+}
+#y-down::before {
+  transform: rotate(-90deg);
+}
+#y-up,
+#y-down {
+  text-align: center;
+  left: 50%;
+  transform: translateX(-50%);
+}
+#x-down {
+  left: var(--p);
+}
+#x-up {
+  right: var(--p);
+}
+#x-up::before {
+  transform: rotate(180deg);
+}
+#x-down,
+#x-up {
+  top: 50%;
+  transform: translateY(-50%);
+}
+</style>