@appsbd/vue3-appsbd-ui 1.0.3 → 1.0.5

package/.ai/ai_ref_AbPricingTable.md

@@ -1,72 +1,56 @@
-# AbPricingTable — AI Reference
-
-The `AbPricingTable` component renders a stylized, responsive pricing table. It displays a list of features on the left side and multiple package tiers on the right side. It is designed to consume structured JSON data for features and packages and handles the layout and responsive reflowing automatically.
-
-## Installation
-
-No extra dependencies are required. The component is globally registered by the library plugin.
-
-## Usage
-
-```vue
-<script setup>
-import { computed } from 'vue'
-
-const features = [
-  { key: "links", title: "All limited links" },
-  { key: "analytics", title: "Own analytics platform" }
-]
-
-const packages = computed(() => {
-  return [
-    {
-      id: "p1",
-      name: "Intro",
-      price: 19,
-      regularPrice: 24,
-      badge: "Save 20%",
-      features: { links: "Y", analytics: "Y" },
-      showButton: true,
-      buttonText: "Choose Plan",
-      isActive: false
-    }
-  ]
-})
-</script>
-
-<template>
-  <ab-pricing-table 
-    :features="features" 
-    :packages="packages" 
-    @select-package="(pkg) => console.log('Selected:', pkg)"
-  />
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| ---- | ---- | ------- | ----------- |
-| `features` | Array | `**required**` | Array of feature definitions. Example: `{ key: "chat", title: "Chat support" }`. |
-| `packages` | Array | `**required**` | Array of package configurations. Supports price, regularPrice, badge, features (Y/N map), and button options. |
-
-## Events
-
-| Event | Payload | Description |
-| ----- | ------- | ----------- |
-| `select-package` | `(packageObject)` | Emitted when a package's action button is clicked. |
-
-## Slots
-
-| Slot Name | Props | Description |
-| --------- | ----- | ----------- |
-| `features-header` | None | Replaces the header in the left-hand features column. |
-| `feature-label` | `{ feature }` | Customizes how the feature name is displayed in the features list. |
-| `package-badge` | `{ pkg }` | Customizes the badge at the top of the package card. |
-| `package-header` | `{ pkg }` | Customizes the top section of the package card (name and pricing info). |
-| `package-feature` | `{ pkg, feature }` | Replaces the default check/cross icon rendering for a feature row in a package. |
-| `package-footer` | `{ pkg }` | Customizes the footer area (usually contains the action button). |
-
-## v-model
-
-No — use the `@select-package` event to handle user selection.
+# AbPricingTable — AI Reference
+
+Responsive pricing comparison table. Displays a feature list on the left and multiple package tiers on the right, consuming structured JSON data.
+
+## Usage
+
+```vue
+<script setup>
+import { computed } from 'vue'
+
+const features = [
+  { key: "links", title: "All limited links" },
+  { key: "analytics", title: "Own analytics platform" }
+]
+
+const packages = computed(() => [{
+  id: "p1",
+  name: "Intro",
+  price: 19,
+  regularPrice: 24,
+  badge: "Save 20%",
+  features: { links: "Y", analytics: "Y" },
+  showButton: true,
+  buttonText: "Choose Plan",
+  isActive: false
+}])
+</script>
+
+<template>
+  <ab-pricing-table :features="features" :packages="packages" @select-package="(pkg) => console.log('Selected:', pkg)" />
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| `features` | Array | **required** | Array of `{ key, title }` feature definitions. |
+| `packages` | Array | **required** | Array of package configs with price, regularPrice, badge, features (Y/N map), and button options. |
+
+## Events
+
+| Event | Payload | Description |
+| ----- | ------- | ----------- |
+| `select-package` | `packageObject` | Emitted when a package's action button is clicked. |
+
+## Slots
+
+| Slot Name | Props | Description |
+| --------- | ----- | ----------- |
+| `features-header` | None | Replaces the header in the left-hand features column. |
+| `feature-label` | `{ feature }` | Customizes how the feature name is displayed. |
+| `package-badge` | `{ pkg }` | Customizes the badge at the top of the package card. |
+| `package-header` | `{ pkg }` | Customizes the top section of the package card. |
+| `package-feature` | `{ pkg, feature }` | Replaces the default check/cross icon rendering for a feature row. |
+| `package-footer` | `{ pkg }` | Customizes the footer area (action button). |

package/.ai/ai_ref_AbProgressbar.md

@@ -1,44 +1,34 @@
-# AbProgressbar — AI Reference
-
-Animated Bootstrap-style progress bar with multiple color and size variants. Accepts a custom label via the default slot.
-
-## Installation
-
-Globally registered by the plugin.
-
-## 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`. |
-
-## Events
-
-None.
-
-## 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,48 +1,38 @@
-# AbScrollbar — AI Reference
-
-Styled custom scrollbar wrapper for overflowing content. Emits scroll position events and supports hover-expand.
-
-## Installation
-
-Globally registered by the plugin.
-
-## 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,54 +1,46 @@
-# AbSettingsForm — AI Reference
-
-Composite settings-style form layout. When nested inside an `AbWizardStep` / `AbWizard`, auto-registers itself as the wizard step's validator — returning `false` from `onSubmit` blocks the wizard from advancing.
-
-## Installation
-
-Globally registered by the plugin.
-
-## 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. |
-
-## Events
-
-None at the component level — form submission is handled via the `onSubmit` prop.
-
-## 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,58 +1,47 @@
-# AbSideMenuItem — AI Reference
-
-Single entry in an `AbSidebar`. Can render as a router-link, a plain anchor, a section title, or a parent node with a submenu.
-
-## Installation
-
-Globally registered by the plugin.
-
-## Usage
-
-```vue
-<!-- Router-link item -->
-<ab-side-menu-item :to="{ name: 'dashboard' }">
-  <template #icon><i class="bi bi-house"></i></template>
-  Dashboard
-</ab-side-menu-item>
-
-<!-- Section title -->
-<ab-side-menu-item>
-  <template #sectiontitle>Account</template>
-</ab-side-menu-item>
-
-<!-- Parent with submenu -->
-<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. |
-
-## Events
-
-None.
-
-## 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,70 +1,62 @@
-# 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 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).