@vc-shell/framework 1.0.118 → 1.0.120

package/dist/ui/components/organisms/vc-table/_internal/vc-table-mobile-item/vc-table-mobile-item.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vc-table-mobile-item.vue.d.ts","sourceRoot":"","sources":["../../../../../../../ui/components/organisms/vc-table/_internal/vc-table-mobile-item/vc-table-mobile-item.vue.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAGtE,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACxB;AACD,MAAM,WAAW,SAAS;IAExB,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;IACjB,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;CAClC;;;;iCAkhBgC,oBAAoB,EAAE;;kBACrC,MAAM;;;yBA7BM,GAAG;;WAqC1B,GAAG;;4BADM,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,KAAG,IAAI;;;;qCARxB,oBAAoB,EAAE;;sBACrC,MAAM;;oBAOR,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBArCoB,GAAG;;;;;;;;;;yCA4BA,oBAAoB,EAAE;;0BACrC,MAAM;;wBAOR,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;eAClD,GAAG;;6BArCoB,GAAG;;;;;AAnfjC,wBA6hB2E"}
+{"version":3,"file":"vc-table-mobile-item.vue.d.ts","sourceRoot":"","sources":["../../../../../../../ui/components/organisms/vc-table/_internal/vc-table-mobile-item/vc-table-mobile-item.vue.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAGtE,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACxB;AACD,MAAM,WAAW,SAAS;IAExB,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;IACjB,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;CAClC;;;;iCA0gB8B,oBAAoB,EAAE;;kBACrC,MAAM;;;yBA7BQ,GAAG;;WAqC1B,GAAG;;4BADM,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,KAAG,IAAI;;;;qCAR1B,oBAAoB,EAAE;;sBACrC,MAAM;;oBAON,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBArCoB,GAAG;;;;;;;;;;yCA4BF,oBAAoB,EAAE;;0BACrC,MAAM;;wBAON,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;eAClD,GAAG;;6BArCoB,GAAG;;;;;AA3ejC,wBAqhB2E"}

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

@@ -1 +1 @@
-{"version":3,"file":"vc-table.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/organisms/vc-table/vc-table.vue.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"vc-table.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/organisms/vc-table/vc-table.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAWL,QAAQ,EACT,MAAM,KAAK,CAAC;AAOb,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAK/E,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,SAAS;IACxB,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;IACjB,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;CAClC;;WA28DU,MAAM;aAaJ,OAAO;aADP,OAAO;;eAVL,OAAO;aALT,aAAa,EAAE;;;iBAOX,MAAM;YACX,MAAM;cAIJ,SAAS,OAAO,CAAC;;;;;;;mBAh4DM,MAAM;mBAAa,MAAM;;;;qCAs3DzB,oBAAoB,EAAE;kBAEzC,OAAO;iBAER,MAAM;kBAGL,MAAM;wBACA,MAAM;kBACZ,MAAM;YAEZ,WAAW;eACR,WAAW;wBAGF,MAAM;qBACT,MAAM;gBACX,OAAO;uBACA,OAAO;yBACL,OAAO;sBACV,OAAO;cACf,MAAM;gBACJ,OAAO;;;2CAn9Dc,GAAG,KAAK,GAAG;;;kBACG,aAAa;cAAO,GAAG;wBAJxD,GAAG,KAAK,GAAG;wBACX;YAAE,UAAU,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,GAAG;;;cACZ,GAAG;0BAGvB,GAAG,KAAK,GAAG;uBACd,GAAG,KAAK,GAAG;wBACV,GAAG,KAAK,GAAG;;WAu9DtB,GAAG;;mBAp5D2B,MAAM;mBAAa,MAAM;;;4BAm5D9C,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,KAAG,IAAI;;eA5B9C,MAAM;iBAaJ,OAAO;iBADP,OAAO;;mBAVL,OAAO;iBALT,aAAa,EAAE;;;qBAOX,MAAM;gBACX,MAAM;kBAIJ,SAAS,OAAO,CAAC;;;;;;;uBAh4DM,MAAM;uBAAa,MAAM;;;;yCAs3DzB,oBAAoB,EAAE;sBAEzC,OAAO;qBAER,MAAM;sBAGL,MAAM;4BACA,MAAM;sBACZ,MAAM;gBAEZ,WAAW;mBACR,WAAW;4BAGF,MAAM;yBACT,MAAM;oBACX,OAAO;2BACA,OAAO;6BACL,OAAO;0BACV,OAAO;kBACf,MAAM;oBACJ,OAAO;;oBAOP,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;2CA39D2B,GAAG,KAAK,GAAG;;;kBACG,aAAa;cAAO,GAAG;wBAJxD,GAAG,KAAK,GAAG;wBACX;YAAE,UAAU,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,GAAG;;;cACZ,GAAG;0BAGvB,GAAG,KAAK,GAAG;uBACd,GAAG,KAAK,GAAG;wBACV,GAAG,KAAK,GAAG;;;mBAmEQ,MAAM;mBAAa,MAAM;;;;;;;;mBAu3DnD,MAAM;qBAaJ,OAAO;qBADP,OAAO;;uBAVL,OAAO;qBALT,aAAa,EAAE;;;yBAOX,MAAM;oBACX,MAAM;sBAIJ,SAAS,OAAO,CAAC;;;;;;;2BAh4DM,MAAM;2BAAa,MAAM;;;;6CAs3DzB,oBAAoB,EAAE;0BAEzC,OAAO;yBAER,MAAM;0BAGL,MAAM;gCACA,MAAM;0BACZ,MAAM;oBAEZ,WAAW;uBACR,WAAW;gCAGF,MAAM;6BACT,MAAM;wBACX,OAAO;+BACA,OAAO;iCACL,OAAO;8BACV,OAAO;sBACf,MAAM;wBACJ,OAAO;;wBAOP,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;eAClD,GAAG;;+CA39D2B,GAAG,KAAK,GAAG;;;sBACG,aAAa;kBAAO,GAAG;4BAJxD,GAAG,KAAK,GAAG;4BACX;gBAAE,UAAU,EAAE,MAAM,IAAI,CAAA;aAAE,KAAK,GAAG;;;kBACZ,GAAG;8BAGvB,GAAG,KAAK,GAAG;2BACd,GAAG,KAAK,GAAG;4BACV,GAAG,KAAK,GAAG;;;uBAmEQ,MAAM;uBAAa,MAAM;;;;;AAjF9D,wBA0+D2E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.0.118",
+  "version": "1.0.120",
   "main": "./dist/framework.mjs",
   "module": "./dist/framework.mjs",
   "types": "./dist/index.d.ts",
@@ -56,9 +56,9 @@
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@vc-shell/api-client-generator": "^1.0.118",
-    "@vc-shell/config-generator": "^1.0.118",
-    "@vc-shell/ts-config": "^1.0.118",
+    "@vc-shell/api-client-generator": "^1.0.120",
+    "@vc-shell/config-generator": "^1.0.120",
+    "@vc-shell/ts-config": "^1.0.120",
     "@vitejs/plugin-vue": "^4.2.3",
     "sass": "^1.62.1",
     "typescript": "^5.2.2",

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

@@ -82,13 +82,14 @@ export const StatusField = ({ props, slots, options }: Partial<IStatusField>): I
   slots,
 });
 
-export const InputField = ({ props, options }: Partial<IInputField>): IInputField => ({
+export const InputField = ({ props, options, slots }: Partial<IInputField>): IInputField => ({
   component: markRaw(VcInput),
   props: {
     ...ControlBaseProps(props),
     ...props,
   },
   options: ControlBase(options),
+  slots,
 });
 
 export const ContentField = ({ props, options }: Partial<IContentField>): IContentField => ({

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

@@ -1,10 +1,7 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { h, ExtractPropTypes } from "vue";
+import { h, ExtractPropTypes, Component, unref } from "vue";
 import { EditorField } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
-import { unrefNested } from "../../helpers/unrefNested";
-import { getModel } from "../../helpers/getters";
 
 export default {
   name: "EditorField",
@@ -15,12 +12,12 @@ export default {
         props: {
           ...props.baseProps,
           currentLanguage: props.currentLocale,
-          assetsFolder: props.formData.id || props.formData.categoryId,
+          assetsFolder: unref(props.formData).id || unref(props.formData).categoryId,
         },
         options: props.baseOptions,
       });
 
-      const render = h(field.component as any, field.props);
+      const render = h(field.component as Component, field.props);
 
       if (field.props.rules) {
         return props.baseOptions.visibility

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

@@ -1,4 +1,4 @@
-import { Ref, h, inject, nextTick, toRefs, ExtractPropTypes } from "vue";
+import { Ref, h, inject, nextTick, toRefs, ExtractPropTypes, toValue } from "vue";
 import componentProps from "./props";
 import * as _ from "lodash-es";
 import { VcButton, VcCol, VcRow } from "../../../../../ui/components";
@@ -14,23 +14,28 @@ export default {
 
     return () =>
       props.baseOptions.visibility
-        ? fieldsetFields.value.map((fields, index, arr) => {
+        ? toValue(fieldsetFields.value).map((fields, index, arr) => {
             const divideByCols = Array.isArray(fields) && _.chunk(fields, props.element.columns || 1);
 
             return h(
               "div",
               {
-                class: "tw-flex tw-row tw-relative",
+                class: "tw-flex tw-row tw-relative test ",
                 key: `fieldset-${index}`,
               },
               [
-                h("div", { class: "tw-flex-1 tw-gap-4 tw-flex tw-flex-col" }, [
+                h("div", { class: "tw-flex-1 tw-gap-4 tw-flex tw-flex-col tw-min-w-0" }, [
                   divideByCols.map((itemsArr, colIndex) => {
                     return h(
                       VcRow,
                       {
                         key: `col-${colIndex}-${index}`,
-                        class: "tw-relative tw-gap-4",
+                        class: {
+                          "tw-relative": true,
+                          "tw-gap-4": true,
+                          "!tw-flex-wrap": true,
+                          "!tw-flex !tw-flex-row": !!props.element.aspectRatio,
+                        },
                       },
                       () => [
                         ...itemsArr.map((item, itemIndex) => {
@@ -38,6 +43,8 @@ export default {
                             VcCol,
                             {
                               key: `col-${itemIndex}-${colIndex}-${index}`,
+                              size:
+                                "aspectRatio" in props.element ? props.element.aspectRatio[itemIndex].toString() : "1",
                             },
                             () => {
                               if (typeof item === "object") {

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

@@ -1,4 +1,4 @@
-import { ExtractPropTypes, computed, h, markRaw, reactive, ref, toRefs, toValue, watch } from "vue";
+import { ExtractPropTypes, computed, h, markRaw, reactive, ref, toRefs, toValue, unref, watch } from "vue";
 import { Gallery } from "../factories";
 import componentProps from "./props";
 import { IImage } from "../../../../../core/types";
@@ -45,14 +45,17 @@ export default {
       const imageHandlers = {
         loading,
         async edit(image: IImage) {
-          internalModel.value[props.element.property] = await edit.value(props.formData[props.element.property], image);
+          internalModel.value[props.element.property] = await edit.value(
+            unref(props.formData)[props.element.property] as IImage[],
+            image
+          );
           await editImages(internalModel.value[props.element.property]);
         },
         async upload(files: FileList) {
           internalModel.value[props.element.property] = await upload.value(
             files,
-            props.formData[props.element.property],
-            props.formData.id || props.formData.categoryId,
+            unref(props.formData)[props.element.property] as IImage[],
+            (unref(props.formData).id as string) || (unref(props.formData).categoryId as string),
             props.element.uploadFolder
           );
 
@@ -75,7 +78,7 @@ export default {
             )
           ) {
             internalModel.value[props.element.property] = await remove.value(
-              props.formData[props.element.property],
+              unref(props.formData)[props.element.property] as IImage[],
               image
             );
             await editImages(internalModel.value[props.element.property]);

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

@@ -1,8 +1,16 @@
-import { ExtractPropTypes, h } from "vue";
+import { ExtractPropTypes, h, VNode } from "vue";
 import { InputField } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
-import { InputSchema } from "../../types";
+import { InputSchema, ControlSchema } from "../../types";
+import { nodeBuilder } from "../../helpers/nodeBuilder";
+
+const slotsMap = {
+  append: "append",
+  prepend: "prepend",
+  appendInner: "append-inner",
+  prependInner: "prepend-inner",
+};
 
 export default {
   name: "InputField",
@@ -17,9 +25,23 @@ export default {
           clearable: props.element.clearable || false,
         },
         options: props.baseOptions,
+        slots: Object.entries(slotsMap).reduce((acc, [key, value]: [keyof InputSchema, keyof InputSchema]) => {
+          if (props.element[key]) {
+            acc[value] = () =>
+              nodeBuilder({
+                controlSchema: props.element[key] as ControlSchema,
+                parentId: `${(props.element[key] as ControlSchema).id}`,
+                internalContext: props.fieldContext,
+                bladeContext: props.bladeContext,
+                currentLocale: props.currentLocale,
+                formData: props.formData,
+              });
+          }
+          return acc;
+        }, {} as Record<keyof InputSchema, () => VNode | false>),
       });
 
-      const render = h(field.component, field.props);
+      const render = h(field.component, field.props, field.slots);
 
       if (field.props.rules) {
         return props.baseOptions.visibility

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

@@ -1,4 +1,4 @@
-import { ComputedRef, PropType, UnwrapNestedRefs, VNodeArrayChildren } from "vue";
+import { ComputedRef, MaybeRef, PropType, UnwrapNestedRefs, VNode, VNodeArrayChildren } from "vue";
 import { DetailsBladeContext } from "../../factories";
 import { IControlBaseOptions, IControlBaseProps } from "../../types/models";
 import { ControlSchema } from "../../types";
@@ -21,12 +21,12 @@ export default {
     default: () => ({} as DetailsBladeContext),
   },
   fields: {
-    type: Object as PropType<ComputedRef<VNodeArrayChildren>>,
-    default: () => ({} as ComputedRef<VNodeArrayChildren>),
+    type: Object as PropType<ComputedRef<VNode[][]>>,
+    default: () => ({} as ComputedRef<VNode[][]>),
   },
   formData: {
-    type: Object,
-    default: () => ({}),
+    type: Object as PropType<MaybeRef<Record<string, unknown>>>,
+    default: () => ({} as MaybeRef<Record<string, unknown>>),
   },
   fieldContext: {
     type: Object,

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

@@ -1,4 +1,4 @@
-import { unref, computed, toValue, h, UnwrapNestedRefs, MaybeRef, reactive, Ref, VNode } 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";
@@ -7,7 +7,6 @@ import { setModel } from "./setters";
 import { unwrapInterpolation } from "./unwrapInterpolation";
 import { DetailsBladeContext } from "../factories";
 import * as _ from "lodash-es";
-import { unrefNested } from "./unrefNested";
 
 function disabledHandler(
   disabled: { method?: string } | boolean,
@@ -20,7 +19,25 @@ function disabledHandler(
   return false;
 }
 
-function nodeBuilder<Context, BContext extends UnwrapNestedRefs<DetailsBladeContext>, FormData>(args: {
+type AllKeys<T> = T extends unknown ? keyof T : never;
+type FilterByKnownKey<T, K extends PropertyKey> = T extends unknown ? (K extends keyof T ? T : never) : never;
+
+function safeIn<K extends AllKeys<T>, T extends object>(key: K, obj: T): obj is FilterByKnownKey<T, K> {
+  return key in obj ?? undefined;
+}
+
+function nodeBuilder<
+  Context extends Record<string, unknown>,
+  BContext extends UnwrapNestedRefs<DetailsBladeContext>,
+  FormData
+>({
+  controlSchema,
+  parentId,
+  internalContext,
+  bladeContext,
+  currentLocale,
+  formData,
+}: {
   controlSchema: ControlSchema;
   parentId: string | number;
   internalContext: MaybeRef<Context>;
@@ -28,37 +45,57 @@ function nodeBuilder<Context, BContext extends UnwrapNestedRefs<DetailsBladeCont
   currentLocale: MaybeRef<string>;
   formData: FormData;
 }): VNode | false {
-  const { controlSchema, parentId, internalContext, bladeContext, currentLocale, formData } = args;
   if (!controlSchema) return false;
 
-  const baseProps = reactive<IControlBaseProps>({
-    key: `${parentId}`,
-    label: controlSchema.label ? unref(unwrapInterpolation(controlSchema.label, toValue(internalContext))) : undefined,
-    disabled:
-      ("disabled" in bladeContext.scope && bladeContext.scope.disabled) ||
-      disabledHandler("disabled" in controlSchema && controlSchema.disabled, bladeContext),
-    name: controlSchema.id,
-    rules: controlSchema.rules,
-    placeholder: controlSchema.placeholder,
-    required: controlSchema.rules?.required,
-    modelValue: getModel(controlSchema.property, toValue(internalContext)),
-    "onUpdate:modelValue": (e) => {
+  const name = controlSchema.id;
+  const rules = (safeIn("rules", controlSchema) && controlSchema.rules) || undefined;
+  const placeholder = (safeIn("placeholder", controlSchema) && controlSchema.placeholder) || undefined;
+  const required = safeIn("rules", controlSchema) && controlSchema.rules?.required;
+  const modelValue =
+    (safeIn("property", controlSchema) && getModel(controlSchema.property, toValue(internalContext))) || undefined;
+  const tooltip = (safeIn("tooltip", controlSchema) && controlSchema.tooltip) || undefined;
+  const multilanguage = safeIn("multilanguage", controlSchema) && controlSchema.multilanguage;
+
+  const label = safeIn("label", controlSchema)
+    ? unref(unwrapInterpolation(controlSchema.label, toValue(internalContext)))
+    : undefined;
+
+  const disabled =
+    (safeIn("disabled", bladeContext.scope) && bladeContext.scope.disabled) ||
+    disabledHandler("disabled" in controlSchema && controlSchema.disabled, bladeContext);
+
+  const onUpdateModelValue = (e: unknown) => {
+    if (safeIn("property", controlSchema)) {
       setModel({ property: controlSchema.property, value: e, context: toValue(internalContext) });
 
       if (_.has(controlSchema, "update.method")) {
-        controlSchema.update.method in bladeContext.scope &&
-        typeof bladeContext.scope[controlSchema.update.method] === "function"
-          ? bladeContext.scope[controlSchema.update.method](e, controlSchema.property, toValue(internalContext))
-          : undefined;
+        const updateMethod = safeIn("update", controlSchema) && controlSchema.update.method;
+        if (safeIn(updateMethod, bladeContext.scope) && typeof bladeContext.scope[updateMethod] === "function") {
+          bladeContext.scope[updateMethod](e, controlSchema.property, toValue(internalContext));
+        }
       }
-    },
-    tooltip: controlSchema.tooltip,
-    multilanguage: controlSchema.multilanguage,
+    }
+  };
+
+  const baseProps: IControlBaseProps = reactive({
+    key: `${parentId}`,
+    label,
+    disabled,
+    name,
+    rules,
+    placeholder,
+    required,
+    modelValue,
+    "onUpdate:modelValue": onUpdateModelValue,
+    tooltip,
+    multilanguage,
   });
 
-  const baseOptions = reactive<IControlBaseOptions>({
+  const baseOptions: IControlBaseOptions = reactive({
     visibility: computed(() =>
-      controlSchema.visibility?.method ? toValue(bladeContext.scope[controlSchema.visibility?.method]) : true
+      safeIn("visibility", controlSchema) && controlSchema.visibility?.method
+        ? bladeContext.scope[controlSchema.visibility?.method]
+        : true
     ),
   });
 
@@ -66,15 +103,18 @@ function nodeBuilder<Context, BContext extends UnwrapNestedRefs<DetailsBladeCont
 
   const fieldsHandler = computed(() => {
     if (!("fields" in controlSchema)) return null;
-    const fieldsModel = getModel(controlSchema.property, toValue(internalContext));
 
-    if (toValue(fieldsModel) && Array.isArray(toValue(fieldsModel))) {
-      return toValue(fieldsModel).map((model: { [x: string]: unknown; id: string }) =>
+    const fieldsModel = safeIn("property", controlSchema) && getModel(controlSchema.property, toValue(internalContext));
+
+    const model = toValue(fieldsModel);
+
+    if (model && Array.isArray(model)) {
+      return model.map((modelItem: { [x: string]: unknown; id: string }) =>
         controlSchema.fields.map((fieldItem) =>
           nodeBuilder({
             controlSchema: fieldItem,
-            parentId: `fieldset-${fieldItem.id}-${model.id}`,
-            internalContext: model,
+            parentId: `fieldset-${fieldItem.id}-${modelItem.id}`,
+            internalContext: modelItem,
             bladeContext,
             currentLocale,
             formData,
@@ -82,12 +122,13 @@ function nodeBuilder<Context, BContext extends UnwrapNestedRefs<DetailsBladeCont
         )
       );
     }
+
     return [
       controlSchema.fields.map((field) =>
         nodeBuilder({
           controlSchema: field,
           parentId: `fieldset-${parentId}-${field.id}`,
-          internalContext,
+          internalContext: reactive(unref(internalContext)),
           bladeContext,
           currentLocale,
           formData,
@@ -101,13 +142,13 @@ function nodeBuilder<Context, BContext extends UnwrapNestedRefs<DetailsBladeCont
     baseOptions,
     bladeContext,
     element: controlSchema,
-    currentLocale,
+    currentLocale: unref(currentLocale),
     fields: fieldsHandler,
     formData,
-    fieldContext: internalContext,
+    fieldContext: reactive(unref(internalContext)),
   };
 
-  return h(component, unrefNested(elProps));
+  return h(component, elProps);
 }
 
 export { nodeBuilder };

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

@@ -7,6 +7,8 @@ export type KeysOfUnion<T> = T extends T ? keyof T : never;
 export type Composable<T> = T[keyof T];
 
 export type DynamicSchema = DynamicGridSchema | DynamicDetailsSchema;
+type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+type RequiredBy<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
 
 export interface DynamicGridSchema {
   /**
@@ -82,7 +84,8 @@ export interface SettingsBase {
   pushNotificationType?: string | string[];
 }
 
-export interface ListContentSchema extends SchemaBase {
+export interface ListContentSchema {
+  id: string;
   component: "vc-table";
   filter?: FilterSchema;
   multiselect?: boolean;
@@ -107,7 +110,8 @@ export interface ListContentSchema extends SchemaBase {
   };
 }
 
-export interface FormContentSchema extends SchemaBase {
+export interface FormContentSchema {
+  id: string;
   component: "vc-form";
   children: ControlSchema[];
 }
@@ -116,19 +120,58 @@ export interface GridTemplateOverride {
   component?: string;
 }
 
-export interface VisibilityOptions {
-  method: string;
-}
+/**
+ * Base component schema interface.
+ */
 export interface SchemaBase {
+  /** Unique identifier for component.
+   * @type {string}
+   */
   id: string;
+  /** Control label.
+   * @type {string}
+   */
   label?: string;
-  property?: string;
+  /** Property name to populate the component with data.
+   * @type {string}
+   */
+  property: string;
+  /** Vee-validate and custom validation rules for the schema.
+   *
+   * Available rules - {@link IValidationRules}
+   * @type {IValidationRules}
+   */
   rules?: IValidationRules;
+  /** Placeholder text for component.
+   * @type {string}
+   */
   placeholder?: string;
+  /** Disabled state for component.
+   * @description Method should be defined in the blade `scope`.
+   * Method should return boolean value.
+   * @type {{ method: string }}
+   */
   disabled?: { method: string };
+  /** Tooltip text for component.
+   * @type {string}
+   */
   tooltip?: string;
-  visibility?: VisibilityOptions;
+  /** Visibility options for component.
+   * @description Method should be defined in the blade `scope`.
+   * Method should return boolean value.
+   * @type {{ method: string }}
+   */
+  visibility?: {
+    method: string;
+  };
+  /** Flag to indicate if the component supports multilanguage.
+   * @type {boolean}
+   */
   multilanguage?: boolean;
+  /** Additional method that is called when the modelValue of the component changes
+   * @description Method should be defined in the blade `scope`.
+   * @type {{ method: string }}
+   */
   update?: { method: string };
 }
 
@@ -149,9 +192,14 @@ export interface InputSchema extends SchemaBase {
   component: "vc-input";
   variant?: ComponentProps<typeof VcInput>["type"];
   clearable?: boolean;
+  prepend?: ControlSchema;
+  append?: ControlSchema;
+  appendInner?: ControlSchema;
+  prependInner?: ControlSchema;
 }
 
-export interface VideoSchema extends SchemaBase {
+export interface VideoSchema
+  extends Pick<SchemaBase, "id" | "property" | "label" | "visibility" | "tooltip" | "update"> {
   component: "vc-video";
   size?: ComponentProps<typeof VcVideo>["size"];
   rounded?: boolean;
@@ -159,13 +207,13 @@ export interface VideoSchema extends SchemaBase {
   clickable?: boolean;
 }
 
-export interface FieldSchema extends SchemaBase {
+export interface FieldSchema extends Pick<SchemaBase, "id" | "property" | "label" | "visibility" | "tooltip"> {
   component: "vc-field";
   variant?: ComponentProps<typeof VcField>["type"];
   copyable?: boolean;
 }
 
-export interface ImageSchema extends SchemaBase {
+export interface ImageSchema extends Pick<SchemaBase, "id" | "property" | "visibility" | "update"> {
   component: "vc-image";
   aspect?: ComponentProps<typeof VcImage>["aspect"];
   size?: ComponentProps<typeof VcImage>["size"];
@@ -175,7 +223,7 @@ export interface ImageSchema extends SchemaBase {
   clickable?: boolean;
 }
 
-export interface StatusSchema extends SchemaBase {
+export interface StatusSchema extends Pick<SchemaBase, "id" | "visibility"> {
   component: "vc-status";
   outline?: boolean;
   extend?: boolean;
@@ -189,7 +237,7 @@ export interface StatusSchema extends SchemaBase {
   };
 }
 
-export interface InputCurrencySchema extends SchemaBase {
+export interface InputCurrencySchema extends Omit<SchemaBase, "multilanguage"> {
   component: "vc-input-currency";
   optionProperty: string;
   optionValue?: string;
@@ -201,52 +249,105 @@ export interface EditorSchema extends SchemaBase {
   component: "vc-editor";
 }
 
-export interface DynamicPropertiesSchema extends SchemaBase {
+export interface DynamicPropertiesSchema extends Omit<SchemaBase, "rules" | "placeholder"> {
   component: "vc-dynamic-properties";
   exclude?: string[];
   include?: string[];
 }
 
-export interface GallerySchema extends SchemaBase {
+export interface GallerySchema extends Omit<SchemaBase, "placeholder" | "multilanguage"> {
   component: "vc-gallery";
   uploadFolder: string;
 }
 
-export interface CardSchema extends SchemaBase {
+/**
+ * Interface for a card schema.
+ * @interface
+ */
+export interface CardSchema extends RequiredBy<Pick<SchemaBase, "id" | "label" | "visibility">, "label"> {
+  /**
+   * Component type for the card.
+   * @type {"vc-card"}
+   */
   component: "vc-card";
+  /**
+   * Array of control schemas for the fields in the card.
+   * @type {ControlSchema[]}
+   */
   fields: ControlSchema[];
+  /**
+   * Button schema for the action button in the card, along with the action method to use.
+   * @type {ButtonSchema & { method: string }}
+   */
   action?: ButtonSchema & { method: string };
+  /**
+   * Whether the card is collapsible or not.
+   * @type {boolean}
+   */
   collapsible?: boolean;
 }
 
-export interface WidgetsSchema extends SchemaBase {
+export interface WidgetsSchema extends Pick<SchemaBase, "id"> {
   component: "vc-widgets";
   children: string[];
 }
 
-export interface CheckboxSchema extends SchemaBase {
+export interface CheckboxSchema extends Omit<SchemaBase, "multilanguage"> {
   component: "vc-checkbox";
   content: string;
   trueValue?: boolean;
   falseValue?: boolean;
 }
 
-export interface FieldsetSchema extends SchemaBase {
+export interface FieldsetSchema extends PartialBy<Pick<SchemaBase, "id" | "property" | "visibility">, "property"> {
   component: "vc-fieldset";
   columns?: number;
+  aspectRatio?: number[];
   fields: Exclude<ControlSchema[], FieldsetSchema>;
   remove?: {
     method: string;
   };
 }
 
-export interface ButtonSchema extends SchemaBase {
+/**
+ * Button schema interface.
+ */
+export interface ButtonSchema extends Pick<SchemaBase, "id" | "disabled" | "visibility"> {
+  /**
+   * Component type.
+   * @type {"vc-button"}
+   */
   component: "vc-button";
+  /**
+   * Button inner text.
+   * @type {string}
+   */
   content: string;
+  /**
+   * Small sized button.
+   * @type {boolean}
+   */
   small?: boolean;
+  /**
+   * Button icon.
+   * @type {string}
+   */
   icon?: string;
+  /**
+   * Size of the button icon.
+   * @type {ComponentProps<typeof VcIcon>["size"]}
+   */
   iconSize?: ComponentProps<typeof VcIcon>["size"];
+  /**
+   * Button as text without overlay.
+   * @type {boolean}
+   */
   text?: boolean;
+  /**
+   * Method to be called when the button is clicked.
+   * @description Method should be defined in the blade `scope`.
+   * @type {string}
+   */
   method?: string;
 }