@vc-shell/framework 1.0.222 → 1.0.224

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.0.222",
+  "version": "1.0.224",
   "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.222",
-    "@vc-shell/config-generator": "^1.0.222",
-    "@vc-shell/ts-config": "^1.0.222",
+    "@vc-shell/api-client-generator": "^1.0.224",
+    "@vc-shell/config-generator": "^1.0.224",
+    "@vc-shell/ts-config": "^1.0.224",
     "@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/InputCurrency.ts

@@ -1,4 +1,4 @@
-import { Component, ExtractPropTypes, computed, h, unref } from "vue";
+import { Component, ExtractPropTypes, h, unref } from "vue";
 import { InputCurrency } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
@@ -8,13 +8,11 @@ import { InputCurrencySchema } from "../../types";
 import { unrefNested } from "../../helpers/unrefNested";
 import { toValue } from "@vueuse/core";
 import { safeIn } from "../../helpers/safeIn";
-import { useI18n } from "vue-i18n";
 
 export default {
   name: "InputCurrency",
   props: componentProps,
   setup(props: ExtractPropTypes<typeof componentProps> & { element: InputCurrencySchema }) {
-    const { t } = useI18n({ useScope: "global" });
     return () => {
       const options =
         toValue(getModel(props.element.options, props.fieldContext ?? {})) ||
@@ -35,7 +33,6 @@ export default {
         props: Object.assign(
           {},
           {
-            hint: props.element.hint ? toValue(computed(() => t(props.element.hint ?? ""))) : undefined,
             option: toValue(scopedProperty ?? contextProperty),
             optionLabel: props.element.optionLabel,
             optionValue: props.element.optionValue,

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

@@ -1,11 +1,10 @@
-import { ExtractPropTypes, h, VNode, Component, computed, toValue } from "vue";
+import { ExtractPropTypes, h, VNode, Component } from "vue";
 import { InputField } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
 import { InputSchema, ControlSchema } from "../../types";
 import { nodeBuilder } from "../../helpers/nodeBuilder";
 import { unrefNested } from "../../helpers/unrefNested";
-import { useI18n } from "vue-i18n";
 
 const slotsMap = {
   append: "append",
@@ -18,14 +17,11 @@ export default {
   name: "InputField",
   props: componentProps,
   setup(props: ExtractPropTypes<typeof componentProps> & { element: InputSchema }) {
-    const { t } = useI18n({ useScope: "global" });
-
     return () => {
       const field = InputField({
         props: Object.assign(
           {},
           {
-            hint: props.element.hint ? toValue(computed(() => t(props.element.hint ?? ""))) : undefined,
             type: props.element.variant,
             currentLanguage: props.currentLocale,
             clearable: props.element.clearable || false,

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

@@ -1,12 +1,11 @@
 import { ComponentSlots } from "../../../../utilities/vueUtils";
-import { h, resolveComponent, ExtractPropTypes, Component, VNode, computed, toValue } from "vue";
+import { h, resolveComponent, ExtractPropTypes, Component, VNode } from "vue";
 import { MultivalueField } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
 import { MultivalueSchema } from "../../types";
 import { VcMultivalue } from "../../../../../ui/components";
 import { unrefNested } from "../../helpers/unrefNested";
-import { useI18n } from "vue-i18n";
 
 type TScope = Parameters<ComponentSlots<typeof VcMultivalue>["option"]>["0"] &
   Parameters<ComponentSlots<typeof VcMultivalue>["selected-item"]>["0"];
@@ -15,13 +14,11 @@ export default {
   name: "MultivalueField",
   props: componentProps,
   setup(props: ExtractPropTypes<typeof componentProps> & { element: MultivalueSchema }) {
-    const { t } = useI18n({ useScope: "global" });
     return () => {
       const field = MultivalueField({
         props: Object.assign(
           {},
           {
-            hint: props.element.hint ? toValue(computed(() => t(props.element.hint ?? ""))) : undefined,
             multivalue: props.element.multivalue,
             type: props.element.variant,
             optionValue: props.element.optionValue,

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

@@ -1,12 +1,11 @@
 import { ComponentSlots } from "../../../../utilities/vueUtils";
-import { h, resolveComponent, ExtractPropTypes, Component, VNode, computed, toValue } from "vue";
+import { h, resolveComponent, ExtractPropTypes, Component, VNode } from "vue";
 import { SelectField } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
 import { SelectSchema } from "../../types";
 import { VcSelect } from "../../../../../ui/components";
 import { unrefNested } from "../../helpers/unrefNested";
-import { useI18n } from "vue-i18n";
 
 type TScope =
   | Parameters<ComponentSlots<typeof VcSelect>["option"]>["0"]
@@ -16,13 +15,11 @@ export default {
   name: "SelectField",
   props: componentProps,
   setup(props: ExtractPropTypes<typeof componentProps> & { element: SelectSchema }) {
-    const { t } = useI18n({ useScope: "global" });
     return () => {
       const field = SelectField({
         props: Object.assign(
           {},
           {
-            hint: props.element.hint ? toValue(computed(() => t(props.element.hint ?? ""))) : undefined,
             optionValue: props.element.optionValue,
             optionLabel: props.element.optionLabel,
             emitValue: props.element.emitValue,

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/composables/useFilterBuilder/index.ts

@@ -64,7 +64,7 @@ export default <Query>(args: {
   data: FilterBase | undefined;
   query: MaybeRef<Query>;
   load: AsyncAction<Query>;
-  scope: ComputedRef<Record<string, any>> | undefined;
+  scope: Record<string, any> | undefined;
 }): UseFilterBuilder => {
   const _search = args.load;
   const _data = args.data;

package/shared/modules/dynamic/composables/useToolbarReducer/index.ts

@@ -12,7 +12,6 @@ export const useToolbarReducer = (args: {
   defaultToolbarBindings: BaseBladeScope["toolbarOverrides"];
   customToolbarConfig: BaseBladeScope["toolbarOverrides"];
   context: UnwrapNestedRefs<DetailsBladeContext> | UnwrapNestedRefs<ListBladeContext>;
-  scope: ComputedRef<BaseBladeScope> | undefined;
 }): UnwrapNestedRefs<ComputedRef<(IBladeToolbar & ToolbarSchema)[] | IBladeToolbar[] | undefined>> | undefined => {
   if (!args) return;
 
@@ -66,19 +65,6 @@ export const useToolbarReducer = (args: {
       }, [] as IBladeToolbar[]);
     }
 
-    // TODO remove redundant code if not needed
-    // if (args.scope && toValue(toValue(args.scope)?.toolbarOverrides)) {
-    //   const toolbarOverrides: BaseBladeScope["toolbarOverrides"] = toValue(toValue(args.scope)?.toolbarOverrides);
-
-    //   if (Array.isArray(toolbarOverrides)) {
-    //     return toolbarOverrides;
-    //   } else if (typeof toolbarOverrides === "function") {
-    //     return toolbarOverrides(args.context);
-    //   } else if (typeof toolbarOverrides === "object") {
-    //     return Object.values(toolbarOverrides);
-    //   }
-    // }
-
     return [];
   });
 };

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");
     });
@@ -58,6 +64,7 @@ export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<I
         setFieldValue,
         setValues,
         resetModified,
+        resetDirty,
         validate,
       }),
     );
@@ -78,6 +85,10 @@ export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<I
       itemTemp.value = _.cloneDeep(data);
     }) as (data: MaybeRef<Item | undefined> | ComputedRef<Item | undefined>, updateInitial?: MaybeRef<boolean>) => void;
 
+    const resetDirty = () => {
+      isDirty = ref(false);
+    };
+
     return {
       load,
       saveChanges,

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

@@ -6,6 +6,7 @@ import { AssetsHandler, IBladeToolbar, ICommonAsset } from "../../../../../core/
 import { useBladeNavigation } from "../../../../components";
 import { FormContext } from "vee-validate";
 import { Breadcrumbs } from "../../../../../ui/types";
+import { DynamicBladeForm, DynamicBladeList } from "../../pages";
 
 export type ItemId = { id: string };
 
@@ -31,6 +32,7 @@ export interface IValidationState<Item> {
     data: MaybeRef<Item | undefined> | ComputedRef<Item | undefined>,
     updateInitial?: MaybeRef<boolean>,
   ) => void;
+  resetDirty: () => void;
   validate: FormContext["validate"];
   errorBag: Partial<Record<string, string[]>>;
 }
@@ -44,7 +46,7 @@ export interface UseDetails<Item, Scope extends DetailsBaseBladeScope = DetailsB
   loading: ComputedRef<boolean>;
   item: Ref<Item | undefined>;
   validationState: ComputedRef<IValidationState<Item>>;
-  scope?: ComputedRef<UnwrapNestedRefs<Scope>>;
+  scope?: Scope;
   bladeTitle?: ComputedRef<string>;
 }
 
@@ -64,7 +66,7 @@ export interface UseList<
   }>;
   load: AsyncAction<Query>;
   remove?: AsyncAction<CustomQuery>;
-  scope?: ComputedRef<UnwrapNestedRefs<Scope>>;
+  scope?: Scope;
 }
 
 export interface BaseBladeScope {
@@ -150,3 +152,19 @@ export type ListBladeExposed<Scope extends ListBaseBladeScope> = BaseBladeExpose
 export type DetailsBladeExposed<Scope extends DetailsBaseBladeScope> = BaseBladeExposed & {
   readonly settings: SettingsDetails;
 } & UnwrapNestedRefs<Scope>;
+
+export type DetailsComposableArgs<
+  Props extends Omit<InstanceType<typeof DynamicBladeForm>["$props"], "composables"> = Record<string, any>,
+> = {
+  props: InstanceType<typeof DynamicBladeForm>["$props"] & Props;
+  emit: InstanceType<typeof DynamicBladeForm>["$emit"];
+  mounted: Ref<boolean>;
+};
+
+export type ListComposableArgs<
+  Props extends Omit<InstanceType<typeof DynamicBladeList>["$props"], "composables"> = Record<string, any>,
+> = {
+  readonly props: InstanceType<typeof DynamicBladeList>["$props"] & Props;
+  readonly emit: InstanceType<typeof DynamicBladeList>["$emit"];
+  readonly mounted: Ref<boolean>;
+};

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

@@ -74,6 +74,13 @@ function nodeBuilder<
       ? unref(unwrapInterpolation(controlSchema.label, internalContext))
       : undefined;
 
+  const hint =
+    safeIn("hint", controlSchema) && controlSchema.hint
+      ? (bladeContext.scope && unref(unwrapInterpolation(controlSchema.hint, bladeContext.scope))) ??
+        unref(unwrapInterpolation(controlSchema.hint, internalContext)) ??
+        undefined
+      : undefined;
+
   const disabled =
     (bladeContext.scope && safeIn("disabled", bladeContext.scope) && bladeContext.scope.disabled) ||
     (safeIn("disabled", controlSchema) &&
@@ -108,15 +115,16 @@ function nodeBuilder<
 
   const baseProps: IControlBaseProps = reactive({
     key: `${parentId}`,
-    label: computed(() => (label ? t(label) : 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