@appsbd/vue3-appsbd-ui 1.0.0

package/.ai/ai_ref_AbAvatar.md

@@ -0,0 +1,43 @@
+# AbAvatar — AI Reference
+
+Profile avatar component. Supports two variants: an `image` variant for displaying a photo, and an `add` variant that renders an "upload" placeholder for user-supplied files.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <ab-avatar :src="user.avatarUrl" alt="Profile photo" />
+
+  <!-- File upload mode -->
+  <ab-avatar variant="add" />
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `src` | `String` | `""` | Image source URL. |
+| `alt` | `String` | `""` | Alt text. |
+| `variant` | `String` | `"image"` | `"image"` or `"add"` (file-upload placeholder). |
+| `size` | `String` | `"md"` | Avatar size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
+| `isActive` | `Boolean` | `false` | Shows active status indicator. |
+| `isVerified` | `Boolean` | `false` | Shows verified status indicator and badge. |
+
+## Events
+
+None.
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Additional content (overlays, badges, etc.). |
+
+## Notes
+
+Sizes (`sm`, `md`, `lg`) and status indicators (`isActive`, `isVerified`) are natively supported through props.

package/.ai/ai_ref_AbBadge.md

@@ -0,0 +1,44 @@
+# AbBadge — AI Reference
+
+Lightweight Bootstrap badge wrapper used to display statuses or counts. Accepts props for size, variant, shape, and specialized icon variations.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```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>
+</template>
+```
+
+## Props
+
+| 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`). |
+| `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. |
+
+## Events
+
+None.
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Badge content. |
+
+## Notes
+
+The component exposes dedicated props for the most common styling variants, but still passes `$attrs` seamlessly to the root `<span>`.

package/.ai/ai_ref_AbButton.md

@@ -0,0 +1,71 @@
+# 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`).
+
+## Installation
+
+Globally registered by the library plugin — use `<ab-button>` directly in any template after:
+
+```js
+import AppsbdUI from 'vue3-appsbd-ui';
+import 'vue3-appsbd-ui/dist/style.css';
+app.use(AppsbdUI);
+```
+
+No per-component import required.
+
+## Usage
+
+```vue
+<template>
+  <!-- Basic -->
+  <ab-button variant="primary">Save</ab-button>
+
+  <!-- With icon + divider -->
+  <ab-button outline-variant="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>
+    Save
+  </ab-button>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const isSaving = ref(false);
+</script>
+```
+
+## Props
+
+| 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). |
+| `outlineVariant` | `String` | `"primary"` | Color variant applied when `isOutline` is true. |
+| `size` | `String` | `"md"` | Button size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
+| `isOutline` | `Boolean` | `false` | Applies the outline style for the selected variant. |
+| `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`. |
+| `showIconDivider` | `Boolean` | `false` | Renders a vertical divider between the `#icon` slot and the label. |
+
+## Events
+
+No custom events emitted. All native button events (`click`, `focus`, `blur`, …) bubble up via `$attrs`.
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `default` | — | Button label / content. |
+| `icon` | — | Leading icon element (rendered before the label). |
+| `svg` | — | Overrides the built-in loader SVG (only used while `isAnimated`). |
+
+## 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`.

package/.ai/ai_ref_AbCard.md

@@ -0,0 +1,53 @@
+# AbCard — AI Reference
+
+Flexible Bootstrap-style card container with `header`, `body`, and `footer` slots. Visual variations (`tile-card`, `item-card`, `insight-card`, …) are applied through CSS classes on `containerClass` rather than separate components.
+
+## Installation
+
+Globally registered by the plugin — no import required.
+
+```js
+app.use(AppsbdUI);
+```
+
+## Usage
+
+```vue
+<template>
+  <ab-card container-class="insight-card" header-class="fw-semibold">
+    <template #header>Revenue this month</template>
+    <template #body>
+      <h3>$12,480</h3>
+      <p>+8.2% vs last month</p>
+    </template>
+    <template #footer>
+      <ab-button class="btn-outline-primary btn-sm">View Report</ab-button>
+    </template>
+  </ab-card>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `containerClass` | `String` | `""` | CSS class applied to the card root (use to pick a layout variant). |
+| `headerClass` | `String` | `""` | CSS class for the header section. |
+| `bodyClass` | `String` | `""` | CSS class for the body section. |
+| `footerClass` | `String` | `""` | CSS class for the footer section. |
+
+## Events
+
+None.
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `header` | Card header content. Omit to hide the header. |
+| `body` | Card body content. |
+| `footer` | Card footer content. Omit to hide the footer. |
+
+## Notes
+
+- Do **not** create a new `.vue` file for card variations — define the variant as a CSS class in `src/styles/components/_card.scss` and pass it via `containerClass`.

package/.ai/ai_ref_AbCarousel.md

@@ -0,0 +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). |

package/.ai/ai_ref_AbColorPicker.md

@@ -0,0 +1,55 @@
+# AbColorPicker — AI Reference
+
+Radio-style color swatch picker. Takes a list of named colors and lets users pick one.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <ab-color-picker
+    v-model="themeColor"
+    name="theme"
+    :colors="[
+      { name: 'blue', color: '#2563eb', title: 'Blue' },
+      { name: 'green', color: '#16a34a', title: 'Green' },
+      { name: 'rose', color: '#e11d48', title: 'Rose' },
+    ]"
+    align="left"
+    border-radius="50%"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const themeColor = ref('blue');
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `String` | `""` | Selected color `name` (v-model). |
+| `name` | `String` | `"color"` | Radio group name. |
+| `colors` | `Array` | `[]` | Each: `{ name, color, title? }`. |
+| `align` | `String` | `"left"` | Flex alignment (`left`, `center`, `right`, …). |
+| `borderRadius` | `String` | `"50%"` | Swatch border-radius. |
+| `size` | `String` | `"md"` | Item size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `colorName` | v-model sync. |
+
+## Slots
+
+None.
+
+## v-model
+
+Yes (emits the color `name`, not the hex value).

package/.ai/ai_ref_AbConfirmPopover.md

@@ -0,0 +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. |

package/.ai/ai_ref_AbCustomField.md

@@ -0,0 +1,74 @@
+# AbCustomField — AI Reference
+
+Dynamic form scaffold — takes a `fieldInputs` array describing multiple fields (text, number, date, toggle, dropdown, etc.) and renders them all, binding values to an external `customProps` object.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <ab-custom-field :field-inputs="fields" :custom-props="form" size="sm" />
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+
+const form = reactive({ username: '', age: null, role: 'admin', active: 'Y' });
+
+const fields = [
+  { id: 'username', type: 'T', label: 'Username', rules: 'required' },
+  { id: 'age', type: 'N', label: 'Age' },
+  { id: 'role', type: 'W', label: 'Role', options: [
+    { val: 'admin', title: 'Admin' },
+    { val: 'user', title: 'User' },
+  ] },
+  { id: 'active', type: 'S', label: 'Active' },
+];
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `fieldInputs` | `Array` | `[]` | Field definitions (see type table below). |
+| `size` | `String` | `"sm"` | Default input size applied to every field. |
+| `customProps` | `Object` | `{}` | Reactive object that field values bind into (keyed by each field's `id`). |
+
+### Field `type` codes
+
+| Code | Renders |
+| --- | --- |
+| `T` | Text input |
+| `N` | Number input |
+| `U` | URL input |
+| `P` | Password input |
+| `E` | Textarea |
+| `H` | Hidden input |
+| `D` | Date picker |
+| `DR` | Date range picker |
+| `R` | Radio group |
+| `W` | Dropdown / select |
+| `S` | Switch / toggle |
+| `C` | Checkbox |
+
+## Events
+
+None at the component level — use VeeValidate on the parent form for submission and validation.
+
+## Slots (scoped by field id)
+
+For each field whose `id` is `xyz`, the following named slots are available:
+
+| Slot | Description |
+| --- | --- |
+| `Label{id}` | Custom label for the field. |
+| `Hints{id}` | Custom hints/helper text. |
+| `Prefix{id}` | Custom prefix. |
+| `Postfix{id}` | Custom postfix. |
+| `Icon{id}` | Custom icon (date picker). |
+| `Description{id}` | Custom description. |
+| `HelpText{id}` | Custom help text. |

package/.ai/ai_ref_AbDarkModeToggler.md

@@ -0,0 +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()`.

package/.ai/ai_ref_AbDateTimePicker.md

@@ -0,0 +1,105 @@
+# AbDateTimePicker — AI Reference
+
+Advanced date / time / range picker built on `v-calendar`. Supports single-date, date-range, time-only, and datetime modes, with per-locale digit formatters and day/month name overrides.
+
+## Installation
+
+Globally registered by the plugin. Requires peer dependency `v-calendar`:
+
+```js
+import 'v-calendar/style.css';
+```
+
+## Usage
+
+```vue
+<template>
+  <!-- Single date -->
+  <ab-date-time-picker
+    v-model="date"
+    name="startDate"
+    label="Start date"
+    data-format="YYYY-MM-DD"
+    :min-date="new Date()"
+  />
+
+  <!-- Date range -->
+  <ab-date-time-picker
+    v-model="range"
+    name="period"
+    label="Reporting period"
+    is-range
+    range-separator=" → "
+  />
+
+  <!-- Datetime -->
+  <ab-date-time-picker
+    v-model="datetime"
+    name="meetingAt"
+    label="Meeting at"
+    mode="datetime"
+    is24-hour
+    :minute-step="15"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const date = ref(null);
+const range = ref({ start: null, end: null });
+const datetime = ref(null);
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `String \| Object` | `null` | Date (or `{ start, end }` for range). |
+| `label` | `String` | `""` | Field label. |
+| `placeholder` | `String` | `""` | Input placeholder. |
+| `name` | `String` | **required** | VeeValidate field name. |
+| `rules` | `String \| Object` | `""` | VeeValidate rules. |
+| `isRange` | `Boolean` | `false` | Enable date-range mode. |
+| `size` | `String` | `"md"` | Adjusts component size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
+| `containerClass` | `String` | `"mb-3"` | Wrapper class. |
+| `hints` | `String` | `""` | Helper text. |
+| `isDisable` | `Boolean` | `false` | Disable the picker. |
+| `visibility` | `String` | `"click"` | v-calendar popover trigger. |
+| `mask` | `String` | `""` | Input mask. |
+| `dataFormat` | `String` | `"YYYY-MM-DD"` | Storage format. |
+| `displayFormat` | `String` | `"YYYY-MM-DD"` | Display format. |
+| `maxDate` | `Date \| String` | `undefined` | Maximum selectable date. |
+| `minDate` | `Date \| String` | `undefined` | Minimum selectable date. |
+| `disableDates` | `Array` | `[]` | Accepts `Date`, string, or `{ repeat: { weekdays: [...] } }` entries. |
+| `showInInput` | `Boolean` | `true` | Input-style trigger (vs button). |
+| `monthNames` | `Array` | `undefined` | Custom full month names. |
+| `monthNamesShort` | `Array` | `undefined` | Custom short month names. |
+| `dayNames` | `Array` | `undefined` | Custom day names. |
+| `formatDigit` | `Function` | `undefined` | Locale digit formatter (e.g. Bengali digits). |
+| `rangeSeparator` | `String` | `undefined` | Display separator between range start/end. |
+| `mode` | `String` | `"date"` | `date`, `time`, or `datetime`. |
+| `is24Hour` | `Boolean` | `undefined` | 24-hour clock. |
+| `minuteStep` | `Number` | `1` | Minute increment. |
+| `isLeftIconBorder` | `Boolean` | `false` | Border on prefix icon. |
+| `isRightIconBorder` | `Boolean` | `false` | Border on suffix icon. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `value` | v-model sync. |
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `label` | — | Custom label. |
+| `prefix` | — | Prefix area. |
+| `icon` | — | Calendar / clock icon. |
+| `hints` | — | Custom hints. |
+| `picker-container` | `{ isRange, showInInput, value }` | Override the entire picker UI. |
+
+## v-model
+
+Yes.

package/.ai/ai_ref_AbEasyModal.md

@@ -0,0 +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. |