@ozdao/prometheus-framework 0.2.81 → 0.2.83

package/src/components/FieldPhone/FieldPhone.vue

@@ -1,508 +1,31 @@
-<script>
-  import { defineComponent } from 'vue';
-  import { parsePhoneNumberFromString } from 'libphonenumber-js';
-
-  import utils, { getCountry, setCaretPosition } from './utils';
-
-  import clickOutside from './click-outside';
-
-  function getDefault(key) {
-    const value = utils.options[key];
-    if (typeof value === 'undefined') {
-      return utils.options[key];
-    }
-    return value;
-  }
-
-  export default /*#__PURE__*/defineComponent({
-    name: 'Vue3ReactiveTelInput', 
-    directives: {
-      clickOutside,
-    },
-    props: {
-      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: () => getDefault('allCountries'), },
-      autoFormat: { type: Boolean, default: () => getDefault('autoFormat'), },
-      validation: { type: [Boolean, Object], default: false, },
-      customValidate: { type: [Boolean, RegExp], default: () => getDefault('customValidate'), },
-      defaultCountry: { type: String, default: () => getDefault('defaultCountry'), },
-      disabled: { type: Boolean, default: () => getDefault('disabled'), },
-      autoDefaultCountry: { type: Boolean, default: () => getDefault('autoDefaultCountry'), },
-      dropdownOptions: { type: Object, default: () => getDefault('dropdownOptions'), },
-      ignoredCountries: { type: Array, default: () => getDefault('ignoredCountries'), },
-      inputOptions: { type: Object, default: () => getDefault('inputOptions'), },
-      invalidMsg: { type: String, default: () => getDefault('invalidMsg'), },
-      mode: { type: String, default: () => getDefault('mode'), },
-      onlyCountries: { type: Array, default: () => getDefault('onlyCountries'), },
-      preferredCountries: { type: Array, default: () => getDefault('preferredCountries'), },
-      validCharactersOnly: { type: Boolean, default: () => getDefault('validCharactersOnly'), },
-      rootClass: { type: [String, Array, Object], default: () => getDefault('styleClasses'), },
-      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 ''}, },
-    },
-    data() {
-      return {
-        counter: 5,
-        initCounter: 5,
-        message: {
-          action: null,
-          amount: null,
-        },
-        phone: this.modelValue ? this.modelValue : '',
-        activeCountryCode: '',
-        open: false,
-        finishMounted: false,
-        selectedIndex: null,
-        typeToFindInput: '',
-        typeToFindTimer: null,
-        dropdownOpenDirection: 'below',
-        parsedPlaceholder: this.Placeholder !== '' ? this.Placeholder : this.inputOptions.placeholder,
-      };
-    },
-    watch: {
-      activeCountry(value, oldValue) {
-        if (!value && oldValue?.iso2) {
-          this.activeCountryCode = oldValue.iso2;
-          return;
-        }
-        if (value?.iso2) {
-          this.$emit('country-changed', value);
-          // this.resetPlaceholder();
-        }
-      },
-      'phoneObject.countryCode': function (value) {
-        this.activeCountryCode = value;
-      },
-      'phoneObject.valid': function () {
-        this.$emit('validate', this.phoneObject);
-      },
-      'phoneObject.formatted': function (value) {
-        if (!this.autoFormat || this.customValidate) {
-          return;
-        }
-        this.emitInput(value);
-
-        this.$nextTick(() => {
-          // In case `v-model` is not set, we need to update the `phone` to be new formatted value
-          if (value && !this.value) {
-            this.phone = value;
-          }
-        });
-      },
-      // finishMounted() {
-      //   this.resetPlaceholder();
-      // },
-      'inputOptions.placeholder': function () {
-        this.resetPlaceholder();
-      },
-      value(value, oldValue) {
-        // console.log(this.phoneObject?this.phoneObject.number !== "":false)
-        if (!this.testCharacters()) {
-          // console.log(this.phoneObject?this.phoneObject.number !== "":false)
-          this.$nextTick(() => { this.phone = oldValue; this.onInput(); });
-        } else {
-          this.phone = value;
-        }
-      },
-      open(isDropdownOpened) {
-        // Emit open and close events
-        if (isDropdownOpened) {
-          this.setDropdownPosition();
-          this.$emit('open');
-        } else {
-          this.$emit('close');
-        }
-      },
-    },
-    mounted() {
-      if (this.value) {
-        this.phone = this.value;
-      }
-
-      this.cleanInvalidCharacters();
-
-      this.initializeCountry()
-        .then(() => {
-          if (!this.phone
-            && this.inputOptions?.showDialCode
-            && this.activeCountryCode) {
-            this.phone = `+${this.activeCountryCode}`;
-          }
-          this.$emit('validate', this.phoneObject);
-        })
-        .catch(console.error)
-        .then(() => {
-          this.finishMounted = true;
-        });
-    },
-    computed: {
-      activeCountry() {
-        return this.findCountry(this.activeCountryCode);
-      },
-      activeCountryFlag() {
-        return this.activeCountry ? this.activeCountry.flag : null;
-      },
-      parsedMode() {
-        if (this.mode === 'auto') {
-          if (!this.phone || this.phone[0] !== '+') {
-            return 'national';
-          }
-          return 'international';
-        }
-        if (!['international', 'national'].includes(this.mode)) {
-          console.error('Invalid value of prop "mode"');
-          return 'international';
-        }
-        return this.mode;
-      },
-      filteredCountries() {
-        // List countries after filtered
-        if (this.onlyCountries.length) {
-          return this.allCountries
-            .filter(({ iso2 }) => this.onlyCountries.some((c) => c.toUpperCase() === iso2));
-        }
-
-        if (this.ignoredCountries.length) {
-          return this.allCountries.filter(
-            ({ iso2 }) => !this.ignoredCountries.includes(iso2.toUpperCase())
-              && !this.ignoredCountries.includes(iso2.toLowerCase()),
-          );
-        }
-
-        return this.allCountries;
-      },
-      sortedCountries() {
-        // Sort the list countries: from preferred countries to all countries
-        const preferredCountries = this.getCountries(this.preferredCountries)
-          .map((country) => ({ ...country, preferred: true }));
-
-        return [...preferredCountries, ...this.filteredCountries];
-      },
-      phoneObject() {
-        let result;
-
-        if (this.phone?.[0] === '+') {
-          result = parsePhoneNumberFromString(this.phone) || {};
-        } else {
-          result = parsePhoneNumberFromString(this.phone, this.activeCountryCode) || {};
-        }
-
-        const { metadata, ...phoneObject } = result;
-        
-        let valid = result.isValid?.();
-        let formatted = this.phone;
-
-        if (valid) {
-          formatted = result.format?.(this.parsedMode.toUpperCase(), { nationalPrefix: false });
-        }
-
-        if (result.country && (this.ignoredCountries.length || this.onlyCountries.length)) {
-          if (!this.findCountry(result.country)) {
-            valid = false;
-            Object.assign(result, { country: null });
-          }
-        }
-
-        Object.assign(phoneObject, {
-          countryCode: result.country,
-          valid,
-          country: this.activeCountry,
-          formatted,
-        });
-
-        return phoneObject;
-      },
-      classes(){
-        return this.phoneObject.valid === true 
-                    ? 
-                    this.goodClass
-                    :
-                    this.phoneObject.valid === false 
-                        ?
-                        this.badClass
-                        :
-                        undefined
-      },
-      styles(){
-        return this.phoneObject.valid === true 
-                    ? 
-                    this.goodStyle
-                    :
-                    this.phoneObject.valid === false 
-                        ?
-                        this.badStyle
-                        :
-                        undefined
-      },
-      Iclasses(){
-        return this.phoneObject.valid === true 
-                    ? 
-                    this.goodInputClass
-                    :
-                    this.phoneObject.valid === false 
-                        ?
-                        this.badInputClass
-                        :
-                        undefined
-      },
-      Istyles(){
-        return this.phoneObject.valid === true 
-                    ? 
-                    this.goodInputStyle
-                    :
-                    this.phoneObject.valid === false 
-                        ?
-                        this.badInputStyle
-                        :
-                        undefined
-      },
-    },
-    methods: {
-      resetPlaceholder() {
-        this.parsedPlaceholder = this.inputOptions.placeholder;
-      },
-      initializeCountry() {
-        return new Promise((resolve) => {
-          // 1. If the phone included prefix (i.e. +12), try to get the country and set it
-          if (this.phone?.[0] === '+') { resolve(); return; }
-          // 2. Use default country if passed from parent
-          if (this.defaultCountry) { this.choose(this.defaultCountry); resolve(); return; }
-          const fallbackCountry = this.preferredCountries[0] || this.filteredCountries[0];
-          // 3. Check if fetching country based on user's IP is allowed, set it as the default country
-          if (this.autoDefaultCountry) {
-            getCountry()
-              .then((res) => { this.choose(res || this.activeCountryCode); })
-              .catch((error) => { console.warn(error); this.choose(fallbackCountry); })
-              .then(() => { resolve(); });
-          } else {
-          // 4. Use the first country from preferred list (if available) or all countries list
-            this.choose(fallbackCountry);
-            resolve();
-          }
-        });
-      },
-      // Get the list of countries from the list of iso2 code
-      getCountries(list = []) {
-        return list
-          .map((countryCode) => this.findCountry(countryCode))
-          .filter(Boolean);
-      },
-      findCountry(iso = '') {
-        return this.filteredCountries.find((country) => country.iso2 === iso.toUpperCase());
-      },
-      getItemClass(index, iso2) {
-        const highlighted = this.selectedIndex === index;
-        const lastPreferred = index === this.preferredCountries.length - 1;
-        const preferred = this.preferredCountries.some((c) => c.toUpperCase() === iso2);
-        return {
-          highlighted,
-          'last-preferred': lastPreferred,
-          preferred,
-        };
-      },
-      choose(country) {
-        let parsedCountry = country;
-        if (typeof parsedCountry === 'string') {
-          parsedCountry = this.findCountry(parsedCountry);
-        }
-
-        if (!parsedCountry) {
-          return;
-        }
-        if (this.phone?.[0] === '+'
-          && parsedCountry.iso2
-          && this.phoneObject.nationalNumber) {
-          this.activeCountryCode = parsedCountry.iso2;
-          // Attach the current phone number with the newly selected country
-          this.phone = parsePhoneNumberFromString(
-            this.phoneObject.nationalNumber,
-            parsedCountry.iso2,
-          )
-            .formatInternational();
-          return;
-        }
-
-        if (this.inputOptions?.showDialCode && parsedCountry) {
-          // Reset phone if the showDialCode is set
-          this.phone = `+${parsedCountry.dialCode}`;
-          return;
-        }
-
-        // update value, even if international mode is NOT used
-        this.activeCountryCode = parsedCountry.iso2;
-        this.emitInput(this.phone);
-      },
-      cleanInvalidCharacters() {
-        const currentPhone = this.phone;
-        if (this.validCharactersOnly) {
-          const results = this.phone.match(/[()\-+0-9\s]*/g);
-          this.phone = results.join('');
-        }
-
-        if (this.customValidate && this.customValidate instanceof RegExp) {
-          const results = this.phone.match(this.customValidate);
-          this.phone = results.join('');
-        }
-
-        if (currentPhone !== this.phone) {
-          this.emitInput(this.phone);
-        }
-      },
-      testCharacters() {
-        if (this.validCharactersOnly) {
-          const result = /^[()\-+0-9\s]*$/.test(this.phone);
-          if (!result) {
-            return false;
-          }
-        }
-        if (this.customValidate) {
-          return this.testCustomValidate();
-        }
-        return true;
-      },
-      testCustomValidate() {
-        return this.customValidate instanceof RegExp ? this.customValidate.test(this.phone) : false;
-      },
-      onInput() {
-        this.$refs.input.setCustomValidity(this.phoneObject.valid ? '' : this.invalidMsg);
-        this.emitInput(this.phoneObject);
-      },
-      emitInput(value) {
-        this.$emit('update:modelValue', value);
-      },
-      onBlur() {
-        this.$emit('blur');
-      },
-      onFocus() {
-        setCaretPosition(this.$refs.input, this.phone.length);
-        this.$emit('focus');
-      },
-      onEnter() {
-        this.$emit('enter');
-      },
-      onSpace() {
-        this.$emit('space');
-      },
-      focus() {
-        this.$refs.input.focus();
-      },
-      toggleDropdown() {
-        if (this.disabled) {
-          return;
-        }
-        this.open = !this.open;
-      },
-      clickedOutside() {
-        this.open = false;
-      },
-      keyboardNav(e) {
-        if (e.keyCode === 40) {
-          // down arrow
-          e.preventDefault();
-          this.open = true;
-          if (this.selectedIndex === null) {
-            this.selectedIndex = 0;
-          } else {
-            this.selectedIndex = Math.min(this.sortedCountries.length - 1, this.selectedIndex + 1);
-          }
-          const selEle = this.$refs.list.children[this.selectedIndex];
-          if (selEle.offsetTop + selEle.clientHeight
-            > this.$refs.list.scrollTop + this.$refs.list.clientHeight) {
-            this.$refs.list.scrollTop = selEle.offsetTop
-              - this.$refs.list.clientHeight
-              + selEle.clientHeight;
-          }
-        } else if (e.keyCode === 38) {
-          // up arrow
-          e.preventDefault();
-          this.open = true;
-          if (this.selectedIndex === null) {
-            this.selectedIndex = this.sortedCountries.length - 1;
-          } else {
-            this.selectedIndex = Math.max(0, this.selectedIndex - 1);
-          }
-          const selEle = this.$refs.list.children[this.selectedIndex];
-          if (selEle.offsetTop < this.$refs.list.scrollTop) {
-            this.$refs.list.scrollTop = selEle.offsetTop;
-          }
-        } else if (e.keyCode === 13) {
-          // enter key
-          if (this.selectedIndex !== null) {
-            this.choose(this.sortedCountries[this.selectedIndex]);
-          }
-          this.open = !this.open;
-        } else {
-          // typing a country's name
-          this.typeToFindInput += e.key;
-          clearTimeout(this.typeToFindTimer);
-          this.typeToFindTimer = setTimeout(() => {
-            this.typeToFindInput = '';
-          }, 700);
-          // don't include preferred countries so we jump to the right place in the alphabet
-          const typedCountryI = this.sortedCountries
-            .slice(this.preferredCountries.length)
-            .findIndex((c) => c.name.toLowerCase().startsWith(this.typeToFindInput));
-          if (typedCountryI >= 0) {
-            this.selectedIndex = this.preferredCountries.length + typedCountryI;
-            const selEle = this.$refs.list.children[this.selectedIndex];
-            const needToScrollTop = selEle.offsetTop < this.$refs.list.scrollTop;
-            const needToScrollBottom = selEle.offsetTop + selEle.clientHeight
-              > this.$refs.list.scrollTop + this.$refs.list.clientHeight;
-            if (needToScrollTop || needToScrollBottom) {
-              this.$refs.list.scrollTop = selEle.offsetTop - this.$refs.list.clientHeight / 2;
-            }
-          }
-        }
-      },
-      reset() {
-        this.selectedIndex = this.sortedCountries.map((c) => c.iso2).indexOf(this.activeCountryCode);
-        this.open = false;
-      },
-      setDropdownPosition() {
-        const spaceBelow = window.innerHeight - this.$refs.rootElement.getBoundingClientRect().bottom;
-        const hasEnoughSpaceBelow = spaceBelow > 200;
-        if (hasEnoughSpaceBelow) {
-          this.dropdownOpenDirection = 'below';
-        } else {
-          this.dropdownOpenDirection = 'above';
-        }
-      },
-    },
-  });
-</script>
-
 <template>
   <div 
-    :class="['vue3-reactive-tel-input', { 'bg-fourth-nano': validation }, $attrs.class, rootClass, { disabled: disabled },classes]" 
-    :style="[rootStyle, styles]" 
+    :class="[
+      rootClass, 
+      classes,
+      $attrs.class, 
+      { 'bg-fourth-nano': validation }, 
+      { disabled: disabled }
+    ]" 
+    :style="[
+      rootStyle, 
+      styles
+    ]" 
     ref="rootElement"
-    >
+    class="vue3-reactive-tel-input"
+  >
     <div
       v-click-outside="clickedOutside"
       :class="['vti__dropdown', { open: open }]"
-      class="br-solid br-black-transp br-1px radius-medium"
+      :style="[dropdownStyle]"
       :tabindex="dropdownOptions.tabindex"
       @keydown="keyboardNav"
       @click="toggleDropdown"
       @keydown.esc="reset"
-      :style="[dropdownStyle]"
+      class="br-solid br-black-transp br-1px radius-thin"
     >
       <span class="flex-nowrap flex flex-v-center  p-medium vti__selection">
-        <span v-if="dropdownOptions.showFlags" v-html="activeCountryFlag" class="mn-r-thin" />
+        <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>
@@ -536,10 +59,9 @@
       <input
         v-model="phone"
         inputmode="numeric" 
-         pattern="\d*"
+        pattern="\d*"
         ref="input"
         :type="inputOptions.type"
-
         :autocomplete="inputOptions.autocomplete"
         :autofocus="inputOptions.autofocus"
         :class="['vti__input', inputOptions.styleClasses, inputClass, Iclasses]"
@@ -570,68 +92,580 @@
   </transition>
 </template>
 
+
+<script setup>
+  import { ref, reactive, watch, computed, onMounted, nextTick } from 'vue';
+  import { parsePhoneNumberFromString } from 'libphonenumber-js';
+
+  import clickOutside from './click-outside';
+  import allCountries from './all-countries';
+
+  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 ''}, },
+    dropdownOptions: { 
+      type: Object, 
+      default: () => {
+        return {
+          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: ''
+        }
+      }
+    },
+  });
+
+  const emits = defineEmits([
+    'update:modelValue', 
+    'validate', 
+    'country-changed', 
+    'open', 
+    'close', 
+    'blur', 
+    'focus', 
+    'enter', 
+    'space'
+  ]);
+
+  const counter = ref(5);
+  const initCounter = ref(5);
+  const message = reactive({
+    action: null,
+    amount: null,
+  });
+  const phone = ref(props.modelValue ? props.modelValue : '');
+  const activeCountryCode = ref('');
+  const open = ref(false);
+  const finishMounted = ref(false);
+  const selectedIndex = ref(null);
+  const typeToFindInput = ref('');
+  const typeToFindTimer = ref(null);
+  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)
+
+  // Lifecycle hooks
+  onMounted(async () => {
+    if (props.modelValue) {
+      phone.value = props.modelValue;
+    }
+
+    cleanInvalidCharacters();
+
+    initializeCountry()
+      .then(() => {
+        if (!phone.value
+          && props.inputOptions?.showDialCode
+          && activeCountryCode.value) {
+          phone.value = `+${activeCountryCode.value}`;
+        }
+        emits('validate', phoneObject.value);
+      })
+      .catch(console.error)
+      .then(() => {
+        finishMounted.value = true;
+      });
+  });
+
+  // Computed properties
+  const activeCountry = computed(() => {
+   return findCountry(activeCountryCode.value);
+  });
+
+  const activeCountryFlag = computed(() => {
+    return activeCountry.value ? activeCountry.value.flag : null;
+  });
+
+  const parsedMode = computed(() => {
+    if (props.mode === 'auto') {
+      if (!phone.value || phone.value[0] !== '+') {
+        return 'national';
+      }
+      return 'international';
+    }
+    if (!['international', 'national'].includes(props.mode)) {
+      console.error('Invalid value of prop "mode"');
+      return 'international';
+    }
+    return props.mode;
+  });
+
+  const filteredCountries = computed(() => {
+    if (props.onlyCountries && props.onlyCountries.length) {
+      return props.allCountries.filter(({ iso2 }) => props.onlyCountries.includes(iso2.toUpperCase()));
+    }
+
+    if (props.ignoredCountries && props.ignoredCountries.length) {
+      return props.allCountries.filter(({ iso2 }) =>
+        !props.ignoredCountries.includes(iso2.toUpperCase()) && !props.ignoredCountries.includes(iso2.toLowerCase()),
+      );
+    }
+
+    return props.allCountries;
+  });
+  const sortedCountries = computed(() => {
+    const preferredCountries = getCountries(props.preferredCountries)
+      .map(country => ({ ...country, preferred: true }));
+
+    return [...preferredCountries, ...filteredCountries.value];
+  });
+
+  const phoneObject = computed(() => {
+    let result = {};
+
+    if (phone.value?.[0] === '+') {
+      result = parsePhoneNumberFromString(phone.value) || {};
+    } else {
+      result = parsePhoneNumberFromString(phone.value, activeCountryCode.value) || {};
+    }
+
+    const { metadata, ...phoneDetails } = result;
+
+    let valid = result.isValid?.();
+    let formatted = phone.value;
+
+    if (valid) {
+      formatted = result.format?.(parsedMode.value.toUpperCase(), { nationalPrefix: false });
+    }
+
+    if (result.country && (props.ignoredCountries.length || props.onlyCountries.length)) {
+      if (!findCountry(result.country)) {
+        valid = false;
+        result = { ...result, country: null };
+      }
+    }
+
+    return {
+      ...phoneDetails,
+      countryCode: result.country,
+      valid,
+      country: activeCountry.value,
+      formatted,
+    };
+  });
+
+  const classes = computed(() => {
+    return phoneObject.value.valid === true ? props.goodClass : 
+           phoneObject.value.valid === false ? props.badClass : undefined;
+  });
+
+  const styles = computed(() => {
+    return phoneObject.value.valid === true ? props.goodStyle : 
+           phoneObject.value.valid === false ? props.badStyle : undefined;
+  });
+
+  const Iclasses = computed(() => {
+    return phoneObject.value.valid === true ? props.goodInputClass : 
+           phoneObject.value.valid === false ? props.badInputClass : undefined;
+  });
+
+  const Istyles = computed(() => {
+    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;
+      return;
+    }
+    if (newValue?.iso2) {
+      emits('country-changed', newValue);
+      resetPlaceholder();
+    }
+  });
+
+  // Следим за изменениями 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;
+    }
+    emitInput(newValue);
+
+    nextTick(() => {
+      if (newValue && !props.modelValue) {
+        phone.value = newValue;
+      }
+    });
+  });
+
+  // Следим за изменениями placeholder в inputOptions
+  watch(() => props.inputOptions.placeholder, () => {
+    resetPlaceholder();
+  });
+
+  // Следим за внешними изменениями значения (например, через v-model)
+  watch(() => props.modelValue, (newValue, oldValue) => {
+    if (!testCharacters()) {
+      nextTick(() => {
+        phone.value = oldValue;
+        onInput();
+      });
+    } else {
+      phone.value = newValue;
+    }
+  });
+
+  // Следим за состоянием открытия/закрытия dropdown
+  watch(open, (isDropdownOpened) => {
+    if (isDropdownOpened) {
+      setDropdownPosition();
+      emits('open');
+    } else {
+      emits('close');
+    }
+  });
+
+  // Methods
+  function getCountry() {
+    return 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);
+        });
+  }
+  
+  function setCaretPosition(ctrl, pos) {
+    // Modern browsers
+    if (ctrl.setSelectionRange) {
+        ctrl.focus();
+        ctrl.setSelectionRange(pos, pos);
+
+        // IE8 and below
+    } else if (ctrl.createTextRange) {
+        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; }
+      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(); });
+      } else {
+        choose(fallbackCountry);
+        resolve();
+      }
+    });
+  }
+
+  function getCountries(list = []) {
+    return list.map((countryCode) => findCountry(countryCode)).filter(Boolean);
+  }
+
+  function findCountry(iso = '') {
+    return filteredCountries.value.find((country) => country.iso2 === iso.toUpperCase());
+  }
+
+  function getItemClass(index, iso2) {
+    const highlighted = selectedIndex.value === index;
+    const lastPreferred = index === props.preferredCountries.length - 1;
+    const preferred = props.preferredCountries.some((c) => c.toUpperCase() === iso2);
+    return { highlighted, 'last-preferred': lastPreferred, preferred };
+  }
+
+  function choose(country) {
+    let parsedCountry = typeof country === 'string' ? findCountry(country) : country;
+    if (!parsedCountry) return;
+    
+    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;
+    }
+
+    activeCountryCode.value = parsedCountry.iso2;
+    emitInput(phone.value);
+  }
+
+  function cleanInvalidCharacters() {
+    const currentPhone = phone.value;
+
+    if (props.validCharactersOnly) {
+      const results = phone.value.match(/[()\-+0-9\s]*/g);
+      phone.value = results.join('');
+    }
+
+    if (props.customValidate && props.customValidate instanceof RegExp) {
+      const results = phone.value.match(props.customValidate);
+      phone.value = results ? results.join('') : '';
+    }
+
+    if (currentPhone !== phone.value) {
+      emitInput(phone.value);
+    }
+  }
+
+  function testCharacters() {
+    if (props.validCharactersOnly) {
+      const result = /^[()\-+0-9\s]*$/.test(phone.value);
+      if (!result) return false;
+    }
+    if (props.customValidate) {
+      return testCustomValidate();
+    }
+    return true;
+  }
+
+  function testCustomValidate() {
+    return props.customValidate instanceof RegExp ? props.customValidate.test(phone.value) : false;
+  }
+
+  function onInput() {
+    input.value.setCustomValidity(phoneObject.valid ? '' : props.invalidMsg);
+
+    emitInput(phone.value);
+  }
+
+  function emitInput(value) {
+    emits('update:modelValue', value);
+
+    if (phoneObject.value.valid)  { 
+      emits('country', phoneObject.value.number);
+    } else {
+      emits('country', null);
+    }
+  }
+
+  function onBlur() {
+    emits('blur');
+  }
+
+  function onFocus() {
+    setCaretPosition(input.value, phone.value.length);
+    emits('focus');
+  }
+
+  function onEnter() {
+    emits('enter');
+  }
+
+  function onSpace() {
+    emits('space');
+  }
+
+  function focus() {
+    input.value.focus();
+  }
+
+  function toggleDropdown() {
+    if (props.disabled) return;
+    open.value = !open.value;
+  }
+
+  function clickedOutside() {
+    open.value = false;
+  }
+
+  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);
+      nextTick(() => {
+        const selEle = list.value.children[selectedIndex.value];
+        if (selEle.offsetTop + selEle.clientHeight > list.value.scrollTop + list.value.clientHeight) {
+          list.value.scrollTop = selEle.offsetTop - list.value.clientHeight + selEle.clientHeight;
+        }
+      });
+    } 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);
+      nextTick(() => {
+        const selEle = list.value.children[selectedIndex.value];
+        if (selEle.offsetTop < list.value.scrollTop) {
+          list.value.scrollTop = selEle.offsetTop;
+        }
+      });
+    } else if (e.keyCode === 13) { // enter key
+      e.preventDefault();
+      if (selectedIndex.value !== null) {
+        choose(sortedCountries.value[selectedIndex.value]);
+      }
+      open.value = !open.value;
+    } else { // typing a country's name
+      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));
+        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;
+          if (needToScroll) {
+            list.value.scrollTop = selEle.offsetTop - list.value.clientHeight / 2;
+          }
+        }
+      });
+    }
+  }
+
+  function reset() {
+    selectedIndex.value = sortedCountries.value.map(c => c.iso2).indexOf(activeCountryCode.value);
+    open.value = false;
+  }
+
+  function setDropdownPosition() {
+    const spaceBelow = window.innerHeight - rootElement.value.getBoundingClientRect().bottom;
+    const hasEnoughSpaceBelow = spaceBelow > 200;
+    dropdownOpenDirection.value = hasEnoughSpaceBelow ? 'below' : 'above';
+  }
+</script>
+
 <style scoped>
-.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:7px;
-  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:2px;
+    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
+  }
 </style>