@appsbd/vue3-appsbd-ui 1.0.1 → 1.0.2

package/.ai/ai_ref_AbAvatar.md

@@ -30,7 +30,15 @@ Globally registered by the plugin.
 
 ## Events
 
-None.
+| Name | Payload | Description |
+| --- | --- | --- |
+| `change` | `Event` | Fired when a file is selected in `add` variant. The selected file(s) can be accessed via `event.target.files`. |
+
+## Exposed Methods
+
+| Name | Description |
+| --- | --- |
+| `triggerFileSelect()` | Programmatically triggers the file selection dialog when in `add` variant. |
 
 ## Slots
 

package/.ai/ai_ref_AbBadge.md

@@ -10,9 +10,9 @@ Globally registered by the plugin.
 
 ```vue
 <template>
-  <ab-badge variant="primary">New</ab-badge>
-  <ab-badge variant="success" is-rounded-pill>12</ab-badge>
-  <ab-badge variant="warning" is-outline>Pending</ab-badge>
+  <ab-badge color="primary">New</ab-badge>
+  <ab-badge color="success" is-rounded-pill>12</ab-badge>
+  <ab-badge color="warning" is-outline>Pending</ab-badge>
 </template>
 ```
 
@@ -21,13 +21,13 @@ Globally registered by the plugin.
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | `size` | `String` | `"md"` | Size of the badge (`sm`, `md`, `lg`). |
-| `variant` | `String` | `"primary"` | Color theme (`primary`, `secondary`, `danger`, `warning`, `success`, `info`). |
+| `color` | `String` | `"primary"` | Color theme (`primary`, `secondary`, `danger`, `warning`, `success`, `info`). |
 | `isOutline` | `Boolean` | `false` | Outlined style with transparent background. |
 | `isRoundedPill` | `Boolean` | `false` | Transforms badge to a fully rounded pill shape. |
 | `isDot` | `Boolean` | `false` | Prepends a dot indicator layout. |
-| `isAvatar` | `Boolean` | `false` | Adjusts layout to accommodate an avatar image/SVG. |
 | `isClose` | `Boolean` | `false` | Adjusts padding and layout for a close icon. |
 | `isAdd` | `Boolean` | `false` | Adjusts styling for an add/plus icon badge. |
+| `position` | `String` | `"right"` | Position of the `content` slot (`"left"`, `"right"`). |
 
 ## Events
 
@@ -38,6 +38,7 @@ None.
 | Name | Description |
 | --- | --- |
 | `default` | Badge content. |
+| `content` | Slot for an icon, image, or avatar. Placed according to the `position` prop. |
 
 ## Notes
 

package/.ai/ai_ref_AbButton.md

@@ -1,6 +1,6 @@
 # AbButton — AI Reference
 
-Highly customizable push button with an optional built-in loader animation and a leading icon slot. Styling variants and sizes are easily configured via props (`variant`, `size`, `isOutline`, `isIconBtn`).
+Highly customizable push button with an optional built-in loader animation and a leading icon slot. Styling variants and sizes are easily configured via props (`color`, `size`, `isOutline`, `isIconBtn`).
 
 ## Installation
 
@@ -19,16 +19,16 @@ No per-component import required.
 ```vue
 <template>
   <!-- Basic -->
-  <ab-button variant="primary">Save</ab-button>
+  <ab-button color="primary">Save</ab-button>
 
   <!-- With icon + divider -->
-  <ab-button variant="secondary" is-outline show-icon-divider>
+  <ab-button color="secondary" is-outline show-icon-divider>
     <template #icon><i class="bi bi-plus-lg"></i></template>
     New Item
   </ab-button>
 
   <!-- Loading state -->
-  <ab-button variant="primary" :is-animated="isSaving" is-hide-text-on-animate>
+  <ab-button color="primary" :is-animated="isSaving" is-hide-text-on-animate>
     Save
   </ab-button>
 </template>
@@ -44,9 +44,9 @@ const isSaving = ref(false);
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | `type` | `String` | `"button"` | Native button type (`button`, `submit`, `reset`). |
-| `variant` | `String` | `"primary"` | Color variant (primary, secondary, success, danger, warning, info, light, dark). |
+| `color` | `String` | `"primary"` | Color variant (primary, secondary, success, danger, warning, info, light, dark). |
 | `size` | `String` | `"md"` | Button size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
-| `isOutline` | `Boolean` | `false` | Applies the outline style for the selected variant. |
+| `isOutline` | `Boolean` | `false` | Applies the outline style for the selected color. |
 | `isIconBtn` | `Boolean` | `false` | Formats the button styling for a single icon. |
 | `isAnimated` | `Boolean` | `false` | When `true`, renders the loader SVG and optionally hides the label. |
 | `isHideTextOnAnimate` | `Boolean` | `false` | Hides the default slot content while `isAnimated` is `true`. |
@@ -66,5 +66,5 @@ No custom events emitted. All native button events (`click`, `focus`, `blur`,
 
 ## Notes
 
-- Size and color are now controlled via the `size` and `variant` props rather than raw Bootstrap utility classes.
-- If no `variant` prop is supplied, the component auto-applies `primary`.
+- Size and color are now controlled via the `size` and `color` props rather than raw Bootstrap utility classes.
+- If no `color` prop is supplied, the component auto-applies `primary`.

package/.ai/ai_ref_AbCarousel.md

@@ -1,47 +1,47 @@
-# AbCarousel — AI Reference
-
-Rotating slider for images or arbitrary HTML content. Supports horizontal and vertical orientations, autoplay, edge-fade, and outside / hover-only navigation buttons.
-
-## Installation
-
-Globally registered by the plugin.
-
-## Usage
-
-```vue
-<template>
-  <!-- Image carousel -->
-  <ab-carousel edge-fade autoplay :autoplay-interval="4000">
-    <img src="/slide1.jpg" alt="" />
-    <img src="/slide2.jpg" alt="" />
-    <img src="/slide3.jpg" alt="" />
-  </ab-carousel>
-
-  <!-- Card carousel, vertical orientation -->
-  <ab-carousel orientation="vertical" nav-outside nav-on-hover>
-    <ab-card v-for="card in cards" :key="card.id">…</ab-card>
-  </ab-carousel>
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `scrollAmount` | `Number` | `200` | Pixels scrolled per click. When children exist, falls back to item width. |
-| `orientation` | `String` | `"horizontal"` | `horizontal` or `vertical`. |
-| `edgeFade` | `Boolean` | `false` | Fade the leading/trailing edges. |
-| `autoplay` | `Boolean` | `false` | Auto-scroll enabled. |
-| `autoplayInterval` | `Number` | `3000` | Autoplay interval in ms. |
-| `navOutside` | `Boolean` | `false` | Render nav buttons outside the carousel. |
-| `navOnHover` | `Boolean` | `false` | Show nav buttons only on hover. |
-
-## Events
-
-None.
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `default` | Carousel items (images, cards, or arbitrary HTML). |
+# AbCarousel — AI Reference
+
+Rotating slider for images or arbitrary HTML content. Supports horizontal and vertical orientations, autoplay, edge-fade, and outside / hover-only navigation buttons.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <!-- Image carousel -->
+  <ab-carousel edge-fade autoplay :autoplay-interval="4000">
+    <img src="/slide1.jpg" alt="" />
+    <img src="/slide2.jpg" alt="" />
+    <img src="/slide3.jpg" alt="" />
+  </ab-carousel>
+
+  <!-- Card carousel, vertical orientation -->
+  <ab-carousel orientation="vertical" nav-outside nav-on-hover>
+    <ab-card v-for="card in cards" :key="card.id">…</ab-card>
+  </ab-carousel>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `scrollAmount` | `Number` | `200` | Pixels scrolled per click. When children exist, falls back to item width. |
+| `orientation` | `String` | `"horizontal"` | `horizontal` or `vertical`. |
+| `edgeFade` | `Boolean` | `false` | Fade the leading/trailing edges. |
+| `autoplay` | `Boolean` | `false` | Auto-scroll enabled. |
+| `autoplayInterval` | `Number` | `3000` | Autoplay interval in ms. |
+| `navOutside` | `Boolean` | `false` | Render nav buttons outside the carousel. |
+| `navOnHover` | `Boolean` | `false` | Show nav buttons only on hover. |
+
+## Events
+
+None.
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Carousel items (images, cards, or arbitrary HTML). |

package/.ai/ai_ref_AbConfirmPopover.md

@@ -1,59 +1,59 @@
-# AbConfirmPopover — AI Reference
-
-Confirmation popover with an async `onConfirm` handler and a built-in loader. Useful for destructive actions (delete, archive) that need an inline confirmation without opening a modal.
-
-## Installation
-
-Globally registered by the plugin.
-
-## Usage
-
-```vue
-<template>
-  <!-- Recommended: async onConfirm handles loader automatically -->
-  <ab-confirm-popover
-    msg="Delete this record?"
-    icon="warning"
-    :on-confirm="handleDelete"
-    :item-data="record"
-    confirm-text="Delete"
-    cancel-text="Keep"
-  >
-    <ab-button class="btn-danger"><i class="bi bi-trash"></i></ab-button>
-  </ab-confirm-popover>
-</template>
-
-<script setup>
-async function handleDelete(record) {
-  await api.delete(record.id);
-  // loader and popover close handled by the component
-}
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `msg` | `String` | `"Are you sure?"` | Confirmation message. |
-| `title` | `String` | `""` | Optional title above the message. |
-| `confirmText` | `String` | `"Yes"` | Confirm button label. |
-| `cancelText` | `String` | `"No"` | Cancel button label. |
-| `icon` | `String` | `"question"` | `success`, `error`, `warning`, `info`, `question`. |
-| `type` | `String` | `"confirm"` | `confirm`, `confirm-ajax`, or `alert`. |
-| `onConfirm` | `Function` | `null` | Async handler `(itemData) => Promise`. Preferred over `onConfirmed` event. |
-| `itemData` | `Object \| String \| Number \| Array` | `null` | Payload passed to `onConfirm`. |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `onConfirmed` | `{ showLoader(status), itemData, closePopover }` | Legacy callback — used only when no `onConfirm` prop is provided. Call `showLoader(true)` to start the loader, then `closePopover()` when done. |
-
-## Slots
-
-| Name | Scope | Description |
-| --- | --- | --- |
-| `default` | — | Trigger element (typically an `AbButton`). |
-| `desc` | — | Additional description below the message. |
-| `actionButtons` | `{ removeConfirmed, state }` | Custom action buttons — call `removeConfirmed()` to trigger the confirm flow. |
+# AbConfirmPopover — AI Reference
+
+Confirmation popover with an async `onConfirm` handler and a built-in loader. Useful for destructive actions (delete, archive) that need an inline confirmation without opening a modal.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <!-- Recommended: async onConfirm handles loader automatically -->
+  <ab-confirm-popover
+    msg="Delete this record?"
+    icon="warning"
+    :on-confirm="handleDelete"
+    :item-data="record"
+    confirm-text="Delete"
+    cancel-text="Keep"
+  >
+    <ab-button class="btn-danger"><i class="bi bi-trash"></i></ab-button>
+  </ab-confirm-popover>
+</template>
+
+<script setup>
+async function handleDelete(record) {
+  await api.delete(record.id);
+  // loader and popover close handled by the component
+}
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `msg` | `String` | `"Are you sure?"` | Confirmation message. |
+| `title` | `String` | `""` | Optional title above the message. |
+| `confirmText` | `String` | `"Yes"` | Confirm button label. |
+| `cancelText` | `String` | `"No"` | Cancel button label. |
+| `icon` | `String` | `"question"` | `success`, `error`, `warning`, `info`, `question`. |
+| `type` | `String` | `"confirm"` | `confirm`, `confirm-ajax`, or `alert`. |
+| `onConfirm` | `Function` | `null` | Async handler `(itemData) => Promise`. Preferred over `onConfirmed` event. |
+| `itemData` | `Object \| String \| Number \| Array` | `null` | Payload passed to `onConfirm`. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `onConfirmed` | `{ showLoader(status), itemData, closePopover }` | Legacy callback — used only when no `onConfirm` prop is provided. Call `showLoader(true)` to start the loader, then `closePopover()` when done. |
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `default` | — | Trigger element (typically an `AbButton`). |
+| `desc` | — | Additional description below the message. |
+| `actionButtons` | `{ removeConfirmed, state }` | Custom action buttons — call `removeConfirmed()` to trigger the confirm flow. |

package/.ai/ai_ref_AbDarkModeToggler.md

@@ -1,42 +1,42 @@
-# AbDarkModeToggler — AI Reference
-
-Light / dark theme toggle. Pairs with the `useTheme()` composable — clicking the toggle flips the current theme.
-
-## Installation
-
-Globally registered by the plugin. Uses the `useTheme` composable internally.
-
-## Usage
-
-```vue
-<template>
-  <ab-dark-mode-toggler size="md" />
-
-  <!-- Custom icons -->
-  <ab-dark-mode-toggler size="lg">
-    <template #dark-icon><i class="bi bi-sun"></i></template>
-    <template #light-icon><i class="bi bi-moon-stars"></i></template>
-  </ab-dark-mode-toggler>
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `size` | `String` | `"md"` | One of: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`. |
-
-## Events
-
-None.
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `dark-icon` | Icon shown when the current theme is dark (typically a sun). |
-| `light-icon` | Icon shown when the current theme is light (typically a moon). |
-
-## Related
-
-- `useTheme()` composable exposes `isDarkMode`, `toggleTheme()`, `setTheme()`.
+# AbDarkModeToggler — AI Reference
+
+Light / dark theme toggle. Pairs with the `useTheme()` composable — clicking the toggle flips the current theme.
+
+## Installation
+
+Globally registered by the plugin. Uses the `useTheme` composable internally.
+
+## Usage
+
+```vue
+<template>
+  <ab-dark-mode-toggler size="md" />
+
+  <!-- Custom icons -->
+  <ab-dark-mode-toggler size="lg">
+    <template #dark-icon><i class="bi bi-sun"></i></template>
+    <template #light-icon><i class="bi bi-moon-stars"></i></template>
+  </ab-dark-mode-toggler>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | `String` | `"md"` | One of: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`. |
+
+## Events
+
+None.
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `dark-icon` | Icon shown when the current theme is dark (typically a sun). |
+| `light-icon` | Icon shown when the current theme is light (typically a moon). |
+
+## Related
+
+- `useTheme()` composable exposes `isDarkMode`, `toggleTheme()`, `setTheme()`.

package/.ai/ai_ref_AbEasyModal.md

@@ -1,62 +1,62 @@
-# AbEasyModal — AI Reference
-
-Lightweight wrapper around `AbModal` that renders a trigger element and exposes imperative `openModal()` / `closeModal()` methods. Ideal for quick prompt-style dialogs where you do not need the full VeeValidate form wiring.
-
-## Installation
-
-Globally registered by the plugin.
-
-## Usage
-
-```vue
-<template>
-  <ab-easy-modal ref="modal">
-    <template #action>
-      <ab-button class="btn-primary">Show dialog</ab-button>
-    </template>
-
-    <template #title>Delete project?</template>
-    <template #body>
-      This cannot be undone.
-    </template>
-
-    <template #footer="{ closeModal }">
-      <ab-button class="btn-outline-secondary" @click="closeModal">Cancel</ab-button>
-      <ab-button class="btn-danger" @click="confirmDelete">Delete</ab-button>
-    </template>
-  </ab-easy-modal>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const modal = ref(null);
-async function confirmDelete() {
-  await api.delete();
-  modal.value.closeModal();
-}
-</script>
-```
-
-## Props
-
-All `AbModal` props can be forwarded via `$attrs` (e.g. `modal-size`, `hide-footer`).
-
-## Events
-
-Inherits `AbModal`'s `onSubmit`, `loading-status`, and `close` events.
-
-## Slots
-
-| Name | Scope | Description |
-| --- | --- | --- |
-| `action` | — | Trigger element rendered outside the modal (clicking it opens the modal). |
-| `title` | — | Modal title. |
-| `body` | — | Modal body content. |
-| `footer` | `{ closeModal, close }` | Footer; receives both close helpers. |
-
-## Exposed Methods
-
-| Method | Description |
-| --- | --- |
-| `openModal()` | Open the modal programmatically. |
-| `closeModal()` | Close the modal programmatically. |
+# AbEasyModal — AI Reference
+
+Lightweight wrapper around `AbModal` that renders a trigger element and exposes imperative `openModal()` / `closeModal()` methods. Ideal for quick prompt-style dialogs where you do not need the full VeeValidate form wiring.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <ab-easy-modal ref="modal">
+    <template #action>
+      <ab-button class="btn-primary">Show dialog</ab-button>
+    </template>
+
+    <template #title>Delete project?</template>
+    <template #body>
+      This cannot be undone.
+    </template>
+
+    <template #footer="{ closeModal }">
+      <ab-button class="btn-outline-secondary" @click="closeModal">Cancel</ab-button>
+      <ab-button class="btn-danger" @click="confirmDelete">Delete</ab-button>
+    </template>
+  </ab-easy-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const modal = ref(null);
+async function confirmDelete() {
+  await api.delete();
+  modal.value.closeModal();
+}
+</script>
+```
+
+## Props
+
+All `AbModal` props can be forwarded via `$attrs` (e.g. `modal-size`, `hide-footer`).
+
+## Events
+
+Inherits `AbModal`'s `onSubmit`, `loading-status`, and `close` events.
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `action` | — | Trigger element rendered outside the modal (clicking it opens the modal). |
+| `title` | — | Modal title. |
+| `body` | — | Modal body content. |
+| `footer` | `{ closeModal, close }` | Footer; receives both close helpers. |
+
+## Exposed Methods
+
+| Method | Description |
+| --- | --- |
+| `openModal()` | Open the modal programmatically. |
+| `closeModal()` | Close the modal programmatically. |

package/.ai/ai_ref_AbFileUploader.md

@@ -1,63 +1,63 @@
-# AbFileUploader — AI Reference
-
-File upload input with drag-and-drop, size validation, and preview. Can render a default uploader UI or accept a custom one via slots.
-
-## Installation
-
-Globally registered by the plugin.
-
-## Usage
-
-```vue
-<template>
-  <ab-file-uploader
-    v-model="file"
-    label="Upload avatar"
-    :max-size="1.5"
-    @on-select-files="handleFiles"
-  />
-
-  <!-- Custom UI -->
-  <ab-file-uploader v-model="file" :max-size="5">
-    <template #dial>
-      <div class="my-drop-zone">Drop files here</div>
-    </template>
-  </ab-file-uploader>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const file = ref(null);
-function handleFiles(files) {
-  console.log('Selected files:', files);
-}
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `modelValue` | `File \| Array \| String` | `null` | Selected file (or URL string / array). |
-| `maxSize` | `Number` | `2.0` | Max file size in MB. |
-| `label` | `String` | `""` | Field label. |
-| `containerClass` | `String` | `""` | Wrapper class. |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `update:modelValue` | `file` | v-model sync. |
-| `onSelectFiles` | `files` | All selected files after size validation. |
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `label` | Custom label. |
-| `dial` | Custom uploader UI (replaces the default design). |
-| `default` | Alternative custom UI slot. |
-
-## v-model
-
-Yes.
+# AbFileUploader — AI Reference
+
+File upload input with drag-and-drop, size validation, and preview. Can render a default uploader UI or accept a custom one via slots.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <ab-file-uploader
+    v-model="file"
+    label="Upload avatar"
+    :max-size="1.5"
+    @on-select-files="handleFiles"
+  />
+
+  <!-- Custom UI -->
+  <ab-file-uploader v-model="file" :max-size="5">
+    <template #dial>
+      <div class="my-drop-zone">Drop files here</div>
+    </template>
+  </ab-file-uploader>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const file = ref(null);
+function handleFiles(files) {
+  console.log('Selected files:', files);
+}
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `File \| Array \| String` | `null` | Selected file (or URL string / array). |
+| `maxSize` | `Number` | `2.0` | Max file size in MB. |
+| `label` | `String` | `""` | Field label. |
+| `containerClass` | `String` | `""` | Wrapper class. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `file` | v-model sync. |
+| `onSelectFiles` | `files` | All selected files after size validation. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `label` | Custom label. |
+| `dial` | Custom uploader UI (replaces the default design). |
+| `default` | Alternative custom UI slot. |
+
+## v-model
+
+Yes.