feat(field): filed组件 支持通过uiSchema配置 className、attrs、style

re #8

Author: lljj-x

packages/lib/src/JsonSchemaForm/common/formUtils.js

@@ -143,6 +143,7 @@ export function getUiOptions({
 }
 
 // 获取当前节点的ui 配置 （options + widget）
+// 处理成 Widget 组件需要的格式
 export function getWidgetConfig({
     schema = {},
     uiSchema = {}
@@ -164,8 +165,11 @@ export function getWidgetConfig({
         labelWidth,
         description,
         attrs: widgetAttrs,
-        class: widgetClassName,
+        class: widgetClass,
         style: widgetStyle,
+        fieldAttrs,
+        fieldStyle,
+        fieldClass,
         emptyValue,
         ...uiProps
     } = widgetConfig;
@@ -176,8 +180,11 @@ export function getWidgetConfig({
         labelWidth,
         description,
         widgetAttrs,
-        widgetClassName,
+        widgetClass,
         widgetStyle,
+        fieldAttrs,
+        fieldStyle,
+        fieldClass,
         emptyValue,
         uiProps
     };

packages/lib/src/JsonSchemaForm/fieldComponents/Widget.js

@@ -84,21 +84,36 @@ export default {
             type: String,
             default: ''
         },
-        // attrs
+        // Widget attrs
         widgetAttrs: {
             type: Object,
             default: () => ({})
         },
-        // className
-        widgetClassName: {
+        // Widget className
+        widgetClass: {
             type: Object,
             default: () => ({})
         },
-        // style
+        // Widget style
         widgetStyle: {
             type: Object,
             default: () => ({})
         },
+        // Field attrs
+        fieldAttrs: {
+            type: Object,
+            default: () => ({})
+        },
+        // Field className
+        fieldClass: {
+            type: Object,
+            default: () => ({})
+        },
+        // Field style
+        fieldStyle: {
+            type: Object,
+            default: () => ({})
+        },
         // props
         uiProps: {
             type: Object,
@@ -142,8 +157,11 @@ export default {
             'el-form-item',
             {
                 class: {
+                    ...self.fieldClass,
                     'is-required': self.required
                 },
+                style: self.fieldStyle,
+                attrs: self.fieldAttrs,
                 props: {
                     label: self.label,
                     labelWidth: self.labelWidth,
@@ -220,7 +238,7 @@ export default {
                             value: this.value, // v-model
                         },
                         style: self.widgetStyle,
-                        class: self.widgetClassName,
+                        class: self.widgetClass,
                         attrs: {
                             placeholder: self.uiProps.placeholder, // 兼容placeholder配置在 外层或者attr内
                             ...self.widgetAttrs

packages/lib/src/JsonSchemaForm/fields/ArrayField/arrayTypes/ArrayFieldNormal.js

@@ -26,7 +26,16 @@ export default {
         } = this.$props;
 
         const {
-            title, description, addable, sortable, removable, showTitle, showDescription
+            title,
+            description,
+            addable,
+            sortable,
+            removable,
+            showTitle,
+            showDescription,
+            fieldClass,
+            fieldAttrs,
+            fieldStyle,
         } = getUiOptions({
             schema,
             uiSchema
@@ -59,6 +68,9 @@ export default {
                     showTitle,
                     showDescription
                 },
+                class: fieldClass,
+                attrs: fieldAttrs,
+                style: fieldStyle,
             },
             [
                 h(

packages/lib/src/JsonSchemaForm/fields/ArrayField/arrayTypes/ArrayFieldTuple.js

@@ -61,7 +61,16 @@ export default {
         } = this.$props;
 
         const {
-            title, description, addable, sortable, removable, showTitle, showDescription
+            title,
+            description,
+            addable,
+            sortable,
+            removable,
+            showTitle,
+            showDescription,
+            fieldClass,
+            fieldAttrs,
+            fieldStyle,
         } = getUiOptions({
             schema,
             uiSchema
@@ -116,7 +125,10 @@ export default {
                     description,
                     showTitle,
                     showDescription
-                }
+                },
+                class: fieldClass,
+                attrs: fieldAttrs,
+                style: fieldStyle,
             },
             [
                 // 先显示Tuple固定项

packages/lib/src/JsonSchemaForm/fields/ObjectField/index.js

@@ -35,7 +35,7 @@ export default {
         } = props;
 
         const {
-            title, description, showTitle, showDescription, order
+            title, description, showTitle, showDescription, order, fieldClass, fieldAttrs, fieldStyle
         } = getUiOptions({
             schema,
             uiSchema
@@ -72,6 +72,9 @@ export default {
                     showTitle,
                     showDescription
                 },
+                class: fieldClass,
+                attrs: fieldAttrs,
+                style: fieldStyle
             },
             [
                 h(