hasyim_kai
105 lines
3.0 KiB
Vue
105 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import type { FormErrors } from '~/types/error'
|
|
import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
|
|
import { ref } from 'vue'
|
|
import type { Ref } from 'vue'
|
|
import type { DateRange } from 'radix-vue'
|
|
import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
|
|
import { cn } from '~/lib/utils'
|
|
|
|
import * as DE from '~/components/pub/my-ui/doc-entry'
|
|
|
|
const props = defineProps<{
|
|
fieldName?: string
|
|
label?: string
|
|
placeholder?: string
|
|
errors?: FormErrors
|
|
class?: string
|
|
selectClass?: string
|
|
fieldGroupClass?: string
|
|
labelClass?: string
|
|
isRequired?: boolean
|
|
}>()
|
|
|
|
const {
|
|
fieldName = 'job',
|
|
label = 'Pekerjaan',
|
|
placeholder = 'Pilih pekerjaan',
|
|
errors,
|
|
class: containerClass,
|
|
fieldGroupClass,
|
|
labelClass,
|
|
} = props
|
|
|
|
const dateRange = ref<{ from: Date | null; to: Date | null }>({
|
|
from: new Date(),
|
|
to: new Date(),
|
|
})
|
|
|
|
const df = new DateFormatter('en-US', {
|
|
dateStyle: 'medium',
|
|
})
|
|
|
|
const value = ref({
|
|
start: new CalendarDate(2022, 1, 20),
|
|
end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
|
|
}) as Ref<DateRange>
|
|
</script>
|
|
|
|
<template>
|
|
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
|
<DE.Label
|
|
:label-for="fieldName"
|
|
:class="cn('select-field-label', labelClass)"
|
|
:is-required="isRequired"
|
|
>
|
|
{{ label }}
|
|
</DE.Label>
|
|
<DE.Field
|
|
:id="fieldName"
|
|
:errors="errors"
|
|
:class="cn('select-field-wrapper')"
|
|
>
|
|
<FormField
|
|
v-slot="{ componentField }"
|
|
:name="fieldName"
|
|
>
|
|
<FormItem>
|
|
<FormControl>
|
|
<Popover>
|
|
<PopoverTrigger as-child>
|
|
<Button
|
|
variant="outline"
|
|
:class="cn('w-full bg-white border-gray-400 justify-start text-left font-normal', !value && 'text-muted-foreground')"
|
|
>
|
|
<CalendarIcon class="mr-2 h-4 w-4" />
|
|
<template v-if="value.start">
|
|
<template v-if="value.end">
|
|
{{ df.format(value.start.toDate(getLocalTimeZone())) }} -
|
|
{{ df.format(value.end.toDate(getLocalTimeZone())) }}
|
|
</template>
|
|
|
|
<template v-else>
|
|
{{ df.format(value.start.toDate(getLocalTimeZone())) }}
|
|
</template>
|
|
</template>
|
|
<template v-else> Pick a date </template>
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent class="w-auto p-0">
|
|
<RangeCalendar
|
|
v-model="value"
|
|
initial-focus
|
|
:number-of-months="2"
|
|
@update:start-value="(startDate) => (value.start = startDate)"
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
</FormField>
|
|
</DE.Field>
|
|
</DE.Cell>
|
|
</template>
|