@bagelink/vue 0.0.1100 → 0.0.1104

package/src/components/form/inputs/DatePick.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Btn, TextInput } from '@bagelink/vue'
-import { computed, ref } from 'vue'
+import { Btn, NumberInput } from '@bagelink/vue'
+import { Dropdown as VDropdown } from 'floating-vue'
 
 const props = withDefaults(
 	defineProps<{
@@ -10,293 +10,337 @@ const props = withDefaults(
 		small?: boolean
 		enableTime?: boolean
 		modelValue?: string | Date
-		defaultValue?: string | Date
-		rtl?: boolean
 		min?: string | Date
 		max?: string | Date
-		showInput?: boolean
-		timezone?: string // e.g. 'America/New_York', 'Europe/London'
+		timezone?: string
 	}>(),
 	{
 		enableTime: false,
 		editMode: true,
 		small: false,
-		rtl: false,
-		showInput: true,
 		timezone: 'UTC'
 	},
 )
 
 const emit = defineEmits(['update:modelValue'])
-const isOpen = ref(false)
-const currentMonth = ref(new Date())
+let isOpen = $ref(false)
+let currentMonth = $ref(new Date())
+type ViewMode = 'days' | 'months' | 'years'
+let currentView = $ref<ViewMode>('days')
 
-const inputType = computed(() => props.enableTime ? 'datetime-local' : 'date')
+const inputType = $computed(() => props.enableTime ? 'datetime-local' : 'date')
 
-function toLocalDate(date: Date): Date {
-	if (!date) return date
-	try {
-		return new Date(date.toLocaleString('en-US', { timeZone: props.timezone }))
-	} catch (e) {
-		console.warn(`Invalid timezone: ${props.timezone}, falling back to UTC`)
-		return date
-	}
+function formatDate(date: Date | string | undefined): string {
+	if (!date) return ''
+	const dateObj = typeof date === 'string' ? new Date(date) : date
+	return props.enableTime ? dateObj.toISOString().slice(0, 16) : dateObj.toISOString().split('T')[0]
 }
 
-function fromLocalDate(date: Date): Date {
-	if (!date) return date
-	try {
-		const localDate = new Date(date.toLocaleString('en-US', { timeZone: 'UTC' }))
-		const tzDate = new Date(date.toLocaleString('en-US', { timeZone: props.timezone }))
-		const diff = localDate.getTime() - tzDate.getTime()
-		return new Date(date.getTime() + diff)
-	} catch (e) {
-		console.warn(`Invalid timezone: ${props.timezone}, falling back to UTC`)
-		return date
-	}
-}
-
-const formattedValue = computed(() => {
-	if (!props.modelValue) return ''
-	const date = typeof props.modelValue === 'string' ? new Date(props.modelValue) : props.modelValue
-	const localDate = toLocalDate(date)
-
-	if (props.enableTime) {
-		return localDate.toISOString().slice(0, 16) // Format: YYYY-MM-DDTHH:mm
-	}
-	return localDate.toISOString().split('T')[0] // Format: YYYY-MM-DD
-})
-
-const formattedMin = computed(() => {
-	if (!props.min) return undefined
-	const date = typeof props.min === 'string' ? new Date(props.min) : props.min
-	const localDate = toLocalDate(date)
-	return props.enableTime ? localDate.toISOString().slice(0, 16) : localDate.toISOString().split('T')[0]
-})
-
-const formattedMax = computed(() => {
-	if (!props.max) return undefined
-	const date = typeof props.max === 'string' ? new Date(props.max) : props.max
-	const localDate = toLocalDate(date)
-	return props.enableTime ? localDate.toISOString().slice(0, 16) : localDate.toISOString().split('T')[0]
-})
+const formattedValue = $computed(() => formatDate(props.modelValue))
+const formattedMin = $computed(() => formatDate(props.min))
+const formattedMax = $computed(() => formatDate(props.max))
 
-const selectedDate = computed(() => {
+const selectedDate = $computed(() => {
 	if (!props.modelValue) return null
-	const date = typeof props.modelValue === 'string' ? new Date(props.modelValue) : props.modelValue
-	return toLocalDate(date)
+	return typeof props.modelValue === 'string' ? new Date(props.modelValue) : props.modelValue
 })
 
-const currentMonthDays = computed(() => {
-	const localCurrentMonth = toLocalDate(currentMonth.value)
-	const year = localCurrentMonth.getFullYear()
-	const month = localCurrentMonth.getMonth()
+const currentMonthDays = $computed(() => {
+	const year = currentMonth.getFullYear()
+	const month = currentMonth.getMonth()
 	const firstDay = new Date(year, month, 1)
 	const lastDay = new Date(year, month + 1, 0)
 	const days = []
 
-	// Add empty slots for days before the first of the month
-	const firstDayOfWeek = firstDay.getDay()
-	for (let i = 0; i < firstDayOfWeek; i++) {
-		days.push(null)
-	}
-
-	// Add all days of the month
-	for (let i = 1; i <= lastDay.getDate(); i++) {
-		days.push(new Date(year, month, i))
-	}
+	for (let i = 0; i < firstDay.getDay(); i++) days.push(null)
+	for (let i = 1; i <= lastDay.getDate(); i++) days.push(new Date(year, month, i))
 
 	return days
 })
 
-const monthYear = computed(() => {
-	const localCurrentMonth = toLocalDate(currentMonth.value)
-	return localCurrentMonth.toLocaleString('default', {
-		month: 'long',
-		year: 'numeric',
-		timeZone: props.timezone
-	})
+const currentMonthValue = $computed(() => ({
+	month: currentMonth.getMonth(),
+	year: currentMonth.getFullYear(),
+	formatted: {
+		month: currentMonth.toLocaleString('default', { month: 'long', timeZone: props.timezone }),
+		year: currentMonth.toLocaleString('default', { year: 'numeric', timeZone: props.timezone })
+	}
+}))
+
+const months = $computed(() => Array.from({ length: 12 }, (_, i) => {
+	const date = new Date(currentMonthValue.year, i, 1)
+	return {
+		name: date.toLocaleString('default', { month: 'short' }),
+		value: i,
+		disabled: isDateDisabled(date)
+	}
 })
+)
 
-function handleInput(event: Event) {
-	const input = event.target as HTMLInputElement
-	if (!input.value) {
-		emit('update:modelValue', '')
-		return
-	}
+const years = $computed(() => {
+	const startYear = currentMonthValue.year - 10
+	return Array.from({ length: 21 }, (_, i) => ({
+		value: startYear + i,
+		disabled: isYearDisabled(startYear + i)
+	}))
+})
 
-	let date = new Date(input.value)
-	date = fromLocalDate(date)
+function isDateDisabled(date: Date | null) {
+	if (!date) return true
+	const minDate = props.min ? new Date(props.min) : null
+	const maxDate = props.max ? new Date(props.max) : null
 
-	if (props.enableTime) {
-		emit('update:modelValue', date.toISOString())
-	} else {
-		emit('update:modelValue', date.toISOString().split('T')[0])
-	}
+	if (minDate && date < minDate) return true
+	if (maxDate && date > maxDate) return true
+	return false
+}
+
+function isYearDisabled(year: number) {
+	const minDate = props.min ? new Date(props.min) : null
+	const maxDate = props.max ? new Date(props.max) : null
+
+	if (minDate && year < minDate.getFullYear()) return true
+	if (maxDate && year > maxDate.getFullYear()) return true
+	return false
+}
+
+function selectMonth(monthIndex: number) {
+	currentMonth = new Date(currentMonth.getFullYear(), monthIndex, 1)
+	currentView = 'days'
+}
+
+function selectYear(year: number) {
+	currentMonth = new Date(year, currentMonth.getMonth(), 1)
+	currentView = 'months'
 }
 
 function previousMonth() {
-	const localCurrentMonth = toLocalDate(currentMonth.value)
-	currentMonth.value = new Date(
-		localCurrentMonth.getFullYear(),
-		localCurrentMonth.getMonth() - 1,
-		1
-	)
+	currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)
 }
 
 function nextMonth() {
-	const localCurrentMonth = toLocalDate(currentMonth.value)
-	currentMonth.value = new Date(
-		localCurrentMonth.getFullYear(),
-		localCurrentMonth.getMonth() + 1,
-		1
-	)
+	currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1)
+}
+
+function previousYear() {
+	const offset = currentView === 'months' ? 1 : 21
+	currentMonth = new Date(currentMonth.getFullYear() - offset, currentMonth.getMonth(), 1)
+}
+
+function nextYear() {
+	const offset = currentView === 'months' ? 1 : 21
+	currentMonth = new Date(currentMonth.getFullYear() + offset, currentMonth.getMonth(), 1)
 }
 
 function selectDate(date: Date | null) {
 	if (!date || !props.editMode) return
 
-	let selectedTime = { hours: 0, minutes: 0 }
-	if (props.enableTime && selectedDate.value) {
-		selectedTime = {
-			hours: selectedDate.value.getHours(),
-			minutes: selectedDate.value.getMinutes()
-		}
+	// Create date at start of day in the target timezone
+	const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0)
+
+	// If time is enabled, preserve existing time or set to current time
+	if (props.enableTime) {
+		const currentHours = selectedDate?.getHours() ?? new Date().getHours()
+		const currentMinutes = selectedDate?.getMinutes() ?? new Date().getMinutes()
+		newDate.setHours(currentHours)
+		newDate.setMinutes(currentMinutes)
+		emit('update:modelValue', newDate.toISOString())
+	} else {
+		emit('update:modelValue', newDate.toISOString().split('T')[0])
+		isOpen = false
 	}
+}
 
-	const localDate = new Date(date)
-	localDate.setHours(selectedTime.hours)
-	localDate.setMinutes(selectedTime.minutes)
+function handleInput(event: Event) {
+	const input = event.target as HTMLInputElement
+	if (!input.value) {
+		emit('update:modelValue', '')
+		return
+	}
+
+	const date = new Date(input.value)
+	emit('update:modelValue', props.enableTime ? date.toISOString() : date.toISOString().split('T')[0])
+}
 
-	const utcDate = fromLocalDate(localDate)
+const hours = $computed(() => selectedDate?.getHours() ?? 0)
+const minutes = $computed(() => selectedDate?.getMinutes() ?? 0)
+
+function handleHourInput(value: number) {
+	if (!selectedDate) return
+	const newDate = new Date(selectedDate)
+	newDate.setHours(value)
+	emit('update:modelValue', newDate.toISOString())
+}
 
-	emit('update:modelValue', props.enableTime ? utcDate.toISOString() : utcDate.toISOString().split('T')[0])
-	isOpen.value = false
+function handleMinuteInput(value: number) {
+	if (!selectedDate) return
+	const newDate = new Date(selectedDate)
+	newDate.setMinutes(value)
+	emit('update:modelValue', newDate.toISOString())
 }
 
 function isSelected(date: Date | null) {
-	if (!date || !selectedDate.value) return false
-	const localDate = toLocalDate(date)
-	return localDate.toISOString().split('T')[0] === selectedDate.value.toISOString().split('T')[0]
+	if (!date || !selectedDate) return false
+	return date.toISOString().split('T')[0] === selectedDate.toISOString().split('T')[0]
 }
 
 function isToday(date: Date | null) {
 	if (!date) return false
-	const today = toLocalDate(new Date())
-	const localDate = toLocalDate(date)
-	return localDate.toISOString().split('T')[0] === today.toISOString().split('T')[0]
+	return date.toISOString().split('T')[0] === new Date().toISOString().split('T')[0]
 }
 
-function isDisabled(date: Date | null) {
-	if (!date) return true
-	const localDate = toLocalDate(date)
-	const minDate = props.min ? toLocalDate(new Date(props.min)) : null
-	const maxDate = props.max ? toLocalDate(new Date(props.max)) : null
-
-	if (minDate && localDate < minDate) return true
-	if (maxDate && localDate > maxDate) return true
-	return false
-}
-
-// Add timezone display if time is enabled
-const timezoneDisplay = computed(() => {
+const timezoneDisplay = $computed(() => {
 	if (!props.enableTime) return ''
 	try {
-		const date = new Date()
-		return date.toLocaleString('en-US', {
+		return new Date().toLocaleString('en-US', {
 			timeZoneName: 'short',
 			timeZone: props.timezone
 		}).split(' ').pop()
-	} catch (e) {
+	} catch {
 		return 'UTC'
 	}
 })
 </script>
 
 <template>
-	<div
-		class="bagel-input"
-		:class="{ small, 'rtl-date': rtl }"
-		:title="label"
-	>
+	<div class="bagel-input" :class="{ small }" :title="label">
 		<label v-if="label">
 			{{ label }}
 			<span v-if="required" class="required">*</span>
 		</label>
 
-		<div class="date-picker-container">
-			<TextInput @input="handleInput" @click="isOpen = true" />
-			<!-- <input
-				v-if="showInput"
-				:type="inputType"
-				:value="formattedValue"
-				:min="formattedMin"
-				:max="formattedMax"
-				:required="required"
-				:disabled="!editMode"
-				class="date-input"
-			> -->
-
-			<div
-				v-if="!showInput"
-				class="date-display"
-				:class="{ disabled: !editMode }"
-				@click="editMode && (isOpen = !isOpen)"
-			>
-				{{ formattedValue || 'Select date' }}
-				<span v-if="enableTime" class="timezone-display">{{ timezoneDisplay }}</span>
+		<VDropdown
+			:shown="isOpen"
+			:triggers="[]"
+			placement="bottom-start"
+			:distance="4"
+			@apply-show="isOpen = true"
+			@apply-hide="isOpen = false"
+		>
+			<div class="date-picker-container">
+				<input
+					:type="inputType"
+					:value="formattedValue"
+					:min="formattedMin"
+					:max="formattedMax"
+					:required="required"
+					:disabled="!editMode"
+					class="date-input"
+					@input="handleInput"
+					@click="isOpen = true"
+				>
 			</div>
 
-			<div
-				v-if="isOpen"
-				class="calendar-popup"
-				@click.stop
-			>
-				<div class="calendar-header">
-					<Btn flat icon="chevron_left" @click="previousMonth" />
-					<span class="month-year">{{ monthYear }}</span>
-					<Btn flat icon="chevron_right" @click="nextMonth" />
-				</div>
-
-				<div class="calendar-grid">
-					<div
-						v-for="day in ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']"
-						:key="day"
-						class="weekday"
-					>
-						{{ day }}
+			<template #popper>
+				<div class="calendar-container">
+					<div class="calendar-section">
+						<div class="calendar-header">
+							<template v-if="currentView === 'days'">
+								<Btn flat icon="chevron_left" @click="previousMonth" />
+								<div class="month-year-selector">
+									<button class="month-btn" @click="currentView = 'months'">
+										{{ currentMonthValue.formatted.month }}
+									</button>
+									<button class="year-btn" @click="currentView = 'years'">
+										{{ currentMonthValue.formatted.year }}
+									</button>
+								</div>
+								<Btn flat icon="chevron_right" @click="nextMonth" />
+							</template>
+							<template v-else>
+								<Btn flat icon="chevron_left" @click="previousYear" />
+								<span class="month-year">{{ currentMonthValue.formatted.year }}</span>
+								<Btn flat icon="chevron_right" @click="nextYear" />
+							</template>
+						</div>
+
+						<div v-if="currentView === 'days'" class="calendar-grid">
+							<div v-for="day in ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']" :key="day" class="weekday">
+								{{ day }}
+							</div>
+
+							<button
+								v-for="(date, index) in currentMonthDays"
+								:key="index"
+								type="button"
+								class="day"
+								:class="{
+									selected: isSelected(date),
+									today: isToday(date),
+									disabled: isDateDisabled(date),
+								}"
+								:disabled="isDateDisabled(date)"
+								@click="selectDate(date)"
+							>
+								{{ date?.getDate() }}
+							</button>
+						</div>
+
+						<div v-else-if="currentView === 'months'" class="month-grid">
+							<button
+								v-for="month in months"
+								:key="month.value"
+								class="month-item"
+								:class="{
+									selected: month.value === currentMonthValue.month,
+									disabled: month.disabled,
+								}"
+								:disabled="month.disabled"
+								@click="selectMonth(month.value)"
+							>
+								{{ month.name }}
+							</button>
+						</div>
+
+						<div v-else class="year-grid">
+							<button
+								v-for="year in years"
+								:key="year.value"
+								class="year-item"
+								:class="{
+									selected: year.value === currentMonthValue.year,
+									disabled: year.disabled,
+								}"
+								:disabled="year.disabled"
+								@click="selectYear(year.value)"
+							>
+								{{ year.value }}
+							</button>
+						</div>
 					</div>
 
-					<button
-						v-for="(date, index) in currentMonthDays"
-						:key="index"
-						type="button"
-						class="day"
-						:class="{
-							selected: isSelected(date),
-							today: isToday(date),
-							disabled: isDisabled(date),
-						}"
-						:disabled="isDisabled(date)"
-						@click="selectDate(date)"
-					>
-						{{ date?.getDate() }}
-					</button>
-				</div>
-
-				<div
-					v-if="enableTime && selectedDate"
-					class="time-picker"
-				>
-					<input
-						type="time"
-						:value="selectedDate.toISOString().slice(11, 16)"
-						@input="handleInput"
-					>
-					<span class="timezone-display">{{ timezoneDisplay }}</span>
+					<div v-if="enableTime && currentView === 'days'" class="time-picker">
+						<div class="time-input-group">
+							<NumberInput
+								center
+								:model-value="hours"
+								:disabled="!selectedDate"
+								:min="0"
+								:max="23"
+								layout="vertical"
+								:padZero="2"
+								@update:model-value="handleHourInput"
+							/>
+							<span>:</span>
+							<NumberInput
+								center
+								:model-value="minutes"
+								:disabled="!selectedDate"
+								:min="0"
+								:max="59"
+								:padZero="2"
+								layout="vertical"
+								@update:model-value="handleMinuteInput"
+							/>
+						</div>
+						<span class="timezone-display">{{ timezoneDisplay }}</span>
+						<Btn v-if="selectedDate" flat @click="isOpen = false">
+							Done
+						</Btn>
+					</div>
 				</div>
-			</div>
-		</div>
+			</template>
+		</VDropdown>
 	</div>
 </template>
 
@@ -312,8 +356,7 @@ const timezoneDisplay = computed(() => {
 	position: relative;
 }
 
-.date-input,
-.date-display {
+.date-input {
 	padding: 0.5rem;
 	border: 1px solid #ddd;
 	border-radius: 4px;
@@ -322,17 +365,7 @@ const timezoneDisplay = computed(() => {
 	background: white;
 }
 
-.date-display {
-	cursor: pointer;
-}
-
-.date-display.disabled {
-	background-color: #f5f5f5;
-	cursor: not-allowed;
-}
-
-.date-input:focus,
-.date-display:focus {
+.date-input:focus {
 	outline: none;
 	border-color: #4a90e2;
 	box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
@@ -343,32 +376,30 @@ const timezoneDisplay = computed(() => {
 	cursor: not-allowed;
 }
 
-.small .date-input,
-.small .date-display {
+.small .date-input {
 	padding: 0.25rem;
 	font-size: 0.875rem;
 }
 
-.rtl-date input {
-	direction: rtl;
-}
-
 .required {
 	color: #ff4d4f;
 	margin-left: 4px;
 }
 
 .calendar-popup {
-	position: absolute;
-	top: 100%;
-	left: 0;
-	z-index: 1000;
 	background: white;
 	border: 1px solid #ddd;
 	border-radius: 4px;
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 	padding: 1rem;
-	margin-top: 0.5rem;
+}
+
+.calendar-container {
+	display: flex;
+	gap: 1rem;
+}
+
+.calendar-section {
 	width: 300px;
 }
 
@@ -379,21 +410,25 @@ const timezoneDisplay = computed(() => {
 	margin-bottom: 1rem;
 }
 
-.nav-button {
+.month-year-selector {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+}
+
+.month-btn,
+.year-btn {
 	background: none;
 	border: none;
-	font-size: 1.5rem;
+	font-weight: 500;
 	cursor: pointer;
-	padding: 0 0.5rem;
-	color: #666;
-}
-
-.nav-button:hover {
-	color: #4a90e2;
+	padding: 0.25rem 0.5rem;
+	border-radius: 4px;
 }
 
-.month-year {
-	font-weight: 500;
+.month-btn:hover,
+.year-btn:hover {
+	background-color: #f5f5f5;
 }
 
 .calendar-grid {
@@ -402,6 +437,54 @@ const timezoneDisplay = computed(() => {
 	gap: 0.25rem;
 }
 
+.month-grid {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: repeat(4, 1fr);
+	gap: 0.5rem;
+	padding: 0.5rem;
+}
+
+.year-grid {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: repeat(7, 1fr);
+	gap: 0.5rem;
+	padding: 0.5rem;
+}
+
+.month-item,
+.year-item {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	background: none;
+	cursor: pointer;
+	border-radius: 4px;
+	font-size: 0.875rem;
+	color: #333;
+	padding: 0.5rem;
+	min-height: 2.5rem;
+}
+
+.month-item:hover:not(.disabled),
+.year-item:hover:not(.disabled) {
+	background-color: #f5f5f5;
+}
+
+.month-item.selected,
+.year-item.selected {
+	background-color: #4a90e2;
+	color: white;
+}
+
+.month-item.disabled,
+.year-item.disabled {
+	color: #ccc;
+	cursor: not-allowed;
+}
+
 .weekday {
 	text-align: center;
 	font-size: 0.875rem;
@@ -442,18 +525,29 @@ const timezoneDisplay = computed(() => {
 }
 
 .timezone-display {
-	margin-left: 0.5rem;
 	color: #666;
 	font-size: 0.875rem;
+	text-align: center;
 }
 
 .time-picker {
 	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	border-left: 1px solid #ddd;
+	width: 100px;
 	align-items: center;
-	gap: 0.5rem;
 }
 
-.time-picker input {
-	flex: 1;
+.time-input-group {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+}
+
+.time-input-group span {
+	font-size: 1.25rem;
+	color: #666;
+	padding: 0 0.25rem;
 }
 </style>