@appsbd/vue3-appsbd-ui 1.0.0 → 1.0.2

package/.ai/ai_ref_AbPricingContainer.md

@@ -1,49 +1,49 @@
-# AbPricingContainer — AI Reference
-
-Layout wrapper for pricing tables. Arranges `AbPricingCard` children in a flex row or responsive grid with optional breakpoint column counts.
-
-## Installation
-
-Globally registered by the plugin.
-
-## Usage
-
-```vue
-<template>
-  <ab-pricing-container max-width="1100px" gap="1rem" :md-cols="3">
-    <template #toggle>
-      <ab-toggle v-model="isYearly" name="billing" title="Bill yearly" />
-    </template>
-
-    <ab-pricing-card title="Starter" amount="0" frequency="/mo" :features="[…]" />
-    <ab-pricing-card title="Pro" amount="49" frequency="/mo" recommended :features="[…]" />
-    <ab-pricing-card title="Team" amount="99" frequency="/mo" :features="[…]" />
-  </ab-pricing-container>
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `width` | `String` | `"100%"` | Container width. |
-| `maxWidth` | `String` | `"1200px"` | Max width. |
-| `gap` | `String` | `"1.5rem"` | Gap between cards. |
-| `justify` | `String` | `"center"` | `justify-content` value. |
-| `align` | `String` | `"stretch"` | `align-items` value. |
-| `columns` | `Number \| String` | `0` | `0` → flex layout, `>0` → CSS grid with that column count. |
-| `smCols` | `Number \| String` | `""` | Columns at sm breakpoint. |
-| `mdCols` | `Number \| String` | `""` | Columns at md breakpoint. |
-| `lgCols` | `Number \| String` | `""` | Columns at lg breakpoint. |
-| `itemWidth` | `String` | `""` | Per-card width override (exposed as CSS custom property). |
-
-## Events
-
-None.
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `toggle` | Optional toggle area (e.g. monthly/yearly switch) rendered above the cards. |
-| `default` | `<ab-pricing-card>` children. |
+# AbPricingContainer — AI Reference
+
+Layout wrapper for pricing tables. Arranges `AbPricingCard` children in a flex row or responsive grid with optional breakpoint column counts.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <ab-pricing-container max-width="1100px" gap="1rem" :md-cols="3">
+    <template #toggle>
+      <ab-toggle v-model="isYearly" name="billing" title="Bill yearly" />
+    </template>
+
+    <ab-pricing-card title="Starter" amount="0" frequency="/mo" :features="[…]" />
+    <ab-pricing-card title="Pro" amount="49" frequency="/mo" recommended :features="[…]" />
+    <ab-pricing-card title="Team" amount="99" frequency="/mo" :features="[…]" />
+  </ab-pricing-container>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `width` | `String` | `"100%"` | Container width. |
+| `maxWidth` | `String` | `"1200px"` | Max width. |
+| `gap` | `String` | `"1.5rem"` | Gap between cards. |
+| `justify` | `String` | `"center"` | `justify-content` value. |
+| `align` | `String` | `"stretch"` | `align-items` value. |
+| `columns` | `Number \| String` | `0` | `0` → flex layout, `>0` → CSS grid with that column count. |
+| `smCols` | `Number \| String` | `""` | Columns at sm breakpoint. |
+| `mdCols` | `Number \| String` | `""` | Columns at md breakpoint. |
+| `lgCols` | `Number \| String` | `""` | Columns at lg breakpoint. |
+| `itemWidth` | `String` | `""` | Per-card width override (exposed as CSS custom property). |
+
+## Events
+
+None.
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `toggle` | Optional toggle area (e.g. monthly/yearly switch) rendered above the cards. |
+| `default` | `<ab-pricing-card>` children. |

package/.ai/ai_ref_AbPricingTable.md

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

package/.ai/ai_ref_AbProgressbar.md

@@ -1,37 +1,44 @@
-# 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
-
-| Name | Description |
-| --- | --- |
-| `default` | Custom label rendered alongside the bar. The CSS custom property `--progress-value` is exposed for advanced positioning. |
+# 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.

package/.ai/ai_ref_AbScrollbar.md

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

package/.ai/ai_ref_AbSettingsForm.md

@@ -1,54 +1,54 @@
-# 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` / `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.

package/.ai/ai_ref_AbSideMenuItem.md

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