@mozaic-ds/vue/src/components/phonenumber/README.md

Mozaic-Vue is the Vue.js implementation of ADEO Design system

# MPhoneNumber

A phone number input is a specialized input field designed to capture and validate phone numbers, ensuring correct formatting based on country-specific dialing codes. It often includes a country selector that automatically adjusts the international dialing code. This component improves user experience by standardizing phone number entries, reducing errors, and facilitating global compatibility. It is commonly used in registration forms, authentication flows, and contact information fields.


## Props

| Name | Description | Type | Default |
| --- | --- | --- | --- | 
| `id*` | A unique identifier for the phone number input element, used to associate the label with the form element. | `string` | - |
| `modelValue` | The current value of the phone number input field. | `string` | `""` |
| `defaultCountry` | Default country code for phone number formatting (e.g., 'FR', 'US', 'PT'). | `CountryCode` | `"FR" as CountryCode` |
| `placeholder` | A placeholder text to show in the phone number input when it is empty. | `string` | - |
| `size` | Determines the size of the phone number input. | `"s"` `"m"` | `"m"` |
| `isInvalid` | If `true`, applies an invalid state to the password input. | `boolean` | - |
| `disabled` | If `true`, disables the input, making it non-interactive. | `boolean` | - |
| `readonly` | If `true`, the input is read-only (cannot be edited). | `boolean` | - |
| `prefix` | If `true`, display the country calling code prefix (+33, +1, etc.). | `boolean` | `true` |
| `flag` | If `true`, display the country flag selector | `boolean` | `true` |
| `locale` | Locale for displaying country names (e.g., 'fr', 'en', 'es', 'pt'). | `string` | `"en"` |
| `countryCodes` | List of country codes to display in the selector. If not provided, all countries will be shown. | `CountryCode[]` | - |

## Events

| Name | Description | Type |
| --- | --- | --- |
| `update:modelValue` | - | `[value: string]` |
| `valid` | - | `[isValid: boolean]` |