merge

src/components/project/ClientBrief/ImagesEditPanel.vue

@@ -0,0 +1,124 @@
+<template>
+  <div
+    class="flex flex-col items-start | bg-grey-50 | border border-grey-200 | rounded-2xl | w-full | p-8"
+  >
+    <Accordion
+      value="0"
+      class="flex flex-col"
+      style="--row-gap: var(--space-8)"
+    >
+      <AccordionPanel
+        v-for="(image, index) in images"
+        :key="index + 1"
+        :value="index"
+        class="w-full | bg-white | rounded-xl | p-12 pt-8"
+      >
+        <AccordionHeader>
+          <span class="badge">{{ index + 1 }}</span>
+        </AccordionHeader>
+        <AccordionContent>
+          <div class="image-details__description | my-16">
+            <label
+              for="image-description"
+              class="flex | text-sm text-grey-700 | mb-8"
+              >Description</label
+            >
+            <textarea
+              name="image-description"
+              id="image-description"
+              placeholder="Ajoutez une description à cette image…"
+              rows="3"
+              class="border border-grey-200 | rounded-xl | p-16 | w-full"
+              @input="saveDescription()"
+            ></textarea>
+          </div>
+          <fieldset class="image-details__filters | flex-1">
+            <legend class="text-sm text-grey-700 | mb-8">
+              Sélectionner un ou plusieurs tags
+            </legend>
+            <div class="flex" style="gap: var(--space-8)">
+              <template v-for="tag in page.tags" :key="tag">
+                <input
+                  class="sr-only"
+                  type="checkbox"
+                  :id="`${tag}`"
+                  :name="`${tag}`"
+                  :value="`${tag}`"
+                  v-model="localSelectedTags"
+                />
+                <label class="btn btn--sm btn--primary" :for="`${tag}`">{{
+                  toPascalCase(tag)
+                }}</label>
+              </template>
+            </div>
+          </fieldset>
+        </AccordionContent>
+      </AccordionPanel>
+      <template #collapseicon>
+        <svg
+          aria-hidden="true"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          style="transform: rotate(180deg)"
+        >
+          <path
+            d="M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625"
+            stroke="#5E6060"
+            stroke-width="1.25"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </template>
+      <template #expandicon>
+        <svg
+          aria-hidden="true"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625"
+            stroke="#5E6060"
+            stroke-width="1.25"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </template>
+    </Accordion>
+    <button class="btn | w-full | mt-auto">
+      Ajouter les images sélectionnées
+    </button>
+  </div>
+</template>
+<script setup>
+import Accordion from "primevue/accordion";
+import AccordionPanel from "primevue/accordionpanel";
+import AccordionHeader from "primevue/accordionheader";
+import AccordionContent from "primevue/accordioncontent";
+import { usePageStore } from "../../../stores/page";
+import { toPascalCase } from "../../../helpers";
+
+const { images } = defineProps({
+  images: Array,
+});
+
+const { page } = usePageStore();
+</script>
+
+<style>
+/* Accordion */
+[data-pc-name="accordionheader"] {
+  height: var(--space-40);
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>