@vc-shell/framework 1.1.0 → 1.1.2

package/dist/assets/shared-modules-CDP-H5ZB.js

@@ -0,0 +1,3588 @@
+import { markRaw, ref, computed, watchPostEffect, unref, toValue, readonly, h, reactive, resolveComponent, shallowRef, getCurrentInstance, watch, onMounted, onUnmounted, defineComponent, inject, onBeforeMount, provide, toRefs, createBlock, createCommentVNode, openBlock, withCtx, createElementBlock, createVNode, mergeProps, createSlots, resolveDynamicComponent, createElementVNode, toDisplayString, createTextVNode, renderList, isRef, useSlots, onUpdated, onBeforeUnmount, resolveDirective, withDirectives, Fragment, nextTick } from 'vue';
+import { b as _sfc_main$b } from './ui-indicators-mIQeEqha.js';
+import { A as _sfc_main$8, B as _sfc_main$9, _ as _sfc_main$n } from './ui-media-WWYrwmZw.js';
+import { a as _sfc_main$5, b as _sfc_main$c, _ as _sfc_main$l } from './ui-controls-nmDJYLmC.js';
+import { V as VcCard, a as VcContainer, b as _sfc_main$j, _ as _sfc_main$k } from './ui-layout-v2XBQky3.js';
+import { V as VcHint } from './ui-helpers-CF-EUlOg.js';
+import { b as usePopup, u as useWidgets, d as useBladeNavigation, t as _sfc_main$m, c as usePermissions, i as i18n, n as notification, k as createAppModule } from './ui-navigation-BtHa6ovW.js';
+import { i as useFunctions, f as useLanguages, u as useNotifications, n as useBeforeUnload, j as useAsync, l as useLoading } from './core-composables-DYxpIWyY.js';
+import './ui-app-D31Pr1WY.js';
+import { Field, useForm, useIsFormValid } from 'vee-validate';
+import { a as _sfc_main$e, i as _sfc_main$o } from './ui-content-B7SxH8y9.js';
+import './ui-form-Cs5ooOo7.js';
+import { d as _sfc_main$2, e as _sfc_main$3, c as _sfc_main$6, h as _sfc_main$7, _ as _sfc_main$a, V as VcCheckbox, b as _sfc_main$f, a as _sfc_main$g, f as _sfc_main$h, u as useI18n, J as isEmpty, C as omit, n as merge, K as chunk, l as get, L as has, M as set, j as isEqual, i as cloneDeep, N as findIndex, P as unset, Q as update, R as compact, r as uniqueId, S as findKey, T as every } from './ui-form-fields-DFQi31jT.js';
+import './shared-composables-v9NkNuAe.js';
+import './core-plugins-wv2bDZ0l.js';
+import 'vue-router';
+import './shared-components-CfAt2hC6.js';
+import { a as _sfc_main$4, _ as _sfc_main$i, b as BladeInstance } from './ui-data-Ci3b1ye0.js';
+import { _ as _sfc_main$d } from './ui-media-advanced-T8ibi153.js';
+import { C as toReactive, y as createUnrefFn, t as toValue$1, D as useMounted, r as reactiveComputed, E as reactify, F as toRefs$1 } from './vueuse-CTQm4Zh0.js';
+import { k as kebabToPascal } from './core-utilities-BTktq_a-.js';
+
+const ControlBaseProps = ({
+  rules = void 0,
+  label = void 0,
+  placeholder = void 0,
+  disabled = false,
+  required = false,
+  name = void 0,
+  tooltip = void 0,
+  key = void 0,
+  classNames = void 0,
+  ...rest
+}) => ({
+  key,
+  rules,
+  label,
+  placeholder,
+  disabled,
+  required,
+  name,
+  tooltip,
+  classNames,
+  ...rest
+});
+const MultivalueField$1 = ({ props, slots }) => ({
+  component: markRaw(_sfc_main$6),
+  props: {
+    ...ControlBaseProps(props),
+    ...props
+  },
+  slots
+});
+const SelectField$1 = ({ props, slots }) => ({
+  component: markRaw(_sfc_main$h),
+  props: {
+    ...ControlBaseProps(props),
+    ...props
+  },
+  slots
+});
+const StatusField$1 = ({ props, slots }) => ({
+  component: markRaw(_sfc_main$b),
+  props: {
+    ...ControlBaseProps(props),
+    ...props
+  },
+  slots
+});
+const InputField$1 = ({ props, slots }) => ({
+  component: markRaw(_sfc_main$g),
+  props: {
+    ...ControlBaseProps(props),
+    ...props
+  },
+  slots
+});
+const TextareaField$1 = ({ props }) => ({
+  component: markRaw(_sfc_main$7),
+  props: {
+    ...ControlBaseProps(props),
+    ...props
+  }
+});
+const ContentField$1 = ({ props }) => ({
+  component: markRaw(_sfc_main$a),
+  props: {
+    ...ControlBaseProps(props),
+    ...props
+  }
+});
+const ImageField$1 = ({ props }) => ({
+  component: markRaw(_sfc_main$8),
+  props: {
+    ...ControlBaseProps(props),
+    ...props
+  }
+});
+const VideoField$1 = ({ props }) => ({
+  component: markRaw(_sfc_main$9),
+  props: {
+    ...ControlBaseProps(props),
+    ...props
+  }
+});
+const InputCurrency$1 = ({ props }) => ({
+  component: markRaw(_sfc_main$f),
+  props: {
+    ...ControlBaseProps(props),
+    ...props
+  }
+});
+const CardCollection = ({ props, slots }) => ({
+  component: markRaw(VcCard),
+  props: {
+    ...props,
+    ...ControlBaseProps(props)
+  },
+  slots
+});
+const DynamicProperties = ({ props }) => ({
+  component: markRaw(_sfc_main$i),
+  props: {
+    ...props,
+    ...ControlBaseProps(props)
+  }
+});
+const EditorField$1 = ({ props }) => ({
+  component: markRaw(_sfc_main$e),
+  props: {
+    ...ControlBaseProps(props),
+    ...props
+  }
+});
+const Gallery = ({ props }) => ({
+  component: markRaw(_sfc_main$d),
+  props: {
+    ...ControlBaseProps(props),
+    ...props
+  }
+});
+const Checkbox$1 = ({ props, slots }) => ({
+  component: markRaw(VcCheckbox),
+  props: {
+    ...ControlBaseProps(props),
+    ...props
+  },
+  slots
+});
+const RadioButton = ({ props }) => ({
+  component: markRaw(_sfc_main$2),
+  props: {
+    ...ControlBaseProps(props),
+    ...props
+  }
+});
+const Button$1 = ({ props, slots }) => ({
+  component: markRaw(_sfc_main$c),
+  props: {
+    ...ControlBaseProps(props),
+    ...props
+  },
+  slots
+});
+const Switch = ({ props }) => ({
+  component: markRaw(_sfc_main$5),
+  props: {
+    ...ControlBaseProps(props),
+    ...props
+  }
+});
+const Table$1 = ({ props, slots }) => ({
+  component: markRaw(_sfc_main$4),
+  props: {
+    ...ControlBaseProps(props),
+    ...props
+  },
+  slots
+});
+const Rating = ({ props }) => ({
+  component: markRaw(_sfc_main$3),
+  props: {
+    ...ControlBaseProps(props),
+    ...props
+  }
+});
+
+const useFilterBuilder = (args) => {
+  const _search = args.load;
+  const _data = args.data;
+  const isFilterVisible = ref(true);
+  const filter = ref({});
+  const { t } = useI18n({ useScope: "global" });
+  const controls = ref([]);
+  const appliedFilter = ref({});
+  const activeFilterCount = computed(() => Object.values(appliedFilter.value).filter((item) => !!item).length);
+  const isDisabled = createUnrefFn((filterObj) => {
+    const filterKeys = Object.keys(filterObj);
+    return filterKeys.length === 0 || filterKeys.every((key) => !filterObj[key]);
+  });
+  watchPostEffect(() => {
+    createFilterControls();
+  });
+  function isItemSelected(value, field) {
+    const item = filter.value[field];
+    if (Array.isArray(item) && typeof item !== "string") {
+      return item.some((x) => x === value);
+    } else {
+      return item === value;
+    }
+  }
+  function selectFilterItem(e, value, field, multiple = true) {
+    if (multiple) {
+      filter.value[field] = e ? [...filter.value[field] || [], value] : (filter.value[field] || []).filter((x) => x !== value);
+      if (!filter.value[field].length) filter.value[field] = void 0;
+    } else {
+      filter.value[field] = e ? value : void 0;
+    }
+  }
+  function createFilterControls() {
+    if (!_data?.columns) {
+      isFilterVisible.value = false;
+      return;
+    }
+    controls.value = _data.columns.map((item) => {
+      const ctr = item.controls.reduce(
+        (obj, control) => {
+          if (control.component === "vc-checkbox") {
+            const filterData = control.data;
+            const filterDataFromScope = unref(args.scope)?.[filterData] ?? [];
+            const fields = createCheckboxFromData(filterDataFromScope, control);
+            if (fields) {
+              obj[control.field] = {
+                fields,
+                label: computed(() => t(control.label ?? "")),
+                tooltip: computed(() => t(control.tooltip ?? ""))
+              };
+            }
+          }
+          if (control.component === "vc-input") {
+            obj[control.field] = {
+              fields: {
+                [control.field]: createInput(control)
+              }
+            };
+          }
+          if (control.component === "vc-switch") {
+            const filterData = control.data;
+            const filterDataFromScope = unref(args.scope)?.[filterData] ?? [];
+            const fields = createSwitchFromData(filterDataFromScope, control);
+            if (fields) {
+              obj[control.field] = {
+                fields
+              };
+            }
+          }
+          if (control.component === "vc-select") {
+            const filterData = control.data;
+            const filterDataFromScope = unref(args.scope)?.[filterData] ?? [];
+            const fields = createSelectFromData(filterDataFromScope, control);
+            if (fields) {
+              obj[control.field] = {
+                fields
+              };
+            }
+          }
+          if (control.component === "vc-radio-button-group") {
+            const filterData = control.data;
+            const filterDataFromScope = unref(args.scope)?.[filterData] ?? [];
+            const fields = createRadioButtonGroupFromData(filterDataFromScope, control);
+            if (fields) {
+              obj[control.field] = {
+                fields,
+                label: computed(() => t(control.label ?? "")),
+                tooltip: computed(() => t(control.tooltip ?? ""))
+              };
+            }
+          }
+          return obj;
+        },
+        {}
+      );
+      return {
+        title: item.title ?? "",
+        fields: ctr
+      };
+    });
+  }
+  function createRadioButtonGroupFromData(data, control) {
+    if (!(toValue(data) && toValue(data).length)) return;
+    return toValue(data).reduce(
+      (obj, currC) => {
+        obj[currC[control.optionValue]] = {
+          ...RadioButton({
+            props: {
+              class: "tw-mb-2",
+              value: currC[control.optionValue],
+              label: currC[control.optionLabel],
+              modelValue: computed(() => filter.value[control.field]),
+              "onUpdate:modelValue": (e) => {
+                filter.value[control.field] = e;
+              }
+            }
+          })
+        };
+        return obj;
+      },
+      {}
+    );
+  }
+  function createSelectFromData(data, control) {
+    if (!(toValue(data) && toValue(data).length)) return;
+    return {
+      [control.field]: SelectField$1({
+        props: {
+          class: "tw-mb-2",
+          label: computed(() => t(control.label ?? "")),
+          tooltip: computed(() => t(control.tooltip ?? "")),
+          options: toValue(data),
+          multiple: control.multiple,
+          optionLabel: control.optionLabel,
+          optionValue: control.optionValue,
+          clearable: false,
+          modelValue: computed(() => filter.value[control.field]),
+          "onUpdate:modelValue": (e) => {
+            if (Array.isArray(e) && e.length === 0) {
+              filter.value[control.field] = void 0;
+              return;
+            }
+            filter.value[control.field] = e;
+          }
+        }
+      })
+    };
+  }
+  function createSwitchFromData(data, control) {
+    if (!(toValue(data) && toValue(data).length)) return;
+    return toValue(data).reduce(
+      (obj, currC) => {
+        obj[currC[control.optionValue]] = Switch({
+          props: {
+            class: "tw-mb-2",
+            label: toValue(currC[control.optionLabel]),
+            tooltip: computed(() => t(control.tooltip ?? "")),
+            modelValue: computed(() => isItemSelected(currC[control.optionValue], control.field)),
+            "onUpdate:modelValue": (e) => selectFilterItem(e, currC[control.optionValue], control.field, control.multiple)
+          }
+        });
+        return obj;
+      },
+      {}
+    );
+  }
+  function createCheckboxFromData(data, control) {
+    if (!(toValue(data) && toValue(data).length)) return;
+    return toValue(data).reduce(
+      (obj, currC) => {
+        obj[currC[control.optionValue]] = {
+          ...Checkbox$1({
+            props: {
+              class: "tw-mb-2",
+              modelValue: computed(() => isItemSelected(currC[control.optionValue], control.field)),
+              "onUpdate:modelValue": (e) => selectFilterItem(e, currC[control.optionValue], control.field, control.multiple)
+            },
+            slots: {
+              default: () => toValue(currC[control.optionLabel])
+            }
+          })
+        };
+        return obj;
+      },
+      {}
+    );
+  }
+  function createInput(control) {
+    return InputField$1({
+      props: {
+        type: "date",
+        class: "tw-mb-3",
+        label: toValue(computed(() => t(control.label ?? ""))),
+        tooltip: toValue(computed(() => t(control.tooltip ?? ""))),
+        modelValue: computed(() => filter.value[control.field]),
+        "onUpdate:modelValue": (e) => filter.value[control.field] = e
+      }
+    });
+  }
+  async function applyFilters(filterHandlerFn) {
+    appliedFilter.value = {
+      ...filter.value
+    };
+    filterHandlerFn();
+    await _search({
+      ...omit(unref(args.query), "skip"),
+      ...filter.value
+    });
+  }
+  async function resetFilters(filterHandlerFn) {
+    filterHandlerFn();
+    await reset();
+    await _search({
+      ...unref(args.query),
+      ...filter.value
+    });
+  }
+  function render(slotMethods) {
+    if (isEmpty(controls.value)) return;
+    return h(
+      VcContainer,
+      {
+        noPadding: true,
+        onVnodeBeforeMount: () => {
+          filter.value = { ...appliedFilter.value };
+        }
+      },
+      () => [
+        h(
+          _sfc_main$j,
+          () => Object.values(controls.value).map(({ title, fields }) => {
+            return h(_sfc_main$k, { class: "tw-px-5 tw-py-[10px]" }, () => [
+              title ? h(
+                "div",
+                { class: "tw-mb-4 tw-text-[color:var(--secondary-500)] tw-font-bold tw-text-[17px]" },
+                unref(computed(() => t(title)))
+              ) : void 0,
+              Object.values(fields)?.map((items) => {
+                return items.label ? h(
+                  _sfc_main$l,
+                  {
+                    class: "tw-mb-2"
+                  },
+                  {
+                    default: () => items.label,
+                    tooltip: items.tooltip ? () => items.tooltip : void 0
+                  }
+                ) : void 0;
+              }),
+              Object.values(fields)?.map((items) => {
+                return Object.values(items.fields).map((item) => {
+                  if ("component" in item && item.component) {
+                    return [
+                      h(
+                        item.component,
+                        { ...item.props, class: item.props.class },
+                        "slots" in item && item.slots ? { ...item.slots } : {}
+                      )
+                    ];
+                  } else {
+                    return item;
+                  }
+                });
+              })
+            ]);
+          })
+        ),
+        h(
+          _sfc_main$j,
+          () => h(
+            _sfc_main$k,
+            {
+              class: "tw-px-5 tw-py-[10px] !tw-flex-auto tw-border-t tw-border-solid tw-border-[var(--neutrals-200)]"
+            },
+            () => h("div", { class: "tw-flex tw-justify-start" }, [
+              h(
+                _sfc_main$c,
+                {
+                  class: "tw-mr-4",
+                  small: true,
+                  disabled: isDisabled(filter),
+                  onClick: () => applyFilters(slotMethods.close)
+                },
+                () => t("COMPONENTS.FILTERS.APPLY")
+              ),
+              h(
+                _sfc_main$c,
+                {
+                  outline: true,
+                  small: true,
+                  disabled: isDisabled(appliedFilter),
+                  onClick: () => resetFilters(slotMethods.close)
+                },
+                () => t("COMPONENTS.FILTERS.RESET")
+              )
+            ])
+          )
+        )
+      ]
+    );
+  }
+  async function reset() {
+    Object.keys(filter.value).forEach((key) => filter.value[key] = void 0);
+    appliedFilter.value = {};
+  }
+  return {
+    filterComponent: render,
+    activeFilterCount,
+    filter: readonly(toReactive(filter)),
+    isFilterVisible: computed(() => isFilterVisible.value),
+    reset
+  };
+};
+
+const useTableTemplates = (tableSchema) => {
+  const tableTemplates = reactive({
+    templateOverrideComponents: templateOverrideComponents(),
+    mobileView: resolveTemplateComponent("mobileTemplate"),
+    notFound: resolveTemplateComponent("notFoundTemplate"),
+    empty: resolveTemplateComponent("emptyTemplate"),
+    footer: resolveTemplateComponent("footerTemplate"),
+    header: resolveTemplateComponent("headerTemplate")
+  });
+  function resolveTemplateComponent(name) {
+    if (!toValue(tableSchema)) return;
+    const value = toValue(tableSchema)?.[name];
+    if (value && typeof value === "object" && "component" in value) {
+      const componentName = value.component;
+      if (componentName) {
+        const component = resolveComponent(componentName);
+        if (component && typeof component !== "string") return shallowRef(component);
+      }
+    }
+  }
+  function templateOverrideComponents() {
+    return {
+      ...toValue(tableSchema)?.columns?.reduce(
+        (acc, curr) => {
+          if ("customTemplate" in curr && curr.customTemplate) {
+            if (!("component" in curr.customTemplate)) {
+              throw new Error(
+                `Component name must be provided in 'customTemplate' property, column: ${JSON.stringify(curr)}`
+              );
+            } else if ("component" in curr.customTemplate && curr.customTemplate.component) {
+              const component = resolveComponent(curr.customTemplate.component);
+              if (typeof component !== "string") {
+                acc[curr.id] = shallowRef(component);
+              }
+            }
+          }
+          return acc;
+        },
+        {}
+      )
+    };
+  }
+  return {
+    tableTemplates
+  };
+};
+
+const useToolbarReducer = (args) => {
+  if (!args) return;
+  const { t } = useI18n({ useScope: "global" });
+  const toolbarMethodsMerge = merge(
+    ref({}),
+    ref(args.defaultToolbarBindings),
+    ref(toValue$1(args.customToolbarConfig))
+  );
+  return computed(() => {
+    if (args.defaultToolbarSchema?.length !== 0) {
+      return args.defaultToolbarSchema?.reduce((acc, curr) => {
+        const toolbarItemCtx = toolbarMethodsMerge.value[curr.method];
+        if (toolbarItemCtx && Array.isArray(toolbarItemCtx)) {
+          return acc.concat(
+            toolbarItemCtx.map((item) => {
+              return {
+                ...curr,
+                ...item,
+                title: t(curr.title || unref(item.title ?? ""))
+              };
+            })
+          );
+        }
+        if (toolbarItemCtx && typeof toolbarItemCtx === "object") {
+          const context = typeof toolbarItemCtx === "function" ? {
+            clickHandler: async () => await toolbarItemCtx(args.context)
+          } : {
+            ...toolbarItemCtx,
+            clickHandler() {
+              return toolbarItemCtx.clickHandler?.call(null, args.context);
+            }
+          };
+          acc.push({
+            ...curr,
+            ...context,
+            icon: curr.icon || toolbarItemCtx.icon,
+            title: t(curr.title || unref(toolbarItemCtx.title ?? ""))
+          });
+        }
+        return acc;
+      }, []);
+    }
+    return [];
+  });
+};
+
+const index = () => {
+  const instance = getCurrentInstance();
+  function getBladeExposedData() {
+    const reactiveBlade = ref(null);
+    const blade = ref(instance?.vnode);
+    let unwatch = null;
+    const updateReactiveBlade = () => {
+      if (blade.value && blade.value.props?.navigation?.instance) {
+        reactiveBlade.value = blade.value.props.navigation.instance;
+      }
+    };
+    unwatch = watch(blade, updateReactiveBlade, { immediate: true, deep: true });
+    onMounted(() => {
+      updateReactiveBlade();
+    });
+    onUnmounted(() => {
+      if (unwatch) {
+        unwatch();
+      }
+    });
+    return reactiveBlade;
+  }
+  return {
+    getBladeExposedData
+  };
+};
+
+function safeIn(key, obj) {
+  return key in obj;
+}
+
+const _hoisted_1$1 = {
+  key: 0,
+  class: "tw-p-4"
+};
+const _hoisted_2$1 = {
+  key: 1,
+  class: "tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center"
+};
+const _hoisted_3$1 = { class: "tw-m-4 tw-text-xl tw-font-medium" };
+const _hoisted_4$1 = {
+  key: 1,
+  class: "tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center"
+};
+const _hoisted_5 = { class: "tw-m-4 tw-text-xl tw-font-medium" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "dynamic-blade-list",
+  props: {
+    expanded: { type: Boolean, default: true },
+    closable: { type: Boolean, default: true },
+    param: { default: void 0 },
+    options: {},
+    model: {},
+    composables: {},
+    mixinFn: {}
+  },
+  emits: ["parent:call", "close:blade", "collapse:blade", "expand:blade", "close:children"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const { t } = useI18n({ useScope: "global" });
+    const { showConfirmation } = usePopup();
+    const { debounce } = useFunctions();
+    const widgetService = useWidgets();
+    const emit = __emit;
+    const settings = computed(() => props.model?.settings);
+    const localizationPrefix = computed(() => settings.value?.localizationPrefix.trim().toUpperCase());
+    const title = computed(() => t(settings.value?.titleTemplate));
+    const allSelected = ref(false);
+    const searchValue = ref();
+    const selectedItemId = shallowRef();
+    const sort = shallowRef();
+    const selectedIds = shallowRef([]);
+    const itemsProxy = ref();
+    const isMixinReady = ref(false);
+    inject(BladeInstance);
+    const { setNavigationQuery, getNavigationQuery } = useBladeNavigation();
+    const tableData = props.composables && computed(() => props.model?.content.find((type) => type.component === "vc-table"));
+    const tableColsWithLocales = tableData?.value?.columns?.map((col) => ({
+      ...col,
+      title: computed(() => t(col.title))
+    }));
+    const stateKey = props.composables && computed(() => {
+      if (tableData?.value?.id) {
+        return tableData.value?.id;
+      }
+      throw new Error('Table id is not defined. Please provide "id" property in table schema');
+    });
+    if (typeof props.composables?.[props.model?.settings?.composable ?? ""] === "undefined") {
+      throw new Error(`Composable ( ${props.model?.settings?.composable} ) is not defined`);
+    }
+    let { load, remove, items, loading, pagination, query, scope } = props.composables ? props.composables?.[props.model?.settings?.composable ?? ""]({
+      emit,
+      props,
+      mounted: useMounted()
+    }) : {
+      load: ref(true),
+      remove: void 0,
+      items: void 0,
+      loading: void 0,
+      pagination: void 0,
+      query: void 0,
+      scope: void 0
+    };
+    if (props.mixinFn?.length) {
+      const mixinResults = props.mixinFn?.map((mixin) => mixin({ loading, items, scope, load, remove, query }));
+      const mergedResults = mixinResults.reduce((acc, result) => {
+        return {
+          ...acc,
+          ...result
+        };
+      }, {});
+      loading = mergedResults.loading ?? loading;
+      items = mergedResults.items ?? items;
+      scope = mergedResults.scope ?? scope;
+      load = mergedResults.load ?? load;
+      remove = mergedResults.remove ?? remove;
+      query = mergedResults.query ?? query;
+      isMixinReady.value = true;
+    } else {
+      isMixinReady.value = true;
+    }
+    const isBladeEditable = computed(
+      () => "disabled" in toValue(scope || {}) ? !toValue(toValue(scope || {})?.disabled) : false
+    );
+    const selection = computed(() => {
+      const tableConfig2 = toValue(scope)?.tableConfigComputed;
+      if (tableConfig2 && "selectedIds" in tableConfig2) {
+        return items.value?.filter((item) => tableConfig2.selectedIds?.includes(item.id)) || [];
+      }
+      return [];
+    });
+    sort.value = query.value.sort ?? "createdDate:DESC";
+    const unreffedScope = reactiveComputed(() => toValue(scope) ?? {});
+    const filterDisable = computed(() => {
+      if (tableData?.value?.filter?.disabled?.method) {
+        const disableFilterMethod = toValue(unreffedScope)?.[tableData?.value?.filter?.disabled.method];
+        if (disableFilterMethod && typeof disableFilterMethod === "function") {
+          return disableFilterMethod();
+        } else {
+          return toValue(disableFilterMethod);
+        }
+      }
+      return false;
+    });
+    const { tableTemplates } = useTableTemplates(tableData);
+    const calculateColumns = (columns) => {
+      const result = columns?.map((column) => {
+        if (typeof column.visible !== "boolean" && column.visible?.method) {
+          const result2 = typeof scope?.value[column.visible?.method] === "function" ? scope?.value[column.visible?.method]() : scope?.value[column.visible?.method];
+          column.visible = result2;
+        }
+        return column;
+      });
+      return result;
+    };
+    const table = props.composables && computed(() => {
+      const tableScope = {
+        columns: calculateColumns(tableData?.value?.columns)
+      };
+      return tableScope;
+    });
+    const bladeOptions = reactive({
+      tableData,
+      table
+    });
+    const {
+      filterComponent,
+      activeFilterCount,
+      isFilterVisible,
+      reset: resetFilters,
+      filter
+    } = useFilterBuilder({
+      data: bladeOptions.tableData?.filter,
+      query,
+      load,
+      scope
+    });
+    const bladeContext = ref({
+      load,
+      remove,
+      items: computed(() => itemsProxy.value ?? []),
+      loading,
+      pagination,
+      query,
+      scope,
+      selectedIds: computed(() => selectedIds.value),
+      settings
+    });
+    const toolbarComputed = (props.composables && useToolbarReducer({
+      defaultToolbarSchema: settings.value?.toolbar ?? [],
+      defaultToolbarBindings: {
+        openAddBlade: {
+          async clickHandler() {
+            if (scope && "openDetailsBlade" in toValue(unreffedScope) && toValue(unreffedScope).openDetailsBlade && typeof toValue(unreffedScope).openDetailsBlade === "function") {
+              toValue(unreffedScope).openDetailsBlade?.();
+            } else throw new Error("openDetailsBlade method is not defined in scope");
+          }
+        },
+        refresh: {
+          async clickHandler() {
+            await reload();
+          }
+        },
+        removeItems: {
+          async clickHandler() {
+            await removeItems();
+          },
+          disabled: computed(() => !selectedIds.value?.length)
+          // isVisible: computed(() => isDesktop.value),
+        }
+      },
+      customToolbarConfig: toValue(unreffedScope)?.toolbarOverrides,
+      context: bladeContext.value
+    })) ?? [];
+    onBeforeMount(async () => {
+      if (props.composables && isMixinReady.value)
+        await load({
+          sort: sort.value,
+          ...query.value,
+          ...getNavigationQuery()
+        });
+    });
+    watch(
+      () => toValue(toValue(scope)?.tableConfigComputed)?.searchValue,
+      (newVal) => {
+        searchValue.value = newVal;
+      },
+      {
+        immediate: true
+      }
+    );
+    watch(
+      () => props.param,
+      async (newVal) => {
+        selectedItemId.value = unref(newVal);
+      },
+      { immediate: true }
+    );
+    watch(sort, async (value) => {
+      await load({ ...query.value, sort: value });
+    });
+    watch(items, (newVal) => {
+      itemsProxy.value = newVal;
+    });
+    const onEditComplete = (data) => {
+      const item = itemsProxy.value?.[data.index];
+      if (item) {
+        item[data.event.field] = data.event.value;
+      }
+    };
+    const onCellBlur = async (data) => {
+      const column = tableData?.value?.columns?.find((col) => col.id === data.field);
+      if (column && column.onCellBlur && column.onCellBlur.method) {
+        if (scope && toValue(unreffedScope)?.[column.onCellBlur.method] && typeof toValue(unreffedScope)[column.onCellBlur.method] === "function") {
+          await toValue(unreffedScope)[column.onCellBlur.method](data);
+        }
+      }
+    };
+    const openDetailsBlade = async () => {
+      if (scope && "openDetailsBlade" in toValue(unreffedScope) && toValue(unreffedScope).openDetailsBlade && typeof toValue(unreffedScope).openDetailsBlade === "function") {
+        await toValue(unreffedScope).openDetailsBlade?.();
+      }
+    };
+    const onItemClick = (item) => {
+      if (scope && safeIn("onListItemClick", toValue(unreffedScope)) && typeof toValue(unreffedScope).onListItemClick === "function") {
+        toValue(unreffedScope).onListItemClick?.({
+          item,
+          onOpen() {
+            selectedItemId.value = item.id;
+          },
+          onClose() {
+            selectedItemId.value = void 0;
+          }
+        });
+      } else if (scope && safeIn("openDetailsBlade", toValue(unreffedScope)) && typeof toValue(unreffedScope).openDetailsBlade === "function") {
+        toValue(unreffedScope).openDetailsBlade?.({
+          param: item.id,
+          onOpen() {
+            selectedItemId.value = item.id;
+          },
+          onClose() {
+            selectedItemId.value = void 0;
+          }
+        });
+      }
+    };
+    const onSelectionChanged = (i) => {
+      const item = unref(i).map((item2) => item2.id).filter((x) => x !== null);
+      selectedIds.value = item;
+    };
+    async function removeItems() {
+      if (await showConfirmation(
+        t(
+          `${settings.value?.localizationPrefix.trim().toUpperCase()}.PAGES.ALERTS.DELETE_SELECTED_CONFIRMATION.MESSAGE`,
+          {
+            count: allSelected.value ? t(
+              `${settings.value?.localizationPrefix.trim().toUpperCase()}.PAGES.ALERTS.DELETE_SELECTED_CONFIRMATION.ALL`,
+              {
+                totalCount: pagination.value.totalCount
+              }
+            ) : selectedIds.value.length
+          }
+        )
+      )) {
+        emit("close:children");
+        if (remove) await remove({ allSelected: allSelected.value, ids: selectedIds.value });
+        if (query.value.skip && query.value.take) {
+          if (query.value.skip >= query.value.take) {
+            if (allSelected.value) {
+              query.value.skip = 0;
+            } else {
+              query.value.skip -= query.value.take;
+            }
+          }
+        }
+        widgetService.updateActiveWidget();
+        await reload();
+      }
+    }
+    const reload = async () => {
+      selectedIds.value = [];
+      if (query.value.take) {
+        await load({
+          ...query.value,
+          skip: (pagination.value.currentPage - 1) * query.value.take,
+          sort: sort.value
+        });
+      }
+    };
+    const onPaginationClick = async (page) => {
+      if (query.value.take) {
+        if (scope && safeIn("onPaginationClick", toValue(unreffedScope)) && typeof toValue(unreffedScope).onPaginationClick === "function") {
+          toValue(unreffedScope).onPaginationClick?.({
+            ...query.value,
+            skip: (page - 1) * query.value.take
+          });
+          return;
+        }
+        const queryObj = {
+          ...query.value,
+          skip: (page - 1) * query.value.take
+        };
+        setNavigationQuery(queryObj);
+        await load(queryObj);
+      }
+    };
+    const onHeaderClick = (item) => {
+      const sortOptions = ["DESC", "ASC", ""];
+      if (item.sortable) {
+        if (sort.value.split(":")[0] === item.id) {
+          const index = sortOptions.findIndex((x) => {
+            const sorting = sort.value.split(":")[1];
+            if (sorting) {
+              return x === sorting;
+            } else {
+              return x === "";
+            }
+          });
+          if (index !== -1) {
+            const newSort = sortOptions[(index + 1) % sortOptions.length];
+            if (newSort === "") {
+              sort.value = `${item.id}`;
+            } else {
+              sort.value = `${item.id}:${newSort}`;
+            }
+          }
+        } else {
+          sort.value = `${item.id}:${sortOptions[0]}`;
+        }
+      }
+    };
+    const onSearchList = debounce(async (keyword) => {
+      searchValue.value = keyword;
+      await load({
+        ...query.value,
+        keyword
+      });
+    }, 1e3);
+    async function resetSearch() {
+      searchValue.value = "";
+      await resetFilters();
+      await load({
+        ...query.value,
+        ...filter,
+        keyword: ""
+      });
+    }
+    function sortRows(event) {
+      if (event.dragIndex !== event.dropIndex) {
+        const sorted = event.value.map((item, index) => {
+          item.sortOrder = index;
+          return item;
+        });
+        itemsProxy.value = sorted;
+      }
+    }
+    async function handleSelectAllItems(all) {
+      allSelected.value = all;
+    }
+    function disabledActionHandler(disabled, item) {
+      if (!disabled) return false;
+      if (typeof disabled === "boolean") return disabled;
+      else if (disabled.method && typeof toValue(unreffedScope)?.[disabled.method] === "function")
+        return toValue(unreffedScope)?.[disabled.method]({ item });
+      else if (disabled.method && toValue(unreffedScope)?.[disabled.method])
+        return toValue(unreffedScope)?.[disabled.method];
+      return false;
+    }
+    function actionBuilder(item) {
+      const result = tableData?.value?.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,
+            clickHandler: async (itemVal) => {
+              try {
+                if (isRef(toolbarComputed) && toolbarComputed.value && toolbarComputed.value.length > 0) {
+                  const toolbarItem = toolbarComputed.value.find(
+                    (x) => ("method" in x && x.method === action.method) ?? false
+                  );
+                  selectedIds.value = [itemVal.id];
+                  if (toolbarItem) {
+                    await toolbarItem.clickHandler?.();
+                  } else {
+                    await toValue(unreffedScope)?.[action.method]?.(itemVal);
+                    selectedIds.value = [];
+                  }
+                }
+              } catch (error) {
+                throw new Error(`Method ${action.method} is not defined in scope or toolbarOverrides`);
+              }
+            }
+          });
+        }
+        return arr;
+      }, []);
+      return result;
+    }
+    const tableConfig = computed(() => {
+      return {
+        loading: loading.value,
+        columns: tableColsWithLocales ?? [],
+        stateKey: stateKey?.value ?? "",
+        items: itemsProxy.value ?? [],
+        multiselect: tableData?.value?.multiselect,
+        header: tableData?.value?.header,
+        itemActionBuilder: actionBuilder,
+        editing: isBladeEditable.value,
+        enableItemActions: !!tableData?.value?.actions,
+        footer: tableData?.value?.footer,
+        sort: sort.value,
+        pages: pagination.value?.pages,
+        currentPage: pagination.value?.currentPage,
+        searchValue: searchValue.value,
+        selectedItemId: selectedItemId.value,
+        totalCount: pagination.value?.totalCount,
+        reorderableRows: tableData?.value?.reorderableRows,
+        pullToReload: true,
+        selectAll: tableData?.value?.selectAll,
+        paginationVariant: tableData?.value?.paginationVariant,
+        selectionItems: selection.value,
+        onItemClick,
+        onPaginationClick,
+        onSelectionChanged,
+        onHeaderClick,
+        "onScroll:ptr": reload,
+        "onSearch:change": onSearchList,
+        "onRow:reorder": sortRows,
+        "onSelect:all": handleSelectAllItems,
+        onEditComplete,
+        onCellBlur,
+        noHeaderCheckbox: tableData?.value?.noHeaderCheckbox
+      };
+    });
+    const tableConfigComputed = computed(() => {
+      if (scope && "tableConfig" in toValue(scope) && typeof toValue(scope)?.tableConfig === "function") {
+        const initialTableConfig = toReactive(tableConfig.value);
+        const scopeTableConfig = toValue(scope)?.tableConfig?.(initialTableConfig);
+        const res = {
+          ...initialTableConfig,
+          ...scopeTableConfig
+        };
+        if (scopeTableConfig?.columns?.length) {
+          res.columns = scopeTableConfig.columns;
+        }
+        return res;
+      }
+      return tableConfig.value;
+    });
+    provide("bladeContext", toReactive(bladeContext));
+    provide("isBladeEditable", isBladeEditable);
+    __expose({
+      reload,
+      title,
+      // updateActiveWidgetCount,
+      ...toRefs(toValue(unreffedScope) ?? {}),
+      selectedIds,
+      settings: toValue(settings)
+    });
+    return (_ctx, _cache) => {
+      const _component_VcBreadcrumbs = resolveComponent("VcBreadcrumbs");
+      const _component_VcButton = resolveComponent("VcButton");
+      const _component_VcTable = resolveComponent("VcTable");
+      const _component_VcBlade = resolveComponent("VcBlade");
+      return !_ctx.composables ? (openBlock(), createBlock(_component_VcBlade, {
+        key: 0,
+        expanded: _ctx.expanded,
+        closable: _ctx.closable,
+        width: settings.value?.width || "50%",
+        "toolbar-items": unref(toolbarComputed),
+        title: title.value,
+        modified: unref(unreffedScope)?.modified,
+        onClose: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close:blade")),
+        onExpand: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("expand:blade")),
+        onCollapse: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("collapse:blade"))
+      }, {
+        default: withCtx(() => [
+          toValue(unref(scope)?.breadcrumbs)?.length ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
+            createVNode(_component_VcBreadcrumbs, {
+              items: toValue(unref(scope)?.breadcrumbs),
+              variant: "light",
+              separated: ""
+            }, null, 8, ["items"])
+          ])) : createCommentVNode("", true),
+          createVNode(_component_VcTable, mergeProps({ class: "tw-grow tw-basis-0" }, tableConfigComputed.value, {
+            expanded: _ctx.expanded,
+            "total-label": _ctx.$t(`${localizationPrefix.value}.PAGES.LIST.TABLE.TOTALS`),
+            "active-filter-count": unref(activeFilterCount),
+            "disable-filter": filterDisable.value
+          }), createSlots({
+            notfound: withCtx(() => [
+              unref(tableTemplates)?.notFound ? (openBlock(), createBlock(resolveDynamicComponent(unref(tableTemplates).notFound), {
+                key: 0,
+                context: bladeContext.value,
+                onReset: resetSearch
+              }, null, 40, ["context"])) : (openBlock(), createElementBlock("div", _hoisted_2$1, [
+                createElementVNode("div", _hoisted_3$1, toDisplayString(_ctx.$t(`${localizationPrefix.value}.PAGES.LIST.NOT_FOUND.EMPTY`)), 1),
+                unref(isFilterVisible) ? (openBlock(), createBlock(_component_VcButton, {
+                  key: 0,
+                  onClick: resetSearch
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(_ctx.$t(`${localizationPrefix.value}.PAGES.LIST.NOT_FOUND.RESET`)), 1)
+                  ]),
+                  _: 1
+                })) : createCommentVNode("", true)
+              ]))
+            ]),
+            empty: withCtx(() => [
+              unref(tableTemplates)?.empty ? (openBlock(), createBlock(resolveDynamicComponent(unref(tableTemplates).empty), {
+                key: 0,
+                context: bladeContext.value,
+                onAdd: openDetailsBlade
+              }, null, 40, ["context"])) : (openBlock(), createElementBlock("div", _hoisted_4$1, [
+                createElementVNode("div", _hoisted_5, toDisplayString(_ctx.$t(`${localizationPrefix.value}.PAGES.LIST.EMPTY.NO_ITEMS`)), 1)
+              ]))
+            ]),
+            _: 2
+          }, [
+            unref(isFilterVisible) && bladeOptions.tableData?.filter ? {
+              name: "filters",
+              fn: withCtx(({ closePanel }) => [
+                createVNode(unref(filterComponent), { close: closePanel }, null, 8, ["close"])
+              ]),
+              key: "0"
+            } : void 0,
+            renderList(unref(tableTemplates)?.templateOverrideComponents, (component, key, index) => {
+              return {
+                name: `item_${key}`,
+                fn: withCtx((itemData) => [
+                  (openBlock(), createBlock(resolveDynamicComponent(component), {
+                    context: itemData,
+                    "blade-context": bladeContext.value
+                  }, null, 8, ["context", "blade-context"]))
+                ])
+              };
+            }),
+            unref(tableTemplates)?.header ? {
+              name: "header",
+              fn: withCtx((headerData) => [
+                (openBlock(), createBlock(resolveDynamicComponent(unref(tableTemplates).header), {
+                  context: headerData,
+                  "blade-context": bladeContext.value
+                }, null, 8, ["context", "blade-context"]))
+              ]),
+              key: "1"
+            } : void 0,
+            unref(tableTemplates)?.footer ? {
+              name: "footer",
+              fn: withCtx((footerData) => [
+                (openBlock(), createBlock(resolveDynamicComponent(unref(tableTemplates).footer), {
+                  context: footerData,
+                  "blade-context": bladeContext.value
+                }, null, 8, ["context", "blade-context"]))
+              ]),
+              key: "2"
+            } : void 0,
+            unref(tableTemplates)?.mobileView ? {
+              name: "mobile-item",
+              fn: withCtx((itemData) => [
+                (openBlock(), createBlock(resolveDynamicComponent(unref(tableTemplates).mobileView), {
+                  context: itemData,
+                  "blade-context": bladeContext.value
+                }, null, 8, ["context", "blade-context"]))
+              ]),
+              key: "3"
+            } : void 0
+          ]), 1040, ["expanded", "total-label", "active-filter-count", "disable-filter"])
+        ]),
+        _: 1
+      }, 8, ["expanded", "closable", "width", "toolbar-items", "title", "modified"])) : createCommentVNode("", true);
+    };
+  }
+});
+
+const componentProps = {
+  baseProps: {
+    type: Object,
+    default: () => ({})
+  },
+  element: {
+    type: Object,
+    default: () => ({})
+  },
+  bladeContext: {
+    type: Object,
+    default: () => ({})
+  },
+  fields: {
+    type: Object,
+    default: () => ({})
+  },
+  formData: {
+    type: Object,
+    default: () => ({})
+  },
+  fieldContext: {
+    type: Object
+  },
+  currentLocale: {
+    type: String
+  },
+  elIndex: {
+    type: Number
+  },
+  rows: {
+    type: Number
+  }
+};
+
+const validationFieldProps = {
+  props: Object,
+  index: Number,
+  rows: Number
+};
+const ValidationField = defineComponent({
+  name: "ValidationField",
+  props: validationFieldProps,
+  setup(props) {
+    const slots = useSlots();
+    const fieldKey = computed(
+      () => unref(props.props)?.multilanguage ? `${String(props.props?.key)}_${unref(props.props?.currentLanguage)}` : String(props.props?.key)
+    );
+    const fieldNameLang = reactify((name) => {
+      return props.props?.multilanguage ? name + "_" + props.props.currentLanguage : name;
+    });
+    return () => h(
+      Field,
+      {
+        rules: props.props?.rules,
+        modelValue: props.props?.modelValue,
+        label: props.props?.label,
+        key: fieldKey.value,
+        name: fieldNameLang(
+          (props.rows ?? 1) > 1 && (props.index ?? 0) >= 0 ? props.props?.name + "_" + props.index : props.props?.name
+        ).value
+      },
+      {
+        default: ({ errorMessage, errors }) => {
+          return slots.default?.().map(
+            (slot) => h(slot, {
+              ...props.props,
+              error: !!errors.length,
+              errorMessage,
+              key: fieldKey.value + "_control"
+            })
+          );
+        }
+      }
+    );
+  }
+});
+
+function unrefNested(field) {
+  const unreffedProps = {};
+  if (field) {
+    Object.keys(field).forEach((key) => {
+      unreffedProps[key] = unref(field[key]);
+    });
+    return unreffedProps;
+  }
+  return field;
+}
+
+const SelectField = {
+  name: "SelectField",
+  props: componentProps,
+  setup(props) {
+    return () => {
+      const field = SelectField$1({
+        props: Object.assign(
+          {},
+          {
+            optionValue: props.element.optionValue,
+            optionLabel: props.element.optionLabel,
+            emitValue: props.element.emitValue,
+            mapOptions: props.element.mapOptions,
+            options: props.bladeContext.scope?.[props.element.optionsMethod],
+            currentLanguage: props.currentLocale,
+            clearable: props.element.clearable || false,
+            searchable: props.element.searchable || false,
+            multiple: props.element.multiple || false
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? ""
+          }
+        ),
+        slots: props.element.customTemplate && ["selected-item", "option"].reduce(
+          (obj, slot) => {
+            obj[slot] = (scope) => h(resolveComponent(props.element.customTemplate?.component), {
+              context: scope,
+              slotName: slot
+            });
+            return obj;
+          },
+          {}
+        )
+      });
+      const render = h(field.component, field.props, field.slots);
+      if (field.props.rules) {
+        return h(
+          ValidationField,
+          {
+            props: field.props,
+            index: props.elIndex,
+            rows: props.rows,
+            key: `${String(field.props.key)}_validation`
+          },
+          () => render
+        );
+      } else {
+        return render;
+      }
+    };
+  }
+};
+
+const Card = {
+  name: "CardEl",
+  props: componentProps,
+  setup(props) {
+    const hasNoComment = ref(true);
+    onMounted(() => {
+      hasNoComment.value = hasNoCommentNodes(toValue(props.fields));
+    });
+    onUpdated(() => {
+      hasNoComment.value = hasNoCommentNodes(toValue(props.fields));
+    });
+    const hasNoCommentNodes = (components) => {
+      const vnodeIterable = Array.isArray(components) ? components : [components];
+      const commentCounter = ref(0);
+      for (const component of vnodeIterable) {
+        if (Array.isArray(component) && component.length > 0) {
+          if (!hasNoCommentNodes(component)) {
+            commentCounter.value++;
+            break;
+          }
+        } else if (component && typeof component === "object" && !Array.isArray(component)) {
+          if (Array.isArray(component.children) && component.children.length > 0) {
+            if (!hasNoCommentNodes(component.children)) {
+              commentCounter.value++;
+              break;
+            }
+          }
+          if (component.el && component.el.nodeType === Node.COMMENT_NODE) {
+            commentCounter.value++;
+            break;
+          }
+        }
+      }
+      return commentCounter.value !== vnodeIterable.length;
+    };
+    return () => {
+      const field = CardCollection({
+        props: Object.assign(
+          {},
+          {
+            variant: props.element.variant,
+            header: toValue(props.baseProps.label),
+            isCollapsable: props.element.collapsible,
+            isCollapsed: restoreCollapsed(props.element.id) || props.element.collapsed,
+            "onState:collapsed": (e) => handleCollapsed(props.element.id, e)
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? ""
+          }
+        ),
+        slots: {
+          default: () => h(
+            "div",
+            {
+              class: {
+                "tw-flex": true,
+                "tw-flex-col": true,
+                "tw-p-4": !props.element.removePadding,
+                "tw-gap-4": true
+              }
+            },
+            toValue(props.fields)
+          ),
+          actions: () => {
+            if (props.element.action) {
+              const elem = nodeBuilder({
+                controlSchema: props.element.action,
+                parentId: `${props.element.id}`,
+                internalContext: props.fieldContext ?? {},
+                bladeContext: props.bladeContext,
+                currentLocale: props.currentLocale ?? "en",
+                formData: props.formData
+              });
+              return elem;
+            }
+          }
+        }
+      });
+      function handleCollapsed(key, value) {
+        localStorage?.setItem(key, `${value}`);
+      }
+      function restoreCollapsed(key) {
+        return localStorage?.getItem(key) === "true";
+      }
+      return hasNoComment.value ? h(field.component, field.props, field.slots) : null;
+    };
+  }
+};
+
+const methodHandler = (visibility, fieldContext, schema) => {
+  if (visibility === void 0) {
+    return true;
+  }
+  if (typeof visibility === "function") {
+    return visibility(schema, fieldContext);
+  }
+  return toValue(visibility);
+};
+
+const slotsMap = {
+  append: "append",
+  prepend: "prepend",
+  appendInner: "append-inner",
+  prependInner: "prepend-inner"
+};
+const InputField = {
+  name: "InputField",
+  props: componentProps,
+  setup(props) {
+    return () => {
+      const field = InputField$1({
+        props: Object.assign(
+          {},
+          {
+            type: props.element.variant,
+            currentLanguage: props.currentLocale,
+            clearable: props.element.clearable || false,
+            maxlength: props.element.maxlength,
+            datePickerOptions: props.element.datePickerOptions,
+            loading: props.element.loading?.method ? methodHandler(
+              toValue(props.bladeContext?.scope)?.[props.element.loading?.method],
+              props.fieldContext,
+              props.element
+            ) : false
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? ""
+          }
+        ),
+        slots: Object.entries(slotsMap).reduce(
+          (acc, [key, value]) => {
+            if (props.element[key]) {
+              acc[value] = () => nodeBuilder({
+                controlSchema: props.element[key],
+                parentId: `${props.element[key].id}`,
+                internalContext: props.fieldContext ?? {},
+                bladeContext: props.bladeContext,
+                currentLocale: props.currentLocale ?? "en-US",
+                formData: props.formData
+              });
+            }
+            return acc;
+          },
+          {}
+        )
+      });
+      const render = h(field.component, field.props, field.slots);
+      if (field.props.rules) {
+        return h(
+          ValidationField,
+          {
+            props: field.props,
+            index: props.elIndex,
+            rows: props.rows,
+            key: `${String(field.props.key)}_validation`
+          },
+          () => render
+        );
+      } else {
+        return render;
+      }
+    };
+  }
+};
+
+const Fieldset = {
+  name: "Fieldset",
+  props: componentProps,
+  setup(props) {
+    const { fields: fieldsetFields } = toRefs(props);
+    return () => toValue(fieldsetFields.value)?.map((fields, index, arr) => {
+      const divideByCols = chunk(fields, props.element.columns || 1) ?? [];
+      return h(
+        "div",
+        {
+          class: `tw-flex tw-row tw-relative ${unrefNested(props.baseProps).classNames ?? ""}`,
+          key: `fieldset-${index}`
+        },
+        [
+          h("div", { class: "tw-flex-1 tw-gap-4 tw-flex tw-flex-col tw-min-w-0" }, [
+            divideByCols.map((itemsArr, colIndex) => {
+              return h(
+                _sfc_main$j,
+                {
+                  key: `col-${colIndex}-${index}`,
+                  class: {
+                    "tw-relative": true,
+                    "tw-gap-4": true,
+                    "!tw-flex-wrap": true,
+                    "!tw-flex !tw-flex-row": !!props.element.aspectRatio
+                  }
+                },
+                () => [
+                  ...itemsArr.map((item, itemIndex) => {
+                    return h(
+                      _sfc_main$k,
+                      {
+                        key: `col-${itemIndex}-${colIndex}-${index}`,
+                        size: "aspectRatio" in props.element ? props.element.aspectRatio?.[itemIndex] : 1
+                      },
+                      () => {
+                        if (typeof item === "object") {
+                          return h(item, {
+                            elIndex: index,
+                            rows: arr.length,
+                            key: `item-${itemIndex}-${colIndex}-${index}`
+                          });
+                        }
+                      }
+                    );
+                  })
+                ]
+              );
+            })
+          ])
+        ]
+      );
+    });
+  }
+};
+
+const getModel = (property, context) => {
+  if (property && context) {
+    if (typeof context[property] === "function") {
+      return context[property]();
+    }
+    return get(context, property);
+  }
+  return null;
+};
+
+function setModel(args) {
+  const { property, value, option, context, scope } = args;
+  if (scope && has(scope, property)) {
+    if (typeof scope[property] === "function") {
+      scope[property](value);
+    } else {
+      set(scope, property, value);
+    }
+    return;
+  }
+  set(context, property, option ? value[option] : value);
+}
+
+const InputCurrency = {
+  name: "InputCurrency",
+  props: componentProps,
+  setup(props) {
+    return () => {
+      const options = (safeIn("options", props.element) && props.element.options && (toValue$1(getModel(props.element.options, props.fieldContext ?? {})) || toValue$1(unref(props.bladeContext.scope)?.[props.element.options]))) ?? void 0;
+      const contextProperty = safeIn("optionProperty", props.element) && props.element.optionProperty && getModel(props.element.optionProperty, props.fieldContext ?? {});
+      const scopedProperty = safeIn("optionProperty", props.element) && props.element.optionProperty && props.bladeContext.scope && getModel(props.element.optionProperty, props.bladeContext.scope);
+      const field = InputCurrency$1({
+        props: Object.assign(
+          {},
+          {
+            precision: props.element.precision,
+            option: toValue$1(scopedProperty ?? contextProperty),
+            currencyDisplay: props.element.currencyDisplay,
+            optionLabel: props.element.optionLabel,
+            optionValue: props.element.optionValue,
+            options,
+            "onUpdate:option": (e) => {
+              setModel({
+                value: e,
+                property: props.element.optionProperty,
+                context: props.fieldContext ?? {},
+                scope: props.bladeContext.scope
+              });
+            },
+            clearable: props.element.clearable || false
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? ""
+          }
+        )
+      });
+      const render = h(field.component, field.props);
+      if (field.props.rules) {
+        return h(
+          ValidationField,
+          {
+            props: field.props,
+            index: props.elIndex,
+            rows: props.rows,
+            key: `${String(field.props.key)}_validation`
+          },
+          () => render
+        );
+      } else {
+        return render;
+      }
+    };
+  }
+};
+
+function unwrapInterpolation(property, context) {
+  const pattern = /{(.*)}/g;
+  const match = property.match(pattern);
+  if (match !== null) {
+    return getModel(property.replace(/{|}/g, ""), context);
+  }
+  return property;
+}
+
+const Checkbox = {
+  name: "Checkbox",
+  props: componentProps,
+  setup(props) {
+    const { t } = useI18n({ useScope: "global" });
+    return () => {
+      const field = Checkbox$1({
+        props: Object.assign(
+          {},
+          {
+            trueValue: props.element.trueValue,
+            falseValue: props.element.falseValue
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? ""
+          }
+        ),
+        slots: {
+          default: () => unref(computed(() => t(unwrapInterpolation(props.element.content, toValue$1(props.fieldContext)))))
+        }
+      });
+      const render = h(field.component, field.props, field.slots);
+      if (field.props.rules) {
+        return h(
+          ValidationField,
+          {
+            props: field.props,
+            slots: field.slots,
+            index: props.elIndex,
+            rows: props.rows
+          },
+          () => render
+        );
+      } else {
+        return render;
+      }
+    };
+  }
+};
+
+const DynamicProperty = {
+  name: "DynamicProperty",
+  props: componentProps,
+  emits: ["setModelData"],
+  setup(props) {
+    if (!props.bladeContext.scope?.dynamicProperties) {
+      throw new Error(
+        `There is no DynamicProperties config provided in blade scope: ${JSON.stringify(
+          props.bladeContext.scope,
+          null,
+          2
+        )}`
+      );
+    }
+    const internalModel = ref();
+    watch(
+      () => props.baseProps?.modelValue,
+      (newVal) => {
+        if (!isEqual(toValue(newVal), internalModel.value)) {
+          internalModel.value = cloneDeep(toValue(newVal));
+        }
+      },
+      { deep: true, immediate: true }
+    );
+    const filteredProps = reactify(
+      (prop, { include, exclude }) => {
+        if (prop) {
+          return prop.filter((x) => {
+            if (include) return include?.includes(x.type);
+            if (exclude) return !exclude?.includes(x.type);
+            else return true;
+          });
+        }
+        return null;
+      }
+    );
+    const dynamicProps = filteredProps(internalModel, {
+      include: props.element?.include,
+      exclude: props.element?.exclude
+    });
+    const initialProps = cloneDeep(dynamicProps.value);
+    const properties = reactiveComputed(() => {
+      return (dynamicProps.value || [])?.map(
+        (prop) => DynamicProperties({
+          props: {
+            disabled: props.bladeContext.scope && "disabled" in props.bladeContext.scope && props.bladeContext.scope.disabled,
+            property: prop,
+            modelValue: computed(
+              () => props.bladeContext.scope?.dynamicProperties?.getPropertyValue(
+                prop,
+                toValue(props.currentLocale ?? "en-US")
+              )
+            ),
+            optionsGetter: props.bladeContext.scope?.dynamicProperties?.loadDictionaries,
+            "onUpdate:model-value": (args) => {
+              props.bladeContext.scope?.dynamicProperties?.setPropertyValue({
+                property: prop,
+                value: args.value,
+                dictionary: args.dictionary,
+                locale: args.locale,
+                initialProp: cloneDeep(initialProps?.find((x) => x.id === prop.id))
+              });
+              if (props.fieldContext) {
+                setModel({ context: props.fieldContext, property: props.element.property, value: internalModel.value });
+              }
+            },
+            required: prop.required,
+            multivalue: prop.multivalue,
+            multilanguage: prop.multilanguage,
+            valueType: prop.valueType,
+            dictionary: prop.dictionary,
+            name: prop.name,
+            rules: {
+              min: prop.validationRule?.charCountMin,
+              max: prop.validationRule?.charCountMax,
+              regex: prop.validationRule?.regExp
+            },
+            displayNames: prop.displayNames,
+            key: prop.multilanguage ? prop.name + "_" + prop.id + "_" + props.currentLocale : prop.name + "_" + prop.id,
+            currentLanguage: props.currentLocale
+          }
+        })
+      );
+    });
+    return () => {
+      return properties && properties.length ? properties.map(
+        (field) => h(field.component, {
+          ...unrefNested(field.props),
+          class: unrefNested(props.baseProps).classNames ?? "",
+          key: field.props.key
+        })
+      ) : null;
+    };
+  }
+};
+
+const EditorField = {
+  name: "EditorField",
+  props: componentProps,
+  setup(props) {
+    return () => {
+      const field = EditorField$1({
+        props: Object.assign(
+          {},
+          {
+            currentLanguage: props.currentLocale,
+            assetsFolder: props.element.assetsFolder,
+            maxlength: props.element.maxlength
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? ""
+          }
+        )
+      });
+      const render = h(field.component, field.props);
+      if (field.props.rules) {
+        return h(
+          ValidationField,
+          {
+            props: field.props,
+            index: props.elIndex,
+            rows: props.rows,
+            key: `${String(field.props.key)}_validation`
+          },
+          () => render
+        );
+      } else {
+        return render;
+      }
+    };
+  }
+};
+
+const GalleryField = {
+  name: "GalleryField",
+  props: componentProps,
+  setup(props) {
+    if (!(safeIn("bladeContext", props) && props.bladeContext && safeIn("scope", props.bladeContext) && props.bladeContext.scope && props.bladeContext.scope.assetsHandler?.images)) {
+      throw new Error(
+        `There is no assetsHandler.images config provided in blade scope: ${JSON.stringify(
+          props.bladeContext.scope,
+          null,
+          2
+        )}`
+      );
+    }
+    const { showConfirmation } = usePopup();
+    const { t } = useI18n({ useScope: "global" });
+    const { openBlade } = useBladeNavigation();
+    const imagesHandler = toRefs(props.bladeContext.scope?.assetsHandler?.images);
+    const internalModel = ref();
+    watch(
+      () => props.fieldContext,
+      (newVal) => {
+        if (!isEqual(internalModel.value, newVal)) {
+          internalModel.value = cloneDeep(newVal);
+        }
+      },
+      { deep: true, immediate: true }
+    );
+    return () => {
+      const imageHandlers = {
+        loading: imagesHandler.loading ?? false,
+        async edit(image) {
+          if (!imagesHandler.edit?.value) throw new Error("Edit handler is not provided");
+          const edited = await imagesHandler.edit?.value?.([image]);
+          await editImages(edited);
+        },
+        async upload(files, lastSortOrder) {
+          if (!imagesHandler.upload?.value) throw new Error("Upload handler is not provided");
+          if (files) {
+            const uploaded = await imagesHandler.upload?.value?.(files, lastSortOrder);
+            let addToExisting;
+            if (Array.isArray(uploaded) && Array.isArray(internalModel.value[props.element.property])) {
+              addToExisting = internalModel.value[props.element.property].concat(uploaded);
+            } else {
+              addToExisting = uploaded;
+            }
+            files = null;
+            await editImages(addToExisting);
+          }
+        },
+        async remove(image) {
+          if (!imagesHandler.remove?.value) throw new Error("Remove handler is not provided");
+          if (imagesHandler.noRemoveConfirmation || await showConfirmation(
+            computed(
+              () => t(
+                `${props.bladeContext?.settings?.localizationPrefix.trim().toUpperCase()}.PAGES.ALERTS.IMAGE_DELETE_CONFIRMATION`
+              )
+            )
+          )) {
+            const edited = await imagesHandler.remove?.value?.([image]);
+            await editImages(edited);
+          }
+        }
+      };
+      function onGalleryItemEdit(item) {
+        openBlade({
+          blade: markRaw(_sfc_main$m),
+          options: {
+            asset: item,
+            assetEditHandler: imageHandlers.edit,
+            assetRemoveHandler: imageHandlers.remove
+          }
+        });
+      }
+      async function editImages(args) {
+        if (props.fieldContext) {
+          internalModel.value[props.element.property] = args;
+          setModel({
+            property: props.element.property,
+            value: args,
+            context: props.fieldContext,
+            scope: props.bladeContext.scope
+          });
+          if (props.bladeContext.validationState) {
+            await props.bladeContext.validationState.setFieldValue(props.element.id, args);
+          }
+        }
+      }
+      const field = Gallery({
+        props: Object.assign(
+          {},
+          {
+            customText: {
+              dragHere: typeof props.element.customText?.dragHere !== "undefined" ? unref(computed(() => t(props.element.customText.dragHere))) : void 0,
+              browse: typeof props.element.customText?.browse !== "undefined" ? unref(computed(() => t(props.element.customText.browse))) : void 0
+            },
+            uploadIcon: props.element.uploadIcon,
+            loading: imageHandlers.loading,
+            images: toValue(props.baseProps.modelValue),
+            multiple: props.element.multiple,
+            variant: props.element.variant,
+            itemActions: props.element.actions,
+            onUpload: imageHandlers.upload,
+            onRemove: imageHandlers.remove,
+            onEdit: onGalleryItemEdit,
+            onSort: editImages,
+            hideAfterUpload: props.element.hideAfterUpload
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? ""
+          }
+        )
+      });
+      return h(field.component, Object.assign(unrefNested(field.props), { class: "tw-flex-auto" }));
+    };
+  }
+};
+
+const Button = {
+  name: "ButtonEl",
+  props: componentProps,
+  setup(props) {
+    const { t } = useI18n({ useScope: "global" });
+    return () => {
+      const field = Button$1({
+        props: Object.assign(
+          {},
+          {
+            small: props.element.small,
+            icon: props.element?.icon,
+            iconSize: props.element?.iconSize,
+            text: props.element?.text,
+            variant: props.element?.variant,
+            raised: props.element?.raised,
+            outline: props.element?.outline,
+            onClick: () => {
+              unref(props.bladeContext.scope)?.[props.element.method]();
+            }
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? ""
+          }
+        ),
+        slots: props.element.content ? {
+          default: () => unref(computed(() => (props.element.content && t(props.element.content)) ?? void 0))
+        } : void 0
+      });
+      return h(field.component, mergeProps(field.props, { class: "tw-self-start" }), field.slots);
+    };
+  }
+};
+
+const StatusField = {
+  name: "StatusField",
+  props: componentProps,
+  setup(props) {
+    const { t } = useI18n({ useScope: "global" });
+    const hasOverflow = ref(false);
+    const isExpanded = ref(false);
+    const contentRef = ref(null);
+    const toggle = () => {
+      isExpanded.value = !isExpanded.value;
+    };
+    const checkOverflow = () => {
+      if (contentRef.value) {
+        hasOverflow.value = contentRef.value.scrollHeight > 100;
+      }
+    };
+    onMounted(() => {
+      checkOverflow();
+    });
+    return () => {
+      const slotContent = computed(() => {
+        if (props.element.content && typeof props.element.content === "string") {
+          return t(props.element.content);
+        } else if (typeof props.element.content === "object" && "method" in props.element.content && props.element.content?.method) {
+          const method = unref(props.bladeContext.scope)?.[props.element.content?.method];
+          if (typeof method === "function") {
+            return method();
+          } else {
+            return method;
+          }
+        }
+        return null;
+      });
+      const field = StatusField$1({
+        props: Object.assign(
+          {
+            variant: props.element.variant,
+            outline: props.element.outline,
+            extend: props.element.extend
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? ""
+          }
+        ),
+        slots: {
+          default: () => {
+            return h("div", { class: "tw-flex tw-flex-row tw-items-center" }, [
+              props.element.icon ? h(_sfc_main$n, {
+                icon: props.element.icon,
+                size: props.element.iconSize,
+                variant: props.element.iconVariant,
+                class: "tw-mr-3"
+              }) : void 0,
+              h("div", { class: "tw-flex tw-flex-col", style: "text-align: start;" }, [
+                h("div", { class: "tw-font-bold" }, computed(() => t(props.element.title ?? "")).value),
+                h(
+                  "div",
+                  {
+                    class: {
+                      "tw-overflow-hidden": true,
+                      "tw-max-h-[100px] tw-line-clamp-4": !isExpanded.value,
+                      "tw-max-h-[100%]": isExpanded.value
+                    },
+                    ref: contentRef
+                  },
+                  slotContent.value
+                ),
+                hasOverflow.value ? h(
+                  _sfc_main$c,
+                  { text: true, class: "tw-self-end", onClick: toggle },
+                  () => isExpanded.value ? t("COMPONENTS.ATOMS.VC_STATUS.SHOW_LESS") : t("COMPONENTS.ATOMS.VC_STATUS.SHOW_MORE")
+                ) : void 0
+              ])
+            ]);
+          }
+        }
+      });
+      return h(
+        field.component,
+        { ...field.props, class: props.element.extend ? "tw-w-full tw-box-border" : "tw-flex tw-self-start" },
+        field.slots
+      );
+    };
+  }
+};
+
+const ContentField = {
+  name: "ContentField",
+  props: componentProps,
+  setup(props) {
+    return () => {
+      const field = ContentField$1({
+        props: Object.assign(
+          {},
+          {
+            type: props.element.variant,
+            copyable: props.element.copyable || false,
+            orientation: props.element.orientation,
+            aspectRatio: props.element.aspectRatio
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? ""
+          }
+        )
+      });
+      const render = h(field.component, field.props);
+      return render;
+    };
+  }
+};
+
+const VideoField = {
+  name: "VideoField",
+  props: componentProps,
+  setup(props) {
+    return () => {
+      const field = VideoField$1({
+        props: Object.assign(
+          {},
+          {
+            source: toValue(props.baseProps.modelValue)
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? ""
+          }
+        )
+      });
+      const render = h(field.component, field.props);
+      return render;
+    };
+  }
+};
+
+const ImageField = {
+  name: "ImageField",
+  props: componentProps,
+  setup(props) {
+    return () => {
+      const field = ImageField$1({
+        props: Object.assign(
+          {},
+          {
+            src: toValue(props.baseProps.modelValue),
+            aspect: props.element.aspect,
+            rounded: props.element.rounded,
+            bordered: props.element.bordered,
+            size: props.element.size,
+            background: props.element.background
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? ""
+          }
+        )
+      });
+      const render = h(field.component, field.props);
+      return render;
+    };
+  }
+};
+
+const TextareaField = {
+  name: "TextareaField",
+  props: componentProps,
+  setup(props) {
+    return () => {
+      const field = TextareaField$1({
+        props: Object.assign(
+          {},
+          {
+            currentLanguage: props.currentLocale,
+            clearable: props.element.clearable || false,
+            maxlength: props.element.maxlength
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? ""
+          }
+        )
+      });
+      const render = h(field.component, field.props);
+      if (field.props.rules) {
+        return h(
+          ValidationField,
+          {
+            props: field.props,
+            index: props.elIndex,
+            rows: props.rows,
+            key: `${String(field.props.key)}_validation`
+          },
+          () => render
+        );
+      } else {
+        return render;
+      }
+    };
+  }
+};
+
+const MultivalueField = {
+  name: "MultivalueField",
+  props: componentProps,
+  setup(props) {
+    return () => {
+      const field = MultivalueField$1({
+        props: Object.assign(
+          {},
+          {
+            multivalue: props.element.multivalue,
+            type: props.element.variant,
+            optionValue: props.element.optionValue,
+            optionLabel: props.element.optionLabel,
+            options: props.element.options ? props.bladeContext.scope?.[props.element.options] : void 0,
+            currentLanguage: props.currentLocale
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? ""
+          }
+        ),
+        slots: props.element.customTemplate && ["option", "selected-item"].reduce(
+          (obj, slot) => {
+            obj[slot] = (scope) => h(resolveComponent(props.element.customTemplate?.component), {
+              context: scope,
+              slotName: slot
+            });
+            return obj;
+          },
+          {}
+        )
+      });
+      const render = h(field.component, field.props, field.slots);
+      if (field.props.rules) {
+        return h(
+          ValidationField,
+          {
+            props: field.props,
+            index: props.elIndex,
+            rows: props.rows,
+            key: `${String(field.props.key)}_validation`
+          },
+          () => render
+        );
+      } else {
+        return render;
+      }
+    };
+  }
+};
+
+const SwitchField = {
+  name: "SwitchEl",
+  props: componentProps,
+  setup(props) {
+    return () => {
+      const field = Switch({
+        props: Object.assign(
+          {},
+          {
+            trueValue: props.element.trueValue,
+            falseValue: props.element.falseValue
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? ""
+          }
+        )
+      });
+      return h(field.component, field.props);
+    };
+  }
+};
+
+const Table = {
+  name: "TableEl",
+  props: componentProps,
+  setup(props) {
+    const { tableTemplates } = useTableTemplates(props.element);
+    const { t } = useI18n({ useScope: "global" });
+    const enableEdit = inject("isBladeEditable", false);
+    const enableEditComputed = computed(() => unref(enableEdit));
+    unrefNested(props.baseProps).modelValue ?? [];
+    function disabledActionHandler(disabled, item) {
+      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) {
+      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,
+            clickHandler: async (itemVal, index) => {
+              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;
+      }, []);
+      return result;
+    }
+    return () => {
+      const field = Table$1({
+        props: Object.assign(
+          {},
+          {
+            addNewRowButton: props.element.addNewRowButton ? {
+              title: computed(() => t(props.element.addNewRowButton?.title ?? "")),
+              show: props.element.addNewRowButton.show
+            } : void 0,
+            header: !!props.element.header,
+            footer: !!props.element.footer,
+            multiselect: !!props.element.multiselect,
+            columns: props.element.columns?.map((col) => ({ ...col, title: computed(() => t(col.title)) })),
+            items: unrefNested(props.baseProps).modelValue ?? [],
+            stateKey: props.element.id,
+            class: `!tw-flex-auto ${unrefNested(props.baseProps).classNames ?? ""}`,
+            editing: enableEditComputed.value,
+            enableItemActions: !!props.element.actions,
+            itemActionBuilder: actionBuilder,
+            get selectedItemId() {
+              if (props.element.selectedItemId?.method && props.bladeContext.scope?.[props.element.selectedItemId?.method]) {
+                if (typeof props.bladeContext.scope?.[props.element.selectedItemId?.method] === "function") {
+                  return props.bladeContext.scope?.[props.element.selectedItemId?.method]?.();
+                } else {
+                  return props.bladeContext.scope?.[props.element.selectedItemId?.method];
+                }
+              }
+            },
+            get selectedItems() {
+              if (props.element.selectedIds?.method && props.bladeContext.scope?.[props.element.selectedIds?.method] && typeof props.bladeContext.scope?.[props.element.selectedIds?.method] === "function") {
+                return props.bladeContext.scope?.[props.element.selectedIds?.method]?.();
+              }
+              return [];
+            },
+            onItemClick: (item) => {
+              if (props.element.onItemClick?.method && props.bladeContext.scope?.[props.element.onItemClick?.method] && typeof props.bladeContext.scope?.[props.element.onItemClick?.method] === "function") {
+                props.bladeContext.scope?.[props.element.onItemClick?.method](item);
+              }
+            },
+            onOnEditComplete: (data) => {
+              if (props.fieldContext) {
+                setModel({
+                  context: props.fieldContext,
+                  property: `${props.element.property}.${data.index}.${data.event.field}`,
+                  value: data.event.value
+                });
+              }
+            },
+            onOnAddNewRow: () => {
+              if (props.element.addNewRowButton?.method && props.bladeContext.scope?.[props.element.addNewRowButton?.method] && typeof props.bladeContext.scope?.[props.element.addNewRowButton?.method] === "function") {
+                props.bladeContext.scope?.[props.element.addNewRowButton?.method]?.();
+              }
+            },
+            onOnCellBlur: async (data) => {
+              if (props.element.columns) {
+                const column = props.element.columns.find((col) => col.id === data.field);
+                if (column && column.onCellBlur && column.onCellBlur.method) {
+                  if (props.bladeContext.scope?.[column.onCellBlur.method] && typeof props.bladeContext.scope[column.onCellBlur.method] === "function") {
+                    await props.bladeContext.scope[column.onCellBlur.method](data);
+                  }
+                }
+              }
+            }
+          },
+          unrefNested(props.baseProps)
+        ),
+        slots: {
+          ...Object.entries(tableTemplates.templateOverrideComponents).reduce(
+            (obj, [key, value], index) => {
+              obj[`item_${key}`] = (itemData) => {
+                return h(unref(value), {
+                  index: itemData.index,
+                  context: itemData,
+                  key: `template_override_${props.element.id}_${index}`,
+                  bladeContext: props.bladeContext,
+                  onEditComplete: (data) => {
+                    if (props.fieldContext) {
+                      setModel({
+                        context: props.fieldContext,
+                        property: `${props.element.property}.${itemData.index}.${key}`,
+                        value: data
+                      });
+                    }
+                  }
+                });
+              };
+              return obj;
+            },
+            {}
+          ),
+          notfound: tableTemplates?.notFound ? () => h(tableTemplates.notFound, { context: props.bladeContext }) : void 0,
+          "mobile-item": tableTemplates?.mobileView ? (itemData) => h(tableTemplates.mobileView, { context: itemData, bladeContext: props.bladeContext }) : void 0,
+          empty: tableTemplates?.empty ? () => h(tableTemplates.empty, { context: props.bladeContext }) : void 0,
+          footer: tableTemplates?.footer ? () => h(tableTemplates.footer, { context: props.bladeContext }) : void 0
+        }
+      });
+      return h(field.component, field.props, field.slots);
+    };
+  }
+};
+
+const CustomComponent = {
+  name: "CustomComponentRenderer",
+  props: componentProps,
+  setup(props) {
+    return () => {
+      const component = resolveComponent(props.element?.name);
+      return typeof component === "object" ? h(
+        component,
+        Object.assign(
+          {},
+          {
+            context: props.bladeContext
+          },
+          {
+            class: unrefNested(props.baseProps).classNames ?? ""
+          }
+        )
+      ) : null;
+    };
+  }
+};
+
+const RatingField = {
+  name: "RatingEl",
+  props: componentProps,
+  setup(props) {
+    return () => {
+      const field = Rating({
+        props: Object.assign(
+          {},
+          {
+            variant: props.element.type
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? ""
+          }
+        )
+      });
+      return h(field.component, field.props);
+    };
+  }
+};
+
+const RadioButtonGroup = {
+  name: "RadioButtonGroup",
+  props: componentProps,
+  setup(props) {
+    return () => {
+      const label = unrefNested(props.baseProps).label;
+      const options = toValue(getModel(props.element.options, props.fieldContext ?? {})) || toValue(unref(props.bladeContext.scope)?.[props.element.options]);
+      const fields = options.map(
+        (opt) => RadioButton({
+          props: Object.assign(
+            {},
+            {
+              value: props.element.optionValue ? toValue(getModel(props.element.optionValue, opt ?? {})) : opt,
+              binary: props.element.binary,
+              label: props.element.optionLabel ? toValue(getModel(props.element.optionLabel, opt ?? {})) : opt
+            },
+            omit(unrefNested(props.baseProps), "label"),
+            {
+              class: unrefNested(props.baseProps).classNames ?? ""
+            }
+          )
+        })
+      );
+      const render = [
+        label ? h(
+          _sfc_main$l,
+          { required: props.element.rules?.required },
+          {
+            default: () => label,
+            tooltip: unrefNested(props.baseProps).tooltip ? () => unrefNested(props.baseProps).tooltip : void 0
+          }
+        ) : void 0,
+        fields.map((field) => h(field.component, field.props)),
+        h({
+          props: ["error", "errorMessage"],
+          components: { VcHint },
+          template: `
+            <VcHint v-if="error" class="vc-textarea__error">
+              {{ errorMessage }}
+            </VcHint>
+            `
+        })
+      ];
+      if (props.element.rules) {
+        return h(
+          ValidationField,
+          {
+            props: {
+              rules: props.element.rules,
+              modelValue: unrefNested(props.baseProps).modelValue,
+              label: unrefNested(props.baseProps).label,
+              name: unrefNested(props.baseProps).name
+            },
+            index: props.elIndex,
+            rows: props.rows
+          },
+          () => render
+        );
+      } else {
+        return render;
+      }
+    };
+  }
+};
+
+const FIELD_MAP = {
+  "vc-select": SelectField,
+  "vc-card": Card,
+  "vc-input": InputField,
+  "vc-fieldset": Fieldset,
+  "vc-input-currency": InputCurrency,
+  "vc-checkbox": Checkbox,
+  "vc-dynamic-properties": DynamicProperty,
+  "vc-editor": EditorField,
+  "vc-gallery": GalleryField,
+  "vc-button": Button,
+  "vc-status": StatusField,
+  "vc-field": ContentField,
+  "vc-video": VideoField,
+  "vc-image": ImageField,
+  "vc-textarea": TextareaField,
+  "vc-multivalue": MultivalueField,
+  "vc-switch": SwitchField,
+  "vc-table": Table,
+  "vc-custom": CustomComponent,
+  "vc-rating": RatingField,
+  "vc-radio-button-group": RadioButtonGroup
+};
+
+const { hasAccess } = usePermissions();
+function disabledHandler(disabled, context) {
+  if (!disabled) return false;
+  if (typeof disabled === "boolean") return disabled;
+  else if (disabled.method && typeof context.scope?.[disabled.method] === "function")
+    return context.scope[disabled.method]();
+  else if (disabled.method && context.scope?.[disabled.method]) return context.scope[disabled.method];
+  return false;
+}
+function nodeBuilder({
+  controlSchema,
+  parentId,
+  internalContext,
+  bladeContext,
+  currentLocale,
+  formData,
+  updateFormData
+}) {
+  if (!controlSchema) throw new Error("There is no controlSchema provided");
+  const { t } = i18n.global;
+  const name = controlSchema.id;
+  const rules = safeIn("rules", controlSchema) && controlSchema.rules || void 0;
+  const placeholder = safeIn("placeholder", controlSchema) && controlSchema.placeholder || void 0;
+  const required = safeIn("rules", controlSchema) && controlSchema.rules?.required;
+  const contextProperty = safeIn("property", controlSchema) && controlSchema.property && getModel(controlSchema.property, internalContext);
+  const scopedProperty = safeIn("property", controlSchema) && controlSchema.property && bladeContext.scope && getModel(controlSchema.property, bladeContext.scope);
+  const modelValue = scopedProperty ?? contextProperty ?? void 0;
+  const tooltip = safeIn("tooltip", controlSchema) && controlSchema.tooltip || void 0;
+  const multilanguage = safeIn("multilanguage", controlSchema) && controlSchema.multilanguage;
+  const label = safeIn("label", controlSchema) && controlSchema.label ? unref(unwrapInterpolation(controlSchema.label, internalContext)) : void 0;
+  const hint = safeIn("hint", controlSchema) && controlSchema.hint ? (bladeContext.scope && unref(unwrapInterpolation(controlSchema.hint, bladeContext.scope))) ?? unref(unwrapInterpolation(controlSchema.hint, internalContext)) ?? void 0 : void 0;
+  const disabled = bladeContext.scope && safeIn("disabled", bladeContext.scope) && bladeContext.scope.disabled || safeIn("disabled", controlSchema) && controlSchema.disabled && disabledHandler(controlSchema.disabled, bladeContext);
+  const onBlur = (event) => {
+    if (safeIn("onBlur", controlSchema) && controlSchema.onBlur) {
+      const method = controlSchema.onBlur.method;
+      if (method && bladeContext.scope?.[method] && typeof bladeContext.scope[method] === "function") {
+        bladeContext.scope[method]({
+          event,
+          property: controlSchema.property,
+          context: unrefNested(internalContext)
+        });
+      }
+    }
+  };
+  const onUpdateModelValue = async (e) => {
+    if (safeIn("property", controlSchema) && controlSchema.property) {
+      setModel({
+        property: controlSchema.property,
+        value: e,
+        context: internalContext,
+        scope: bladeContext.scope
+      });
+      updateFormData?.(formData);
+      if (safeIn("update", controlSchema) && controlSchema.update && safeIn("method", controlSchema.update) && bladeContext.scope) {
+        const updateMethod = controlSchema.update.method;
+        if (safeIn(updateMethod, bladeContext.scope) && typeof bladeContext.scope[updateMethod] === "function") {
+          await bladeContext.scope[updateMethod](e, controlSchema.property, unrefNested(internalContext));
+        }
+      }
+    }
+  };
+  const baseProps = reactive({
+    key: `${parentId}`,
+    label: computed(() => typeof label !== "undefined" ? t(label) : void 0),
+    hint: computed(() => typeof hint !== "undefined" ? t(hint) : void 0),
+    disabled,
+    onBlur,
+    name,
+    rules,
+    placeholder: computed(() => typeof placeholder !== "undefined" ? t(placeholder) : void 0),
+    required,
+    modelValue,
+    "onUpdate:modelValue": onUpdateModelValue,
+    tooltip: computed(() => typeof tooltip !== "undefined" ? t(tooltip) : void 0),
+    multilanguage,
+    "data-test-id": controlSchema.id,
+    classNames: "horizontalSeparator" in controlSchema && controlSchema.horizontalSeparator ? "tw-border-b tw-border-solid tw-border-b-[var(--neutrals-200)] tw-mb-[5px] tw-pb-[21px]" : ""
+  });
+  const component = FIELD_MAP[controlSchema.component];
+  const fieldsHandler = computed(() => {
+    if (!("fields" in controlSchema)) return null;
+    const contextFieldModel = safeIn("property", controlSchema) && controlSchema.property && getModel(controlSchema.property, internalContext);
+    const scopedFieldModel = safeIn("property", controlSchema) && controlSchema.property && getModel(controlSchema.property, toValue(bladeContext.scope ?? {}));
+    const model = scopedFieldModel || contextFieldModel;
+    if (toValue(model) && Array.isArray(toValue(model))) {
+      return toValue(model).map((modelItem) => {
+        return controlSchema.fields.reduce((arr, fieldItem) => {
+          if (safeIn("permissions", fieldItem) && !hasAccess(fieldItem.permissions)) {
+            return arr;
+          }
+          if (safeIn("visibility", fieldItem) && fieldItem.visibility?.method && !methodHandler(bladeContext.scope?.[fieldItem.visibility?.method], modelItem, fieldItem)) {
+            return arr;
+          }
+          return [
+            ...arr,
+            nodeBuilder({
+              controlSchema: fieldItem,
+              parentId: `fieldset-${fieldItem.id}-${modelItem.id}`,
+              internalContext: modelItem,
+              bladeContext,
+              currentLocale,
+              formData,
+              updateFormData
+            })
+          ];
+        }, []);
+      });
+    }
+    return [
+      controlSchema.fields.reduce((arr, field) => {
+        if (safeIn("permissions", field) && !hasAccess(field.permissions)) {
+          return arr;
+        }
+        if (safeIn("visibility", field) && field.visibility?.method && !methodHandler(bladeContext.scope?.[field.visibility?.method], internalContext, field)) {
+          return arr;
+        }
+        return [
+          ...arr,
+          nodeBuilder({
+            controlSchema: field,
+            parentId: `fieldset-${parentId}-${field.id}`,
+            internalContext,
+            bladeContext,
+            currentLocale,
+            formData,
+            updateFormData
+          })
+        ];
+      }, [])
+    ];
+  });
+  const elProps = {
+    baseProps: toRefs$1(baseProps),
+    bladeContext,
+    element: controlSchema,
+    currentLocale: unref(currentLocale),
+    fields: fieldsHandler,
+    formData,
+    fieldContext: internalContext
+  };
+  return h(component, elProps);
+}
+
+const schemeRenderProps = {
+  context: {
+    type: Object,
+    default: () => ({})
+  },
+  modelValue: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  uiSchema: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  currentLocale: {
+    type: String,
+    default: ""
+  }
+};
+const SchemaRender = defineComponent({
+  name: "SchemaRender",
+  props: schemeRenderProps,
+  emits: ["update:modelValue"],
+  setup(props, ctx) {
+    const { currentLocale } = toRefs(props);
+    const internalFormData = reactive({});
+    const { hasAccess } = usePermissions();
+    watch(
+      () => props.modelValue,
+      (newVal) => {
+        if (!isEqual(internalFormData, toRefs(newVal))) {
+          Object.assign(internalFormData, toRefs(newVal));
+        }
+      },
+      { deep: true, immediate: true }
+    );
+    function updateFormData(newVal) {
+      if (!isEqual(toRefs(newVal), internalFormData)) {
+        ctx.emit("update:modelValue", unrefNested(newVal));
+      }
+    }
+    return () => h(
+      "div",
+      { class: "tw-flex tw-flex-col tw-gap-4" },
+      props.uiSchema.reduce((arr, field) => {
+        if (safeIn("permissions", field) && !hasAccess(field.permissions)) {
+          return arr;
+        }
+        if (safeIn("visibility", field) && field.visibility?.method && !methodHandler(toValue$1(props.context?.scope)?.[field.visibility.method], props.context, field)) {
+          return arr;
+        }
+        return [
+          ...arr,
+          nodeBuilder({
+            controlSchema: field,
+            parentId: field.id,
+            internalContext: internalFormData,
+            bladeContext: props.context,
+            currentLocale,
+            formData: internalFormData,
+            updateFormData
+          })
+        ];
+      }, [])
+    );
+  }
+});
+
+const _hoisted_1 = { class: "blade-content-wrapper" };
+const _hoisted_2 = {
+  key: 0,
+  class: "language-selector-container"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "item-details__inner"
+};
+const _hoisted_4 = { class: "item-details__content" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "dynamic-blade-form",
+  props: {
+    expanded: { type: Boolean, default: true },
+    closable: { type: Boolean, default: true },
+    param: {},
+    model: {},
+    options: {},
+    composables: {},
+    mixinFn: {}
+  },
+  emits: ["parent:call", "close:blade", "collapse:blade", "expand:blade"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useI18n({ useScope: "global" });
+    const { showConfirmation } = usePopup();
+    const { getFlag } = useLanguages();
+    const isMixinReady = ref(false);
+    const blade = inject(BladeInstance);
+    if (typeof props.composables?.[props.model?.settings?.composable ?? ""] === "undefined") {
+      throw new Error(`Composable ( ${props.model?.settings?.composable} ) is not defined`);
+    }
+    const settings = computed(() => props.model?.settings);
+    let { loading, item, validationState, scope, load, remove, saveChanges, bladeTitle } = props.composables ? props.composables?.[props.model?.settings?.composable ?? ""]({ emit, props, mounted: useMounted() }) : {
+      loading: true,
+      item: void 0,
+      validationState: void 0,
+      scope: void 0,
+      load: void 0,
+      remove: void 0,
+      saveChanges: void 0,
+      bladeTitle: void 0
+    };
+    if (props.mixinFn?.length) {
+      const mixinResults = props.mixinFn?.map(
+        (mixin) => mixin({ loading, item, validationState, scope, load, remove, saveChanges, bladeTitle })
+      );
+      const mergedResults = mixinResults.reduce((acc, result) => {
+        return {
+          ...acc,
+          ...result
+        };
+      }, {});
+      loading = mergedResults.loading ?? loading;
+      item = mergedResults.item ?? item;
+      validationState = mergedResults.validationState ?? validationState;
+      scope = mergedResults.scope ?? scope;
+      load = mergedResults.load ?? load;
+      remove = mergedResults.remove ?? remove;
+      saveChanges = mergedResults.saveChanges ?? saveChanges;
+      bladeTitle = mergedResults.bladeTitle ?? bladeTitle;
+      isMixinReady.value = true;
+    } else {
+      isMixinReady.value = true;
+    }
+    const widgetService = useWidgets();
+    const { onBeforeClose } = useBladeNavigation();
+    const title = ref();
+    const isReady = ref(false);
+    const activeWidgetExposed = ref();
+    const isBladeEditable = computed(() => !toValue("disabled" in toValue(scope || {}) && toValue(scope || {}).disabled));
+    const unreffedScope = reactiveComputed(() => toValue(scope) ?? {});
+    const { moduleNotifications, markAsRead } = useNotifications(settings.value?.pushNotificationType);
+    watch(
+      moduleNotifications,
+      (newVal) => {
+        newVal.forEach((message) => {
+          if (message.title && props.composables) {
+            notification.success(message.title, {
+              onClose() {
+                markAsRead(message);
+              }
+            });
+          }
+        });
+      },
+      { deep: true }
+    );
+    watch(
+      () => unref(bladeTitle),
+      (newVal) => {
+        if (newVal && props.composables) {
+          title.value = newVal;
+        }
+      },
+      { immediate: true }
+    );
+    const isFormModified = computed(() => validationState.value.modified);
+    useBeforeUnload(isFormModified);
+    const form = computed(
+      () => props.model?.content.find((x) => x?.component === "vc-form")
+    );
+    const widgets = computed(() => props.model?.content.find((x) => x?.component === "vc-widgets"));
+    const bladeContext = ref({
+      loading,
+      item,
+      validationState,
+      scope,
+      load,
+      remove,
+      saveChanges,
+      bladeTitle,
+      settings
+    });
+    const bladeStatus = computed(() => {
+      if (props.model && "status" in props.model.settings && props.model.settings.status) {
+        if (!("component" in props.model.settings.status))
+          throw new Error(`Component is required in status: ${props.model.settings.status}`);
+        return reactive(h(resolveComponent(props.model.settings.status.component), { context: bladeContext.value }));
+      }
+      return null;
+    });
+    const localeOptions = ref();
+    watch(
+      () => toValue(unreffedScope).multilanguage?.localesOptions,
+      (newVal) => {
+        localeOptions.value = newVal;
+      },
+      { immediate: true, deep: true }
+    );
+    watch(
+      () => localeOptions.value,
+      async (newVal) => {
+        for (const lang of newVal) {
+          lang.flag = await getFlag(lang.value);
+        }
+      },
+      { deep: true }
+    );
+    const bladeMultilanguage = reactiveComputed(() => {
+      if (scope && toValue(unreffedScope) && "multilanguage" in toValue(unreffedScope) && toValue(unreffedScope).multilanguage) {
+        const isOpened = ref(false);
+        return {
+          component: () => {
+            return h(
+              _sfc_main$o,
+              {
+                opened: isOpened.value,
+                items: localeOptions.value || [],
+                floating: true,
+                placement: "bottom-end",
+                offset: {
+                  mainAxis: 10,
+                  crossAxis: -15
+                },
+                variant: "secondary",
+                emptyText: t("COMMON.NO_OPTIONS"),
+                itemText: (item2) => item2.label,
+                isItemActive: (item2) => item2.value === toValue(unreffedScope).multilanguage?.currentLocale,
+                onItemClick: (item2) => {
+                  isOpened.value = false;
+                  toValue(unreffedScope).multilanguage?.setLocale(item2.value);
+                },
+                "onUpdate:opened": (state) => {
+                  isOpened.value = state;
+                }
+              },
+              {
+                trigger: () => {
+                  const currentLocale = localeOptions.value?.find(
+                    (locale) => locale.value === toValue(unreffedScope).multilanguage?.currentLocale
+                  );
+                  return h(
+                    "div",
+                    {
+                      onClick: () => {
+                        if ("disabled" in toValue(unreffedScope) && toValue(unreffedScope).disabled) return;
+                        isOpened.value = !isOpened.value;
+                      },
+                      class: "tw-flex tw-items-center tw-justify-center tw-bg-[--primary-100] tw-w-8 tw-h-8 tw-rounded-full tw-mr-1 hover:tw-bg-[--primary-200]"
+                    },
+                    [h(_sfc_main$8, { src: currentLocale?.flag, class: "tw-w-6 tw-h-6", emptyIcon: "" })]
+                  );
+                },
+                item: (props2) => {
+                  return h("div", { class: "tw-flex tw-items-center tw-gap-2 tw-p-2" }, [
+                    h(_sfc_main$8, { src: props2.item.flag, class: "tw-w-6 tw-h-6", emptyIcon: "" }),
+                    h("span", { class: "tw-text-sm" }, props2.item.label)
+                  ]);
+                },
+                empty: () => h("div", {}, t("COMMON.NO_OPTIONS"))
+              }
+            );
+          },
+          currentLocale: toValue(unreffedScope).multilanguage?.currentLocale
+        };
+      }
+      return {};
+    });
+    const bladeOptions = reactive({
+      status: bladeStatus,
+      backButton: computed(() => {
+        if (toValue(unreffedScope)?.backButton) {
+          return toValue(unreffedScope).backButton;
+        }
+        return void 0;
+      })
+    });
+    const multilanguage = reactive({
+      multilanguage: bladeMultilanguage.component
+    });
+    const toolbarComputed = (props.composables && useToolbarReducer({
+      defaultToolbarSchema: settings.value?.toolbar ?? [],
+      defaultToolbarBindings: {
+        saveChanges: {
+          async clickHandler() {
+            if (item.value) {
+              await saveChanges(item.value);
+              validationState.value.resetValidationState();
+              emit("parent:call", {
+                method: "reload"
+              });
+              emit("parent:call", {
+                method: "updateActiveWidgetCount"
+              });
+              widgetService.updateActiveWidget();
+              if (!unref(props.param)) {
+                emit("close:blade");
+              }
+            }
+          },
+          disabled: computed(() => !validationState.value.modified)
+        },
+        remove: {
+          async clickHandler() {
+            if (await showConfirmation(
+              computed(() => t(`${settings.value?.localizationPrefix.trim().toUpperCase()}.PAGES.ALERTS.DELETE`))
+            )) {
+              if (props.param) {
+                await remove?.({ id: unref(props.param) });
+              } else {
+                await remove?.({ item: item.value });
+              }
+              emit("parent:call", {
+                method: "reload"
+              });
+              emit("parent:call", {
+                method: "updateActiveWidgetCount"
+              });
+              widgetService.updateActiveWidget();
+              emit("close:blade");
+            }
+          },
+          disabled: computed(() => toValue(toValue(unreffedScope)?.disabled))
+        }
+      },
+      customToolbarConfig: toValue(unreffedScope)?.toolbarOverrides,
+      context: bladeContext.value
+    })) ?? [];
+    onMounted(() => {
+      if (blade?.value.id && widgets.value?.children) {
+        widgets.value.children.forEach((widgetComponent) => {
+          const isObjectWidget = typeof widgetComponent === "object" && "id" in widgetComponent;
+          const widgetId = isObjectWidget ? widgetComponent.id : "";
+          const visibilityMethod = isObjectWidget && "visibility" in widgetComponent && widgetComponent.visibility?.method;
+          const component = isObjectWidget ? resolveComponent(widgetId) : typeof widgetComponent === "string" ? resolveComponent(widgetComponent) : widgetComponent;
+          if (!component) {
+            console.error(`Failed to resolve widget component: ${isObjectWidget ? widgetId : widgetComponent}`);
+            return;
+          }
+          const finalWidgetId = isObjectWidget ? widgetId : typeof component === "object" && "__name" in component ? component.__name : `widget-${Date.now()}`;
+          if (finalWidgetId) {
+            widgetService.registerWidget(
+              {
+                id: finalWidgetId,
+                component: markRaw(component),
+                props: {
+                  modelValue: bladeContext
+                },
+                events: {
+                  "update:modelValue": (val) => {
+                    bladeContext.value = val;
+                  }
+                },
+                isVisible: visibilityMethod ? computed(() => bladeContext.value.scope?.[visibilityMethod]) : true
+              },
+              blade.value.id
+            );
+          }
+        });
+      }
+    });
+    onBeforeUnmount(() => {
+      if (blade?.value.id) {
+        widgetService.clearBladeWidgets(blade.value.id);
+      }
+    });
+    async function updateActiveWidgetCount() {
+      if (activeWidgetExposed.value?.updateActiveWidgetCount && typeof activeWidgetExposed.value?.updateActiveWidgetCount === "function") {
+        await activeWidgetExposed.value.updateActiveWidgetCount();
+      }
+    }
+    async function init() {
+      await load({ id: unref(props.param) });
+      await nextTick(() => {
+        isReady.value = true;
+      });
+    }
+    onBeforeMount(async () => {
+      if (props.composables && isMixinReady.value) await init();
+    });
+    onBeforeClose(async () => {
+      if (unref(isFormModified)) {
+        return await showConfirmation(
+          unref(
+            computed(() => t(`${settings.value?.localizationPrefix.trim().toUpperCase()}.PAGES.ALERTS.CLOSE_CONFIRMATION`))
+          )
+        );
+      }
+    });
+    provide("bladeContext", toReactive(bladeContext));
+    provide("isBladeEditable", isBladeEditable);
+    computed(() => {
+      return widgets.value?.children?.map((x) => {
+        if (typeof x === "string") return resolveComponent(x);
+        else throw new Error(`Component is required in widget: ${x}`);
+      });
+    });
+    __expose({
+      title: bladeTitle ?? "",
+      updateActiveWidgetCount,
+      ...toRefs(toValue(unreffedScope) ?? {}),
+      settings: toValue(settings),
+      item,
+      validationState
+    });
+    return (_ctx, _cache) => {
+      const _component_VcForm = resolveComponent("VcForm");
+      const _component_VcContainer = resolveComponent("VcContainer");
+      const _component_VcBlade = resolveComponent("VcBlade");
+      const _directive_loading = resolveDirective("loading");
+      return !_ctx.composables ? withDirectives((openBlock(), createBlock(_component_VcBlade, {
+        key: 0,
+        expanded: _ctx.expanded,
+        closable: _ctx.closable,
+        width: settings.value?.width || "50%",
+        "toolbar-items": unref(toolbarComputed),
+        title: title.value,
+        modified: isBladeEditable.value ? isFormModified.value : void 0,
+        onClose: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("close:blade")),
+        onExpand: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("expand:blade")),
+        onCollapse: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("collapse:blade"))
+      }, createSlots({
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            multilanguage.multilanguage ? (openBlock(), createElementBlock("div", _hoisted_2, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(multilanguage, (value, key, index) => {
+                return openBlock(), createBlock(resolveDynamicComponent(value), {
+                  key: `blade-multilanguage-slot-${key}-${index}`
+                });
+              }), 128))
+            ])) : createCommentVNode("", true),
+            createVNode(_component_VcContainer, { "no-padding": true }, {
+              default: withCtx(() => [
+                isReady.value && unref(item) && Object.keys(unref(item)) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                  createElementVNode("div", _hoisted_4, [
+                    createVNode(_component_VcForm, {
+                      ref: "formItem",
+                      class: "tw-grow tw-p-4"
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(SchemaRender), {
+                          modelValue: unref(item),
+                          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(item) ? item.value = $event : item = $event),
+                          "ui-schema": form.value.children,
+                          context: bladeContext.value,
+                          "current-locale": toValue(unref(unreffedScope))?.multilanguage?.currentLocale
+                        }, null, 8, ["modelValue", "ui-schema", "context", "current-locale"])
+                      ]),
+                      _: 1
+                    }, 512)
+                  ])
+                ])) : createCommentVNode("", true)
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 2
+      }, [
+        bladeOptions ? {
+          name: "actions",
+          fn: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(bladeOptions, (value, key, index) => {
+              return openBlock(), createBlock(resolveDynamicComponent(value), {
+                key: `blade-actions-slot-${key}-${index}`
+              });
+            }), 128))
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["expanded", "closable", "width", "toolbar-items", "title", "modified"])), [
+        [_directive_loading, unref(loading), "1000"]
+      ]) : createCommentVNode("", true);
+    };
+  }
+});
+
+const pages = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  DynamicBladeForm: _sfc_main,
+  DynamicBladeList: _sfc_main$1
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const handleOverrides = (overrides, schemaCopy) => {
+  let schema = cloneDeep(schemaCopy);
+  if (overrides.remove && overrides.remove.length > 0) {
+    schema = removeHelper(overrides, schema);
+  }
+  if (overrides.upsert && overrides.upsert.length > 0) {
+    schema = upsertHelper(overrides, schema);
+  }
+  return schema;
+};
+const upsertHelper = (overrides, schemaCopy) => {
+  return Object.entries(schemaCopy).reduce(
+    (obj, [, schema]) => {
+      const clonedSchema = cloneDeep(schema);
+      overrides.upsert?.filter((x) => clonedSchema.settings.id === x.id).forEach((args) => {
+        let valueByPath = get(clonedSchema, args.path);
+        let currentPath = args.path;
+        if (!valueByPath) {
+          const pathParts = args.path.split(".");
+          let current = clonedSchema;
+          const generatedPath = [];
+          for (const part of pathParts) {
+            if (Array.isArray(current)) {
+              const currentCopy = [...current];
+              current = current.find((x) => Object.entries(x).some(([key, value]) => key === part || value === part));
+              const fountElIndex = currentCopy.findIndex((x) => x === current);
+              generatedPath.push(fountElIndex);
+            } else {
+              if (current) {
+                current = current[part];
+                generatedPath.push(part);
+              }
+            }
+          }
+          currentPath = generatedPath;
+          valueByPath = current;
+        }
+        if (Array.isArray(valueByPath) && valueByPath.length && typeof args.value === "object" && !Array.isArray(args.value)) {
+          const findIndex$1 = findIndex(valueByPath, { id: args.value.id });
+          const spliced = valueByPath.toSpliced(findIndex$1 >= 0 ? findIndex$1 : args.index ?? 0, findIndex$1 >= 0 ? 1 : 0, args.value);
+          set(clonedSchema, currentPath, spliced);
+        } else if (Array.isArray(valueByPath) && valueByPath.length) {
+          set(clonedSchema, currentPath, [...valueByPath, args.value]);
+        } else {
+          set(clonedSchema, currentPath, args.value);
+        }
+      });
+      const newId = clonedSchema.settings.id;
+      if (newId !== schema.settings.id) {
+        obj[newId] = clonedSchema;
+      } else {
+        obj[schema.settings.id] = clonedSchema;
+      }
+      return obj;
+    },
+    {}
+  );
+};
+const removeHelper = (overrides, schemaCopy) => {
+  return Object.entries(schemaCopy).reduce(
+    (obj, [name, schema]) => {
+      const clonedSchema = cloneDeep(schema);
+      sortByMaxIndexPath(overrides.remove?.filter((x) => schema.settings.id === x.id)).forEach(({ path }) => {
+        if (path) {
+          removePath(clonedSchema, path);
+        }
+      });
+      obj[name] = clonedSchema;
+      return obj;
+    },
+    {}
+  );
+};
+function removePath(obj, path) {
+  const removeItem = get(obj, path);
+  if (removeItem) {
+    const parentPath = path.slice(0, path.lastIndexOf("["));
+    unset(obj, path);
+    update(obj, parentPath, compact);
+  } else {
+    const pathParts = path.split(".");
+    let current = obj;
+    const generatedPath = [];
+    for (const part of pathParts) {
+      if (Array.isArray(current)) {
+        const currentCopy = [...current];
+        current = current.find((x) => Object.entries(x).some(([key, value]) => key === part || value === part));
+        const foundElIndex = currentCopy.findIndex((x) => x === current);
+        generatedPath.push(foundElIndex);
+      } else {
+        if (current) {
+          current = current[part];
+          generatedPath.push(part);
+        }
+      }
+    }
+    unset(obj, generatedPath);
+    update(obj, generatedPath, compact);
+  }
+}
+function sortByMaxIndexPath(items) {
+  return (items || []).sort((a, b) => getMaxIndexFromPath(b.path) - getMaxIndexFromPath(a.path));
+}
+function getMaxIndexFromPath(path) {
+  const matches = path.match(/\[(\d+)\]/g);
+  if (matches) {
+    const indexes = matches.map((match) => parseInt(match.slice(1, -1), 10));
+    return Math.max(...indexes);
+  }
+  return Infinity;
+}
+
+const useDetailsFactory = (factoryParams) => {
+  return function useDetails() {
+    const { setFieldError, setErrors, validate, setFieldValue, setValues, errorBag } = useForm({
+      validateOnMount: false
+    });
+    const item = ref();
+    const itemTemp = ref();
+    const isModified = ref(false);
+    const isFormValid = useIsFormValid();
+    const isDisabled = computed(() => !isModified.value || !isFormValid.value);
+    const { loading: itemLoading, action: load } = useAsync(async (args) => {
+      const res = await factoryParams.load(args);
+      if (res) {
+        item.value = res;
+        item.value && resetModified(item.value);
+      }
+    });
+    const { loading: manageLoading, action: saveChanges } = useAsync(async (itemToSave) => {
+      if (validationState.value.valid) {
+        const res = await factoryParams.saveChanges?.(itemToSave);
+        isModified.value = false;
+        const id = itemToSave?.id ?? res?.id;
+        if (id) {
+          await load({ id });
+        }
+        if (res) return res;
+      } else throw new Error("Form is not valid");
+    });
+    const { loading: removeLoading, action: remove } = useAsync(async (args) => {
+      await factoryParams.remove?.(args);
+    });
+    const loading = useLoading(itemLoading, manageLoading, removeLoading);
+    const validationState = computed(
+      () => ({
+        /**
+         * @deprecated `dirty` - use `modified` instead
+         */
+        dirty: isModified.value,
+        valid: isFormValid.value,
+        modified: isModified.value,
+        disabled: isDisabled.value,
+        validated: !isDisabled.value && isModified.value,
+        cachedValue: itemTemp.value,
+        errorBag: errorBag.value,
+        setFieldError,
+        setErrors,
+        setFieldValue,
+        setValues,
+        resetModified,
+        resetValidationState,
+        validate,
+        setModifiedState
+      })
+    );
+    function setModifiedState(value) {
+      isModified.value = value;
+    }
+    function normalizeData(data) {
+      if (data === null || data === void 0 || data === "" || Array.isArray(data) && data.length === 0 || typeof data === "object" && data !== null && Object.keys(data).length === 0) {
+        return void 0;
+      }
+      if (Array.isArray(data)) {
+        return data.map((item2) => normalizeData(item2));
+      }
+      if (typeof data === "object") {
+        const normalizedObj = {};
+        for (const key in data) {
+          if (Object.prototype.hasOwnProperty.call(data, key)) {
+            normalizedObj[key] = normalizeData(data[key]);
+          }
+        }
+        return normalizedObj;
+      }
+      return data;
+    }
+    watch(
+      [() => item.value, () => itemTemp.value],
+      ([state, stateCopy]) => {
+        const normalizedState = normalizeData(state);
+        const normalizedStateCopy = normalizeData(stateCopy);
+        isModified.value = !isEqual(normalizedState, normalizedStateCopy);
+      },
+      { deep: true }
+    );
+    const resetModified = createUnrefFn((data, updateInitial = false) => {
+      if (updateInitial) {
+        item.value = data;
+        resetValidationState();
+      }
+      itemTemp.value = cloneDeep(data);
+    });
+    const resetValidationState = () => {
+      isModified.value = false;
+    };
+    return {
+      load,
+      saveChanges,
+      remove,
+      loading,
+      item,
+      validationState
+    };
+  };
+};
+
+const useListFactory = (factoryParams) => {
+  return function useList(options) {
+    const pageSize = options?.pageSize || 20;
+    const searchResult = ref();
+    const searchQuery = ref({
+      take: pageSize,
+      sort: options?.sort
+    });
+    const { loading: itemsLoading, action: load } = useAsync(async (query, ...rest) => {
+      searchQuery.value = { ...searchQuery.value, ...query };
+      searchResult.value = await factoryParams.load?.(query, ...rest);
+    });
+    const { loading: itemsDelete, action: remove } = useAsync(async (customQuery, ...rest) => {
+      await factoryParams.remove?.(searchQuery.value, customQuery, ...rest);
+    });
+    const loading = useLoading(itemsLoading, itemsDelete);
+    const pagination = computed(() => ({
+      currentPage: (searchQuery.value?.skip || 0) / Math.max(1, searchQuery?.value.take || 20) + 1,
+      totalCount: searchResult.value?.totalCount || 0,
+      pageSize,
+      get pages() {
+        return Math.ceil(this.totalCount / this.pageSize);
+      }
+    }));
+    return {
+      items: computed(() => searchResult.value?.results),
+      query: searchQuery,
+      loading,
+      pagination,
+      load,
+      remove
+    };
+  };
+};
+
+const registeredModules = {};
+const installedBladeIds = /* @__PURE__ */ new Set();
+const registeredSchemas = {};
+const createAppModuleWrapper = (args) => {
+  const { bladeName, bladeComponent, appModuleContent } = args;
+  return createAppModule(
+    { [bladeName]: bladeComponent },
+    appModuleContent?.locales,
+    appModuleContent?.notificationTemplates,
+    appModuleContent?.moduleComponents
+  );
+};
+const createBladeInstanceConstructor = (bladeComponent, bladeName, json, args, existingComposables, existingMixins) => {
+  if (json.settings.url) {
+    const rawUrl = json.settings.url;
+    bladeComponent.url = rawUrl;
+  }
+  if (json.settings.permissions) {
+    bladeComponent.permissions = json.settings.permissions;
+  }
+  return defineComponent({
+    ...bladeComponent,
+    name: bladeName,
+    isWorkspace: "isWorkspace" in json.settings && json.settings.isWorkspace,
+    menuItem: ("menuItem" in json.settings && json.settings.menuItem) ?? void 0,
+    moduleUid: args.moduleUid,
+    routable: json.settings.routable ?? true,
+    notifyType: json.settings.pushNotificationType,
+    composables: existingComposables ? { ...existingComposables, ...args.composables } : args.composables,
+    setup: (props, ctx) => (bladeComponent?.setup && bladeComponent.setup(
+      reactiveComputed(
+        () => Object.assign({}, props, {
+          model: json,
+          composables: existingComposables ? { ...existingComposables, ...args.composables } : args.composables,
+          mixinFn: existingMixins ? [...existingMixins, ...args.mixin || []] : args.mixin?.length ? args.mixin : void 0
+        })
+      ),
+      ctx
+    )) ?? {}
+  });
+};
+const register = (args, appModuleContent) => {
+  const { app, component, json, options } = args;
+  const bladeId = json.settings.id;
+  const bladeName = kebabToPascal(bladeId);
+  if (registeredModules[bladeName]) {
+    updateBlade(bladeName, json, args, appModuleContent);
+    return registeredModules[bladeName];
+  }
+  const bladeComponent = cloneDeep(component);
+  const BladeInstanceConstructor2 = createBladeInstanceConstructor(bladeComponent, bladeName, json, args);
+  const module = createAppModuleWrapper({
+    bladeName,
+    bladeComponent: BladeInstanceConstructor2,
+    appModuleContent
+  });
+  module.install(app, options);
+  const newModule = {
+    component: BladeInstanceConstructor2,
+    name: bladeName,
+    model: json,
+    composables: { ...args.composables },
+    mixin: args.mixin
+    // Set mixin directly
+  };
+  registeredModules[bladeName] = newModule;
+  return newModule;
+};
+const handleError = (errorKey, schemas, text) => {
+  return console.error(
+    `Module initialization aborted. Key '${errorKey}' not found in schemas: ${Object.keys(schemas).join(
+      ", "
+    )}. Key '${errorKey}' ${text}`
+  );
+};
+const updateBlade = (moduleName, newSchema, args, appModuleContent) => {
+  const existingModule = registeredModules[moduleName];
+  if (existingModule) {
+    existingModule.model = newSchema;
+    const bladeComponent = cloneDeep(args.component);
+    const BladeInstanceConstructor2 = createBladeInstanceConstructor(
+      bladeComponent,
+      moduleName,
+      newSchema,
+      args,
+      existingModule.composables,
+      existingModule.mixin
+    );
+    const module = createAppModuleWrapper({
+      bladeName: moduleName,
+      bladeComponent: BladeInstanceConstructor2,
+      appModuleContent
+    });
+    module.install(args.app, args.options);
+    existingModule.component = BladeInstanceConstructor2;
+    existingModule.mixin = existingModule.mixin ? [...existingModule.mixin, ...args.mixin || []] : args.mixin;
+  }
+};
+function createDynamicAppModule(args) {
+  let schemaCopy = {};
+  if (args.schema && Object.keys(args.schema).length > 0) {
+    const moduleUid = uniqueId("module_");
+    Object.entries(args.schema).forEach(([, schema]) => {
+      if (schema.settings && schema.settings.id) {
+        schemaCopy[schema.settings.id] = { ...cloneDeep(schema), moduleUid };
+        registeredSchemas[schema.settings.id] = schemaCopy[schema.settings.id];
+      }
+    });
+  } else {
+    schemaCopy = cloneDeep({ ...registeredSchemas });
+  }
+  if (args.overrides) {
+    schemaCopy = handleOverrides(args.overrides, schemaCopy);
+    const newUid = uniqueId("module_");
+    const newSchemas = Object.entries(schemaCopy).reduce(
+      (acc, [key, schema]) => {
+        acc[key] = { ...schema, moduleUid: newUid };
+        return acc;
+      },
+      {}
+    );
+    Object.assign(registeredSchemas, newSchemas);
+  }
+  const moduleInitializer = findKey(schemaCopy, (o) => o.settings.isWorkspace);
+  const everyHasTemplate = every(Object.values(schemaCopy), (o) => o?.settings?.component);
+  if (!everyHasTemplate) handleError("component", schemaCopy, "must be included in 'settings' of each file");
+  if (!moduleInitializer)
+    handleError("isWorkspace", schemaCopy, "must be included in one of the files to initialize the module workspace");
+  return {
+    install(app, options) {
+      const bladePages = { ...pages };
+      const appModuleContent = {
+        locales: args?.locales,
+        notificationTemplates: args?.notificationTemplates,
+        moduleComponents: args?.moduleComponents
+      };
+      const getComposables = (bladeId) => {
+        const composable = schemaCopy[bladeId]?.settings.composable;
+        const composableFn = Object.values(registeredModules).find((module) => {
+          return module.composables?.[composable];
+        });
+        if (!composableFn) {
+          return args.composables;
+        }
+        return composableFn?.composables;
+      };
+      Object.entries(schemaCopy).forEach(([, JsonSchema], index) => {
+        const bladeId = JsonSchema.settings.id;
+        const mixin = args.mixin?.[bladeId];
+        const registerArgs = {
+          app,
+          component: bladePages[JsonSchema.settings.component],
+          composables: getComposables(JsonSchema.settings.id),
+          mixin,
+          json: JsonSchema,
+          options,
+          moduleUid: JsonSchema.moduleUid
+        };
+        if (installedBladeIds.has(bladeId)) {
+          updateBlade(kebabToPascal(bladeId), JsonSchema, registerArgs, index === 0 ? appModuleContent : void 0);
+          return;
+        }
+        installedBladeIds.add(bladeId);
+        register(registerArgs, index === 0 ? appModuleContent : void 0);
+      });
+    }
+  };
+}
+
+export { _sfc_main as _, _sfc_main$1 as a, useListFactory as b, createDynamicAppModule as c, index as i, useDetailsFactory as u };