Skip to content

Commit 98f2639

Browse files
felixpyfelixpy
committed
feat(adaptor): add view ui
1 parent 52a0818 commit 98f2639

22 files changed

+1001
-15
lines changed

‎.eslintrc.js

+2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ module.exports = {
1313
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
1414
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
1515

16+
'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],
17+
1618
'prettier/prettier': 'error'
1719
},
1820
parserOptions: {

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@fext/vue-form-builder",
3-
"version": "1.0.0",
3+
"version": "2.1.0",
44
"description": "Build powerful vue form with JSON schema and composition api.",
55
"main": "lib/index.js",
66
"module": "lib/index.esm.js",
@@ -99,6 +99,7 @@
9999
"sass": "^1.24.2",
100100
"sass-loader": "^8.0.0",
101101
"vee-validate": "^3.3.0",
102+
"view-design": "^4.2.0",
102103
"vue": "^2.6.11",
103104
"vue-jest": "^3.0.5",
104105
"vue-loader": "^15.8.3"

‎rollup.config.js

+26-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const config = [
5656
external: commonExternal
5757
},
5858

59-
// element-form-adaptor
59+
// element-ui-form-adaptor
6060
{
6161
input: 'src/el-form-adaptor.js',
6262
output: [
@@ -79,6 +79,31 @@ const config = [
7979
],
8080
plugins: [...commonPlugins],
8181
external: commonExternal
82+
},
83+
84+
// view-ui-form-adaptor
85+
{
86+
input: 'src/view-form-adaptor.js',
87+
output: [
88+
{
89+
file: 'lib/adaptor/view.js',
90+
format: 'cjs',
91+
exports: 'named'
92+
}
93+
],
94+
plugins: [...commonPlugins],
95+
external: commonExternal
96+
},
97+
{
98+
input: 'src/view-form-adaptor.js',
99+
output: [
100+
{
101+
file: 'lib/adaptor/view.esm.js',
102+
format: 'esm'
103+
}
104+
],
105+
plugins: [...commonPlugins],
106+
external: commonExternal
82107
}
83108
];
84109

‎src/components/ViewFormAdaptor.vue

+178
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<template>
2+
<validation-provider :rules="rules" v-slot="{ errors }">
3+
<FormItem
4+
:label="label"
5+
:size="size"
6+
:required="isRequired"
7+
:error="errors[0]"
8+
>
9+
<template v-slot:label>
10+
<span>{{ label }}</span>
11+
<span v-if="tooltip">
12+
<Tooltip :content="tooltip" placement="top">
13+
<Icon type="md-help-circle"></Icon>
14+
</Tooltip>
15+
</span>
16+
</template>
17+
<component
18+
v-if="isSelect"
19+
:is="component"
20+
v-bind="props"
21+
:value="localValue"
22+
@input="updateLocalValue"
23+
>
24+
<Option v-for="item in items" :key="item.value" :value="item.value">
25+
{{ item.text }}
26+
</Option>
27+
</component>
28+
<component
29+
v-else-if="isRadio"
30+
:is="component"
31+
v-bind="props"
32+
:value="localValue"
33+
@input="updateLocalValue"
34+
>
35+
<Radio v-for="item in items" :key="item.value" :label="item.value">
36+
{{ item.text }}
37+
</Radio>
38+
</component>
39+
<component
40+
v-else-if="isCheckbox"
41+
:is="component"
42+
v-bind="props"
43+
:value="localValue"
44+
@input="updateLocalValue"
45+
>
46+
<Checkbox v-for="item in items" :key="item.value" :label="item.value">
47+
{{ item.text }}
48+
</Checkbox>
49+
</component>
50+
<component
51+
v-else
52+
:is="component"
53+
v-bind="props"
54+
:value="localValue"
55+
@input="updateLocalValue"
56+
>
57+
</component>
58+
<div class="ivu-form-item-tip" v-if="tip">{{ tip }}</div>
59+
</FormItem>
60+
</validation-provider>
61+
</template>
62+
63+
<style lang="scss">
64+
.ivu-form-item-tip {
65+
font-size: 12px;
66+
line-height: 12px;
67+
padding: 10px 0 5px 0;
68+
color: #737373;
69+
}
70+
</style>
71+
72+
<script>
73+
import { useFormElement } from '@fext/vue-use';
74+
75+
export default {
76+
name: 'view-form-adaptor',
77+
78+
props: {
79+
tip: String,
80+
tooltip: String,
81+
name: String,
82+
size: {
83+
type: String,
84+
default: 'default'
85+
},
86+
label: String,
87+
rules: {
88+
type: [String, Object]
89+
},
90+
value: {
91+
required: false
92+
},
93+
props: {
94+
type: Object,
95+
default() {
96+
return {};
97+
},
98+
required: false
99+
},
100+
items: {
101+
type: Array,
102+
default() {
103+
return [];
104+
},
105+
required: false
106+
},
107+
extend: {
108+
type: Object,
109+
default() {
110+
return {};
111+
}
112+
},
113+
metadata: {
114+
type: Object,
115+
default() {
116+
return {};
117+
}
118+
},
119+
formValues: {
120+
type: Object,
121+
required: false
122+
}
123+
},
124+
125+
setup(props, context) {
126+
const {
127+
dirty,
128+
isRequired,
129+
localValue,
130+
setInitialValue,
131+
updateLocalValue
132+
} = useFormElement(props, context);
133+
return {
134+
dirty,
135+
isRequired,
136+
localValue,
137+
setInitialValue,
138+
updateLocalValue
139+
};
140+
},
141+
142+
data() {
143+
return {};
144+
},
145+
146+
computed: {
147+
component() {
148+
return this.extend.component || 'Input';
149+
},
150+
151+
isSelect() {
152+
return this.component === 'Select';
153+
},
154+
155+
isMultipleSelect() {
156+
return this.isSelect && this.props.multiple;
157+
},
158+
159+
isRadio() {
160+
return this.component === 'RadioGroup';
161+
},
162+
163+
isCheckbox() {
164+
return this.component === 'CheckboxGroup';
165+
}
166+
},
167+
168+
created() {
169+
const { localValue, isMultipleSelect, isCheckbox } = this;
170+
171+
if (localValue == null) {
172+
if (isMultipleSelect || isCheckbox) {
173+
this.setInitialValue([]);
174+
}
175+
}
176+
}
177+
};
178+
</script>

‎src/view-form-adaptor.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import ViewFormAdaptor from './components/ViewFormAdaptor.vue';
2+
3+
const install = function installViewFormAdaptor(Vue) {
4+
Vue.component('view-form-adaptor', ViewFormAdaptor);
5+
};
6+
7+
export { ViewFormAdaptor };
8+
9+
export default {
10+
install
11+
};

‎stories/elementui/FormBuilder.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Element UI Form Builder
2+
3+
Vue form builder with element ui.

‎stories/formbuilder/FormBuilder.stories.js renamed to ‎stories/elementui/FormBuilder.stories.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -326,7 +326,7 @@ BasicUsage.story = {
326326
// =============== End of Basic Usage =============== //
327327

328328
export default {
329-
title: 'UI|FormBuilder',
329+
title: 'FormBuilder|Element UI',
330330
parameters: {
331331
notes: {
332332
markdown

‎stories/formbuilder/components/ExampleActorComplex.vue renamed to ‎stories/elementui/components/ExampleActorComplex.vue

+2-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="el-form-adaptor">
2+
<div>
33
<validation-provider :rules="rules" v-slot="{ errors }">
44
<el-form-item
55
label="人物"
@@ -33,13 +33,7 @@
3333
</div>
3434
</template>
3535

36-
<style lang="scss" scoped>
37-
.el-select {
38-
::v-deep .el-input {
39-
width: 100px;
40-
}
41-
}
42-
</style>
36+
<style lang="scss" scoped></style>
4337

4438
<script>
4539
import { useFormElement } from '@fext/vue-use';

‎stories/formbuilder/components/ExampleChannel.vue renamed to ‎stories/elementui/components/ExampleChannel.vue

-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
<el-select
1010
clearable
1111
filterable
12-
:disabled="!!formValues.exampleId"
1312
:filter-method="filterChannel"
1413
:value="localValue"
1514
@input="updateLocalValue"

‎stories/formbuilder/components/ExampleName.vue renamed to ‎stories/elementui/components/ExampleName.vue

File renamed without changes.

‎stories/formbuilder/components/ExampleType.vue renamed to ‎stories/elementui/components/ExampleType.vue

File renamed without changes.

‎stories/formbuilder/components/index.js renamed to ‎stories/elementui/components/index.js

File renamed without changes.

‎stories/formbuilder/style.scss renamed to ‎stories/elementui/style.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
.form-builder-example {
2+
padding: 10px;
3+
24
.el-card {
35
margin-bottom: 15px;
46

‎stories/formbuilder/FormBuilder.md

-3
This file was deleted.

‎stories/viewui/FormBuilder.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# View UI Form Builder
2+
3+
Vue form builder with view ui.

0 commit comments

Comments
 (0)