@bagelink/vue 1.9.49 → 1.9.54

package/src/components/Spreadsheet/Index.vue

@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-import { Btn, CheckInput, TextInput, ToggleInput, localRef, ListItem, Dropdown } from '@bagelink/vue'
+import { Btn, CheckInput, TextInput, ToggleInput, localRef, ListItem, Dropdown, useI18n } from '@bagelink/vue'
 import { computed, ref, watch, nextTick, onUnmounted } from 'vue'
 import SpreadsheetTable from './SpreadsheetTable.vue'
 
+const { modelValue, columnConfig, label, allowAddRow = true } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const { $t } = useI18n()
+
 // Define column configuration types
 type ColumnFormat = 'text' | 'number' | 'currency' | 'date' | 'percentage' | 'image' | 'boolean'
 
@@ -26,9 +32,6 @@ interface Props {
 	allowAddRow?: boolean
 }
 
-const { modelValue, columnConfig, label, allowAddRow = true } = defineProps<Props>()
-const emit = defineEmits(['update:modelValue'])
-
 // Helper function to flatten an object with dot notation
 function flattenObject(obj: { [key: string]: any }, prefix = ''): { [key: string]: any } {
 	const flattened: { [key: string]: any } = {}
@@ -692,29 +695,31 @@ const columnOptions = computed(() => {
 		<div class="flex gap-05 py-05 justify-content-end m_flex-wrap">
 			<label v-if="label" class="label me-auto">{{ label }}</label>
 			<div class="flex gap-075">
-				<TextInput ref="searchInputRef" v-model="search" icon="search" placeholder="Search" class="m-0 max-w200px" />
+				<TextInput
+					ref="searchInputRef" v-model="search" icon="search" placeholder="Search"
+					class="m-0 max-w200px"
+				/>
 				<Dropdown flat thin icon="more_vert">
 					<ListItem title="Paste" icon="paste" @click="pasteSelection" />
 					<ListItem title="copy" icon="copy" @click="copySelection" />
 					<ListItem title="Undo" icon="undo" :disabled="!canUndo" @click="undo" />
 					<ListItem title="Redo" icon="redo" :disabled="!canRedo" @click="redo" />
-					<ToggleInput v-model="wrapText" label="Wrap Text" />
+					<ToggleInput v-model="wrapText" :label="$t('spreadsheet.wrapText')" />
 					<Dropdown placement="auto-end">
 						<template #trigger="{ show }">
 							<ListItem title="Column Visibility" icon="view_column" @click="show()" />
 						</template>
 						<div class="p-05">
 							<div class="flex space-between">
-								<Btn flat thin small value="Select All" @click="visibleColumns = columnOptions.map(col => col.key)" />
-								<Btn flat thin small value="Clear All" @click="visibleColumns = []" />
+								<Btn
+									flat thin small value="$t:spreadsheet.selectAll"
+									@click="visibleColumns = columnOptions.map(col => col.key)"
+								/>
+								<Btn flat thin small value="$t:spreadsheet.clearAll" @click="visibleColumns = []" />
 							</div>
 							<CheckInput
-								v-for="col in columnOptions"
-								:key="col.key"
-								v-model="visibleColumns"
-								:value="col.key"
-								:label="col.label || col.key"
-								@update:modelValue="val => undefined"
+								v-for="col in columnOptions" :key="col.key" v-model="visibleColumns"
+								:value="col.key" :label="col.label || col.key" @update:modelValue="val => undefined"
 							/>
 						</div>
 					</Dropdown>
@@ -725,57 +730,27 @@ const columnOptions = computed(() => {
 			<div class="flex w-100p relative">
 				<!-- Fixed Columns -->
 				<SpreadsheetTable
-					v-if="fixedColumns.length"
-					:columns="fixedColumns"
-					:rows="filteredRows"
-					:is-fixed="true"
-					:show-row-numbers="true"
-					:column-widths="columnWidths"
-					:sort-column="sortColumn"
-					:sort-direction="sortDirection"
-					:selection-start="selectionStart"
-					:selection-end="selectionEnd"
-					:editing-cell="editingCell"
-					:base-column-index="0"
-					:wrap-text="wrapText"
-					class="sticky z-2 start-0 bg-white"
-					@sortColumn="sortByColumn"
-					@resizeStart="handleResizeStart"
-					@selectRow="selectEntireRow"
-					@cellMouseDown="handleMouseDown"
-					@cellMouseOver="handleMouseOver"
-					@cellEditStart="startEditing"
-					@cellKeyDown="handleCellKeyDown"
-					@updateCell="updateCell"
-					@stopEditing="handleStopEditingAndBlur"
-					@setInputRef="setInputRef"
+					v-if="fixedColumns.length" :columns="fixedColumns" :rows="filteredRows"
+					:is-fixed="true" :show-row-numbers="true" :column-widths="columnWidths" :sort-column="sortColumn"
+					:sort-direction="sortDirection" :selection-start="selectionStart" :selection-end="selectionEnd"
+					:editing-cell="editingCell" :base-column-index="0" :wrap-text="wrapText"
+					class="sticky z-2 start-0 bg-white" @sortColumn="sortByColumn" @resizeStart="handleResizeStart"
+					@selectRow="selectEntireRow" @cellMouseDown="handleMouseDown" @cellMouseOver="handleMouseOver"
+					@cellEditStart="startEditing" @cellKeyDown="handleCellKeyDown" @updateCell="updateCell"
+					@stopEditing="handleStopEditingAndBlur" @setInputRef="setInputRef"
 				/>
 
 				<!-- Scrollable Columns -->
 				<div class="flex-shrink flex-grow">
 					<SpreadsheetTable
-						:columns="scrollableColumns"
-						:rows="filteredRows"
-						:is-fixed="false"
-						:show-row-numbers="!fixedColumns.length"
-						:column-widths="columnWidths"
-						:sort-column="sortColumn"
-						:sort-direction="sortDirection"
-						:selection-start="selectionStart"
-						:selection-end="selectionEnd"
-						:editing-cell="editingCell"
-						:base-column-index="fixedColumns.length"
-						:wrap-text="wrapText"
-						@sortColumn="sortByColumn"
-						@resizeStart="handleResizeStart"
-						@selectRow="selectEntireRow"
-						@cellMouseDown="handleMouseDown"
-						@cellMouseOver="handleMouseOver"
-						@cellEditStart="startEditing"
-						@cellKeyDown="handleCellKeyDown"
-						@updateCell="updateCell"
-						@stopEditing="handleStopEditingAndBlur"
-						@setInputRef="setInputRef"
+						:columns="scrollableColumns" :rows="filteredRows" :is-fixed="false"
+						:show-row-numbers="!fixedColumns.length" :column-widths="columnWidths" :sort-column="sortColumn"
+						:sort-direction="sortDirection" :selection-start="selectionStart" :selection-end="selectionEnd"
+						:editing-cell="editingCell" :base-column-index="fixedColumns.length" :wrap-text="wrapText"
+						@sortColumn="sortByColumn" @resizeStart="handleResizeStart" @selectRow="selectEntireRow"
+						@cellMouseDown="handleMouseDown" @cellMouseOver="handleMouseOver" @cellEditStart="startEditing"
+						@cellKeyDown="handleCellKeyDown" @updateCell="updateCell"
+						@stopEditing="handleStopEditingAndBlur" @setInputRef="setInputRef"
 					/>
 				</div>
 			</div>

package/src/components/form/FieldArray.vue

@@ -10,7 +10,7 @@ import type {
 	Path
 } from '@bagelink/vue'
 import type { MaybeRefOrGetter } from 'vue'
-import { BagelForm, Btn, Loading, Icon, Card } from '@bagelink/vue'
+import { BagelForm, Btn, Loading, Icon, Card, useI18n } from '@bagelink/vue'
 import { ref, computed, watch, toValue, onMounted } from 'vue'
 
 export interface FieldArrayProps<T, P extends Path<T>> {
@@ -52,6 +52,8 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue'])
 
+const { $t } = useI18n()
+
 const BagelFormFA = BagelForm<T, P>
 
 // State
@@ -297,7 +299,7 @@ const showMinimizeButton = computed(() => {
 						v-if="props.defaultValue && props.defaultValue.length > 0" thin color="primary"
 						class="txt12 mb-05" @click="loadDefaults"
 					>
-						Load Default {{ label || 'Items' }}
+						{{ $t('fieldArray.loadDefault', { label: label || 'Items' }) }}
 					</Btn>
 				</Card>
 

package/src/components/form/inputs/ColorInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Btn } from '@bagelink/vue'
+import { Btn, useI18n } from '@bagelink/vue'
 import { ref, watch } from 'vue'
 
 const props = withDefaults(
@@ -17,7 +17,11 @@ const props = withDefaults(
 		editMode: true,
 	},
 )
+
 const emits = defineEmits(['update:modelValue'])
+
+const { $t } = useI18n()
+
 const inputVal = ref<string>(props.modelValue)
 
 watch(
@@ -32,34 +36,36 @@ watch(
 			{{ label }}
 			<div class="flex rounded colorInputPickWrap" :class="{ 'px-025 bg-input': !small }">
 				<input
-					:id="id"
-					v-model="inputVal" class="border" type="color" :placeholder="placeholder || label"
-					:class="{ 'no-edit': !editMode, 'opacity-1': !inputVal }" :required="required" v-bind="nativeInputAttrs"
+					:id="id" v-model="inputVal" class="border" type="color" :placeholder="placeholder || label"
+					:class="{ 'no-edit': !editMode, 'opacity-1': !inputVal }" :required="required"
+					v-bind="nativeInputAttrs"
 				>
 				<input
-					v-if="!small"
-					v-model="inputVal"
-					class="flex-grow-1 border colorInputPick"
-					type="text"
-					placeholder="Enter color"
+					v-if="!small" v-model="inputVal" class="flex-grow-1 border colorInputPick" type="text"
+					:placeholder="$t('color.placeholder')"
 				>
-				<Btn :class="{ 'not-allowed opacity-3': !inputVal }" round flat thin icon="clear" @click="inputVal = ''" />
+				<Btn
+					:class="{ 'not-allowed opacity-3': !inputVal }" round flat thin icon="clear"
+					@click="inputVal = ''"
+				/>
 			</div>
 		</label>
 	</div>
 </template>
 
 <style>
-.colorInputPick{
+.colorInputPick {
 	--input-font-size: 12px;
 	background: transparent !important;
 	height: var(--input-height) !important;
 	min-width: 50px !important;
 }
-.colorInputPick:focus{
+
+.colorInputPick:focus {
 	outline: none;
 	box-shadow: none !important;
 }
+
 .colorInputPickWrap:focus-within {
 	box-shadow: inset 0 0 10px #00000021;
 	outline-color: var(--input-bg);

package/src/components/form/inputs/DateInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ModeType } from '../../../utils/calendar/typings'
-import { TextInput, Dropdown, formatDate } from '@bagelink/vue'
+import { TextInput, Dropdown, formatDate, useI18n } from '@bagelink/vue'
 import { onClickOutside } from '@vueuse/core'
 import { ref, onMounted, watch } from 'vue'
 import { WEEK_START_DAY } from '../../../utils/calendar/time'
@@ -37,6 +37,8 @@ const props = withDefaults(
 	},
 )
 
+const { $t } = useI18n()
+
 const selectedDate = defineModel<string | Date>()
 const inputValue = ref('')
 const isValid = ref(true)
@@ -181,9 +183,10 @@ onMounted(() => {
 					<TextInput
 						v-model="inputValue" iconStart="calendar"
 						:placeholder="enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY'" :required="required"
-						:disabled="!editMode" :error="!isValid ? 'Invalid date format' : error"
-						:class="{ 'txt-center': center }" class="date-input m-0" @input="handleInput" @focus="handleFocus"
-						@blur="handleBlur" @click.stop @keydown="handleKeydown" @iconClick="handleIconClick"
+						:disabled="!editMode" :error="!isValid ? $t('date.invalidFormat') : error"
+						:class="{ 'txt-center': center }" class="date-input m-0" @input="handleInput"
+						@focus="handleFocus" @blur="handleBlur" @click.stop @keydown="handleKeydown"
+						@iconClick="handleIconClick"
 					/>
 				</div>
 			</template>

package/src/components/form/inputs/EmailInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { IconType, ValidateInputBaseT } from '@bagelink/vue'
-import { Icon, useDebounceFn } from '@bagelink/vue'
+import { Icon, useDebounceFn, useI18n } from '@bagelink/vue'
 import { onMounted, ref, watch, nextTick } from 'vue'
 import { EMAIL_REGEX } from '../../../utils/constants'
 
@@ -17,6 +17,8 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue', 'debounce'])
 
+const { $t } = useI18n()
+
 export interface EmailInputProps extends ValidateInputBaseT {
 	id?: string
 	title?: string
@@ -108,7 +110,7 @@ function validateEmail(value: string) {
 
 	// Basic format validation
 	if (!EMAIL_REGEX.test(value)) {
-		return 'Please enter a valid email address'
+		return $t('email.invalidEmail')
 	}
 
 	// Check for fake email providers if enabled
@@ -173,7 +175,7 @@ async function validateEmailWithServer(email: string) {
 		validatedEmails.set(email, isValid)
 
 		if (!isValid) {
-			validationMessage.value = 'This email domain appears to be invalid'
+			validationMessage.value = $t('email.invalidDomain')
 			input.value?.setCustomValidity(validationMessage.value)
 		} else {
 			input.value?.setCustomValidity('')
@@ -467,9 +469,9 @@ onMounted(() => {
 .error-message {
 	color: var(--bgl-red, #dc3545);
 	font-size: 10px;
-		position: absolute;
-		inset-inline-end: 0;
-		bottom: -0.9rem;
-		margin-top: 0.25rem;
+	position: absolute;
+	inset-inline-end: 0;
+	bottom: -0.9rem;
+	margin-top: 0.25rem;
 }
 </style>

package/src/components/form/inputs/PasswordInput.vue

@@ -1,9 +1,20 @@
 <script setup lang="ts">
 import type { IconType } from '@bagelink/vue'
-import { Btn, TextInput } from '@bagelink/vue'
+import { Btn, TextInput, useI18n } from '@bagelink/vue'
 import { zxcvbn } from '@zxcvbn-ts/core'
 import { computed } from 'vue'
 
+const props = withDefaults(
+	defineProps<TextInputProps>(),
+	{
+		autocomplete: 'current-password',
+		label: '',
+		strengthMeter: false
+	}
+)
+
+const { $t } = useI18n()
+
 export interface TextInputProps {
 	id?: string
 	title?: string
@@ -31,15 +42,6 @@ export interface TextInputProps {
 	strengthMeter?: boolean
 	error?: string
 }
-const props = withDefaults(
-	defineProps<TextInputProps>(),
-	{
-		autocomplete: 'current-password',
-		label: '',
-		strengthMeter: false
-	}
-)
-
 const password = defineModel<string>('modelValue')
 const showPwd = defineModel<boolean>('showPwd', { default: false })
 
@@ -73,11 +75,11 @@ const strengthColor = computed(() => {
 const strengthLabel = computed(() => {
 	const score = strengthScore.value
 	if (score == null) return ''
-	if (score === 0) return 'Very Weak'
-	if (score === 1) return 'Weak'
-	if (score === 2) return 'Fair'
-	if (score === 3) return 'Good'
-	return 'Strong'
+	if (score === 0) return $t('password.veryWeak')
+	if (score === 1) return $t('password.weak')
+	if (score === 2) return $t('password.fair')
+	if (score === 3) return $t('password.good')
+	return $t('password.strong')
 })
 
 const strengthPercentage = computed(() => {

package/src/components/form/inputs/RadioPillsInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Option } from '@bagelink/vue'
-
+import { useI18n } from '@bagelink/vue'
 import { onMounted, ref, watch } from 'vue'
 
 const props = withDefaults(
@@ -19,17 +19,19 @@ const props = withDefaults(
 
 const emits = defineEmits(['update:modelValue'])
 
+const { $t } = useI18n()
+
 function getLabel(option: Option) {
 	if (typeof option === 'string') { return option }
 	if (typeof option === 'number') { return `${option}` }
-	if (typeof option === 'boolean') { return option ? 'Yes' : 'No' }
+	if (typeof option === 'boolean') { return option ? $t('select.yes') : $t('select.no') }
 	return option.label
 }
 
 function getValue(option: Option) {
 	if (typeof option === 'string') { return option }
 	if (typeof option === 'number') { return option }
-	if (typeof option === 'boolean') { return option ? 'Yes' : 'No' }
+	if (typeof option === 'boolean') { return option ? $t('select.yes') : $t('select.no') }
 	return option.value
 }
 

package/src/components/form/inputs/SelectInput.vue

@@ -1,18 +1,19 @@
 <script lang="ts" setup>
 import type { IconType, Option } from '@bagelink/vue'
 import type { AlignedPlacement } from '../../Dropdown.vue'
-import { Btn, Card, Skeleton, Dropdown, Icon, TextInput, useSearch } from '@bagelink/vue'
+import { Btn, Card, Skeleton, Dropdown, Icon, TextInput, useSearch, useI18n } from '@bagelink/vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import 'floating-vue/style.css'
 
-type OptionsSource = Option[] | ((query: string) => Promise<Option[]>)
 const props = withDefaults(defineProps<PropTypes>(), {
-	placeholder: 'Select',
 	placement: 'bottom-start',
 })
 
 const emit = defineEmits(['update:modelValue'])
 
+const { $t } = useI18n()
+
+type OptionsSource = Option[] | ((query: string) => Promise<Option[]>)
 const isAsyncSource = (src: OptionsSource): src is (q: string) => Promise<Option[]> => typeof src === 'function'
 
 type Primitive = string | number | boolean
@@ -47,9 +48,10 @@ const searchTerm = ref<string>('')
 const dropdown = ref<InstanceType<typeof Dropdown> | undefined>()
 const selected = ref(false)
 const open = ref(false)
+const selectPlaceholder = computed(() => props.placeholder ?? $t('select.placeholder'))
 
 const selectedLabel = computed((): string => {
-	if (selectedItemCount.value === 0) { return props.placeholder }
+	if (selectedItemCount.value === 0) { return selectPlaceholder.value }
 	if (selectedItemCount.value > 4) {
 		const str = selectedItems.value
 			.slice(0, 4)
@@ -59,8 +61,8 @@ const selectedLabel = computed((): string => {
 	}
 	return selectedItems.value.map(item => getLabel(item)).join(', ')
 })
-const searchPlaceholder = computed(() => props.searchPlaceholder ?? selectedLabel.value ?? 'Search')
 
+const searchPlaceholder = computed(() => props.searchPlaceholder ?? selectedLabel.value ?? $t('select.search'))
 const { results, isLoading } = useSearch<Option>({
 	searchTerm: () => searchTerm.value,
 	serverSearch: isAsyncSource(props.options) ? props.options : undefined,
@@ -113,8 +115,8 @@ function scrollToSelectedItem() {
 function getLabel(option: Option) {
 	if (option == null) { return '' }
 	if (typeof option === 'object') { return option.label ?? String((option as any).value ?? '') }
-	if (option === true) { return 'Yes' }
-	if (option === false) { return 'No' }
+	if (option === true) { return $t('select.yes') }
+	if (option === false) { return $t('select.no') }
 	return String(option)
 }
 
@@ -433,9 +435,9 @@ onMounted(() => {
 .error-message {
 	color: var(--bgl-red, #dc3545);
 	font-size: 10px;
-		position: absolute;
-		inset-inline-end: 0;
-		bottom: -0.9rem;
-		margin-top: 0.25rem;
+	position: absolute;
+	inset-inline-end: 0;
+	bottom: -0.9rem;
+	margin-top: 0.25rem;
 }
 </style>

package/src/components/form/inputs/TelInput.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Country } from '@bagelink/vue'
 import type { CountryCode } from 'libphonenumber-js'
-import { Dropdown, Flag, Icon, TextInput, allCountries, ipapi } from '@bagelink/vue'
+import { Dropdown, Flag, Icon, TextInput, allCountries, ipapi, useI18n } from '@bagelink/vue'
 import { parsePhoneNumberFromString } from 'libphonenumber-js'
 import { computed, onMounted, ref, watch } from 'vue'
 
@@ -19,6 +19,8 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:modelValue', 'blur', 'focus', 'keydown', 'input', 'paste'])
 
+const { $t } = useI18n()
+
 const phoneNumber = ref(props.modelValue ?? '')
 const search = ref('')
 const activeCountry = ref<Country>()
@@ -64,9 +66,9 @@ const activeCountryCode = computed(() => activeCountry.value?.iso2)
 const computedPlaceholder = computed(() => {
 	if (props.placeholder) return props.placeholder
 	if (activeCountry.value) {
-		return `+${activeCountry.value.dialCode} ${props.label || 'Phone Number'}`
+		return `+${activeCountry.value.dialCode} ${props.label || $t('tel.phoneNumber')}`
 	}
-	return props.label || 'Phone Number'
+	return props.label || $t('tel.phoneNumber')
 })
 
 function selectCountry(country: Country) {
@@ -139,12 +141,12 @@ function validatePhoneNumber() {
 			inputRef.value.setCustomValidity('')
 			isValid.value = true
 		} else {
-			inputRef.value.setCustomValidity('Please enter a valid phone number')
+			inputRef.value.setCustomValidity($t('tel.invalidPhone'))
 			isValid.value = false
 		}
 	} catch (error) {
 		console.error('Error validating phone number:', error)
-		inputRef.value.setCustomValidity('Please enter a valid phone number')
+		inputRef.value.setCustomValidity($t('tel.invalidPhone'))
 		isValid.value = false
 	}
 }
@@ -349,10 +351,10 @@ onMounted(initializeCountry)
 .error-message {
 	color: var(--bgl-red, #dc3545);
 	font-size: 10px;
-		position: absolute;
-		inset-inline-end: 0;
-		bottom: -0.9rem;
-		margin-top: 0.25rem;
+	position: absolute;
+	inset-inline-end: 0;
+	bottom: -0.9rem;
+	margin-top: 0.25rem;
 }
 
 @keyframes highlight-country {

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>