FileMaster

Edit File: PhoneInput.vue

<template id="phone-input">
  <el-input
    v-model="input"
    :placeholder="format"
    :disabled="disabled"
    clearable
    @clear="onClear"
  >
    <el-select
      slot="prepend"
      v-model="value"
      placeholder=""
      @change="changeCountry"
      :class="'am-selected-flag am-selected-flag-'+value"
      :disabled="disabled"
    >
      <el-option
        v-for="country in countries"
        :key="country.id"
        :value="country.iso"
        label=" "
      >
        <span :class="'am-flag am-flag-'+country.iso"></span>
        <span class="am-phone-input-nicename">{{ country.nicename }}</span>
        <span class="am-phone-input-phonecode">+{{ country.phonecode }}</span>
      </el-option>
    </el-select>
  </el-input>
</template>

export default {
  mixins: [phoneCountriesMixin],

template: '#phone-input',

props: {
    savedPhone: {
      default: '',
      type: String
    },
    disabled: {
      default: false,
      type: Boolean
    },
    countryPhoneIso: null,
    dropdownClass: {
      type: String,
      default: ''
    }
  },

data () {
    return {
      input: '',
      phone: '',
      value: this.$root.settings.general.phoneDefaultCountryCode,
      format: ''
    }
  },

mounted () {
    if (this.value !== '') {
      if (this.savedPhone) {
        this.fillInputWithSavedPhone()
      } else {
        this.formatPhoneNumber()
      }
    } else if (this.savedPhone) {
      this.fillInputWithSavedPhone()
    }
  },

methods: {
    onClear () {
      this.value = ''
      this.phone = ''
      this.$emit('phoneFormatted', this.phone, this.value)
    },

changeCountry () {
      if (this.value !== '' && this.input !== '') {
        this.input = ''
      }

this.formatPhoneNumber()
    },

formatPhoneNumber () {
      if (this.value !== '' && this.value !== 'auto') {
        var country = this.countries.find(x => x.iso === this.value)
        this.format = this.disabled === true ? '' : country.format
      }

let input = this.input

if (window.localeLanguage[0] === 'ar') {
        input = input.replace(/[٠-٩]/g, d => '٠١٢٣٤٥٦٧٨٩'.indexOf(d))
      }

if (input !== '') {
        if (input.startsWith('+')) {
          let inputValue = parseInt(input.slice(1))
          let countries = this.countries.filter(x => x.phonecode === inputValue)
          if (countries.length) {
            let country = null

if (inputValue === 1) {
              country = countries.find(item => item.id === 229)
            } else if (inputValue === 44) {
              country = countries.find(item => item.id === 228)
            } else if (inputValue === 7) {
              country = countries.find(item => item.id === 176)
            }

if (typeof country === 'undefined' || country === null) {
              country = countries[0]
            }

this.value = country.iso
          }
          this.phone = input
        } else {
          if (typeof country !== 'undefined') {
            this.phone = (input.startsWith('0') === true && this.countryPhoneIso !== 'it') ? // fix for Italian numbers that starts with '0'
              '+' + country.phonecode + input.slice(1).replace(/\D/g, '') :
              '+' + country.phonecode + input.replace(/\D/g, '') }
          else {
            this.phone = input
          }
        }

this.$emit('phoneFormatted', this.phone, this.value)
      } else {
        this.phone = input
        this.$emit('phoneFormatted', this.phone, this.value)
      }
    },

fillInputWithSavedPhone () {
      var country = null

if (this.countryPhoneIso !== null) {
        country = this.countries.find(x => x.iso === this.countryPhoneIso)

if (typeof country === 'undefined') {
          country = null
        }
      }

let i = 1
      while (country === null && i < 5) {
        country = this.countries.find(x => x.phonecode === parseInt(this.savedPhone.substr(1, i)) && x.priority === 1)
        country = typeof country !== 'undefined' ? country : null
        i++
      }

if (!country) {
        i = 1
        while (country === null && i < 5) {
          country = this.countries.find(x => x.phonecode === parseInt(this.savedPhone.substr(1, i)))
          country = typeof country !== 'undefined' ? country : null
          i++
        }
      }

if (country !== null) {
        this.value = country.iso
        this.input = this.savedPhone.replace('+' + country.phonecode, '')
        this.input = country.format.startsWith('0') ? '0' + this.input : this.input
      }
    }
  },

watch: {
    'input' () {
      this.formatPhoneNumber()
    }
  },

components: {}
}
</script>

Back