updates to database schema

components/PhoneInputWrapper.vue

@@ -23,7 +23,6 @@
           :close-on-content-click="false"
           location="bottom start"
           :offset="isMobile ? 8 : 4"
-          :max-height="isMobile ? '70vh' : '300px'"
           min-width="280"
           :transition="isMobile ? 'slide-y-transition' : 'fade-transition'"
         >
@@ -161,12 +160,7 @@
 
 <script setup lang="ts">
 import { parsePhoneNumber, AsYouType } from 'libphonenumber-js';
-
-interface Country {
-  name: string;
-  iso2: string;
-  dialCode: string;
-}
+import { getPhoneCountriesWithPreferred, searchPhoneCountries, getPhoneCountryByCode, type PhoneCountry } from '~/utils/phone-countries';
 
 interface Props {
   modelValue?: string;
@@ -183,8 +177,8 @@ interface Props {
 
 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;
+  (e: 'country-changed', country: PhoneCountry): void;
+  (e: 'phone-data', data: { number: string; isValid: boolean; country: PhoneCountry }): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -199,46 +193,15 @@ const props = withDefaults(defineProps<Props>(), {
 
 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' }
-];
+// Get comprehensive countries list
+const countries = getPhoneCountriesWithPreferred(props.preferredCountries);
 
 // 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]
+const selectedCountry = ref<PhoneCountry>(
+  getPhoneCountryByCode(props.defaultCountry) || countries[0]
 );
 
 // Mobile detection
@@ -262,19 +225,7 @@ onMounted(() => {
 });
 
 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)
-  );
+  return searchPhoneCountries(searchQuery.value, props.preferredCountries);
 });
 
 // Methods
@@ -295,7 +246,7 @@ const toggleDropdown = () => {
   }
 };
 
-const selectCountry = (country: Country) => {
+const selectCountry = (country: PhoneCountry) => {
   selectedCountry.value = country;
   dropdownOpen.value = false;
   emit('country-changed', country);
@@ -461,8 +412,11 @@ watch(() => props.modelValue, (newValue) => {
 .country-dropdown {
   min-width: 280px;
   max-width: 320px;
+  max-height: 400px;
   border-radius: 8px;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .search-container {
@@ -477,7 +431,8 @@ watch(() => props.modelValue, (newValue) => {
 
 /* Country List */
 .country-list {
-  max-height: 240px;
+  flex: 1;
+  max-height: 300px;
   overflow-y: auto;
   background: rgba(var(--v-theme-surface), 1);
 }