@vc-shell/framework 1.0.223 → 1.0.225

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.0.223",
+  "version": "1.0.225",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -60,9 +60,9 @@
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
     "@types/quill": "^2.0.14",
-    "@vc-shell/api-client-generator": "^1.0.223",
-    "@vc-shell/config-generator": "^1.0.223",
-    "@vc-shell/ts-config": "^1.0.223",
+    "@vc-shell/api-client-generator": "^1.0.225",
+    "@vc-shell/config-generator": "^1.0.225",
+    "@vc-shell/ts-config": "^1.0.225",
     "@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

@@ -103,6 +103,7 @@ const render = () => {
                             expandable: quantity.value > 1,
                             expanded: index - hiddenQuantity === quantity.value - 1,
                             "onClose:blade": () => {
+                              if (index === 0) return;
                               closeBlade(index);
                             },
                             "onParent:call": async (args: IParentCallArgs) => {

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

@@ -167,7 +167,7 @@ const useBladeNavigationSingleton = createSharedComposable(() => {
       navigationInstance.blades.value = [];
       activeWorkspace.value = undefined;
     } else {
-      if (oldVal) router.replace({ path: oldVal });
+      if (oldVal) router.push({ path: oldVal });
     }
   }
 
@@ -175,6 +175,7 @@ const useBladeNavigationSingleton = createSharedComposable(() => {
     wsRouteComponent.props.navigation.idx = 0;
     navigationInstance.blades.value[0] = wsRouteComponent;
     activeWorkspace.value = wsRouteComponent;
+    closeBlade(1);
   }
 
   function getWorkspaceRouteComponent(workspaceUrl: string) {
@@ -290,6 +291,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
     { blade, param, options }: IBladeEvent<Blade>,
     query: LocationQuery | undefined = undefined,
     params: RouteParams = {},
+    replace = false,
   ) {
     const createdComponent = h(
       blade,
@@ -327,7 +329,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
           if (wsroute && wsroute.components) {
             wsroute.components.default = createdComponent;
           }
-          return await router.replace({ name: wsroute?.name, params: { ...params, ...route.params }, query });
+          return await router.push({ name: wsroute?.name, params: { ...params, ...route.params }, query, replace });
         } else
           notification.error(i18n.global.t("PERMISSION_MESSAGES.ACCESS_RESTRICTED"), {
             timeout: 3000,
@@ -502,9 +504,14 @@ export function useBladeNavigation(): IUseBladeNavigation {
 
       // Open the workspace component or workspace route.
       if (registeredRouteComponent?.type.isWorkspace) {
-        await openWorkspace({
-          blade: registeredRouteComponent as unknown as BladeInstanceConstructor,
-        });
+        await openWorkspace(
+          {
+            blade: registeredRouteComponent as unknown as BladeInstanceConstructor,
+          },
+          undefined,
+          undefined,
+          true,
+        );
         return { name: registeredRouteComponent?.type.name, params };
       }
 
@@ -525,10 +532,14 @@ export function useBladeNavigation(): IUseBladeNavigation {
           }),
           getURLQuery().obj,
           params,
+          true,
         );
 
         // Open the route if it's routable.
-        if (registeredRouteComponent?.type.routable) {
+        if (
+          registeredRouteComponent?.type.routable &&
+          registeredWorkspaceComponent.type.moduleUid === registeredRouteComponent.type.moduleUid
+        ) {
           await openBlade({
             blade: registeredRouteComponent as unknown as BladeInstanceConstructor,
             param: param,
@@ -565,7 +576,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
       // add blade name to query keys
       const namedQuery = _.mapKeys(
         _.mapValues(query, (value) => value?.toString()),
-        (value, key) => instance.vnode.type.name.toLowerCase() + "_" + key,
+        (value, key) => instance.vnode.type.name?.toLowerCase() + "_" + key,
       );
       const cleanQuery = _.omitBy(namedQuery, _.isNil);
 
@@ -580,10 +591,10 @@ export function useBladeNavigation(): IUseBladeNavigation {
   function getNavigationQuery() {
     if (instance.vnode.props.navigation.idx === 0) {
       const queryKeys = Array.from(Object.keys(route.query));
-      const bladeQueryKeys = queryKeys.filter((key) => key.startsWith(instance.vnode.type.name.toLowerCase()));
+      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() + "_", ""),
+        key.replace(instance.vnode.type.name?.toLowerCase() + "_", ""),
       ) as Record<string, string | number>;
 
       const obj: typeof namedQuery = {};

package/shared/modules/dynamic/components/fields/Card.ts

@@ -63,6 +63,7 @@ export default {
         props: Object.assign(
           {},
           {
+            variant: props.element.variant,
             header: toValue(props.baseProps.label),
             isCollapsable: props.element.collapsible,
             isCollapsed: restoreCollapsed(props.element.id) || props.element.collapsed,

package/shared/modules/dynamic/components/fields/GalleryField.ts

@@ -78,7 +78,8 @@ export default {
         async remove(image: ICommonAsset) {
           if (!imagesHandler.remove?.value) throw new Error("Remove handler is not provided");
           if (
-            await showConfirmation(
+            imagesHandler.noRemoveConfirmation ||
+            (await showConfirmation(
               computed(() =>
                 t(
                   `${props.bladeContext?.settings?.localizationPrefix
@@ -86,7 +87,7 @@ export default {
                     .toUpperCase()}.PAGES.ALERTS.IMAGE_DELETE_CONFIRMATION`,
                 ),
               ),
-            )
+            ))
           ) {
             const edited = await imagesHandler.remove?.value?.([image]);
             await editImages(edited);

package/shared/modules/dynamic/components/fields/Table.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useTableTemplates } from "./../../composables";
-import { Component, ExtractPropTypes, computed, h, inject, unref } from "vue";
+import { Component, ExtractPropTypes, computed, h, inject, isRef, nextTick, toValue, unref } from "vue";
 import { Table } from "../factories";
 import componentProps from "./props";
 import { TableSchema } from "../../types";
@@ -8,8 +8,14 @@ import { useI18n } from "vue-i18n";
 import { unrefNested } from "../../helpers/unrefNested";
 import { setModel } from "../../helpers/setters";
 import { safeIn } from "../../helpers/safeIn";
+import { IActionBuilderResult, ITableColumns } from "../../../../../core/types";
 
-type TableItemData = Record<string, any>;
+type TableItemData<T> = {
+  name: string;
+  item: T;
+  cell: ITableColumns;
+  index: number;
+};
 
 export default {
   name: "TableEl",
@@ -19,13 +25,48 @@ export default {
     const { t } = useI18n({ useScope: "global" });
     const enableEdit = inject("isBladeEditable", false);
     const enableEditComputed = computed(() => unref(enableEdit));
+    const items = (unrefNested(props.baseProps).modelValue ?? []) as any[];
+
+    function disabledActionHandler(disabled: { method?: string } | boolean, item: (typeof items)[number]): boolean {
+      if (!disabled) return false;
+      if (typeof disabled === "boolean") return disabled;
+      else if (disabled.method && typeof toValue(props.bladeContext.scope)?.[disabled.method] === "function")
+        return toValue(props.bladeContext.scope)?.[disabled.method]({ item });
+      else if (disabled.method && toValue(props.bladeContext.scope)?.[disabled.method])
+        return toValue(props.bladeContext.scope)?.[disabled.method];
+      return false;
+    }
+
+    function actionBuilder(item: (typeof items)[number]): IActionBuilderResult[] | undefined {
+      const result = props.element?.actions?.reduce((arr, action) => {
+        const isDisabled = disabledActionHandler(action?.disabled ?? false, item);
+
+        if (!toValue(isDisabled)) {
+          arr.push({
+            icon: action.icon,
+            title: computed(() => t(action.title)),
+            type: action.type,
+            position: action.position,
+            clickHandler: async (itemVal: (typeof items)[number], index: number) => {
+              try {
+                await toValue(props.bladeContext.scope)?.[action.method]?.(itemVal, index);
+              } catch (error) {
+                throw new Error(`Method ${action.method} is not defined in scope or toolbarOverrides`);
+              }
+            },
+          });
+        }
+        return arr;
+      }, [] as IActionBuilderResult[]);
+
+      return result;
+    }
 
     return () => {
       const field = Table({
         props: Object.assign(
           {},
           {
-            removeRowButton: props.element.removeRowButton?.show,
             addNewRowButton: props.element.addNewRowButton
               ? {
                   title: computed(() => t(props.element.addNewRowButton?.title ?? "")),
@@ -40,7 +81,9 @@ export default {
             stateKey: props.element.id,
             class: `!tw-flex-auto ${unrefNested(props.baseProps).classNames ?? ""}`,
             editing: enableEditComputed.value,
-            onOnEditComplete: (data: any) => {
+            enableItemActions: !!props.element.actions,
+            itemActionBuilder: actionBuilder,
+            onOnEditComplete: (data: { event: { field: string; value: any }; index: number }) => {
               if (props.fieldContext) {
                 setModel({
                   context: props.fieldContext,
@@ -49,15 +92,6 @@ export default {
                 });
               }
             },
-            onOnRowRemove: (data: { index: number }) => {
-              if (
-                props.element.removeRowButton?.method &&
-                props.bladeContext.scope?.[props.element.removeRowButton?.method] &&
-                typeof props.bladeContext.scope?.[props.element.removeRowButton?.method] === "function"
-              ) {
-                props.bladeContext.scope?.[props.element.removeRowButton?.method]?.(data.index);
-              }
-            },
             onOnAddNewRow: () => {
               if (
                 props.element.addNewRowButton?.method &&
@@ -86,12 +120,21 @@ export default {
         slots: {
           ...Object.entries(tableTemplates.templateOverrideComponents).reduce(
             (obj, [key, value], index) => {
-              obj[`item_${key}`] = (itemData: TableItemData) => {
+              obj[`item_${key}`] = (itemData: TableItemData<(typeof items)[number]>) => {
                 return h(unref(value), {
                   index: itemData.index,
                   context: itemData,
                   key: `template_override_${props.element.id}_${index}`,
                   bladeContext: props.bladeContext,
+                  onEditComplete: (data: any) => {
+                    if (props.fieldContext) {
+                      setModel({
+                        context: props.fieldContext,
+                        property: `${props.element.property}.${itemData.index}.${key}`,
+                        value: data,
+                      });
+                    }
+                  },
                 });
               };
 
@@ -100,20 +143,17 @@ export default {
             {} as Record<`item_${string}`, any>,
           ),
           notfound: tableTemplates?.notFound
-            ? (itemData: TableItemData) =>
-                h(tableTemplates.notFound as Component, { context: itemData, bladeContext: props.bladeContext })
+            ? () => h(tableTemplates.notFound as Component, { context: props.bladeContext })
             : undefined,
           "mobile-item": tableTemplates?.mobileView
-            ? (itemData: TableItemData) =>
+            ? (itemData: (typeof items)[number]) =>
                 h(tableTemplates.mobileView as Component, { context: itemData, bladeContext: props.bladeContext })
             : undefined,
           empty: tableTemplates?.empty
-            ? (itemData: TableItemData) =>
-                h(tableTemplates.empty as Component, { context: itemData, bladeContext: props.bladeContext })
+            ? () => h(tableTemplates.empty as Component, { context: props.bladeContext })
             : undefined,
           footer: tableTemplates?.footer
-            ? (itemData: TableItemData) =>
-                h(tableTemplates.footer as Component, { context: itemData, bladeContext: props.bladeContext })
+            ? () => h(tableTemplates.footer as Component, { context: props.bladeContext })
             : undefined,
         },
       });

package/shared/modules/dynamic/components/fields/storybook/Card.stories.ts

@@ -87,6 +87,16 @@ export default {
         },
       },
     },
+    variant: {
+      description: "Card variant.",
+      control: "radio",
+      options: ["default", "success", "danger"],
+      table: {
+        type: {
+          summary: "default | success | danger",
+        },
+      },
+    },
   },
   parameters: {
     docs: {

package/shared/modules/dynamic/components/fields/storybook/ContentField.stories.ts

@@ -73,7 +73,7 @@ export default {
     aspectRatio: {
       description: `Field columns aspect ratio.
       Uses CSS flex-grow property.`,
-      control: "array",
+      control: "object",
       table: {
         type: {
           summary: "[number, number]",

package/shared/modules/dynamic/components/fields/storybook/Fieldset.stories.ts

@@ -65,7 +65,7 @@ export default {
           summary: "number",
         },
         defaultValue: {
-          summary: 1,
+          summary: "1",
         },
       },
     },

package/shared/modules/dynamic/components/fields/storybook/InputField.stories.ts

@@ -95,7 +95,7 @@ export default {
           summary: "number",
         },
         defaultValue: {
-          summary: 1024,
+          summary: "1024",
         },
       },
     },

package/shared/modules/dynamic/components/fields/storybook/SelectField.stories.ts

@@ -131,7 +131,7 @@ export default {
           summary: "boolean",
         },
         defaultValue: {
-          summary: false,
+          summary: "false",
         },
       },
     },
@@ -156,7 +156,7 @@ export default {
           summary: "boolean",
         },
         defaultValue: {
-          summary: false,
+          summary: "false",
         },
       },
     },
@@ -167,7 +167,7 @@ export default {
           summary: "boolean",
         },
         defaultValue: {
-          summary: false,
+          summary: "false",
         },
       },
     },
@@ -179,7 +179,7 @@ export default {
           summary: "boolean",
         },
         defaultValue: {
-          summary: true,
+          summary: "true",
         },
       },
     },

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

@@ -11,7 +11,7 @@ export interface UseDetailsFactoryParams<Item> {
   remove?: (args: ItemId) => Promise<void> | void;
 }
 
-export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<Item>) => {
+export const useDetailsFactory = <Item extends { id?: string }>(factoryParams: UseDetailsFactoryParams<Item>) => {
   return function useDetails(): UseDetails<Item> {
     const { setFieldError, setErrors, validate, setFieldValue, setValues, errorBag } = useForm({
       validateOnMount: false,
@@ -34,6 +34,12 @@ export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<I
         isModified.value = false;
         isDirty = ref(false);
 
+        const id = item?.id ?? res?.id;
+
+        if (id) {
+          await load({ id });
+        }
+
         if (res) return res;
       } else throw new Error("Form is not valid");
     });
@@ -46,10 +52,10 @@ export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<I
 
     const validationState = computed(
       (): IValidationState<Item> => ({
-        dirty: isDirty.value,
+        dirty: isDirty.value || isModified.value,
         valid: isFormValid.value,
         modified: isModified.value,
-        disabled: isDisabled.value,
+        disabled: isDisabled.value || !isModified.value,
         validated: !isDisabled.value && isModified.value,
         cachedValue: itemTemp.value,
         errorBag: errorBag.value,
@@ -58,6 +64,7 @@ export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<I
         setFieldValue,
         setValues,
         resetModified,
+        resetValidationState,
         validate,
       }),
     );
@@ -76,8 +83,15 @@ export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<I
       }
 
       itemTemp.value = _.cloneDeep(data);
+
+      resetValidationState();
     }) as (data: MaybeRef<Item | undefined> | ComputedRef<Item | undefined>, updateInitial?: MaybeRef<boolean>) => void;
 
+    const resetValidationState = () => {
+      isModified.value = false;
+      isDirty = ref(false);
+    };
+
     return {
       load,
       saveChanges,

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

@@ -32,6 +32,7 @@ export interface IValidationState<Item> {
     data: MaybeRef<Item | undefined> | ComputedRef<Item | undefined>,
     updateInitial?: MaybeRef<boolean>,
   ) => void;
+  resetValidationState: () => void;
   validate: FormContext["validate"];
   errorBag: Partial<Record<string, string[]>>;
 }

package/shared/modules/dynamic/helpers/nodeBuilder.ts

@@ -76,8 +76,8 @@ function nodeBuilder<
 
   const hint =
     safeIn("hint", controlSchema) && controlSchema.hint
-      ? unref(unwrapInterpolation(controlSchema.hint, internalContext)) ??
-        (bladeContext.scope && unref(unwrapInterpolation(controlSchema.hint, bladeContext.scope))) ??
+      ? (bladeContext.scope && unref(unwrapInterpolation(controlSchema.hint, bladeContext.scope))) ??
+        unref(unwrapInterpolation(controlSchema.hint, internalContext)) ??
         undefined
       : undefined;
 
@@ -115,16 +115,16 @@ function nodeBuilder<
 
   const baseProps: IControlBaseProps = reactive({
     key: `${parentId}`,
-    label: computed(() => (label ? t(label) : undefined)),
-    hint: computed(() => (hint ? t(hint) : undefined)),
+    label: computed(() => (typeof label !== "undefined" ? t(label) : undefined)),
+    hint: computed(() => (typeof hint !== "undefined" ? t(hint) : undefined)),
     disabled,
     name,
     rules,
-    placeholder: computed(() => (placeholder ? t(placeholder) : undefined)),
+    placeholder: computed(() => (typeof placeholder !== "undefined" ? t(placeholder) : undefined)),
     required,
     modelValue,
     "onUpdate:modelValue": onUpdateModelValue,
-    tooltip: computed(() => (tooltip ? t(tooltip) : undefined)),
+    tooltip: computed(() => (typeof tooltip !== "undefined" ? t(tooltip) : undefined)),
     multilanguage,
     classNames:
       "horizontalSeparator" in controlSchema && controlSchema.horizontalSeparator

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

@@ -63,7 +63,6 @@
         @pagination-click="onPaginationClick"
         @selection-changed="onSelectionChanged"
         @header-click="onHeaderClick"
-        @load:change="onSearchList"
         @scroll:ptr="reload"
         @search:change="onSearchList"
         @row:reorder="sortRows"
@@ -129,6 +128,7 @@
           <component
             :is="component"
             :context="itemData"
+            :blade-context="bladeContext"
           />
         </template>
 
@@ -141,6 +141,7 @@
           <component
             :is="tableTemplates.mobileView"
             :context="itemData"
+            :blade-context="bladeContext"
           ></component>
         </template>
       </VcTable>
@@ -215,7 +216,7 @@ const title = computed(() => t(settings.value?.titleTemplate as string));
 const allSelected = ref(false);
 const searchValue = ref();
 const selectedItemId = shallowRef();
-const sort = shallowRef("createdDate:DESC");
+const sort = shallowRef();
 const selectedIds = shallowRef<string[]>([]);
 const itemsProxy = ref<Record<string, any>[]>();
 
@@ -288,6 +289,8 @@ if (props.isWidgetView) {
   query.value.take = 5;
 }
 
+sort.value = query.value.sort ?? "createdDate:DESC";
+
 const unreffedScope = reactiveComputed(() => toValue(scope) ?? {});
 
 const { tableTemplates } = useTableTemplates(tableData);

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

@@ -1,5 +1,6 @@
 import {
   VcButton,
+  VcCard,
   VcField,
   VcGallery,
   VcIcon,
@@ -768,6 +769,11 @@ export interface CardSchema extends RequiredBy<Pick<SchemaBase, "id" | "label" |
    * @default false
    */
   removePadding?: boolean;
+  /**
+   * Card variant.
+   * @type {default | success | danger}
+   */
+  variant?: ComponentProps<typeof VcCard>["variant"];
 }
 
 export interface WidgetsSchema extends Pick<SchemaBase, "id" | "horizontalSeparator"> {
@@ -883,22 +889,6 @@ export interface SwitchSchema extends Omit<SchemaBase, "placeholder" | "multilan
 
 export type TableSchema = Omit<ListContentSchema, "filter"> &
   Pick<SchemaBase, "id" | "property" | "visibility"> & {
-    /**
-     * Shows button to remove table row.
-     * Used when table is in editing mode.
-     */
-    removeRowButton?: {
-      /**
-       * Determines whether the button should be shown or hidden.
-       */
-      show: boolean;
-      /**
-       * Method to be called when the button is clicked.
-       * @description Method should be defined in the blade `scope`.
-       * @type {string}
-       */
-      method: string;
-    };
     /**
      * Configuration for the add new row button in the table.
      * Used when table is in editing mode.

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

@@ -127,7 +127,7 @@ $variants: success, danger;
   &__title {
     @apply tw-uppercase tw-flex-grow
    tw-text-[color:var(--card-header-color)]
-   tw-text-base tw-font-bold tw-uppercase;
+   tw-text-base tw-font-bold;
   }
 
   &__icon {
@@ -139,7 +139,7 @@ $variants: success, danger;
   }
 
   &__body {
-    @apply tw-flex-grow tw-box-border;
+    @apply tw-flex-grow tw-box-border tw-flex-col;
   }
 
   @each $variant in $variants {