103 lines
2.5 KiB
Vue
103 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import type { FormErrors } from '~/types/error'
|
|
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 Select from '~/components/pub/my-ui/form/select.vue'
|
|
import { Input } from '~/components/pub/ui/input'
|
|
import { cn } from '~/lib/utils'
|
|
|
|
defineProps<{
|
|
fieldNameAlias: string
|
|
fieldNameInput: string
|
|
placeholder: string
|
|
labelForAlias: string
|
|
labelForInput: string
|
|
errors?: FormErrors
|
|
class?: string
|
|
selectClass?: string
|
|
fieldGroupClass?: string
|
|
labelClass?: string
|
|
maxLength?: number
|
|
isRequired?: boolean
|
|
}>()
|
|
|
|
const aliasOptions = [
|
|
{ label: 'An', value: 'an' },
|
|
{ label: 'By.Ny', value: 'byny' },
|
|
{ label: 'Nn', value: 'nn' },
|
|
{ label: 'Ny', value: 'ny' },
|
|
{ label: 'Tn', value: 'tn' },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<FieldGroup>
|
|
<Label
|
|
:label-for="fieldNameAlias"
|
|
:is-required="isRequired"
|
|
>
|
|
{{ labelForAlias }}
|
|
</Label>
|
|
|
|
<Field
|
|
:id="fieldNameAlias"
|
|
:errors="errors"
|
|
>
|
|
<FormField
|
|
v-slot="{ componentField }"
|
|
:name="fieldNameAlias"
|
|
>
|
|
<FormItem>
|
|
<FormControl>
|
|
<Select
|
|
:id="fieldNameAlias"
|
|
:preserve-order="false"
|
|
v-bind="componentField"
|
|
:auto-width="true"
|
|
:items="aliasOptions"
|
|
:class="
|
|
cn(
|
|
'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
|
|
selectClass,
|
|
)
|
|
"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
</FormField>
|
|
</Field>
|
|
</FieldGroup>
|
|
<FieldGroup>
|
|
<Label
|
|
:label-for="fieldNameInput"
|
|
:is-required="isRequired"
|
|
>
|
|
{{ labelForInput }}
|
|
</Label>
|
|
|
|
<Field
|
|
:id="fieldNameInput"
|
|
:errors="errors"
|
|
>
|
|
<FormField
|
|
v-slot="{ componentField }"
|
|
:name="fieldNameInput"
|
|
>
|
|
<FormItem>
|
|
<FormControl>
|
|
<Input
|
|
v-bind="componentField"
|
|
type="text"
|
|
:placeholder="placeholder"
|
|
:class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
</FormField>
|
|
</Field>
|
|
</FieldGroup>
|
|
</template>
|