@appsbd/vue3-appsbd-ui 1.0.3 → 1.0.4

package/.ai/ai_ref_AbInputField.md

@@ -1,10 +1,6 @@
 # AbInputField — AI Reference
 
-Core text input with built-in VeeValidate integration, localized feedback, and prefix/postfix/hint slots. Use this for single-line text inputs; use `AbField` if you want a polymorphic field that can render selects, toggles, etc.
-
-## Installation
-
-Globally registered by the plugin. Peer dependencies: `vee-validate`, `@vee-validate/rules`.
+Core text input with VeeValidate integration, localized feedback, and prefix/postfix/hint slots. Use for single-line text inputs; use `AbField` for a polymorphic field that can render selects, toggles, etc.
 
 ## Usage
 
@@ -68,7 +64,3 @@ const form = reactive({ email: '' });
 | `icon` | Custom icon inside the input field. |
 | `postfix` | Postfix icon / text. |
 | `hints` | Helper text (overrides `hints` prop). |
-
-## v-model
-
-Yes — `modelValue` + `update:modelValue`.

package/.ai/ai_ref_AbInputTag.md

@@ -2,29 +2,13 @@
 
 Multi-tag input — lets users enter and manage a list of tags. Optionally supports an `options` array for autocomplete-style selection.
 
-## Installation
-
-Globally registered by the plugin.
-
 ## Usage
 
 ```vue
 <template>
-  <ab-input-tag
-    v-model="tags"
-    name="tags"
-    label="Tags"
-    placeholder="Type and press Enter"
-    :max="10"
-    hints="Up to 10 tags"
-  />
+  <ab-input-tag v-model="tags" name="tags" label="Tags" placeholder="Type and press Enter" :max="10" hints="Up to 10 tags" />
 
-  <!-- With preset options -->
-  <ab-input-tag
-    v-model="skills"
-    name="skills"
-    :options="['Vue', 'React', 'Angular', 'Svelte']"
-  />
+  <ab-input-tag v-model="skills" name="skills" :options="['Vue', 'React', 'Angular', 'Svelte']" />
 </template>
 
 <script setup>
@@ -70,7 +54,3 @@ const skills = ref([]);
 | `icon` | Custom icon inside the input. |
 | `postfix` | Postfix icon/text. |
 | `hints` | Custom hints. |
-
-## v-model
-
-Yes.

package/.ai/ai_ref_AbKbd.md

@@ -2,10 +2,6 @@
 
 Styled `<kbd>`-like keyboard key chip. Compose multiple into a chord using `AbKbdGroup`.
 
-## Installation
-
-Globally registered by the plugin.
-
 ## Usage
 
 ```vue
@@ -20,14 +16,6 @@ Globally registered by the plugin.
 </template>
 ```
 
-## Props
-
-No declared props.
-
-## Events
-
-None.
-
 ## Slots
 
 | Name | Description |

package/.ai/ai_ref_AbKbdGroup.md

@@ -1,10 +1,6 @@
 # AbKbdGroup — AI Reference
 
-Visual grouping container for multiple `AbKbd` chips — typically used to render keyboard chords / shortcuts.
-
-## Installation
-
-Globally registered by the plugin.
+Visual grouping container for multiple `AbKbd` chips — renders keyboard chords / shortcuts.
 
 ## Usage
 
@@ -18,14 +14,6 @@ Globally registered by the plugin.
 </template>
 ```
 
-## Props
-
-No declared props.
-
-## Events
-
-None.
-
 ## Slots
 
 | Name | Description |

package/.ai/ai_ref_AbModal.md

@@ -1,103 +1,98 @@
-# AbModal — AI Reference
-
-Full-featured dialog with a built-in VeeValidate `<Form>`, loader overlay, and "message-only" mode. Exposes imperative methods for showing loaders, clearing forms, and closing.
-
-## Installation
-
-Globally registered by the plugin.
-
-## Usage
-
-```vue
-<template>
-  <ab-button class="btn-primary" @click="modalRef.open = true">Open</ab-button>
-
-  <ab-modal
-    ref="modal"
-    v-model:is-modal-visible="isOpen"
-    modal-size="modal-lg"
-    @on-submit="handleSubmit"
-    @close="isOpen = false"
-  >
-    <template #headerTitle>Edit profile</template>
-
-    <!-- default slot receives VeeValidate Form context -->
-    <ab-input-field name="email" label="Email" rules="required|email" v-model="form.email" />
-
-    <template #footer="{ close }">
-      <ab-button class="btn-outline-secondary" @click="close">Cancel</ab-button>
-      <ab-button class="btn-primary" type="submit">Save</ab-button>
-    </template>
-  </ab-modal>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const isOpen = ref(false);
-const modal = ref(null);
-const form = ref({ email: '' });
-
-async function handleSubmit(values, { resetForm }) {
-  modal.value.showLoader(true, 'Saving…');
-  await api.save(values);
-  modal.value.showLoader(false);
-  modal.value.close();
-}
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `isModalVisible` | `Boolean` | — | Visibility state (supports `v-model:is-modal-visible`). |
-| `modalSize` | `String` | `""` | Bootstrap size class (`modal-sm`, `modal-lg`, `modal-xl`). |
-| `modalMsg` | `String` | `""` | Default message for message-only mode. |
-| `hideHeader` | `Boolean` | `false` | Hide the header section entirely. |
-| `hideBody` | `Boolean` | `false` | Hide the body section entirely. |
-| `hideFooter` | `Boolean` | `false` | Hide the footer section entirely. |
-| `hideCrossBtn` | `Boolean` | `false` | Hide the top-right close button. |
-| `hideForm` | `Boolean` | `false` | Render the root as a plain `<div>` instead of a VeeValidate `<Form>`. |
-| `bodyClass` | `String` | `""` | Extra class on the body section. |
-| `isModalCenter` | `Boolean` | `true` | Vertically center the modal. |
-| `isBorder` | `Boolean` | `false` | Show a border around the modal content. |
-| `iconContainerClass` | `String` | `""` | Extra class on the header icon container. |
-| `headerClass` | `String` | `""` | Preferred extra class on the header. |
-| `headerrClass` | `String` | `""` | Legacy alias for `headerClass`. `headerClass` takes precedence when both are provided. |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `onSubmit` | `(event, { resetForm })` | Fired when the internal VeeValidate form is submitted. |
-| `loading-status` | `Boolean` | Emitted whenever the loader state toggles. |
-| `close` | — | Modal was closed (via ✕, Escape, or `close()`). |
-
-## Slots
-
-| Name | Scope | Description |
-| --- | --- | --- |
-| `default` | VeeValidate `Form` slot-props | Form / body content when `hideForm` is `false`. |
-| `header` | — | Overrides the entire header. |
-| `headerIcon` | — | Icon shown at the start of the header. |
-| `headerTitleContainer` | — | Overrides the title/subtitle wrapper. |
-| `headerTitle` | — | Modal title text. |
-| `headerSubTitle` | — | Modal subtitle text. |
-| `body` | — | Overrides the body section. |
-| `loader` | — | Overrides the default loader element. |
-| `footer` | `{ close }` | Footer content — receives a `close()` function. |
-
-## Exposed Methods (via template ref)
-
-| Method | Description |
-| --- | --- |
-| `showLoader(status, msg?)` | Show/hide the loader with an optional message. |
-| `close()` | Close the modal. |
-| `clearForm()` | Reset the VeeValidate form and close. |
-| `returnClear()` | Reset the form without closing. |
-| `showMsgOnly(msg, isHideFooter?)` | Switch to message-only mode. |
-| `setMessageOnly(status)` | Toggle message-only mode programmatically. |
-
-## Notes
-
-- Use `AbEasyModal` when you only need a simple trigger-and-close dialog without a form.
+# AbModal — AI Reference
+
+Full-featured dialog with a built-in VeeValidate `<Form>`, loader overlay, and "message-only" mode. Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <ab-button class="btn-primary" @click="isOpen = true">Open</ab-button>
+
+  <ab-modal
+    ref="modal"
+    v-model:is-modal-visible="isOpen"
+    modal-size="modal-lg"
+    @on-submit="handleSubmit"
+    @close="isOpen = false"
+  >
+    <template #headerTitle>Edit profile</template>
+
+    <ab-input-field name="email" label="Email" rules="required|email" v-model="form.email" />
+
+    <template #footer="{ close }">
+      <ab-button class="btn-outline-secondary" @click="close">Cancel</ab-button>
+      <ab-button class="btn-primary" type="submit">Save</ab-button>
+    </template>
+  </ab-modal>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const isOpen = ref(false);
+const modal = ref(null);
+const form = ref({ email: "" });
+
+async function handleSubmit(values, { resetForm }) {
+  modal.value.showLoader(true, "Saving…");
+  await api.save(values);
+  modal.value.showLoader(false);
+  modal.value.close();
+}
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `isModalVisible` | `Boolean` | — | Visibility state (`v-model:is-modal-visible`). |
+| `modalSize` | `String` | `""` | Bootstrap size class (`modal-sm`, `modal-lg`, `modal-xl`). |
+| `modalMsg` | `String` | `""` | Default message for message-only mode. |
+| `hideHeader` | `Boolean` | `false` | Hide the header section. |
+| `hideBody` | `Boolean` | `false` | Hide the body section. |
+| `hideFooter` | `Boolean` | `false` | Hide the footer section. |
+| `hideCrossBtn` | `Boolean` | `false` | Hide the top-right close button. |
+| `hideForm` | `Boolean` | `false` | Render root as plain `<div>` instead of VeeValidate `<Form>`. |
+| `bodyClass` | `String` | `""` | Extra class on the body section. |
+| `isModalCenter` | `Boolean` | `true` | Vertically center the modal. |
+| `isBorder` | `Boolean` | `false` | Border around modal content. |
+| `iconContainerClass` | `String` | `""` | Extra class on the header icon container. |
+| `headerClass` | `String` | `""` | Extra class on the header. |
+| `headerrClass` | `String` | `""` | Legacy alias for `headerClass`. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `onSubmit` | `(event, { resetForm })` | Fired when the internal VeeValidate form is submitted. |
+| `loading-status` | `Boolean` | Emitted when loader state toggles. |
+| `close` | — | Modal was closed (✕, Escape, or `close()`). |
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `default` | VeeValidate `Form` slot-props | Form body when `hideForm` is `false`. |
+| `header` | — | Overrides the entire header. |
+| `headerIcon` | — | Icon at the start of the header. |
+| `headerTitleContainer` | — | Overrides the title/subtitle wrapper. |
+| `headerTitle` | — | Modal title text. |
+| `headerSubTitle` | — | Modal subtitle text. |
+| `body` | — | Overrides the body section. |
+| `loader` | — | Overrides the default loader element. |
+| `footer` | `{ close }` | Footer content — receives a `close()` function. |
+
+## Exposed Methods
+
+| Method | Description |
+| --- | --- |
+| `showLoader(status, msg?)` | Show/hide the loader with optional message. |
+| `close()` | Close the modal. |
+| `clearForm()` | Reset the VeeValidate form and close. |
+| `returnClear()` | Reset the form without closing. |
+| `showMsgOnly(msg, isHideFooter?)` | Switch to message-only mode. |
+| `setMessageOnly(status)` | Toggle message-only mode programmatically. |
+
+## Notes
+
+Use `AbEasyModal` when you only need a simple trigger-and-close dialog without a form.

package/.ai/ai_ref_AbMultiSelect.md

@@ -2,47 +2,17 @@
 
 Searchable single/multi/tag select. Custom built-in replacement for `@vueform/multiselect` — no third-party theme CSS required.
 
-## Installation
-
-Globally registered by the plugin.
-
 ## Usage
 
 ```vue
 <template>
-  <!-- Single select -->
-  <ab-multi-select
-    v-model="country"
-    name="country"
-    label="Country"
-    :options="countries"
-    label-key="title"
-    value-key="val"
-    searchable
-  />
+  <ab-multi-select v-model="country" name="country" label="Country" :options="countries" label-key="title" value-key="val" searchable />
 
-  <!-- Multiple -->
-  <ab-multi-select
-    v-model="skills"
-    name="skills"
-    label="Skills"
-    mode="multiple"
-    :options="skillOptions"
-    :max="5"
-  />
+  <ab-multi-select v-model="skills" name="skills" label="Skills" mode="multiple" :options="skillOptions" :max="5" />
 
-  <!-- Tags mode -->
   <ab-multi-select v-model="hashtags" name="hashtags" mode="tags" searchable />
 
-  <!-- AJAX search -->
-  <ab-multi-select
-    v-model="user"
-    name="user"
-    is-ajax-search
-    searchable
-    :on-search="searchUsers"
-    :loading="isSearching"
-  />
+  <ab-multi-select v-model="user" name="user" is-ajax-search searchable :on-search="searchUsers" :loading="isSearching" />
 </template>
 ```
 
@@ -106,7 +76,3 @@ Globally registered by the plugin.
 | `noresults` | — | Empty state content. |
 | `option-loading` | — | Loading message. |
 | `loader-icon` | — | Custom loader icon. |
-
-## v-model
-
-Yes.

package/.ai/ai_ref_AbNumberField.md

@@ -1,24 +1,14 @@
 # AbNumberField — AI Reference
 
-Numeric input with built-in minus/plus buttons, min/max clamping, custom step, and VeeValidate integration. Renders as a seamless pill by default; pass `is-border` to show the internal dividers between the buttons and the input.
-
-## Installation
-
-Globally registered by the plugin. Peer dependencies: `vee-validate`, `@vee-validate/rules`, `lucide-vue-next` (for the plus/minus icons).
+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" :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>
@@ -27,17 +17,6 @@ const qty = ref(1);
 </script>
 ```
 
-Bordered variant (inner borders around buttons):
-
-```vue
-<ab-number-field
-  v-model="qty"
-  name="quantity"
-  label="Quantity"
-  is-border
-/>
-```
-
 ## Props
 
 | Name | Type | Default | Description |
@@ -64,7 +43,7 @@ Bordered variant (inner borders around buttons):
 
 | Event | Payload | Description |
 | --- | --- | --- |
-| `update:modelValue` | `number \| null` | v-model sync. |
+| `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. |
@@ -78,7 +57,3 @@ Bordered variant (inner borders around buttons):
 | `prefix` | Prefix icon / text (rendered before the minus button). |
 | `postfix` | Postfix icon / text (rendered after the plus button). |
 | `hints` | Helper text (overrides `hints` prop). |
-
-## v-model
-
-Yes — `modelValue` + `update:modelValue`. Value is `number` after clamping, or `null` when the user clears the input.

package/.ai/ai_ref_AbPinInput.md

@@ -1,10 +1,6 @@
 # AbPinInput — AI Reference
 
-Segmented PIN / OTP entry input. Renders `length` single-character boxes, optionally split into groups with a separator.
-
-## Installation
-
-Globally registered by the plugin.
+Segmented PIN/OTP entry input. Renders `length` single-character boxes, optionally split into groups with a separator.
 
 ## Usage
 
@@ -35,11 +31,3 @@ const pin = ref('');
 | Event | Payload | Description |
 | --- | --- | --- |
 | `update:modelValue` | `pin` | v-model sync on every input change. |
-
-## Slots
-
-None.
-
-## v-model
-
-Yes.

package/.ai/ai_ref_AbPopover.md

@@ -1,10 +1,6 @@
 # AbPopover — AI Reference
 
-Dependency-free interactive popover with click, hover, focus, touch, or manual triggers. Content slot receives imperative `close`, `hide`, `show`, and `toggle` helpers.
-
-## Installation
-
-Globally registered by the plugin.
+Interactive popover with click, hover, focus, touch, or manual triggers. Content slot receives imperative `close`, `hide`, `show`, and `toggle` helpers.
 
 ## Usage
 
@@ -15,13 +11,11 @@ Globally registered by the plugin.
     <template #content="{ close }">
       <div class="popover-menu">
         <button @click="edit(); close()">Edit</button>
-        <button @click="duplicate(); close()">Duplicate</button>
-        <button class="text-danger" @click="remove(); close()">Delete</button>
+        <button @click="remove(); close()">Delete</button>
       </div>
     </template>
   </ab-popover>
 
-  <!-- Hover + focus triggers -->
   <ab-popover :trigger="['hover', 'focus']" placement="top">
     <span>Hover me</span>
     <template #content>Rich popover content</template>
@@ -58,7 +52,3 @@ Globally registered by the plugin.
 | --- | --- | --- |
 | `default` | — | Trigger element. |
 | `content` | `{ close, hide, show, toggle }` | Popover content — receives imperative controls. |
-
-## v-model
-
-Yes — binds visibility.

package/.ai/ai_ref_AbPricingCard.md

@@ -2,10 +2,6 @@
 
 Single pricing tier card. Use multiple inside `AbPricingContainer` to build a pricing table.
 
-## Installation
-
-Globally registered by the plugin.
-
 ## Usage
 
 ```vue
@@ -47,10 +43,6 @@ Globally registered by the plugin.
 | `variant` | `String` | `"default"` | `default`, `minimal`, `highlighted`, `badge-price`. |
 | `features` | `Array` | `[]` | Each `{ text, disabled? }` or a string. |
 
-## Events
-
-None.
-
 ## Slots
 
 | Name | Scope | Description |

package/.ai/ai_ref_AbPricingContainer.md

@@ -2,10 +2,6 @@
 
 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
@@ -37,10 +33,6 @@ Globally registered by the plugin.
 | `lgCols` | `Number \| String` | `""` | Columns at lg breakpoint. |
 | `itemWidth` | `String` | `""` | Per-card width override (exposed as CSS custom property). |
 
-## Events
-
-None.
-
 ## Slots
 
 | Name | Description |

package/.ai/ai_ref_AbPricingTable.md

@@ -1,10 +1,6 @@
 # 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.
+Responsive pricing comparison table. Displays a feature list on the left and multiple package tiers on the right, consuming structured JSON data.
 
 ## Usage
 
@@ -17,29 +13,21 @@ const features = [
   { 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
-    }
-  ]
-})
+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)"
-  />
+  <ab-pricing-table :features="features" :packages="packages" @select-package="(pkg) => console.log('Selected:', pkg)" />
 </template>
 ```
 
@@ -47,26 +35,22 @@ const packages = computed(() => {
 
 | 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. |
+| `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. |
+| `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. |
+| `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 (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-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

@@ -2,17 +2,11 @@
 
 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>
+  <ab-progressbar :progress-value="75" color="success" size="lg">75%</ab-progressbar>
 </template>
 ```
 
@@ -26,10 +20,6 @@ Globally registered by the plugin.
 | `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. |