@bagelink/vue 0.0.1262 → 0.0.1268

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

@@ -1,8 +1,13 @@
 <script setup lang="ts">
 import type { modeType } from '../../Calendar/typings/types'
 import { Btn, NumberInput, Dropdown, TextInput } from '@bagelink/vue'
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
 import Time, { WEEK_START_DAY } from '../../Calendar/helpers/Time'
 
+// Types
+type ViewMode = 'days' | 'months' | 'years'
+
+// Props
 const props = withDefaults(
 	defineProps<{
 		required?: boolean
@@ -18,7 +23,6 @@ const props = withDefaults(
 		firstDayOfWeek?: WEEK_START_DAY
 		locale?: string
 		center?: boolean
-
 	}>(),
 	{
 		enableTime: false,
@@ -26,224 +30,395 @@ const props = withDefaults(
 		small: false,
 		timezone: 'UTC',
 		mode: 'day',
-		firstDayOfWeek: WEEK_START_DAY.MONDAY,
+		firstDayOfWeek: WEEK_START_DAY.SUNDAY,
 		locale: ''
 	},
 )
 
 const emit = defineEmits(['update:modelValue'])
-let isOpen = $ref(false)
-let currentMonth = $ref(new Date())
-type ViewMode = 'days' | 'months' | 'years'
-let currentView = $ref<ViewMode>('days')
 
+// State
+const isOpen = ref(false)
+const currentMonth = ref(new Date())
+const currentView = ref<ViewMode>('days')
+
+// Time helper instance
 const time = new Time(props.firstDayOfWeek, props.locale)
 
-function formatDisplayDate(date: Date | string | undefined): string {
-	if (!date) return ''
-	const dateObj = typeof date === 'string' ? new Date(date) : date
+// Date formatting composable
+function useFormatting() {
+	const formatDisplayDate = (date: Date | string | undefined): string => {
+		if (!date) return ''
+		const dateObj = typeof date === 'string' ? new Date(date) : date
 
-	if (props.enableTime) {
-		return dateObj.toLocaleString(props.locale || undefined, {
+		const options: Intl.DateTimeFormatOptions = {
 			year: 'numeric',
 			month: 'short',
 			day: 'numeric',
-			hour: '2-digit',
-			minute: '2-digit',
+			...(props.enableTime && {
+				hour: '2-digit',
+				minute: '2-digit',
+			}),
 			timeZone: props.timezone
-		})
+		}
+
+		return dateObj.toLocaleString(props.locale || undefined, options)
 	}
 
-	return dateObj.toLocaleString(props.locale || undefined, {
-		year: 'numeric',
-		month: 'short',
-		day: 'numeric',
-		timeZone: props.timezone
-	})
-}
+	const 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]
+	}
+
+	const parseUserInput = (input: string): Date | null => {
+		// Try parsing various date formats
+		const date = new Date(input)
+		if (!Number.isNaN(date.getTime())) {
+			return date
+		}
+
+		// Try DD/MM/YYYY format
+		const parts = input.split(/[/.-]/)
+		if (parts.length === 3) {
+			const [day, month, year] = parts.map(p => Number.parseInt(p, 10))
+			if (!Number.isNaN(day) && !Number.isNaN(month) && !Number.isNaN(year)) {
+				const date = new Date(year, month - 1, day)
+				if (date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day) {
+					return date
+				}
+			}
+		}
+
+		return null
+	}
 
-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]
+	return {
+		formatDisplayDate,
+		formatDate,
+		parseUserInput
+	}
 }
 
-const formattedDisplayValue = $computed(() => formatDisplayDate(props.modelValue))
-const formattedMin = $computed(() => formatDate(props.min))
-const formattedMax = $computed(() => formatDate(props.max))
+// Date validation composable
+function useDateValidation() {
+	const 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
 
-const selectedDate = $computed(() => {
-	if (!props.modelValue) return null
-	return typeof props.modelValue === 'string' ? new Date(props.modelValue) : props.modelValue
-})
+		if (minDate && date < minDate) return true
+		if (maxDate && date > maxDate) return true
+		return false
+	}
 
-const currentMonthDays = $computed(() => {
-	const year = currentMonth.getFullYear()
-	const month = currentMonth.getMonth()
-	return time.getCalendarMonthSplitInWeeks(year, month).flat()
-})
+	const isYearDisabled = (year: number) => {
+		const minDate = props.min ? new Date(props.min) : null
+		const maxDate = props.max ? new Date(props.max) : null
 
-const currentMonthValue = $computed(() => ({
-	month: currentMonth.getMonth(),
-	year: currentMonth.getFullYear(),
-	formatted: {
-		month: time.getLocalizedNameOfMonth(currentMonth, 'long'),
-		year: time.getLocalizedDateString(currentMonth).split('/').pop() // Get just the year part
+		if (minDate && year < minDate.getFullYear()) return true
+		if (maxDate && year > maxDate.getFullYear()) return true
+		return false
 	}
-}))
 
-const months = $computed(() => Array.from({ length: 12 }, (_, i) => {
-	const date = new Date(currentMonthValue.year, i, 1)
 	return {
-		name: time.getLocalizedNameOfMonth(date, 'short'),
-		value: i,
-		disabled: isDateDisabled(date)
+		isDateDisabled,
+		isYearDisabled
+	}
+}
+
+// Date state composable
+function useDateState() {
+	const { formatDisplayDate, formatDate } = useFormatting()
+
+	const formattedDisplayValue = computed(() => formatDisplayDate(props.modelValue))
+	const formattedMin = computed(() => formatDate(props.min))
+	const formattedMax = computed(() => formatDate(props.max))
+	const selectedDate = computed(() => {
+		if (!props.modelValue) return null
+		return typeof props.modelValue === 'string' ? new Date(props.modelValue) : props.modelValue
+	})
+
+	return {
+		formattedDisplayValue,
+		formattedMin,
+		formattedMax,
+		selectedDate
 	}
-}))
+}
+
+// Initialize core composables first
+const { isDateDisabled, isYearDisabled } = useDateValidation()
+const { formattedDisplayValue, formattedMin, formattedMax, selectedDate } = useDateState()
 
-const years = $computed(() => {
-	const startYear = currentMonthValue.year - 10
-	return Array.from({ length: 21 }, (_, i) => ({
-		value: startYear + i,
-		disabled: isYearDisabled(startYear + i)
+// Calendar view composable
+function useCalendarView() {
+	const currentMonthDays = computed(() => {
+		const year = currentMonth.value.getFullYear()
+		const month = currentMonth.value.getMonth()
+		return time.getCalendarMonthSplitInWeeks(year, month).flat()
+	})
+
+	const currentMonthValue = computed(() => ({
+		month: currentMonth.value.getMonth(),
+		year: currentMonth.value.getFullYear(),
+		formatted: {
+			month: time.getLocalizedNameOfMonth(currentMonth.value, 'long'),
+			year: time.getLocalizedDateString(currentMonth.value).split('/').pop()
+		}
 	}))
-})
 
-const weekDays = $computed(() => {
-	const weekStart = new Date()
-	weekStart.setDate(weekStart.getDate() - weekStart.getDay() + (props.firstDayOfWeek === WEEK_START_DAY.MONDAY ? 1 : 0))
-	return Array.from({ length: 7 }, (_, i) => {
-		const day = new Date(weekStart)
-		day.setDate(weekStart.getDate() + i)
-		return time.getLocalizedNameOfWeekday(day, 'short')
+	const months = computed(() => Array.from({ length: 12 }, (_, i) => {
+		const date = new Date(currentMonthValue.value.year, i, 1)
+		return {
+			name: time.getLocalizedNameOfMonth(date, 'short'),
+			value: i,
+			disabled: isDateDisabled(date)
+		}
+	}))
+
+	const years = computed(() => {
+		const startYear = currentMonthValue.value.year - 10
+		return Array.from({ length: 21 }, (_, i) => ({
+			value: startYear + i,
+			disabled: isYearDisabled(startYear + i)
+		}))
 	})
-})
 
-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
+	const weekDays = computed(() => {
+		const weekStart = new Date()
+		weekStart.setDate(weekStart.getDate() - weekStart.getDay()
+			+ (props.firstDayOfWeek === WEEK_START_DAY.MONDAY ? 1 : 0))
+		return Array.from({ length: 7 }, (_, i) => {
+			const day = new Date(weekStart)
+			day.setDate(weekStart.getDate() + i)
+			return time.getLocalizedNameOfWeekday(day, 'short')
+		})
+	})
 
-	if (minDate && date < minDate) return true
-	if (maxDate && date > maxDate) return true
-	return false
-}
+	const isSelected = (date: Date | null) => {
+		if (!date || !selectedDate.value) return false
+		return date.getFullYear() === selectedDate.value.getFullYear()
+			&& date.getMonth() === selectedDate.value.getMonth()
+			&& date.getDate() === selectedDate.value.getDate()
+	}
 
-function isYearDisabled(year: number) {
-	const minDate = props.min ? new Date(props.min) : null
-	const maxDate = props.max ? new Date(props.max) : null
+	const isToday = (date: Date | null) => {
+		if (!date) return false
+		return time.dateIsToday(date)
+	}
 
-	if (minDate && year < minDate.getFullYear()) return true
-	if (maxDate && year > maxDate.getFullYear()) return true
-	return false
-}
+	const isNotInMonth = (date: Date) => {
+		return time.isTrailingOrLeadingDate(date, currentMonth.value.getMonth())
+	}
 
-function selectMonth(monthIndex: number) {
-	currentMonth = new Date(currentMonth.getFullYear(), monthIndex, 1)
-	currentView = 'days'
+	return {
+		currentMonthDays,
+		currentMonthValue,
+		months,
+		years,
+		weekDays,
+		isSelected,
+		isToday,
+		isNotInMonth
+	}
 }
 
-function selectYear(year: number) {
-	currentMonth = new Date(year, currentMonth.getMonth(), 1)
-	currentView = 'months'
-}
+// Navigation handlers
+function useNavigation() {
+	const selectMonth = (monthIndex: number) => {
+		currentMonth.value = new Date(currentMonth.value.getFullYear(), monthIndex, 1)
+		currentView.value = 'days'
+	}
 
-function previousMonth() {
-	currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)
-}
+	const selectYear = (year: number) => {
+		currentMonth.value = new Date(year, currentMonth.value.getMonth(), 1)
+		currentView.value = 'months'
+	}
+
+	const previousMonth = () => {
+		currentMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() - 1, 1)
+	}
 
-function nextMonth() {
-	currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1)
+	const nextMonth = () => {
+		currentMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() + 1, 1)
+	}
+
+	const previousYear = () => {
+		const offset = currentView.value === 'months' ? 1 : 21
+		currentMonth.value = new Date(currentMonth.value.getFullYear() - offset, currentMonth.value.getMonth(), 1)
+	}
+
+	const nextYear = () => {
+		const offset = currentView.value === 'months' ? 1 : 21
+		currentMonth.value = new Date(currentMonth.value.getFullYear() + offset, currentMonth.value.getMonth(), 1)
+	}
+
+	return {
+		selectMonth,
+		selectYear,
+		previousMonth,
+		nextMonth,
+		previousYear,
+		nextYear
+	}
 }
 
-function previousYear() {
-	const offset = currentView === 'months' ? 1 : 21
-	currentMonth = new Date(currentMonth.getFullYear() - offset, currentMonth.getMonth(), 1)
+// Time handling composable
+function useTimeHandling() {
+	const hours = computed(() => selectedDate.value?.getHours() ?? 0)
+	const minutes = computed(() => selectedDate.value?.getMinutes() ?? 0)
+
+	const handleHourInput = (value: number) => {
+		if (!selectedDate.value) return
+		const newDate = new Date(selectedDate.value)
+		newDate.setHours(value)
+		emit('update:modelValue', newDate.toISOString())
+	}
+
+	const handleMinuteInput = (value: number) => {
+		if (!selectedDate.value) return
+		const newDate = new Date(selectedDate.value)
+		newDate.setMinutes(value)
+		emit('update:modelValue', newDate.toISOString())
+	}
+
+	const timezoneDisplay = computed(() => {
+		if (!props.enableTime) return ''
+		try {
+			return new Date().toLocaleString('en-US', {
+				timeZoneName: 'short',
+				timeZone: props.timezone
+			}).split(' ').pop()
+		} catch {
+			return 'UTC'
+		}
+	})
+
+	return {
+		hours,
+		minutes,
+		handleHourInput,
+		handleMinuteInput,
+		timezoneDisplay
+	}
 }
 
-function nextYear() {
-	const offset = currentView === 'months' ? 1 : 21
-	currentMonth = new Date(currentMonth.getFullYear() + offset, currentMonth.getMonth(), 1)
+// Input handling composable
+function useInputHandling() {
+	const { parseUserInput } = useFormatting()
+	const inputValue = ref('')
+
+	const handleInput = (event: Event) => {
+		const input = event.target as HTMLInputElement
+		inputValue.value = input.value
+
+		const date = parseUserInput(input.value)
+		if (date) {
+			if (props.enableTime) {
+				emit('update:modelValue', date.toISOString())
+			} else {
+				const utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
+				emit('update:modelValue', utcDate.toISOString().split('T')[0])
+			}
+		}
+	}
+
+	const handleFocus = (e: FocusEvent) => {
+		e.preventDefault()
+		e.stopPropagation()
+		isOpen.value = true
+	}
+
+	const handleClick = (e: MouseEvent) => {
+		e.preventDefault()
+		e.stopPropagation()
+	}
+
+	const handleKeydown = (event: KeyboardEvent) => {
+		if (event.key === 'Escape') {
+			isOpen.value = false
+		} else if (event.key === 'Enter' && inputValue.value) {
+			const date = parseUserInput(inputValue.value)
+			if (date) {
+				if (props.enableTime) {
+					emit('update:modelValue', date.toISOString())
+				} else {
+					const utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
+					emit('update:modelValue', utcDate.toISOString().split('T')[0])
+				}
+				isOpen.value = false
+			}
+		}
+	}
+
+	return {
+		inputValue,
+		handleInput,
+		handleFocus,
+		handleClick,
+		handleKeydown
+	}
 }
 
+// Initialize input handling
+const { inputValue, handleInput, handleFocus, handleClick, handleKeydown } = useInputHandling()
+
+// Initialize remaining composables
+const { currentMonthDays, currentMonthValue, months, years, weekDays, isSelected, isToday, isNotInMonth } = useCalendarView()
+const { selectMonth, selectYear, previousMonth, nextMonth, previousYear, nextYear } = useNavigation()
+const { hours, minutes, handleHourInput, handleMinuteInput, timezoneDisplay } = useTimeHandling()
+
+// Date selection handler
 function selectDate(date: Date | null) {
 	if (!date || !props.editMode) return
 
-	// Create date at start of day in the target timezone
+	// Create date in the target timezone
+	const tzOffset = new Date().getTimezoneOffset()
 	const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
 
-	// 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()
+		const currentHours = selectedDate.value?.getHours() ?? new Date().getHours()
+		const currentMinutes = selectedDate.value?.getMinutes() ?? new Date().getMinutes()
 		newDate.setHours(currentHours)
 		newDate.setMinutes(currentMinutes)
+
+		// Adjust for timezone when time is enabled
+		if (props.timezone === 'UTC') {
+			newDate.setMinutes(newDate.getMinutes() + tzOffset)
+		}
 		emit('update:modelValue', newDate.toISOString())
 	} else {
-		// For dates without time, ensure time is set to midnight UTC
-		newDate.setUTCHours(0, 0, 0, 0)
-		emit('update:modelValue', newDate.toISOString().split('T')[0])
-		isOpen = false
-	}
-}
-
-function handleInput(event: Event) {
-	const input = event.target as HTMLInputElement
-	if (!input.value) {
-		emit('update:modelValue', '')
-		return
+		// For date-only selection, ensure we're working with UTC midnight
+		const utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
+		emit('update:modelValue', utcDate.toISOString().split('T')[0])
+		isOpen.value = false
 	}
-
-	const date = new Date(input.value)
-	emit('update:modelValue', props.enableTime ? date.toISOString() : date.toISOString().split('T')[0])
 }
 
-const hours = $computed(() => selectedDate?.getHours() ?? 0)
-const minutes = $computed(() => selectedDate?.getMinutes() ?? 0)
+const datePickerRef = ref<HTMLElement | null>(null)
+const calendarRef = ref<HTMLElement | null>(null)
 
-function handleHourInput(value: number) {
-	if (!selectedDate) return
-	const newDate = new Date(selectedDate)
-	newDate.setHours(value)
-	emit('update:modelValue', newDate.toISOString())
-}
-
-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) return false
-	return date.toISOString().split('T')[0] === selectedDate.toISOString().split('T')[0]
-}
+onMounted(() => {
+	const handleDocumentClick = (e: MouseEvent) => {
+		const target = e.target as HTMLElement
+		if (!datePickerRef.value?.contains(target) && !calendarRef.value?.contains(target)) {
+			isOpen.value = false
+		}
+	}
 
-function isToday(date: Date | null) {
-	if (!date) return false
-	return time.dateIsToday(date)
-}
+	document.addEventListener('click', handleDocumentClick)
 
-const timezoneDisplay = $computed(() => {
-	if (!props.enableTime) return ''
-	try {
-		return new Date().toLocaleString('en-US', {
-			timeZoneName: 'short',
-			timeZone: props.timezone
-		}).split(' ').pop()
-	} catch {
-		return 'UTC'
-	}
+	onBeforeUnmount(() => {
+		document.removeEventListener('click', handleDocumentClick)
+	})
 })
-
-function isNotInMonth(date: Date) {
-	return time.isTrailingOrLeadingDate(date, currentMonth.getMonth())
-}
 </script>
 
 <template>
-	<div class="bagel-input" :class="{ small }" :title="label">
+	<div class="bagel-input" :class="{ small }" :title="label" @focusin="handleFocus">
 		<label v-if="label">
 			{{ label }}
 			<span v-if="required" class="required">*</span>
@@ -252,11 +427,11 @@ function isNotInMonth(date: Date) {
 		<Dropdown
 			:shown="isOpen"
 			placement="bottom-start"
-			@apply-show="isOpen = true"
-			@apply-hide="isOpen = false"
+			:autoHide="false"
+			:triggers="['click']"
 		>
 			<template #trigger>
-				<div class="date-picker-container">
+				<div ref="datePickerRef" class="date-picker-container" @mousedown.stop @click.stop>
 					<TextInput
 						:modelValue="formattedDisplayValue"
 						icon="calendar"
@@ -266,14 +441,18 @@ function isNotInMonth(date: Date) {
 						:disabled="!editMode"
 						class="date-input"
 						:class="{
-							'txt-center': center }"
-						readonly
-						@click="isOpen = true"
+							'txt-center': center,
+						}"
+						:readonly="false"
+						@input="handleInput"
+						@focus="handleFocus"
+						@click="handleClick"
+						@keydown="handleKeydown"
 					/>
 				</div>
 			</template>
 
-			<div class="flex gap-075 p-05 m_flex-wrap calendar-container justify-content-center h-100p">
+			<div ref="calendarRef" class="ltr flex gap-075 p-05 m_flex-wrap calendar-container justify-content-center h-100p" @click.stop>
 				<div class="calendar-section m_border-none pe-05 m_p-0">
 					<div class="flex space-between pb-1">
 						<template v-if="currentView === 'days'">

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

@@ -43,7 +43,7 @@ const inputType = $computed(() => (showPwd.value ? 'text' : 'password'))
 </script>
 
 <template>
-	<div class="relative">
+	<div class="relative passwordInput">
 		<TextInput
 			v-model="password"
 			v-bind="props"
@@ -66,4 +66,8 @@ const inputType = $computed(() => (showPwd.value ? 'text' : 'password'))
 .m-password {
 	height: var(--input-height) !important;
 }
+[dir='rtl'] .passwordInput input {
+    direction: ltr;
+    text-align: right;
+}
 </style>

package/src/components/form/inputs/RichText/components/EditorToolbar.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import type { ToolbarConfig, ToolbarConfigOption, ToolbarOption } from '../richTextTypes'
 import { Btn, Dropdown } from '@bagelink/vue'
-import { defaultToolbarConfig, toolbarOptions } from '../config'
+import { basicToolbarConfig, toolbarOptions } from '../config'
 import GridBox from './gridBox.vue'
 
-const { config = defaultToolbarConfig, selectedStyles } = defineProps<{
+const { config = basicToolbarConfig, selectedStyles } = defineProps<{
 	config?: ToolbarConfig
 	selectedStyles: Set<string>
 }>()