493 lines
20 KiB
Vue
493 lines
20 KiB
Vue
<template>
|
|
<div class="phone-input-wrapper">
|
|
<v-text-field
|
|
:model-value="displayValue"
|
|
@update:model-value="updatePhone"
|
|
:label="label"
|
|
:variant="variant"
|
|
:density="density"
|
|
:rules="rules"
|
|
:required="required"
|
|
:disabled="disabled"
|
|
:readonly="readonly"
|
|
:clearable="clearable"
|
|
:hide-details="hideDetails"
|
|
:error-messages="errorMessages"
|
|
>
|
|
<template #prepend-inner>
|
|
<v-menu
|
|
v-model="countryMenu"
|
|
:close-on-content-click="true"
|
|
location="bottom"
|
|
max-width="400"
|
|
>
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn
|
|
v-bind="props"
|
|
variant="text"
|
|
size="small"
|
|
class="country-selector"
|
|
:disabled="disabled || readonly"
|
|
>
|
|
<img
|
|
:src="`https://flagcdn.com/24x18/${selectedCountry.iso2.toLowerCase()}.png`"
|
|
:alt="selectedCountry.name"
|
|
class="country-flag"
|
|
@error="handleFlagError"
|
|
/>
|
|
<span class="country-code">{{ selectedCountry.dialCode }}</span>
|
|
<v-icon end size="small">mdi-menu-down</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<v-list density="compact" max-height="400">
|
|
<v-text-field
|
|
v-model="searchQuery"
|
|
placeholder="Search countries..."
|
|
variant="solo"
|
|
density="compact"
|
|
hide-details
|
|
prepend-inner-icon="mdi-magnify"
|
|
class="mx-2 my-2"
|
|
clearable
|
|
></v-text-field>
|
|
<v-list-item
|
|
v-for="country in searchedCountries"
|
|
:key="country.iso2"
|
|
@click="selectCountry(country)"
|
|
class="country-item"
|
|
>
|
|
<template v-slot:prepend>
|
|
<img
|
|
:src="`https://flagcdn.com/24x18/${country.iso2.toLowerCase()}.png`"
|
|
:alt="country.name"
|
|
class="country-flag mr-3"
|
|
@error="handleFlagError"
|
|
/>
|
|
</template>
|
|
<v-list-item-title>
|
|
{{ country.name }}
|
|
</v-list-item-title>
|
|
<template v-slot:append>
|
|
<span class="text-grey">{{ country.dialCode }}</span>
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</template>
|
|
</v-text-field>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, watch } from 'vue';
|
|
import { parsePhoneNumberFromString } from 'libphonenumber-js';
|
|
|
|
interface Country {
|
|
name: string;
|
|
iso2: string;
|
|
dialCode: string;
|
|
}
|
|
|
|
interface Props {
|
|
modelValue?: string;
|
|
label?: string;
|
|
variant?: 'outlined' | 'plain' | 'underlined' | 'solo' | 'solo-inverted' | 'solo-filled' | 'filled';
|
|
density?: 'default' | 'comfortable' | 'compact';
|
|
rules?: any[];
|
|
required?: boolean;
|
|
disabled?: boolean;
|
|
readonly?: boolean;
|
|
clearable?: boolean;
|
|
hideDetails?: boolean | 'auto';
|
|
errorMessages?: string | string[];
|
|
defaultCountry?: string;
|
|
preferredCountries?: string[];
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
label: 'Phone Number',
|
|
variant: 'outlined',
|
|
density: 'comfortable',
|
|
defaultCountry: 'US',
|
|
preferredCountries: () => ['US', 'FR', 'ES', 'PT', 'GB']
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: string];
|
|
}>();
|
|
|
|
// All countries data
|
|
const countries: Country[] = [
|
|
{ name: 'Afghanistan', iso2: 'AF', dialCode: '+93' },
|
|
{ name: 'Albania', iso2: 'AL', dialCode: '+355' },
|
|
{ name: 'Algeria', iso2: 'DZ', dialCode: '+213' },
|
|
{ name: 'American Samoa', iso2: 'AS', dialCode: '+1' },
|
|
{ name: 'Andorra', iso2: 'AD', dialCode: '+376' },
|
|
{ name: 'Angola', iso2: 'AO', dialCode: '+244' },
|
|
{ name: 'Anguilla', iso2: 'AI', dialCode: '+1' },
|
|
{ name: 'Antarctica', iso2: 'AQ', dialCode: '+672' },
|
|
{ name: 'Antigua and Barbuda', iso2: 'AG', dialCode: '+1' },
|
|
{ name: 'Argentina', iso2: 'AR', dialCode: '+54' },
|
|
{ name: 'Armenia', iso2: 'AM', dialCode: '+374' },
|
|
{ name: 'Aruba', iso2: 'AW', dialCode: '+297' },
|
|
{ name: 'Australia', iso2: 'AU', dialCode: '+61' },
|
|
{ name: 'Austria', iso2: 'AT', dialCode: '+43' },
|
|
{ name: 'Azerbaijan', iso2: 'AZ', dialCode: '+994' },
|
|
{ name: 'Bahamas', iso2: 'BS', dialCode: '+1' },
|
|
{ name: 'Bahrain', iso2: 'BH', dialCode: '+973' },
|
|
{ name: 'Bangladesh', iso2: 'BD', dialCode: '+880' },
|
|
{ name: 'Barbados', iso2: 'BB', dialCode: '+1' },
|
|
{ name: 'Belarus', iso2: 'BY', dialCode: '+375' },
|
|
{ name: 'Belgium', iso2: 'BE', dialCode: '+32' },
|
|
{ name: 'Belize', iso2: 'BZ', dialCode: '+501' },
|
|
{ name: 'Benin', iso2: 'BJ', dialCode: '+229' },
|
|
{ name: 'Bermuda', iso2: 'BM', dialCode: '+1' },
|
|
{ name: 'Bhutan', iso2: 'BT', dialCode: '+975' },
|
|
{ name: 'Bolivia', iso2: 'BO', dialCode: '+591' },
|
|
{ name: 'Bosnia and Herzegovina', iso2: 'BA', dialCode: '+387' },
|
|
{ name: 'Botswana', iso2: 'BW', dialCode: '+267' },
|
|
{ name: 'Brazil', iso2: 'BR', dialCode: '+55' },
|
|
{ name: 'British Virgin Islands', iso2: 'VG', dialCode: '+1' },
|
|
{ name: 'Brunei', iso2: 'BN', dialCode: '+673' },
|
|
{ name: 'Bulgaria', iso2: 'BG', dialCode: '+359' },
|
|
{ name: 'Burkina Faso', iso2: 'BF', dialCode: '+226' },
|
|
{ name: 'Burundi', iso2: 'BI', dialCode: '+257' },
|
|
{ name: 'Cambodia', iso2: 'KH', dialCode: '+855' },
|
|
{ name: 'Cameroon', iso2: 'CM', dialCode: '+237' },
|
|
{ name: 'Canada', iso2: 'CA', dialCode: '+1' },
|
|
{ name: 'Cape Verde', iso2: 'CV', dialCode: '+238' },
|
|
{ name: 'Cayman Islands', iso2: 'KY', dialCode: '+1' },
|
|
{ name: 'Central African Republic', iso2: 'CF', dialCode: '+236' },
|
|
{ name: 'Chad', iso2: 'TD', dialCode: '+235' },
|
|
{ name: 'Chile', iso2: 'CL', dialCode: '+56' },
|
|
{ name: 'China', iso2: 'CN', dialCode: '+86' },
|
|
{ name: 'Christmas Island', iso2: 'CX', dialCode: '+61' },
|
|
{ name: 'Cocos Islands', iso2: 'CC', dialCode: '+61' },
|
|
{ name: 'Colombia', iso2: 'CO', dialCode: '+57' },
|
|
{ name: 'Comoros', iso2: 'KM', dialCode: '+269' },
|
|
{ name: 'Cook Islands', iso2: 'CK', dialCode: '+682' },
|
|
{ name: 'Costa Rica', iso2: 'CR', dialCode: '+506' },
|
|
{ name: 'Croatia', iso2: 'HR', dialCode: '+385' },
|
|
{ name: 'Cuba', iso2: 'CU', dialCode: '+53' },
|
|
{ name: 'Curacao', iso2: 'CW', dialCode: '+599' },
|
|
{ name: 'Cyprus', iso2: 'CY', dialCode: '+357' },
|
|
{ name: 'Czech Republic', iso2: 'CZ', dialCode: '+420' },
|
|
{ name: 'Democratic Republic of the Congo', iso2: 'CD', dialCode: '+243' },
|
|
{ name: 'Denmark', iso2: 'DK', dialCode: '+45' },
|
|
{ name: 'Djibouti', iso2: 'DJ', dialCode: '+253' },
|
|
{ name: 'Dominica', iso2: 'DM', dialCode: '+1' },
|
|
{ name: 'Dominican Republic', iso2: 'DO', dialCode: '+1' },
|
|
{ name: 'East Timor', iso2: 'TL', dialCode: '+670' },
|
|
{ name: 'Ecuador', iso2: 'EC', dialCode: '+593' },
|
|
{ name: 'Egypt', iso2: 'EG', dialCode: '+20' },
|
|
{ name: 'El Salvador', iso2: 'SV', dialCode: '+503' },
|
|
{ name: 'Equatorial Guinea', iso2: 'GQ', dialCode: '+240' },
|
|
{ name: 'Eritrea', iso2: 'ER', dialCode: '+291' },
|
|
{ name: 'Estonia', iso2: 'EE', dialCode: '+372' },
|
|
{ name: 'Ethiopia', iso2: 'ET', dialCode: '+251' },
|
|
{ name: 'Falkland Islands', iso2: 'FK', dialCode: '+500' },
|
|
{ name: 'Faroe Islands', iso2: 'FO', dialCode: '+298' },
|
|
{ name: 'Fiji', iso2: 'FJ', dialCode: '+679' },
|
|
{ name: 'Finland', iso2: 'FI', dialCode: '+358' },
|
|
{ name: 'France', iso2: 'FR', dialCode: '+33' },
|
|
{ name: 'French Polynesia', iso2: 'PF', dialCode: '+689' },
|
|
{ name: 'Gabon', iso2: 'GA', dialCode: '+241' },
|
|
{ name: 'Gambia', iso2: 'GM', dialCode: '+220' },
|
|
{ name: 'Georgia', iso2: 'GE', dialCode: '+995' },
|
|
{ name: 'Germany', iso2: 'DE', dialCode: '+49' },
|
|
{ name: 'Ghana', iso2: 'GH', dialCode: '+233' },
|
|
{ name: 'Gibraltar', iso2: 'GI', dialCode: '+350' },
|
|
{ name: 'Greece', iso2: 'GR', dialCode: '+30' },
|
|
{ name: 'Greenland', iso2: 'GL', dialCode: '+299' },
|
|
{ name: 'Grenada', iso2: 'GD', dialCode: '+1' },
|
|
{ name: 'Guadeloupe', iso2: 'GP', dialCode: '+590' },
|
|
{ name: 'Guam', iso2: 'GU', dialCode: '+1' },
|
|
{ name: 'Guatemala', iso2: 'GT', dialCode: '+502' },
|
|
{ name: 'Guernsey', iso2: 'GG', dialCode: '+44' },
|
|
{ name: 'Guinea', iso2: 'GN', dialCode: '+224' },
|
|
{ name: 'Guinea-Bissau', iso2: 'GW', dialCode: '+245' },
|
|
{ name: 'Guyana', iso2: 'GY', dialCode: '+592' },
|
|
{ name: 'Haiti', iso2: 'HT', dialCode: '+509' },
|
|
{ name: 'Honduras', iso2: 'HN', dialCode: '+504' },
|
|
{ name: 'Hong Kong', iso2: 'HK', dialCode: '+852' },
|
|
{ name: 'Hungary', iso2: 'HU', dialCode: '+36' },
|
|
{ name: 'Iceland', iso2: 'IS', dialCode: '+354' },
|
|
{ name: 'India', iso2: 'IN', dialCode: '+91' },
|
|
{ name: 'Indonesia', iso2: 'ID', dialCode: '+62' },
|
|
{ name: 'Iran', iso2: 'IR', dialCode: '+98' },
|
|
{ name: 'Iraq', iso2: 'IQ', dialCode: '+964' },
|
|
{ name: 'Ireland', iso2: 'IE', dialCode: '+353' },
|
|
{ name: 'Isle of Man', iso2: 'IM', dialCode: '+44' },
|
|
{ name: 'Israel', iso2: 'IL', dialCode: '+972' },
|
|
{ name: 'Italy', iso2: 'IT', dialCode: '+39' },
|
|
{ name: 'Ivory Coast', iso2: 'CI', dialCode: '+225' },
|
|
{ name: 'Jamaica', iso2: 'JM', dialCode: '+1' },
|
|
{ name: 'Japan', iso2: 'JP', dialCode: '+81' },
|
|
{ name: 'Jersey', iso2: 'JE', dialCode: '+44' },
|
|
{ name: 'Jordan', iso2: 'JO', dialCode: '+962' },
|
|
{ name: 'Kazakhstan', iso2: 'KZ', dialCode: '+7' },
|
|
{ name: 'Kenya', iso2: 'KE', dialCode: '+254' },
|
|
{ name: 'Kiribati', iso2: 'KI', dialCode: '+686' },
|
|
{ name: 'Kosovo', iso2: 'XK', dialCode: '+383' },
|
|
{ name: 'Kuwait', iso2: 'KW', dialCode: '+965' },
|
|
{ name: 'Kyrgyzstan', iso2: 'KG', dialCode: '+996' },
|
|
{ name: 'Laos', iso2: 'LA', dialCode: '+856' },
|
|
{ name: 'Latvia', iso2: 'LV', dialCode: '+371' },
|
|
{ name: 'Lebanon', iso2: 'LB', dialCode: '+961' },
|
|
{ name: 'Lesotho', iso2: 'LS', dialCode: '+266' },
|
|
{ name: 'Liberia', iso2: 'LR', dialCode: '+231' },
|
|
{ name: 'Libya', iso2: 'LY', dialCode: '+218' },
|
|
{ name: 'Liechtenstein', iso2: 'LI', dialCode: '+423' },
|
|
{ name: 'Lithuania', iso2: 'LT', dialCode: '+370' },
|
|
{ name: 'Luxembourg', iso2: 'LU', dialCode: '+352' },
|
|
{ name: 'Macau', iso2: 'MO', dialCode: '+853' },
|
|
{ name: 'Macedonia', iso2: 'MK', dialCode: '+389' },
|
|
{ name: 'Madagascar', iso2: 'MG', dialCode: '+261' },
|
|
{ name: 'Malawi', iso2: 'MW', dialCode: '+265' },
|
|
{ name: 'Malaysia', iso2: 'MY', dialCode: '+60' },
|
|
{ name: 'Maldives', iso2: 'MV', dialCode: '+960' },
|
|
{ name: 'Mali', iso2: 'ML', dialCode: '+223' },
|
|
{ name: 'Malta', iso2: 'MT', dialCode: '+356' },
|
|
{ name: 'Marshall Islands', iso2: 'MH', dialCode: '+692' },
|
|
{ name: 'Martinique', iso2: 'MQ', dialCode: '+596' },
|
|
{ name: 'Mauritania', iso2: 'MR', dialCode: '+222' },
|
|
{ name: 'Mauritius', iso2: 'MU', dialCode: '+230' },
|
|
{ name: 'Mayotte', iso2: 'YT', dialCode: '+262' },
|
|
{ name: 'Mexico', iso2: 'MX', dialCode: '+52' },
|
|
{ name: 'Micronesia', iso2: 'FM', dialCode: '+691' },
|
|
{ name: 'Moldova', iso2: 'MD', dialCode: '+373' },
|
|
{ name: 'Monaco', iso2: 'MC', dialCode: '+377' },
|
|
{ name: 'Mongolia', iso2: 'MN', dialCode: '+976' },
|
|
{ name: 'Montenegro', iso2: 'ME', dialCode: '+382' },
|
|
{ name: 'Montserrat', iso2: 'MS', dialCode: '+1' },
|
|
{ name: 'Morocco', iso2: 'MA', dialCode: '+212' },
|
|
{ name: 'Mozambique', iso2: 'MZ', dialCode: '+258' },
|
|
{ name: 'Myanmar', iso2: 'MM', dialCode: '+95' },
|
|
{ name: 'Namibia', iso2: 'NA', dialCode: '+264' },
|
|
{ name: 'Nauru', iso2: 'NR', dialCode: '+674' },
|
|
{ name: 'Nepal', iso2: 'NP', dialCode: '+977' },
|
|
{ name: 'Netherlands', iso2: 'NL', dialCode: '+31' },
|
|
{ name: 'New Caledonia', iso2: 'NC', dialCode: '+687' },
|
|
{ name: 'New Zealand', iso2: 'NZ', dialCode: '+64' },
|
|
{ name: 'Nicaragua', iso2: 'NI', dialCode: '+505' },
|
|
{ name: 'Niger', iso2: 'NE', dialCode: '+227' },
|
|
{ name: 'Nigeria', iso2: 'NG', dialCode: '+234' },
|
|
{ name: 'Niue', iso2: 'NU', dialCode: '+683' },
|
|
{ name: 'North Korea', iso2: 'KP', dialCode: '+850' },
|
|
{ name: 'Northern Mariana Islands', iso2: 'MP', dialCode: '+1' },
|
|
{ name: 'Norway', iso2: 'NO', dialCode: '+47' },
|
|
{ name: 'Oman', iso2: 'OM', dialCode: '+968' },
|
|
{ name: 'Pakistan', iso2: 'PK', dialCode: '+92' },
|
|
{ name: 'Palau', iso2: 'PW', dialCode: '+680' },
|
|
{ name: 'Palestine', iso2: 'PS', dialCode: '+970' },
|
|
{ name: 'Panama', iso2: 'PA', dialCode: '+507' },
|
|
{ name: 'Papua New Guinea', iso2: 'PG', dialCode: '+675' },
|
|
{ name: 'Paraguay', iso2: 'PY', dialCode: '+595' },
|
|
{ name: 'Peru', iso2: 'PE', dialCode: '+51' },
|
|
{ name: 'Philippines', iso2: 'PH', dialCode: '+63' },
|
|
{ name: 'Poland', iso2: 'PL', dialCode: '+48' },
|
|
{ name: 'Portugal', iso2: 'PT', dialCode: '+351' },
|
|
{ name: 'Puerto Rico', iso2: 'PR', dialCode: '+1' },
|
|
{ name: 'Qatar', iso2: 'QA', dialCode: '+974' },
|
|
{ name: 'Republic of the Congo', iso2: 'CG', dialCode: '+242' },
|
|
{ name: 'Reunion', iso2: 'RE', dialCode: '+262' },
|
|
{ name: 'Romania', iso2: 'RO', dialCode: '+40' },
|
|
{ name: 'Russia', iso2: 'RU', dialCode: '+7' },
|
|
{ name: 'Rwanda', iso2: 'RW', dialCode: '+250' },
|
|
{ name: 'Saint Barthelemy', iso2: 'BL', dialCode: '+590' },
|
|
{ name: 'Saint Helena', iso2: 'SH', dialCode: '+290' },
|
|
{ name: 'Saint Kitts and Nevis', iso2: 'KN', dialCode: '+1' },
|
|
{ name: 'Saint Lucia', iso2: 'LC', dialCode: '+1' },
|
|
{ name: 'Saint Martin', iso2: 'MF', dialCode: '+590' },
|
|
{ name: 'Saint Pierre and Miquelon', iso2: 'PM', dialCode: '+508' },
|
|
{ name: 'Saint Vincent and the Grenadines', iso2: 'VC', dialCode: '+1' },
|
|
{ name: 'Samoa', iso2: 'WS', dialCode: '+685' },
|
|
{ name: 'San Marino', iso2: 'SM', dialCode: '+378' },
|
|
{ name: 'Sao Tome and Principe', iso2: 'ST', dialCode: '+239' },
|
|
{ name: 'Saudi Arabia', iso2: 'SA', dialCode: '+966' },
|
|
{ name: 'Senegal', iso2: 'SN', dialCode: '+221' },
|
|
{ name: 'Serbia', iso2: 'RS', dialCode: '+381' },
|
|
{ name: 'Seychelles', iso2: 'SC', dialCode: '+248' },
|
|
{ name: 'Sierra Leone', iso2: 'SL', dialCode: '+232' },
|
|
{ name: 'Singapore', iso2: 'SG', dialCode: '+65' },
|
|
{ name: 'Sint Maarten', iso2: 'SX', dialCode: '+1' },
|
|
{ name: 'Slovakia', iso2: 'SK', dialCode: '+421' },
|
|
{ name: 'Slovenia', iso2: 'SI', dialCode: '+386' },
|
|
{ name: 'Solomon Islands', iso2: 'SB', dialCode: '+677' },
|
|
{ name: 'Somalia', iso2: 'SO', dialCode: '+252' },
|
|
{ name: 'South Africa', iso2: 'ZA', dialCode: '+27' },
|
|
{ name: 'South Korea', iso2: 'KR', dialCode: '+82' },
|
|
{ name: 'South Sudan', iso2: 'SS', dialCode: '+211' },
|
|
{ name: 'Spain', iso2: 'ES', dialCode: '+34' },
|
|
{ name: 'Sri Lanka', iso2: 'LK', dialCode: '+94' },
|
|
{ name: 'Sudan', iso2: 'SD', dialCode: '+249' },
|
|
{ name: 'Suriname', iso2: 'SR', dialCode: '+597' },
|
|
{ name: 'Svalbard and Jan Mayen', iso2: 'SJ', dialCode: '+47' },
|
|
{ name: 'Swaziland', iso2: 'SZ', dialCode: '+268' },
|
|
{ name: 'Sweden', iso2: 'SE', dialCode: '+46' },
|
|
{ name: 'Switzerland', iso2: 'CH', dialCode: '+41' },
|
|
{ name: 'Syria', iso2: 'SY', dialCode: '+963' },
|
|
{ name: 'Taiwan', iso2: 'TW', dialCode: '+886' },
|
|
{ name: 'Tajikistan', iso2: 'TJ', dialCode: '+992' },
|
|
{ name: 'Tanzania', iso2: 'TZ', dialCode: '+255' },
|
|
{ name: 'Thailand', iso2: 'TH', dialCode: '+66' },
|
|
{ name: 'Togo', iso2: 'TG', dialCode: '+228' },
|
|
{ name: 'Tokelau', iso2: 'TK', dialCode: '+690' },
|
|
{ name: 'Tonga', iso2: 'TO', dialCode: '+676' },
|
|
{ name: 'Trinidad and Tobago', iso2: 'TT', dialCode: '+1' },
|
|
{ name: 'Tunisia', iso2: 'TN', dialCode: '+216' },
|
|
{ name: 'Turkey', iso2: 'TR', dialCode: '+90' },
|
|
{ name: 'Turkmenistan', iso2: 'TM', dialCode: '+993' },
|
|
{ name: 'Turks and Caicos Islands', iso2: 'TC', dialCode: '+1' },
|
|
{ name: 'Tuvalu', iso2: 'TV', dialCode: '+688' },
|
|
{ name: 'U.S. Virgin Islands', iso2: 'VI', dialCode: '+1' },
|
|
{ name: 'Uganda', iso2: 'UG', dialCode: '+256' },
|
|
{ name: 'Ukraine', iso2: 'UA', dialCode: '+380' },
|
|
{ name: 'United Arab Emirates', iso2: 'AE', dialCode: '+971' },
|
|
{ name: 'United Kingdom', iso2: 'GB', dialCode: '+44' },
|
|
{ name: 'United States', iso2: 'US', dialCode: '+1' },
|
|
{ name: 'Uruguay', iso2: 'UY', dialCode: '+598' },
|
|
{ name: 'Uzbekistan', iso2: 'UZ', dialCode: '+998' },
|
|
{ name: 'Vanuatu', iso2: 'VU', dialCode: '+678' },
|
|
{ name: 'Vatican', iso2: 'VA', dialCode: '+379' },
|
|
{ name: 'Venezuela', iso2: 'VE', dialCode: '+58' },
|
|
{ name: 'Vietnam', iso2: 'VN', dialCode: '+84' },
|
|
{ name: 'Wallis and Futuna', iso2: 'WF', dialCode: '+681' },
|
|
{ name: 'Western Sahara', iso2: 'EH', dialCode: '+212' },
|
|
{ name: 'Yemen', iso2: 'YE', dialCode: '+967' },
|
|
{ name: 'Zambia', iso2: 'ZM', dialCode: '+260' },
|
|
{ name: 'Zimbabwe', iso2: 'ZW', dialCode: '+263' },
|
|
];
|
|
|
|
const countryMenu = ref(false);
|
|
const localNumber = ref('');
|
|
const searchQuery = ref('');
|
|
const selectedCountry = ref<Country>(
|
|
countries.find(c => c.iso2 === props.defaultCountry) || countries[0]
|
|
);
|
|
|
|
// Search functionality
|
|
const searchedCountries = computed(() => {
|
|
if (!searchQuery.value) {
|
|
return filteredCountries.value;
|
|
}
|
|
|
|
const query = searchQuery.value.toLowerCase();
|
|
return filteredCountries.value.filter(country =>
|
|
country.name.toLowerCase().includes(query) ||
|
|
country.dialCode.includes(query) ||
|
|
country.iso2.toLowerCase().includes(query)
|
|
);
|
|
});
|
|
|
|
// Sort countries with preferred ones first
|
|
const filteredCountries = computed(() => {
|
|
const preferred = countries.filter(c => props.preferredCountries.includes(c.iso2));
|
|
const others = countries.filter(c => !props.preferredCountries.includes(c.iso2));
|
|
return [...preferred, ...others];
|
|
});
|
|
|
|
// Display value with local formatting
|
|
const displayValue = computed(() => {
|
|
const full = selectedCountry.value.dialCode + localNumber.value;
|
|
try {
|
|
const phoneNumber = parsePhoneNumberFromString(full);
|
|
return phoneNumber ? phoneNumber.format('NATIONAL') : localNumber.value;
|
|
} catch {
|
|
return localNumber.value;
|
|
}
|
|
});
|
|
|
|
// Parse initial value
|
|
watch(() => props.modelValue, (newValue) => {
|
|
if (newValue) {
|
|
// Find matching country code, but prefer current selection if it matches
|
|
const matchingCountries = countries.filter(c => newValue.startsWith(c.dialCode));
|
|
if (matchingCountries.length > 0) {
|
|
// If current country is in the matching list, keep it
|
|
const currentMatches = matchingCountries.find(c => c.iso2 === selectedCountry.value.iso2);
|
|
if (currentMatches) {
|
|
// Keep current country
|
|
localNumber.value = newValue.slice(selectedCountry.value.dialCode.length);
|
|
} else {
|
|
// Prefer default country if it matches, otherwise use the first match
|
|
const defaultCountry = matchingCountries.find(c => c.iso2 === props.defaultCountry);
|
|
const selectedNewCountry = defaultCountry || matchingCountries[0];
|
|
selectedCountry.value = selectedNewCountry;
|
|
localNumber.value = newValue.slice(selectedNewCountry.dialCode.length);
|
|
}
|
|
} else {
|
|
// Default to current country if no match
|
|
localNumber.value = newValue;
|
|
}
|
|
} else {
|
|
localNumber.value = '';
|
|
}
|
|
}, { immediate: true });
|
|
|
|
// Update phone number - strip non-numeric characters
|
|
const updatePhone = (value: string) => {
|
|
const digits = value.replace(/\D/g, '');
|
|
localNumber.value = digits;
|
|
if (digits) {
|
|
emit('update:modelValue', selectedCountry.value.dialCode + digits);
|
|
} else {
|
|
emit('update:modelValue', '');
|
|
}
|
|
};
|
|
|
|
// Select country
|
|
const selectCountry = (country: Country) => {
|
|
selectedCountry.value = country;
|
|
countryMenu.value = false;
|
|
searchQuery.value = '';
|
|
if (localNumber.value) {
|
|
emit('update:modelValue', country.dialCode + localNumber.value);
|
|
}
|
|
};
|
|
|
|
// Handle flag loading errors
|
|
const handleFlagError = (event: Event) => {
|
|
const img = event.target as HTMLImageElement;
|
|
img.style.display = 'none';
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.phone-input-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.country-selector {
|
|
padding: 0 8px;
|
|
min-width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.country-flag {
|
|
width: 24px;
|
|
height: 18px;
|
|
margin-right: 6px;
|
|
object-fit: contain;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.country-code {
|
|
font-size: 0.875rem;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.country-item {
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.country-item:hover {
|
|
background-color: rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
:deep(.v-field__prepend-inner) {
|
|
padding-top: 0 !important;
|
|
}
|
|
</style>
|