@bagelink/vue 0.0.466 → 0.0.471

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

@@ -1,183 +1,20 @@
-<template>
-	<div
-		class="bagel-input"
-		:class="{ disabled: disabled }"
-	>
-		<label>
-			{{ label }}
-			<div
-				dir="ltr"
-				class="flex gap-05 tel-input"
-				tabindex="-1"
-				aria-label="Country Code Selector"
-				aria-haspopup="listbox"
-				:aria-expanded="open"
-				@keydown.esc="reset"
-				@keydown.tab="reset"
-			>
-				<Dropdown
-					:placement="'bottom'"
-					@hide="open = false"
-					v-if="!computedDropDownOptions.hide"
-					:disabled="computedDropDownOptions.disabled"
-				>
-					<span
-						class="flex gap-05"
-						@click="open = true"
-					>
-						<Icon :icon="open ? 'collapse_all' : 'expand_all'" />
-						<Flag
-							v-if="computedDropDownOptions.showFlags && activeCountryCode"
-							:country="activeCountryCode"
-						/>
-					</span>
-					<template #popper="{ hide }">
-						<div class="p-075 tel-countryp-dropdown">
-							<TextInput
-								v-if="searchable"
-								aria-label="Search by country name or country code"
-								placeholder="Search"
-								icon="search"
-								v-model="searchQuery"
-							/>
-
-							<ul
-								ref="listEl"
-								class="overflow-y p-0"
-								:style="{ 'max-height': '400px' }"
-								:class="dropdownOpenDirection"
-								role="listbox"
-							>
-								<li
-									v-for="(pb, index) in sortedCountries"
-									role="option"
-									class="flex gap-075"
-									:key="pb.iso2 + isPreferred(pb)"
-									tabindex="-1"
-									@click="
-										chooseCountry(pb.iso2);
-									hide();
-									"
-									@mousemove="selectedIndex = index"
-									:aria-selected="activeCountryCode === pb.iso2 && !isPreferred(pb)
-										"
-								>
-									<Flag
-										v-if="computedDropDownOptions.showFlags"
-										:country="pb.iso2"
-									/>
-									<p class="tel-country">{{ pb.name }}</p>
-									<span v-if="computedDropDownOptions.showDialCodeInList">
-										+{{ pb.dialCode }}
-									</span>
-								</li>
-							</ul>
-						</div>
-					</template>
-				</Dropdown>
-
-				<input
-					:required="required"
-					:placeholder="computedInputOptions.placeholder"
-					:disabled="disabled"
-					v-model="phone"
-					type="tel"
-					ref="refInput"
-					:autocomplete="autocomplete"
-					:class="['vti__input']"
-					:id="id"
-					:pattern="computedInputOptions.pattern"
-					:minlength="computedInputOptions.minlength"
-					:maxlength="computedInputOptions.maxlength"
-					:name="computedInputOptions.name"
-					:readonly="computedInputOptions.readonly"
-					:tabindex="computedInputOptions.tabindex"
-					:aria-describedby="computedInputOptions['aria-describedby']"
-					@blur="onBlur"
-					@focus="onFocus"
-					@keyup.enter="onEnter"
-					@keyup.space="onSpace"
-					@keydown="handleInput"
-					:style="computedInputOptions.style"
-				/>
-			</div>
-		</label>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import {
-	Icon,
+	type Country,
 	Dropdown,
-	TextInput,
 	Flag,
+	Icon,
+	TextInput,
 	allCountries,
-	type Country,
 	debounce,
-} from '@bagelink/vue';
-import { type Raw, type StyleValue, onMounted, watch } from 'vue';
+} from '@bagelink/vue'
+import { type Raw, type StyleValue, onMounted, watch } from 'vue'
 import {
-	parsePhoneNumberFromString,
-	type NumberFormat,
 	type CountryCode,
-} from 'libphonenumber-js';
-import axios from 'axios';
-
-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 defaultDropdownOptions = {
-	hide: false,
-	disabled: false,
-	showFlags: true,
-	showDialCodeInSelection: true,
-	showDialCodeInList: true,
-	searchable: true,
-};
-
-const defaultInputOptions = {
-	showDialCode: true,
-	autofocus: false,
-	'aria-describedby': '',
-	id: '',
-	maxlength: 25,
-	minlength: 9,
-	pattern: '',
-	name: '',
-	readonly: false,
-	tabindex: 0,
-	style: '' as Raw<StyleValue>,
-	placeholder: 'Enter a phone number',
-};
-
-type Props = {
-	label?: string;
-	id?: string;
-	autocomplete?: 'on' | 'off' | 'tel';
-	placeholder?: string;
-	required?: boolean;
-	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>;
-	excludeCountries?: string[];
-	mode?: NumberFormat;
-	onlyCountries?: string[];
-	preferredCountries?: string[];
-	parseArg?: { extract?: boolean };
-	debounceDelay?: number;
-};
+	type NumberFormat,
+	parsePhoneNumberFromString,
+} from 'libphonenumber-js'
+import axios from 'axios'
 
 const props = withDefaults(defineProps<Props>(), {
 	modelValue: '',
@@ -197,25 +34,7 @@ const props = withDefaults(defineProps<Props>(), {
 	preferredCountries: () => [],
 	showDropdown: true,
 	debounceDelay: 300,
-});
-
-const computedDropDownOptions = $computed(() => ({
-	...defaultDropdownOptions,
-	...props.dropdownOptions,
-}));
-
-const computedInputOptions = $computed(() => ({
-	...defaultInputOptions,
-	...props.inputOptions,
-}));
-
-let activeCountryCode = $ref<CountryCode>();
-let open = $ref(false);
-let selectedIndex = $ref<number>();
-const dropdownOpenDirection = $ref('below');
-const searchQuery = $ref('');
-
-const refInput = $ref<HTMLInputElement | null>(null);
+})
 
 const emit = defineEmits([
 	'update:modelValue',
@@ -227,78 +46,147 @@ const emit = defineEmits([
 	'enter',
 	'space',
 	'debounce',
-]);
+])
+
+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 defaultDropdownOptions = {
+	hide: false,
+	disabled: false,
+	showFlags: true,
+	showDialCodeInSelection: true,
+	showDialCodeInList: true,
+	searchable: true,
+}
+
+const defaultInputOptions = {
+	'showDialCode': true,
+	'autofocus': false,
+	'aria-describedby': '',
+	'id': '',
+	'maxlength': 25,
+	'minlength': 9,
+	'pattern': '',
+	'name': '',
+	'readonly': false,
+	'tabindex': 0,
+	'style': '' as Raw<StyleValue>,
+	'placeholder': 'Enter a phone number',
+}
+
+interface Props {
+	label?: string
+	id?: string
+	autocomplete?: 'on' | 'off' | 'tel'
+	placeholder?: string
+	required?: boolean
+	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>
+	excludeCountries?: string[]
+	mode?: NumberFormat
+	onlyCountries?: string[]
+	preferredCountries?: string[]
+	parseArg?: { extract?: boolean }
+	debounceDelay?: number
+}
+
+const computedDropDownOptions = $computed(() => ({
+	...defaultDropdownOptions,
+	...props.dropdownOptions,
+}))
+
+const computedInputOptions = $computed(() => ({
+	...defaultInputOptions,
+	...props.inputOptions,
+}))
+
+let activeCountryCode = $ref<CountryCode>()
+let open = $ref(false)
+let selectedIndex = $ref<number>()
+const dropdownOpenDirection = $ref('below')
+const searchQuery = $ref('')
+
+const refInput = $ref<HTMLInputElement | null>(null)
 
 // Computed: activeCountry
-const activeCountry = $computed(() =>
-	props.allCountries.find(
-		(country) => country.iso2 === activeCountryCode?.toUpperCase(),
-	),
-);
+const activeCountry = $computed(() => props.allCountries.find(
+	country => country.iso2 === activeCountryCode?.toUpperCase(),
+),
+)
 
-const isPreferred = (country?: Country) =>
-	props.preferredCountries.includes(country?.iso2 as CountryCode);
+const isPreferred = (country?: Country) => props.preferredCountries.includes(country?.iso2 as CountryCode)
 
 const filteredCountries = $computed(() => {
 	if (props.onlyCountries.length) {
-		return props.allCountries.filter(({ iso2 }) =>
-			props.onlyCountries.some((c) => c.toUpperCase() === iso2),
-		);
+		return props.allCountries.filter(({ iso2 }) => props.onlyCountries.some(c => c.toUpperCase() === iso2),
+		)
 	}
 	if (props.excludeCountries.length) {
 		return props.allCountries.filter(
-			({ iso2 }) =>
-				!props.excludeCountries.includes(iso2.toUpperCase()) &&
-				!props.excludeCountries.includes(iso2.toLowerCase()),
-		);
+			({ iso2 }) => !props.excludeCountries.includes(iso2.toUpperCase())
+			&& !props.excludeCountries.includes(iso2.toLowerCase()),
+		)
 	}
-	return props.allCountries;
-});
+	return props.allCountries
+})
 
 const sortedCountries = $computed(() => {
-	const preferredCountries = getCountries(props.preferredCountries);
+	const preferredCountries = getCountries(props.preferredCountries)
 
-	const countriesList = [...preferredCountries, ...filteredCountries];
+	const countriesList = [...preferredCountries, ...filteredCountries]
 	const cleanInput = searchQuery.replace(
-		/[~`!@#$%^&*()+={}[\];:'"<>.,/\\?-_]/g,
+		/[~`!#$%&*()+={};:'"<>.,/?-_]/g,
 		'',
-	);
+	)
 	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 || ''),
+			c => new RegExp(cleanInput, 'i').test(c.name || '')
+			|| new RegExp(cleanInput, 'i').test(c.iso2 || '')
+			|| new RegExp(cleanInput, 'i').test(c.dialCode || ''),
 		)
-		.filter(Boolean);
-});
+		.filter(Boolean)
+})
 
 const parseArgs = $computed(() => ({
-	...props?.parseArg,
+	...props.parseArg,
 	defaultCountry: activeCountryCode,
-}));
+}))
 
 const phone = defineModel<string>('modelValue', {
 	default: '',
 	set: (value) => {
-		const formatted = formatPhone(`${value}`);
-		if (!formatted) return '';
+		const formatted = formatPhone(`${value}`)
+		if (!formatted) return ''
 
-		emit('update:modelValue', formatted);
-		debounce(() => emit('debounce', formatted), props.debounceDelay);
-		return formatted;
+		emit('update:modelValue', formatted)
+		debounce(() => { emit('debounce', formatted) }, props.debounceDelay)
+		return formatted
 	},
-});
+})
 
 function formatPhone(val: string): string {
-	const phoneNumber = parsePhoneNumberFromString(val, parseArgs);
+	const phoneNumber = parsePhoneNumberFromString(val, parseArgs)
 	if (!phoneNumber) {
-		const dialCode =
-			sortedCountries.find((c) => c.iso2 === activeCountryCode)?.dialCode || '';
-		if (props.mode === 'INTERNATIONAL') return `+${dialCode}`;
-		return dialCode;
+		const dialCode
+			= sortedCountries.find(c => c.iso2 === activeCountryCode)?.dialCode || ''
+		if (props.mode === 'INTERNATIONAL') return `+${dialCode}`
+		return dialCode
 	}
-	return phoneNumber.format(props.mode)?.replaceAll(' ', '') || '';
+	return phoneNumber.format(props.mode).replaceAll(' ', '') || ''
 }
 
 // Watchers
@@ -306,109 +194,216 @@ watch(
 	() => activeCountry,
 	(value, oldValue) => {
 		if (!value && oldValue?.iso2) {
-			activeCountryCode = oldValue.iso2;
-			return;
+			activeCountryCode = oldValue.iso2
+			return
 		}
-		if (value?.iso2) emit('country-changed', value);
+		if (value?.iso2) emit('country-changed', value)
 	},
-);
+)
 
-const initializeCountry = async () => {
+async function initializeCountry() {
 	// if (phone?.[0] === '+') return;
 	// 2. Use default country if passed from parent
 	if (props.defaultCountry) {
 		if (typeof props.defaultCountry === 'string') {
-			chooseCountry(props.defaultCountry);
-			return;
+			chooseCountry(props.defaultCountry)
+			return
 		}
 		if (typeof props.defaultCountry === 'number') {
-			const country = findCountryByDialCode(props.defaultCountry);
+			const country = findCountryByDialCode(props.defaultCountry)
 			if (country) {
-				chooseCountry(country.iso2);
-				return;
+				chooseCountry(country.iso2)
+				return
 			}
 		}
 	}
 
-	const fallbackCountry = sortedCountries[0];
+	const fallbackCountry = sortedCountries[0]
 
 	if (props.autoDefaultCountry) {
 		try {
-			const res = (await getIp()).country;
-			chooseCountry(res || activeCountryCode);
+			const res = (await getIp()).country
+			chooseCountry(res || activeCountryCode)
 		} catch (error) {
-			console.warn(error);
-			chooseCountry(fallbackCountry?.iso2);
+			console.warn(error)
+			chooseCountry(fallbackCountry.iso2)
 		}
 	} else {
 		// 4. Use the first country from preferred list (if available) or all countries list
-		chooseCountry(fallbackCountry?.iso2);
+		chooseCountry(fallbackCountry.iso2)
 	}
-};
+}
 
-onMounted(initializeCountry);
+onMounted(initializeCountry)
 
-const findCountry = (iso: string) =>
-	filteredCountries.find((country) => country.iso2 === iso?.toUpperCase());
+const findCountry = (iso: string) => filteredCountries.find(country => country.iso2 === iso.toUpperCase())
 
-const getCountries = (list: string[]): Country[] => {
-	const countryList: Country[] = [];
+function getCountries(list: string[]): Country[] {
+	const countryList: Country[] = []
 	list.forEach((countryCode) => {
-		const country = findCountry(countryCode);
-		if (country) countryList.push(country);
-	});
-	return countryList;
-};
+		const country = findCountry(countryCode)
+		if (country) countryList.push(country)
+	})
+	return countryList
+}
 
-const findCountryByDialCode = (dialCode: number) =>
-	filteredCountries.find((country) => Number(country.dialCode) === dialCode);
+function findCountryByDialCode(dialCode: number) {
+	return filteredCountries.find(country => Number(country.dialCode) === dialCode)
+}
 
-const chooseCountry = (country?: string) => {
-	if (!country) return;
-	const parsedCountry = findCountry(country);
-	if (!parsedCountry) return;
-	activeCountryCode = parsedCountry.iso2;
+function chooseCountry(country?: string) {
+	if (!country) return
+	const parsedCountry = findCountry(country)
+	if (!parsedCountry) return
+	activeCountryCode = parsedCountry.iso2
 
 	if (props.inputOptions?.showDialCode && parsedCountry) {
-		phone.value = `+ ${parsedCountry.dialCode}`;
-		activeCountryCode = parsedCountry.iso2 || '';
-		return;
+		phone.value = `+ ${parsedCountry.dialCode}`
+		activeCountryCode = parsedCountry.iso2 || ''
+		return
 	}
 
-	activeCountryCode = parsedCountry.iso2 || '';
+	activeCountryCode = parsedCountry.iso2 || ''
 	// emitInput(phone);
-};
+}
 
-const onBlur = () => emit('blur');
+function onBlur() { emit('blur') }
 
-const onFocus = () => emit('focus');
+function onFocus() { emit('focus') }
 
-const onEnter = (e: KeyboardEvent) => emit('enter');
+function onEnter(e: KeyboardEvent) { emit('enter') }
 
-const onSpace = () => emit('space');
+function onSpace() { emit('space') }
 
 // const focus = () => refInput?.focus();
 
 // Method: reset
-const reset = () => {
+function reset() {
 	selectedIndex = sortedCountries.findIndex(
-		(c) => c.iso2 === activeCountryCode,
-	);
-	open = false;
-};
+		c => c.iso2 === activeCountryCode,
+	)
+	open = false
+}
 
 function handleInput(e: KeyboardEvent) {
-	const keyVal = e.key;
-	if (keyVal?.length > 1 || e.metaKey) return;
+	const keyVal = e.key
+	if (keyVal.length > 1 || e.metaKey) return
 
-	const hasBadChars = RegExp(/[^+\d]/).test(keyVal);
+	const hasBadChars = RegExp(/[^+\d]/).test(keyVal)
 
-	if (!hasBadChars) return;
+	if (!hasBadChars) return
 
-	e.preventDefault();
+	e.preventDefault()
 }
 </script>
 
+<template>
+	<div
+		class="bagel-input"
+		:class="{ disabled }"
+	>
+		<label>
+			{{ label }}
+			<div
+				dir="ltr"
+				class="flex gap-05 tel-input"
+				tabindex="-1"
+				aria-label="Country Code Selector"
+				aria-haspopup="listbox"
+				:aria-expanded="open"
+				@keydown.esc="reset"
+				@keydown.tab="reset"
+			>
+				<Dropdown
+					v-if="!computedDropDownOptions.hide"
+					placement="bottom"
+					:disabled="computedDropDownOptions.disabled"
+					@hide="open = false"
+				>
+					<span
+						class="flex gap-05"
+						@click="open = true"
+					>
+						<Icon :icon="open ? 'collapse_all' : 'expand_all'" />
+						<Flag
+							v-if="computedDropDownOptions.showFlags && activeCountryCode"
+							:country="activeCountryCode"
+						/>
+					</span>
+					<template #popper="{ hide }">
+						<div class="p-075 tel-countryp-dropdown">
+							<TextInput
+								v-if="searchable"
+								v-model="searchQuery"
+								aria-label="Search by country name or country code"
+								placeholder="Search"
+								icon="search"
+							/>
+
+							<ul
+								ref="listEl"
+								class="overflow-y p-0"
+								:style="{ 'max-height': '400px' }"
+								:class="dropdownOpenDirection"
+								role="listbox"
+							>
+								<li
+									v-for="(pb, index) in sortedCountries"
+									:key="pb.iso2 + isPreferred(pb)"
+									role="option"
+									class="flex gap-075"
+									tabindex="-1"
+									:aria-selected="activeCountryCode === pb.iso2 && !isPreferred(pb)
+									"
+									@click="
+										chooseCountry(pb.iso2);
+										hide();
+									"
+									@mousemove="selectedIndex = index"
+								>
+									<Flag
+										v-if="computedDropDownOptions.showFlags"
+										:country="pb.iso2"
+									/>
+									<p class="tel-country">{{ pb.name }}</p>
+									<span v-if="computedDropDownOptions.showDialCodeInList">
+										+{{ pb.dialCode }}
+									</span>
+								</li>
+							</ul>
+						</div>
+					</template>
+				</Dropdown>
+
+				<input
+					:id="id"
+					ref="refInput"
+					v-model="phone"
+					:required="required"
+					:placeholder="computedInputOptions.placeholder"
+					:disabled="disabled"
+					type="tel"
+					:autocomplete="autocomplete"
+					class="vti__input"
+					: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"
+				>
+			</div>
+		</label>
+	</div>
+</template>
+
 <style scoped>
 .tel-input {
 	direction: ltr;