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

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

@@ -12,59 +12,76 @@
     ]"
     :style="{ width: typeof width === 'number' ? `${width}px` : width }"
   >
-    <!-- Init blade header -->
-    <BladeHeader
-      v-if="!($isMobile.value && blades.length === 1 && !$slots['actions'])"
-      class="vc-blade__header"
-      :closable="closable"
-      :icon="icon"
-      :title="title"
-      :subtitle="subtitle"
-      :modified="modified"
-      @close="$emit('close')"
-      @expand="$emit('expand')"
-      @collapse="$emit('collapse')"
-    >
-      <template #prepend>
-        <component
-          :is="backButton"
-          v-if="backButton && $isMobile.value"
-          class="vc-blade__back-button"
-        />
-
-        <div
-          v-if="blade.breadcrumbs?.length && $isDesktop.value"
-          class="vc-blade__breadcrumbs"
-        >
-          <VcBreadcrumbs :items="blade.breadcrumbs" collapsed>
-            <template #trigger="{ click, isActive }">
-              <VcButton
-                text
-                icon="lucide-ellipsis-vertical"
-                icon-size="xl"
-                class="vc-blade__breadcrumbs-button"
-                :class="{
-                  'vc-blade__breadcrumbs-button--active': isActive,
-                }"
-                @click="click"
-              />
-            </template>
-          </VcBreadcrumbs>
-        </div>
-      </template>
-
-      <template
-        v-if="$slots['actions']"
-        #actions
+    <!-- Header zone: v-show keeps BladeHeader mounted to avoid Teleport unmount bug -->
+    <template v-if="!($isMobile.value && blades.length === 1 && !$slots['actions'])">
+      <BladeHeaderSkeleton
+        v-if="showSkeleton"
+        class="vc-blade__header"
+      />
+      <BladeHeader
+        v-show="!showSkeleton"
+        class="vc-blade__header"
+        :closable="closable"
+        :icon="icon"
+        :title="title"
+        :subtitle="subtitle"
+        :modified="modified"
+        @close="$emit('close')"
+        @expand="$emit('expand')"
+        @collapse="$emit('collapse')"
       >
-        <slot name="actions"></slot>
-      </template>
-    </BladeHeader>
+        <template #prepend>
+          <component
+            :is="backButton"
+            v-if="backButton && $isMobile.value"
+            class="vc-blade__back-button"
+          />
+
+          <div
+            v-if="blade.breadcrumbs?.length && $isDesktop.value"
+            class="vc-blade__breadcrumbs"
+          >
+            <VcBreadcrumbs
+              :items="blade.breadcrumbs"
+              collapsed
+            >
+              <template #trigger="{ click, isActive }">
+                <VcButton
+                  text
+                  icon="lucide-ellipsis-vertical"
+                  icon-size="xl"
+                  class="vc-blade__breadcrumbs-button"
+                  :class="{
+                    'vc-blade__breadcrumbs-button--active': isActive,
+                  }"
+                  @click="click"
+                />
+              </template>
+            </VcBreadcrumbs>
+          </div>
+        </template>
+
+        <template
+          v-if="$slots['actions']"
+          #actions
+        >
+          <slot name="actions"></slot>
+        </template>
+      </BladeHeader>
+    </template>
 
-    <BladeStatusBanners :modified="modified" />
+    <BladeStatusBanners
+      v-if="!showSkeleton"
+      :modified="modified"
+    />
 
-    <!-- Set up blade toolbar -->
+    <!-- Toolbar zone -->
+    <BladeToolbarSkeleton
+      v-if="showSkeleton"
+      class="vc-blade__toolbar"
+    />
     <BladeToolbar
+      v-else
       class="vc-blade__toolbar"
       :items="toolbarItems"
     >
@@ -73,7 +90,10 @@
       </template>
     </BladeToolbar>
 
+    <!-- Content zone -->
+    <BladeContentSkeleton v-if="showSkeleton" />
     <div
+      v-else
       ref="contentRef"
       class="vc-blade__content"
     >
@@ -95,13 +115,16 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, inject } from "vue";
+import { ref, inject, computed, onMounted, nextTick } from "vue";
 import { IBladeToolbar } from "@core/types";
 import { useBladeNavigation } from "@shared";
 import BladeHeader from "@ui/components/organisms/vc-blade/_internal/BladeHeader.vue";
+import BladeHeaderSkeleton from "@ui/components/organisms/vc-blade/_internal/BladeHeaderSkeleton.vue";
 import BladeToolbar from "@ui/components/organisms/vc-blade/_internal/BladeToolbar.vue";
+import BladeToolbarSkeleton from "@ui/components/organisms/vc-blade/_internal/BladeToolbarSkeleton.vue";
+import BladeContentSkeleton from "@ui/components/organisms/vc-blade/_internal/BladeContentSkeleton.vue";
 import BladeStatusBanners from "@ui/components/organisms/vc-blade/_internal/BladeStatusBanners.vue";
-import { VcButton } from "@ui/components";
+import { VcButton } from "@ui/components/atoms/vc-button";
 import { BladeInstance, BLADE_BACK_BUTTON } from "@framework/injection-keys";
 import WidgetContainer from "@ui/components/organisms/vc-blade/_internal/widgets/WidgetContainer.vue";
 import { DEFAULT_BLADE_INSTANCE } from "@ui/components/organisms/vc-blade/constants";
@@ -115,6 +138,8 @@ export interface Props {
   closable?: boolean;
   toolbarItems?: IBladeToolbar[];
   modified?: boolean;
+  /** When true, shows skeleton placeholders for all blade zones */
+  loading?: boolean;
 }
 
 export interface Emits {
@@ -127,13 +152,24 @@ defineOptions({
   inheritAttrs: false,
 });
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   width: "30%",
   closable: true,
   toolbarItems: () => [],
   modified: undefined,
 });
 
+// Prevent flash of empty content on initial render.
+// useAsync starts with loading=false; the action (setting true) runs in onMounted.
+// Without this guard, VcBlade renders real (empty) content for 1 frame before skeleton appears.
+const isInitializing = ref(props.loading !== undefined);
+onMounted(() => {
+  nextTick(() => {
+    isInitializing.value = false;
+  });
+});
+const showSkeleton = computed(() => Boolean(props.loading) || isInitializing.value);
+
 const slots = defineSlots<{
   actions(): void;
   default(): void;
@@ -194,10 +230,12 @@ const contentRef = ref<HTMLElement | null>(null);
   @apply tw-relative tw-flex tw-shrink-0 tw-flex-col tw-overflow-hidden;
   @apply tw-bg-[color:var(--blade-background-color)] tw-border tw-border-solid tw-border-[--blade-border-color];
   // Use shared transition timing for synchronized animations with AI panel
-  transition: width var(--app-panel-transition-duration, 0.3s) var(--app-panel-transition-timing, cubic-bezier(0.4, 0, 0.2, 1));
+  transition: width var(--app-panel-transition-duration, 0.3s)
+    var(--app-panel-transition-timing, cubic-bezier(0.4, 0, 0.2, 1));
 
   &__back-button {
     @apply tw-mr-[14px];
+    flex: none;
   }
 
   &--mobile {
@@ -223,7 +261,6 @@ const contentRef = ref<HTMLElement | null>(null);
     }
   }
 
-
   &__toolbar {
     @apply tw-shrink-0;
 
@@ -267,10 +304,9 @@ const contentRef = ref<HTMLElement | null>(null);
       }
     }
   }
-
 }
 
-.vc-app_mobile .vc-blade {
+.vc-app--mobile .vc-blade {
   @apply tw-m-0 tw-rounded-none;
 }
 </style>

package/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.vue

@@ -298,7 +298,7 @@
       ></VcInput>
     </template>
     <template
-      v-if="computedProperty.valueType === 'Color' && computedProperty.dictionary && !computedProperty.multivalue"
+      v-else-if="computedProperty.valueType === 'Color' && computedProperty.dictionary && !computedProperty.multivalue"
     >
       <VcSelect
         v-bind="$attrs"
@@ -347,8 +347,11 @@
 import { ref, onMounted, computed, Ref, watch } from "vue";
 import { Field } from "vee-validate";
 import { useI18n } from "vue-i18n";
-import { VcSelect, VcInput, VcTextarea, VcSwitch } from "@ui/components";
-import * as _ from "lodash-es";
+import { VcSelect } from "@ui/components/molecules/vc-select";
+import { VcInput } from "@ui/components/molecules/vc-input";
+import { VcTextarea } from "@ui/components/molecules/vc-textarea";
+import { VcSwitch } from "@ui/components/molecules/vc-switch";
+import { cloneDeep } from "lodash-es";
 import { convertColorNameToHex } from "@shared/utilities";
 
 type IValidationRules = {
@@ -422,7 +425,7 @@ const measureUnit = ref<Record<string, any>>();
 watch(
   () => props.property,
   (newVal) => {
-    internalProperty.value = _.cloneDeep(newVal);
+    internalProperty.value = cloneDeep(newVal);
   },
   {
     deep: true,
@@ -433,7 +436,7 @@ watch(
 watch(
   () => props.modelValue,
   (newVal) => {
-    internalModel.value = _.cloneDeep(newVal);
+    internalModel.value = cloneDeep(newVal);
   },
   {
     deep: true,

package/ui/components/organisms/vc-gallery/_internal/vc-gallery-item/vc-gallery-item.test.ts

@@ -0,0 +1,48 @@
+import { beforeAll, describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import { createI18n } from "vue-i18n";
+import VcGalleryItem from "./vc-gallery-item.vue";
+
+const i18n = createI18n({ legacy: false, locale: "en", messages: { en: {} } });
+
+beforeAll(() => {
+  if (!window.matchMedia) {
+    // jsdom fallback for touch/hover detection in component click handler
+    window.matchMedia = ((query: string) =>
+      ({
+        matches: query === "(hover: none)",
+        media: query,
+        onchange: null,
+        addListener: () => undefined,
+        removeListener: () => undefined,
+        addEventListener: () => undefined,
+        removeEventListener: () => undefined,
+        dispatchEvent: () => false,
+      }) as MediaQueryList);
+  }
+});
+
+describe("VcGalleryItem actions", () => {
+  it("emits preview/edit/remove on action button click", async () => {
+    const wrapper = mount(VcGalleryItem, {
+      props: {
+        image: { id: "1", name: "image.jpg", url: "https://example.com/image.jpg" },
+        readonly: false,
+      },
+      global: {
+        plugins: [i18n],
+      },
+    });
+
+    const buttons = wrapper.findAll(".vc-gallery-item__action-btn");
+    expect(buttons.length).toBe(3);
+
+    await buttons[0].trigger("click");
+    await buttons[1].trigger("click");
+    await buttons[2].trigger("click");
+
+    expect(wrapper.emitted("preview")?.length).toBe(1);
+    expect(wrapper.emitted("edit")?.length).toBe(1);
+    expect(wrapper.emitted("remove")?.length).toBe(1);
+  });
+});

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

@@ -1,163 +1,244 @@
 <template>
   <div
-    v-on-click-outside="onClose"
+    v-on-click-outside="deactivate"
     class="vc-gallery-item"
     :class="{
-      'vc-gallery-item_readonly': readonly,
-      'vc-gallery-item_hover': hover,
+      'vc-gallery-item--active': isActive,
+      'vc-gallery-item--readonly': readonly,
     }"
-    @tap.stop="hover = !hover"
+    @click="onTileClick"
   >
-    <VcImage
-      aspect="1x1"
+    <!-- Skeleton shimmer -->
+    <div
+      v-if="!imageState.isLoaded.value"
+      class="vc-gallery-item__skeleton"
+    />
+
+    <!-- Actual image -->
+    <img
+      v-if="image.url"
       :src="image.url"
-      background="contain"
-    ></VcImage>
-    <div class="vc-gallery-item__overlay">
-      <div class="vc-gallery-item__overlay-content">
-        <VcIcon
-          v-if="!readonly && !disableDrag"
-          class="vc-gallery-item__move"
-          icon="material-drag_indicator"
-          size="s"
-        ></VcIcon>
-        <div
-          class="vc-gallery-item__image-name"
-          :title="image.name"
-        >
-          {{ image.name }}
-        </div>
-      </div>
-      <div class="vc-gallery-item__actions">
-        <div
-          v-if="actions && actions.preview"
-          class="vc-gallery-item__button"
-          @click="$emit('preview', image)"
+      :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
-            class="vc-gallery-item__button-icon"
-            icon="material-open_in_full"
-          ></VcIcon>
-          <div class="vc-gallery-item__button-text">
-            {{ t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.FULLSCREEN") }}
-          </div>
-        </div>
-        <div
-          v-if="!readonly && actions && actions.edit"
-          class="vc-gallery-item__button"
-          @click="$emit('edit', 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
-            class="vc-gallery-item__button-icon"
-            icon="material-edit"
-          ></VcIcon>
-          <div class="vc-gallery-item__button-text">
-            {{ $t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.EDIT") }}
-          </div>
-        </div>
-        <div
-          v-if="!readonly && actions && actions.remove"
-          class="vc-gallery-item__button"
-          @click="$emit('remove', 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
-            class="vc-gallery-item__button-icon"
-            icon="material-delete"
-          ></VcIcon>
-          <div class="vc-gallery-item__button-text">
-            {{ $t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.DELETE") }}
-          </div>
-        </div>
+          <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 } from "vue";
+import { ref, toRef } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
-import { ICommonAsset } from "@core/types";
-import { VcImage, VcIcon } from "@ui/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 | undefined;
+  readonly?: boolean;
   actions?: {
-    preview: boolean | undefined;
-    edit: boolean | undefined;
-    remove: boolean | undefined;
+    preview?: boolean;
+    edit?: boolean;
+    remove?: boolean;
   };
-  disableDrag?: boolean | undefined;
+  disableDrag?: boolean;
+  imageFit?: "contain" | "cover";
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   image: () => ({}) as ICommonAsset,
   readonly: false,
-  actions: () => ({
-    name: undefined,
-    preview: undefined,
-    edit: undefined,
-    remove: undefined,
-  }),
   disableDrag: false,
+  imageFit: "contain",
 });
 
-defineEmits(["preview", "edit", "remove"]);
+defineEmits<{
+  (e: "preview", image: ICommonAsset): void;
+  (e: "edit", image: ICommonAsset): void;
+  (e: "remove", image: ICommonAsset): void;
+}>();
+
 const { t } = useI18n({ useScope: "global" });
-const hover = ref(false);
+const isActive = ref(false);
+const imageState = useImageLoad(toRef(() => props.image.url));
 
-function onClose() {
-  hover.value = false;
+function onTileClick() {
+  if (window.matchMedia("(hover: none)").matches) {
+    isActive.value = !isActive.value;
+  }
+}
+
+function deactivate() {
+  isActive.value = false;
 }
 </script>
 
 <style lang="scss">
 :root {
-  --gallery-item-border-color: var(--secondary-200);
-  --gallery-item-overlay-bg-color: var(--primary-100);
-  --gallery-item-move-icon-color: var(--secondary-300);
-  --gallery-item-button-icon-color: var(--primary-500);
+  --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-w-[155px] tw-h-[155px] tw-box-border tw-border tw-border-solid tw-border-[var(--gallery-item-border-color)] tw-rounded-md tw-p-1;
+  @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;
+    }
+  }
 
-  &__overlay {
-    @apply tw-bg-[var(--gallery-item-overlay-bg-color)] tw-opacity-0 tw-flex tw-flex-col tw-p-2 tw-absolute tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-transition-opacity tw-duration-200;
+  &__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;
   }
 
-  &:hover &__overlay,
-  .vc-app_touch &__hover &__overlay {
-    @apply tw-opacity-100;
+  &__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);
   }
 
-  &__move {
-    @apply tw-text-[var(--gallery-item-move-icon-color)] tw-cursor-move tw-mr-2;
+  &__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);
   }
 
-  &__button {
-    @apply tw-cursor-pointer tw-flex tw-flex-col tw-items-center;
+  &__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);
 
-    &-icon {
-      @apply tw-text-[var(--gallery-item-button-icon-color)];
+    &:hover {
+      color: var(--gallery-action-btn-hover);
+      @apply tw-bg-[var(--primary-50)];
     }
 
-    &-text {
-      @apply tw-mt-2 tw-text-sm;
+    &--danger:hover {
+      color: var(--gallery-action-btn-danger);
+      @apply tw-bg-[var(--danger-50)];
     }
   }
 
-  &__overlay-content {
-    @apply tw-flex;
+  &__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;
+    }
   }
 
-  &__image-name {
-    @apply tw-truncate tw-text-sm;
+  &--active &__tray {
+    @apply tw-translate-y-0;
   }
 
-  &__actions {
-    @apply tw-flex tw-grow tw-basis-0 tw-items-center tw-justify-around;
+  &--active &__drag-handle {
+    @apply tw-opacity-100;
   }
 }
+
+@keyframes gallery-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
 </style>