@appsbd/vue3-appsbd-ui 1.0.2 → 1.0.4

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 (87) hide show
  1. package/.ai/ai_ref_AbAvatar.md +1 -11
  2. package/.ai/ai_ref_AbBadge.md +2 -11
  3. package/.ai/ai_ref_AbButton.md +4 -23
  4. package/.ai/ai_ref_AbCard.md +6 -25
  5. package/.ai/ai_ref_AbCarousel.md +1 -12
  6. package/.ai/ai_ref_AbChart.md +16 -57
  7. package/.ai/ai_ref_AbColorPicker.md +1 -14
  8. package/.ai/ai_ref_AbConfirmPopover.md +1 -6
  9. package/.ai/ai_ref_AbCustomField.md +1 -9
  10. package/.ai/ai_ref_AbDarkModeToggler.md +1 -10
  11. package/.ai/ai_ref_AbDateTimePicker.md +4 -38
  12. package/.ai/ai_ref_AbEasyModal.md +2 -8
  13. package/.ai/ai_ref_AbField.md +1 -9
  14. package/.ai/ai_ref_AbFileUploader.md +3 -19
  15. package/.ai/ai_ref_AbFilterPanel.md +0 -4
  16. package/.ai/ai_ref_AbFormCheck.md +2 -19
  17. package/.ai/ai_ref_AbImageRadioInput.md +1 -9
  18. package/.ai/ai_ref_AbInputField.md +1 -9
  19. package/.ai/ai_ref_AbInputTag.md +2 -22
  20. package/.ai/ai_ref_AbKbd.md +0 -12
  21. package/.ai/ai_ref_AbKbdGroup.md +1 -13
  22. package/.ai/ai_ref_AbModal.md +98 -103
  23. package/.ai/ai_ref_AbMultiSelect.md +3 -37
  24. package/.ai/ai_ref_AbNumberField.md +5 -30
  25. package/.ai/ai_ref_AbPinInput.md +1 -13
  26. package/.ai/ai_ref_AbPopover.md +2 -12
  27. package/.ai/ai_ref_AbPricingCard.md +0 -8
  28. package/.ai/ai_ref_AbPricingContainer.md +0 -8
  29. package/.ai/ai_ref_AbPricingTable.md +20 -36
  30. package/.ai/ai_ref_AbProgressbar.md +1 -11
  31. package/.ai/ai_ref_AbScrollbar.md +2 -12
  32. package/.ai/ai_ref_AbSettingsForm.md +1 -9
  33. package/.ai/ai_ref_AbSideMenuItem.md +1 -12
  34. package/.ai/ai_ref_AbSidebar.md +2 -10
  35. package/.ai/ai_ref_AbSkeleton.md +0 -18
  36. package/.ai/ai_ref_AbSlider.md +1 -20
  37. package/.ai/ai_ref_AbTab.md +0 -8
  38. package/.ai/ai_ref_AbTable.md +0 -10
  39. package/.ai/ai_ref_AbTabs.md +1 -11
  40. package/.ai/ai_ref_AbToggle.md +4 -23
  41. package/.ai/ai_ref_AbTooltip.md +1 -15
  42. package/.ai/ai_ref_AbWizard.md +7 -20
  43. package/.ai/ai_ref_AbWizardStep.md +1 -13
  44. package/.ai/ai_ref_abEventBus.md +66 -94
  45. package/.ai/ai_ref_abRequestParam.md +40 -55
  46. package/.ai/ai_ref_abTranslate.md +30 -15
  47. package/.ai/ai_ref_abVeeRules.md +33 -42
  48. package/.ai/ai_ref_global_config.md +7 -17
  49. package/.ai/ai_ref_useAlert.md +45 -63
  50. package/.ai/ai_ref_useFileValidator.md +31 -46
  51. package/.ai/ai_ref_useResponsive.md +41 -55
  52. package/.ai/ai_ref_useTheme.md +28 -39
  53. package/.ai/ai_ref_useToast.md +30 -42
  54. package/AI_REF.md +114 -0
  55. package/AI_REFERENCE.md +83 -1131
  56. package/dist/skins/black.css +1 -1
  57. package/dist/skins/cyan.css +1 -1
  58. package/dist/skins/default.css +1 -1
  59. package/dist/skins/gray.css +1 -1
  60. package/dist/skins/green.css +1 -1
  61. package/dist/skins/orange.css +1 -1
  62. package/dist/skins/pink.css +1 -1
  63. package/dist/skins/purple.css +1 -1
  64. package/dist/skins/red.css +1 -1
  65. package/dist/skins/themes/_blue.scss +35 -35
  66. package/dist/skins/themes/_common_variable.scss +101 -6
  67. package/dist/skins/themes/_cyan.scss +1 -1
  68. package/dist/skins/themes/_gray.scss +2 -1
  69. package/dist/skins/themes/_green.scss +1 -1
  70. package/dist/skins/themes/_grid.scss +4 -1
  71. package/dist/skins/themes/_orange.scss +1 -1
  72. package/dist/skins/themes/_pink.scss +1 -1
  73. package/dist/skins/themes/_purple.scss +1 -1
  74. package/dist/skins/themes/_red.scss +1 -1
  75. package/dist/skins/themes/_violet.scss +1 -1
  76. package/dist/skins/violet.css +1 -1
  77. package/dist/style.css +1 -1
  78. package/dist/vue3-appsbd-ui.cjs.js +93 -61
  79. package/dist/vue3-appsbd-ui.es.js +26647 -17054
  80. package/package.json +7 -1
  81. package/readme.md +59 -1
  82. package/scripts/postinstall.js +55 -0
  83. package/scripts/setup.js +16 -0
  84. package/scripts/skill-groups.js +38 -0
  85. package/skills/commands/generate-module.md +76 -0
  86. package/skills/commands/settings-form.md +175 -0
  87. package/skills/commands/use-appsbd-ui.md +40 -0
package/AI_REFERENCE.md CHANGED
@@ -1,1134 +1,86 @@
1
- # Appsbd UI Library - AI & Integration Reference
2
-
3
- **AI Assistant Instructions**:
4
- When this library (`vue3-appsbd-ui`) is used in another project and you are asked to generate code, reference this file to understand the components available and how they should be set up. Do not hallucinate external libraries for standard UI features - use these built-in components first. Every exported component, its props, emitted events, and slots are documented below so you can generate correct templates without guessing.
5
-
6
- **Quick Rules for AI**
7
-
8
- - Prefer built-in `Ab*` components before reaching for external UI libraries.
9
- - Use only the props, events, slots, exposed methods, provides, and injects documented here or in the matching `.ai/ai_ref_*.md` file.
10
- - Do not assume undeclared setup steps or extra dependencies.
11
- - If a component-specific `.ai` file is unavailable, use the API reference in this document as the fallback source of truth.
12
-
13
- **Required Peer Dependencies**
14
- This library currently declares the following peer dependencies in `package.json`: `vue`, `bootstrap`, `bootstrap-icons`, `vee-validate`, `@vee-validate/rules`, `vue-router`, `vue-toastification`, `vue3-gettext`, `lucide-vue-next`, `darkmode-js`, `tiny-emitter`, and `@appsbd/vue3-elite-grid`. Consumer apps should install the peers they need to satisfy the package contract.
15
-
16
- ## 1. Setup & Initialization
17
-
18
- In the consuming project's main entry file (e.g., `main.js` or `main.ts`):
19
-
20
- ```javascript
21
- import { createApp } from "vue";
22
- import App from "./App.vue";
23
-
24
- // 1. Import core UI plugin
25
- import AppsbdUI from "vue3-appsbd-ui";
26
-
27
- // 2. Import core styles and peer CSS used by your app
28
- import "vue3-appsbd-ui/dist/style.css";
29
- import "bootstrap-icons/font/bootstrap-icons.css";
30
-
31
- const app = createApp(App);
32
-
33
- // 3. Register the UI plugin
34
- // This registers all Ab* components globally!
35
- app.use(AppsbdUI);
36
-
37
- app.mount("#app");
1
+ # Appsbd UI Library - AI Reference
2
+
3
+ > Always read `.ai/ai_ref_[Name].md` for full props/events/slots before generating code for a component. Prefer `Ab*` components over external libraries.
4
+
5
+ **Peer deps**: `vue`, `bootstrap`, `bootstrap-icons`, `vee-validate`, `@vee-validate/rules`, `vue-router`, `vue-toastification`, `vue3-gettext`, `lucide-vue-next`, `darkmode-js`, `tiny-emitter`, `@appsbd/vue3-elite-grid`
6
+
7
+ ## Components & APIs
8
+
9
+ ✅ = globally registered via `app.use(AppsbdUI)` — all others require `import { X } from "vue3-appsbd-ui"`.
10
+
11
+ | Component / API | G | Purpose | Reference |
12
+ | :----------------------------- | :-: | :--------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------- |
13
+ | `AbButton` | ✅ | Customizable push button with loader animation. | [.ai/ai_ref_AbButton.md](./.ai/ai_ref_AbButton.md) |
14
+ | `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) |
15
+ | `AbModal` | ✅ | Full-featured dialog with built-in VeeValidate form, loader, and message-only mode. | [.ai/ai_ref_AbModal.md](./.ai/ai_ref_AbModal.md) |
16
+ | `AbProgressbar` | ✅ | Animated Bootstrap progress bar with color and size variants. | [.ai/ai_ref_AbProgressbar.md](./.ai/ai_ref_AbProgressbar.md) |
17
+ | `AbInputField` | ✅ | Core text input with VeeValidate, prefix/postfix/icon slots. | [.ai/ai_ref_AbInputField.md](./.ai/ai_ref_AbInputField.md) |
18
+ | `AbNumberField` | ✅ | Numeric input with increment/decrement buttons, min/max/step clamping, and VeeValidate integration. | [.ai/ai_ref_AbNumberField.md](./.ai/ai_ref_AbNumberField.md) |
19
+ | `AbField` | ✅ | Polymorphic field wrapper - renders any input type via a `type` prop. | [.ai/ai_ref_AbField.md](./.ai/ai_ref_AbField.md) |
20
+ | `AbCustomField` | ✅ | Dynamic form scaffold driven by a `fieldInputs` array. | [.ai/ai_ref_AbCustomField.md](./.ai/ai_ref_AbCustomField.md) |
21
+ | `AbDateTimePicker` | ✅ | Date / time / range picker. Also import `v-calendar/style.css` in consuming app. | [.ai/ai_ref_AbDateTimePicker.md](./.ai/ai_ref_AbDateTimePicker.md) |
22
+ | `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) |
23
+ | `AbToggle` | ✅ | Accessible switch/toggle with title & description slots. | [.ai/ai_ref_AbToggle.md](./.ai/ai_ref_AbToggle.md) |
24
+ | `AbInputTag` | ✅ | Multi-tag input with optional option list. | [.ai/ai_ref_AbInputTag.md](./.ai/ai_ref_AbInputTag.md) |
25
+ | `AbMultiSelect` | ✅ | Searchable single/multi/tag select (custom built-in — replaces `@vueform/multiselect`). | [.ai/ai_ref_AbMultiSelect.md](./.ai/ai_ref_AbMultiSelect.md) |
26
+ | `AbPopover` | ✅ | Dependency-free interactive popover with click/hover/focus triggers. | [.ai/ai_ref_AbPopover.md](./.ai/ai_ref_AbPopover.md) |
27
+ | `AppsbdUIConfigure` | — | Global UI Configuration API for locale and formatting defaults. | [.ai/ai_ref_global_config.md](./.ai/ai_ref_global_config.md) |
28
+ | `AbEasyModal` | — | Lightweight modal wrapper that exposes `openModal` / `closeModal`. | [.ai/ai_ref_AbEasyModal.md](./.ai/ai_ref_AbEasyModal.md) |
29
+ | `AbPinInput` | — | Segmented PIN / OTP entry field. | [.ai/ai_ref_AbPinInput.md](./.ai/ai_ref_AbPinInput.md) |
30
+ | `AbAvatar` | — | Profile image (or file-upload avatar variant). | [.ai/ai_ref_AbAvatar.md](./.ai/ai_ref_AbAvatar.md) |
31
+ | `AbTabs` | — | Tabbed interface container; supports router-link mode. | [.ai/ai_ref_AbTabs.md](./.ai/ai_ref_AbTabs.md) |
32
+ | `AbTab` | — | Individual tab pane / link. | [.ai/ai_ref_AbTab.md](./.ai/ai_ref_AbTab.md) |
33
+ | `AbImageRadioInput` | — | Image-based radio group for visual option pickers. | [.ai/ai_ref_AbImageRadioInput.md](./.ai/ai_ref_AbImageRadioInput.md) |
34
+ | `AbBadge` | — | Status / count label (Bootstrap badge utility). | [.ai/ai_ref_AbBadge.md](./.ai/ai_ref_AbBadge.md) |
35
+ | `AbSidebar` | — | Collapsible sidebar navigation with optional search. | [.ai/ai_ref_AbSidebar.md](./.ai/ai_ref_AbSidebar.md) |
36
+ | `AbSideMenuItem` | — | Sidebar nav item (router-link, anchor, submenu parent, or section title). | [.ai/ai_ref_AbSideMenuItem.md](./.ai/ai_ref_AbSideMenuItem.md) |
37
+ | `AbSlider` | — | Single or range numeric slider. | [.ai/ai_ref_AbSlider.md](./.ai/ai_ref_AbSlider.md) |
38
+ | `AbColorPicker` | — | Radio-style color swatch picker. | [.ai/ai_ref_AbColorPicker.md](./.ai/ai_ref_AbColorPicker.md) |
39
+ | `AbFileUploader` | — | File upload field with drag-and-drop and size validation. | [.ai/ai_ref_AbFileUploader.md](./.ai/ai_ref_AbFileUploader.md) |
40
+ | `AbFilterPanel` | — | Advanced filter panel with search and scan modes. | [.ai/ai_ref_AbFilterPanel.md](./.ai/ai_ref_AbFilterPanel.md) |
41
+ | `AbSettingsForm` | — | Settings-style form that auto-registers as a wizard step validator. | [.ai/ai_ref_AbSettingsForm.md](./.ai/ai_ref_AbSettingsForm.md) |
42
+ | `AbScrollbar` | — | Styled custom scrollbar wrapper with scroll events. | [.ai/ai_ref_AbScrollbar.md](./.ai/ai_ref_AbScrollbar.md) |
43
+ | `AbTooltip` | — | Programmatic tooltip component (complements the `v-tooltip` directive). | [.ai/ai_ref_AbTooltip.md](./.ai/ai_ref_AbTooltip.md) |
44
+ | `AbConfirmPopover` | — | Confirmation popover with async `onConfirm` and built-in loader. | [.ai/ai_ref_AbConfirmPopover.md](./.ai/ai_ref_AbConfirmPopover.md) |
45
+ | `AbTable` | — | Data grid with header/cell/empty slots. | [.ai/ai_ref_AbTable.md](./.ai/ai_ref_AbTable.md) |
46
+ | `AbSkeleton` | — | Loading state placeholder. | [.ai/ai_ref_AbSkeleton.md](./.ai/ai_ref_AbSkeleton.md) |
47
+ | `AbKbd` | — | Single keyboard key chip. | [.ai/ai_ref_AbKbd.md](./.ai/ai_ref_AbKbd.md) |
48
+ | `AbKbdGroup` | — | Group container for multiple `AbKbd` chips. | [.ai/ai_ref_AbKbdGroup.md](./.ai/ai_ref_AbKbdGroup.md) |
49
+ | `AbCarousel` | — | Image / HTML rotating slider with edge-fade, autoplay, orientation. | [.ai/ai_ref_AbCarousel.md](./.ai/ai_ref_AbCarousel.md) |
50
+ | `AbWizard` | — | Multi-step wizard container with orientation and variant styles. | [.ai/ai_ref_AbWizard.md](./.ai/ai_ref_AbWizard.md) |
51
+ | `AbWizardStep` | — | Individual step inside `AbWizard`. | [.ai/ai_ref_AbWizardStep.md](./.ai/ai_ref_AbWizardStep.md) |
52
+ | `AbPricingCard` | — | Single pricing tier card. | [.ai/ai_ref_AbPricingCard.md](./.ai/ai_ref_AbPricingCard.md) |
53
+ | `AbPricingContainer` | — | Layout wrapper for pricing tables. | [.ai/ai_ref_AbPricingContainer.md](./.ai/ai_ref_AbPricingContainer.md) |
54
+ | `AbPricingTable` | — | Stylized, responsive pricing table component with feature list and package columns. | [.ai/ai_ref_AbPricingTable.md](./.ai/ai_ref_AbPricingTable.md) |
55
+ | `AbChart` | — | Flexible chart component powered by Apache ECharts. | [.ai/ai_ref_AbChart.md](./.ai/ai_ref_AbChart.md) |
56
+ | `AbDarkModeToggler` | — | Light / dark theme toggle (pairs with `useTheme`). | [.ai/ai_ref_AbDarkModeToggler.md](./.ai/ai_ref_AbDarkModeToggler.md) |
57
+ | `useAlert` | — | Procedural API to trigger SweetAlert-based modal alerts, notifications, and confirmations. | [.ai/ai_ref_useAlert.md](./.ai/ai_ref_useAlert.md) |
58
+ | `abEventBus` / `emitterObj` | — | Lightweight global event bus using `tiny-emitter`. | [.ai/ai_ref_abEventBus.md](./.ai/ai_ref_abEventBus.md) |
59
+ | `useTheme` | — | Composable for light/dark theme toggling with localStorage and system preference sync. | [.ai/ai_ref_useTheme.md](./.ai/ai_ref_useTheme.md) |
60
+ | `useToast` | — | Procedural API to spawn toast notifications (success, error, warning, info). | [.ai/ai_ref_useToast.md](./.ai/ai_ref_useToast.md) |
61
+ | `useFileValidator` | — | File validation utilities (size, MIME type) and file icon/image resolvers. | [.ai/ai_ref_useFileValidator.md](./.ai/ai_ref_useFileValidator.md) |
62
+ | `useResponsive` | — | Real-time viewport width tracker for responsive layout decisions (Bootstrap 5 aligned). | [.ai/ai_ref_useResponsive.md](./.ai/ai_ref_useResponsive.md) |
63
+ | `abTranslate` | — | Localization utility wrapping `vue3-gettext` with automatic variable interpolation. | [.ai/ai_ref_abTranslate.md](./.ai/ai_ref_abTranslate.md) |
64
+ | `abVeeRules` | — | Collection of pre-configured VeeValidate validation rules integrated with localization. | [.ai/ai_ref_abVeeRules.md](./.ai/ai_ref_abVeeRules.md) |
65
+ | `abRequestParam` | — | Data-transfer classes to build structured API request parameters (pagination, sorting, filtering). | [.ai/ai_ref_abRequestParam.md](./.ai/ai_ref_abRequestParam.md) |
66
+
67
+ ## Directives & Controller APIs
68
+
69
+ **`v-tooltip`** (global): `v-tooltip="'text'"` or `v-tooltip="{ content: 'Text', placement: 'top-start' }"`
70
+
71
+ ```js
72
+ import { useAlert } from "vue3-appsbd-ui";
73
+ const { alert } = useAlert();
74
+ alert.success("Title", "Message"); // .error / .warning / .info / .confirm
38
75
  ```
39
76
 
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>`.
41
-
42
- If you use `AbDateTimePicker`, also import `v-calendar/style.css` in the consuming app because that component relies on `v-calendar` styling.
43
-
44
- **Global Configuration**
45
- To configure library-wide locale and formatting defaults, import and call `AppsbdUIConfigure(options)` during initialization. See [Global Config Reference](./.ai/ai_ref_global_config.md).
46
-
47
- ## 2. Per-Component AI Reference Files
48
-
49
- 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
-
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) |
97
- | `useAlert` | Procedural API to trigger SweetAlert-based modal alerts, notifications, and confirmations. | [.ai/ai_ref_useAlert.md](./.ai/ai_ref_useAlert.md) |
98
- | `abEventBus` / `emitterObj` | Lightweight global event bus using `tiny-emitter`. | [.ai/ai_ref_abEventBus.md](./.ai/ai_ref_abEventBus.md) |
99
- | `useTheme` | Composable for light/dark theme toggling with localStorage and system preference sync. | [.ai/ai_ref_useTheme.md](./.ai/ai_ref_useTheme.md) |
100
- | `useToast` | Procedural API to spawn toast notifications (success, error, warning, info). | [.ai/ai_ref_useToast.md](./.ai/ai_ref_useToast.md) |
101
- | `useFileValidator` | File validation utilities (size, MIME type) and file icon/image resolvers. | [.ai/ai_ref_useFileValidator.md](./.ai/ai_ref_useFileValidator.md) |
102
- | `useResponsive` | Real-time viewport width tracker for responsive layout decisions (Bootstrap 5 aligned). | [.ai/ai_ref_useResponsive.md](./.ai/ai_ref_useResponsive.md) |
103
- | `abTranslate` | Localization utility wrapping `vue3-gettext` with automatic variable interpolation. | [.ai/ai_ref_abTranslate.md](./.ai/ai_ref_abTranslate.md) |
104
- | `abVeeRules` | Collection of pre-configured VeeValidate validation rules integrated with localization. | [.ai/ai_ref_abVeeRules.md](./.ai/ai_ref_abVeeRules.md) |
105
- | `abRequestParam` | Data-transfer classes to build structured API request parameters (pagination, sorting, filtering). | [.ai/ai_ref_abRequestParam.md](./.ai/ai_ref_abRequestParam.md) |
106
-
107
- ## 3. Full Component API Reference
108
-
109
- > **Legend** ? `v-model`: indicates the component supports two-way binding via `modelValue` + `update:modelValue`. All components forward `$attrs` to their root element unless otherwise noted, so native HTML attributes (e.g. `class`, `id`, `disabled`) can be applied transparently.
110
-
111
- ### AppsbdUIConfigure
112
-
113
- Global configuration setter for library-wide tokens.
114
-
115
- **Options**
116
-
117
- | Name | Type | Default |
118
- | ----------------- | ----------------- | ---------------------- |
119
- | `monthNames` | `String[]` | English full names |
120
- | `monthNamesShort` | `String[]` | English short names |
121
- | `dayNames` | `String[]` | English 3-letter names |
122
- | `formatDigit` | `Function` | `(val) => String(val)` |
123
- | `rangeSeparator` | `String` | `' ↔ '` |
124
- | `is24Hour` | `Boolean` | `false` |
125
- | `dateDataFormat` | `String` | `'YYYY-MM-DD'` |
126
- | `dateDisplayFormat`| `String` | `'YYYY-MM-DD'` |
127
- | `datetimeDataFormat`| `String` | `'YYYY-MM-DD HH:mm'` |
128
- | `datetimeDisplayFormat`| `String` | `'YYYY-MM-DD HH:mm'` |
129
- | `timeDataFormat` | `String` | `'HH:mm'` |
130
- | `timeDisplayFormat`| `String` | `'HH:mm'` |
131
- | `inputContainerClass`| `String` | `'mb-3'` |
132
- | `toastPosition` | `String` | `'top-right'` |
133
- | `toastDesign` | `String` | `'default'` |
134
- | `toastTimeout` | `Number` | `5000` |
135
- | `toastCloseButton`| `Boolean` | `true` |
136
- | `toastPauseOnHover`| `Boolean` | `true` |
137
- | `toastPauseOnFocusLoss`| `Boolean` | `true` |
138
- | `toastShowProgress`| `Boolean` | `true` |
139
- | `trueValue` | `any` | `'Y'` |
140
- | `falseValue` | `any` | `'N'` |
141
- | `size` | `String` | `'md'` |
142
-
143
- ---
144
-
145
- ### AbButton
146
-
147
- **Props**
148
-
149
- | Name | Type | Default | Notes |
150
- | --------------------- | ------- | ----------- | ------------------------------------------------------- |
151
- | `type` | String | `"button"` | Native button type. |
152
- | `color` | String | `"primary"` | Color variant (`primary`, `secondary`, `danger`, etc.). |
153
- | `size` | String | `"md"` | Button size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
154
- | `isOutline` | Boolean | `false` | Applies the outline style for the selected color. |
155
- | `isIconBtn` | Boolean | `false` | Adjusts formatting for a button with only an icon. |
156
- | `isAnimated` | Boolean | `false` | Shows built-in loader animation. |
157
- | `isHideTextOnAnimate` | Boolean | `false` | Hides slot text while animated. |
158
- | `showIconDivider` | Boolean | `false` | Renders divider between `#icon` and label. |
159
-
160
- **Slots**
161
-
162
- - `default` ? button label/content.
163
- - `icon` ? leading icon element.
164
- - `svg` ? replaces the built-in loader SVG when `isAnimated` is true.
165
-
166
- **Notes** ? Color and size are controlled via props (`color`, `size`).
167
-
168
- ---
169
-
170
- ### AbCard
171
-
172
- **Props**
173
-
174
- | Name | Type | Default | Notes |
175
- | --- | --- | --- | --- |
176
- | `containerClass` | String | `undefined` | Classes to append directly to the root card container. |
177
- | `headerClass` | String | `""` | Classes for the header section. |
178
- | `bodyClass` | String | `""` | Classes for the body section. |
179
- | `footerClass` | String | `""` | Classes for the footer section. |
180
- | `isBorderCard` | Boolean | `true` | Whether to display the default card border. |
181
- | `bgColorVariant` | String | `""` | Bootstrap color variant for background (`primary`, `success`, etc.). |
182
- | `borderBottomVariant` | String | `""` | Adds a colored bottom border with the specified variant. |
183
- | `isTileCard` | Boolean | `false` | Applies the `.tile-card` layout styles. |
184
- | `variation` | String | `""` | Generic variation class to append to the root. |
185
-
186
- **Slots** — `header`, `body`, `footer`.
187
-
188
- **Notes** — Use built-in props (`isTileCard`, `bgColorVariant`) or CSS layout classes (applied to `containerClass`) for variations like `item-card` or `insight-card`.
189
-
190
- ---
191
-
192
- ### AbModal
193
-
194
- **Props**
195
-
196
- | Name | Type | Default | Notes |
197
- | -------------------- | ------- | ------- | ------------------------------------------------------- |
198
- | `isModalVisible` | Boolean | ? | Visibility state (also supports `v-model`). |
199
- | `modalSize` | String | `""` | Bootstrap size class (`modal-lg`, `modal-xl`, ?). |
200
- | `modalMsg` | String | `""` | Default message text. |
201
- | `hideHeader` | Boolean | `false` | |
202
- | `hideBody` | Boolean | `false` | |
203
- | `hideFooter` | Boolean | `false` | |
204
- | `hideCrossBtn` | Boolean | `false` | Hide the ? close button. |
205
- | `hideForm` | Boolean | `false` | Render root as `<div>` instead of VeeValidate `<Form>`. |
206
- | `bodyClass` | String | `""` | |
207
- | `isModalCenter` | Boolean | `true` | Vertical centering. |
208
- | `isBorder` | Boolean | `false` | Show modal border. |
209
- | `iconContainerClass` | String | `""` | |
210
- | `headerClass` | String | `""` | Preferred class prop for `.modal-header`. |
211
-
212
- **Events**
213
-
214
- - `onSubmit(event, { resetForm })` ? form submission.
215
- - `loading-status(boolean)` ? loader state changed.
216
- - `close` ? modal closed.
217
-
218
- **Slots**
219
-
220
- - `default` ? form content (wrapped in VeeValidate `<Form>` unless `hideForm`).
221
- - `header`, `headerIcon`, `headerTitleContainer`, `headerTitle`, `headerSubTitle` ? header pieces.
222
- - `body`, `loader` ? body / loader overrides.
223
- - `footer({ close })` ? footer; receives `close` method.
224
-
225
- **Exposed methods** ? `showLoader(status, msg)`, `close()`, `clearForm()`, `returnClear()`, `showMsgOnly(msg, isHideFooter)`, `setMessageOnly(status)`.
226
-
227
- ---
228
-
229
- ### AbEasyModal
230
-
231
- A thin wrapper around `AbModal` exposing imperative open/close.
232
-
233
- **Props** ? forwards all `AbModal` props via `$attrs`.
234
-
235
- **Slots**
236
-
237
- - `action` ? trigger element (renders outside the modal).
238
- - `title` ? modal title.
239
- - `body` ? modal body.
240
- - `footer({ closeModal, close })` ? modal footer.
241
-
242
- **Exposed methods** ? `openModal()`, `closeModal()`.
243
-
244
- ---
245
-
246
- ### AbProgressbar
247
-
248
- **Props**
249
-
250
- | Name | Type | Default | Validator |
251
- | --------------- | ------ | ----------- | --------------------------------------------------------------- |
252
- | `minValue` | Number | `0` | |
253
- | `maxValue` | Number | `100` | |
254
- | `progressValue` | Number | `0` | Current value (0-100). |
255
- | `color` | String | `"primary"` | `success`, `danger`, `info`, `warning`, `primary`, `secondary`. |
256
- | `size` | String | `"md"` | `xs`, `sm`, `md`, `lg`, `xl`, `xxl`. |
257
-
258
- **Slots** — `default` — progress label (uses CSS custom property `--progress-value`).
259
-
260
- **Position Classes** — `progress-right`, `progress-right-top`, `progress-right-bottom`, `progress-value-top`, `progress-value-bottom`.
261
-
262
- ---
263
-
264
- ### AbInputField
265
-
266
- **Props**
267
-
268
- | Name | Type | Default | Notes |
269
- | ------------------- | --------------- | ---------- | ------------------------------------------------- |
270
- | `modelValue` | any | `null` | v-model binding. |
271
- | `label` | String | `""` | |
272
- | `placeholder` | String | `""` | |
273
- | `type` | String | `"text"` | Auto-detects `password`. |
274
- | `name` | String | _required_ | VeeValidate field name. |
275
- | `size` | String | `"md"` | Input size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
276
- | `isCodeInput` | Boolean | `false` | |
277
- | `rules` | String / Object | `""` | VeeValidate rules. |
278
- | `containerClass` | String | `"mb-3"` | |
279
- | `hints` | String | `""` | |
280
- | `prefix` | String | `""` | |
281
- | `postfix` | String | `""` | |
282
- | `maxlength` | any | `null` | |
283
- | `isLeftIconBorder` | Boolean | `false` | |
284
- | `isRightIconBorder` | Boolean | `false` | |
285
- | `isHideLabel` | Boolean | `false` | Hide the label visually. |
286
- | `iconPosition` | String | `"right"` | Position of the custom `#icon` slot. |
287
-
288
- **Events** ? `update:modelValue`, `input`, `keyup`, `keydown`, `paste`.
289
-
290
- **Slots** ? `label`, `prefix`, `postfix`, `icon`, `hints`.
291
-
292
- **v-model** ? yes.
293
-
294
- ---
295
-
296
- ### AbNumberField
297
-
298
- Numeric input with built-in minus/plus buttons, min/max clamping, custom step, and VeeValidate integration. Use the `isBorder` prop to show the internal borders between the buttons and the input (default is a seamless pill).
299
-
300
- **Props**
301
-
302
- | Name | Type | Default | Notes |
303
- | ------------------- | --------------- | ---------- | ----------------------------------------------------------------------------- |
304
- | `modelValue` | any | `null` | v-model binding. |
305
- | `label` | String | `""` | |
306
- | `placeholder` | String | `""` | |
307
- | `name` | String | _required_ | VeeValidate field name. |
308
- | `rules` | String / Object | `""` | VeeValidate rules. |
309
- | `containerClass` | String | `"mb-3"` | |
310
- | `hints` | String | `""` | |
311
- | `prefix` | String | `""` | |
312
- | `postfix` | String | `""` | |
313
- | `min` | Number / String | `null` | Minimum allowed value; also clamps input and disables the minus button. |
314
- | `max` | Number / String | `null` | Maximum allowed value; also clamps input and disables the plus button. |
315
- | `step` | Number / String | `1` | Increment/decrement step amount. |
316
- | `showButtons` | Boolean | `true` | Show the minus/plus controls. |
317
- | `disabled` | Boolean | `false` | Disable the field and both buttons. |
318
- | `isBorder` | Boolean | `false` | Show inner borders between minus/input/plus (default renders as seamless). |
319
- | `isLeftIconBorder` | Boolean | `false` | Keep the left icon border (prefix) when used with a prefix slot. |
320
- | `isRightIconBorder` | Boolean | `false` | Keep the right icon border (postfix) when used with a postfix slot. |
321
-
322
- **Events** — `update:modelValue`, `input`, `keyup`, `keydown`, `paste`.
323
-
324
- **Slots** — `label`, `prefix`, `postfix`, `hints`.
325
-
326
- **v-model** — yes.
327
-
328
- ---
329
-
330
- ### AbField
331
-
332
- Polymorphic field: renders text/number/textarea/select/multiselect/tag/checkbox/radio/toggle/switch based on `type`.
333
-
334
- **Props**
335
-
336
- | Name | Type | Default | Notes |
337
- | ------------------- | ------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------- |
338
- | `val` | any | `null` | Initial value. |
339
- | `label` | String | _required_ | |
340
- | `name` | String | _required_ | |
341
- | `type` | String | `"text"` | `text`, `email`, `password`, `number`, `url`, `textarea`, `select`, `multiselect`, `tag`, `checkbox`, `radio`, `toggle`, `switch`. |
342
- | `prefix` | String | `""` | |
343
- | `postfix` | String | `""` | |
344
- | `modelValue` | String / Number / Boolean / Array / Object | `""` | |
345
- | `isCodeInput` | Boolean | `false` | |
346
- | `containerClass` | String | `""` | |
347
- | `maxlength` | String / Number | `""` | |
348
- | `minlength` | String / Number | `""` | |
349
- | `placeholder` | String | `""` | |
350
- | `hints` | String / Array | `""` | |
351
- | `rules` | String / Array | `""` | VeeValidate rules. |
352
- | `options` | Array | `[]` | For select/checkbox/radio. |
353
- | `labelKey` | String | `"title"` | |
354
- | `valueKey` | String | `"val"` | |
355
- | `max` | Number | `-1` | Max selections (`-1` = unlimited). |
356
- | `size` | String | `"md"` | |
357
- | `object` | Boolean | `false` | Return full objects for multiselect. |
358
- | `searchable` | Boolean | `false` | |
359
- | `description` | String | `""` | |
360
- | `helptext` | String | `""` | |
361
- | `isInline` | Boolean | `false` | Checkbox/radio layout. |
362
- | `trueValue` | any | `"Y"` | Toggle/switch. |
363
- | `falseValue` | any | `"N"` | Toggle/switch. |
364
- | `title` | String / null | `null` | Toggle/switch title. |
365
- | `isLeftIconBorder` | Boolean | `false` | |
366
- | `isRightIconBorder` | Boolean | `false` | |
367
- | `isHideLabel` | Boolean | `false` | Hide the label visually. |
368
- | `iconPosition` | String | `"right"` | Position of the custom `#icon` slot. |
369
-
370
- **Events** ? `update:modelValue`, `clear(event)`, `change(value)`, `select(value)`.
371
-
372
- **Slots** ? `label`, `prefix`, `postfix`, `icon`, `description`, `helptext`, `option`, `singlelabel`.
373
-
374
- **v-model** ? yes.
375
-
376
- ---
377
-
378
- ### AbCustomField
379
-
380
- Dynamic form driven by a `fieldInputs` array where each entry declares `type` (`T` text, `N` number, `U` url, `P` password, `E` textarea, `H` hidden, `D` date, `DR` date range, `R` radio, `W` dropdown, `S` switch, `C` checkbox) and other per-field config.
381
-
382
- **Props**
383
-
384
- | Name | Type | Default |
385
- | ------------- | ------ | ------- |
386
- | `fieldInputs` | Array | `[]` |
387
- | `size` | String | `"sm"` |
388
- | `customProps` | Object | `{}` |
389
-
390
- **Scoped slots** ? per-field id: `Label{id}`, `Hints{id}`, `Prefix{id}`, `Postfix{id}`, `Icon{id}`, `Description{id}`, `HelpText{id}`.
391
-
392
- ---
393
-
394
- ### AbPinInput
395
-
396
- **Props**
397
-
398
- | Name | Type | Default |
399
- | --------------- | ------- | ------- |
400
- | `modelValue` | String | ? |
401
- | `length` | Number | `6` |
402
- | `size` | String | `"md"` |
403
- | `showSeparator` | Boolean | `false` |
404
- | `groupSize` | Number | `3` |
405
-
406
- **Events** ? `update:modelValue(pin)`.
407
-
408
- **v-model** ? yes.
409
-
410
- ---
411
-
412
- ### AbDateTimePicker
413
-
414
- **Props**
415
-
416
- | Name | Type | Default | Notes |
417
- | --------------------------------------------- | --------------- | -------------- | ------------------------------------------------------------- |
418
- | `modelValue` | String / Object | `null` | For range mode, `{ start, end }`. |
419
- | `label` | String | `""` | |
420
- | `placeholder` | String | `""` | |
421
- | `name` | String | _required_ | |
422
- | `rules` | String / Object | `""` | |
423
- | `isRange` | Boolean | `false` | |
424
- | `size` | String | `"md"` | `xs`, `sm`, `md`, `lg`, `xl`, `xxl`. |
425
- | `containerClass` | String | `"mb-3"` | |
426
- | `hints` | String | `""` | |
427
- | `isDisable` | Boolean | `false` | |
428
- | `visibility` | String | `"click"` | |
429
- | `mask` | String | `""` | |
430
- | `dataFormat` | String | `"YYYY-MM-DD"` | |
431
- | `displayFormat` | String | `"YYYY-MM-DD"` | |
432
- | `maxDate` | Date / String | `undefined` | |
433
- | `minDate` | Date / String | `undefined` | |
434
- | `disableDates` | Array | `[]` | Accepts `Date`, string, or `{ repeat: { weekdays: [...] } }`. |
435
- | `showInInput` | Boolean | `true` | Input vs button trigger. |
436
- | `monthNames` / `monthNamesShort` / `dayNames` | Array | `undefined` | i18n overrides. |
437
- | `formatDigit` | Function | `undefined` | Locale digit formatter. |
438
- | `rangeSeparator` | String | `undefined` | |
439
- | `mode` | String | `"date"` | `date`, `time`, `datetime`. |
440
- | `is24Hour` | Boolean | `undefined` | |
441
- | `minuteStep` | Number | `1` | |
442
- | `isLeftIconBorder` | Boolean | `false` | |
443
- | `isRightIconBorder` | Boolean | `false` | |
444
- | `isHideLabel` | Boolean | `false` | Hide the label visually. |
445
- | `defaultIconPosition` | String | `"right"` | Position of the default calendar/clock icon. |
446
- | `iconPosition` | String | `"right"` | Position of the custom `#icon` slot. |
447
-
448
- **Slots** ? `label`, `prefix`, `icon`, `hints`, `picker-container({ isRange, showInInput, value })`.
449
-
450
- **v-model** ? yes.
451
-
452
- ---
453
-
454
- ### AbAvatar
455
-
456
- **Props**
457
-
458
- | Name | Type | Default | Notes |
459
- | ------------ | ------- | --------- | -------------------------------------------------- |
460
- | `src` | String | `""` | Image source. |
461
- | `alt` | String | `""` | Alt text. |
462
- | `variant` | String | `"image"` | `"add"` enables file upload mode. |
463
- | `size` | String | `"md"` | Avatar size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
464
- | `isActive` | Boolean | `false` | Renders active status dot. |
465
- | `isVerified` | Boolean | `false` | Renders verified badge and border. |
466
- | Name | Type | Default | Notes |
467
- | --------- | ------ | --------- | ---------------------------------------- |
468
- | `src` | String | `""` | |
469
- | `alt` | String | `""` | |
470
- | `variant` | String | `"image"` | `"image"` or `"add"` (file-upload mode). |
471
-
472
- **Slots** ? `default` ? text context (Verified badge is rendered inherently via `isVerified`).
473
-
474
- ---
475
-
476
- ### AbTabs
477
-
478
- **Props**
479
-
480
- | Name | Type | Default |
481
- | ------------------- | ------- | ------------- |
482
- | `tabContainerClass` | String | ? |
483
- | `navContainerClass` | String | ? |
484
- | `tabDetailsClass` | String | ? |
485
- | `navClass` | String | `"nav-pills"` |
486
- | `tabClass` | String | `""` |
487
- | `isRouteMode` | Boolean | `false` |
488
-
489
- **Slots** ? `default` ? place `<ab-tab>` children.
490
-
491
- ---
492
-
493
- ### AbTab
494
-
495
- **Props**
496
-
497
- | Name | Type | Default |
498
- | ---------- | --------------- | ---------- |
499
- | `title` | String | _required_ |
500
- | `selected` | Boolean | `false` |
501
- | `to` | String / Object | `null` |
502
-
503
- **Slots** ? `default`, `icon`.
504
-
505
- ---
506
-
507
- ### AbFormCheck / AbRadioInput
508
-
509
- `AbRadioInput` is an alias of `AbFormCheck`.
510
-
511
- **Props**
512
-
513
- | Name | Type | Default | Notes |
514
- | ---------------- | ------------- | ------------ | -------------------------------------------------------------------------------- |
515
- | `modelValue` | any | ? | |
516
- | `label` | String / null | `null` | |
517
- | `rules` | String | `""` | |
518
- | `val` | any | `null` | |
519
- | `type` | String | `"checkbox"` | `"checkbox"` or `"radio"`. |
520
- | `isInline` | Boolean | `false` | |
521
- | `options` | Array | `[]` | Each: `{ val, title, description?, icon?, img_src?, iconComponent?, disable? }`. |
522
- | `name` | String | _required_ | |
523
- | `limit` | Number | `0` | `0` = unlimited. |
524
- | `containerClass` | String | `"mb-3"` | |
525
- | `size` | String | `"md"` | |
526
- | `iconSize` | String | `"24px"` | |
527
- | `iconGap` | String | `"10px"` | |
528
- | `variant` | String | `"default"` | `default`, `card`, `segmented`, `pill`. |
529
-
530
- **Slots** ? `label`, `description`, `help-text`, `input-img-{title}`, `input-icon-{title}`, `label-{title}`, `description-{title}`.
531
-
532
- **v-model** ? yes.
533
-
534
- ---
535
-
536
- ### AbImageRadioInput
537
-
538
- **Props**
539
-
540
- | Name | Type | Default |
541
- | --------------- | ------- | ------------------------- |
542
- | `modelValue` | any | ? |
543
- | `width` | String | `"auto"` |
544
- | `height` | String | `"auto"` |
545
- | `maxWidth` | String | `"inherit"` |
546
- | `maxImgWidth` | String | `"50%"` |
547
- | `borderRadius` | String | `"5px"` |
548
- | `margin` | String | `"0 15px 15px 0"` |
549
- | `padding` | String | `"10px"` |
550
- | `selectorTop` | String | `"5px"` |
551
- | `selectorLeft` | String | `"5px"` |
552
- | `selectorColor` | String | `""` |
553
- | `iconSize` | String | `"inherit"` |
554
- | `options` | Array | `[]` |
555
- | `isInline` | Boolean | `false` |
556
- | `optionClass` | String | `""` |
557
- | `labelBorder` | String | `"1px solid transparent"` |
558
-
559
- Option shape: `{ val, label?, img_src?, icon?, iconComponent?, icon_ctnr_class?, class? }`.
560
-
561
- **Slots** ? `icon_image(option)`, `label(option)`, `label-{val}`.
562
-
563
- **v-model** ? yes.
564
-
565
- ---
566
-
567
- ### AbToggle
568
-
569
- **Props**
570
-
571
- | Name | Type | Default |
572
- | ---------------- | ------------- | ---------- |
573
- | `modelValue` | any | ? |
574
- | `label` | String / null | `null` |
575
- | `val` | any | `"N"` |
576
- | `name` | String | _required_ |
577
- | `containerClass` | String | `"mb-3"` |
578
- | `size` | String | `"md"` |
579
- | `trueValue` | any | `"Y"` |
580
- | `falseValue` | any | `"N"` |
581
- | `title` | String / null | `null` |
582
- | `description` | String / null | `null` |
583
- | `hints` | String / null | `null` |
584
-
585
- **Slots** ? `label`, `title`, `description`, `descriptionContainer`, `hints`.
586
-
587
- **v-model** ? yes.
588
-
589
- ---
590
-
591
- ### AbInputTag
592
-
593
- **Props**
594
-
595
- | Name | Type | Default | Notes |
596
- | ------------------- | --------------- | ---------- | ------------------------------------ |
597
- | `modelValue` | Array | `[]` | |
598
- | `options` | Array | `[]` | Each: `{ val, title }` or a string. |
599
- | `label` | String | `""` | |
600
- | `size` | String | `"md"` | `xs`, `sm`, `md`, `lg`, `xl`, `xxl`. |
601
- | `placeholder` | String | `""` | |
602
- | `name` | String | _required_ | |
603
- | `rules` | String / Object | `""` | |
604
- | `containerClass` | String | `"mb-3"` | |
605
- | `hints` | String | `""` | |
606
- | `prefix` | String | `""` | |
607
- | `postfix` | String | `""` | |
608
- | `max` | Number | `0` | `0` = unlimited. |
609
- | `isLeftIconBorder` | Boolean | `false` | |
610
- | `isRightIconBorder` | Boolean | `false` | |
611
- | `isHideLabel` | Boolean | `false` | Hide the label visually. |
612
- | `iconPosition` | String | `"right"` | Position of the custom `#icon` slot. |
613
-
614
- **Events** ? `update:modelValue(array)`.
615
-
616
- **Slots** ? `label`, `prefix`, `postfix`, `icon`, `hints`.
617
-
618
- **v-model** ? yes.
619
-
620
- ---
621
-
622
- ### AbBadge
623
-
624
- **Props**
625
-
626
- | Name | Type | Default | Notes |
627
- | --------------- | ------- | ----------- | ----- |
628
- | `size` | String | `"md"` | |
629
- | `color` | String | `"primary"` | |
630
- | `isOutline` | Boolean | `false` | |
631
- | `isRoundedPill` | Boolean | `false` | |
632
- | `isDot` | Boolean | `false` | |
633
- | `isClose` | Boolean | `false` | |
634
- | `isAdd` | Boolean | `false` | |
635
- | `position` | String | `"right"` | |
636
-
637
- **Slots** ? `default` ? badge content, `content` ? icon or image content placed via position.
638
-
639
- ---
640
-
641
- ### AbSidebar
642
-
643
- **Props**
644
-
645
- | Name | Type | Default |
646
- | ------------------- | ------- | ------------ |
647
- | `appUniqueId` | String | `"apbd"` |
648
- | `hideSeperator` | Boolean | `false` |
649
- | `mobileFullHeight` | Boolean | `false` |
650
- | `enableSearch` | Boolean | `false` |
651
- | `searchTargetClass` | String | `"nav-item"` |
652
-
653
- **Slots** ? `header`, `default` (menu items), `footer`, `collapse-icon`.
654
-
655
- **Provides** ? `isCollapsed`, `isMobileFullHeight`, `layoutState`.
656
-
657
- ---
658
-
659
- ### AbSideMenuItem
660
-
661
- **Props**
662
-
663
- | Name | Type | Notes |
664
- | ------ | --------------- | -------------------- |
665
- | `to` | String / Object | Router-link target. |
666
- | `href` | String | Plain anchor target. |
667
-
668
- **Slots** ? `default` (label), `icon`, `submenu`, `sectiontitle` (rendering a section title instead of a regular item).
669
-
670
- **Injects** ? `isCollapsed`, `isMobileFullHeight`, `layoutState`.
671
-
672
- ---
673
-
674
- ### AbSlider
675
-
676
- **Props**
677
-
678
- | Name | Type | Default | Notes |
679
- | ---------------- | -------------- | ------------------------------ | ---------------------------------- |
680
- | `modelValue` | Number / Array | `null` | Array `[min, max]` for range mode. |
681
- | `min` | Number | `0` | |
682
- | `max` | Number | `100` | |
683
- | `step` | Number | `1` | |
684
- | `range` | Boolean | `false` | |
685
- | `size` | String | `"md"` | `sm`, `md`, `lg`. |
686
- | `showLabels` | Boolean | `false` | |
687
- | `disabled` | Boolean | `false` | |
688
- | `label` | String | `""` | |
689
- | `containerClass` | String | `"mb-3"` | |
690
- | `hints` | String | `""` | |
691
- | `formatLabel` | Function | `val => Math.round(val) + "%"` | |
692
-
693
- **Events** ? `update:modelValue`.
694
-
695
- **Slots** ? `label`, `prefix`, `postfix`, `thumb({ value, type })` where type is `min` / `max` / `single`, `hints`.
696
-
697
- **v-model** ? yes.
698
-
699
- ---
700
-
701
- ### AbMultiSelect
702
-
703
- Custom built-in replacement for `@vueform/multiselect`.
704
-
705
- **Props**
706
-
707
- | Name | Type | Default | Notes |
708
- | ------------------- | --------------- | ---------- | ------------------------------------ |
709
- | `modelValue` | any | `null` | |
710
- | `label` | String | `""` | |
711
- | `placeholder` | String | `""` | |
712
- | `type` | String | `"text"` | |
713
- | `name` | String | _required_ | |
714
- | `rules` | String / Object | `""` | |
715
- | `containerClass` | String | `"mb-3"` | |
716
- | `hints` | String | `""` | |
717
- | `multiple` | Boolean | `false` | Deprecated ? use `mode`. |
718
- | `searchable` | Boolean | `false` | |
719
- | `mode` | String | `"single"` | `single`, `multiple`, `tags`. |
720
- | `size` | String | `"md"` | `xs`, `sm`, `md`, `lg`, `xl`, `xxl`. |
721
- | `options` | Array | `[]` | |
722
- | `labelKey` | String | `"title"` | |
723
- | `valueKey` | String | `"val"` | |
724
- | `max` | Number | `-1` | `-1` = unlimited. |
725
- | `object` | Boolean | `false` | Return full objects. |
726
- | `prefix` | String | `""` | |
727
- | `postfix` | String | `""` | |
728
- | `isAjaxSearch` | Boolean | `false` | |
729
- | `onSearch` | Function | `null` | AJAX search handler. |
730
- | `hideSelected` | Boolean | `true` | |
731
- | `loading` | Boolean | `false` | |
732
- | `disabled` | Boolean | `false` | |
733
- | `appendToBody` | Boolean | `true` | Teleport dropdown to `<body>`. |
734
- | `isLeftIconBorder` | Boolean | `false` | |
735
- | `isRightIconBorder` | Boolean | `false` | |
736
- | `isHideLabel` | Boolean | `false` | Hide the label visually. |
737
- | `iconPosition` | String | `"right"` | Position of the custom `#icon` slot. |
738
-
739
- **Events** ? `update:modelValue`, `clear`, `change(value)`, `select(value)`, `open`, `close`, `search-change(query)`.
740
-
741
- **Slots** ? `label`, `prefix`, `postfix`, `icon`, `singlelabel(value)`, `taglabel(value)`, `option({ option, isSelected })`, `noresults`, `option-loading`, `loader-icon`.
742
-
743
- **v-model** ? yes.
744
-
745
- ---
746
-
747
- ### AbColorPicker
748
-
749
- **Props**
750
-
751
- | Name | Type | Default |
752
- | -------------- | ------ | --------- |
753
- | `modelValue` | String | `""` |
754
- | `name` | String | `"color"` |
755
- | `colors` | Array | `[]` |
756
- | `align` | String | `"left"` |
757
- | `borderRadius` | String | `"50%"` |
758
- | `size` | String | `"md"` | `xs`, `sm`, `md`, `lg`, `xl`, `xxl`. |
759
-
760
- Color option shape: `{ name, color, title? }`.
761
-
762
- **Events** ? `update:modelValue(colorName)`.
763
-
764
- **v-model** ? yes.
765
-
766
- ---
767
-
768
- ### AbFileUploader
769
-
770
- **Props**
771
-
772
- | Name | Type | Default | Notes |
773
- | ---------------- | --------------------- | ------- | -------------------------- |
774
- | `modelValue` | File / Array / String | `null` | File object or URL string. |
775
- | `maxSize` | Number | `2.0` | Max file size in MB. |
776
- | `label` | String | `""` | |
777
- | `containerClass` | String | `""` | |
778
-
779
- **Events** ? `update:modelValue(file)`, `onSelectFiles(files)`.
780
-
781
- **Slots** ? `label`, `dial` (custom uploader UI), `default`.
782
-
783
- **v-model** ? yes.
784
-
785
- ---
786
-
787
- ### AbFilterPanel
788
-
789
- **Props**
790
-
791
- | Name | Type | Default |
792
- | ---------------------------------- | ------- | --------------- |
793
- | `isAdvance` | Boolean | `false` |
794
- | `isQuickAdvance` | Boolean | `false` |
795
- | `isSingle` | Boolean | `false` |
796
- | `isAllowed` | Boolean | `false` |
797
- | `canScan` | Boolean | `false` |
798
- | `filterOptions` | Array | `[]` |
799
- | `scanProps` | String | `""` |
800
- | `showScanFld` | Boolean | `false` |
801
- | `showDrGroupText` | Boolean | `true` |
802
- | `dateFormat` | String | `"MMM DD,YYYY"` |
803
- | `isSearchable` | Boolean | `false` |
804
- | `isMaxDate` | Boolean | `true` |
805
- | `size` | String | `"xs"` |
806
- | `advanceSearchInputContainerClass` | String | `"col-6"` |
807
- | `isQuickAdvanceAutoSearch` | Boolean | `false` |
808
-
809
- **Events** ? `searchFilter(dataArray)` where each item is `{ propName, operators, value }`, `reset`, `ChangeSearchMode(showScan)`.
810
-
811
- **Slots** ? `prefix`, `postfix`, `icon`, `hints`.
812
-
813
- ---
814
-
815
- ### AbSettingsForm
816
-
817
- Auto-registers as a wizard step validator when nested inside `AbWizardStep` / `AbWizard`.
818
-
819
- **Props**
820
-
821
- | Name | Type | Default | Notes |
822
- | ---------- | -------- | ---------- | ------------------------------------------- |
823
- | `onSubmit` | Function | `() => {}` | Return `false` to block wizard progression. |
824
-
825
- **Slots** ? `default` ? form fields.
826
-
827
- ---
828
-
829
- ### AbScrollbar
830
-
831
- **Props**
832
-
833
- | Name | Type | Default |
834
- | ------------------ | ------- | ------- |
835
- | `size` | String | `"md"` |
836
- | `isHoverIncrease` | Boolean | `false` |
837
- | `transparentTrack` | Boolean | `true` |
838
- | `showAlways` | Boolean | `false` |
839
-
840
- Size maps to `sm` ? 4px, `md` ? 6px, `lg` ? 8px.
841
-
842
- **Events** ? `scroll(payload)`, `scroll-start(payload)`, `scroll-end(payload)`. Payload includes `scrollTop`, `scrollHeight`, `scrollRatio`, `scrollPercentage`.
843
-
844
- **Slots** ? `default`.
845
-
846
- ---
847
-
848
- ### AbTooltip
849
-
850
- **Props**
851
-
852
- | Name | Type | Default | Notes |
853
- | ------------- | --------------- | ------- | ---------------------------------------------- |
854
- | `content` | String | `""` | |
855
- | `placement` | String | `"top"` | `top`, `bottom`, `left`, `right`, or `auto-*`. |
856
- | `offset` | Number / String | `8` | |
857
- | `disabled` | Boolean | `false` | |
858
- | `arrow` | Boolean | `true` | |
859
- | `interactive` | Boolean | `false` | |
860
-
861
- **Slots** ? `default` (trigger), `content` (tooltip body).
862
-
863
- ---
864
-
865
- ### AbPopover
866
-
867
- Dependency-free interactive popover.
868
-
869
- **Props**
870
-
871
- | Name | Type | Default | Notes |
872
- | ------------------- | --------------- | ---------- | ------------------------------------------------------------------------ |
873
- | `placement` | String | `"bottom"` | `top`, `bottom`, `left`, `right`, or `auto-*`. |
874
- | `offset` | Number / String | `8` | |
875
- | `gap` | Number / String | `null` | Overrides `offset` if set. |
876
- | `disabled` | Boolean | `false` | |
877
- | `arrow` | Boolean | `true` | |
878
- | `arrowPadding` | Number | `4` | |
879
- | `trigger` | String / Array | `"click"` | `click`, `hover`, `focus`, `touch`, `manual`. String or space-separated. |
880
- | `autoHide` | Boolean | `true` | Close on outside click. |
881
- | `contentClass` | String | `""` | |
882
- | `referenceSelector` | String | `null` | CSS selector inside trigger to anchor position. |
883
-
884
- **Events** ? `update:modelValue(visible)`, `show`, `hide`.
885
-
886
- **Slots** ? `default` (trigger), `content({ close, hide, show, toggle })`.
887
-
888
- ---
889
-
890
- ### AbConfirmPopover
891
-
892
- **Props**
893
-
894
- | Name | Type | Default | Notes |
895
- | ------------- | -------------------------------- | ----------------- | -------------------------------------------------- |
896
- | `msg` | String | `"Are you sure?"` | |
897
- | `title` | String | `""` | |
898
- | `confirmText` | String | `"Yes"` | |
899
- | `cancelText` | String | `"No"` | |
900
- | `icon` | String | `"question"` | `success`, `error`, `warning`, `info`, `question`. |
901
- | `type` | String | `"confirm"` | `confirm`, `confirm-ajax`, `alert`. |
902
- | `onConfirm` | Function | `null` | Async confirmation handler. |
903
- | `itemData` | Object / String / Number / Array | `null` | Payload passed to `onConfirm`. |
904
-
905
- **Events** ? `onConfirmed({ showLoader(status), itemData, closePopover })` ? legacy path when `onConfirm` prop is not supplied.
906
-
907
- **Slots** ? `default` (trigger), `desc`, `actionButtons({ removeConfirmed, state })`.
908
-
909
- ---
910
-
911
- ### AbTable
912
-
913
- **Props**
914
-
915
- | Name | Type | Default | Notes |
916
- | ------------ | ----------------------- | ------- | -------------------------------------------------- |
917
- | `items` | Array | `[]` | Row data. |
918
- | `fields` | Array | `[]` | Column defs ? each string key or `{ key, label }`. |
919
- | `tableClass` | String / Array / Object | `""` | |
920
-
921
- **Slots** ? `thead`, `tbody`, `head({ fieldKey })`, `cell({ fieldKey })(value, item, index)`, `empty`.
922
-
923
- ---
924
-
925
- ### AbSkeleton
926
-
927
- No declared props. Renders a pulsing placeholder; forwards all `$attrs` to the root `<div>`.
928
-
929
- ---
930
-
931
- ### AbKbd / AbKbdGroup
932
-
933
- No declared props. `AbKbd` renders a single `<kbd>`-like chip; `AbKbdGroup` composes several. Both expose a single `default` slot.
934
-
935
- ---
936
-
937
- ### AbCarousel
938
-
939
- **Props**
940
-
941
- | Name | Type | Default | Notes |
942
- | ------------------ | ------- | -------------- | --------------------------------------------------------------- |
943
- | `scrollAmount` | Number | `200` | Pixels per click; falls back to item width when children exist. |
944
- | `orientation` | String | `"horizontal"` | `horizontal` or `vertical`. |
945
- | `edgeFade` | Boolean | `false` | |
946
- | `autoplay` | Boolean | `false` | |
947
- | `autoplayInterval` | Number | `3000` | ms. |
948
- | `navOutside` | Boolean | `false` | |
949
- | `navOnHover` | Boolean | `false` | |
950
-
951
- **Slots** ? `default` ? carousel items.
952
-
953
- ---
954
-
955
- ### AbWizard
956
-
957
- **Props**
958
-
959
- | Name | Type | Default | Notes |
960
- | -------------- | -------- | ------------------ | ------------------------------------------------------ |
961
- | `beforeNext` | Function | `async () => true` | Return `false` to cancel. |
962
- | `beforePrev` | Function | `async () => true` | |
963
- | `beforeFinish` | Function | `async () => true` | |
964
- | `orientation` | String | `"horizontal"` | `horizontal` or `vertical`. |
965
- | `variant` | String | `"default"` | `default`, `circular`, `modal`, `circular-modal`, etc. |
966
- | `stepperSize` | String | `"md"` | `sm` or `md`. |
967
- | `hideControls` | Boolean | `false` | |
968
- | `nextText` | String | `"Next"` | |
969
- | `prevText` | String | `"Back"` | |
970
- | `finishText` | String | `"Finish"` | |
971
- | `disableClose` | Boolean | `false` | |
972
- | `modalClass` | String | `"modal-lg"` | For modal variants. |
973
-
974
- **Events** ? `finished`, `step-changed`.
975
-
976
- **Slots** ? `default` ? `<ab-wizard-step>` children.
977
-
978
- **Provides** ? `AbWizard` injection + `registerStepValidator(stepId, fn)`.
979
-
980
- ---
981
-
982
- ### AbWizardStep
983
-
984
- **Props**
985
-
986
- | Name | Type | Default |
987
- | -------------- | -------------------------- | ---------- |
988
- | `title` | String | _required_ |
989
- | `description` | String | `""` |
990
- | `icon` | Object / String / Function | `null` |
991
- | `disableClose` | Boolean | `false` |
992
-
993
- **Slots** ? `default` ? step content.
994
-
995
- **Provides** ? `AbWizardStep` injection for children (e.g. `AbSettingsForm`).
996
-
997
- ---
998
-
999
- ### AbPricingCard
1000
-
1001
- **Props**
1002
-
1003
- | Name | Type | Default | Notes |
1004
- | --------------- | --------------- | ----------- | --------------------------------------------------- |
1005
- | `title` | String | `""` | |
1006
- | `amount` | String / Number | `undefined` | |
1007
- | `regularAmount` | String / Number | `undefined` | Strikethrough original price. |
1008
- | `frequency` | String | `""` | e.g. `"/month"`. |
1009
- | `badge` | String | `""` | |
1010
- | `active` | Boolean | `false` | |
1011
- | `recommended` | Boolean | `false` | |
1012
- | `color` | String | `"primary"` | |
1013
- | `variant` | String | `"default"` | `default`, `minimal`, `highlighted`, `badge-price`. |
1014
- | `features` | Array | `[]` | Each `{ text, disabled? }` or string. |
1015
-
1016
- **Slots** ? `header`, `badge`, `badge-icon`, `price`, `features`, `feature-icon({ feature, index })`, `action`.
1017
-
1018
- ---
1019
-
1020
- ### AbPricingContainer
1021
-
1022
- **Props**
1023
-
1024
- | Name | Type | Default | Notes |
1025
- | ------------------------------ | --------------- | ----------- | ------------------------------------------ |
1026
- | `width` | String | `"100%"` | |
1027
- | `maxWidth` | String | `"1200px"` | |
1028
- | `gap` | String | `"1.5rem"` | |
1029
- | `justify` | String | `"center"` | `justify-content`. |
1030
- | `align` | String | `"stretch"` | `align-items`. |
1031
- | `columns` | Number / String | `0` | `0` ? flex layout, `>0` ? grid. |
1032
- | `smCols` / `mdCols` / `lgCols` | Number / String | `""` | Breakpoint columns. |
1033
- | `itemWidth` | String | `""` | Card width override (CSS custom property). |
1034
-
1035
- **Slots** ? `toggle` (e.g. monthly/yearly switch), `default` (pricing cards).
1036
-
1037
- ---
1038
-
1039
- ### AbDarkModeToggler
1040
-
1041
- **Props**
1042
-
1043
- | Name | Type | Default |
1044
- | ------ | ------ | ----------------------------------------------------- |
1045
- | `size` | String | `"md"` (supports `xs`, `sm`, `md`, `lg`, `xl`, `2xl`) |
1046
-
1047
- **Slots** ? `dark-icon`, `light-icon` ? override the sun/moon icons.
1048
-
1049
- ---
1050
-
1051
- ### AbPricingTable
1052
-
1053
- **Props**
1054
-
1055
- | Name | Type | Default | Notes |
1056
- | ---- | ---- | ------- | ----- |
1057
- | `features` | Array | `**required**` | Array of feature definitions. Example: `{ key: "chat", title: "Chat support" }`. |
1058
- | `packages` | Array | `**required**` | Array of package configurations. Supports price, regularPrice, badge, features (Y/N map), and button options. |
1059
-
1060
- **Events** ? `select-package(packageObject)`.
1061
-
1062
- **Slots** ? `features-header`, `feature-label({feature})`, `package-badge({pkg})`, `package-header({pkg})`, `package-feature({pkg, feature})`, `package-footer({pkg})`.
1063
-
1064
- **v-model** ? No.
1065
-
1066
- ---
1067
-
1068
- ### AbChart
1069
-
1070
- **Props**
1071
-
1072
- | Name | Type | Default | Notes |
1073
- | ------------ | ------ | ------------ | ------------------------------------------------------------------------------------------- |
1074
- | `option` | Object | `{}` | Full ECharts option object. Overrides other props if provided. |
1075
- | `chartType` | String | `""` | Simple chart type: `"line"`, `"bar"`, `"pie"`. |
1076
- | `xAxisData` | Array | `[]` | Categories for the X-axis (used for line/bar). |
1077
- | `seriesData` | Array | `[]` | Data points for the series. Use objects `{ value, name }` for Pie charts. |
1078
- | `xAxisType` | String | `"category"` | X-axis scale type. |
1079
- | `yAxisType` | String | `"value"` | Y-axis scale type. |
1080
- | `legendOrient` | String | `""` | Orientation of the chart legend (e.g., `"vertical"`, `"horizontal"`). |
1081
- | `showPointValues` | Boolean | `false` | If true, displays the value label on each data point in the chart. |
1082
- | `height` | String | `"400px"` | Height of the chart container (e.g., "300px", "50%"). |
1083
-
1084
-
1085
- **Slots** ? None.
1086
-
1087
- ---
1088
-
1089
- ## 4. Composables & Directives
1090
-
1091
- ### Directives
1092
-
1093
- - **`v-tooltip`** ? simple floating hint (registered globally).
1094
- - String: `<ab-button v-tooltip="'Helper text'">`
1095
- - Object: `<ab-button v-tooltip="{ content: 'Text', placement: 'top-start' }">`
1096
-
1097
- ### Global Controller APIs
1098
-
1099
- Import these in your `<script setup>` when you need programmatic dialogs / toasts:
1100
-
1101
- - **Alerts (SweetAlert2 wrapper)**
1102
-
1103
- ```javascript
1104
- import { useAlert } from "vue3-appsbd-ui";
1105
- const { alert } = useAlert();
1106
-
1107
- // success, error, warning, info, confirm
1108
- alert.success("Save Complete", "Changes have been recorded.");
1109
- ```
1110
-
1111
- - **Toast Notifications**
1112
-
1113
- ```javascript
1114
- import { useToast } from "vue3-appsbd-ui";
1115
- const { toast } = useToast();
1116
-
1117
- // success, error, warning, info
1118
- toast.error("Operation failed", { timeout: 5000 });
1119
- ```
1120
-
1121
- - **Theme Controller**
1122
- ```javascript
1123
- import { useTheme } from "vue3-appsbd-ui";
1124
- const { theme, toggleTheme, applyTheme } = useTheme();
1125
- ```
1126
-
1127
- ## 5. Updates & Maintenance
1128
-
1129
- Whenever a **new component** is created:
77
+ ```js
78
+ import { useToast } from "vue3-appsbd-ui";
79
+ const { toast } = useToast();
80
+ toast.error("Failed", { timeout: 5000 }); // .success / .warning / .info
81
+ ```
1130
82
 
1131
- 1. Follow the `Ab{Name}.vue` structure.
1132
- 2. Export it from `src/components/index.js`.
1133
- 3. Create a dedicated reference at `.ai/ai_ref_Ab{Name}.md` with sections: _Installation_, _Usage_, _Props_, _Events_, _Slots_ (and _Exposed Methods_ / _Provides_ / _Injects_ when applicable).
1134
- 4. Add the component to the **Per-Component AI Reference Files** table above (linking to its `.ai/ai_ref_*.md` file) and to the **Full Component API Reference** section, including every prop, event, and slot so AI assistants can wire it up without inspecting source.
83
+ ```js
84
+ import { useTheme } from "vue3-appsbd-ui";
85
+ const { theme, toggleTheme, applyTheme } = useTheme();
86
+ ```