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

package/shared/components/draggable-dashboard/composables/useDashboardDragAndDrop.ts

@@ -11,6 +11,15 @@ import { useGridPosition, type CellSize } from "./useGridPosition";
 // Value of 80px is defined in DraggableDashboard.vue
 const CELL_HEIGHT = 80;
 
+/** Minimum movement threshold in pixels to start dragging */
+const DRAG_THRESHOLD = 3;
+/** Gap between widgets in pixels */
+const WIDGET_GAP = 20;
+/** Delay in ms for animation style application */
+const ANIMATION_STYLE_DELAY = 20;
+/** Delay in ms for state reset after drag ends */
+const STATE_RESET_DELAY = 50;
+
 /**
  * Return type for the useDashboardDragAndDrop composable.
  */
@@ -169,7 +178,7 @@ export function useDashboardDragAndDrop(
 
       if (originalWidget) {
         const cellSize = calculateCellSize();
-        const widgetGap = 20; // Widget gap in pixels
+        const widgetGap = WIDGET_GAP;
 
         // Get the current position of the clone (where the user released the mouse)
         const cloneRect = dragClone.value.getBoundingClientRect();
@@ -215,7 +224,7 @@ export function useDashboardDragAndDrop(
         setTimeout(() => {
           originalWidget.style.transition = `transform var(--dashboard-transition-duration) var(--dashboard-transition-timing)`;
           originalWidget.style.transform = `translate(${finalX}px, ${finalY}px)`;
-        }, 20); // Small delay for correct style application
+        }, ANIMATION_STYLE_DELAY);
       } else {
         // If the original is not found, simply remove the clone and update the data
         removeDragClone();
@@ -250,7 +259,7 @@ export function useDashboardDragAndDrop(
       isDragging.value = false;
       draggedWidget.value = null;
       resetPosition();
-    }, 50);
+    }, STATE_RESET_DELAY);
   };
 
   // Mouse/touch event handler with passive listeners
@@ -284,8 +293,8 @@ export function useDashboardDragAndDrop(
 
       const currentCoords = getEventCoordinates(moveEvent);
 
-      // Start dragging only if the mouse has moved more than 3 pixels
-      if (hasMovedBeyondThreshold(currentCoords, 3)) {
+      // Start dragging only if the mouse has moved beyond threshold
+      if (hasMovedBeyondThreshold(currentCoords, DRAG_THRESHOLD)) {
         hasDragStarted = true;
         isDragging.value = true;
         draggedWidget.value = widget;

package/shared/components/draggable-dashboard/composables/useLayoutPersistence.ts

@@ -1,5 +1,8 @@
 import { useLocalStorage } from "@vueuse/core";
 import type { DashboardWidgetPosition } from "../types";
+import { createLogger } from "../../../../core/utilities";
+
+const logger = createLogger("use-layout-persistence");
 
 /**
  * Hook for managing the saving and loading of the dashboard layout
@@ -34,7 +37,7 @@ export function useLayoutPersistence(
       // Save to localStorage through the reactive variable
       savedLayout.value = layoutData;
     } catch (error) {
-      console.error("Failed to save dashboard layout to localStorage:", error);
+      logger.error("Failed to save dashboard layout to localStorage:", error);
     }
   };
 
@@ -61,7 +64,7 @@ export function useLayoutPersistence(
 
       return true;
     } catch (error) {
-      console.error("Failed to load dashboard layout from localStorage:", error);
+      logger.error("Failed to load dashboard layout from localStorage:", error);
       return false;
     }
   };

package/shared/components/index.ts

@@ -16,3 +16,5 @@ export * from "./generic-dropdown";
 export * from "./draggable-dashboard";
 export * from "./dashboard-widget-card";
 export * from "./multilanguage-selector";
+// ai-agent-panel is now part of the ai-agent plugin
+// export * from "./core/plugins/ai-agent";

package/shared/components/notifications/composables/useContainer/index.ts

@@ -3,7 +3,9 @@ import { NotificationOptions, NotificationPosition } from "../../types";
 import { NotificationContainer } from "../../components";
 import { useInstance } from "../useInstance";
 import * as _ from "lodash-es";
-import { generateId } from "../../../../../core/utilities";
+import { generateId, createLogger } from "../../../../../core/utilities";
+
+const logger = createLogger("notification-container");
 
 export interface PendingNotification {
   notificationId: string | number;
@@ -304,7 +306,7 @@ export function useContainer(): IUseContainer {
 
         // If we found the notification and container to update
         if (notification && containerToUpdate) {
-          console.log(`Updating notification ${option.notificationId} in position ${containerPosition}`);
+          logger.debug(`Updating notification ${option.notificationId} in position ${containerPosition}`);
 
           // If the position changes, move the notification between containers
           if (option.position && option.position !== containerPosition) {
@@ -325,16 +327,16 @@ export function useContainer(): IUseContainer {
             // Check if a container already exists for the target position
             if (!getInstanceByPosition(targetPosition)) {
               // If no container exists for the target position, create a new one
-              console.log(`Creating new container for position ${targetPosition}`);
+              logger.debug(`Creating new container for position ${targetPosition}`);
               appendInstance(updatedNotification);
             } else {
               // If a container exists for the target position, add the updated notification
-              console.log(`Adding to existing container for position ${targetPosition}`);
+              logger.debug(`Adding to existing container for position ${targetPosition}`);
               notificationContainers[targetPosition].value.push(updatedNotification);
             }
           } else {
             // Standard update of notification properties
-            console.log(`Standard update of notification properties`);
+            logger.debug(`Standard update of notification properties`);
 
             // Apply all new properties from option to notification
             Object.keys(option).forEach((key) => {
@@ -353,7 +355,7 @@ export function useContainer(): IUseContainer {
 
           return true;
         } else {
-          console.warn(`Notification with ID ${option.notificationId} not found for update`);
+          logger.warn(`Notification with ID ${option.notificationId} not found for update`);
           return false;
         }
       }

package/shared/components/notifications/composables/useInstance/index.ts

@@ -1,5 +1,8 @@
 import { App, Ref, ref } from "vue";
 import { NotificationPosition } from "../../types";
+import { createLogger } from "../../../../../core/utilities";
+
+const logger = createLogger("notification-instance");
 
 interface IUseInstance {
   saveInstance(app: App<Element>, id: string, position: NotificationPosition): void;
@@ -51,7 +54,7 @@ export function useInstance(): IUseInstance {
         }
       }
     } catch (error) {
-      console.error(error);
+      logger.error("Failed to unmount notification component:", error);
     }
   }
 

package/shared/components/notifications/core/notification.ts

@@ -1,6 +1,9 @@
 import { mergeProps } from "vue";
 import { Content, InternalNotificationOptions, NotificationOptions, NotificationPosition } from "../types";
 import { useContainer } from "../composables/useContainer";
+import { createLogger } from "../../../../core/utilities";
+
+const logger = createLogger("notification");
 
 const {
   defaultOptions,
@@ -103,7 +106,7 @@ notification.remove = (notificationId?: number | string) => {
 notification.update = (notificationId: string | number, options: NotificationOptions) => {
   // Check if notification exists
   if (!hasNotification(notificationId)) {
-    console.warn(`Cannot update: notification with ID ${notificationId} not found`);
+    logger.warn(`Cannot update: notification with ID ${notificationId} not found`);
     return notificationId;
   }
 
@@ -195,12 +198,12 @@ notification.clearPosition = (position: NotificationPosition) => {
 notification.debug = () => {
   // Default settings information
   Object.entries(defaultOptions).forEach(([key, value]) => {
-    console.log(`Default option ${key}: `, value);
+    logger.debug(`Default option ${key}: `, value);
   });
 
   // Available actions
   Object.entries(actions).forEach(([key]) => {
-    console.log(`Available action: ${key}`);
+    logger.debug(`Available action: ${key}`);
   });
 
   // Collect statistics on notifications in different positions
@@ -231,14 +234,14 @@ notification.debug = () => {
 
   // Display group information
   Object.entries(groupedNotifications).forEach(([position, items]) => {
-    console.log(`Position ${position}: ${items.length} notifications`);
-    items.forEach((item) => console.log(`  - ${item.id} (${item.type}): ${item.content}`));
+    logger.debug(`Position ${position}: ${items.length} notifications`);
+    items.forEach((item) => logger.debug(`  - ${item.id} (${item.type}): ${item.content}`));
   });
 
   // Collect statistics on pending notifications
-  console.log(`Pending notifications: ${pending.items.length}`);
+  logger.debug(`Pending notifications: ${pending.items.length}`);
   pending.items.forEach((item) => {
-    console.log(`  - ${item.notificationId} (position: ${item.position})`);
+    logger.debug(`  - ${item.notificationId} (position: ${item.position})`);
   });
 
   return {

package/shared/components/popup-handler/components/vc-popup-container/vc-popup-container.vue

@@ -14,7 +14,7 @@
       <div
         v-if="typeof slot === 'string'"
         class="tw-h-full tw-w-full"
-        v-html="slot"
+        v-html="sanitizeHtml(slot)"
       ></div>
       <component
         :is="slot"
@@ -25,6 +25,25 @@
 </template>
 
 <script setup lang="ts">
+// eslint-disable-next-line import/no-named-as-default
+import DOMPurify from "dompurify";
 import { getPopupPlugin } from "./../../utils";
+
 const popupPlugin = getPopupPlugin();
+
+/**
+ * Sanitize HTML content to prevent XSS attacks
+ */
+function sanitizeHtml(html: string): string {
+  return DOMPurify.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"],
+  });
+}
 </script>

package/shared/components/sign-in/useExternalProvider.ts

@@ -1,6 +1,9 @@
 import { useLocalStorage } from "@vueuse/core";
 import type { Ref } from "vue";
 import { ExternalSignInClient, ExternalSignInProviderInfo } from "../../../core/api/platform";
+import { createLogger } from "../../../core/utilities";
+
+const logger = createLogger("use-external-provider");
 
 export interface IUseExternalProvider {
   storage: Ref<{ providerType?: string | undefined }>;
@@ -53,7 +56,7 @@ export const useExternalProvider = (): IUseExternalProvider => {
       // Redirect to the constructed URL
       window.location.assign(url);
     } catch (e) {
-      console.error(e);
+      logger.error("External sign-in failed:", e);
       throw e;
     }
   }
@@ -75,7 +78,7 @@ export const useExternalProvider = (): IUseExternalProvider => {
       // Redirect to the sign-out URL
       window.location.assign(url);
     } catch (e) {
-      console.error(e);
+      logger.error("External sign-out failed:", e);
       throw e;
     }
   }
@@ -85,8 +88,7 @@ export const useExternalProvider = (): IUseExternalProvider => {
     try {
       result = await externalSecurityClient.getExternalLoginProviders();
     } catch (e) {
-      console.error(e);
-      // TODO check error in app!!!
+      logger.error("Failed to get external login providers:", e);
     }
 
     return result;

package/shared/composables/index.ts

@@ -1,4 +1,5 @@
 export * from "./useMenuExpanded";
 export * from "./useModificationTracker";
 export * from "./useTableSort";
+export * from "./useTableSelection";
 export * from "./useExternalWidgets";

package/shared/composables/useExternalWidgets.ts

@@ -2,6 +2,9 @@ import { computed, inject, onMounted, onUnmounted, watch, toValue, Ref, Computed
 import { WidgetServiceKey, BladeInstance } from "../../injection-keys";
 import { IWidget } from "../../core/services";
 import { useBlade } from "../../core/composables";
+import { createLogger } from "../../core/utilities";
+
+const logger = createLogger("use-external-widgets");
 
 export interface UseExternalWidgetsOptions {
   bladeId: Ref<string> | string;
@@ -21,7 +24,7 @@ export function useExternalWidgets(options: UseExternalWidgetsOptions) {
 
   const registerExternalWidgets = () => {
     if (!widgetService || !blade?.value.id) {
-      console.warn("useExternalWidgets: Widget service or blade instance not available");
+      logger.warn("Widget service or blade instance not available");
       return;
     }
 
@@ -48,7 +51,7 @@ export function useExternalWidgets(options: UseExternalWidgetsOptions) {
         widgetService.registerWidget(newWidget, normalizedBladeId.value);
         registeredExternalWidgetIds.add(externalWidget.id);
       } catch (error) {
-        console.error(`Failed to register external widget '${externalWidget.id}':`, error);
+        logger.error(`Failed to register external widget '${externalWidget.id}':`, error);
       }
     });
   };
@@ -68,7 +71,7 @@ export function useExternalWidgets(options: UseExternalWidgetsOptions) {
             widget: { props: resolvedProps },
           });
         } catch (error) {
-          console.error(`Failed to update props for widget '${widget.id}':`, error);
+          logger.error(`Failed to update props for widget '${widget.id}':`, error);
         }
       }
     });
@@ -81,7 +84,7 @@ export function useExternalWidgets(options: UseExternalWidgetsOptions) {
       try {
         widgetService.unregisterWidget(widgetId, normalizedBladeId.value);
       } catch (error) {
-        console.error(`Failed to unregister external widget '${widgetId}':`, error);
+        logger.error(`Failed to unregister external widget '${widgetId}':`, error);
       }
     });
     registeredExternalWidgetIds.clear();

package/shared/composables/useMenuExpanded.ts

@@ -1,5 +1,5 @@
 import { useLocalStorage } from "@vueuse/core";
-import { ref } from "vue";
+import { ref, onScopeDispose } from "vue";
 
 const STORAGE_KEY_PREFIX = "VC_APP_MENU_EXPANDED";
 const HOVER_DELAY = 200;
@@ -42,6 +42,20 @@ export const useMenuExpanded = () => {
     }
   };
 
+  /**
+   * Cleanup timeout when the effect scope is disposed
+   * This prevents memory leaks when component using this composable is unmounted
+   */
+  const cleanup = () => {
+    if (expandTimeout) {
+      clearTimeout(expandTimeout);
+      expandTimeout = null;
+    }
+  };
+
+  // Register cleanup function to be called when effect scope is disposed
+  onScopeDispose(cleanup);
+
   return {
     isExpanded,
     toggleExpanded,

package/shared/composables/useTableSelection.ts

@@ -0,0 +1,151 @@
+import { ref, computed, Ref, ComputedRef } from "vue";
+import { createLogger } from "../../core/utilities";
+
+const logger = createLogger("use-table-selection");
+
+export interface UseTableSelectionOptions<T> {
+  /**
+   * The field to use for extracting IDs from items.
+   * Can be a key of T or a function that extracts the ID.
+   * @default 'id'
+   */
+  idField?: keyof T | ((item: T) => string | undefined);
+}
+
+export interface UseTableSelectionReturn<T> {
+  /**
+   * Array of currently selected item objects.
+   */
+  selectedItems: Ref<T[]>;
+
+  /**
+   * Computed array of IDs extracted from selected items.
+   */
+  selectedIds: ComputedRef<string[]>;
+
+  /**
+   * Whether "select all" across pagination is active.
+   */
+  allSelected: Ref<boolean>;
+
+  /**
+   * Number of currently selected items.
+   */
+  selectionCount: ComputedRef<number>;
+
+  /**
+   * Whether any items are currently selected.
+   */
+  hasSelection: ComputedRef<boolean>;
+
+  /**
+   * Handler for VcTable's @selection-changed event.
+   */
+  handleSelectionChange: (items: T[]) => void;
+
+  /**
+   * Handler for VcTable's @select:all event.
+   */
+  handleSelectAll: (selected: boolean) => void;
+
+  /**
+   * Clears all selection state.
+   */
+  resetSelection: () => void;
+
+  /**
+   * Checks if a specific item is selected.
+   */
+  isSelected: (item: T) => boolean;
+
+  /**
+   * Programmatically select items.
+   */
+  selectItems: (items: T[]) => void;
+
+  /**
+   * Deselect items by their IDs.
+   */
+  deselectByIds: (ids: string[]) => void;
+}
+
+export function useTableSelection<T extends object>(
+  options?: UseTableSelectionOptions<T>
+): UseTableSelectionReturn<T> {
+  const idField = options?.idField ?? ("id" as keyof T);
+
+  const getItemId = (item: T): string | undefined => {
+    if (typeof idField === "function") {
+      return idField(item);
+    }
+    const value = item[idField as keyof T];
+    return typeof value === "string" ? value : undefined;
+  };
+
+  const selectedItems = ref<T[]>([]) as Ref<T[]>;
+  const allSelected = ref(false);
+
+  const selectedIds = computed<string[]>(() => {
+    return selectedItems.value.flatMap((item) => {
+      const id = getItemId(item);
+      return id ? [id] : [];
+    });
+  });
+
+  const selectionCount = computed(() => selectedItems.value.length);
+  const hasSelection = computed(() => selectedItems.value.length > 0);
+  const selectedIdSet = computed(() => new Set(selectedIds.value));
+
+  const handleSelectionChange = (items: T[]): void => {
+    selectedItems.value = items;
+    if (items.length === 0) {
+      allSelected.value = false;
+    }
+    logger.debug("Selection changed", { count: items.length });
+  };
+
+  const handleSelectAll = (selected: boolean): void => {
+    allSelected.value = selected;
+    if (!selected) {
+      selectedItems.value = [];
+    }
+    logger.debug("Select all changed", { selected });
+  };
+
+  const resetSelection = (): void => {
+    selectedItems.value = [];
+    allSelected.value = false;
+    logger.debug("Selection reset");
+  };
+
+  const isSelected = (item: T): boolean => {
+    const id = getItemId(item);
+    return id ? selectedIdSet.value.has(id) : false;
+  };
+
+  const selectItems = (items: T[]): void => {
+    selectedItems.value = items;
+  };
+
+  const deselectByIds = (ids: string[]): void => {
+    const idsToRemove = new Set(ids);
+    selectedItems.value = selectedItems.value.filter((item) => {
+      const id = getItemId(item);
+      return id ? !idsToRemove.has(id) : true;
+    });
+  };
+
+  return {
+    selectedItems,
+    selectedIds,
+    allSelected,
+    selectionCount,
+    hasSelection,
+    handleSelectionChange,
+    handleSelectAll,
+    resetSelection,
+    isSelected,
+    selectItems,
+    deselectByIds,
+  };
+}

package/shared/composables/useTableSort.ts

@@ -1,6 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // framework/composables/useTableSort.ts
 import { ref, computed, Ref, WritableComputedRef } from "vue";
+import { createLogger } from "../../core/utilities";
+
+const logger = createLogger("use-table-sort");
 
 export type ITableSortDirection = "ASC" | "DESC";
 
@@ -48,8 +51,6 @@ export function useTableSort(options?: UseTableSortOptions): UseTableSortReturn
   });
 
   const handleSortChange = (sortParam: SortParam) => {
-    console.log("[useTableSort] handleSortChange triggered. Received sortParam:", JSON.stringify(sortParam));
-
     let newSortProperty: string | undefined = undefined;
     let newSortDirection: ITableSortDirection | undefined = undefined;
 
@@ -79,9 +80,8 @@ export function useTableSort(options?: UseTableSortOptions): UseTableSortReturn
         currentSortProperty.value = newSortProperty;
         currentSortDirection.value = newSortDirection || "ASC"; // Default to ASC if no direction provided
       }
-      console.log(`[useTableSort] New sort state: ${currentSortProperty.value}:${currentSortDirection.value}`);
     } else {
-      console.warn("[useTableSort] Could not determine valid sort property from sortParam:", sortParam);
+      logger.warn("Could not determine valid sort property from sortParam:", sortParam);
     }
   };
 

package/shared/modules/assets-manager/components/assets-manager/assets-manager.vue

@@ -160,6 +160,9 @@ import moment from "moment";
 import { isImage, getFileThumbnail, readableSize } from "./../../../../utilities/assets";
 import * as _ from "lodash-es";
 import { IParentCallArgs, useBladeNavigation } from "../../../../components";
+import { createLogger } from "../../../../../core/utilities";
+
+const logger = createLogger("assets-manager");
 
 export interface Props {
   expanded?: boolean;
@@ -317,7 +320,7 @@ async function onDrop(event: DragEvent) {
       try {
         await upload(fileList);
       } catch (error) {
-        console.error(error);
+        logger.error("Failed to upload dropped files:", error);
         throw error;
       }
 
@@ -362,7 +365,7 @@ async function upload(files: FileList) {
     try {
       defaultAssets.value = await props.options.assetsUploadHandler(modifiedFileList.files);
     } catch (error) {
-      console.error(error);
+      logger.error("Failed to upload assets:", error);
       throw error;
     }
   }
@@ -376,7 +379,7 @@ async function inputUpload(event: Event) {
     try {
       await upload(fileList);
     } catch (error) {
-      console.error(error);
+      logger.error("Failed to upload files:", error);
       throw error;
     }
 

package/shared/pages/LoginPage/components/login/Login.vue

@@ -183,6 +183,9 @@ import { useI18n } from "vue-i18n";
 import { default as ExternalProviders } from "./../../../../../shared/components/sign-in/external-providers.vue";
 import { useExternalProvider } from "./../../../../../shared/components/sign-in/useExternalProvider";
 import { ExtensionSlot, useExtensionSlot } from '../../../../../core/plugins/extension-points';
+import { createLogger } from "../../../../../core/utilities";
+
+const logger = createLogger("login-page");
 
 type ForgotPasswordFunc = (args: { loginOrEmail: string }) => Promise<void>;
 
@@ -305,7 +308,7 @@ const togglePassRequest = () => {
   }
 };
 
-console.debug("Init login-page");
+logger.debug("Init login-page");
 </script>
 
 <style lang="scss">

package/shared/utilities/colorUtils.ts

@@ -1,3 +1,7 @@
+import { createLogger } from "../../core/utilities";
+
+const logger = createLogger("color-utils");
+
 /**
  * Convert CSS color name to hex code using Canvas API
  * @param colorName - CSS color name (e.g., "red", "blue", "lime")
@@ -27,22 +31,11 @@ export function convertColorNameToHex(colorName: string): string | null {
 
     return ctx.fillStyle; // Returns hex format
   } catch (error) {
-    console.warn("Error converting color name to hex:", error);
+    logger.warn("Error converting color name to hex:", error);
     return null;
   }
 }
 
-/**
- * Convert hex code to human-readable color name
- * @param hex - Hex color code (e.g., "#ff0000", "ff0000")
- * @returns Always returns null - don't auto-fill color names
- */
-export function convertHexToColorName(hex: string): string | null {
-  // Always return null - don't auto-fill
-  // User should enter custom color name manually
-  return null;
-}
-
 /**
  * Check if a string is a valid hex color
  * @param value - String to check

package/ui/components/atoms/vc-banner/vc-banner.vue

@@ -73,6 +73,9 @@ const props = withDefaults(defineProps<Props>(), {
   iconSize: "xxl",
 });
 
+/** Maximum height in pixels before content is collapsed */
+const COLLAPSED_MAX_HEIGHT = 100;
+
 const contentRef = ref<HTMLDivElement>();
 const isExpanded = ref(false);
 const hasOverflow = ref(false);
@@ -83,7 +86,7 @@ const toggle = () => {
 
 const checkOverflow = () => {
   if (contentRef.value) {
-    hasOverflow.value = contentRef.value.scrollHeight > 100;
+    hasOverflow.value = contentRef.value.scrollHeight > COLLAPSED_MAX_HEIGHT;
   }
 };