8000 Updates approach to Form Select | Select placeholder solution · engageinteractive/laravel@f5ad58d · GitHub
[go: up one dir, main page]
Skip to content

Commit f5ad58d

Browse files
slatermattslatermatt
committed
Updates approach to Form Select | Select placeholder solution
1 parent 03b7c33 commit f5ad58d

File tree

1 file changed

+31
-43
lines changed
  • resources/assets/js/components/common/form

1 file changed

+31
-43
lines changed

‎resources/assets/js/components/common/form/Select.vue

Lines changed: 31 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<script setup>
2-
import { useField } from 'vee-validate';
3-
2+
import { Field as RenderlessSelect } from 'vee-validate';
43
import ErrorText from './ErrorText';
54
6-
const props = defineProps({
5+
defineProps({
76
label: {
87
type: String,
98
required: true,
@@ -21,7 +20,7 @@
2120
2221
placeholder: {
2322
type: String,
24-
required: true,
23+
default: null,
2524
},
2625
2726
rules: {
@@ -34,13 +33,6 @@
3433
default: null,
3534
},
3635
});
37-
38-
const {
39-
value,
40-
errorMessage,
41-
} = useField(props.name, props.rules, {
42-
label: props.validationName || props.label,
43-
});
4436
</script>
4537

4638
<template>
@@ -51,38 +43,37 @@
5143
/>
5244

5345
<div class="flex relative">
54-
<select
46+
<renderless-select
5547
:id="name"
56-
v-model="value"
48+
v-slot="{ field, errorMessage }"
5749
v-bind="$attrs"
58-
:class="[
59-
'pr-12 border appearance-none',
60-
{ 'border-red': errorMessage },
61-
]"
50+
:name="name"
51+
:label="validationName || label"
52+
:rules="rules"
6253
>
63-
<option
64-
value=""
65-
disabled
66-
hidden
67-
v-html="placeholder"
68-
/>
69-
70-
<option
71-
v-for="(option, index) in options"
72-
:key="index"
73-
:value="option.value"
74-
v-html="option.label"
75-
/>
76-
</select>
54+
<select
55+
:class="[
56+
'pr-12 border appearance-none',
57+
{ 'border-red': errorMessage },
58+
]"
59+
v-bind="field"
60+
>
61+
<option
62+
v-if="placeholder"
63+
value=""
64+
selected
65+
disabled
66+
v-html="placeholder"
67+
/>
7768

78-
<span
79-
v-if="placeholder && !value"
80-
:class="[
81-
'absolute inset-0 right-12',
82-
'truncate text-grey-400 pointer-events-none',
83-
]"
84-
v-text="placeholder"
85-
/>
69+
<option
70+
v-for="(option, index) in options"
71+
:key="index"
72+
:value="option.value"
73+
v-html="option.label"
74+
/>
75+
</select>
76+
</renderless-select>
8677

8778
<e-icon
8879
name="chevron-right"
@@ -95,9 +86,6 @@
9586
/>
9687
</div>
9788

98-
<error-text
99-
v-if="errorMessage"
100-
:message="errorMessage"
101-
/>
89+
<error-text :name="name" />
10290
</div>
10391
</template>

0 commit comments

Comments
 (0)
0