@ozdao/martyrs 0.2.481 → 0.2.483

package/src/components/FieldPhone/FieldPhone.vue

@@ -7,10 +7,7 @@
       { 'bg-fourth-nano': validation }, 
       { disabled: disabled }
     ]" 
-    :style="[
-      rootStyle, 
-      styles
-    ]" 
+    :style="[rootStyle, styles]" 
     ref="rootElement"
     class="vue3-reactive-tel-input"
   >
@@ -19,30 +16,39 @@
       :class="['vti__dropdown', { open: open }]"
       :style="[dropdownStyle]"
       :tabindex="dropdownOptions.tabindex"
-      @keydown="keyboardNav"
-      @click="toggleDropdown"
       @keydown.esc="reset"
       class="br-solid br-black-transp br-1px radius-thin"
     >
-      <span class="flex-nowrap flex flex-v-center  p-medium vti__selection">
+      <span class="flex-nowrap flex flex-v-center p-medium vti__selection">
         <span v-if="dropdownOptions.showFlags" v-html="activeCountryFlag" class="mn-r-nano" />
-        <span v-if="dropdownOptions.showDialCodeInSelection" class="vti__country-code">
-          +{{ activeCountry && activeCountry.dialCode }}
-        </span>
-        <!-- <slot name="arrow-icon" :open="open"> -->
-          <!-- <span class="vti__dropdown-arrow">{{ open ? "▲" : "▼" }}</span> -->
-        <!-- </slot> -->
+        
+        <!-- Новый инпут для ввода кода страны -->
+        <input
+          v-if="dropdownOptions.showDialCodeInSelection"
+          v-model="dialCodeInput"
+          @input="onDialCodeInput"
+          @focus="openDropdown"
+          @blur="onDialCodeBlur"
+          @keydown="keyboardNav"
+          type="text"
+          class="vti__country-code-input"
+          :placeholder="`+${activeCountry?.dialCode || ''}`"
+          :disabled="disabled"
+          :size="Math.max((dialCodeInput?.length || 0) + 1, 3)"
+          maxlength="5"
+        />
+
       </span>
+      
       <ul 
         ref="list" 
         class="bs-black radius-small vti__dropdown-list"
         v-show="open" 
         :class="dropdownOpenDirection"
         :style="[listStyle]"
-         
-         >
+      >
         <li
-          v-for="(pb, index) in sortedCountries"
+          v-for="(pb, index) in filteredAndSortedCountries"
           class="flex-nowrap flex w-max"
           :class="['vti__dropdown-item', getItemClass(index, pb.iso2)]"
           :key="pb.iso2 + (pb.preferred ? '-preferred' : '')"
@@ -55,35 +61,34 @@
         </li>
       </ul>
     </div>
-    <!-- <div :class="[divInputClass]" > -->
-      <input
-        v-model="phone"
-        inputmode="numeric" 
-        pattern="\d*"
-        ref="input"
-        :type="inputOptions.type"
-        :autocomplete="inputOptions.autocomplete"
-        :autofocus="inputOptions.autofocus"
-        :class="['vti__input', inputOptions.styleClasses, inputClass, Iclasses]"
-        :style="[inputStyle, Istyles]"
-        :disabled="disabled"
-        :id="inputId !== ''? inputId : inputOptions.id"
-        :maxlength="inputOptions.maxlength"
-        :name="inputId !== ''? inputId : inputOptions.name"
-        :placeholder="parsedPlaceholder"
-        :readonly="inputOptions.readonly"
-        :required="inputOptions.required"
-        :tabindex="inputOptions.tabindex"
-        @blur="onBlur"
-        @focus="onFocus"
-        @input="onInput"
-        @keyup.enter="onEnter"
-        @keyup.space="onSpace"
-      />
-      <slot></slot> <!-- slot outlet -->
-    <!-- </div> -->
-
+    
+    <input
+      v-model="phone"
+      inputmode="numeric" 
+      pattern="\d*"
+      ref="input"
+      :type="inputOptions.type"
+      :autocomplete="inputOptions.autocomplete"
+      :autofocus="inputOptions.autofocus"
+      :class="['vti__input', inputOptions.styleClasses, inputClass, Iclasses]"
+      :style="[inputStyle, Istyles]"
+      :disabled="disabled"
+      :id="inputId !== '' ? inputId : inputOptions.id"
+      :maxlength="inputOptions.maxlength"
+      :name="inputId !== '' ? inputId : inputOptions.name"
+      :placeholder="parsedPlaceholder"
+      :readonly="inputOptions.readonly"
+      :required="inputOptions.required"
+      :tabindex="inputOptions.tabindex"
+      @blur="onBlur"
+      @focus="onFocus"
+      @input="onInput"
+      @keyup.enter="onEnter"
+      @keyup.space="onSpace"
+    />
+    <slot></slot>
   </div>
+  
   <!-- Validation -->
   <transition name="fade">
     <div v-if="validation" class="mn-t-thin mn-b-thin invalid-feedback">
@@ -92,7 +97,6 @@
   </transition>
 </template>
 
-
 <script setup>
   import { ref, reactive, watch, computed, onMounted, nextTick } from 'vue';
   import { parsePhoneNumberFromString } from 'libphonenumber-js';
@@ -103,65 +107,60 @@
   let vClickOutside = clickOutside
 
   const props = defineProps({
-    modelValue: { type: String, default: '',},
-    badClass: { type: [String, Array, Object], default: '', },
-    goodClass: { type: [String, Array, Object], default: '', },
-    badStyle: { type: [String, Array, Object], default: '', },
-    goodStyle: { type: [String, Array, Object], default: '', },
-    badInputClass: { type: [String, Array, Object], default: '', },
-    goodInputClass: { type: [String, Array, Object], default: '', },
-    badInputStyle: { type: [String, Array, Object], default: '', },
-    goodInputStyle: { type: [String, Array, Object], default: '', },
-    allCountries: { type: Array, default: () => allCountries, },
-    autoFormat: { type: Boolean, default: () => true, },
-    validation: { type: [Boolean, Object], default: false, },
-    customValidate: { type: [Boolean, RegExp], default: () => false, },
-    defaultCountry: { type: String, default: () => '', },
-    disabled: { type: Boolean, default: () => false, },
-    autoDefaultCountry: { type: Boolean, default: () => true },
-    ignoredCountries: { type: Array, default: () => [], },
-    invalidMsg: { type: String, default: () => '', },
-    mode: { type: String, default: () => 'auto', },
-    onlyCountries: { type: Array, default: () => [], },
-    preferredCountries: { type: Array, default: () => [], },
-    validCharactersOnly: { type: Boolean, default: () => false, },
-    rootClass: { type: [String, Array, Object], default: () => '', },
-    inputClass: { type: [String, Array, Object], default: () => {return ''}, },
-    divInputClass: { type: [String, Array, Object], default: () => {return ''}, },
-    rootStyle: { type: [String, Array, Object], default: () => {return ''}, },
-    dropdownStyle: { type: [String, Array, Object], default: () => {return ''}, },
-    listStyle: { type: [String, Array, Object], default: () => {return ''}, },
-    inputStyle: { type: [String, Array, Object], default: () => {return ''}, },
-    inputId: { type: [String, Array, Object], default: () => {return ''}, },
-    Placeholder: { type: [String, Object, Function], default: () => {return ''}, },
+    modelValue: { type: String, default: '' },
+    badClass: { type: [String, Array, Object], default: '' },
+    goodClass: { type: [String, Array, Object], default: '' },
+    badStyle: { type: [String, Array, Object], default: '' },
+    goodStyle: { type: [String, Array, Object], default: '' },
+    badInputClass: { type: [String, Array, Object], default: '' },
+    goodInputClass: { type: [String, Array, Object], default: '' },
+    badInputStyle: { type: [String, Array, Object], default: '' },
+    goodInputStyle: { type: [String, Array, Object], default: '' },
+    allCountries: { type: Array, default: () => allCountries },
+    autoFormat: { type: Boolean, default: true },
+    validation: { type: [Boolean, Object], default: false },
+    customValidate: { type: [Boolean, RegExp], default: false },
+    defaultCountry: { type: String, default: '' },
+    disabled: { type: Boolean, default: false },
+    autoDefaultCountry: { type: Boolean, default: true },
+    ignoredCountries: { type: Array, default: () => [] },
+    invalidMsg: { type: String, default: '' },
+    mode: { type: String, default: 'auto' },
+    onlyCountries: { type: Array, default: () => [] },
+    preferredCountries: { type: Array, default: () => [] },
+    validCharactersOnly: { type: Boolean, default: false },
+    rootClass: { type: [String, Array, Object], default: '' },
+    inputClass: { type: [String, Array, Object], default: '' },
+    rootStyle: { type: [String, Array, Object], default: '' },
+    dropdownStyle: { type: [String, Array, Object], default: '' },
+    listStyle: { type: [String, Array, Object], default: '' },
+    inputStyle: { type: [String, Array, Object], default: '' },
+    inputId: { type: [String, Array, Object], default: '' },
+    Placeholder: { type: [String, Object, Function], default: '' },
     dropdownOptions: { 
       type: Object, 
-      default: () => {
-        return {
-          showDialCodeInList: true,
-          showDialCodeInSelection: false,
-          showFlags: true,
-          tabindex: 0
-        }
-      } 
+      default: () => ({
+        showDialCodeInList: true,
+        showDialCodeInSelection: false,
+        showFlags: true,
+        tabindex: 0
+      })
     },
     inputOptions: { 
       type: Object, 
-      default: () => { 
-        return {
-          autocomplete: 'on',
-          autofocus: false,
-          id: '',
-          maxlength: 25,
-          name: 'telephone',
-          placeholder: 'Enter a phone number',
-          readonly: false,
-          required: false,
-          tabindex: 0,
-          type: 'tel',
-          styleClasses: ''
-        }
-      }
+      default: () => ({ 
+        autocomplete: 'on',
+        autofocus: false,
+        id: '',
+        maxlength: 25,
+        name: 'telephone',
+        placeholder: 'Enter a phone number',
+        readonly: false,
+        required: false,
+        tabindex: 0,
+        type: 'tel',
+        styleClasses: ''
+      })
     },
   });
 
@@ -178,14 +177,11 @@
     'space'
   ]);
 
-  const counter = ref(5);
-  const initCounter = ref(5);
-  const message = reactive({
-    action: null,
-    amount: null,
-  });
-  const phone = ref(props.modelValue ? props.modelValue : '');
+  // Reactive data
+  const phone = ref(props.modelValue || '');
   const activeCountryCode = ref('');
+  const dialCodeInput = ref('');
+  const dialCodeFilter = ref('');
   const open = ref(false);
   const finishMounted = ref(false);
   const selectedIndex = ref(null);
@@ -194,12 +190,13 @@
   const dropdownOpenDirection = ref('below');
   const parsedPlaceholder = ref(props.Placeholder !== '' ? props.Placeholder : props.inputOptions.placeholder);
 
-  const rootElement = ref(null)
-  const list = ref(null)
-  const input = ref(null)
+  // Element refs
+  const rootElement = ref(null);
+  const list = ref(null);
+  const input = ref(null);
 
   // Lifecycle hooks
-  onMounted(async () => {
+  onMounted(() => {
     if (props.modelValue) {
       phone.value = props.modelValue;
     }
@@ -208,11 +205,15 @@
 
     initializeCountry()
       .then(() => {
-        if (!phone.value
-          && props.inputOptions?.showDialCode
-          && activeCountryCode.value) {
+        if (!phone.value && props.inputOptions?.showDialCode && activeCountryCode.value) {
           phone.value = `+${activeCountryCode.value}`;
         }
+        
+        // Инициализируем dialCodeInput
+        if (activeCountry.value && props.dropdownOptions.showDialCodeInSelection) {
+          dialCodeInput.value = `+${activeCountry.value.dialCode}`;
+        }
+        
         emits('validate', phoneObject.value);
       })
       .catch(console.error)
@@ -223,7 +224,7 @@
 
   // Computed properties
   const activeCountry = computed(() => {
-   return findCountry(activeCountryCode.value);
+    return findCountry(activeCountryCode.value);
   });
 
   const activeCountryFlag = computed(() => {
@@ -245,20 +246,38 @@
   });
 
   const filteredCountries = computed(() => {
+    let countries = props.allCountries;
+
+    // Фильтрация по onlyCountries/ignoredCountries
     if (props.onlyCountries && props.onlyCountries.length) {
-      return props.allCountries.filter(({ iso2 }) => props.onlyCountries.includes(iso2.toUpperCase()));
+      countries = countries.filter(({ iso2 }) => 
+        props.onlyCountries.includes(iso2.toUpperCase())
+      );
+    } else if (props.ignoredCountries && props.ignoredCountries.length) {
+      countries = countries.filter(({ iso2 }) =>
+        !props.ignoredCountries.includes(iso2.toUpperCase()) && 
+        !props.ignoredCountries.includes(iso2.toLowerCase())
+      );
     }
 
-    if (props.ignoredCountries && props.ignoredCountries.length) {
-      return props.allCountries.filter(({ iso2 }) =>
-        !props.ignoredCountries.includes(iso2.toUpperCase()) && !props.ignoredCountries.includes(iso2.toLowerCase()),
+    // Фильтрация по введенному коду страны
+    if (dialCodeFilter.value) {
+      const filterValue = dialCodeFilter.value.replace('+', '');
+      countries = countries.filter(country => 
+        country.dialCode.startsWith(filterValue)
       );
     }
 
-    return props.allCountries;
+    return countries;
   });
-  const sortedCountries = computed(() => {
+
+  const filteredAndSortedCountries = computed(() => {
     const preferredCountries = getCountries(props.preferredCountries)
+      .filter(country => {
+        if (!dialCodeFilter.value) return true;
+        const filterValue = dialCodeFilter.value.replace('+', '');
+        return country.dialCode.startsWith(filterValue);
+      })
       .map(country => ({ ...country, preferred: true }));
 
     return [...preferredCountries, ...filteredCountries.value];
@@ -317,9 +336,8 @@
     return phoneObject.value.valid === true ? props.goodInputStyle : 
            phoneObject.value.valid === false ? props.badInputStyle : undefined;
   });
-  // ///////////
+
   // Watchers
-  // ///////////
   watch(activeCountry, (newValue, oldValue) => {
     if (!newValue && oldValue?.iso2) {
       activeCountryCode.value = oldValue.iso2;
@@ -328,20 +346,19 @@
     if (newValue?.iso2) {
       emits('country-changed', newValue);
       resetPlaceholder();
+      // Обновляем dialCodeInput при смене страны
+      dialCodeInput.value = `+${newValue.dialCode}`;
     }
   });
 
-  // Следим за изменениями countryCode в phoneObject
   watch(() => phoneObject.value.countryCode, (newValue) => {
     activeCountryCode.value = newValue;
   });
 
-  // Следим за изменениями валидности phoneObject
   watch(() => phoneObject.value.valid, () => {
     emits('validate', phoneObject.value);
   });
 
-  // Следим за изменениями отформатированного номера в phoneObject
   watch(() => phoneObject.value.formatted, (newValue) => {
     if (!props.autoFormat || props.customValidate) {
       return;
@@ -355,12 +372,10 @@
     });
   });
 
-  // Следим за изменениями placeholder в inputOptions
   watch(() => props.inputOptions.placeholder, () => {
     resetPlaceholder();
   });
 
-  // Следим за внешними изменениями значения (например, через v-model)
   watch(() => props.modelValue, (newValue, oldValue) => {
     if (!testCharacters()) {
       nextTick(() => {
@@ -372,7 +387,6 @@
     }
   });
 
-  // Следим за состоянием открытия/закрытия dropdown
   watch(open, (isDropdownOpened) => {
     if (isDropdownOpened) {
       setDropdownPosition();
@@ -383,49 +397,100 @@
   });
 
   // Methods
-  function getCountry() {
-    return fetch('https://ip2c.org/s')
-        .then((response) => response.text())
-        .then((response) => {
-            const result = (response || '').toString();
+  function onDialCodeInput() {
+    // Убеждаемся, что символ + всегда есть в начале
+    if (!dialCodeInput.value.startsWith('+')) {
+      dialCodeInput.value = '+' + dialCodeInput.value.replace(/^\+*/, '');
+    }
+    
+    // Разрешаем только + и цифры
+    dialCodeInput.value = dialCodeInput.value.replace(/[^\+\d]/g, '');
+    
+    // Убеждаемся что + только в начале
+    const plusCount = (dialCodeInput.value.match(/\+/g) || []).length;
+    if (plusCount > 1) {
+      dialCodeInput.value = '+' + dialCodeInput.value.replace(/\+/g, '');
+    }
+    
+    dialCodeFilter.value = dialCodeInput.value;
+    open.value = true;
+    
+    // Автовыбор страны если код точно совпадает
+    const exactMatch = filteredCountries.value.find(country => 
+      `+${country.dialCode}` === dialCodeInput.value
+    );
+    
+    if (exactMatch && filteredAndSortedCountries.value.length === 1) {
+      choose(exactMatch);
+    }
+  }
 
-            if (!result || result[0] !== '1') {
-                throw new Error('unable to fetch the country');
-            }
+  function onDialCodeBlur() {
+    setTimeout(() => {
+      if (!dialCodeInput.value && activeCountry.value) {
+        dialCodeInput.value = `+${activeCountry.value.dialCode}`;
+      }
+    }, 200);
+  }
 
-            return result.substr(2, 2);
-        });
+  function openDropdown() {
+    if (!props.disabled) {
+      open.value = true;
+    }
   }
-  
+
   function setCaretPosition(ctrl, pos) {
-    // Modern browsers
     if (ctrl.setSelectionRange) {
-        ctrl.focus();
-        ctrl.setSelectionRange(pos, pos);
-
-        // IE8 and below
+      ctrl.focus();
+      ctrl.setSelectionRange(pos, pos);
     } else if (ctrl.createTextRange) {
-        const range = ctrl.createTextRange();
-        range.collapse(true);
-        range.moveEnd('character', pos);
-        range.moveStart('character', pos);
-        range.select();
+      const range = ctrl.createTextRange();
+      range.collapse(true);
+      range.moveEnd('character', pos);
+      range.moveStart('character', pos);
+      range.select();
     }
   }
 
   function resetPlaceholder() {
     parsedPlaceholder.value = props.inputOptions.placeholder;
   }
+
   function initializeCountry() {
     return new Promise((resolve) => {
-      if (phone.value?.[0] === '+') { resolve(); return; }
-      if (props.defaultCountry) { choose(props.defaultCountry); resolve(); return; }
+      if (phone.value?.[0] === '+') { 
+        resolve(); 
+        return; 
+      }
+      
+      if (props.defaultCountry) { 
+        choose(props.defaultCountry); 
+        resolve(); 
+        return; 
+      }
+      
       const fallbackCountry = props.preferredCountries[0] || filteredCountries.value[0];
+      
       if (props.autoDefaultCountry) {
-        getCountry()
-          .then((res) => { choose(res || activeCountryCode.value); })
-          .catch((error) => { console.warn(error); choose(fallbackCountry); })
-          .finally(() => { resolve(); });
+        fetch('https://ip2c.org/s')
+          .then((response) => response.text())
+          .then((response) => {
+            const result = (response || '').toString();
+            if (!result || result[0] !== '1') {
+              throw new Error('unable to fetch the country');
+            }
+            return result.substr(2, 2);
+          })
+          .then((res) => { 
+            choose(res || activeCountryCode.value); 
+          })
+          .catch((error) => { 
+            console.warn(error); 
+            choose(fallbackCountry); 
+          })
+          .finally(() => { 
+            resolve(); 
+          });
       } else {
         choose(fallbackCountry);
         resolve();
@@ -454,16 +519,27 @@
     
     if (phone.value?.[0] === '+' && parsedCountry.iso2 && phoneObject.value.nationalNumber) {
       activeCountryCode.value = parsedCountry.iso2;
-      phone.value = parsePhoneNumberFromString(phoneObject.value.nationalNumber, parsedCountry.iso2).formatInternational();
-      return;
-    }
-
-    if (props.inputOptions?.showDialCode && parsedCountry) {
-      phone.value = `+${parsedCountry.dialCode}`;
-      return;
+      phone.value = parsePhoneNumberFromString(
+        phoneObject.value.nationalNumber, 
+        parsedCountry.iso2
+      ).formatInternational();
+    } else {
+      activeCountryCode.value = parsedCountry.iso2;
     }
 
-    activeCountryCode.value = parsedCountry.iso2;
+    dialCodeInput.value = `+${parsedCountry.dialCode}`;
+    dialCodeFilter.value = '';
+    
+    // Закрываем дропдаун
+    open.value = false;
+    
+    // Переводим фокус на основной инпут
+    nextTick(() => {
+      if (input.value) {
+        input.value.focus();
+      }
+    });
+    
     emitInput(phone.value);
   }
 
@@ -502,16 +578,13 @@
 
   function onInput() {
     input.value.setCustomValidity(phoneObject.valid ? '' : props.invalidMsg);
-
     emitInput(phone.value);
   }
 
   function emitInput(value) {
     emits('update:modelValue', value);
 
-
-
-    if (phoneObject.value.valid)  { 
+    if (phoneObject.value.valid) { 
       emits('change', phoneObject.value.number);
       emits('country', phoneObject.value.number);
     } else {
@@ -547,13 +620,15 @@
 
   function clickedOutside() {
     open.value = false;
+    dialCodeFilter.value = '';
   }
 
   function keyboardNav(e) {
     if (e.keyCode === 40) { // down arrow
       e.preventDefault();
       open.value = true;
-      selectedIndex.value = selectedIndex.value === null ? 0 : Math.min(sortedCountries.value.length - 1, selectedIndex.value + 1);
+      selectedIndex.value = selectedIndex.value === null ? 0 : 
+        Math.min(filteredAndSortedCountries.value.length - 1, selectedIndex.value + 1);
       nextTick(() => {
         const selEle = list.value.children[selectedIndex.value];
         if (selEle.offsetTop + selEle.clientHeight > list.value.scrollTop + list.value.clientHeight) {
@@ -563,7 +638,8 @@
     } else if (e.keyCode === 38) { // up arrow
       e.preventDefault();
       open.value = true;
-      selectedIndex.value = selectedIndex.value === null ? sortedCountries.value.length - 1 : Math.max(0, selectedIndex.value - 1);
+      selectedIndex.value = selectedIndex.value === null ? 
+        filteredAndSortedCountries.value.length - 1 : Math.max(0, selectedIndex.value - 1);
       nextTick(() => {
         const selEle = list.value.children[selectedIndex.value];
         if (selEle.offsetTop < list.value.scrollTop) {
@@ -573,21 +649,27 @@
     } else if (e.keyCode === 13) { // enter key
       e.preventDefault();
       if (selectedIndex.value !== null) {
-        choose(sortedCountries.value[selectedIndex.value]);
+        choose(filteredAndSortedCountries.value[selectedIndex.value]);
       }
-      open.value = !open.value;
-    } else { // typing a country's name
+    } else { 
+      // Поиск по названию страны
+      if (e.target.classList.contains('vti__country-code-input')) return;
+      
       typeToFindInput.value += e.key;
       clearTimeout(typeToFindTimer);
       typeToFindTimer = setTimeout(() => {
         typeToFindInput.value = '';
       }, 700);
+      
       nextTick(() => {
-        const typedCountryI = sortedCountries.value.slice(props.preferredCountries.length).findIndex((c) => c.name.toLowerCase().startsWith(typeToFindInput.value));
+        const typedCountryI = filteredAndSortedCountries.value
+          .slice(props.preferredCountries.length)
+          .findIndex((c) => c.name.toLowerCase().startsWith(typeToFindInput.value));
         if (typedCountryI >= 0) {
           selectedIndex.value = props.preferredCountries.length + typedCountryI;
           const selEle = list.value.children[selectedIndex.value];
-          const needToScroll = selEle.offsetTop < list.value.scrollTop || selEle.offsetTop + selEle.clientHeight > list.value.scrollTop + list.value.clientHeight;
+          const needToScroll = selEle.offsetTop < list.value.scrollTop || 
+            selEle.offsetTop + selEle.clientHeight > list.value.scrollTop + list.value.clientHeight;
           if (needToScroll) {
             list.value.scrollTop = selEle.offsetTop - list.value.clientHeight / 2;
           }
@@ -597,7 +679,8 @@
   }
 
   function reset() {
-    selectedIndex.value = sortedCountries.value.map(c => c.iso2).indexOf(activeCountryCode.value);
+    selectedIndex.value = filteredAndSortedCountries.value
+      .map(c => c.iso2).indexOf(activeCountryCode.value);
     open.value = false;
   }
 
@@ -609,67 +692,83 @@
 </script>
 
 <style lang="scss">
-  .vue3-reactive-tel-input{
-    display:flex
-  }
-  .vue3-reactive-tel-input.disabled .dropdown,.vue3-reactive-tel-input.disabled .selection,.vue3-reactive-tel-input.disabled input{
-    cursor:no-drop
-  }
-  .vti__dropdown{
-    display:flex;
-    flex-direction:column;
-    align-content:center;
-    justify-content:center;
-    position:relative;
-    padding:0.5rem;
-    cursor:pointer
-  }
-  .vti__dropdown.show{
-    max-height:300px;
-    overflow:scroll
-  }
-  .vti__dropdown-list{
-    z-index:1;
-    padding:0;
-    margin:0;
-    text-align:left;
-    list-style:none;
-    max-height:200px;
-    overflow-y:scroll;
-    position:absolute;
-    left:-1px;
-    background-color:#fff;
-    width:fit-content
-  }
-  .vti__dropdown-list.below{
-    top:33px
-  }
-  .vti__dropdown-list.above{
-    top:auto;
-    bottom:100%
-  }
-  .vti__dropdown-arrow{
-    transform:scaleY(.5);
-    display:inline-block;
-    color:#666
-  }
-  .vti__dropdown-item{
-    cursor:pointer;
-    padding:4px 15px
-  }
-  .vti__dropdown-item.last-preferred{
-    border-bottom:1px solid #cacaca
-  }
-  .vti__dropdown-item .vti__flag{
-    display:inline-block;
-    margin-right:5px
-  }
-  .vti__input{
-    color: inherit;
-    border:none;
-    border-radius:0 2px 2px 0;
-    width:100%;
-    outline:0;
-    padding-left:7px
-  }
+.vue3-reactive-tel-input {
+  display: flex;
+}
+
+.vue3-reactive-tel-input.disabled .dropdown,
+.vue3-reactive-tel-input.disabled .selection,
+.vue3-reactive-tel-input.disabled input {
+  cursor: no-drop;
+}
+
+.vti__dropdown {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+  position: relative;
+  padding: 0.5rem;
+  cursor: pointer;
+}
+
+.vti__dropdown.show {
+  max-height: 300px;
+  overflow: scroll;
+}
+
+.vti__dropdown-list {
+  z-index: 1;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+  list-style: none;
+  max-height: 200px;
+  overflow-y: scroll;
+  position: absolute;
+  left: -1px;
+  background-color: #fff;
+  width: fit-content;
+}
+
+.vti__dropdown-list.below {
+  top: 33px;
+}
+
+.vti__dropdown-list.above {
+  top: auto;
+  bottom: 100%;
+}
+
+.vti__dropdown-item {
+  cursor: pointer;
+  padding: 4px 15px;
+}
+
+.vti__dropdown-item.highlighted {
+  background-color: #f0f0f0;
+}
+
+.vti__dropdown-item.last-preferred {
+  border-bottom: 1px solid #cacaca;
+}
+
+.vti__input {
+  color: inherit;
+  border: none;
+  border-radius: 0 2px 2px 0;
+  width: 100%;
+  outline: 0;
+  padding-left: 7px;
+}
+
+.vti__country-code-input {
+  max-width: 70px;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: inherit;
+  color: inherit;
+  text-align: center;
+}
 </style>