@appsbd/vue3-appsbd-ui 1.0.0 → 1.0.2

package/.ai/ai_ref_AbSidebar.md

@@ -1,70 +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).
+# 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

@@ -1,41 +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.
+# 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

@@ -1,71 +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.
+# 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

@@ -1,38 +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. |
+# 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

@@ -1,59 +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. |
+# 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

@@ -1,47 +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. |
+# 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. |