@bagelink/vue 1.9.51 → 1.9.56

package/src/i18n/locales/ru.json

@@ -0,0 +1,153 @@
+{
+  "modalConfirm": {
+    "title": "Подтвердить",
+    "message": "Вы уверены, что хотите продолжить?",
+    "confirm": "Подтвердить",
+    "cancel": "Отмена"
+  },
+  "upload": {
+    "upload": "Загрузить",
+    "uploading": "Загрузка {count} файл{plural}...",
+    "noFile": "Файл не выбран",
+    "dropPlaceholder": "Перетащите файлы сюда или нажмите для загрузки",
+    "delete": "Удалить",
+    "replace": "Заменить",
+    "download": "Скачать"
+  },
+  "pagination": {
+    "of": "из",
+    "prev": "Предыдущая",
+    "next": "Следующая"
+  },
+  "form": {
+    "required": "Это поле обязательно для заполнения",
+    "invalidEmail": "Введите действительный адрес электронной почты",
+    "invalidUrl": "Введите действительный URL",
+    "minLength": "Должно содержать не менее {min} символов",
+    "maxLength": "Должно содержать не более {max} символов",
+    "minValue": "Должно быть не менее {min}",
+    "maxValue": "Должно быть не более {max}",
+    "pattern": "Неверный формат",
+    "passwordStrength": "Надежность пароля"
+  },
+  "password": {
+    "veryWeak": "Очень слабый",
+    "weak": "Слабый",
+    "fair": "Средний",
+    "good": "Хороший",
+    "strong": "Надёжный"
+  },
+  "select": {
+    "placeholder": "Выбрать",
+    "search": "Поиск",
+    "yes": "Да",
+    "no": "Нет"
+  },
+  "fieldArray": {
+    "loadDefault": "Загрузить {label} по умолчанию"
+  },
+  "btn": {
+    "loading": "Загрузка..."
+  },
+  "toast": {
+    "success": "Успешно",
+    "error": "Ошибка",
+    "warning": "Предупреждение",
+    "info": "Информация"
+  },
+  "filter": {
+    "filter": "Фильтр",
+    "noActiveFilters": "Нет активных фильтров",
+    "connectors": {
+      "and": "И",
+      "or": "Или"
+    },
+    "operators": {
+      "eq": "Равно",
+      "ne": "Не равно",
+      "gt": "Больше чем",
+      "ge": "Больше или равно",
+      "lt": "Меньше чем",
+      "le": "Меньше или равно",
+      "co": "Содержит",
+      "sw": "Начинается с",
+      "ew": "Заканчивается на",
+      "pr": "Присутствует"
+    },
+    "placeholders": {
+      "selectField": "Выберите поле",
+      "selectOption": "Выберите вариант",
+      "selectDate": "Выберите дату",
+      "enterValue": "Значение"
+    },
+    "buttons": {
+      "addCondition": "Добавить условие",
+      "clearAll": "Очистить всё"
+    }
+  },
+  "multiStep": {
+    "previous": "Назад",
+    "next": "Далее",
+    "complete": "Завершить",
+    "step": "Шаг {current} из {total}"
+  },
+  "addressSearch": {
+    "placeholder": "Введите адрес"
+  },
+  "importData": {
+    "close": "Закрыть",
+    "cancel": "Отмена",
+    "importData": "Импорт данных",
+    "changeFile": "Изменить файл",
+    "selectSheet": "Выбрать лист",
+    "hasHeaders": "Отметьте, если файл содержит строку заголовка",
+    "sourceKeyField": "Ключевое поле источника (из этого файла)",
+    "relatedKeyField": "Ключевое поле связанного (из связанного файла)",
+    "selectSourceValue": "Выберите исходное значение",
+    "sourceValue": "Исходное значение",
+    "selectTargetValue": "Выберите целевое значение",
+    "targetValue": "Целевое значение",
+    "selectColumn": "Выберите столбец..."
+  },
+  "timeAgo": {
+    "year": "год",
+    "month": "месяц",
+    "week": "неделя",
+    "day": "день",
+    "hour": "час",
+    "minute": "минута",
+    "second": "секунда",
+    "ago": "назад",
+    "in": "через",
+    "justNow": "Только что"
+  },
+  "dialogForm": {
+    "save": "Сохранить",
+    "cancel": "Отмена",
+    "delete": "Удалить",
+    "validationError": "Пожалуйста, исправьте ошибки валидации перед отправкой",
+    "errorOccurred": "Произошла ошибка"
+  },
+  "tel": {
+    "phoneNumber": "Номер телефона",
+    "invalidPhone": "Пожалуйста, введите действительный номер телефона"
+  },
+  "email": {
+    "invalidEmail": "Введите действительный адрес электронной почты",
+    "invalidDomain": "Домен этого адреса электронной почты, похоже, недействителен"
+  },
+  "date": {
+    "invalidFormat": "Неверный формат даты"
+  },
+  "spreadsheet": {
+    "wrapText": "Перенос текста",
+    "selectAll": "Выбрать всё",
+    "clearAll": "Очистить всё"
+  },
+  "lightbox": {
+    "openFile": "Открыть файл"
+  },
+  "color": {
+    "placeholder": "Введите цвет"
+  }
+}

package/src/index.ts

@@ -10,13 +10,19 @@ export * from './directives'
 export * from './form-flow/form-flow'
 export { default as FormFlow } from './form-flow/FormFlow.vue'
 export { default as MultiStepForm } from './form-flow/MultiStepForm.vue'
+// i18n exports
 export {
-	type BagelOptions,
-	BagelVue,
-	i18nTInjectionKey,
-	injectI18nT,
-} from './plugins/bagel'
+	bagelinkLocales,
+	type CreateBagelI18nOptions,
+	createI18n,
+	type MessageSchema,
+	resolveI18n,
+	type TranslatableString,
+	useI18n,
+} from './i18n'
+export { type BagelOptions, BagelVue, getI18n } from './plugins/bagel'
 export { ModalPlugin, useModal } from './plugins/useModal'
+
 export { type BagelToastOptions, type ToastApi, ToastPlugin, useToast } from './plugins/useToast'
 
 export * from './types'

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/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}`
 		}
 	}
 
@@ -187,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
@@ -278,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
 }
@@ -295,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.
@@ -323,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
@@ -332,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

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,
-	}
-}