designtopack/src/components/project/ClientBrief/AddImagesModal.vue

<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 class="active">Mes Images</li>
          <li>Matériauthèque</li>
          <li>Réalisations</li>
          <li>Inspirations</li>
        </ul>
      </nav>
      <div
        class="auto-grid | bg-grey-50 | border border-grey-200 | rounded-2xl | w-full | p-8"
        style="--min: 15rem; --gap: 0.5rem"
      >
        <FileUpload
          mode="basic"
          name="images[]"
          :url="'/upload-images.json?pageUri=' + page.uri"
          @upload="onAdvancedUpload($event)"
          :auto="true"
          :multiple="true"
          accept="image/*"
          :maxFileSize="1000000"
          invalidFileSizeMessage="Fichier trop lourd"
          chooseLabel="Ajouter une ou plusieurs images"
          class="flex flex-col justify-center | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-xl"
        >
          <template #chooseicon>
            <svg
              width="20"
              height="20"
              viewBox="0 0 20 20"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M0.714355 15.0001V16.4286C0.714355 17.1864 1.01538 17.9131 1.55119 18.4489C2.08701 18.9848 2.81374 19.2858 3.5715 19.2858H16.4286C17.1864 19.2858 17.9131 18.9848 18.4489 18.4489C18.9848 17.9131 19.2858 17.1864 19.2858 16.4286V15.0001M5.71436 5.71436L10.0001 0.714355M10.0001 0.714355L14.2858 5.71436M10.0001 0.714355V13.5715"
                stroke="currentColor"
                stroke-width="1.25"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </template>
          <template
            #content="{
              files,
              uploadedFiles,
              removeUploadedFileCallback,
              removeFileCallback,
            }"
          >
            <div v-if="files.length > 0">Fichiers importés</div>
          </template>
        </FileUpload>
        <figure class="image">
          <img
            src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt=""
          />
        </figure>
        <figure class="image">
          <img
            src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt=""
          />
        </figure>
        <figure class="image">
          <img
            src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt=""
          />
        </figure>
        <figure class="image">
          <img
            src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt=""
          />
        </figure>
        <figure class="image">
          <img
            src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt=""
          />
        </figure>
        <Toast />
      </div>
    </div>
  </Dialog>
</template>

<script setup>
import Dialog from "primevue/dialog";
import Toast from "primevue/toast";
import { useToast } from "primevue/usetoast";
import FileUpload from "primevue/fileupload";
import { usePageStore } from "../../../stores/page";
import { ref, watch } from "vue";

const { page } = usePageStore();
const toast = useToast();

const { isAddImagesModalOpen } = defineProps({
  isAddImagesModalOpen: Boolean,
});
const emit = defineEmits(["update:isAddImagesModalOpen"]);

const isOpen = ref(isAddImagesModalOpen);
watch(isOpen, (newValue) => {
  emit("close");
});
</script>

<style>
#add-images {
  --sidebar-width: 12.5rem;
  counter-set: selected-images;
  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 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 {
  counter-increment: selected-images;
  aspect-ratio: 1/1;
  border-radius: var(--rounded-xl);
}
#add-images .image::after {
  content: counter(selected-images);
  top: var(--space-12);
  right: var(--space-12);
  border-radius: 50%;
  color: var(--color-white);
  font-weight: 700;
  background: var(--color-grey-800);
  mask: none;
  display: grid;
  place-items: center;
  text-align: center;
  width: 1.5rem;
  height: 1.5rem;
}
</style>