@appsbd/vue3-appsbd-ui 1.0.4 → 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 -41
- package/.ai/ai_ref_AbBadge.md +36 -36
- package/.ai/ai_ref_AbButton.md +52 -51
- package/.ai/ai_ref_AbCard.md +51 -51
- package/.ai/ai_ref_AbCarousel.md +36 -36
- package/.ai/ai_ref_AbChart.md +46 -46
- package/.ai/ai_ref_AbColorPicker.md +42 -42
- package/.ai/ai_ref_AbConfirmPopover.md +54 -54
- package/.ai/ai_ref_AbCustomField.md +66 -66
- package/.ai/ai_ref_AbDarkModeToggler.md +33 -33
- package/.ai/ai_ref_AbDateTimePicker.md +74 -74
- package/.ai/ai_ref_AbEasyModal.md +56 -56
- package/.ai/ai_ref_AbField.md +88 -88
- package/.ai/ai_ref_AbFileUploader.md +47 -47
- package/.ai/ai_ref_AbFilterPanel.md +67 -67
- package/.ai/ai_ref_AbFormCheck.md +58 -58
- package/.ai/ai_ref_AbImageRadioInput.md +55 -55
- package/.ai/ai_ref_AbInputField.md +66 -66
- package/.ai/ai_ref_AbInputTag.md +56 -56
- package/.ai/ai_ref_AbKbd.md +23 -23
- package/.ai/ai_ref_AbKbdGroup.md +21 -21
- package/.ai/ai_ref_AbMainLayout.md +106 -0
- package/.ai/ai_ref_AbMultiSelect.md +78 -78
- package/.ai/ai_ref_AbNumberField.md +59 -59
- package/.ai/ai_ref_AbPinInput.md +33 -33
- package/.ai/ai_ref_AbPopover.md +54 -54
- package/.ai/ai_ref_AbPricingCard.md +56 -56
- package/.ai/ai_ref_AbPricingContainer.md +41 -41
- package/.ai/ai_ref_AbPricingTable.md +56 -56
- package/.ai/ai_ref_AbProgressbar.md +34 -34
- package/.ai/ai_ref_AbScrollbar.md +38 -38
- package/.ai/ai_ref_AbSettingsForm.md +46 -46
- package/.ai/ai_ref_AbSideMenuItem.md +47 -47
- package/.ai/ai_ref_AbSidebar.md +62 -62
- package/.ai/ai_ref_AbSkeleton.md +23 -23
- package/.ai/ai_ref_AbSlider.md +52 -52
- package/.ai/ai_ref_AbTab.md +30 -30
- package/.ai/ai_ref_AbTable.md +49 -49
- package/.ai/ai_ref_AbTabs.md +37 -37
- package/.ai/ai_ref_AbToggle.md +46 -46
- package/.ai/ai_ref_AbTooltip.md +39 -39
- package/.ai/ai_ref_AbWizard.md +64 -64
- package/.ai/ai_ref_AbWizardStep.md +36 -36
- package/.ai/ai_ref_abEventBus.md +66 -66
- package/.ai/ai_ref_abRequestParam.md +40 -40
- package/.ai/ai_ref_abVeeRules.md +33 -33
- package/.ai/ai_ref_global_config.md +57 -56
- package/.ai/ai_ref_useAlert.md +50 -45
- package/.ai/ai_ref_useFileValidator.md +31 -31
- package/.ai/ai_ref_useResponsive.md +41 -41
- package/.ai/ai_ref_useTheme.md +28 -28
- package/.ai/ai_ref_useToast.md +30 -30
- package/AI_REFERENCE.md +87 -86
- 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 -685
- package/dist/skins/themes/_cyan.scss +18 -6
- package/dist/skins/themes/_gray.scss +18 -7
- package/dist/skins/themes/_green.scss +18 -6
- package/dist/skins/themes/_grid.scss +32 -30
- 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 +130 -142
- package/dist/vue3-appsbd-ui.es.js +21758 -20241
- package/package.json +72 -72
- package/readme.md +194 -194
package/.ai/ai_ref_useTheme.md
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
# useTheme (Composable)
|
|
2
|
-
|
|
3
|
-
Handles light/dark theme toggling, stores preference in `localStorage`, and reacts to system `prefers-color-scheme: dark` changes.
|
|
4
|
-
|
|
5
|
-
## Usage
|
|
6
|
-
|
|
7
|
-
```html
|
|
8
|
-
<script setup>
|
|
9
|
-
import { useTheme } from "@vue3-appsbd-ui";
|
|
10
|
-
|
|
11
|
-
const { theme, toggleTheme, applyTheme } = useTheme();
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
<template>
|
|
15
|
-
<div>
|
|
16
|
-
<p>Current Theme: {{ theme }}</p>
|
|
17
|
-
<button @click="toggleTheme">Toggle Theme</button>
|
|
18
|
-
</div>
|
|
19
|
-
</template>
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
## API Reference
|
|
23
|
-
|
|
24
|
-
| Name | Type | Description |
|
|
25
|
-
|---|---|---|
|
|
26
|
-
| `theme` | `Ref<string>` | Reactive current theme (`'light'` or `'dark'`). |
|
|
27
|
-
| `toggleTheme` | `Function` | Toggles between `'light'` and `'dark'`, updates the DOM (`data-bs-theme`), and saves to `localStorage`. |
|
|
28
|
-
| `applyTheme(value)` | `Function` | Explicitly sets the theme to `'light'` or `'dark'`. |
|
|
1
|
+
# useTheme (Composable)
|
|
2
|
+
|
|
3
|
+
Handles light/dark theme toggling, stores preference in `localStorage`, and reacts to system `prefers-color-scheme: dark` changes.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<script setup>
|
|
9
|
+
import { useTheme } from "@vue3-appsbd-ui";
|
|
10
|
+
|
|
11
|
+
const { theme, toggleTheme, applyTheme } = useTheme();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<template>
|
|
15
|
+
<div>
|
|
16
|
+
<p>Current Theme: {{ theme }}</p>
|
|
17
|
+
<button @click="toggleTheme">Toggle Theme</button>
|
|
18
|
+
</div>
|
|
19
|
+
</template>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## API Reference
|
|
23
|
+
|
|
24
|
+
| Name | Type | Description |
|
|
25
|
+
|---|---|---|
|
|
26
|
+
| `theme` | `Ref<string>` | Reactive current theme (`'light'` or `'dark'`). |
|
|
27
|
+
| `toggleTheme` | `Function` | Toggles between `'light'` and `'dark'`, updates the DOM (`data-bs-theme`), and saves to `localStorage`. |
|
|
28
|
+
| `applyTheme(value)` | `Function` | Explicitly sets the theme to `'light'` or `'dark'`. |
|
package/.ai/ai_ref_useToast.md
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
# useToast (Composable)
|
|
2
|
-
|
|
3
|
-
Provides a procedural API to spawn toast notifications using the globally registered `$toast` instance.
|
|
4
|
-
|
|
5
|
-
## Usage
|
|
6
|
-
|
|
7
|
-
```html
|
|
8
|
-
<script setup>
|
|
9
|
-
import { useToast } from "@vue3-appsbd-ui";
|
|
10
|
-
|
|
11
|
-
const { toast } = useToast();
|
|
12
|
-
|
|
13
|
-
function showNotifications() {
|
|
14
|
-
toast.success("Profile saved successfully");
|
|
15
|
-
toast.error("Failed to connect to server", { timeout: 5000 });
|
|
16
|
-
}
|
|
17
|
-
</script>
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
## API Reference
|
|
21
|
-
|
|
22
|
-
| Method | Signature | Description |
|
|
23
|
-
|---|---|---|
|
|
24
|
-
| `toast(msg, options)` | `Function` | Spawns a default toast notification. |
|
|
25
|
-
| `toast.success(msg, options)` | `Function` | Spawns a success toast. |
|
|
26
|
-
| `toast.error(msg, options)` | `Function` | Spawns an error toast. |
|
|
27
|
-
| `toast.warning(msg, options)` | `Function` | Spawns a warning toast. |
|
|
28
|
-
| `toast.info(msg, options)` | `Function` | Spawns an info toast. |
|
|
29
|
-
| `toast.dismiss(id)` | `Function` | Dismisses a specific toast by its ID. |
|
|
30
|
-
| `toast.clear()` | `Function` | Clears all currently visible toasts. |
|
|
1
|
+
# useToast (Composable)
|
|
2
|
+
|
|
3
|
+
Provides a procedural API to spawn toast notifications using the globally registered `$toast` instance.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<script setup>
|
|
9
|
+
import { useToast } from "@vue3-appsbd-ui";
|
|
10
|
+
|
|
11
|
+
const { toast } = useToast();
|
|
12
|
+
|
|
13
|
+
function showNotifications() {
|
|
14
|
+
toast.success("Profile saved successfully");
|
|
15
|
+
toast.error("Failed to connect to server", { timeout: 5000 });
|
|
16
|
+
}
|
|
17
|
+
</script>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## API Reference
|
|
21
|
+
|
|
22
|
+
| Method | Signature | Description |
|
|
23
|
+
|---|---|---|
|
|
24
|
+
| `toast(msg, options)` | `Function` | Spawns a default toast notification. |
|
|
25
|
+
| `toast.success(msg, options)` | `Function` | Spawns a success toast. |
|
|
26
|
+
| `toast.error(msg, options)` | `Function` | Spawns an error toast. |
|
|
27
|
+
| `toast.warning(msg, options)` | `Function` | Spawns a warning toast. |
|
|
28
|
+
| `toast.info(msg, options)` | `Function` | Spawns an info toast. |
|
|
29
|
+
| `toast.dismiss(id)` | `Function` | Dismisses a specific toast by its ID. |
|
|
30
|
+
| `toast.clear()` | `Function` | Clears all currently visible toasts. |
|
package/AI_REFERENCE.md
CHANGED
|
@@ -1,86 +1,87 @@
|
|
|
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
|
-
| `
|
|
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
|
-
|
|
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
|
+
```
|