feat(vue3-ant): 更新初始化

feat(vue3-antdv): 适配 a-form feat(vue3-ant): 更新a-form fix(vue3-elementplus): 修复elementPlus popover 组件渲染异常问题 fix #27 fix(vue3): 修复vue3版本inline 设置无效问题 fix #27 feat(core): 优化core 配置项 feat(vue3-antdv): 支持 a-form validate chore(vue3-antdv): 添加注释 feat(vue3-antdv): 完成 formItem 对子元素输入监听 feat(vue3-antdv): 完成 antdv基础组件 fix(vue3-antdv): 修复 formItem name参数需要数组的问题 feat(vue3-antdv): 适配checkbox radio select组件 feat(vue3-antdv): 更新样式 feat(vue3-antdv): 添加vue3-antdv 时间日期相关组件 feat(antdv): antdv 添加时间日期选择 feat(vue3-antdv): 添加upload 上传组件适配 feat(vue3-antdv): 优化图片上传逻辑 feat(vue3-antdv): 优化antdv适配体验 feat(vue3-antdv): 添加 on-form-mounted emit，支持获取form组件实例 re #27 chore(lib): 调整图标为统一内置svg，不再各ui框架单独配置 feat(vue3 antdv): 兼容ant vue v-model组件不使用moduleValue feat(vue3-antdv): 适配vue3-antdv hack首元素不是输入组件时正常校验 re #40 build(lib): build lib docs(docs): 更新文档 chore(playground): 优化地址跳转体验 chore(playground): 更新 vue ant到正式版本 chore(lib): 更新依赖版本
lljj-x · Mar 6, 2021 · 71a2810 · 71a2810
1 parent 24f299a
commit 71a2810
Show file tree

Hide file tree

Showing 95 changed files with 27,547 additions and 808 deletions.
diff --git a/README.md b/README.md
@@ -50,7 +50,7 @@ yarn run demo:dev --dir=vue-editor
 
 ### 说明
 * 遵循 `JSON Schema` 规范，只需要给定 `JSON Schema`，即可生成对应的form表单
-* 快速配置个性化ui视图和校验错误信息，可适配常用的ui库，目前的版本默认视图依赖 `elementUi`
+* 快速配置个性化ui视图和校验错误信息，可适配常用的ui库
 * 表单schema校验使用  [ajv](/~https://github.com/epoberezkin/ajv)
 * 设计思想和对schema解析索引参考 [react-jsonschema-form](/~https://github.com/rjsf-team/react-jsonschema-form)
 

diff --git a/package.json b/package.json
@@ -12,13 +12,15 @@
     "scripts": {
         "docs:dev": "yarn workspace docs dev",
         "docs:build": "yarn workspace docs build",
-        "lib:build": "yarn lib-element:build && yarn lib-iview3:build && yarn lib3-element:build",
+        "lib:build": "yarn lib-element:build && yarn lib-iview3:build && yarn lib3-element:build && yarn lib3-ant:build",
         "lib-element:watch": "yarn workspace @lljj/vue-json-schema-form watch",
         "lib-element:build": "yarn workspace @lljj/vue-json-schema-form build",
         "lib-iview3:watch": "yarn workspace @lljj/vue2-form-iview3 watch",
         "lib-iview3:build": "yarn workspace @lljj/vue2-form-iview3 build",
         "lib3-element:watch": "yarn workspace @lljj/vue3-form-element watch",
         "lib3-element:build": "yarn workspace @lljj/vue3-form-element build",
+        "lib3-ant:watch": "yarn workspace @lljj/vue3-form-ant watch",
+        "lib3-ant:build": "yarn workspace @lljj/vue3-form-ant build",
         "demo:dev": "yarn workspace demo dev",
         "demo:build": "yarn workspace demo build",
         "demo3:dev": "yarn workspace demo-v3 dev",

diff --git a/packages/demo/demo-common/components/Antdv/index.js b/packages/demo/demo-common/components/Antdv/index.js
@@ -0,0 +1,14 @@
+/**
+ * Created by Liu.Jun on 2021/2/1 10:00 下午.
+ */
+
+import Antd from 'ant-design-vue';
+
+// eslint-disable-next-line import/no-webpack-loader-syntax
+import '!vue-style-loader!css-loader!ant-design-vue/dist/antd.css';
+
+export default {
+    install(app) {
+        app.use(Antd);
+    }
+};
diff --git a/packages/demo/demo-common/components/EditorHeader.vue b/packages/demo/demo-common/components/EditorHeader.vue
@@ -66,7 +66,7 @@ export default {
             window.location.href = window.location.href.replace(
                 `${window.location.origin}${val === 'vue3' ? '' : '/v3'}`,
                 `${window.location.origin}${val === 'vue3' ? '/v3' : ''}`
-            );
+            ).replace(/&ui=.*?&/, '&');
         },
     }
 };

diff --git a/packages/demo/demo-common/components/iView/index.js b/packages/demo/demo-common/components/iView/index.js
@@ -7,6 +7,7 @@ import iView from 'iview';
 
 export default {
     install(Vue) {
+        // debugger;
         Vue.use(iView);
     }
 };
diff --git a/packages/demo/demo-common/schemaTypes/14.Number/index.js b/packages/demo/demo-common/schemaTypes/14.Number/index.js
@@ -2,6 +2,25 @@
  * Created by Liu.Jun on 2020/5/17 10:18 下午.
  */
 
+let sliderName = 'el-slider';
+const sliderNameRules = {
+    'ui=VueAntForm': 'SliderWidget',
+    'ui=VueIview3Form': 'slider'
+};
+
+const curUrl = window.location.href;
+Object.entries(sliderNameRules).some(([key, value]) => {
+    const isInclude = ~curUrl.indexOf(key);
+
+    if (isInclude) {
+        sliderName = value;
+        return true;
+    }
+
+    return false;
+});
+
+
 export default {
     schema: {
         type: 'object',
@@ -48,10 +67,10 @@ export default {
             'ui:enumNames': ['ui-radio1', 'ui-radio2', 'ui-radio3']
         },
         integerRange: {
-            'ui:widget': 'el-slider',
+            'ui:widget': sliderName
         },
         integerRangeSteps: {
-            'ui:widget': 'el-slider',
+            'ui:widget': sliderName
         },
     },
     formData: {

diff --git a/packages/demo/demo-v2/package.json b/packages/demo/demo-v2/package.json
@@ -9,11 +9,11 @@
         "lint": "vue-cli-service lint"
     },
     "dependencies": {
+        "demo-common": "1.0.0",
         "@lljj/polyfill": "^0.1.0",
         "@lljj/vue-json-schema-form": "1.0.2",
         "@lljj/vue2-form-iview3": "1.0.2",
         "ajv-i18n": "^3.5.0",
-        "element-ui": "^2.14.1",
         "iview": "^3.5.4",
         "vue": "^2.6.10",
         "vuedraggable": "2.23.2"

diff --git a/packages/demo/demo-v2/src/pages/index/views/Demo/index.vue b/packages/demo/demo-v2/src/pages/index/views/Demo/index.vue
@@ -87,6 +87,7 @@
                     :to="{
                         name: 'demo',
                         query: {
+                            ui: curVueForm,
                             type: item
                         }
                     }"
@@ -177,6 +178,7 @@
                             :custom-formats="customFormats"
                             :form-footer="trueFormFooter"
                             :form-props="trueFormProps"
+                            @on-form-mounted="handleFormMounted"
                             @on-change="handleDataChange"
                             @on-cancel="handleCancel"
                             @on-submit="handleSubmit"
@@ -377,6 +379,9 @@ export default {
                 formProps
             }));
         },
+        handleFormMounted(formRef) {
+            console.log('Ui form component:', formRef);
+        },
         handleDataChange() {
             console.log('Data change');
         },
@@ -405,6 +410,7 @@ export default {
 
             const genRoute = this.$router.resolve({
                 query: {
+                    ui: this.curVueForm,
                     type: 'Test',
                     ui: this.curVueForm,
                     schema: formatStr(this.curSchemaCode),

diff --git a/packages/demo/demo-v2/src/pages/schema-generator/views/editor/Editor.vue b/packages/demo/demo-v2/src/pages/schema-generator/views/editor/Editor.vue
@@ -56,7 +56,6 @@
                         :class="{
                             layoutColumn: !formProps.inline,
                             [`layoutColumn-${formProps.layoutColumn}`]: !formProps.inline,
-                            [`formLabel-${formProps.labelPosition}`]: true,
                             formInlineFooter: formProps.inlineFooter,
                             formInline: formProps.inline,
                             // [`genFromComponent_${schema.id}Form`]: !!schema.id,

diff --git a/packages/demo/demo-v3/package.json b/packages/demo/demo-v3/package.json
@@ -9,10 +9,12 @@
         "lint": "vue-cli-service lint"
     },
     "dependencies": {
+        "demo-common": "1.0.0",
         "@lljj/polyfill": "^0.1.0",
         "@lljj/vue3-form-element": "1.0.2",
+        "@lljj/vue3-form-ant": "1.0.2",
         "ajv-i18n": "^3.5.0",
-        "demo-common": "1.0.0",
+        "ant-design-vue": "^2.0.1",
         "vue": "^3.0.0",
         "vuedraggable": "2.23.2"
     },

diff --git a/packages/demo/demo-v3/src/pages/index/index.html b/packages/demo/demo-v3/src/pages/index/index.html
@@ -17,7 +17,7 @@
 <body>
     <div id="app"></div>
     <script src="//cdn.jsdelivr.net/npm/@lljj/polyfill@0.1.1/dist/polyfill.umd.min.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/vue@next"></script>
+    <script src="//cdn.jsdelivr.net/npm/vue@3.0.5/dist/vue.global.js"></script>
     <script src="//cdn.jsdelivr.net/npm/vue-router@4"></script>
     <script src="//cdn.jsdelivr.net/npm/element-plus/lib/index.full.js"></script>
 

diff --git a/packages/demo/demo-v3/src/pages/index/views/Demo/index.vue b/packages/demo/demo-v3/src/pages/index/views/Demo/index.vue
@@ -88,6 +88,7 @@
                     :to="{
                         name: 'demo',
                         query: {
+                            ui: curVueForm,
                             type: item
                         }
                     }"
@@ -179,6 +180,7 @@
                             :custom-formats="customFormats"
                             :form-footer="trueFormFooter"
                             :form-props="trueFormProps"
+                            @form-mounted="handleFormMounted"
                             @change="handleDataChange"
                             @cancel="handleCancel"
                             @submit="handleSubmit"
@@ -193,21 +195,37 @@
 </template>
 
 <script>
-import { defineAsyncComponent } from 'vue';
+import { defineAsyncComponent, getCurrentInstance, h } from 'vue';
 import EditorHeader from 'demo-common/components/EditorHeader.vue';
 import CodeEditor from 'demo-common/components/CodeEditor';
 import schemaTypes from 'demo-common/schemaTypes';
 
-const VueElementForm = defineAsyncComponent(() => import('@lljj/vue3-form-element/src/index'));
+const VueElementForm = defineAsyncComponent(() => import('@lljj/vue3-form-element'));
 
-// const VueAntForm = async () => {
-//     const [iview, ivewForm] = await Promise.all([
-//         import('demo-common/components/iView/index.js'),
-//         import('@lljj/vue2-form-iview3')
-//     ]);
-//
-//     return ivewForm;
-// };
+let installedAntdv = false;
+const VueAntForm = defineAsyncComponent(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 {
+        name: 'antFormWrap',
+        setup(props, { attrs, slots }) {
+            // hack 动态install antDv，因为我不知其它地方如何获取 vue app
+            if (!installedAntdv) {
+                const instance = getCurrentInstance();
+                instance.appContext.app.use(antdv.default);
+                installedAntdv = true;
+            }
+
+            return () => h(antForm.default, {
+                ...attrs
+            }, slots);
+        }
+    };
+});
 
 const typeItems = Object.keys(schemaTypes);
 
@@ -216,6 +234,7 @@ export default {
     components: {
         CodeEditor,
         VueElementForm,
+        VueAntForm,
         EditorHeader
     },
     data() {
@@ -226,10 +245,10 @@ export default {
             formComponents: [{
                 name: 'ElementPlus',
                 component: 'VueElementForm'
-            }, /* {
-                name: 'Iview3',
-                component: 'VueIview3Form'
-            } */],
+            }, {
+                name: 'antdv',
+                component: 'VueAntForm'
+            }],
             customFormats: {
                 price(value) {
                     return value !== '' && /^[0-9]\d*$|^\d+(\.\d{1,2})$/.test(value) && value >= 0 && value <= 999999.99;
@@ -311,8 +330,9 @@ export default {
                     formFooter: formatStr(JSON.stringify(this.trueFormFooter)),
                     formProps: formatStr(JSON.stringify(this.trueFormProps)),
                 }
+            }).then(() => {
+                window.location.reload();
             });
-            window.location.reload();
         },
         sliderFormat(value) {
             return value ? `${value * 4}px` : undefined;
@@ -379,6 +399,9 @@ export default {
                 formProps
             }));
         },
+        handleFormMounted(formRef) {
+            console.log('Ui form component:', formRef);
+        },
         handleDataChange() {
             console.log('Data change');
         },
@@ -412,6 +435,7 @@ export default {
 
             const genRoute = this.$router.resolve({
                 query: {
+                    ui: this.curVueForm,
                     type: 'Test',
                     schema: formatStr(this.curSchemaCode),
                     formData: formatStr(this.curFormDataCode),

diff --git a/packages/demo/demo-v3/vue.config.js b/packages/demo/demo-v3/vue.config.js
@@ -55,6 +55,7 @@ module.exports = {
     productionSourceMap: false,
 
     configureWebpack: (config) => {
+        debugger;
         config.externals = {
             vue: 'Vue',
             ElementPlus: 'ElementPlus',
@@ -123,7 +124,12 @@ module.exports = {
     css: {
         requireModuleExtension: true,
         sourceMap: !isProduction,
-        extract: isProduction
+        extract: isProduction,
+        loaderOptions: {
+            postcss: {
+                // exclude: /(node_modules\/ant-design-vue)/,
+            }
+        }
     },
 
     // All options for webpack-dev-server are supported

diff --git a/packages/docs/docs/zh/guide/README.md b/packages/docs/docs/zh/guide/README.md
@@ -14,32 +14,54 @@
 **各版本api和使用形式99%一致，仅有如下差异：**
 ::: warning 各版本差异
 * vue3 emit事件都会去掉on前缀，详细看这里 [事件 Emit Event](/zh/guide/basic-config.html#事件-emit-event)
+* vue3 antDv `v-model` 不使用 `modelValue` props，这里需要做个转换，[详细参见](/zh/guide/#vue3-ant-v-model-%E7%89%B9%E6%AE%8A%E5%A4%84%E7%90%86)
 :::
 
 ### @lljj/vue-json-schema-form
 * 适配ui库：`Vue2` `ElementUi`
 * package name: `@lljj/vue-json-schema-form`
 * umd cdn地址：[@lljj/vue-json-schema-form cdn](https://cdn.jsdelivr.net/npm/@lljj/vue-json-schema-form/dist/vueJsonSchemaForm.umd.min.js)
 * umd script 标签形式引入暴露全局变量 `window.vueJsonSchemaForm`
+* [playground](https://form.lljj.me/#/demo?type=Simple)
 
 ### @lljj/vue2-form-iview3
 * 适配ui库：`Vue2` `iview3`
 * package name: `@lljj/vue2-form-iview3`
 * umd cdn地址：[@lljj/vue2-form-iview3 cdn](https://cdn.jsdelivr.net/npm/@lljj/vue2-form-iview3/dist/vue2-form-iview3.umd.min.js)
 * umd script 标签形式引入暴露全局变量 `window.vue2FormIview3`
+* [playground](https://form.lljj.me/#/demo?type=Simple&ui=VueIview3Form)
 
 ### @lljj/vue3-form-element
 * 适配ui库：`Vue3` `ElementPlus`
 * package name : `@lljj/vue3-form-element`
-* umd cdn地址：[@lljj/vue2-form-iview3 cdn](https://cdn.jsdelivr.net/npm/@lljj/vue3-form-element/dist/vue3-form-element.umd.min.js)
+* umd cdn地址：[@lljj/vue3-form-element cdn](https://cdn.jsdelivr.net/npm/@lljj/vue3-form-element/dist/vue3-form-element.umd.min.js)
 * umd script 标签形式引入暴露全局变量 `window.vue3FormElement`
+* [playground](https://form.lljj.me/v3/#/demo?type=Simple)
+
 
 ### @lljj/vue3-form-ant
 * 适配ui库：`Vue3` `antdv`
 * package name : `@lljj/vue3-form-ant`
 * umd cdn地址：[@lljj/vue3-form-ant cdn](https://cdn.jsdelivr.net/npm/@lljj/vue3-form-ant/dist/vue3-form-ant.umd.min.js)
 * umd script 标签形式引入暴露全局变量 `window.vue3FormAnt`
-* >todo，还未发布
+* [playground](https://form.lljj.me/v3/#/demo?type=Simple&ui=VueAntForm)
+
+#### vue3 ant v-model 特殊处理
+例如 `a-input` 组件，ant vue3需要使用 `v-model:value`，但在整个框架内部 `v-model` 都是使用 `modelValue`，所以这里就需要对不一致的props通过中间组件组做转换。
+
+你可以自行转换也可以使用内置方法 `modelValueComponent` 转换，如下：
+```js
+import { modelValueComponent } from '@lljj/vue3-form-ant';
+
+// 返回一个接受 modelValue 和 update:modelValue v-model的组件
+const MyFixInputComponent = modelValueComponent('a-input', {
+    model: 'value' // 这里要根据ant组件 model的参数传递
+});
+```
+
+**这样使用起来还是有些麻烦，目前已经对常用的Widget组件做了内置，参见 [ant vue 附加全局Widget组件](/zh/guide/components.html#vue3-ant-特有的全局组件)**
+
+----------------------------
 
 ::: tip
 后续的文档都以 `@lljj/vue-json-schema-form` 为例
@@ -191,6 +213,6 @@ Field props配置，如果需要使用 `ui:field` 自定义field 组件，需要
 
 ## 说明
 * 遵循 JSON Schema 规范，只需要给定 `JSON Schema`，即可生成对应的form表单
-* 快速配置个性化ui视图和校验错误信息，可适配常用的ui库，目前的版本默认视图依赖elementUi，后续版本会解耦开来，可通过配置适配ElementUi，iView 或者你自己开发的组件库等
+* 快速配置个性化ui视图和校验错误信息，可适配常用的ui库，可通过配置适配ElementUi，iView 或者你自己开发的组件库等
 * 表单schema校验使用  [ajv](/~https://github.com/epoberezkin/ajv)
 * 设计思想和对schema解析索引参考 [react-jsonschema-form](/~https://github.com/rjsf-team/react-jsonschema-form)