pns-component-library 1.5.10 → 1.5.11

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.
Files changed (2) hide show
  1. package/README.md +47 -42
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -82,10 +82,10 @@ Customizable checkbox with multiple themes and validation support.
82
82
 
83
83
  | Attribute | Description | Type | Default |
84
84
  |-----------|-------------|------|---------|
85
- | model-value / v-model | binding value - `true` when checked, `false` when unchecked | `boolean` | `false` |
85
+ | v-model / modelValue | binding value - `true` when checked, `false` when unchecked | `boolean` | `false` |
86
86
  | label | checkbox label | `string` | — |
87
87
  | size | checkbox size | `'small' \| 'medium'` | `'medium'` |
88
- | built-in-theme | color theme | `'green' \| 'primary-blue' \| 'secondary-blue' \| 'red'` | `'green'` |
88
+ | built_in_theme | color theme | `'green' \| 'primary-blue' \| 'secondary-blue' \| 'red'` | `'green'` |
89
89
  | disabled | whether checkbox is disabled | `boolean` | `false` |
90
90
  | indeterminate | whether checkbox is indeterminate | `boolean` | `false` |
91
91
 
@@ -122,7 +122,7 @@ Container for managing multiple related checkboxes as a group.
122
122
 
123
123
  | Attribute | Description | Type | Default |
124
124
  |-----------|-------------|------|---------|
125
- | model-value / v-model | binding value - array of selected checkbox labels from child Checkbox components | `array` | `[]` |
125
+ | v-model / modelValue | binding value - array of selected checkbox labels from child Checkbox components | `array` | `[]` |
126
126
 
127
127
  ##### Events
128
128
 
@@ -150,10 +150,10 @@ International phone number input with country selection and area code handling.
150
150
 
151
151
  | Attribute | Description | Type | Default |
152
152
  |-----------|-------------|------|---------|
153
- | model-value / v-model | 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: ''}` |
154
- | country-options | custom country list | `array` | — |
155
- | enable-backup-country-options | use built-in country list | `boolean` | `true` |
156
- | country-filterable | enable country search | `boolean` | `false` |
153
+ | 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: ''}` |
154
+ | country_options | custom country list | `array` | — |
155
+ | enable_backup_country_options | use built-in country list | `boolean` | `true` |
156
+ | country_filterable | enable country search | `boolean` | `true` |
157
157
  | disabled | whether input is disabled | `boolean` | `false` |
158
158
 
159
159
  ##### Events
@@ -182,7 +182,7 @@ Versatile input field component with validation and styling options.
182
182
 
183
183
  | Attribute | Description | Type | Default |
184
184
  |-----------|-------------|------|---------|
185
- | model-value / v-model | binding value - the current input text value | `string` | — |
185
+ | v-model / modelValue | binding value - the current input text value | `string` | — |
186
186
  | type | input type | `string` | `'text'` |
187
187
  | placeholder | placeholder text | `string` | — |
188
188
  | clearable | whether to show clear button | `boolean` | `false` |
@@ -235,13 +235,13 @@ Radio button component for single selection from multiple options.
235
235
 
236
236
  | Attribute | Description | Type | Default |
237
237
  |-----------|-------------|------|---------|
238
- | model-value / v-model | binding value - the `value` of the currently selected radio button in the group | `string` | — |
238
+ | v-model / modelValue | binding value - the `value` of the currently selected radio button in the group | `string` | — |
239
239
  | value | radio value | `string` | — |
240
240
  | label | radio label | `string` | — |
241
241
  | name | group name for radio group | `string` | — |
242
242
  | size | radio size | `'small' \| 'medium'` | `'medium'` |
243
- | built-in-theme | color theme | `'primary-blue' \| 'secondary-blue' \| 'red'` | `'primary-blue'` |
244
- | customized-class | custom CSS class | `string` | — |
243
+ | built_in_theme | color theme | `'primary-blue' \| 'secondary-blue' \| 'red'` | `'primary-blue'` |
244
+ | customized_class | custom CSS class | `string` | — |
245
245
  | disabled | whether radio is disabled | `boolean` | `false` |
246
246
  | autofocus | whether to auto focus | `boolean` | `false` |
247
247
 
@@ -276,16 +276,16 @@ Dropdown selector component with filtering and search capabilities.
276
276
 
277
277
  | Attribute | Description | Type | Default |
278
278
  |-----------|-------------|------|---------|
279
- | model-value / v-model | binding value - the `value` property of the selected option from the options array | `string \| number \| boolean \| object \| array` | — |
279
+ | v-model / modelValue | binding value - the `value` property of the selected option from the options array | `string \| number \| boolean \| object \| array` | — |
280
280
  | options | options array | `Array<{value: any, label: string}>` | `[]` |
281
281
  | filterable | whether to enable filtering | `boolean` | `false` |
282
- | remote-search | whether to enable remote search | `boolean` | `false` |
282
+ | remote_search | whether to enable remote search | `boolean` | `false` |
283
283
  | disabled | whether selector is disabled | `boolean` | `false` |
284
284
  | placeholder | placeholder text | `string` | `'Select'` |
285
285
  | clearable | whether to show clear button | `boolean` | `false` |
286
286
  | loading | loading state | `boolean` | `false` |
287
- | loading-text | loading text | `string` | `'Loading'` |
288
- | no-data-text | no data text | `string` | `'No data'` |
287
+ | loading_text | loading text | `string` | `'Loading'` |
288
+ | no_data_text | no data text | `string` | `'No data'` |
289
289
 
290
290
  ##### Events
291
291
 
@@ -331,7 +331,7 @@ Dropdown selector component with filtering and search capabilities.
331
331
  </SingleSelector>
332
332
  ```
333
333
 
334
- ### Layout Components
334
+ ### Interactive Components
335
335
 
336
336
  #### ResponsiveButton
337
337
  Feature-rich button component with responsive behavior and multiple states.
@@ -340,15 +340,15 @@ Feature-rich button component with responsive behavior and multiple states.
340
340
 
341
341
  | Attribute | Description | Type | Default |
342
342
  |-----------|-------------|------|---------|
343
- | display-name | button text | `string` | `'button'` |
343
+ | display_name | button text | `string` | `'button'` |
344
344
  | size | button size | `'xsmall' \| 'small' \| 'medium' \| 'large'` | `'small'` |
345
- | width-type | button width type | `'fill-whole' \| 'fit-content'` | `'fit-content'` |
346
- | build-in-theme | color theme | `'outlined-primary' \| 'filled-primary' \| 'text-primary' \| 'outlined-secondary' \| 'filled-secondary' \| 'text-secondary'` | `'outlined-primary'` |
347
- | customized-class | custom CSS class | `string` | — |
345
+ | width_type | button width type | `'fill-whole' \| 'fit-content'` | `'fit-content'` |
346
+ | build_in_theme | color theme | `'outlined-primary' \| 'filled-primary' \| 'text-primary' \| 'outlined-secondary' \| 'filled-secondary' \| 'text-secondary'` | `'outlined-primary'` |
347
+ | customized_class | custom CSS class | `string` | — |
348
348
  | hold | whether button is in hold state | `boolean` | `false` |
349
349
  | disabled | whether button is disabled | `boolean` | `false` |
350
- | dropdown-options | dropdown menu options | `array` | `[]` |
351
- | is-dropdown-option | whether this is a dropdown item | `boolean` | `false` |
350
+ | dropdown_options | dropdown menu options | `array` | `[]` |
351
+ | is_dropdown_option | whether this is a dropdown item | `boolean` | `false` |
352
352
 
353
353
  ##### Events
354
354
 
@@ -367,19 +367,24 @@ Feature-rich button component with responsive behavior and multiple states.
367
367
  | suffix | content after button text |
368
368
 
369
369
  ```vue
370
- <ResponsiveButton
371
- display_name="Save Changes"
372
- size="medium"
373
- build_in_theme="filled-primary"
374
- @click="handleSave"
375
- >
376
- <template #prefix>
377
- <Icon name="save" />
378
- </template>
379
- </ResponsiveButton>
370
+ <script setup>
371
+ import { iconsMap } from 'pns-component-library';
372
+ </script>
373
+ <template>
374
+ <ResponsiveButton
375
+ display_name="Save Changes"
376
+ size="medium"
377
+ build_in_theme="filled-primary"
378
+ @click="handleSave"
379
+ >
380
+ <template #prefix>
381
+ <img :src="iconsMap['eye_icon']" alt="eye" />
382
+ </template>
383
+ </ResponsiveButton>
384
+ </template>
380
385
  ```
381
386
 
382
- ### Utility Components
387
+ ### Feedback Components
383
388
 
384
389
  #### SimplifiedNotification
385
390
  Toast notification component for user feedback.
@@ -389,13 +394,13 @@ Toast notification component for user feedback.
389
394
  | Attribute | Description | Type | Default |
390
395
  |-----------|-------------|------|---------|
391
396
  | content | notification content | `string` | — |
392
- | build-in-theme | color theme | `'blue' \| 'red' \| 'yellow' \| 'green'` | `'blue'` |
397
+ | build_in_theme | color theme | `'blue' \| 'red' \| 'yellow' \| 'green'` | `'blue'` |
393
398
  | title | notification title | `string` | — |
394
- | customized-alert-icon-src | custom icon URL | `string` | — |
395
- | customized-class | custom CSS class | `string` | — |
396
- | with-close-btn | whether to show close button | `boolean` | `true` |
397
- | mounted-programmatically | whether mounted programmatically | `boolean` | `false` |
398
- | hide-after | auto-hide after milliseconds (0 = never) | `number` | `0` |
399
+ | customized_alert_icon_src | custom icon URL | `string` | — |
400
+ | customized_class | custom CSS class | `string` | — |
401
+ | with_close_btn | whether to show close button | `boolean` | `true` |
402
+ | mounted_programmatically | whether mounted programmatically | `boolean` | `false` |
403
+ | hide_after | auto-hide after milliseconds (0 = never) | `number` | `0` |
399
404
 
400
405
  ##### Events
401
406
 
@@ -410,8 +415,8 @@ Toast notification component for user feedback.
410
415
  | content | custom notification content |
411
416
 
412
417
  ```vue
413
- <SimplifiedNotification
414
- title="Success!"
418
+ <SimplifiedNotification
419
+ title="Success"
415
420
  content="Operation completed successfully"
416
421
  build_in_theme="green"
417
422
  :hide_after="3000"
@@ -576,7 +581,7 @@ The library provides multiple built-in themes:
576
581
 
577
582
  ```vue
578
583
  <Checkbox built_in_theme="primary-blue" />
579
- <ResponsiveButton variant="secondary-blue" />
584
+ <ResponsiveButton built_in_theme="outlined-primary" />
580
585
  ```
581
586
 
582
587
  ## 📱 Responsive Design
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pns-component-library",
3
- "version": "1.5.10",
3
+ "version": "1.5.11",
4
4
  "main": "dist/pns-component-library.umd.js",
5
5
  "module": "dist/pns-component-library.es.js",
6
6
  "exports": {