@bagelink/vue 1.9.49 → 1.9.54

package/src/plugins/bagel.ts

@@ -1,27 +1,18 @@
-import type { InjectionKey, Plugin } from 'vue'
-import FloatingVue from 'floating-vue'
-import { inject } from 'vue'
+import type { Plugin } from 'vue'
+import type { CreateBagelI18nOptions } from '../i18n'
 
+import type { BagelToastOptions } from './useToast'
+import FloatingVue from 'floating-vue'
 import lightboxPlugin from '../components/lightbox/index'
 import { ripple, pattern } from '../directives'
-import { useLang } from '../utils'
+import { createI18n, getI18n } from '../i18n'
 import clickOutside from '../utils/clickOutside'
 import { ModalPlugin } from './useModal'
-import { ToastPlugin, type BagelToastOptions } from './useToast'
-
-export const i18nTInjectionKey = Symbol('bagel') as InjectionKey<(key: string) => string>
-
-export function injectI18nT(injectionKey: typeof i18nTInjectionKey = i18nTInjectionKey) {
-	const i18nT = inject(injectionKey)
-	if (!i18nT) { throw new Error('No i18nT provided') }
-	return i18nT
-}
+import { ToastPlugin } from './useToast'
 
 export interface BagelOptions {
-	availableLangs?: string[]
-	defaultLang?: string
-	language?: string
-	i18nT?: (key: string) => string
+	/** i18n configuration options */
+	i18n?: CreateBagelI18nOptions
 	toast?: BagelToastOptions
 }
 
@@ -48,14 +39,11 @@ export const BagelVue: Plugin<BagelOptions> = {
 			},
 		})
 
-		// Setup language configuration
-		const { availableLangs, defaultLang, lang } = useLang()
-		if (options.availableLangs) { availableLangs.value = options.availableLangs }
-		if (options.defaultLang) { defaultLang.value = options.defaultLang }
-		if (options.language) { lang.value = options.language }
-
-		// Setup i18n translation function
-		app.config.globalProperties.$i18T = options.i18nT || ((key?: string) => key)
-		app.provide(i18nTInjectionKey, options.i18nT || ((key: string) => key))
+		// Setup i18n
+		const i18n = createI18n(options.i18n || {})
+		app.use(i18n)
 	},
 }
+
+// Re-export getI18n for advanced usage
+export { getI18n }

package/src/plugins/useToast.ts

@@ -1,12 +1,14 @@
 import type { App, InjectionKey, Plugin } from 'vue'
 import type { PluginOptions as ToastOptions } from 'vue-toastification'
 import { inject } from 'vue'
-import Toast from 'vue-toastification'
+import * as VueToastification from 'vue-toastification'
 import CustomToast from '../components/Toast.vue'
 import 'vue-toastification/dist/index.css'
 import '../styles/toast-overrides.css'
 
-const { POSITION, useToast: useVueToast } = Toast as any
+const Toast = (VueToastification as any).default || VueToastification
+const { POSITION } = VueToastification as any
+const useVueToast = (VueToastification as any).useToast
 
 export interface ToastApi {
 	success: (message: string, options?: any) => void

package/src/styles/text.css

@@ -1358,7 +1358,8 @@
     -webkit-line-clamp: 6;
 }
 
-.pointer {
+.pointer,
+.cursor-pointer {
     cursor: pointer;
 }
 

package/src/utils/calendar/dateUtils.ts

@@ -1,5 +1,6 @@
 import type { DateLike } from '@vueuse/core'
-import type { AvailableTimeLanguages, DateTimeAcceptedFormats, LanguageTranslations, TimeUnit } from '../../types/timeAgoT'
+import type { DateTimeAcceptedFormats, TimeUnit } from '../../types/timeAgoT'
+import { getI18n } from '../../i18n'
 
 interface TimeDeltaOptions {
 	Day?: number
@@ -26,9 +27,7 @@ interface TimeDeltaOptions {
 }
 
 export function timeDelta(date: string | Date, options: TimeDeltaOptions) {
-	console.log('date', date)
 	date = new Date(date)
-	console.log('date', date)
 	const day = options.Day || options.day || options.days || 0
 	const hour = options.Hour || options.hour || options.hours || 0
 	const minute = options.Minute || options.minute || options.minutes || 0
@@ -60,66 +59,92 @@ export function timeDelta(date: string | Date, options: TimeDeltaOptions) {
 	return date
 }
 
-const translations: Record<AvailableTimeLanguages, LanguageTranslations> = {
-	en: {
-		year: 'year',
-		month: 'month',
-		week: 'week',
-		day: 'day',
-		hour: 'hour',
-		minute: 'minute',
-		second: 'second',
-		ago: 'ago',
-		in: 'in',
-		justNow: 'Just now'
-	},
-	es: {
-		year: 'año',
-		month: 'mes',
-		week: 'semana',
-		day: 'día',
-		hour: 'hora',
-		minute: 'minuto',
-		second: 'segundo',
-		ago: 'hace',
-		in: 'en',
-		justNow: 'Justo ahora'
-	},
-	fr: {
-		year: 'an',
-		month: 'mois',
-		week: 'semaine',
-		day: 'jour',
-		hour: 'heure',
-		minute: 'minute',
-		second: 'seconde',
-		ago: 'il y a',
-		in: 'dans',
-		justNow: 'À l\'instant'
-	},
-	he: {
-		year: { singular: 'שנה', plural: 'שנים' },
-		month: { singular: 'חודש', plural: 'חודשים' },
-		week: { singular: 'שבוע', plural: 'שבועות' },
-		day: { singular: 'יום', plural: 'ימים' },
-		hour: { singular: 'שעה', plural: 'שעות' },
-		minute: { singular: 'דקה', plural: 'דקות' },
-		second: { singular: 'שנייה', plural: 'שניות' },
-		ago: 'לפני',
-		in: 'בעוד',
-		justNow: 'זה עתה'
+type TimeAgoLang = 'en' | 'es' | 'fr' | 'he' | 'it' | 'ru'
+
+interface TimeAgoTranslations {
+	year: string | TimeUnit
+	month: string | TimeUnit
+	week: string | TimeUnit
+	day: string | TimeUnit
+	hour: string | TimeUnit
+	minute: string | TimeUnit
+	second: string | TimeUnit
+	ago: string
+	in: string
+	justNow: string
+}
+
+/**
+ * Get timeAgo translations from i18n instance
+ */
+function getTimeAgoTranslations(lang: TimeAgoLang): TimeAgoTranslations {
+	try {
+		const i18n = getI18n()
+		const messages = i18n.global.messages as Record<string, { timeAgo?: TimeAgoTranslations }>
+		const localeMessages = messages[lang] || messages.en
+		if (localeMessages?.timeAgo) {
+			return localeMessages.timeAgo
+		}
+		// Fallback to English if timeAgo not found
+		return {
+			year: 'year',
+			month: 'month',
+			week: 'week',
+			day: 'day',
+			hour: 'hour',
+			minute: 'minute',
+			second: 'second',
+			ago: 'ago',
+			in: 'in',
+			justNow: 'Just now',
+		}
+	} catch {
+		// Fallback if i18n not initialized
+		return {
+			year: 'year',
+			month: 'month',
+			week: 'week',
+			day: 'day',
+			hour: 'hour',
+			minute: 'minute',
+			second: 'second',
+			ago: 'ago',
+			in: 'in',
+			justNow: 'Just now',
+		}
+	}
+}
+
+/**
+ * Get current locale from i18n instance
+ */
+function getCurrentLocale(): TimeAgoLang {
+	try {
+		const i18n = getI18n()
+		const { locale } = i18n.global
+		const lang = typeof locale === 'string' ? locale : locale.value
+		// Map to supported timeAgo languages
+		const supportedLangs: TimeAgoLang[] = ['en', 'es', 'fr', 'he', 'it', 'ru']
+		if (supportedLangs.includes(lang as TimeAgoLang)) {
+			return lang as TimeAgoLang
+		}
+		return 'en'
+	} catch {
+		return 'en'
 	}
 }
 
 export function timeAgo(
 	date: string | Date,
-	langOrConfig?: AvailableTimeLanguages | { lang?: AvailableTimeLanguages, mode?: 'relative' | 'absolute' }
+	langOrConfig?: TimeAgoLang | { lang?: TimeAgoLang, mode?: 'relative' | 'absolute' }
 ) {
 	if (!date) { return '' }
 	if (typeof date === 'string') { date = new Date(date) }
 
-	// Parse config
-	const lang = typeof langOrConfig === 'string' ? langOrConfig : (langOrConfig?.lang || 'en')
+	// Parse config - use global i18n locale if no lang specified
+	const lang = typeof langOrConfig === 'string'
+		? langOrConfig
+		: (langOrConfig?.lang || getCurrentLocale())
 	const mode = typeof langOrConfig === 'object' ? (langOrConfig.mode || 'relative') : 'relative'
 	const isRelative = mode === 'relative'
 
@@ -138,7 +163,13 @@ export function timeAgo(
 		{ label: 'second', seconds: 1 }
 	]
 
-	const selectedLang = translations[lang]
+	const selectedLang = getTimeAgoTranslations(lang)
+
+	// Helper to get time unit translation
+	const getTimeUnit = (label: string): string | TimeUnit => {
+		const key = label as keyof TimeAgoTranslations
+		return selectedLang[key] as string | TimeUnit
+	}
 
 	for (const interval of intervals) {
 		const count = Math.floor(Math.abs(seconds) / interval.seconds)
@@ -148,7 +179,7 @@ export function timeAgo(
 
 			// Handle Hebrew plural forms
 			if (lang === 'he') {
-				const timeUnit = selectedLang[interval.label] as TimeUnit
+				const timeUnit = getTimeUnit(interval.label) as TimeUnit
 				const form = count === 1 ? timeUnit.singular : timeUnit.plural
 
 				// For Hebrew, we place the prefix/suffix before the number
@@ -168,12 +199,13 @@ export function timeAgo(
 			}
 
 			// Handle other languages
+			const intervalLabel = getTimeUnit(interval.label) as string
 			if (interval.label === 'day' && seconds > 0) {
 				const hours = Math.floor((Math.abs(seconds) % 86400) / 3600)
-				const hourLabel = hours > 1 ? `${selectedLang.hour}s` : selectedLang.hour
-				return `${prefix}${count} ${selectedLang[interval.label]}${hours > 0 ? ` ${hours} ${hourLabel}` : ''}${suffix}`
+				const hourLabel = hours > 1 ? `${selectedLang.hour}s` : selectedLang.hour as string
+				return `${prefix}${count} ${intervalLabel}${hours > 0 ? ` ${hours} ${hourLabel}` : ''}${suffix}`
 			}
-			return `${prefix}${count} ${selectedLang[interval.label]}${suffix}`
+			return `${prefix}${count} ${intervalLabel}${suffix}`
 		}
 	}
 

package/src/utils/index.ts

@@ -201,8 +201,6 @@ export function normalizeDimension(value: string | number | undefined, defaultMe
 export * as bagelFormUtils from './BagelFormUtils'
 export { useForm } from './BagelFormUtils'
 
-export { useLang } from './lang'
-
 export type { ComparisonOperator, FilterCondition, LogicalOperator, QueryConditions, QueryFilter } from './queryFilter'
 export { anyOf, parseQuery, queryFilter, range, search } from './queryFilter'
 export type { ShowdownConverter, ShowdownOptions } from './showdown'

package/src/utils/lang.ts

@@ -1,46 +0,0 @@
-import { computed, reactive } from 'vue'
-
-interface State {
-	defaultLang: string
-	availableLangs: string[]
-	lang: string
-}
-
-const state: State = reactive({
-	defaultLang: '',
-	availableLangs: [],
-	lang: 'en',
-})
-
-function $tdb<T extends { [key: string]: string }>(langEl?: T): string {
-	if (!langEl) {
-		console.warn('No language element provided for $tdb function')
-		return ''
-	}
-
-	return langEl[state.lang] || langEl[state.defaultLang] || ''
-}
-
-export function useLang() {
-	const lang = computed({
-		get: () => state.lang,
-		set: val => (state.lang = val),
-	})
-
-	const availableLangs = computed({
-		get: () => state.availableLangs,
-		set: val => (state.availableLangs = val),
-	})
-
-	const defaultLang = computed({
-		get: () => state.defaultLang,
-		set: val => (state.defaultLang = val),
-	})
-
-	return {
-		lang,
-		$tdb,
-		availableLangs,
-		defaultLang,
-	}
-}