docs(docs): 更新文档 添加naiveUi支持

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",

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

@@ -225,14 +225,14 @@ 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'));
 
 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/src/index')
+        import('@lljj/vue3-form-ant')
     ]);
 
     return {
@@ -252,21 +252,22 @@ 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/src/index')
+        import('@lljj/vue3-form-naive')
     ]);
 
     return {
         name: 'naiveFormWrap',
         setup(props, { attrs, slots }) {
-            // hack 动态install antDv，因为我不知其它地方如何获取 vue app
-            if (!installedAntdv) {
+            // hack 动态install naive，因为我不知其它地方如何获取 vue app
+            if (!installedNaive) {
                 const instance = getCurrentInstance();
                 instance.appContext.app.use(naive.default);
-                installedAntdv = true;
+                installedNaive = true;
             }
 
             return () => h(antForm.default, {
@@ -296,7 +297,7 @@ export default {
                 name: 'ElementPlus',
                 component: 'VueElementForm'
             }, {
-                name: 'antdv',
+                name: 'Antdv',
                 component: 'VueAntForm'
             }, {
                 name: 'Naive',

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
 

packages/docs/docs/zh/guide/components.md

@@ -12,7 +12,7 @@
 * [DatePickerWidget](#datepickerwidget)
 * [DateTimePickerWidget](#datetimepickerwidget)
 * [UploadWidget](#uploadwidget)
-* [vue3 ant 特有的](#vue3-ant-特有的全局组件)
+* [vue3 ant、naiveUi 特有的](#vue3-ant、naiveui-特有的全局组件)
 
 
 :::tip
@@ -150,18 +150,19 @@ export default {
 ## DateTimePickerWidget
 > 内部使用 `DatePicker / DateTimePicker` 组件，支持参数透传
 
-## vue3 ant 特有的全局组件
+## vue3 ant、naiveUi 特有的全局组件
 > 内部使用 `DatePicker / DateTimePicker` 组件，支持参数透
 
-vue3 ant 由于v-model不使用 `model: modelValue`，所以对常用的组件做了转换，如下：
-
-| 组件名      | 对应ant组件 |
-| ----------- | ----------- |
-| InputWidget      | a-input       |
-| InputNumberWidget   | a-input-number        |
-| AutoCompleteWidget   | a-auto-complete        |
-| SliderWidget   | a-slider        |
-| SwitchWidget   | a-switch        |
-| RateWidget   | a-rate        |
+vue3 ant和naiveUi 由于 `v-model` 默认不使用 `model: modelValue`，所以对常用的组件做了转换，如下：
 
+| 组件名      | 对应ant组件 | 对应Naive组件 |
+| ----------- | ----------- |----------- |
+| InputWidget      | a-input       |n-input       |
+| TextAreaWidget      | a-textarea       |n-input       |
+| InputNumberWidget   | a-input-number        |n-input-number        |
+| AutoCompleteWidget   | a-auto-complete        |n-auto-complete       |
+| SliderWidget   | a-slider        |n-slider       |
+| SwitchWidget   | a-switch        |a-switch       |
+| RateWidget   | a-rate        |a-rate       |
 
+快速转换 `modelValue` 可参考：[转换v-model组件 `modelValue` 到其它](/zh/guide/#vue3-ant、naiveui-v-model-特殊处理)