@ptlm-azulejo/phone-number 1.0.0-alpha.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/README.md +80 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +1947 -0
- package/dist/index.umd.cjs +5 -0
- package/dist/src/index.stories.d.ts +20 -0
- package/dist/src/index.stories.d.ts.map +1 -0
- package/dist/src/index.vue.d.ts +147 -0
- package/dist/src/index.vue.d.ts.map +1 -0
- package/dist/style.css +1 -0
- package/package.json +47 -0
package/CHANGELOG.md
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# AzPhoneNumber
|
|
2
|
+
|
|
3
|
+
A phone number input component with a country code selector, flag display,
|
|
4
|
+
auto-formatting, and real-time validation. Powered by `libphonenumber-js`.
|
|
5
|
+
|
|
6
|
+
## Installation
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm install @ptlm-azulejo/phone-number @ptlm-azulejo/themes
|
|
10
|
+
# or
|
|
11
|
+
yarn add @ptlm-azulejo/phone-number @ptlm-azulejo/themes
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Styles & theming
|
|
15
|
+
|
|
16
|
+
The component reads theme CSS variables, so it needs `@ptlm-azulejo/themes`. Import a
|
|
17
|
+
brand preset (it bundles the base tokens) and the component styles, then set the
|
|
18
|
+
brand class on the root element:
|
|
19
|
+
|
|
20
|
+
```js
|
|
21
|
+
import '@ptlm-azulejo/themes/presets/leroy-merlin.css' // or /presets/adeo.css
|
|
22
|
+
import '@ptlm-azulejo/phone-number/style.css'
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<html class="preset-lm" data-theme="dark">
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
> Without a preset **and** the `.preset-*` class, the component renders uncolored.
|
|
30
|
+
> See the [themes package](../themes/README.md) for brand switching, dark mode,
|
|
31
|
+
> and custom brands.
|
|
32
|
+
|
|
33
|
+
## Props
|
|
34
|
+
|
|
35
|
+
| Name | Type | Default | Description |
|
|
36
|
+
| --- | --- | --- | --- |
|
|
37
|
+
| `id` | `string` | — | A unique identifier for the phone number input element. **(required)** |
|
|
38
|
+
| `modelValue` | `string` | `""` | The current value of the phone number input field. |
|
|
39
|
+
| `defaultCountry` | `CountryCode` | `"PT"` | Default country code for phone number formatting (e.g., `"FR"`, `"US"`). |
|
|
40
|
+
| `placeholder` | `string` | — | Placeholder text. Falls back to an example number for the selected country. |
|
|
41
|
+
| `size` | `"s" \| "m"` | `"m"` | Determines the size of the phone number input. |
|
|
42
|
+
| `invalid` | `boolean` | `false` | If `true`, applies an invalid state to the input. |
|
|
43
|
+
| `disabled` | `boolean` | `false` | If `true`, disables the input and country selector. |
|
|
44
|
+
| `readonly` | `boolean` | `false` | If `true`, the input is read-only. |
|
|
45
|
+
| `prefix` | `boolean` | `true` | If `true`, display the country calling code prefix (+33, +1, etc.). |
|
|
46
|
+
| `flag` | `boolean` | `true` | If `true`, display the country flag selector. |
|
|
47
|
+
| `locale` | `string` | `"en"` | Locale for displaying country names (e.g., `"fr"`, `"es"`, `"pt"`). |
|
|
48
|
+
| `countryCodes` | `CountryCode[]` | — | List of country codes to show in the selector. If not provided, all countries are shown. |
|
|
49
|
+
|
|
50
|
+
## Events
|
|
51
|
+
|
|
52
|
+
| Name | Payload | Description |
|
|
53
|
+
| --- | --- | --- |
|
|
54
|
+
| `update:modelValue` | `value: string` | Emits the phone number in international format (e.g., `"+351912345678"`). |
|
|
55
|
+
| `valid` | `isValid: boolean` | Emits whenever the validation state of the phone number changes. |
|
|
56
|
+
|
|
57
|
+
## Basic Usage
|
|
58
|
+
|
|
59
|
+
```vue
|
|
60
|
+
<script setup>
|
|
61
|
+
import { AzPhoneNumber } from '@ptlm-azulejo/phone-number'
|
|
62
|
+
import { ref } from 'vue'
|
|
63
|
+
|
|
64
|
+
const phone = ref('')
|
|
65
|
+
const valid = ref(false)
|
|
66
|
+
|
|
67
|
+
function onValid(isValid) {
|
|
68
|
+
valid.value = isValid
|
|
69
|
+
}
|
|
70
|
+
</script>
|
|
71
|
+
|
|
72
|
+
<template>
|
|
73
|
+
<AzPhoneNumber
|
|
74
|
+
id="phone"
|
|
75
|
+
v-model="phone"
|
|
76
|
+
default-country="FR"
|
|
77
|
+
@valid="onValid"
|
|
78
|
+
/>
|
|
79
|
+
</template>
|
|
80
|
+
```
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
|