457 lines
12 KiB
Vue
457 lines
12 KiB
Vue
<template>
|
|
<div class="phone-input-wrapper">
|
|
<v-text-field
|
|
v-model="localNumber"
|
|
:label="label"
|
|
:placeholder="placeholder"
|
|
:error="error"
|
|
:error-messages="errorMessage"
|
|
:hint="helpText"
|
|
:persistent-hint="!!helpText"
|
|
:required="required"
|
|
:disabled="disabled"
|
|
variant="outlined"
|
|
density="comfortable"
|
|
@input="handleInput"
|
|
@blur="handleBlur"
|
|
>
|
|
<template #prepend-inner>
|
|
<!-- Country Selector -->
|
|
<v-menu
|
|
v-model="dropdownOpen"
|
|
:close-on-content-click="false"
|
|
location="bottom"
|
|
offset="4"
|
|
max-height="300"
|
|
>
|
|
<template #activator="{ props: menuProps }">
|
|
<div
|
|
v-bind="menuProps"
|
|
class="country-selector"
|
|
:class="{ 'country-selector--open': dropdownOpen }"
|
|
@click="toggleDropdown"
|
|
>
|
|
<img
|
|
:src="flagUrl"
|
|
:alt="`${selectedCountry.name} flag`"
|
|
class="country-flag"
|
|
@error="handleFlagError"
|
|
/>
|
|
<span class="country-code">{{ selectedCountry.dialCode }}</span>
|
|
<v-icon
|
|
size="16"
|
|
class="dropdown-icon"
|
|
:class="{ 'dropdown-icon--rotated': dropdownOpen }"
|
|
>
|
|
mdi-chevron-down
|
|
</v-icon>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Dropdown Content -->
|
|
<v-card class="country-dropdown" elevation="8">
|
|
<!-- Search Bar -->
|
|
<div class="search-container">
|
|
<v-text-field
|
|
v-model="searchQuery"
|
|
placeholder="Search countries..."
|
|
variant="outlined"
|
|
density="compact"
|
|
prepend-inner-icon="mdi-magnify"
|
|
hide-details
|
|
class="search-input"
|
|
autofocus
|
|
/>
|
|
</div>
|
|
|
|
<!-- Country List -->
|
|
<v-list class="country-list" density="compact">
|
|
<v-list-item
|
|
v-for="country in filteredCountries"
|
|
:key="country.iso2"
|
|
:class="{
|
|
'country-item': true,
|
|
'country-item--selected': country.iso2 === selectedCountry.iso2,
|
|
'country-item--preferred': isPreferredCountry(country.iso2)
|
|
}"
|
|
@click="selectCountry(country)"
|
|
>
|
|
<template #prepend>
|
|
<img
|
|
:src="getCountryFlagUrl(country.iso2)"
|
|
:alt="`${country.name} flag`"
|
|
class="list-flag"
|
|
@error="handleFlagError"
|
|
/>
|
|
</template>
|
|
|
|
<v-list-item-title class="country-name">
|
|
{{ country.name }}
|
|
</v-list-item-title>
|
|
|
|
<template #append>
|
|
<span class="dial-code">{{ country.dialCode }}</span>
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-card>
|
|
</v-menu>
|
|
</template>
|
|
</v-text-field>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { parsePhoneNumber, AsYouType } from 'libphonenumber-js';
|
|
|
|
interface Country {
|
|
name: string;
|
|
iso2: string;
|
|
dialCode: string;
|
|
}
|
|
|
|
interface Props {
|
|
modelValue?: string;
|
|
label?: string;
|
|
placeholder?: string;
|
|
error?: boolean;
|
|
errorMessage?: string;
|
|
helpText?: string;
|
|
required?: boolean;
|
|
disabled?: boolean;
|
|
defaultCountry?: string;
|
|
preferredCountries?: string[];
|
|
}
|
|
|
|
interface Emits {
|
|
(e: 'update:modelValue', value: string): void;
|
|
(e: 'country-changed', country: Country): void;
|
|
(e: 'phone-data', data: { number: string; isValid: boolean; country: Country }): void;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
modelValue: '',
|
|
placeholder: 'Phone number',
|
|
error: false,
|
|
required: false,
|
|
disabled: false,
|
|
defaultCountry: 'MC',
|
|
preferredCountries: () => ['MC', 'FR', 'US', 'IT', 'CH']
|
|
});
|
|
|
|
const emit = defineEmits<Emits>();
|
|
|
|
// Countries data - comprehensive list
|
|
const countries: Country[] = [
|
|
{ name: 'Monaco', iso2: 'MC', dialCode: '+377' },
|
|
{ name: 'France', iso2: 'FR', dialCode: '+33' },
|
|
{ name: 'United States', iso2: 'US', dialCode: '+1' },
|
|
{ name: 'Italy', iso2: 'IT', dialCode: '+39' },
|
|
{ name: 'Switzerland', iso2: 'CH', dialCode: '+41' },
|
|
{ name: 'United Kingdom', iso2: 'GB', dialCode: '+44' },
|
|
{ name: 'Germany', iso2: 'DE', dialCode: '+49' },
|
|
{ name: 'Spain', iso2: 'ES', dialCode: '+34' },
|
|
{ name: 'Canada', iso2: 'CA', dialCode: '+1' },
|
|
{ name: 'Australia', iso2: 'AU', dialCode: '+61' },
|
|
{ name: 'Netherlands', iso2: 'NL', dialCode: '+31' },
|
|
{ name: 'Belgium', iso2: 'BE', dialCode: '+32' },
|
|
{ name: 'Portugal', iso2: 'PT', dialCode: '+351' },
|
|
{ name: 'Austria', iso2: 'AT', dialCode: '+43' },
|
|
{ name: 'Sweden', iso2: 'SE', dialCode: '+46' },
|
|
{ name: 'Norway', iso2: 'NO', dialCode: '+47' },
|
|
{ name: 'Denmark', iso2: 'DK', dialCode: '+45' },
|
|
{ name: 'Finland', iso2: 'FI', dialCode: '+358' },
|
|
{ name: 'Ireland', iso2: 'IE', dialCode: '+353' },
|
|
{ name: 'Luxembourg', iso2: 'LU', dialCode: '+352' },
|
|
{ name: 'Japan', iso2: 'JP', dialCode: '+81' },
|
|
{ name: 'South Korea', iso2: 'KR', dialCode: '+82' },
|
|
{ name: 'Singapore', iso2: 'SG', dialCode: '+65' },
|
|
{ name: 'Hong Kong', iso2: 'HK', dialCode: '+852' },
|
|
{ name: 'New Zealand', iso2: 'NZ', dialCode: '+64' },
|
|
{ name: 'Brazil', iso2: 'BR', dialCode: '+55' },
|
|
{ name: 'Mexico', iso2: 'MX', dialCode: '+52' },
|
|
{ name: 'Argentina', iso2: 'AR', dialCode: '+54' },
|
|
{ name: 'Chile', iso2: 'CL', dialCode: '+56' },
|
|
{ name: 'South Africa', iso2: 'ZA', dialCode: '+27' }
|
|
];
|
|
|
|
// Reactive state
|
|
const dropdownOpen = ref(false);
|
|
const searchQuery = ref('');
|
|
const localNumber = ref('');
|
|
const selectedCountry = ref<Country>(
|
|
countries.find(c => c.iso2 === props.defaultCountry) || countries[0]
|
|
);
|
|
|
|
// Computed
|
|
const flagUrl = computed(() => getCountryFlagUrl(selectedCountry.value.iso2));
|
|
|
|
const filteredCountries = computed(() => {
|
|
if (!searchQuery.value) {
|
|
// Show preferred countries first, then alphabetical
|
|
const preferred = countries.filter(c => isPreferredCountry(c.iso2));
|
|
const others = countries.filter(c => !isPreferredCountry(c.iso2));
|
|
return [...preferred, ...others];
|
|
}
|
|
|
|
const query = searchQuery.value.toLowerCase();
|
|
return countries.filter(country =>
|
|
country.name.toLowerCase().includes(query) ||
|
|
country.dialCode.includes(query) ||
|
|
country.iso2.toLowerCase().includes(query)
|
|
);
|
|
});
|
|
|
|
// Methods
|
|
const getCountryFlagUrl = (iso2: string) => {
|
|
return `https://flagcdn.com/24x18/${iso2.toLowerCase()}.png`;
|
|
};
|
|
|
|
const isPreferredCountry = (iso2: string) => {
|
|
return props.preferredCountries.includes(iso2);
|
|
};
|
|
|
|
const toggleDropdown = () => {
|
|
if (!props.disabled) {
|
|
dropdownOpen.value = !dropdownOpen.value;
|
|
if (dropdownOpen.value) {
|
|
searchQuery.value = '';
|
|
}
|
|
}
|
|
};
|
|
|
|
const selectCountry = (country: Country) => {
|
|
selectedCountry.value = country;
|
|
dropdownOpen.value = false;
|
|
emit('country-changed', country);
|
|
|
|
// Reformat existing number with new country
|
|
if (localNumber.value) {
|
|
handleInput();
|
|
}
|
|
};
|
|
|
|
const handleInput = () => {
|
|
const rawInput = localNumber.value;
|
|
|
|
// Create full international number
|
|
const fullNumber = selectedCountry.value.dialCode + rawInput.replace(/\D/g, '');
|
|
|
|
try {
|
|
// Parse and validate
|
|
const phoneNumber = parsePhoneNumber(fullNumber);
|
|
const isValid = phoneNumber?.isValid() || false;
|
|
|
|
// Format for display (national format)
|
|
if (phoneNumber && isValid) {
|
|
const formatter = new AsYouType(selectedCountry.value.iso2 as any);
|
|
const formatted = formatter.input(rawInput);
|
|
localNumber.value = formatted;
|
|
}
|
|
|
|
// Emit data
|
|
emit('update:modelValue', fullNumber);
|
|
emit('phone-data', {
|
|
number: fullNumber,
|
|
isValid,
|
|
country: selectedCountry.value
|
|
});
|
|
|
|
} catch (error) {
|
|
// Handle invalid numbers gracefully
|
|
emit('update:modelValue', fullNumber);
|
|
emit('phone-data', {
|
|
number: fullNumber,
|
|
isValid: false,
|
|
country: selectedCountry.value
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleBlur = () => {
|
|
// Additional formatting on blur if needed
|
|
};
|
|
|
|
const handleFlagError = (event: Event) => {
|
|
// Fallback to a default flag or hide image
|
|
const img = event.target as HTMLImageElement;
|
|
img.style.display = 'none';
|
|
};
|
|
|
|
// Initialize from modelValue
|
|
watch(() => props.modelValue, (newValue) => {
|
|
if (newValue && newValue !== selectedCountry.value.dialCode + localNumber.value.replace(/\D/g, '')) {
|
|
try {
|
|
const phoneNumber = parsePhoneNumber(newValue);
|
|
if (phoneNumber) {
|
|
// Find matching country
|
|
const matchingCountry = countries.find(c =>
|
|
c.dialCode === '+' + phoneNumber.countryCallingCode
|
|
);
|
|
|
|
if (matchingCountry) {
|
|
selectedCountry.value = matchingCountry;
|
|
}
|
|
|
|
// Set local number (national format)
|
|
localNumber.value = phoneNumber.formatNational().replace(phoneNumber.countryCallingCode, '').trim();
|
|
}
|
|
} catch (error) {
|
|
// Handle invalid initial value
|
|
localNumber.value = newValue;
|
|
}
|
|
}
|
|
}, { immediate: true });
|
|
</script>
|
|
|
|
<style scoped>
|
|
.phone-input-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.country-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 8px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
background: rgba(var(--v-theme-surface), 1);
|
|
border: 1px solid transparent;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.country-selector:hover {
|
|
background: rgba(var(--v-theme-primary), 0.08);
|
|
border-color: rgba(var(--v-theme-primary), 0.24);
|
|
}
|
|
|
|
.country-selector--open {
|
|
background: rgba(var(--v-theme-primary), 0.12);
|
|
border-color: rgba(var(--v-theme-primary), 0.48);
|
|
}
|
|
|
|
.country-flag {
|
|
width: 24px;
|
|
height: 18px;
|
|
border-radius: 2px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
|
|
object-fit: cover;
|
|
}
|
|
|
|
.country-code {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
|
min-width: 32px;
|
|
}
|
|
|
|
.dropdown-icon {
|
|
transition: transform 0.2s ease;
|
|
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
|
}
|
|
|
|
.dropdown-icon--rotated {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* Dropdown Styling */
|
|
.country-dropdown {
|
|
min-width: 280px;
|
|
max-width: 320px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.search-container {
|
|
padding: 12px;
|
|
border-bottom: 1px solid rgba(var(--v-theme-outline), 0.12);
|
|
background: rgba(var(--v-theme-surface), 1);
|
|
}
|
|
|
|
.search-input :deep(.v-field) {
|
|
background: rgba(var(--v-theme-surface), 1);
|
|
}
|
|
|
|
/* Country List */
|
|
.country-list {
|
|
max-height: 240px;
|
|
overflow-y: auto;
|
|
background: rgba(var(--v-theme-surface), 1);
|
|
}
|
|
|
|
.country-list::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.country-list::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.country-list::-webkit-scrollbar-thumb {
|
|
background: rgba(var(--v-theme-primary), 0.3);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.country-item {
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.country-item:hover {
|
|
background: rgba(var(--v-theme-primary), 0.08) !important;
|
|
}
|
|
|
|
.country-item--selected {
|
|
background: rgba(var(--v-theme-primary), 0.12) !important;
|
|
border-left-color: rgb(var(--v-theme-primary));
|
|
font-weight: 600;
|
|
}
|
|
|
|
.country-item--preferred {
|
|
background: rgba(var(--v-theme-primary), 0.04);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.list-flag {
|
|
width: 20px;
|
|
height: 15px;
|
|
border-radius: 2px;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
object-fit: cover;
|
|
}
|
|
|
|
.country-name {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.dial-code {
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
|
font-family: 'Roboto Mono', monospace;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.country-dropdown {
|
|
min-width: 260px;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.country-list {
|
|
max-height: 200px;
|
|
}
|
|
}
|
|
|
|
/* Dark theme support */
|
|
@media (prefers-color-scheme: dark) {
|
|
.country-dropdown {
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
}
|
|
}
|
|
</style>
|