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

package/shared/components/blade-navigation/composables/useBladeNavigation/internal/bladeActions.ts

@@ -8,9 +8,6 @@ import type { notification as NotificationServiceType } from "../../../../notifi
 import type { BladeVNode, IBladeEvent, BladeInstanceConstructor } from "../../../types";
 import type { _createBladeStateManagement } from "./bladeState";
 import type { _createRouterUtils } from "./routerUtils";
-import { createLogger } from "../../../../../../core/utilities";
-
-const logger = createLogger("blade-actions");
 
 // --- Blade Actions Module ---
 export function _createBladeActions(
@@ -71,7 +68,7 @@ export function _createBladeActions(
         }
       }
     } catch (e) {
-      logger.error("Error opening workspace:", e);
+      console.error(e);
       const bladeNameForError =
         bladeComponent?.type?.name ||
         (typeof bladeInput === "object" && "name" in bladeInput ? bladeInput.name : "Unknown");
@@ -95,11 +92,11 @@ export function _createBladeActions(
       const instanceComponent = sourceBladeInstance || bladeState.activeWorkspace.value;
 
       if (!instanceComponent) {
-        logger.error("No active workspace or source blade instance provided to open a blade into.");
+        console.error("No active workspace or source blade instance provided to open a blade into.");
         throw new Error("No workspace or source blade context to open blade.");
       }
       if (!isVNode(instanceComponent)) {
-        logger.error("Source blade instance or active workspace is not a valid VNode.", instanceComponent);
+        console.error("Source blade instance or active workspace is not a valid VNode.", instanceComponent);
         throw new Error("Internal error: Invalid instanceComponent for opening blade.");
       }
 
@@ -143,7 +140,7 @@ export function _createBladeActions(
         }
       }
     } catch (e) {
-      logger.error("Error in openBlade:", e);
+      console.error("Error in openBlade:", e);
     }
   }
 

package/shared/components/blade-navigation/composables/useBladeNavigation/internal/bladeRouteResolver.ts

@@ -6,9 +6,6 @@ import type { BladeInstanceConstructor, BladeVNode } from "../../../types";
 import type { _createBladeStateManagement } from "./bladeState";
 import type { _createRouterUtils } from "./routerUtils";
 import type { _createBladeActions } from "./bladeActions";
-import { createLogger } from "../../../../../../core/utilities";
-
-const logger = createLogger("blade-route-resolver");
 
 /**
  * Checks if a component is routable from URL
@@ -93,7 +90,7 @@ export function _createBladeRouteResolver(
 
       return undefined;
     } catch (error) {
-      logger.error("Error in findBladeComponentByUrlSegment:", error instanceof Error ? error.message : String(error));
+      console.error("Error in findBladeComponentByUrlSegment:", error instanceof Error ? error.message : String(error));
       return undefined;
     }
   }

package/shared/components/blade-navigation/composables/useBladeNavigation/internal/routerUtils.ts

@@ -1,9 +1,6 @@
 import { computed, shallowRef, Ref, markRaw, watch } from "vue";
 import { RouteLocationNormalized, Router, LocationQuery, RouteRecordNameGeneric, RouteParamsGeneric } from "vue-router";
 import type { BladeVNode } from "../../../types";
-import { createLogger } from "../../../../../../core/utilities";
-
-const logger = createLogger("blade-router-utils");
 
 const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/;
 
@@ -146,7 +143,7 @@ export function _createRouterUtils(router: Router, route: RouteLocationNormalize
       if (mainRouteAlias?.name) {
         return { name: mainRouteAlias.name as RouteRecordNameGeneric, params: route.params as RouteParamsGeneric };
       }
-      logger.error("goToRoot: Main route or its alias with a name not found!");
+      console.error("goToRoot: Main route or its alias with a name not found!");
       return { path: "/" };
     },
   };

package/shared/components/change-password/change-password.vue

@@ -102,7 +102,7 @@
           class="tw-grow tw-basis-0"
         ></span> -->
           <VcButton
-            variant="secondary"
+            :outline="true"
             class="tw-mr-3"
             @click="cancelChange"
           >

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

@@ -11,15 +11,6 @@ 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.
  */
@@ -178,7 +169,7 @@ export function useDashboardDragAndDrop(
 
       if (originalWidget) {
         const cellSize = calculateCellSize();
-        const widgetGap = WIDGET_GAP;
+        const widgetGap = 20; // Widget gap in pixels
 
         // Get the current position of the clone (where the user released the mouse)
         const cloneRect = dragClone.value.getBoundingClientRect();
@@ -224,7 +215,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)`;
-        }, ANIMATION_STYLE_DELAY);
+        }, 20); // Small delay for correct style application
       } else {
         // If the original is not found, simply remove the clone and update the data
         removeDragClone();
@@ -259,7 +250,7 @@ export function useDashboardDragAndDrop(
       isDragging.value = false;
       draggedWidget.value = null;
       resetPosition();
-    }, STATE_RESET_DELAY);
+    }, 50);
   };
 
   // Mouse/touch event handler with passive listeners
@@ -293,8 +284,8 @@ export function useDashboardDragAndDrop(
 
       const currentCoords = getEventCoordinates(moveEvent);
 
-      // Start dragging only if the mouse has moved beyond threshold
-      if (hasMovedBeyondThreshold(currentCoords, DRAG_THRESHOLD)) {
+      // Start dragging only if the mouse has moved more than 3 pixels
+      if (hasMovedBeyondThreshold(currentCoords, 3)) {
         hasDragStarted = true;
         isDragging.value = true;
         draggedWidget.value = widget;

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

@@ -1,8 +1,5 @@
 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
@@ -37,7 +34,7 @@ export function useLayoutPersistence(
       // Save to localStorage through the reactive variable
       savedLayout.value = layoutData;
     } catch (error) {
-      logger.error("Failed to save dashboard layout to localStorage:", error);
+      console.error("Failed to save dashboard layout to localStorage:", error);
     }
   };
 
@@ -64,7 +61,7 @@ export function useLayoutPersistence(
 
       return true;
     } catch (error) {
-      logger.error("Failed to load dashboard layout from localStorage:", error);
+      console.error("Failed to load dashboard layout from localStorage:", error);
       return false;
     }
   };

package/shared/components/index.ts

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

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

@@ -1,8 +1,5 @@
 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;
@@ -54,7 +51,7 @@ export function useInstance(): IUseInstance {
         }
       }
     } catch (error) {
-      logger.error("Failed to unmount notification component:", error);
+      console.error(error);
     }
   }
 

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

@@ -1,9 +1,6 @@
 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,
@@ -106,7 +103,7 @@ notification.remove = (notificationId?: number | string) => {
 notification.update = (notificationId: string | number, options: NotificationOptions) => {
   // Check if notification exists
   if (!hasNotification(notificationId)) {
-    logger.warn(`Cannot update: notification with ID ${notificationId} not found`);
+    console.warn(`Cannot update: notification with ID ${notificationId} not found`);
     return notificationId;
   }
 
@@ -198,12 +195,12 @@ notification.clearPosition = (position: NotificationPosition) => {
 notification.debug = () => {
   // Default settings information
   Object.entries(defaultOptions).forEach(([key, value]) => {
-    logger.debug(`Default option ${key}: `, value);
+    console.log(`Default option ${key}: `, value);
   });
 
   // Available actions
   Object.entries(actions).forEach(([key]) => {
-    logger.debug(`Available action: ${key}`);
+    console.log(`Available action: ${key}`);
   });
 
   // Collect statistics on notifications in different positions
@@ -234,14 +231,14 @@ notification.debug = () => {
 
   // Display group information
   Object.entries(groupedNotifications).forEach(([position, items]) => {
-    logger.debug(`Position ${position}: ${items.length} notifications`);
-    items.forEach((item) => logger.debug(`  - ${item.id} (${item.type}): ${item.content}`));
+    console.log(`Position ${position}: ${items.length} notifications`);
+    items.forEach((item) => console.log(`  - ${item.id} (${item.type}): ${item.content}`));
   });
 
   // Collect statistics on pending notifications
-  logger.debug(`Pending notifications: ${pending.items.length}`);
+  console.log(`Pending notifications: ${pending.items.length}`);
   pending.items.forEach((item) => {
-    logger.debug(`  - ${item.notificationId} (position: ${item.position})`);
+    console.log(`  - ${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="sanitizeHtml(slot)"
+        v-html="slot"
       ></div>
       <component
         :is="slot"
@@ -25,25 +25,6 @@
 </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,9 +1,6 @@
 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 }>;
@@ -56,7 +53,7 @@ export const useExternalProvider = (): IUseExternalProvider => {
       // Redirect to the constructed URL
       window.location.assign(url);
     } catch (e) {
-      logger.error("External sign-in failed:", e);
+      console.error(e);
       throw e;
     }
   }
@@ -78,7 +75,7 @@ export const useExternalProvider = (): IUseExternalProvider => {
       // Redirect to the sign-out URL
       window.location.assign(url);
     } catch (e) {
-      logger.error("External sign-out failed:", e);
+      console.error(e);
       throw e;
     }
   }
@@ -88,7 +85,8 @@ export const useExternalProvider = (): IUseExternalProvider => {
     try {
       result = await externalSecurityClient.getExternalLoginProviders();
     } catch (e) {
-      logger.error("Failed to get external login providers:", e);
+      console.error(e);
+      // TODO check error in app!!!
     }
 
     return result;

package/shared/composables/useExternalWidgets.ts

@@ -2,9 +2,6 @@ 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;
@@ -24,7 +21,7 @@ export function useExternalWidgets(options: UseExternalWidgetsOptions) {
 
   const registerExternalWidgets = () => {
     if (!widgetService || !blade?.value.id) {
-      logger.warn("Widget service or blade instance not available");
+      console.warn("useExternalWidgets: Widget service or blade instance not available");
       return;
     }
 
@@ -51,7 +48,7 @@ export function useExternalWidgets(options: UseExternalWidgetsOptions) {
         widgetService.registerWidget(newWidget, normalizedBladeId.value);
         registeredExternalWidgetIds.add(externalWidget.id);
       } catch (error) {
-        logger.error(`Failed to register external widget '${externalWidget.id}':`, error);
+        console.error(`Failed to register external widget '${externalWidget.id}':`, error);
       }
     });
   };
@@ -71,7 +68,7 @@ export function useExternalWidgets(options: UseExternalWidgetsOptions) {
             widget: { props: resolvedProps },
           });
         } catch (error) {
-          logger.error(`Failed to update props for widget '${widget.id}':`, error);
+          console.error(`Failed to update props for widget '${widget.id}':`, error);
         }
       }
     });
@@ -84,7 +81,7 @@ export function useExternalWidgets(options: UseExternalWidgetsOptions) {
       try {
         widgetService.unregisterWidget(widgetId, normalizedBladeId.value);
       } catch (error) {
-        logger.error(`Failed to unregister external widget '${widgetId}':`, error);
+        console.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, onScopeDispose } from "vue";
+import { ref } from "vue";
 
 const STORAGE_KEY_PREFIX = "VC_APP_MENU_EXPANDED";
 const HOVER_DELAY = 200;
@@ -42,20 +42,6 @@ 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

@@ -1,7 +1,4 @@
 import { ref, computed, Ref, ComputedRef } from "vue";
-import { createLogger } from "../../core/utilities";
-
-const logger = createLogger("use-table-selection");
 
 export interface UseTableSelectionOptions<T> {
   /**
@@ -101,7 +98,6 @@ export function useTableSelection<T extends object>(
     if (items.length === 0) {
       allSelected.value = false;
     }
-    logger.debug("Selection changed", { count: items.length });
   };
 
   const handleSelectAll = (selected: boolean): void => {
@@ -109,13 +105,11 @@ export function useTableSelection<T extends object>(
     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 => {

package/shared/composables/useTableSort.ts

@@ -1,9 +1,6 @@
 /* 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";
 
@@ -51,6 +48,8 @@ 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;
 
@@ -80,8 +79,9 @@ 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 {
-      logger.warn("Could not determine valid sort property from sortParam:", sortParam);
+      console.warn("[useTableSort] Could not determine valid sort property from sortParam:", sortParam);
     }
   };
 

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

@@ -160,9 +160,6 @@ 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;
@@ -320,7 +317,7 @@ async function onDrop(event: DragEvent) {
       try {
         await upload(fileList);
       } catch (error) {
-        logger.error("Failed to upload dropped files:", error);
+        console.error(error);
         throw error;
       }
 
@@ -365,7 +362,7 @@ async function upload(files: FileList) {
     try {
       defaultAssets.value = await props.options.assetsUploadHandler(modifiedFileList.files);
     } catch (error) {
-      logger.error("Failed to upload assets:", error);
+      console.error(error);
       throw error;
     }
   }
@@ -379,7 +376,7 @@ async function inputUpload(event: Event) {
     try {
       await upload(fileList);
     } catch (error) {
-      logger.error("Failed to upload files:", error);
+      console.error(error);
       throw error;
     }
 

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

@@ -183,9 +183,6 @@ 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>;
 
@@ -308,7 +305,7 @@ const togglePassRequest = () => {
   }
 };
 
-logger.debug("Init login-page");
+console.debug("Init login-page");
 </script>
 
 <style lang="scss">

package/shared/utilities/colorUtils.ts

@@ -1,7 +1,3 @@
-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")
@@ -31,11 +27,22 @@ export function convertColorNameToHex(colorName: string): string | null {
 
     return ctx.fillStyle; // Returns hex format
   } catch (error) {
-    logger.warn("Error converting color name to hex:", error);
+    console.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