@appsbd/vue3-appsbd-ui 1.0.4 → 1.0.6

package/.ai/ai_ref_AbNumberField.md

@@ -1,59 +1,59 @@
-# AbNumberField — AI Reference
-
-Numeric input with minus/plus buttons, min/max clamping, custom step, and VeeValidate integration. Renders as a seamless pill by default; pass `is-border` to show internal dividers between buttons and input.
-
-## Usage
-
-```vue
-<template>
-  <ab-number-field v-model="qty" name="quantity" label="Quantity" :min="1" :max="10" :step="1" hints="Clamped between 1 and 10" />
-
-  <ab-number-field v-model="qty" name="quantity" label="Quantity" is-border />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const qty = ref(1);
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `modelValue` | `any` | `null` | Two-way-bound numeric value. |
-| `label` | `String` | `""` | Field label. |
-| `placeholder` | `String` | `""` | Input placeholder. |
-| `name` | `String` | **required** | VeeValidate field name. |
-| `rules` | `String \| Object` | `""` | VeeValidate rules. |
-| `containerClass` | `String` | `"mb-3"` | Class on the wrapper `<div>`. |
-| `hints` | `String` | `""` | Helper text beneath the input. |
-| `prefix` | `String` | `""` | Prefix text/icon (shortcut for `#prefix` slot). |
-| `postfix` | `String` | `""` | Postfix text/icon. |
-| `min` | `Number \| String` | `null` | Minimum allowed value. Clamps input and disables the minus button at the floor. |
-| `max` | `Number \| String` | `null` | Maximum allowed value. Clamps input and disables the plus button at the ceiling. |
-| `step` | `Number \| String` | `1` | Increment/decrement amount. |
-| `showButtons` | `Boolean` | `true` | Render the minus/plus controls. |
-| `disabled` | `Boolean` | `false` | Disable the field and both buttons. |
-| `isBorder` | `Boolean` | `false` | Show inner borders between minus/input/plus. Default is a seamless pill. |
-| `isLeftIconBorder` | `Boolean` | `false` | Render border between the prefix icon and the input. |
-| `isRightIconBorder` | `Boolean` | `false` | Render border between the postfix icon and the input. |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `update:modelValue` | `number \| null` | v-model sync. Value is `number` after clamping, or `null` when cleared. |
-| `input` | `number` | Fired on input after clamping. |
-| `keyup` | `KeyboardEvent` | Forwarded native event. |
-| `keydown` | `KeyboardEvent` | Forwarded native event. |
-| `paste` | `ClipboardEvent` | Forwarded native event. |
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `label` | Custom label content. |
-| `prefix` | Prefix icon / text (rendered before the minus button). |
-| `postfix` | Postfix icon / text (rendered after the plus button). |
-| `hints` | Helper text (overrides `hints` prop). |
+# AbNumberField — AI Reference
+
+Numeric input with minus/plus buttons, min/max clamping, custom step, and VeeValidate integration. Renders as a seamless pill by default; pass `is-border` to show internal dividers between buttons and input.
+
+## Usage
+
+```vue
+<template>
+  <ab-number-field v-model="qty" name="quantity" label="Quantity" :min="1" :max="10" :step="1" hints="Clamped between 1 and 10" />
+
+  <ab-number-field v-model="qty" name="quantity" label="Quantity" is-border />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const qty = ref(1);
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `any` | `null` | Two-way-bound numeric value. |
+| `label` | `String` | `""` | Field label. |
+| `placeholder` | `String` | `""` | Input placeholder. |
+| `name` | `String` | **required** | VeeValidate field name. |
+| `rules` | `String \| Object` | `""` | VeeValidate rules. |
+| `containerClass` | `String` | `"mb-3"` | Class on the wrapper `<div>`. |
+| `hints` | `String` | `""` | Helper text beneath the input. |
+| `prefix` | `String` | `""` | Prefix text/icon (shortcut for `#prefix` slot). |
+| `postfix` | `String` | `""` | Postfix text/icon. |
+| `min` | `Number \| String` | `null` | Minimum allowed value. Clamps input and disables the minus button at the floor. |
+| `max` | `Number \| String` | `null` | Maximum allowed value. Clamps input and disables the plus button at the ceiling. |
+| `step` | `Number \| String` | `1` | Increment/decrement amount. |
+| `showButtons` | `Boolean` | `true` | Render the minus/plus controls. |
+| `disabled` | `Boolean` | `false` | Disable the field and both buttons. |
+| `isBorder` | `Boolean` | `false` | Show inner borders between minus/input/plus. Default is a seamless pill. |
+| `isLeftIconBorder` | `Boolean` | `false` | Render border between the prefix icon and the input. |
+| `isRightIconBorder` | `Boolean` | `false` | Render border between the postfix icon and the input. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `number \| null` | v-model sync. Value is `number` after clamping, or `null` when cleared. |
+| `input` | `number` | Fired on input after clamping. |
+| `keyup` | `KeyboardEvent` | Forwarded native event. |
+| `keydown` | `KeyboardEvent` | Forwarded native event. |
+| `paste` | `ClipboardEvent` | Forwarded native event. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `label` | Custom label content. |
+| `prefix` | Prefix icon / text (rendered before the minus button). |
+| `postfix` | Postfix icon / text (rendered after the plus button). |
+| `hints` | Helper text (overrides `hints` prop). |

package/.ai/ai_ref_AbPinInput.md

@@ -1,33 +1,33 @@
-# AbPinInput — AI Reference
-
-Segmented PIN/OTP entry input. Renders `length` single-character boxes, optionally split into groups with a separator.
-
-## Usage
-
-```vue
-<template>
-  <ab-pin-input v-model="pin" :length="6" :group-size="3" show-separator />
-  <p v-if="pin.length === 6">Entered: {{ pin }}</p>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const pin = ref('');
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `modelValue` | `String` | — | Two-way-bound PIN string. |
-| `length` | `Number` | `6` | Number of digit boxes. |
-| `size` | `String` | `"md"` | Size: `sm`, `md`, `lg`. |
-| `showSeparator` | `Boolean` | `false` | Render a separator between groups. |
-| `groupSize` | `Number` | `3` | Digits per group when `showSeparator` is true. |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `update:modelValue` | `pin` | v-model sync on every input change. |
+# AbPinInput — AI Reference
+
+Segmented PIN/OTP entry input. Renders `length` single-character boxes, optionally split into groups with a separator.
+
+## Usage
+
+```vue
+<template>
+  <ab-pin-input v-model="pin" :length="6" :group-size="3" show-separator />
+  <p v-if="pin.length === 6">Entered: {{ pin }}</p>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const pin = ref('');
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `String` | — | Two-way-bound PIN string. |
+| `length` | `Number` | `6` | Number of digit boxes. |
+| `size` | `String` | `"md"` | Size: `sm`, `md`, `lg`. |
+| `showSeparator` | `Boolean` | `false` | Render a separator between groups. |
+| `groupSize` | `Number` | `3` | Digits per group when `showSeparator` is true. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `pin` | v-model sync on every input change. |

package/.ai/ai_ref_AbPopover.md

@@ -1,54 +1,54 @@
-# AbPopover — AI Reference
-
-Interactive popover with click, hover, focus, touch, or manual triggers. Content slot receives imperative `close`, `hide`, `show`, and `toggle` helpers.
-
-## Usage
-
-```vue
-<template>
-  <ab-popover placement="bottom" trigger="click">
-    <ab-button class="btn-primary">Menu</ab-button>
-    <template #content="{ close }">
-      <div class="popover-menu">
-        <button @click="edit(); close()">Edit</button>
-        <button @click="remove(); close()">Delete</button>
-      </div>
-    </template>
-  </ab-popover>
-
-  <ab-popover :trigger="['hover', 'focus']" placement="top">
-    <span>Hover me</span>
-    <template #content>Rich popover content</template>
-  </ab-popover>
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `placement` | `String` | `"bottom"` | `top`, `bottom`, `left`, `right`, or `auto-*`. |
-| `offset` | `Number \| String` | `8` | Offset from the reference. |
-| `gap` | `Number \| String` | `null` | Gap override (used instead of `offset` when set). |
-| `disabled` | `Boolean` | `false` | Disable the popover. |
-| `arrow` | `Boolean` | `true` | Render the arrow pointer. |
-| `arrowPadding` | `Number` | `4` | Padding between arrow and corner. |
-| `trigger` | `String \| Array` | `"click"` | `click`, `hover`, `focus`, `touch`, `manual`. Space-separated string or array. |
-| `autoHide` | `Boolean` | `true` | Close when clicking outside. |
-| `contentClass` | `String` | `""` | Extra class on the content element. |
-| `referenceSelector` | `String` | `null` | CSS selector inside the trigger to anchor positioning. |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `update:modelValue` | `visible: Boolean` | Visibility change (supports `v-model`). |
-| `show` | — | Popover shown. |
-| `hide` | — | Popover hidden. |
-
-## Slots
-
-| Name | Scope | Description |
-| --- | --- | --- |
-| `default` | — | Trigger element. |
-| `content` | `{ close, hide, show, toggle }` | Popover content — receives imperative controls. |
+# AbPopover — AI Reference
+
+Interactive popover with click, hover, focus, touch, or manual triggers. Content slot receives imperative `close`, `hide`, `show`, and `toggle` helpers.
+
+## Usage
+
+```vue
+<template>
+  <ab-popover placement="bottom" trigger="click">
+    <ab-button class="btn-primary">Menu</ab-button>
+    <template #content="{ close }">
+      <div class="popover-menu">
+        <button @click="edit(); close()">Edit</button>
+        <button @click="remove(); close()">Delete</button>
+      </div>
+    </template>
+  </ab-popover>
+
+  <ab-popover :trigger="['hover', 'focus']" placement="top">
+    <span>Hover me</span>
+    <template #content>Rich popover content</template>
+  </ab-popover>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `placement` | `String` | `"bottom"` | `top`, `bottom`, `left`, `right`, or `auto-*`. |
+| `offset` | `Number \| String` | `8` | Offset from the reference. |
+| `gap` | `Number \| String` | `null` | Gap override (used instead of `offset` when set). |
+| `disabled` | `Boolean` | `false` | Disable the popover. |
+| `arrow` | `Boolean` | `true` | Render the arrow pointer. |
+| `arrowPadding` | `Number` | `4` | Padding between arrow and corner. |
+| `trigger` | `String \| Array` | `"click"` | `click`, `hover`, `focus`, `touch`, `manual`. Space-separated string or array. |
+| `autoHide` | `Boolean` | `true` | Close when clicking outside. |
+| `contentClass` | `String` | `""` | Extra class on the content element. |
+| `referenceSelector` | `String` | `null` | CSS selector inside the trigger to anchor positioning. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `visible: Boolean` | Visibility change (supports `v-model`). |
+| `show` | — | Popover shown. |
+| `hide` | — | Popover hidden. |
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `default` | — | Trigger element. |
+| `content` | `{ close, hide, show, toggle }` | Popover content — receives imperative controls. |

package/.ai/ai_ref_AbPricingCard.md

@@ -1,56 +1,56 @@
-# AbPricingCard — AI Reference
-
-Single pricing tier card. Use multiple inside `AbPricingContainer` to build a pricing table.
-
-## Usage
-
-```vue
-<template>
-  <ab-pricing-card
-    title="Pro"
-    amount="49"
-    regular-amount="79"
-    frequency="/month"
-    badge="Popular"
-    color="primary"
-    variant="highlighted"
-    recommended
-    :features="[
-      { text: 'Unlimited projects' },
-      { text: 'Priority support' },
-      { text: 'Custom domain', disabled: true },
-    ]"
-  >
-    <template #action>
-      <ab-button class="btn-primary w-100">Choose Pro</ab-button>
-    </template>
-  </ab-pricing-card>
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `title` | `String` | `""` | Tier title. |
-| `amount` | `String \| Number` | `undefined` | Current price. |
-| `regularAmount` | `String \| Number` | `undefined` | Original price (rendered with strikethrough). |
-| `frequency` | `String` | `""` | Billing frequency suffix (e.g. `/month`). |
-| `badge` | `String` | `""` | Badge text (e.g. "Popular"). |
-| `active` | `Boolean` | `false` | Highlight this card as currently active. |
-| `recommended` | `Boolean` | `false` | Show a "Recommended" ribbon. |
-| `color` | `String` | `"primary"` | Color theme (Bootstrap color). |
-| `variant` | `String` | `"default"` | `default`, `minimal`, `highlighted`, `badge-price`. |
-| `features` | `Array` | `[]` | Each `{ text, disabled? }` or a string. |
-
-## Slots
-
-| Name | Scope | Description |
-| --- | --- | --- |
-| `header` | — | Custom header content. |
-| `badge` | — | Custom badge. |
-| `badge-icon` | — | Icon inside the badge. |
-| `price` | — | Custom price section. |
-| `features` | — | Custom features list. |
-| `feature-icon` | `{ feature, index }` | Custom icon per feature row. |
-| `action` | — | CTA button / actions. |
+# AbPricingCard — AI Reference
+
+Single pricing tier card. Use multiple inside `AbPricingContainer` to build a pricing table.
+
+## Usage
+
+```vue
+<template>
+  <ab-pricing-card
+    title="Pro"
+    amount="49"
+    regular-amount="79"
+    frequency="/month"
+    badge="Popular"
+    color="primary"
+    variant="highlighted"
+    recommended
+    :features="[
+      { text: 'Unlimited projects' },
+      { text: 'Priority support' },
+      { text: 'Custom domain', disabled: true },
+    ]"
+  >
+    <template #action>
+      <ab-button class="btn-primary w-100">Choose Pro</ab-button>
+    </template>
+  </ab-pricing-card>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `String` | `""` | Tier title. |
+| `amount` | `String \| Number` | `undefined` | Current price. |
+| `regularAmount` | `String \| Number` | `undefined` | Original price (rendered with strikethrough). |
+| `frequency` | `String` | `""` | Billing frequency suffix (e.g. `/month`). |
+| `badge` | `String` | `""` | Badge text (e.g. "Popular"). |
+| `active` | `Boolean` | `false` | Highlight this card as currently active. |
+| `recommended` | `Boolean` | `false` | Show a "Recommended" ribbon. |
+| `color` | `String` | `"primary"` | Color theme (Bootstrap color). |
+| `variant` | `String` | `"default"` | `default`, `minimal`, `highlighted`, `badge-price`. |
+| `features` | `Array` | `[]` | Each `{ text, disabled? }` or a string. |
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `header` | — | Custom header content. |
+| `badge` | — | Custom badge. |
+| `badge-icon` | — | Icon inside the badge. |
+| `price` | — | Custom price section. |
+| `features` | — | Custom features list. |
+| `feature-icon` | `{ feature, index }` | Custom icon per feature row. |
+| `action` | — | CTA button / actions. |

package/.ai/ai_ref_AbPricingContainer.md

@@ -1,41 +1,41 @@
-# AbPricingContainer — AI Reference
-
-Layout wrapper for pricing tables. Arranges `AbPricingCard` children in a flex row or responsive grid with optional breakpoint column counts.
-
-## 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). |
-
-## 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.
+
+## 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). |
+
+## 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,56 +1,56 @@
-# 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). |
+# 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). |