@bagelink/vue 1.9.49 → 1.9.54

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,130 @@
+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 {
+	/** 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) */
+	messages?: Record<string, Record<string, unknown>>
+}
+
+let i18nInstance: I18n | null = null
+
+/**
+ * Creates an i18n instance with bagelink's translations merged with user's
+ */
+export function createI18n(options: CreateBagelI18nOptions = {}): I18n {
+	const {
+		defaultLang = 'en',
+		language = 'en',
+		availableLangs = Object.keys(bagelinkLocales),
+		messages = {},
+	} = options
+
+	// Merge bagelink locales with user messages
+	const mergedMessages: Record<string, Record<string, unknown>> = {}
+
+	for (const lang of availableLangs) {
+		mergedMessages[lang] = {
+			...(bagelinkLocales[lang as keyof typeof bagelinkLocales] || {}),
+			...(messages[lang] || {}),
+		}
+	}
+
+	i18nInstance = createVueI18n({
+		locale: language,
+		fallbackLocale: defaultLang,
+		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"
+  }
+}

package/src/i18n/locales/es.json

@@ -0,0 +1,153 @@
+{
+  "modalConfirm": {
+    "title": "Confirmar",
+    "message": "¿Estás seguro de que quieres continuar?",
+    "confirm": "Confirmar",
+    "cancel": "Cancelar"
+  },
+  "upload": {
+    "upload": "Subir",
+    "uploading": "Subiendo {count} archivo{plural}...",
+    "noFile": "Ningún archivo seleccionado",
+    "dropPlaceholder": "Arrastra y suelta archivos aquí o haz clic para subir",
+    "delete": "Eliminar",
+    "replace": "Reemplazar",
+    "download": "Descargar"
+  },
+  "pagination": {
+    "of": "de",
+    "prev": "Anterior",
+    "next": "Siguiente"
+  },
+  "form": {
+    "required": "Este campo es obligatorio",
+    "invalidEmail": "Introduce un correo electrónico válido",
+    "invalidUrl": "Introduce una URL válida",
+    "minLength": "Debe tener al menos {min} caracteres",
+    "maxLength": "Debe tener como máximo {max} caracteres",
+    "minValue": "Debe ser al menos {min}",
+    "maxValue": "Debe ser como máximo {max}",
+    "pattern": "Formato inválido",
+    "passwordStrength": "Fortaleza de la contraseña"
+  },
+  "password": {
+    "veryWeak": "Muy débil",
+    "weak": "Débil",
+    "fair": "Regular",
+    "good": "Buena",
+    "strong": "Fuerte"
+  },
+  "select": {
+    "placeholder": "Seleccionar",
+    "search": "Buscar",
+    "yes": "Sí",
+    "no": "No"
+  },
+  "fieldArray": {
+    "loadDefault": "Cargar {label} predeterminado"
+  },
+  "btn": {
+    "loading": "Cargando..."
+  },
+  "toast": {
+    "success": "Éxito",
+    "error": "Error",
+    "warning": "Advertencia",
+    "info": "Información"
+  },
+  "filter": {
+    "filter": "Filtro",
+    "noActiveFilters": "Sin filtros activos",
+    "connectors": {
+      "and": "Y",
+      "or": "O"
+    },
+    "operators": {
+      "eq": "Igual a",
+      "ne": "No igual a",
+      "gt": "Mayor que",
+      "ge": "Mayor o igual",
+      "lt": "Menor que",
+      "le": "Menor o igual",
+      "co": "Contiene",
+      "sw": "Empieza con",
+      "ew": "Termina con",
+      "pr": "Presente"
+    },
+    "placeholders": {
+      "selectField": "Seleccionar campo",
+      "selectOption": "Seleccionar opción",
+      "selectDate": "Seleccionar fecha",
+      "enterValue": "Valor"
+    },
+    "buttons": {
+      "addCondition": "Añadir condición",
+      "clearAll": "Limpiar todo"
+    }
+  },
+  "multiStep": {
+    "previous": "Anterior",
+    "next": "Siguiente",
+    "complete": "Completar",
+    "step": "Paso {current} de {total}"
+  },
+  "addressSearch": {
+    "placeholder": "Introduce una dirección"
+  },
+  "importData": {
+    "close": "Cerrar",
+    "cancel": "Cancelar",
+    "importData": "Importar datos",
+    "changeFile": "Cambiar archivo",
+    "selectSheet": "Seleccionar hoja",
+    "hasHeaders": "Marcar si el archivo tiene fila de encabezado",
+    "sourceKeyField": "Campo clave de origen (de este archivo)",
+    "relatedKeyField": "Campo clave relacionado (del archivo relacionado)",
+    "selectSourceValue": "Seleccionar valor de origen",
+    "sourceValue": "Valor de origen",
+    "selectTargetValue": "Seleccionar valor de destino",
+    "targetValue": "Valor de destino",
+    "selectColumn": "Seleccionar columna..."
+  },
+  "timeAgo": {
+    "year": "año",
+    "month": "mes",
+    "week": "semana",
+    "day": "día",
+    "hour": "hora",
+    "minute": "minuto",
+    "second": "segundo",
+    "ago": "hace",
+    "in": "en",
+    "justNow": "Justo ahora"
+  },
+  "dialogForm": {
+    "save": "Guardar",
+    "cancel": "Cancelar",
+    "delete": "Eliminar",
+    "validationError": "Por favor corrija los errores de validación antes de enviar",
+    "errorOccurred": "Ocurrió un error"
+  },
+  "tel": {
+    "phoneNumber": "Número de teléfono",
+    "invalidPhone": "Por favor introduce un número de teléfono válido"
+  },
+  "email": {
+    "invalidEmail": "Introduce un correo electrónico válido",
+    "invalidDomain": "El dominio de este correo electrónico parece no ser válido"
+  },
+  "date": {
+    "invalidFormat": "Formato de fecha inválido"
+  },
+  "spreadsheet": {
+    "wrapText": "Ajuste de texto",
+    "selectAll": "Seleccionar todo",
+    "clearAll": "Limpiar todo"
+  },
+  "lightbox": {
+    "openFile": "Abrir archivo"
+  },
+  "color": {
+    "placeholder": "Introduce un color"
+  }
+}