@ptlm-azulejo/phone-number
v1.0.0-alpha.12
Published
A phone number input component with a country code selector, flag display, auto-formatting, and real-time validation. Powered by `libphonenumber-js`.
Readme
AzPhoneNumber
A phone number input component with a country code selector, flag display,
auto-formatting, and real-time validation. Powered by libphonenumber-js.
Installation
npm install @ptlm-azulejo/phone-number @ptlm-azulejo/themes
# or
yarn add @ptlm-azulejo/phone-number @ptlm-azulejo/themesStyles & theming
The component reads theme CSS variables, so it needs @ptlm-azulejo/themes. Import a
brand preset (it bundles the base tokens) and the component styles, then set the
brand class on the root element:
import '@ptlm-azulejo/themes/presets/leroy-merlin.css' // or /presets/adeo.css
import '@ptlm-azulejo/phone-number/style.css'<html class="preset-lm" data-theme="dark">Without a preset and the
.preset-*class, the component renders uncolored. See the themes package for brand switching, dark mode, and custom brands.
Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | A unique identifier for the phone number input element. (required) |
| modelValue | string | "" | The current value of the phone number input field. |
| defaultCountry | CountryCode | "PT" | Default country code for phone number formatting (e.g., "FR", "US"). |
| placeholder | string | — | Placeholder text. Falls back to an example number for the selected country. |
| size | "s" \| "m" | "m" | Determines the size of the phone number input. |
| invalid | boolean | false | If true, applies an invalid state to the input. |
| disabled | boolean | false | If true, disables the input and country selector. |
| readonly | boolean | false | If true, the input is read-only. |
| prefix | boolean | true | If true, display the country calling code prefix (+33, +1, etc.). |
| flag | boolean | true | If true, display the country flag selector. |
| locale | string | "en" | Locale for displaying country names (e.g., "fr", "es", "pt"). |
| countryCodes | CountryCode[] | — | List of country codes to show in the selector. If not provided, all countries are shown. |
Events
| Name | Payload | Description |
| --- | --- | --- |
| update:modelValue | value: string | Emits the phone number in international format (e.g., "+351912345678"). |
| valid | isValid: boolean | Emits whenever the validation state of the phone number changes. |
Basic Usage
<script setup>
import { AzPhoneNumber } from '@ptlm-azulejo/phone-number'
import { ref } from 'vue'
const phone = ref('')
const valid = ref(false)
function onValid(isValid) {
valid.value = isValid
}
</script>
<template>
<AzPhoneNumber
id="phone"
v-model="phone"
default-country="FR"
@valid="onValid"
/>
</template>