@bagelink/vue 1.9.54 → 1.9.59

package/dist/utils/calendar/dateUtils.d.ts

@@ -52,7 +52,7 @@ export declare function getDatePartsMap(date: Date, locale: Intl.LocalesArgument
     YYYY: string;
 };
 export interface FormatDateOptions extends Partial<Pick<Intl.DateTimeFormatOptions, 'hour12'>> {
-    fmt?: DateTimeAcceptedFormats;
+    format?: DateTimeAcceptedFormats;
     locale?: Intl.LocalesArgument;
     tz?: string;
 }
@@ -67,7 +67,7 @@ export declare function formatDate(date?: DateLike, format?: DateTimeAcceptedFor
  * Formats a date based on the provided options.
  * @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.format 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.

package/dist/utils/calendar/dateUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dateUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/calendar/dateUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,KAAK,EAAE,uBAAuB,EAAY,MAAM,sBAAsB,CAAA;AAG7E,UAAU,gBAAgB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,gBAAgB,QA+BvE;AAED,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AA2E1D,wBAAgB,OAAO,CACtB,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,YAAY,CAAC,EAAE,WAAW,GAAG;IAAE,IAAI,CAAC,EAAE,WAAW,CAAC;IAAC,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAA;CAAE,UA0EnF;AASD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CA2CtF;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,EAAE,IAAI,CAAC,qBAAqB;;;;;;;;;;;;;;EAyB/G;AAcD,MAAM,WAAW,iBAAkB,SAAQ,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;IAC7F,GAAG,CAAC,EAAE,uBAAuB,CAAA;IAC7B,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,CAAA;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAA;CACX;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,EAAE,uBAAuB,GAAG,MAAM,CAAA;AAErF;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAAA;AAkG7E,eAAO,MAAM,OAAO,mBAAa,CAAA"}
+{"version":3,"file":"dateUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/calendar/dateUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,KAAK,EAAE,uBAAuB,EAAY,MAAM,sBAAsB,CAAA;AAG7E,UAAU,gBAAgB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,gBAAgB,QA+BvE;AAED,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AA2E1D,wBAAgB,OAAO,CACtB,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,YAAY,CAAC,EAAE,WAAW,GAAG;IAAE,IAAI,CAAC,EAAE,WAAW,CAAC;IAAC,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAA;CAAE,UA0EnF;AAsBD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CA2CtF;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,EAAE,IAAI,CAAC,qBAAqB;;;;;;;;;;;;;;EAyB/G;AAcD,MAAM,WAAW,iBAAkB,SAAQ,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;IAC7F,MAAM,CAAC,EAAE,uBAAuB,CAAA;IAChC,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,CAAA;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAA;CACX;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,EAAE,uBAAuB,GAAG,MAAM,CAAA;AAErF;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAAA;AAkG7E,eAAO,MAAM,OAAO,mBAAa,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.9.54",
+  "version": "1.9.59",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Spreadsheet/Index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Btn, CheckInput, TextInput, ToggleInput, localRef, ListItem, Dropdown, useI18n } from '@bagelink/vue'
+import { Btn, CheckInput, TextInput, ToggleInput, useLocalStore, ListItem, Dropdown, useI18n } from '@bagelink/vue'
 import { computed, ref, watch, nextTick, onUnmounted } from 'vue'
 import SpreadsheetTable from './SpreadsheetTable.vue'
 
@@ -229,7 +229,7 @@ interface CellPosition {
 const isSelecting = ref(false)
 const selectionStart = ref<CellPosition | null>(null)
 const selectionEnd = ref<CellPosition | null>(null)
-const wrapText = localRef('wrapText', false)
+const { wrapText } = useLocalStore()
 
 // Reactive variable to track the currently editing cell
 const editingCell = ref<CellPosition | null>(null)

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

@@ -165,7 +165,7 @@ onUnmounted(() => {
 			>
 				<div class="event-content">
 					<div class="event-time">
-						{{ formatDate(event.start_time, { fmt: 'HH:mm' }) }}
+						{{ formatDate(event.start_time, { format: 'HH:mm' }) }}
 					</div>
 					<div class="event-details">
 						<div class="event-title">

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

@@ -233,7 +233,7 @@ onUnmounted(() => {
 								{{ event.title }}
 							</div>
 							<div class="event-time opacity-8">
-								{{ formatDate(new Date(event.start_time), { fmt: 'HH:mm' }) }} - {{ formatDate(new Date(event.end_time), { fmt: 'HH:mm' }) }}
+								{{ formatDate(new Date(event.start_time), { format: 'HH:mm' }) }} - {{ formatDate(new Date(event.end_time), { format: 'HH:mm' }) }}
 							</div>
 						</div>
 					</div>
@@ -251,9 +251,9 @@ onUnmounted(() => {
 					}"
 				>
 					<div class="color-primary txt-12 p-025">
-						{{ dragState.startTime ? formatDate(dragState.startTime, { fmt: 'HH:mm' }) : '' }}
+						{{ dragState.startTime ? formatDate(dragState.startTime, { format: 'HH:mm' }) : '' }}
 						-
-						{{ dragState.endTime ? formatDate(dragState.endTime, { fmt: 'HH:mm' }) : '' }}
+						{{ dragState.endTime ? formatDate(dragState.endTime, { format: 'HH:mm' }) : '' }}
 					</div>
 				</div>
 			</div>

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

@@ -122,7 +122,7 @@ function handleEventSelection(event: CalendarEvent, domEvent?: MouseEvent) {
 				}"
 			>
 				<div class="day-number">
-					{{ formatDate(day.date, { fmt: 'DD' }) }}
+					{{ formatDate(day.date, { format: 'DD' }) }}
 				</div>
 				<div class="day-events">
 					<template v-if="isMobile">

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

@@ -432,14 +432,14 @@ onUnmounted(() => {
 		<div ref="calendarGrid" class="weekGrid border-bottom me-1">
 			<div />
 			<div v-for="day in weekDays" :key="day.toISOString()" class="day-header p-05 txt-center m_txt12">
-				{{ formatDate(day, { fmt: 'DDD' }) }}
+				{{ formatDate(day, { format: 'DDD' }) }}
 				<span
 					class="txt-12 round p-025" :class="{
 						'color-gray': day.toDateString() !== new Date().toDateString(),
 						'bg-primary color-white': day.toDateString() === new Date().toDateString(),
 					}"
 				>
-					{{ formatDate(day, { fmt: 'DD' }) }}
+					{{ formatDate(day, { format: 'DD' }) }}
 				</span>
 			</div>
 		</div>
@@ -487,8 +487,8 @@ onUnmounted(() => {
 									{{ event.title }}
 								</div>
 								<div class="txt10 opacity-8 user-select-none">
-									{{ formatDate(event.start_time, { fmt: 'HH:mm' }) }} - {{ formatDate(event.end_time,
-										{ fmt: 'HH:mm' }) }}
+									{{ formatDate(event.start_time, { format: 'HH:mm' }) }} - {{ formatDate(event.end_time,
+										{ format: 'HH:mm' }) }}
 								</div>
 							</div>
 						</div>
@@ -507,9 +507,9 @@ onUnmounted(() => {
 					}"
 				>
 					<div class="color-primary txt-12 p-025">
-						{{ dragState.startTime ? formatDate(dragState.startTime, { fmt: 'HH:mm' }) : '' }} - {{
+						{{ dragState.startTime ? formatDate(dragState.startTime, { format: 'HH:mm' }) : '' }} - {{
 							dragState.endTime
-								? formatDate(dragState.endTime, { fmt: 'HH:mm' }) : '' }}
+								? formatDate(dragState.endTime, { format: 'HH:mm' }) : '' }}
 					</div>
 				</div>
 			</div>

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

@@ -48,7 +48,7 @@ const isOpen = ref(false)
 // Formatting utilities
 function formatDisplayDate(date: Date | string | undefined): string {
 	if (date === undefined || date === '') return ''
-	return formatDate(date, { fmt: props.enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY' })
+	return formatDate(date, { format: props.enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY' })
 }
 
 function parseUserInput(input: string): Date | null {

package/src/composables/index.ts

@@ -1,6 +1,6 @@
-import type { BglFormSchemaT, IfAny } from '@bagelink/vue'
+import type { BglFormSchemaT } from '@bagelink/vue'
 
-import type { MaybeRefOrGetter, Ref, UnwrapRef } from 'vue'
+import type { MaybeRefOrGetter, Ref } from 'vue'
 import { getFallbackSchema } from '@bagelink/vue'
 import { computed, ref, toValue, watch } from 'vue'
 
@@ -9,6 +9,32 @@ export { useDevice } from './useDevice'
 export { useExcel } from './useExcel'
 export { usePolling } from './usePolling'
 export { useTheme } from './useTheme'
+
+const _localStoreCache: Record<string, Ref> = {}
+let _storageListenerRegistered = false
+
+export function useLocalStore() {
+	if (!_storageListenerRegistered) {
+		_storageListenerRegistered = true
+		window.addEventListener('storage', (e) => {
+			if (e.key && _localStoreCache[e.key]) {
+				_localStoreCache[e.key].value = e.newValue !== null ? JSON.parse(e.newValue) : null
+			}
+		})
+	}
+	return new Proxy({} as Record<string, Ref>, {
+		get(_, key: string) {
+			if (!_localStoreCache[key]) {
+				const stored = localStorage.getItem(key)
+				_localStoreCache[key] = ref(stored !== null ? JSON.parse(stored) : null)
+				watch(_localStoreCache[key], (val) => {
+					localStorage.setItem(key, JSON.stringify(val))
+				})
+			}
+			return _localStoreCache[key]
+		},
+	})
+}
 interface UseBglSchemaParamsT<T> {
 	schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
 	columns?: MaybeRefOrGetter<string[]>
@@ -31,22 +57,4 @@ export function useBglSchema<T = { [key: string]: unknown }>(
 	return getFallbackSchema(data, _columns.value)
 }
 
-export function localRef<T>(
-	key: string,
-	initialValue: T
-): [T] extends [Ref<any, any>] ?
-		IfAny<T, Ref<T, T>, T> :
-		Ref<UnwrapRef<T>, T | UnwrapRef<T>> {
-	const storedValue = localStorage.getItem(key)
-	const initial = storedValue !== null ? JSON.parse(storedValue) : initialValue
-	const value = ref<T>(initial)
-
-	watch(() => value.value, (val) => {
-		localStorage.setItem(key, JSON.stringify(val))
-	}, { immediate: true, deep: true })
-
-	return value as any
-}
-
-export const useLocalStorage = localRef
 export { useValidateFieldValue } from './useValidateFieldValue'

package/src/i18n/index.ts

@@ -20,42 +20,48 @@ const bagelinkLocales = {
 } as const
 
 export interface CreateBagelI18nOptions {
-	/** Default language (default: 'en') */
-	defaultLang?: string
-	/** Initial language (default: 'en') */
-	language?: string
-	/** Available languages (default: all bagelink locales) */
-	availableLangs?: string[]
-	/** User's custom messages (merged with bagelink's) */
+	/** Active locale (default: 'en'). Same as vue-i18n's `locale`. */
+	locale?: string
+	/** Fallback locale (default: 'en'). Same as vue-i18n's `fallbackLocale`. */
+	fallbackLocale?: string
+	/** User's custom messages merged with bagelink's built-in translations. Same as vue-i18n's `messages`. */
 	messages?: Record<string, Record<string, unknown>>
 }
 
 let i18nInstance: I18n | null = null
 
 /**
- * Creates an i18n instance with bagelink's translations merged with user's
+ * Creates an i18n instance with bagelink's translations merged with user's.
+ * Options mirror vue-i18n's `createI18n` for consistency.
  */
 export function createI18n(options: CreateBagelI18nOptions = {}): I18n {
 	const {
-		defaultLang = 'en',
-		language = 'en',
-		availableLangs = Object.keys(bagelinkLocales),
+		locale = 'en',
+		fallbackLocale = 'en',
 		messages = {},
 	} = options
 
-	// Merge bagelink locales with user messages
+	// Merge bagelink locales with user messages for all supported locales
+	const supportedLocales = Object.keys(bagelinkLocales)
 	const mergedMessages: Record<string, Record<string, unknown>> = {}
 
-	for (const lang of availableLangs) {
+	for (const lang of supportedLocales) {
 		mergedMessages[lang] = {
 			...(bagelinkLocales[lang as keyof typeof bagelinkLocales] || {}),
 			...(messages[lang] || {}),
 		}
 	}
 
+	// Also include any user-provided locales not in bagelink's built-ins
+	for (const lang of Object.keys(messages)) {
+		if (!mergedMessages[lang]) {
+			mergedMessages[lang] = messages[lang]
+		}
+	}
+
 	i18nInstance = createVueI18n({
-		locale: language,
-		fallbackLocale: defaultLang,
+		locale,
+		fallbackLocale,
 		messages: mergedMessages as any,
 		legacy: false,
 		globalInjection: true,

package/src/utils/calendar/dateUtils.ts

@@ -219,6 +219,19 @@ function getBrowserNavigatorLocale(): string {
 		: navigator.language
 }
 
+/**
+ * Returns the active i18n locale if initialized, otherwise falls back to
+ * the browser's navigator locale. Used as the default for formatDate.
+ */
+function getActiveLocale(): string {
+	try {
+		const { locale } = getI18n().global
+		return typeof locale === 'string' ? locale : locale.value
+	} catch {
+		return getBrowserNavigatorLocale()
+	}
+}
+
 /**
  * Adjust a date for a specific timezone
  * @param date The date to adjust
@@ -310,7 +323,7 @@ const _orderedDateTokens = (
 const _tokenRegExPattern = new RegExp(_orderedDateTokens.map(token => token).join('|'), 'g')
 
 export interface FormatDateOptions extends Partial<Pick<Intl.DateTimeFormatOptions, 'hour12'>> {
-	fmt?: DateTimeAcceptedFormats
+	format?: DateTimeAcceptedFormats
 	locale?: Intl.LocalesArgument
 	tz?: string
 }
@@ -327,7 +340,7 @@ export function formatDate(date?: DateLike, format?: DateTimeAcceptedFormats): s
  * Formats a date based on the provided options.
  * @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.format 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.
@@ -355,7 +368,7 @@ export function formatDate(
 		format = formatOrOpts
 	} else if (formatOrOpts && typeof formatOrOpts === 'object') {
 		// Second overload: options object
-		format = formatOrOpts.fmt
+		format = formatOrOpts.format
 		locale = formatOrOpts.locale
 		timeZone = formatOrOpts.tz
 		rest = formatOrOpts
@@ -364,7 +377,7 @@ export function formatDate(
 	if (!date) { return '' }
 	format = format || 'DD.MM.YY'
 
-	locale = locale || getBrowserNavigatorLocale()
+	locale = locale || getActiveLocale()
 	try {
 		// Validate the date
 		const d = typeof date === 'string' || typeof date === 'number' ? new Date(date) : date