@vc-shell/framework 1.0.192 → 1.0.194

package/dist/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue.d.ts

@@ -5,7 +5,6 @@ export interface Props {
     icon: string;
     title?: string;
     url?: string;
-    isActive?: boolean;
 }
 export interface Emits {
     (event: "onClick", item?: MenuItem): void;

package/dist/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vc-app-menu-link.vue.d.ts","sourceRoot":"","sources":["../../../../../../../../../../ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAIjE,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC3C;;;;;;;;;;;;AAyND,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-app-menu-link.vue.d.ts","sourceRoot":"","sources":["../../../../../../../../../../ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAIjE,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC3C;;;;;;;;;;;;AAuOD,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-app/_internal/vc-app-menu/_internal/vc-app-menu-item/vc-app-menu-item.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vc-app-menu-item.vue.d.ts","sourceRoot":"","sources":["../../../../../../../../../ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/vc-app-menu-item.vue.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CACzC;;;;;;;;;;;;;;;;;AA8HD,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-app-menu-item.vue.d.ts","sourceRoot":"","sources":["../../../../../../../../../ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/vc-app-menu-item.vue.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CACzC;;;;;;;;;;;;;;;;;AA2HD,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.0.192",
+  "version": "1.0.194",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -59,9 +59,9 @@
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
     "@types/quill": "^2.0.14",
-    "@vc-shell/api-client-generator": "^1.0.192",
-    "@vc-shell/config-generator": "^1.0.192",
-    "@vc-shell/ts-config": "^1.0.192",
+    "@vc-shell/api-client-generator": "^1.0.194",
+    "@vc-shell/config-generator": "^1.0.194",
+    "@vc-shell/ts-config": "^1.0.194",
     "@vitejs/plugin-vue": "^5.0.3",
     "sass": "^1.69.6",
     "shx": "^0.3.4",

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

@@ -5,7 +5,6 @@ import {
   inject,
   warn,
   Component,
-  watch,
   isVNode,
   h,
   shallowRef,
@@ -13,9 +12,17 @@ import {
   mergeProps,
 } from "vue";
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { createSharedComposable, reactiveComputed, toValue, watchDebounced } from "@vueuse/core";
+import { createSharedComposable, reactiveComputed, watchDebounced } from "@vueuse/core";
 import * as _ from "lodash-es";
-import { RouteLocationNormalized, useRoute, NavigationFailure, RouteRecordName, RouteParams, Router } from "vue-router";
+import {
+  RouteLocationNormalized,
+  useRoute,
+  NavigationFailure,
+  RouteRecordName,
+  RouteParams,
+  Router,
+  LocationQuery,
+} from "vue-router";
 import { bladeNavigationInstance } from "../../plugin";
 import {
   BladeComponentInternalInstance,
@@ -55,6 +62,8 @@ interface IUseBladeNavigation {
       >
     | undefined;
   getCurrentBlade: () => BladeVNode;
+  setNavigationQuery: (query: Record<string, string | number>) => void;
+  getNavigationQuery: () => Record<string, string | number>;
 }
 
 const activeWorkspace = shallowRef<BladeVNode>();
@@ -93,16 +102,33 @@ const utils = (router: Router) => {
   }
 
   function parseWorkspaceUrl(path: string): string {
-    const basePath = "/" + (Object.values(route.params)?.[0] ?? "");
-    const pathWithoutBase = path.startsWith(basePath) ? path.slice(basePath.length) : path;
+    // Object.values(route.params)[0] will always be base path of the app
+    if (!mainRouteBaseParamURL.value) {
+      mainRouteBaseParamURL.value = "/" + (Object.values(route.params)?.[0] ?? "");
+    }
+    const pathWithoutBase = path.startsWith(mainRouteBaseParamURL.value)
+      ? path.slice(mainRouteBaseParamURL.value.length)
+      : path;
     const segments = pathWithoutBase.split("/").filter(Boolean);
     const workspaceUrl = segments.slice(0, 1).join("/");
     return "/" + workspaceUrl;
   }
 
+  function getURLQuery() {
+    if (route.query && Object.keys(route.query).length) {
+      return { params: new URLSearchParams(route.query as Record<string, string>).toString(), obj: route.query };
+    }
+
+    const [, query] = window.location.href.split("#")[1].split("?");
+    const params = new URLSearchParams(query).toString();
+
+    return { params, obj: Object.fromEntries(new URLSearchParams(query)) };
+  }
+
   return {
     parseUrl,
     parseWorkspaceUrl,
+    getURLQuery,
   };
 };
 
@@ -114,7 +140,7 @@ const useBladeNavigationSingleton = createSharedComposable(() => {
     (instance !== null && inject<BladeNavigationPlugin>("bladeNavigationPlugin")) || bladeNavigationInstance;
   const router = navigationInstance?.router;
 
-  const { parseUrl, parseWorkspaceUrl } = utils(router);
+  const { parseUrl, parseWorkspaceUrl, getURLQuery } = utils(router);
 
   watchDebounced(
     () => route.path,
@@ -173,8 +199,7 @@ const useBladeNavigationSingleton = createSharedComposable(() => {
       if (workspace?.type?.url) {
         const url = constructUrl(workspace, lastBlade);
         if (url) {
-          const query = window.location.search;
-          updateRouterHistory(url, query);
+          updateRouterHistory(url);
         }
       }
     },
@@ -200,11 +225,13 @@ const useBladeNavigationSingleton = createSharedComposable(() => {
     }
   }
 
-  function updateRouterHistory(url: string, query: string) {
+  function updateRouterHistory(url: string) {
+    const params = getURLQuery().params;
+
     router.options.history.replace(
       (mainRouteBaseParamURL.value && !url.startsWith(mainRouteBaseParamURL.value) ? mainRouteBaseParamURL.value : "") +
         url +
-        (query ? "?" + query : ""),
+        (params ? "?" + params : ""),
     );
   }
 
@@ -259,11 +286,15 @@ export function useBladeNavigation(): IUseBladeNavigation {
   const instance: BladeComponentInternalInstance = getCurrentInstance() as BladeComponentInternalInstance;
 
   const { router, route, navigationInstance, closeBlade } = useBladeNavigationSingleton();
-  const { parseUrl } = utils(router);
+  const { parseUrl, getURLQuery } = utils(router);
   const routerRoutes = router.getRoutes();
   const mainRoute = routerRoutes.find((r) => r.meta?.root)!;
 
-  async function openWorkspace<Blade extends Component>({ blade, param, options }: IBladeEvent<Blade>) {
+  async function openWorkspace<Blade extends Component>(
+    { blade, param, options }: IBladeEvent<Blade>,
+    query: LocationQuery | undefined = undefined,
+    params: RouteParams = {},
+  ) {
     const createdComponent = h(blade, {
       param,
       options,
@@ -284,8 +315,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
           if (wsroute && wsroute.components) {
             wsroute.components.default = createdComponent;
           }
-
-          return await router.replace({ name: wsroute?.name, params: { ...route.params } });
+          return await router.replace({ name: wsroute?.name, params: { ...params, ...route.params }, query });
         } else
           notification.error(i18n.global.t("PERMISSION_MESSAGES.ACCESS_RESTRICTED"), {
             timeout: 3000,
@@ -454,18 +484,15 @@ export function useBladeNavigation(): IUseBladeNavigation {
 
       // Open the workspace component or workspace route.
       if (registeredRouteComponent?.type.isWorkspace) {
-        await openBlade(
-          {
-            blade: registeredRouteComponent as unknown as BladeInstanceConstructor,
-          },
-          true,
-        );
+        await openWorkspace({
+          blade: registeredRouteComponent as unknown as BladeInstanceConstructor,
+        });
         return { name: registeredRouteComponent?.type.name, params };
       }
 
       // Open the workspace component with param or workspace route.
       if (registeredWorkspaceComponent) {
-        await openBlade(
+        await openWorkspace(
           {
             blade: registeredWorkspaceComponent as unknown as BladeInstanceConstructor,
             param:
@@ -473,7 +500,8 @@ export function useBladeNavigation(): IUseBladeNavigation {
                 ? param
                 : undefined,
           },
-          true,
+          getURLQuery().obj,
+          params,
         );
 
         // Open the route if it's not from the workspace module.
@@ -486,7 +514,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
             param: param,
           });
         }
-        return { name: registeredWorkspaceComponent?.type.name, params };
+        return { name: registeredWorkspaceComponent?.type.name, params, query: to.query };
       }
     } else {
       return goToRoot();
@@ -519,6 +547,43 @@ export function useBladeNavigation(): IUseBladeNavigation {
     }
   }
 
+  function setNavigationQuery(query: Record<string, string | number>) {
+    // add blade name to query keys
+    const namedQuery = _.mapKeys(
+      _.mapValues(query, (value) => value?.toString()),
+      (value, key) => instance.vnode.type.name.toLowerCase() + "_" + key,
+    );
+    const cleanQuery = _.omitBy(namedQuery, _.isNil);
+
+    router.options.history.replace(
+      decodeURIComponent(
+        `${window.location.hash.substring(1).split("?")[0]}?${new URLSearchParams(cleanQuery).toString()}`,
+      ),
+    );
+  }
+
+  function getNavigationQuery() {
+    const queryKeys = Array.from(Object.keys(route.query));
+    const bladeQueryKeys = queryKeys.filter((key) => key.startsWith(instance.vnode.type.name.toLowerCase()));
+
+    const namedQuery = _.mapKeys(_.pick(route.query, bladeQueryKeys), (value, key) =>
+      key.replace(instance.vnode.type.name.toLowerCase() + "_", ""),
+    ) as Record<string, string | number>;
+
+    const obj: typeof namedQuery = {};
+    for (const [key, value] of Object.entries(namedQuery)) {
+      const numValue = Number(value);
+
+      if (!isNaN(numValue)) {
+        obj[key] = numValue;
+      } else {
+        obj[key] = value;
+      }
+    }
+
+    return obj;
+  }
+
   return {
     blades: computed(() => navigationInstance.blades.value),
     openBlade,
@@ -529,5 +594,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
     getCurrentBlade,
     currentBladeNavigationData,
     onBeforeClose,
+    setNavigationQuery,
+    getNavigationQuery,
   };
 }

package/shared/modules/dynamic/factories/base/useDetailsFactory.ts

@@ -13,7 +13,7 @@ export interface UseDetailsFactoryParams<Item> {
 
 export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<Item>) => {
   return function useDetails(): UseDetails<Item> {
-    const { setFieldError, setErrors, validate, setFieldValue, setValues } = useForm({
+    const { setFieldError, setErrors, validate, setFieldValue, setValues, errorBag } = useForm({
       validateOnMount: false,
     });
     const item = ref<Item>();
@@ -57,6 +57,7 @@ export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<I
         setValues,
         resetModified,
         validate,
+        errorBag,
       }),
     );
 

package/shared/modules/dynamic/factories/types/index.ts

@@ -32,6 +32,7 @@ export interface IValidationState<Item> {
     updateInitial?: MaybeRef<boolean>,
   ) => void;
   validate: FormContext["validate"];
+  errorBag: FormContext["errorBag"];
 }
 
 export type CustomQuery = { ids: string[] | null; allSelected?: boolean };

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

@@ -173,7 +173,7 @@ import { notification, useBladeNavigation, usePopup } from "../../../components"
 import { ListBaseBladeScope, ListBladeContext, UseList } from "../factories/types";
 import { IParentCallArgs } from "../../../index";
 import * as _ from "lodash-es";
-import { reactiveComputed, toReactive, useMounted } from "@vueuse/core";
+import { toReactive, useMounted } from "@vueuse/core";
 import { safeIn } from "../helpers/safeIn";
 
 export interface Props {
@@ -219,6 +219,7 @@ const itemsProxy = ref<Record<string, any>[]>();
 const modified = shallowRef(false);
 
 const { moduleNotifications, markAsRead } = useNotifications(settings.value?.pushNotificationType);
+const { setNavigationQuery, getNavigationQuery } = useBladeNavigation();
 
 watch(
   moduleNotifications,
@@ -381,7 +382,7 @@ const toolbarComputed =
   [];
 
 onBeforeMount(async () => {
-  if (props.composables) await load({ sort: sort.value, ...query.value });
+  if (props.composables) await load({ sort: sort.value, ...query.value, ...getNavigationQuery() });
 });
 
 watch(
@@ -530,10 +531,12 @@ const onPaginationClick = async (page: number) => {
 
       return;
     }
-    await load({
+    const queryObj = {
       ...query.value,
       skip: (page - 1) * query.value.take,
-    });
+    };
+    setNavigationQuery(queryObj);
+    await load(queryObj);
   }
 };
 

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue

@@ -3,7 +3,7 @@
     class="vc-app-menu-item"
     :class="[
       {
-        'vc-app-menu-item_active': isActive && !children?.length,
+        'vc-app-menu-item_active': isActive(url ?? '') && !children?.length,
         'vc-app-menu-item_no-hover': !children?.length,
         'vc-app-menu-item_child-opened': isOpened,
       },
@@ -48,16 +48,15 @@
       :key="i"
     >
       <router-link
-        v-if="$hasAccess(nested.permissions!)"
-        v-slot="{ isExactActive }"
-        :to="nested.url!"
+        v-if="$hasAccess(nested.permissions!) && nested.url"
+        :to="nested.url"
         custom
       >
         <div
           :key="i"
           :class="[
             {
-              'vc-app-menu-item__child-item_active': isExactActive,
+              'vc-app-menu-item__child-item_active': isActive(nested.url ?? ''),
             },
             'vc-app-menu-item__child-item',
           ]"
@@ -81,7 +80,6 @@ export interface Props {
   icon: string;
   title?: string;
   url?: string;
-  isActive?: boolean;
 }
 
 export interface Emits {
@@ -96,6 +94,7 @@ const emit = defineEmits<Emits>();
 
 const isOpened = ref(false);
 const route = useRoute();
+const params = Object.fromEntries(Object.entries(route.params).filter(([key]) => key !== "pathMatch"));
 
 watch(
   () => route.path,
@@ -114,6 +113,21 @@ function onMenuItemClick() {
     isOpened.value = !isOpened.value;
   }
 }
+
+const isActive = (url: string) => {
+  let path = route.path;
+  if (Object.values(params).length) {
+    path = path.replace(Object.values(params)[0] as string, "");
+  }
+
+  const active = path.endsWith(url);
+
+  if (active && props.children?.length) {
+    isOpened.value = true;
+  }
+
+  return active;
+};
 </script>
 
 <style lang="scss">

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/vc-app-menu-item.vue

@@ -2,13 +2,11 @@
   <div>
     <template v-if="url">
       <router-link
-        v-slot="{ isExactActive }"
         :to="url"
         custom
       >
         <vc-app-menu-link
           v-if="isVisible"
-          :is-active="isExactActive"
           :sticky="sticky"
           :icon="icon ?? ''"
           :title="title ?? ''"

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

@@ -658,7 +658,7 @@ watch(
     }
     columnsInit.value = false;
   },
-  { deep: true },
+  { deep: true, immediate: true },
 );
 
 const internalColumnsSorted = computed(() => {