@dynect/base 0.1.0 → 0.3.0

package/src/runtime/components/dynect/Telephone.vue

@@ -0,0 +1,651 @@
+<template>
+	<div>
+		<DynectFormLabel :label="label" :for="resolvedId" :required="inputOptions.required" :tooltip="tooltip" :class="labelClass" />
+
+		<!-- Input wrapper — joined (one-button) or spaced variant -->
+		<div ref="root" :class="cn('flex w-full items-stretch', variant === 'spaced' ? 'gap-4' : '', props.disabled ? 'cursor-not-allowed opacity-50' : '', styleClasses)">
+			<!-- Country code button with Popover -->
+			<Popover v-model:open="data.open">
+				<PopoverTrigger as-child>
+					<div
+						aria-label="Country Code Selector"
+						aria-haspopup="listbox"
+						:aria-expanded="data.open"
+						:class="cn('-mr-1 flex cursor-pointer items-center justify-center gap-1.5 select-none', buttonCls, 'rounded-xl', wrapperCls, variant === 'spaced' ? 'rounded-xl' : 'rounded-r-0 rounded-l-xl', dropdownOptions.disabled || disabled ? 'pointer-events-none opacity-50' : '')"
+						tabindex="-1"
+						@keydown.esc="reset"
+					>
+						<component :is="'SvgFlags' + capitalizeFirstLetter(toLowerCase(data.activeCountryCode?.toString() ?? defaultCountry?.toString() ?? ''))" v-if="dropdownOptions.showFlags" class="h-4 w-6 shrink-0" filled :font-controlled="false" />
+						<span v-if="dropdownOptions.showDialCodeInSelection"> +{{ activeCountry?.dialCode }} </span>
+						<span v-else class="min-w-[2ch]">+{{ activeCountry?.dialCode }}</span>
+						<Icon name="lucide:chevron-down" class="size-3.5 shrink-0 transition-transform duration-200" :class="data.open ? 'rotate-180' : ''" />
+					</div>
+				</PopoverTrigger>
+				<PopoverContent :class="cn('w-full', dropdownOptions.showSearchBox && 'min-w-75')" :style="{ width: refRoot ? refRoot.getBoundingClientRect().width + 'px' : 'auto' }" align="start">
+					<Command v-model:search-term="data.searchQuery" :filter-function="filterCountries">
+						<CommandInput v-if="dropdownOptions.showSearchBox" :placeholder="dropdownOptions.searchBoxPlaceholder || 'Search country...'" class="h-9">
+							<template #icon>
+								<slot name="search-icon">
+									<Icon name="lucide:search" class="text-text-body-subtle mr-2 size-4" :font-controlled="false" />
+								</slot>
+							</template>
+						</CommandInput>
+						<CommandList class="max-h-42">
+							<CommandEmpty>
+								<slot name="no-options">No results found</slot>
+							</CommandEmpty>
+							<CommandGroup v-if="preferredCountriesList.length > 0" heading="Preferred">
+								<CommandItem v-for="option in preferredCountriesList" :key="option.iso2" :value="option.iso2" :data-selected="option.iso2 === data.activeCountryCode" :disabled="option.disabled || false" @select="() => handleSelectCountry(option)">
+									<slot name="option" :option="option">
+										<div class="flex w-full items-center gap-2">
+											<component :is="'SvgFlags' + capitalizeFirstLetter(toLowerCase(option.iso2))" v-if="dropdownOptions.showFlags" class="h-4 w-6 shrink-0" filled :font-controlled="false" />
+											<span class="flex-1">
+												{{ option.name }}
+												<span v-if="dropdownOptions.showDialCodeInList" class="text-text-body-subtle text-xs"> +{{ option.dialCode }} </span>
+											</span>
+											<Icon v-if="option.iso2 === data.activeCountryCode" name="lucide:check" class="ml-auto size-4 opacity-100" />
+										</div>
+									</slot>
+								</CommandItem>
+							</CommandGroup>
+							<CommandSeparator v-if="preferredCountriesList.length > 0 && otherCountriesList.length > 0" />
+							<CommandGroup v-if="otherCountriesList.length > 0" :heading="preferredCountriesList.length > 0 ? 'Other Countries' : undefined">
+								<CommandItem v-for="option in otherCountriesList" :key="option.iso2" :value="option.iso2" :data-selected="option.iso2 === data.activeCountryCode" :disabled="option.disabled || false" @select="() => handleSelectCountry(option)">
+									<slot name="option" :option="option">
+										<div class="flex w-full items-center gap-2">
+											<component :is="'SvgFlags' + capitalizeFirstLetter(toLowerCase(option.iso2))" v-if="dropdownOptions.showFlags" class="h-4 w-6 shrink-0" filled :font-controlled="false" />
+											<span class="flex-1">
+												{{ option.name }}
+												<span v-if="dropdownOptions.showDialCodeInList" class="text-text-body-subtle text-xs"> +{{ option.dialCode }} </span>
+											</span>
+
+											<Icon v-if="option.iso2 === data.activeCountryCode" name="lucide:check" class="ml-auto size-4 opacity-100" />
+										</div>
+									</slot>
+								</CommandItem>
+							</CommandGroup>
+						</CommandList>
+					</Command>
+				</PopoverContent>
+			</Popover>
+
+			<!-- Phone input field -->
+			<div :class="cn('flex flex-1 items-center gap-2', wrapperCls, variant === 'spaced' ? 'rounded-xl' : 'rounded-l-0 rounded-r-xl')">
+				<input
+					:id="resolvedId"
+					ref="input"
+					v-model="data.phone"
+					:type="inputOptions.type"
+					:autocomplete="inputOptions.autocomplete"
+					:autofocus="inputOptions.autofocus"
+					:class="cn(textCls, inputOptions.styleClasses, 'w-full')"
+					:disabled="disabled"
+					:maxlength="inputOptions.maxlength"
+					:name="resolvedId"
+					:placeholder="data.parsedPlaceholder"
+					:readonly="inputOptions.readonly"
+					:required="inputOptions.required"
+					:tabindex="inputOptions.tabindex"
+					:aria-describedby="errorMessage ? `${resolvedId}-error` : helperText ? `${resolvedId}-description` : undefined"
+					@blur="onBlur"
+					@focus="onFocus"
+					@input="onInput"
+					@keyup.enter="onEnter"
+					@keyup.space="onSpace"
+				>
+
+				<div v-if="!disabled && !inputOptions.readonly" :class="cn(iconCls, 'flex shrink-0 items-center', variant === 'spaced' ? inputSizeClasses[sz] : 'pr-3')">
+					<DynectButton v-if="data.phone" type="button" color="ghost" size="xs" icon-only left-icon="lucide:x" :disabled="disabled || inputOptions.readonly" aria-label="Clear phone number" @click="clearPhone" />
+					<slot name="icon-right" />
+				</div>
+			</div>
+		</div>
+
+		<DynectFormDescription v-if="!errorMessage" :id="`${resolvedId}-description`" :description="helperText" />
+		<DynectFormError :id="`${resolvedId}-error`" :error="errorMessage" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { parsePhoneNumberFromString, type CountryCode, type NumberFormat } from 'libphonenumber-js/max';
+import { cva } from 'class-variance-authority';
+import { cn, inputSizeClasses } from '@/lib/utils';
+
+type InputSize = 'sm' | 'base' | 'lg' | 'xl';
+type VariantState = 'default' | 'success' | 'danger' | 'disabled' | 'readonly';
+
+// ── Variants (matching DynectInput) ──────────────────────────────────────────
+const inputWrapperVariants = cva('flex items-center rounded-xl ring-1', {
+	variants: {
+		state: {
+			default: 'bg-bg-secondary-medium ring-border-base-medium',
+			success: 'bg-bg-success-soft ring-border-success-subtle',
+			danger: 'bg-bg-danger-soft ring-border-danger-subtle',
+			disabled: 'bg-bg-disabled ring-border-base-medium cursor-not-allowed opacity-60',
+			readonly: 'bg-bg-tertiary ring-border-base-medium',
+		},
+	},
+	defaultVariants: { state: 'default' },
+});
+
+const inputIconVariants = cva('', {
+	variants: {
+		state: {
+			default: 'text-text-body-subtle',
+			success: 'text-text-fg-success-strong',
+			danger: 'text-text-fg-danger-strong',
+			disabled: 'text-text-fg-disabled',
+			readonly: 'text-text-body',
+		},
+	},
+	defaultVariants: { state: 'default' },
+});
+
+const inputTextVariants = cva('min-w-0 flex-1 bg-transparent outline-none disabled:cursor-not-allowed', {
+	variants: {
+		state: {
+			default: 'text-text-heading placeholder:text-text-body-subtle',
+			success: 'text-text-fg-success-strong placeholder:text-text-fg-success-strong',
+			danger: 'text-text-fg-danger-strong placeholder:text-text-fg-danger-strong',
+			disabled: 'text-text-fg-disabled placeholder:text-text-fg-disabled',
+			readonly: 'text-text-body placeholder:text-text-body-subtle',
+		},
+	},
+	defaultVariants: { state: 'default' },
+});
+
+// TypeScript Interfaces
+interface Country {
+	name: string;
+	iso2: CountryCode;
+	dialCode: string;
+	priority?: number;
+	areaCodes?: string[] | null;
+	disabled?: boolean;
+	preferred?: boolean;
+}
+
+interface DropdownOptions {
+	disabled?: boolean;
+	showDialCodeInList?: boolean;
+	showDialCodeInSelection?: boolean;
+	showFlags?: boolean;
+	showSearchBox?: boolean;
+	searchBoxPlaceholder?: string;
+	tabindex?: number;
+}
+
+interface InputOptions {
+	placeholder?: string;
+	autocomplete?: string;
+	autofocus?: boolean;
+	dynamicPlaceholder?: boolean;
+	'aria-describedby'?: string;
+	id?: string;
+	maxlength?: number;
+	name?: string;
+	showDialCode?: boolean;
+	readonly?: boolean;
+	required?: boolean;
+	tabindex?: number;
+	type?: string;
+	styleClasses?: string;
+}
+
+interface PhoneObject {
+	country?: CountryCode;
+	countryCode?: CountryCode;
+	formatted: string;
+	valid?: boolean;
+	possible?: boolean;
+	nationalNumber?: string;
+	isCountryCheck: boolean;
+	countryCallingCode?: string;
+}
+
+interface TelephoneData {
+	phone: string;
+	activeCountryCode?: CountryCode;
+	open: boolean;
+	parsedPlaceholder: string;
+	searchQuery: string;
+}
+
+defineOptions({ name: 'Telephone' });
+
+const refRoot = useTemplateRef<HTMLDivElement>('root');
+const refInput = useTemplateRef<HTMLInputElement>('input');
+
+interface Props {
+	/** Label text shown above the input */
+	label?: string;
+	/** Extra CSS classes for the label element */
+	labelClass?: string;
+	/** Tooltip text shown in the info icon next to the label */
+	tooltip?: string;
+	/** Helper text shown below the input (hidden when there is an error) */
+	helperText?: string;
+	/** Size of the input field (padding and font size) */
+	size?: InputSize;
+	/**
+	 * Layout variant:
+	 * - `joined`  — country button and input share a single pill border (default)
+	 * - `spaced`  — country button and input are separate rounded elements with a gap
+	 */
+	variant?: 'joined' | 'spaced';
+	/**
+	 * Visual state of the field:
+	 * - `default`  — neutral border (default)
+	 * - `success`  — green border
+	 * - `danger`   — red border (also used when there is a vee-validate error)
+	 */
+	state?: 'default' | 'success' | 'danger';
+	/** Teleport target for the dropdown popover */
+	teleport?: string;
+	/** Full country list override */
+	allCountries?: Country[];
+	/** Auto-format the input when the phone number is valid */
+	autoFormat?: boolean;
+	/** Custom validation RegExp for the input */
+	customValidate?: boolean | RegExp;
+	/** Default country iso2 code */
+	defaultCountry?: CountryCode;
+	/** Disable the entire component */
+	disabled?: boolean;
+	/** Fetch the default country from the user's IP address */
+	autoDefaultCountry?: boolean;
+	/** Options for the country dropdown */
+	dropdownOptions?: DropdownOptions;
+	/** Countries to exclude from the dropdown (iso2 codes) */
+	ignoredCountries?: string[];
+	/** Options forwarded to the `<input>` element */
+	inputOptions?: InputOptions;
+	/** Custom invalid message for validation */
+	invalidMsg?: string;
+	/** Phone number format mode */
+	mode?: 'auto' | 'national' | 'international';
+	/** Only show these countries in the dropdown (iso2 codes) */
+	onlyCountries?: string[];
+	/** Countries to pin at the top of the dropdown (iso2 codes) */
+	preferredCountries?: string[];
+	/** Only allow valid phone number characters in the input */
+	validCharactersOnly?: boolean;
+	/** Extra CSS classes for the outer wrapper div */
+	styleClasses?: string | string[] | Record<string, boolean>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	size: 'base',
+	variant: 'joined',
+	state: 'default',
+	teleport: undefined,
+	allCountries: () =>
+		countryList().map((data) => ({
+			name: data.label,
+			iso2: data.code as CountryCode,
+			dialCode: data.phonecode,
+			priority: 1,
+			areaCodes: null,
+		})),
+	autoFormat: true,
+	customValidate: false,
+	defaultCountry: 'MY' as CountryCode,
+	disabled: false,
+	autoDefaultCountry: false,
+	dropdownOptions: () => ({
+		disabled: false,
+		showDialCodeInList: true,
+		showDialCodeInSelection: false,
+		showFlags: true,
+		showSearchBox: true,
+		searchBoxPlaceholder: '',
+		tabindex: 0,
+	}),
+	ignoredCountries: () => [],
+	inputOptions: () => ({
+		placeholder: 'Enter a phone number',
+		autocomplete: 'off',
+		autofocus: false,
+		dynamicPlaceholder: false,
+		'aria-describedby': '',
+		id: '',
+		maxlength: 25,
+		name: 'telephone',
+		showDialCode: true,
+		readonly: false,
+		required: false,
+		tabindex: 0,
+		type: 'tel',
+		styleClasses: '',
+	}),
+	invalidMsg: '',
+	mode: 'auto',
+	onlyCountries: () => [],
+	preferredCountries: () => [],
+	validCharactersOnly: false,
+	styleClasses: '',
+});
+
+// ── ID Resolution ────────────────────────────────────────────────────────────
+const fallbackId = useId();
+const resolvedId = computed(() => props.inputOptions?.id || `telephone-${fallbackId}`);
+
+// ── State Resolution (matching DynectInput) ──────────────────────────────────
+const variantState = computed<VariantState>(() => {
+	if (props.disabled) return 'disabled';
+	if (props.inputOptions.readonly) return 'readonly';
+	if (props.state && props.state !== 'default') return props.state;
+	return errorMessage.value ? 'danger' : 'default';
+});
+
+const sz = computed(() => props.size);
+
+// Precomputed class strings
+const wrapperCls = computed(() => inputWrapperVariants({ state: variantState.value }));
+const iconCls = computed(() => inputIconVariants({ state: variantState.value }));
+const textCls = computed(() => cn(inputTextVariants({ state: variantState.value }), inputSizeClasses[sz.value]));
+const buttonCls = computed(() => cn(inputSizeClasses[sz.value], iconCls.value));
+
+const modelValue = defineModel<string | null>();
+
+const emit = defineEmits<{
+	blur: [event: FocusEvent];
+	close: [];
+	'country-changed': [country: Country];
+	enter: [event: KeyboardEvent];
+	focus: [event: FocusEvent];
+	'on-input': [value: string, phoneObject: PhoneObject, inputElement: HTMLInputElement | undefined];
+	open: [];
+	space: [event: KeyboardEvent];
+	validate: [phoneObject: PhoneObject];
+}>();
+
+// Vee Validate integration — field path must match the schema key (props.name), not the element id
+const { value, errorMessage, handleBlur, handleChange } = useField<string | null>(() => props.inputOptions?.name ?? resolvedId.value, undefined, { initialValue: modelValue.value, syncVModel: true });
+
+const phoneCountryCode = useState<CountryCode>('phoneCountryCode', () => props.defaultCountry ?? 'MY');
+
+const data = reactive<TelephoneData>({
+	phone: '',
+	activeCountryCode: undefined,
+	open: false,
+	parsedPlaceholder: props.inputOptions.placeholder || 'Enter a phone number',
+	searchQuery: '',
+});
+
+// ── Computed ───────────────────────────────────────────────────────────────────
+
+const filteredCountries = computed(() => {
+	if (props.onlyCountries.length) {
+		return props.allCountries.filter(({ iso2 }) => props.onlyCountries.some((c) => toUpperCase(c) === iso2));
+	}
+	if (props.ignoredCountries.length) {
+		return props.allCountries.filter(({ iso2 }) => !props.ignoredCountries.includes(toUpperCase(iso2)) && !props.ignoredCountries.includes(toLowerCase(iso2)));
+	}
+	return props.allCountries;
+});
+
+const activeCountry = computed(() => findCountry(data.activeCountryCode));
+
+const parsedMode = computed(() => {
+	const mode = toLowerCase(props.mode);
+	if (mode === 'auto') return data.phone?.startsWith('+') ? 'international' : 'national';
+	const valid = ['national', 'international', 'e.164', 'rfc3966', 'idd'];
+	return valid.includes(mode) ? mode : 'international';
+});
+
+const sortedCountries = computed(() => {
+	const preferredCountries = getCountries(props.preferredCountries).map((country) => ({ ...country, preferred: true }));
+	const countriesList = [...preferredCountries, ...filteredCountries.value];
+
+	if (!props.dropdownOptions.showSearchBox) {
+		return countriesList;
+	}
+
+	const userInput = data.searchQuery.toLowerCase();
+	const cleanInput = userInput.replaceAll(/[~`!@#$%^&*()+={}[\];:'"<>.,/\\?_-]/g, '');
+	const re = new RegExp(cleanInput, 'i');
+
+	return countriesList.filter((c) => matchesSearch(c, re));
+});
+
+const preferredCountriesList = computed(() => sortedCountries.value.filter((c) => c.preferred));
+const otherCountriesList = computed(() => sortedCountries.value.filter((c) => !c.preferred));
+
+const phoneObject = computed<PhoneObject>(() => {
+	const fallback = data.activeCountryCode ?? props.defaultCountry;
+	const result = parsePhoneNumberFromString(data.phone ?? '', fallback);
+	const meta: PhoneObject = {
+		country: result?.country,
+		countryCode: result?.country,
+		formatted: data.phone,
+		valid: result?.isValid(),
+		possible: result?.isPossible?.(),
+		nationalNumber: result?.nationalNumber,
+		isCountryCheck: false,
+		countryCallingCode: result?.countryCallingCode,
+	};
+
+	const countryCodeRe = new RegExp(String.raw`^${result?.countryCallingCode ?? 1}(\d*)$`);
+	if (value.value && countryCodeRe.test(value.value)) {
+		meta.isCountryCheck = true;
+	}
+
+	if (meta.valid && result) {
+		meta.formatted = result.format(toUpperCase(parsedMode.value) as NumberFormat);
+	}
+
+	if (result?.country && (props.ignoredCountries.length || props.onlyCountries.length) && !findCountry(result.country)) {
+		meta.valid = false;
+		meta.possible = false;
+	}
+
+	return meta;
+});
+
+// ── Watchers ───────────────────────────────────────────────────────────────────
+
+watch(() => props.inputOptions.placeholder, resetPlaceholder);
+
+// Single watcher for all phoneObject side-effects
+watch(phoneObject, (obj) => {
+	if (obj.countryCode) data.activeCountryCode = obj.countryCode;
+	emit('validate', obj);
+	if (props.autoFormat && !props.customValidate && obj.formatted) {
+		emitInput(obj.formatted);
+		nextTick(() => {
+			if (obj.formatted && !value.value) data.phone = obj.formatted;
+		});
+	}
+});
+
+watch(activeCountry, (newVal) => {
+	if (newVal?.iso2) {
+		emit('country-changed', newVal);
+		phoneCountryCode.value = newVal.iso2;
+	}
+});
+
+watch(
+	() => data.open,
+	(isOpen) => {
+		if (isOpen) {
+			emit('open');
+		} else {
+			emit('close');
+			data.searchQuery = '';
+		}
+	}
+);
+
+// Parse incoming E.164 or national value, detect country, show national format in input
+watch(
+	() => modelValue.value,
+	(newVal, oldVal) => {
+		if (!newVal) {
+			data.phone = '';
+			return;
+		}
+		const parsed = parsePhoneNumberFromString(newVal, props.defaultCountry ?? 'MY');
+		if (parsed) {
+			if (parsed.country) data.activeCountryCode = parsed.country;
+			data.phone = parsed.formatNational();
+		} else if (testCharacters()) {
+			data.phone = newVal;
+		} else {
+			nextTick(() => {
+				data.phone = oldVal ?? '';
+				onInput();
+			});
+		}
+	},
+	{ immediate: true }
+);
+
+// ── Lifecycle ──────────────────────────────────────────────────────────────────
+
+const isMounted = ref(false);
+
+onMounted(async () => {
+	cleanInvalidCharacters();
+	await initializeCountry();
+	emit('validate', phoneObject.value);
+	isMounted.value = true;
+});
+
+// ── Functions ──────────────────────────────────────────────────────────────────
+
+function resetPlaceholder(): void {
+	data.parsedPlaceholder = props.inputOptions.placeholder || 'Enter a phone number';
+}
+
+function testCharacters(): boolean {
+	if (props.validCharactersOnly) {
+		if (!/^[()\-+0-9\s]*$/.test(data.phone)) return false;
+	}
+	if (props.customValidate) return testCustomValidate();
+	return true;
+}
+
+function findCountry(iso: string | CountryCode = ''): Country | undefined {
+	return filteredCountries.value.find((country) => country.iso2 === toUpperCase(iso));
+}
+
+async function initializeCountry(): Promise<void> {
+	if (data.phone?.[0] === '+') return;
+
+	if (props.defaultCountry) {
+		const country = findCountry(props.defaultCountry);
+		if (country) {
+			choose(country.iso2);
+			return;
+		}
+	}
+
+	const fallback = props.preferredCountries[0] || filteredCountries.value[0];
+
+	if (props.autoDefaultCountry) {
+		try {
+			const r = await fetch('https://ip2c.org/s');
+			const result = await r.text();
+			choose(!result || result[0] !== '1' ? fallback : result.slice(2, 4));
+		} catch {
+			choose(fallback);
+		}
+	} else {
+		choose(fallback);
+	}
+}
+
+function getCountries(list: string[] = []): Country[] {
+	return list.map(findCountry).filter((country): country is Country => Boolean(country));
+}
+
+function setCaretPosition(ctrl: HTMLInputElement | undefined, pos: number): void {
+	ctrl?.setSelectionRange(pos, pos);
+}
+
+function choose(country: Country | string | undefined): void {
+	if (!country) return;
+	const parsedCountry = typeof country === 'string' ? findCountry(country) : country;
+	if (!parsedCountry) return;
+	data.activeCountryCode = parsedCountry.iso2;
+	emitInput(data.phone);
+}
+
+function cleanInvalidCharacters(): void {
+	const currentPhone = data.phone;
+	if (props.validCharactersOnly) {
+		const results = data.phone.match(/[()\-+0-9\s]*/g);
+		if (results) data.phone = results.join('');
+	}
+	if (props.customValidate && props.customValidate instanceof RegExp) {
+		const results = data.phone.match(props.customValidate);
+		if (results) data.phone = results.join('');
+	}
+	if (currentPhone !== data.phone) emitInput(data.phone);
+}
+
+function testCustomValidate(): boolean {
+	return props.customValidate instanceof RegExp ? props.customValidate.test(data.phone) : false;
+}
+
+function onInput(e?: Event): void {
+	refInput.value?.setCustomValidity(phoneObject.value.valid ? '' : props.invalidMsg);
+	if (e && phoneObject.value?.isCountryCheck) {
+		const target = e.target as HTMLInputElement;
+		target.value = phoneObject.value?.countryCallingCode ?? '1';
+		data.phone = phoneObject.value?.countryCallingCode ?? '1';
+	}
+	handleChange(data.phone, isMounted.value);
+	emit('on-input', data.phone, phoneObject.value, refInput.value ?? undefined);
+}
+
+function emitInput(valuesData: string): void {
+	handleChange(valuesData, isMounted.value);
+	emit('on-input', valuesData, phoneObject.value, refInput.value ?? undefined);
+}
+
+function onBlur(e: FocusEvent): void {
+	handleBlur(e);
+	emit('blur', e);
+}
+
+function onFocus(e: FocusEvent): void {
+	setCaretPosition(refInput.value ?? undefined, data.phone.length);
+	emit('focus', e);
+}
+
+function onEnter(e: KeyboardEvent): void {
+	emit('enter', e);
+}
+
+function onSpace(e: KeyboardEvent): void {
+	emit('space', e);
+}
+
+function clearPhone(): void {
+	data.phone = '';
+	handleChange('');
+}
+
+function handleSelectCountry(country: Country): void {
+	choose(country);
+	data.open = false;
+}
+
+function matchesSearch(c: Country, re: RegExp): boolean {
+	return re.test(c.name) || re.test(c.iso2) || re.test(c.dialCode);
+}
+
+function filterCountries(list: Country[], searchTerm: string): Country[] {
+	if (!searchTerm) return list;
+	const cleanInput = searchTerm.toLowerCase().replaceAll(/[~`!@#$%^&*()+={}[\];:'"<>.,/\\?_-]/g, '');
+	const re = new RegExp(cleanInput, 'i');
+	return list.filter((c) => matchesSearch(c, re));
+}
+
+function reset(): void {
+	data.open = false;
+}
+</script>