@appsbd/vue3-appsbd-ui 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AI_REFERENCE.md +153 -130
- package/dist/vue3-appsbd-ui.cjs.js +57 -57
- package/dist/vue3-appsbd-ui.es.js +4839 -4773
- package/package.json +1 -1
package/AI_REFERENCE.md
CHANGED
|
@@ -31,13 +31,35 @@ import "bootstrap-icons/font/bootstrap-icons.css";
|
|
|
31
31
|
const app = createApp(App);
|
|
32
32
|
|
|
33
33
|
// 3. Register the UI plugin
|
|
34
|
-
// This registers all Ab* components globally!
|
|
35
34
|
app.use(AppsbdUI);
|
|
36
35
|
|
|
37
36
|
app.mount("#app");
|
|
38
37
|
```
|
|
39
38
|
|
|
40
|
-
|
|
39
|
+
### Globally Registered Components
|
|
40
|
+
|
|
41
|
+
The plugin **only** registers the following components globally (usable directly in templates without importing):
|
|
42
|
+
|
|
43
|
+
- `AbCard`
|
|
44
|
+
- `AbButton`
|
|
45
|
+
- `AbInputField`
|
|
46
|
+
- `AbNumberField`
|
|
47
|
+
- `AbField`
|
|
48
|
+
- `AbToggle`
|
|
49
|
+
- `AbMultiSelect`
|
|
50
|
+
- `AbFormCheck`
|
|
51
|
+
- `AbInputTag`
|
|
52
|
+
- `AbPopover`
|
|
53
|
+
- `AbModal`
|
|
54
|
+
- `AbDateTimePicker`
|
|
55
|
+
- `AbCustomField`
|
|
56
|
+
- `AbProgressBar`
|
|
57
|
+
|
|
58
|
+
All other `Ab*` components (e.g. `AbTabs`, `AbBadge`, `AbSlider`, `AbWizard`, etc.) are **not** globally registered and must be imported explicitly in `<script setup>` or `<script>`:
|
|
59
|
+
|
|
60
|
+
```javascript
|
|
61
|
+
import { AbTabs, AbTab, AbBadge } from "vue3-appsbd-ui";
|
|
62
|
+
```
|
|
41
63
|
|
|
42
64
|
If you use `AbDateTimePicker`, also import `v-calendar/style.css` in the consuming app because that component relies on `v-calendar` styling.
|
|
43
65
|
|
|
@@ -48,61 +70,63 @@ To configure library-wide locale and formatting defaults, import and call `Appsb
|
|
|
48
70
|
|
|
49
71
|
Each component also has a standalone reference under `.ai/` with installation, full props / events / slots docs, and a working usage snippet. **When generating code for a specific component, read that file first** - it is the preferred source when you can access repo files. If you cannot open `.ai/ai_ref_*.md`, use the API reference in this document as the authoritative fallback.
|
|
50
72
|
|
|
51
|
-
| Component / API | Purpose | Reference |
|
|
52
|
-
| :----------------------------- | :--------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------- |
|
|
53
|
-
| `
|
|
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
|
-
| `AbConfirmPopover` | Confirmation popover with async `onConfirm` and built-in loader. | [.ai/ai_ref_AbConfirmPopover.md](./.ai/ai_ref_AbConfirmPopover.md) |
|
|
85
|
-
| `AbTable` | Data grid with header/cell/empty slots. | [.ai/ai_ref_AbTable.md](./.ai/ai_ref_AbTable.md) |
|
|
86
|
-
| `AbSkeleton` | Loading state placeholder. | [.ai/ai_ref_AbSkeleton.md](./.ai/ai_ref_AbSkeleton.md) |
|
|
87
|
-
| `AbKbd` | Single keyboard key chip. | [.ai/ai_ref_AbKbd.md](./.ai/ai_ref_AbKbd.md) |
|
|
88
|
-
| `AbKbdGroup` | Group container for multiple `AbKbd` chips. | [.ai/ai_ref_AbKbdGroup.md](./.ai/ai_ref_AbKbdGroup.md) |
|
|
89
|
-
| `AbCarousel` | Image / HTML rotating slider with edge-fade, autoplay, orientation. | [.ai/ai_ref_AbCarousel.md](./.ai/ai_ref_AbCarousel.md) |
|
|
90
|
-
| `AbWizard` | Multi-step wizard container with orientation and variant styles. | [.ai/ai_ref_AbWizard.md](./.ai/ai_ref_AbWizard.md) |
|
|
91
|
-
| `AbWizardStep` | Individual step inside `AbWizard`. | [.ai/ai_ref_AbWizardStep.md](./.ai/ai_ref_AbWizardStep.md) |
|
|
92
|
-
| `AbPricingCard` | Single pricing tier card. | [.ai/ai_ref_AbPricingCard.md](./.ai/ai_ref_AbPricingCard.md) |
|
|
93
|
-
| `AbPricingContainer` | Layout wrapper for pricing tables. | [.ai/ai_ref_AbPricingContainer.md](./.ai/ai_ref_AbPricingContainer.md) |
|
|
94
|
-
| `AbPricingTable` | Stylized, responsive pricing table component with feature list and package columns. | [.ai/ai_ref_AbPricingTable.md](./.ai/ai_ref_AbPricingTable.md) |
|
|
95
|
-
| `AbChart` | Flexible chart component powered by Apache ECharts. | [.ai/ai_ref_AbChart.md](./.ai/ai_ref_AbChart.md) |
|
|
96
|
-
| `AbDarkModeToggler` | Light / dark theme toggle (pairs with `useTheme`). | [.ai/ai_ref_AbDarkModeToggler.md](./.ai/ai_ref_AbDarkModeToggler.md) |
|
|
97
|
-
| `useAlert` | Procedural API to trigger SweetAlert-based modal alerts, notifications, and confirmations. | [.ai/ai_ref_useAlert.md](./.ai/ai_ref_useAlert.md) |
|
|
98
|
-
| `abEventBus` / `emitterObj` | Lightweight global event bus using `tiny-emitter`. | [.ai/ai_ref_abEventBus.md](./.ai/ai_ref_abEventBus.md) |
|
|
99
|
-
| `useTheme` | Composable for light/dark theme toggling with localStorage and system preference sync. | [.ai/ai_ref_useTheme.md](./.ai/ai_ref_useTheme.md) |
|
|
100
|
-
| `useToast` | Procedural API to spawn toast notifications (success, error, warning, info). | [.ai/ai_ref_useToast.md](./.ai/ai_ref_useToast.md) |
|
|
101
|
-
| `useFileValidator` | File validation utilities (size, MIME type) and file icon/image resolvers. | [.ai/ai_ref_useFileValidator.md](./.ai/ai_ref_useFileValidator.md) |
|
|
102
|
-
| `useResponsive` | Real-time viewport width tracker for responsive layout decisions (Bootstrap 5 aligned). | [.ai/ai_ref_useResponsive.md](./.ai/ai_ref_useResponsive.md) |
|
|
103
|
-
| `abTranslate` | Localization utility wrapping `vue3-gettext` with automatic variable interpolation. | [.ai/ai_ref_abTranslate.md](./.ai/ai_ref_abTranslate.md) |
|
|
104
|
-
| `abVeeRules` | Collection of pre-configured VeeValidate validation rules integrated with localization. | [.ai/ai_ref_abVeeRules.md](./.ai/ai_ref_abVeeRules.md) |
|
|
105
|
-
| `abRequestParam` | Data-transfer classes to build structured API request parameters (pagination, sorting, filtering). | [.ai/ai_ref_abRequestParam.md](./.ai/ai_ref_abRequestParam.md) |
|
|
73
|
+
| Component / API | Global | Purpose | Reference |
|
|
74
|
+
| :----------------------------- | :----: | :--------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------- |
|
|
75
|
+
| `AbButton` | ✅ | Customizable push button with loader animation. | [.ai/ai_ref_AbButton.md](./.ai/ai_ref_AbButton.md) |
|
|
76
|
+
| `AbCard` | ✅ | Flexible card container; use CSS-class variants (e.g. `tile-card`, `item-card`, `insight-card`) for layout variations. | [.ai/ai_ref_AbCard.md](./.ai/ai_ref_AbCard.md) |
|
|
77
|
+
| `AbModal` | ✅ | Full-featured dialog with built-in VeeValidate form, loader, and message-only mode. | [.ai/ai_ref_AbModal.md](./.ai/ai_ref_AbModal.md) |
|
|
78
|
+
| `AbProgressbar` | ✅ | Animated Bootstrap progress bar with color and size variants. | [.ai/ai_ref_AbProgressbar.md](./.ai/ai_ref_AbProgressbar.md) |
|
|
79
|
+
| `AbInputField` | ✅ | Core text input with VeeValidate, prefix/postfix/icon slots. | [.ai/ai_ref_AbInputField.md](./.ai/ai_ref_AbInputField.md) |
|
|
80
|
+
| `AbNumberField` | ✅ | Numeric input with increment/decrement buttons, min/max/step clamping, and VeeValidate integration. | [.ai/ai_ref_AbNumberField.md](./.ai/ai_ref_AbNumberField.md) |
|
|
81
|
+
| `AbField` | ✅ | Polymorphic field wrapper - renders any input type via a `type` prop. | [.ai/ai_ref_AbField.md](./.ai/ai_ref_AbField.md) |
|
|
82
|
+
| `AbCustomField` | ✅ | Dynamic form scaffold driven by a `fieldInputs` array. | [.ai/ai_ref_AbCustomField.md](./.ai/ai_ref_AbCustomField.md) |
|
|
83
|
+
| `AbDateTimePicker` | ✅ | Date / time / range picker. | [.ai/ai_ref_AbDateTimePicker.md](./.ai/ai_ref_AbDateTimePicker.md) |
|
|
84
|
+
| `AbFormCheck` / `AbRadioInput` | ✅ | Checkbox / radio group (default, card, segmented, pill variants). `AbRadioInput` is an alias of `AbFormCheck`. | [.ai/ai_ref_AbFormCheck.md](./.ai/ai_ref_AbFormCheck.md) |
|
|
85
|
+
| `AbToggle` | ✅ | Accessible switch/toggle with title & description slots. | [.ai/ai_ref_AbToggle.md](./.ai/ai_ref_AbToggle.md) |
|
|
86
|
+
| `AbInputTag` | ✅ | Multi-tag input with optional option list. | [.ai/ai_ref_AbInputTag.md](./.ai/ai_ref_AbInputTag.md) |
|
|
87
|
+
| `AbMultiSelect` | ✅ | Searchable single/multi/tag select (custom built-in — replaces `@vueform/multiselect`). | [.ai/ai_ref_AbMultiSelect.md](./.ai/ai_ref_AbMultiSelect.md) |
|
|
88
|
+
| `AbPopover` | ✅ | Dependency-free interactive popover with click/hover/focus triggers. | [.ai/ai_ref_AbPopover.md](./.ai/ai_ref_AbPopover.md) |
|
|
89
|
+
| `AppsbdUIConfigure` | — | Global UI Configuration API for locale and formatting defaults. | [.ai/ai_ref_global_config.md](./.ai/ai_ref_global_config.md) |
|
|
90
|
+
| `AbEasyModal` | — | Lightweight modal wrapper that exposes `openModal` / `closeModal`. | [.ai/ai_ref_AbEasyModal.md](./.ai/ai_ref_AbEasyModal.md) |
|
|
91
|
+
| `AbPinInput` | — | Segmented PIN / OTP entry field. | [.ai/ai_ref_AbPinInput.md](./.ai/ai_ref_AbPinInput.md) |
|
|
92
|
+
| `AbAvatar` | — | Profile image (or file-upload avatar variant). | [.ai/ai_ref_AbAvatar.md](./.ai/ai_ref_AbAvatar.md) |
|
|
93
|
+
| `AbTabs` | — | Tabbed interface container; supports router-link mode. | [.ai/ai_ref_AbTabs.md](./.ai/ai_ref_AbTabs.md) |
|
|
94
|
+
| `AbTab` | — | Individual tab pane / link. | [.ai/ai_ref_AbTab.md](./.ai/ai_ref_AbTab.md) |
|
|
95
|
+
| `AbImageRadioInput` | — | Image-based radio group for visual option pickers. | [.ai/ai_ref_AbImageRadioInput.md](./.ai/ai_ref_AbImageRadioInput.md) |
|
|
96
|
+
| `AbBadge` | — | Status / count label (Bootstrap badge utility). | [.ai/ai_ref_AbBadge.md](./.ai/ai_ref_AbBadge.md) |
|
|
97
|
+
| `AbSidebar` | — | Collapsible sidebar navigation with optional search. | [.ai/ai_ref_AbSidebar.md](./.ai/ai_ref_AbSidebar.md) |
|
|
98
|
+
| `AbSideMenuItem` | — | Sidebar nav item (router-link, anchor, submenu parent, or section title). | [.ai/ai_ref_AbSideMenuItem.md](./.ai/ai_ref_AbSideMenuItem.md) |
|
|
99
|
+
| `AbSlider` | — | Single or range numeric slider. | [.ai/ai_ref_AbSlider.md](./.ai/ai_ref_AbSlider.md) |
|
|
100
|
+
| `AbColorPicker` | — | Radio-style color swatch picker. | [.ai/ai_ref_AbColorPicker.md](./.ai/ai_ref_AbColorPicker.md) |
|
|
101
|
+
| `AbFileUploader` | — | File upload field with drag-and-drop and size validation. | [.ai/ai_ref_AbFileUploader.md](./.ai/ai_ref_AbFileUploader.md) |
|
|
102
|
+
| `AbFilterPanel` | — | Advanced filter panel with search and scan modes. | [.ai/ai_ref_AbFilterPanel.md](./.ai/ai_ref_AbFilterPanel.md) |
|
|
103
|
+
| `AbSettingsForm` | — | Settings-style form that auto-registers as a wizard step validator. | [.ai/ai_ref_AbSettingsForm.md](./.ai/ai_ref_AbSettingsForm.md) |
|
|
104
|
+
| `AbScrollbar` | — | Styled custom scrollbar wrapper with scroll events. | [.ai/ai_ref_AbScrollbar.md](./.ai/ai_ref_AbScrollbar.md) |
|
|
105
|
+
| `AbTooltip` | — | Programmatic tooltip component (complements the `v-tooltip` directive). | [.ai/ai_ref_AbTooltip.md](./.ai/ai_ref_AbTooltip.md) |
|
|
106
|
+
| `AbConfirmPopover` | — | Confirmation popover with async `onConfirm` and built-in loader. | [.ai/ai_ref_AbConfirmPopover.md](./.ai/ai_ref_AbConfirmPopover.md) |
|
|
107
|
+
| `AbTable` | — | Data grid with header/cell/empty slots. | [.ai/ai_ref_AbTable.md](./.ai/ai_ref_AbTable.md) |
|
|
108
|
+
| `AbSkeleton` | — | Loading state placeholder. | [.ai/ai_ref_AbSkeleton.md](./.ai/ai_ref_AbSkeleton.md) |
|
|
109
|
+
| `AbKbd` | — | Single keyboard key chip. | [.ai/ai_ref_AbKbd.md](./.ai/ai_ref_AbKbd.md) |
|
|
110
|
+
| `AbKbdGroup` | — | Group container for multiple `AbKbd` chips. | [.ai/ai_ref_AbKbdGroup.md](./.ai/ai_ref_AbKbdGroup.md) |
|
|
111
|
+
| `AbCarousel` | — | Image / HTML rotating slider with edge-fade, autoplay, orientation. | [.ai/ai_ref_AbCarousel.md](./.ai/ai_ref_AbCarousel.md) |
|
|
112
|
+
| `AbWizard` | — | Multi-step wizard container with orientation and variant styles. | [.ai/ai_ref_AbWizard.md](./.ai/ai_ref_AbWizard.md) |
|
|
113
|
+
| `AbWizardStep` | — | Individual step inside `AbWizard`. | [.ai/ai_ref_AbWizardStep.md](./.ai/ai_ref_AbWizardStep.md) |
|
|
114
|
+
| `AbPricingCard` | — | Single pricing tier card. | [.ai/ai_ref_AbPricingCard.md](./.ai/ai_ref_AbPricingCard.md) |
|
|
115
|
+
| `AbPricingContainer` | — | Layout wrapper for pricing tables. | [.ai/ai_ref_AbPricingContainer.md](./.ai/ai_ref_AbPricingContainer.md) |
|
|
116
|
+
| `AbPricingTable` | — | Stylized, responsive pricing table component with feature list and package columns. | [.ai/ai_ref_AbPricingTable.md](./.ai/ai_ref_AbPricingTable.md) |
|
|
117
|
+
| `AbChart` | — | Flexible chart component powered by Apache ECharts. | [.ai/ai_ref_AbChart.md](./.ai/ai_ref_AbChart.md) |
|
|
118
|
+
| `AbDarkModeToggler` | — | Light / dark theme toggle (pairs with `useTheme`). | [.ai/ai_ref_AbDarkModeToggler.md](./.ai/ai_ref_AbDarkModeToggler.md) |
|
|
119
|
+
| `useAlert` | — | Procedural API to trigger SweetAlert-based modal alerts, notifications, and confirmations. | [.ai/ai_ref_useAlert.md](./.ai/ai_ref_useAlert.md) |
|
|
120
|
+
| `abEventBus` / `emitterObj` | — | Lightweight global event bus using `tiny-emitter`. | [.ai/ai_ref_abEventBus.md](./.ai/ai_ref_abEventBus.md) |
|
|
121
|
+
| `useTheme` | — | Composable for light/dark theme toggling with localStorage and system preference sync. | [.ai/ai_ref_useTheme.md](./.ai/ai_ref_useTheme.md) |
|
|
122
|
+
| `useToast` | — | Procedural API to spawn toast notifications (success, error, warning, info). | [.ai/ai_ref_useToast.md](./.ai/ai_ref_useToast.md) |
|
|
123
|
+
| `useFileValidator` | — | File validation utilities (size, MIME type) and file icon/image resolvers. | [.ai/ai_ref_useFileValidator.md](./.ai/ai_ref_useFileValidator.md) |
|
|
124
|
+
| `useResponsive` | — | Real-time viewport width tracker for responsive layout decisions (Bootstrap 5 aligned). | [.ai/ai_ref_useResponsive.md](./.ai/ai_ref_useResponsive.md) |
|
|
125
|
+
| `abTranslate` | — | Localization utility wrapping `vue3-gettext` with automatic variable interpolation. | [.ai/ai_ref_abTranslate.md](./.ai/ai_ref_abTranslate.md) |
|
|
126
|
+
| `abVeeRules` | — | Collection of pre-configured VeeValidate validation rules integrated with localization. | [.ai/ai_ref_abVeeRules.md](./.ai/ai_ref_abVeeRules.md) |
|
|
127
|
+
| `abRequestParam` | — | Data-transfer classes to build structured API request parameters (pagination, sorting, filtering). | [.ai/ai_ref_abRequestParam.md](./.ai/ai_ref_abRequestParam.md) |
|
|
128
|
+
|
|
129
|
+
> **Note**: Components marked ✅ in the **Global** column are auto-registered by `app.use(AppsbdUI)` and can be used directly in templates. All others require explicit `import { ComponentName } from 'vue3-appsbd-ui'`.
|
|
106
130
|
|
|
107
131
|
## 3. Full Component API Reference
|
|
108
132
|
|
|
@@ -114,31 +138,31 @@ Global configuration setter for library-wide tokens.
|
|
|
114
138
|
|
|
115
139
|
**Options**
|
|
116
140
|
|
|
117
|
-
| Name
|
|
118
|
-
|
|
|
119
|
-
| `monthNames`
|
|
120
|
-
| `monthNamesShort`
|
|
121
|
-
| `dayNames`
|
|
122
|
-
| `formatDigit`
|
|
123
|
-
| `rangeSeparator`
|
|
124
|
-
| `is24Hour`
|
|
125
|
-
| `dateDataFormat`
|
|
126
|
-
| `dateDisplayFormat
|
|
127
|
-
| `datetimeDataFormat
|
|
128
|
-
| `datetimeDisplayFormat
|
|
129
|
-
| `timeDataFormat`
|
|
130
|
-
| `timeDisplayFormat
|
|
131
|
-
| `inputContainerClass
|
|
132
|
-
| `toastPosition`
|
|
133
|
-
| `toastDesign`
|
|
134
|
-
| `toastTimeout`
|
|
135
|
-
| `toastCloseButton
|
|
136
|
-
| `toastPauseOnHover
|
|
137
|
-
| `toastPauseOnFocusLoss
|
|
138
|
-
| `toastShowProgress
|
|
139
|
-
| `trueValue`
|
|
140
|
-
| `falseValue`
|
|
141
|
-
| `size`
|
|
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'` |
|
|
142
166
|
|
|
143
167
|
---
|
|
144
168
|
|
|
@@ -171,17 +195,17 @@ Global configuration setter for library-wide tokens.
|
|
|
171
195
|
|
|
172
196
|
**Props**
|
|
173
197
|
|
|
174
|
-
| Name
|
|
175
|
-
|
|
|
176
|
-
| `containerClass`
|
|
177
|
-
| `headerClass`
|
|
178
|
-
| `bodyClass`
|
|
179
|
-
| `footerClass`
|
|
180
|
-
| `isBorderCard`
|
|
181
|
-
| `bgColorVariant`
|
|
182
|
-
| `borderBottomVariant` | String
|
|
183
|
-
| `isTileCard`
|
|
184
|
-
| `variation`
|
|
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. |
|
|
185
209
|
|
|
186
210
|
**Slots** — `header`, `body`, `footer`.
|
|
187
211
|
|
|
@@ -299,25 +323,25 @@ Numeric input with built-in minus/plus buttons, min/max clamping, custom step, a
|
|
|
299
323
|
|
|
300
324
|
**Props**
|
|
301
325
|
|
|
302
|
-
| Name | Type | Default | Notes
|
|
303
|
-
| ------------------- | --------------- | ---------- |
|
|
304
|
-
| `modelValue` | any | `null` | v-model binding.
|
|
305
|
-
| `label` | String | `""` |
|
|
306
|
-
| `placeholder` | String | `""` |
|
|
307
|
-
| `name` | String | _required_ | VeeValidate field name.
|
|
308
|
-
| `rules` | String / Object | `""` | VeeValidate rules.
|
|
309
|
-
| `containerClass` | String | `"mb-3"` |
|
|
310
|
-
| `hints` | String | `""` |
|
|
311
|
-
| `prefix` | String | `""` |
|
|
312
|
-
| `postfix` | String | `""` |
|
|
313
|
-
| `min` | Number / String | `null` | Minimum allowed value; also clamps input and disables the minus button.
|
|
314
|
-
| `max` | Number / String | `null` | Maximum allowed value; also clamps input and disables the plus button.
|
|
315
|
-
| `step` | Number / String | `1` | Increment/decrement step amount.
|
|
316
|
-
| `showButtons` | Boolean | `true` | Show the minus/plus controls.
|
|
317
|
-
| `disabled` | Boolean | `false` | Disable the field and both buttons.
|
|
318
|
-
| `isBorder` | Boolean | `false` | Show inner borders between minus/input/plus (default renders as seamless).
|
|
319
|
-
| `isLeftIconBorder` | Boolean | `false` | Keep the left icon border (prefix) when used with a prefix slot.
|
|
320
|
-
| `isRightIconBorder` | Boolean | `false` | Keep the right icon border (postfix) when used with a postfix slot.
|
|
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. |
|
|
321
345
|
|
|
322
346
|
**Events** — `update:modelValue`, `input`, `keyup`, `keydown`, `paste`.
|
|
323
347
|
|
|
@@ -384,7 +408,7 @@ Dynamic form driven by a `fieldInputs` array where each entry declares `type` (`
|
|
|
384
408
|
| Name | Type | Default |
|
|
385
409
|
| ------------- | ------ | ------- |
|
|
386
410
|
| `fieldInputs` | Array | `[]` |
|
|
387
|
-
| `size`
|
|
411
|
+
| `size` | String | `"sm"` |
|
|
388
412
|
| `customProps` | Object | `{}` |
|
|
389
413
|
|
|
390
414
|
**Scoped slots** ? per-field id: `Label{id}`, `Hints{id}`, `Prefix{id}`, `Postfix{id}`, `Icon{id}`, `Description{id}`, `HelpText{id}`.
|
|
@@ -399,7 +423,7 @@ Dynamic form driven by a `fieldInputs` array where each entry declares `type` (`
|
|
|
399
423
|
| --------------- | ------- | ------- |
|
|
400
424
|
| `modelValue` | String | ? |
|
|
401
425
|
| `length` | Number | `6` |
|
|
402
|
-
| `size`
|
|
426
|
+
| `size` | String | `"md"` |
|
|
403
427
|
| `showSeparator` | Boolean | `false` |
|
|
404
428
|
| `groupSize` | Number | `3` |
|
|
405
429
|
|
|
@@ -749,7 +773,7 @@ Custom built-in replacement for `@vueform/multiselect`.
|
|
|
749
773
|
**Props**
|
|
750
774
|
|
|
751
775
|
| Name | Type | Default |
|
|
752
|
-
| -------------- | ------ | --------- |
|
|
776
|
+
| -------------- | ------ | --------- | ------------------------------------ |
|
|
753
777
|
| `modelValue` | String | `""` |
|
|
754
778
|
| `name` | String | `"color"` |
|
|
755
779
|
| `colors` | Array | `[]` |
|
|
@@ -1052,9 +1076,9 @@ No declared props. `AbKbd` renders a single `<kbd>`-like chip; `AbKbdGroup` comp
|
|
|
1052
1076
|
|
|
1053
1077
|
**Props**
|
|
1054
1078
|
|
|
1055
|
-
| Name
|
|
1056
|
-
|
|
|
1057
|
-
| `features` | Array | `**required**` | Array of feature definitions. Example: `{ key: "chat", title: "Chat support" }`.
|
|
1079
|
+
| Name | Type | Default | Notes |
|
|
1080
|
+
| ---------- | ----- | -------------- | ------------------------------------------------------------------------------------------------------------- |
|
|
1081
|
+
| `features` | Array | `**required**` | Array of feature definitions. Example: `{ key: "chat", title: "Chat support" }`. |
|
|
1058
1082
|
| `packages` | Array | `**required**` | Array of package configurations. Supports price, regularPrice, badge, features (Y/N map), and button options. |
|
|
1059
1083
|
|
|
1060
1084
|
**Events** ? `select-package(packageObject)`.
|
|
@@ -1069,18 +1093,17 @@ No declared props. `AbKbd` renders a single `<kbd>`-like chip; `AbKbdGroup` comp
|
|
|
1069
1093
|
|
|
1070
1094
|
**Props**
|
|
1071
1095
|
|
|
1072
|
-
| Name
|
|
1073
|
-
|
|
|
1074
|
-
| `option`
|
|
1075
|
-
| `chartType`
|
|
1076
|
-
| `xAxisData`
|
|
1077
|
-
| `seriesData`
|
|
1078
|
-
| `xAxisType`
|
|
1079
|
-
| `yAxisType` | String | `"value"` | Y-axis scale type.
|
|
1080
|
-
| `legendOrient` | String | `""` | Orientation of the chart legend (e.g., `"vertical"`, `"horizontal"`).
|
|
1081
|
-
| `showPointValues` | Boolean | `false` | If true, displays the value label on each data point in the chart.
|
|
1082
|
-
| `height` | String | `"400px"` | Height of the chart container (e.g., "300px", "50%").
|
|
1083
|
-
|
|
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%"). |
|
|
1084
1107
|
|
|
1085
1108
|
**Slots** ? None.
|
|
1086
1109
|
|