@appsbd/vue3-appsbd-ui 1.0.1 → 1.0.3

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 (52) hide show
  1. package/.ai/ai_ref_AbAvatar.md +9 -1
  2. package/.ai/ai_ref_AbBadge.md +6 -5
  3. package/.ai/ai_ref_AbButton.md +8 -8
  4. package/.ai/ai_ref_AbCarousel.md +47 -47
  5. package/.ai/ai_ref_AbConfirmPopover.md +59 -59
  6. package/.ai/ai_ref_AbDarkModeToggler.md +42 -42
  7. package/.ai/ai_ref_AbEasyModal.md +62 -62
  8. package/.ai/ai_ref_AbFileUploader.md +63 -63
  9. package/.ai/ai_ref_AbFilterPanel.md +71 -71
  10. package/.ai/ai_ref_AbFormCheck.md +75 -75
  11. package/.ai/ai_ref_AbImageRadioInput.md +63 -63
  12. package/.ai/ai_ref_AbKbd.md +35 -35
  13. package/.ai/ai_ref_AbKbdGroup.md +33 -33
  14. package/.ai/ai_ref_AbModal.md +103 -103
  15. package/.ai/ai_ref_AbMultiSelect.md +1 -0
  16. package/.ai/ai_ref_AbNumberField.md +84 -84
  17. package/.ai/ai_ref_AbPopover.md +64 -64
  18. package/.ai/ai_ref_AbPricingCard.md +64 -64
  19. package/.ai/ai_ref_AbPricingContainer.md +49 -49
  20. package/.ai/ai_ref_AbPricingTable.md +72 -72
  21. package/.ai/ai_ref_AbProgressbar.md +44 -44
  22. package/.ai/ai_ref_AbScrollbar.md +48 -48
  23. package/.ai/ai_ref_AbSettingsForm.md +54 -54
  24. package/.ai/ai_ref_AbSideMenuItem.md +58 -58
  25. package/.ai/ai_ref_AbSidebar.md +70 -70
  26. package/.ai/ai_ref_AbSkeleton.md +41 -41
  27. package/.ai/ai_ref_AbSlider.md +71 -71
  28. package/.ai/ai_ref_AbTab.md +38 -38
  29. package/.ai/ai_ref_AbTable.md +59 -59
  30. package/.ai/ai_ref_AbTabs.md +47 -47
  31. package/.ai/ai_ref_AbToggle.md +65 -65
  32. package/.ai/ai_ref_AbTooltip.md +53 -53
  33. package/.ai/ai_ref_AbWizard.md +77 -77
  34. package/.ai/ai_ref_AbWizardStep.md +48 -48
  35. package/.ai/ai_ref_abEventBus.md +94 -0
  36. package/.ai/ai_ref_abRequestParam.md +55 -0
  37. package/.ai/ai_ref_abTranslate.md +33 -0
  38. package/.ai/ai_ref_abVeeRules.md +42 -0
  39. package/.ai/ai_ref_useAlert.md +63 -0
  40. package/.ai/ai_ref_useFileValidator.md +46 -0
  41. package/.ai/ai_ref_useResponsive.md +55 -0
  42. package/.ai/ai_ref_useTheme.md +39 -0
  43. package/.ai/ai_ref_useToast.md +42 -0
  44. package/AI_REFERENCE.md +160 -134
  45. package/design-system.md +403 -403
  46. package/dist/skins/red.scss +3 -3
  47. package/dist/skins/themes/_red.scss +6 -6
  48. package/dist/style.css +1 -1
  49. package/dist/vue3-appsbd-ui.cjs.js +58 -58
  50. package/dist/vue3-appsbd-ui.es.js +5449 -5342
  51. package/package.json +1 -1
  52. package/readme.md +136 -136
package/AI_REFERENCE.md CHANGED
@@ -31,13 +31,35 @@ import "bootstrap-icons/font/bootstrap-icons.css";
31
31
  const app = createApp(App);
32
32
 
33
33
  // 3. Register the UI plugin
34
- // This registers all Ab* components globally!
35
34
  app.use(AppsbdUI);
36
35
 
37
36
  app.mount("#app");
38
37
  ```
39
38
 
40
- All components are globally registered by the plugin, so use them directly in templates (e.g. `<ab-button>`) without importing them in `<script setup>`.
39
+ ### Globally Registered Components
40
+
41
+ The plugin **only** registers the following components globally (usable directly in templates without importing):
42
+
43
+ - `AbCard`
44
+ - `AbButton`
45
+ - `AbInputField`
46
+ - `AbNumberField`
47
+ - `AbField`
48
+ - `AbToggle`
49
+ - `AbMultiSelect`
50
+ - `AbFormCheck`
51
+ - `AbInputTag`
52
+ - `AbPopover`
53
+ - `AbModal`
54
+ - `AbDateTimePicker`
55
+ - `AbCustomField`
56
+ - `AbProgressBar`
57
+
58
+ All other `Ab*` components (e.g. `AbTabs`, `AbBadge`, `AbSlider`, `AbWizard`, etc.) are **not** globally registered and must be imported explicitly in `<script setup>` or `<script>`:
59
+
60
+ ```javascript
61
+ import { AbTabs, AbTab, AbBadge } from "vue3-appsbd-ui";
62
+ ```
41
63
 
42
64
  If you use `AbDateTimePicker`, also import `v-calendar/style.css` in the consuming app because that component relies on `v-calendar` styling.
43
65
 
@@ -48,52 +70,63 @@ To configure library-wide locale and formatting defaults, import and call `Appsb
48
70
 
49
71
  Each component also has a standalone reference under `.ai/` with installation, full props / events / slots docs, and a working usage snippet. **When generating code for a specific component, read that file first** - it is the preferred source when you can access repo files. If you cannot open `.ai/ai_ref_*.md`, use the API reference in this document as the authoritative fallback.
50
72
 
51
- | Component / API | Purpose | Reference |
52
- | :----------------------------- | :--------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------- |
53
- | `AppsbdUIConfigure` | Global UI Configuration API for locale and formatting defaults. | [.ai/ai_ref_global_config.md](./.ai/ai_ref_global_config.md) |
54
- | `AbButton` | Customizable push button with loader animation. | [.ai/ai_ref_AbButton.md](./.ai/ai_ref_AbButton.md) |
55
- | `AbCard` | Flexible card container; use CSS-class variants (e.g. `tile-card`, `item-card`, `insight-card`) for layout variations. | [.ai/ai_ref_AbCard.md](./.ai/ai_ref_AbCard.md) |
56
- | `AbModal` | Full-featured dialog with built-in VeeValidate form, loader, and message-only mode. | [.ai/ai_ref_AbModal.md](./.ai/ai_ref_AbModal.md) |
57
- | `AbEasyModal` | Lightweight modal wrapper that exposes `openModal` / `closeModal`. | [.ai/ai_ref_AbEasyModal.md](./.ai/ai_ref_AbEasyModal.md) |
58
- | `AbProgressbar` | Animated Bootstrap progress bar with color and size variants. | [.ai/ai_ref_AbProgressbar.md](./.ai/ai_ref_AbProgressbar.md) |
59
- | `AbInputField` | Core text input with VeeValidate, prefix/postfix/icon slots. | [.ai/ai_ref_AbInputField.md](./.ai/ai_ref_AbInputField.md) |
60
- | `AbNumberField` | Numeric input with increment/decrement buttons, min/max/step clamping, and VeeValidate integration. | [.ai/ai_ref_AbNumberField.md](./.ai/ai_ref_AbNumberField.md) |
61
- | `AbField` | Polymorphic field wrapper - renders any input type via a `type` prop. | [.ai/ai_ref_AbField.md](./.ai/ai_ref_AbField.md) |
62
- | `AbCustomField` | Dynamic form scaffold driven by a `fieldInputs` array. | [.ai/ai_ref_AbCustomField.md](./.ai/ai_ref_AbCustomField.md) |
63
- | `AbPinInput` | Segmented PIN / OTP entry field. | [.ai/ai_ref_AbPinInput.md](./.ai/ai_ref_AbPinInput.md) |
64
- | `AbDateTimePicker` | Date / time / range picker. | [.ai/ai_ref_AbDateTimePicker.md](./.ai/ai_ref_AbDateTimePicker.md) |
65
- | `AbAvatar` | Profile image (or file-upload avatar variant). | [.ai/ai_ref_AbAvatar.md](./.ai/ai_ref_AbAvatar.md) |
66
- | `AbTabs` | Tabbed interface container; supports router-link mode. | [.ai/ai_ref_AbTabs.md](./.ai/ai_ref_AbTabs.md) |
67
- | `AbTab` | Individual tab pane / link. | [.ai/ai_ref_AbTab.md](./.ai/ai_ref_AbTab.md) |
68
- | `AbFormCheck` / `AbRadioInput` | Checkbox / radio group (default, card, segmented, pill variants). `AbRadioInput` is an alias of `AbFormCheck`. | [.ai/ai_ref_AbFormCheck.md](./.ai/ai_ref_AbFormCheck.md) |
69
- | `AbImageRadioInput` | Image-based radio group for visual option pickers. | [.ai/ai_ref_AbImageRadioInput.md](./.ai/ai_ref_AbImageRadioInput.md) |
70
- | `AbToggle` | Accessible switch/toggle with title & description slots. | [.ai/ai_ref_AbToggle.md](./.ai/ai_ref_AbToggle.md) |
71
- | `AbInputTag` | Multi-tag input with optional option list. | [.ai/ai_ref_AbInputTag.md](./.ai/ai_ref_AbInputTag.md) |
72
- | `AbBadge` | Status / count label (Bootstrap badge utility). | [.ai/ai_ref_AbBadge.md](./.ai/ai_ref_AbBadge.md) |
73
- | `AbSidebar` | Collapsible sidebar navigation with optional search. | [.ai/ai_ref_AbSidebar.md](./.ai/ai_ref_AbSidebar.md) |
74
- | `AbSideMenuItem` | Sidebar nav item (router-link, anchor, submenu parent, or section title). | [.ai/ai_ref_AbSideMenuItem.md](./.ai/ai_ref_AbSideMenuItem.md) |
75
- | `AbSlider` | Single or range numeric slider. | [.ai/ai_ref_AbSlider.md](./.ai/ai_ref_AbSlider.md) |
76
- | `AbMultiSelect` | Searchable single/multi/tag select (custom built-in ? replaces `@vueform/multiselect`). | [.ai/ai_ref_AbMultiSelect.md](./.ai/ai_ref_AbMultiSelect.md) |
77
- | `AbColorPicker` | Radio-style color swatch picker. | [.ai/ai_ref_AbColorPicker.md](./.ai/ai_ref_AbColorPicker.md) |
78
- | `AbFileUploader` | File upload field with drag-and-drop and size validation. | [.ai/ai_ref_AbFileUploader.md](./.ai/ai_ref_AbFileUploader.md) |
79
- | `AbFilterPanel` | Advanced filter panel with search and scan modes. | [.ai/ai_ref_AbFilterPanel.md](./.ai/ai_ref_AbFilterPanel.md) |
80
- | `AbSettingsForm` | Settings-style form that auto-registers as a wizard step validator. | [.ai/ai_ref_AbSettingsForm.md](./.ai/ai_ref_AbSettingsForm.md) |
81
- | `AbScrollbar` | Styled custom scrollbar wrapper with scroll events. | [.ai/ai_ref_AbScrollbar.md](./.ai/ai_ref_AbScrollbar.md) |
82
- | `AbTooltip` | Programmatic tooltip component (complements the `v-tooltip` directive). | [.ai/ai_ref_AbTooltip.md](./.ai/ai_ref_AbTooltip.md) |
83
- | `AbPopover` | Dependency-free interactive popover with click/hover/focus triggers. | [.ai/ai_ref_AbPopover.md](./.ai/ai_ref_AbPopover.md) |
84
- | `AbConfirmPopover` | Confirmation popover with async `onConfirm` and built-in loader. | [.ai/ai_ref_AbConfirmPopover.md](./.ai/ai_ref_AbConfirmPopover.md) |
85
- | `AbTable` | Data grid with header/cell/empty slots. | [.ai/ai_ref_AbTable.md](./.ai/ai_ref_AbTable.md) |
86
- | `AbSkeleton` | Loading state placeholder. | [.ai/ai_ref_AbSkeleton.md](./.ai/ai_ref_AbSkeleton.md) |
87
- | `AbKbd` | Single keyboard key chip. | [.ai/ai_ref_AbKbd.md](./.ai/ai_ref_AbKbd.md) |
88
- | `AbKbdGroup` | Group container for multiple `AbKbd` chips. | [.ai/ai_ref_AbKbdGroup.md](./.ai/ai_ref_AbKbdGroup.md) |
89
- | `AbCarousel` | Image / HTML rotating slider with edge-fade, autoplay, orientation. | [.ai/ai_ref_AbCarousel.md](./.ai/ai_ref_AbCarousel.md) |
90
- | `AbWizard` | Multi-step wizard container with orientation and variant styles. | [.ai/ai_ref_AbWizard.md](./.ai/ai_ref_AbWizard.md) |
91
- | `AbWizardStep` | Individual step inside `AbWizard`. | [.ai/ai_ref_AbWizardStep.md](./.ai/ai_ref_AbWizardStep.md) |
92
- | `AbPricingCard` | Single pricing tier card. | [.ai/ai_ref_AbPricingCard.md](./.ai/ai_ref_AbPricingCard.md) |
93
- | `AbPricingContainer` | Layout wrapper for pricing tables. | [.ai/ai_ref_AbPricingContainer.md](./.ai/ai_ref_AbPricingContainer.md) |
94
- | `AbPricingTable` | Stylized, responsive pricing table component with feature list and package columns. | [.ai/ai_ref_AbPricingTable.md](./.ai/ai_ref_AbPricingTable.md) |
95
- | `AbChart` | Flexible chart component powered by Apache ECharts. | [.ai/ai_ref_AbChart.md](./.ai/ai_ref_AbChart.md) |
96
- | `AbDarkModeToggler` | Light / dark theme toggle (pairs with `useTheme`). | [.ai/ai_ref_AbDarkModeToggler.md](./.ai/ai_ref_AbDarkModeToggler.md) |
73
+ | Component / API | Global | Purpose | Reference |
74
+ | :----------------------------- | :----: | :--------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------- |
75
+ | `AbButton` | ✅ | Customizable push button with loader animation. | [.ai/ai_ref_AbButton.md](./.ai/ai_ref_AbButton.md) |
76
+ | `AbCard` | ✅ | Flexible card container; use CSS-class variants (e.g. `tile-card`, `item-card`, `insight-card`) for layout variations. | [.ai/ai_ref_AbCard.md](./.ai/ai_ref_AbCard.md) |
77
+ | `AbModal` | ✅ | Full-featured dialog with built-in VeeValidate form, loader, and message-only mode. | [.ai/ai_ref_AbModal.md](./.ai/ai_ref_AbModal.md) |
78
+ | `AbProgressbar` | ✅ | Animated Bootstrap progress bar with color and size variants. | [.ai/ai_ref_AbProgressbar.md](./.ai/ai_ref_AbProgressbar.md) |
79
+ | `AbInputField` | ✅ | Core text input with VeeValidate, prefix/postfix/icon slots. | [.ai/ai_ref_AbInputField.md](./.ai/ai_ref_AbInputField.md) |
80
+ | `AbNumberField` | ✅ | Numeric input with increment/decrement buttons, min/max/step clamping, and VeeValidate integration. | [.ai/ai_ref_AbNumberField.md](./.ai/ai_ref_AbNumberField.md) |
81
+ | `AbField` | ✅ | Polymorphic field wrapper - renders any input type via a `type` prop. | [.ai/ai_ref_AbField.md](./.ai/ai_ref_AbField.md) |
82
+ | `AbCustomField` | ✅ | Dynamic form scaffold driven by a `fieldInputs` array. | [.ai/ai_ref_AbCustomField.md](./.ai/ai_ref_AbCustomField.md) |
83
+ | `AbDateTimePicker` | ✅ | Date / time / range picker. | [.ai/ai_ref_AbDateTimePicker.md](./.ai/ai_ref_AbDateTimePicker.md) |
84
+ | `AbFormCheck` / `AbRadioInput` | ✅ | Checkbox / radio group (default, card, segmented, pill variants). `AbRadioInput` is an alias of `AbFormCheck`. | [.ai/ai_ref_AbFormCheck.md](./.ai/ai_ref_AbFormCheck.md) |
85
+ | `AbToggle` | ✅ | Accessible switch/toggle with title & description slots. | [.ai/ai_ref_AbToggle.md](./.ai/ai_ref_AbToggle.md) |
86
+ | `AbInputTag` | ✅ | Multi-tag input with optional option list. | [.ai/ai_ref_AbInputTag.md](./.ai/ai_ref_AbInputTag.md) |
87
+ | `AbMultiSelect` | ✅ | Searchable single/multi/tag select (custom built-in — replaces `@vueform/multiselect`). | [.ai/ai_ref_AbMultiSelect.md](./.ai/ai_ref_AbMultiSelect.md) |
88
+ | `AbPopover` | ✅ | Dependency-free interactive popover with click/hover/focus triggers. | [.ai/ai_ref_AbPopover.md](./.ai/ai_ref_AbPopover.md) |
89
+ | `AppsbdUIConfigure` | — | Global UI Configuration API for locale and formatting defaults. | [.ai/ai_ref_global_config.md](./.ai/ai_ref_global_config.md) |
90
+ | `AbEasyModal` | — | Lightweight modal wrapper that exposes `openModal` / `closeModal`. | [.ai/ai_ref_AbEasyModal.md](./.ai/ai_ref_AbEasyModal.md) |
91
+ | `AbPinInput` | — | Segmented PIN / OTP entry field. | [.ai/ai_ref_AbPinInput.md](./.ai/ai_ref_AbPinInput.md) |
92
+ | `AbAvatar` | — | Profile image (or file-upload avatar variant). | [.ai/ai_ref_AbAvatar.md](./.ai/ai_ref_AbAvatar.md) |
93
+ | `AbTabs` | — | Tabbed interface container; supports router-link mode. | [.ai/ai_ref_AbTabs.md](./.ai/ai_ref_AbTabs.md) |
94
+ | `AbTab` | — | Individual tab pane / link. | [.ai/ai_ref_AbTab.md](./.ai/ai_ref_AbTab.md) |
95
+ | `AbImageRadioInput` | — | Image-based radio group for visual option pickers. | [.ai/ai_ref_AbImageRadioInput.md](./.ai/ai_ref_AbImageRadioInput.md) |
96
+ | `AbBadge` | — | Status / count label (Bootstrap badge utility). | [.ai/ai_ref_AbBadge.md](./.ai/ai_ref_AbBadge.md) |
97
+ | `AbSidebar` | — | Collapsible sidebar navigation with optional search. | [.ai/ai_ref_AbSidebar.md](./.ai/ai_ref_AbSidebar.md) |
98
+ | `AbSideMenuItem` | — | Sidebar nav item (router-link, anchor, submenu parent, or section title). | [.ai/ai_ref_AbSideMenuItem.md](./.ai/ai_ref_AbSideMenuItem.md) |
99
+ | `AbSlider` | — | Single or range numeric slider. | [.ai/ai_ref_AbSlider.md](./.ai/ai_ref_AbSlider.md) |
100
+ | `AbColorPicker` | — | Radio-style color swatch picker. | [.ai/ai_ref_AbColorPicker.md](./.ai/ai_ref_AbColorPicker.md) |
101
+ | `AbFileUploader` | — | File upload field with drag-and-drop and size validation. | [.ai/ai_ref_AbFileUploader.md](./.ai/ai_ref_AbFileUploader.md) |
102
+ | `AbFilterPanel` | — | Advanced filter panel with search and scan modes. | [.ai/ai_ref_AbFilterPanel.md](./.ai/ai_ref_AbFilterPanel.md) |
103
+ | `AbSettingsForm` | — | Settings-style form that auto-registers as a wizard step validator. | [.ai/ai_ref_AbSettingsForm.md](./.ai/ai_ref_AbSettingsForm.md) |
104
+ | `AbScrollbar` | — | Styled custom scrollbar wrapper with scroll events. | [.ai/ai_ref_AbScrollbar.md](./.ai/ai_ref_AbScrollbar.md) |
105
+ | `AbTooltip` | — | Programmatic tooltip component (complements the `v-tooltip` directive). | [.ai/ai_ref_AbTooltip.md](./.ai/ai_ref_AbTooltip.md) |
106
+ | `AbConfirmPopover` | — | Confirmation popover with async `onConfirm` and built-in loader. | [.ai/ai_ref_AbConfirmPopover.md](./.ai/ai_ref_AbConfirmPopover.md) |
107
+ | `AbTable` | — | Data grid with header/cell/empty slots. | [.ai/ai_ref_AbTable.md](./.ai/ai_ref_AbTable.md) |
108
+ | `AbSkeleton` | — | Loading state placeholder. | [.ai/ai_ref_AbSkeleton.md](./.ai/ai_ref_AbSkeleton.md) |
109
+ | `AbKbd` | — | Single keyboard key chip. | [.ai/ai_ref_AbKbd.md](./.ai/ai_ref_AbKbd.md) |
110
+ | `AbKbdGroup` | — | Group container for multiple `AbKbd` chips. | [.ai/ai_ref_AbKbdGroup.md](./.ai/ai_ref_AbKbdGroup.md) |
111
+ | `AbCarousel` | — | Image / HTML rotating slider with edge-fade, autoplay, orientation. | [.ai/ai_ref_AbCarousel.md](./.ai/ai_ref_AbCarousel.md) |
112
+ | `AbWizard` | — | Multi-step wizard container with orientation and variant styles. | [.ai/ai_ref_AbWizard.md](./.ai/ai_ref_AbWizard.md) |
113
+ | `AbWizardStep` | — | Individual step inside `AbWizard`. | [.ai/ai_ref_AbWizardStep.md](./.ai/ai_ref_AbWizardStep.md) |
114
+ | `AbPricingCard` | — | Single pricing tier card. | [.ai/ai_ref_AbPricingCard.md](./.ai/ai_ref_AbPricingCard.md) |
115
+ | `AbPricingContainer` | — | Layout wrapper for pricing tables. | [.ai/ai_ref_AbPricingContainer.md](./.ai/ai_ref_AbPricingContainer.md) |
116
+ | `AbPricingTable` | — | Stylized, responsive pricing table component with feature list and package columns. | [.ai/ai_ref_AbPricingTable.md](./.ai/ai_ref_AbPricingTable.md) |
117
+ | `AbChart` | — | Flexible chart component powered by Apache ECharts. | [.ai/ai_ref_AbChart.md](./.ai/ai_ref_AbChart.md) |
118
+ | `AbDarkModeToggler` | — | Light / dark theme toggle (pairs with `useTheme`). | [.ai/ai_ref_AbDarkModeToggler.md](./.ai/ai_ref_AbDarkModeToggler.md) |
119
+ | `useAlert` | — | Procedural API to trigger SweetAlert-based modal alerts, notifications, and confirmations. | [.ai/ai_ref_useAlert.md](./.ai/ai_ref_useAlert.md) |
120
+ | `abEventBus` / `emitterObj` | — | Lightweight global event bus using `tiny-emitter`. | [.ai/ai_ref_abEventBus.md](./.ai/ai_ref_abEventBus.md) |
121
+ | `useTheme` | — | Composable for light/dark theme toggling with localStorage and system preference sync. | [.ai/ai_ref_useTheme.md](./.ai/ai_ref_useTheme.md) |
122
+ | `useToast` | — | Procedural API to spawn toast notifications (success, error, warning, info). | [.ai/ai_ref_useToast.md](./.ai/ai_ref_useToast.md) |
123
+ | `useFileValidator` | — | File validation utilities (size, MIME type) and file icon/image resolvers. | [.ai/ai_ref_useFileValidator.md](./.ai/ai_ref_useFileValidator.md) |
124
+ | `useResponsive` | — | Real-time viewport width tracker for responsive layout decisions (Bootstrap 5 aligned). | [.ai/ai_ref_useResponsive.md](./.ai/ai_ref_useResponsive.md) |
125
+ | `abTranslate` | — | Localization utility wrapping `vue3-gettext` with automatic variable interpolation. | [.ai/ai_ref_abTranslate.md](./.ai/ai_ref_abTranslate.md) |
126
+ | `abVeeRules` | — | Collection of pre-configured VeeValidate validation rules integrated with localization. | [.ai/ai_ref_abVeeRules.md](./.ai/ai_ref_abVeeRules.md) |
127
+ | `abRequestParam` | — | Data-transfer classes to build structured API request parameters (pagination, sorting, filtering). | [.ai/ai_ref_abRequestParam.md](./.ai/ai_ref_abRequestParam.md) |
128
+
129
+ > **Note**: Components marked ✅ in the **Global** column are auto-registered by `app.use(AppsbdUI)` and can be used directly in templates. All others require explicit `import { ComponentName } from 'vue3-appsbd-ui'`.
97
130
 
98
131
  ## 3. Full Component API Reference
99
132
 
@@ -105,31 +138,31 @@ Global configuration setter for library-wide tokens.
105
138
 
106
139
  **Options**
107
140
 
108
- | Name | Type | Default |
109
- | ----------------- | ----------------- | ---------------------- |
110
- | `monthNames` | `String[]` | English full names |
111
- | `monthNamesShort` | `String[]` | English short names |
112
- | `dayNames` | `String[]` | English 3-letter names |
113
- | `formatDigit` | `Function` | `(val) => String(val)` |
114
- | `rangeSeparator` | `String` | `' ↔ '` |
115
- | `is24Hour` | `Boolean` | `false` |
116
- | `dateDataFormat` | `String` | `'YYYY-MM-DD'` |
117
- | `dateDisplayFormat`| `String` | `'YYYY-MM-DD'` |
118
- | `datetimeDataFormat`| `String` | `'YYYY-MM-DD HH:mm'` |
119
- | `datetimeDisplayFormat`| `String` | `'YYYY-MM-DD HH:mm'` |
120
- | `timeDataFormat` | `String` | `'HH:mm'` |
121
- | `timeDisplayFormat`| `String` | `'HH:mm'` |
122
- | `inputContainerClass`| `String` | `'mb-3'` |
123
- | `toastPosition` | `String` | `'top-right'` |
124
- | `toastDesign` | `String` | `'default'` |
125
- | `toastTimeout` | `Number` | `5000` |
126
- | `toastCloseButton`| `Boolean` | `true` |
127
- | `toastPauseOnHover`| `Boolean` | `true` |
128
- | `toastPauseOnFocusLoss`| `Boolean` | `true` |
129
- | `toastShowProgress`| `Boolean` | `true` |
130
- | `trueValue` | `any` | `'Y'` |
131
- | `falseValue` | `any` | `'N'` |
132
- | `size` | `String` | `'md'` |
141
+ | Name | Type | Default |
142
+ | ----------------------- | ---------- | ---------------------- |
143
+ | `monthNames` | `String[]` | English full names |
144
+ | `monthNamesShort` | `String[]` | English short names |
145
+ | `dayNames` | `String[]` | English 3-letter names |
146
+ | `formatDigit` | `Function` | `(val) => String(val)` |
147
+ | `rangeSeparator` | `String` | `' ↔ '` |
148
+ | `is24Hour` | `Boolean` | `false` |
149
+ | `dateDataFormat` | `String` | `'YYYY-MM-DD'` |
150
+ | `dateDisplayFormat` | `String` | `'YYYY-MM-DD'` |
151
+ | `datetimeDataFormat` | `String` | `'YYYY-MM-DD HH:mm'` |
152
+ | `datetimeDisplayFormat` | `String` | `'YYYY-MM-DD HH:mm'` |
153
+ | `timeDataFormat` | `String` | `'HH:mm'` |
154
+ | `timeDisplayFormat` | `String` | `'HH:mm'` |
155
+ | `inputContainerClass` | `String` | `'mb-3'` |
156
+ | `toastPosition` | `String` | `'top-right'` |
157
+ | `toastDesign` | `String` | `'default'` |
158
+ | `toastTimeout` | `Number` | `5000` |
159
+ | `toastCloseButton` | `Boolean` | `true` |
160
+ | `toastPauseOnHover` | `Boolean` | `true` |
161
+ | `toastPauseOnFocusLoss` | `Boolean` | `true` |
162
+ | `toastShowProgress` | `Boolean` | `true` |
163
+ | `trueValue` | `any` | `'Y'` |
164
+ | `falseValue` | `any` | `'N'` |
165
+ | `size` | `String` | `'md'` |
133
166
 
134
167
  ---
135
168
 
@@ -140,19 +173,13 @@ Global configuration setter for library-wide tokens.
140
173
  | Name | Type | Default | Notes |
141
174
  | --------------------- | ------- | ----------- | ------------------------------------------------------- |
142
175
  | `type` | String | `"button"` | Native button type. |
143
- | `variant` | String | `"primary"` | Color variant (`primary`, `secondary`, `danger`, etc.). |
176
+ | `color` | String | `"primary"` | Color variant (`primary`, `secondary`, `danger`, etc.). |
144
177
  | `size` | String | `"md"` | Button size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
145
- | `isOutline` | Boolean | `false` | Applies the outline style for the selected variant. |
178
+ | `isOutline` | Boolean | `false` | Applies the outline style for the selected color. |
146
179
  | `isIconBtn` | Boolean | `false` | Adjusts formatting for a button with only an icon. |
147
180
  | `isAnimated` | Boolean | `false` | Shows built-in loader animation. |
148
181
  | `isHideTextOnAnimate` | Boolean | `false` | Hides slot text while animated. |
149
182
  | `showIconDivider` | Boolean | `false` | Renders divider between `#icon` and label. |
150
- | Name | Type | Default | Notes |
151
- | --------------------- | ------- | ---------- | ------------------------------------------ |
152
- | `type` | String | `"button"` | Native button type. |
153
- | `isAnimated` | Boolean | `false` | Shows built-in loader animation. |
154
- | `isHideTextOnAnimate` | Boolean | `false` | Hides slot text while animated. |
155
- | `showIconDivider` | Boolean | `false` | Renders divider between `#icon` and label. |
156
183
 
157
184
  **Slots**
158
185
 
@@ -160,7 +187,7 @@ Global configuration setter for library-wide tokens.
160
187
  - `icon` ? leading icon element.
161
188
  - `svg` ? replaces the built-in loader SVG when `isAnimated` is true.
162
189
 
163
- **Notes** ? Variant and size are controlled via props (`variant`, `size`).
190
+ **Notes** ? Color and size are controlled via props (`color`, `size`).
164
191
 
165
192
  ---
166
193
 
@@ -168,17 +195,17 @@ Global configuration setter for library-wide tokens.
168
195
 
169
196
  **Props**
170
197
 
171
- | Name | Type | Default | Notes |
172
- | --- | --- | --- | --- |
173
- | `containerClass` | String | `undefined` | Classes to append directly to the root card container. |
174
- | `headerClass` | String | `""` | Classes for the header section. |
175
- | `bodyClass` | String | `""` | Classes for the body section. |
176
- | `footerClass` | String | `""` | Classes for the footer section. |
177
- | `isBorderCard` | Boolean | `true` | Whether to display the default card border. |
178
- | `bgColorVariant` | String | `""` | Bootstrap color variant for background (`primary`, `success`, etc.). |
179
- | `borderBottomVariant` | String | `""` | Adds a colored bottom border with the specified variant. |
180
- | `isTileCard` | Boolean | `false` | Applies the `.tile-card` layout styles. |
181
- | `variation` | String | `""` | Generic variation class to append to the root. |
198
+ | Name | Type | Default | Notes |
199
+ | --------------------- | ------- | ----------- | -------------------------------------------------------------------- |
200
+ | `containerClass` | String | `undefined` | Classes to append directly to the root card container. |
201
+ | `headerClass` | String | `""` | Classes for the header section. |
202
+ | `bodyClass` | String | `""` | Classes for the body section. |
203
+ | `footerClass` | String | `""` | Classes for the footer section. |
204
+ | `isBorderCard` | Boolean | `true` | Whether to display the default card border. |
205
+ | `bgColorVariant` | String | `""` | Bootstrap color variant for background (`primary`, `success`, etc.). |
206
+ | `borderBottomVariant` | String | `""` | Adds a colored bottom border with the specified variant. |
207
+ | `isTileCard` | Boolean | `false` | Applies the `.tile-card` layout styles. |
208
+ | `variation` | String | `""` | Generic variation class to append to the root. |
182
209
 
183
210
  **Slots** — `header`, `body`, `footer`.
184
211
 
@@ -296,25 +323,25 @@ Numeric input with built-in minus/plus buttons, min/max clamping, custom step, a
296
323
 
297
324
  **Props**
298
325
 
299
- | Name | Type | Default | Notes |
300
- | ------------------- | --------------- | ---------- | ----------------------------------------------------------------------------- |
301
- | `modelValue` | any | `null` | v-model binding. |
302
- | `label` | String | `""` | |
303
- | `placeholder` | String | `""` | |
304
- | `name` | String | _required_ | VeeValidate field name. |
305
- | `rules` | String / Object | `""` | VeeValidate rules. |
306
- | `containerClass` | String | `"mb-3"` | |
307
- | `hints` | String | `""` | |
308
- | `prefix` | String | `""` | |
309
- | `postfix` | String | `""` | |
310
- | `min` | Number / String | `null` | Minimum allowed value; also clamps input and disables the minus button. |
311
- | `max` | Number / String | `null` | Maximum allowed value; also clamps input and disables the plus button. |
312
- | `step` | Number / String | `1` | Increment/decrement step amount. |
313
- | `showButtons` | Boolean | `true` | Show the minus/plus controls. |
314
- | `disabled` | Boolean | `false` | Disable the field and both buttons. |
315
- | `isBorder` | Boolean | `false` | Show inner borders between minus/input/plus (default renders as seamless). |
316
- | `isLeftIconBorder` | Boolean | `false` | Keep the left icon border (prefix) when used with a prefix slot. |
317
- | `isRightIconBorder` | Boolean | `false` | Keep the right icon border (postfix) when used with a postfix slot. |
326
+ | Name | Type | Default | Notes |
327
+ | ------------------- | --------------- | ---------- | -------------------------------------------------------------------------- |
328
+ | `modelValue` | any | `null` | v-model binding. |
329
+ | `label` | String | `""` | |
330
+ | `placeholder` | String | `""` | |
331
+ | `name` | String | _required_ | VeeValidate field name. |
332
+ | `rules` | String / Object | `""` | VeeValidate rules. |
333
+ | `containerClass` | String | `"mb-3"` | |
334
+ | `hints` | String | `""` | |
335
+ | `prefix` | String | `""` | |
336
+ | `postfix` | String | `""` | |
337
+ | `min` | Number / String | `null` | Minimum allowed value; also clamps input and disables the minus button. |
338
+ | `max` | Number / String | `null` | Maximum allowed value; also clamps input and disables the plus button. |
339
+ | `step` | Number / String | `1` | Increment/decrement step amount. |
340
+ | `showButtons` | Boolean | `true` | Show the minus/plus controls. |
341
+ | `disabled` | Boolean | `false` | Disable the field and both buttons. |
342
+ | `isBorder` | Boolean | `false` | Show inner borders between minus/input/plus (default renders as seamless). |
343
+ | `isLeftIconBorder` | Boolean | `false` | Keep the left icon border (prefix) when used with a prefix slot. |
344
+ | `isRightIconBorder` | Boolean | `false` | Keep the right icon border (postfix) when used with a postfix slot. |
318
345
 
319
346
  **Events** — `update:modelValue`, `input`, `keyup`, `keydown`, `paste`.
320
347
 
@@ -381,7 +408,7 @@ Dynamic form driven by a `fieldInputs` array where each entry declares `type` (`
381
408
  | Name | Type | Default |
382
409
  | ------------- | ------ | ------- |
383
410
  | `fieldInputs` | Array | `[]` |
384
- | `size` | String | `"sm"` |
411
+ | `size` | String | `"sm"` |
385
412
  | `customProps` | Object | `{}` |
386
413
 
387
414
  **Scoped slots** ? per-field id: `Label{id}`, `Hints{id}`, `Prefix{id}`, `Postfix{id}`, `Icon{id}`, `Description{id}`, `HelpText{id}`.
@@ -396,7 +423,7 @@ Dynamic form driven by a `fieldInputs` array where each entry declares `type` (`
396
423
  | --------------- | ------- | ------- |
397
424
  | `modelValue` | String | ? |
398
425
  | `length` | Number | `6` |
399
- | `size` | String | `"md"` |
426
+ | `size` | String | `"md"` |
400
427
  | `showSeparator` | Boolean | `false` |
401
428
  | `groupSize` | Number | `3` |
402
429
 
@@ -623,15 +650,15 @@ Option shape: `{ val, label?, img_src?, icon?, iconComponent?, icon_ctnr_class?,
623
650
  | Name | Type | Default | Notes |
624
651
  | --------------- | ------- | ----------- | ----- |
625
652
  | `size` | String | `"md"` | |
626
- | `variant` | String | `"primary"` | |
653
+ | `color` | String | `"primary"` | |
627
654
  | `isOutline` | Boolean | `false` | |
628
655
  | `isRoundedPill` | Boolean | `false` | |
629
656
  | `isDot` | Boolean | `false` | |
630
- | `isAvatar` | Boolean | `false` | |
631
657
  | `isClose` | Boolean | `false` | |
632
658
  | `isAdd` | Boolean | `false` | |
659
+ | `position` | String | `"right"` | |
633
660
 
634
- **Slots** ? `default` ? badge content.
661
+ **Slots** ? `default` ? badge content, `content` ? icon or image content placed via position.
635
662
 
636
663
  ---
637
664
 
@@ -735,7 +762,7 @@ Custom built-in replacement for `@vueform/multiselect`.
735
762
 
736
763
  **Events** ? `update:modelValue`, `clear`, `change(value)`, `select(value)`, `open`, `close`, `search-change(query)`.
737
764
 
738
- **Slots** ? `label`, `prefix`, `postfix`, `icon`, `singlelabel(value)`, `option({ option, isSelected })`, `noresults`, `option-loading`, `loader-icon`.
765
+ **Slots** ? `label`, `prefix`, `postfix`, `icon`, `singlelabel(value)`, `taglabel(value)`, `option({ option, isSelected })`, `noresults`, `option-loading`, `loader-icon`.
739
766
 
740
767
  **v-model** ? yes.
741
768
 
@@ -746,7 +773,7 @@ Custom built-in replacement for `@vueform/multiselect`.
746
773
  **Props**
747
774
 
748
775
  | Name | Type | Default |
749
- | -------------- | ------ | --------- |
776
+ | -------------- | ------ | --------- | ------------------------------------ |
750
777
  | `modelValue` | String | `""` |
751
778
  | `name` | String | `"color"` |
752
779
  | `colors` | Array | `[]` |
@@ -1049,9 +1076,9 @@ No declared props. `AbKbd` renders a single `<kbd>`-like chip; `AbKbdGroup` comp
1049
1076
 
1050
1077
  **Props**
1051
1078
 
1052
- | Name | Type | Default | Notes |
1053
- | ---- | ---- | ------- | ----- |
1054
- | `features` | Array | `**required**` | Array of feature definitions. Example: `{ key: "chat", title: "Chat support" }`. |
1079
+ | Name | Type | Default | Notes |
1080
+ | ---------- | ----- | -------------- | ------------------------------------------------------------------------------------------------------------- |
1081
+ | `features` | Array | `**required**` | Array of feature definitions. Example: `{ key: "chat", title: "Chat support" }`. |
1055
1082
  | `packages` | Array | `**required**` | Array of package configurations. Supports price, regularPrice, badge, features (Y/N map), and button options. |
1056
1083
 
1057
1084
  **Events** ? `select-package(packageObject)`.
@@ -1066,18 +1093,17 @@ No declared props. `AbKbd` renders a single `<kbd>`-like chip; `AbKbdGroup` comp
1066
1093
 
1067
1094
  **Props**
1068
1095
 
1069
- | Name | Type | Default | Notes |
1070
- | ------------ | ------ | ------------ | ------------------------------------------------------------------------------------------- |
1071
- | `option` | Object | `{}` | Full ECharts option object. Overrides other props if provided. |
1072
- | `chartType` | String | `""` | Simple chart type: `"line"`, `"bar"`, `"pie"`. |
1073
- | `xAxisData` | Array | `[]` | Categories for the X-axis (used for line/bar). |
1074
- | `seriesData` | Array | `[]` | Data points for the series. Use objects `{ value, name }` for Pie charts. |
1075
- | `xAxisType` | String | `"category"` | X-axis scale type. |
1076
- | `yAxisType` | String | `"value"` | Y-axis scale type. |
1077
- | `legendOrient` | String | `""` | Orientation of the chart legend (e.g., `"vertical"`, `"horizontal"`). |
1078
- | `showPointValues` | Boolean | `false` | If true, displays the value label on each data point in the chart. |
1079
- | `height` | String | `"400px"` | Height of the chart container (e.g., "300px", "50%"). |
1080
-
1096
+ | Name | Type | Default | Notes |
1097
+ | ----------------- | ------- | ------------ | ------------------------------------------------------------------------- |
1098
+ | `option` | Object | `{}` | Full ECharts option object. Overrides other props if provided. |
1099
+ | `chartType` | String | `""` | Simple chart type: `"line"`, `"bar"`, `"pie"`. |
1100
+ | `xAxisData` | Array | `[]` | Categories for the X-axis (used for line/bar). |
1101
+ | `seriesData` | Array | `[]` | Data points for the series. Use objects `{ value, name }` for Pie charts. |
1102
+ | `xAxisType` | String | `"category"` | X-axis scale type. |
1103
+ | `yAxisType` | String | `"value"` | Y-axis scale type. |
1104
+ | `legendOrient` | String | `""` | Orientation of the chart legend (e.g., `"vertical"`, `"horizontal"`). |
1105
+ | `showPointValues` | Boolean | `false` | If true, displays the value label on each data point in the chart. |
1106
+ | `height` | String | `"400px"` | Height of the chart container (e.g., "300px", "50%"). |
1081
1107
 
1082
1108
  **Slots** ? None.
1083
1109