87 lines
2.3 KiB
Vue
87 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import type { FormErrors } from '~/types/error'
|
|
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
|
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
|
|
import Field from '~/components/pub/my-ui/form/field.vue'
|
|
import Label from '~/components/pub/my-ui/form/label.vue'
|
|
import { cn } from '~/lib/utils'
|
|
|
|
const props = defineProps<{
|
|
fieldName?: string
|
|
label?: string
|
|
placeholder?: string
|
|
errors?: FormErrors
|
|
class?: string
|
|
selectClass?: string
|
|
fieldGroupClass?: string
|
|
labelClass?: string
|
|
isRequired?: boolean
|
|
isDisabled?: boolean
|
|
}>()
|
|
|
|
const {
|
|
fieldName = 'ethnicity',
|
|
label = 'Suku',
|
|
placeholder = 'Pilih suku',
|
|
errors,
|
|
class: containerClass,
|
|
fieldGroupClass,
|
|
labelClass,
|
|
} = props
|
|
|
|
const ethnicOptions = [
|
|
{ label: 'Tidak diketahui', value: 'unknown', priority: 1 },
|
|
{ label: 'Jawa', value: 'jawa' },
|
|
{ label: 'Sunda', value: 'sunda' },
|
|
{ label: 'Batak', value: 'batak' },
|
|
{ label: 'Betawi', value: 'betawi' },
|
|
{ label: 'Minangkabau', value: 'minangkabau' },
|
|
{ label: 'Bugis', value: 'bugis' },
|
|
{ label: 'Madura', value: 'madura' },
|
|
{ label: 'Banjar', value: 'banjar' },
|
|
{ label: 'Bali', value: 'bali' },
|
|
{ label: 'Dayak', value: 'dayak' },
|
|
{ label: 'Aceh', value: 'aceh' },
|
|
{ label: 'Sasak', value: 'sasak' },
|
|
{ label: 'Papua', value: 'papua' },
|
|
{ label: 'Lainnya', value: 'lainnya', priority: -100 },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
|
<Label
|
|
:label-for="fieldName"
|
|
:class="cn('select-field-label', labelClass)"
|
|
:is-required="isRequired && !isDisabled"
|
|
>
|
|
{{ label }}
|
|
</Label>
|
|
<Field
|
|
:id="fieldName"
|
|
:errors="errors"
|
|
:class="cn('select-field-wrapper')"
|
|
>
|
|
<FormField
|
|
v-slot="{ componentField }"
|
|
:name="fieldName"
|
|
>
|
|
<FormItem>
|
|
<FormControl>
|
|
<Combobox
|
|
:id="fieldName"
|
|
v-bind="componentField"
|
|
:items="ethnicOptions"
|
|
:placeholder="placeholder"
|
|
:is-disabled="isDisabled"
|
|
search-placeholder="Cari..."
|
|
empty-message="Suku tidak ditemukan"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
</FormField>
|
|
</Field>
|
|
</FieldGroup>
|
|
</template>
|