@bagelink/vue 1.1.1 → 1.1.7-beta.1

package/dist/types/timeago.d.ts

@@ -0,0 +1,23 @@
+export interface TimeUnit {
+    singular: string;
+    plural: string;
+}
+export type TranslationValue = string | TimeUnit;
+export interface LanguageTranslations {
+    [key: string]: TranslationValue;
+}
+export type AvailableTimeLanguages = 'en' | 'es' | 'fr' | 'he';
+export type DayFormatTypes = 'DD' | 'DDD' | 'DDDD';
+export type MonthFormatTypes = 'MM' | 'MMM' | 'MMMM';
+export type YearFormatTypes = 'YY' | 'YYYY';
+export type HourFormatTypes = 'HH';
+export type MinuteFormatTypes = 'mm';
+export type SecondFormatTypes = 'ss';
+export type MillisecondFormatTypes = 'sss';
+export type AmPmFormatTypes = 'AmPm';
+export type DateFormatSeparatorTypes = '/' | '-' | ' ' | ':' | '.';
+export type CommonDateFormats = `${DayFormatTypes}${DateFormatSeparatorTypes}${MonthFormatTypes}${DateFormatSeparatorTypes}${YearFormatTypes}` | 'DD.MM.YY' | 'DD.MM.YYYY' | 'DD/MM/YY' | 'DD/MM/YYYY' | 'MM.DD.YY' | 'MM.DD.YYYY' | 'MM/DD/YY' | 'MM/DD/YYYY' | 'YYYY-MM-DD' | 'YY-MM-DD' | 'DD MMM YYYY' | 'DD MMMM YYYY' | 'DDD, DD MMM' | 'DDDD, DD MMMM' | 'MMM DD' | 'MMMM DD';
+export type CommonTimeFormats = 'HH:mm' | 'HH:mm:ss' | 'HH:mm:ss:sss' | 'HH:MM' | 'HH:mm AmPm';
+export type CommonDateTimeFormats = `${CommonDateFormats} ${CommonTimeFormats}` | `${CommonTimeFormats}, ${CommonDateFormats}` | 'YYYY-MM-DD HH:MM';
+export type DateTimeAcceptedFormats = CommonDateFormats | CommonTimeFormats | CommonDateTimeFormats;
+//# sourceMappingURL=timeago.d.ts.map

package/dist/types/timeago.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeago.d.ts","sourceRoot":"","sources":["../../src/types/timeago.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACd;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,CAAA;AAEhD,MAAM,WAAW,oBAAoB;IACpC,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAA;CAC/B;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE9D,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAA;AAClD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAA;AACpD,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,MAAM,CAAA;AAC3C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAA;AAClC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAA;AACpC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAA;AACpC,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAA;AAC1C,MAAM,MAAM,eAAe,GAAG,MAAM,CAAA;AAEpC,MAAM,MAAM,wBAAwB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;AAGlE,MAAM,MAAM,iBAAiB,GAC1B,GAAG,cAAc,GAAG,wBAAwB,GAAG,gBAAgB,GAAG,wBAAwB,GAAG,eAAe,EAAE,GAC9G,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GACrD,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GACrD,YAAY,GAAG,UAAU,GACzB,aAAa,GAAG,cAAc,GAC9B,aAAa,GAAG,eAAe,GAC/B,QAAQ,GAAG,SAAS,CAAA;AAEvB,MAAM,MAAM,iBAAiB,GAC1B,OAAO,GAAG,UAAU,GAAG,cAAc,GACrC,OAAO,GACP,YAAY,CAAA;AAGf,MAAM,MAAM,qBAAqB,GAC9B,GAAG,iBAAiB,IAAI,iBAAiB,EAAE,GAC3C,GAAG,iBAAiB,KAAK,iBAAiB,EAAE,GAC5C,kBAAkB,CAAA;AAGrB,MAAM,MAAM,uBAAuB,GAChC,iBAAiB,GACjB,iBAAiB,GACjB,qBAAqB,CAAA"}

package/dist/utils/timeAgo.d.ts

@@ -1,5 +1,4 @@
-type AvailableTimeLanguages = 'en' | 'es' | 'fr' | 'he';
+import { AvailableTimeLanguages, DateTimeAcceptedFormats } from '../types/timeago';
 export declare function timeAgo(date: string | Date, lang?: AvailableTimeLanguages): string;
-export declare function formatDate(date?: string | Date, format?: string, locale?: string): string;
-export {};
+export declare function formatDate(date?: string | Date, format?: DateTimeAcceptedFormats, locale?: string): string;
 //# sourceMappingURL=timeAgo.d.ts.map

package/dist/utils/timeAgo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timeAgo.d.ts","sourceRoot":"","sources":["../../src/utils/timeAgo.ts"],"names":[],"mappings":"AAWA,KAAK,sBAAsB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAqDvD,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,GAAE,sBAA6B,UAsD/E;AASD,wBAAgB,UAAU,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,GAAE,MAAmB,EAAE,MAAM,CAAC,EAAE,MAAM,UAiF5F"}
+{"version":3,"file":"timeAgo.d.ts","sourceRoot":"","sources":["../../src/utils/timeAgo.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,uBAAuB,EAAkC,MAAM,kBAAkB,CAAA;AAqDvH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,GAAE,sBAA6B,UAsD/E;AASD,wBAAgB,UAAU,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,GAAE,uBAAoC,EAAE,MAAM,CAAC,EAAE,MAAM,UAsF7G"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.1.1",
+  "version": "1.1.7-beta.1",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -83,10 +83,10 @@
   "dependencies": {
     "date-fns": "^4.1.0",
     "@vueuse/core": "^13.0.0",
-    "axios": "^1.8.2",
+    "axios": "^1.8.3",
     "floating-vue": "^5.2.2",
-    "libphonenumber-js": "1.12.5",
-    "signature_pad": "^5.0.4"
+    "libphonenumber-js": "1.12.6",
+    "signature_pad": "^5.0.6"
   },
   "scripts": {
     "dev": "tsx watch src/index.ts",

package/src/components/calendar/Index.vue

@@ -4,7 +4,7 @@ import type { ConfigInterface } from './typings/config.interface'
 import type { DayInterface } from './typings/interfaces/day.interface'
 import type { EventInterface } from './typings/interfaces/event.interface'
 import type { PeriodInterface } from './typings/interfaces/period.interface'
-import type { modeType } from './typings/types'
+import type { ModeType } from './typings/types'
 import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
 import AppHeader from './components/header/Header.vue'
 import AgendaEvents from './components/month/AgendaEvents.vue'
@@ -52,7 +52,7 @@ const period = ref({
 	end: new Date(),
 	selectedDate: props.selectedDate,
 })
-const mode = ref(props.config.defaultMode || ('week' as modeType))
+const mode = ref(props.config.defaultMode || ('week' as ModeType))
 const time = ref(new Time(props.config.week?.startsOn, props.config.locale || null, {
 	start: setTimePointsFromDayBoundary(props.config.dayBoundaries?.start || 0),
 	end: setTimePointsFromDayBoundary(props.config.dayBoundaries?.end || 24),
@@ -107,7 +107,7 @@ function handleUpdatedPeriod(
 	if (leaveMonthMode) mode.value = 'day'
 }
 
-function handleChangeMode(payload: modeType) {
+function handleChangeMode(payload: ModeType) {
 	if (payload === 'day') {
 		period.value.start = period.value.selectedDate
 		period.value.end = time.value.setDateToEndOfDay(period.value.selectedDate)

package/src/components/calendar/components/header/Header.vue

@@ -3,7 +3,7 @@ import type { PropType } from 'vue'
 import type Time from '../../helpers/Time'
 import type { ConfigInterface } from '../../typings/config.interface'
 import type { PeriodInterface } from '../../typings/interfaces/period.interface'
-import type { modeType } from '../../typings/types'
+import type { ModeType } from '../../typings/types'
 
 import { DatePick, TabsNav, Btn } from '@bagelink/vue'
 import { ref, computed, watch } from 'vue'
@@ -15,7 +15,7 @@ const props = defineProps({
 		default: () => ({}),
 	},
 	mode: {
-		type: String as PropType<modeType>,
+		type: String as PropType<ModeType>,
 		default: 'week',
 	},
 	time: {
@@ -33,13 +33,13 @@ const props = defineProps({
 })
 
 const emit = defineEmits<{
-	(e: 'changeMode', mode: modeType): void
+	(e: 'changeMode', mode: ModeType): void
 	(e: 'updatedPeriod', value: PeriodInterface): void
 }>()
 
 const periodSelect = ref<InstanceType<typeof DatePick>>()
 const currentPeriod = ref(props.period)
-const modeOptions = ref<modeType[]>(['month', 'week', 'day', 'agenda'])
+const modeOptions = ref<ModeType[]>(['month', 'week', 'day', 'agenda'])
 
 // const icons = {
 // 	chevronLeft: 'chevron_left',

package/src/components/calendar/components/week/Day.vue

@@ -5,7 +5,7 @@ import type Time from '../../helpers/Time'
 import type { ConfigInterface, DayIntervalsType } from '../../typings/config.interface'
 import type { DayInterface } from '../../typings/interfaces/day.interface'
 import type { EventInterface } from '../../typings/interfaces/event.interface'
-import type { DayInfo, modeType } from '../../typings/types'
+import type { DayInfo, ModeType } from '../../typings/types'
 import { ref, computed, onMounted } from 'vue'
 import DayIntervals from '../../helpers/DayIntervals'
 import EventConcurrency from '../../helpers/EventConcurrency'
@@ -29,7 +29,7 @@ const props = defineProps({
 		required: true,
 	},
 	mode: {
-		type: String as PropType<modeType>,
+		type: String as PropType<ModeType>,
 		required: true,
 	},
 	dayIntervals: {

package/src/components/calendar/components/week/DayEvent.vue

@@ -3,7 +3,7 @@ import type { PropType } from 'vue'
 import type Time from '../../helpers/Time'
 import type { ConfigInterface } from '../../typings/config.interface'
 import type { EventInterface } from '../../typings/interfaces/event.interface'
-import type { DayInfo, modeType } from '../../typings/types'
+import type { DayInfo, ModeType } from '../../typings/types'
 import { Icon } from '@bagelink/vue'
 
 import { ref, computed, onMounted, watch } from 'vue'
@@ -30,7 +30,7 @@ const props = defineProps({
 		required: true,
 	},
 	mode: {
-		type: String as PropType<modeType>,
+		type: String as PropType<ModeType>,
 		required: true,
 	},
 })

package/src/components/calendar/components/week/FullDayEvent.vue

@@ -2,7 +2,7 @@
 import type { PropType } from 'vue'
 import type { ConfigInterface } from '../../typings/config.interface'
 import type { EventInterface } from '../../typings/interfaces/event.interface'
-import type { modeType } from '../../typings/types'
+import type { ModeType } from '../../typings/types'
 import { computed, onMounted, ref } from 'vue'
 import { EVENT_COLORS } from '../../constants'
 
@@ -20,7 +20,7 @@ const props = defineProps({
 		required: true,
 	},
 	mode: {
-		type: String as PropType<modeType>,
+		type: String as PropType<ModeType>,
 		required: true,
 	},
 })

package/src/components/calendar/components/week/Week.vue

@@ -6,7 +6,7 @@ import type { DayInterface } from '../../typings/interfaces/day.interface'
 import type { EventInterface } from '../../typings/interfaces/event.interface'
 import type { FullDayEventsWeek } from '../../typings/interfaces/full-day-events-week.type'
 import type { PeriodInterface } from '../../typings/interfaces/period.interface'
-import type { modeType } from '../../typings/types'
+import type { ModeType } from '../../typings/types'
 import { ref, computed, onMounted, watch, useSlots } from 'vue'
 import EventPosition from '../../helpers/EventPosition'
 import { EventsFilter } from '../../helpers/EventsFilter'
@@ -32,7 +32,7 @@ const props = defineProps({
 		required: true,
 	},
 	modeProp: {
-		type: String as PropType<modeType>,
+		type: String as PropType<ModeType>,
 		default: 'week',
 	},
 	time: {
@@ -55,7 +55,7 @@ const emit = defineEmits([
 const eventPosition = new EventPosition()
 
 const days = ref<DayInterface[]>([])
-const mode = ref<modeType>(props.modeProp)
+const mode = ref<ModeType>(props.modeProp)
 const selectedEvent = ref<EventInterface | null>(null)
 const selectedEventElement = ref<any | null>(null)
 const events = ref<EventInterface[]>(props.eventsProp)
@@ -187,7 +187,7 @@ function setDay() {
 	}
 }
 
-function setInitialEvents(currentMode: modeType) {
+function setInitialEvents(currentMode: ModeType) {
 	if (currentMode === 'day') setDay()
 	if (currentMode === 'week') setDays()
 

package/src/components/calendar/components/week/WeekTimeline.vue

@@ -3,7 +3,7 @@ import type Time from '../../helpers/Time'
 import type { ConfigInterface } from '../../typings/config.interface'
 import type { DayInterface } from '../../typings/interfaces/day.interface'
 import type { DayWithFullDayEvents } from '../../typings/interfaces/full-day-events-week.type'
-import type { modeType } from '../../typings/types'
+import type { ModeType } from '../../typings/types'
 import { ref, defineEmits } from 'vue'
 import FullDayEvent from './FullDayEvent.vue'
 
@@ -12,7 +12,7 @@ const props = defineProps<{
 	time: Time
 	fullDayEvents: DayWithFullDayEvents[]
 	config: ConfigInterface
-	mode: modeType
+	mode: ModeType
 }>()
 
 const emit = defineEmits<{

package/src/components/calendar/models/Event.ts

@@ -1,5 +1,5 @@
 import type { EventColor, EventID, EventInterface } from '../typings/interfaces/event.interface'
-import type { modeType } from '../typings/types'
+import type { ModeType } from '../typings/types'
 
 export class EventImpl implements EventInterface {
 	title?: string
@@ -10,9 +10,9 @@ export class EventImpl implements EventInterface {
 	colorScheme?: string
 	color?: EventColor
 	isEditable?: boolean
-	disableDnD?: modeType[]
-	disableResize?: modeType[]
-	isCustom?: boolean | modeType[]
+	disableDnD?: ModeType[]
+	disableResize?: ModeType[]
+	isCustom?: boolean | ModeType[]
 
 	// Properties that should not be set from outside Calendar
 	nOfPreviousConcurrentEvents?: number
@@ -92,19 +92,19 @@ export class EventBuilder {
 		return this
 	}
 
-	withIsCustom(isCustom: boolean | modeType[]) {
+	withIsCustom(isCustom: boolean | ModeType[]) {
 		this.eventImpl.isCustom = isCustom
 
 		return this
 	}
 
-	withDisableDnD(disableDnD: modeType[]) {
+	withDisableDnD(disableDnD: ModeType[]) {
 		this.eventImpl.disableDnD = disableDnD
 
 		return this
 	}
 
-	withDisableResize(disableResize: modeType[]) {
+	withDisableResize(disableResize: ModeType[]) {
 		this.eventImpl.disableResize = disableResize
 
 		return this

package/src/components/calendar/typings/config.interface.ts

@@ -1,5 +1,5 @@
 import type { WEEK_START_DAY } from '../helpers/Time'
-import type { modeType } from './types'
+import type { ModeType } from './types'
 
 export enum DAY_TIME_POINT {
 	MIDNIGHT = 0,
@@ -59,7 +59,7 @@ export interface ConfigInterface {
 		fontFamily?: string
 		colorSchemes?: ColorSchemes
 	}
-	defaultMode?: modeType
+	defaultMode?: ModeType
 	disableModes?: ('week' | 'month' | string)[]
 	isSilent?: boolean
 	dayIntervals?: DayIntervalsType

package/src/components/calendar/typings/interfaces/event.interface.ts

@@ -1,4 +1,4 @@
-import type { modeType } from '../types'
+import type { ModeType } from '../types'
 
 export type EventID = string | number
 
@@ -17,9 +17,9 @@ export interface EventInterface {
 	colorScheme?: string
 	color?: EventColor // Says 'color', but represents CSS-Property background-color
 	isEditable?: boolean // If true, the event has delete- and edit icons in Event-Flyout. Can also be dragged and dropped.
-	disableDnD?: modeType[] // Disable Drag and Drop for this event, in the modes specified
-	disableResize?: modeType[] // Disable Resize for this event, in the modes specified
-	isCustom?: boolean | modeType[] // If true, the event expects to be displayed using the event slot. It can also be specified as an array, of all modes, where the event should be displayed using the event slot.
+	disableDnD?: ModeType[] // Disable Drag and Drop for this event, in the modes specified
+	disableResize?: ModeType[] // Disable Resize for this event, in the modes specified
+	isCustom?: boolean | ModeType[] // If true, the event expects to be displayed using the event slot. It can also be specified as an array, of all modes, where the event should be displayed using the event slot.
 
 	// These are properties that should never be fed into the Calendar
 	// Instead, they are assigned to events, in order to for example position/style them correctly

package/src/components/calendar/typings/types.ts

@@ -9,7 +9,9 @@ export interface DOMRect {
 	y: number
 }
 
-export type modeType = 'day' | 'week' | 'month' | 'agenda'
+export type DateViewMode = 'days' | 'months' | 'years'
+
+export type ModeType = 'day' | 'week' | 'month' | 'agenda'
 
 // ! @natanelyoung PLEASE DON'T USE ENUMS 🙏🏼
 // * please see: https://tduyng.medium.com/why-you-might-be-using-enums-in-typescript-wrong-6d9c5742db5a

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

@@ -1,24 +1,25 @@
 <script setup lang="ts">
-import type { modeType } from '../../calendar/typings/types'
+import type { DateViewMode, ModeType } from '../../calendar/typings/types'
 import { Btn, NumberInput, Dropdown, TextInput, formatDate } from '@bagelink/vue'
-import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+import { computed, ref, onMounted } from 'vue'
 import Time, { WEEK_START_DAY } from '../../calendar/helpers/Time'
 
-// Types
-type ViewMode = 'days' | 'months' | 'years'
-
-// Props
 const props = withDefaults(
 	defineProps<{
 		required?: boolean
 		label?: string
 		editMode?: boolean
 		small?: boolean
+		/**
+		 * Whether to enable time selection.
+		 * @default false
+		 */
 		enableTime?: boolean
 		modelValue?: string | Date
 		min?: string | Date
 		max?: string | Date
-		mode?: modeType
+		mode?: ModeType
 		defaultValue?: string | Date
 		firstDayOfWeek?: WEEK_START_DAY
 		locale?: string
@@ -39,7 +40,7 @@ const emit = defineEmits(['update:modelValue'])
 // State
 const isOpen = ref(false)
 const currentMonth = ref(new Date())
-const currentView = ref<ViewMode>('days')
+const currentView = ref<DateViewMode>('days')
 
 // Time helper instance
 const time = new Time(props.firstDayOfWeek, props.locale)
@@ -55,7 +56,7 @@ function parseDate(value: string | Date | undefined): Date | null {
 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 formatDate(date, props.enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY')
 	}
 
 	const parseUserInput = (input: string): Date | null => {
@@ -118,8 +119,8 @@ function useDateState() {
 	const { formatDisplayDate } = useFormatting()
 
 	const formattedDisplayValue = computed(() => formatDisplayDate(props.modelValue))
-	const formattedMin = computed(() => formatDate(props.min, props.enableTime ? 'dd.mm.yy HH:MM' : 'dd.mm.yy'))
-	const formattedMax = computed(() => formatDate(props.max, props.enableTime ? 'dd.mm.yy HH:MM' : 'dd.mm.yy'))
+	const formattedMin = computed(() => formatDate(props.min, props.enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY'))
+	const formattedMax = computed(() => formatDate(props.max, props.enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY'))
 	const selectedDate = computed(() => {
 		return parseDate(props.modelValue || props.defaultValue)
 	})
@@ -280,10 +281,10 @@ function useTimeHandling() {
 function emitDateValue(date: Date) {
 	if (props.enableTime) {
 		// For dates with time, emit the date object directly
-		emit('update:modelValue', formatDate(date, 'yyyy-mm-dd HH:MM'))
+		emit('update:modelValue', formatDate(date, 'YYYY-MM-DD HH:MM'))
 	} else {
 		// For date-only, emit a date with time set to midnight
-		emit('update:modelValue', formatDate(date, 'yyyy-mm-dd'))
+		emit('update:modelValue', formatDate(date, 'YYYY-MM-DD'))
 	}
 }
 
@@ -382,17 +383,10 @@ onMounted(() => {
 		)
 	}
 
-	const handleDocumentClick = (e: MouseEvent) => {
-		const target = e.target as HTMLElement
-		if (!datePickerRef.value?.contains(target) && !calendarRef.value?.contains(target)) {
-			isOpen.value = false
-		}
-	}
-
-	document.addEventListener('click', handleDocumentClick)
-
-	onBeforeUnmount(() => {
-		document.removeEventListener('click', handleDocumentClick)
+	onClickOutside(datePickerRef.value, () => {
+		isOpen.value = false
+	}, {
+		ignore: () => [calendarRef.value]
 	})
 })
 </script>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { modeType } from '../../calendar/typings/types'
+import type { DateViewMode, ModeType } from '../../calendar/typings/types'
 import { Btn, NumberInput, Dropdown, formatDate } from '@bagelink/vue'
 import Time, { WEEK_START_DAY } from '../../calendar/helpers/Time'
 
@@ -14,7 +14,7 @@ const props = withDefaults(
 		min?: string | Date
 		max?: string | Date
 		timezone?: string
-		mode?: modeType
+		mode?: ModeType
 		firstDayOfWeek?: WEEK_START_DAY
 		locale?: string
 		center?: boolean
@@ -34,15 +34,14 @@ const props = withDefaults(
 const emit = defineEmits(['update:modelValue'])
 let isOpen = $ref(false)
 let currentMonth = $ref(new Date())
-type ViewMode = 'days' | 'months' | 'years'
-let currentView = $ref<ViewMode>('days')
+let currentView = $ref<DateViewMode>('days')
 
 const time = new Time(props.firstDayOfWeek, props.locale)
 
 function formatDisplayDate(date: Date | string | undefined): string {
 	if (!date) return ''
 	console.log('date', date)
-	return formatDate(date, props.enableTime ? 'dd.mm.yy HH:MM' : 'dd.mm.yy', props.locale)
+	return formatDate(date, props.enableTime ? 'DD.MM.YY HH:MM' : 'DD.MM.YY', props.locale)
 }
 
 // function formatDate(date: Date | string | undefined): string {
@@ -52,8 +51,8 @@ function formatDisplayDate(date: Date | string | undefined): string {
 // }
 
 const formattedDisplayValue = $computed(() => formatDisplayDate(props.modelValue))
-const formattedMin = $computed(() => formatDate(props.min, props.enableTime ? 'dd.mm.yy HH:MM' : 'dd.mm.yy'))
-const formattedMax = $computed(() => formatDate(props.max, props.enableTime ? 'dd.mm.yy HH:MM' : 'dd.mm.yy'))
+const formattedMin = $computed(() => formatDate(props.min, props.enableTime ? 'DD.MM.YY HH:MM' : 'DD.MM.YY'))
+const formattedMax = $computed(() => formatDate(props.max, props.enableTime ? 'DD.MM.YY HH:MM' : 'DD.MM.YY'))
 
 const selectedDate = $computed(() => {
 	if (!props.modelValue) return null

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

@@ -65,7 +65,7 @@ function saveFile() {
 		// For PNG/JPG, convert base64 to blob first
 		const base64Data = data.split(',')[1]
 		const byteCharacters = atob(base64Data)
-		const byteNumbers = new Array(byteCharacters.length)
+		const byteNumbers: number[] = Array.from({ length: byteCharacters.length })
 
 		for (let i = 0; i < byteCharacters.length; i++) {
 			byteNumbers[i] = byteCharacters.charCodeAt(i)

package/src/types/timeago.ts

@@ -0,0 +1,52 @@
+export interface TimeUnit {
+	singular: string
+	plural: string
+}
+
+export type TranslationValue = string | TimeUnit
+
+export interface LanguageTranslations {
+	[key: string]: TranslationValue
+}
+
+export type AvailableTimeLanguages = 'en' | 'es' | 'fr' | 'he'
+
+export type DayFormatTypes = 'DD' | 'DDD' | 'DDDD'
+export type MonthFormatTypes = 'MM' | 'MMM' | 'MMMM'
+export type YearFormatTypes = 'YY' | 'YYYY'
+export type HourFormatTypes = 'HH'
+export type MinuteFormatTypes = 'mm'
+export type SecondFormatTypes = 'ss'
+export type MillisecondFormatTypes = 'sss'
+export type AmPmFormatTypes = 'AmPm'
+
+export type DateFormatSeparatorTypes = '/' | '-' | ' ' | ':' | '.'
+
+// Common predefined formats instead of template literals
+export type CommonDateFormats =
+	| `${DayFormatTypes}${DateFormatSeparatorTypes}${MonthFormatTypes}${DateFormatSeparatorTypes}${YearFormatTypes}`
+	| 'DD.MM.YY' | 'DD.MM.YYYY' | 'DD/MM/YY' | 'DD/MM/YYYY' // European style
+	| 'MM.DD.YY' | 'MM.DD.YYYY' | 'MM/DD/YY' | 'MM/DD/YYYY' // US style
+	| 'YYYY-MM-DD' | 'YY-MM-DD' // ISO style
+	| 'DD MMM YYYY' | 'DD MMMM YYYY' // Long format
+	| 'DDD, DD MMM' | 'DDDD, DD MMMM' // Day-focused format
+	| 'MMM DD' | 'MMMM DD' // Month-day format
+
+export type CommonTimeFormats =
+	| 'HH:mm' | 'HH:mm:ss' | 'HH:mm:ss:sss' // 24-hour format
+	| 'HH:MM' // Alternative minute format
+	| 'HH:mm AmPm' // 12-hour format
+
+// Combined date and time formats
+export type CommonDateTimeFormats =
+	| `${CommonDateFormats} ${CommonTimeFormats}`
+	| `${CommonTimeFormats}, ${CommonDateFormats}`
+	| 'YYYY-MM-DD HH:MM' // Explicit ISO-style datetime format
+
+// Final accepted format type with string fallback for custom formats
+export type DateTimeAcceptedFormats =
+	| CommonDateFormats
+	| CommonTimeFormats
+	| CommonDateTimeFormats
+	// ! | string
+	// ! no string fallback so that autocomplete works (developers should can always cast to DateTimeAcceptedFormats)

package/src/utils/timeAgo.ts

@@ -1,15 +1,4 @@
-interface TimeUnit {
-	singular: string
-	plural: string
-}
-
-type TranslationValue = string | TimeUnit
-
-interface LanguageTranslations {
-	[key: string]: TranslationValue
-}
-
-type AvailableTimeLanguages = 'en' | 'es' | 'fr' | 'he'
+import type { AvailableTimeLanguages, DateTimeAcceptedFormats, LanguageTranslations, TimeUnit } from '../types/timeago'
 
 const translations: Record<AvailableTimeLanguages, LanguageTranslations> = {
 	en: {
@@ -125,7 +114,7 @@ function getBrowserNavigatorLocale(): string {
 		: navigator.language
 }
 
-export function formatDate(date?: string | Date, format: string = 'dd.mm.yy', locale?: string) {
+export function formatDate(date?: string | Date, format: DateTimeAcceptedFormats = 'DD.MM.YY', locale?: string) {
 	if (!date) return ''
 	locale = locale || getBrowserNavigatorLocale()
 	try {
@@ -138,31 +127,34 @@ export function formatDate(date?: string | Date, format: string = 'dd.mm.yy', lo
 			return ''
 		}
 
-		// Create a map of all date parts
-		const datePartsMap: Record<string, string> = {
-			dd: String(d.getDate()).padStart(2, '0'),
-			ddd: d.toLocaleString(locale, { weekday: 'short' }),
-			dddd: d.toLocaleString(locale, { weekday: 'long' }),
-			mm: String(d.getMonth() + 1).padStart(2, '0'),
-			mmm: d.toLocaleString(locale, { month: 'short' }),
-			mmmm: d.toLocaleString(locale, { month: 'long' }),
-			yy: String(d.getFullYear()).slice(-2),
-			yyyy: String(d.getFullYear()),
+		/// keep-sorted
+		const datePartsMap = {
+			AmPm: d.toLocaleString(locale, { hour: 'numeric', hour12: true, minute: 'numeric' }).split(' ')[1],
+			DD: String(d.getDate()).padStart(2, '0'),
+			DDD: d.toLocaleString(locale, { weekday: 'short' }),
+			DDDD: d.toLocaleString(locale, { weekday: 'long' }),
 			HH: String(d.getHours()).padStart(2, '0'),
-			MM: String(d.getMinutes()).padStart(2, '0'),
-			ss: String(d.getSeconds()).padStart(2, '0')
+			mm: String(d.getMinutes()).padStart(2, '0'),
+			MM: String(d.getMonth() + 1).padStart(2, '0'),
+			MMM: d.toLocaleString(locale, { month: 'short' }),
+			MMMM: d.toLocaleString(locale, { month: 'long' }),
+			ss: String(d.getSeconds()).padStart(2, '0'),
+			sss: String(d.getMilliseconds()).padStart(3, '0'),
+			YY: String(d.getFullYear()).slice(-2),
+			YYYY: String(d.getFullYear()),
 		}
 
 		// For more complex formats that need localization, use Intl.DateTimeFormat
+		/// keep-sorted
 		const formatter = new Intl.DateTimeFormat(locale, {
-			weekday: 'long',
-			month: 'long',
 			day: 'numeric',
-			year: 'numeric',
 			hour: '2-digit',
+			hour12: true,
 			minute: '2-digit',
+			month: 'long',
 			second: '2-digit',
-			hour12: true
+			weekday: 'long',
+			year: 'numeric',
 		})
 
 		const formattedParts = formatter.formatToParts(d)
@@ -176,24 +168,26 @@ export function formatDate(date?: string | Date, format: string = 'dd.mm.yy', lo
 
 		// Add localized formats to our map
 		if (partsMap.month) {
-			datePartsMap.mmm = partsMap.month.substring(0, 3)
-			datePartsMap.mmmm = partsMap.month
+			datePartsMap.MMM = partsMap.month.substring(0, 3)
+			datePartsMap.MMMM = partsMap.month
 		}
 
 		if (partsMap.weekday) {
-			datePartsMap.ddd = partsMap.weekday.substring(0, 3)
-			datePartsMap.dddd = partsMap.weekday
+			datePartsMap.DDD = partsMap.weekday.substring(0, 3)
+			datePartsMap.DDDD = partsMap.weekday
 		}
 
 		if (partsMap.dayPeriod) {
-			datePartsMap.ampm = partsMap.dayPeriod
+			datePartsMap.AmPm = partsMap.dayPeriod
 		}
 
 		// Process the format string by replacing each token with its value
-		let formattedDate = format
+		let formattedDate: string = format
 
 		// Sort tokens by length (longest first) to avoid partial replacements
-		const tokens = Object.keys(datePartsMap).sort((a, b) => b.length - a.length)
+		const tokens = (
+			Object.keys(datePartsMap).sort((a, b) => b.length - a.length)
+		) as (keyof typeof datePartsMap)[]
 
 		// Replace each token with its value
 		for (const token of tokens) {