Base vue phone input

Basic phone input deeply customizable with slots

Installation

using npm

  npm install basic-vue-phone-input

Examples

Demo with shadcn/vue

Usage

<script setup lang="ts">
import { ref } from 'vue'
import PhoneInput from './index'

const tel = ref('')
const res = ref()
</script>

<template>
    <PhoneInput
        v-model="tel"// for phone number
        @update="res = $event"// for phone number object />
    {{ res }}
    {{ tel }}
</template>

But this input is meant to be customized

Features

• You can set preferred-countries, ignored-countries or have only-countries
• Multi options to getting country code : By default the component get the country code via the browser (disable it with no-use-browser-locale) or you can use fetch-country to get the country code via https://ip2c.org/s (network needed) - you can use default-country-code option instead to set one
• Phone number formatting while typing
• You can search your country in list (open countries list & type your country name)
• Keyboard accessibility (Arrow down, Arrow up: Countries list navigation - Escape: Close countries list)
• Phone number example for each country in placeholder
• Fully cusstomizable with slots

Props API

| Prop name | Description | Type | Values | Default | | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------ | --------- | | modelValue | @model Country calling code + telephone number in international format | string | - | undefined | | countryCode | @model Country code selected - Ex: "FR" | CountryCode | - | undefined | | placeholder | Placeholder of the input | string | - | undefined | | label | label of the input | string | - | undefined | | preferredCountries | List of country codes to place first in the select list - Ex: ['FR', 'BE', 'GE'] | Array | - | undefined | | ignoredCountries | List of country codes to be removed from the select list - Ex: ['FR', 'BE', 'GE'] | Array | - | undefined | | onlyCountries | List of country codes to only have the countries selected in the select list - Ex: ['FR', 'BE', 'GE'] | Array | - | undefined | | translations | Locale strings of the component | Partial | - | undefined | | noUseBrowserLocale | By default the component use the browser locale to set the default country code if not country code is provided | boolean | - | | | fetchCountry | The component will make a request (https://ipwho.is) to get the location of the user and use it to set the default country code | boolean | - | | | customCountriesList | Replace country names | Record | - | undefined | | autoFormat | Disabled auto-format when phone is valid @default true | boolean | - | true | | noFormattingAsYouType | Disabled auto-format as you type @default false | boolean | - | false | | countryLocale | locale of country list - Ex: "fr-FR" @default {string} browser locale | string | - | undefined | | excludeSelectors | Exclude selectors to close country selector list - usefull when you using custom flag | Array | - | undefined |

Events API

| Event | Return | | --- | --- | | input | AsYouType value (emit when new value is enter on phone number input && when a country is choosed) | | update | All values (Result type) |

Keyboard accessibility

| Props | Action | | --------- | --------------------------------- | | ArrowDown | Navigation down in countries list | | ArrowUp | Navigation up in countries list | | Escape | Close countries list |

Named slots

| Name | Description | Bindings | | -------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | selector | Change the country selector component | input-value String - current selected country code - Ex: "FR" updateInputValue - action for changing country code by passing country code countries - array of all countries | | input | Change the input component | input-value String - phone number value updateInputValue - action for updating phone value placeholder - placeholder |

Translations

Labels & placeholders

<PhoneInput
  :translations="{
    phoneInput: {
      placeholder: 'Phone number',
      example: 'Example:',
    },
  }"
/>

Country list

Two ways to translate the country list:

First solution - set country locale

<PhoneInput country-locale='fr-FR' />

Second solution - custom list

<PhoneInput
  :custom-countries-list="{
    FR: 'France',
    BE: 'Belgique',
    DE: 'Allemagne',
    US: 'Etats-Unis',
  }"
/>

Types

Results emitted by @update or @data event

export type Results = {
  isValid: boolean
  isPossible?: boolean
  countryCode?: CountryCode
  countryCallingCode?: CountryCallingCode
  nationalNumber?: NationalNumber
  type?: NumberType
  formatInternational?: string
  formatNational?: string
  uri?: string
  e164?: string
  rfc3966?: string
}

Country type

export interface Country {
    iso2: CountryCode
    dialCode: CountryCallingCode
    name: string
}