feat(lib): 添加 fallback-label 参数

支持不配置title 默认使用属性名做为表单label

re #45

Author: lljj-x

packages/demo/demo-common/schemaTypes/15.Widgets/index.js

@@ -112,11 +112,6 @@ export default {
                     }
                 },
             },
-            color: {
-                'ui:options': {
-                    size: 'small'
-                }
-            },
         },
         secret: {
             'ui:widget': 'HiddenWidget',

packages/demo/demo-v2/src/pages/index/views/Demo/index.vue

@@ -178,6 +178,7 @@
                             :custom-formats="customFormats"
                             :form-footer="trueFormFooter"
                             :form-props="trueFormProps"
+                            :fallback-label="true"
                             @on-form-mounted="handleFormMounted"
                             @on-change="handleDataChange"
                             @on-cancel="handleCancel"

packages/demo/demo-v3/src/pages/index/views/Demo/index.vue

@@ -202,6 +202,7 @@
                             :custom-formats="customFormats"
                             :form-footer="trueFormFooter"
                             :form-props="trueFormProps"
+                            :fallback-label="true"
                             @form-mounted="handleFormMounted"
                             @change="handleDataChange"
                             @cancel="handleCancel"

packages/docs/docs/zh/guide/basic-config.md

@@ -601,6 +601,12 @@ export default {
 * 自定义校验规则，实现类似 el-form rules validator 的方式校验表单数据
 * [详细查看这里](/zh/guide/validate.html#custom-rule-自定义校验)
 
+### value / v-model
+* 类型：`object`
+* 默认值：`{}`
+
+表单绑定值，`对于不需要双向绑定的值，可以使用 value props`
+
 
 ### form-footer
 * 类型：`object`
@@ -618,11 +624,22 @@ formFooter = {
 }
 ```
 
-### value / v-model
-* 类型：`object`
-* 默认值：`{}`
+### fallback-label
+* 类型：`boolean`
+* default：`false`
 
-表单绑定值，`对于不需要双向绑定的值，可以使用 value props`
+当 `schema` 没有配置 `title`，是否使用当前属性名做为表单 `label`
+
+如：`street_address` 表单项是否显示 `label` 为 `street_address`
+```js
+schema = {
+    properties: {
+        street_address: {
+            type: 'string'
+        }
+    }
+}
+```
 
 ### form-props
 * 类型：`object`

…3-core/src/components/FieldGroupWrap.vue …/lib/utils/components/FieldGroupWrap.vuepackages/lib/vue3/vue3-core/src/components/FieldGroupWrap.vue renamed to packages/lib/utils/components/FieldGroupWrap.vue packages/lib/vue3/vue3-core/src/components/FieldGroupWrap.vue renamed to packages/lib/utils/components/FieldGroupWrap.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="fieldGroupWrap">
         <h3
-            v-if="showTitle && title"
+            v-if="showTitle && trueTitle"
             class="fieldGroupWrap_title"
         >
-            {{ title }}
+            {{ trueTitle }}
         </h3>
         <p
             v-if="showDescription && description"
@@ -21,7 +21,13 @@
 <script>
 export default {
     name: 'FieldGroupWrap',
+    inject: ['genFormProvide'],
     props: {
+        // 当前节点路径
+        curNodePath: {
+            type: String,
+            default: ''
+        },
         showTitle: {
             type: Boolean,
             default: true
@@ -38,6 +44,21 @@ export default {
             type: String,
             default: ''
         }
+    },
+    computed: {
+        trueTitle() {
+            const title = this.title;
+            if (title) {
+                return title;
+            }
+
+            const genFormProvide = this.genFormProvide.value || this.genFormProvide;
+
+            const backTitle = genFormProvide.fallbackLabel && this.curNodePath.split('.').pop();
+            if (backTitle !== `${Number(backTitle)}`) return backTitle;
+
+            return '';
+        }
     }
 };
 </script>

packages/lib/utils/formUtils.js

@@ -174,7 +174,7 @@ export function getUiOptions({
 
     // 计算ui配置
     return {
-        title: schema.title, // 默认使用 schema 的配置
+        title: schema.title /* || curNodePath.split('.').pop() */, // 默认使用 schema 的配置
         description: schema.description,
 
         // 特殊处理部分
@@ -407,3 +407,15 @@ export function optionsList(schema, uiSchema, curNodePath, rootFormData) {
     });
 
 }
+
+export function fallbackLabel(oriLabel, isFallback, curNodePath) {
+    if (oriLabel) return oriLabel;
+    if (isFallback) {
+        const backLabel = curNodePath.split('.').pop();
+
+        // 过滤纯数字字符串
+        if (backLabel && (backLabel !== `${Number(backLabel)}`)) return backLabel;
+    }
+
+    return '';
+}

packages/lib/vue2/vue2-core/src/components/Widget.js

@@ -8,9 +8,11 @@ import {
 
 import { validateFormDataAndTransformMsg } from '@lljj/vjsf-utils/schema/validate';
 import { IconQuestion } from '@lljj/vjsf-utils/icons';
+import { fallbackLabel } from '@lljj/vjsf-utils/formUtils';
 
 export default {
     name: 'Widget',
+    inject: ['genFormProvide'],
     props: {
         // 是否同步formData的值，默认表单元素都需要
         // oneOf anyOf 中的select属于formData之外的数据
@@ -165,8 +167,10 @@ export default {
     render(h) {
         const self = this;
 
+        const { curNodePath } = this.$props;
+
         // 判断是否为根节点
-        const isRootNode = isRootNodePath(this.curNodePath);
+        const isRootNode = isRootNodePath(curNodePath);
 
         const miniDesModel = self.globalOptions.HELPERS.isMiniDes(self.formProps);
 
@@ -212,6 +216,9 @@ export default {
             } : {})
         };
 
+        // 运行配置回退到 属性名
+        const label = fallbackLabel(self.label, (self.widget && this.genFormProvide.fallbackLabel), curNodePath);
+
         return h(
             COMPONENT_MAP.formItem,
             {
@@ -225,7 +232,7 @@ export default {
                     ...self.labelWidth ? { labelWidth: self.labelWidth } : {},
                     ...this.isFormData ? {
                         // 这里对根节点打特殊标志，绕过elementUi无prop属性不校验
-                        prop: isRootNode ? '__$$root' : path2prop(self.curNodePath),
+                        prop: isRootNode ? '__$$root' : path2prop(curNodePath),
                         rules: [
                             {
                                 validator(rule, value, callback) {
@@ -239,15 +246,15 @@ export default {
                                         customFormats: self.$props.customFormats,
                                         errorSchema: self.errorSchema,
                                         required: self.required,
-                                        propPath: path2prop(self.curNodePath)
+                                        propPath: path2prop(curNodePath)
                                     });
                                     if (errors.length > 0) return callback(errors[0].message);
 
                                     // customRule 如果存在自定义校验
                                     const curCustomRule = self.$props.customRule;
                                     if (curCustomRule && (typeof curCustomRule === 'function')) {
                                         return curCustomRule({
-                                            field: self.curNodePath,
+                                            field: curNodePath,
                                             value,
                                             rootFormData: self.rootFormData,
                                             callback
@@ -274,14 +281,14 @@ export default {
                 },
             },
             [
-                self.label ? h('span', {
+                label ? h('span', {
                     slot: 'label',
                     class: {
                         genFormLabel: true,
                         genFormItemRequired: self.required,
                     },
                 }, [
-                    `${self.label}`,
+                    `${label}`,
                     miniDescriptionVNode,
                     `${(self.formProps && self.formProps.labelSuffix) || ''}`
                 ]) : null,

packages/lib/vue2/vue2-core/src/fields/ArrayField/arrayTypes/ArrayFieldNormal.js

@@ -5,8 +5,8 @@
 import { computedCurPath } from '@lljj/vjsf-utils/vueUtils';
 import { getUiOptions, replaceArrayIndex } from '@lljj/vjsf-utils/formUtils';
 
+import FieldGroupWrap from '@lljj/vjsf-utils/components/FieldGroupWrap';
 import SchemaField from '../../SchemaField';
-import FieldGroupWrap from '../../../components/FieldGroupWrap';
 import ArrayOrderList from '../components/ArrayOrderList';
 
 import vueProps from '../../props';
@@ -80,7 +80,8 @@ export default {
                     title,
                     description,
                     showTitle,
-                    showDescription
+                    showDescription,
+                    curNodePath
                 },
                 class: {
                     ...context.data.class,

packages/lib/vue2/vue2-core/src/fields/ArrayField/arrayTypes/ArrayFieldTuple.js

@@ -5,10 +5,10 @@ import { allowAdditionalItems, getUiOptions, replaceArrayIndex } from '@lljj/vjs
 import getDefaultFormState from '@lljj/vjsf-utils/schema/getDefaultFormState';
 import { computedCurPath } from '@lljj/vjsf-utils/vueUtils';
 import { cutOff } from '@lljj/vjsf-utils/arrayUtils';
+import FieldGroupWrap from '@lljj/vjsf-utils/components/FieldGroupWrap';
 import vueProps from '../../props';
 
 import SchemaField from '../../SchemaField';
-import FieldGroupWrap from '../../../components/FieldGroupWrap';
 import ArrayOrderList from '../components/ArrayOrderList';
 
 export default {
@@ -117,7 +117,7 @@ export default {
                                 ...tempUiSchema
                             },
                             errorSchema: errorSchema.additionalItems,
-                            curNodePath: computedCurPath(this.curNodePath, index + schema.items.length)
+                            curNodePath: computedCurPath(curNodePath, index + schema.items.length)
                         }
                     }
                 )
@@ -135,7 +135,8 @@ export default {
                     title,
                     description,
                     showTitle,
-                    showDescription
+                    showDescription,
+                    curNodePath
                 },
                 class: fieldClass,
                 attrs: fieldAttrs,

packages/lib/vue2/vue2-core/src/fields/ObjectField/index.js

@@ -5,8 +5,8 @@
 import { orderProperties, getUiOptions } from '@lljj/vjsf-utils/formUtils';
 import { computedCurPath, getPathVal } from '@lljj/vjsf-utils/vueUtils';
 import { isObject } from '@lljj/vjsf-utils/utils';
+import FieldGroupWrap from '@lljj/vjsf-utils/components/FieldGroupWrap';
 import vueProps from '../props';
-import FieldGroupWrap from '../../components/FieldGroupWrap';
 import Widget from '../../components/Widget';
 
 // eslint-disable-next-line import/no-cycle
@@ -98,7 +98,8 @@ export default {
                     title,
                     description,
                     showTitle,
-                    showDescription
+                    showDescription,
+                    curNodePath
                 },
                 class: { ...context.data.class, ...fieldClass },
                 attrs: fieldAttrs,