125 lines
3.9 KiB
Vue
125 lines
3.9 KiB
Vue
|
<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>
|