@vc-shell/framework 1.0.116 → 1.0.117

package/shared/components/popup-handler/composables/usePopup/index.ts

@@ -1,6 +1,18 @@
 import { VcPopup } from "./../../../../../ui/components";
-import { markRaw, getCurrentInstance, inject, reactive, shallowRef, nextTick, Ref, watch, MaybeRef, unref } from "vue";
-import { UsePopupInternal, UsePopupProps } from "./../../types";
+import {
+  markRaw,
+  getCurrentInstance,
+  inject,
+  reactive,
+  shallowRef,
+  nextTick,
+  Ref,
+  watch,
+  MaybeRef,
+  unref,
+  DefineComponent,
+} from "vue";
+import { ComponentPublicInstanceConstructor, PopupPlugin, UsePopupInternal, UsePopupProps } from "./../../types";
 import { popupPluginInstance } from "./../../plugin";
 import { useI18n } from "vue-i18n";
 
@@ -11,21 +23,23 @@ interface IUsePopup {
   showError(message: string | Ref<string>): void;
 }
 
-export function usePopup<T = InstanceType<typeof VcPopup>["$props"]>(props?: MaybeRef<UsePopupProps<T>>): IUsePopup {
+export function usePopup<T extends ComponentPublicInstanceConstructor<any> = typeof VcPopup>(
+  options?: MaybeRef<UsePopupProps<T>>
+): IUsePopup {
   const { t } = useI18n({ useScope: "global" });
   const instance = getCurrentInstance();
-  const popupInstance = (instance && inject("popupPlugin")) || popupPluginInstance;
-  let rawPopup = createInstance(unref(props));
+  const popupInstance: PopupPlugin = (instance && inject("popupPlugin")) || popupPluginInstance;
+  let rawPopup = createInstance(unref(options));
 
   watch(
-    () => props,
+    () => options,
     (newVal) => {
       rawPopup = createInstance(unref(newVal));
     },
     { deep: true }
   );
 
-  async function open(customInstance?: UsePopupProps<unknown>) {
+  async function open(customInstance?: UsePopupProps<DefineComponent>) {
     let activeInstance;
     await nextTick();
     if (popupInstance) {
@@ -35,7 +49,7 @@ export function usePopup<T = InstanceType<typeof VcPopup>["$props"]>(props?: May
     activeInstance.popups.push(rawPopup || customInstance);
   }
 
-  function close(customInstance?: UsePopupProps<unknown>) {
+  function close(customInstance?: UsePopupProps<DefineComponent>) {
     let activeInstance;
     if (popupInstance) {
       activeInstance = popupInstance;
@@ -45,7 +59,7 @@ export function usePopup<T = InstanceType<typeof VcPopup>["$props"]>(props?: May
   }
 
   async function showConfirmation(message: string | Ref<string>): Promise<boolean> {
-    let resolvePromise;
+    let resolvePromise: (value: boolean | PromiseLike<boolean>) => void;
     const confirmation = createInstance({
       component: VcPopup,
       props: {
@@ -96,15 +110,17 @@ export function usePopup<T = InstanceType<typeof VcPopup>["$props"]>(props?: May
     popupInstance.popups.push(confirmation);
   }
 
-  function createInstance<T>(props: UsePopupProps<T>) {
+  function createInstance<T extends ComponentPublicInstanceConstructor<any> = typeof VcPopup>(
+    options: UsePopupProps<T>
+  ) {
     return (
-      props &&
+      options &&
       (reactive({
         id: Symbol("usePopup"),
-        ...createComponent(props),
+        ...createComponent(options),
         close: close,
         open: open,
-      }) as UsePopupProps<unknown> & UsePopupInternal)
+      }) as UsePopupProps<DefineComponent> & UsePopupInternal)
     );
   }
 
@@ -116,12 +132,14 @@ export function usePopup<T = InstanceType<typeof VcPopup>["$props"]>(props?: May
   };
 }
 
-function createComponent<T>(props: UsePopupProps<T>) {
+function createComponent<T extends ComponentPublicInstanceConstructor<any> = typeof VcPopup>(
+  options: UsePopupProps<T>
+) {
   const slots =
-    typeof props.slots === "undefined"
+    typeof options.slots === "undefined"
       ? {}
       : Object.fromEntries(
-          Object.entries(props.slots).map(([slotName, slotContent]) => {
+          Object.entries(options.slots).map(([slotName, slotContent]) => {
             if (typeof slotContent === "string") {
               return [slotName, slotContent];
             }
@@ -130,8 +148,8 @@ function createComponent<T>(props: UsePopupProps<T>) {
         );
 
   return {
-    ...props,
+    ...options,
     slots,
-    component: markRaw(shallowRef(props.component)),
+    component: markRaw(shallowRef(options.component)),
   };
 }

package/shared/components/popup-handler/plugin.ts

@@ -1,9 +1,9 @@
-import { App, shallowReactive } from "vue";
+import { App, shallowReactive, DefineComponent } from "vue";
 import * as components from "./components";
 import { PopupPlugin, UsePopupProps, UsePopupInternal } from "./types";
 import { createModule } from "./../../../core/plugins";
 
-export let popupPluginInstance;
+export let popupPluginInstance: PopupPlugin;
 
 export const VcPopupHandler = {
   install(app: App) {
@@ -11,7 +11,7 @@ export const VcPopupHandler = {
     createModule(components).install(app);
 
     // Plugin
-    const popups = shallowReactive<(UsePopupProps<unknown> & UsePopupInternal)[]>([]);
+    const popups = shallowReactive<(UsePopupProps<DefineComponent> & UsePopupInternal)[]>([]);
 
     const popupPlugin: PopupPlugin = {
       popups,

package/shared/components/popup-handler/types/index.ts

@@ -1,7 +1,13 @@
-import { Component, Slot as VueSlot } from "vue";
+import { Component, ComponentPublicInstance, DefineComponent, Slot as VueSlot } from "vue";
 
-export type RawProps<T> = Omit<T, `on${string}`>;
-export type RawEmits<T> = Pick<T, Extract<keyof T, `on${string}`>>;
+export type RawProps<T extends ComponentPublicInstanceConstructor<any>> = Omit<
+  InstanceType<T>["$props"],
+  `on${string}`
+>;
+export type RawEmits<T extends ComponentPublicInstanceConstructor<any>> = Pick<
+  InstanceType<T>["$props"],
+  Extract<keyof InstanceType<T>["$props"], `on${string}`>
+>;
 export type Slot = string | Component | VueSlot;
 
 export interface UsePopupInternal {
@@ -11,15 +17,18 @@ export interface UsePopupInternal {
 }
 
 export interface PopupPlugin {
-  popups: (UsePopupProps<unknown> & UsePopupInternal)[];
+  popups: Partial<UsePopupProps<DefineComponent> & UsePopupInternal>[];
 }
 
-export interface ComponentPublicInstanceConstructor<T = unknown> {
-  new (...args: unknown[]): { $props: T };
+export interface ComponentPublicInstanceConstructor<T extends ComponentPublicInstance> {
+  __isFragment?: never;
+  __isTeleport?: never;
+  __isSuspense?: never;
+  new (...args: unknown[]): T;
 }
 
-export interface UsePopupProps<T> {
-  component: ComponentPublicInstanceConstructor<T>;
+export interface UsePopupProps<T extends ComponentPublicInstanceConstructor<any>> {
+  component: T;
   emits?: RawEmits<T>;
   props?: RawProps<T>;
   slots?: {

package/shared/modules/assets-manager/components/assets-manager/assets-manager.vue

@@ -143,7 +143,7 @@
 
 <script setup lang="ts">
 import { Asset, IActionBuilderResult, IBladeToolbar, ITableColumns } from "../../../../../core/types";
-import { ref, computed, onMounted, unref, watch, markRaw } from "vue";
+import { ref, computed, onMounted, unref, watch, markRaw, UnwrapNestedRefs } from "vue";
 import { useI18n } from "vue-i18n";
 import moment from "moment";
 import Assets from "./../../../assets/components/assets-details/assets-details.vue";
@@ -187,7 +187,7 @@ const uploader = ref();
 const loading = ref(false);
 const selectedItems = ref([]);
 const readonly = computed(() => props.options.disabled);
-let assetsCopy;
+let assetsCopy: Asset[];
 const modified = ref(false);
 
 const { openBlade } = useBladeNavigation();
@@ -271,7 +271,7 @@ onMounted(() => {
   assetsCopy = _.cloneDeep(props.options?.assets);
 });
 
-function sortAssets(event: { dragIndex: number; dropIndex: number; value: Asset[] }) {
+async function sortAssets(event: { dragIndex: number; dropIndex: number; value: Asset[] }) {
   if (
     props.options.assetsEditHandler &&
     typeof props.options.assetsEditHandler === "function" &&
@@ -282,7 +282,7 @@ function sortAssets(event: { dragIndex: number; dropIndex: number; value: Asset[
       return item;
     });
 
-    defaultAssets.value = props.options.assetsEditHandler(sorted);
+    defaultAssets.value = await props.options.assetsEditHandler(sorted);
   }
 }
 
@@ -363,12 +363,13 @@ const onSelectionChanged = (items: Asset[]) => {
   selectedItems.value = items;
 };
 
-const actionBuilder = (): IActionBuilderResult[] => {
-  const result = [];
+const actionBuilder = (): IActionBuilderResult<Asset>[] => {
+  const result: IActionBuilderResult<Asset>[] = [];
 
   result.push({
     icon: "fas fa-edit",
     title: computed(() => t("ASSETS_MANAGER.TABLE.ACTIONS.EDIT")),
+    variant: "success",
     clickHandler(item: Asset) {
       onItemClick(item);
     },

package/shared/modules/dynamic/components/FIELD_MAP.ts

@@ -9,8 +9,13 @@ import EditorField from "./fields/EditorField";
 import GalleryField from "./fields/GalleryField";
 import Button from "./fields/Button";
 import StatusField from "./fields/StatusField";
+import { ControlSchema } from "../types";
+import { ConcreteComponent } from "vue";
 
-const FIELD_MAP = {
+type AvailableComponents = Exclude<ControlSchema["component"], "vc-widgets">;
+type TFieldMap = Record<AvailableComponents, ConcreteComponent>;
+
+const FIELD_MAP: TFieldMap = {
   "vc-select": SelectField,
   "vc-card": Card,
   "vc-input": InputField,

package/shared/modules/dynamic/components/SchemaRender.ts

@@ -18,11 +18,11 @@ const schemeRenderProps = {
   uiSchema: {
     type: Array as PropType<ControlSchema[]>,
     required: true,
-    default: () => [],
+    default: (): ControlSchema[] => [],
   },
   currentLocale: {
     type: String,
-    default: undefined,
+    default: "",
   },
 };
 
@@ -54,7 +54,7 @@ export default defineComponent({
       { deep: true }
     );
 
-    function emitChange(newVal) {
+    function emitChange(newVal: unknown) {
       ctx.emit("update:modelValue", newVal);
     }
 

package/shared/modules/dynamic/components/factories.ts

@@ -105,7 +105,7 @@ export const CardCollection = ({ props, options, slots }: Partial<ICardCollectio
 });
 
 export const DynamicProperties = ({ props, options }: Partial<IDynamicProperties>): IDynamicProperties => ({
-  component: markRaw(VcDynamicProperty) as any,
+  component: markRaw(VcDynamicProperty),
   props: {
     ...props,
     ...ControlBaseProps(props),

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

@@ -12,7 +12,7 @@ export default {
   setup(props: ExtractPropTypes<typeof componentProps> & { element: CardSchema }) {
     const isMounted = useMounted();
 
-    const commentRecursiveNodeCheck = (node: VNodeChild | VNodeNormalizedChildren) => {
+    const commentRecursiveNodeCheck = (node: VNodeChild | VNodeNormalizedChildren): boolean => {
       return _.every(Array.isArray(node) ? node : [node], (nodeItem) => {
         if (typeof nodeItem === "object") {
           if (
@@ -52,7 +52,7 @@ export default {
           header: props.element.label,
           isCollapsable: props.element.collapsible,
           isCollapsed: restoreCollapsed(props.element.id),
-          "onState:collapsed": (e) => handleCollapsed(props.element.id, e),
+          "onState:collapsed": (e: boolean) => handleCollapsed(props.element.id, e),
         },
         options: props.baseOptions,
 

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ExtractPropTypes, computed, h, inject, ref, toRefs, toValue, unref, watch, Comment } from "vue";
+import { ExtractPropTypes, computed, h, ref, toValue, watch, UnwrapNestedRefs } from "vue";
 import { DynamicProperties } from "../factories";
 import componentProps from "./props";
 import { unrefNested } from "../../helpers/unrefNested";
@@ -7,6 +7,24 @@ import { reactify, reactiveComputed } from "@vueuse/core";
 import * as _ from "lodash-es";
 import { DynamicPropertiesSchema } from "../../types";
 import { setModel } from "../../helpers/setters";
+import { IDynamicProperties } from "../../types/models";
+
+interface IProperty {
+  [x: string]: unknown;
+  type: string;
+  required: boolean;
+  multivalue?: boolean;
+  multilanguage?: boolean;
+  valueType: string;
+  dictionary?: boolean;
+  name: string;
+  displayNames: { name?: string; languageCode?: string }[];
+  validationRule?: {
+    charCountMin: number;
+    charCountMax: number;
+    regExp: string;
+  };
+}
 
 export default {
   name: "DynamicProperty",
@@ -35,23 +53,25 @@ export default {
       { deep: true, immediate: true }
     );
 
-    const filteredProps = reactify((prop: any, { 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;
-        });
+    const filteredProps = reactify(
+      (prop: IProperty[], { include, exclude }: { include: string[]; exclude: string[] }) => {
+        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;
       }
-      return null;
-    });
+    );
 
     const dynamicProps = filteredProps(internalModel, {
       include: props.element?.include,
       exclude: props.element?.exclude,
     });
 
-    const properties = reactiveComputed(() => {
+    const properties: UnwrapNestedRefs<IDynamicProperties[]> = reactiveComputed(() => {
       return (dynamicProps.value || [])?.map((prop) =>
         DynamicProperties({
           props: {

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

@@ -13,7 +13,7 @@ import { setModel } from "../../helpers/setters";
 export default {
   name: "GalleryField",
   props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: GallerySchema }, ctx) {
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: GallerySchema }) {
     if (!_.has(props.bladeContext.scope, "assetsHandler.images")) {
       throw new Error(
         `There is no assetsHandler.images config provided in blade scope: ${JSON.stringify(

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

@@ -1,8 +1,14 @@
-import { h, resolveComponent, ExtractPropTypes, Component } from "vue";
+import { h, resolveComponent, ExtractPropTypes, Component, VNode } from "vue";
 import { SelectField } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
 import { SelectSchema } from "../../types";
+import { VcSelect } from "../../../../../ui/components";
+import type { ComponentSlots } from "vue-component-type-helpers";
+
+type TScope =
+  | Parameters<ComponentSlots<typeof VcSelect>["option"]>["0"]
+  | Parameters<ComponentSlots<typeof VcSelect>["selected-item"]>["0"];
 
 export default {
   name: "SelectField",
@@ -25,10 +31,10 @@ export default {
         slots:
           props.element.customTemplate &&
           ["selected-item", "option"].reduce((obj, slot) => {
-            obj[slot] = (scope) =>
+            obj[slot] = (scope: TScope) =>
               h(resolveComponent(props.element.customTemplate.component), { context: scope, slotName: slot });
             return obj;
-          }, {}),
+          }, {} as Record<string, (scope: TScope) => VNode>),
       });
 
       const render = h(field.component as unknown as Component, field.props, field.slots);

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

@@ -1,4 +1,4 @@
-import { computed, h, unref, useSlots, defineComponent } from "vue";
+import { computed, h, unref, useSlots, defineComponent, ComputedRef } from "vue";
 import { unrefNested } from "../../helpers/unrefNested";
 import { Field } from "vee-validate";
 import { reactify } from "@vueuse/core";
@@ -20,7 +20,7 @@ export default defineComponent({
         : String(props.props.key)
     );
 
-    const fieldNameLang = reactify((name) => {
+    const fieldNameLang = reactify((name: string) => {
       return props.props.multilanguage ? name + "_" + props.props.currentLanguage : name;
     });
 
@@ -37,7 +37,7 @@ export default defineComponent({
           ).value,
         },
         {
-          default: ({ errorMessage, errors }) => {
+          default: ({ errorMessage, errors }: { errorMessage: ComputedRef<string | undefined>; errors: string[] }) => {
             return slots.default().map((slot) =>
               h(slot, {
                 ...props.props,

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

@@ -60,7 +60,7 @@ export default <Query>(args: { data: Data; query: MaybeRef<Query>; load: AsyncAc
   const _data = args.data;
 
   const isFilterVisible = ref(true);
-  const filter = reactive({});
+  const filter: Record<string, unknown> = reactive({});
 
   const controls = ref<Control[]>([]);
 
@@ -74,21 +74,27 @@ export default <Query>(args: { data: Data; query: MaybeRef<Query>; load: AsyncAc
   onMounted(() => createFilterControls());
 
   function isItemSelected(value: string, field: string) {
-    return filter[field]?.some((x) => x === value);
+    const item = filter[field];
+    if (Array.isArray(item) && typeof item !== "string") {
+      return item.some((x) => x === value);
+    }
   }
 
   function selectFilterItem(e: boolean, value: string, field: string) {
-    const isSelected = filter[field]?.includes(value);
-
-    if (!Array.isArray(filter[field])) {
+    const item = filter[field];
+    let isSelected = false;
+
+    if (Array.isArray(item)) {
+      isSelected = item.includes(value);
+
+      if (e && !isSelected) {
+        item.push(value);
+      } else if (!e && isSelected) {
+        filter[field] = item.filter((x) => x !== value);
+      }
+    } else {
       filter[field] = [];
     }
-
-    if (e && !isSelected) {
-      filter[field]?.push(value);
-    } else if (!e && isSelected) {
-      filter[field] = filter[field].filter((x) => x !== value);
-    }
   }
 
   function createFilterControls() {
@@ -109,7 +115,7 @@ export default <Query>(args: { data: Data; query: MaybeRef<Query>; load: AsyncAc
         }
 
         return obj;
-      }, {});
+      }, {} as Record<string, ReturnType<typeof Checkbox> | ReturnType<typeof InputField>>);
 
       return {
         title: item.title,
@@ -125,7 +131,7 @@ export default <Query>(args: { data: Data; query: MaybeRef<Query>; load: AsyncAc
         props: {
           classNames: "tw-mb-2",
           modelValue: computed(() => isItemSelected(currC.value, control.field)),
-          "onUpdate:modelValue": (e) => selectFilterItem(e, currC.value, control.field),
+          "onUpdate:modelValue": (e: boolean) => selectFilterItem(e, currC.value, control.field),
         },
         slots: {
           default: () => currC.displayName,
@@ -136,7 +142,7 @@ export default <Query>(args: { data: Data; query: MaybeRef<Query>; load: AsyncAc
       });
 
       return obj;
-    }, {});
+    }, {} as Record<string, ReturnType<typeof Checkbox>>);
   }
 
   function createInput(control: RawControl) {
@@ -146,7 +152,7 @@ export default <Query>(args: { data: Data; query: MaybeRef<Query>; load: AsyncAc
         classNames: "tw-mb-3",
         label: control.label,
         modelValue: computed(() => filter[control.field]),
-        "onUpdate:modelValue": (e) => (filter[control.field] = e),
+        "onUpdate:modelValue": (e: unknown) => (filter[control.field] = e),
       },
       options: {
         visibility: computed(() => true),

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

@@ -1,4 +1,4 @@
-import { unref, computed, toValue, h, UnwrapNestedRefs, MaybeRef, reactive } from "vue";
+import { unref, computed, toValue, h, UnwrapNestedRefs, MaybeRef, reactive, VNode } from "vue";
 import FIELD_MAP from "../components/FIELD_MAP";
 import { ControlSchema } from "../types";
 import { IControlBaseProps, IControlBaseOptions } from "../types/models";
@@ -26,7 +26,7 @@ function nodeBuilder<Context, BContext extends UnwrapNestedRefs<DetailsBladeCont
   bladeContext: BContext;
   currentLocale: MaybeRef<string>;
   formData: FormData;
-}) {
+}): VNode | false {
   const { controlSchema, parentId, internalContext, bladeContext, currentLocale, formData } = args;
   if (!controlSchema) return false;
 
@@ -61,14 +61,14 @@ function nodeBuilder<Context, BContext extends UnwrapNestedRefs<DetailsBladeCont
     ),
   });
 
-  const component = FIELD_MAP[controlSchema.component];
+  const component = FIELD_MAP[controlSchema.component as keyof typeof FIELD_MAP];
 
   const fieldsHandler = computed(() => {
     if (!("fields" in controlSchema)) return null;
     const fieldsModel = getModel(controlSchema.property, internalContext);
 
     if (toValue(fieldsModel) && Array.isArray(toValue(fieldsModel))) {
-      return toValue(fieldsModel).map((model) =>
+      return toValue(fieldsModel).map((model: { [x: string]: unknown; id: string }) =>
         controlSchema.fields.map((fieldItem) =>
           nodeBuilder({
             controlSchema: fieldItem,

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

@@ -1,7 +1,7 @@
 import * as _ from "lodash-es";
 import { DynamicSchema, OverridesSchema, OverridesUpsert } from "../types";
 
-export const handleOverrides = (overrides, schemaCopy: { [key: string]: DynamicSchema }) => {
+export const handleOverrides = (overrides: OverridesSchema, schemaCopy: { [key: string]: DynamicSchema }) => {
   let schema = _.cloneDeep(schemaCopy);
 
   // REMOVE
@@ -49,10 +49,10 @@ const upsertHelper = (overrides: OverridesSchema, schemaCopy: { [key: string]: D
       );
     obj[name] = clonedSchema;
     return obj;
-  }, {});
+  }, {} as Record<string, DynamicSchema>);
 };
 
-const removeHelper = (overrides, schemaCopy: { [key: string]: DynamicSchema }) => {
+const removeHelper = (overrides: OverridesSchema, schemaCopy: { [key: string]: DynamicSchema }) => {
   return Object.entries(schemaCopy).reduce((obj, [name, schema]) => {
     const clonedSchema = _.cloneDeep(schema);
     overrides.remove
@@ -66,5 +66,5 @@ const removeHelper = (overrides, schemaCopy: { [key: string]: DynamicSchema }) =
       }, {});
     obj[name] = clonedSchema;
     return obj;
-  }, {});
+  }, {} as Record<string, DynamicSchema>);
 };

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

@@ -9,7 +9,7 @@ function setModel(args: {
 }) {
   const { property, value, option, context } = args;
 
-  _.set(context, property, option ? value[option] : value);
+  _.set(context, property, option ? value[option as keyof typeof value] : value);
 }
 
 export { setModel };

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

@@ -15,7 +15,9 @@ export const toolbarReducer = (args: {
   const toolbarMethodsMerge = _.merge(ref({}), ref(args.defaultToolbarBindings), ref(args.customToolbarConfig));
   return computed(() =>
     args.defaultToolbarSchema.reduce((acc, curr) => {
-      const toolbarItemCtx = toolbarMethodsMerge.value[curr.method];
+      const toolbarItemCtx = toolbarMethodsMerge.value[
+        curr.method as keyof typeof toolbarMethodsMerge.value
+      ] as IBladeToolbar;
       if (toolbarItemCtx) {
         const context =
           typeof toolbarItemCtx === "function"

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

@@ -1,10 +1,10 @@
 import { unref } from "vue";
 
-export function unrefNested<T>(field: T) {
+export function unrefNested<T extends Record<string, unknown>>(field: T) {
   const unreffedProps = {} as T;
 
   if (field) {
-    Object.keys(field).forEach((key) => {
+    Object.keys(field).forEach((key: keyof T) => {
       unreffedProps[key] = unref(field[key]);
     });
 

package/shared/modules/dynamic/index.ts

@@ -66,6 +66,7 @@ const register = (
   const defineBladeComponent = defineComponent({
     ...bladeComponent,
     name: bladeName,
+    isWorkspace: "isWorkspace" in json.settings && json.settings.isWorkspace,
     setup: (props, ctx) =>
       (bladeComponent as DefineComponent).setup(
         reactiveComputed(() => ({
@@ -139,7 +140,7 @@ export const createDynamicAppModule = <T extends BladeMenu>(args: {
           const blade = register(
             {
               app,
-              component: bladePages[JsonSchema.settings.component],
+              component: bladePages[JsonSchema.settings.component as keyof typeof bladePages],
               composables: { ...args.composables },
               json: JsonSchema,
               options,

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

@@ -190,7 +190,10 @@ const bladeMultilanguage = reactiveComputed(() => {
 });
 
 const bladeWidgets = computed(() => {
-  return widgets.value?.children?.map((x) => resolveComponent(x));
+  return widgets.value?.children?.map((x) => {
+    if (typeof x === "string") return resolveComponent(x);
+    else throw new Error(`Component is required in widget: ${x}`);
+  });
 });
 
 const bladeOptions = reactive({