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