rename folde

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

@@ -1,153 +0,0 @@
-<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>