@bagelink/vue 0.0.1218 → 0.0.1220

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { Btn, NumberInput } from '@bagelink/vue'
-import { Dropdown as VDropdown } from 'floating-vue'
+import type { modeType } from '../../Calendar/typings/types'
+import { Btn, NumberInput, Dropdown } from '@bagelink/vue'
+import Time, { WEEK_START_DAY } from '../../Calendar/helpers/Time'
 
 const props = withDefaults(
 	defineProps<{
@@ -13,12 +14,18 @@ const props = withDefaults(
 		min?: string | Date
 		max?: string | Date
 		timezone?: string
+		mode?: modeType
+		firstDayOfWeek?: WEEK_START_DAY
+		locale?: string
 	}>(),
 	{
 		enableTime: false,
 		editMode: true,
 		small: false,
-		timezone: 'UTC'
+		timezone: 'UTC',
+		mode: 'day',
+		firstDayOfWeek: WEEK_START_DAY.MONDAY,
+		locale: ''
 	},
 )
 
@@ -28,7 +35,30 @@ let currentMonth = $ref(new Date())
 type ViewMode = 'days' | 'months' | 'years'
 let currentView = $ref<ViewMode>('days')
 
-const inputType = $computed(() => props.enableTime ? 'datetime-local' : 'date')
+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
+	
+	if (props.enableTime) {
+		return dateObj.toLocaleString(props.locale || undefined, {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric',
+			hour: '2-digit',
+			minute: '2-digit',
+			timeZone: props.timezone
+		})
+	}
+	
+	return dateObj.toLocaleString(props.locale || undefined, {
+		year: 'numeric',
+		month: 'short',
+		day: 'numeric',
+		timeZone: props.timezone
+	})
+}
 
 function formatDate(date: Date | string | undefined): string {
 	if (!date) return ''
@@ -36,7 +66,7 @@ function formatDate(date: Date | string | undefined): string {
 	return props.enableTime ? dateObj.toISOString().slice(0, 16) : dateObj.toISOString().split('T')[0]
 }
 
-const formattedValue = $computed(() => formatDate(props.modelValue))
+const formattedDisplayValue = $computed(() => formatDisplayDate(props.modelValue))
 const formattedMin = $computed(() => formatDate(props.min))
 const formattedMax = $computed(() => formatDate(props.max))
 
@@ -48,34 +78,26 @@ const selectedDate = $computed(() => {
 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 = []
-
-	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
+	return time.getCalendarMonthSplitInWeeks(year, month).flat()
 })
 
 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 })
+		month: time.getLocalizedNameOfMonth(currentMonth, 'long'),
+		year: time.getLocalizedDateString(currentMonth).split('/').pop() // Get just the year part
 	}
 }))
 
 const months = $computed(() => Array.from({ length: 12 }, (_, i) => {
 	const date = new Date(currentMonthValue.year, i, 1)
 	return {
-		name: date.toLocaleString('default', { month: 'short' }),
+		name: time.getLocalizedNameOfMonth(date, 'short'),
 		value: i,
 		disabled: isDateDisabled(date)
 	}
-})
-)
+}))
 
 const years = $computed(() => {
 	const startYear = currentMonthValue.year - 10
@@ -85,6 +107,16 @@ const years = $computed(() => {
 	}))
 })
 
+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')
+	})
+})
+
 function isDateDisabled(date: Date | null) {
 	if (!date) return true
 	const minDate = props.min ? new Date(props.min) : null
@@ -144,11 +176,10 @@ function selectDate(date: Date | null) {
 		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
 	}
+	emit('update:modelValue', newDate)
 }
 
 function handleInput(event: Event) {
@@ -186,7 +217,7 @@ function isSelected(date: Date | null) {
 
 function isToday(date: Date | null) {
 	if (!date) return false
-	return date.toISOString().split('T')[0] === new Date().toISOString().split('T')[0]
+	return time.dateIsToday(date)
 }
 
 const timezoneDisplay = $computed(() => {
@@ -200,6 +231,10 @@ const timezoneDisplay = $computed(() => {
 		return 'UTC'
 	}
 })
+
+function isNotInMonth(date: Date) {
+	return time.isTrailingOrLeadingDate(date, currentMonth.getMonth())
+}
 </script>
 
 <template>
@@ -209,153 +244,151 @@ const timezoneDisplay = $computed(() => {
 			<span v-if="required" class="required">*</span>
 		</label>
 
-		<VDropdown
+		<Dropdown
 			: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>
-
-			<template #popper>
-				<div
-					class="
-			 flex gap-075 p-05 m_flex-wrap calendar-container justify-content-center h-100p"
-				>
-					<div class="calendar-section border-end m_border-none pe-05 m_p-0">
-						<div class="flex space-between pb-1">
-							<template v-if="currentView === 'days'">
-								<Btn flat icon="chevron_left" @click="previousMonth" />
-								<div class="flex gap-05">
-									<Btn flat class="month-btn" @click="currentView = 'months'">
-										{{ currentMonthValue.formatted.month }}
-									</Btn>
-									<Btn flat class="year-btn" @click="currentView = 'years'">
-										{{ currentMonthValue.formatted.year }}
-									</Btn>
-								</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>
+			<template #trigger>
+				<div class="date-picker-container">
+					<input
+						type="text"
+						:value="formattedDisplayValue"
+						:min="formattedMin"
+						:max="formattedMax"
+						:required="required"
+						:disabled="!editMode"
+						class="date-input"
+						readonly
+						@click="isOpen = true"
+					>
+				</div>
+			</template>
 
-						<div v-if="currentView === 'days'" class="calendar-grid grid gap-025">
-							<div
-								v-for="day in ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']" :key="day" class=" txt-center
-							txt-12 opacity-6"
-							>
-								{{ day }}
+			<div class="flex gap-075 p-05 m_flex-wrap calendar-container justify-content-center h-100p">
+				<div class="calendar-section m_border-none pe-05 m_p-0">
+					<div class="flex space-between pb-1">
+						<template v-if="currentView === 'days'">
+							<Btn flat icon="chevron_left" @click="previousMonth" />
+							<div class="flex gap-05">
+								<Btn flat class="month-btn" @click="currentView = 'months'">
+									{{ currentMonthValue.formatted.month }}
+								</Btn>
+								<Btn flat class="year-btn" @click="currentView = 'years'">
+									{{ currentMonthValue.formatted.year }}
+								</Btn>
 							</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>
 
-							<button
-								v-for="(date, index) in currentMonthDays"
-								:key="index"
-								type="button"
-								class="day aspect-ratio-1 flex align-items-center justify-content-center pointer round txt14 p-0"
-								:class="{
-									selected: isSelected(date),
-									today: isToday(date),
-									disabled: isDateDisabled(date),
-								}"
-								:disabled="isDateDisabled(date)"
-								@click="selectDate(date)"
-							>
-								{{ date?.getDate() }}
-							</button>
+					<div v-if="currentView === 'days'" class="calendar-grid grid gap-025">
+						<div
+							v-for="day in weekDays"
+							:key="day"
+							class="txt-center txt-12 opacity-6"
+						>
+							{{ day }}
 						</div>
 
-						<div v-else-if="currentView === 'months'" class="month-grid grid gap-05 p-05">
-							<button
-								v-for="month in months"
-								:key="month.value"
-								class="month-item flex align-items-center justify-content-center pointer rounded p-05 txt14 border-none "
-								:class="{
-									selected: month.value === currentMonthValue.month,
-									disabled: month.disabled,
-								}"
-								:disabled="month.disabled"
-								@click="selectMonth(month.value)"
-							>
-								{{ month.name }}
-							</button>
-						</div>
+						<button
+							v-for="date in currentMonthDays"
+							:key="date?.toISOString()"
+							type="button"
+							class="day aspect-ratio-1 flex align-items-center justify-content-center pointer round txt14 p-0"
+							:class="{
+								'selected': isSelected(date),
+								'today': isToday(date),
+								'disabled': isDateDisabled(date),
+								'not-in-month': isNotInMonth(date),
+							}"
+							:disabled="isDateDisabled(date)"
+							@click="selectDate(date)"
+						>
+							{{ date?.getDate() }}
+						</button>
+					</div>
 
-						<div v-else class="year-grid grid gap-05 p-0">
-							<button
-								v-for="year in years"
-								:key="year.value"
-								class="year-item flex align-items-center justify-content-center pointer rounded p-05 txt14 border-none"
-								:class="{
-									selected: year.value === currentMonthValue.year,
-									disabled: year.disabled,
-								}"
-								:disabled="year.disabled"
-								@click="selectYear(year.value)"
-							>
-								{{ year.value }}
-							</button>
-						</div>
+					<div v-else-if="currentView === 'months'" class="month-grid grid gap-05 p-05">
+						<button
+							v-for="month in months"
+							:key="month.value"
+							class="month-item flex align-items-center justify-content-center pointer rounded p-05 txt14 border-none"
+							:class="{
+								selected: month.value === currentMonthValue.month,
+								disabled: month.disabled,
+							}"
+							:disabled="month.disabled"
+							@click="selectMonth(month.value)"
+						>
+							{{ month.name }}
+						</button>
 					</div>
 
-					<div v-if="enableTime && currentView === 'days'" class="time-picker flex column gap-1 w-120px">
-						<div class="flex gap-025 ">
-							<NumberInput
-								center
-								:model-value="hours"
-								:disabled="!selectedDate"
-								:min="0"
-								:max="23"
-								layout="vertical"
-								:padZero="2"
-								@update:model-value="handleHourInput"
-							/>
-							<p class="pb-075">
-								:
-							</p>
-							<NumberInput
-								center
-								:model-value="minutes"
-								:disabled="!selectedDate"
-								:min="0"
-								:max="59"
-								:padZero="2"
-								layout="vertical"
-								@update:model-value="handleMinuteInput"
-							/>
-						</div>
-						<span class="txt-center opacity-6 txt14">{{ timezoneDisplay }}</span>
-						<Btn v-if="selectedDate" flat @click="isOpen = false">
-							Done
-						</Btn>
+					<div v-else class="year-grid grid gap-05 p-0">
+						<button
+							v-for="year in years"
+							:key="year.value"
+							class="year-item flex align-items-center justify-content-center pointer rounded p-05 txt14 border-none"
+							:class="{
+								selected: year.value === currentMonthValue.year,
+								disabled: year.disabled,
+							}"
+							:disabled="year.disabled"
+							@click="selectYear(year.value)"
+						>
+							{{ year.value }}
+						</button>
 					</div>
 				</div>
-			</template>
-		</VDropdown>
+
+				<div v-if="enableTime && currentView === 'days'" class="time-picker border-start flex column gap-1 w-120px">
+					<div class="flex gap-025">
+						<NumberInput
+							center
+							:model-value="hours"
+							:disabled="!selectedDate"
+							:min="0"
+							:max="23"
+							layout="vertical"
+							:padZero="2"
+							@update:model-value="handleHourInput"
+						/>
+						<p class="pb-075">
+							:
+						</p>
+						<NumberInput
+							center
+							:model-value="minutes"
+							:disabled="!selectedDate"
+							:min="0"
+							:max="59"
+							:padZero="2"
+							layout="vertical"
+							@update:model-value="handleMinuteInput"
+						/>
+					</div>
+					<span class="txt-center opacity-6 txt14">{{ timezoneDisplay }}</span>
+					<Btn v-if="selectedDate" flat @click="isOpen = false">
+						Done
+					</Btn>
+				</div>
+			</div>
+		</Dropdown>
 	</div>
 </template>
 
 <style scoped>
-.calendar-container{
+.calendar-container {
 	max-width: 90vw;
 }
+
 .calendar-section {
 	min-width: 280px;
 }
@@ -383,13 +416,13 @@ const timezoneDisplay = $computed(() => {
 .month-item:hover:not(.disabled),
 .year-item:hover:not(.disabled) {
 	background: var(--bgl-box-bg);
-	filter:var(--bgl-hover-filter);
+	filter: var(--bgl-hover-filter);
 }
 
 .month-item:active:not(.disabled),
 .year-item:active:not(.disabled) {
 	background: var(--bgl-box-bg);
-	filter:var(--bgl-active-filter);
+	filter: var(--bgl-active-filter);
 }
 
 .month-item.selected,
@@ -424,8 +457,12 @@ const timezoneDisplay = $computed(() => {
 }
 
 .day.disabled {
-  opacity: 0.6;
-  filter: grayscale(0.3);
-  cursor: not-allowed;
+	opacity: 0.6;
+	filter: grayscale(0.3);
+	cursor: not-allowed;
+}
+
+.day.not-in-month {
+	opacity: 0.4;
 }
 </style>

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

@@ -101,10 +101,8 @@ function formatNumber(num: number) {
 let formattedValue = $ref('')
 function inputHandler() {
 	let numeric = formattedValue.replace(/[^\d.-]/g, '')
-	if (numeric === '-.' || numeric.endsWith('.')) return
 	const emptyValue = ['', '-', '.'].includes(numeric)
-
-	if (emptyValue) numeric = `${min}`
+	if (numeric === '-.' || numeric.endsWith('.') || emptyValue) return
 
 	numberValue = Number.parseFloat(numeric)
 	formattedValue = emptyValue ? '' : formatNumber(numberValue)

package/src/components/index.ts

@@ -7,12 +7,14 @@ export { default as Badge } from './Badge.vue'
 export { default as BglComponent } from './BglComponent.vue'
 export { default as BglVideo } from './BglVideo.vue'
 export { default as Btn } from './Btn.vue'
+// export { default as CalendarExample } from './Calendar/CalendarExample.vue'
+export { default as Calendar } from './Calendar/Index.vue'
 export { default as Card } from './Card.vue'
 export { default as Carousel } from './Carousel.vue'
 export * from './dashboard'
 export { default as DataPreview } from './DataPreview.vue'
 export { default as DataTable } from './DataTable/DataTable.vue'
-/** @deprecated Use DataTable instead of TableSchema. They are the same component. */
+/** @deprecated Use DataTable instead. TableSchema is an alias that will be removed in a future version. */
 export { default as TableSchema } from './DataTable/DataTable.vue'
 export { Draggable, useDraggable, vDraggable } from './Draggable'
 export { default as Dropdown } from './Dropdown.vue'
@@ -24,7 +26,6 @@ export { default as IframeVue } from './IframeVue.vue'
 export { default as Image } from './Image.vue'
 export * from './layout'
 export { default as ListItem } from './ListItem.vue'
-
 export { default as ListView } from './ListView.vue'
 export { default as Loading } from './Loading.vue'
 export { default as MapEmbed } from './MapEmbed.vue'
@@ -33,13 +34,9 @@ export { default as ModalConfirm } from './ModalConfirm.vue'
 export { default as ModalForm } from './ModalForm.vue'
 export { default as NavBar } from './NavBar.vue'
 export { default as PageTitle } from './PageTitle.vue'
-
 export { default as Pill } from './Pill.vue'
 export { default as RouterWrapper } from './RouterWrapper.vue'
-
 export { default as Title } from './Title.vue'
 export { default as ToolBar } from './ToolBar.vue'
-
 export { default as TopBar } from './TopBar.vue'
-
 export { default as Zoomer } from './Zoomer.vue'

package/src/directives/index.ts

@@ -1,2 +1,4 @@
 export { default as pattern } from './pattern'
 export { default as ripple } from './ripple'
+export { vResize } from './vResize'
+export type { ResizeEvent, ResizeOptions } from './vResize'