@vc-shell/framework 1.0.136 → 1.0.138

package/dist/ui/components/organisms/vc-app/_internal/vc-app-bar/vc-app-bar.vue.d.ts

@@ -13,12 +13,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "logo:click": () => void;
     "backlink:click": () => void;
     "menubutton:click": () => void;
-    "button:click": (item: IBladeToolbar<import("vue").ComponentPublicInstance>) => void;
+    "button:click": (item: IBladeToolbar) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
     "onLogo:click"?: (() => any) | undefined;
     "onBacklink:click"?: (() => any) | undefined;
     "onMenubutton:click"?: (() => any) | undefined;
-    "onButton:click"?: ((item: IBladeToolbar<import("vue").ComponentPublicInstance>) => any) | undefined;
+    "onButton:click"?: ((item: IBladeToolbar) => any) | undefined;
 }, {}, {}>, {
     "app-switcher"?(_: {}): any;
     toolbar?(_: {}): any;

package/dist/ui/components/organisms/vc-app/vc-app.vue.d.ts

@@ -8,6 +8,7 @@ export interface Props {
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>, Readonly<{
     "app-switcher": void;
     toolbar: void;
+    "navigation-menu": void;
     "toolbar:prepend": void;
     "toolbar:language-selector": void;
     "toolbar:notifications-dropdown": void;
@@ -48,6 +49,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }> & {
     "app-switcher": void;
     toolbar: void;
+    "navigation-menu": void;
     "toolbar:prepend": void;
     "toolbar:language-selector": void;
     "toolbar:notifications-dropdown": void;

package/dist/ui/components/organisms/vc-app/vc-app.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vc-app.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/organisms/vc-app/vc-app.vue.ts"],"names":[],"mappings":"AAmBA,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyaD,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"vc-app.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/organisms/vc-app/vc-app.vue.ts"],"names":[],"mappings":"AAoBA,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAibD,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue.d.ts

@@ -3,7 +3,6 @@ export interface Props {
     isExpanded: boolean;
     icon?: string | (() => string);
     title?: string;
-    options?: Record<string, unknown>;
     disabled?: boolean;
     dropdownItems?: IBladeDropdownItem[];
     clickHandler?(): void;

package/dist/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vc-blade-toolbar-button.vue.d.ts","sourceRoot":"","sources":["../../../../../../../../../ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE1E,MAAM,WAAW,KAAK;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACrC,YAAY,CAAC,IAAI,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmPD,wBAOG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"vc-blade-toolbar-button.vue.d.ts","sourceRoot":"","sources":["../../../../../../../../../ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE1E,MAAM,WAAW,KAAK;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACrC,YAAY,CAAC,IAAI,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmPD,wBAOG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

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

@@ -7,7 +7,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     items: () => never[];
 }>>>, {
-    items: IBladeToolbar<import("vue").ComponentPublicInstance>[];
+    items: IBladeToolbar[];
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/ui/components/organisms/vc-blade/index.d.ts

@@ -26,7 +26,7 @@ export declare const VcBlade: {
             default: boolean;
         };
         toolbarItems: {
-            type: import("vue").PropType<import("../../../..").IBladeToolbar<import("vue").ComponentPublicInstance>[]>;
+            type: import("vue").PropType<import("../../../..").IBladeToolbar[]>;
             default: () => never[];
         };
     }>> & {
@@ -63,7 +63,7 @@ export declare const VcBlade: {
             default: boolean;
         };
         toolbarItems: {
-            type: import("vue").PropType<import("../../../..").IBladeToolbar<import("vue").ComponentPublicInstance>[]>;
+            type: import("vue").PropType<import("../../../..").IBladeToolbar[]>;
             default: () => never[];
         };
     }>> & {
@@ -74,7 +74,7 @@ export declare const VcBlade: {
         width: string | number;
         closable: boolean;
         expandable: boolean;
-        toolbarItems: import("../../../..").IBladeToolbar<import("vue").ComponentPublicInstance>[];
+        toolbarItems: import("../../../..").IBladeToolbar[];
     }, true, {}, {}, {
         P: {};
         B: {};
@@ -108,7 +108,7 @@ export declare const VcBlade: {
             default: boolean;
         };
         toolbarItems: {
-            type: import("vue").PropType<import("../../../..").IBladeToolbar<import("vue").ComponentPublicInstance>[]>;
+            type: import("vue").PropType<import("../../../..").IBladeToolbar[]>;
             default: () => never[];
         };
     }>> & {
@@ -119,7 +119,7 @@ export declare const VcBlade: {
         width: string | number;
         closable: boolean;
         expandable: boolean;
-        toolbarItems: import("../../../..").IBladeToolbar<import("vue").ComponentPublicInstance>[];
+        toolbarItems: import("../../../..").IBladeToolbar[];
     }>;
     __isFragment?: undefined;
     __isTeleport?: undefined;
@@ -150,7 +150,7 @@ export declare const VcBlade: {
         default: boolean;
     };
     toolbarItems: {
-        type: import("vue").PropType<import("../../../..").IBladeToolbar<import("vue").ComponentPublicInstance>[]>;
+        type: import("vue").PropType<import("../../../..").IBladeToolbar[]>;
         default: () => never[];
     };
 }>> & {
@@ -165,7 +165,7 @@ export declare const VcBlade: {
     width: string | number;
     closable: boolean;
     expandable: boolean;
-    toolbarItems: import("../../../..").IBladeToolbar<import("vue").ComponentPublicInstance>[];
+    toolbarItems: import("../../../..").IBladeToolbar[];
 }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         actions?(_: {}): any;

package/dist/ui/components/organisms/vc-blade/vc-blade.vue.d.ts

@@ -36,7 +36,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     width: string | number;
     closable: boolean;
     expandable: boolean;
-    toolbarItems: IBladeToolbar<import("vue").ComponentPublicInstance>[];
+    toolbarItems: IBladeToolbar[];
 }, {}>, {
     actions?(_: {}): any;
     default?(_: {}): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.0.136",
+  "version": "1.0.138",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -44,7 +44,7 @@
     "quill-image-uploader": "^1.3.0",
     "swiper": "^6.8.4",
     "vee-validate": "^4.12.4",
-    "vue": "3.4.0",
+    "vue": "3.4.5",
     "vue-currency-input": "^3.0.5",
     "vue-i18n": "^9.8.0",
     "vue-router": "^4.2.5",
@@ -52,9 +52,9 @@
     "whatwg-fetch": "^3.6.19"
   },
   "devDependencies": {
-    "@vc-shell/api-client-generator": "^1.0.136",
-    "@vc-shell/config-generator": "^1.0.136",
-    "@vc-shell/ts-config": "^1.0.136",
+    "@vc-shell/api-client-generator": "^1.0.138",
+    "@vc-shell/config-generator": "^1.0.138",
+    "@vc-shell/ts-config": "^1.0.138",
     "@vitejs/plugin-vue": "^5.0.0",
     "sass": "^1.69.6",
     "typescript": "5.3.3",

package/shared/components/blade-navigation/composables/useBladeNavigation/index.ts

@@ -1,8 +1,15 @@
+import { resolve } from "node:path";
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { reactiveComputed } from "@vueuse/core";
 import { computed, getCurrentInstance, inject, warn, Component, watch, isVNode, h, shallowRef, ComputedRef } from "vue";
 import * as _ from "lodash-es";
-import { RouteLocationNormalized, useRoute, RouteRecordNormalized, NavigationFailure } from "vue-router";
+import {
+  RouteLocationNormalized,
+  useRoute,
+  RouteRecordNormalized,
+  NavigationFailure,
+  createRouterMatcher,
+} from "vue-router";
 import { bladeNavigationInstance } from "../../plugin";
 import {
   BladeComponentInternalInstance,
@@ -12,6 +19,7 @@ import {
   IParentCallArgs,
   BladeInstanceConstructor,
   BladeRouteRecordLocationNormalized,
+  BladeRoutesRecord,
 } from "../../types";
 import { navigationViewLocation } from "../../injectionKeys";
 import { generateId } from "../../../../../core/utilities";
@@ -37,7 +45,7 @@ interface IUseBladeNavigation {
 }
 
 const activeWorkspace = shallowRef<BladeVNode>();
-
+const baseUrl = shallowRef<string>();
 export function useBladeNavigation(): IUseBladeNavigation {
   const navigationView = inject(navigationViewLocation, undefined) as BladeVNode;
 
@@ -49,9 +57,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
 
   const router = navigationInstance?.router;
 
-  const routes = router.getRoutes();
-
-  const mainRouteName = router.getRoutes().find((r) => r.meta?.root)?.name as string;
+  const mainRoute = router.getRoutes().find((r) => r.meta?.root)!;
 
   const blades = computed(() => {
     return router.getRoutes().find((routeItem) => {
@@ -59,12 +65,23 @@ export function useBladeNavigation(): IUseBladeNavigation {
     });
   }) as ComputedRef<BladeRouteRecordLocationNormalized>;
 
+  function parseWorkspaceUrl(path: string): string {
+    // Object.values(route.params)[0] will always be base path of the app
+    if (!baseUrl.value) {
+      baseUrl.value = "/" + (Object.values(route.params)?.[0] ?? "");
+    }
+    const pathWithoutBase = path.startsWith(baseUrl.value) ? path.slice(baseUrl.value.length) : path;
+    const segments = pathWithoutBase.split("/").filter(Boolean);
+    const workspaceUrl = segments.slice(0, 1).join("/");
+    return "/" + workspaceUrl;
+  }
+
   watch(
     () => route.path,
     (newVal) => {
-      const workspaceUrl = newVal.split("/").slice(0, 2).join("/");
+      const workspaceUrl = parseWorkspaceUrl(newVal);
 
-      const wsRouteComponent = routes.find((x) => x.path === workspaceUrl)?.components?.default as BladeVNode;
+      const wsRouteComponent = router.resolve({ path: workspaceUrl })?.matched?.[1]?.components?.default as BladeVNode;
 
       if (wsRouteComponent && wsRouteComponent.type?.isWorkspace) {
         activeWorkspace.value = wsRouteComponent;
@@ -73,12 +90,18 @@ export function useBladeNavigation(): IUseBladeNavigation {
     { immediate: true },
   );
 
+  /**
+   * The function `openWorkspace` adds a route to the router and pushes the route to navigate to a
+   * specific workspace component.
+   * @param  - - `blade`: The component to be rendered in the workspace.
+   * @returns the result of the `router.push()` method, which is a Promise.
+   */
   async function openWorkspace<Blade extends Component>({ blade, param, options }: IBladeEvent<Blade>) {
     const createdComponent = h(blade, { param, options }) as BladeVNode;
 
     try {
       if (createdComponent.type?.url) {
-        router.addRoute(mainRouteName, {
+        router.addRoute(mainRoute.name as string, {
           name: createdComponent.type?.name,
           path: createdComponent.type?.url,
           components: {
@@ -97,6 +120,13 @@ export function useBladeNavigation(): IUseBladeNavigation {
     }
   }
 
+  /**
+   * The `openBlade` function is used to open a blade component in a workspace or navigation view.
+   * @param  - - `blade`: The component that represents the blade to be opened.
+   * @param [isWorkspace=false] - A boolean value indicating whether the blade is being opened as a
+   * workspace or not.
+   * @returns a Promise that resolves to the result of the `router.push()` method.
+   */
   async function openBlade<Blade extends Component>(
     { blade, param, options, onOpen, onClose }: IBladeEvent<Blade>,
     isWorkspace = false,
@@ -110,21 +140,20 @@ export function useBladeNavigation(): IUseBladeNavigation {
       return await openWorkspace({ blade, param, options });
     }
 
-    const allRoutes = router.getRoutes();
-
     try {
       const instanceComponent = navigationView || activeWorkspace.value;
 
-      if (instanceComponent) {
-        const initialBlade = allRoutes.find(
-          (x) =>
-            x?.path ===
-            (instanceComponent.props?.navigation?.fullPath
-              ? instanceComponent.props?.navigation?.fullPath
-              : activeWorkspace.value?.type.url),
-        );
+      if (instanceComponent && activeWorkspace.value) {
+        const initialBlade = router.resolve({
+          path: instanceComponent.props?.navigation?.fullPath ?? instanceComponent.type.url,
+        })?.matched[1];
 
-        const url = initialBlade?.path + (blade.url ? blade.url + (param ? "/" + param : "") : "");
+        const base =
+          router.resolve({ name: initialBlade?.name }).path + (blade.url ? blade.url + (param ? "/" + param : "") : "");
+
+        const url = (baseUrl.value === "/" ? "" : baseUrl.value) + base;
+
+        const rawRouterUrl = mainRoute.path + base;
 
         /**
          * Removes routes without paths and default route from next route.
@@ -160,9 +189,9 @@ export function useBladeNavigation(): IUseBladeNavigation {
           ),
         );
 
-        router.addRoute(mainRouteName, {
+        router.addRoute(mainRoute.name as string, {
           name: isInitialBlade ? activeWorkspace.value?.type.name : url,
-          path: url,
+          path: rawRouterUrl,
           components: Object.assign(
             {},
             { default: activeWorkspace.value },
@@ -184,12 +213,22 @@ export function useBladeNavigation(): IUseBladeNavigation {
           path: url,
           replace: !blade.url,
         });
+      } else {
+        throw new Error("No workspace found");
       }
     } catch (e) {
       console.error(e);
     }
   }
 
+  /**
+   * The function merges the permissions of a workspace blade and a child blade.
+   * @param {BladeVNode} workspaceBlade - The `workspaceBlade` parameter is a BladeVNode object
+   * representing the workspace blade.
+   * @param {BladeVNode | BladeInstanceConstructor} childBlade - The `childBlade` parameter is either a
+   * `BladeVNode` or a `BladeInstanceConstructor`.
+   * @returns an array of permissions.
+   */
   function mergePermissions(workspaceBlade: BladeVNode, childBlade: BladeVNode | BladeInstanceConstructor) {
     const child = (isVNode(childBlade) ? childBlade : h(childBlade)) as BladeVNode;
     if (child && child.type?.permissions) {
@@ -207,11 +246,27 @@ export function useBladeNavigation(): IUseBladeNavigation {
     } else return workspaceBlade.type.permissions;
   }
 
+  /**
+   * The function removes a specified substring from a given input string.
+   * @param {string} inputString - The input string from which the substring will be removed.
+   * @param {string} substringToRemove - The `substringToRemove` parameter is a string that represents
+   * the substring that you want to remove from the `inputString`.
+   * @returns the input string with the specified substring removed.
+   */
   function removeSubstring(inputString: string, substringToRemove: string) {
     const regex = new RegExp(`${substringToRemove}+$`);
     return inputString.replace(regex, "");
   }
 
+  /**
+   * The `closeBlade` function is used to close a blade and update the router location if necessary.
+   * @param {number} index - The `index` parameter is a number that represents the index of the blade
+   * to be closed.
+   * @param [changeLocation=true] - A boolean value indicating whether the location should be changed
+   * when closing the blade. The default value is `true`.
+   * @returns a Promise that resolves to a boolean value if `changeLocation` is true and the router
+   * successfully replaces the path, otherwise it returns undefined.
+   */
   async function closeBlade(index: number, changeLocation = true) {
     console.debug(`[@vc-shell/framework#useBladeNavigation] - closeBlade called.`);
 
@@ -230,7 +285,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
     if (routeWithNamedBlade) {
       const isInitialBlade = activeWorkspace.value?.type.name === routeWithNamedBlade.name;
 
-      router.addRoute(mainRouteName, {
+      router.addRoute(mainRoute.name as string, {
         name: isInitialBlade ? routeWithNamedBlade?.name : routeWithNamedBlade?.path,
         path: routeWithNamedBlade?.path,
         components: _.omitBy(routeWithNamedBlade?.components, (value: BladeVNode) => {
@@ -244,6 +299,15 @@ export function useBladeNavigation(): IUseBladeNavigation {
     }
   }
 
+  /**
+   * The function `onParentCall` handles method calls from a parent component and executes the
+   * corresponding method if it exists, otherwise it logs an error message.
+   * @param parentExposedMethods - parentExposedMethods is an object that contains the methods exposed
+   * by the parent blade. Each method is represented as a key-value pair, where the key is the method
+   * name and the value is the method itself.
+   * @param {IParentCallArgs} args - The `args` parameter is an object that contains the following
+   * properties:
+   */
   async function onParentCall(parentExposedMethods: Record<string, any>, args: IParentCallArgs) {
     console.debug(`vc-app#onParentCall({ method: ${args.method} }) called.`);
 
@@ -260,6 +324,13 @@ export function useBladeNavigation(): IUseBladeNavigation {
     }
   }
 
+  /**
+   * The function `resolveBladeByName` resolves a Blade component by its name and returns its
+   * constructor.
+   * @param {string} name - The `name` parameter is a string that represents the name of a Blade
+   * component.
+   * @returns a BladeInstanceConstructor, which is the constructor function for a Blade instance.
+   */
   function resolveBladeByName(name: string): BladeInstanceConstructor {
     if (!instance) {
       warn("resolveComponentByName can only be used in setup().");
@@ -279,22 +350,49 @@ export function useBladeNavigation(): IUseBladeNavigation {
     }
   }
 
+  /**
+   * The function `routeResolver` checks if a necessary route exists and generates a route if it
+   * doesn't.
+   * @param {RouteLocationNormalized} to - The `to` parameter is of type `RouteLocationNormalized`,
+   * which represents the target route that needs to be resolved. It contains information about the
+   * target route, such as the path, query parameters, and hash.
+   * @returns the result of the `generateRoute` function if the `hasNecessaryRoute` function returns
+   * false.
+   */
   function routeResolver(to: RouteLocationNormalized) {
     if (!hasNecessaryRoute(to)) {
-      return generateRoute(to, router.getRoutes());
+      return generateRoute(to, navigationInstance.internalRoutes);
     }
   }
 
+  /**
+   * The function checks if a given route exists in a list of routes.
+   * @param {RouteLocationNormalized} to - The "to" parameter is of type RouteLocationNormalized, which
+   * represents the destination route location.
+   * @returns a route object from the `routes` array that has a matching `path` property with the
+   * `to.path` value.
+   */
   function hasNecessaryRoute(to: RouteLocationNormalized) {
-    return routes.find((route) => route.path === to.path);
+    return router.getRoutes().find((route) => route.path === to.path);
   }
 
-  async function generateRoute(to: RouteLocationNormalized, routes: RouteRecordNormalized[]) {
+  /**
+   * The function generates a route based on the provided destination and routes, and then pushes the
+   * generated route to the router.
+   * @param {RouteLocationNormalized} to - The `to` parameter is of type `RouteLocationNormalized` and
+   * represents the destination route that we want to generate. It contains information about the path,
+   * query parameters, and other route-related data.
+   * @param {RouteRecordNormalized[]} routes - The `routes` parameter is an array of
+   * `RouteRecordNormalized` objects. Each object represents a route in the application and contains
+   * information such as the route path, components to render, and any meta information associated with
+   * the route.
+   * @returns the result of the `router.push()` method.
+   */
+  async function generateRoute(to: RouteLocationNormalized, routes: BladeRoutesRecord[]) {
     const parsedRoutes: TParsedRoute[] = parseRoutes(to.path, routes);
 
     const workspace = parsedRoutes[0];
-    const workspaceComponent = routes.find((route) => route.path === workspace.blade)?.components
-      ?.default as BladeVNode;
+    const workspaceComponent = routes.find((route) => route.route === workspace.blade)?.component;
 
     if (workspaceComponent) {
       const children: Record<string, BladeVNode> = {};
@@ -302,11 +400,10 @@ export function useBladeNavigation(): IUseBladeNavigation {
       parsedRoutes
         .filter((r) => r !== workspace)
         .forEach((parsedRoute, index) => {
-          const registeredRouteComponent = routes.find((route) => route.path === parsedRoute.blade)?.components
-            ?.default;
+          const registeredRouteComponent = routes.find((route) => route.route === parsedRoute.blade)?.component;
 
           if (registeredRouteComponent && parsedRoute.name) {
-            children[parsedRoute.name] = _.merge(registeredRouteComponent, {
+            children[parsedRoute.name] = _.merge({}, registeredRouteComponent, {
               props: {
                 param: parsedRoute.param,
                 navigation: {
@@ -319,11 +416,11 @@ export function useBladeNavigation(): IUseBladeNavigation {
             }) as BladeVNode;
 
             // Add routes one by one
-            router.addRoute(mainRouteName, {
+            router.addRoute(mainRoute.name as string, {
               name: parsedRoute.name,
               path: parsedRoute.name,
               components: {
-                default: workspaceComponent,
+                default: workspaceComponent, // { param: Object.values(children)[0].props?.param }),
                 ...children,
               },
               meta: {
@@ -338,11 +435,11 @@ export function useBladeNavigation(): IUseBladeNavigation {
         .flatMap((comp) => mergePermissions(workspaceComponent, comp));
 
       // Add summary route
-      router.addRoute(mainRouteName, {
+      router.addRoute(mainRoute.name as string, {
         name: to.path,
         path: to.path,
         components: {
-          default: _.merge(workspaceComponent, { props: { param: Object.values(children)[0].props?.param } }),
+          default: workspaceComponent,
           ...children,
         },
         meta: {
@@ -351,10 +448,21 @@ export function useBladeNavigation(): IUseBladeNavigation {
       });
 
       return router.push(to.path);
-    } else return router.push({ name: mainRouteName });
+    } else return router.push({ name: mainRoute.name as string });
   }
 
-  function parseRoutes(route: string, commonRoutes: RouteRecordNormalized[]) {
+  /**
+   * The function `parseRoutes` takes a route string and an array of common routes, and returns an
+   * array of route objects with blade, param, and name properties.
+   * @param {string} route - The `route` parameter is a string representing a route path. It is the
+   * route that needs to be parsed into its individual parts.
+   * @param {RouteRecordNormalized[]} commonRoutes - commonRoutes is an array of RouteRecordNormalized
+   * objects. Each object represents a common route in the application and has properties like "path"
+   * which represents the route path.
+   * @returns The function `parseRoutes` returns an array of objects. Each object in the array
+   * represents a part of the route and contains the following properties: blade, param, and name.
+   */
+  function parseRoutes(route: string, commonRoutes: BladeRoutesRecord[]) {
     const parts: string[] = route.split("/").filter((part) => part !== "");
     const result = [];
     let currentBlade = "";
@@ -362,13 +470,22 @@ export function useBladeNavigation(): IUseBladeNavigation {
 
     for (let i = 0; i < parts.length; i++) {
       currentBlade = "/" + parts[i];
+
+      /**
+       * If current blade is not registered in routes, then it's a param
+       */
+      if (!navigationInstance.internalRoutes.some((x) => currentBlade === x?.route)) {
+        baseUrl.value = currentBlade;
+        continue;
+      }
+
       let currentParam = null;
 
       if (i + 1 < parts.length) {
         const nextPart = "/" + parts.slice(i + 1, i + 2).join("/");
         currentName += currentBlade;
 
-        if (!commonRoutes.some((route) => nextPart === route.path)) {
+        if (!commonRoutes.some((route) => nextPart === route.route)) {
           currentParam = parts[i + 1];
           currentName += "/" + currentParam;
           i++; // Skip the next part as it's a param
@@ -388,6 +505,10 @@ export function useBladeNavigation(): IUseBladeNavigation {
     return result;
   }
 
+  /**
+   * The function getCurrentBlade returns the current BladeVNode instance's vnode.
+   * @returns the `vnode` property of the `instance` object, which is of type `BladeVNode`.
+   */
   function getCurrentBlade(): BladeVNode {
     return instance.vnode;
   }

package/shared/components/blade-navigation/plugin.ts

@@ -1,7 +1,7 @@
 import { Router } from "vue-router";
-import { App } from "vue";
+import { App, inject } from "vue";
 import * as components from "./components";
-import { BladeNavigationPlugin } from "./types";
+import { BladeNavigationPlugin, BladeRoutesRecord } from "./types";
 
 // Declare globally
 declare module "@vue/runtime-core" {
@@ -19,9 +19,12 @@ export const VcBladeNavigationComponent = {
       app.component(componentName, component);
     });
 
+    const internalRoutes = app.runWithContext(() => inject("bladeRoutes")) as BladeRoutesRecord[];
+
     // Plugin
     const bladeNavigationPlugin: BladeNavigationPlugin = {
       router: args.router,
+      internalRoutes,
     };
 
     app.config.globalProperties.$bladeNavigationPlugin = bladeNavigationPlugin;

package/shared/components/blade-navigation/types/index.ts

@@ -74,6 +74,14 @@ export interface IBladeEvent<T extends Component = Component> {
 
 export interface BladeNavigationPlugin {
   router: Router;
+  internalRoutes: BladeRoutesRecord[];
+}
+
+export interface BladeRoutesRecord {
+  component: BladeVNode;
+  name: string;
+  isWorkspace: boolean;
+  route: string;
 }
 
 type VNodeMountHook = (vnode: BladeVNode | VNode) => void;

package/shared/modules/dynamic/pages/dynamic-blade-form.vue

@@ -156,12 +156,15 @@ const unwatchTitle = watch(
   { immediate: true },
 );
 
-useBeforeUnload(
-  computed(() => {
-    const toolBarSave = _.get(toValue(scope)?.toolbarOverrides, "saveChanges") as unknown as IBladeToolbar;
-    return !unref(toolBarSave && "disabled" in toolBarSave && toolBarSave.disabled) || validationState.value.validated;
-  }),
-);
+/**
+ * Validated state. Uses 'disabled' property from toolbarOverrides.saveChanges OR validationState.validated
+ */
+const validated = computed(() => {
+  const toolBarSave = _.get(toValue(scope)?.toolbarOverrides, "saveChanges") as unknown as IBladeToolbar;
+  return !unref(toolBarSave && "disabled" in toolBarSave && toolBarSave.disabled) || validationState.value.validated;
+});
+
+useBeforeUnload(validated);
 
 const settings = computed(() => props.model?.settings);
 
@@ -280,9 +283,10 @@ onBeforeMount(async () => {
 
 onBeforeRouteLeave(async (to) => {
   if (
-    currentBladeNavigationData.value?.fullPath &&
-    !to.path.includes(currentBladeNavigationData.value?.fullPath) &&
-    validationState.value.modified
+    (settings.value?.url
+      ? currentBladeNavigationData.value?.fullPath && !to.path.includes(currentBladeNavigationData.value?.fullPath)
+      : true) &&
+    unref(validated)
   ) {
     return await showConfirmation(
       unref(