Vue-tel-input-fix NPM

vue-tel-input

International Telephone Input with Vue.

Checkout Demo at Github pages.

Installation

yarn:
```
  yarn add vue-tel-input-fix
```
npm:
```
  npm i --save vue-tel-input-fix
```

Usage

Import default CSS to your project:

import 'vue-tel-input-fix/dist/vue-tel-input.css';

Install as a global component:

import Vue from 'vue'
import VueTelInput from 'vue-tel-input-fix'

Vue.use(VueTelInput)

In your component:

<template>
...
   <vue-tel-input v-model="phone"
                  @onInput="onInput"
                  <!-- optional -->
                  :preferredCountries="['us', 'gb', 'ua']">
   </vue-tel-input>
...
<template>
<script>
export default {
  data() {
    return {
      phone: '',
    };
  },
  methods: {
    /**
     * @param {string} number
     * the phone number inputted by user, will be formatted along with country code
     * // Ex: inputted: (AU) 0432 432 432
     * // number = '+61432421546'
     *
     * @param {Boolean} isValid
     * @param {string} country
     */
     onInput({ number, isValid, country }) {
       console.log(number, isValid, country);
     },
  },
}
</script>

Use as a custom field of vue-form-generator

Add a component with vue-form-generator's abstractField

// tel-input.vue
<template>
  <vue-tel-input v-model="value"></vue-tel-input>
</template>

<script>
import VueTelInput from 'vue-tel-input-fix'
import { abstractField } from 'vue-form-generator';

export default {
  name: 'TelephoneInput',
  mixins: [abstractField],
  components: {
    VueTelInput,
  },
};
</script>

  import Vue from 'vue';
  import TelInput from '<path>/tel-input.vue';

  import 'vue-tel-input-fix/dist/vue-tel-input.css';

  Vue.component('field-tel-input', TelInput);

Now it can be used as tel-input in schema of vue-form-generator

var schema: {
  fields: [{
      type: "tel-input",
      label: "Awesome (tel input)",
      model: "telephone"
  }]
};

Read more on vue-form-generator's instruction page

Props

Property value	Type	Default value	Description
`defaultCountry`	`string`	`''`	Default country, will override the country fetched from IP address of user
`disabledFlagsDropdown`	`Boolean`	false	Disable dropdown with country flags
`disabled`	`Boolean`	`false`	Disable input field
`placeholder`	`string`	Enter a phone number	Placeholder for the input
`required`	`Boolean`	`false`	Required property for HTML5 required attribute
`enabledFlags`	`Boolean`	`true`	Enable flags in the input
`preferredCountries`	`Array`	`[]`	Preferred countries list, will be on top of the dropdown. ie `['AU', 'BR']`
`onlyCountries`	`Array`	`[]`	List of countries will be shown on the dropdown. ie `['AU', 'BR']`
`ignoredCountries`	`Array`	`[]`	List of countries will NOT be shown on the dropdown. ie `['AU', 'BR']`

Events

Property value	Arguments	Description
`onInput`	`Object`	Fires when the input changes with the argument is the object includes `{ number, isValid, country and id element }`
`onValidate`	`Object`	Fires when the correctness of the phone number changes (from `true` to `false` or vice-versa) and when the component is mounted `{ number, isValid, country }`
`onBlur`		Fires on blur event

Highlights & Credits

Vue app created by vue-cli.
Telephone Number parsing, validation by libphonenumber-js.
Country Codes data from intl-tel-input.
Country Flags by behdad/region-flags.
Boostrap-Vue.
User's Location by get-json and ipifo.io

Demo Usage

# install dependencies
$ yarn/npm install

# compile demo for development
$ yarn/npm dev

# open Browser and start serve in demo
$ yarn/npm demo:open

# compile dist demo
$ yarn/npm dist:demo

# compile dist
$ yarn/npm dist