@vc-shell/framework 1.0.213 → 1.0.215

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

@@ -32,6 +32,9 @@ declare const _default: {
                 type: import("vue").PropType<import("../../../..").IBladeToolbar[]>;
                 default: () => never[];
             };
+            hasUnsavedChanges: {
+                type: import("vue").PropType<boolean>;
+            };
         }>> & {
             onClose?: (() => any) | undefined;
             onExpand?: (() => any) | undefined;
@@ -69,6 +72,9 @@ declare const _default: {
                 type: import("vue").PropType<import("../../../..").IBladeToolbar[]>;
                 default: () => never[];
             };
+            hasUnsavedChanges: {
+                type: import("vue").PropType<boolean>;
+            };
         }>> & {
             onClose?: (() => any) | undefined;
             onExpand?: (() => any) | undefined;
@@ -114,6 +120,9 @@ declare const _default: {
                 type: import("vue").PropType<import("../../../..").IBladeToolbar[]>;
                 default: () => never[];
             };
+            hasUnsavedChanges: {
+                type: import("vue").PropType<boolean>;
+            };
         }>> & {
             onClose?: (() => any) | undefined;
             onExpand?: (() => any) | undefined;
@@ -156,6 +165,9 @@ declare const _default: {
             type: import("vue").PropType<import("../../../..").IBladeToolbar[]>;
             default: () => never[];
         };
+        hasUnsavedChanges: {
+            type: import("vue").PropType<boolean>;
+        };
     }>> & {
         onClose?: (() => any) | undefined;
         onExpand?: (() => any) | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"vc-blade.stories.d.ts","sourceRoot":"","sources":["../../../../../ui/components/organisms/vc-blade/vc-blade.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAG7B,wBAuBiC;AAEjC,eAAO,MAAM,OAAO,EAAE,OAAO,CAAC,OAAO,OAAO,CAM1C,CAAC;AAEH,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,OAAO,OAAO,CAOjD,CAAC;AAEH,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,OAAO,OAAO,CAMnD,CAAC;AAEH,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,OAAO,OAAO,CAShD,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,OAAO,OAAO,CASlD,CAAC;AAEH,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,OAAO,OAAO,CAMtD,CAAC"}
+{"version":3,"file":"vc-blade.stories.d.ts","sourceRoot":"","sources":["../../../../../ui/components/organisms/vc-blade/vc-blade.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAG7B,wBAuBiC;AAEjC,eAAO,MAAM,OAAO,EAAE,OAAO,CAAC,OAAO,OAAO,CAM1C,CAAC;AAEH,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,OAAO,OAAO,CAOjD,CAAC;AAEH,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,OAAO,OAAO,CAMnD,CAAC;AAEH,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,OAAO,OAAO,CAShD,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,OAAO,OAAO,CASlD,CAAC;AAEH,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,OAAO,OAAO,CAMtD,CAAC"}

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

@@ -8,6 +8,7 @@ export interface Props {
     expandable?: boolean;
     closable?: boolean;
     toolbarItems?: IBladeToolbar[];
+    hasUnsavedChanges?: boolean;
 }
 export interface Emits {
     (event: "close"): void;

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

@@ -1 +1 @@
-{"version":3,"file":"vc-blade.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/organisms/vc-blade/vc-blade.vue.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAQvD,MAAM,WAAW,KAAK;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,aAAa,EAAE,CAAC;CAChC;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4PD,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,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;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"vc-blade.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/organisms/vc-blade/vc-blade.vue.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAQvD,MAAM,WAAW,KAAK;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,aAAa,EAAE,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4RD,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,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;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.0.213",
+  "version": "1.0.215",
   "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.213",
-    "@vc-shell/config-generator": "^1.0.213",
-    "@vc-shell/ts-config": "^1.0.213",
+    "@vc-shell/api-client-generator": "^1.0.215",
+    "@vc-shell/config-generator": "^1.0.215",
+    "@vc-shell/ts-config": "^1.0.215",
     "@vitejs/plugin-vue": "^5.0.3",
     "sass": "^1.69.6",
     "shx": "^0.3.4",

package/shared/components/blade-navigation/components/vc-blade-navigation/vc-blade-navigation.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Ref, computed, inject, withDirectives, h, vShow, toRef } from "vue";
+import { Ref, computed, inject, withDirectives, h, vShow, toRef, VNode, nextTick } from "vue";
 import { RouterView } from "vue-router";
 import { BladeVNode, IParentCallArgs, useBladeNavigation } from "./../../../../../shared";
 import { ErrorInterceptor } from "./../../../error-interceptor";
@@ -31,7 +31,10 @@ const { blades, closeBlade, onParentCall } = useBladeNavigation();
 const { breadcrumbs, push, remove } = useBreadcrumbs();
 
 const quantity = computed(() => {
-  return blades.value.length || 0;
+  return (
+    blades.value.filter((x) => x.props.navigation.isVisible || typeof x.props.navigation.isVisible === "undefined")
+      .length || 0
+  );
 });
 
 const isMobile = inject("isMobile") as Ref<boolean>;
@@ -46,6 +49,9 @@ watchDebounced(
         id: blade.props.navigation.idx.toString(),
         title: toRef(blade.props.navigation.instance ?? { title: "" }, "title"),
         clickHandler: async (id) => {
+          if (blade.props.navigation.isVisible === false) {
+            blade.props.navigation.isVisible = true;
+          }
           const isPrevented = await closeBlade(parseInt(id) + 1);
           return !isPrevented;
         },
@@ -64,49 +70,72 @@ const render = () => {
   if (!blades.value.length) {
     return h(RouterView);
   }
+
   return h("div", { class: "tw-w-full tw-overflow-hidden tw-flex tw-grow tw-basis-0 tw-relative" }, [
-    blades.value.map((bladeVNode, index) => {
-      if (bladeVNode.type.isBlade) {
-        return h(
-          ErrorInterceptor,
-          {
-            key: index,
-            capture: true,
-          },
-          {
-            default: ({
-              error,
-              reset,
-            }: Parameters<InstanceType<typeof ErrorInterceptor>["$slots"]["default"]>["0"]) => {
-              return withDirectives(
-                h(
-                  VcBladeView,
-                  { key: `${bladeVNode.type?.name}_${index}` || `blade_${index}`, blade: bladeVNode },
-                  {
-                    default: ({ Component }: { Component: BladeVNode }) => {
-                      return h(Component, {
-                        error,
-                        closable: index >= 1,
-                        expandable: quantity.value > 1,
-                        expanded: index === quantity.value - 1,
-                        "onClose:blade": () => closeBlade(index),
-                        "onParent:call": (args: IParentCallArgs) => {
-                          const instance = blades.value?.[index - 1]?.props?.navigation?.instance;
-                          if (instance) onParentCall(instance, args);
+    blades.value.reduce(
+      (arr, bladeVNode, index) => {
+        if (bladeVNode.type.isBlade) {
+          const hiddenQuantity = blades.value.filter(
+            (x) => x.props.navigation.isVisible === false && x.props.navigation.idx < index,
+          ).length;
+
+          arr.push(
+            h(
+              ErrorInterceptor,
+              {
+                key: index,
+                capture: true,
+              },
+              {
+                default: ({
+                  error,
+                  reset,
+                }: Parameters<InstanceType<typeof ErrorInterceptor>["$slots"]["default"]>["0"]) => {
+                  return withDirectives(
+                    h(
+                      VcBladeView,
+                      { key: `${bladeVNode.type?.name}_${index}` || `blade_${index}`, blade: bladeVNode },
+                      {
+                        default: ({ Component }: { Component: BladeVNode }) => {
+                          return h(Component, {
+                            error,
+                            closable: index >= 1,
+                            expandable: quantity.value > 1,
+                            expanded: index - hiddenQuantity === quantity.value - 1,
+                            "onClose:blade": () => {
+                              closeBlade(index);
+                            },
+                            "onParent:call": async (args: IParentCallArgs) => {
+                              await nextTick(() => {
+                                const instance = blades.value?.[index - 1]?.props?.navigation?.instance;
+                                if (instance) onParentCall(instance, args);
+                              });
+                            },
+                            onVnodeUnmounted: reset,
+                          });
                         },
-                        onVnodeUnmounted: reset,
-                      });
-                    },
-                  },
-                ),
+                      },
+                    ),
+
+                    [
+                      [
+                        vShow,
+                        (bladeVNode.props.navigation.isVisible ||
+                          typeof bladeVNode.props.navigation.isVisible === "undefined") &&
+                          index >= quantity.value - (isMobile.value ? 1 : 2),
+                      ],
+                    ],
+                  );
+                },
+              },
+            ),
+          );
+        }
 
-                [[vShow, index >= quantity.value - (isMobile.value ? 1 : 2)]],
-              );
-            },
-          },
-        );
-      }
-    }),
+        return arr;
+      },
+      [] as unknown as VNode[],
+    ),
   ]);
 };
 </script>

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

@@ -45,7 +45,7 @@ interface IUseBladeNavigation {
   readonly blades: ComputedRef<BladeVNode[]>;
   readonly currentBladeNavigationData: ComputedRef<BladeVNode["props"]["navigation"]>;
   openBlade: <Blade extends Component>(
-    { blade, param, options, onOpen, onClose }: IBladeEvent<Blade>,
+    { blade, param, options, onOpen, onClose, replaceCurrentBlade }: IBladeEvent<Blade>,
     isWorkspace?: boolean,
   ) => Promise<void | NavigationFailure>;
   closeBlade: (index: number) => Promise<boolean>;
@@ -255,6 +255,9 @@ const useBladeNavigationSingleton = createSharedComposable(() => {
       }
 
       if (!isPrevented) {
+        if (navigationInstance.blades.value[index - 1]?.props?.navigation?.isVisible === false) {
+          navigationInstance.blades.value[index - 1].props.navigation.isVisible = true;
+        }
         navigationInstance.blades.value.splice(index);
       }
 
@@ -338,7 +341,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
   }
 
   async function openBlade<Blade extends Component>(
-    { blade, param, options, onOpen, onClose }: IBladeEvent<Blade>,
+    { blade, param, options, onOpen, onClose, replaceCurrentBlade = false }: IBladeEvent<Blade>,
     isWorkspace = false,
   ) {
     if (!blade) {
@@ -372,6 +375,9 @@ export function useBladeNavigation(): IUseBladeNavigation {
 
       if (!isPrevented) {
         if (hasAccess(blade.permissions)) {
+          if (replaceCurrentBlade) {
+            navigationInstance.blades.value[currentBladeIdx].props.navigation.isVisible = false;
+          }
           navigationInstance.blades.value.push(bladeNode);
         } else {
           notification.error(i18n.global.t("PERMISSION_MESSAGES.ACCESS_RESTRICTED"), { timeout: 3000 });
@@ -491,7 +497,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
       const registeredWorkspaceComponent = routes.find((route) => route.route === `/${workspace}`)?.component;
       const registeredRouteComponent = routes.find((route) => route.route === `/${blade}`)?.component;
 
-      if (!registeredWorkspaceComponent) {
+      if (!hasAccess(registeredWorkspaceComponent?.type.permissions) || !registeredWorkspaceComponent) {
         return goToRoot();
       }
 

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

@@ -72,6 +72,7 @@ export interface IBladeEvent<T extends Component = Component> {
   param?: string;
   onOpen?: () => void;
   onClose?: () => void;
+  replaceCurrentBlade?: boolean;
 }
 
 export interface BladeNavigationPlugin {
@@ -96,6 +97,7 @@ export interface BladeVNode extends VNode {
       onBeforeClose?: () => Promise<boolean | undefined>;
       instance: CoreBladeExposed | undefined | null;
       idx: number;
+      isVisible?: boolean;
     };
     onVnodeUnmounted?: VNodeMountHook | VNodeMountHook[];
     onVnodeMounted?: VNodeMountHook | VNodeMountHook[];

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

@@ -38,7 +38,7 @@ export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<I
       } else throw new Error("Form is not valid");
     });
 
-    const { loading: removeLoading, action: remove } = useAsync<ItemId>(async (args) => {
+    const { loading: removeLoading, action: remove } = useAsync<ItemId | Item>(async (args) => {
       await factoryParams.remove?.(args as ItemId);
     });
 

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

@@ -84,6 +84,7 @@ export interface ListBaseBladeScope<Item = Record<string, any>, Query = Record<s
   ) => void;
   onPaginationClick?: (query: Query) => void;
   breadcrumbs?: ComputedRef<Breadcrumbs[]>;
+  modified?: ComputedRef<boolean> | Ref<boolean> | boolean;
 }
 
 export type TOpenBladeArgs = Omit<Parameters<ReturnType<typeof useBladeNavigation>["openBlade"]>["0"], "blade">;

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

@@ -7,6 +7,7 @@
     :width="settings?.width || '50%'"
     :toolbar-items="toolbarComputed"
     :title="title"
+    :has-unsaved-changes="isFormModified"
     @close="$emit('close:blade')"
     @expand="$emit('expand:blade')"
     @collapse="$emit('collapse:blade')"
@@ -104,7 +105,7 @@ import { notification } from "../../../components";
 interface Props {
   expanded?: boolean;
   closable?: boolean;
-  param?: string;
+  param?: string | any;
   model?: DynamicDetailsSchema;
   options?: {
     [x: string]: unknown;

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

@@ -10,6 +10,7 @@
     :class="{
       'tw-flex tw-flex-auto': isWidgetView,
     }"
+    :has-unsaved-changes="unref(scope)?.modified"
     @close="$emit('close:blade')"
     @expand="$emit('expand:blade')"
     @collapse="$emit('collapse:blade')"
@@ -39,20 +40,20 @@
         class="tw-grow tw-basis-0"
         :loading="loading"
         :expanded="expanded"
-        :columns="(tableColsWithLocales as ITableColumns[]) ?? []"
+        :columns="tableColsWithLocales ?? []"
         :state-key="stateKey ?? ''"
-        :items="itemsProxy as Record<string, any>[]"
+        :items="itemsProxy ?? []"
         :multiselect="isWidgetView ? false : tableData?.multiselect"
         :header="isWidgetView ? false : tableData?.header"
         :item-action-builder="actionBuilder"
         :enable-item-actions="!!tableData?.actions && !isWidgetView"
-        :footer="!isWidgetView"
+        :footer="isWidgetView ? false : tableData?.footer"
         :sort="sort"
         :pages="pagination?.pages"
         :current-page="pagination?.currentPage"
         :search-value="searchValue"
         :selected-item-id="selectedItemId"
-        :total-label="$t(`${settings?.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.TABLE.TOTALS`)"
+        :total-label="$t(`${localizationPrefix}.PAGES.LIST.TABLE.TOTALS`)"
         :total-count="pagination?.totalCount"
         :active-filter-count="activeFilterCount"
         :reorderable-rows="isWidgetView ? false : tableData?.reorderableRows"
@@ -87,12 +88,12 @@
           <template v-else>
             <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center">
               <div class="tw-m-4 tw-text-xl tw-font-medium">
-                {{ $t(`${settings?.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.NOT_FOUND.EMPTY`) }}
+                {{ $t(`${localizationPrefix}.PAGES.LIST.NOT_FOUND.EMPTY`) }}
               </div>
               <VcButton
                 v-if="isFilterVisible"
                 @click="resetSearch"
-                >{{ $t(`${settings?.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.NOT_FOUND.RESET`) }}</VcButton
+                >{{ $t(`${localizationPrefix}.PAGES.LIST.NOT_FOUND.RESET`) }}</VcButton
               >
             </div>
           </template>
@@ -113,7 +114,7 @@
           <template v-else>
             <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center">
               <div class="tw-m-4 tw-text-xl tw-font-medium">
-                {{ $t(`${settings?.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.EMPTY.NO_ITEMS`) }}
+                {{ $t(`${localizationPrefix}.PAGES.LIST.EMPTY.NO_ITEMS`) }}
               </div>
             </div>
           </template>
@@ -180,7 +181,7 @@ import { safeIn } from "../helpers/safeIn";
 export interface Props {
   expanded?: boolean;
   closable?: boolean;
-  param?: string;
+  param?: string | any;
   options?: unknown;
   model?: DynamicGridSchema;
   composables?: Record<string, (...args: any[]) => Record<string, any>>;
@@ -210,6 +211,7 @@ const { debounce } = useFunctions();
 const emit = defineEmits<Emits>();
 
 const settings = computed(() => props.model?.settings);
+const localizationPrefix = computed(() => settings.value?.localizationPrefix.trim().toUpperCase());
 const title = computed(() => t(settings.value?.titleTemplate as string));
 const allSelected = ref(false);
 const searchValue = ref();
@@ -217,7 +219,6 @@ const selectedItemId = shallowRef();
 const sort = shallowRef("createdDate:DESC");
 const selectedIds = shallowRef<string[]>([]);
 const itemsProxy = ref<Record<string, any>[]>();
-const modified = shallowRef(false);
 
 const { moduleNotifications, markAsRead } = useNotifications(settings.value?.pushNotificationType);
 const { setNavigationQuery, getNavigationQuery } = useBladeNavigation();
@@ -242,7 +243,10 @@ const tableData =
   props.composables &&
   computed(() => props.model?.content.find((type: ListContentSchema) => type.component === "vc-table"));
 
-const tableColsWithLocales = tableData?.value?.columns?.map((col) => ({ ...col, title: computed(() => t(col.title)) }));
+const tableColsWithLocales = tableData?.value?.columns?.map((col) => ({
+  ...col,
+  title: computed(() => t(col.title)),
+})) as ITableColumns[];
 
 const stateKey =
   props.composables &&
@@ -348,12 +352,6 @@ const toolbarComputed =
     useToolbarReducer({
       defaultToolbarSchema: settings.value?.toolbar ?? [],
       defaultToolbarBindings: {
-        save: {
-          clickHandler() {
-            emit("close:blade");
-          },
-          disabled: computed(() => !modified.value),
-        },
         openAddBlade: {
           async clickHandler() {
             if (
@@ -398,14 +396,6 @@ watch(
   { immediate: true },
 );
 
-watch(
-  () => itemsProxy.value,
-  (newVal) => {
-    modified.value = !_.isEqual(newVal, items.value);
-  },
-  { deep: true },
-);
-
 watch(sort, async (value) => {
   await load({ ...query.value, sort: value });
 });

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

@@ -8,7 +8,7 @@
     >
       <span>{{ label }}</span>
     </VcLabel>
-    <div class="tw-relative tw-inline-block tw-w-[54px] tw-h-[18px]">
+    <div class="tw-relative tw-inline-block tw-w-[32px] tw-h-[18px]">
       <label>
         <input
           type="checkbox"
@@ -63,11 +63,9 @@ function onInput(e: Event) {
 <style lang="scss">
 :root {
   --switch-main-color: #43b0e6;
-  --switch-secondary-color: #565656;
+  --switch-secondary-color: #d2d4d7;
   --switch-transition: all 0.2s ease-in-out;
   --switch-icon-transition: opacity 0.3s ease-in-out;
-  --switch-active-icon: url("data:image/svg+xml;utf8,<svg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M3.73609 7.34288L0.161085 3.85628C-0.0536949 3.64681 -0.0536949 3.30718 0.161085 3.09769L0.938884 2.3391C1.15366 2.12961 1.50193 2.12961 1.71671 2.3391L4.125 4.68782L8.28329 0.657101C8.49807 0.447633 8.84634 0.447633 9.06112 0.657101L9.83892 1.41569C10.0537 1.62516 10.0537 1.96479 9.83892 2.17428L4.51391 7.3429C4.29911 7.55237 3.95087 7.55237 3.73609 7.34288Z' fill='white'/></svg>");
-  --switch-disabled-icon: url("data:image/svg+xml;utf8,<svg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5.51636 4L7.79068 1.72568C8.06977 1.44659 8.06977 0.994091 7.79068 0.714773L7.28523 0.209318C7.00614 -0.0697727 6.55364 -0.0697727 6.27432 0.209318L4 2.48364L1.72568 0.209318C1.44659 -0.0697727 0.994091 -0.0697727 0.714773 0.209318L0.209318 0.714773C-0.0697727 0.993864 -0.0697727 1.44636 0.209318 1.72568L2.48364 4L0.209318 6.27432C-0.0697727 6.55341 -0.0697727 7.00591 0.209318 7.28523L0.714773 7.79068C0.993864 8.06977 1.44659 8.06977 1.72568 7.79068L4 5.51636L6.27432 7.79068C6.55341 8.06977 7.00614 8.06977 7.28523 7.79068L7.79068 7.28523C8.06977 7.00614 8.06977 6.55364 7.79068 6.27432L5.51636 4Z' fill='white'/></svg>");
 }
 
 .vc-switch {
@@ -75,11 +73,11 @@ function onInput(e: Event) {
     @apply tw-w-0 tw-h-0 tw-opacity-0;
 
     &:checked + .vc-switch__slider:before {
-      @apply tw-translate-x-[29px];
+      @apply tw-translate-x-[14px];
     }
 
     &:checked + .vc-switch__slider {
-      @apply tw-bg-[color:var(--switch-main-color)] after:tw-bg-[image:var(--switch-active-icon)] after:tw-bg-[position:10px] after:tw-bg-[length:10px_7px];
+      @apply tw-bg-[color:var(--switch-main-color)] after:tw-bg-[position:10px] after:tw-bg-[length:10px_7px];
     }
 
     &:disabled + .vc-switch__slider {
@@ -88,14 +86,10 @@ function onInput(e: Event) {
   }
 
   &__slider {
-    @apply tw-absolute tw-top-0 tw-right-0 tw-bottom-0 tw-left-0 tw-bg-[color:var(--switch-secondary-color)] tw-rounded-[3px] tw-cursor-pointer tw-transition  tw-duration-200;
-
-    &:after {
-      @apply tw-inline-block tw-w-full tw-h-full tw-bg-[image:var(--switch-disabled-icon)] tw-bg-[position:calc(100%-11px)] tw-bg-no-repeat tw-bg-[length:8px_8px] tw-content-[""];
-    }
+    @apply tw-absolute tw-top-0 tw-right-0 tw-bottom-0 tw-left-0 tw-bg-[color:var(--switch-secondary-color)] tw-rounded-[9999px] tw-cursor-pointer tw-transition  tw-duration-200 tw-shadow-[inset_0px_2px_4px_rgba(0,0,0,0.1)];
 
     &:before {
-      @apply tw-absolute tw-bottom-px tw-left-px tw-flex tw-justify-center tw-items-center tw-w-[23px] tw-h-[16px] tw-bg-white tw-rounded-sm tw-text-[color:#d2d2d2] tw-text-[10px] tw-transition  tw-duration-200 tw-content-["|||"];
+      @apply tw-absolute tw-bottom-px tw-left-px tw-flex tw-justify-center tw-items-center tw-w-[16px] tw-h-[16px] tw-bg-white tw-rounded-[9999px] tw-text-[color:#d2d2d2] tw-text-[10px] tw-transition tw-shadow-[0_2px_4px_rgba(0,0,0,0.1)] tw-duration-200 tw-content-[""];
     }
   }
 }

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

@@ -34,6 +34,7 @@
       </template>
     </VcBladeHeader>
 
+    <!-- Show error message -->
     <template v-if="error">
       <div class="tw-text-white tw-p-2 tw-flex tw-flex-row tw-items-center tw-bg-[color:var(--blade-color-error)]">
         <VcIcon
@@ -50,6 +51,19 @@
       </div>
     </template>
 
+    <!-- Unsaved changes -->
+    <template v-if="hasUnsavedChanges">
+      <div
+        class="tw-text-white tw-px-2 tw-py-1 tw-flex tw-flex-row tw-items-center tw-bg-[color:var(--blade-color-unsaved-changes)]"
+      >
+        <VcIcon
+          size="s"
+          icon="fas fa-info-circle"
+        />
+        <div class="tw-line-clamp-1 tw-w-full tw-ml-2">{{ t("COMPONENTS.ORGANISMS.VC_BLADE.UNSAVED_CHANGES") }}</div>
+      </div>
+    </template>
+
     <!-- Set up blade toolbar -->
     <VcBladeToolbar
       class="tw-shrink-0"
@@ -78,6 +92,7 @@ export interface Props {
   expandable?: boolean;
   closable?: boolean;
   toolbarItems?: IBladeToolbar[];
+  hasUnsavedChanges?: boolean;
 }
 
 export interface Emits {
@@ -123,6 +138,7 @@ const { open } = usePopup({
   --blade-background-color: #ffffff;
   --blade-border-radius: 6px;
   --blade-color-error: #f14e4e;
+  --blade-color-unsaved-changes: #82a6bd;
 }
 
 .vc-app_mobile .vc-blade {

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

@@ -629,7 +629,7 @@ const mobileTemplateRenderer = ({ item }: { item: TableItem }) => {
       { class: "tw-border-b tw-border-solid tw-border-b-[#e3e7ec] tw-p-3 tw-gap-2 tw-flex tw-flex-wrap" },
       props.columns.map((x) => {
         return h("div", { class: "tw-grow tw-w-[33%] tw-ml-3  tw-truncate" }, [
-          h(VcHint, { class: "tw-mb-1 tw-truncate" }, toValue(x.title)),
+          h(VcHint, { class: "tw-mb-1 tw-truncate" }, () => toValue(x.title)),
           h(VcTableCell, { cell: { ...x, class: "!tw-justify-start" }, item, class: "" }),
         ]);
       }),