fix: fixed the form component componentProps using the function that did not meet expectations (#4426)

packages/@core/ui-kit/form-ui/src/form-render/form-field.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ZodType } from 'zod';
 
-import type { FormSchema } from '../types';
+import type { FormSchema, MaybeComponentProps } from '../types';
 
 import { computed } from 'vue';
 
@@ -26,6 +26,7 @@ import { isEventObjectLike } from './helper';
 interface Props extends FormSchema {}
 
 const {
+  commonComponentProps,
   component,
   componentProps,
   dependencies,
@@ -38,7 +39,11 @@ const {
   labelWidth,
   renderComponentContent,
   rules,
-} = defineProps<Props>();
+} = defineProps<
+  {
+    commonComponentProps: MaybeComponentProps;
+  } & Props
+>();
 
 const { componentBindEventMap, componentMap, isVertical } = useFormContext();
 const formRenderProps = injectRenderFormProps();
@@ -133,6 +138,7 @@ const computedProps = computed(() => {
     : componentProps;
 
   return {
+    ...commonComponentProps,
     ...finalComponentProps,
     ...dynamicComponentProps.value,
   };

packages/@core/ui-kit/form-ui/src/form-render/form.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { GenericObject } from 'vee-validate';
 import type { ZodTypeAny } from 'zod';
 
 import type { FormRenderProps, FormSchema, FormShape } from '../types';
@@ -7,7 +6,9 @@ import type { FormRenderProps, FormSchema, FormShape } from '../types';
 import { computed } from 'vue';
 
 import { Form } from '@vben-core/shadcn-ui';
-import { cn, isString, merge } from '@vben-core/shared/utils';
+import { cn, isString } from '@vben-core/shared/utils';
+
+import { type GenericObject } from 'vee-validate';
 
 import { provideFormRenderProps } from './context';
 import { useExpandable } from './expandable';
@@ -70,7 +71,8 @@ const formCollapsed = computed(() => {
   return props.collapsed && isCalculated.value;
 });
 
-const computedSchema = computed((): FormSchema[] => {
+const computedSchema = computed(
+  (): ({ commonComponentProps: Record<string, any> } & FormSchema)[] => {
     const {
       componentProps = {},
       controlClass = '',
@@ -83,7 +85,7 @@ const computedSchema = computed((): FormSchema[] => {
       labelWidth = 100,
       wrapperClass = '',
     } = props.commonConfig;
-  return (props.schema || []).map((schema, index): FormSchema => {
+    return (props.schema || []).map((schema, index) => {
       const keepIndex = keepFormItemIndex.value;
 
       const hidden =
@@ -99,7 +101,8 @@ const computedSchema = computed((): FormSchema[] => {
         labelWidth,
         wrapperClass,
         ...schema,
-      componentProps: merge({}, schema.componentProps, componentProps),
+        commonComponentProps: componentProps,
+        componentProps: schema.componentProps,
         controlClass: cn(controlClass, schema.controlClass),
         formFieldProps: {
           ...formFieldProps,
@@ -114,7 +117,8 @@ const computedSchema = computed((): FormSchema[] => {
         labelClass: cn(labelClass, schema.labelClass),
       };
     });
-});
+  },
+);
 </script>
 
 <template>