@vc-shell/framework 1.0.157 → 1.0.159

package/dist/ui/components/molecules/vc-multivalue/vc-multivalue.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vc-multivalue.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/molecules/vc-multivalue/vc-multivalue.vue.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,KAAK,CAAC,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,KAAK,CAAC,CAAC;IACtB,CAAC,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC;IAChD,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACxC;;;;;;;;;;;;;;;;;;;;;;;;WAsfM,GAAG;;;;cAvdqB,GAAG;uBACjB,GAAG,KAAK,GAAG;;;;cADG,GAAG;uBACjB,GAAG,KAAK,GAAG;;;yCAqdZ,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,KAAG,IAAI;;;;;;;;;;;;;;;;;;;;;;oBAAzC,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;;cAvdqB,GAAG;uBACjB,GAAG,KAAK,GAAG;;;;cADG,GAAG;uBACjB,GAAG,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAqdZ,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;eAClD,GAAG;;;;kBAvdqB,GAAG;2BACjB,GAAG,KAAK,GAAG;;;;kBADG,GAAG;2BACjB,GAAG,KAAK,GAAG;;;;;AA7B5B,wBAwf2E;AAQ3E,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"vc-multivalue.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/molecules/vc-multivalue/vc-multivalue.vue.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,KAAK,CAAC,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,KAAK,CAAC,CAAC;IACtB,CAAC,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC;IAChD,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACxC;;;;;;;;;;;;;;;;;;;;;;;;WAsfM,GAAG;;;;cAvdqB,GAAG;uBACjB,GAAG,KAAK,GAAG;;;;cADG,GAAG;uBACjB,GAAG,KAAK,GAAG;;;yCAqdZ,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,KAAG,IAAI;;;;;;;;;;;;;;;;;;;;;;oBAAzC,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;;cAvdqB,GAAG;uBACjB,GAAG,KAAK,GAAG;;;;cADG,GAAG;uBACjB,GAAG,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAqdZ,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;eAClD,GAAG;;;;kBAvdqB,GAAG;2BACjB,GAAG,KAAK,GAAG;;;;kBADG,GAAG;2BACjB,GAAG,KAAK,GAAG;;;;;AA7B5B,wBAwf2E;AAQ3E,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"vc-table-cell.vue.d.ts","sourceRoot":"","sources":["../../../../../../../ui/components/organisms/vc-table/_internal/vc-table-cell/vc-table-cell.vue.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE/D,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;;AAiVD,wBAMG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}
+{"version":3,"file":"vc-table-cell.vue.d.ts","sourceRoot":"","sources":["../../../../../../../ui/components/organisms/vc-table/_internal/vc-table-cell/vc-table-cell.vue.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE/D,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;;AA2UD,wBAMG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.0.157",
+  "version": "1.0.159",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -53,9 +53,9 @@
     "whatwg-fetch": "^3.6.19"
   },
   "devDependencies": {
-    "@vc-shell/api-client-generator": "^1.0.157",
-    "@vc-shell/config-generator": "^1.0.157",
-    "@vc-shell/ts-config": "^1.0.157",
+    "@vc-shell/api-client-generator": "^1.0.159",
+    "@vc-shell/config-generator": "^1.0.159",
+    "@vc-shell/ts-config": "^1.0.159",
     "@vitejs/plugin-vue": "^5.0.3",
     "sass": "^1.69.6",
     "typescript": "^5.3.3",

package/shared/components/blade-navigation/components/vc-blade-navigation/vc-blade-navigation.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Ref, computed, inject, withDirectives, h, vShow, nextTick } from "vue";
+import { Ref, computed, inject, withDirectives, h, vShow } from "vue";
 import { RouterView } from "vue-router";
 import { BladeVNode, IParentCallArgs, useBladeNavigation } from "./../../../../../shared";
 import { ErrorInterceptor } from "./../../../error-interceptor";
@@ -44,11 +44,6 @@ const render = () => {
                       closable: index >= 1,
                       expandable: quantity.value > 1,
                       expanded: index === quantity.value - 1,
-                      "onUpdate:expanded": (value: boolean) => {
-                        if (value) {
-                          closeBlade(index + 1);
-                        }
-                      },
                       "onClose:blade": () => closeBlade(index),
                       "onParent:call": (args: IParentCallArgs) => {
                         const instance = blades.value?.[index - 1]?.props?.navigation?.instance.value;

package/shared/components/blade-navigation/types/index.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { RouteRecordNormalized, Router } from "vue-router";
+import { Router } from "vue-router";
 import {
   AppContext,
   Component,

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

@@ -1,5 +1,16 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { PropType, ref, toRefs, watch, ExtractPropTypes, h, VNode, defineComponent, UnwrapNestedRefs } from "vue";
+import {
+  PropType,
+  ToRefs,
+  toRefs,
+  watch,
+  ExtractPropTypes,
+  h,
+  VNode,
+  defineComponent,
+  UnwrapNestedRefs,
+  reactive,
+} from "vue";
 import { ControlSchema } from "../types";
 import * as _ from "lodash-es";
 import { DetailsBladeContext } from "../factories/types";
@@ -7,6 +18,7 @@ import { nodeBuilder } from "../helpers/nodeBuilder";
 import { visibilityHandler } from "../helpers/visibilityHandler";
 import { toValue } from "@vueuse/core";
 import { safeIn } from "../helpers/safeIn";
+import { unrefNested } from "../helpers/unrefNested";
 
 const schemeRenderProps = {
   context: {
@@ -35,30 +47,22 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props: ExtractPropTypes<typeof schemeRenderProps>, ctx) {
     const { currentLocale } = toRefs(props);
-    const internalFormData = ref();
+    const internalFormData = reactive({});
 
     watch(
       () => props.modelValue,
       (newVal) => {
-        if (!_.isEqual(internalFormData.value, newVal)) {
-          internalFormData.value = newVal;
+        if (!_.isEqual(internalFormData, newVal)) {
+          Object.assign(internalFormData, toRefs(newVal));
         }
       },
       { deep: true, immediate: true },
     );
 
-    watch(
-      internalFormData,
-      (newVal) => {
-        if (!_.isEqual(newVal, props.modelValue)) {
-          emitChange(newVal);
-        }
-      },
-      { deep: true },
-    );
-
-    function emitChange(newVal: unknown) {
-      ctx.emit("update:modelValue", newVal);
+    function updateFormData(newVal: ToRefs<unknown>) {
+      if (!_.isEqual(newVal, internalFormData)) {
+        ctx.emit("update:modelValue", unrefNested(newVal));
+      }
     }
 
     return () =>
@@ -83,6 +87,7 @@ export default defineComponent({
               bladeContext: props.context,
               currentLocale: currentLocale,
               formData: internalFormData,
+              updateFormData,
             }),
           ];
         }, [] as VNode[]),

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

@@ -50,7 +50,6 @@ export const ControlBaseProps = ({
   disabled = false,
   required = false,
   name = undefined,
-  classNames = undefined,
   tooltip = undefined,
   key = undefined,
   ...rest
@@ -62,7 +61,6 @@ export const ControlBaseProps = ({
   disabled,
   required,
   name,
-  classNames,
   tooltip,
   ...rest,
 });

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

@@ -3,6 +3,7 @@ import { Button } from "../factories";
 import componentProps from "./props";
 import { ButtonSchema } from "../../types";
 import { useI18n } from "vue-i18n";
+import { unrefNested } from "../../helpers/unrefNested";
 
 export default {
   name: "ButtonEl",
@@ -11,16 +12,19 @@ export default {
     const { t } = useI18n({ useScope: "global" });
     return () => {
       const field = Button({
-        props: {
-          ...props.baseProps,
-          small: props.element.small,
-          icon: props.element?.icon,
-          iconSize: props.element?.iconSize,
-          text: props.element?.text,
-          onClick: () => {
-            unref(props.bladeContext.scope)?.[props.element.method]();
+        props: Object.assign(
+          {},
+          {
+            small: props.element.small,
+            icon: props.element?.icon,
+            iconSize: props.element?.iconSize,
+            text: props.element?.text,
+            onClick: () => {
+              unref(props.bladeContext.scope)?.[props.element.method]();
+            },
           },
-        },
+          unrefNested(props.baseProps),
+        ),
         slots: {
           default: () => unref(computed(() => t(props.element.content))),
         },

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

@@ -1,22 +1,33 @@
-import { ExtractPropTypes, h, toValue, VNodeChild, VNodeNormalizedChildren, watch, Component, ref } from "vue";
+import {
+  ExtractPropTypes,
+  h,
+  toValue,
+  VNodeChild,
+  VNodeNormalizedChildren,
+  Component,
+  ref,
+  onMounted,
+  onUpdated,
+} from "vue";
 import { CardCollection } from "../factories";
 import componentProps from "./props";
 import { CardSchema } from "../../types";
 import { nodeBuilder } from "../../helpers/nodeBuilder";
-import { useMounted } from "@vueuse/core";
 import * as _ from "lodash-es";
+import { unrefNested } from "../../helpers/unrefNested";
 
 export default {
   name: "CardEl",
   props: componentProps,
   setup(props: ExtractPropTypes<typeof componentProps> & { element: CardSchema }) {
-    const isMounted = useMounted();
     const hasNoComment = ref(true);
 
-    watch(isMounted, (newVal) => {
-      if (newVal) {
-        hasNoComment.value = hasNoCommentNodes(toValue(props.fields));
-      }
+    onMounted(() => {
+      hasNoComment.value = hasNoCommentNodes(toValue(props.fields));
+    });
+
+    onUpdated(() => {
+      hasNoComment.value = hasNoCommentNodes(toValue(props.fields));
     });
 
     const hasNoCommentNodes = (components: (VNodeChild | VNodeNormalizedChildren)[]): boolean => {
@@ -43,13 +54,16 @@ export default {
 
     return () => {
       const field = CardCollection({
-        props: {
-          ...props.baseProps,
-          header: props.baseProps.label,
-          isCollapsable: props.element.collapsible,
-          isCollapsed: restoreCollapsed(props.element.id),
-          "onState:collapsed": (e: boolean) => handleCollapsed(props.element.id, e),
-        },
+        props: Object.assign(
+          {},
+          {
+            header: toValue(props.baseProps.label),
+            isCollapsable: props.element.collapsible,
+            isCollapsed: restoreCollapsed(props.element.id),
+            "onState:collapsed": (e: boolean) => handleCollapsed(props.element.id, e),
+          },
+          unrefNested(props.baseProps),
+        ),
 
         slots: {
           default: () =>
@@ -59,7 +73,7 @@ export default {
                 class: {
                   "tw-flex": true,
                   "tw-flex-col": true,
-                  "tw-p-4": !!props.element.removePadding === true ? false : true,
+                  "tw-p-4": !props.element.removePadding,
                   "tw-gap-4": true,
                 },
               },

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

@@ -1,24 +1,31 @@
-import { ExtractPropTypes, h, Component, unref } from "vue";
+import { ExtractPropTypes, h, Component, unref, computed } from "vue";
 import { Checkbox } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
 import { CheckboxSchema } from "../../types";
 import { unwrapInterpolation } from "../../helpers/unwrapInterpolation";
 import { toValue } from "@vueuse/core";
+import { unrefNested } from "../../helpers/unrefNested";
+import { useI18n } from "vue-i18n";
 
 export default {
   name: "Checkbox",
   props: componentProps,
   setup(props: ExtractPropTypes<typeof componentProps> & { element: CheckboxSchema }) {
+    const { t } = useI18n({ useScope: "global" });
     return () => {
       const field = Checkbox({
-        props: {
-          ...props.baseProps,
-          trueValue: props.element.trueValue,
-          falseValue: props.element.falseValue,
-        },
+        props: Object.assign(
+          {},
+          {
+            trueValue: props.element.trueValue,
+            falseValue: props.element.falseValue,
+          },
+          unrefNested(props.baseProps),
+        ),
         slots: {
-          default: () => unref(unwrapInterpolation(props.element.content, toValue(props.fieldContext!))),
+          default: () =>
+            unref(computed(() => t(unwrapInterpolation(props.element.content, toValue(props.fieldContext!))))),
         },
       });
 

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

@@ -2,6 +2,7 @@ import { ExtractPropTypes, h, Component } from "vue";
 import { ContentField } from "../factories";
 import componentProps from "./props";
 import { FieldSchema } from "../../types";
+import { unrefNested } from "../../helpers/unrefNested";
 
 export default {
   name: "ContentField",
@@ -9,12 +10,15 @@ export default {
   setup(props: ExtractPropTypes<typeof componentProps> & { element: FieldSchema }) {
     return () => {
       const field = ContentField({
-        props: {
-          ...props.baseProps,
-          type: props.element.variant,
-          copyable: props.element.copyable || false,
-          orientation: props.element.orientation,
-        },
+        props: Object.assign(
+          {},
+          {
+            type: props.element.variant,
+            copyable: props.element.copyable || false,
+            orientation: props.element.orientation,
+          },
+          unrefNested(props.baseProps),
+        ),
       });
 
       const render = h(field.component as Component, field.props);

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

@@ -46,8 +46,8 @@ export default {
     watch(
       () => props.baseProps?.modelValue,
       (newVal) => {
-        if (!_.isEqual(newVal, internalModel.value)) {
-          internalModel.value = _.cloneDeep(newVal);
+        if (!_.isEqual(toValue(newVal), internalModel.value)) {
+          internalModel.value = _.cloneDeep(toValue(newVal));
         }
       },
       { deep: true, immediate: true },

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

@@ -2,6 +2,7 @@ import { h, ExtractPropTypes, Component, unref } from "vue";
 import { EditorField } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
+import { unrefNested } from "../../helpers/unrefNested";
 
 export default {
   name: "EditorField",
@@ -9,11 +10,14 @@ export default {
   setup(props: ExtractPropTypes<typeof componentProps>) {
     return () => {
       const field = EditorField({
-        props: {
-          ...props.baseProps,
-          currentLanguage: props.currentLocale,
-          assetsFolder: unref(props.formData).id || unref(props.formData).categoryId,
-        },
+        props: Object.assign(
+          {},
+          {
+            currentLanguage: props.currentLocale,
+            assetsFolder: unref(props.formData).id || unref(props.formData).categoryId,
+          },
+          unrefNested(props.baseProps),
+        ),
       });
 
       const render = h(field.component as Component, field.props);

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

@@ -119,19 +119,22 @@ export default {
       }
 
       const field = Gallery({
-        props: {
-          ...props.baseProps,
-          loading: imageHandlers.loading,
-          images: 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,
-        },
+        props: Object.assign(
+          {},
+          {
+            loading: imageHandlers.loading,
+            images: 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),
+        ),
       });
 
       return h(field.component as Component, unrefNested(field.props));

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

@@ -2,6 +2,7 @@ import { ExtractPropTypes, h, Component } from "vue";
 import { ImageField } from "../factories";
 import componentProps from "./props";
 import { ImageSchema } from "../../types";
+import { unrefNested } from "../../helpers/unrefNested";
 
 export default {
   name: "ImageField",
@@ -9,16 +10,19 @@ export default {
   setup(props: ExtractPropTypes<typeof componentProps> & { element: ImageSchema }) {
     return () => {
       const field = ImageField({
-        props: {
-          ...props.baseProps,
-          src: props.baseProps.modelValue,
-          aspect: props.element.aspect,
-          rounded: props.element.rounded,
-          bordered: props.element.bordered,
-          clickable: props.element.clickable,
-          size: props.element.size,
-          background: props.element.background,
-        },
+        props: Object.assign(
+          {},
+          {
+            src: props.baseProps.modelValue,
+            aspect: props.element.aspect,
+            rounded: props.element.rounded,
+            bordered: props.element.bordered,
+            clickable: props.element.clickable,
+            size: props.element.size,
+            background: props.element.background,
+          },
+          unrefNested(props.baseProps),
+        ),
       });
 
       const render = h(field.component as Component, field.props);

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

@@ -5,6 +5,8 @@ import ValidationField from "./ValidationField";
 import { getModel } from "../../helpers/getters";
 import { setModel } from "../../helpers/setters";
 import { InputCurrencySchema } from "../../types";
+import { unrefNested } from "../../helpers/unrefNested";
+import { toValue } from "@vueuse/core";
 
 // TODO fix disabling when blades is disabled
 export default {
@@ -13,22 +15,25 @@ export default {
   setup(props: ExtractPropTypes<typeof componentProps> & { element: InputCurrencySchema }) {
     return () => {
       const field = InputCurrency({
-        props: {
-          ...props.baseProps,
-          option: getModel(props.element.optionProperty, props.fieldContext ?? {}).value,
-          optionLabel: props.element.optionLabel,
-          optionValue: props.element.optionValue,
-          options: unref(props.bladeContext.scope)?.["currencies"],
-          "onUpdate:option": (e: string | number | Record<string, unknown>) => {
-            setModel({
-              value: e,
-              property: props.element.optionProperty,
-              context: props.fieldContext ?? {},
-              scope: props.bladeContext.scope,
-            });
+        props: Object.assign(
+          {},
+          {
+            option: toValue(getModel(props.element.optionProperty, props.fieldContext ?? {})),
+            optionLabel: props.element.optionLabel,
+            optionValue: props.element.optionValue,
+            options: unref(props.bladeContext.scope)?.["currencies"],
+            "onUpdate:option": (e: string | number | Record<string, unknown>) => {
+              setModel({
+                value: e,
+                property: props.element.optionProperty,
+                context: props.fieldContext ?? {},
+                scope: props.bladeContext.scope,
+              });
+            },
+            clearable: props.element.clearable || false,
           },
-          clearable: props.element.clearable || false,
-        },
+          unrefNested(props.baseProps),
+        ),
       });
       const render = h(field.component as Component, field.props);
 

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

@@ -4,6 +4,7 @@ import componentProps from "./props";
 import ValidationField from "./ValidationField";
 import { InputSchema, ControlSchema } from "../../types";
 import { nodeBuilder } from "../../helpers/nodeBuilder";
+import { unrefNested } from "../../helpers/unrefNested";
 
 const slotsMap = {
   append: "append",
@@ -18,12 +19,15 @@ export default {
   setup(props: ExtractPropTypes<typeof componentProps> & { element: InputSchema }) {
     return () => {
       const field = InputField({
-        props: {
-          ...props.baseProps,
-          type: props.element.variant,
-          currentLanguage: props.currentLocale,
-          clearable: props.element.clearable || false,
-        },
+        props: Object.assign(
+          {},
+          {
+            type: props.element.variant,
+            currentLanguage: props.currentLocale,
+            clearable: props.element.clearable || false,
+          },
+          unrefNested(props.baseProps),
+        ),
         slots: Object.entries(slotsMap).reduce(
           (acc, [key, value]) => {
             if (props.element[key as keyof InputSchema]) {

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

@@ -5,6 +5,7 @@ import componentProps from "./props";
 import ValidationField from "./ValidationField";
 import { MultivalueSchema } from "../../types";
 import { VcMultivalue } from "../../../../../ui/components";
+import { unrefNested } from "../../helpers/unrefNested";
 
 type TScope = Parameters<ComponentSlots<typeof VcMultivalue>["item"]>["0"];
 
@@ -14,15 +15,18 @@ export default {
   setup(props: ExtractPropTypes<typeof componentProps> & { element: MultivalueSchema }) {
     return () => {
       const field = MultivalueField({
-        props: {
-          ...props.baseProps,
-          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] : undefined,
-          currentLanguage: props.currentLocale,
-        },
+        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] : undefined,
+            currentLanguage: props.currentLocale,
+          },
+          unrefNested(props.baseProps),
+        ),
 
         slots:
           props.element.customTemplate &&

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

@@ -2,6 +2,7 @@ import { Component, ExtractPropTypes, h } from "vue";
 import { Rating } from "../factories";
 import componentProps from "./props";
 import { RatingSchema } from "../../types";
+import { unrefNested } from "../../helpers/unrefNested";
 
 export default {
   name: "RatingEl",
@@ -9,10 +10,13 @@ export default {
   setup(props: ExtractPropTypes<typeof componentProps> & { element: RatingSchema }) {
     return () => {
       const field = Rating({
-        props: {
-          ...props.baseProps,
-          variant: props.element.type,
-        },
+        props: Object.assign(
+          {},
+          {
+            variant: props.element.type,
+          },
+          unrefNested(props.baseProps),
+        ),
       });
 
       return h(field.component as Component, field.props);

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

@@ -5,6 +5,7 @@ import componentProps from "./props";
 import ValidationField from "./ValidationField";
 import { SelectSchema } from "../../types";
 import { VcSelect } from "../../../../../ui/components";
+import { unrefNested } from "../../helpers/unrefNested";
 
 type TScope =
   | Parameters<ComponentSlots<typeof VcSelect>["option"]>["0"]
@@ -16,16 +17,19 @@ export default {
   setup(props: ExtractPropTypes<typeof componentProps> & { element: SelectSchema }) {
     return () => {
       const field = SelectField({
-        props: {
-          ...props.baseProps,
-          optionValue: props.element.optionValue,
-          optionLabel: props.element.optionLabel,
-          emitValue: props.element.emitValue,
-          options: props.bladeContext.scope?.[props.element.optionsMethod],
-          currentLanguage: props.currentLocale,
-          clearable: props.element.clearable || false,
-          searchable: props.element.searchable || false,
-        },
+        props: Object.assign(
+          {},
+          {
+            optionValue: props.element.optionValue,
+            optionLabel: props.element.optionLabel,
+            emitValue: props.element.emitValue,
+            options: props.bladeContext.scope?.[props.element.optionsMethod],
+            currentLanguage: props.currentLocale,
+            clearable: props.element.clearable || false,
+            searchable: props.element.searchable || false,
+          },
+          unrefNested(props.baseProps),
+        ),
 
         slots:
           props.element.customTemplate &&