extended-brief working

src/components/project/brief/add-images-modal/AddImagesModal.vue

@@ -0,0 +1,147 @@
+<template>
+  <Dialog
+    id="add-images"
+    v-model:visible="isOpen"
+    modal
+    header="Ajouter des images"
+    class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden | p-32"
+  >
+    <div class="with-sidebar | h-full">
+      <nav>
+        <ul>
+          <li
+            v-for="tab in tabs"
+            :class="{ active: activeTabId === tab.id }"
+            @click="activeTabId = tab.id"
+          >
+            {{ tab.name }}
+          </li>
+        </ul>
+      </nav>
+      <div
+        class="with-sidebar | h-full"
+        data-side="right"
+        style="--sidebar-width: 26rem; gap: var(--gap)"
+      >
+        <div class="bg-grey-50 | rounded-2xl | p-8 | overflow-y">
+          <template v-for="tab in tabs" :key="tab.name">
+            <component
+              @add-images="addImages"
+              :is="tab.component"
+              :id="tab.id"
+              :class="{ hidden: activeTab.name !== tab.name }"
+            />
+          </template>
+        </div>
+        <ImagesEditPanel :images="images" />
+      </div>
+    </div>
+  </Dialog>
+  <Dialog
+    id="delete-image"
+    v-model:visible="deleteIsOpen"
+    modal
+    header="Êtes-vous sûr de vouloir supprimer cette image ?"
+    class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden | text-center | w-full max-w | p-16 pt-32"
+    style="--row-gap: var(--space-32); --max-w: 40rem"
+  >
+    <p class="text-grey-700 | px-16">
+      Si vous supprimez cette image, celle-ci disparaîtra de votre brief ainsi
+      que toutes les informations qui lui sont attribuées.
+    </p>
+    <template #footer>
+      <button class="btn btn--secondary | flex-1" @click="deleteIsOpen = false">
+        Annuler
+      </button>
+      <button class="btn | flex-1" @click="">Supprimer</button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import Dialog from "primevue/dialog";
+import ImagesEditPanel from "./ImagesEditPanel.vue";
+import { ref, watch } from "vue";
+import { storeToRefs } from "pinia";
+import { useAddImagesModalStore } from "../../../../stores/addImagesModal";
+
+const { isAddImagesModalOpen } = defineProps({
+  isAddImagesModalOpen: Boolean,
+});
+
+const emit = defineEmits(["update:isAddImagesModalOpen"]);
+const { activeTab, activeTabId, tabs } = storeToRefs(useAddImagesModalStore());
+
+const isOpen = ref(isAddImagesModalOpen);
+watch(isOpen, () => {
+  emit("close");
+});
+
+const deleteIsOpen = false;
+</script>
+
+<style>
+#add-images {
+  --sidebar-width: 12.5rem;
+  width: min(100vw - var(--gutter) * 2, 100rem);
+  height: min(100vh - var(--gutter) * 2, 60rem);
+  padding-top: var(--space-16);
+  row-gap: var(--space-32);
+}
+#add-images [data-pc-section="content"] {
+  height: calc(100% - 3.75rem);
+}
+#add-images nav li {
+  position: relative;
+  height: var(--space-48);
+  border-left: 1px solid var(--color-grey-400);
+  padding: var(--space-12) var(--space-16);
+  color: var(--color-grey-400);
+  font-weight: 500;
+  cursor: pointer;
+}
+#add-images nav li:hover,
+#add-images nav li.active {
+  color: var(--color-grey-800);
+  border-left-color: var(--color-grey-800);
+}
+#add-images nav li.active::before {
+  content: "";
+  width: 2px;
+  position: absolute;
+  top: 0;
+  left: -1px;
+  bottom: 0;
+  background: var(--color-grey-800);
+}
+#add-images [data-pc-name="fileupload"] button {
+  padding: 3rem;
+  aspect-ratio: 1/1;
+}
+#add-images .image {
+  aspect-ratio: 1/1;
+  border-radius: var(--rounded-xl);
+}
+#add-images .image img {
+  height: 100%;
+  width: 100%;
+}
+
+#delete-image [data-pc-section="footer"] {
+  display: flex;
+  gap: var(--space-16);
+  margin-top: var(--space-32);
+}
+#delete-image [data-pc-name="pcclosebutton"] {
+  display: none;
+}
+#delete-image_header {
+  font-family: var(--font-serif);
+  font-size: var(--text-lg);
+}
+
+.with-sidebar[data-side="right"] > * {
+  height: 100%;
+  overflow-y: auto;
+}
+</style>