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

package/shared/pages/InvitePage/components/invite/invite.stories.ts

@@ -0,0 +1,64 @@
+import { onUnmounted } from "vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import Invite from "./Invite.vue";
+import { useUserManagement } from "@core/composables/useUserManagement";
+import { mockPlatformApiFetch, patchUserManagement } from "@shared/pages/_storybook-helpers";
+
+const meta = {
+  title: "Shared/Pages/Invite",
+  component: Invite,
+  tags: ["autodocs"],
+  decorators: [
+    () => ({
+      setup() {
+        mockPlatformApiFetch();
+        patchUserManagement();
+      },
+      template: "<story />",
+    }),
+  ],
+  args: {
+    userId: "mock-user-id",
+    userName: "john@example.com",
+    token: "mock-invite-token",
+  },
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Invitation acceptance page. User sets a password for their invited account. Validates token on mount, then shows password/confirm fields. Auto-signs in on success.",
+      },
+    },
+  },
+} satisfies Meta<typeof Invite>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithCustomBackground: Story = {
+  args: {
+    background: "https://images.unsplash.com/photo-1557683316-973673baf926?w=1920&q=80",
+  },
+};
+
+export const InvalidToken: Story = {
+  args: {
+    token: "expired-token",
+  },
+  decorators: [
+    () => ({
+      setup() {
+        const userManagement = useUserManagement();
+        const orig = userManagement.validateToken;
+        userManagement.validateToken = async () => false;
+        onUnmounted(() => {
+          userManagement.validateToken = orig;
+        });
+      },
+      template: "<story />",
+    }),
+  ],
+};

package/shared/pages/LoginPage/components/login/login.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import Login from "./Login.vue";
+import { mockPlatformApiFetch, patchUserManagement } from "@shared/pages/_storybook-helpers";
+
+const meta = {
+  title: "Shared/Pages/Login",
+  component: Login,
+  tags: ["autodocs"],
+  decorators: [
+    () => ({
+      setup() {
+        mockPlatformApiFetch();
+        patchUserManagement();
+      },
+      template: "<story />",
+    }),
+  ],
+  args: {
+    title: "Welcome back",
+    subtitle: "Sign in to your account",
+  },
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Login page with username/password form, SSO provider support, and forgot-password link. SSO providers require a live API and won't appear in Storybook.",
+      },
+    },
+  },
+} satisfies Meta<typeof Login>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithCustomBackground: Story = {
+  args: {
+    background: "https://images.unsplash.com/photo-1557683316-973673baf926?w=1920&q=80",
+    title: "Vendor Portal",
+    subtitle: "Manage your products and orders",
+  },
+};
+
+export const SSOOnly: Story = {
+  args: {
+    ssoOnly: true,
+    title: "Enterprise Login",
+    subtitle: "Sign in with your organization account",
+  },
+};

package/shared/pages/ResetPasswordPage/components/reset-password/reset-password.stories.ts

@@ -0,0 +1,64 @@
+import { onUnmounted } from "vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import ResetPassword from "./ResetPassword.vue";
+import { useUserManagement } from "@core/composables/useUserManagement";
+import { mockPlatformApiFetch, patchUserManagement } from "@shared/pages/_storybook-helpers";
+
+const meta = {
+  title: "Shared/Pages/ResetPassword",
+  component: ResetPassword,
+  tags: ["autodocs"],
+  decorators: [
+    () => ({
+      setup() {
+        mockPlatformApiFetch();
+        patchUserManagement();
+      },
+      template: "<story />",
+    }),
+  ],
+  args: {
+    userId: "mock-user-id",
+    userName: "john@example.com",
+    token: "mock-reset-token",
+  },
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Reset password page reached via email link. Validates token on mount, then allows setting a new password with confirmation. Auto-signs in on success.",
+      },
+    },
+  },
+} satisfies Meta<typeof ResetPassword>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithCustomBackground: Story = {
+  args: {
+    background: "https://images.unsplash.com/photo-1557683316-973673baf926?w=1920&q=80",
+  },
+};
+
+export const InvalidToken: Story = {
+  args: {
+    token: "expired-token",
+  },
+  decorators: [
+    () => ({
+      setup() {
+        const userManagement = useUserManagement();
+        const orig = userManagement.validateToken;
+        userManagement.validateToken = async () => false;
+        onUnmounted(() => {
+          userManagement.validateToken = orig;
+        });
+      },
+      template: "<story />",
+    }),
+  ],
+};

package/shared/pages/_storybook-helpers.ts

@@ -0,0 +1,71 @@
+import { defineComponent, onUnmounted } from "vue";
+import { useRouter } from "vue-router";
+import { useUserManagement } from "@core/composables/useUserManagement";
+import { IdentityResult, SecurityResult, SignInResult } from "@core/api/platform";
+
+/**
+ * Intercepts window.fetch for platform API endpoints that don't exist in Storybook.
+ * Returns safe empty responses so composables like useSettings don't throw.
+ */
+export function mockPlatformApiFetch() {
+  const originalFetch = window.fetch;
+
+  window.fetch = async function (input: RequestInfo | URL, init?: RequestInit) {
+    const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+
+    // useSettings → GET /api/platform/settings/ui/customization
+    if (url.includes("/api/platform/settings/ui/customization")) {
+      return new Response(JSON.stringify({ defaultValue: null }), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+
+    return originalFetch.call(window, input, init);
+  } as typeof fetch;
+
+  onUnmounted(() => {
+    window.fetch = originalFetch;
+  });
+}
+
+/**
+ * Patches useUserManagement methods with safe no-op/success stubs
+ * and ensures auth-related routes exist for router.push() calls.
+ */
+export function patchUserManagement() {
+  const userManagement = useUserManagement();
+  const router = useRouter();
+
+  const originals = {
+    signIn: userManagement.signIn,
+    signOut: userManagement.signOut,
+    validateToken: userManagement.validateToken,
+    validatePassword: userManagement.validatePassword,
+    resetPasswordByToken: userManagement.resetPasswordByToken,
+    requestPasswordReset: userManagement.requestPasswordReset,
+    changeUserPassword: userManagement.changeUserPassword,
+  };
+
+  userManagement.signIn = async () => new SignInResult({ succeeded: true });
+  userManagement.signOut = async () => {};
+  userManagement.validateToken = async () => true;
+  userManagement.validatePassword = async () => new IdentityResult({ succeeded: true, errors: [] });
+  userManagement.resetPasswordByToken = async () => new SecurityResult({ succeeded: true, errors: [] });
+  userManagement.requestPasswordReset = async () => ({ succeeded: true });
+  userManagement.changeUserPassword = async () => new SecurityResult({ succeeded: true, errors: [] });
+
+  for (const name of ["Login", "ForgotPassword", "ChangePassword"] as const) {
+    if (!router.hasRoute(name)) {
+      router.addRoute({
+        name,
+        path: `/${name.toLowerCase()}`,
+        component: defineComponent({ template: "<div />" }),
+      });
+    }
+  }
+
+  onUnmounted(() => {
+    Object.assign(userManagement, originals);
+  });
+}

package/ui/components/molecules/vc-select/vc-select.vue

@@ -767,7 +767,7 @@ watch(
   }
 
   &__no-options-text {
-    @apply tw-m-4 tw-text-lg tw-font-medium;
+    @apply tw-m-4 tw-text-sm tw-font-normal tw-text-[color:var(--select-placeholder-color)];
   }
 
   &__option {

package/ui/components/organisms/vc-app/_internal/menu/VcAppMenu.vue

@@ -136,8 +136,7 @@ const isItemActive = (url?: string): boolean => {
   --app-menu-close-color: var(--app-menu-burger-color, var(--primary-500));
   --app-menu-burger-color: var(--primary-500);
 
-  --app-backdrop-overlay-bg: var(--additional-50);
-  --app-backdrop-overlay: rgb(from var(--app-backdrop-overlay-bg) r g b / 75%);
+  --app-backdrop-overlay: var(--overlay-bg);
 
   --app-backdrop-shadow-color: var(--additional-950);
   --app-backdrop-shadow:

package/ui/components/organisms/vc-blade/_internal/toolbar/ToolbarMobile.vue

@@ -167,12 +167,9 @@ function handleItemClick(item: IBladeToolbar) {
   --blade-toolbar-mobile-pill-bg-color: var(--primary-500);
   --blade-toolbar-mobile-toggle-border-color: var(--primary-200);
   --blade-toolbar-mobile-toggle-icon-color: var(--additional-50);
-  --blade-toolbar-mobile-overlay-bg-color: var(--additional-950);
-  --blade-toolbar-mobile-action-bg: var(--additional-50);
+  --blade-toolbar-mobile-action-bg: var(--surface-color);
   --blade-toolbar-mobile-action-text: var(--neutrals-800);
-  --blade-toolbar-mobile-backdrop-blur: 12px;
-  // Circle button colors (same as ToolbarCircleButton — must be defined here
-  // because ToolbarCircleButton doesn't mount on mobile)
+  // Circle button colors
   --blade-toolbar-circle-button-text-color: var(--additional-50);
   --blade-toolbar-circle-button-bg-color: var(--neutrals-500);
   --blade-toolbar-circle-button-main-bg-color: var(--primary-500);
@@ -189,9 +186,9 @@ $touch-min: 44px;
   // ── Backdrop ──────────────────────────────────────────────────────────
   &__backdrop {
     @apply tw-fixed tw-inset-0 tw-z-[55];
-    background: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(var(--blade-toolbar-mobile-backdrop-blur));
-    -webkit-backdrop-filter: blur(var(--blade-toolbar-mobile-backdrop-blur));
+    background: var(--overlay-bg);
+    backdrop-filter: blur(var(--overlay-blur));
+    -webkit-backdrop-filter: blur(var(--overlay-blur));
   }
 
   // ── Menu container ────────────────────────────────────────────────────
@@ -223,21 +220,25 @@ $touch-min: 44px;
     gap: 12px;
     padding: 4px 4px 4px 16px;
     min-height: $touch-min;
-    border: none;
+    border: 1px solid var(--surface-border);
     border-radius: 28px;
-    background: var(--blade-toolbar-mobile-action-bg);
-    box-shadow:
-      0 2px 8px rgba(0, 0, 0, 0.1),
-      0 1px 3px rgba(0, 0, 0, 0.06);
+    background: color-mix(in srgb, var(--blade-toolbar-mobile-action-bg) 92%, transparent);
+    backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
+    -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
+    box-shadow: var(--shadow-sm);
     cursor: pointer;
 
-    // Initial state (hidden)
     opacity: 0;
     transform: translateY(16px);
     transition:
       opacity 0.28s $spring,
       transform 0.28s $spring;
-    // transition-delay set via inline style
+
+    &:hover:not(:disabled) {
+      background: var(--blade-toolbar-mobile-action-bg);
+      box-shadow: var(--shadow-md);
+      transition-duration: 0.15s;
+    }
 
     &:active:not(:disabled) {
       transform: scale(0.96) !important;
@@ -249,7 +250,6 @@ $touch-min: 44px;
       cursor: default;
     }
 
-    // Focus-visible ring for keyboard navigation
     &:focus-visible {
       outline: 2px solid var(--blade-toolbar-mobile-pill-bg-color);
       outline-offset: 2px;
@@ -291,9 +291,7 @@ $touch-min: 44px;
     color: var(--blade-toolbar-mobile-toggle-icon-color);
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    box-shadow:
-      0 4px 12px rgba(0, 0, 0, 0.16),
-      0 1px 4px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-sm);
 
     &:active {
       transform: scale(0.92);
@@ -321,9 +319,7 @@ $touch-min: 44px;
     border-radius: calc(#{$touch-min} / 2);
     background: var(--blade-toolbar-mobile-pill-bg-color);
     overflow: hidden;
-    box-shadow:
-      0 4px 12px rgba(0, 0, 0, 0.16),
-      0 1px 4px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-sm);
   }
 
   &__pill-action {

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

@@ -234,8 +234,8 @@ function handleDialogDismiss(): void {
 <style lang="scss">
 :root {
   --vc-popup-border-radius: var(--popup-border-radius, 6px);
-  --vc-popup-shadow: var(--popup-shadow, 0 24px 48px rgb(15 23 42 / 0.2));
-  --vc-popup-overlay-blur: var(--popup-overlay-blur, 3px);
+  --vc-popup-shadow: var(--popup-shadow, var(--shadow-md));
+  --vc-popup-overlay-blur: var(--popup-overlay-blur, var(--overlay-blur));
 
   // Deprecated aliases (prefer --vc-popup-* variables for new themes)
   --popup-close-btn-bg: var(--neutrals-100);
@@ -247,8 +247,7 @@ function handleDialogDismiss(): void {
   --popup-success-icon-color: var(--success-500);
   --popup-info-icon-color: var(--info-500);
   --popup-footer-separator: var(--neutrals-200);
-  --popup-overlay-color: var(--additional-50);
-  --popup-overlay: rgb(from var(--popup-overlay-color) r g b / 75%);
+  --popup-overlay: var(--popup-overlay-override, var(--overlay-bg));
   --popup-bg: var(--additional-50);
 }
 

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

@@ -563,10 +563,10 @@ defineExpose({
   --vc-sidebar-bg-elevated: color-mix(in srgb, var(--additional-50) 90%, white 10%);
   --vc-sidebar-title-color: var(--additional-950);
   --vc-sidebar-subtitle-color: var(--neutrals-600);
-  --vc-sidebar-overlay-color: rgb(15 23 42 / 0.38);
+  --vc-sidebar-overlay-color: var(--overlay-bg);
   --vc-sidebar-close-color: var(--neutrals-600);
-  --vc-sidebar-border-color: color-mix(in srgb, var(--neutrals-300) 72%, white 28%);
-  --vc-sidebar-shadow: 0 24px 48px rgb(15 23 42 / 0.16), 0 8px 20px rgb(15 23 42 / 0.1);
+  --vc-sidebar-border-color: var(--surface-border);
+  --vc-sidebar-shadow: var(--shadow-md);
   --vc-sidebar-radius: 16px;
   --vc-sidebar-inset-gap: 12px;
   --vc-sidebar-header-height: 72px;
@@ -575,7 +575,9 @@ defineExpose({
   @apply tw-fixed tw-inset-0 tw-pointer-events-none;
 
   &__overlay {
-    @apply tw-absolute tw-inset-0 tw-backdrop-blur-[4px] tw-pointer-events-auto;
+    @apply tw-absolute tw-inset-0 tw-pointer-events-auto;
+    backdrop-filter: blur(var(--overlay-blur));
+    -webkit-backdrop-filter: blur(var(--overlay-blur));
     background: var(--vc-sidebar-overlay-color);
   }
 
@@ -616,13 +618,11 @@ defineExpose({
 
     &--elevated {
       background: var(--vc-sidebar-bg-elevated);
-      box-shadow:
-        0 28px 64px rgb(15 23 42 / 0.22),
-        0 10px 24px rgb(15 23 42 / 0.16);
+      box-shadow: var(--shadow-lg);
     }
 
     &--minimal {
-      box-shadow: 0 12px 28px rgb(15 23 42 / 0.1);
+      box-shadow: var(--shadow-sm);
       border-color: color-mix(in srgb, var(--neutrals-200) 86%, white 14%);
     }
 
@@ -668,7 +668,8 @@ defineExpose({
     @apply tw-border-b-[color:var(--vc-sidebar-border-color)] tw-sticky tw-top-0 tw-z-[1];
     min-height: var(--vc-sidebar-header-height);
     background: inherit;
-    backdrop-filter: saturate(140%) blur(6px);
+    backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
+    -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
   }
 
   &__title-wrap {
@@ -725,7 +726,8 @@ defineExpose({
     @apply tw-mt-auto tw-sticky tw-bottom-0 tw-z-[1] tw-border-t tw-border-solid tw-border-t-[color:var(--vc-sidebar-border-color)];
     min-height: var(--vc-sidebar-footer-height);
     background: inherit;
-    backdrop-filter: saturate(140%) blur(6px);
+    backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
+    -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
   }
 }
 

package/ui/components/organisms/vc-table/VcDataTable.vue

@@ -139,8 +139,11 @@
           :get-column-width="cols.getEffectiveColumnWidth"
           :get-cell-style="cols.getCellStyle"
           :show-selection-cell="hasSelectionColumn && !isSelectionViaColumn"
-          :empty-title="emptyTitle"
-          :empty-description="emptyDescription"
+          :empty-icon="resolvedEmptyIcon"
+          :empty-title="resolvedEmptyTitle"
+          :empty-description="resolvedEmptyDescription"
+          :empty-action-label="resolvedEmptyActionLabel"
+          :empty-action-handler="resolvedEmptyActionHandler"
           :loading-text="loadingText"
           :grouping-enabled="rowGrouping.isGroupingEnabled.value"
           :grouped-data="rowGrouping.groupedData.value"
@@ -213,10 +216,11 @@
             />
           </template>
           <template
-            v-if="$slots.empty"
+            v-if="$slots['not-found'] || $slots.empty"
             #empty
           >
-            <slot name="empty" />
+            <slot v-if="isNotFoundState && $slots['not-found']" name="not-found" />
+            <slot v-else name="empty" />
           </template>
           <template
             v-if="$slots.loading"
@@ -283,12 +287,16 @@
         @refresh="emit('pull-refresh')"
       >
         <template #empty>
-          <slot name="empty">
-            <TableEmpty
-              :title="emptyTitle"
-              :description="emptyDescription"
-            />
-          </slot>
+          <slot v-if="isNotFoundState && $slots['not-found']" name="not-found" />
+          <slot v-else-if="$slots.empty" name="empty" />
+          <TableEmpty
+            v-else
+            :icon="resolvedEmptyIcon"
+            :title="resolvedEmptyTitle"
+            :description="resolvedEmptyDescription"
+            :action-label="resolvedEmptyActionLabel"
+            :action-handler="resolvedEmptyActionHandler"
+          />
         </template>
       </DataTableMobileView>
     </div>
@@ -367,7 +375,7 @@ import {
 import { ColumnCollector, type ColumnInstance } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
 import { ColumnCollectorKey, FilterContextKey, HasFlexColumnsKey, IsColumnReorderingKey } from "@ui/components/organisms/vc-table/keys";
 import { IsMobileKey } from "@framework/injection-keys";
-import type { VcColumnProps, VcDataTableExtendedProps, FilterValue, EditChange, TableAction, SortMeta, MobileSwipeAction } from "@ui/components/organisms/vc-table/types";
+import type { VcColumnProps, VcDataTableExtendedProps, FilterValue, EditChange, TableAction, SortMeta, MobileSwipeAction, TableStateConfig } from "@ui/components/organisms/vc-table/types";
 import type { DataTablePersistedState } from "@ui/components/organisms/vc-table/composables";
 
 const props = withDefaults(defineProps<VcDataTableExtendedProps<T>>(), {
@@ -420,7 +428,10 @@ const props = withDefaults(defineProps<VcDataTableExtendedProps<T>>(), {
   searchable: false,
   searchValue: undefined,
   searchPlaceholder: "Search...",
+  emptyState: undefined,
+  notFoundState: undefined,
   searchDebounce: 300,
+  activeItemId: undefined,
 });
 
 // Emits
@@ -484,6 +495,8 @@ const emit = defineEmits<{
   filter: [event: { filters: Record<string, unknown>; filteredValue: T[] }];
 
   // === Row Interactions ===
+  /** v-model update for active (highlighted) row ID */
+  "update:activeItemId": [value: string | undefined];
   /** Emitted when a row is clicked */
   "row-click": [event: { data: T; index: number; originalEvent: Event }];
   /** Emitted when a row action button/menu item is activated */
@@ -557,6 +570,8 @@ defineSlots<{
   }) => VNode[];
   /** Custom content for expanded rows */
   expansion?: (props: { data: T; index: number }) => VNode[];
+  /** Custom not-found state content (shown when search yields no results) */
+  "not-found"?: () => VNode[];
   /** Custom empty state content */
   empty?: () => VNode[];
   /** Custom loading state content */
@@ -579,6 +594,34 @@ const { t } = useI18n({ useScope: "global" });
 
 const emptyTitle = computed(() => t("COMPONENTS.ORGANISMS.VC_TABLE.EMPTY_TITLE"));
 const emptyDescription = computed(() => t("COMPONENTS.ORGANISMS.VC_TABLE.EMPTY_DESCRIPTION"));
+const notFoundTitle = computed(() => t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_FOUND_TITLE"));
+const notFoundDescription = computed(() => t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_FOUND_DESCRIPTION"));
+
+/** Detect not-found state: items empty + active search or filters */
+const isNotFoundState = computed(
+  () => displayItems.value.length === 0 && !props.loading && (internalSearchValue.value !== "" || hasActiveFilters.value),
+);
+
+/** Resolved title/description/icon/action for the current empty-like state */
+const resolvedEmptyIcon = computed(() =>
+  isNotFoundState.value ? props.notFoundState?.icon : props.emptyState?.icon,
+);
+const resolvedEmptyTitle = computed(() =>
+  isNotFoundState.value
+    ? (props.notFoundState?.title ?? notFoundTitle.value)
+    : (props.emptyState?.title ?? emptyTitle.value),
+);
+const resolvedEmptyDescription = computed(() =>
+  isNotFoundState.value
+    ? (props.notFoundState?.description ?? notFoundDescription.value)
+    : (props.emptyState?.description ?? emptyDescription.value),
+);
+const resolvedEmptyActionLabel = computed(() =>
+  isNotFoundState.value ? props.notFoundState?.actionLabel : props.emptyState?.actionLabel,
+);
+const resolvedEmptyActionHandler = computed(() =>
+  isNotFoundState.value ? props.notFoundState?.actionHandler : props.emptyState?.actionHandler,
+);
 const loadingText = computed(() => t("COMPONENTS.ORGANISMS.VC_TABLE.LOADING"));
 
 /** Track whether data has ever been loaded — distinguishes initial load from refresh */
@@ -1412,6 +1455,7 @@ const getRowProps = (item: T, index: number) => ({
 
   // Selection
   isSelected: selection.isSelected(item),
+  isActive: props.activeItemId != null && getItemKey(item, index) === String(props.activeItemId),
   isSelectable: selection.canSelect(item),
   selectionMode: effectiveSelectionMode.value,
   showSelectionCell: hasSelectionColumn.value && !isSelectionViaColumn.value,
@@ -1494,6 +1538,9 @@ const handleRowSelectionChange = (item: T, eventOrValue?: Event | boolean) => {
 };
 
 const handleRowClick = (item: T, index: number, event: Event) => {
+  const itemKey = getItemKey(item, index);
+  const isSameItem = props.activeItemId != null && itemKey === String(props.activeItemId);
+  emit("update:activeItemId", isSameItem ? undefined : itemKey);
   emit("row-click", { data: item, index, originalEvent: event });
   const target = event.target as HTMLElement;
   const isCheckboxClick = target.tagName === "INPUT" && target.getAttribute("type") === "checkbox";