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
            v-for="tab in tabs"
            :class="{ active: activeTab.name === tab.name }"
            @click="activeTab = tab"
          >
            {{ 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">
          <component :is="activeTab.component" :params="activeTab.params" />
        </div>
        <ImagesEditPanel :images="images" />
      </div>
    </div>
  </Dialog>
</template>

<script setup>
import Dialog from "primevue/dialog";
import ImagesResources from "./ImagesResources.vue";
import ImagesEditPanel from "./ImagesEditPanel.vue";
import MyImages from "./MyImages.vue";
import { usePageStore } from "../../../stores/page";
import { ref, watch } from "vue";

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

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

const tabs = [
  {
    name: "Mes images",
    component: MyImages,
    params: {
      images,
    },
  },
  {
    name: "Matériauthèque",
    component: ImagesResources,
    params: {
      targetPage: "materials",
    },
  },
  {
    name: "Réalisations",
    component: ImagesResources,
    params: {
      targetPage: "materials",
    },
  },
  {
    name: "Inspirations",
    component: ImagesResources,
  },
];

const activeTab = ref(tabs[0]);
</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 [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 {
  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;
}
#add-images .image img {
  height: 100%;
  width: 100%;
}

.with-sidebar[data-side="right"] > * {
  height: 100%;
  overflow-y: auto;
}
</style>