@appsbd/vue3-appsbd-ui 1.0.3 → 1.0.5

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 (100) hide show
  1. package/.ai/ai_ref_AbAvatar.md +41 -51
  2. package/.ai/ai_ref_AbBadge.md +36 -45
  3. package/.ai/ai_ref_AbButton.md +52 -70
  4. package/.ai/ai_ref_AbCard.md +51 -70
  5. package/.ai/ai_ref_AbCarousel.md +36 -47
  6. package/.ai/ai_ref_AbChart.md +46 -87
  7. package/.ai/ai_ref_AbColorPicker.md +42 -55
  8. package/.ai/ai_ref_AbConfirmPopover.md +54 -59
  9. package/.ai/ai_ref_AbCustomField.md +66 -74
  10. package/.ai/ai_ref_AbDarkModeToggler.md +33 -42
  11. package/.ai/ai_ref_AbDateTimePicker.md +74 -108
  12. package/.ai/ai_ref_AbEasyModal.md +56 -62
  13. package/.ai/ai_ref_AbField.md +88 -96
  14. package/.ai/ai_ref_AbFileUploader.md +47 -63
  15. package/.ai/ai_ref_AbFilterPanel.md +67 -71
  16. package/.ai/ai_ref_AbFormCheck.md +58 -75
  17. package/.ai/ai_ref_AbImageRadioInput.md +55 -63
  18. package/.ai/ai_ref_AbInputField.md +66 -74
  19. package/.ai/ai_ref_AbInputTag.md +56 -76
  20. package/.ai/ai_ref_AbKbd.md +23 -35
  21. package/.ai/ai_ref_AbKbdGroup.md +21 -33
  22. package/.ai/ai_ref_AbMainLayout.md +106 -0
  23. package/.ai/ai_ref_AbModal.md +98 -103
  24. package/.ai/ai_ref_AbMultiSelect.md +78 -112
  25. package/.ai/ai_ref_AbNumberField.md +59 -84
  26. package/.ai/ai_ref_AbPinInput.md +33 -45
  27. package/.ai/ai_ref_AbPopover.md +54 -64
  28. package/.ai/ai_ref_AbPricingCard.md +56 -64
  29. package/.ai/ai_ref_AbPricingContainer.md +41 -49
  30. package/.ai/ai_ref_AbPricingTable.md +56 -72
  31. package/.ai/ai_ref_AbProgressbar.md +34 -44
  32. package/.ai/ai_ref_AbScrollbar.md +38 -48
  33. package/.ai/ai_ref_AbSettingsForm.md +46 -54
  34. package/.ai/ai_ref_AbSideMenuItem.md +47 -58
  35. package/.ai/ai_ref_AbSidebar.md +62 -70
  36. package/.ai/ai_ref_AbSkeleton.md +23 -41
  37. package/.ai/ai_ref_AbSlider.md +52 -71
  38. package/.ai/ai_ref_AbTab.md +30 -38
  39. package/.ai/ai_ref_AbTable.md +49 -59
  40. package/.ai/ai_ref_AbTabs.md +37 -47
  41. package/.ai/ai_ref_AbToggle.md +46 -65
  42. package/.ai/ai_ref_AbTooltip.md +39 -53
  43. package/.ai/ai_ref_AbWizard.md +64 -77
  44. package/.ai/ai_ref_AbWizardStep.md +36 -48
  45. package/.ai/ai_ref_abEventBus.md +9 -37
  46. package/.ai/ai_ref_abRequestParam.md +2 -17
  47. package/.ai/ai_ref_abTranslate.md +30 -15
  48. package/.ai/ai_ref_abVeeRules.md +2 -11
  49. package/.ai/ai_ref_global_config.md +57 -66
  50. package/.ai/ai_ref_useAlert.md +7 -20
  51. package/.ai/ai_ref_useFileValidator.md +3 -18
  52. package/.ai/ai_ref_useResponsive.md +6 -20
  53. package/.ai/ai_ref_useTheme.md +4 -15
  54. package/.ai/ai_ref_useToast.md +5 -17
  55. package/AI_REF.md +114 -0
  56. package/AI_REFERENCE.md +87 -1157
  57. package/design-system.md +403 -403
  58. package/dist/skins/black.css +1 -1
  59. package/dist/skins/black.scss +3 -3
  60. package/dist/skins/cyan.css +1 -1
  61. package/dist/skins/cyan.scss +3 -3
  62. package/dist/skins/default.css +1 -1
  63. package/dist/skins/default.scss +5 -5
  64. package/dist/skins/gray.css +1 -1
  65. package/dist/skins/gray.scss +3 -3
  66. package/dist/skins/green.css +1 -1
  67. package/dist/skins/green.scss +5 -5
  68. package/dist/skins/orange.css +1 -1
  69. package/dist/skins/orange.scss +3 -3
  70. package/dist/skins/pink.css +1 -1
  71. package/dist/skins/pink.scss +3 -3
  72. package/dist/skins/purple.css +1 -1
  73. package/dist/skins/purple.scss +3 -3
  74. package/dist/skins/red.css +1 -1
  75. package/dist/skins/red.scss +3 -3
  76. package/dist/skins/themes/_black.scss +18 -6
  77. package/dist/skins/themes/_blue.scss +18 -43
  78. package/dist/skins/themes/_common_variable.scss +695 -590
  79. package/dist/skins/themes/_cyan.scss +18 -6
  80. package/dist/skins/themes/_gray.scss +18 -6
  81. package/dist/skins/themes/_green.scss +18 -6
  82. package/dist/skins/themes/_grid.scss +32 -27
  83. package/dist/skins/themes/_orange.scss +18 -6
  84. package/dist/skins/themes/_pink.scss +18 -6
  85. package/dist/skins/themes/_purple.scss +18 -6
  86. package/dist/skins/themes/_red.scss +18 -6
  87. package/dist/skins/themes/_violet.scss +18 -6
  88. package/dist/skins/violet.css +1 -1
  89. package/dist/skins/violet.scss +3 -3
  90. package/dist/style.css +1 -1
  91. package/dist/vue3-appsbd-ui.cjs.js +145 -125
  92. package/dist/vue3-appsbd-ui.es.js +27822 -16778
  93. package/package.json +72 -66
  94. package/readme.md +194 -136
  95. package/scripts/postinstall.js +55 -0
  96. package/scripts/setup.js +16 -0
  97. package/scripts/skill-groups.js +38 -0
  98. package/skills/commands/generate-module.md +76 -0
  99. package/skills/commands/settings-form.md +175 -0
  100. package/skills/commands/use-appsbd-ui.md +40 -0
@@ -1,75 +1,58 @@
1
- # AbFormCheck / AbRadioInput — AI Reference
2
-
3
- Checkbox or radio group with card, segmented, and pill visual variants. `AbRadioInput` is an alias export of `AbFormCheck` — both register to the same component.
4
-
5
- ## Installation
6
-
7
- Globally registered by the plugin.
8
-
9
- ## Usage
10
-
11
- ```vue
12
- <template>
13
- <!-- Checkbox group -->
14
- <ab-form-check
15
- v-model="selected"
16
- name="features"
17
- :options="[
18
- { val: 'a', title: 'Email reports' },
19
- { val: 'b', title: 'Slack notifications' },
20
- { val: 'c', title: 'SMS alerts' },
21
- ]"
22
- label="Enable"
23
- />
24
-
25
- <!-- Radio group card variant -->
26
- <ab-form-check
27
- v-model="plan"
28
- type="radio"
29
- name="plan"
30
- variant="card"
31
- :options="plans"
32
- />
33
- </template>
34
- ```
35
-
36
- ## Props
37
-
38
- | Name | Type | Default | Description |
39
- | --- | --- | --- | --- |
40
- | `modelValue` | `any` | | v-model binding (array for checkboxes, single value for radio). |
41
- | `label` | `String \| null` | `null` | Group label. |
42
- | `rules` | `String` | `""` | VeeValidate rules. |
43
- | `val` | `any` | `null` | Initial value. |
44
- | `type` | `String` | `"checkbox"` | `"checkbox"` or `"radio"`. |
45
- | `isInline` | `Boolean` | `false` | Render options inline. |
46
- | `options` | `Array` | `[]` | Each: `{ val, title, description?, icon?, img_src?, iconComponent?, disable? }`. |
47
- | `name` | `String` | **required** | Field name. |
48
- | `limit` | `Number` | `0` | Max selections (0 = unlimited). |
49
- | `containerClass` | `String` | `"mb-3"` | Wrapper class. |
50
- | `size` | `String` | `"md"` | Control size. |
51
- | `iconSize` | `String` | `"24px"` | Icon size (when option has an icon). |
52
- | `iconGap` | `String` | `"10px"` | Gap between icon and label. |
53
- | `variant` | `String` | `"default"` | `default`, `card`, `segmented`, `pill`. |
54
-
55
- ## Events
56
-
57
- | Event | Payload | Description |
58
- | --- | --- | --- |
59
- | `update:modelValue` | `value` | v-model sync. |
60
-
61
- ## Slots
62
-
63
- | Name | Description |
64
- | --- | --- |
65
- | `label` | Group label. |
66
- | `description` | Group description. |
67
- | `help-text` | Helper text. |
68
- | `input-img-{option.title}` | Per-option image slot. |
69
- | `input-icon-{option.title}` | Per-option icon component slot. |
70
- | `label-{option.title}` | Per-option label slot. |
71
- | `description-{option.title}` | Per-option description slot. |
72
-
73
- ## v-model
74
-
75
- Yes.
1
+ # AbFormCheck / AbRadioInput — AI Reference
2
+
3
+ Checkbox or radio group with card, segmented, and pill visual variants. `AbRadioInput` is an alias export of `AbFormCheck`.
4
+
5
+ ## Usage
6
+
7
+ ```vue
8
+ <template>
9
+ <ab-form-check
10
+ v-model="selected"
11
+ name="features"
12
+ :options="[
13
+ { val: 'a', title: 'Email reports' },
14
+ { val: 'b', title: 'Slack notifications' },
15
+ ]"
16
+ label="Enable"
17
+ />
18
+
19
+ <ab-form-check v-model="plan" type="radio" name="plan" variant="card" :options="plans" />
20
+ </template>
21
+ ```
22
+
23
+ ## Props
24
+
25
+ | Name | Type | Default | Description |
26
+ | --- | --- | --- | --- |
27
+ | `modelValue` | `any` | — | v-model binding (array for checkboxes, single value for radio). |
28
+ | `label` | `String \| null` | `null` | Group label. |
29
+ | `rules` | `String` | `""` | VeeValidate rules. |
30
+ | `val` | `any` | `null` | Initial value. |
31
+ | `type` | `String` | `"checkbox"` | `"checkbox"` or `"radio"`. |
32
+ | `isInline` | `Boolean` | `false` | Render options inline. |
33
+ | `options` | `Array` | `[]` | Each: `{ val, title, description?, icon?, img_src?, iconComponent?, disable? }`. |
34
+ | `name` | `String` | **required** | Field name. |
35
+ | `limit` | `Number` | `0` | Max selections (0 = unlimited). |
36
+ | `containerClass` | `String` | `"mb-3"` | Wrapper class. |
37
+ | `size` | `String` | `"md"` | Control size. |
38
+ | `iconSize` | `String` | `"24px"` | Icon size (when option has an icon). |
39
+ | `iconGap` | `String` | `"10px"` | Gap between icon and label. |
40
+ | `variant` | `String` | `"default"` | `default`, `card`, `segmented`, `pill`. |
41
+
42
+ ## Events
43
+
44
+ | Event | Payload | Description |
45
+ | --- | --- | --- |
46
+ | `update:modelValue` | `value` | v-model sync. |
47
+
48
+ ## Slots
49
+
50
+ | Name | Description |
51
+ | --- | --- |
52
+ | `label` | Group label. |
53
+ | `description` | Group description. |
54
+ | `help-text` | Helper text. |
55
+ | `input-img-{option.title}` | Per-option image slot. |
56
+ | `input-icon-{option.title}` | Per-option icon component slot. |
57
+ | `label-{option.title}` | Per-option label slot. |
58
+ | `description-{option.title}` | Per-option description slot. |
@@ -1,63 +1,55 @@
1
- # AbImageRadioInput — AI Reference
2
-
3
- Radio-group variant that renders visual image / icon tiles for each option. Useful for theme pickers, layout pickers, and other visual-first choices.
4
-
5
- ## Installation
6
-
7
- Globally registered by the plugin.
8
-
9
- ## Usage
10
-
11
- ```vue
12
- <template>
13
- <ab-image-radio-input
14
- v-model="theme"
15
- :options="[
16
- { val: 'light', label: 'Light', img_src: '/theme-light.png' },
17
- { val: 'dark', label: 'Dark', img_src: '/theme-dark.png' },
18
- { val: 'system', label: 'System', icon: 'bi bi-laptop' },
19
- ]"
20
- />
21
- </template>
22
- ```
23
-
24
- ## Props
25
-
26
- | Name | Type | Default | Description |
27
- | --- | --- | --- | --- |
28
- | `modelValue` | `any` | | v-model binding. |
29
- | `width` | `String` | `"auto"` | Option width. |
30
- | `height` | `String` | `"auto"` | Option height. |
31
- | `maxWidth` | `String` | `"inherit"` | Max width. |
32
- | `maxImgWidth` | `String` | `"50%"` | Image max width. |
33
- | `borderRadius` | `String` | `"5px"` | Option border radius. |
34
- | `margin` | `String` | `"0 15px 15px 0"` | Option margin. |
35
- | `padding` | `String` | `"10px"` | Option padding. |
36
- | `selectorTop` | `String` | `"5px"` | Position of the checkmark indicator (top). |
37
- | `selectorLeft` | `String` | `"5px"` | Position of the checkmark indicator (left). |
38
- | `selectorColor` | `String` | `""` | Checkmark color. |
39
- | `iconSize` | `String` | `"inherit"` | Option icon size. |
40
- | `options` | `Array` | `[]` | Option objects — see shape below. |
41
- | `isInline` | `Boolean` | `false` | Inline (row) layout. |
42
- | `optionClass` | `String` | `""` | Class for each option wrapper. |
43
- | `labelBorder` | `String` | `"1px solid transparent"` | Option border. |
44
-
45
- **Option shape**: `{ val, label?, img_src?, icon?, iconComponent?, icon_ctnr_class?, class? }`
46
-
47
- ## Events
48
-
49
- | Event | Payload | Description |
50
- | --- | --- | --- |
51
- | `update:modelValue` | `value` | v-model sync. |
52
-
53
- ## Slots
54
-
55
- | Name | Scope | Description |
56
- | --- | --- | --- |
57
- | `icon_image` | `option` | Custom image/icon for each option. |
58
- | `label` | `option` | Custom label rendering. |
59
- | `label-{val}` | — | Custom label for a specific option by `val`. |
60
-
61
- ## v-model
62
-
63
- Yes.
1
+ # AbImageRadioInput — AI Reference
2
+
3
+ Radio-group variant that renders visual image/icon tiles for each option. Useful for theme pickers, layout pickers, and other visual-first choices.
4
+
5
+ ## Usage
6
+
7
+ ```vue
8
+ <template>
9
+ <ab-image-radio-input
10
+ v-model="theme"
11
+ :options="[
12
+ { val: 'light', label: 'Light', img_src: '/theme-light.png' },
13
+ { val: 'dark', label: 'Dark', img_src: '/theme-dark.png' },
14
+ { val: 'system', label: 'System', icon: 'bi bi-laptop' },
15
+ ]"
16
+ />
17
+ </template>
18
+ ```
19
+
20
+ ## Props
21
+
22
+ | Name | Type | Default | Description |
23
+ | --- | --- | --- | --- |
24
+ | `modelValue` | `any` | — | v-model binding. |
25
+ | `width` | `String` | `"auto"` | Option width. |
26
+ | `height` | `String` | `"auto"` | Option height. |
27
+ | `maxWidth` | `String` | `"inherit"` | Max width. |
28
+ | `maxImgWidth` | `String` | `"50%"` | Image max width. |
29
+ | `borderRadius` | `String` | `"5px"` | Option border radius. |
30
+ | `margin` | `String` | `"0 15px 15px 0"` | Option margin. |
31
+ | `padding` | `String` | `"10px"` | Option padding. |
32
+ | `selectorTop` | `String` | `"5px"` | Position of the checkmark indicator (top). |
33
+ | `selectorLeft` | `String` | `"5px"` | Position of the checkmark indicator (left). |
34
+ | `selectorColor` | `String` | `""` | Checkmark color. |
35
+ | `iconSize` | `String` | `"inherit"` | Option icon size. |
36
+ | `options` | `Array` | `[]` | Option objects see shape below. |
37
+ | `isInline` | `Boolean` | `false` | Inline (row) layout. |
38
+ | `optionClass` | `String` | `""` | Class for each option wrapper. |
39
+ | `labelBorder` | `String` | `"1px solid transparent"` | Option border. |
40
+
41
+ **Option shape**: `{ val, label?, img_src?, icon?, iconComponent?, icon_ctnr_class?, class? }`
42
+
43
+ ## Events
44
+
45
+ | Event | Payload | Description |
46
+ | --- | --- | --- |
47
+ | `update:modelValue` | `value` | v-model sync. |
48
+
49
+ ## Slots
50
+
51
+ | Name | Scope | Description |
52
+ | --- | --- | --- |
53
+ | `icon_image` | `option` | Custom image/icon for each option. |
54
+ | `label` | `option` | Custom label rendering. |
55
+ | `label-{val}` | | Custom label for a specific option by `val`. |
@@ -1,74 +1,66 @@
1
- # AbInputField — AI Reference
2
-
3
- Core text input with built-in VeeValidate integration, localized feedback, and prefix/postfix/hint slots. Use this for single-line text inputs; use `AbField` if you want a polymorphic field that can render selects, toggles, etc.
4
-
5
- ## Installation
6
-
7
- Globally registered by the plugin. Peer dependencies: `vee-validate`, `@vee-validate/rules`.
8
-
9
- ## Usage
10
-
11
- ```vue
12
- <template>
13
- <ab-input-field
14
- v-model="form.email"
15
- name="email"
16
- label="Email"
17
- placeholder="you@example.com"
18
- rules="required|email"
19
- hints="We'll never share your email."
20
- >
21
- <template #prefix><i class="bi bi-envelope"></i></template>
22
- </ab-input-field>
23
- </template>
24
-
25
- <script setup>
26
- import { reactive } from 'vue';
27
- const form = reactive({ email: '' });
28
- </script>
29
- ```
30
-
31
- ## Props
32
-
33
- | Name | Type | Default | Description |
34
- | --- | --- | --- | --- |
35
- | `modelValue` | `any` | `null` | Two-way-bound value. |
36
- | `label` | `String` | `""` | Field label. |
37
- | `placeholder` | `String` | `""` | Input placeholder. |
38
- | `type` | `String` | `"text"` | Native input type (`text`, `email`, `password`, `number`, `tel`, …). |
39
- | `name` | `String` | **required** | VeeValidate field name. |
40
- | `isCodeInput` | `Boolean` | `false` | Applies monospace / code-input styling. |
41
- | `rules` | `String \| Object` | `""` | VeeValidate rules. |
42
- | `containerClass` | `String` | `"mb-3"` | Class on the wrapper `<div>`. |
43
- | `hints` | `String` | `""` | Helper text beneath the input. |
44
- | `prefix` | `String` | `""` | Prefix text/icon (shortcut for `#prefix` slot). |
45
- | `postfix` | `String` | `""` | Postfix text/icon. |
46
- | `maxlength` | `any` | `null` | Native `maxlength`. |
47
- | `isLeftIconBorder` | `Boolean` | `false` | Renders border between the prefix icon and the input. |
48
- | `isRightIconBorder` | `Boolean` | `false` | Renders border between the postfix icon and the input. |
49
- | `isHideLabel` | `Boolean` | `false` | Hide the label visually. |
50
- | `iconPosition` | `String` | `"right"` | Position of the custom `#icon` slot (`"left"`, `"right"`). |
51
-
52
- ## Events
53
-
54
- | Event | Payload | Description |
55
- | --- | --- | --- |
56
- | `update:modelValue` | `value` | v-model sync. |
57
- | `input` | `value` | Fired on input. |
58
- | `keyup` | `KeyboardEvent` | Forwarded native event. |
59
- | `keydown` | `KeyboardEvent` | Forwarded native event. |
60
- | `paste` | `ClipboardEvent` | Forwarded native event. |
61
-
62
- ## Slots
63
-
64
- | Name | Description |
65
- | --- | --- |
66
- | `label` | Custom label content. |
67
- | `prefix` | Prefix icon / text. |
68
- | `icon` | Custom icon inside the input field. |
69
- | `postfix` | Postfix icon / text. |
70
- | `hints` | Helper text (overrides `hints` prop). |
71
-
72
- ## v-model
73
-
74
- Yes — `modelValue` + `update:modelValue`.
1
+ # AbInputField — AI Reference
2
+
3
+ Core text input with VeeValidate integration, localized feedback, and prefix/postfix/hint slots. Use for single-line text inputs; use `AbField` for a polymorphic field that can render selects, toggles, etc.
4
+
5
+ ## Usage
6
+
7
+ ```vue
8
+ <template>
9
+ <ab-input-field
10
+ v-model="form.email"
11
+ name="email"
12
+ label="Email"
13
+ placeholder="you@example.com"
14
+ rules="required|email"
15
+ hints="We'll never share your email."
16
+ >
17
+ <template #prefix><i class="bi bi-envelope"></i></template>
18
+ </ab-input-field>
19
+ </template>
20
+
21
+ <script setup>
22
+ import { reactive } from 'vue';
23
+ const form = reactive({ email: '' });
24
+ </script>
25
+ ```
26
+
27
+ ## Props
28
+
29
+ | Name | Type | Default | Description |
30
+ | --- | --- | --- | --- |
31
+ | `modelValue` | `any` | `null` | Two-way-bound value. |
32
+ | `label` | `String` | `""` | Field label. |
33
+ | `placeholder` | `String` | `""` | Input placeholder. |
34
+ | `type` | `String` | `"text"` | Native input type (`text`, `email`, `password`, `number`, `tel`, …). |
35
+ | `name` | `String` | **required** | VeeValidate field name. |
36
+ | `isCodeInput` | `Boolean` | `false` | Applies monospace / code-input styling. |
37
+ | `rules` | `String \| Object` | `""` | VeeValidate rules. |
38
+ | `containerClass` | `String` | `"mb-3"` | Class on the wrapper `<div>`. |
39
+ | `hints` | `String` | `""` | Helper text beneath the input. |
40
+ | `prefix` | `String` | `""` | Prefix text/icon (shortcut for `#prefix` slot). |
41
+ | `postfix` | `String` | `""` | Postfix text/icon. |
42
+ | `maxlength` | `any` | `null` | Native `maxlength`. |
43
+ | `isLeftIconBorder` | `Boolean` | `false` | Renders border between the prefix icon and the input. |
44
+ | `isRightIconBorder` | `Boolean` | `false` | Renders border between the postfix icon and the input. |
45
+ | `isHideLabel` | `Boolean` | `false` | Hide the label visually. |
46
+ | `iconPosition` | `String` | `"right"` | Position of the custom `#icon` slot (`"left"`, `"right"`). |
47
+
48
+ ## Events
49
+
50
+ | Event | Payload | Description |
51
+ | --- | --- | --- |
52
+ | `update:modelValue` | `value` | v-model sync. |
53
+ | `input` | `value` | Fired on input. |
54
+ | `keyup` | `KeyboardEvent` | Forwarded native event. |
55
+ | `keydown` | `KeyboardEvent` | Forwarded native event. |
56
+ | `paste` | `ClipboardEvent` | Forwarded native event. |
57
+
58
+ ## Slots
59
+
60
+ | Name | Description |
61
+ | --- | --- |
62
+ | `label` | Custom label content. |
63
+ | `prefix` | Prefix icon / text. |
64
+ | `icon` | Custom icon inside the input field. |
65
+ | `postfix` | Postfix icon / text. |
66
+ | `hints` | Helper text (overrides `hints` prop). |
@@ -1,76 +1,56 @@
1
- # AbInputTag — AI Reference
2
-
3
- Multi-tag input — lets users enter and manage a list of tags. Optionally supports an `options` array for autocomplete-style selection.
4
-
5
- ## Installation
6
-
7
- Globally registered by the plugin.
8
-
9
- ## Usage
10
-
11
- ```vue
12
- <template>
13
- <ab-input-tag
14
- v-model="tags"
15
- name="tags"
16
- label="Tags"
17
- placeholder="Type and press Enter"
18
- :max="10"
19
- hints="Up to 10 tags"
20
- />
21
-
22
- <!-- With preset options -->
23
- <ab-input-tag
24
- v-model="skills"
25
- name="skills"
26
- :options="['Vue', 'React', 'Angular', 'Svelte']"
27
- />
28
- </template>
29
-
30
- <script setup>
31
- import { ref } from 'vue';
32
- const tags = ref([]);
33
- const skills = ref([]);
34
- </script>
35
- ```
36
-
37
- ## Props
38
-
39
- | Name | Type | Default | Description |
40
- | --- | --- | --- | --- |
41
- | `modelValue` | `Array` | `[]` | v-model array of selected tags. |
42
- | `options` | `Array` | `[]` | Each entry: `{ val, title }` or a plain string. |
43
- | `label` | `String` | `""` | Field label. |
44
- | `size` | `String` | `"md"` | Adjusts component size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
45
- | `placeholder` | `String` | `""` | Placeholder text. |
46
- | `name` | `String` | **required** | VeeValidate field name. |
47
- | `rules` | `String \| Object` | `""` | VeeValidate rules. |
48
- | `containerClass` | `String` | `"mb-3"` | Wrapper class. |
49
- | `hints` | `String` | `""` | Helper text. |
50
- | `prefix` | `String` | `""` | Prefix icon/text. |
51
- | `postfix` | `String` | `""` | Postfix icon/text. |
52
- | `max` | `Number` | `0` | Max number of tags (0 = unlimited). |
53
- | `isLeftIconBorder` | `Boolean` | `false` | Border on prefix icon. |
54
- | `isRightIconBorder` | `Boolean` | `false` | Border on postfix icon. |
55
- | `isHideLabel` | `Boolean` | `false` | Hide the label visually. |
56
- | `iconPosition` | `String` | `"right"` | Position of the custom `#icon` slot (`"left"`, `"right"`). |
57
-
58
- ## Events
59
-
60
- | Event | Payload | Description |
61
- | --- | --- | --- |
62
- | `update:modelValue` | `Array` | v-model sync. |
63
-
64
- ## Slots
65
-
66
- | Name | Description |
67
- | --- | --- |
68
- | `label` | Custom label. |
69
- | `prefix` | Prefix icon/text. |
70
- | `icon` | Custom icon inside the input. |
71
- | `postfix` | Postfix icon/text. |
72
- | `hints` | Custom hints. |
73
-
74
- ## v-model
75
-
76
- Yes.
1
+ # AbInputTag — AI Reference
2
+
3
+ Multi-tag input — lets users enter and manage a list of tags. Optionally supports an `options` array for autocomplete-style selection.
4
+
5
+ ## Usage
6
+
7
+ ```vue
8
+ <template>
9
+ <ab-input-tag v-model="tags" name="tags" label="Tags" placeholder="Type and press Enter" :max="10" hints="Up to 10 tags" />
10
+
11
+ <ab-input-tag v-model="skills" name="skills" :options="['Vue', 'React', 'Angular', 'Svelte']" />
12
+ </template>
13
+
14
+ <script setup>
15
+ import { ref } from 'vue';
16
+ const tags = ref([]);
17
+ const skills = ref([]);
18
+ </script>
19
+ ```
20
+
21
+ ## Props
22
+
23
+ | Name | Type | Default | Description |
24
+ | --- | --- | --- | --- |
25
+ | `modelValue` | `Array` | `[]` | v-model array of selected tags. |
26
+ | `options` | `Array` | `[]` | Each entry: `{ val, title }` or a plain string. |
27
+ | `label` | `String` | `""` | Field label. |
28
+ | `size` | `String` | `"md"` | Adjusts component size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
29
+ | `placeholder` | `String` | `""` | Placeholder text. |
30
+ | `name` | `String` | **required** | VeeValidate field name. |
31
+ | `rules` | `String \| Object` | `""` | VeeValidate rules. |
32
+ | `containerClass` | `String` | `"mb-3"` | Wrapper class. |
33
+ | `hints` | `String` | `""` | Helper text. |
34
+ | `prefix` | `String` | `""` | Prefix icon/text. |
35
+ | `postfix` | `String` | `""` | Postfix icon/text. |
36
+ | `max` | `Number` | `0` | Max number of tags (0 = unlimited). |
37
+ | `isLeftIconBorder` | `Boolean` | `false` | Border on prefix icon. |
38
+ | `isRightIconBorder` | `Boolean` | `false` | Border on postfix icon. |
39
+ | `isHideLabel` | `Boolean` | `false` | Hide the label visually. |
40
+ | `iconPosition` | `String` | `"right"` | Position of the custom `#icon` slot (`"left"`, `"right"`). |
41
+
42
+ ## Events
43
+
44
+ | Event | Payload | Description |
45
+ | --- | --- | --- |
46
+ | `update:modelValue` | `Array` | v-model sync. |
47
+
48
+ ## Slots
49
+
50
+ | Name | Description |
51
+ | --- | --- |
52
+ | `label` | Custom label. |
53
+ | `prefix` | Prefix icon/text. |
54
+ | `icon` | Custom icon inside the input. |
55
+ | `postfix` | Postfix icon/text. |
56
+ | `hints` | Custom hints. |
@@ -1,35 +1,23 @@
1
- # AbKbd — AI Reference
2
-
3
- Styled `<kbd>`-like keyboard key chip. Compose multiple into a chord using `AbKbdGroup`.
4
-
5
- ## Installation
6
-
7
- Globally registered by the plugin.
8
-
9
- ## Usage
10
-
11
- ```vue
12
- <template>
13
- Press <ab-kbd>Esc</ab-kbd> to close.
14
-
15
- <ab-kbd-group>
16
- <ab-kbd>⌘</ab-kbd>
17
- <ab-kbd>Shift</ab-kbd>
18
- <ab-kbd>P</ab-kbd>
19
- </ab-kbd-group>
20
- </template>
21
- ```
22
-
23
- ## Props
24
-
25
- No declared props.
26
-
27
- ## Events
28
-
29
- None.
30
-
31
- ## Slots
32
-
33
- | Name | Description |
34
- | --- | --- |
35
- | `default` | Key label (typically a single character or short word). |
1
+ # AbKbd — AI Reference
2
+
3
+ Styled `<kbd>`-like keyboard key chip. Compose multiple into a chord using `AbKbdGroup`.
4
+
5
+ ## Usage
6
+
7
+ ```vue
8
+ <template>
9
+ Press <ab-kbd>Esc</ab-kbd> to close.
10
+
11
+ <ab-kbd-group>
12
+ <ab-kbd>⌘</ab-kbd>
13
+ <ab-kbd>Shift</ab-kbd>
14
+ <ab-kbd>P</ab-kbd>
15
+ </ab-kbd-group>
16
+ </template>
17
+ ```
18
+
19
+ ## Slots
20
+
21
+ | Name | Description |
22
+ | --- | --- |
23
+ | `default` | Key label (typically a single character or short word). |
@@ -1,33 +1,21 @@
1
- # AbKbdGroup — AI Reference
2
-
3
- Visual grouping container for multiple `AbKbd` chips — typically used to render keyboard chords / shortcuts.
4
-
5
- ## Installation
6
-
7
- Globally registered by the plugin.
8
-
9
- ## Usage
10
-
11
- ```vue
12
- <template>
13
- <ab-kbd-group>
14
- <ab-kbd>Ctrl</ab-kbd>
15
- <ab-kbd>Alt</ab-kbd>
16
- <ab-kbd>Del</ab-kbd>
17
- </ab-kbd-group>
18
- </template>
19
- ```
20
-
21
- ## Props
22
-
23
- No declared props.
24
-
25
- ## Events
26
-
27
- None.
28
-
29
- ## Slots
30
-
31
- | Name | Description |
32
- | --- | --- |
33
- | `default` | One or more `AbKbd` children. |
1
+ # AbKbdGroup — AI Reference
2
+
3
+ Visual grouping container for multiple `AbKbd` chips — renders keyboard chords / shortcuts.
4
+
5
+ ## Usage
6
+
7
+ ```vue
8
+ <template>
9
+ <ab-kbd-group>
10
+ <ab-kbd>Ctrl</ab-kbd>
11
+ <ab-kbd>Alt</ab-kbd>
12
+ <ab-kbd>Del</ab-kbd>
13
+ </ab-kbd-group>
14
+ </template>
15
+ ```
16
+
17
+ ## Slots
18
+
19
+ | Name | Description |
20
+ | --- | --- |
21
+ | `default` | One or more `AbKbd` children. |