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

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,21 +41,17 @@ 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 } =
-  useToolbar();
+const {
+  registerToolbarItem,
+  unregisterToolbarItem,
+  getToolbarItems,
+  clearBladeToolbarItems,
+  updateToolbarItem,
+  registeredToolbarItems,
+} = useToolbar();
 
 // Get the ID of the current blade
-const blade = inject<ComputedRef<IBladeInstance>>(
-  BladeInstance,
-  computed(() => ({
-    id: FALLBACK_BLADE_ID,
-    expandable: false,
-    maximized: false,
-    error: undefined,
-    navigation: undefined,
-    breadcrumbs: undefined,
-  })),
-);
+const blade = useBlade();
 
 const bladeId = computed(() => (blade.value?.id ?? FALLBACK_BLADE_ID).toLowerCase());
 
@@ -126,6 +122,10 @@ 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,8 +288,10 @@ const openErrorDetails = () => {
 }
 
 .vc-blade {
-  @apply tw-relative tw-flex tw-shrink-0 tw-flex-col tw-overflow-hidden tw-transition-[width] tw-duration-200;
+  @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));
 
   &__back-button {
     @apply tw-mr-[14px];

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

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

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

@@ -290,6 +290,38 @@ 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;
@@ -313,8 +345,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") {
-    return DOMPurify.default.sanitize(value.value as string, { USE_PROFILES: { html: true } });
+  if (props.cell.type === "html" && value.value) {
+    return getSanitizedHtml(String(value.value));
   }
   return "";
 });

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

@@ -20,16 +20,13 @@ export function useTableActions<T extends TableItem | string>(options: UseTableA
     const builder = unref(itemActionBuilder);
 
     if (unref(enableItemActions) && typeof builder === "function") {
-      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;
+      // 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);
     } else {
       itemActions.value = [];
     }

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

@@ -1,5 +1,8 @@
 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[]>,
@@ -35,7 +38,7 @@ export function useTableColumnResize(
     e.stopImmediatePropagation();
 
     if (!item.id) {
-      console.warn("Column has no id, cannot resize:", item);
+      logger.warn("Column has no id, cannot resize:", item);
       return;
     }
 

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

@@ -1,5 +1,8 @@
 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[]>,
@@ -27,7 +30,7 @@ export function useTableRowReorder<T extends TableItem | string>(
   function onRowMouseDown(event: MouseEvent) {
     if (event.currentTarget instanceof HTMLElement) {
       const row = event.currentTarget;
-      console.log("row", row);
+      logger.debug("Row mousedown event", row);
       const rowRect = row.getBoundingClientRect();
 
       dragOffset.value = {
@@ -54,7 +57,7 @@ export function useTableRowReorder<T extends TableItem | string>(
   }
 
   function onRowDragStart(event: DragEvent, item: T) {
-    console.log("onRowDragStart", event, item);
+    logger.debug("Row drag start", { item });
     rowDragged.value = true;
     const index = internalItems.value.indexOf(item);
     draggedRow.value = index;

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

@@ -1,9 +1,16 @@
 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;
@@ -37,8 +44,11 @@ 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 selection.value.some((x) => _.isEqual(x, item));
+    return selectionIds.value.has(getItemId(item));
   }
 
   function handleSelectAll(): void {
@@ -52,14 +62,15 @@ export function useTableSelection<T extends TableItemType>(options: UseTableSele
   }
 
   function rowCheckbox(item: T): void {
-    if (disabledSelection.value.includes(item)) {
+    const itemId = getItemId(item);
+    const disabledIds = new Set(disabledSelection.value.map(getItemId));
+
+    if (disabledIds.has(itemId)) {
       return;
     }
 
-    const index = selection.value.findIndex((x) => _.isEqual(x, item));
-
-    if (index !== -1) {
-      selection.value = selection.value.filter((_, i) => i !== index);
+    if (selectionIds.value.has(itemId)) {
+      selection.value = selection.value.filter((x) => getItemId(x) !== itemId);
     } else {
       selection.value = [...selection.value, item];
     }
@@ -67,16 +78,11 @@ export function useTableSelection<T extends TableItemType>(options: UseTableSele
 
   async function handleMultiselect(items: T[]): Promise<void> {
     if (disableItemCheckbox && typeof disableItemCheckbox === "function") {
-      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;
+      // 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]);
     }
   }
 
@@ -84,7 +90,9 @@ export function useTableSelection<T extends TableItemType>(options: UseTableSele
     () => items.value,
     (newItems) => {
       handleMultiselect(newItems);
-      selection.value = selection.value.filter((item) => newItems.includes(item));
+      // 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)));
     },
     { deep: true, immediate: true },
   );

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

@@ -4,6 +4,9 @@ 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>;
@@ -47,7 +50,7 @@ export function useTableState(options: UseTableStateOptions) {
   });
 
   function saveState() {
-    console.debug("[@vc-shell/framework#vc-table.vue] - Save state");
+    logger.debug("Save state");
     const colsClone = cloneDeep(internalColumns.value);
     state.value = colsClone.map((col) => pick(col, "id", "visible", "width", "predefined", "title"));
   }

package/core/services/global-search-service.ts

@@ -1,36 +0,0 @@
-import { Ref, ref } from "vue";
-
-export interface GlobalSearchState {
-  isSearchVisible: Ref<Record<string, boolean>>;
-  searchQuery: Ref<Record<string, string>>;
-  toggleSearch: (bladeId: string) => void;
-  setSearchQuery: (bladeId: string, query: string) => void;
-  closeSearch: (bladeId: string) => void;
-}
-
-export function createGlobalSearchService() {
-  const isSearchVisible = ref<Record<string, boolean>>({});
-  const searchQuery = ref<Record<string, string>>({});
-
-  const toggleSearch = (bladeId: string) => {
-    isSearchVisible.value[bladeId] = !isSearchVisible.value[bladeId];
-  };
-
-  const setSearchQuery = (bladeId: string, query: string) => {
-    searchQuery.value[bladeId] = query;
-  };
-
-  const closeSearch = (bladeId: string) => {
-    isSearchVisible.value[bladeId] = false;
-  };
-
-  const state: GlobalSearchState = {
-    isSearchVisible,
-    searchQuery,
-    toggleSearch,
-    setSearchQuery,
-    closeSearch,
-  };
-
-  return state;
-}

package/dist/core/services/global-search-service.d.ts

@@ -1,10 +0,0 @@
-import { Ref } from "vue";
-export interface GlobalSearchState {
-    isSearchVisible: Ref<Record<string, boolean>>;
-    searchQuery: Ref<Record<string, string>>;
-    toggleSearch: (bladeId: string) => void;
-    setSearchQuery: (bladeId: string, query: string) => void;
-    closeSearch: (bladeId: string) => void;
-}
-export declare function createGlobalSearchService(): GlobalSearchState;
-//# sourceMappingURL=global-search-service.d.ts.map

package/dist/core/services/global-search-service.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"global-search-service.d.ts","sourceRoot":"","sources":["../../../core/services/global-search-service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAO,MAAM,KAAK,CAAC;AAE/B,MAAM,WAAW,iBAAiB;IAChC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC9C,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,wBAAgB,yBAAyB,sBAyBxC"}