76 lines
2.0 KiB
Vue
76 lines
2.0 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 { Input } from '~/components/pub/ui/input'
|
|
import { cn } from '~/lib/utils'
|
|
|
|
import * as DE from '~/components/pub/my-ui/doc-entry'
|
|
|
|
const props = defineProps<{
|
|
fieldName: string
|
|
label?: string
|
|
placeholder?: string
|
|
hint?: string
|
|
modelValue?: File | null
|
|
accept?: string[]
|
|
maxSizeMb?: number
|
|
errors?: FormErrors
|
|
class?: string
|
|
isRequired?: boolean
|
|
isDisabled?: boolean
|
|
icons?: string
|
|
}>()
|
|
|
|
const hintMsg = computed(() => {
|
|
if (props.hint) return props.hint
|
|
if (props.accept) {
|
|
return `${props.accept.map((ext) => '.' + ext.replace(/^\./, '')).join(', ')}, maksimal ${props.maxSizeMb} MB`
|
|
}
|
|
return 'Gunakan file yang sesuai'
|
|
})
|
|
|
|
async function onFileChange(event: Event, handleChange: (value: any) => void) {
|
|
const target = event.target as HTMLInputElement
|
|
const file = target.files?.[0]
|
|
|
|
handleChange(file)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<DE.Cell>
|
|
<DE.Label
|
|
v-if="label !== ''"
|
|
:label-for="fieldName"
|
|
:is-required="isRequired && !isDisabled"
|
|
>
|
|
{{ label }} ({{ hintMsg }})
|
|
</DE.Label>
|
|
<DE.Field
|
|
:id="fieldName"
|
|
:errors="errors"
|
|
>
|
|
<FormField
|
|
v-slot="{ componentField, handleChange }"
|
|
:name="fieldName"
|
|
>
|
|
<FormItem>
|
|
<FormControl class="flex flex-col">
|
|
<Input
|
|
@change="onFileChange($event, handleChange)"
|
|
type="file"
|
|
:disabled="isDisabled"
|
|
v-bind="{ onBlur: componentField.onBlur }"
|
|
:placeholder="placeholder"
|
|
:class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
</FormField>
|
|
</DE.Field>
|
|
</DE.Cell>
|
|
</template>
|