Skip to content

Commit d9d1166

Browse files
felixpyfelixpy
committed
feat(adaptor): add ant design vue adaptor
1 parent 75d3458 commit d9d1166

21 files changed

+990
-20
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@
7676
"@vue/composition-api": "^0.5.0",
7777
"@vue/eslint-config-standard": "^5.0.1",
7878
"@vue/test-utils": "^1.0.2",
79+
"ant-design-vue": "^1.6.1",
7980
"babel-eslint": "^10.0.3",
8081
"babel-jest": "^26.0.1",
8182
"babel-loader": "^8.0.6",

‎src/ant-form-adaptor.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import AntFormAdaptor from './components/adaptors/AntFormAdaptor.vue';
2+
3+
const install = function installAntFormAdaptor(Vue) {
4+
Vue.component('ant-form-adaptor', AntFormAdaptor);
5+
};
6+
7+
export { AntFormAdaptor };
8+
9+
export default {
10+
install
11+
};

‎src/components/adaptors/AntFormAdaptor.vue‎

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

src/components/ElementFormAdaptor.vue renamed to src/components/adaptors/ElementFormAdaptor.vue

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
<template>
22
<validation-provider :rules="rules" v-slot="{ errors }">
3-
<el-form-item
4-
:label="label"
5-
:size="size"
6-
:required="isRequired"
7-
:error="errors[0]"
8-
>
3+
<el-form-item :size="size" :required="isRequired" :error="errors[0]">
94
<template v-slot:label>
105
<span>{{ label }}</span>
116
<span v-if="tooltip">

src/components/ViewFormAdaptor.vue renamed to src/components/adaptors/ViewFormAdaptor.vue

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
<template>
22
<validation-provider :rules="rules" v-slot="{ errors }">
3-
<FormItem
4-
:label="label"
5-
:size="size"
6-
:required="isRequired"
7-
:error="errors[0]"
8-
>
3+
<FormItem :size="size" :required="isRequired" :error="errors[0]">
94
<template v-slot:label>
105
<span>{{ label }}</span>
116
<span v-if="tooltip">

‎src/el-form-adaptor.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import ElFormAdaptor from './components/ElementFormAdaptor.vue';
1+
import ElFormAdaptor from './components/adaptors/ElementFormAdaptor.vue';
22

33
const install = function installElFormAdaptor(Vue) {
44
Vue.component('el-form-adaptor', ElFormAdaptor);

‎src/view-form-adaptor.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import ViewFormAdaptor from './components/ViewFormAdaptor.vue';
1+
import ViewFormAdaptor from './components/adaptors/ViewFormAdaptor.vue';
22

33
const install = function installViewFormAdaptor(Vue) {
44
Vue.component('view-form-adaptor', ViewFormAdaptor);

‎stories/antd/FormBuilder.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Ant Design Form Builder
2+
3+
Vue form builder with ant design vue.

0 commit comments

Comments
 (0)