@appsbd/vue3-appsbd-ui 1.0.0
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.
- package/.ai/ai_ref_AbAvatar.md +43 -0
- package/.ai/ai_ref_AbBadge.md +44 -0
- package/.ai/ai_ref_AbButton.md +71 -0
- package/.ai/ai_ref_AbCard.md +53 -0
- package/.ai/ai_ref_AbCarousel.md +47 -0
- package/.ai/ai_ref_AbColorPicker.md +55 -0
- package/.ai/ai_ref_AbConfirmPopover.md +59 -0
- package/.ai/ai_ref_AbCustomField.md +74 -0
- package/.ai/ai_ref_AbDarkModeToggler.md +42 -0
- package/.ai/ai_ref_AbDateTimePicker.md +105 -0
- package/.ai/ai_ref_AbEasyModal.md +62 -0
- package/.ai/ai_ref_AbField.md +93 -0
- package/.ai/ai_ref_AbFileUploader.md +63 -0
- package/.ai/ai_ref_AbFilterPanel.md +71 -0
- package/.ai/ai_ref_AbFormCheck.md +75 -0
- package/.ai/ai_ref_AbImageRadioInput.md +63 -0
- package/.ai/ai_ref_AbInputField.md +71 -0
- package/.ai/ai_ref_AbInputTag.md +73 -0
- package/.ai/ai_ref_AbKbd.md +35 -0
- package/.ai/ai_ref_AbKbdGroup.md +33 -0
- package/.ai/ai_ref_AbModal.md +103 -0
- package/.ai/ai_ref_AbMultiSelect.md +108 -0
- package/.ai/ai_ref_AbNumberField.md +84 -0
- package/.ai/ai_ref_AbPinInput.md +45 -0
- package/.ai/ai_ref_AbPopover.md +64 -0
- package/.ai/ai_ref_AbPricingCard.md +64 -0
- package/.ai/ai_ref_AbPricingContainer.md +49 -0
- package/.ai/ai_ref_AbPricingTable.md +72 -0
- package/.ai/ai_ref_AbProgressbar.md +37 -0
- package/.ai/ai_ref_AbScrollbar.md +48 -0
- package/.ai/ai_ref_AbSettingsForm.md +54 -0
- package/.ai/ai_ref_AbSideMenuItem.md +58 -0
- package/.ai/ai_ref_AbSidebar.md +70 -0
- package/.ai/ai_ref_AbSkeleton.md +41 -0
- package/.ai/ai_ref_AbSlider.md +71 -0
- package/.ai/ai_ref_AbTab.md +38 -0
- package/.ai/ai_ref_AbTable.md +59 -0
- package/.ai/ai_ref_AbTabs.md +47 -0
- package/.ai/ai_ref_AbToggle.md +65 -0
- package/.ai/ai_ref_AbTooltip.md +53 -0
- package/.ai/ai_ref_AbWizard.md +77 -0
- package/.ai/ai_ref_AbWizardStep.md +48 -0
- package/.ai/ai_ref_global_config.md +66 -0
- package/.ai/ltr-after.png +0 -0
- package/.ai/rtl-after.png +0 -0
- package/.ai/rtl-before.png +0 -0
- package/AI_REFERENCE.md +1178 -0
- package/dist/skins/_prefix.scss +1 -0
- package/dist/skins/black.css +1 -0
- package/dist/skins/black.scss +3 -0
- package/dist/skins/cyan.css +1 -0
- package/dist/skins/cyan.scss +3 -0
- package/dist/skins/default.css +1 -0
- package/dist/skins/default.scss +5 -0
- package/dist/skins/gray.css +1 -0
- package/dist/skins/gray.scss +3 -0
- package/dist/skins/green.css +1 -0
- package/dist/skins/green.scss +5 -0
- package/dist/skins/orange.css +1 -0
- package/dist/skins/orange.scss +3 -0
- package/dist/skins/pink.css +1 -0
- package/dist/skins/pink.scss +3 -0
- package/dist/skins/purple.css +1 -0
- package/dist/skins/purple.scss +3 -0
- package/dist/skins/red.css +1 -0
- package/dist/skins/red.scss +3 -0
- package/dist/skins/themes/_black.scss +6 -0
- package/dist/skins/themes/_blue.scss +43 -0
- package/dist/skins/themes/_common_variable.scss +589 -0
- package/dist/skins/themes/_cyan.scss +6 -0
- package/dist/skins/themes/_gray.scss +6 -0
- package/dist/skins/themes/_green.scss +6 -0
- package/dist/skins/themes/_grid.scss +27 -0
- package/dist/skins/themes/_orange.scss +6 -0
- package/dist/skins/themes/_pink.scss +6 -0
- package/dist/skins/themes/_purple.scss +6 -0
- package/dist/skins/themes/_red.scss +6 -0
- package/dist/skins/themes/_violet.scss +6 -0
- package/dist/skins/violet.css +1 -0
- package/dist/skins/violet.scss +3 -0
- package/dist/style.css +1 -0
- package/dist/vue3-appsbd-ui.cjs.js +201 -0
- package/dist/vue3-appsbd-ui.es.js +9294 -0
- package/package.json +60 -0
- package/readme.md +136 -0
package/AI_REFERENCE.md
ADDED
|
@@ -0,0 +1,1178 @@
|
|
|
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");
|
|
38
|
+
```
|
|
39
|
+
|
|
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
|
+
| `AbDarkModeToggler` | Light / dark theme toggle (pairs with `useTheme`). | [.ai/ai_ref_AbDarkModeToggler.md](./.ai/ai_ref_AbDarkModeToggler.md) |
|
|
96
|
+
|
|
97
|
+
## 3. Full Component API Reference
|
|
98
|
+
|
|
99
|
+
> **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.
|
|
100
|
+
|
|
101
|
+
### AppsbdUIConfigure
|
|
102
|
+
|
|
103
|
+
Global configuration setter for library-wide tokens.
|
|
104
|
+
|
|
105
|
+
**Options**
|
|
106
|
+
|
|
107
|
+
| Name | Type | Default |
|
|
108
|
+
| ----------------- | ----------------- | ---------------------- |
|
|
109
|
+
| `monthNames` | `String[]` | English full names |
|
|
110
|
+
| `monthNamesShort` | `String[]` | English short names |
|
|
111
|
+
| `dayNames` | `String[]` | English 3-letter names |
|
|
112
|
+
| `formatDigit` | `Function` | `(val) => String(val)` |
|
|
113
|
+
| `rangeSeparator` | `String` | `' ↔ '` |
|
|
114
|
+
| `is24Hour` | `Boolean` | `false` |
|
|
115
|
+
| `dateDataFormat` | `String` | `'YYYY-MM-DD'` |
|
|
116
|
+
| `dateDisplayFormat`| `String` | `'YYYY-MM-DD'` |
|
|
117
|
+
| `datetimeDataFormat`| `String` | `'YYYY-MM-DD HH:mm'` |
|
|
118
|
+
| `datetimeDisplayFormat`| `String` | `'YYYY-MM-DD HH:mm'` |
|
|
119
|
+
| `timeDataFormat` | `String` | `'HH:mm'` |
|
|
120
|
+
| `timeDisplayFormat`| `String` | `'HH:mm'` |
|
|
121
|
+
| `inputContainerClass`| `String` | `'mb-3'` |
|
|
122
|
+
| `toastPosition` | `String` | `'top-right'` |
|
|
123
|
+
| `toastDesign` | `String` | `'default'` |
|
|
124
|
+
| `toastTimeout` | `Number` | `5000` |
|
|
125
|
+
| `toastCloseButton`| `Boolean` | `true` |
|
|
126
|
+
| `toastPauseOnHover`| `Boolean` | `true` |
|
|
127
|
+
| `toastPauseOnFocusLoss`| `Boolean` | `true` |
|
|
128
|
+
| `toastShowProgress`| `Boolean` | `true` |
|
|
129
|
+
| `trueValue` | `any` | `'Y'` |
|
|
130
|
+
| `falseValue` | `any` | `'N'` |
|
|
131
|
+
| `size` | `String` | `'md'` |
|
|
132
|
+
|
|
133
|
+
---
|
|
134
|
+
|
|
135
|
+
### AbButton
|
|
136
|
+
|
|
137
|
+
**Props**
|
|
138
|
+
|
|
139
|
+
| Name | Type | Default | Notes |
|
|
140
|
+
| --------------------- | ------- | ----------- | ------------------------------------------------------- |
|
|
141
|
+
| `type` | String | `"button"` | Native button type. |
|
|
142
|
+
| `variant` | String | `"primary"` | Color variant (`primary`, `secondary`, `danger`, etc.). |
|
|
143
|
+
| `outlineVariant` | String | `"primary"` | Color variant applied when `isOutline` is true. |
|
|
144
|
+
| `size` | String | `"md"` | Button size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
|
|
145
|
+
| `isOutline` | Boolean | `false` | Applies the outline style for the selected variant. |
|
|
146
|
+
| `isIconBtn` | Boolean | `false` | Adjusts formatting for a button with only an icon. |
|
|
147
|
+
| `isAnimated` | Boolean | `false` | Shows built-in loader animation. |
|
|
148
|
+
| `isHideTextOnAnimate` | Boolean | `false` | Hides slot text while animated. |
|
|
149
|
+
| `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
|
+
|
|
157
|
+
**Slots**
|
|
158
|
+
|
|
159
|
+
- `default` ? button label/content.
|
|
160
|
+
- `icon` ? leading icon element.
|
|
161
|
+
- `svg` ? replaces the built-in loader SVG when `isAnimated` is true.
|
|
162
|
+
|
|
163
|
+
**Notes** ? Variant and size are controlled via props (`variant`, `size`).
|
|
164
|
+
|
|
165
|
+
---
|
|
166
|
+
|
|
167
|
+
### AbCard
|
|
168
|
+
|
|
169
|
+
**Props**
|
|
170
|
+
|
|
171
|
+
| Name | Type | Default |
|
|
172
|
+
| ---------------- | ------ | ------- |
|
|
173
|
+
| `containerClass` | String | `""` |
|
|
174
|
+
| `headerClass` | String | `""` |
|
|
175
|
+
| `bodyClass` | String | `""` |
|
|
176
|
+
| `footerClass` | String | `""` |
|
|
177
|
+
|
|
178
|
+
**Slots** ? `header`, `body`, `footer`.
|
|
179
|
+
|
|
180
|
+
**Notes** ? For layout variations (`tile-card`, `item-card`, `insight-card`, etc.), apply those classes to `containerClass` rather than creating new components.
|
|
181
|
+
|
|
182
|
+
---
|
|
183
|
+
|
|
184
|
+
### AbModal
|
|
185
|
+
|
|
186
|
+
**Props**
|
|
187
|
+
|
|
188
|
+
| Name | Type | Default | Notes |
|
|
189
|
+
| -------------------- | ------- | ------- | ------------------------------------------------------- |
|
|
190
|
+
| `isModalVisible` | Boolean | ? | Visibility state (also supports `v-model`). |
|
|
191
|
+
| `modalSize` | String | `""` | Bootstrap size class (`modal-lg`, `modal-xl`, ?). |
|
|
192
|
+
| `modalMsg` | String | `""` | Default message text. |
|
|
193
|
+
| `hideHeader` | Boolean | `false` | |
|
|
194
|
+
| `hideBody` | Boolean | `false` | |
|
|
195
|
+
| `hideFooter` | Boolean | `false` | |
|
|
196
|
+
| `hideCrossBtn` | Boolean | `false` | Hide the ? close button. |
|
|
197
|
+
| `hideForm` | Boolean | `false` | Render root as `<div>` instead of VeeValidate `<Form>`. |
|
|
198
|
+
| `bodyClass` | String | `""` | |
|
|
199
|
+
| `isModalCenter` | Boolean | `true` | Vertical centering. |
|
|
200
|
+
| `isBorder` | Boolean | `false` | Show modal border. |
|
|
201
|
+
| `iconContainerClass` | String | `""` | |
|
|
202
|
+
| `headerClass` | String | `""` | Preferred class prop for `.modal-header`. |
|
|
203
|
+
|
|
204
|
+
**Events**
|
|
205
|
+
|
|
206
|
+
- `onSubmit(event, { resetForm })` ? form submission.
|
|
207
|
+
- `loading-status(boolean)` ? loader state changed.
|
|
208
|
+
- `close` ? modal closed.
|
|
209
|
+
|
|
210
|
+
**Slots**
|
|
211
|
+
|
|
212
|
+
- `default` ? form content (wrapped in VeeValidate `<Form>` unless `hideForm`).
|
|
213
|
+
- `header`, `headerIcon`, `headerTitleContainer`, `headerTitle`, `headerSubTitle` ? header pieces.
|
|
214
|
+
- `body`, `loader` ? body / loader overrides.
|
|
215
|
+
- `footer({ close })` ? footer; receives `close` method.
|
|
216
|
+
|
|
217
|
+
**Exposed methods** ? `showLoader(status, msg)`, `close()`, `clearForm()`, `returnClear()`, `showMsgOnly(msg, isHideFooter)`, `setMessageOnly(status)`.
|
|
218
|
+
|
|
219
|
+
---
|
|
220
|
+
|
|
221
|
+
### AbEasyModal
|
|
222
|
+
|
|
223
|
+
A thin wrapper around `AbModal` exposing imperative open/close.
|
|
224
|
+
|
|
225
|
+
**Props** ? forwards all `AbModal` props via `$attrs`.
|
|
226
|
+
|
|
227
|
+
**Slots**
|
|
228
|
+
|
|
229
|
+
- `action` ? trigger element (renders outside the modal).
|
|
230
|
+
- `title` ? modal title.
|
|
231
|
+
- `body` ? modal body.
|
|
232
|
+
- `footer({ closeModal, close })` ? modal footer.
|
|
233
|
+
|
|
234
|
+
**Exposed methods** ? `openModal()`, `closeModal()`.
|
|
235
|
+
|
|
236
|
+
---
|
|
237
|
+
|
|
238
|
+
### AbProgressbar
|
|
239
|
+
|
|
240
|
+
**Props**
|
|
241
|
+
|
|
242
|
+
| Name | Type | Default | Validator |
|
|
243
|
+
| --------------- | ------ | ----------- | --------------------------------------------------------------- |
|
|
244
|
+
| `minValue` | Number | `0` | |
|
|
245
|
+
| `maxValue` | Number | `100` | |
|
|
246
|
+
| `progressValue` | Number | `0` | Current value (0-100). |
|
|
247
|
+
| `color` | String | `"primary"` | `success`, `danger`, `info`, `warning`, `primary`, `secondary`. |
|
|
248
|
+
| `size` | String | `"md"` | `xs`, `sm`, `md`, `lg`, `xl`, `xxl`. |
|
|
249
|
+
|
|
250
|
+
**Slots** ? `default` ? progress label (uses CSS custom property `--progress-value`).
|
|
251
|
+
|
|
252
|
+
---
|
|
253
|
+
|
|
254
|
+
### AbInputField
|
|
255
|
+
|
|
256
|
+
**Props**
|
|
257
|
+
|
|
258
|
+
| Name | Type | Default | Notes |
|
|
259
|
+
| ------------------- | --------------- | ---------- | ------------------------------------------------- |
|
|
260
|
+
| `modelValue` | any | `null` | v-model binding. |
|
|
261
|
+
| `label` | String | `""` | |
|
|
262
|
+
| `placeholder` | String | `""` | |
|
|
263
|
+
| `type` | String | `"text"` | Auto-detects `password`. |
|
|
264
|
+
| `name` | String | _required_ | VeeValidate field name. |
|
|
265
|
+
| `size` | String | `"md"` | Input size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
|
|
266
|
+
| `isCodeInput` | Boolean | `false` | |
|
|
267
|
+
| `rules` | String / Object | `""` | VeeValidate rules. |
|
|
268
|
+
| `containerClass` | String | `"mb-3"` | |
|
|
269
|
+
| `hints` | String | `""` | |
|
|
270
|
+
| `prefix` | String | `""` | |
|
|
271
|
+
| `postfix` | String | `""` | |
|
|
272
|
+
| `maxlength` | any | `null` | |
|
|
273
|
+
| `isLeftIconBorder` | Boolean | `false` | |
|
|
274
|
+
| `isRightIconBorder` | Boolean | `false` | |
|
|
275
|
+
| Name | Type | Default | Notes |
|
|
276
|
+
| ------------------- | --------------- | ---------- | ------------------------ |
|
|
277
|
+
| `modelValue` | any | `null` | v-model binding. |
|
|
278
|
+
| `label` | String | `""` | |
|
|
279
|
+
| `placeholder` | String | `""` | |
|
|
280
|
+
| `type` | String | `"text"` | Auto-detects `password`. |
|
|
281
|
+
| `name` | String | _required_ | VeeValidate field name. |
|
|
282
|
+
| `isCodeInput` | Boolean | `false` | |
|
|
283
|
+
| `rules` | String / Object | `""` | VeeValidate rules. |
|
|
284
|
+
| `containerClass` | String | `"mb-3"` | |
|
|
285
|
+
| `hints` | String | `""` | |
|
|
286
|
+
| `prefix` | String | `""` | |
|
|
287
|
+
| `postfix` | String | `""` | |
|
|
288
|
+
| `maxlength` | any | `null` | |
|
|
289
|
+
| `isLeftIconBorder` | Boolean | `false` | |
|
|
290
|
+
| `isRightIconBorder` | Boolean | `false` | |
|
|
291
|
+
|
|
292
|
+
**Events** ? `update:modelValue`, `input`, `keyup`, `keydown`, `paste`.
|
|
293
|
+
|
|
294
|
+
**Slots** ? `label`, `prefix`, `postfix`, `hints`.
|
|
295
|
+
|
|
296
|
+
**v-model** ? yes.
|
|
297
|
+
|
|
298
|
+
---
|
|
299
|
+
|
|
300
|
+
### AbNumberField
|
|
301
|
+
|
|
302
|
+
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).
|
|
303
|
+
|
|
304
|
+
**Props**
|
|
305
|
+
|
|
306
|
+
| Name | Type | Default | Notes |
|
|
307
|
+
| ------------------- | --------------- | ---------- | ----------------------------------------------------------------------------- |
|
|
308
|
+
| `modelValue` | any | `null` | v-model binding. |
|
|
309
|
+
| `label` | String | `""` | |
|
|
310
|
+
| `placeholder` | String | `""` | |
|
|
311
|
+
| `name` | String | _required_ | VeeValidate field name. |
|
|
312
|
+
| `rules` | String / Object | `""` | VeeValidate rules. |
|
|
313
|
+
| `containerClass` | String | `"mb-3"` | |
|
|
314
|
+
| `hints` | String | `""` | |
|
|
315
|
+
| `prefix` | String | `""` | |
|
|
316
|
+
| `postfix` | String | `""` | |
|
|
317
|
+
| `min` | Number / String | `null` | Minimum allowed value; also clamps input and disables the minus button. |
|
|
318
|
+
| `max` | Number / String | `null` | Maximum allowed value; also clamps input and disables the plus button. |
|
|
319
|
+
| `step` | Number / String | `1` | Increment/decrement step amount. |
|
|
320
|
+
| `showButtons` | Boolean | `true` | Show the minus/plus controls. |
|
|
321
|
+
| `disabled` | Boolean | `false` | Disable the field and both buttons. |
|
|
322
|
+
| `isBorder` | Boolean | `false` | Show inner borders between minus/input/plus (default renders as seamless). |
|
|
323
|
+
| `isLeftIconBorder` | Boolean | `false` | Keep the left icon border (prefix) when used with a prefix slot. |
|
|
324
|
+
| `isRightIconBorder` | Boolean | `false` | Keep the right icon border (postfix) when used with a postfix slot. |
|
|
325
|
+
|
|
326
|
+
**Events** — `update:modelValue`, `input`, `keyup`, `keydown`, `paste`.
|
|
327
|
+
|
|
328
|
+
**Slots** — `label`, `prefix`, `postfix`, `hints`.
|
|
329
|
+
|
|
330
|
+
**v-model** — yes.
|
|
331
|
+
|
|
332
|
+
---
|
|
333
|
+
|
|
334
|
+
### AbField
|
|
335
|
+
|
|
336
|
+
Polymorphic field: renders text/number/textarea/select/multiselect/tag/checkbox/radio/toggle/switch based on `type`.
|
|
337
|
+
|
|
338
|
+
**Props**
|
|
339
|
+
|
|
340
|
+
| Name | Type | Default | Notes |
|
|
341
|
+
| ------------------- | ------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
|
342
|
+
| `val` | any | `null` | Initial value. |
|
|
343
|
+
| `label` | String | _required_ | |
|
|
344
|
+
| `name` | String | _required_ | |
|
|
345
|
+
| `type` | String | `"text"` | `text`, `email`, `password`, `number`, `url`, `textarea`, `select`, `multiselect`, `tag`, `checkbox`, `radio`, `toggle`, `switch`. |
|
|
346
|
+
| `prefix` | String | `""` | |
|
|
347
|
+
| `postfix` | String | `""` | |
|
|
348
|
+
| `modelValue` | String / Number / Boolean / Array / Object | `""` | |
|
|
349
|
+
| `isCodeInput` | Boolean | `false` | |
|
|
350
|
+
| `containerClass` | String | `""` | |
|
|
351
|
+
| `maxlength` | String / Number | `""` | |
|
|
352
|
+
| `minlength` | String / Number | `""` | |
|
|
353
|
+
| `placeholder` | String | `""` | |
|
|
354
|
+
| `hints` | String / Array | `""` | |
|
|
355
|
+
| `rules` | String / Array | `""` | VeeValidate rules. |
|
|
356
|
+
| `options` | Array | `[]` | For select/checkbox/radio. |
|
|
357
|
+
| `labelKey` | String | `"title"` | |
|
|
358
|
+
| `valueKey` | String | `"val"` | |
|
|
359
|
+
| `max` | Number | `-1` | Max selections (`-1` = unlimited). |
|
|
360
|
+
| `size` | String | `"md"` | |
|
|
361
|
+
| `object` | Boolean | `false` | Return full objects for multiselect. |
|
|
362
|
+
| `searchable` | Boolean | `false` | |
|
|
363
|
+
| `description` | String | `""` | |
|
|
364
|
+
| `helptext` | String | `""` | |
|
|
365
|
+
| `isInline` | Boolean | `false` | Checkbox/radio layout. |
|
|
366
|
+
| `trueValue` | any | `"Y"` | Toggle/switch. |
|
|
367
|
+
| `falseValue` | any | `"N"` | Toggle/switch. |
|
|
368
|
+
| `title` | String / null | `null` | Toggle/switch title. |
|
|
369
|
+
| `isLeftIconBorder` | Boolean | `false` | |
|
|
370
|
+
| `isRightIconBorder` | Boolean | `false` | |
|
|
371
|
+
|
|
372
|
+
**Events** ? `update:modelValue`, `clear(event)`, `change(value)`, `select(value)`.
|
|
373
|
+
|
|
374
|
+
**Slots** ? `label`, `prefix`, `postfix`, `description`, `helptext`, `option`, `singlelabel`.
|
|
375
|
+
|
|
376
|
+
**v-model** ? yes.
|
|
377
|
+
|
|
378
|
+
---
|
|
379
|
+
|
|
380
|
+
### AbCustomField
|
|
381
|
+
|
|
382
|
+
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.
|
|
383
|
+
|
|
384
|
+
**Props**
|
|
385
|
+
|
|
386
|
+
| Name | Type | Default |
|
|
387
|
+
| ------------- | ------ | ------- |
|
|
388
|
+
| `fieldInputs` | Array | `[]` |
|
|
389
|
+
| `size` | String | `"sm"` |
|
|
390
|
+
| `customProps` | Object | `{}` |
|
|
391
|
+
|
|
392
|
+
**Scoped slots** ? per-field id: `Label{id}`, `Hints{id}`, `Prefix{id}`, `Postfix{id}`, `Icon{id}`, `Description{id}`, `HelpText{id}`.
|
|
393
|
+
|
|
394
|
+
---
|
|
395
|
+
|
|
396
|
+
### AbPinInput
|
|
397
|
+
|
|
398
|
+
**Props**
|
|
399
|
+
|
|
400
|
+
| Name | Type | Default |
|
|
401
|
+
| --------------- | ------- | ------- |
|
|
402
|
+
| `modelValue` | String | ? |
|
|
403
|
+
| `length` | Number | `6` |
|
|
404
|
+
| `size` | String | `"md"` |
|
|
405
|
+
| `showSeparator` | Boolean | `false` |
|
|
406
|
+
| `groupSize` | Number | `3` |
|
|
407
|
+
|
|
408
|
+
**Events** ? `update:modelValue(pin)`.
|
|
409
|
+
|
|
410
|
+
**v-model** ? yes.
|
|
411
|
+
|
|
412
|
+
---
|
|
413
|
+
|
|
414
|
+
### AbDateTimePicker
|
|
415
|
+
|
|
416
|
+
**Props**
|
|
417
|
+
|
|
418
|
+
| Name | Type | Default | Notes |
|
|
419
|
+
| --------------------------------------------- | --------------- | -------------- | ------------------------------------------------------------- |
|
|
420
|
+
| `modelValue` | String / Object | `null` | For range mode, `{ start, end }`. |
|
|
421
|
+
| `label` | String | `""` | |
|
|
422
|
+
| `placeholder` | String | `""` | |
|
|
423
|
+
| `name` | String | _required_ | |
|
|
424
|
+
| `rules` | String / Object | `""` | |
|
|
425
|
+
| `isRange` | Boolean | `false` | |
|
|
426
|
+
| `size` | String | `"md"` | `xs`, `sm`, `md`, `lg`, `xl`, `xxl`. |
|
|
427
|
+
| `containerClass` | String | `"mb-3"` | |
|
|
428
|
+
| `hints` | String | `""` | |
|
|
429
|
+
| `isDisable` | Boolean | `false` | |
|
|
430
|
+
| `visibility` | String | `"click"` | |
|
|
431
|
+
| `mask` | String | `""` | |
|
|
432
|
+
| `dataFormat` | String | `"YYYY-MM-DD"` | |
|
|
433
|
+
| `displayFormat` | String | `"YYYY-MM-DD"` | |
|
|
434
|
+
| `maxDate` | Date / String | `undefined` | |
|
|
435
|
+
| `minDate` | Date / String | `undefined` | |
|
|
436
|
+
| `disableDates` | Array | `[]` | Accepts `Date`, string, or `{ repeat: { weekdays: [...] } }`. |
|
|
437
|
+
| `showInInput` | Boolean | `true` | Input vs button trigger. |
|
|
438
|
+
| `monthNames` / `monthNamesShort` / `dayNames` | Array | `undefined` | i18n overrides. |
|
|
439
|
+
| `formatDigit` | Function | `undefined` | Locale digit formatter. |
|
|
440
|
+
| `rangeSeparator` | String | `undefined` | |
|
|
441
|
+
| `mode` | String | `"date"` | `date`, `time`, `datetime`. |
|
|
442
|
+
| `is24Hour` | Boolean | `undefined` | |
|
|
443
|
+
| `minuteStep` | Number | `1` | |
|
|
444
|
+
| `isLeftIconBorder` | Boolean | `false` | |
|
|
445
|
+
| `isRightIconBorder` | Boolean | `false` | |
|
|
446
|
+
| Name | Type | Default | Notes |
|
|
447
|
+
| --------------------------------------------- | --------------- | -------------- | ------------------------------------------------------------- |
|
|
448
|
+
| `modelValue` | String / Object | `null` | For range mode, `{ start, end }`. |
|
|
449
|
+
| `label` | String | `""` | |
|
|
450
|
+
| `placeholder` | String | `""` | |
|
|
451
|
+
| `name` | String | _required_ | |
|
|
452
|
+
| `rules` | String / Object | `""` | |
|
|
453
|
+
| `isRange` | Boolean | `false` | |
|
|
454
|
+
| `containerClass` | String | `"mb-3"` | |
|
|
455
|
+
| `hints` | String | `""` | |
|
|
456
|
+
| `isDisable` | Boolean | `false` | |
|
|
457
|
+
| `visibility` | String | `"click"` | |
|
|
458
|
+
| `mask` | String | `""` | |
|
|
459
|
+
| `dataFormat` | String | `"YYYY-MM-DD"` | |
|
|
460
|
+
| `displayFormat` | String | `"YYYY-MM-DD"` | |
|
|
461
|
+
| `maxDate` | Date / String | `undefined` | |
|
|
462
|
+
| `minDate` | Date / String | `undefined` | |
|
|
463
|
+
| `disableDates` | Array | `[]` | Accepts `Date`, string, or `{ repeat: { weekdays: [...] } }`. |
|
|
464
|
+
| `showInInput` | Boolean | `true` | Input vs button trigger. |
|
|
465
|
+
| `monthNames` / `monthNamesShort` / `dayNames` | Array | `undefined` | i18n overrides. |
|
|
466
|
+
| `formatDigit` | Function | `undefined` | Locale digit formatter. |
|
|
467
|
+
| `rangeSeparator` | String | `undefined` | |
|
|
468
|
+
| `mode` | String | `"date"` | `date`, `time`, `datetime`. |
|
|
469
|
+
| `is24Hour` | Boolean | `undefined` | |
|
|
470
|
+
| `minuteStep` | Number | `1` | |
|
|
471
|
+
| `isLeftIconBorder` | Boolean | `false` | |
|
|
472
|
+
| `isRightIconBorder` | Boolean | `false` | |
|
|
473
|
+
|
|
474
|
+
**Slots** ? `label`, `prefix`, `icon`, `hints`, `picker-container({ isRange, showInInput, value })`.
|
|
475
|
+
|
|
476
|
+
**v-model** ? yes.
|
|
477
|
+
|
|
478
|
+
---
|
|
479
|
+
|
|
480
|
+
### AbAvatar
|
|
481
|
+
|
|
482
|
+
**Props**
|
|
483
|
+
|
|
484
|
+
| Name | Type | Default | Notes |
|
|
485
|
+
| ------------ | ------- | --------- | -------------------------------------------------- |
|
|
486
|
+
| `src` | String | `""` | Image source. |
|
|
487
|
+
| `alt` | String | `""` | Alt text. |
|
|
488
|
+
| `variant` | String | `"image"` | `"add"` enables file upload mode. |
|
|
489
|
+
| `size` | String | `"md"` | Avatar size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
|
|
490
|
+
| `isActive` | Boolean | `false` | Renders active status dot. |
|
|
491
|
+
| `isVerified` | Boolean | `false` | Renders verified badge and border. |
|
|
492
|
+
| Name | Type | Default | Notes |
|
|
493
|
+
| --------- | ------ | --------- | ---------------------------------------- |
|
|
494
|
+
| `src` | String | `""` | |
|
|
495
|
+
| `alt` | String | `""` | |
|
|
496
|
+
| `variant` | String | `"image"` | `"image"` or `"add"` (file-upload mode). |
|
|
497
|
+
|
|
498
|
+
**Slots** ? `default` ? text context (Verified badge is rendered inherently via `isVerified`).
|
|
499
|
+
|
|
500
|
+
---
|
|
501
|
+
|
|
502
|
+
### AbTabs
|
|
503
|
+
|
|
504
|
+
**Props**
|
|
505
|
+
|
|
506
|
+
| Name | Type | Default |
|
|
507
|
+
| ------------------- | ------- | ------------- |
|
|
508
|
+
| `tabContainerClass` | String | ? |
|
|
509
|
+
| `navContainerClass` | String | ? |
|
|
510
|
+
| `tabDetailsClass` | String | ? |
|
|
511
|
+
| `navClass` | String | `"nav-pills"` |
|
|
512
|
+
| `tabClass` | String | `""` |
|
|
513
|
+
| `isRouteMode` | Boolean | `false` |
|
|
514
|
+
|
|
515
|
+
**Slots** ? `default` ? place `<ab-tab>` children.
|
|
516
|
+
|
|
517
|
+
---
|
|
518
|
+
|
|
519
|
+
### AbTab
|
|
520
|
+
|
|
521
|
+
**Props**
|
|
522
|
+
|
|
523
|
+
| Name | Type | Default |
|
|
524
|
+
| ---------- | --------------- | ---------- |
|
|
525
|
+
| `title` | String | _required_ |
|
|
526
|
+
| `selected` | Boolean | `false` |
|
|
527
|
+
| `to` | String / Object | `null` |
|
|
528
|
+
|
|
529
|
+
**Slots** ? `default`, `icon`.
|
|
530
|
+
|
|
531
|
+
---
|
|
532
|
+
|
|
533
|
+
### AbFormCheck / AbRadioInput
|
|
534
|
+
|
|
535
|
+
`AbRadioInput` is an alias of `AbFormCheck`.
|
|
536
|
+
|
|
537
|
+
**Props**
|
|
538
|
+
|
|
539
|
+
| Name | Type | Default | Notes |
|
|
540
|
+
| ---------------- | ------------- | ------------ | -------------------------------------------------------------------------------- |
|
|
541
|
+
| `modelValue` | any | ? | |
|
|
542
|
+
| `label` | String / null | `null` | |
|
|
543
|
+
| `rules` | String | `""` | |
|
|
544
|
+
| `val` | any | `null` | |
|
|
545
|
+
| `type` | String | `"checkbox"` | `"checkbox"` or `"radio"`. |
|
|
546
|
+
| `isInline` | Boolean | `false` | |
|
|
547
|
+
| `options` | Array | `[]` | Each: `{ val, title, description?, icon?, img_src?, iconComponent?, disable? }`. |
|
|
548
|
+
| `name` | String | _required_ | |
|
|
549
|
+
| `limit` | Number | `0` | `0` = unlimited. |
|
|
550
|
+
| `containerClass` | String | `"mb-3"` | |
|
|
551
|
+
| `size` | String | `"md"` | |
|
|
552
|
+
| `iconSize` | String | `"24px"` | |
|
|
553
|
+
| `iconGap` | String | `"10px"` | |
|
|
554
|
+
| `variant` | String | `"default"` | `default`, `card`, `segmented`, `pill`. |
|
|
555
|
+
|
|
556
|
+
**Slots** ? `label`, `description`, `help-text`, `input-img-{title}`, `input-icon-{title}`, `label-{title}`, `description-{title}`.
|
|
557
|
+
|
|
558
|
+
**v-model** ? yes.
|
|
559
|
+
|
|
560
|
+
---
|
|
561
|
+
|
|
562
|
+
### AbImageRadioInput
|
|
563
|
+
|
|
564
|
+
**Props**
|
|
565
|
+
|
|
566
|
+
| Name | Type | Default |
|
|
567
|
+
| --------------- | ------- | ------------------------- |
|
|
568
|
+
| `modelValue` | any | ? |
|
|
569
|
+
| `width` | String | `"auto"` |
|
|
570
|
+
| `height` | String | `"auto"` |
|
|
571
|
+
| `maxWidth` | String | `"inherit"` |
|
|
572
|
+
| `maxImgWidth` | String | `"50%"` |
|
|
573
|
+
| `borderRadius` | String | `"5px"` |
|
|
574
|
+
| `margin` | String | `"0 15px 15px 0"` |
|
|
575
|
+
| `padding` | String | `"10px"` |
|
|
576
|
+
| `selectorTop` | String | `"5px"` |
|
|
577
|
+
| `selectorLeft` | String | `"5px"` |
|
|
578
|
+
| `selectorColor` | String | `""` |
|
|
579
|
+
| `iconSize` | String | `"inherit"` |
|
|
580
|
+
| `options` | Array | `[]` |
|
|
581
|
+
| `isInline` | Boolean | `false` |
|
|
582
|
+
| `optionClass` | String | `""` |
|
|
583
|
+
| `labelBorder` | String | `"1px solid transparent"` |
|
|
584
|
+
|
|
585
|
+
Option shape: `{ val, label?, img_src?, icon?, iconComponent?, icon_ctnr_class?, class? }`.
|
|
586
|
+
|
|
587
|
+
**Slots** ? `icon_image(option)`, `label(option)`, `label-{val}`.
|
|
588
|
+
|
|
589
|
+
**v-model** ? yes.
|
|
590
|
+
|
|
591
|
+
---
|
|
592
|
+
|
|
593
|
+
### AbToggle
|
|
594
|
+
|
|
595
|
+
**Props**
|
|
596
|
+
|
|
597
|
+
| Name | Type | Default |
|
|
598
|
+
| ---------------- | ------------- | ---------- |
|
|
599
|
+
| `modelValue` | any | ? |
|
|
600
|
+
| `label` | String / null | `null` |
|
|
601
|
+
| `val` | any | `"N"` |
|
|
602
|
+
| `name` | String | _required_ |
|
|
603
|
+
| `containerClass` | String | `"mb-3"` |
|
|
604
|
+
| `size` | String | `"md"` |
|
|
605
|
+
| `trueValue` | any | `"Y"` |
|
|
606
|
+
| `falseValue` | any | `"N"` |
|
|
607
|
+
| `title` | String / null | `null` |
|
|
608
|
+
| `description` | String / null | `null` |
|
|
609
|
+
| `hints` | String / null | `null` |
|
|
610
|
+
|
|
611
|
+
**Slots** ? `label`, `title`, `description`, `descriptionContainer`, `hints`.
|
|
612
|
+
|
|
613
|
+
**v-model** ? yes.
|
|
614
|
+
|
|
615
|
+
---
|
|
616
|
+
|
|
617
|
+
### AbInputTag
|
|
618
|
+
|
|
619
|
+
**Props**
|
|
620
|
+
|
|
621
|
+
| Name | Type | Default | Notes |
|
|
622
|
+
| ------------------- | --------------- | ---------- | ------------------------------------ |
|
|
623
|
+
| `modelValue` | Array | `[]` | |
|
|
624
|
+
| `options` | Array | `[]` | Each: `{ val, title }` or a string. |
|
|
625
|
+
| `label` | String | `""` | |
|
|
626
|
+
| `size` | String | `"md"` | `xs`, `sm`, `md`, `lg`, `xl`, `xxl`. |
|
|
627
|
+
| `placeholder` | String | `""` | |
|
|
628
|
+
| `name` | String | _required_ | |
|
|
629
|
+
| `rules` | String / Object | `""` | |
|
|
630
|
+
| `containerClass` | String | `"mb-3"` | |
|
|
631
|
+
| `hints` | String | `""` | |
|
|
632
|
+
| `prefix` | String | `""` | |
|
|
633
|
+
| `postfix` | String | `""` | |
|
|
634
|
+
| `max` | Number | `0` | `0` = unlimited. |
|
|
635
|
+
| `isLeftIconBorder` | Boolean | `false` | |
|
|
636
|
+
| `isRightIconBorder` | Boolean | `false` | |
|
|
637
|
+
| Name | Type | Default | Notes |
|
|
638
|
+
| ------------------- | --------------- | ---------- | ----------------------------------- |
|
|
639
|
+
| `modelValue` | Array | `[]` | |
|
|
640
|
+
| `options` | Array | `[]` | Each: `{ val, title }` or a string. |
|
|
641
|
+
| `label` | String | `""` | |
|
|
642
|
+
| `placeholder` | String | `""` | |
|
|
643
|
+
| `name` | String | _required_ | |
|
|
644
|
+
| `rules` | String / Object | `""` | |
|
|
645
|
+
| `containerClass` | String | `"mb-3"` | |
|
|
646
|
+
| `hints` | String | `""` | |
|
|
647
|
+
| `prefix` | String | `""` | |
|
|
648
|
+
| `postfix` | String | `""` | |
|
|
649
|
+
| `max` | Number | `0` | `0` = unlimited. |
|
|
650
|
+
| `isLeftIconBorder` | Boolean | `false` | |
|
|
651
|
+
| `isRightIconBorder` | Boolean | `false` | |
|
|
652
|
+
|
|
653
|
+
**Events** ? `update:modelValue(array)`.
|
|
654
|
+
|
|
655
|
+
**Slots** ? `label`, `prefix`, `postfix`, `hints`.
|
|
656
|
+
|
|
657
|
+
**v-model** ? yes.
|
|
658
|
+
|
|
659
|
+
---
|
|
660
|
+
|
|
661
|
+
### AbBadge
|
|
662
|
+
|
|
663
|
+
**Props**
|
|
664
|
+
|
|
665
|
+
| Name | Type | Default | Notes |
|
|
666
|
+
| --------------- | ------- | ----------- | ----- |
|
|
667
|
+
| `size` | String | `"md"` | |
|
|
668
|
+
| `variant` | String | `"primary"` | |
|
|
669
|
+
| `isOutline` | Boolean | `false` | |
|
|
670
|
+
| `isRoundedPill` | Boolean | `false` | |
|
|
671
|
+
| `isDot` | Boolean | `false` | |
|
|
672
|
+
| `isAvatar` | Boolean | `false` | |
|
|
673
|
+
| `isClose` | Boolean | `false` | |
|
|
674
|
+
| `isAdd` | Boolean | `false` | |
|
|
675
|
+
|
|
676
|
+
**Slots** ? `default` ? badge content.
|
|
677
|
+
|
|
678
|
+
---
|
|
679
|
+
|
|
680
|
+
### AbSidebar
|
|
681
|
+
|
|
682
|
+
**Props**
|
|
683
|
+
|
|
684
|
+
| Name | Type | Default |
|
|
685
|
+
| ------------------- | ------- | ------------ |
|
|
686
|
+
| `appUniqueId` | String | `"apbd"` |
|
|
687
|
+
| `hideSeperator` | Boolean | `false` |
|
|
688
|
+
| `mobileFullHeight` | Boolean | `false` |
|
|
689
|
+
| `enableSearch` | Boolean | `false` |
|
|
690
|
+
| `searchTargetClass` | String | `"nav-item"` |
|
|
691
|
+
|
|
692
|
+
**Slots** ? `header`, `default` (menu items), `footer`, `collapse-icon`.
|
|
693
|
+
|
|
694
|
+
**Provides** ? `isCollapsed`, `isMobileFullHeight`, `layoutState`.
|
|
695
|
+
|
|
696
|
+
---
|
|
697
|
+
|
|
698
|
+
### AbSideMenuItem
|
|
699
|
+
|
|
700
|
+
**Props**
|
|
701
|
+
|
|
702
|
+
| Name | Type | Notes |
|
|
703
|
+
| ------ | --------------- | -------------------- |
|
|
704
|
+
| `to` | String / Object | Router-link target. |
|
|
705
|
+
| `href` | String | Plain anchor target. |
|
|
706
|
+
|
|
707
|
+
**Slots** ? `default` (label), `icon`, `submenu`, `sectiontitle` (rendering a section title instead of a regular item).
|
|
708
|
+
|
|
709
|
+
**Injects** ? `isCollapsed`, `isMobileFullHeight`, `layoutState`.
|
|
710
|
+
|
|
711
|
+
---
|
|
712
|
+
|
|
713
|
+
### AbSlider
|
|
714
|
+
|
|
715
|
+
**Props**
|
|
716
|
+
|
|
717
|
+
| Name | Type | Default | Notes |
|
|
718
|
+
| ---------------- | -------------- | ------------------------------ | ---------------------------------- |
|
|
719
|
+
| `modelValue` | Number / Array | `null` | Array `[min, max]` for range mode. |
|
|
720
|
+
| `min` | Number | `0` | |
|
|
721
|
+
| `max` | Number | `100` | |
|
|
722
|
+
| `step` | Number | `1` | |
|
|
723
|
+
| `range` | Boolean | `false` | |
|
|
724
|
+
| `size` | String | `"md"` | `sm`, `md`, `lg`. |
|
|
725
|
+
| `showLabels` | Boolean | `false` | |
|
|
726
|
+
| `disabled` | Boolean | `false` | |
|
|
727
|
+
| `label` | String | `""` | |
|
|
728
|
+
| `containerClass` | String | `"mb-3"` | |
|
|
729
|
+
| `hints` | String | `""` | |
|
|
730
|
+
| `formatLabel` | Function | `val => Math.round(val) + "%"` | |
|
|
731
|
+
|
|
732
|
+
**Events** ? `update:modelValue`.
|
|
733
|
+
|
|
734
|
+
**Slots** ? `label`, `prefix`, `postfix`, `thumb({ value, type })` where type is `min` / `max` / `single`, `hints`.
|
|
735
|
+
|
|
736
|
+
**v-model** ? yes.
|
|
737
|
+
|
|
738
|
+
---
|
|
739
|
+
|
|
740
|
+
### AbMultiSelect
|
|
741
|
+
|
|
742
|
+
Custom built-in replacement for `@vueform/multiselect`.
|
|
743
|
+
|
|
744
|
+
**Props**
|
|
745
|
+
|
|
746
|
+
| Name | Type | Default | Notes |
|
|
747
|
+
| ------------------- | --------------- | ---------- | ------------------------------------ |
|
|
748
|
+
| `modelValue` | any | `null` | |
|
|
749
|
+
| `label` | String | `""` | |
|
|
750
|
+
| `placeholder` | String | `""` | |
|
|
751
|
+
| `type` | String | `"text"` | |
|
|
752
|
+
| `name` | String | _required_ | |
|
|
753
|
+
| `rules` | String / Object | `""` | |
|
|
754
|
+
| `containerClass` | String | `"mb-3"` | |
|
|
755
|
+
| `hints` | String | `""` | |
|
|
756
|
+
| `multiple` | Boolean | `false` | Deprecated ? use `mode`. |
|
|
757
|
+
| `searchable` | Boolean | `false` | |
|
|
758
|
+
| `mode` | String | `"single"` | `single`, `multiple`, `tags`. |
|
|
759
|
+
| `size` | String | `"md"` | `xs`, `sm`, `md`, `lg`, `xl`, `xxl`. |
|
|
760
|
+
| `options` | Array | `[]` | |
|
|
761
|
+
| `labelKey` | String | `"title"` | |
|
|
762
|
+
| `valueKey` | String | `"val"` | |
|
|
763
|
+
| `max` | Number | `-1` | `-1` = unlimited. |
|
|
764
|
+
| `object` | Boolean | `false` | Return full objects. |
|
|
765
|
+
| `prefix` | String | `""` | |
|
|
766
|
+
| `postfix` | String | `""` | |
|
|
767
|
+
| `isAjaxSearch` | Boolean | `false` | |
|
|
768
|
+
| `onSearch` | Function | `null` | AJAX search handler. |
|
|
769
|
+
| `hideSelected` | Boolean | `true` | |
|
|
770
|
+
| `loading` | Boolean | `false` | |
|
|
771
|
+
| `disabled` | Boolean | `false` | |
|
|
772
|
+
| `appendToBody` | Boolean | `true` | Teleport dropdown to `<body>`. |
|
|
773
|
+
| `isLeftIconBorder` | Boolean | `false` | |
|
|
774
|
+
| `isRightIconBorder` | Boolean | `false` | |
|
|
775
|
+
| Name | Type | Default | Notes |
|
|
776
|
+
| ------------------- | --------------- | ---------- | ------------------------------ |
|
|
777
|
+
| `modelValue` | any | `null` | |
|
|
778
|
+
| `label` | String | `""` | |
|
|
779
|
+
| `placeholder` | String | `""` | |
|
|
780
|
+
| `type` | String | `"text"` | |
|
|
781
|
+
| `name` | String | _required_ | |
|
|
782
|
+
| `rules` | String / Object | `""` | |
|
|
783
|
+
| `containerClass` | String | `"mb-3"` | |
|
|
784
|
+
| `hints` | String | `""` | |
|
|
785
|
+
| `multiple` | Boolean | `false` | Deprecated ? use `mode`. |
|
|
786
|
+
| `searchable` | Boolean | `false` | |
|
|
787
|
+
| `mode` | String | `"single"` | `single`, `multiple`, `tags`. |
|
|
788
|
+
| `options` | Array | `[]` | |
|
|
789
|
+
| `labelKey` | String | `"title"` | |
|
|
790
|
+
| `valueKey` | String | `"val"` | |
|
|
791
|
+
| `max` | Number | `-1` | `-1` = unlimited. |
|
|
792
|
+
| `object` | Boolean | `false` | Return full objects. |
|
|
793
|
+
| `prefix` | String | `""` | |
|
|
794
|
+
| `postfix` | String | `""` | |
|
|
795
|
+
| `isAjaxSearch` | Boolean | `false` | |
|
|
796
|
+
| `onSearch` | Function | `null` | AJAX search handler. |
|
|
797
|
+
| `hideSelected` | Boolean | `true` | |
|
|
798
|
+
| `loading` | Boolean | `false` | |
|
|
799
|
+
| `disabled` | Boolean | `false` | |
|
|
800
|
+
| `appendToBody` | Boolean | `true` | Teleport dropdown to `<body>`. |
|
|
801
|
+
| `isLeftIconBorder` | Boolean | `false` | |
|
|
802
|
+
| `isRightIconBorder` | Boolean | `false` | |
|
|
803
|
+
|
|
804
|
+
**Events** ? `update:modelValue`, `clear`, `change(value)`, `select(value)`, `open`, `close`, `search-change(query)`.
|
|
805
|
+
|
|
806
|
+
**Slots** ? `label`, `prefix`, `postfix`, `singlelabel(value)`, `option({ option, isSelected })`, `noresults`, `option-loading`, `loader-icon`.
|
|
807
|
+
|
|
808
|
+
**v-model** ? yes.
|
|
809
|
+
|
|
810
|
+
---
|
|
811
|
+
|
|
812
|
+
### AbColorPicker
|
|
813
|
+
|
|
814
|
+
**Props**
|
|
815
|
+
|
|
816
|
+
| Name | Type | Default |
|
|
817
|
+
| -------------- | ------ | --------- |
|
|
818
|
+
| `modelValue` | String | `""` |
|
|
819
|
+
| `name` | String | `"color"` |
|
|
820
|
+
| `colors` | Array | `[]` |
|
|
821
|
+
| `align` | String | `"left"` |
|
|
822
|
+
| `borderRadius` | String | `"50%"` |
|
|
823
|
+
| `size` | String | `"md"` | `xs`, `sm`, `md`, `lg`, `xl`, `xxl`. |
|
|
824
|
+
|
|
825
|
+
Color option shape: `{ name, color, title? }`.
|
|
826
|
+
|
|
827
|
+
**Events** ? `update:modelValue(colorName)`.
|
|
828
|
+
|
|
829
|
+
**v-model** ? yes.
|
|
830
|
+
|
|
831
|
+
---
|
|
832
|
+
|
|
833
|
+
### AbFileUploader
|
|
834
|
+
|
|
835
|
+
**Props**
|
|
836
|
+
|
|
837
|
+
| Name | Type | Default | Notes |
|
|
838
|
+
| ---------------- | --------------------- | ------- | -------------------------- |
|
|
839
|
+
| `modelValue` | File / Array / String | `null` | File object or URL string. |
|
|
840
|
+
| `maxSize` | Number | `2.0` | Max file size in MB. |
|
|
841
|
+
| `label` | String | `""` | |
|
|
842
|
+
| `containerClass` | String | `""` | |
|
|
843
|
+
|
|
844
|
+
**Events** ? `update:modelValue(file)`, `onSelectFiles(files)`.
|
|
845
|
+
|
|
846
|
+
**Slots** ? `label`, `dial` (custom uploader UI), `default`.
|
|
847
|
+
|
|
848
|
+
**v-model** ? yes.
|
|
849
|
+
|
|
850
|
+
---
|
|
851
|
+
|
|
852
|
+
### AbFilterPanel
|
|
853
|
+
|
|
854
|
+
**Props**
|
|
855
|
+
|
|
856
|
+
| Name | Type | Default |
|
|
857
|
+
| ---------------------------------- | ------- | --------------- |
|
|
858
|
+
| `isAdvance` | Boolean | `false` |
|
|
859
|
+
| `isQuickAdvance` | Boolean | `false` |
|
|
860
|
+
| `isSingle` | Boolean | `false` |
|
|
861
|
+
| `isAllowed` | Boolean | `false` |
|
|
862
|
+
| `canScan` | Boolean | `false` |
|
|
863
|
+
| `filterOptions` | Array | `[]` |
|
|
864
|
+
| `scanProps` | String | `""` |
|
|
865
|
+
| `showScanFld` | Boolean | `false` |
|
|
866
|
+
| `showDrGroupText` | Boolean | `true` |
|
|
867
|
+
| `dateFormat` | String | `"MMM DD,YYYY"` |
|
|
868
|
+
| `isSearchable` | Boolean | `false` |
|
|
869
|
+
| `isMaxDate` | Boolean | `true` |
|
|
870
|
+
| `size` | String | `"xs"` |
|
|
871
|
+
| `advanceSearchInputContainerClass` | String | `"col-6"` |
|
|
872
|
+
| `isQuickAdvanceAutoSearch` | Boolean | `false` |
|
|
873
|
+
|
|
874
|
+
**Events** ? `searchFilter(dataArray)` where each item is `{ propName, operators, value }`, `reset`, `ChangeSearchMode(showScan)`.
|
|
875
|
+
|
|
876
|
+
**Slots** ? `prefix`, `postfix`, `icon`, `hints`.
|
|
877
|
+
|
|
878
|
+
---
|
|
879
|
+
|
|
880
|
+
### AbSettingsForm
|
|
881
|
+
|
|
882
|
+
Auto-registers as a wizard step validator when nested inside `AbWizardStep` / `AbWizard`.
|
|
883
|
+
|
|
884
|
+
**Props**
|
|
885
|
+
|
|
886
|
+
| Name | Type | Default | Notes |
|
|
887
|
+
| ---------- | -------- | ---------- | ------------------------------------------- |
|
|
888
|
+
| `onSubmit` | Function | `() => {}` | Return `false` to block wizard progression. |
|
|
889
|
+
|
|
890
|
+
**Slots** ? `default` ? form fields.
|
|
891
|
+
|
|
892
|
+
---
|
|
893
|
+
|
|
894
|
+
### AbScrollbar
|
|
895
|
+
|
|
896
|
+
**Props**
|
|
897
|
+
|
|
898
|
+
| Name | Type | Default |
|
|
899
|
+
| ------------------ | ------- | ------- |
|
|
900
|
+
| `size` | String | `"md"` |
|
|
901
|
+
| `isHoverIncrease` | Boolean | `false` |
|
|
902
|
+
| `transparentTrack` | Boolean | `true` |
|
|
903
|
+
| `showAlways` | Boolean | `false` |
|
|
904
|
+
|
|
905
|
+
Size maps to `sm` ? 4px, `md` ? 6px, `lg` ? 8px.
|
|
906
|
+
|
|
907
|
+
**Events** ? `scroll(payload)`, `scroll-start(payload)`, `scroll-end(payload)`. Payload includes `scrollTop`, `scrollHeight`, `scrollRatio`, `scrollPercentage`.
|
|
908
|
+
|
|
909
|
+
**Slots** ? `default`.
|
|
910
|
+
|
|
911
|
+
---
|
|
912
|
+
|
|
913
|
+
### AbTooltip
|
|
914
|
+
|
|
915
|
+
**Props**
|
|
916
|
+
|
|
917
|
+
| Name | Type | Default | Notes |
|
|
918
|
+
| ------------- | --------------- | ------- | ---------------------------------------------- |
|
|
919
|
+
| `content` | String | `""` | |
|
|
920
|
+
| `placement` | String | `"top"` | `top`, `bottom`, `left`, `right`, or `auto-*`. |
|
|
921
|
+
| `offset` | Number / String | `8` | |
|
|
922
|
+
| `disabled` | Boolean | `false` | |
|
|
923
|
+
| `arrow` | Boolean | `true` | |
|
|
924
|
+
| `interactive` | Boolean | `false` | |
|
|
925
|
+
|
|
926
|
+
**Slots** ? `default` (trigger), `content` (tooltip body).
|
|
927
|
+
|
|
928
|
+
---
|
|
929
|
+
|
|
930
|
+
### AbPopover
|
|
931
|
+
|
|
932
|
+
Dependency-free interactive popover.
|
|
933
|
+
|
|
934
|
+
**Props**
|
|
935
|
+
|
|
936
|
+
| Name | Type | Default | Notes |
|
|
937
|
+
| ------------------- | --------------- | ---------- | ------------------------------------------------------------------------ |
|
|
938
|
+
| `placement` | String | `"bottom"` | `top`, `bottom`, `left`, `right`, or `auto-*`. |
|
|
939
|
+
| `offset` | Number / String | `8` | |
|
|
940
|
+
| `gap` | Number / String | `null` | Overrides `offset` if set. |
|
|
941
|
+
| `disabled` | Boolean | `false` | |
|
|
942
|
+
| `arrow` | Boolean | `true` | |
|
|
943
|
+
| `arrowPadding` | Number | `4` | |
|
|
944
|
+
| `trigger` | String / Array | `"click"` | `click`, `hover`, `focus`, `touch`, `manual`. String or space-separated. |
|
|
945
|
+
| `autoHide` | Boolean | `true` | Close on outside click. |
|
|
946
|
+
| `contentClass` | String | `""` | |
|
|
947
|
+
| `referenceSelector` | String | `null` | CSS selector inside trigger to anchor position. |
|
|
948
|
+
|
|
949
|
+
**Events** ? `update:modelValue(visible)`, `show`, `hide`.
|
|
950
|
+
|
|
951
|
+
**Slots** ? `default` (trigger), `content({ close, hide, show, toggle })`.
|
|
952
|
+
|
|
953
|
+
---
|
|
954
|
+
|
|
955
|
+
### AbConfirmPopover
|
|
956
|
+
|
|
957
|
+
**Props**
|
|
958
|
+
|
|
959
|
+
| Name | Type | Default | Notes |
|
|
960
|
+
| ------------- | -------------------------------- | ----------------- | -------------------------------------------------- |
|
|
961
|
+
| `msg` | String | `"Are you sure?"` | |
|
|
962
|
+
| `title` | String | `""` | |
|
|
963
|
+
| `confirmText` | String | `"Yes"` | |
|
|
964
|
+
| `cancelText` | String | `"No"` | |
|
|
965
|
+
| `icon` | String | `"question"` | `success`, `error`, `warning`, `info`, `question`. |
|
|
966
|
+
| `type` | String | `"confirm"` | `confirm`, `confirm-ajax`, `alert`. |
|
|
967
|
+
| `onConfirm` | Function | `null` | Async confirmation handler. |
|
|
968
|
+
| `itemData` | Object / String / Number / Array | `null` | Payload passed to `onConfirm`. |
|
|
969
|
+
|
|
970
|
+
**Events** ? `onConfirmed({ showLoader(status), itemData, closePopover })` ? legacy path when `onConfirm` prop is not supplied.
|
|
971
|
+
|
|
972
|
+
**Slots** ? `default` (trigger), `desc`, `actionButtons({ removeConfirmed, state })`.
|
|
973
|
+
|
|
974
|
+
---
|
|
975
|
+
|
|
976
|
+
### AbTable
|
|
977
|
+
|
|
978
|
+
**Props**
|
|
979
|
+
|
|
980
|
+
| Name | Type | Default | Notes |
|
|
981
|
+
| ------------ | ----------------------- | ------- | -------------------------------------------------- |
|
|
982
|
+
| `items` | Array | `[]` | Row data. |
|
|
983
|
+
| `fields` | Array | `[]` | Column defs ? each string key or `{ key, label }`. |
|
|
984
|
+
| `tableClass` | String / Array / Object | `""` | |
|
|
985
|
+
|
|
986
|
+
**Slots** ? `thead`, `tbody`, `head({ fieldKey })`, `cell({ fieldKey })(value, item, index)`, `empty`.
|
|
987
|
+
|
|
988
|
+
---
|
|
989
|
+
|
|
990
|
+
### AbSkeleton
|
|
991
|
+
|
|
992
|
+
No declared props. Renders a pulsing placeholder; forwards all `$attrs` to the root `<div>`.
|
|
993
|
+
|
|
994
|
+
---
|
|
995
|
+
|
|
996
|
+
### AbKbd / AbKbdGroup
|
|
997
|
+
|
|
998
|
+
No declared props. `AbKbd` renders a single `<kbd>`-like chip; `AbKbdGroup` composes several. Both expose a single `default` slot.
|
|
999
|
+
|
|
1000
|
+
---
|
|
1001
|
+
|
|
1002
|
+
### AbCarousel
|
|
1003
|
+
|
|
1004
|
+
**Props**
|
|
1005
|
+
|
|
1006
|
+
| Name | Type | Default | Notes |
|
|
1007
|
+
| ------------------ | ------- | -------------- | --------------------------------------------------------------- |
|
|
1008
|
+
| `scrollAmount` | Number | `200` | Pixels per click; falls back to item width when children exist. |
|
|
1009
|
+
| `orientation` | String | `"horizontal"` | `horizontal` or `vertical`. |
|
|
1010
|
+
| `edgeFade` | Boolean | `false` | |
|
|
1011
|
+
| `autoplay` | Boolean | `false` | |
|
|
1012
|
+
| `autoplayInterval` | Number | `3000` | ms. |
|
|
1013
|
+
| `navOutside` | Boolean | `false` | |
|
|
1014
|
+
| `navOnHover` | Boolean | `false` | |
|
|
1015
|
+
|
|
1016
|
+
**Slots** ? `default` ? carousel items.
|
|
1017
|
+
|
|
1018
|
+
---
|
|
1019
|
+
|
|
1020
|
+
### AbWizard
|
|
1021
|
+
|
|
1022
|
+
**Props**
|
|
1023
|
+
|
|
1024
|
+
| Name | Type | Default | Notes |
|
|
1025
|
+
| -------------- | -------- | ------------------ | ------------------------------------------------------ |
|
|
1026
|
+
| `beforeNext` | Function | `async () => true` | Return `false` to cancel. |
|
|
1027
|
+
| `beforePrev` | Function | `async () => true` | |
|
|
1028
|
+
| `beforeFinish` | Function | `async () => true` | |
|
|
1029
|
+
| `orientation` | String | `"horizontal"` | `horizontal` or `vertical`. |
|
|
1030
|
+
| `variant` | String | `"default"` | `default`, `circular`, `modal`, `circular-modal`, etc. |
|
|
1031
|
+
| `stepperSize` | String | `"md"` | `sm` or `md`. |
|
|
1032
|
+
| `hideControls` | Boolean | `false` | |
|
|
1033
|
+
| `nextText` | String | `"Next"` | |
|
|
1034
|
+
| `prevText` | String | `"Back"` | |
|
|
1035
|
+
| `finishText` | String | `"Finish"` | |
|
|
1036
|
+
| `disableClose` | Boolean | `false` | |
|
|
1037
|
+
| `modalClass` | String | `"modal-lg"` | For modal variants. |
|
|
1038
|
+
|
|
1039
|
+
**Events** ? `finished`, `step-changed`.
|
|
1040
|
+
|
|
1041
|
+
**Slots** ? `default` ? `<ab-wizard-step>` children.
|
|
1042
|
+
|
|
1043
|
+
**Provides** ? `AbWizard` injection + `registerStepValidator(stepId, fn)`.
|
|
1044
|
+
|
|
1045
|
+
---
|
|
1046
|
+
|
|
1047
|
+
### AbWizardStep
|
|
1048
|
+
|
|
1049
|
+
**Props**
|
|
1050
|
+
|
|
1051
|
+
| Name | Type | Default |
|
|
1052
|
+
| -------------- | -------------------------- | ---------- |
|
|
1053
|
+
| `title` | String | _required_ |
|
|
1054
|
+
| `description` | String | `""` |
|
|
1055
|
+
| `icon` | Object / String / Function | `null` |
|
|
1056
|
+
| `disableClose` | Boolean | `false` |
|
|
1057
|
+
|
|
1058
|
+
**Slots** ? `default` ? step content.
|
|
1059
|
+
|
|
1060
|
+
**Provides** ? `AbWizardStep` injection for children (e.g. `AbSettingsForm`).
|
|
1061
|
+
|
|
1062
|
+
---
|
|
1063
|
+
|
|
1064
|
+
### AbPricingCard
|
|
1065
|
+
|
|
1066
|
+
**Props**
|
|
1067
|
+
|
|
1068
|
+
| Name | Type | Default | Notes |
|
|
1069
|
+
| --------------- | --------------- | ----------- | --------------------------------------------------- |
|
|
1070
|
+
| `title` | String | `""` | |
|
|
1071
|
+
| `amount` | String / Number | `undefined` | |
|
|
1072
|
+
| `regularAmount` | String / Number | `undefined` | Strikethrough original price. |
|
|
1073
|
+
| `frequency` | String | `""` | e.g. `"/month"`. |
|
|
1074
|
+
| `badge` | String | `""` | |
|
|
1075
|
+
| `active` | Boolean | `false` | |
|
|
1076
|
+
| `recommended` | Boolean | `false` | |
|
|
1077
|
+
| `color` | String | `"primary"` | |
|
|
1078
|
+
| `variant` | String | `"default"` | `default`, `minimal`, `highlighted`, `badge-price`. |
|
|
1079
|
+
| `features` | Array | `[]` | Each `{ text, disabled? }` or string. |
|
|
1080
|
+
|
|
1081
|
+
**Slots** ? `header`, `badge`, `badge-icon`, `price`, `features`, `feature-icon({ feature, index })`, `action`.
|
|
1082
|
+
|
|
1083
|
+
---
|
|
1084
|
+
|
|
1085
|
+
### AbPricingContainer
|
|
1086
|
+
|
|
1087
|
+
**Props**
|
|
1088
|
+
|
|
1089
|
+
| Name | Type | Default | Notes |
|
|
1090
|
+
| ------------------------------ | --------------- | ----------- | ------------------------------------------ |
|
|
1091
|
+
| `width` | String | `"100%"` | |
|
|
1092
|
+
| `maxWidth` | String | `"1200px"` | |
|
|
1093
|
+
| `gap` | String | `"1.5rem"` | |
|
|
1094
|
+
| `justify` | String | `"center"` | `justify-content`. |
|
|
1095
|
+
| `align` | String | `"stretch"` | `align-items`. |
|
|
1096
|
+
| `columns` | Number / String | `0` | `0` ? flex layout, `>0` ? grid. |
|
|
1097
|
+
| `smCols` / `mdCols` / `lgCols` | Number / String | `""` | Breakpoint columns. |
|
|
1098
|
+
| `itemWidth` | String | `""` | Card width override (CSS custom property). |
|
|
1099
|
+
|
|
1100
|
+
**Slots** ? `toggle` (e.g. monthly/yearly switch), `default` (pricing cards).
|
|
1101
|
+
|
|
1102
|
+
---
|
|
1103
|
+
|
|
1104
|
+
### AbDarkModeToggler
|
|
1105
|
+
|
|
1106
|
+
**Props**
|
|
1107
|
+
|
|
1108
|
+
| Name | Type | Default |
|
|
1109
|
+
| ------ | ------ | ----------------------------------------------------- |
|
|
1110
|
+
| `size` | String | `"md"` (supports `xs`, `sm`, `md`, `lg`, `xl`, `2xl`) |
|
|
1111
|
+
|
|
1112
|
+
**Slots** ? `dark-icon`, `light-icon` ? override the sun/moon icons.
|
|
1113
|
+
|
|
1114
|
+
---
|
|
1115
|
+
|
|
1116
|
+
### AbPricingTable
|
|
1117
|
+
|
|
1118
|
+
**Props**
|
|
1119
|
+
|
|
1120
|
+
| Name | Type | Default | Notes |
|
|
1121
|
+
| ---- | ---- | ------- | ----- |
|
|
1122
|
+
| `features` | Array | `**required**` | Array of feature definitions. Example: `{ key: "chat", title: "Chat support" }`. |
|
|
1123
|
+
| `packages` | Array | `**required**` | Array of package configurations. Supports price, regularPrice, badge, features (Y/N map), and button options. |
|
|
1124
|
+
|
|
1125
|
+
**Events** ? `select-package(packageObject)`.
|
|
1126
|
+
|
|
1127
|
+
**Slots** ? `features-header`, `feature-label({feature})`, `package-badge({pkg})`, `package-header({pkg})`, `package-feature({pkg, feature})`, `package-footer({pkg})`.
|
|
1128
|
+
|
|
1129
|
+
**v-model** ? No.
|
|
1130
|
+
|
|
1131
|
+
---
|
|
1132
|
+
|
|
1133
|
+
## 4. Composables & Directives
|
|
1134
|
+
|
|
1135
|
+
### Directives
|
|
1136
|
+
|
|
1137
|
+
- **`v-tooltip`** ? simple floating hint (registered globally).
|
|
1138
|
+
- String: `<ab-button v-tooltip="'Helper text'">`
|
|
1139
|
+
- Object: `<ab-button v-tooltip="{ content: 'Text', placement: 'top-start' }">`
|
|
1140
|
+
|
|
1141
|
+
### Global Controller APIs
|
|
1142
|
+
|
|
1143
|
+
Import these in your `<script setup>` when you need programmatic dialogs / toasts:
|
|
1144
|
+
|
|
1145
|
+
- **Alerts (SweetAlert2 wrapper)**
|
|
1146
|
+
|
|
1147
|
+
```javascript
|
|
1148
|
+
import { useAlert } from "vue3-appsbd-ui";
|
|
1149
|
+
const { alert } = useAlert();
|
|
1150
|
+
|
|
1151
|
+
// success, error, warning, info, confirm
|
|
1152
|
+
alert.success("Save Complete", "Changes have been recorded.");
|
|
1153
|
+
```
|
|
1154
|
+
|
|
1155
|
+
- **Toast Notifications**
|
|
1156
|
+
|
|
1157
|
+
```javascript
|
|
1158
|
+
import { useToast } from "vue3-appsbd-ui";
|
|
1159
|
+
const { toast } = useToast();
|
|
1160
|
+
|
|
1161
|
+
// success, error, warning, info
|
|
1162
|
+
toast.error("Operation failed", { timeout: 5000 });
|
|
1163
|
+
```
|
|
1164
|
+
|
|
1165
|
+
- **Theme Controller**
|
|
1166
|
+
```javascript
|
|
1167
|
+
import { useTheme } from "vue3-appsbd-ui";
|
|
1168
|
+
const { theme, toggleTheme, applyTheme } = useTheme();
|
|
1169
|
+
```
|
|
1170
|
+
|
|
1171
|
+
## 5. Updates & Maintenance
|
|
1172
|
+
|
|
1173
|
+
Whenever a **new component** is created:
|
|
1174
|
+
|
|
1175
|
+
1. Follow the `Ab{Name}.vue` structure.
|
|
1176
|
+
2. Export it from `src/components/index.js`.
|
|
1177
|
+
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).
|
|
1178
|
+
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.
|