pns-component-library 1.5.13 → 1.5.14
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/README.md +20 -9
- package/dist/pns-component-library.es.js +93 -84
- package/dist/pns-component-library.umd.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -76,26 +76,37 @@ const handleClick = () => {
|
|
|
76
76
|
### Form Components
|
|
77
77
|
|
|
78
78
|
#### AreaCodePhoneInput
|
|
79
|
-
International phone number input with country selection and area code handling.
|
|
79
|
+
International phone number input with country selection and area code handling. Features automatic country flag display, smart focus management, and a clear button that appears on hover/focus.
|
|
80
80
|
|
|
81
81
|
##### Attributes
|
|
82
82
|
|
|
83
83
|
| Attribute | Description | Type | Default |
|
|
84
84
|
|-----------|-------------|------|---------|
|
|
85
|
-
| v-model / modelValue | binding value - object containing `area_code` (
|
|
86
|
-
| country_options | custom country list
|
|
87
|
-
| enable_backup_country_options | use built-in country list | `boolean` | `true` |
|
|
88
|
-
| country_filterable | enable country search | `boolean` | `true` |
|
|
85
|
+
| v-model / modelValue | binding value - object containing `area_code` (string) and `phone_number` (string) | `{area_code: string, phone_number: string}` | `{}` |
|
|
86
|
+
| country_options | custom country list with `country_name` and `country_code` properties | `Array<{country_name: string, country_code: string}>` | `[]` |
|
|
87
|
+
| enable_backup_country_options | use built-in country list when no custom options provided | `boolean` | `true` |
|
|
88
|
+
| country_filterable | enable country search/filtering in dropdown | `boolean` | `true` |
|
|
89
89
|
| disabled | whether input is disabled | `boolean` | `false` |
|
|
90
90
|
|
|
91
91
|
##### Events
|
|
92
92
|
|
|
93
93
|
| Event | Description | Parameters |
|
|
94
94
|
|-------|-------------|------------|
|
|
95
|
-
| change | triggers when the binding value changes | `
|
|
96
|
-
| focus | triggers when input
|
|
97
|
-
| blur | triggers when input
|
|
98
|
-
| clear | triggers when clear button is clicked |
|
|
95
|
+
| change | triggers when the binding value changes | `{area_code: string, phone_number: string}` |
|
|
96
|
+
| focus | triggers when any part of the input gains focus | `{area_code: string, phone_number: string}` |
|
|
97
|
+
| blur | triggers when the entire input loses focus | `{area_code: string, phone_number: string}` |
|
|
98
|
+
| clear | triggers when clear button is clicked | `{area_code: string, phone_number: string}` |
|
|
99
|
+
|
|
100
|
+
##### Exposes
|
|
101
|
+
|
|
102
|
+
| Method | Description | Type |
|
|
103
|
+
|--------|-------------|------|
|
|
104
|
+
| focus | focus the appropriate input (country selector if no country selected, phone input if country selected) | `() => void` |
|
|
105
|
+
| blur | blur both country selector and phone input | `() => void` |
|
|
106
|
+
| clear | clear both country selection and phone number | `() => void` |
|
|
107
|
+
| alert | show alert message below the input | `(message: string) => void` |
|
|
108
|
+
| error | show error message below the input | `(message: string) => void` |
|
|
109
|
+
| removeAlertOrErrorEffect | clear alert/error state and message | `() => void` |
|
|
99
110
|
|
|
100
111
|
```vue
|
|
101
112
|
<template>
|