@bagelink/vue 1.9.51 → 1.9.56

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/calendar/views/AgendaView.vue

@@ -165,7 +165,7 @@ onUnmounted(() => {
 			>
 				<div class="event-content">
 					<div class="event-time">
-						{{ formatDate(event.start_time, { fmt: 'HH:mm' }) }}
+						{{ formatDate(event.start_time, { format: 'HH:mm' }) }}
 					</div>
 					<div class="event-details">
 						<div class="event-title">

package/src/components/calendar/views/DayView.vue

@@ -233,7 +233,7 @@ onUnmounted(() => {
 								{{ event.title }}
 							</div>
 							<div class="event-time opacity-8">
-								{{ formatDate(new Date(event.start_time), { fmt: 'HH:mm' }) }} - {{ formatDate(new Date(event.end_time), { fmt: 'HH:mm' }) }}
+								{{ formatDate(new Date(event.start_time), { format: 'HH:mm' }) }} - {{ formatDate(new Date(event.end_time), { format: 'HH:mm' }) }}
 							</div>
 						</div>
 					</div>
@@ -251,9 +251,9 @@ onUnmounted(() => {
 					}"
 				>
 					<div class="color-primary txt-12 p-025">
-						{{ dragState.startTime ? formatDate(dragState.startTime, { fmt: 'HH:mm' }) : '' }}
+						{{ dragState.startTime ? formatDate(dragState.startTime, { format: 'HH:mm' }) : '' }}
 						-
-						{{ dragState.endTime ? formatDate(dragState.endTime, { fmt: 'HH:mm' }) : '' }}
+						{{ dragState.endTime ? formatDate(dragState.endTime, { format: 'HH:mm' }) : '' }}
 					</div>
 				</div>
 			</div>

package/src/components/calendar/views/MonthView.vue

@@ -122,7 +122,7 @@ function handleEventSelection(event: CalendarEvent, domEvent?: MouseEvent) {
 				}"
 			>
 				<div class="day-number">
-					{{ formatDate(day.date, { fmt: 'DD' }) }}
+					{{ formatDate(day.date, { format: 'DD' }) }}
 				</div>
 				<div class="day-events">
 					<template v-if="isMobile">

package/src/components/calendar/views/WeekView.vue

@@ -432,14 +432,14 @@ onUnmounted(() => {
 		<div ref="calendarGrid" class="weekGrid border-bottom me-1">
 			<div />
 			<div v-for="day in weekDays" :key="day.toISOString()" class="day-header p-05 txt-center m_txt12">
-				{{ formatDate(day, { fmt: 'DDD' }) }}
+				{{ formatDate(day, { format: 'DDD' }) }}
 				<span
 					class="txt-12 round p-025" :class="{
 						'color-gray': day.toDateString() !== new Date().toDateString(),
 						'bg-primary color-white': day.toDateString() === new Date().toDateString(),
 					}"
 				>
-					{{ formatDate(day, { fmt: 'DD' }) }}
+					{{ formatDate(day, { format: 'DD' }) }}
 				</span>
 			</div>
 		</div>
@@ -487,8 +487,8 @@ onUnmounted(() => {
 									{{ event.title }}
 								</div>
 								<div class="txt10 opacity-8 user-select-none">
-									{{ formatDate(event.start_time, { fmt: 'HH:mm' }) }} - {{ formatDate(event.end_time,
-										{ fmt: 'HH:mm' }) }}
+									{{ formatDate(event.start_time, { format: 'HH:mm' }) }} - {{ formatDate(event.end_time,
+										{ format: 'HH:mm' }) }}
 								</div>
 							</div>
 						</div>
@@ -507,9 +507,9 @@ onUnmounted(() => {
 					}"
 				>
 					<div class="color-primary txt-12 p-025">
-						{{ dragState.startTime ? formatDate(dragState.startTime, { fmt: 'HH:mm' }) : '' }} - {{
+						{{ dragState.startTime ? formatDate(dragState.startTime, { format: 'HH:mm' }) : '' }} - {{
 							dragState.endTime
-								? formatDate(dragState.endTime, { fmt: 'HH:mm' }) : '' }}
+								? formatDate(dragState.endTime, { format: 'HH:mm' }) : '' }}
 					</div>
 				</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)
@@ -46,7 +48,7 @@ const isOpen = ref(false)
 // Formatting utilities
 function formatDisplayDate(date: Date | string | undefined): string {
 	if (date === undefined || date === '') return ''
-	return formatDate(date, { fmt: props.enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY' })
+	return formatDate(date, { format: props.enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY' })
 }
 
 function parseUserInput(input: string): Date | null {
@@ -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 {