Merge pull request #162 from lljj-x/feat/NaiveUI

Feat/naive UI

Author: lljj-x

package.json

@@ -12,7 +12,7 @@
     "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 && yarn lib3-ant:build",
+        "lib:build": "yarn lib-element:build && yarn lib-iview3:build && yarn lib3-element:build && yarn lib3-ant:build && yarn lib3-naive: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",
@@ -21,6 +21,7 @@
         "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",
+        "lib3-naive:build": "yarn workspace @lljj/vue3-form-naive build",
         "demo:dev": "yarn workspace demo dev",
         "demo:build": "yarn workspace demo build",
         "demo3:dev": "yarn workspace demo-v3 dev",
@@ -50,6 +51,7 @@
         "@commitlint/cli": "^8.3.5",
         "@commitlint/config-conventional": "^8.3.4",
         "@vue/compiler-sfc": "^3.0.0",
+        "naive-ui": "^2.26.1",
         "commitizen": "^4.1.2",
         "conventional-changelog-cli": "^2.0.34",
         "cz-conventional-changelog": "^3.2.0",

packages/demo/demo-common/components/EditorHeader.vue

@@ -104,7 +104,7 @@ export default {
         }
         .logo {
             display: block;
-            height: 30px;
+            height: 25px;
         }
     }
     .menu {

packages/demo/demo-common/components/Menu.vue

@@ -15,21 +15,15 @@
                     :class="$style.menuLink"
                     href="https://vue-json-schema-form.lljj.me/"
                 >
-                    <i
-                        class="el-icon-s-home"
-                        :class="$style.menuIcon"
-                    ></i>文档
+                    文档
                 </a>
             </el-menu-item>
             <el-menu-item index="2">
                 <a
                     :class="$style.menuLink"
                     href="/"
                 >
-                    <i
-                        class="el-icon-lollipop"
-                        :class="$style.menuIcon"
-                    ></i>Playground
+                    Playground
                 </a>
             </el-menu-item>
             <el-menu-item
@@ -40,10 +34,7 @@
                     :class="$style.menuLink"
                     href="/vue-editor.html#/editor"
                 >
-                    <i
-                        class="el-icon-ice-cream-round"
-                        :class="$style.menuIcon"
-                    ></i>活动编辑器
+                    活动编辑器
                 </a>
             </el-menu-item>
             <el-menu-item
@@ -54,10 +45,7 @@
                     :class="$style.menuLink"
                     href="/schema-generator.html#/index"
                 >
-                    <i
-                        class="el-icon-cold-drink"
-                        :class="$style.menuIcon"
-                    ></i>Schema 生成器
+                    Schema 生成器
                 </a>
             </el-menu-item>
             <el-menu-item index="5">
@@ -66,10 +54,7 @@
                     href="https://github.com/lljj-x/vue-json-schema-form"
                     target="_blank"
                 >
-                    <i
-                        class="el-icon-star-off"
-                        :class="$style.menuIcon"
-                    ></i>Github
+                    Github
                 </a>
             </el-menu-item>
         </el-menu>
@@ -84,7 +69,6 @@ export default {
 
 <style module>
 .box {
-    margin: 0 auto;
     :global {
         .el-menu.el-menu--horizontal {
             border-bottom: none;
@@ -93,11 +77,11 @@ export default {
             border-bottom-width: 3px;
         }
         .el-menu--horizontal>.el-menu-item {
-            padding-left: 14px;
-            padding-right: 0;
+            padding-left: 8px;
+            padding-right: 8px;
             margin: 0 20px;
-            height: 80px;
-            line-height: 80px;
+            height: 54px;
+            line-height: 54px;
         }
     }
     .menuLink {

packages/demo/demo-common/components/Naive/index.js

@@ -0,0 +1,11 @@
+/**
+ * Created by Liu.Jun on 2021/2/1 10:00 下午.
+ */
+
+import NaiveUI from 'naive-ui';
+
+export default {
+    install(app) {
+        app.use(NaiveUI);
+    }
+};

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

@@ -9,20 +9,20 @@
                 <el-slider
                     v-model="formProps.labelWidth"
                     style="width: 70px; margin-right: 6px;"
-                    size="mini"
+                    size="small"
                     :format-tooltip="sliderFormat"
                 ></el-slider>
                 <el-checkbox
                     v-model="formProps.inline"
                     style="margin-right: 6px;"
-                    size="mini"
+                    size="small"
                 >
                     Inline
                 </el-checkbox>
                 <el-checkbox
                     v-model="formFooter.show"
                     style="margin-right: 6px;"
-                    size="mini"
+                    size="small"
                 >
                     底部
                 </el-checkbox>
@@ -155,7 +155,7 @@
                                 <el-select
                                     v-model="curVueForm"
                                     placeholder="ui"
-                                    size="mini"
+                                    size="small"
                                     style="margin-left: 10px;width: 130px;"
                                     @change="handleUiChange"
                                 >

packages/demo/demo-v3/package.json

@@ -14,6 +14,7 @@
         "@lljj/vue3-form-element": "1.11.0",
         "ajv-i18n": "^3.5.0",
         "ant-design-vue": "^2.0.1",
+        "naive-ui": "^2.26.1",
         "demo-common": "1.2.0",
         "vue": "^3.0.0",
         "vuedraggable": "2.23.2"

packages/demo/demo-v3/src/pages/index/index.html

@@ -11,15 +11,15 @@
     <title>Vue JSON Schema form editor - VJSF</title>
     <meta name="description" content="vue-json-schema-form - 基于JSON Schema动态创建表单在线演示编辑器" />
     <link rel="icon" href="https://vue-json-schema-form.lljj.me/icons/ico.png">
-    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus@1.0.2-beta.65/lib/theme-chalk/index.css">
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css">
     <link rel="apple-touch-icon" href="https://vue-json-schema-form.lljj.me/icons/ico.png">
 </head>
 <body>
     <div id="app"></div>
     <script src="//cdn.jsdelivr.net/npm/@lljj/[email protected]/dist/polyfill.umd.min.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/vue@3.0.5/dist/vue.global.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
     <script src="//cdn.jsdelivr.net/npm/vue-router@4"></script>
-    <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/1.0.2-beta.65/index.full.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/min/vs/loader.js"></script>
     <script>

packages/demo/demo-v3/src/pages/index/index.js

@@ -31,4 +31,6 @@ app.use(ElementPlus);
 // mount
 app.mount('#app');
 
+app.config.unwrapInjectedRef = true;
+
 window.app1 = app;

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

@@ -11,7 +11,7 @@
                     <el-slider
                         v-model="formProps.labelWidth"
                         style="width: 70px; margin-right: 6px;"
-                        size="mini"
+                        size="small"
                         :format-tooltip="sliderFormat"
                     ></el-slider>
                 </template>
@@ -23,29 +23,29 @@
                         :min="3"
                         :max="15"
                         style="width: 70px; margin-right: 6px;"
-                        size="mini"
+                        size="small"
                     ></el-slider>
                     <span style="font-size: 13px;">wrapperCol：</span>
                     <el-slider
                         v-model="formProps.wrapperColSpan"
                         :min="5"
                         :max="24"
                         style="width: 70px; margin-right: 6px;"
-                        size="mini"
+                        size="small"
                     ></el-slider>
                 </template>
 
                 <el-checkbox
                     v-model="formProps.inline"
                     style="margin-right: 6px;"
-                    size="mini"
+                    size="small"
                 >
                     Inline
                 </el-checkbox>
                 <el-checkbox
                     v-model="formFooter.show"
                     style="margin-right: 6px;"
-                    size="mini"
+                    size="small"
                 >
                     底部
                 </el-checkbox>
@@ -178,7 +178,7 @@
                                     <el-select
                                         v-model="curVueForm"
                                         placeholder="ui"
-                                        size="mini"
+                                        size="small"
                                         style="margin-left: 10px;width: 130px;"
                                         @change="handleUiChange"
                                     >
@@ -252,6 +252,31 @@ const VueAntForm = defineAsyncComponent(async () => {
     };
 });
 
+let installedNaive = false;
+const VueNaiveForm = defineAsyncComponent(async () => {
+    // eslint-disable-next-line no-unused-vars
+    const [naive, antForm] = await Promise.all([
+        import('demo-common/components/Naive/index.js'),
+        import('@lljj/vue3-form-naive')
+    ]);
+
+    return {
+        name: 'naiveFormWrap',
+        setup(props, { attrs, slots }) {
+            // hack 动态install naive，因为我不知其它地方如何获取 vue app
+            if (!installedNaive) {
+                const instance = getCurrentInstance();
+                instance.appContext.app.use(naive.default);
+                installedNaive = true;
+            }
+
+            return () => h(antForm.default, {
+                ...attrs
+            }, slots);
+        }
+    };
+});
+
 const typeItems = Object.keys(schemaTypes);
 
 export default {
@@ -260,6 +285,7 @@ export default {
         CodeEditor,
         VueElementForm,
         VueAntForm,
+        VueNaiveForm,
         EditorHeader
     },
     data() {
@@ -271,8 +297,11 @@ export default {
                 name: 'ElementPlus',
                 component: 'VueElementForm'
             }, {
-                name: 'antdv',
+                name: 'Antdv',
                 component: 'VueAntForm'
+            }, {
+                name: 'Naive',
+                component: 'VueNaiveForm'
             }],
             customFormats: {
                 price(value) {
@@ -286,7 +315,7 @@ export default {
             return this.$route.query.type;
         },
         isUseLabelWidth() {
-            return this.curVueForm === 'VueElementForm';
+            return this.curVueForm !== 'VueAntForm';
         },
         trueFormProps() {
             if (!this.formProps) return {};
@@ -311,16 +340,16 @@ export default {
             };
         },
         trueFormFooter() {
-            const {
-                labelColSpan,
-                wrapperColSpan
-            } = this.formProps;
+            // const {
+            // labelColSpan,
+            // wrapperColSpan
+            // } = this.formProps;
 
             return this.isUseLabelWidth ? (this.formFooter || {}) : {
                 formItemAttrs: {
                     wrapperCol: {
-                        span: wrapperColSpan,
-                        offset: labelColSpan
+                        span: 24,
+                        offset: 0
                     }
                 }
             };
@@ -407,7 +436,7 @@ export default {
                     labelPosition: 'top',
                     inlineFooter: false,
                     labelColSpan: 10,
-                    wrapperColSpan: 12,
+                    wrapperColSpan: 24,
                     layoutColumn: 1
                 },
             };

packages/docs/docs/zh/guide/README.md

@@ -38,6 +38,12 @@
 * umd script 标签形式引入暴露全局变量 `window.vue3FormElement`，`window.vue3FormElement.default` 暴露组件
 * [playground](https://form.lljj.me/v3/#/demo?type=Simple)
 
+### @lljj/vue3-form-naive
+* 适配ui库：`Vue3` `antdv`
+* package name : `@lljj/vue3-form-naive`
+* umd cdn地址：[@lljj/vue3-form-naive cdn](https://cdn.jsdelivr.net/npm/@lljj/vue3-form-naive/dist/vue3-form-naive.umd.min.js)
+* umd script 标签形式引入暴露全局变量 `window.vue3FormNaive`，`window.vue3FormNaive.default` 暴露组件
+* [playground](https://form.lljj.me/v3/#/demo?type=Simple&ui=VueNaiveForm)
 
 ### @lljj/vue3-form-ant
 * 适配ui库：`Vue3` `antdv`
@@ -46,29 +52,31 @@
 * umd script 标签形式引入暴露全局变量 `window.vue3FormAnt`，`window.vue3FormAnt.default` 暴露组件
 * [playground](https://form.lljj.me/v3/#/demo?type=Simple&ui=VueAntForm)
 
-#### vue3 ant v-model 特殊处理
+#### vue3 ant、naiveUi v-model 特殊处理
 例如 `a-input` 组件，ant vue3需要使用 `v-model:value`，但在整个框架内部 `v-model` 都是使用 `modelValue`，所以这里就需要对不一致的props通过中间组件组做转换。
 
-你可以自行转换也可以使用内置方法 `modelValueComponent` 转换，如下：
+你可以自行转换，也可以使用内置方法 `modelValueComponent` 转换，如下：
 ```js
-import { modelValueComponent } from '@lljj/vue3-form-ant';
-
 // 返回一个接受 modelValue 和 update:modelValue v-model的组件
+import { modelValueComponent } from '@lljj/vue3-form-ant';
 const MyFixInputComponent = modelValueComponent('a-input', {
     model: 'value' // 这里要根据ant组件 model的参数传递
 });
-```
 
-**这样使用起来还是有些麻烦，目前已经对常用的Widget组件做了内置，参见 [ant vue 附加全局Widget组件](/zh/guide/components.html#vue3-ant-特有的全局组件)**
-
-----------------------------
+// naive 也是类似操作
+import { modelValueComponent } from '@lljj/vue3-form-naive';
+const MyFixInputComponent = modelValueComponent('n-input', {
+    model: 'value' // 这里要根据naive组件 model的参数传递
+});
+```
 
-::: tip
-后续的文档都以 `@lljj/vue-json-schema-form` 为例
+:::tip
+这样使用起来还是有些麻烦，目前已经对常用的Widget组件做了内置，
+参见 [ant、naiveUi vue 附加全局Widget组件](/zh/guide/components.html#vue3-ant、naiveui-特有的全局组件)
 :::
 
-
 ## 快速开始
+> **后续的文档都以 `@lljj/vue-json-schema-form` 为例**
 
 ### npm