Skip to content

Commit 3ee330a

Browse files
lljj-xlljj-x
authored
Merge pull request #162 from lljj-x/feat/NaiveUI
Feat/naive UI
2 parents 9dcb7b1 + 18a7058 commit 3ee330a

File tree

74 files changed

+26090
-323
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+26090
-323
lines changed

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"scripts": {
1313
"docs:dev": "yarn workspace docs dev",
1414
"docs:build": "yarn workspace docs build",
15-
"lib:build": "yarn lib-element:build && yarn lib-iview3:build && yarn lib3-element:build && yarn lib3-ant:build",
15+
"lib:build": "yarn lib-element:build && yarn lib-iview3:build && yarn lib3-element:build && yarn lib3-ant:build && yarn lib3-naive:build",
1616
"lib-element:watch": "yarn workspace @lljj/vue-json-schema-form watch",
1717
"lib-element:build": "yarn workspace @lljj/vue-json-schema-form build",
1818
"lib-iview3:watch": "yarn workspace @lljj/vue2-form-iview3 watch",
@@ -21,6 +21,7 @@
2121
"lib3-element:build": "yarn workspace @lljj/vue3-form-element build",
2222
"lib3-ant:watch": "yarn workspace @lljj/vue3-form-ant watch",
2323
"lib3-ant:build": "yarn workspace @lljj/vue3-form-ant build",
24+
"lib3-naive:build": "yarn workspace @lljj/vue3-form-naive build",
2425
"demo:dev": "yarn workspace demo dev",
2526
"demo:build": "yarn workspace demo build",
2627
"demo3:dev": "yarn workspace demo-v3 dev",
@@ -50,6 +51,7 @@
5051
"@commitlint/cli": "^8.3.5",
5152
"@commitlint/config-conventional": "^8.3.4",
5253
"@vue/compiler-sfc": "^3.0.0",
54+
"naive-ui": "^2.26.1",
5355
"commitizen": "^4.1.2",
5456
"conventional-changelog-cli": "^2.0.34",
5557
"cz-conventional-changelog": "^3.2.0",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export default {
104104
}
105105
.logo {
106106
display: block;
107-
height: 30px;
107+
height: 25px;
108108
}
109109
}
110110
.menu {

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

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,15 @@
1515
:class="$style.menuLink"
1616
href="https://vue-json-schema-form.lljj.me/"
1717
>
18-
<i
19-
class="el-icon-s-home"
20-
:class="$style.menuIcon"
21-
></i>文档
18+
文档
2219
</a>
2320
</el-menu-item>
2421
<el-menu-item index="2">
2522
<a
2623
:class="$style.menuLink"
2724
href="/"
2825
>
29-
<i
30-
class="el-icon-lollipop"
31-
:class="$style.menuIcon"
32-
></i>Playground
26+
Playground
3327
</a>
3428
</el-menu-item>
3529
<el-menu-item
@@ -40,10 +34,7 @@
4034
:class="$style.menuLink"
4135
href="/vue-editor.html#/editor"
4236
>
43-
<i
44-
class="el-icon-ice-cream-round"
45-
:class="$style.menuIcon"
46-
></i>活动编辑器
37+
活动编辑器
4738
</a>
4839
</el-menu-item>
4940
<el-menu-item
@@ -54,10 +45,7 @@
5445
:class="$style.menuLink"
5546
href="/schema-generator.html#/index"
5647
>
57-
<i
58-
class="el-icon-cold-drink"
59-
:class="$style.menuIcon"
60-
></i>Schema 生成器
48+
Schema 生成器
6149
</a>
6250
</el-menu-item>
6351
<el-menu-item index="5">
@@ -66,10 +54,7 @@
6654
href="https://github.com/lljj-x/vue-json-schema-form"
6755
target="_blank"
6856
>
69-
<i
70-
class="el-icon-star-off"
71-
:class="$style.menuIcon"
72-
></i>Github
57+
Github
7358
</a>
7459
</el-menu-item>
7560
</el-menu>
@@ -84,7 +69,6 @@ export default {
8469

8570
<style module>
8671
.box {
87-
margin: 0 auto;
8872
:global {
8973
.el-menu.el-menu--horizontal {
9074
border-bottom: none;
@@ -93,11 +77,11 @@ export default {
9377
border-bottom-width: 3px;
9478
}
9579
.el-menu--horizontal>.el-menu-item {
96-
padding-left: 14px;
97-
padding-right: 0;
80+
padding-left: 8px;
81+
padding-right: 8px;
9882
margin: 0 20px;
99-
height: 80px;
100-
line-height: 80px;
83+
height: 54px;
84+
line-height: 54px;
10185
}
10286
}
10387
.menuLink {

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* Created by Liu.Jun on 2021/2/1 10:00 下午.
3+
*/
4+
5+
import NaiveUI from 'naive-ui';
6+
7+
export default {
8+
install(app) {
9+
app.use(NaiveUI);
10+
}
11+
};

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,20 @@
99
<el-slider
1010
v-model="formProps.labelWidth"
1111
style="width: 70px; margin-right: 6px;"
12-
size="mini"
12+
size="small"
1313
:format-tooltip="sliderFormat"
1414
></el-slider>
1515
<el-checkbox
1616
v-model="formProps.inline"
1717
style="margin-right: 6px;"
18-
size="mini"
18+
size="small"
1919
>
2020
Inline
2121
</el-checkbox>
2222
<el-checkbox
2323
v-model="formFooter.show"
2424
style="margin-right: 6px;"
25-
size="mini"
25+
size="small"
2626
>
2727
底部
2828
</el-checkbox>
@@ -155,7 +155,7 @@
155155
<el-select
156156
v-model="curVueForm"
157157
placeholder="ui"
158-
size="mini"
158+
size="small"
159159
style="margin-left: 10px;width: 130px;"
160160
@change="handleUiChange"
161161
>

‎packages/demo/demo-v3/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"@lljj/vue3-form-element": "1.11.0",
1515
"ajv-i18n": "^3.5.0",
1616
"ant-design-vue": "^2.0.1",
17+
"naive-ui": "^2.26.1",
1718
"demo-common": "1.2.0",
1819
"vue": "^3.0.0",
1920
"vuedraggable": "2.23.2"

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,15 @@
1111
<title>Vue JSON Schema form editor - VJSF</title>
1212
<meta name="description" content="vue-json-schema-form - 基于JSON Schema动态创建表单在线演示编辑器" />
1313
<link rel="icon" href="https://vue-json-schema-form.lljj.me/icons/ico.png">
14-
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus@1.0.2-beta.65/lib/theme-chalk/index.css">
14+
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css">
1515
<link rel="apple-touch-icon" href="https://vue-json-schema-form.lljj.me/icons/ico.png">
1616
</head>
1717
<body>
1818
<div id="app"></div>
1919
<script src="//cdn.jsdelivr.net/npm/@lljj/polyfill@0.1.1/dist/polyfill.umd.min.js"></script>
20-
<script src="//cdn.jsdelivr.net/npm/vue@3.0.5/dist/vue.global.js"></script>
20+
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
2121
<script src="//cdn.jsdelivr.net/npm/vue-router@4"></script>
22-
<script src="https://cdn.bootcdn.net/ajax/libs/element-plus/1.0.2-beta.65/index.full.js"></script>
22+
<script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
2323

2424
<script src="//cdn.jsdelivr.net/npm/monaco-editor@0.20.0/min/vs/loader.js"></script>
2525
<script>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,6 @@ app.use(ElementPlus);
3131
// mount
3232
app.mount('#app');
3333

34+
app.config.unwrapInjectedRef = true;
35+
3436
window.app1 = app;

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

Lines changed: 44 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<el-slider
1212
v-model="formProps.labelWidth"
1313
style="width: 70px; margin-right: 6px;"
14-
size="mini"
14+
size="small"
1515
:format-tooltip="sliderFormat"
1616
></el-slider>
1717
</template>
@@ -23,29 +23,29 @@
2323
:min="3"
2424
:max="15"
2525
style="width: 70px; margin-right: 6px;"
26-
size="mini"
26+
size="small"
2727
></el-slider>
2828
<span style="font-size: 13px;">wrapperCol：</span>
2929
<el-slider
3030
v-model="formProps.wrapperColSpan"
3131
:min="5"
3232
:max="24"
3333
style="width: 70px; margin-right: 6px;"
34-
size="mini"
34+
size="small"
3535
></el-slider>
3636
</template>
3737

3838
<el-checkbox
3939
v-model="formProps.inline"
4040
style="margin-right: 6px;"
41-
size="mini"
41+
size="small"
4242
>
4343
Inline
4444
</el-checkbox>
4545
<el-checkbox
4646
v-model="formFooter.show"
4747
style="margin-right: 6px;"
48-
size="mini"
48+
size="small"
4949
>
5050
底部
5151
</el-checkbox>
@@ -178,7 +178,7 @@
178178
<el-select
179179
v-model="curVueForm"
180180
placeholder="ui"
181-
size="mini"
181+
size="small"
182182
style="margin-left: 10px;width: 130px;"
183183
@change="handleUiChange"
184184
>
@@ -252,6 +252,31 @@ const VueAntForm = defineAsyncComponent(async () => {
252252
};
253253
});
254254
255+
let installedNaive = false;
256+
const VueNaiveForm = defineAsyncComponent(async () => {
257+
// eslint-disable-next-line no-unused-vars
258+
const [naive, antForm] = await Promise.all([
259+
import('demo-common/components/Naive/index.js'),
260+
import('@lljj/vue3-form-naive')
261+
]);
262+
263+
return {
264+
name: 'naiveFormWrap',
265+
setup(props, { attrs, slots }) {
266+
// hack 动态install naive，因为我不知其它地方如何获取 vue app
267+
if (!installedNaive) {
268+
const instance = getCurrentInstance();
269+
instance.appContext.app.use(naive.default);
270+
installedNaive = true;
271+
}
272+
273+
return () => h(antForm.default, {
274+
...attrs
275+
}, slots);
276+
}
277+
};
278+
});
279+
255280
const typeItems = Object.keys(schemaTypes);
256281
257282
export default {
@@ -260,6 +285,7 @@ export default {
260285
CodeEditor,
261286
VueElementForm,
262287
VueAntForm,
288+
VueNaiveForm,
263289
EditorHeader
264290
},
265291
data() {
@@ -271,8 +297,11 @@ export default {
271297
name: 'ElementPlus',
272298
component: 'VueElementForm'
273299
}, {
274-
name: 'antdv',
300+
name: 'Antdv',
275301
component: 'VueAntForm'
302+
}, {
303+
name: 'Naive',
304+
component: 'VueNaiveForm'
276305
}],
277306
customFormats: {
278307
price(value) {
@@ -286,7 +315,7 @@ export default {
286315
return this.$route.query.type;
287316
},
288317
isUseLabelWidth() {
289-
return this.curVueForm === 'VueElementForm';
318+
return this.curVueForm !== 'VueAntForm';
290319
},
291320
trueFormProps() {
292321
if (!this.formProps) return {};
@@ -311,16 +340,16 @@ export default {
311340
};
312341
},
313342
trueFormFooter() {
314-
const {
315-
labelColSpan,
316-
wrapperColSpan
317-
} = this.formProps;
343+
// const {
344+
// labelColSpan,
345+
// wrapperColSpan
346+
// } = this.formProps;
318347
319348
return this.isUseLabelWidth ? (this.formFooter || {}) : {
320349
formItemAttrs: {
321350
wrapperCol: {
322-
span: wrapperColSpan,
323-
offset: labelColSpan
351+
span: 24,
352+
offset: 0
324353
}
325354
}
326355
};
@@ -407,7 +436,7 @@ export default {
407436
labelPosition: 'top',
408437
inlineFooter: false,
409438
labelColSpan: 10,
410-
wrapperColSpan: 12,
439+
wrapperColSpan: 24,
411440
layoutColumn: 1
412441
},
413442
};

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

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,12 @@
3838
* umd script 标签形式引入暴露全局变量 `window.vue3FormElement`，`window.vue3FormElement.default` 暴露组件
3939
* [playground](https://form.lljj.me/v3/#/demo?type=Simple)
4040

41+
### @lljj/vue3-form-naive
42+
* 适配ui库：`Vue3` `antdv`
43+
* package name : `@lljj/vue3-form-naive`
44+
* umd cdn地址：[@lljj/vue3-form-naive cdn](https://cdn.jsdelivr.net/npm/@lljj/vue3-form-naive/dist/vue3-form-naive.umd.min.js)
45+
* umd script 标签形式引入暴露全局变量 `window.vue3FormNaive`，`window.vue3FormNaive.default` 暴露组件
46+
* [playground](https://form.lljj.me/v3/#/demo?type=Simple&ui=VueNaiveForm)
4147

4248
### @lljj/vue3-form-ant
4349
* 适配ui库：`Vue3` `antdv`
@@ -46,29 +52,31 @@
4652
* umd script 标签形式引入暴露全局变量 `window.vue3FormAnt`，`window.vue3FormAnt.default` 暴露组件
4753
* [playground](https://form.lljj.me/v3/#/demo?type=Simple&ui=VueAntForm)
4854

49-
#### vue3 ant v-model 特殊处理
55+
#### vue3 ant、naiveUi v-model 特殊处理
5056
例如 `a-input` 组件，ant vue3需要使用 `v-model:value`，但在整个框架内部 `v-model` 都是使用 `modelValue`，所以这里就需要对不一致的props通过中间组件组做转换。
5157

52-
你可以自行转换也可以使用内置方法 `modelValueComponent` 转换，如下：
58+
你可以自行转换，也可以使用内置方法 `modelValueComponent` 转换，如下：
5359
```js
54-
import { modelValueComponent } from '@lljj/vue3-form-ant';
55-
5660
// 返回一个接受 modelValue 和 update:modelValue v-model的组件
61+
import { modelValueComponent } from '@lljj/vue3-form-ant';
5762
const MyFixInputComponent = modelValueComponent('a-input', {
5863
model: 'value' // 这里要根据ant组件 model的参数传递
5964
});
60-
```
6165

62-
**这样使用起来还是有些麻烦，目前已经对常用的Widget组件做了内置，参见 [ant vue 附加全局Widget组件](/zh/guide/components.html#vue3-ant-特有的全局组件)**
63-
64-
----------------------------
66+
// naive 也是类似操作
67+
import { modelValueComponent } from '@lljj/vue3-form-naive';
68+
const MyFixInputComponent = modelValueComponent('n-input', {
69+
model: 'value' // 这里要根据naive组件 model的参数传递
70+
});
71+
```
6572

66-
::: tip
67-
后续的文档都以 `@lljj/vue-json-schema-form` 为例
73+
:::tip
74+
这样使用起来还是有些麻烦，目前已经对常用的Widget组件做了内置，
75+
参见 [ant、naiveUi vue 附加全局Widget组件](/zh/guide/components.html#vue3-ant、naiveui-特有的全局组件)
6876
:::
6977

70-
7178
## 快速开始
79+
> **后续的文档都以 `@lljj/vue-json-schema-form` 为例**
7280
7381
### npm
7482

0 commit comments

Comments
 (0)