@vc-shell/framework 1.2.4-beta.7 → 2.0.0-alpha.0

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

@@ -1,244 +0,0 @@
-<template>
-  <div
-    v-on-click-outside="deactivate"
-    class="vc-gallery-item"
-    :class="{
-      'vc-gallery-item--active': isActive,
-      'vc-gallery-item--readonly': readonly,
-    }"
-    @click="onTileClick"
-  >
-    <!-- Skeleton shimmer -->
-    <div
-      v-if="!imageState.isLoaded.value"
-      class="vc-gallery-item__skeleton"
-    />
-
-    <!-- Actual image -->
-    <img
-      v-if="image.url"
-      :src="image.url"
-      :alt="image.altText || image.name || ''"
-      class="vc-gallery-item__image"
-      :class="{ 'vc-gallery-item__image--loaded': imageState.isLoaded.value }"
-      :style="{ objectFit: imageFit }"
-      @load="imageState.onLoad"
-      @error="imageState.onError"
-    />
-
-    <!-- Drag handle (top-left, visible on hover) -->
-    <div
-      v-if="!readonly && !disableDrag"
-      class="vc-gallery-item__drag-handle"
-    >
-      <VcIcon
-        icon="material-drag_indicator"
-        size="s"
-      />
-    </div>
-
-    <!-- Slide-up tray -->
-    <div class="vc-gallery-item__tray">
-      <div class="vc-gallery-item__tray-actions">
-        <button
-          v-if="actions?.preview !== false"
-          type="button"
-          class="vc-gallery-item__action-btn"
-          :title="t('COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.FULLSCREEN')"
-          @click.stop="$emit('preview', image)"
-        >
-          <VcIcon icon="material-open_in_full" size="s" />
-        </button>
-        <button
-          v-if="!readonly && actions?.edit !== false"
-          type="button"
-          class="vc-gallery-item__action-btn"
-          :title="t('COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.EDIT')"
-          @click.stop="$emit('edit', image)"
-        >
-          <VcIcon icon="material-edit" size="s" />
-        </button>
-        <button
-          v-if="!readonly && actions?.remove !== false"
-          type="button"
-          class="vc-gallery-item__action-btn vc-gallery-item__action-btn--danger"
-          :title="t('COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.DELETE')"
-          @click.stop="$emit('remove', image)"
-        >
-          <VcIcon icon="material-delete" size="s" />
-        </button>
-      </div>
-      <div
-        class="vc-gallery-item__tray-name"
-        :title="image.name"
-      >
-        {{ image.name }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, toRef } from "vue";
-import { vOnClickOutside } from "@vueuse/components";
-import type { ICommonAsset } from "@core/types";
-import { VcIcon } from "@ui/components/atoms/vc-icon";
-import { useI18n } from "vue-i18n";
-import { useImageLoad } from "../../composables/useImageLoad";
-
-export interface Props {
-  image: ICommonAsset;
-  readonly?: boolean;
-  actions?: {
-    preview?: boolean;
-    edit?: boolean;
-    remove?: boolean;
-  };
-  disableDrag?: boolean;
-  imageFit?: "contain" | "cover";
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  image: () => ({}) as ICommonAsset,
-  readonly: false,
-  disableDrag: false,
-  imageFit: "contain",
-});
-
-defineEmits<{
-  (e: "preview", image: ICommonAsset): void;
-  (e: "edit", image: ICommonAsset): void;
-  (e: "remove", image: ICommonAsset): void;
-}>();
-
-const { t } = useI18n({ useScope: "global" });
-const isActive = ref(false);
-const imageState = useImageLoad(toRef(() => props.image.url));
-
-function onTileClick() {
-  if (window.matchMedia("(hover: none)").matches) {
-    isActive.value = !isActive.value;
-  }
-}
-
-function deactivate() {
-  isActive.value = false;
-}
-</script>
-
-<style lang="scss">
-:root {
-  --gallery-tile-radius: 8px;
-  --gallery-tile-border: var(--secondary-200);
-  --gallery-tile-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
-  --gallery-tile-shadow-hover: 0 4px 12px rgb(0 0 0 / 0.1);
-  --gallery-tray-bg: rgba(255, 255, 255, 0.85);
-  --gallery-tray-blur: 12px;
-  --gallery-skeleton-from: var(--secondary-100);
-  --gallery-skeleton-to: var(--secondary-200);
-  --gallery-action-btn-color: var(--secondary-600);
-  --gallery-action-btn-hover: var(--primary-500);
-  --gallery-action-btn-danger: var(--danger-500);
-  --gallery-drag-handle-color: var(--secondary-400);
-}
-
-.vc-gallery-item {
-  @apply tw-relative tw-overflow-hidden tw-box-border tw-border tw-border-solid
-    tw-bg-[var(--base-1,#fff)]
-    tw-border-[var(--gallery-tile-border)]
-    tw-rounded-[var(--gallery-tile-radius)]
-    tw-aspect-square
-    tw-transition-all tw-duration-200 tw-ease-out;
-  box-shadow: var(--gallery-tile-shadow);
-  /* Force proper border-radius clipping when transform is applied on hover */
-  -webkit-mask-image: radial-gradient(white, black);
-
-  &__image {
-    @apply tw-w-full tw-h-full tw-block tw-opacity-0 tw-transition-opacity tw-duration-300;
-
-    &--loaded {
-      @apply tw-opacity-100;
-    }
-  }
-
-  &__skeleton {
-    @apply tw-absolute tw-inset-0;
-    background: linear-gradient(
-      90deg,
-      var(--gallery-skeleton-from) 25%,
-      var(--gallery-skeleton-to) 50%,
-      var(--gallery-skeleton-from) 75%
-    );
-    background-size: 200% 100%;
-    animation: gallery-shimmer 1.5s infinite ease-in-out;
-  }
-
-  &__drag-handle {
-    @apply tw-absolute tw-top-1 tw-left-1 tw-opacity-0 tw-transition-opacity tw-duration-200
-      tw-cursor-move tw-z-[1] tw-p-0.5 tw-rounded;
-    color: var(--gallery-drag-handle-color);
-  }
-
-  &__tray {
-    @apply tw-absolute tw-bottom-0 tw-left-0 tw-right-0
-      tw-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1.5
-      tw-translate-y-full tw-transition-transform tw-duration-200 tw-ease-out;
-    background: var(--gallery-tray-bg);
-    backdrop-filter: blur(var(--gallery-tray-blur)) saturate(1.5);
-  }
-
-  &__tray-actions {
-    @apply tw-flex tw-gap-1 tw-shrink-0;
-  }
-
-  &__action-btn {
-    @apply tw-flex tw-items-center tw-justify-center tw-w-7 tw-h-7
-      tw-rounded tw-cursor-pointer tw-transition-colors tw-duration-150
-      tw-border-0 tw-bg-transparent;
-    color: var(--gallery-action-btn-color);
-
-    &:hover {
-      color: var(--gallery-action-btn-hover);
-      @apply tw-bg-[var(--primary-50)];
-    }
-
-    &--danger:hover {
-      color: var(--gallery-action-btn-danger);
-      @apply tw-bg-[var(--danger-50)];
-    }
-  }
-
-  &__tray-name {
-    @apply tw-truncate tw-text-xs tw-ml-auto;
-    color: var(--gallery-action-btn-color);
-  }
-
-  @media (hover: hover) {
-    &:hover {
-      transform: translateY(-2px);
-      box-shadow: var(--gallery-tile-shadow-hover);
-    }
-
-    &:hover &__tray {
-      @apply tw-translate-y-0;
-    }
-
-    &:hover &__drag-handle {
-      @apply tw-opacity-100;
-    }
-  }
-
-  &--active &__tray {
-    @apply tw-translate-y-0;
-  }
-
-  &--active &__drag-handle {
-    @apply tw-opacity-100;
-  }
-}
-
-@keyframes gallery-shimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-</style>

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

@@ -1,351 +0,0 @@
-<template>
-  <VcPopup
-    v-if="currentImage"
-    is-mobile-fullscreen
-    modal-width="vc-gallery-preview__modal"
-    @close="$emit('close')"
-  >
-    <template #header>
-      <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__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"
-            type="button"
-            class="vc-gallery-preview__nav vc-gallery-preview__nav--prev"
-            @click="localIndex--"
-          >
-            <VcIcon icon="material-chevron_left" size="l" />
-          </button>
-
-          <!-- Nav: next -->
-          <button
-            v-if="localIndex < images.length - 1"
-            type="button"
-            class="vc-gallery-preview__nav vc-gallery-preview__nav--next"
-            @click="localIndex++"
-          >
-            <VcIcon icon="material-chevron_right" size="l" />
-          </button>
-        </div>
-
-        <!-- 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"
-            >
-              <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>
-  </VcPopup>
-</template>
-
-<script lang="ts" setup>
-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 {
-  images?: ICommonAsset[];
-  index: number;
-}
-
-export interface Emits {
-  (event: "close"): void;
-}
-
-const emit = defineEmits<Emits>();
-
-const props = withDefaults(defineProps<Props>(), {
-  images: () => [],
-  index: 0,
-});
-const { t } = useI18n({ useScope: "global" });
-const localIndex = ref(props.index);
-const copied = ref(false);
-
-const currentImage = computed(() => props.images[localIndex.value]);
-
-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 {
-  --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 {
-  &__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;
-  }
-
-  &__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 {
-    @apply tw-max-w-full tw-max-h-full tw-object-contain tw-select-none tw-p-8;
-  }
-
-  /* ---------- 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);
-
-    &--prev {
-      @apply tw-left-4;
-    }
-
-    &--next {
-      @apply tw-right-4;
-    }
-
-    &:hover {
-      @apply tw-opacity-100 tw-scale-105;
-    }
-
-    &:active {
-      @apply tw-scale-95;
-    }
-  }
-
-  &__stage:hover &__nav {
-    @apply tw-opacity-100;
-  }
-
-  @media (hover: none) {
-    &__nav {
-      @apply tw-opacity-100;
-    }
-  }
-
-  /* ---------- 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

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

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

@@ -1,73 +0,0 @@
-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);
-  });
-});