@bagelink/vue 1.2.25 → 1.2.39

package/src/components/calendar/views/WeekView.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { SetupContext } from 'vue'
 import type { CalendarEvent, WeekStart } from '../CalendarTypes'
 import type { PopoverState } from '../utils'
-import { Card, formatDate } from '@bagelink/vue'
+import { Card, fmtDate } from '@bagelink/vue'
 import { ref, computed, onMounted, onUnmounted, useSlots } from 'vue'
 import {
 	openPopover as openPopoverUtil,
@@ -32,7 +33,7 @@ const emit = defineEmits<{
 	(e: 'eventCreate', event: { start_time: Date, end_time: Date }): void
 }>()
 
-const slots = useSlots()
+const slots: SetupContext['slots'] = useSlots()
 
 // Configuration constants
 const slotHeight = 60
@@ -128,7 +129,7 @@ const processedEvents = computed(() => {
 			top,
 			height,
 			left: 0,
-			width: 95,
+			width: 100,
 			overlappingEvents: 0,
 			position: 0
 		}
@@ -274,7 +275,7 @@ onUnmounted(() => {
 				v-for="day in weekDays" :key="day.toISOString()"
 				class="day-header p-05 txt-center"
 			>
-				{{ formatDate(day, 'DDD') }}
+				{{ fmtDate(day, { fmt: 'DDD' }) }}
 				<span
 					class="txt-12 round p-025"
 					:class="{
@@ -282,7 +283,7 @@ onUnmounted(() => {
 						'bg-primary color-white': day.toDateString() === new Date().toDateString(),
 					}"
 				>
-					{{ formatDate(day, 'DD') }}
+					{{ fmtDate(day, { fmt: 'DD' }) }}
 				</span>
 			</div>
 		</div>
@@ -316,12 +317,12 @@ onUnmounted(() => {
 							}"
 							@click.stop="slots.eventContent ? openPopover(event, $event) : emit('eventClick', event)"
 						>
-							<div class="overflow-hidden color-text-light p-025 txt12 h-100p">
+							<div class="overflow-hidden color-white p-025 txt12 h-100p">
 								<div class="white-space ellipsis-1">
 									{{ event.title }}
 								</div>
 								<div class="txt10 opacity-8">
-									{{ formatDate(event.start_time, 'HH:mm') }}
+									{{ fmtDate(event.start_time, { fmt: 'HH:mm' }) }}
 								</div>
 							</div>
 						</div>
@@ -348,11 +349,11 @@ onUnmounted(() => {
 			ref="popoverRef"
 			v-click-outside="closePopover"
 			thin
-			class="custom-popover fixed z-999 radius-05 bg-white w350"
+			class="custom-popover fixed z-999 radius-1 bg-white "
 			:style="{
 				top: `${popoverPosition.top}px`,
 				left: `${popoverPosition.left}px`,
-				maxWidth: `${popoverPosition.width}px`,
+
 			}"
 		>
 			<slot name="eventContent" :event="activeEvent" />

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ModeType } from '../../../utils/calendar/typings'
-import { TextInput, Dropdown, formatDate } from '@bagelink/vue'
+import { TextInput, Dropdown, fmtDate } from '@bagelink/vue'
 import { onClickOutside } from '@vueuse/core'
 import { ref, onMounted } from 'vue'
 import { WEEK_START_DAY } from '../../../utils/calendar/time'
@@ -47,7 +47,7 @@ const isOpen = ref(false)
 function useFormatting() {
 	const formatDisplayDate = (date: Date | string | undefined): string => {
 		if (!date) return ''
-		return formatDate(date, props.enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY')
+		return fmtDate(date, { fmt: props.enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY' })
 	}
 
 	const parseUserInput = (input: string): Date | null => {
@@ -150,7 +150,7 @@ onMounted(() => {
 <template>
 	<div class="bagel-input" :class="{ small }" :title="label" @focusin="handleFocus">
 		<label v-if="label">
-			{{ label }}
+			<!-- {{ label }} -->
 			<span v-if="required" class="required">*</span>
 		</label>
 		<Dropdown
@@ -163,7 +163,7 @@ onMounted(() => {
 				<div ref="datePickerRef" class="date-picker-container" @mousedown.stop @click.stop>
 					<TextInput
 						:modelValue="formatDisplayDate(selectedDate)"
-						icon="calendar"
+						iconStart="calendar"
 						:min="formatDisplayDate(min)"
 						:max="formatDisplayDate(max)"
 						:required="required"
@@ -196,8 +196,17 @@ onMounted(() => {
 	</div>
 </template>
 
-<style scoped>
+<style>
 .date-picker-container {
 	width: 100%;
 }
+.date-picker-container .date-input{
+	--input-bg: transparent;
+	--input-font-size: 12px;
+	opacity: 0.6;
+	--input-height: 20px;
+}
+.date-picker-container .date-input .bagel-input input{
+	padding: 0 !important;
+}
 </style>

package/src/utils/calendar/dateUtils.ts

@@ -1,3 +1,4 @@
+import type { DateLike } from '@vueuse/core'
 import type { AvailableTimeLanguages, DateTimeAcceptedFormats, LanguageTranslations, TimeUnit } from '../../types/timeAgoT'
 
 interface TimeDeltaOptions {
@@ -157,9 +158,9 @@ function getBrowserNavigatorLocale(): string {
  * @param timeZone The timezone to use (e.g., 'UTC', 'America/New_York')
  * @returns Date parts with timezone adjustment applied
  */
-export function handleTimezone(date: Date, timeZone: string): Date {
+export function handleTimezone(date: Date, locale: Intl.LocalesArgument, intFmtOpt: Intl.DateTimeFormatOptions): Date {
 	// If timeZone is UTC, convert to UTC directly
-	if (timeZone === 'UTC') {
+	if (intFmtOpt.timeZone === 'UTC') {
 		const utcDate = new Date(date.getTime())
 		utcDate.setMinutes(utcDate.getMinutes() + date.getTimezoneOffset())
 		return utcDate
@@ -168,16 +169,7 @@ export function handleTimezone(date: Date, timeZone: string): Date {
 	// For other timezones, use the Intl API
 	try {
 		// Get the target timezone's offset at this specific date
-		const formatter = new Intl.DateTimeFormat('en-US', {
-			timeZone,
-			timeZoneName: 'short',
-			year: 'numeric',
-			month: 'numeric',
-			day: 'numeric',
-			hour: 'numeric',
-			minute: 'numeric',
-			second: 'numeric',
-		})
+		const formatter = new Intl.DateTimeFormat(locale, intFmtOpt)
 
 		// Format the date in the target timezone
 		const formattedParts = formatter.formatToParts(date)
@@ -202,14 +194,15 @@ export function handleTimezone(date: Date, timeZone: string): Date {
 
 		return adjustedDate
 	} catch (error) {
-		console.warn(`Error handling timezone ${timeZone}:`, error)
+		console.warn(`Error handling timezone ${intFmtOpt.timeZone}:`, error)
 		return date // Return original date on error
 	}
 }
 
-export function getDatePartsMap(date: Date, locale: Intl.LocalesArgument, timeZone?: string) {
+export function getDatePartsMap(date: Date, locale: Intl.LocalesArgument, intFmtOpt?: Intl.DateTimeFormatOptions) {
 	// Apply timezone adjustment if specified
-	const d = timeZone ? handleTimezone(date, timeZone) : date
+	const d = intFmtOpt?.timeZone ? handleTimezone(date, locale, intFmtOpt) : date
+	// const d = date
 
 	/// keep-sorted
 	return {
@@ -241,36 +234,33 @@ const _orderedDateTokens = (
 // ? no longer creating the Regex Objs it in a loop
 const _tokenRegExPattern = new RegExp(_orderedDateTokens.map(token => token).join('|'), 'g')
 
-export type FormatDateFn = (
-	date?: string | Date,
-	format?: DateTimeAcceptedFormats,
-	locale?: string,
-	timeZone?: string
-) => string
-
-export type FormatDateFnParams = Parameters<FormatDateFn>
-export type FormatDateFnReturn = ReturnType<FormatDateFn>
-
-export interface FormatDateOptions {
-	date?: FormatDateFnParams[0]
-	format?: FormatDateFnParams[1]
-	locale?: FormatDateFnParams[2]
-	timeZone?: FormatDateFnParams[3]
+export interface FormatDateOptions extends Partial<Pick<Intl.DateTimeFormatOptions, 'hour12'>> {
+	fmt?: DateTimeAcceptedFormats
+	locale?: Intl.LocalesArgument
+	tz?: string
 }
+/**
+ * Formats a date based on the provided format string, locale, and timezone.
+ * @param date The date to format (string or Date object).
+ * @param opts Options for formatting the date.
+ * @param opts.fmt The format string (default is 'DD.MM.YY').
+ * @param opts.locale The locale to use for formatting (default is browser's locale).
+ * @param opts.tz The timezone to use for formatting (default is local timezone).
+ * @returns Formatted date string.
+ */
+export function formatDate(
+	date?: DateLike,
+	opts: FormatDateOptions = {},
+): string {
+	let { fmt: format, locale, tz: timeZone, ...rest } = opts
 
-export const formatDate: FormatDateFn = (
-	date,
-	format,
-	locale,
-	timeZone,
-) => {
 	if (!date) return ''
 	format = format || 'DD.MM.YY'
 
 	locale = locale || getBrowserNavigatorLocale()
 	try {
 		// Validate the date
-		const d = typeof date === 'string' ? new Date(date) : date
+		const d = typeof date === 'string' || typeof date === 'number' ? new Date(date) : date
 
 		// Check if date is valid
 		if (Number.isNaN(d.getTime())) {
@@ -278,24 +268,29 @@ export const formatDate: FormatDateFn = (
 			return ''
 		}
 
-		const datePartsMap = getDatePartsMap(d, locale, timeZone)
-
 		// For more complex formats that need localization, use Intl.DateTimeFormat
 		/// keep-sorted
-		const formatter = new Intl.DateTimeFormat(locale, {
+		const intFmtOpt: Intl.DateTimeFormatOptions = {
 			day: 'numeric',
 			hour: '2-digit',
-			hour12: true,
+
+			// Set default hour12 to true if not explicitly set
+			// hour12: true,
+			hour12: rest.hour12 === undefined ? true : rest.hour12,
 			minute: '2-digit',
 			month: 'long',
 			second: '2-digit',
 			timeZone, // Add timeZone if provided
 			weekday: 'long',
 			year: 'numeric',
-		})
+		}
+
+		const datePartsMap = getDatePartsMap(d, locale, intFmtOpt)
+
+		const formatter = new Intl.DateTimeFormat(locale, intFmtOpt)
 
 		const formattedParts = formatter.formatToParts(d)
-		const partsMap: Record<string, string> = {}
+		const partsMap: Partial<Record<Intl.DateTimeFormatPartTypes, string>> = {}
 
 		formattedParts.forEach((part) => {
 			if (part.type !== 'literal') {
@@ -328,8 +323,4 @@ export const formatDate: FormatDateFn = (
 		return ''
 	}
 }
-
-export function fmtDate(opts: FormatDateOptions): FormatDateFnReturn {
-	const { date, format, locale, timeZone } = opts
-	return formatDate(date, format, locale, timeZone)
-}
+export const fmtDate = formatDate