Phone number input

Simple Phone Number Input for VueJs

install

1npm i @lbgm/phone-number-input

Props & Types

1interface PhoneDATA {
2  country?: string;
3  dialCode?: string | number;
4  nationalNumber?: string | number;
5  number?: string | number;
6  isValid?: boolean;
7}
8
9interface Props {
10  value?: string;
11  label?: string;
12  hasError?: boolean;
13  hasSuccess?: boolean;
14  successMessage?: string;
15  errorMessage?: string;
16  placeholder?: string;
17  name?: string;
18  required?: boolean;
19  defaultCountry?: string;
20  arrow?: boolean;
21  listHeight?: number;
22  allowed?: string[];
23}
24
25// default props values
26
27{
28  value: "", // like '22997000000',
29  label: "",
30  hasError: false,
31  hasSuccess: false,
32  successMessage: "",
33  errorMessage: "",
34  placeholder: "",
35  name: "",
36  required: false,
37  defaultCountry: "BJ",
38  arrow: true, // show or hide arrow
39  listHeight: 150,
40  allowed: () => [],
41}

• pass value on this format: ${dialCode}${nationalNumber}
• allowed is an array of country iso2 (string).

Slots

arrow

1<!-- to change arrow icon-->
2<phone-input>
3 <template #arrow><icon /><template>
4</phone-input>

use global slot to append content at the end of the component.

1<phone-input>
2  <div>Hello</div>
3</phone-input>

Use

main.ts :

1 import { PhoneInput } from '@lbgm/phone-number-input';
2
3 // register as global component
4 app.component('PhoneInput', PhoneInput);

App.vue :

1// import component style
2import '@lbgm/phone-number-input/style';

use component:

1   <phone-input
2     @phone="phone = $event"
3     @country="country = $event"
4     @phoneData="phoneData = $event"
5     name="phone-number-input"
6     label="Enter your phone"
7     required
8     :value="'22997788842'"
9   />

• phone is string
• country is string
• phoneData is type PhoneDATA

Use it with Vee-validate

Sample wrapper code:

1<template>
2 <phone-input
3   :has-error="hasError"
4   :errorMessage="errorMessage"
5   @phoneData="validatePhone"
6   ref="phoneInput"
7 />
8</template>

1<script setup lang="ts">
2import { useField } from 'vee-validate';
3import { computed, onMounted, useAttrs, getCurrentInstance, type ComponentInternalInstance } from 'vue';
4import { PhoneInput, type PhoneDATA } from '@lbgm/phone-number-input';
5
6type T_PhoneInput = typeof PhoneInput;
7
8const that: ComponentInternalInstance | null = getCurrentInstance();
9const attrs = useAttrs();
10const emit = defineEmits(['inputData']);
11
12const {
13  value: inputValue,
14  errorMessage,
15  handleBlur,
16  handleChange,
17  meta,
18} = useField(attrs.name, undefined, {
19  initialValue: attrs.value ? attrs.value : '',
20  validateOnValueUpdate: false,
21});
22
23// compute error from vee-validate
24const hasError = computed((): boolean => {
25  return errorMessage.value !== undefined;
26});
27
28const validatePhone = (data: PhoneDATA) => {
29  handleChange(data.nationalNumber, false);
30  emit('inputData', data);
31};
32
33onMounted(() => {
34  if ((that?.refs?.phoneInput as T_PhoneInput).phone) {
35    handleChange((that?.refs.phoneInput as T_PhoneInput).phone);
36  }
37});
38</script>