@vc-shell/framework 1.1.30 → 1.1.34

package/CHANGELOG.md

@@ -1,3 +1,37 @@
+## [1.1.34](https://github.com/VirtoCommerce/vc-shell/compare/v1.1.33...v1.1.34) (2025-06-23)
+
+
+
+## [1.1.33](https://github.com/VirtoCommerce/vc-shell/compare/v1.1.32...v1.1.33) (2025-06-23)
+
+
+
+## [1.1.32](https://github.com/VirtoCommerce/vc-shell/compare/v1.1.31...v1.1.32) (2025-06-23)
+
+
+
+## [1.1.31](https://github.com/VirtoCommerce/vc-shell/compare/v1.1.30...v1.1.31) (2025-06-23)
+
+
+### Bug Fixes
+
+* **types:** update error property in IBladeInstance to allow undefined value ([c2f0fb5](https://github.com/VirtoCommerce/vc-shell/commit/c2f0fb58513e15ffadc581f2b75d43618c3b6f10))
+* **useLanguages:** add validation to getFlag function to handle empty language input ([853325e](https://github.com/VirtoCommerce/vc-shell/commit/853325ecc55e5e26f2e90021f8b4b7d7b6415142))
+* **vc-checkbox:** update v-model binding to use modelValue and enhance checked state logic for array support ([e3a70dd](https://github.com/VirtoCommerce/vc-shell/commit/e3a70ddc0badd12160319a259ccd592ddb823ca9))
+
+
+### Features
+
+* **composables:** add useModificationTracker composable for tracking value changes and modifications ([ad911e1](https://github.com/VirtoCommerce/vc-shell/commit/ad911e19640ea675a70cdaf2e6b6c6f5c0f2f0a4))
+* **dashboard:** enhance useDashboardDragAndDrop composable with TypeScript return type and improved setGridContainer function ([65a726f](https://github.com/VirtoCommerce/vc-shell/commit/65a726f65d396f073a21f3502fba7e62e2ce4f03))
+* **error-handling:** implement DisplayableError class and enhance useErrorHandler for better error normalization and handling ([a68473b](https://github.com/VirtoCommerce/vc-shell/commit/a68473b98726d436d3ab272e0afee9db2d92174b))
+* **multilanguage-selector:** add VcLanguageSelector component for language selection with dropdown functionality ([f620e1d](https://github.com/VirtoCommerce/vc-shell/commit/f620e1dfa94b4b468c5c40a276c411be4b993f9b))
+* **vc-app:** add disableAppSwitcher prop to control app switcher visibility in VcApp component ([ab2d6dc](https://github.com/VirtoCommerce/vc-shell/commit/ab2d6dc7c09cbf99f7501bb6a8b51d9c3be3d1af))
+* **vc-banner:** add VcBanner component for displaying contextual information with expandable content ([5fa7b4f](https://github.com/VirtoCommerce/vc-shell/commit/5fa7b4f77117a02aa559a48dc1f020414c380720))
+* **vc-card:** enhance VcCard component by adding v-bind for attribute inheritance and defining component options ([12d0096](https://github.com/VirtoCommerce/vc-shell/commit/12d0096809ce46cbff1cdf30c8b4f44d6f69a8ad))
+
+
+
 ## [1.1.30](https://github.com/VirtoCommerce/vc-shell/compare/v1.1.29...v1.1.30) (2025-06-11)
 
 

package/core/composables/useErrorHandler/index.ts

@@ -1,14 +1,23 @@
 import { onErrorCaptured, getCurrentInstance, ref, Ref } from "vue";
 import { useAppInsights } from "..";
 import { useUserManagement } from "../useUserManagement";
+import { DisplayableError, parseError } from "../../utilities/error";
 
 interface IUseErrorHandler {
-  error: Ref<string | null>;
+  error: Ref<DisplayableError | null>;
   reset(): void;
 }
 
+/**
+ * A composable to handle and normalize errors within a component's lifecycle.
+ * It captures errors, tracks them with Application Insights, and emits them
+ * for parent components to handle.
+ *
+ * @param capture - If true, prevents the error from propagating further up the component tree.
+ * @returns An object with the reactive error and a reset function.
+ */
 export function useErrorHandler(capture?: boolean): IUseErrorHandler {
-  const error = ref<string | null>(null);
+  const error = ref<DisplayableError | null>(null);
   const instance = getCurrentInstance();
   const { appInsights } = useAppInsights();
   const { user } = useUserManagement();
@@ -21,45 +30,28 @@ export function useErrorHandler(capture?: boolean): IUseErrorHandler {
     }
   }
 
-  onErrorCaptured((err) => {
-    if (err) {
-      if (err instanceof Error) {
-        if (typeof err === "object" && "isApiException" in err && "response" in err) {
-          const res = JSON.parse(String(err.response));
-          if (res && "message" in res) {
-            error.value = res.message;
-          } else if (err.message) {
-            error.value = err.message;
-          } else {
-            error.value = err.toString();
-          }
-        } else {
-          error.value = err.message || err.toString();
-        }
-      } else {
-        error.value = String(err);
-      }
-
-      if (appInsights) {
-        appInsights.trackException({
-          exception: err instanceof Error ? err : new Error(String(err)),
-          properties: {
-            userId: user.value?.id ?? "",
-            userName: user.value?.userName ?? "",
-          },
-        });
-      }
-
-      console.error(err);
+  onErrorCaptured((err: unknown) => {
+    const capturedError = parseError(err);
+    error.value = capturedError;
+
+    if (appInsights) {
+      appInsights.trackException({
+        exception: capturedError,
+        properties: {
+          userId: user.value?.id ?? "",
+          userName: user.value?.userName ?? "",
+        },
+      });
     }
 
+    console.error("Captured Error:", capturedError.originalError);
+
     if (instance) {
-      instance.emit("error", error.value);
+      instance.emit("error", capturedError);
     }
 
-    if (capture) {
-      return false;
-    }
+    // if `capture` is true, stop the error from propagating further.
+    return !capture;
   });
 
   return {

package/core/composables/useLanguages/index.ts

@@ -63,6 +63,7 @@ export const useLanguages = createSharedComposable(() => {
   }
 
   async function getFlag(language: string): Promise<string> {
+    if (!language) return "";
     const countryCode = getCountryCode(language);
     return new URL(`../../../assets/icons/flags/${countryCode}.svg`, import.meta.url).href;
   }

package/core/services/settings-menu-service.ts

@@ -1,25 +1,25 @@
 import { ref, computed, Component, ComputedRef } from "vue";
 
-export interface SettingsMenuItem {
+export interface ISettingsMenuItem {
   id: string;
   order?: number;
   component: Component;
   props?: Record<string, unknown>;
 }
 
-export interface RegisterSettingsMenuItemOptions extends Omit<SettingsMenuItem, "id"> {
+export interface RegisterSettingsMenuItemOptions extends Omit<ISettingsMenuItem, "id"> {
   id?: string;
 }
 
 export interface ISettingsMenuService {
   register: (options: RegisterSettingsMenuItemOptions) => string;
   unregister: (id: string) => void;
-  items: ComputedRef<SettingsMenuItem[]>;
+  items: ComputedRef<ISettingsMenuItem[]>;
 }
 
 // Global state for pre-registering settings menu items
-const preregisteredSettingsMenuItems: SettingsMenuItem[] = [];
-const settingsMenuItems = ref<Map<string, SettingsMenuItem>>(new Map());
+const preregisteredSettingsMenuItems: ISettingsMenuItem[] = [];
+const settingsMenuItems = ref<Map<string, ISettingsMenuItem>>(new Map());
 
 /**
  * Registers a settings menu item before the service is initialized
@@ -54,7 +54,7 @@ export function createSettingsMenuService(): ISettingsMenuService {
     settingsMenuItems.value.delete(id);
   };
 
-  const items = computed<SettingsMenuItem[]>(() => {
+  const items = computed<ISettingsMenuItem[]>(() => {
     return Array.from(settingsMenuItems.value.values()).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
   });
 

package/core/utilities/error.ts

@@ -0,0 +1,89 @@
+// A custom error class to normalize different error types for display.
+export class DisplayableError extends Error {
+  details: string;
+  originalError: unknown;
+
+  constructor(shortMessage: string, details: string, originalError: unknown) {
+    super(shortMessage);
+    this.name = "DisplayableError";
+    this.details = details;
+    this.originalError = originalError;
+  }
+}
+// TODO: add to docs?
+/**
+ * Parses an unknown error type into a standardized DisplayableError.
+ * This function handles nested errors, API responses, and various error formats.
+ * @param errorToParse The error to analyze.
+ * @returns A DisplayableError instance.
+ */
+export function parseError(errorToParse: unknown): DisplayableError {
+  if (errorToParse instanceof DisplayableError) {
+    return errorToParse;
+  }
+
+  // Handle Axios-style errors, which are instances of Error but have a `response` property.
+  if (errorToParse instanceof Error && "response" in errorToParse && errorToParse.response) {
+    // Delegate to parse the nested response object.
+    return parseError(errorToParse.response);
+  }
+
+  // Handle standard Error objects.
+  if (errorToParse instanceof Error) {
+    return new DisplayableError(errorToParse.message, errorToParse.stack || String(errorToParse), errorToParse);
+  }
+
+  // Handle strings, which might be JSON.
+  if (typeof errorToParse === "string") {
+    try {
+      const parsed = JSON.parse(errorToParse);
+      return parseError(parsed);
+    } catch {
+      // Not a JSON string, treat as a plain message.
+      return new DisplayableError(errorToParse, errorToParse, errorToParse);
+    }
+  }
+
+  // Handle plain objects, which are likely API responses.
+  if (typeof errorToParse === "object" && errorToParse !== null) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const errorObject = errorToParse as Record<string, any>;
+
+    // Check if it conforms to the expected API error response structure.
+    if ("status" in errorObject && "data" in errorObject) {
+      const status = errorObject.status;
+      const statusText = errorObject.statusText || "Error"; // TODO: i18n
+      const shortMessage = `${status}: ${statusText}`;
+
+      const data = errorObject.data;
+      let details = "";
+
+      if (data) {
+        if (typeof data.exceptionMessage === "string") {
+          details = data.exceptionMessage;
+        } else if (typeof data.message === "string") {
+          details = data.message;
+        } else if (Array.isArray(data.errors)) {
+          details = data.errors.join("\n");
+        } else if (typeof data === "string") {
+          details = data;
+        } else {
+          details = JSON.stringify(data, null, 2);
+        }
+      } else {
+        // Fallback if data is null/undefined.
+        details = JSON.stringify(errorObject, null, 2);
+      }
+
+      return new DisplayableError(shortMessage, details, errorToParse);
+    }
+
+    // Fallback for other object structures.
+    const shortMessage = (errorObject.message as string) || "An unexpected error occurred.";
+    const details = (errorObject.stack as string) || JSON.stringify(errorObject, null, 2);
+    return new DisplayableError(shortMessage, details, errorToParse);
+  }
+
+  // Fallback for any other type (null, number, etc.).
+  return new DisplayableError("An unknown error occurred.", String(errorToParse), errorToParse);
+}

package/dist/core/composables/useErrorHandler/index.d.ts

@@ -1,8 +1,17 @@
 import { Ref } from "vue";
+import { DisplayableError } from "../../utilities/error";
 interface IUseErrorHandler {
-    error: Ref<string | null>;
+    error: Ref<DisplayableError | null>;
     reset(): void;
 }
+/**
+ * A composable to handle and normalize errors within a component's lifecycle.
+ * It captures errors, tracks them with Application Insights, and emits them
+ * for parent components to handle.
+ *
+ * @param capture - If true, prevents the error from propagating further up the component tree.
+ * @returns An object with the reactive error and a reset function.
+ */
 export declare function useErrorHandler(capture?: boolean): IUseErrorHandler;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/core/composables/useErrorHandler/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../core/composables/useErrorHandler/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4C,GAAG,EAAE,MAAM,KAAK,CAAC;AAIpE,UAAU,gBAAgB;IACxB,KAAK,EAAE,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC1B,KAAK,IAAI,IAAI,CAAC;CACf;AAED,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,gBAAgB,CA2DnE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../core/composables/useErrorHandler/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4C,GAAG,EAAE,MAAM,KAAK,CAAC;AAGpE,OAAO,EAAE,gBAAgB,EAAc,MAAM,uBAAuB,CAAC;AAErE,UAAU,gBAAgB;IACxB,KAAK,EAAE,GAAG,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACpC,KAAK,IAAI,IAAI,CAAC;CACf;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,gBAAgB,CA0CnE"}

package/dist/core/composables/useLanguages/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../core/composables/useLanguages/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAY,MAAM,KAAK,CAAC;AAI5C,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAC1D,sBAAsB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACnD,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,YAAY;wBAcI,MAAM;;gCAWE,MAAM;qCAQD,MAAM;wBAeb,MAAM,KAAG,OAAO,CAAC,MAAM,CAAC;+BANvB,MAAM,KAAG,MAAM;CAmBjD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../core/composables/useLanguages/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAY,MAAM,KAAK,CAAC;AAI5C,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAC1D,sBAAsB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACnD,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,YAAY;wBAcI,MAAM;;gCAWE,MAAM;qCAQD,MAAM;wBAeb,MAAM,KAAG,OAAO,CAAC,MAAM,CAAC;+BANvB,MAAM,KAAG,MAAM;CAoBjD,CAAC"}

package/dist/core/services/settings-menu-service.d.ts

@@ -1,17 +1,17 @@
 import { Component, ComputedRef } from "vue";
-export interface SettingsMenuItem {
+export interface ISettingsMenuItem {
     id: string;
     order?: number;
     component: Component;
     props?: Record<string, unknown>;
 }
-export interface RegisterSettingsMenuItemOptions extends Omit<SettingsMenuItem, "id"> {
+export interface RegisterSettingsMenuItemOptions extends Omit<ISettingsMenuItem, "id"> {
     id?: string;
 }
 export interface ISettingsMenuService {
     register: (options: RegisterSettingsMenuItemOptions) => string;
     unregister: (id: string) => void;
-    items: ComputedRef<SettingsMenuItem[]>;
+    items: ComputedRef<ISettingsMenuItem[]>;
 }
 /**
  * Registers a settings menu item before the service is initialized

package/dist/core/services/settings-menu-service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-menu-service.d.ts","sourceRoot":"","sources":["../../../core/services/settings-menu-service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAE5D,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,+BAAgC,SAAQ,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC;IACnF,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,CAAC,OAAO,EAAE,+BAA+B,KAAK,MAAM,CAAC;IAC/D,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,WAAW,CAAC,gBAAgB,EAAE,CAAC,CAAC;CACxC;AAMD;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,+BAA+B,GAAG,IAAI,CAQ/E;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,IAAI,oBAAoB,CAkChE"}
+{"version":3,"file":"settings-menu-service.d.ts","sourceRoot":"","sources":["../../../core/services/settings-menu-service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAE5D,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,+BAAgC,SAAQ,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC;IACpF,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,CAAC,OAAO,EAAE,+BAA+B,KAAK,MAAM,CAAC;IAC/D,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,WAAW,CAAC,iBAAiB,EAAE,CAAC,CAAC;CACzC;AAMD;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,+BAA+B,GAAG,IAAI,CAQ/E;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,IAAI,oBAAoB,CAkChE"}

package/dist/core/utilities/error.d.ts

@@ -0,0 +1,13 @@
+export declare class DisplayableError extends Error {
+    details: string;
+    originalError: unknown;
+    constructor(shortMessage: string, details: string, originalError: unknown);
+}
+/**
+ * Parses an unknown error type into a standardized DisplayableError.
+ * This function handles nested errors, API responses, and various error formats.
+ * @param errorToParse The error to analyze.
+ * @returns A DisplayableError instance.
+ */
+export declare function parseError(errorToParse: unknown): DisplayableError;
+//# sourceMappingURL=error.d.ts.map

package/dist/core/utilities/error.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error.d.ts","sourceRoot":"","sources":["../../../core/utilities/error.ts"],"names":[],"mappings":"AACA,qBAAa,gBAAiB,SAAQ,KAAK;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,OAAO,CAAC;gBAEX,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO;CAM1E;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,YAAY,EAAE,OAAO,GAAG,gBAAgB,CAqElE"}