Skip to content

Commit 410e59d

Browse files
bastianallgeierbastianallgeier
authored
Merge pull request #6103 from getkirby/refactor/text-input
Use `StringInput` for all text inputs
2 parents cfdfcae + fcef149 commit 410e59d

File tree

7 files changed

+116
-137
lines changed

7 files changed

+116
-137
lines changed

‎panel/src/components/Forms/Input/EmailInput.vue‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
1+
<template>
2+
<k-string-input
3+
v-bind="$props"
4+
type="email"
5+
class="k-email-input"
6+
@input="$emit('input', $event)"
7+
@invalid="($invalid, $v) => $emit('invalid', $invalid, $v)"
8+
/>
9+
</template>
10+
111
<script>
2-
import TextInput, { props as TextInputProps } from "./TextInput.vue";
12+
import StringInput, { props as StringInputProps } from "./StringInput.vue";
313
414
export const props = {
5-
mixins: [TextInputProps],
15+
mixins: [StringInputProps],
616
props: {
717
autocomplete: {
818
type: String,
@@ -11,10 +21,6 @@ export const props = {
1121
placeholder: {
1222
type: String,
1323
default: () => window.panel.$t("email.placeholder")
14-
},
15-
type: {
16-
type: String,
17-
default: "email"
1824
}
1925
}
2026
};
@@ -23,7 +29,6 @@ export const props = {
2329
* @example <k-email-input :value="email" @input="email = $event" name="email" />
2430
*/
2531
export default {
26-
extends: TextInput,
27-
mixins: [props]
32+
mixins: [StringInput, props]
2833
};
2934
</script>

‎panel/src/components/Forms/Input/PasswordInput.vue‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
1+
<template>
2+
<k-string-input
3+
v-bind="$props"
4+
type="password"
5+
class="k-password-input"
6+
@input="$emit('input', $event)"
7+
@invalid="($invalid, $v) => $emit('invalid', $invalid, $v)"
8+
/>
9+
</template>
10+
111
<script>
2-
import TextInput, { props as TextInputProps } from "./TextInput.vue";
12+
import StringInput, { props as StringInputProps } from "./StringInput.vue";
313
414
export const props = {
5-
mixins: [TextInputProps],
15+
mixins: [StringInputProps],
616
props: {
717
autocomplete: {
818
type: String,
919
default: "new-password"
10-
},
11-
type: {
12-
type: String,
13-
default: "password"
1420
}
1521
}
1622
};
@@ -19,7 +25,6 @@ export const props = {
1925
* @example <k-input :value="password" @input="password = $event" name="password" type="password" />
2026
*/
2127
export default {
22-
extends: TextInput,
23-
mixins: [props]
28+
mixins: [StringInput, props]
2429
};
2530
</script>

‎panel/src/components/Forms/Input/SlugInput.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
spellcheck="false"
1818
type="text"
1919
class="k-text-input"
20-
v-on="listeners"
20+
@input="$emit('input', $event)"
2121
/>
2222
</template>
2323

‎panel/src/components/Forms/Input/StringInput.vue‎

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
import Input, { props as InputProps } from "@/mixins/input.js";
2828
import {
2929
autocomplete,
30+
autofocus,
3031
font,
3132
maxlength,
3233
minlength,
@@ -35,10 +36,19 @@ import {
3536
spellcheck
3637
} from "@/mixins/props.js";
3738
39+
import {
40+
required as validateRequired,
41+
minLength as validateMinLength,
42+
maxLength as validateMaxLength,
43+
email as validateEmail,
44+
url as validateUrl
45+
} from "vuelidate/lib/validators";
46+
3847
export const props = {
3948
mixins: [
4049
InputProps,
4150
autocomplete,
51+
autofocus,
4252
font,
4353
maxlength,
4454
minlength,
@@ -48,6 +58,7 @@ export const props = {
4858
],
4959
props: {
5060
ariaLabel: String,
61+
preselect: Boolean,
5162
type: {
5263
default: "text",
5364
type: String
@@ -63,7 +74,49 @@ export const props = {
6374
* @example <k-string-input :value="value" type="text" @input="value = $event" />
6475
*/
6576
export default {
66-
mixins: [Input, props]
77+
mixins: [Input, props],
78+
watch: {
79+
value() {
80+
this.onInvalid();
81+
}
82+
},
83+
mounted() {
84+
this.onInvalid();
85+
86+
if (this.$props.autofocus) {
87+
this.focus();
88+
}
89+
90+
if (this.$props.preselect) {
91+
this.select();
92+
}
93+
},
94+
methods: {
95+
onInvalid() {
96+
this.$emit("invalid", this.$v.$invalid, this.$v);
97+
},
98+
select() {
99+
this.$refs.input.select();
100+
}
101+
},
102+
validations() {
103+
const validateMatch = (value) => {
104+
return (
105+
(!this.required && !value) || !this.$refs.input.validity.patternMismatch
106+
);
107+
};
108+
109+
return {
110+
value: {
111+
required: this.required ? validateRequired : true,
112+
minLength: this.minlength ? validateMinLength(this.minlength) : true,
113+
maxLength: this.maxlength ? validateMaxLength(this.maxlength) : true,
114+
email: this.type === "email" ? validateEmail : true,
115+
url: this.type === "url" ? validateUrl : true,
116+
pattern: this.pattern ? validateMatch : true
117+
}
118+
};
119+
}
67120
};
68121
</script>
69122

‎panel/src/components/Forms/Input/TelInput.vue‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,24 @@
1+
<template>
2+
<k-string-input
3+
v-bind="$props"
4+
type="tel"
5+
class="k-tel-input"
6+
@input="$emit('input', $event)"
7+
@invalid="($invalid, $v) => $emit('invalid', $invalid, $v)"
8+
/>
9+
</template>
10+
111
<script>
2-
import TextInput, { props as TextInputProps } from "./TextInput.vue";
12+
import StringInput, { props as StringInputProps } from "./StringInput.vue";
313
414
export const props = {
5-
mixins: [TextInputProps],
15+
mixins: [StringInputProps],
616
props: {
717
autocomplete: {
818
default: "tel"
919
},
1020
placeholder: {
1121
default: () => window.panel.$t("tel.placeholder")
12-
},
13-
type: {
14-
default: "tel"
1522
}
1623
}
1724
};
@@ -20,7 +27,6 @@ export const props = {
2027
* @example <k-input :value="tel" @input="tel = $event" name="tel" type="tel" />
2128
*/
2229
export default {
23-
extends: TextInput,
24-
mixins: [props]
30+
mixins: [StringInput, props]
2531
};
2632
</script>

‎panel/src/components/Forms/Input/TextInput.vue‎

Lines changed: 9 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,25 @@
11
<template>
2-
<input
3-
ref="input"
4-
v-bind="{
5-
autocomplete,
6-
autofocus,
7-
disabled,
8-
id,
9-
minlength,
10-
name,
11-
pattern,
12-
placeholder,
13-
required,
14-
spellcheck,
15-
type,
16-
value
17-
}"
18-
v-direction
19-
:data-font="font"
2+
<k-string-input
3+
v-bind="$props"
4+
type="text"
205
class="k-text-input"
21-
@input="onInput($event.target.value)"
6+
@input="$emit('input', $event)"
7+
@invalid="($invalid, $v) => $emit('invalid', $invalid, $v)"
228
/>
239
</template>
2410

2511
<script>
26-
import Input, { props as InputProps } from "@/mixins/input.js";
27-
import {
28-
font,
29-
maxlength,
30-
minlength,
31-
pattern,
32-
placeholder,
33-
spellcheck
34-
} from "@/mixins/props.js";
35-
36-
import {
37-
required as validateRequired,
38-
minLength as validateMinLength,
39-
maxLength as validateMaxLength,
40-
email as validateEmail,
41-
url as validateUrl
42-
} from "vuelidate/lib/validators";
12+
import StringInput, { props as StringInputProps } from "./StringInput.vue";
4313
4414
export const props = {
45-
mixins: [
46-
InputProps,
47-
font,
48-
maxlength,
49-
minlength,
50-
pattern,
51-
placeholder,
52-
spellcheck
53-
],
54-
props: {
55-
autocomplete: {
56-
type: [Boolean, String],
57-
default: "off"
58-
},
59-
preselect: Boolean,
60-
type: {
61-
type: String,
62-
default: "text"
63-
},
64-
value: String
65-
}
15+
mixins: [StringInputProps]
6616
};
6717
6818
/**
69-
* @example <k-input :value="text" @input="text = $event" name="text" type="text" />
19+
* @example <k-text-input :value="text" @input="text = $event" name="text" />
7020
*/
7121
export default {
72-
mixins: [Input, props],
73-
watch: {
74-
value() {
75-
this.onInvalid();
76-
}
77-
},
78-
mounted() {
79-
this.onInvalid();
80-
81-
if (this.$props.autofocus) {
82-
this.focus();
83-
}
84-
85-
if (this.$props.preselect) {
86-
this.select();
87-
}
88-
},
89-
methods: {
90-
onInput(value) {
91-
this.$emit("input", value);
92-
},
93-
onInvalid() {
94-
this.$emit("invalid", this.$v.$invalid, this.$v);
95-
},
96-
select() {
97-
this.$refs.input.select();
98-
}
99-
},
100-
validations() {
101-
const validateMatch = (value) => {
102-
return (
103-
(!this.required && !value) || !this.$refs.input.validity.patternMismatch
104-
);
105-
};
106-
107-
return {
108-
value: {
109-
required: this.required ? validateRequired : true,
110-
minLength: this.minlength ? validateMinLength(this.minlength) : true,
111-
maxLength: this.maxlength ? validateMaxLength(this.maxlength) : true,
112-
email: this.type === "email" ? validateEmail : true,
113-
url: this.type === "url" ? validateUrl : true,
114-
pattern: this.pattern ? validateMatch : true
115-
}
116-
};
117-
}
22+
mixins: [StringInput, props]
11823
};
11924
</script>
12025

‎panel/src/components/Forms/Input/UrlInput.vue‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
1+
<template>
2+
<k-string-input
3+
v-bind="$props"
4+
type="url"
5+
class="k-url-input"
6+
@input="$emit('input', $event)"
7+
@invalid="($invalid, $v) => $emit('invalid', $invalid, $v)"
8+
/>
9+
</template>
10+
111
<script>
2-
import TextInput, { props as TextInputProps } from "./TextInput.vue";
12+
import StringInput, { props as StringInputProps } from "./StringInput.vue";
313
414
export const props = {
5-
mixins: [TextInputProps],
15+
mixins: [StringInputProps],
616
props: {
717
autocomplete: {
818
type: String,
@@ -11,10 +21,6 @@ export const props = {
1121
placeholder: {
1222
type: String,
1323
default: () => window.panel.$t("url.placeholder")
14-
},
15-
type: {
16-
type: String,
17-
default: "url"
1824
}
1925
}
2026
};
@@ -23,7 +29,6 @@ export const props = {
2329
* @example <k-input :value="url" @input="url = $event" name="url" type="url" />
2430
*/
2531
export default {
26-
extends: TextInput,
27-
mixins: [props]
32+
mixins: [StringInput, props]
2833
};
2934
</script>

0 commit comments

Comments
 (0)