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

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

@@ -1,66 +1,98 @@
 <template>
   <VcPopup
     v-if="currentImage"
-    :title="currentImage?.title"
     is-mobile-fullscreen
-    is-fullscreen
-    modal-width="tw-w-full"
+    modal-width="vc-gallery-preview__modal"
     @close="$emit('close')"
-    @keydown.passive="handleKeyDown"
   >
     <template #header>
-      <div>
-        <span>{{ currentImage.name }} (</span>
-        <VcLink @click="copyLink(currentImage.url ?? '')">
-          {{ t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_PREVIEW.COPY_IMAGE_LINK") }}
-        </VcLink>
-        <span>)</span>
+      <div class="vc-gallery-preview__header">
+        <VcIcon
+          icon="material-image"
+          size="m"
+          class="vc-gallery-preview__header-icon"
+        />
+        <span
+          class="vc-gallery-preview__filename"
+          :title="currentImage.name"
+        >
+          {{ currentImage.name }}
+        </span>
+        <button
+          type="button"
+          class="vc-gallery-preview__action-btn"
+          :title="t('COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_PREVIEW.COPY_IMAGE_LINK')"
+          @click="onCopyLink"
+        >
+          <VcIcon
+            :icon="copied ? 'material-check' : 'material-link'"
+            size="s"
+          />
+        </button>
       </div>
     </template>
+
     <template #content>
-      <div class="vc-gallery-preview__content">
-        <div class="vc-gallery-preview__image-container">
-          <div
-            class="vc-gallery-preview__image-handler"
-            :style="imageHandler"
-          ></div>
+      <div class="vc-gallery-preview__body">
+        <!-- Image viewing area -->
+        <div class="vc-gallery-preview__stage">
+          <Transition
+            name="vc-gallery-preview-fade"
+            mode="out-in"
+          >
+            <img
+              :key="localIndex"
+              :src="currentImage.url"
+              :alt="currentImage.altText || currentImage.name || ''"
+              class="vc-gallery-preview__image"
+            />
+          </Transition>
+
+          <!-- Nav: previous -->
           <button
             v-if="localIndex > 0"
-            class="vc-gallery-preview__nav-btn vc-gallery-preview__nav-btn_left"
+            type="button"
+            class="vc-gallery-preview__nav vc-gallery-preview__nav--prev"
             @click="localIndex--"
           >
-            <VcIcon
-              icon="material-arrow_back"
-              size="xl"
-            ></VcIcon>
+            <VcIcon icon="material-chevron_left" size="l" />
           </button>
+
+          <!-- Nav: next -->
           <button
             v-if="localIndex < images.length - 1"
-            class="vc-gallery-preview__nav-btn vc-gallery-preview__nav-btn_right"
+            type="button"
+            class="vc-gallery-preview__nav vc-gallery-preview__nav--next"
             @click="localIndex++"
           >
-            <VcIcon
-              icon="material-arrow_forward"
-              size="xl"
-            ></VcIcon>
+            <VcIcon icon="material-chevron_right" size="l" />
           </button>
         </div>
-        <div class="vc-gallery-preview__thumbnails">
-          <div
-            v-for="(item, i) in images"
-            :key="i"
-            class="vc-gallery-preview__thumbnail"
-            :class="{ 'vc-gallery-preview__thumbnail_current': i === localIndex }"
-          >
-            <VcImage
-              :src="item.url"
-              size="xl"
-              background="contain"
-              :bordered="true"
-              :clickable="true"
+
+        <!-- Thumbnail strip -->
+        <div
+          v-if="images.length > 1"
+          class="vc-gallery-preview__filmstrip"
+        >
+          <div class="vc-gallery-preview__thumbs">
+            <button
+              v-for="(item, i) in images"
+              :key="i"
+              type="button"
+              class="vc-gallery-preview__thumb"
+              :class="{ 'vc-gallery-preview__thumb--active': i === localIndex }"
               @click="localIndex = i"
-            ></VcImage>
+            >
+              <img
+                :src="item.url"
+                :alt="item.name || ''"
+                class="vc-gallery-preview__thumb-img"
+              />
+            </button>
           </div>
+          <span class="vc-gallery-preview__counter">
+            {{ localIndex + 1 }}&thinsp;/&thinsp;{{ images.length }}
+          </span>
         </div>
       </div>
     </template>
@@ -68,9 +100,10 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from "vue";
-import { VcPopup, VcLink, VcIcon, VcImage } from "@ui/components";
-import { ICommonAsset } from "@core/types";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { VcPopup } from "@ui/components/organisms/vc-popup";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import type { ICommonAsset } from "@core/types";
 import { useI18n } from "vue-i18n";
 
 export interface Props {
@@ -82,7 +115,7 @@ export interface Emits {
   (event: "close"): void;
 }
 
-defineEmits<Emits>();
+const emit = defineEmits<Emits>();
 
 const props = withDefaults(defineProps<Props>(), {
   images: () => [],
@@ -90,77 +123,229 @@ const props = withDefaults(defineProps<Props>(), {
 });
 const { t } = useI18n({ useScope: "global" });
 const localIndex = ref(props.index);
-
-const imageHandler = computed(() => {
-  if (currentImage.value.url) {
-    return `background: url(${CSS.escape(currentImage.value.url)}) center / contain no-repeat`;
-  }
-  return undefined;
-});
+const copied = ref(false);
 
 const currentImage = computed(() => props.images[localIndex.value]);
 
-const copyLink = (link: string) => {
-  if (link.charAt(0) === "/") {
-    navigator.clipboard?.writeText(`${location.origin}${link}`);
-  } else {
-    navigator.clipboard?.writeText(link);
-  }
-};
+watch(
+  () => props.index,
+  (nextIndex) => {
+    localIndex.value = nextIndex;
+  },
+);
+
+function onCopyLink() {
+  const link = currentImage.value?.url ?? "";
+  const fullLink = link.charAt(0) === "/" ? `${location.origin}${link}` : link;
+  navigator.clipboard?.writeText(fullLink);
+
+  copied.value = true;
+  setTimeout(() => {
+    copied.value = false;
+  }, 1500);
+}
 
 function handleKeyDown(event: KeyboardEvent) {
   if (event.key === "ArrowLeft" && localIndex.value > 0) {
     localIndex.value--;
   } else if (event.key === "ArrowRight" && localIndex.value < props.images.length - 1) {
     localIndex.value++;
+  } else if (event.key === "Escape") {
+    event.preventDefault();
+    emit("close");
   }
 }
+
+onMounted(() => {
+  window.addEventListener("keydown", handleKeyDown);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("keydown", handleKeyDown);
+});
 </script>
 
 <style lang="scss">
 :root {
-  --gallery-preview-btn-bg-color: var(--secondary-50);
-  --gallery-preview-btn-icon-color: var(--secondary-400);
-  --gallery-preview-btn-shadow-color: var(--neutrals-950);
-  --gallery-preview-btn-shadow: 0 0 20px rgb(from var(--gallery-preview-btn-shadow-color) r g b / 15%);
-  --gallery-preview-overlay-color: var(--primary-400);
+  --gp-stage-bg: var(--neutrals-50);
+  --gp-nav-size: 44px;
+  --gp-nav-bg: rgba(255, 255, 255, 0.92);
+  --gp-nav-color: var(--secondary-700);
+  --gp-nav-shadow: 0 1px 6px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.04);
+  --gp-thumb-ring: var(--primary-400);
+  --gp-thumb-size: 56px;
+  --gp-border: var(--secondary-200);
+  --gp-counter-color: var(--secondary-500);
+  --gp-header-icon: var(--secondary-400);
+  --gp-action-btn-bg: var(--neutrals-100);
+  --gp-action-btn-hover: var(--neutrals-200);
+  --gp-action-btn-color: var(--secondary-600);
+  --gp-copied-color: var(--success-500);
+}
+
+/* ---------- Modal sizing ---------- */
+.vc-gallery-preview__modal {
+  width: 90vw;
+  max-width: 1400px;
+  height: calc(90vh - 40px);
+
+  /* Override VcPopup internals: remove padding so preview goes edge-to-edge,
+     and stretch content to full panel height */
+  .vc-popup__content {
+    @apply tw-p-0 tw-min-h-0 tw-flex-col;
+  }
+
+  .vc-popup__content-inner {
+    @apply tw-items-stretch tw-min-h-0;
+  }
+
+  .vc-popup__content-wrapper {
+    @apply tw-self-stretch tw-flex-col tw-min-h-0;
+  }
 }
 
+/* ---------- Header ---------- */
 .vc-gallery-preview {
-  &__content {
-    @apply tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center;
+  &__header {
+    @apply tw-flex tw-items-center tw-gap-2 tw-min-w-0 tw-mr-2;
+  }
+
+  &__header-icon {
+    @apply tw-shrink-0;
+    color: var(--gp-header-icon);
+  }
+
+  &__filename {
+    @apply tw-font-medium tw-truncate tw-min-w-0;
   }
 
-  &__image-container {
-    @apply tw-box-border tw-p-5 tw-grow tw-basis-0 tw-w-full tw-relative;
+  &__action-btn {
+    @apply tw-shrink-0 tw-flex tw-items-center tw-justify-center
+      tw-w-7 tw-h-7 tw-rounded tw-border-0 tw-cursor-pointer
+      tw-transition-colors tw-duration-150;
+    background: var(--gp-action-btn-bg);
+    color: var(--gp-action-btn-color);
+
+    &:hover {
+      background: var(--gp-action-btn-hover);
+    }
+  }
+
+  /* Copied state: icon turns green */
+  &__action-btn .vc-icon--material-check {
+    color: var(--gp-copied-color);
+  }
+
+  /* ---------- Body ---------- */
+  &__body {
+    @apply tw-flex tw-flex-col tw-h-full tw-min-h-0;
+  }
+
+  /* ---------- Image stage ---------- */
+  &__stage {
+    @apply tw-relative tw-flex tw-items-center tw-justify-center
+      tw-flex-1 tw-min-h-0 tw-overflow-hidden;
+    background: var(--gp-stage-bg);
+    border-top: 1px solid var(--gp-border);
   }
 
-  &__image-handler {
-    @apply tw-w-full tw-h-full tw-box-border;
+  &__image {
+    @apply tw-max-w-full tw-max-h-full tw-object-contain tw-select-none tw-p-8;
   }
 
-  &__nav-btn {
-    @apply tw-absolute tw-top-2/4 tw-h-[72px] tw-w-[72px] tw-flex tw-items-center tw-justify-center tw-rounded-full tw-bg-[var(--gallery-preview-btn-bg-color)] tw-cursor-pointer tw-text-[color:var(--gallery-preview-btn-icon-color)] hover:[box-shadow:var(--gallery-preview-btn-shadow)];
+  /* ---------- Nav buttons ---------- */
+  &__nav {
+    @apply tw-absolute tw-top-1/2 -tw-translate-y-1/2
+      tw-flex tw-items-center tw-justify-center
+      tw-rounded-full tw-cursor-pointer tw-border-0
+      tw-opacity-0 tw-transition-all tw-duration-200;
+    width: var(--gp-nav-size);
+    height: var(--gp-nav-size);
+    background: var(--gp-nav-bg);
+    color: var(--gp-nav-color);
+    box-shadow: var(--gp-nav-shadow);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
 
-    &_left {
-      @apply tw-left-[25px];
+    &--prev {
+      @apply tw-left-4;
     }
 
-    &_right {
-      @apply tw-right-[25px];
+    &--next {
+      @apply tw-right-4;
+    }
+
+    &:hover {
+      @apply tw-opacity-100 tw-scale-105;
+    }
+
+    &:active {
+      @apply tw-scale-95;
     }
   }
 
-  &__thumbnails {
-    @apply tw-p-4 tw-pb-[40px] tw-max-w-full tw-overflow-x-auto tw-box-border tw-shrink tw-flex;
+  &__stage:hover &__nav {
+    @apply tw-opacity-100;
   }
 
-  &__thumbnail {
-    @apply tw-m-1 tw-opacity-60;
+  @media (hover: none) {
+    &__nav {
+      @apply tw-opacity-100;
+    }
+  }
 
-    &_current {
-      @apply tw-opacity-100 tw-relative after:tw-content-[''] after:tw-bg-[var(--gallery-preview-overlay-color)] after:tw-h-1 after:tw-w-full after:tw-rounded-[5px] after:tw-absolute after:tw-left-0 after:-tw-bottom-[12px];
+  /* ---------- Filmstrip ---------- */
+  &__filmstrip {
+    @apply tw-flex tw-items-center tw-gap-3 tw-px-4 tw-py-3 tw-shrink-0;
+    background: var(--popup-bg, #fff);
+    border-top: 1px solid var(--gp-border);
+  }
+
+  &__thumbs {
+    @apply tw-flex tw-gap-1.5 tw-overflow-x-auto tw-flex-1;
+    -webkit-overflow-scrolling: touch;
+
+    /* Hide scrollbar */
+    scrollbar-width: none;
+    &::-webkit-scrollbar { display: none; }
+  }
+
+  &__thumb {
+    @apply tw-shrink-0 tw-rounded-md tw-overflow-hidden
+      tw-cursor-pointer tw-border-2 tw-border-solid
+      tw-p-0 tw-bg-transparent
+      tw-opacity-60 tw-transition-all tw-duration-200;
+    width: var(--gp-thumb-size);
+    height: var(--gp-thumb-size);
+    border-color: var(--gp-border);
+
+    &:hover {
+      @apply tw-opacity-90;
+    }
+
+    &--active {
+      @apply tw-opacity-100;
+      border-color: var(--gp-thumb-ring);
     }
   }
+
+  &__thumb-img {
+    @apply tw-w-full tw-h-full tw-object-cover;
+  }
+
+  &__counter {
+    @apply tw-text-xs tw-shrink-0 tw-tabular-nums tw-font-medium;
+    color: var(--gp-counter-color);
+  }
+}
+
+/* ---------- Crossfade transition ---------- */
+.vc-gallery-preview-fade-enter-active,
+.vc-gallery-preview-fade-leave-active {
+  transition: opacity 180ms ease;
+}
+.vc-gallery-preview-fade-enter-from,
+.vc-gallery-preview-fade-leave-to {
+  opacity: 0;
 }
 </style>

package/ui/components/organisms/vc-gallery/composables/index.ts

@@ -0,0 +1,4 @@
+export { useImageLoad } from "./useImageLoad";
+export { useGalleryUpload } from "./useGalleryUpload";
+export { useGalleryReorder } from "./useGalleryReorder";
+export { useGalleryPreview } from "./useGalleryPreview";

package/ui/components/organisms/vc-gallery/composables/useGalleryPreview.ts

@@ -0,0 +1,26 @@
+import { computed, ref, Ref, toValue } from "vue";
+import { usePopup } from "@shared/components/popup-handler/composables/usePopup";
+import VcGalleryPreview from "../_internal/vc-gallery-preview/vc-gallery-preview.vue";
+import type { ICommonAsset } from "@core/types";
+
+export function useGalleryPreview(images: Ref<ICommonAsset[]>) {
+  const previewIndex = ref(0);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { open } = usePopup(
+    computed(() => ({
+      component: VcGalleryPreview,
+      props: {
+        images: toValue(images),
+        index: previewIndex.value,
+      },
+    })) as any,
+  );
+
+  function openPreview(index: number) {
+    previewIndex.value = index;
+    open();
+  }
+
+  return { openPreview };
+}

package/ui/components/organisms/vc-gallery/composables/useGalleryReorder.test.ts

@@ -0,0 +1,73 @@
+import { describe, it, expect, vi } from "vitest";
+import { ref } from "vue";
+import { useGalleryReorder } from "./useGalleryReorder";
+import type { ICommonAsset } from "@core/types";
+
+describe("useGalleryReorder", () => {
+  it("disableDrag is true when images <= 1", () => {
+    const images = ref<ICommonAsset[]>([{ name: "a.png", sortOrder: 0 }]);
+    const { disableDrag } = useGalleryReorder(images, { disabled: ref(false), onSort: vi.fn() });
+    expect(disableDrag.value).toBe(true);
+  });
+
+  it("disableDrag is false when images > 1", () => {
+    const images = ref<ICommonAsset[]>([
+      { name: "a.png", sortOrder: 0 },
+      { name: "b.png", sortOrder: 1 },
+    ]);
+    const { disableDrag } = useGalleryReorder(images, { disabled: ref(false), onSort: vi.fn() });
+    expect(disableDrag.value).toBe(false);
+  });
+
+  it("disableDrag is true when disabled prop is true", () => {
+    const images = ref<ICommonAsset[]>([
+      { name: "a.png", sortOrder: 0 },
+      { name: "b.png", sortOrder: 1 },
+    ]);
+    const { disableDrag } = useGalleryReorder(images, { disabled: ref(true), onSort: vi.fn() });
+    expect(disableDrag.value).toBe(true);
+  });
+
+  it("returns isDragging and draggedId refs", () => {
+    const images = ref<ICommonAsset[]>([
+      { name: "a.png", sortOrder: 0 },
+      { name: "b.png", sortOrder: 1 },
+    ]);
+    const { isDragging, draggedId } = useGalleryReorder(images, { disabled: ref(false), onSort: vi.fn() });
+    expect(isDragging.value).toBe(false);
+    expect(draggedId.value).toBeUndefined();
+  });
+
+  it("enables draggable only from drag handle", () => {
+    const images = ref<ICommonAsset[]>([
+      { id: "1", name: "a.png", sortOrder: 0 },
+      { id: "2", name: "b.png", sortOrder: 1 },
+    ]);
+    const { reorderHandlers } = useGalleryReorder(images, { disabled: ref(false), onSort: vi.fn() });
+
+    const tile = document.createElement("div");
+    const handle = document.createElement("div");
+    handle.className = "vc-gallery-item__drag-handle";
+    tile.appendChild(handle);
+
+    reorderHandlers.onItemMouseDown({ currentTarget: tile, target: handle, button: 0 } as unknown as MouseEvent);
+
+    expect(tile.draggable).toBe(true);
+  });
+
+  it("does not enable draggable when clicking action controls", () => {
+    const images = ref<ICommonAsset[]>([
+      { id: "1", name: "a.png", sortOrder: 0 },
+      { id: "2", name: "b.png", sortOrder: 1 },
+    ]);
+    const { reorderHandlers } = useGalleryReorder(images, { disabled: ref(false), onSort: vi.fn() });
+
+    const tile = document.createElement("div");
+    const actionButton = document.createElement("button");
+    tile.appendChild(actionButton);
+
+    reorderHandlers.onItemMouseDown({ currentTarget: tile, target: actionButton, button: 0 } as unknown as MouseEvent);
+
+    expect(tile.draggable).toBe(false);
+  });
+});