forked from comses/comses.net
-
Notifications
You must be signed in to change notification settings - Fork 0
/
SelectField.vue
55 lines (50 loc) · 1.52 KB
/
SelectField.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<template>
<div>
<slot name="label">
<FieldLabel v-if="label" :label="label" :id-for="id" :required="required" />
</slot>
<FormPlaceholder v-if="showPlaceholder" />
<select
v-else
v-model="value"
:id="id"
v-bind="attrs"
:class="{ 'form-select': true, 'is-invalid': error }"
>
<option
v-for="option in options"
:key="option.value"
:value="option.value"
:selected="option.value === value"
>
{{ option.label }}
</option>
</select>
<slot name="help">
<FieldHelp v-if="help" :help="help" :id-for="id" />
</slot>
<slot name="error">
<FieldError v-if="error" :error="error" :id-for="id" />
</slot>
</div>
</template>
<script setup lang="ts">
import { useField } from "@/composables/form";
import FieldLabel from "@/components/form/FieldLabel.vue";
import FieldHelp from "@/components/form/FieldHelp.vue";
import FieldError from "@/components/form/FieldError.vue";
import FormPlaceholder from "@/components/form/FormPlaceholder.vue";
import { inject } from "vue";
interface SelectFieldProps {
// FIXME: extend from types/BaseFieldProps when vuejs/core#8083 makes it into a release
name: string;
label?: string;
help?: string;
placeholder?: string;
required?: boolean;
options: { value: any; label: string }[];
}
const props = defineProps<SelectFieldProps>();
const { id, value, attrs, error } = useField<any>(props, "name");
const showPlaceholder = inject("showPlaceholder", false);
</script>