pns-component-library 1.5.12 → 1.5.14

package/README.md

@@ -8,7 +8,7 @@ A comprehensive Vue 3 component library built with modern development practices,
 - **2 Powerful Composables** - Reusable logic for common patterns
 - **2 Custom Directives** - Loading states and UI enhancements
 - **Vue 3 Composition API** - Modern, performant, and type-safe
-- **Responsive Design** - Mobile-first approach with breakpoint handling
+- **Fully Responsive UI & UX** - Components automatically adapt to all screen sizes with optimized mobile-first design and touch-friendly interactions
 - **Accessibility** - ARIA attributes and keyboard navigation support
 - **Customizable Themes** - Multiple built-in color schemes
 
@@ -75,97 +75,38 @@ const handleClick = () => {
 
 ### Form Components
 
-#### Checkbox
-Customizable checkbox with multiple themes and validation support.
+#### AreaCodePhoneInput
+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.
 
 ##### Attributes
 
 | Attribute | Description | Type | Default |
 |-----------|-------------|------|---------|
-| v-model / modelValue | binding value - `true` when checked, `false` when unchecked | `boolean` | `false` |
-| label | checkbox label | `string` | — |
-| size | checkbox size | `'small' \| 'medium'` | `'medium'` |
-| built_in_theme | color theme | `'green' \| 'primary-blue' \| 'secondary-blue' \| 'red'` | `'green'` |
-| customized_class | custom CSS class | `string` | — |
-| disabled | whether checkbox is disabled | `boolean` | `false` |
-| autofocus | whether to auto focus | `boolean` | `false` |
-| indeterminate | whether checkbox is indeterminate | `boolean` | `false` |
+| v-model / modelValue | binding value - object containing `area_code` (string) and `phone_number` (string) | `{area_code: string, phone_number: string}` | `{}` |
+| country_options | custom country list with `country_name` and `country_code` properties | `Array<{country_name: string, country_code: string}>` | `[]` |
+| enable_backup_country_options | use built-in country list when no custom options provided | `boolean` | `true` |
+| country_filterable | enable country search/filtering in dropdown | `boolean` | `true` |
+| disabled | whether input is disabled | `boolean` | `false` |
 
 ##### Events
 
 | Event | Description | Parameters |
 |-------|-------------|------------|
-| change | triggers when the binding value changes | `(value: boolean)` |
+| change | triggers when the binding value changes | `{area_code: string, phone_number: string}` |
+| focus | triggers when any part of the input gains focus | `{area_code: string, phone_number: string}` |
+| blur | triggers when the entire input loses focus | `{area_code: string, phone_number: string}` |
+| clear | triggers when clear button is clicked | `{area_code: string, phone_number: string}` |
 
 ##### Exposes
 
 | Method | Description | Type |
 |--------|-------------|------|
-| focus | focus the checkbox | `() => void` |
-| blur | blur the checkbox | `() => void` |
-| alert | show error message | `(message: string) => void` |
-| removeAlertOrErrorEffect | clear error state | `() => void` |
-
-```vue
-<template>
-  <Checkbox 
-    v-model="agreed" 
-    label="I agree to terms" 
-    built_in_theme="primary-blue"
-    @change="handleChange"
-  />
-</template>
-```
-
-#### GroupCheckbox
-Container for managing multiple related checkboxes as a group.
-
-##### Attributes
-
-| Attribute | Description | Type | Default |
-|-----------|-------------|------|---------|
-| v-model / modelValue | binding value - array of selected checkbox labels from child Checkbox components | `array` | `[]` |
-
-##### Events
-
-| Event | Description | Parameters |
-|-------|-------------|------------|
-| change | triggers when the binding value changes | `(value: array)` |
-
-```vue
-<template>
-  <GroupCheckbox v-model="selectedItems">
-    <Checkbox v-for="item in options" :key="item" :label="item" />
-  </GroupCheckbox>
-</template>
-
-<script setup>
-const selectedItems = ref(['option1'])
-const options = ['option1', 'option2', 'option3']
-</script>
-```
-
-#### AreaCodePhoneInput
-International phone number input with country selection and area code handling.
-
-##### Attributes
-
-| Attribute | Description | Type | Default |
-|-----------|-------------|------|---------|
-| v-model / modelValue | binding value - object containing `area_code` (country code like "+1") and `phone_number` (local number) | `{area_code: string, phone_number: string}` | `{area_code: '', phone_number: ''}` |
-| country_options | custom country list | `array` | — |
-| enable_backup_country_options | use built-in country list | `boolean` | `true` |
-| country_filterable | enable country search | `boolean` | `true` |
-| disabled | whether input is disabled | `boolean` | `false` |
-
-##### Events
-
-| Event | Description | Parameters |
-|-------|-------------|------------|
-| change | triggers when the binding value changes | `(value: object)` |
-| focus | triggers when input is focused | `(event: FocusEvent)` |
-| blur | triggers when input is blurred | `(event: FocusEvent)` |
-| clear | triggers when clear button is clicked | — |
+| focus | focus the appropriate input (country selector if no country selected, phone input if country selected) | `() => void` |
+| blur | blur both country selector and phone input | `() => void` |
+| clear | clear both country selection and phone number | `() => void` |
+| alert | show alert message below the input | `(message: string) => void` |
+| error | show error message below the input | `(message: string) => void` |
+| removeAlertOrErrorEffect | clear alert/error state and message | `() => void` |
 
 ```vue
 <template>
@@ -231,47 +172,6 @@ Versatile input field component with validation and styling options.
 </InputBox>
 ```
 
-#### Radio
-Radio button component for single selection from multiple options.
-
-##### Attributes
-
-| Attribute | Description | Type | Default |
-|-----------|-------------|------|---------|
-| v-model / modelValue | binding value - the `value` of the currently selected radio button in the group | `string` | — |
-| value | radio value | `string` | — |
-| label | radio label | `string` | — |
-| name | group name for radio group | `string` | — |
-| size | radio size | `'small' \| 'medium'` | `'medium'` |
-| built_in_theme | color theme | `'primary-blue' \| 'secondary-blue' \| 'red'` | `'primary-blue'` |
-| customized_class | custom CSS class | `string` | — |
-| disabled | whether radio is disabled | `boolean` | `false` |
-| autofocus | whether to auto focus | `boolean` | `false` |
-
-##### Events
-
-| Event | Description | Parameters |
-|-------|-------------|------------|
-| change | triggers when the binding value changes | `(value: string)` |
-
-##### Exposes
-
-| Method | Description | Type |
-|--------|-------------|------|
-| focus | focus the radio | `() => void` |
-| blur | blur the radio | `() => void` |
-| alert | show alert message | `(message: string) => void` |
-| removeAlertOrErrorEffect | clear alert/error state | `() => void` |
-
-```vue
-<!-- Radio Group -->
-<Radio v-model="selected" value="option1" name="group1" label="Option 1" />
-<Radio v-model="selected" value="option2" name="group1" label="Option 2" />
-
-<!-- Single Radio -->
-<Radio v-model="single" value="yes" label="Agree to terms" />
-```
-
 #### SingleSelector
 Dropdown selector component with filtering and search capabilities.
 
@@ -338,6 +238,117 @@ Dropdown selector component with filtering and search capabilities.
 </SingleSelector>
 ```
 
+#### Checkbox
+Customizable checkbox with multiple themes and validation support.
+
+##### Attributes
+
+| Attribute | Description | Type | Default |
+|-----------|-------------|------|---------|
+| v-model / modelValue | binding value - `true` when checked, `false` when unchecked | `boolean` | `false` |
+| label | checkbox label | `string` | — |
+| size | checkbox size | `'small' \| 'medium'` | `'medium'` |
+| built_in_theme | color theme | `'green' \| 'primary-blue' \| 'secondary-blue' \| 'red'` | `'green'` |
+| customized_class | custom CSS class | `string` | — |
+| disabled | whether checkbox is disabled | `boolean` | `false` |
+| autofocus | whether to auto focus | `boolean` | `false` |
+| indeterminate | whether checkbox is indeterminate | `boolean` | `false` |
+
+##### Events
+
+| Event | Description | Parameters |
+|-------|-------------|------------|
+| change | triggers when the binding value changes | `(value: boolean)` |
+
+##### Exposes
+
+| Method | Description | Type |
+|--------|-------------|------|
+| focus | focus the checkbox | `() => void` |
+| blur | blur the checkbox | `() => void` |
+| alert | show error message | `(message: string) => void` |
+| removeAlertOrErrorEffect | clear error state | `() => void` |
+
+```vue
+<template>
+  <Checkbox 
+    v-model="agreed" 
+    label="I agree to terms" 
+    built_in_theme="primary-blue"
+    @change="handleChange"
+  />
+</template>
+```
+
+#### GroupCheckbox
+Container for managing multiple related checkboxes as a group.
+
+##### Attributes
+
+| Attribute | Description | Type | Default |
+|-----------|-------------|------|---------|
+| v-model / modelValue | binding value - array of selected checkbox labels from child Checkbox components | `array` | `[]` |
+
+##### Events
+
+| Event | Description | Parameters |
+|-------|-------------|------------|
+| change | triggers when the binding value changes | `(value: array)` |
+
+```vue
+<template>
+  <GroupCheckbox v-model="selectedItems">
+    <Checkbox v-for="item in options" :key="item" :label="item" />
+  </GroupCheckbox>
+</template>
+
+<script setup>
+const selectedItems = ref(['option1'])
+const options = ['option1', 'option2', 'option3']
+</script>
+```
+
+#### Radio
+Radio button component for single selection from multiple options.
+
+##### Attributes
+
+| Attribute | Description | Type | Default |
+|-----------|-------------|------|---------|
+| v-model / modelValue | binding value - the `value` of the currently selected radio button in the group | `string` | — |
+| value | radio value | `string` | — |
+| label | radio label | `string` | — |
+| name | group name for radio group | `string` | — |
+| size | radio size | `'small' \| 'medium'` | `'medium'` |
+| built_in_theme | color theme | `'primary-blue' \| 'secondary-blue' \| 'red'` | `'primary-blue'` |
+| customized_class | custom CSS class | `string` | — |
+| disabled | whether radio is disabled | `boolean` | `false` |
+| autofocus | whether to auto focus | `boolean` | `false` |
+
+##### Events
+
+| Event | Description | Parameters |
+|-------|-------------|------------|
+| change | triggers when the binding value changes | `(value: string)` |
+
+##### Exposes
+
+| Method | Description | Type |
+|--------|-------------|------|
+| focus | focus the radio | `() => void` |
+| blur | blur the radio | `() => void` |
+| alert | show alert message | `(message: string) => void` |
+| removeAlertOrErrorEffect | clear alert/error state | `() => void` |
+
+```vue
+<!-- Radio Group -->
+<Radio v-model="selected" value="option1" name="group1" label="Option 1" />
+<Radio v-model="selected" value="option2" name="group1" label="Option 2" />
+
+<!-- Single Radio -->
+<Radio v-model="single" value="yes" label="Agree to terms" />
+```
+
 ### Interactive Components
 
 #### ResponsiveButton