@bagelink/vue 1.2.65 → 1.2.71

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

@@ -1,359 +1,199 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import type { Country } from '@bagelink/vue'
-import type { CountryCode, NumberFormat } from 'libphonenumber-js'
-import type { Raw, StyleValue, Ref } from 'vue'
-import {
-	Dropdown,
-	Flag,
-	Icon,
-	TextInput,
-	allCountries,
-	useDebounceFn
-} from '@bagelink/vue'
+import type { CountryCode } from 'libphonenumber-js'
+import { Dropdown, Flag, Icon, TextInput, allCountries } from '@bagelink/vue'
 import axios from 'axios'
 import { parsePhoneNumberFromString } from 'libphonenumber-js'
-import { onMounted, watch, ref, computed } from 'vue'
+import { onMounted, watch, ref } from 'vue'
 
-export interface TelInputProps {
-	label?: string
+const props = defineProps<{
 	id?: string
-	class?: string
-	autocomplete?: 'on' | 'off' | 'tel'
-	placeholder?: string
-	required?: boolean
+	label?: string
 	modelValue: string
-	allCountries?: Country[]
-	autoFormat?: boolean
-	customValidate?: boolean | RegExp
-	defaultCountry?: string | number
-	disabled?: boolean
-	searchable?: boolean
-	autoDefaultCountry?: boolean
-	inputOptions?: Partial<typeof defaultInputOptions>
-	dropdownOptions?: Partial<typeof defaultDropdownOptions>
+	placeholder?: string
 	excludeCountries?: string[]
-	mode?: NumberFormat
 	onlyCountries?: string[]
-	preferredCountries?: string[]
-	parseArg?: { extract?: boolean }
-}
+	required?: boolean
+	disabled?: boolean
+}>()
 
-const props = withDefaults(defineProps<TelInputProps>(), {
-	modelValue: '',
-	autocomplete: 'on',
-	allCountries: () => allCountries,
-	autoFormat: true,
-	customValidate: false,
-	defaultCountry: '',
-	placeholder: 'Enter a phone number',
-	searchable: true,
-	disabled: false,
-	autoDefaultCountry: true,
-	excludeCountries: () => [],
-	required: false,
-	mode: 'INTERNATIONAL',
-	onlyCountries: () => [],
-	preferredCountries: () => [],
-	showDropdown: true,
-})
+const emit = defineEmits(['update:modelValue', 'blur', 'focus', 'keydown', 'input', 'paste'])
 
-const emit = defineEmits([
-	'update:modelValue',
-	'change',
-	'input',
-	'blur',
-	'focus',
-	'country-changed',
-	'enter',
-	'space',
-	'debounce',
-])
-
-const open = ref(false)
-const dropdownOpenDirection = ref('below')
-
-const defaultDropdownOptions = {
-	hide: false,
-	disabled: false,
-	showFlags: true,
-	showDialCodeInSelection: true,
-	showDialCodeInList: true,
-	searchable: true,
-}
+let phoneNumber = $ref(props.modelValue)
+let search = $ref('')
+let activeCountry = $ref<Country>()
+const searchInput = $ref<InstanceType<typeof TextInput>>()
+let open = $ref(false)
+const inputRef = ref<HTMLInputElement | null>(null)
+let isValid = $ref(true)
 
-const defaultInputOptions = {
-	'showDialCode': true,
-	'autofocus': false,
-	'aria-describedby': '',
-	'id': '',
-	'maxlength': 25,
-	'minlength': 9,
-	'pattern': undefined as string | undefined,
-	'name': '',
-	'readonly': false,
-	'tabindex': 0,
-	'style': '' as Raw<StyleValue>,
-	// 'placeholder': 'Enter a phone number',
-}
+// Watch for changes to phoneNumber and emit update events
+watch(() => phoneNumber, (newValue) => {
+	emit('update:modelValue', newValue)
+})
 
-const computedDropDownOptions = $computed(() => ({
-	...defaultDropdownOptions,
-	...props.dropdownOptions,
-}))
-
-const computedInputOptions = $computed(() => ({
-	...defaultInputOptions,
-	...props.inputOptions,
-}))
-
-// Composables
-function useCountrySelection(props: TelInputProps, emit: any) {
-	const activeCountryCode = ref<CountryCode>()
-	const selectedIndex = ref<number>()
-	const searchQuery = ref('')
-
-	const activeCountry = computed(() => props.allCountries?.find(
-		country => country.iso2 === activeCountryCode.value?.toUpperCase(),
-	))
-
-	const filteredCountries = computed(() => {
-		const countries = props.allCountries || []
-		const onlyCountries = props.onlyCountries || []
-		const excludeCountries = props.excludeCountries || []
-
-		if (onlyCountries.length > 0) {
-			return countries.filter(({ iso2 }) => onlyCountries.some(c => c.toUpperCase() === iso2))
-		}
-		if (excludeCountries.length > 0) {
-			return countries.filter(
-				({ iso2 }) => !excludeCountries.includes(iso2.toUpperCase())
-					&& !excludeCountries.includes(iso2.toLowerCase()),
-			)
-		}
-		return countries
-	})
-
-	const sortedCountries = computed(() => {
-		const preferredCountries = getCountries(props.preferredCountries || [])
-		const countriesList = [...preferredCountries, ...filteredCountries.value]
-		const cleanInput = searchQuery.value.replaceAll(
-			/[~`!#$%&*()+={};:'"<>.,\\/@-]/g,
-			'',
-		).toLowerCase()
-		return countriesList
-			.filter(
-				c => new RegExp(cleanInput, 'i').test(c.name || '')
-					|| new RegExp(cleanInput, 'i').test(c.iso2 || '')
-					|| new RegExp(cleanInput, 'i').test(c.dialCode || ''),
-			)
-			.filter(Boolean)
-	})
-
-	const findCountry = (iso: string) => filteredCountries.value.find(
-		country => country.iso2 === iso.toUpperCase()
-	)
-
-	const findCountryByDialCode = (dialCode: number) => filteredCountries.value.find((country: Country) => Number(country.dialCode) === dialCode)
-
-	function getCountries(list: string[]): Country[] {
-		const countryList: Country[] = []
-		list.forEach((countryCode) => {
-			const country = findCountry(countryCode)
-			if (country) countryList.push(country)
-		})
-		return countryList
+// Watch for changes to the modelValue prop
+watch(() => props.modelValue, (newValue) => {
+	if (newValue !== phoneNumber) {
+		phoneNumber = newValue
 	}
+})
 
-	async function initializeCountry() {
-		if (props.defaultCountry) {
-			if (typeof props.defaultCountry === 'string') {
-				chooseCountry(props.defaultCountry)
-				return
-			}
-			if (typeof props.defaultCountry === 'number') {
-				const country = findCountryByDialCode(props.defaultCountry)
-				if (country) {
-					chooseCountry(country.iso2)
-					return
-				}
-			}
-		}
-
-		const fallbackCountry = sortedCountries.value[0]
-
-		if (props.autoDefaultCountry) {
-			try {
-				const res = (await getIp()).country
-				chooseCountry(res || activeCountryCode.value)
-			} catch (error) {
-				console.warn(error)
-				chooseCountry(fallbackCountry.iso2)
-			}
-		} else {
-			chooseCountry(fallbackCountry.iso2)
-		}
+const countries = $computed(() => {
+	let filteredCountries = allCountries
+	if (props.excludeCountries && props.excludeCountries.length) {
+		const excludeCountries = props.excludeCountries.map(c => c.toLowerCase())
+		filteredCountries = filteredCountries.filter(c => !excludeCountries.includes(c.iso2.toLowerCase()))
 	}
-
-	function chooseCountry(country?: string) {
-		if (!country) return
-		const parsedCountry = findCountry(country)
-		if (!parsedCountry) return
-		activeCountryCode.value = parsedCountry.iso2
-		emit('country-changed', parsedCountry)
-		open.value = false
+	if (props.onlyCountries && props.onlyCountries.length) {
+		const onlyCountries = props.onlyCountries.map(c => c.toLowerCase())
+		filteredCountries = filteredCountries.filter(c => onlyCountries.includes(c.iso2.toLowerCase()))
 	}
+	if (search.length) {
+		const lowerCaseSearch = search.toLowerCase()
+		filteredCountries = filteredCountries.filter(c => c.name.toLowerCase().includes(lowerCaseSearch)
+			|| c.iso2.toLowerCase().includes(lowerCaseSearch)
+			|| c.dialCode.includes(search.replace('+', ''))
+		)
+	}
+	return filteredCountries
+})
 
-	watch(
-		() => activeCountry.value,
-		(value, oldValue) => {
-			if (!value && oldValue?.iso2) {
-				activeCountryCode.value = oldValue.iso2
-				return
-			}
-			if (value?.iso2) emit('country-changed', value)
-		},
-	)
-
-	return {
-		activeCountryCode,
-		activeCountry,
-		selectedIndex,
-		searchQuery,
-		sortedCountries,
-		chooseCountry,
-		initializeCountry,
-		findCountry,
-		findCountryByDialCode
+const activeCountryCode = $computed(() => activeCountry?.iso2)
+
+function selectCountry(country: Country) {
+	activeCountry = country
+	open = false
+	search = ''
+	if (!phoneNumber) phoneNumber = `+${activeCountry.dialCode}`
+}
+
+async function getIp() {
+	let apiData = sessionStorage.getItem('ipapi')
+	if (!apiData) {
+		apiData = (await axios.get('https://ipapi.co/json/')).data
+		apiData = JSON.stringify(apiData)
+		sessionStorage.setItem('ipapi', apiData)
 	}
+	const { country_code } = JSON.parse(apiData)
+	selectCountry(countries.find(c => c.iso2 === country_code) ?? countries[0])
 }
 
-function usePhoneNumberFormatting(props: TelInputProps, activeCountryCode: Ref<CountryCode | undefined>) {
-	const parseArgs = computed(() => ({
-		...props.parseArg,
-		defaultCountry: activeCountryCode.value,
-	}))
-
-	function formatPhone(val: string): string {
-		// First, try to parse the number as is
-		let phoneNumber = parsePhoneNumberFromString(val, parseArgs.value)
-
-		// If parsing failed and there's a + at the start, try removing any existing country code
-		if (!phoneNumber && val.startsWith('+')) {
-			const currentCountry = props.allCountries?.find(c => c.iso2 === activeCountryCode.value)
-			if (currentCountry) {
-				// Remove the current country code if it exists
-				const { dialCode } = currentCountry
-				const withoutDialCode = val.replace(new RegExp(`^\\+${dialCode}`), '')
-				// Try parsing again with the cleaned number
-				phoneNumber = parsePhoneNumberFromString(withoutDialCode, parseArgs.value)
-			}
-		}
+// Get the country code for use with libphonenumber-js
+function getCountryCode(): CountryCode | undefined {
+	return activeCountry?.iso2 ? activeCountry.iso2.toUpperCase() as CountryCode : undefined
+}
 
-		if (!phoneNumber) {
-			const dialCode = props.allCountries?.find(
-				c => c.iso2 === activeCountryCode.value
-			)?.dialCode || ''
+// Parse and format the phone number
+function parseAndFormatPhoneNumber(value: string): string {
+	if (!value) return value
 
-			if (props.mode === 'INTERNATIONAL') return `+${dialCode}`
-			return dialCode
+	try {
+		const parsedNumber = parsePhoneNumberFromString(value, getCountryCode())
+		if (parsedNumber && parsedNumber.isValid()) {
+			return parsedNumber.formatInternational()
 		}
+	} catch (error) {
+		console.error('Error parsing phone number:', error)
+	}
+	return value
+}
 
-		// Format the number according to the selected mode
-		const formattedNumber = phoneNumber.format(props.mode || 'INTERNATIONAL')
+// Validate the phone number and set custom validity
+function validatePhoneNumber() {
+	if (!inputRef.value) return
 
-		// For international format, ensure proper formatting with country code
-		if (props.mode === 'INTERNATIONAL') {
-			const countryCode = phoneNumber.countryCallingCode
-			const { nationalNumber } = phoneNumber
-			return `+${countryCode}${nationalNumber}`
+	try {
+		const parsedNumber = parsePhoneNumberFromString(phoneNumber, getCountryCode())
+		if (parsedNumber && parsedNumber.isValid()) {
+			inputRef.value.setCustomValidity('')
+			isValid = true
+		} else {
+			inputRef.value.setCustomValidity('Please enter a valid phone number')
+			isValid = false
 		}
-
-		return formattedNumber.replaceAll(' ', '') || ''
-	}
-
-	return {
-		formatPhone,
-		parseArgs
+	} catch (error) {
+		inputRef.value.setCustomValidity('Please enter a valid phone number')
+		isValid = false
 	}
 }
 
-const debouncedEmit = useDebounceFn((maybeFormatted: string) => { emit('debounce', maybeFormatted) })
-
-const {
-	activeCountryCode,
-	selectedIndex,
-	searchQuery,
-	sortedCountries,
-	chooseCountry,
-	initializeCountry
-} = useCountrySelection(props, emit)
+function detectCountryFromNumber(value: string): boolean {
+	if (!value.startsWith('+')) return false
 
-const { formatPhone } = usePhoneNumberFormatting(props, activeCountryCode)
+	const digits = value.replace(/\D/g, '')
+	if (digits.length <= 1) return false
 
-const isPreferred = (country?: Country) => props.preferredCountries.includes(country?.iso2 as CountryCode) || false
+	for (const country of countries) {
+		if (digits.startsWith(country.dialCode) && country !== activeCountry) {
+			selectCountry(country)
+			return true
+		}
+	}
+	return false
+}
 
-// Method: reset
-function reset() {
-	if (!sortedCountries.value || !activeCountryCode.value) return
-	selectedIndex.value = sortedCountries.value.findIndex(
-		(c: Country) => c.iso2 === activeCountryCode.value
-	)
-	open.value = false
+async function initializeCountry() {
+	if (phoneNumber) {
+		detectCountryFromNumber(phoneNumber)
+	} else {
+		await getIp()
+	}
+	const formatted = parseAndFormatPhoneNumber(phoneNumber)
+	if (formatted !== phoneNumber) {
+		phoneNumber = formatted
+		emit('input', phoneNumber)
+		validatePhoneNumber()
+	}
+	validatePhoneNumber()
 }
 
-const phone = defineModel<string>('modelValue', {
-	default: '',
-	set: (value) => {
-		let maybeFormatted = value
-		if (value.length > 5) {
-			maybeFormatted = formatPhone(`${value}`)
-			if (!maybeFormatted) {
-				emit('update:modelValue', '')
-				return ''
-			}
+function handlePhoneInput(event: Event) {
+	const input = event.target as HTMLInputElement
+	const { value } = input
+	detectCountryFromNumber(value)
+
+	if (value.startsWith('+')) {
+		const formatted = parseAndFormatPhoneNumber(value)
+		if (formatted !== value) {
+			phoneNumber = formatted
+			emit('input', event)
+			validatePhoneNumber()
+			return
 		}
+	}
 
-		emit('update:modelValue', maybeFormatted)
-		debouncedEmit(maybeFormatted)
-		return maybeFormatted
-	},
-	get: value => value,
-})
-
-function onBlur() { emit('blur') }
-function onFocus() { emit('focus') }
-function onEnter() { emit('enter') }
-function onSpace() { emit('space') }
-
-function handleInput(e: KeyboardEvent) {
-	const keyVal = (e.key as string | undefined) ?? ''
-	if (keyVal.length > 1 || e.metaKey) return
-
-	const hasBadChars = /[^+\d]/.test(keyVal)
+	phoneNumber = value
+	emit('input', event)
+	validatePhoneNumber()
+}
 
-	if (!hasBadChars) return
+function handleBlur(event: Event) {
+	if (phoneNumber && !phoneNumber.startsWith('+') && activeCountry) {
+		const nationalNumber = phoneNumber.replace(/^0+/, '')
+		phoneNumber = `+${activeCountry.dialCode} ${nationalNumber}`
+	} else if (phoneNumber) {
+		phoneNumber = parseAndFormatPhoneNumber(phoneNumber)
+	}
 
-	e.preventDefault()
+	validatePhoneNumber()
+	emit('blur', event)
 }
 
-async function getIp() {
-	const apiData = sessionStorage.getItem('ipapi')
-	if (apiData) return JSON.parse(apiData)
-	const { data } = await axios.get('https://ipapi.co/json/')
-	sessionStorage.setItem('ipapi', JSON.stringify(data))
-	return data
+const disableDropdown = $computed(() => countries.length === 1 && !search)
+const searchable = $computed(() => countries.length > 7 || search)
+
+function focusSearchInput() {
+	setTimeout(() => searchInput?.focus(), 100)
 }
 
 onMounted(initializeCountry)
 </script>
 
 <template>
-	<div
-		class="bagel-input"
-		:class="{ disabled, [props.class || '']: true }"
-	>
+	<div class="bagel-input text-input" :class="{ invalid: !isValid }">
 		<label>
-			{{ label }}
+			{{ label }} <span v-if="required && label">*</span>
 			<div
 				dir="ltr"
 				class="flex gap-05 tel-input"
@@ -361,27 +201,24 @@ onMounted(initializeCountry)
 				aria-label="Country Code Selector"
 				aria-haspopup="listbox"
 				:aria-expanded="open"
-				@keydown.esc="reset"
-				@keydown.tab="reset"
 			>
 				<Dropdown
 					v-model:shown="open"
 					placement="bottom-start"
-					:disabled="computedDropDownOptions.disabled"
+					:disabled="disableDropdown"
+					@show="focusSearchInput"
 				>
 					<template #trigger>
-						<span class="flex gap-05">
-							<Icon :icon="open ? 'collapse_all' : 'expand_all'" />
-							<Flag
-								v-if="computedDropDownOptions.showFlags && activeCountryCode"
-								:country="activeCountryCode"
-							/>
+						<span class="flex gap-05 country-code-display">
+							<Icon v-if="!disableDropdown" :icon="open ? 'collapse_all' : 'expand_all'" />
+							<Flag v-if="activeCountryCode"	:country="activeCountryCode" />
 						</span>
 					</template>
 					<div class="p-075 tel-countryp-dropdown">
 						<TextInput
 							v-if="searchable"
-							v-model="searchQuery"
+							ref="searchInput"
+							v-model="search"
 							aria-label="Search by country name or country code"
 							placeholder="Search"
 							icon="search"
@@ -389,55 +226,44 @@ onMounted(initializeCountry)
 
 						<ul
 							class="overflow-y p-0 max-h-300px"
-							:class="dropdownOpenDirection"
 							role="listbox"
 						>
 							<li
-								v-for="(pb, index) in sortedCountries"
-								:key="pb.iso2 + isPreferred(pb)"
+								v-for="(pb) in countries"
+								:key="pb.iso2"
 								role="option"
 								class="flex gap-075 pointer hover"
 								tabindex="-1"
-								:aria-selected="activeCountryCode === pb.iso2 && !isPreferred(pb)
-								"
-								@click="chooseCountry(pb.iso2)"
-								@mousemove="selectedIndex = index"
+								:aria-selected="activeCountryCode === pb.iso2"
+								@click="selectCountry(pb)"
 							>
-								<Flag
-									v-if="computedDropDownOptions.showFlags"
-									:country="pb.iso2"
-								/>
+								<Flag :country="pb.iso2" />
 								<p class="tel-country">{{ pb.name }}</p>
-								<span v-if="computedDropDownOptions.showDialCodeInList">
+								<span>
 									+{{ pb.dialCode }}
 								</span>
 							</li>
 						</ul>
 					</div>
 				</Dropdown>
-
-				<!-- ref="refInput" -->
 				<input
 					:id="id"
-					v-model="phone"
+					ref="inputRef"
+					v-model="phoneNumber"
+					v-pattern.tel
 					:required="required"
-					:placeholder="props.placeholder || 'Enter a phone number'"
+					:placeholder="placeholder || label || 'Phone Number'"
 					:disabled="disabled"
 					type="tel"
-					:autocomplete="autocomplete"
-					:pattern="computedInputOptions.pattern"
-					:minlength="computedInputOptions.minlength"
-					:maxlength="computedInputOptions.maxlength"
-					:name="computedInputOptions.name"
-					:readonly="computedInputOptions.readonly"
-					:tabindex="computedInputOptions.tabindex"
-					:aria-describedby="computedInputOptions['aria-describedby']"
-					:style="computedInputOptions.style"
-					@blur="onBlur"
-					@focus="onFocus"
-					@keyup.enter="onEnter"
-					@keyup.space="onSpace"
-					@keydown="handleInput"
+					autocomplete="tel"
+					:name="id"
+					tabindex="0"
+					class="national-number-input"
+					@blur="handleBlur($event)"
+					@focus="emit('focus', $event)"
+					@keydown="emit('keydown', $event)"
+					@input="handlePhoneInput($event)"
+					@paste="emit('paste', $event)"
 				>
 			</div>
 		</label>
@@ -455,6 +281,8 @@ onMounted(initializeCountry)
 	color: var(--input-color);
 	min-width: calc(var(--input-height) * 3);
 	width: 100%;
+	display: flex;
+	align-items: center;
 }
 
 .tel-input:focus-within {
@@ -464,15 +292,23 @@ onMounted(initializeCountry)
 
 .tel-input input {
 	background: transparent;
+	text-align: left;
+	flex: 1;
 }
 
 .tel-input input:focus-visible {
 	box-shadow: none;
 }
 
-.input_country-code {
+.country-code-display {
+	align-items: center;
+	white-space: nowrap;
+}
+
+.dial-code {
 	font-size: var(--input-font-size);
 	color: var(--input-color);
+	opacity: 0.6;
 }
 
 .tel-country {
@@ -489,4 +325,28 @@ onMounted(initializeCountry)
 	direction: ltr;
 	text-align: left;
 }
+
+.national-number-input {
+	margin-left: 4px;
+}
+
+.country-changed {
+	animation: highlight-country 1.5s ease-in-out;
+}
+
+.invalid input {
+	border-color: var(--error-color, red);
+}
+
+@keyframes highlight-country {
+	0%, 100% {
+		background-color: transparent;
+	}
+	30% {
+		background-color: var(--primary-color-light, rgba(0, 123, 255, 0.2));
+	}
+	70% {
+		background-color: var(--primary-color-light, rgba(0, 123, 255, 0.2));
+	}
+}
 </style>

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

@@ -99,7 +99,7 @@ onMounted(() => {
 		:title="title"
 	>
 		<label :for="id">
-			{{ label }}
+			{{ label }} <span v-if="required && label">*</span>
 
 			<input
 				v-if="!multiline && !autoheight && !code && inputRows < 2"