Skip to content

Commit 3dd9bd8

Browse files
isniferisnifer
committed
[2.4.0] Common methods moved to ConnectedControlMixin 
1 parent 11fd8f5 commit 3dd9bd8

23 files changed

+395
-459
lines changed

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
## 2.4.0
2+
3+
### Updated
4+
5+
- Common methods were moved to `ConnectedControlMixin`
6+
17
## 2.3.1
28

39
### Fixed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ See demo at [https://detools.github.io/vue-form](https://detools.github.io/vue-f
7878

7979
## Changelog
8080

81+
- [2.4.0](/CHANGELOG.md#240)
8182
- [2.3.1](/CHANGELOG.md#231)
8283
- [2.3.0](/CHANGELOG.md#230)
8384
- [2.2.0](/CHANGELOG.md#220)

‎VueForm/ConnectedCheckbox.js‎

Lines changed: 9 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { Checkbox } from 'element-ui'
22
import noop from 'lodash/noop'
3-
import resolveRegisterFormComponent from './utils/resolveRegisterFormComponent'
4-
import FormItem from './ConnectedFormItem'
3+
import ConnectedControlMixin from './mixins/ConnectedControl'
54

6-
export default {
5+
const ConnectedCheckbox = {
76
props: {
87
name: {
98
type: String,
@@ -47,24 +46,14 @@ export default {
4746
labelWidth: String,
4847
},
4948

50-
data() {
51-
const $registerFormComponent = resolveRegisterFormComponent(this)
52-
53-
return $registerFormComponent(this.name, this.value, this.validators, this.asyncValidators)
49+
created() {
50+
this.omitFormItemLabel = true
5451
},
5552

56-
destroyed() {
57-
this.cleanFormValue()
58-
},
53+
mixins: [ConnectedControlMixin],
5954

6055
methods: {
61-
handleFieldBlur(...args) {
62-
this.touched = true
63-
64-
this.handleBlur(...args)
65-
},
66-
67-
renderCheckbox(value, setValue) {
56+
renderComponent(value, setValue) {
6857
return (
6958
<Checkbox
7059
class={this.class}
@@ -81,25 +70,12 @@ export default {
8170
on-input={setValue}
8271
on-focus={this.handleFocus}
8372
on-blur={this.handleFieldBlur}
84-
on-change={this.handleChange}>
73+
on-change={this.handleFieldChange}>
8574
{this.$slots.default}
8675
</Checkbox>
8776
)
8877
},
8978
},
90-
91-
render() {
92-
const [value, setValue, error] = this.useState()
93-
const fieldError = this.touched ? error : undefined
94-
95-
if (this.formItem) {
96-
return (
97-
<FormItem label-width={this.labelWidth} error={fieldError}>
98-
{this.renderCheckbox(value, setValue)}
99-
</FormItem>
100-
)
101-
}
102-
103-
return this.renderCheckbox(value, setValue)
104-
},
10579
}
80+
81+
export default ConnectedCheckbox

‎VueForm/ConnectedCheckboxGroup.js‎

Lines changed: 6 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import { Checkbox, CheckboxGroup } from 'element-ui'
22
import noop from 'lodash/noop'
33
import isNil from 'lodash/isNil'
4-
import castArray from 'lodash/castArray'
5-
import resolveRegisterFormComponent from './utils/resolveRegisterFormComponent'
6-
import FormItem from './ConnectedFormItem'
4+
import { ConnectedCheckboxGroupMixin } from './mixins/ConnectedControl'
75

8-
export default {
6+
const ConnectedCheckboxGroup = {
97
props: {
108
name: {
119
type: String,
@@ -67,25 +65,7 @@ export default {
6765
labelWidth: String,
6866
},
6967

70-
data() {
71-
const $registerFormComponent = resolveRegisterFormComponent(this)
72-
73-
let initialValue = this.value
74-
75-
// If there is no defined "value" inside props — use an empty array
76-
if (isNil(initialValue)) {
77-
initialValue = []
78-
} else if (!Array.isArray(initialValue)) {
79-
// If there is a non-null value, but it is not an array — cast it to an array
80-
initialValue = castArray(initialValue)
81-
}
82-
83-
return $registerFormComponent(this.name, initialValue, this.validators, this.asyncValidators)
84-
},
85-
86-
destroyed() {
87-
this.cleanFormValue()
88-
},
68+
mixins: [ConnectedCheckboxGroupMixin],
8969

9070
methods: {
9171
generateOptions(option) {
@@ -108,13 +88,7 @@ export default {
10888
)
10989
},
11090

111-
handleFieldBlur(...args) {
112-
this.touched = true
113-
114-
this.handleBlur(...args)
115-
},
116-
117-
renderCheckboxGroup(value, setValue) {
91+
renderComponent(value, setValue) {
11892
return (
11993
<CheckboxGroup
12094
class={this.class}
@@ -133,19 +107,6 @@ export default {
133107
)
134108
},
135109
},
136-
137-
render() {
138-
const [value, setValue, error] = this.useState()
139-
const fieldError = this.touched ? error : undefined
140-
141-
if (this.formItem) {
142-
return (
143-
<FormItem label={this.label || this.name} label-width={this.labelWidth} error={fieldError}>
144-
{this.renderCheckboxGroup(value, setValue)}
145-
</FormItem>
146-
)
147-
}
148-
149-
return this.renderCheckboxGroup(value, setValue)
150-
},
151110
}
111+
112+
export default ConnectedCheckboxGroup

‎VueForm/ConnectedDatePicker.js‎

Lines changed: 7 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { DatePicker } from 'element-ui'
22
import noop from 'lodash/noop'
3-
import resolveRegisterFormComponent from './utils/resolveRegisterFormComponent'
4-
import FormItem from './ConnectedFormItem'
3+
import ConnectedControlMixin from './mixins/ConnectedControl'
54

65
/**
76
* DatePicker Component connected to @detools/vue-form
@@ -36,7 +35,8 @@ import FormItem from './ConnectedFormItem'
3635
* @param {String} text title of the shortcut
3736
* @param {Function} onClick callback on that click
3837
*/
39-
export default {
38+
39+
const ConnectedDatePicker = {
4040
props: {
4141
name: {
4242
type: String,
@@ -96,24 +96,10 @@ export default {
9696
labelWidth: String,
9797
},
9898

99-
data() {
100-
const $registerFormComponent = resolveRegisterFormComponent(this)
101-
102-
return $registerFormComponent(this.name, this.value, this.validators, this.asyncValidators)
103-
},
104-
105-
destroyed() {
106-
this.cleanFormValue()
107-
},
99+
mixins: [ConnectedControlMixin],
108100

109101
methods: {
110-
handleFieldBlur(...args) {
111-
this.touched = true
112-
113-
this.handleBlur(...args)
114-
},
115-
116-
renderDatePicker(value, setValue) {
102+
renderComponent(value, setValue) {
117103
return (
118104
<DatePicker
119105
class={this.class}
@@ -147,19 +133,6 @@ export default {
147133
)
148134
},
149135
},
150-
151-
render() {
152-
const [value, setValue, error] = this.useState()
153-
const fieldError = this.touched ? error : undefined
154-
155-
if (this.formItem) {
156-
return (
157-
<FormItem label={this.label || this.name} label-width={this.labelWidth} error={fieldError}>
158-
{this.renderDatePicker(value, setValue)}
159-
</FormItem>
160-
)
161-
}
162-
163-
return this.renderDatePicker(value, setValue)
164-
},
165136
}
137+
138+
export default ConnectedDatePicker

‎VueForm/ConnectedFormItem.vue‎ renamed to ‎VueForm/ConnectedFormItem.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
<script>
21
import { FormItem } from 'element-ui'
32

43
export default {
@@ -16,8 +15,8 @@ export default {
1615
)
1716
},
1817
}
19-
</script>
2018

19+
/*
2120
<style lang="less">
2221
.is-vue-form-warn .el-form-item__error {
2322
color: #FF9800;
@@ -32,3 +31,4 @@ export default {
3231
border-color: #FF9800;
3332
}
3433
</style>
34+
*/

‎VueForm/ConnectedInput.js‎

Lines changed: 6 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { Input } from 'element-ui'
22
import noop from 'lodash/noop'
3-
import resolveRegisterFormComponent from './utils/resolveRegisterFormComponent'
4-
import FormItem from './ConnectedFormItem'
3+
import ConnectedControlMixin from './mixins/ConnectedControl'
54

6-
export default {
5+
const ConnectedInput = {
76
props: {
87
name: {
98
type: String,
@@ -59,29 +58,10 @@ export default {
5958
labelWidth: String,
6059
},
6160

62-
data() {
63-
const $registerFormComponent = resolveRegisterFormComponent(this)
64-
65-
return {
66-
...$registerFormComponent(this.name, this.value, this.validators, this.asyncValidators),
67-
touched: false,
68-
}
69-
},
70-
71-
destroyed() {
72-
this.cleanFormValue()
73-
},
61+
mixins: [ConnectedControlMixin],
7462

7563
methods: {
76-
handleFieldBlur(...args) {
77-
this.touched = true
78-
79-
const onBlur = () => this.handleBlur(...args)
80-
81-
return this.setAsyncError().then(onBlur, onBlur)
82-
},
83-
84-
renderInput(value, setValue) {
64+
renderComponent(value, setValue) {
8565
return (
8666
<Input
8767
class={this.class}
@@ -118,19 +98,6 @@ export default {
11898
)
11999
},
120100
},
121-
122-
render() {
123-
const [value, setValue, error] = this.useState()
124-
const fieldError = this.touched ? error : undefined
125-
126-
if (this.formItem) {
127-
return (
128-
<FormItem label={this.label || this.name} label-width={this.labelWidth} error={fieldError}>
129-
{this.renderInput(value, setValue)}
130-
</FormItem>
131-
)
132-
}
133-
134-
return this.renderInput(value, setValue)
135-
},
136101
}
102+
103+
export default ConnectedInput

‎VueForm/ConnectedInputNumber.js‎

Lines changed: 6 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { InputNumber } from 'element-ui'
22
import noop from 'lodash/noop'
3-
import resolveRegisterFormComponent from './utils/resolveRegisterFormComponent'
4-
import FormItem from './ConnectedFormItem'
3+
import ConnectedControlMixin from './mixins/ConnectedControl'
54

6-
export default {
5+
const ConnectedInputNumber = {
76
props: {
87
name: {
98
type: String,
@@ -48,24 +47,10 @@ export default {
4847
labelWidth: String,
4948
},
5049

51-
data() {
52-
const $registerFormComponent = resolveRegisterFormComponent(this)
53-
54-
return $registerFormComponent(this.name, this.value, this.validators, this.asyncValidators)
55-
},
56-
57-
destroyed() {
58-
this.cleanFormValue()
59-
},
50+
mixins: [ConnectedControlMixin],
6051

6152
methods: {
62-
handleFieldBlur(...args) {
63-
this.touched = true
64-
65-
this.handleBlur(...args)
66-
},
67-
68-
renderInput(value, setValue) {
53+
renderComponent(value, setValue) {
6954
return (
7055
<InputNumber
7156
class={this.class}
@@ -88,19 +73,6 @@ export default {
8873
)
8974
},
9075
},
91-
92-
render() {
93-
const [value, setValue, error] = this.useState()
94-
const fieldError = this.touched ? error : undefined
95-
96-
if (this.formItem) {
97-
return (
98-
<FormItem label={this.label || this.name} label-width={this.labelWidth} error={fieldError}>
99-
{this.renderInput(value, setValue)}
100-
</FormItem>
101-
)
102-
}
103-
104-
return this.renderInput(value, setValue)
105-
},
10676
}
77+
78+
export default ConnectedInputNumber

0 commit comments

Comments
 (0)