@appsbd/vue3-appsbd-ui 1.0.4 → 1.0.5

package/.ai/ai_ref_AbProgressbar.md

@@ -1,34 +1,34 @@
-# AbProgressbar — AI Reference
-
-Animated Bootstrap-style progress bar with multiple color and size variants. Accepts a custom label via the default slot.
-
-## Usage
-
-```vue
-<template>
-  <ab-progressbar :progress-value="75" color="success" size="lg">75%</ab-progressbar>
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `minValue` | `Number` | `0` | Minimum value (used for ARIA attributes). |
-| `maxValue` | `Number` | `100` | Maximum value. |
-| `progressValue` | `Number` | `0` | Current value — typically `0–100`. |
-| `color` | `String` | `"primary"` | One of: `primary`, `secondary`, `success`, `danger`, `info`, `warning`. |
-| `size` | `String` | `"md"` | One of: `xs`, `sm`, `md`, `lg`, `xl`, `xxl`. |
-
-## Slots
-
-| `default` | Custom label rendered alongside the bar. The CSS custom property `--progress-value` is exposed for advanced positioning. |
-
-## Position Classes
-
-Apply these classes to move the label:
-- `progress-right`: Label to the right of the bar.
-- `progress-right-top`: Label to the right-top (floating above).
-- `progress-right-bottom`: Label to the right-bottom (floating below).
-- `progress-value-top`: Label floating above the current progress indicator.
-- `progress-value-bottom`: Label floating below the current progress indicator.
+# AbProgressbar — AI Reference
+
+Animated Bootstrap-style progress bar with multiple color and size variants. Accepts a custom label via the default slot.
+
+## Usage
+
+```vue
+<template>
+  <ab-progressbar :progress-value="75" color="success" size="lg">75%</ab-progressbar>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `minValue` | `Number` | `0` | Minimum value (used for ARIA attributes). |
+| `maxValue` | `Number` | `100` | Maximum value. |
+| `progressValue` | `Number` | `0` | Current value — typically `0–100`. |
+| `color` | `String` | `"primary"` | One of: `primary`, `secondary`, `success`, `danger`, `info`, `warning`. |
+| `size` | `String` | `"md"` | One of: `xs`, `sm`, `md`, `lg`, `xl`, `xxl`. |
+
+## Slots
+
+| `default` | Custom label rendered alongside the bar. The CSS custom property `--progress-value` is exposed for advanced positioning. |
+
+## Position Classes
+
+Apply these classes to move the label:
+- `progress-right`: Label to the right of the bar.
+- `progress-right-top`: Label to the right-top (floating above).
+- `progress-right-bottom`: Label to the right-bottom (floating below).
+- `progress-value-top`: Label floating above the current progress indicator.
+- `progress-value-bottom`: Label floating below the current progress indicator.

package/.ai/ai_ref_AbScrollbar.md

@@ -1,38 +1,38 @@
-# AbScrollbar — AI Reference
-
-Styled custom scrollbar wrapper for overflowing content. Emits scroll position events and supports hover-expand.
-
-## Usage
-
-```vue
-<template>
-  <ab-scrollbar size="md" is-hover-increase @scroll-end="loadMore">
-    <div style="height: 2000px"><!-- long content --></div>
-  </ab-scrollbar>
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `size` | `String` | `"md"` | `sm` (4px), `md` (6px), `lg` (8px). |
-| `isHoverIncrease` | `Boolean` | `false` | Expand scrollbar on hover. |
-| `transparentTrack` | `Boolean` | `true` | Transparent track background. |
-| `showAlways` | `Boolean` | `false` | Always show the scrollbar (vs auto-hide). |
-
-## Events
-
-Each event payload is an object with `scrollTop`, `scrollHeight`, `scrollRatio`, `scrollPercentage`, and related fields.
-
-| Event | Description |
-| --- | --- |
-| `scroll` | Fires on every scroll event. |
-| `scroll-start` | Fires when scrolled to the top. |
-| `scroll-end` | Fires when scrolled to the bottom. |
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `default` | Scrollable content. |
+# AbScrollbar — AI Reference
+
+Styled custom scrollbar wrapper for overflowing content. Emits scroll position events and supports hover-expand.
+
+## Usage
+
+```vue
+<template>
+  <ab-scrollbar size="md" is-hover-increase @scroll-end="loadMore">
+    <div style="height: 2000px"><!-- long content --></div>
+  </ab-scrollbar>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | `String` | `"md"` | `sm` (4px), `md` (6px), `lg` (8px). |
+| `isHoverIncrease` | `Boolean` | `false` | Expand scrollbar on hover. |
+| `transparentTrack` | `Boolean` | `true` | Transparent track background. |
+| `showAlways` | `Boolean` | `false` | Always show the scrollbar (vs auto-hide). |
+
+## Events
+
+Each event payload is an object with `scrollTop`, `scrollHeight`, `scrollRatio`, `scrollPercentage`, and related fields.
+
+| Event | Description |
+| --- | --- |
+| `scroll` | Fires on every scroll event. |
+| `scroll-start` | Fires when scrolled to the top. |
+| `scroll-end` | Fires when scrolled to the bottom. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Scrollable content. |

package/.ai/ai_ref_AbSettingsForm.md

@@ -1,46 +1,46 @@
-# AbSettingsForm — AI Reference
-
-Composite settings-style form layout. When nested inside an `AbWizardStep`, auto-registers itself as the wizard step's validator — returning `false` from `onSubmit` blocks the wizard from advancing.
-
-## Usage
-
-```vue
-<template>
-  <ab-wizard @finished="handleFinished">
-    <ab-wizard-step title="Profile">
-      <ab-settings-form :on-submit="validateProfile">
-        <ab-input-field v-model="form.name" name="name" label="Name" rules="required" />
-        <ab-input-field v-model="form.email" name="email" label="Email" rules="required|email" />
-      </ab-settings-form>
-    </ab-wizard-step>
-
-    <ab-wizard-step title="Preferences">
-      <ab-settings-form>
-        <ab-toggle v-model="form.emails" name="emails" title="Email me updates" />
-      </ab-settings-form>
-    </ab-wizard-step>
-  </ab-wizard>
-</template>
-
-<script setup>
-async function validateProfile(values) {
-  if (!(await api.checkEmail(values.email))) return false; // blocks next
-}
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `onSubmit` | `Function` | `() => {}` | Called with form values on submit. Return `false` (or throw) to block wizard progression. |
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `default` | Form fields. |
-
-## Notes
-
-Standalone use (outside a wizard) is supported — the component works as a plain VeeValidate `<Form>` wrapper.
+# AbSettingsForm — AI Reference
+
+Composite settings-style form layout. When nested inside an `AbWizardStep`, auto-registers itself as the wizard step's validator — returning `false` from `onSubmit` blocks the wizard from advancing.
+
+## Usage
+
+```vue
+<template>
+  <ab-wizard @finished="handleFinished">
+    <ab-wizard-step title="Profile">
+      <ab-settings-form :on-submit="validateProfile">
+        <ab-input-field v-model="form.name" name="name" label="Name" rules="required" />
+        <ab-input-field v-model="form.email" name="email" label="Email" rules="required|email" />
+      </ab-settings-form>
+    </ab-wizard-step>
+
+    <ab-wizard-step title="Preferences">
+      <ab-settings-form>
+        <ab-toggle v-model="form.emails" name="emails" title="Email me updates" />
+      </ab-settings-form>
+    </ab-wizard-step>
+  </ab-wizard>
+</template>
+
+<script setup>
+async function validateProfile(values) {
+  if (!(await api.checkEmail(values.email))) return false; // blocks next
+}
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `onSubmit` | `Function` | `() => {}` | Called with form values on submit. Return `false` (or throw) to block wizard progression. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Form fields. |
+
+## Notes
+
+Standalone use (outside a wizard) is supported — the component works as a plain VeeValidate `<Form>` wrapper.

package/.ai/ai_ref_AbSideMenuItem.md

@@ -1,47 +1,47 @@
-# AbSideMenuItem — AI Reference
-
-Single entry in an `AbSidebar`. Renders as a router-link, plain anchor, section title, or parent node with a submenu.
-
-## Usage
-
-```vue
-<ab-side-menu-item :to="{ name: 'dashboard' }">
-  <template #icon><i class="bi bi-house"></i></template>
-  Dashboard
-</ab-side-menu-item>
-
-<ab-side-menu-item>
-  <template #sectiontitle>Account</template>
-</ab-side-menu-item>
-
-<ab-side-menu-item href="#">
-  <template #icon><i class="bi bi-gear"></i></template>
-  Settings
-  <template #submenu>
-    <ab-side-menu-item :to="{ name: 'profile' }">Profile</ab-side-menu-item>
-    <ab-side-menu-item :to="{ name: 'billing' }">Billing</ab-side-menu-item>
-  </template>
-</ab-side-menu-item>
-```
-
-## Props
-
-| Name | Type | Description |
-| --- | --- | --- |
-| `to` | `String \| Object` | Router-link target. When this item has a submenu, `to` makes the label clickable as a link. |
-| `href` | `String` | Plain anchor target. With a submenu, `href` makes the item a submenu toggle instead of a link. |
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `default` | Label text. |
-| `icon` | Leading icon. |
-| `submenu` | Submenu items (nested `AbSideMenuItem`s). |
-| `sectiontitle` | When provided, the item renders as a section heading instead of a nav item. |
-
-## Injects
-
-- `isCollapsed` — from `AbSidebar`.
-- `isMobileFullHeight` — from `AbSidebar`.
-- `layoutState` — from `AbSidebar`.
+# AbSideMenuItem — AI Reference
+
+Single entry in an `AbSidebar`. Renders as a router-link, plain anchor, section title, or parent node with a submenu.
+
+## Usage
+
+```vue
+<ab-side-menu-item :to="{ name: 'dashboard' }">
+  <template #icon><i class="bi bi-house"></i></template>
+  Dashboard
+</ab-side-menu-item>
+
+<ab-side-menu-item>
+  <template #sectiontitle>Account</template>
+</ab-side-menu-item>
+
+<ab-side-menu-item href="#">
+  <template #icon><i class="bi bi-gear"></i></template>
+  Settings
+  <template #submenu>
+    <ab-side-menu-item :to="{ name: 'profile' }">Profile</ab-side-menu-item>
+    <ab-side-menu-item :to="{ name: 'billing' }">Billing</ab-side-menu-item>
+  </template>
+</ab-side-menu-item>
+```
+
+## Props
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `to` | `String \| Object` | Router-link target. When this item has a submenu, `to` makes the label clickable as a link. |
+| `href` | `String` | Plain anchor target. With a submenu, `href` makes the item a submenu toggle instead of a link. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Label text. |
+| `icon` | Leading icon. |
+| `submenu` | Submenu items (nested `AbSideMenuItem`s). |
+| `sectiontitle` | When provided, the item renders as a section heading instead of a nav item. |
+
+## Injects
+
+- `isCollapsed` — from `AbSidebar`.
+- `isMobileFullHeight` — from `AbSidebar`.
+- `layoutState` — from `AbSidebar`.

package/.ai/ai_ref_AbSidebar.md

@@ -1,62 +1,62 @@
-# AbSidebar — AI Reference
-
-Collapsible application sidebar. Hosts `AbSideMenuItem` children, supports header/footer, optional search, and persists collapse state to `localStorage`.
-
-## 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 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. |
-
-## 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).
+# AbSidebar — AI Reference
+
+Collapsible application sidebar. Hosts `AbSideMenuItem` children, supports header/footer, optional search, and persists collapse state to `localStorage`.
+
+## 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 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. |
+
+## 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

@@ -1,23 +1,23 @@
-# 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.
-
-## Usage
-
-```vue
-<template>
-  <ab-skeleton style="height: 24px; width: 60%;" />
-
-  <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>
-```
-
-## Notes
-
-Apply `width`, `height`, `border-radius`, etc. via `style` or a utility class.
+# 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.
+
+## Usage
+
+```vue
+<template>
+  <ab-skeleton style="height: 24px; width: 60%;" />
+
+  <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>
+```
+
+## Notes
+
+Apply `width`, `height`, `border-radius`, etc. via `style` or a utility class.

package/.ai/ai_ref_AbSlider.md

@@ -1,52 +1,52 @@
-# AbSlider — AI Reference
-
-Single or range numeric slider with custom thumb rendering and size variants.
-
-## Usage
-
-```vue
-<template>
-  <ab-slider v-model="volume" :min="0" :max="100" label="Volume" show-labels />
-
-  <ab-slider v-model="priceRange" :min="0" :max="5000" :step="50" range show-labels :format-label="v => '$' + v" />
-
-  <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. |
+# AbSlider — AI Reference
+
+Single or range numeric slider with custom thumb rendering and size variants.
+
+## Usage
+
+```vue
+<template>
+  <ab-slider v-model="volume" :min="0" :max="100" label="Volume" show-labels />
+
+  <ab-slider v-model="priceRange" :min="0" :max="5000" :step="50" range show-labels :format-label="v => '$' + v" />
+
+  <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. |