@vc-shell/framework 1.2.3-beta.0 → 1.2.3

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/useBadge.ts

@@ -0,0 +1,80 @@
+import { computed, unref, isRef, type ComputedRef, type Ref } from "vue";
+import type { MenuItemBadgeConfig, MenuItemBadge } from "./../../../../../../../../../core/types";
+import { getMenuBadges } from "./../../../../../../../../../core/services/menu-service";
+
+export interface ResolvedBadge {
+  content: string | number | undefined;
+  variant: "primary" | "success" | "warning" | "danger" | "info" | "secondary";
+  isDot: boolean;
+  isVisible: boolean;
+}
+
+/**
+ * Composable to resolve badge configuration for menu items.
+ * Supports direct badge config, routeId lookup, or groupId lookup.
+ *
+ * @param badgeConfig - Direct badge configuration (takes priority)
+ * @param routeId - Route ID to lookup badge from registry
+ * @param groupId - Group ID to lookup badge from registry
+ */
+export function useBadge(
+  badgeConfig: MenuItemBadgeConfig | undefined,
+  routeId?: string,
+  groupId?: string,
+): ComputedRef<ResolvedBadge> {
+  const menuBadges = getMenuBadges();
+
+  return computed(() => {
+    // Priority: direct badge config > badge from registry by routeId > badge from registry by groupId
+    let config: MenuItemBadgeConfig | undefined = badgeConfig;
+    if (!config && routeId) {
+      config = menuBadges.value.get(routeId);
+    }
+    if (!config && groupId) {
+      config = menuBadges.value.get(groupId);
+    }
+
+    if (!config) {
+      return { content: undefined, variant: "primary", isDot: false, isVisible: false };
+    }
+
+    // Normalize shorthand to full config object
+    let badge: MenuItemBadge;
+    if (typeof config === "object" && !isRef(config) && "content" in config) {
+      badge = config as MenuItemBadge;
+    } else {
+      badge = { content: config as MenuItemBadge["content"] };
+    }
+
+    // Resolve reactive content
+    let rawContent: string | number | undefined = undefined;
+    if (typeof badge.content === "function") {
+      rawContent = badge.content();
+    } else if (isRef(badge.content)) {
+      rawContent = unref(badge.content as Ref<string | number | undefined>);
+    } else {
+      rawContent = badge.content;
+    }
+
+    // Truncate values > 99
+    let displayContent: string | number | undefined = rawContent;
+    if (typeof rawContent === "number" && rawContent > 99) {
+      displayContent = "99+";
+    } else if (typeof rawContent === "string") {
+      const numValue = parseInt(rawContent, 10);
+      if (!isNaN(numValue) && numValue > 99) {
+        displayContent = "99+";
+      }
+    }
+
+    const isDot = badge.isDot ?? false;
+    const isVisible = isDot || (displayContent != null && displayContent !== "" && displayContent !== 0);
+
+    return {
+      content: displayContent,
+      variant: badge.variant ?? "primary",
+      isDot,
+      isVisible,
+    };
+  });
+}

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

@@ -45,6 +45,15 @@
             <div class="vc-app-menu-link__title-truncate">
               {{ $t(title ?? "") }}
             </div>
+            <VcBadge
+              v-if="resolvedBadge.isVisible"
+              :content="resolvedBadge.isDot ? undefined : resolvedBadge.content"
+              :variant="resolvedBadge.variant"
+              :is-dot="resolvedBadge.isDot"
+              size="s"
+              inline
+              class="vc-app-menu-link__badge"
+            />
             <div
               v-if="(!!children?.length && expand) || false"
               class="vc-app-menu-link__title-icon"
@@ -119,15 +128,28 @@
                 {{ twoLettersTitle(nested.title) }}
               </div>
               <Transition name="opacity">
-                <p
+                <div
                   v-show="expand"
-                  class="vc-app-menu-link__child-item-title"
-                  :class="{
-                    'vc-app-menu-link__child-item-title--no-icon': !nested.icon,
-                  }"
+                  class="vc-app-menu-link__child-item-content"
                 >
-                  {{ $t(nested.title) }}
-                </p>
+                  <p
+                    class="vc-app-menu-link__child-item-title"
+                    :class="{
+                      'vc-app-menu-link__child-item-title--no-icon': !nested.icon,
+                    }"
+                  >
+                    {{ $t(nested.title) }}
+                  </p>
+                  <VcBadge
+                    v-if="getChildBadge(nested).isVisible"
+                    :content="getChildBadge(nested).isDot ? undefined : getChildBadge(nested).content"
+                    :variant="getChildBadge(nested).variant"
+                    :is-dot="getChildBadge(nested).isDot"
+                    size="s"
+                    inline
+                    class="vc-app-menu-link__badge"
+                  />
+                </div>
               </Transition>
             </div>
           </div>
@@ -139,9 +161,10 @@
 
 <script lang="ts" setup>
 import { ref, watch, computed, onMounted, Component, MaybeRef, unref } from "vue";
-import { MenuItem } from "./../../../../../../../../../core/types";
-import { VcIcon } from "./../../../../../../../";
+import { MenuItem, MenuItemBadgeConfig } from "./../../../../../../../../../core/types";
+import { VcIcon, VcBadge } from "./../../../../../../../";
 import { useRoute } from "vue-router";
+import { useBadge } from "./useBadge";
 
 export interface Props {
   children?: MenuItem[];
@@ -151,6 +174,9 @@ export interface Props {
   url?: string;
   expand?: boolean;
   id?: string | number;
+  badge?: MenuItemBadgeConfig;
+  routeId?: string;
+  groupId?: string;
 }
 
 export interface Emits {
@@ -163,6 +189,14 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+// Badge resolution for parent menu item
+const resolvedBadge = useBadge(props.badge, props.routeId, props.groupId);
+
+// Helper to get resolved badge for child items
+const getChildBadge = (child: MenuItem) => {
+  return useBadge(child.badge, child.routeId, child.groupId).value;
+};
+
 const isOpened = ref(false);
 const route = useRoute();
 const params = Object.fromEntries(Object.entries(route.params).filter(([key]) => key !== "pathMatch"));
@@ -346,7 +380,7 @@ watch(isOpened, (newValue) => {
 
   &__child-item {
     @apply tw-cursor-pointer tw-min-w-0 tw-flex tw-h-[var(--app-menu-item-height)]
-      tw-items-center tw-transition-[padding] tw-duration-150 tw-w-full tw-py-2 tw-px-3
+      tw-items-center tw-transition-[padding] tw-duration-150 tw-w-full tw-py-2 tw-pl-3 tw-pr-2
     tw-text-[color:var(--app-menu-item-title-color)] tw-text-sm
     hover:tw-bg-[var(--app-menu-item-background-color-hover)]
     hover:tw-text-[color:var(--app-menu-item-title-color-active)] tw-gap-5;
@@ -389,6 +423,15 @@ watch(isOpened, (newValue) => {
   &__icon-collapsed {
     @apply tw-p-0 tw-m-0;
   }
+
+  // Badge styles for menu items - positioned after text
+  &__badge {
+    @apply tw-shrink-0 tw-ml-auto;
+  }
+
+  &__child-item-content {
+    @apply tw-flex tw-items-center tw-w-full tw-min-w-0;
+  }
 }
 
 .opacity-enter-active,

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

@@ -13,6 +13,9 @@
           :title="title ?? ''"
           :url="url"
           :expand="expand"
+          :badge="badge"
+          :route-id="routeId"
+          :group-id="groupId"
           @on-click="$emit('click')"
         />
       </router-link>
@@ -26,6 +29,9 @@
         :icon="icon ?? ''"
         :title="title ?? ''"
         :expand="expand"
+        :badge="badge"
+        :route-id="routeId"
+        :group-id="groupId"
         @on-click="$emit('click', $event)"
       />
     </template>
@@ -34,7 +40,7 @@
 
 <script lang="ts" setup>
 import VcAppMenuLink from "./_internal/vc-app-menu-link.vue";
-import { MenuItem } from "../../../../../../../../core/types";
+import { MenuItem, MenuItemBadgeConfig } from "../../../../../../../../core/types";
 import type { Component } from "vue";
 export interface Props {
   sticky?: boolean;
@@ -45,6 +51,9 @@ export interface Props {
   children?: MenuItem[];
   expand?: boolean;
   id?: string | number;
+  badge?: MenuItemBadgeConfig;
+  routeId?: string;
+  groupId?: string;
 }
 
 export interface Emits {

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

@@ -36,6 +36,9 @@
             :title="item.title as string"
             :children="item.children"
             :expand="$isDesktop.value ? isExpanded || isHoverExpanded : true"
+            :badge="item.badge"
+            :route-id="item.routeId"
+            :group-id="item.groupId"
             @click="handleMenuItemClick(item, $event)"
           />
         </div>

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

@@ -30,8 +30,6 @@
         class="vc-app__workspace"
       >
         <VcBladeNavigation />
-        <!-- AI Agent Panel (shown when plugin is installed) -->
-        <VcAiAgentPanel v-if="aiAgentConfig?.url" />
       </div>
 
       <!-- Popup container -->
@@ -51,8 +49,6 @@ import {
   BladeRoutesRecord,
 } from "./../../../../shared/components";
 import { useAppSwitcher } from "../../../../shared/components/app-switcher/composables/useAppSwitcher";
-import { VcAiAgentPanel, provideAiAgentService } from "../../../../core/plugins/ai-agent";
-import type { IAiAgentConfig } from "../../../../core/plugins/ai-agent";
 import { provideAppBarWidget, useNotifications } from "../../../../core/composables";
 import { useRoute, useRouter } from "vue-router";
 import { watchOnce } from "@vueuse/core";
@@ -68,7 +64,6 @@ import { DynamicModulesKey, EMBEDDED_MODE } from "../../../../injection-keys";
 import { provideMenuService } from "../../../../core/composables/useMenuService";
 import { provideAppBarMobileButtonsService } from "../../../../core/composables/useAppBarMobileButtons";
 import { useUserManagement } from "../../../../core/composables/useUserManagement";
-import { createLogger } from "../../../../core/utilities";
 
 export interface Props {
   isReady: boolean;
@@ -97,13 +92,10 @@ defineSlots<{
 const props = defineProps<Props>();
 const slots = useSlots();
 
-const logger = createLogger("vc-app");
-logger.debug("Init vc-app");
+console.debug("vc-app: Init vc-app");
 
 const internalRoutes = inject("bladeRoutes") as BladeRoutesRecord[];
 const dynamicModules = inject(DynamicModulesKey, undefined);
-const aiAgentConfig = inject<IAiAgentConfig | undefined>("aiAgentConfig", undefined);
-const aiAgentAddGlobalToolbarButton = inject<boolean>("aiAgentAddGlobalToolbarButton", true);
 
 const isAppReady = ref(props.isReady);
 
@@ -171,7 +163,7 @@ registerMobileButton({
 });
 
 const onMenuItemClick = function (item: MenuItem) {
-  logger.debug("onMenuItemClick() called");
+  console.debug(`vc-app#onMenuItemClick() called.`);
 
   if (item.routeId) {
     const bladeComponent = resolveBladeByName(item.routeId);
@@ -183,7 +175,7 @@ const onMenuItemClick = function (item: MenuItem) {
         true,
       );
     } else {
-      logger.error(`Blade component with routeId '${item.routeId}' not found.`);
+      console.error(`Blade component with routeId '${item.routeId}' not found.`);
     }
   } else if (!item.routeId && item.url) {
     const menuRoute = routes.find((r) => {
@@ -226,14 +218,6 @@ provideDashboardService();
 provideMenuService();
 provideGlobalSearch();
 provide(EMBEDDED_MODE, isEmbedded);
-
-// Provide AI Agent service if config is available (via plugin)
-if (aiAgentConfig?.url) {
-  provideAiAgentService({
-    config: aiAgentConfig,
-    addGlobalToolbarButton: aiAgentAddGlobalToolbarButton,
-  });
-}
 // Provide slots to child components with all necessary props and handlers
 provideAppSlots(
   slots,
@@ -261,9 +245,6 @@ onUnmounted(() => {
 <style lang="scss">
 :root {
   --app-background: var(--secondary-200);
-  // Shared transition timing for synchronized animations
-  --app-panel-transition-duration: 0.3s;
-  --app-panel-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .vc-app {

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

@@ -43,9 +43,6 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import { VcIcon, VcTooltip } from "../../../../../../../../";
-import { createLogger } from "../../../../../../../../../../core/utilities";
-
-const logger = createLogger("vc-blade-toolbar-button");
 
 export interface Props {
   isExpanded: boolean;
@@ -84,7 +81,7 @@ const emit = defineEmits<Emits>();
 const isWaiting = ref(false);
 
 async function onClick(): Promise<void> {
-  logger.debug("onClick()");
+  console.debug("vc-blade-toolbar-item#onClick()");
 
   if (!props.disabled && !isWaiting.value) {
     if (props.clickHandler && typeof props.clickHandler === "function") {

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

@@ -25,10 +25,10 @@ import { useLocalStorage } from "@vueuse/core";
 import { usePermissions, useToolbar } from "../../../../../../core/composables";
 import { IBladeToolbar } from "../../../../../../core/types";
 import VcBladeToolbarButtons from "./_internal/vc-blade-toolbar-buttons/vc-blade-toolbar-buttons.vue";
+import { BladeInstance } from "../../../../../../injection-keys";
 import { FALLBACK_BLADE_ID } from "../../../../../../core/constants";
 import { IBladeInstance } from "../../../../../../shared/components/blade-navigation/types";
 import { IToolbarItem } from "../../../../../../core/services";
-import { useBlade } from "../../../../../../core/composables";
 
 export interface Props {
   items: IBladeToolbar[];
@@ -41,17 +41,21 @@ const props = withDefaults(defineProps<Props>(), {
 const slots = useSlots();
 const isExpanded = useLocalStorage("VC_BLADE_TOOLBAR_IS_EXPANDED", true);
 const { hasAccess } = usePermissions();
-const {
-  registerToolbarItem,
-  unregisterToolbarItem,
-  getToolbarItems,
-  clearBladeToolbarItems,
-  updateToolbarItem,
-  registeredToolbarItems,
-} = useToolbar();
+const { registerToolbarItem, unregisterToolbarItem, getToolbarItems, clearBladeToolbarItems, updateToolbarItem } =
+  useToolbar();
 
 // Get the ID of the current blade
-const blade = useBlade();
+const blade = inject<ComputedRef<IBladeInstance>>(
+  BladeInstance,
+  computed(() => ({
+    id: FALLBACK_BLADE_ID,
+    expandable: false,
+    maximized: false,
+    error: undefined,
+    navigation: undefined,
+    breadcrumbs: undefined,
+  })),
+);
 
 const bladeId = computed(() => (blade.value?.id ?? FALLBACK_BLADE_ID).toLowerCase());
 
@@ -122,10 +126,6 @@ function clearToolbarItems(): void {
 
 // Filter visible items from service
 const visibleItems = computed(() => {
-  // Access registeredToolbarItems.length to create reactive dependency
-  // This ensures computed recalculates when new items are registered
-  void registeredToolbarItems.length;
-
   return getToolbarItems()
     .filter(
       (item) =>

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

@@ -288,10 +288,8 @@ const openErrorDetails = () => {
 }
 
 .vc-blade {
-  @apply tw-relative tw-flex tw-shrink-0 tw-flex-col tw-overflow-hidden;
+  @apply tw-relative tw-flex tw-shrink-0 tw-flex-col tw-overflow-hidden tw-transition-[width] tw-duration-200;
   @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));
 
   &__back-button {
     @apply tw-mr-[14px];

package/ui/components/organisms/vc-login-form/vc-login-form.vue

@@ -24,7 +24,6 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 import { useRouter } from "vue-router";
-import { createLogger } from "../../../../core/utilities";
 
 export interface Props {
   logo?: string;
@@ -58,8 +57,7 @@ const logoImageHandler = computed(() => {
 
 const version = router.currentRoute.value.meta?.appVersion;
 
-const logger = createLogger("vc-login-form");
-logger.debug("Init vc-login-form");
+console.debug("Init vc-login-form");
 </script>
 
 <style lang="scss">

package/ui/components/organisms/vc-table/_internal/vc-table-cell/vc-table-cell.vue

@@ -290,38 +290,6 @@ import { Field } from "vee-validate";
 import type { TableItem } from "../../types";
 import { ITableColumns } from "../../../../../../core/types";
 
-// Cache for sanitized HTML to avoid repeated DOMPurify calls across table cells
-const sanitizedHtmlCache = new Map<string, string>();
-const MAX_CACHE_SIZE = 500;
-
-function getSanitizedHtml(html: string): string {
-  if (sanitizedHtmlCache.has(html)) {
-    return sanitizedHtmlCache.get(html)!;
-  }
-
-  const sanitized = DOMPurify.default.sanitize(html, {
-    ALLOWED_TAGS: [
-      "p", "br", "strong", "em", "u", "s", "h1", "h2", "h3", "h4", "h5", "h6",
-      "ul", "ol", "li", "blockquote", "pre", "code", "a", "img", "table",
-      "thead", "tbody", "tr", "th", "td", "hr", "div", "span",
-    ],
-    ALLOWED_ATTR: ["href", "src", "alt", "title", "class", "id", "colspan", "rowspan", "align", "valign"],
-    FORBID_TAGS: ["script", "object", "embed", "form", "input"],
-    FORBID_ATTR: ["onerror", "onload", "onclick", "onmouseover", "onfocus", "onblur", "style"],
-  });
-
-  // Limit cache size to prevent memory leaks
-  if (sanitizedHtmlCache.size >= MAX_CACHE_SIZE) {
-    const firstKey = sanitizedHtmlCache.keys().next().value;
-    if (firstKey !== undefined) {
-      sanitizedHtmlCache.delete(firstKey);
-    }
-  }
-
-  sanitizedHtmlCache.set(html, sanitized);
-  return sanitized;
-}
-
 export interface Props {
   cell: ITableColumns;
   item: string | TableItem;
@@ -345,8 +313,8 @@ const value = computed((): any => _.get(props.item, props.cell.field || props.ce
 const isEditable = computed(() => props.cell.editable && props.editing);
 
 const sanitizedHtml = computed(() => {
-  if (props.cell.type === "html" && value.value) {
-    return getSanitizedHtml(String(value.value));
+  if (props.cell.type === "html") {
+    return DOMPurify.default.sanitize(value.value as string, { USE_PROFILES: { html: true } });
   }
   return "";
 });

package/ui/components/organisms/vc-table/composables/useTableActions.ts

@@ -20,13 +20,16 @@ export function useTableActions<T extends TableItem | string>(options: UseTableA
     const builder = unref(itemActionBuilder);
 
     if (unref(enableItemActions) && typeof builder === "function") {
-      // Use Promise.all for parallel execution instead of sequential awaits
-      const actionPromises = items
-        .filter((item) => typeof item === "object")
-        .map((item) => builder(item));
-
-      const results = await Promise.all(actionPromises);
-      itemActions.value = results.filter((result): result is IActionBuilderResult<T>[] => !!result);
+      const populatedItems: IActionBuilderResult<T>[][] = [];
+      for (let index = 0; index < items.length; index++) {
+        if (typeof items[index] === "object") {
+          const elementWithActions = await builder(items[index]);
+          if (elementWithActions) {
+            populatedItems.push(elementWithActions);
+          }
+        }
+      }
+      itemActions.value = populatedItems;
     } else {
       itemActions.value = [];
     }

package/ui/components/organisms/vc-table/composables/useTableColumnResize.ts

@@ -1,8 +1,5 @@
 import { ref, Ref } from "vue";
 import { TableColPartial } from "../types";
-import { createLogger } from "../../../../../core/utilities";
-
-const logger = createLogger("vc-table-column-resize");
 
 export function useTableColumnResize(
   internalColumns: Ref<TableColPartial[]>,
@@ -38,7 +35,7 @@ export function useTableColumnResize(
     e.stopImmediatePropagation();
 
     if (!item.id) {
-      logger.warn("Column has no id, cannot resize:", item);
+      console.warn("Column has no id, cannot resize:", item);
       return;
     }
 

package/ui/components/organisms/vc-table/composables/useTableRowReorder.ts

@@ -1,8 +1,5 @@
 import { computed, ref, Ref } from "vue";
 import { TableItem } from "../types";
-import { createLogger } from "../../../../../core/utilities";
-
-const logger = createLogger("vc-table-row-reorder");
 
 export function useTableRowReorder<T extends TableItem | string>(
   items: Ref<T[]>,
@@ -30,7 +27,7 @@ export function useTableRowReorder<T extends TableItem | string>(
   function onRowMouseDown(event: MouseEvent) {
     if (event.currentTarget instanceof HTMLElement) {
       const row = event.currentTarget;
-      logger.debug("Row mousedown event", row);
+      console.log("row", row);
       const rowRect = row.getBoundingClientRect();
 
       dragOffset.value = {
@@ -57,7 +54,7 @@ export function useTableRowReorder<T extends TableItem | string>(
   }
 
   function onRowDragStart(event: DragEvent, item: T) {
-    logger.debug("Row drag start", { item });
+    console.log("onRowDragStart", event, item);
     rowDragged.value = true;
     const index = internalItems.value.indexOf(item);
     draggedRow.value = index;

package/ui/components/organisms/vc-table/composables/useTableSelection.ts

@@ -1,16 +1,9 @@
 import { computed, ref, Ref, watch } from "vue";
 import { TableItem } from "../types";
+import * as _ from "lodash-es";
 
 type TableItemType = TableItem | string;
 
-/**
- * Gets a unique identifier for a table item
- */
-function getItemId(item: TableItemType): string {
-  if (typeof item === "string") return item;
-  return (item as TableItem).id ?? JSON.stringify(item);
-}
-
 export interface UseTableSelectionOptions<T extends TableItemType> {
   items: Ref<T[]>;
   disableItemCheckbox?: (item: T) => boolean;
@@ -44,11 +37,8 @@ export function useTableSelection<T extends TableItemType>(options: UseTableSele
     return selection.value.length === items.value.length && (options.totalCount || 0) > items.value.length;
   });
 
-  // Use Set for O(1) selection lookups instead of O(n) array search with deep equality
-  const selectionIds = computed(() => new Set(selection.value.map(getItemId)));
-
   function isSelected(item: T): boolean {
-    return selectionIds.value.has(getItemId(item));
+    return selection.value.some((x) => _.isEqual(x, item));
   }
 
   function handleSelectAll(): void {
@@ -62,15 +52,14 @@ export function useTableSelection<T extends TableItemType>(options: UseTableSele
   }
 
   function rowCheckbox(item: T): void {
-    const itemId = getItemId(item);
-    const disabledIds = new Set(disabledSelection.value.map(getItemId));
-
-    if (disabledIds.has(itemId)) {
+    if (disabledSelection.value.includes(item)) {
       return;
     }
 
-    if (selectionIds.value.has(itemId)) {
-      selection.value = selection.value.filter((x) => getItemId(x) !== itemId);
+    const index = selection.value.findIndex((x) => _.isEqual(x, item));
+
+    if (index !== -1) {
+      selection.value = selection.value.filter((_, i) => i !== index);
     } else {
       selection.value = [...selection.value, item];
     }
@@ -78,11 +67,16 @@ export function useTableSelection<T extends TableItemType>(options: UseTableSele
 
   async function handleMultiselect(items: T[]): Promise<void> {
     if (disableItemCheckbox && typeof disableItemCheckbox === "function") {
-      // Use Promise.all for parallel execution instead of sequential awaits
-      const objectItems = items.filter((item) => typeof item === "object");
-      const results = await Promise.all(objectItems.map((item) => disableItemCheckbox(item)));
-
-      disabledSelection.value = objectItems.filter((_, index) => results[index]);
+      const disabledMultiselect: T[] = [];
+      for (const item of items) {
+        if (typeof item === "object") {
+          const element = await disableItemCheckbox(item);
+          if (element) {
+            disabledMultiselect.push(item);
+          }
+        }
+      }
+      disabledSelection.value = disabledMultiselect;
     }
   }
 
@@ -90,9 +84,7 @@ export function useTableSelection<T extends TableItemType>(options: UseTableSele
     () => items.value,
     (newItems) => {
       handleMultiselect(newItems);
-      // Use Set for O(1) lookups when filtering selection
-      const newItemIds = new Set(newItems.map(getItemId));
-      selection.value = selection.value.filter((item) => newItemIds.has(getItemId(item)));
+      selection.value = selection.value.filter((item) => newItems.includes(item));
     },
     { deep: true, immediate: true },
   );

package/ui/components/organisms/vc-table/composables/useTableState.ts

@@ -4,9 +4,6 @@ import { useLocalStorage } from "@vueuse/core";
 import { cloneDeep, pick, unionBy } from "lodash-es";
 import { TableColPartial } from "../types";
 import { ITableColumns } from "../../../../../core/types";
-import { createLogger } from "../../../../../core/utilities";
-
-const logger = createLogger("vc-table-state");
 
 export interface UseTableStateOptions {
   stateKey: Ref<string, string>;
@@ -50,7 +47,7 @@ export function useTableState(options: UseTableStateOptions) {
   });
 
   function saveState() {
-    logger.debug("Save state");
+    console.debug("[@vc-shell/framework#vc-table.vue] - Save state");
     const colsClone = cloneDeep(internalColumns.value);
     state.value = colsClone.map((col) => pick(col, "id", "visible", "width", "predefined", "title"));
   }