Skip to content

Commit 33df308

Browse files
committed
chore: code style
1 parent f555473 commit 33df308

File tree

10 files changed

+261
-137
lines changed

10 files changed

+261
-137
lines changed

src/components/button/Button.vue

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
<template>
22
<button
3-
class="vue-button"
43
:class="{
54
'vue-button--primary': type === 'primary',
65
'vue-button--success': type === 'success',
76
'vue-button--warning': type === 'warning',
87
'vue-button--danger': type === 'danger',
98
}"
109
:disabled="disabled"
11-
@click="$emit('click')">
12-
<slot></slot>
10+
class="vue-button"
11+
@click="$emit('click')"
12+
>
13+
<slot />
1314
</button>
1415
</template>
1516

src/components/checkbox/Checkbox.vue

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,31 @@
11
<template>
22
<div class="vue-checkbox">
33
<label
4-
class="vue-checkbox"
54
:class="{
65
'vue-checkbox--checked': isChecked,
76
'vue-checkbox--bordered': type === 'border',
87
'vue-checkbox--disabled': disabled
9-
}">
8+
}"
9+
class="vue-checkbox"
10+
>
1011
<input
11-
type="checkbox"
1212
:id="`vue-checkbox-${_uid}`"
1313
:checked="isChecked"
1414
:name="name"
1515
:disabled="disabled"
1616
:value="value"
17-
@change="onChange">
17+
type="checkbox"
18+
@change="onChange"
19+
>
1820
<div class="vue-checkbox__inner">
19-
<i class="icon-check" v-if="isChecked"></i>
21+
<i
22+
v-if="isChecked"
23+
class="icon-check"
24+
/>
2025
</div>
2126
<span class="vue-checkbox__label">
2227
<span v-if="label">{{ label }}</span>
23-
<slot v-else></slot>
28+
<slot v-else />
2429
</span>
2530
</label>
2631
</div>
@@ -30,26 +35,38 @@
3035
export default {
3136
name: 'VueCheckbox',
3237
38+
model: {
39+
prop: 'checked',
40+
event: 'change'
41+
},
42+
3343
props: {
3444
checked: Boolean,
35-
value: [String, Number, Object, Boolean],
36-
name: String,
37-
label: String,
38-
type: String,
45+
value: {
46+
type: [String, Number, Object, Boolean],
47+
default: ''
48+
},
49+
name: {
50+
type: String,
51+
default: ''
52+
},
53+
label: {
54+
type: String,
55+
default: ''
56+
},
57+
type: {
58+
type: String,
59+
default: ''
60+
},
3961
disabled: {
4062
type: Boolean,
4163
default: false
4264
}
4365
},
4466
45-
model: {
46-
prop: 'checked',
47-
event: 'change'
48-
},
49-
5067
computed: {
5168
isGroup () {
52-
if (this.$parent.$options.name === 'VueCheckboxGroup') return true
69+
return this.$parent.$options.name === 'VueCheckboxGroup'
5370
},
5471
isChecked () {
5572
if (!this.isGroup) return this.checked
@@ -61,6 +78,7 @@ export default {
6178
return !!this.$parent.modelValue.find(item => item === this.value)
6279
}
6380
}
81+
return false
6482
}
6583
},
6684
Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,42 @@
11
<template>
22
<div class="vue-checkbox-group">
3-
<slot></slot>
3+
<slot />
44
</div>
55
</template>
66

77
<script>
88
export default {
99
name: 'VueCheckboxGroup',
1010
11-
props: {
12-
modelValue: Array
13-
},
14-
1511
model: {
1612
prop: 'modelValue',
1713
event: 'change'
1814
},
1915
16+
props: {
17+
modelValue: {
18+
type: Array,
19+
default: () => []
20+
}
21+
},
22+
2023
data () {
2124
return {
2225
value: []
2326
}
2427
},
2528
26-
created () {
27-
this.value = this.modelValue
28-
},
29-
3029
watch: {
3130
modelValue () {
3231
this.value = this.modelValue
3332
},
3433
value () {
3534
this.$emit('change', this.value)
3635
}
36+
},
37+
38+
created () {
39+
this.value = this.modelValue
3740
}
3841
}
3942
</script>

src/components/form/Form.vue

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<template>
22
<div
3-
class="vue-form"
43
:class="{
54
'vue-form--label-left': labelPosition === 'left',
65
'vue-form--label-right': labelPosition === 'right',
76
'vue-form--label-top': labelPosition === 'top',
8-
}">
9-
<slot></slot>
7+
}"
8+
class="vue-form"
9+
>
10+
<slot />
1011
</div>
1112
</template>
1213

@@ -23,8 +24,14 @@ export default {
2324
},
2425
2526
props: {
26-
model: Object,
27-
rules: Object,
27+
model: {
28+
type: Object,
29+
default: () => {}
30+
},
31+
rules: {
32+
type: Object,
33+
default: () => {}
34+
},
2835
labelPosition: {
2936
type: String,
3037
default: 'right'

src/components/form/FormItem.vue

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
<template>
22
<div
3-
class="vue-form__item">
3+
class="vue-form__item"
4+
>
45
<div
56
v-if="label || form.labelPosition !== 'top'"
7+
:style="{'flex-basis': form.labelWidth }"
68
class="vue-form__item-label"
7-
:style="{'flex-basis': form.labelWidth }">{{ label }}</div>
9+
>
10+
{{ label }}
11+
</div>
812
<div class="vue-form__item-content">
9-
<slot></slot>
13+
<slot />
1014
<transition name="form-slide-fade">
11-
<div class="vue-form__item-error" v-if="!isValid">
15+
<div
16+
v-if="!isValid"
17+
class="vue-form__item-error"
18+
>
1219
{{ validateMessage }}
1320
</div>
1421
</transition>
@@ -23,9 +30,18 @@ export default {
2330
inject: ['form'],
2431
2532
props: {
26-
label: String,
27-
rules: [Object, Array],
28-
field: String
33+
label: {
34+
type: String,
35+
default: ''
36+
},
37+
rules: {
38+
type: [Object, Array],
39+
default: () => {}
40+
},
41+
field: {
42+
type: String,
43+
default: ''
44+
}
2945
},
3046
3147
data () {

src/components/input/Input.vue

Lines changed: 52 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,34 @@
11
<template>
22
<div
33
:class="{
4-
'vue-input': this.type !== 'textarea',
5-
'vue-textarea': this.type === 'textarea',
6-
'vue-input--prefix': this.$slots.prefix,
7-
'vue-input--suffix': this.$slots.suffix,
8-
'vue-input--prepend': this.$slots.prepend,
9-
'vue-input--append': this.$slots.append,
10-
}">
4+
'vue-input': type !== 'textarea',
5+
'vue-textarea': type === 'textarea',
6+
'vue-input--prefix': $slots.prefix,
7+
'vue-input--suffix': $slots.suffix,
8+
'vue-input--prepend': $slots.prepend,
9+
'vue-input--append': $slots.append,
10+
}"
11+
>
1112
<div
12-
v-if="this.$slots.prefix && type !== 'textarea'"
13-
class="vue-input__prefix">
14-
<slot name="prefix"></slot>
13+
v-if="$slots.prefix && type !== 'textarea'"
14+
class="vue-input__prefix"
15+
>
16+
<slot name="prefix" />
1517
</div>
1618
<div
17-
v-if="this.$slots.suffix && type !== 'textarea'"
18-
class="vue-input__suffix">
19-
<slot name="suffix"></slot>
19+
v-if="$slots.suffix && type !== 'textarea'"
20+
class="vue-input__suffix"
21+
>
22+
<slot name="suffix" />
2023
</div>
2124
<div
22-
v-if="this.$slots.prepend && type !== 'textarea'"
23-
class="vue-input__prepend">
24-
<slot name="prepend"></slot>
25+
v-if="$slots.prepend && type !== 'textarea'"
26+
class="vue-input__prepend"
27+
>
28+
<slot name="prepend" />
2529
</div>
2630
<input
2731
v-if="type !== 'textarea'"
28-
class="vue-input__inner"
2932
:name="name"
3033
:type="type"
3134
:value="value"
@@ -35,23 +38,25 @@
3538
:max="max"
3639
:min="min"
3740
:autocomplete="[ autocomplete ? 'off' : 'on' ]"
41+
class="vue-input__inner"
3842
@input="onInput"
3943
>
4044
<textarea
4145
v-else
42-
class="vue-textarea__inner"
4346
:name="name"
4447
:type="type"
4548
:placeholder="placeholder"
4649
:disabled="disabled"
4750
:readonly="readonly"
4851
:value="value"
49-
:rows="rows">
50-
</textarea>
52+
:rows="rows"
53+
class="vue-textarea__inner"
54+
/>
5155
<div
5256
v-if="this.$slots.append && type !== 'textarea'"
53-
class="vue-input__append">
54-
<slot name="append"></slot>
57+
class="vue-input__append"
58+
>
59+
<slot name="append" />
5560
</div>
5661
</div>
5762
</template>
@@ -60,13 +65,24 @@
6065
export default {
6166
name: 'VueInput',
6267
68+
model: {
69+
prop: 'value',
70+
event: 'input'
71+
},
72+
6373
props: {
6474
type: {
6575
type: String,
6676
default: 'text'
6777
},
68-
value: [String, Number],
69-
name: String,
78+
value: {
79+
type: [String, Number],
80+
default: ''
81+
},
82+
name: {
83+
type: String,
84+
default: ''
85+
},
7086
readonly: {
7187
type: Boolean,
7288
default: false
@@ -75,9 +91,18 @@ export default {
7591
type: Boolean,
7692
default: false
7793
},
78-
min: Number,
79-
max: Number,
80-
placeholder: String,
94+
min: {
95+
type: Number,
96+
default: null
97+
},
98+
max: {
99+
type: Number,
100+
default: null
101+
},
102+
placeholder: {
103+
type: String,
104+
default: ''
105+
},
81106
disabled: {
82107
type: Boolean,
83108
default: false
@@ -88,11 +113,6 @@ export default {
88113
}
89114
},
90115
91-
model: {
92-
prop: 'value',
93-
event: 'input'
94-
},
95-
96116
methods: {
97117
onInput (e) {
98118
this.$emit('input', e.target.value)

0 commit comments

Comments
 (0)