@bagelink/vue 1.9.51 → 1.9.56

package/src/components/form/inputs/Upload/UploadInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { UploadInputProps } from '@bagelink/vue'
-import { Btn, IMAGE_FORMATS_REGEXP, Icon, Card, Image, pathKeyToURL, Loading } from '@bagelink/vue'
+import { Btn, IMAGE_FORMATS_REGEXP, Icon, Card, Image, pathKeyToURL, Loading, useI18n } from '@bagelink/vue'
 import { watch, ref } from 'vue'
 
 import { useFileUpload } from './useFileUpload'
@@ -15,6 +15,8 @@ const props = withDefaults(defineProps<UploadInputProps & { showIcon?: boolean,
 
 const emit = defineEmits(['update:modelValue', 'addFileStart'])
 
+const { $t } = useI18n()
+
 const {
 	fileQueue,
 	pathKeys,
@@ -78,13 +80,13 @@ function fileName(pathKey: string) {
 		>
 			<Btn
 				v-if="!pathKeys.length && !fileQueue.length" class="px-1-5" icon="upload" outline
-				:value="btnPlaceholder || 'Upload'" @click="browse()"
+				:value="btnPlaceholder || $t('upload.upload')" @click="browse()"
 			/>
 			<!-- Loading state during upload -->
 			<div v-if="fileQueue.length > 0" class="flex align-items-center gap-1 p-05">
 				<Loading size="20" />
 				<span class="txt-gray txt-12">
-					Uploading {{ fileQueue.length }} file{{ fileQueue.length > 1 ? 's' : '' }}...
+					{{ $t('upload.uploading', { count: fileQueue.length, plural: fileQueue.length > 1 ? 's' : '' }) }}
 				</span>
 			</div>
 
@@ -111,7 +113,7 @@ function fileName(pathKey: string) {
 			</template>
 
 			<span v-if="!pathKeys.length && !fileQueue.length" class="txt-gray txt-12">
-				{{ noFilePlaceholder || 'No file selected' }}
+				{{ noFilePlaceholder || $t('upload.noFile') }}
 			</span>
 		</Card>
 
@@ -208,7 +210,7 @@ function fileName(pathKey: string) {
 				<p class="p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05 ">
 					<Icon v-if="showIcon" :name="icon" class="user-select-none" />
 					<span class=" pretty balance user-select-none ">
-						{{ dropPlaceholder || 'Drag and Drop files here or click to upload' }}
+						{{ dropPlaceholder || $t('upload.dropPlaceholder') }}
 					</span>
 				</p>
 			</slot>

package/src/components/lightbox/Lightbox.vue

@@ -3,6 +3,9 @@ import type { LightboxItem } from './lightbox.types'
 
 import { BglVideo, Btn, Icon, Zoomer, Image, normalizeURL, Swiper, downloadFile } from '@bagelink/vue'
 import { computed, ref, watch } from 'vue'
+import { useI18n } from '../../i18n'
+
+const { $t } = useI18n()
 
 const isOpen = ref(false)
 const group = ref<LightboxItem[]>([])
@@ -79,7 +82,7 @@ defineExpose({ open, close })
 				</div>
 				<Btn
 					v-if="currentItem?.openFile && currentItem?.src" class="color-white" round thin flat
-					iconEnd="arrow_outward" value="Open File" :href="currentItem?.src" target="_blank"
+					iconEnd="arrow_outward" value="$t:lightbox.openFile" :href="currentItem?.src" target="_blank"
 				/>
 				<Btn
 					v-if="currentItem?.download && currentItem?.src" class="color-white" round thin flat

package/src/dialog/DialogConfirm.vue

@@ -3,6 +3,8 @@
  * DialogConfirm - Simple confirmation dialog
  */
 import type { DialogWidth, DialogPosition } from './dialogTypes'
+import { useI18n } from '@bagelink/vue'
+import { computed } from 'vue'
 import Btn from '../components/Btn.vue'
 import Dialog from './Dialog.vue'
 
@@ -17,12 +19,9 @@ const props = withDefaults(defineProps<{
 	cancelText?: string
 	confirmColor?: 'primary' | 'red' | 'green' | 'blue'
 }>(), {
-	title: 'Confirm',
 	width: 's',
 	position: 'center',
 	dismissable: true,
-	confirmText: 'Confirm',
-	cancelText: 'Cancel',
 	confirmColor: 'primary'
 })
 
@@ -31,6 +30,12 @@ const emit = defineEmits<{
 	'resolve': [confirmed: boolean]
 }>()
 
+const { $t } = useI18n()
+
+const resolvedTitle = computed(() => props.title || $t('modalConfirm.title'))
+const resolvedConfirmText = computed(() => props.confirmText || $t('modalConfirm.confirm'))
+const resolvedCancelText = computed(() => props.cancelText || $t('modalConfirm.cancel'))
+
 function handleConfirm() {
 	emit('resolve', true)
 	emit('update:open', false)
@@ -48,7 +53,7 @@ function handleClose() {
 
 <template>
 	<Dialog
-		:open="open" :title="title" :width="width" :position="position" :dismissable="dismissable"
+		:open="open" :title="resolvedTitle" :width="width" :position="position" :dismissable="dismissable"
 		@update:open="$emit('update:open', $event)" @close="handleClose"
 	>
 		<p>
@@ -57,10 +62,10 @@ function handleClose() {
 
 		<template #footer>
 			<Btn flat @click="handleCancel">
-				{{ cancelText }}
+				{{ resolvedCancelText }}
 			</Btn>
 			<Btn :color="confirmColor" @click="handleConfirm">
-				{{ confirmText }}
+				{{ resolvedConfirmText }}
 			</Btn>
 		</template>
 	</Dialog>

package/src/dialog/DialogForm.vue

@@ -10,6 +10,7 @@ import type { DialogWidth, DialogPosition, DialogAction } from './dialogTypes'
 import { ref, computed } from 'vue'
 import Btn from '../components/Btn.vue'
 import FormFlow from '../form-flow/FormFlow.vue'
+import { useI18n } from '../i18n'
 import Dialog from './Dialog.vue'
 
 const props = withDefaults(defineProps<{
@@ -29,9 +30,6 @@ const props = withDefaults(defineProps<{
 	width: 'm',
 	position: 'center',
 	dismissable: true,
-	submitText: 'Save',
-	cancelText: 'Cancel',
-	deleteText: 'Delete'
 })
 
 const emit = defineEmits<{
@@ -39,6 +37,8 @@ const emit = defineEmits<{
 	'resolve': [result: { action: DialogAction, data: T }]
 }>()
 
+const { $t } = useI18n()
+
 // Form state - use Record<string, any> internally for FormFlow compatibility
 const formData = ref<Record<string, any>>({ ...(props.modelValue || {}) })
 const isSubmitting = ref(false)
@@ -55,7 +55,7 @@ async function handleSubmit() {
 
 	// Validate form before submitting
 	if (!formFlowRef.value?.validate()) {
-		error.value = 'Please fix the validation errors before submitting'
+		error.value = $t('dialogForm.validationError')
 		return
 	}
 
@@ -69,7 +69,7 @@ async function handleSubmit() {
 		emit('resolve', { action: 'submit', data: formData.value as T })
 		emit('update:open', false)
 	} catch (err: unknown) {
-		error.value = err instanceof Error ? err.message : 'An error occurred'
+		error.value = err instanceof Error ? err.message : $t('dialogForm.errorOccurred')
 	} finally {
 		isSubmitting.value = false
 	}
@@ -86,7 +86,7 @@ async function handleDelete() {
 		emit('resolve', { action: 'delete', data: formData.value as T })
 		emit('update:open', false)
 	} catch (err: unknown) {
-		error.value = err instanceof Error ? err.message : 'An error occurred'
+		error.value = err instanceof Error ? err.message : $t('dialogForm.errorOccurred')
 	} finally {
 		isDeleting.value = false
 	}
@@ -124,19 +124,19 @@ function handleClose() {
 				v-if="hasDeleteHandler" color="red" flat :loading="isDeleting" :disabled="isSubmitting" class="me-auto"
 				@click="handleDelete"
 			>
-				{{ deleteText }}
+				{{ deleteText || $t('dialogForm.delete') }}
 			</Btn>
 
 			<div class="flex-grow-1" />
 
 			<!-- Cancel button -->
 			<Btn flat :disabled="isSubmitting || isDeleting" @click="handleCancel">
-				{{ cancelText }}
+				{{ cancelText || $t('dialogForm.cancel') }}
 			</Btn>
 
 			<!-- Submit button -->
 			<Btn color="primary" :loading="isSubmitting" :disabled="isDeleting" @click="handleSubmit">
-				{{ submitText }}
+				{{ submitText || $t('dialogForm.save') }}
 			</Btn>
 		</template>
 	</Dialog>

package/src/form-flow/FormFlow.vue

@@ -1,21 +1,9 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-/**
- * FormFlow - Single-step form renderer
- *
- * Renders forms from schema definitions with automatic:
- * - Field rendering based on type
- * - Conditional visibility (.if() clauses)
- * - Validation (.validate() chains)
- * - Layout (.row() grouping)
- * - Custom component/slot rendering
- * - Nested object support (dot notation)
- */
-
 import type { SchemaDefinition, FieldBuilder } from './form-flow'
 
 import { computed, ref, watch } from 'vue'
-
 import ArrayInput from '../components/form/inputs/ArrayInput.vue'
+
 import CheckInput from '../components/form/inputs/CheckInput.vue'
 import CodeEditor from '../components/form/inputs/CodeEditor/Index.vue'
 import DateInput from '../components/form/inputs/DateInput.vue'
@@ -29,6 +17,7 @@ import TelInput from '../components/form/inputs/TelInput.vue'
 import TextInput from '../components/form/inputs/TextInput.vue'
 import ToggleInput from '../components/form/inputs/ToggleInput.vue'
 import UploadInput from '../components/form/inputs/Upload/UploadInput.vue'
+import { useI18n } from '../i18n'
 
 import { parseQuery } from '../utils/queryFilter'
 
@@ -41,11 +30,14 @@ export interface Props<T extends Record<string, any> = Record<string, any>> {
 }
 
 const props = defineProps<Props<T>>()
+
 const emit = defineEmits<{
 	'update:modelValue': [value: T]
 	'submit': [value: T]
 }>()
 
+const { $t } = useI18n()
+
 // Get value from nested path (e.g., 'meta.preferences.theme')
 function getNestedValue(obj: any, path: string): any {
 	const keys = path.split('.')
@@ -224,7 +216,7 @@ function validateField(key: string, field: FieldBuilder): boolean {
 	if (field._config.required === true) {
 		const isEmpty = value == null || value === '' || (Array.isArray(value) && value.length === 0)
 		if (isEmpty) {
-			validationErrors.value = { ...validationErrors.value, [key]: field._config.requiredMessage || 'This field is required' }
+			validationErrors.value = { ...validationErrors.value, [key]: field._config.requiredMessage || $t('form.required') }
 			return false
 		}
 	}
@@ -360,7 +352,7 @@ function validateAll(): boolean {
 		if (field._config.required === true) {
 			const isEmpty = value == null || value === '' || (Array.isArray(value) && value.length === 0)
 			if (isEmpty) {
-				newErrors[key] = field._config.requiredMessage || 'This field is required'
+				newErrors[key] = field._config.requiredMessage || $t('form.required')
 				isValid = false
 				continue
 			}

package/src/form-flow/MultiStepForm.vue

@@ -12,22 +12,15 @@
 import type { FieldBuilder, SchemaDefinition } from './form-flow'
 import { computed, ref, watch } from 'vue'
 
+import { useI18n } from '../i18n'
 import { parseQuery } from '../utils/queryFilter'
 
 import FormFlow from './FormFlow.vue'
 
-export interface Props {
-	schema: Record<string, SchemaDefinition>
-	modelValue?: Record<string, any>
-	currentStep?: string
-	components?: Record<string, any>
-	/** Whether to validate required fields before allowing next step */
-	validateOnNext?: boolean
-}
-
 const props = withDefaults(defineProps<Props>(), {
 	validateOnNext: true
 })
+
 const emit = defineEmits<{
 	'update:modelValue': [value: Record<string, any>]
 	'update:currentStep': [step: string]
@@ -36,6 +29,17 @@ const emit = defineEmits<{
 	'validationError': [errors: Record<string, string>]
 }>()
 
+const { $t } = useI18n()
+
+export interface Props {
+	schema: Record<string, SchemaDefinition>
+	modelValue?: Record<string, any>
+	currentStep?: string
+	components?: Record<string, any>
+	/** Whether to validate required fields before allowing next step */
+	validateOnNext?: boolean
+}
+
 // Local form state - initialize with empty object if undefined
 const formData = ref({ ...(props.modelValue || {}) }) as any
 
@@ -366,15 +370,15 @@ defineExpose({
 		<!-- Navigation Buttons -->
 		<div class="step-navigation">
 			<button type="button" class="btn-secondary" :disabled="isFirstStep" @click="prevStep">
-				Previous
+				{{ $t('multiStep.previous') }}
 			</button>
 
 			<div class="step-counter">
-				Step {{ currentStepIndex + 1 }} of {{ visibleSteps.length }}
+				{{ $t('multiStep.step', { current: currentStepIndex + 1, total: visibleSteps.length }) }}
 			</div>
 
 			<button type="button" class="btn-primary" @click="nextStep">
-				{{ isLastStep ? 'Complete' : 'Next' }}
+				{{ isLastStep ? $t('multiStep.complete') : $t('multiStep.next') }}
 			</button>
 		</div>
 	</div>

package/src/i18n/index.ts

@@ -0,0 +1,136 @@
+import type { Composer, I18n } from 'vue-i18n'
+import { createI18n as createVueI18n, useI18n as useVueI18n } from 'vue-i18n'
+import en from './locales/en.json'
+import es from './locales/es.json'
+import fr from './locales/fr.json'
+import he from './locales/he.json'
+import it from './locales/it.json'
+import ru from './locales/ru.json'
+
+export type MessageSchema = typeof en
+
+// Bagelink's built-in locales
+const bagelinkLocales = {
+	en,
+	he,
+	it,
+	es,
+	fr,
+	ru,
+} as const
+
+export interface CreateBagelI18nOptions {
+	/** 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.
+ * Options mirror vue-i18n's `createI18n` for consistency.
+ */
+export function createI18n(options: CreateBagelI18nOptions = {}): I18n {
+	const {
+		locale = 'en',
+		fallbackLocale = 'en',
+		messages = {},
+	} = options
+
+	// 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 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,
+		fallbackLocale,
+		messages: mergedMessages as any,
+		legacy: false,
+		globalInjection: true,
+	})
+
+	return i18nInstance
+}
+
+/**
+ * Get the global i18n instance
+ */
+export function getI18n(): I18n {
+	if (!i18nInstance) {
+		throw new Error('i18n not initialized. Call createI18n() first.')
+	}
+	return i18nInstance
+}
+
+interface UseI18nReturn {
+	$t: Composer['t']
+	t: Composer['t']
+	locale: Composer['locale']
+	availableLocales: Composer['availableLocales']
+	fallbackLocale: Composer['fallbackLocale']
+	n: Composer['n']
+	d: Composer['d']
+}
+
+/**
+ * useI18n wrapper that returns bagelink's typed i18n functions
+ */
+export function useI18n(): UseI18nReturn {
+	const { t, locale, availableLocales, fallbackLocale, n, d } = useVueI18n()
+
+	return {
+		$t: t,
+		t,
+		locale,
+		availableLocales,
+		fallbackLocale,
+		n,
+		d,
+	}
+}
+
+// Export locale data for direct access if needed
+export { bagelinkLocales }
+
+/**
+ * A string that is either a plain string or a translation key prefixed with `$t:`.
+ * @example
+ * 'Save'           // plain string, used as-is
+ * '$t:btn.save'    // translation key, resolved via i18n
+ */
+export type TranslatableString = string | `$t:${string}`
+
+/**
+ * Resolves a TranslatableString.
+ * If the value starts with `$t:`, it's treated as a translation key.
+ * Otherwise the string is returned as-is.
+ * Works outside component context (uses the global i18n instance).
+ *
+ * @example
+ * resolveI18n('Save')              // → 'Save'
+ * resolveI18n('$t:btn.save')       // → 'Salva' (if locale is 'it')
+ * resolveI18n(undefined)           // → undefined
+ */
+export function resolveI18n(value: TranslatableString | undefined): string | undefined {
+	if (value == null) return undefined
+	if (!value.startsWith('$t:')) return value
+	return (getI18n().global.t as (key: string) => string)(value.slice(3))
+}

package/src/i18n/locales/en.json

@@ -0,0 +1,153 @@
+{
+  "modalConfirm": {
+    "title": "Confirm",
+    "message": "Are you sure you want to continue?",
+    "confirm": "Confirm",
+    "cancel": "Cancel"
+  },
+  "upload": {
+    "upload": "Upload",
+    "uploading": "Uploading {count} file{plural}...",
+    "noFile": "No file selected",
+    "dropPlaceholder": "Drag and Drop files here or click to upload",
+    "delete": "Delete",
+    "replace": "Replace",
+    "download": "Download"
+  },
+  "pagination": {
+    "of": "of",
+    "prev": "Previous",
+    "next": "Next"
+  },
+  "form": {
+    "required": "This field is required",
+    "invalidEmail": "Please enter a valid email address",
+    "invalidUrl": "Please enter a valid URL",
+    "minLength": "Must be at least {min} characters",
+    "maxLength": "Must be no more than {max} characters",
+    "minValue": "Must be at least {min}",
+    "maxValue": "Must be no more than {max}",
+    "pattern": "Invalid format",
+    "passwordStrength": "Password strength"
+  },
+  "password": {
+    "veryWeak": "Very Weak",
+    "weak": "Weak",
+    "fair": "Fair",
+    "good": "Good",
+    "strong": "Strong"
+  },
+  "select": {
+    "placeholder": "Select",
+    "search": "Search",
+    "yes": "Yes",
+    "no": "No"
+  },
+  "fieldArray": {
+    "loadDefault": "Load Default {label}"
+  },
+  "btn": {
+    "loading": "Loading..."
+  },
+  "toast": {
+    "success": "Success",
+    "error": "Error",
+    "warning": "Warning",
+    "info": "Information"
+  },
+  "filter": {
+    "filter": "Filter",
+    "noActiveFilters": "No active filters",
+    "connectors": {
+      "and": "And",
+      "or": "Or"
+    },
+    "operators": {
+      "eq": "Equals",
+      "ne": "Not equals",
+      "gt": "Greater than",
+      "ge": "Greater or equal",
+      "lt": "Less than",
+      "le": "Less or equal",
+      "co": "Contains",
+      "sw": "Starts with",
+      "ew": "Ends with",
+      "pr": "Present"
+    },
+    "placeholders": {
+      "selectField": "Select field",
+      "selectOption": "Select option",
+      "selectDate": "Select date",
+      "enterValue": "Value"
+    },
+    "buttons": {
+      "addCondition": "Add condition",
+      "clearAll": "Clear all"
+    }
+  },
+  "multiStep": {
+    "previous": "Previous",
+    "next": "Next",
+    "complete": "Complete",
+    "step": "Step {current} of {total}"
+  },
+  "addressSearch": {
+    "placeholder": "Enter address"
+  },
+  "importData": {
+    "close": "Close",
+    "cancel": "Cancel",
+    "importData": "Import Data",
+    "changeFile": "Change File",
+    "selectSheet": "Select Sheet",
+    "hasHeaders": "Mark this if file has a header row",
+    "sourceKeyField": "Source Key Field (from this file)",
+    "relatedKeyField": "Related Key Field (from related file)",
+    "selectSourceValue": "Select source value",
+    "sourceValue": "Source value",
+    "selectTargetValue": "Select target value",
+    "targetValue": "Target value",
+    "selectColumn": "Select column..."
+  },
+  "timeAgo": {
+    "year": "year",
+    "month": "month",
+    "week": "week",
+    "day": "day",
+    "hour": "hour",
+    "minute": "minute",
+    "second": "second",
+    "ago": "ago",
+    "in": "in",
+    "justNow": "Just now"
+  },
+  "dialogForm": {
+    "save": "Save",
+    "cancel": "Cancel",
+    "delete": "Delete",
+    "validationError": "Please fix the validation errors before submitting",
+    "errorOccurred": "An error occurred"
+  },
+  "tel": {
+    "phoneNumber": "Phone Number",
+    "invalidPhone": "Please enter a valid phone number"
+  },
+  "email": {
+    "invalidEmail": "Please enter a valid email address",
+    "invalidDomain": "This email domain appears to be invalid"
+  },
+  "date": {
+    "invalidFormat": "Invalid date format"
+  },
+  "spreadsheet": {
+    "wrapText": "Wrap Text",
+    "selectAll": "Select All",
+    "clearAll": "Clear All"
+  },
+  "lightbox": {
+    "openFile": "Open File"
+  },
+  "color": {
+    "placeholder": "Enter color"
+  }
+}