pns-component-library 1.5.11 → 1.5.13

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,74 +75,6 @@ const handleClick = () => {
 
 ### Form Components
 
-#### 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'` |
-| disabled | whether checkbox is disabled | `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>
-```
-
 #### AreaCodePhoneInput
 International phone number input with country selection and area code handling.
 
@@ -184,9 +116,10 @@ Versatile input field component with validation and styling options.
 |-----------|-------------|------|---------|
 | v-model / modelValue | binding value - the current input text value | `string` | — |
 | type | input type | `string` | `'text'` |
-| placeholder | placeholder text | `string` | — |
+| placeholder | placeholder text | `string` | `'Enter'` |
 | clearable | whether to show clear button | `boolean` | `false` |
 | disabled | whether input is disabled | `boolean` | `false` |
+| autocomplete | autocomplete attribute for input, raw input tag values work | `string` | `'off'` |
 
 ##### Events
 
@@ -228,47 +161,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.
 
@@ -286,6 +178,10 @@ Dropdown selector component with filtering and search capabilities.
 | loading | loading state | `boolean` | `false` |
 | loading_text | loading text | `string` | `'Loading'` |
 | no_data_text | no data text | `string` | `'No data'` |
+| filter_only_among_options_value | filter only among option values | `boolean` | `false` |
+| filter_only_among_options_label | filter only among option labels | `boolean` | `false` |
+
+> **Note**: `filter_only_among_options_value` and `filter_only_among_options_label` cannot be true at the same time. If both are true, `filter_only_among_options_value=true` will override `filter_only_among_options_label`'s logic.
 
 ##### Events
 
@@ -331,6 +227,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