36 lines
1 KiB
Vue
36 lines
1 KiB
Vue
<script setup lang="ts">
|
|
import { Clock } from '@lucide/vue'
|
|
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select'
|
|
|
|
const model = defineModel<string | undefined>()
|
|
defineProps<{ id?: string; invalid?: boolean }>()
|
|
|
|
const SLOT_MINUTES = 15
|
|
const slots = Array.from({ length: (24 * 60) / SLOT_MINUTES }, (_, i) => {
|
|
const minutes = i * SLOT_MINUTES
|
|
const hh = String(Math.floor(minutes / 60)).padStart(2, '0')
|
|
const mm = String(minutes % 60).padStart(2, '0')
|
|
return `${hh}:${mm}`
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Select v-model="model">
|
|
<SelectTrigger :id="id" :aria-invalid="invalid || undefined" class="w-full px-3">
|
|
<span class="flex min-w-0 items-center gap-2">
|
|
<Clock class="size-4 shrink-0 opacity-60" />
|
|
<SelectValue :placeholder="$t('reservation.pick-time')" />
|
|
</span>
|
|
</SelectTrigger>
|
|
<SelectContent class="max-h-64">
|
|
<SelectItem v-for="slot in slots" :key="slot" :value="slot">{{ slot }}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</template>
|