base-vue-phone-input v0.1.13

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

Events API

Keyboard accessibility

Named slots

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
}