@appsbd/vue3-appsbd-ui 1.0.0

package/.ai/ai_ref_AbSidebar.md

@@ -0,0 +1,70 @@
+# AbSidebar — AI Reference
+
+Collapsible application sidebar. Hosts `AbSideMenuItem` children, supports a header/footer, optional search, and persists its collapse state to `localStorage`.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <ab-sidebar app-unique-id="my-app" enable-search>
+    <template #header>
+      <img src="/logo.svg" alt="Logo" />
+    </template>
+
+    <ab-side-menu-item :to="{ name: 'dashboard' }">
+      <template #icon><i class="bi bi-speedometer2"></i></template>
+      Dashboard
+    </ab-side-menu-item>
+
+    <ab-side-menu-item>
+      <template #sectiontitle>Admin</template>
+    </ab-side-menu-item>
+
+    <ab-side-menu-item href="#">
+      <template #icon><i class="bi bi-people"></i></template>
+      Users
+      <template #submenu>
+        <ab-side-menu-item :to="{ name: 'users-list' }">All users</ab-side-menu-item>
+        <ab-side-menu-item :to="{ name: 'users-roles' }">Roles</ab-side-menu-item>
+      </template>
+    </ab-side-menu-item>
+
+    <template #footer>
+      <ab-dark-mode-toggler />
+    </template>
+  </ab-sidebar>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `appUniqueId` | `String` | `"apbd"` | Unique key used for the `localStorage` entry that stores collapse state. |
+| `hideSeperator` | `Boolean` | `false` | Hide dividers between sections. |
+| `mobileFullHeight` | `Boolean` | `false` | Force full-viewport height on mobile. |
+| `enableSearch` | `Boolean` | `false` | Show a search box that filters menu items. |
+| `searchTargetClass` | `String` | `"nav-item"` | CSS class of items that the search should match. |
+
+## Events
+
+None.
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `header` | Sidebar header (logo area). |
+| `default` | Menu items (place `AbSideMenuItem` children here). |
+| `footer` | Sidebar footer (typically user avatar or theme toggle). |
+| `collapse-icon` | Override the collapse toggle icon. |
+
+## Provides (for children)
+
+- `isCollapsed` — reactive collapse state.
+- `isMobileFullHeight` — reactive full-height state.
+- `layoutState` — layout state object (passed from parent if provided).

package/.ai/ai_ref_AbSkeleton.md

@@ -0,0 +1,41 @@
+# AbSkeleton — AI Reference
+
+Pulsing placeholder for loading states. Forwards all `$attrs` to the root `<div>`, so size and shape are controlled through utility classes or inline styles.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <!-- Heading skeleton -->
+  <ab-skeleton style="height: 24px; width: 60%;" />
+
+  <!-- Card skeleton -->
+  <ab-card>
+    <template #body>
+      <ab-skeleton style="height: 160px; border-radius: 8px;" />
+      <ab-skeleton class="mt-3" style="height: 18px; width: 80%;" />
+      <ab-skeleton class="mt-2" style="height: 18px; width: 60%;" />
+    </template>
+  </ab-card>
+</template>
+```
+
+## Props
+
+No declared props.
+
+## Events
+
+None.
+
+## Slots
+
+None.
+
+## Notes
+
+Apply `width`, `height`, `border-radius`, etc. via `style` or a utility class.

package/.ai/ai_ref_AbSlider.md

@@ -0,0 +1,71 @@
+# AbSlider — AI Reference
+
+Single or range numeric slider with custom thumb rendering and size variants.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <!-- Single -->
+  <ab-slider v-model="volume" :min="0" :max="100" label="Volume" show-labels />
+
+  <!-- Range -->
+  <ab-slider
+    v-model="priceRange"
+    :min="0"
+    :max="5000"
+    :step="50"
+    range
+    show-labels
+    :format-label="v => '$' + v"
+  />
+
+  <!-- Custom thumb -->
+  <ab-slider v-model="progress" show-labels>
+    <template #thumb="{ value, type }">
+      <div class="custom-thumb">{{ value }}</div>
+    </template>
+  </ab-slider>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `Number \| Array` | `null` | Single number, or `[min, max]` in range mode. |
+| `min` | `Number` | `0` | Minimum value. |
+| `max` | `Number` | `100` | Maximum value. |
+| `step` | `Number` | `1` | Increment step. |
+| `range` | `Boolean` | `false` | Enable range mode (two thumbs). |
+| `size` | `String` | `"md"` | `sm`, `md`, `lg`. |
+| `showLabels` | `Boolean` | `false` | Show value labels on thumbs. |
+| `disabled` | `Boolean` | `false` | Disable the slider. |
+| `label` | `String` | `""` | Field label. |
+| `containerClass` | `String` | `"mb-3"` | Wrapper class. |
+| `hints` | `String` | `""` | Helper text. |
+| `formatLabel` | `Function` | `v => Math.round(v) + "%"` | Formatter for thumb labels. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `value` | v-model sync. |
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `label` | — | Custom label. |
+| `prefix` | — | Prefix content (before the track). |
+| `postfix` | — | Postfix content (after the track). |
+| `thumb` | `{ value, type }` | Custom thumb rendering. `type` is `"min"`, `"max"`, or `"single"`. |
+| `hints` | — | Custom hints. |
+
+## v-model
+
+Yes.

package/.ai/ai_ref_AbTab.md

@@ -0,0 +1,38 @@
+# AbTab — AI Reference
+
+Single tab pane / link. Must be used inside an `AbTabs` parent.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<ab-tabs>
+  <ab-tab title="Profile" selected>
+    <template #icon><i class="bi bi-person"></i></template>
+    Profile content here.
+  </ab-tab>
+  <ab-tab title="Settings">Settings content here.</ab-tab>
+</ab-tabs>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `String` | **required** | Tab label text. |
+| `selected` | `Boolean` | `false` | Mark this tab as initially selected. |
+| `to` | `String \| Object` | `null` | Router-link target (only used when the parent `AbTabs` has `is-route-mode`). |
+
+## Events
+
+None.
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Tab pane content. |
+| `icon` | Icon shown next to the tab title. |

package/.ai/ai_ref_AbTable.md

@@ -0,0 +1,59 @@
+# AbTable — AI Reference
+
+Data grid with column definitions, per-cell and per-header slot overrides, and an `empty` slot.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <ab-table
+    :items="users"
+    :fields="[
+      { key: 'name', label: 'Name' },
+      { key: 'email', label: 'Email' },
+      { key: 'role', label: 'Role' },
+      { key: 'actions', label: '' },
+    ]"
+  >
+    <!-- Custom header -->
+    <template #head(name)>Full Name</template>
+
+    <!-- Custom cell -->
+    <template #cell(role)="{ value }">
+      <ab-badge class="bg-primary">{{ value }}</ab-badge>
+    </template>
+
+    <template #cell(actions)="{ item }">
+      <ab-button class="btn-sm btn-outline-secondary" @click="edit(item)">Edit</ab-button>
+    </template>
+
+    <template #empty>No users yet.</template>
+  </ab-table>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `Array` | `[]` | Table row objects. |
+| `fields` | `Array` | `[]` | Column definitions — each string key or `{ key, label }`. |
+| `tableClass` | `String \| Array \| Object` | `""` | CSS class(es) applied to the `<table>`. |
+
+## Events
+
+None.
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `thead` | — | Override the entire table head. |
+| `tbody` | — | Override the entire table body. |
+| `head(fieldKey)` | — | Override header content for a given field. |
+| `cell(fieldKey)` | `{ value, item, index }` | Override cell content for a given field. |
+| `empty` | — | Message shown when `items` is empty. |

package/.ai/ai_ref_AbTabs.md

@@ -0,0 +1,47 @@
+# AbTabs — AI Reference
+
+Parent container for tabbed interfaces. Pair with `AbTab` children. Supports both "content-switching" mode (default) and "router-link" mode for navigation-driven tabs.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <!-- Content-switching tabs -->
+  <ab-tabs nav-class="nav-pills">
+    <ab-tab title="Overview" selected>Overview content</ab-tab>
+    <ab-tab title="Billing">Billing content</ab-tab>
+    <ab-tab title="Security">Security content</ab-tab>
+  </ab-tabs>
+
+  <!-- Router-link tabs -->
+  <ab-tabs is-route-mode>
+    <ab-tab title="Users" :to="{ name: 'users' }" />
+    <ab-tab title="Teams" :to="{ name: 'teams' }" />
+  </ab-tabs>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `tabContainerClass` | `String` | — | Root wrapper class. |
+| `navContainerClass` | `String` | — | Wrapper around the nav list. |
+| `tabDetailsClass` | `String` | — | Wrapper around the tab content. |
+| `navClass` | `String` | `"nav-pills"` | Class on the nav list itself (e.g. `nav-tabs`, `nav-pills`). |
+| `tabClass` | `String` | `""` | Class on each individual tab link. |
+| `isRouteMode` | `Boolean` | `false` | When `true`, tab clicks perform router navigation. |
+
+## Events
+
+None.
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Place `<ab-tab>` children here. |

package/.ai/ai_ref_AbToggle.md

@@ -0,0 +1,65 @@
+# AbToggle — AI Reference
+
+Accessible switch/toggle control. Supports title + description layout and custom `trueValue` / `falseValue` values (defaults to `"Y"` / `"N"`).
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <ab-toggle
+    v-model="settings.notifications"
+    name="notifications"
+    title="Email notifications"
+    description="Receive weekly digest emails."
+  />
+
+  <!-- Boolean values -->
+  <ab-toggle
+    v-model="isActive"
+    name="active"
+    :true-value="true"
+    :false-value="false"
+    label="Active"
+  />
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `any` | — | v-model binding. |
+| `label` | `String \| null` | `null` | Field label (above the toggle). |
+| `val` | `any` | `"N"` | Initial value when `modelValue` is empty. |
+| `name` | `String` | **required** | VeeValidate field name. |
+| `containerClass` | `String` | `"mb-3"` | Wrapper class. |
+| `size` | `String` | `"md"` | Toggle size. |
+| `trueValue` | `any` | `"Y"` | Value when checked. |
+| `falseValue` | `any` | `"N"` | Value when unchecked. |
+| `title` | `String \| null` | `null` | Title next to the toggle. |
+| `description` | `String \| null` | `null` | Description under the title. |
+| `hints` | `String \| null` | `null` | Helper text. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `value` | v-model sync. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `label` | Custom label. |
+| `title` | Custom title. |
+| `description` | Custom description. |
+| `descriptionContainer` | Wraps the entire title + description block. |
+| `hints` | Custom hints. |
+
+## v-model
+
+Yes.

package/.ai/ai_ref_AbTooltip.md

@@ -0,0 +1,53 @@
+# AbTooltip — AI Reference
+
+Programmatic tooltip component. Complements the `v-tooltip` directive — use this when you need slot-driven rich content or interactive tooltips.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <!-- Simple -->
+  <ab-tooltip content="Save changes" placement="top">
+    <ab-button class="btn-primary"><i class="bi bi-save"></i></ab-button>
+  </ab-tooltip>
+
+  <!-- Rich content -->
+  <ab-tooltip placement="bottom" interactive>
+    <ab-button class="btn-outline-secondary">Info</ab-button>
+    <template #content>
+      <strong>Pro tip</strong>
+      <p>Press <ab-kbd>⌘</ab-kbd> + <ab-kbd>S</ab-kbd> to save.</p>
+    </template>
+  </ab-tooltip>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `content` | `String` | `""` | Tooltip text (used when `#content` slot is absent). |
+| `placement` | `String` | `"top"` | `top`, `bottom`, `left`, `right`, or `auto-*`. |
+| `offset` | `Number \| String` | `8` | Offset from the reference element. |
+| `disabled` | `Boolean` | `false` | Disable the tooltip. |
+| `arrow` | `Boolean` | `true` | Show the arrow pointer. |
+| `interactive` | `Boolean` | `false` | Allow hovering the tooltip without it hiding. |
+
+## Events
+
+None.
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Trigger element. |
+| `content` | Tooltip body (overrides the `content` prop). |
+
+## See also
+
+- `v-tooltip` directive for simple string hints (`<ab-button v-tooltip="'Hello'">`).

package/.ai/ai_ref_AbWizard.md

@@ -0,0 +1,77 @@
+# AbWizard — AI Reference
+
+Multi-step wizard container. Hosts `AbWizardStep` children, supports horizontal / vertical orientations, and multiple visual variants (including modal-rendered wizards).
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <ab-wizard
+    orientation="horizontal"
+    variant="circular"
+    :before-next="handleBeforeNext"
+    @finished="handleFinished"
+    @step-changed="onStepChange"
+  >
+    <ab-wizard-step title="Account" description="Basic info">
+      <!-- step content -->
+    </ab-wizard-step>
+
+    <ab-wizard-step title="Profile">
+      <!-- step content -->
+    </ab-wizard-step>
+
+    <ab-wizard-step title="Confirm">
+      <!-- step content -->
+    </ab-wizard-step>
+  </ab-wizard>
+</template>
+
+<script setup>
+async function handleBeforeNext(currentStepIndex) {
+  // Return false to block navigation
+  return true;
+}
+function handleFinished() { /* all steps done */ }
+function onStepChange(newIndex) { /* active step changed */ }
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `beforeNext` | `Function` | `async () => true` | Hook before moving forward; return `false` to cancel. |
+| `beforePrev` | `Function` | `async () => true` | Hook before moving back. |
+| `beforeFinish` | `Function` | `async () => true` | Hook before `finished` fires. |
+| `orientation` | `String` | `"horizontal"` | `horizontal` or `vertical`. |
+| `variant` | `String` | `"default"` | `default`, `circular`, `modal`, `circular-modal`, etc. |
+| `stepperSize` | `String` | `"md"` | `sm` or `md`. |
+| `hideControls` | `Boolean` | `false` | Hide the built-in next/prev buttons. |
+| `nextText` | `String` | `"Next"` | Next button label. |
+| `prevText` | `String` | `"Back"` | Previous button label. |
+| `finishText` | `String` | `"Finish"` | Finish button label. |
+| `disableClose` | `Boolean` | `false` | Disable the close button (modal variants). |
+| `modalClass` | `String` | `"modal-lg"` | Modal size class (modal variants only). |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `finished` | — | User completed the final step. |
+| `step-changed` | `stepIndex` | Active step changed. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | `<ab-wizard-step>` children. |
+
+## Provides
+
+- `AbWizard` injection key for step registration.
+- `registerStepValidator(stepId, fn)` — used by `AbSettingsForm` to register per-step validators.

package/.ai/ai_ref_AbWizardStep.md

@@ -0,0 +1,48 @@
+# AbWizardStep — AI Reference
+
+Single step inside an `AbWizard`. Declares its title, optional description, and an optional icon shown in the stepper.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<ab-wizard>
+  <ab-wizard-step
+    title="Account"
+    description="Create your account"
+    :icon="UserIcon"
+  >
+    <ab-input-field v-model="form.email" name="email" label="Email" rules="required|email" />
+  </ab-wizard-step>
+
+  <ab-wizard-step title="Confirm" disable-close>
+    Ready to submit?
+  </ab-wizard-step>
+</ab-wizard>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `String` | **required** | Step title shown in the stepper. |
+| `description` | `String` | `""` | Step description / subtitle. |
+| `icon` | `Object \| String \| Function` | `null` | Icon component, icon class string, or render function. |
+| `disableClose` | `Boolean` | `false` | Disable the close button while this step is active. |
+
+## Events
+
+None.
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Step body content. |
+
+## Provides
+
+An `AbWizardStep` injection key so children (e.g. `AbSettingsForm`) can register themselves as step validators.

package/.ai/ai_ref_global_config.md

@@ -0,0 +1,66 @@
+# Global UI Configuration (`AppsbdUIConfigure`)
+
+**Purpose**: Configure library-wide locale and formatting defaults (like month names, digits, range separator) so every instance of a library component renders consistently without needing manual prop wiring.
+
+## Installation / Usage
+
+Call `AppsbdUIConfigure` once during your app initialization (e.g., in `main.js`, or when a locale dynamically changes).
+
+```javascript
+import { AppsbdUIConfigure } from "@vue3-appsbd-ui";
+
+const banglaDigits = ["০", "১", "২", "৩", "৪", "৫", "৬", "৭", "৮", "৯"];
+
+AppsbdUIConfigure({
+  monthNames: [
+    "জানুয়ারি", "ফেব্রুয়ারি", "মার্চ", "এপ্রিল", "মে", "জুন",
+    "জুলাই", "আগস্ট", "সেপ্টেম্বর", "অক্টোবর", "নভেম্বর", "ডিসেম্বর"
+  ],
+  monthNamesShort: [
+    "জানু", "ফেব্রু", "মার্চ", "এপ্রি", "মে", "জুন",
+    "জুলাই", "আগস্ট", "সেপ্টে", "অক্টো", "নভে", "ডিসে"
+  ],
+  dayNames: ["শনি", "রবি", "সোম", "মঙ্গল", "বুধ", "বৃহঃ", "শুক্র"],
+  formatDigit: (val) => String(val).replace(/\d/g, (d) => banglaDigits[d]),
+  is24Hour: false,
+  rangeSeparator: " থেকে ",
+  dateDataFormat: "YYYY-MM-DD",
+  dateDisplayFormat: "DD/MM/YYYY",
+  datetimeDataFormat: "YYYY-MM-DD HH:mm",
+  datetimeDisplayFormat: "DD/MM/YYYY hh:mm a",
+  timeDataFormat: "HH:mm",
+  timeDisplayFormat: "hh:mm a",
+});
+```
+
+## Options Reference
+
+| Property | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `monthNames` | `String[]` | English full names | Array of 12 full month names. |
+| `monthNamesShort` | `String[]` | English short names | Array of 12 short month names. |
+| `dayNames` | `String[]` | English 3-letter names | Array of 7 short day names (Sat-first). |
+| `formatDigit` | `Function` | `(val) => String(val)` | Function to format digits. Applied dynamically to `AbNumberField` (display-only) and `AbDateTimePicker`. |
+| `rangeSeparator` | `String` | `' ↔ '` | Separator for date ranges in `AbDateTimePicker`. |
+| `is24Hour` | `Boolean` | `false` | Whether to use 24-hour format in `AbDateTimePicker`. |
+| `dateDataFormat` | `String` | `'YYYY-MM-DD'` | Global format for date data. |
+| `dateDisplayFormat` | `String` | `'YYYY-MM-DD'` | Global format for date display. |
+| `datetimeDataFormat` | `String` | `'YYYY-MM-DD HH:mm'` | Global format for datetime data. |
+| `datetimeDisplayFormat` | `String` | `'YYYY-MM-DD HH:mm'` | Global format for datetime display. |
+| `timeDataFormat` | `String` | `'HH:mm'` | Global format for time data. |
+| `timeDisplayFormat` | `String` | `'HH:mm'` | Global format for time display. |
+| `inputContainerClass` | `String` | `'mb-3'` | Global class for input containers. |
+| `toastPosition` | `String` | `'top-right'` | Default toast position. |
+| `toastDesign` | `String` | `'default'` | Default toast design. |
+| `toastTimeout` | `Number` | `5000` | Default toast timeout in ms. |
+| `toastCloseButton` | `Boolean` | `true` | Default toast close button visibility. |
+| `toastPauseOnHover` | `Boolean` | `true` | Default toast pause on hover. |
+| `toastPauseOnFocusLoss` | `Boolean` | `true` | Default toast pause on focus loss. |
+| `toastShowProgress` | `Boolean` | `true` | Default toast show progress. |
+| `trueValue` | `any` | `'Y'` | Default true value for toggles/switches. |
+| `falseValue` | `any` | `'N'` | Default false value for toggles/switches. |
+| `size` | `String` | `'md'` | Global size for components. |
+
+## Precedence Rule
+
+Components follow a strict "prop > global config > built-in default" resolution order. For example, if you pass `:is-24-hour="true"` directly to an `<AbDateTimePicker>`, it will override the global config setting for that specific instance.