Skip to content

Commit dcd1a7b

Browse files
author
Pooya Parsa
committed
Refactor form element props + improvements
1 parent 847949a commit dcd1a7b

File tree

9 files changed

+185
-173
lines changed

9 files changed

+185
-173
lines changed

‎docs/components/form-file/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ be relied for production.
1919

2020
### Customizations
2121
Language strings and chosen file name is injected using `data-` props to css `content`.
22-
Local customization can be easily done with provided props such as `empty-label`, `choose-label`, `selected-format` and `drop-label`.
22+
Local customization can be easily done with provided props such as `placeholder`, `choose-label`, `selected-format` and `drop-label`.
2323
If you want to globally change labels, you can add something like this to your global stylesheets.
2424
Also it is advised to use [:lang()](https://developer.mozilla.org/en-US/docs/Web/CSS/:lang) for multi-language sites.
2525

‎lib/components/form-checkbox.vue

Lines changed: 6 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<template>
2-
<label :class="[custom?'custom-control':null,custom?'custom-checkbox':null,inline?'form-check-inline':null]">
2+
<label :class="[inputClass,checkboxClass,custom?'custom-checkbox':null]">
33
<input
4-
:class="[custom?'custom-control-input':null]"
54
type="checkbox"
65
:id="id"
76
:name="name"
87
:value="value"
98
:disabled="disabled"
9+
10+
:class="[custom?'custom-control-input':null]"
1011
:checked="checked===value"
1112
@change="$emit('change',$event.target.checked?value:uncheckedValue)"
1213
>
@@ -15,28 +16,17 @@
1516
</label>
1617
</template>
1718

18-
1919
<script>
20+
import formMixin from '../mixins/form';
21+
import formCheckBoxMixin from '../mixins/form-checkbox';
2022
2123
export default {
24+
mixins: [formMixin, formCheckBoxMixin],
2225
model: {
2326
prop: 'checked',
2427
event: 'change'
2528
},
26-
computed: {
27-
inputState() {
28-
return this.state ? `has-${this.state}` : '';
29-
}
30-
},
3129
props: {
32-
id: {
33-
type: String,
34-
default: null
35-
},
36-
name: {
37-
type: String,
38-
default: null
39-
},
4030
value: {
4131
default: true
4232
},
@@ -45,18 +35,6 @@
4535
},
4636
checked: {
4737
default: true
48-
},
49-
disabled: {
50-
type: Boolean,
51-
default: false
52-
},
53-
inline: {
54-
type: Boolean,
55-
default: true
56-
},
57-
custom: {
58-
type: Boolean,
59-
default: true
6038
}
6139
}
6240
};

‎lib/components/form-fieldset.vue

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div :class="['form-group','row',inputState]">
3-
<label :for="for_id" v-if="label" :class="['col-form-label',labelLayout]" v-html="label"></label>
4-
<div :class="inputLayout">
3+
<label :for="target" v-if="label" :class="['col-form-label',labelLayout]" v-html="label"></label>
4+
<div :class="inputLayout" ref="content">
55
<slot></slot>
66
<div class="form-text text-muted" v-if="feedback" v-html="feedback"></div>
77
<small class="form-text text-muted" v-if="description" v-html="description"></small>
@@ -11,6 +11,11 @@
1111

1212
<script>
1313
export default {
14+
data() {
15+
return {
16+
target: null
17+
}
18+
},
1419
computed: {
1520
inputState() {
1621
return this.state ? `has-${this.state}` : '';
@@ -22,11 +27,14 @@
2227
return this.horizontal ? ('col-sm-' + (12 - this.labelSize)) : 'col-12';
2328
}
2429
},
30+
mounted() {
31+
const content = this.$refs.content;
32+
if (!content) {
33+
return;
34+
}
35+
this.target = content.children[0].id;
36+
},
2537
props: {
26-
for_id: {
27-
type: String,
28-
default: null
29-
},
3038
state: {
3139
type: String,
3240
default: null

‎lib/components/form-file.vue

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,36 @@
11
<template>
2-
<label class="custom-file" @dragover.stop.prevent="dragover">
2+
<label :class="[custom?'custom-file':null,inputClass]"
3+
@dragover.stop.prevent="dragover"
4+
>
35

46
<!-- Drop Here Target -->
5-
<span
6-
class="drop-here"
7-
v-if="dragging"
8-
@dragover.stop.prevent="dragover"
9-
@drop.stop.prevent="drop"
10-
@dragleave.stop.prevent="dragging=false"
11-
:data-drop="dropLabel"
7+
<span class="drop-here"
8+
v-if="dragging"
9+
@dragover.stop.prevent="dragover"
10+
@drop.stop.prevent="drop"
11+
@dragleave.stop.prevent="dragging=false"
12+
:data-drop="dropLabel"
1213
></span>
1314

1415
<!-- Real Form input -->
1516
<input type="file"
17+
:name="name"
1618
:id="id"
19+
:disabled="disabled"
20+
ref="input"
21+
:accept="accept"
22+
1723
class="custom-file-input"
1824
@change="onFileChange"
1925
:multiple="multiple"
2026
:webkitdirectory="directory"
21-
ref="input"
2227
>
2328

2429
<!-- Overlay Labels -->
25-
<span :class="['custom-file-control',dragging?'dragging':null]"
30+
<span :class="['custom-file-control',dragging?'dragging':null,inputClass]"
2631
:data-choose="computedChooseLabel"
2732
:data-selected="selectedLabel"
33+
v-if="custom"
2834
></span>
2935

3036
</label>
@@ -74,7 +80,10 @@
7480
</style>
7581

7682
<script>
83+
import formMixin from '../mixins/form';
84+
7785
export default {
86+
mixins: [formMixin],
7887
data() {
7988
return {
8089
selectedFile: null,
@@ -84,7 +93,7 @@
8493
computed: {
8594
selectedLabel() {
8695
if (!this.selectedFile || this.selectedFile.length === 0) {
87-
return this.emptyLabel || 'No file chosen';
96+
return this.placeholder || 'No file chosen';
8897
}
8998
9099
if (this.multiple) {
@@ -159,11 +168,11 @@
159168
}
160169
},
161170
props: {
162-
id: {
171+
accept: {
163172
type: String,
164173
default: null
165174
},
166-
emptyLabel: {
175+
placeholder: {
167176
type: String,
168177
default: null
169178
},

‎lib/components/form-input.vue

Lines changed: 68 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,88 @@
11
<template>
22
<input
3-
v-if="!textarea"
43
:type="type"
5-
:class="['form-control',inputState,inputSize]"
6-
:name="name"
7-
:id="$parent.for_id"
8-
:placeholder="placeholder"
94
:value="value"
10-
@input="onInput($event.target.value)"
11-
@change="onChange($event.target.value)"
12-
@keyup="onKeyUp($event)"
13-
ref="input"
14-
/>
15-
<textarea
16-
v-else
17-
:type="type"
18-
:class="['form-control',inputState,inputSize]"
195
:name="name"
20-
:id="$parent.for_id"
6+
:id="id || ('b_'+_uid)"
7+
:disabled="disabled"
8+
ref="input"
9+
10+
:is="textarea?'textarea':'input'"
11+
:class="['form-control',inputClass]"
12+
:rows="rows || rowsCount"
13+
2114
:placeholder="placeholder"
22-
:value="value"
23-
:rows="rows"
15+
2416
@input="onInput($event.target.value)"
2517
@change="onChange($event.target.value)"
2618
@keyup="onKeyUp($event)"
27-
ref="input"
28-
></textarea>
19+
/>
2920
</template>
3021

3122
<script>
32-
export default {
33-
computed: {
34-
inputState() {
35-
const state = this.state || this.$parent.state;
36-
return state ? `form-control-${state}` : '';
37-
},
38-
inputSize() {
39-
return this.size ? `form-control-${this.size}` : '';
40-
}
41-
},
42-
methods: {
43-
format(value) {
44-
if (this.formatter) {
45-
const formattedValue = this.formatter(value);
46-
if (formattedValue !== value) {
47-
value = formattedValue;
48-
this.$refs.input.value = formattedValue;
49-
}
23+
import formMixin from '../mixins/form';
24+
25+
export default {
26+
mixins: [formMixin],
27+
computed: {
28+
rowsCount() {
29+
return (this.value || '').split('\n').length;
5030
}
51-
return value;
5231
},
53-
onInput(value) {
54-
if (!this.lazyFormatter) {
32+
methods: {
33+
format(value) {
34+
if (this.formatter) {
35+
const formattedValue = this.formatter(value);
36+
if (formattedValue !== value) {
37+
value = formattedValue;
38+
this.$refs.input.value = formattedValue;
39+
}
40+
}
41+
return value;
42+
},
43+
onInput(value) {
44+
if (!this.lazyFormatter) {
45+
value = this.format(value);
46+
}
47+
this.$emit('input', value);
48+
},
49+
onChange(value) {
5550
value = this.format(value);
51+
this.$emit('input', value);
52+
this.$emit('change', value);
53+
},
54+
onKeyUp(e) {
55+
this.$emit('keyup', e);
5656
}
57-
this.$emit('input', value);
58-
},
59-
onChange(value) {
60-
value = this.format(value);
61-
this.$emit('input', value);
62-
this.$emit('change', value);
63-
},
64-
onKeyUp(e) {
65-
this.$emit('keyup', e);
66-
}
67-
},
68-
props: {
69-
value: {
70-
type: [String, Number],
71-
default: null
7257
},
73-
type: {
74-
type: String,
75-
default: 'text'
76-
},
77-
78-
name: {
79-
type: String,
80-
default: null
81-
},
82-
placeholder: {
83-
type: String,
84-
default: null
85-
},
86-
87-
size: {
88-
type: String,
89-
default: null
90-
},
91-
92-
rows: {
93-
type: Number,
94-
default: null
95-
},
96-
97-
textarea: {
98-
type: Boolean,
99-
default: false
100-
},
101-
102-
state: {
103-
type: String,
104-
default: null
105-
},
106-
formatter: {
107-
type: Function
108-
},
109-
lazyFormatter: {
110-
type: Boolean,
111-
default: false
58+
props: {
59+
value: {
60+
default: null
61+
},
62+
type: {
63+
type: String,
64+
default: 'text'
65+
},
66+
placeholder: {
67+
type: String,
68+
default: null
69+
},
70+
rows: {
71+
type: Number,
72+
default: null
73+
},
74+
textarea: {
75+
type: Boolean,
76+
default: false
77+
},
78+
formatter: {
79+
type: Function
80+
},
81+
lazyFormatter: {
82+
type: Boolean,
83+
default: false
84+
}
11285
}
113-
}
114-
};
86+
};
11587
11688
</script>

0 commit comments

Comments
 (0)