Merge pull request #329 from lljj-x/feat/array-feature

Feat/array feature

Author: lljj-x

packages/demo/demo-v2/src/pages/vue-editor/views/editor/viewComponents/FlashSaleGoodsList/index.js

@@ -2,7 +2,7 @@
  * Created by Liu.Jun on 2019/12/4 15:06.
  */
 
-import propsSchema from './schema.json';
+import propsSchema from './schema.js';
 import uiSchema from './uiSchema.js';
 
 const View = () => import('./View.vue');

packages/demo/demo-v2/src/pages/vue-editor/views/editor/viewComponents/FlashSaleGoodsList/schema.js

@@ -0,0 +1,52 @@
+export default {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    type: 'object',
+    definitions: {
+        ImgItem: {
+            type: 'object',
+            properties: {
+                imgUrl: {
+                    title: '图片地址',
+                    type: 'string',
+                    format: 'uri'
+                },
+                imgLink: {
+                    title: '链接地址',
+                    type: 'string',
+                    format: 'uri',
+                    default: 'https://www.jd.com'
+                }
+            },
+            required: [
+                'imgUrl',
+                'imgLink'
+            ]
+        }
+    },
+    properties: {
+        startTime: {
+            title: '配置秒杀开始时间',
+            type: 'string',
+            format: 'date-time'
+        },
+        seckillBrand: {
+            $ref: '#/definitions/ImgItem'
+        },
+        goodsList: {
+            type: 'array',
+            minItems: 4,
+            maxItems: 8,
+            uniqueItems: true,
+            'ui:afterArrayOperate': (formData, command, payload) => {
+                debugger;
+            },
+            items: {
+                $ref: '#/definitions/ImgItem'
+            }
+        }
+    },
+    required: [
+        'startTime'
+    ],
+    additionalProperties: false
+};

packages/demo/demo-v2/src/pages/vue-editor/views/editor/viewComponents/FlashSaleGoodsList/schema.json

@@ -17,8 +17,11 @@ export default {
         txt: {
             title: '文字',
             type: 'string',
-            'ui:placeholder': '输入你的内容',
-            'err:required': '必须输入标题文字内容'
+            'err:required': '必须输入标题文字内容',
+            'fui:placeholder': (parent, root, prop) => {
+                console.log(parent, root, prop);
+                return parent.txtColor;
+            },
         },
         txtColor: {
             title: '选择文字颜色',

packages/demo/demo-v2/src/pages/vue-editor/views/editor/viewComponents/Text/propsSchema.js

@@ -228,14 +228,15 @@ import schemaTypes from 'demo-common/schemaTypes';
 const VueElementForm = defineAsyncComponent(() => import('@lljj/vue3-form-element'));
 
 let installedAntdv = false;
-const VueAntForm = defineAsyncComponent(async () => {
+
+const VueAntForms = (async () => {
     // eslint-disable-next-line no-unused-vars
     const [antdv, antForm] = await Promise.all([
         import('demo-common/components/Antdv/index.js'),
         import('@lljj/vue3-form-ant')
     ]);
 
-    return {
+    const antdFormGenerator = (formProperty = 'default') => ({
         name: 'antFormWrap',
         setup(props, { attrs, slots }) {
             // hack 动态install antDv，因为我不知其它地方如何获取 vue app
@@ -245,12 +246,20 @@ const VueAntForm = defineAsyncComponent(async () => {
                 installedAntdv = true;
             }
 
-            return () => h(antForm.default, {
+            return () => h(antForm[formProperty], {
                 ...attrs
             }, slots);
         }
+    });
+
+    return {
+        v3: antdFormGenerator('default'),
+        v4: antdFormGenerator('JsonSchemaFormAntdV4')
     };
-});
+})();
+
+const VueAntForm = defineAsyncComponent(() => VueAntForms.then(res => res.v3));
+const VueAntFormV4 = defineAsyncComponent(() => VueAntForms.then(res => res.v4));
 
 let installedNaive = false;
 const VueNaiveForm = defineAsyncComponent(async () => {
@@ -285,6 +294,7 @@ export default {
         CodeEditor,
         VueElementForm,
         VueAntForm,
+        VueAntFormV4,
         VueNaiveForm,
         EditorHeader
     },
@@ -299,6 +309,9 @@ export default {
             }, {
                 name: 'Antdv',
                 component: 'VueAntForm'
+            }, {
+                name: 'Antdv（特殊适配antd4，未完整测试）',
+                component: 'VueAntFormV4'
             }, {
                 name: 'Naive',
                 component: 'VueNaiveForm'
@@ -315,7 +328,7 @@ export default {
             return this.$route.query.type;
         },
         isUseLabelWidth() {
-            return this.curVueForm !== 'VueAntForm';
+            return this.curVueForm !== 'VueAntForm' && this.curVueForm !== 'VueAntFormV4';
         },
         trueFormProps() {
             if (!this.formProps) return {};

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

@@ -4,7 +4,7 @@ pageClass: custom-page-home
 heroImage: /logo.png
 heroText: Vue JSON Schema Form
 tagline: 基于 Vue 、JSON Schema 构建form表单，支持Vue3和多Ui框架
-footer: Apache2.0 Licensed | Copyright © 2020-2020 Jun
+footer: Apache2.0 Licensed | Copyright © 2020-2023 Jun
 actionText: 快速开始 →
 actionLink: /zh/guide/
 ---

packages/docs/docs/README.md

@@ -4,7 +4,7 @@ pageClass: custom-page-home
 heroImage: /logo.png
 heroText: Vue JSON Schema Form
 tagline: Quickly building HTML form based on Vue and JSON Schema
-footer: Apache2.0 Licensed | Copyright © 2020-2020 Jun
+footer: Apache2.0 Licensed | Copyright © 2020-2023 Jun
 # actionText: Quick start →
 # actionLink: /en/guide/
 ---

packages/docs/docs/en/README.md

@@ -121,12 +121,28 @@ export function getUserUiOptions({
 
             // https://github.com/lljj-x/vue-json-schema-form/issues/170
             // ui:hidden需要作为内置属性使用，不能直接透传给widget组件，如果组件需要只能在ui:options 中使用hidden传递
-            if (key !== 'ui:hidden' && key.indexOf('ui:') === 0) {
-                // 只对 ui:xxx 配置形式支持表达式
-                return {
-                    ...options,
-                    [key.substring(3)]: curNodePath === undefined ? value : handleExpression(rootFormData, curNodePath, value, () => value)
-                };
+            if (key !== 'ui:hidden') {
+                // 处理 ui:xxx  参数
+                if (key.indexOf('ui:') === 0) {
+                    // 只对 ui:xxx 配置形式支持表达式
+                    return {
+                        ...options,
+                        [key.substring(3)]: curNodePath === undefined ? value : handleExpression(rootFormData, curNodePath, value, () => value)
+                    };
+                }
+
+                // 处理 fui:xxx 参数，支持所有的options 通过function配置
+                if (key.indexOf('fui:') === 0) {
+                    return {
+                        ...options,
+                        [key.substring(4)]: value.call(
+                            null,
+                            getPathVal(rootFormData, curNodePath, 1),
+                            rootFormData,
+                            curNodePath
+                        )
+                    };
+                }
             }
 
             return options;
@@ -233,6 +249,7 @@ export function getWidgetConfig({
         renderScopedSlots,
         renderChildren,
         onChange,
+        required: uiRequired,
         ...uiProps
     } = uiOptions;
 
@@ -254,7 +271,8 @@ export function getWidgetConfig({
         renderChildren,
         onChange,
         widgetListeners,
-        uiProps
+        uiProps,
+        uiRequired
     };
 }
 

packages/lib/utils/formUtils.js

@@ -50,10 +50,16 @@ export default {
             type: [String, Function, Object],
             default: null
         },
+        // 通过定义的 schema 计算出来的
         required: {
             type: Boolean,
             default: false
         },
+
+        // 通过ui schema 配置传递的props
+        uiRequired: {
+            type: Boolean
+        },
         // 解决 JSON Schema和实际输入元素中空字符串 required 判定的差异性
         // 元素输入为 '' 使用 emptyValue 的值
         emptyValue: {
@@ -152,6 +158,9 @@ export default {
                     this.$emit('onOtherDataChange', trueValue);
                 }
             }
+        },
+        realRequired() {
+            return this.uiRequired ?? this.required;
         }
     },
     created() {
@@ -164,7 +173,7 @@ export default {
             // array 渲染为多选框时默认为空数组
             if (this.schema.items) {
                 this.value = [];
-            } else if (this.required && this.formProps.defaultSelectFirstOption) {
+            } else if (this.realRequired && this.formProps.defaultSelectFirstOption) {
                 this.value = this.uiProps.enumOptions[0].value;
             }
         }
@@ -252,7 +261,7 @@ export default {
                                         uiSchema: self.$props.uiSchema,
                                         customFormats: self.$props.customFormats,
                                         errorSchema: self.errorSchema,
-                                        required: self.required,
+                                        required: self.realRequired,
                                         propPath: path2prop(curNodePath)
                                     });
                                     if (errors.length > 0) {
@@ -297,7 +306,7 @@ export default {
                     slot: 'label',
                     class: {
                         genFormLabel: true,
-                        genFormItemRequired: self.required,
+                        genFormItemRequired: self.realRequired,
                     },
                 }, [
                     `${label}`,

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

@@ -6,7 +6,7 @@
 import getDefaultFormState from '@lljj/vjsf-utils/schema/getDefaultFormState';
 
 import {
-    allowAdditionalItems, isFixedItems, isMultiSelect
+    allowAdditionalItems, isFixedItems, isMultiSelect, getUserUiOptions
 } from '@lljj/vjsf-utils/formUtils';
 import { getPathVal, setPathVal } from '@lljj/vjsf-utils/vueUtils';
 import { genId, lowerCase } from '@lljj/vjsf-utils/utils';
@@ -31,6 +31,17 @@ export default {
         };
     },
     computed: {
+        uiOptions() {
+            const {
+                schema, uiSchema, rootFormData, curNodePath
+            } = this.$props;
+            return getUserUiOptions({
+                schema,
+                uiSchema,
+                curNodePath,
+                rootFormData
+            });
+        },
         itemsFormData() {
             const formKeys = this.$data.formKeys;
             return this.curFormData.map((item, index) => ({
@@ -137,6 +148,11 @@ export default {
 
                 // 修改formData数据
                 curStrategy.apply(this, [this.curFormData, formDataPrams]);
+
+                // onArrayOperate
+                if (this.uiOptions.afterArrayOperate) {
+                    this.uiOptions.afterArrayOperate.call(null, this.curFormData, command, data);
+                }
             } else {
                 throw new Error(`错误 - 未知的操作：[${command}]`);
             }