@bagelink/vue 1.9.49 → 1.9.54

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

@@ -1,5 +1,5 @@
 import { DateLike } from '@vueuse/core';
-import { AvailableTimeLanguages, DateTimeAcceptedFormats } from '../../types/timeAgoT';
+import { DateTimeAcceptedFormats } from '../../types/timeAgoT';
 interface TimeDeltaOptions {
     Day?: number;
     Hour?: number;
@@ -24,8 +24,9 @@ interface TimeDeltaOptions {
     year?: number;
 }
 export declare function timeDelta(date: string | Date, options: TimeDeltaOptions): Date;
-export declare function timeAgo(date: string | Date, langOrConfig?: AvailableTimeLanguages | {
-    lang?: AvailableTimeLanguages;
+type TimeAgoLang = 'en' | 'es' | 'fr' | 'he' | 'it' | 'ru';
+export declare function timeAgo(date: string | Date, langOrConfig?: TimeAgoLang | {
+    lang?: TimeAgoLang;
     mode?: 'relative' | 'absolute';
 }): 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,sBAAsB,EAAE,uBAAuB,EAAkC,MAAM,sBAAsB,CAAA;AAE3H,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,QAiCvE;AAqDD,wBAAgB,OAAO,CACtB,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,YAAY,CAAC,EAAE,sBAAsB,GAAG;IAAE,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAAC,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAA;CAAE,UAiEzG;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;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"}

package/dist/utils/index.d.ts

@@ -24,7 +24,6 @@ export declare function normalizeURL(url: string): string;
 export declare function normalizeDimension(value: string | number | undefined, defaultMetric?: string): string | undefined;
 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/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"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"}

package/dist/utils/lang.d.ts

@@ -1,11 +1,10 @@
-declare function $tdb<T extends {
-    [key: string]: string;
-}>(langEl?: T): string;
+/**
+ * @deprecated Use `useI18n()` from '@bagelink/vue' instead.
+ * This will be removed in a future version.
+ */
 export declare function useLang(): {
     lang: import('vue').WritableComputedRef<string, string>;
-    $tdb: typeof $tdb;
-    availableLangs: import('vue').WritableComputedRef<string[], string[]>;
-    defaultLang: import('vue').WritableComputedRef<string, string>;
+    availableLangs: import('vue').ComputedRef<string[]>;
+    defaultLang: import('vue').ComputedRef<string>;
 };
-export {};
 //# sourceMappingURL=lang.d.ts.map

package/dist/utils/lang.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lang.d.ts","sourceRoot":"","sources":["../../src/utils/lang.ts"],"names":[],"mappings":"AAcA,iBAAS,IAAI,CAAC,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,MAAM,CAAC,EAAE,CAAC,GAAG,MAAM,CAOrE;AAED,wBAAgB,OAAO;;;;;EAsBtB"}
+{"version":3,"file":"lang.d.ts","sourceRoot":"","sources":["../../src/utils/lang.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,wBAAgB,OAAO;;;;EA6BtB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.9.49",
+  "version": "1.9.54",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",
@@ -81,6 +81,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^13.3.0",
+    "vue-i18n": "^11.2.8",
     "@zxcvbn-ts/core": "^3.0.4",
     "axios": "^1.9.0",
     "floating-vue": "^5.2.2",

package/src/components/AddressSearch.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { Dropdown, ListItem, ListView, TextInput } from '@bagelink/vue'
+import { Dropdown, ListItem, ListView, TextInput, useI18n } from '@bagelink/vue'
 import { ref } from 'vue'
 
 const emit = defineEmits(['addressSelected'])
+
+const { $t } = useI18n()
+
 const addressInput = ref('')
 const searchResults = ref<any[]>([])
 
@@ -31,7 +34,7 @@ async function searchAddresses() {
 	<div class="relative">
 		<Dropdown ref="suggestion" :noAutoFocus="true" placement="bottom-start">
 			<template #trigger>
-				<TextInput v-model="addressInput" placeholder="Enter address" @debounce="searchAddresses" />
+				<TextInput v-model="addressInput" :placeholder="$t('addressSearch.placeholder')" @debounce="searchAddresses" />
 			</template>
 			<ListView class="-mt-2 hm-300px">
 				<ListItem v-for="(result, index) in searchResults" :key="index" icon="location_on" :title="result.display_name" @click="emitAddress(result)" />

package/src/components/Btn.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { IconType, ExtendedThemeType } from '@bagelink/vue'
+import type { IconType, ExtendedThemeType, TranslatableString } from '@bagelink/vue'
 import type { SetupContext } from 'vue'
-import { Icon, Loading, useModal } from '@bagelink/vue'
+import { Icon, Loading, useModal, useI18n, resolveI18n } from '@bagelink/vue'
 import { useSlots, ref, onMounted, onUnmounted, computed } from 'vue'
 import { RouterLink } from 'vue-router'
 
@@ -22,7 +22,7 @@ const props = withDefaults(
 		type?: 'button' | 'submit' | 'reset'
 		loading?: boolean
 		role?: string
-		value?: string
+		value?: TranslatableString
 		to?: string
 		href?: string
 		round?: boolean
@@ -57,6 +57,8 @@ const emit = defineEmits<{
 	confirmed: [event: MouseEvent]
 }>()
 
+const { $t } = useI18n()
+
 const isMobileScreen = ref(false)
 
 function checkMobile() {
@@ -75,9 +77,9 @@ onUnmounted(() => {
 async function handleClick(event: MouseEvent) {
 	if (props.confirm !== undefined && props.confirm !== false) {
 		const { confirmModal } = useModal()
-		const message = typeof props.confirm === 'string' ? props.confirm : 'Are you sure?'
+		const message = typeof props.confirm === 'string' ? props.confirm : $t('modalConfirm.message')
 		const confirmed = await confirmModal({
-			title: 'Confirm',
+			title: $t('modalConfirm.title'),
 			message
 		})
 
@@ -167,7 +169,7 @@ const slots: SetupContext['slots'] = useSlots()
 			/>
 			<slot />
 			<template v-if="!slots.default && value">
-				{{ value }}
+				{{ resolveI18n(value) }}
 			</template>
 			<Icon
 				v-if="iconEnd" :icon="iconEnd" class="transition-400" :size="iconSizeComputed"

package/src/components/Filter.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import type { Option } from '@bagelink/vue'
 import type { ComparisonOperator, LogicalOperator, QueryConditions } from './queryFilter'
-import { Btn, DateInput, Dropdown, Icon, SelectInput, TextInput } from '@bagelink/vue'
+import { Btn, DateInput, Dropdown, Icon, SelectInput, TextInput, useI18n } from '@bagelink/vue'
 import { computed } from 'vue'
 
 type OptionsSource = Option[] | ((query: string) => Promise<Option[]>)
-type Language = 'he' | 'en'
 
 interface UICondition {
 	id: string
@@ -22,7 +21,6 @@ const props = defineProps<{
 		type?: 'string' | 'number' | 'boolean' | 'date'
 		options?: OptionsSource
 	}>
-	language?: Language
 }>()
 
 const emit = defineEmits<{
@@ -31,85 +29,48 @@ const emit = defineEmits<{
 
 const model = defineModel<QueryConditions<T>>({ default: () => [] })
 
+const { $t } = useI18n()
+
 let conditionIdCounter = 0
 function generateId() {
 	return `cond_${++conditionIdCounter}_${Date.now()}`
 }
 
-// Localization data
-const texts = {
-	he: {
-		filter: 'פילטר',
-		noActiveFilters: 'אין פילטרים פעילים',
-		connectors: {
-			and: 'וגם',
-			or: 'או'
-		},
-		operators: {
-			eq: 'שווה ל',
-			ne: 'לא שווה ל',
-			gt: 'גדול מ',
-			ge: 'גדול או שווה ל',
-			lt: 'קטן מ',
-			le: 'קטן או שווה ל',
-			co: 'מכיל',
-			sw: 'מתחיל ב',
-			ew: 'מסתיים ב',
-			pr: 'קיים'
-		},
-		placeholders: {
-			selectField: 'בחר שדה',
-			selectOption: 'בחירה',
-			selectDate: 'בחירת תאריך',
-			enterValue: 'ערך'
-		},
-		buttons: {
-			addCondition: 'הוספת תנאי',
-			clearAll: 'נקה הכל'
-		},
-		boolean: {
-			true: 'כן',
-			false: 'לא'
-		}
+// Computed texts using i18n
+const currentTexts = computed(() => ({
+	filter: $t('filter.filter'),
+	noActiveFilters: $t('filter.noActiveFilters'),
+	connectors: {
+		and: $t('filter.connectors.and'),
+		or: $t('filter.connectors.or'),
 	},
-	en: {
-		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'
-		},
-		boolean: {
-			true: 'Yes',
-			false: 'No'
-		}
-	}
-}
-
-// Get current language texts
-const currentTexts = computed(() => texts[props.language || 'en'])
+	operators: {
+		eq: $t('filter.operators.eq'),
+		ne: $t('filter.operators.ne'),
+		gt: $t('filter.operators.gt'),
+		ge: $t('filter.operators.ge'),
+		lt: $t('filter.operators.lt'),
+		le: $t('filter.operators.le'),
+		co: $t('filter.operators.co'),
+		sw: $t('filter.operators.sw'),
+		ew: $t('filter.operators.ew'),
+		pr: $t('filter.operators.pr'),
+	},
+	placeholders: {
+		selectField: $t('filter.placeholders.selectField'),
+		selectOption: $t('filter.placeholders.selectOption'),
+		selectDate: $t('filter.placeholders.selectDate'),
+		enterValue: $t('filter.placeholders.enterValue'),
+	},
+	buttons: {
+		addCondition: $t('filter.buttons.addCondition'),
+		clearAll: $t('filter.buttons.clearAll'),
+	},
+	boolean: {
+		true: $t('select.yes'),
+		false: $t('select.no'),
+	},
+}))
 
 // Map model conditions to UI conditions with stable IDs
 const conditionIds = new Map<number, string>()

package/src/components/ImportData.vue

@@ -13,13 +13,24 @@ import {
 	Spreadsheet,
 	useExcel,
 	DragOver,
+	useI18n,
 } from '@bagelink/vue'
 import { computed, reactive, ref, watch, watchEffect, toValue } from 'vue'
-
 import { useSchemaField } from '../composables/useSchemaField'
 import { formatString } from '../utils/strings'
 import TextInput from './form/inputs/TextInput.vue'
 
+const props = defineProps<{
+	schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
+	title?: string
+}>()
+
+const emit = defineEmits<{
+	(e: 'processedData', data: T[]): void
+}>()
+
+const { $t } = useI18n()
+
 interface SchemaItem {
 	id: string
 	label: string
@@ -55,15 +66,6 @@ interface Transformation {
 	targetValue: any
 }
 
-const props = defineProps<{
-	schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
-	title?: string
-}>()
-
-const emit = defineEmits<{
-	(e: 'processedData', data: T[]): void
-}>()
-
 // Get Excel utilities from composable
 const {
 	readSheetData,
@@ -1331,10 +1333,10 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 				</Btn>
 				<SelectInput
 					v-if="sheetNames.length > 1" v-model="selectedSheet" :options="sheetNames"
-					label="Select Sheet"
+					:label="$t('importData.selectSheet')"
 				/>
 				<CheckInput
-					v-model="hasHeaders" label="Mark this if file has a header row" class="m-0"
+					v-model="hasHeaders" :label="$t('importData.hasHeaders')" class="m-0"
 					style="--bgl-accent-color: var(--bgl-black); --bgl-primary: var(--bgl-black);"
 				/>
 			</div>
@@ -1464,22 +1466,22 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 								<SelectInput
 									v-if="fieldMapping[selectedTransformField.id]"
 									v-model="selectedSourceValue" searchable :options="sourceValueOptions"
-									placeholder="Select source value"
+									:placeholder="$t('importData.selectSourceValue')"
 								/>
 								<TextInput
 									v-else v-model="selectedSourceValue" type="text"
-									placeholder="Source value"
+									:placeholder="$t('importData.sourceValue')"
 								/>
 							</div>
 							<div class="grid-span-4">
 								<SelectInput
 									v-if="selectedTransformField.options && selectedTransformField.options.length > 0"
 									v-model="selectedTargetValue" searchable :options="selectedTransformField.options"
-									placeholder="Select target value"
+									:placeholder="$t('importData.selectTargetValue')"
 								/>
 								<TextInput
 									v-else v-model="selectedTargetValue" type="text"
-									placeholder="Target value"
+									:placeholder="$t('importData.targetValue')"
 								/>
 							</div>
 							<Btn
@@ -1491,7 +1493,7 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 				</div>
 
 				<div class="flex pt-05">
-					<Btn class="ms-auto" value="Close" @click="showTransformDialog = false" />
+					<Btn class="ms-auto" value="$t:importData.close" @click="showTransformDialog = false" />
 				</div>
 			</div>
 		</Modal>
@@ -1524,7 +1526,10 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 						<Pill>
 							{{ relatedFiles[selectedRelationField.id]!.name }}
 						</Pill>
-						<Btn thin round value="Change File" @click="relatedFiles[selectedRelationField.id] = null" />
+						<Btn
+							thin round value="$t:importData.changeFile"
+							@click="relatedFiles[selectedRelationField.id] = null"
+						/>
 					</div>
 
 					<div v-if="relatedFileData[selectedRelationField.id]">
@@ -1533,12 +1538,12 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 						<div class="flex gap-1">
 							<SelectInput
 								v-model="parentKeyField[selectedRelationField.id]" :options="fileHeaders"
-								label="Source Key Field (from this file)"
+								:label="$t('importData.sourceKeyField')"
 							/>
 							<SelectInput
 								v-model="relatedKeyField[selectedRelationField.id]"
 								:options="Object.keys(relatedFileData[selectedRelationField.id][0] || {})"
-								label="Related Key Field (from related file)"
+								:label="$t('importData.relatedKeyField')"
 							/>
 						</div>
 
@@ -1564,7 +1569,7 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 										<SelectInput
 											v-model="relatedFileMappings[selectedRelationField.id][schemaItem.id]"
 											:options="Object.keys(relatedFileData[selectedRelationField.id][0] || {})"
-											placeholder="Select column..."
+											:placeholder="$t('importData.selectColumn')"
 										/>
 									</td>
 									<td>
@@ -1599,7 +1604,7 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 					</div>
 				</div>
 				<div class="flex pt-05">
-					<Btn class="ms-auto" value="Close" @click="showRelatedDialog = false" />
+					<Btn class="ms-auto" value="$t:importData.close" @click="showRelatedDialog = false" />
 				</div>
 			</div>
 		</Modal>
@@ -1616,8 +1621,8 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 					Showing all {{ previewData.length }} records. You can edit values directly.
 				</p>
 				<div class="flex gap-1 mt-1 space-between">
-					<Btn flat thin value="Cancel" @click="showPreviewModal = false" />
-					<Btn value="Import Data" @click="processData()" />
+					<Btn flat thin value="$t:importData.cancel" @click="showPreviewModal = false" />
+					<Btn value="$t:importData.importData" @click="processData()" />
 				</div>
 			</div>
 		</Modal>
@@ -1671,11 +1676,12 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 									<SelectInput
 										v-if="relatedFileMappings[selectedRelatedTransformField.parentId]?.[selectedRelatedTransformField.field.id]"
 										v-model="selectedRelatedSourceValue" searchable
-										:options="relatedSourceValueOptions" placeholder="Select source value"
+										:options="relatedSourceValueOptions"
+										:placeholder="$t('importData.selectSourceValue')"
 									/>
 									<input
 										v-else v-model="selectedRelatedSourceValue" type="text"
-										placeholder="Source value"
+										:placeholder="$t('importData.sourceValue')"
 									>
 								</td>
 								<td>
@@ -1683,11 +1689,11 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 										v-if="selectedRelatedTransformField.field.options && selectedRelatedTransformField.field.options.length > 0"
 										v-model="selectedRelatedTargetValue" searchable
 										:options="selectedRelatedTransformField.field.options"
-										placeholder="Select target value"
+										:placeholder="$t('importData.selectTargetValue')"
 									/>
 									<input
 										v-else v-model="selectedRelatedTargetValue" type="text"
-										placeholder="Target value"
+										:placeholder="$t('importData.targetValue')"
 									>
 								</td>
 								<td>
@@ -1704,7 +1710,7 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 				</div>
 
 				<div>
-					<Btn value="Close" @click="showRelatedTransformDialog = false" />
+					<Btn value="$t:importData.close" @click="showRelatedTransformDialog = false" />
 				</div>
 			</div>
 		</Modal>

package/src/components/ModalConfirm.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { ThemeType } from '@bagelink/vue'
-import { Btn, Modal } from '@bagelink/vue'
+import { Btn, Modal, useI18n } from '@bagelink/vue'
+import { computed } from 'vue'
 
 const props = defineProps<{
 	title?: string
@@ -13,18 +14,19 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits(['update:visible'])
+const { $t } = useI18n()
 
 function select(val: boolean) {
 	props.resolve(val)
 	emit('update:visible')
 }
 
-const title = props.title || 'Confirm'
-const message = props.message || 'Are you sure you want to continue?'
-const confirmText = props.confirmText || 'Confirm'
-const cancelText = props.cancelText || 'Cancel'
-const confirmBtnColor: ThemeType = props.confirmBtnColor || 'green'
-const cancelBtnColor: ThemeType = props.cancelBtnColor || 'gray'
+const title = computed(() => props.title || $t('modalConfirm.title'))
+const message = computed(() => props.message || $t('modalConfirm.message'))
+const confirmText = computed(() => props.confirmText || $t('modalConfirm.confirm'))
+const cancelText = computed(() => props.cancelText || $t('modalConfirm.cancel'))
+const confirmBtnColor = computed((): ThemeType => props.confirmBtnColor || 'green')
+const cancelBtnColor = computed((): ThemeType => props.cancelBtnColor || 'gray')
 </script>
 
 <template>