@vc-shell/framework 1.2.4-beta.4 → 1.2.4-beta.5

package/ui/components/organisms/vc-gallery/vc-gallery.vue

@@ -1,99 +1,187 @@
 <template>
-  <div class="vc-gallery">
-    <VcLabel
-      v-if="label"
-      :required="required"
-    >
-      <span>{{ label }}</span>
-      <template
-        v-if="tooltip"
-        #tooltip
-        >{{ tooltip }}</template
+  <!-- Legacy shim: variant="file-upload" delegates to VcImageUpload -->
+  <VcImageUpload
+    v-if="isLegacySingleImageMode"
+    :image="images?.[0]"
+    :disabled="disabled"
+    :loading="loading"
+    :rules="rules"
+    :name="name"
+    :icon="uploadIcon"
+    :accept="accept"
+    :placeholder="legacyPlaceholder"
+    :removable="itemActions?.remove !== false"
+    :previewable="itemActions?.preview !== false"
+    @upload="(files: FileList) => emit('upload', files)"
+    @remove="(img: ICommonAsset) => emit('remove', img)"
+  />
+
+  <!-- Normal gallery mode -->
+  <div
+    v-else
+    class="vc-gallery"
+    :class="{
+      'vc-gallery--drag-over': isDragOver,
+      'vc-gallery--reordering': reorder.isDragging.value,
+      [`vc-gallery--${size}`]: true,
+    }"
+    :style="{ '--gallery-gap': `${gap}px` }"
+    @dragenter.prevent="onGlobalDragEnter"
+    @dragleave.prevent="onGlobalDragLeave"
+    @dragover.prevent
+    @drop.prevent="onGlobalDrop"
+  >
+    <template v-if="hasImages || !disabled">
+      <TransitionGroup
+        tag="div"
+        :name="reorder.isDragging.value ? 'vc-gallery-swap' : ''"
+        :ref="
+          (comp: any) => {
+            if (comp?.$el) reorder.galleryRef.value = comp.$el;
+          }
+        "
+        class="vc-gallery__grid"
       >
-    </VcLabel>
-
-    <template v-if="(toValue(defaultImages) && toValue(defaultImages).length) || !disabled">
-      <div class="vc-gallery__container">
+        <!-- Image tiles -->
         <div
-          ref="galleryRef"
-          class="vc-gallery__wrapper"
+          v-for="(image, i) in localImages"
+          :key="`img_${image.id || i}`"
+          class="vc-gallery__item"
+          :class="{ 'vc-gallery__item--dragging': reorder.isDragging.value && reorder.draggedId.value === image.id }"
+          @mousedown="reorder.reorderHandlers.onItemMouseDown"
+          @mouseup="reorder.reorderHandlers.onItemMouseUp"
+          @mouseleave="reorder.reorderHandlers.onItemMouseUp"
+          @dragstart="reorder.reorderHandlers.onItemDragStart($event, image)"
+          @dragover="reorder.reorderHandlers.onItemDragOver"
+          @dragleave="reorder.reorderHandlers.onItemDragLeave"
+          @drop="reorder.reorderHandlers.onItemDrop"
+          @dragend="reorder.reorderHandlers.onItemDragEnd"
         >
-          <VcGalleryItem
-            v-for="(image, i) in defaultImages"
-            :key="`image_${i}`"
-            class="vc-gallery__item"
+          <slot
+            name="item"
             :image="image"
-            :readonly="disabled"
-            :actions="itemActions"
-            :disable-drag="disableDrag"
-            @preview="onPreviewClick(i)"
-            @edit="$emit('edit', $event)"
-            @remove="$emit('remove', $event)"
-            @mousedown="onItemMouseDown"
-            @dragstart="onItemDragStart($event, image)"
-            @dragover="onItemDragOver"
-            @dragleave="onItemDragLeave"
-            @drop="onItemDrop($event, image)"
-          ></VcGalleryItem>
+            :index="i"
+            :actions="{
+              preview: () => preview.openPreview(i),
+              edit: () => emit('edit', image),
+              remove: () => emit('remove', image),
+            }"
+          >
+            <VcGalleryItem
+              :image="image"
+              :readonly="disabled"
+              :actions="itemActions"
+              :disable-drag="reorder.disableDrag.value"
+              :image-fit="imagefit"
+              @preview="preview.openPreview(i)"
+              @edit="emit('edit', $event)"
+              @remove="emit('remove', $event)"
+            />
+          </slot>
+        </div>
+
+        <!-- Upload tile (when images exist) -->
+        <div
+          v-if="!disabled && hasImages"
+          key="__upload__"
+          class="vc-gallery__upload-tile"
+        >
           <VcFileUpload
-            v-if="!disabled && !uploadHidden"
-            class="vc-gallery__upload"
+            class="vc-gallery__upload-zone"
             :icon="uploadIcon"
-            :variant="variant"
             :multiple="multiple"
             :rules="rules"
             :name="name"
             :loading="loading"
-            :custom-text="customText"
-            @upload="onUpload"
-          ></VcFileUpload>
+            :accept="accept"
+            :custom-text="uploadCustomText"
+            @upload="upload.onUpload"
+          />
         </div>
-        <div
-          ref="reorderGalleryRef"
-          class="vc-gallery__reorder-line"
-        ></div>
-      </div>
+      </TransitionGroup>
     </template>
+
+    <!-- Empty state / Full-width upload -->
+    <div
+      v-if="!hasImages && !disabled"
+      class="vc-gallery__empty-upload"
+    >
+      <VcFileUpload
+        :icon="uploadIcon"
+        :multiple="multiple"
+        :rules="rules"
+        :name="name"
+        :loading="loading"
+        :accept="accept"
+        :custom-text="uploadCustomText"
+        @upload="upload.onUpload"
+      />
+    </div>
+
+    <!-- Disabled + no images -->
     <div
-      v-else
+      v-if="!hasImages && disabled"
       class="vc-gallery__empty"
     >
-      <VcHint>{{ t("COMPONENTS.ORGANISMS.VC_GALLERY.GALLERY_IS_EMPTY") }}</VcHint>
+      <slot name="empty">
+        <VcHint>{{ t("COMPONENTS.ORGANISMS.VC_GALLERY.GALLERY_IS_EMPTY") }}</VcHint>
+      </slot>
+    </div>
+
+    <!-- Footer slot -->
+    <slot
+      name="footer"
+      :images="localImages"
+    />
+
+    <!-- Drag-over overlay -->
+    <div
+      v-if="isDragOver && !disabled"
+      class="vc-gallery__drop-overlay"
+    >
+      <VcIcon
+        icon="lucide-cloud-upload"
+        size="xxl"
+      />
+      <span>{{ t("COMPONENTS.ORGANISMS.VC_GALLERY.DROP_TO_UPLOAD") }}</span>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { MaybeRef, computed, ref, unref, watch, toValue } from "vue";
-import { ICommonAsset, IValidationRules } from "@core/types";
-import { VcLabel, VcFileUpload, VcHint } from "@ui/components";
-import VcGalleryItem from "@ui/components/organisms/vc-gallery/_internal/vc-gallery-item/vc-gallery-item.vue";
-import VcGalleryPreview from "@ui/components/organisms/vc-gallery/_internal/vc-gallery-preview/vc-gallery-preview.vue";
-import { usePopup } from "@shared/components/popup-handler/composables/usePopup";
+import { computed, ref, watch, toValue } from "vue";
+import type { ICommonAsset, IValidationRules } from "@core/types";
+import { VcFileUpload } from "@ui/components/molecules/vc-file-upload";
+import { VcHint } from "@ui/components/atoms/vc-hint";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import VcGalleryItem from "./_internal/vc-gallery-item/vc-gallery-item.vue";
+import VcImageUpload from "@ui/components/organisms/vc-image-upload/vc-image-upload.vue";
+import { useGalleryReorder } from "./composables/useGalleryReorder";
+import { useGalleryUpload } from "./composables/useGalleryUpload";
+import { useGalleryPreview } from "./composables/useGalleryPreview";
 import { useI18n } from "vue-i18n";
 
 export interface Props {
   images?: ICommonAsset[];
   disabled?: boolean;
-  required?: boolean;
-  label?: string;
-  tooltip?: string;
-  uploadIcon?: string;
   multiple?: boolean;
-  variant?: "gallery" | "file-upload";
-  itemActions?: {
-    preview: boolean;
-    edit: boolean;
-    remove: boolean;
-  };
-  hideAfterUpload?: boolean;
+  loading?: boolean;
+  itemActions?: { preview?: boolean; edit?: boolean; remove?: boolean };
   rules?: keyof IValidationRules | IValidationRules;
   name?: string;
-  loading?: boolean;
-  customText?: {
-    dragHere: string;
-    browse: string;
-  };
+  accept?: string;
+  // New props
+  size?: "sm" | "md" | "lg";
+  gap?: number;
+  imagefit?: "contain" | "cover";
+  // Deprecated props (kept for backward compat)
+  variant?: "gallery" | "file-upload";
+  hideAfterUpload?: boolean;
+  customText?: { dragHere: string; browse: string };
+  uploadIcon?: string;
+  label?: string;
+  tooltip?: string;
+  required?: boolean;
 }
 
 export interface Emits {
@@ -105,244 +193,232 @@ export interface Emits {
 
 const props = withDefaults(defineProps<Props>(), {
   images: () => [],
-  uploadIcon: "material-cloud_upload",
+  size: "md",
+  gap: 8,
+  imagefit: "contain",
   variant: "gallery",
-  itemActions: () => ({
-    preview: true,
-    edit: true,
-    remove: true,
-  }),
+  uploadIcon: "lucide-cloud-upload",
   name: "Gallery",
+  itemActions: () => ({ preview: true, edit: true, remove: true }),
 });
 
 const emit = defineEmits<Emits>();
 const { t } = useI18n({ useScope: "global" });
-const previewImageIndex = ref<number>();
-
-const defaultImages = ref<MaybeRef<ICommonAsset[]>>([]);
-const draggedItem = ref<ICommonAsset>();
-const draggedElement = ref<HTMLElement>();
-const galleryRef = ref<HTMLElement>();
-const reorderGalleryRef = ref<HTMLElement>();
-const dropPosition = ref<number>();
-
-const currentIndex = computed(() => previewImageIndex.value);
-const disableDrag = computed(() => defaultImages.value.length <= 1);
-const uploadHidden = ref(false);
-
-const { open } = usePopup(
-  computed(() => ({
-    component: VcGalleryPreview,
-    props: {
-      images: props.images,
-      index: currentIndex.value,
-    },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  })) as any,
+
+// Deprecation warnings (dev only)
+if (import.meta.env?.DEV) {
+  if (props.variant && props.variant !== "gallery") {
+    console.warn(`[VcGallery] prop "variant" is deprecated. Use <VcImageUpload> component for single-image uploads.`);
+  }
+  if (props.hideAfterUpload) {
+    console.warn(`[VcGallery] prop "hideAfterUpload" is deprecated. Use <VcImageUpload> instead.`);
+  }
+  if (props.customText) {
+    console.warn(`[VcGallery] prop "customText" is deprecated. Use <VcImageUpload> instead.`);
+  }
+  if (props.uploadIcon && props.uploadIcon !== "lucide-cloud-upload") {
+    console.warn(`[VcGallery] prop "uploadIcon" is deprecated. Use #empty slot for custom upload UI.`);
+  }
+  if (props.label) {
+    console.warn(`[VcGallery] prop "label" is deprecated. Use external <VcLabel> instead.`);
+  }
+  if (props.tooltip) {
+    console.warn(`[VcGallery] prop "tooltip" is deprecated. Use external <VcLabel> instead.`);
+  }
+  if (props.required) {
+    console.warn(`[VcGallery] prop "required" is deprecated. Use external <VcLabel> instead.`);
+  }
+}
+
+// Legacy single-image mode detection
+const isLegacySingleImageMode = computed(() => props.variant === "file-upload");
+const legacyPlaceholder = computed(() =>
+  props.customText ? { text: props.customText.dragHere, link: props.customText.browse } : undefined,
 );
 
+// Local images state
+const localImages = ref<ICommonAsset[]>([]);
 watch(
   () => props.images,
   (newVal) => {
-    defaultImages.value = unref(newVal);
-
-    if (props.hideAfterUpload) {
-      uploadHidden.value = !!defaultImages.value.length;
-    }
+    localImages.value = [...toValue(newVal)];
   },
   { deep: true, immediate: true },
 );
 
-const onUpload = (files: FileList) => {
-  if (files && files.length) {
-    const uploadedFiles: File[] = [];
-    const existingImageNames = defaultImages.value.map((image) => image.name);
-
-    Array.from(files).forEach((file: File) => {
-      let fileName = file.name;
-
-      if (existingImageNames.includes(fileName)) {
-        let index = 1;
-        const baseName = fileName.replace(/\.[^/.]+$/, "");
+const hasImages = computed(() => localImages.value.length > 0);
+const uploadCustomText = computed(() => ({
+  dragHere: t("COMPONENTS.ORGANISMS.VC_GALLERY.DRAG_IMAGES_HERE"),
+  browse: t("COMPONENTS.ORGANISMS.VC_GALLERY.BROWSE_IMAGES"),
+}));
 
-        while (existingImageNames.includes(fileName)) {
-          fileName = `${baseName}_${index}.${file.name.split(".").pop()}`;
-          index++;
-        }
-      }
+// Composables
+const reorder = useGalleryReorder(localImages, {
+  disabled: computed(() => !!props.disabled),
+  onSort: (sorted) => emit("sort", sorted),
+});
 
-      const modifiedFile = new File([file], fileName, { type: file.type });
+const upload = useGalleryUpload(localImages, {
+  onUpload: (files, sortOrder) => emit("upload", files, sortOrder),
+});
 
-      uploadedFiles.push(modifiedFile);
-    });
+const preview = useGalleryPreview(localImages);
 
-    const modifiedFileList = new DataTransfer();
-    uploadedFiles.forEach((file) => {
-      modifiedFileList.items.add(file);
-    });
+// Global drag-over (file from OS)
+const isDragOver = ref(false);
+let dragCounter = 0;
 
-    emit("upload", modifiedFileList.files, props.images[props.images.length - 1]?.sortOrder);
+function onGlobalDragEnter(event: DragEvent) {
+  if (event.dataTransfer?.types.includes("Files")) {
+    dragCounter++;
+    isDragOver.value = true;
   }
-};
-
-const onPreviewClick = (index: number) => {
-  previewImageIndex.value = index;
-
-  open();
-};
-
-const updateOrder = () => {
-  const images = defaultImages.value;
-  const sortedImgs = images.map((item, index) => {
-    item.sortOrder = index;
-    return item;
-  });
-
-  emit("sort", sortedImgs);
-};
+}
 
-function onItemMouseDown(event: MouseEvent & { currentTarget?: { draggable: boolean } }) {
-  if (!disableDrag.value && !props.disabled) {
-    event.currentTarget.draggable = true;
-    return;
+function onGlobalDragLeave(event: DragEvent) {
+  if (!event.dataTransfer?.types.includes("Files")) return;
+  dragCounter--;
+  if (dragCounter <= 0) {
+    isDragOver.value = false;
+    dragCounter = 0;
   }
 }
 
-function onItemDragStart(event: DragEvent, item: ICommonAsset) {
-  if (!disableDrag.value && !props.disabled) {
-    draggedItem.value = item;
-    draggedElement.value = event.target as HTMLElement;
-    event.dataTransfer?.setData("text", "gallery_reorder");
+function onGlobalDrop(event: DragEvent) {
+  isDragOver.value = false;
+  dragCounter = 0;
+  const files = event.dataTransfer?.files;
+  if (files && files.length) {
+    upload.onUpload(files);
   }
 }
+</script>
 
-function onItemDragOver(event: DragEvent) {
-  const dropItem = findParentElement(event.target as HTMLElement);
-
-  if (!disableDrag.value && !props.disabled && draggedItem.value && dropItem) {
-    event.preventDefault();
-
-    const containerOffset = galleryRef.value?.getBoundingClientRect();
-    const dropItemOffset = dropItem.getBoundingClientRect();
-
-    if (draggedElement.value !== dropItem && containerOffset) {
-      const elementStyle = getComputedStyle(dropItem);
-      const dropItemOffsetWidth = dropItem.offsetWidth + parseFloat(elementStyle.marginLeft);
-      const targetLeft = dropItemOffset.left - containerOffset.left;
-      const columnCenter = dropItemOffset.left + dropItemOffsetWidth / 2;
-
-      if (reorderGalleryRef.value) {
-        reorderGalleryRef.value.style.top = dropItemOffset.top - containerOffset.top + "px";
-        reorderGalleryRef.value.style.height = dropItem.offsetHeight + "px";
-
-        if (event.pageX > columnCenter) {
-          reorderGalleryRef.value.style.left = targetLeft + dropItemOffsetWidth + "px";
-          dropPosition.value = 1;
-        } else {
-          reorderGalleryRef.value.style.left = targetLeft - parseFloat(elementStyle.marginLeft) + "px";
-          dropPosition.value = -1;
-        }
-
-        reorderGalleryRef.value.style.display = "block";
-      }
-    }
-  }
+<style lang="scss">
+:root {
+  --gallery-gap: 8px;
+  --gallery-tile-min: 160px;
+  --gallery-tile-max: 200px;
+  --gallery-upload-border: var(--secondary-300);
+  --gallery-upload-border-hover: var(--primary-400);
+  --gallery-upload-bg-hover: var(--primary-50);
+  --gallery-drop-overlay-bg: rgba(255, 255, 255, 0.85);
+  --gallery-drop-overlay-border: var(--primary-400);
 }
 
-function onItemDragLeave(event: DragEvent) {
-  if (!disableDrag.value && !props.disabled && draggedItem.value && reorderGalleryRef.value) {
-    event.preventDefault();
+.vc-gallery {
+  @apply tw-relative;
 
-    reorderGalleryRef.value.style.display = "none";
+  &--sm {
+    --gallery-tile-min: 120px;
+    --gallery-tile-max: 160px;
   }
-}
 
-function onItemDrop(event: DragEvent, item: ICommonAsset) {
-  event.preventDefault();
+  &--md {
+    --gallery-tile-min: 160px;
+    --gallery-tile-max: 200px;
+  }
 
-  if (draggedItem.value) {
-    const dragIndex = defaultImages.value.indexOf(draggedItem.value);
-    const dropIndex = defaultImages.value.indexOf(item);
+  &--lg {
+    --gallery-tile-min: 200px;
+    --gallery-tile-max: 260px;
+  }
 
-    let allowDrop = dragIndex !== dropIndex;
+  &--drag-over {
+    @apply tw-rounded-lg tw-ring-2 tw-ring-[var(--gallery-drop-overlay-border)];
+    background: var(--gallery-upload-bg-hover);
+  }
 
-    if (
-      allowDrop &&
-      ((dropIndex - dragIndex === 1 && dropPosition.value === -1) ||
-        (dropIndex - dragIndex === -1 && dropPosition.value === 1))
-    ) {
-      allowDrop = false;
-    }
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--gallery-tile-min), var(--gallery-tile-max)));
+    gap: var(--gallery-gap);
+    @apply tw-relative;
+  }
 
-    if (allowDrop) {
-      reorderArray(defaultImages.value, dragIndex, dropIndex);
+  &__item {
+    @apply tw-min-w-0;
+  }
 
-      updateOrder();
-    }
+  &__upload-tile {
+    @apply tw-aspect-square tw-rounded-lg tw-border-2 tw-border-dashed tw-border-[var(--gallery-upload-border)] tw-transition-all tw-duration-200 tw-overflow-hidden;
 
-    if (reorderGalleryRef.value && draggedElement.value) {
-      reorderGalleryRef.value.style.display = "none";
-      draggedElement.value.draggable = false;
-      draggedItem.value = undefined;
-      dropPosition.value = undefined;
+    &:hover {
+      border-color: var(--gallery-upload-border-hover);
+      background: var(--gallery-upload-bg-hover);
     }
   }
-}
 
-function reorderArray(value: unknown[], from: number, to: number) {
-  if (value && from !== to) {
-    if (to >= value.length) {
-      to %= value.length;
-      from %= value.length;
-    }
+  &__upload-tile .vc-file-upload__container {
+    @apply tw-h-full;
+  }
 
-    value.splice(to, 0, value.splice(from, 1)[0]);
+  &__upload-tile .vc-file-upload__drop-zone {
+    @apply tw-border-0 tw-h-full tw-w-full tw-rounded-none tw-p-2 tw-justify-center;
+    min-height: unset;
+    background: transparent;
   }
-}
 
-function findParentElement(element: HTMLElement) {
-  if (element.classList.contains("vc-gallery__item")) {
-    return element;
-  } else {
-    let parent = element.parentElement;
+  &__upload-tile .vc-file-upload__text {
+    @apply tw-mt-2 tw-text-[11px] tw-leading-4 tw-whitespace-normal;
+  }
 
-    while (!(parent && parent.classList.contains("vc-gallery__item"))) {
-      parent = parent?.parentElement || null;
-      if (!parent) break;
-    }
-    return parent;
+  &__upload-tile .vc-file-upload__link {
+    @apply tw-text-[11px] tw-whitespace-normal;
   }
-}
-</script>
 
-<style lang="scss">
-:root {
-  --gallery-reorder-color: var(--primary-500);
-}
+  &__upload-tile .vc-file-upload__icon {
+    @apply tw-text-2xl;
+  }
 
-.vc-gallery {
-  &__container {
-    @apply tw-flex tw-flex-wrap tw-relative;
+  &__empty-upload {
+    @apply tw-w-full;
   }
 
-  &__wrapper {
-    @apply tw-flex tw-flex-wrap tw-w-full;
+  &__empty-upload .vc-file-upload__drop-zone {
+    @apply tw-min-h-[160px];
   }
 
-  &__item {
-    @apply tw-m-2;
+  &__empty {
+    @apply tw-flex tw-justify-center tw-p-5 tw-h-full tw-items-center;
   }
 
-  &__upload {
-    @apply tw-m-2;
+  &__item--dragging .vc-gallery-item {
+    box-shadow:
+      0 8px 24px -4px rgba(0, 0, 0, 0.15),
+      0 0 0 2px var(--primary-400) !important;
+    cursor: grabbing !important;
   }
 
-  &__reorder-line {
-    @apply tw-w-0.5 tw-bg-[color:var(--gallery-reorder-color)] tw-h-full tw-absolute tw-top-0 tw-bottom-0 tw-z-[2] tw-hidden;
+  &--reordering .vc-gallery-item {
+    @media (hover: hover) {
+      &:hover {
+        transform: none;
+        box-shadow: var(--gallery-tile-shadow);
+      }
+
+      &:hover .vc-gallery-item__tray {
+        @apply tw-translate-y-full;
+      }
+    }
   }
 
-  &__empty {
-    @apply tw-flex tw-justify-center tw-p-5 tw-h-full tw-items-center;
+  &__drop-overlay {
+    @apply tw-absolute tw-inset-0 tw-z-10 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-2 tw-rounded-lg tw-pointer-events-none;
+    background: var(--gallery-drop-overlay-bg);
+    border: 2px solid var(--gallery-drop-overlay-border);
+    backdrop-filter: blur(4px);
+    color: var(--gallery-drop-overlay-border);
   }
 }
+
+// FLIP animation for live-swap reorder
+.vc-gallery-swap-move {
+  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
+}
+
+.vc-gallery-swap-enter-active,
+.vc-gallery-swap-leave-active {
+  transition: none !important;
+}
 </style>

package/ui/components/organisms/vc-image-upload/index.ts

@@ -0,0 +1 @@
+export { default as VcImageUpload } from "./vc-image-upload.vue";