@appsbd/vue3-appsbd-ui 1.0.3 → 1.0.4

package/.ai/ai_ref_AbAvatar.md

@@ -1,18 +1,12 @@
 # AbAvatar — AI Reference
 
-Profile avatar component. Supports two variants: an `image` variant for displaying a photo, and an `add` variant that renders an "upload" placeholder for user-supplied files.
-
-## Installation
-
-Globally registered by the plugin.
+Profile avatar component with `image` and `add` (upload placeholder) variants.
 
 ## Usage
 
 ```vue
 <template>
   <ab-avatar :src="user.avatarUrl" alt="Profile photo" />
-
-  <!-- File upload mode -->
   <ab-avatar variant="add" />
 </template>
 ```
@@ -45,7 +39,3 @@ Globally registered by the plugin.
 | Name | Description |
 | --- | --- |
 | `default` | Additional content (overlays, badges, etc.). |
-
-## Notes
-
-Sizes (`sm`, `md`, `lg`) and status indicators (`isActive`, `isVerified`) are natively supported through props.

package/.ai/ai_ref_AbBadge.md

@@ -1,10 +1,6 @@
 # AbBadge — AI Reference
 
-Lightweight Bootstrap badge wrapper used to display statuses or counts. Accepts props for size, variant, shape, and specialized icon variations.
-
-## Installation
-
-Globally registered by the plugin.
+Bootstrap badge wrapper for statuses or counts with size, variant, shape, and icon variations.
 
 ## Usage
 
@@ -25,14 +21,9 @@ Globally registered by the plugin.
 | `isOutline` | `Boolean` | `false` | Outlined style with transparent background. |
 | `isRoundedPill` | `Boolean` | `false` | Transforms badge to a fully rounded pill shape. |
 | `isDot` | `Boolean` | `false` | Prepends a dot indicator layout. |
-| `isClose` | `Boolean` | `false` | Adjusts padding and layout for a close icon. |
 | `isAdd` | `Boolean` | `false` | Adjusts styling for an add/plus icon badge. |
 | `position` | `String` | `"right"` | Position of the `content` slot (`"left"`, `"right"`). |
 
-## Events
-
-None.
-
 ## Slots
 
 | Name | Description |
@@ -42,4 +33,4 @@ None.
 
 ## Notes
 
-The component exposes dedicated props for the most common styling variants, but still passes `$attrs` seamlessly to the root `<span>`.
+The component passes `$attrs` seamlessly to the root `<span>`.

package/.ai/ai_ref_AbButton.md

@@ -1,33 +1,18 @@
 # AbButton — AI Reference
 
-Highly customizable push button with an optional built-in loader animation and a leading icon slot. Styling variants and sizes are easily configured via props (`color`, `size`, `isOutline`, `isIconBtn`).
-
-## Installation
-
-Globally registered by the library plugin — use `<ab-button>` directly in any template after:
-
-```js
-import AppsbdUI from 'vue3-appsbd-ui';
-import 'vue3-appsbd-ui/dist/style.css';
-app.use(AppsbdUI);
-```
-
-No per-component import required.
+Customizable button with optional loader animation and leading icon slot.
 
 ## Usage
 
 ```vue
 <template>
-  <!-- Basic -->
   <ab-button color="primary">Save</ab-button>
 
-  <!-- With icon + divider -->
   <ab-button color="secondary" is-outline show-icon-divider>
     <template #icon><i class="bi bi-plus-lg"></i></template>
     New Item
   </ab-button>
 
-  <!-- Loading state -->
   <ab-button color="primary" :is-animated="isSaving" is-hide-text-on-animate>
     Save
   </ab-button>
@@ -51,20 +36,16 @@ const isSaving = ref(false);
 | `isAnimated` | `Boolean` | `false` | When `true`, renders the loader SVG and optionally hides the label. |
 | `isHideTextOnAnimate` | `Boolean` | `false` | Hides the default slot content while `isAnimated` is `true`. |
 | `showIconDivider` | `Boolean` | `false` | Renders a vertical divider between the `#icon` slot and the label. |
+| `iconPosition` | `String` | `"left"` | Placement of the icon and divider (`"left"` or `"right"`). |
 
 ## Events
 
-No custom events emitted. All native button events (`click`, `focus`, `blur`, …) bubble up via `$attrs`.
+No custom events. All native button events (`click`, `focus`, `blur`, …) bubble up via `$attrs`.
 
 ## Slots
 
 | Name | Scope | Description |
 | --- | --- | --- |
 | `default` | — | Button label / content. |
-| `icon` | — | Leading icon element (rendered before the label). |
+| `icon` | — | Icon element (rendered before or after the label depending on `iconPosition`). |
 | `svg` | — | Overrides the built-in loader SVG (only used while `isAnimated`). |
-
-## Notes
-
-- Size and color are now controlled via the `size` and `color` props rather than raw Bootstrap utility classes.
-- If no `color` prop is supplied, the component auto-applies `primary`.

package/.ai/ai_ref_AbCard.md

@@ -1,14 +1,6 @@
 # AbCard — AI Reference
 
-Flexible Bootstrap-style card container with `header`, `body`, and `footer` slots. Visual variations (`tile-card`, `item-card`, `insight-card`, …) are applied through CSS classes on `containerClass` rather than separate components.
-
-## Installation
-
-Globally registered by the plugin — no import required.
-
-```js
-app.use(AppsbdUI);
-```
+Bootstrap-style card container with `header`, `body`, and `footer` slots. Visual variations (`tile-card`, `item-card`, `insight-card`, …) are applied through CSS classes on `containerClass` rather than separate components.
 
 ## Props
 
@@ -22,28 +14,21 @@ app.use(AppsbdUI);
 | `bgColorVariant` | `String` | `""` | Bootstrap color variant for background (`primary`, `success`, etc.). |
 | `borderBottomVariant` | `String` | `""` | Adds a colored bottom border with the specified variant. |
 | `isTileCard` | `Boolean` | `false` | Applies the `.tile-card` layout styles. |
+| `showBorder` | `Boolean` | `false` | Whether to display the header and footer borders. |
 | `variation` | `String` | `""` | Generic variation class to append to the root. |
 
 ## Usage
 
 ```vue
 <template>
-  <!-- Simple Stat Tile -->
   <ab-card is-tile-card :is-border-card="false">
     <template #body>
-      <div class="left-section">
-        <span class="tile-title">Total Revenue</span>
-        <span class="tile-value">$12,480</span>
-      </div>
+      <span class="tile-title">Total Revenue</span>
+      <span class="tile-value">$12,480</span>
     </template>
   </ab-card>
 
-  <!-- Custom Styled Card -->
-  <ab-card 
-    container-class="shadow-sm" 
-    border-bottom-variant="primary"
-    header-class="bg-light"
-  >
+  <ab-card container-class="shadow-sm" border-bottom-variant="primary" header-class="bg-light">
     <template #header>Card Title</template>
     <template #body>Card Content</template>
     <template #footer>
@@ -53,10 +38,6 @@ app.use(AppsbdUI);
 </template>
 ```
 
-## Events
-
-None.
-
 ## Slots
 
 | Name | Description |
@@ -67,4 +48,4 @@ None.
 
 ## Notes
 
-- Do **not** create a new `.vue` file for card variations — define the variant as a CSS class in `src/styles/components/_card.scss` and pass it via `containerClass`.
+Do **not** create a new `.vue` file for card variations — define the variant as a CSS class in `src/styles/components/_card.scss` and pass it via `containerClass`.

package/.ai/ai_ref_AbCarousel.md

@@ -1,23 +1,16 @@
 # AbCarousel — AI Reference
 
-Rotating slider for images or arbitrary HTML content. Supports horizontal and vertical orientations, autoplay, edge-fade, and outside / hover-only navigation buttons.
-
-## Installation
-
-Globally registered by the plugin.
+Rotating slider for images or arbitrary HTML content. Supports horizontal/vertical orientations, autoplay, edge-fade, and outside/hover-only navigation buttons.
 
 ## Usage
 
 ```vue
 <template>
-  <!-- Image carousel -->
   <ab-carousel edge-fade autoplay :autoplay-interval="4000">
     <img src="/slide1.jpg" alt="" />
     <img src="/slide2.jpg" alt="" />
-    <img src="/slide3.jpg" alt="" />
   </ab-carousel>
 
-  <!-- Card carousel, vertical orientation -->
   <ab-carousel orientation="vertical" nav-outside nav-on-hover>
     <ab-card v-for="card in cards" :key="card.id">…</ab-card>
   </ab-carousel>
@@ -36,10 +29,6 @@ Globally registered by the plugin.
 | `navOutside` | `Boolean` | `false` | Render nav buttons outside the carousel. |
 | `navOnHover` | `Boolean` | `false` | Show nav buttons only on hover. |
 
-## Events
-
-None.
-
 ## Slots
 
 | Name | Description |

package/.ai/ai_ref_AbChart.md

@@ -1,56 +1,24 @@
-# AbChart
+# AbChart — AI Reference
 
-A flexible chart component powered by Apache ECharts (via vue-echarts). It supports both full ECharts option objects and a simplified props-based API for common chart types.
-
-## Installation
-
-```bash
-npm install echarts vue-echarts
-```
+Chart component powered by Apache ECharts (via vue-echarts). Supports full ECharts option objects and a simplified props-based API for common chart types.
 
 ## Usage
 
-### Using individual props (Simplified API)
-
 ```vue
 <script setup>
 import { AbChart } from "@vue3-appsbd-ui";
-
 const xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 const seriesData = [150, 230, 224, 218, 135, 147, 260];
 </script>
 
 <template>
-  <AbChart 
-    chartType="line" 
-    :xAxisData="xAxisData" 
-    :seriesData="seriesData" 
-    height="400px" 
-  />
+  <AbChart chartType="line" :xAxisData="xAxisData" :seriesData="seriesData" height="400px" />
 </template>
 ```
 
-### Using full ECharts option (Advanced API)
+Full ECharts option (overrides all other props):
 
 ```vue
-<script setup>
-import { AbChart } from "@vue3-appsbd-ui";
-
-const option = {
-  xAxis: {
-    type: 'category',
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-  },
-  yAxis: {
-    type: 'value'
-  },
-  series: [{
-    data: [150, 230, 224, 218, 135, 147, 260],
-    type: 'line'
-  }]
-};
-</script>
-
 <template>
   <AbChart :option="option" height="400px" />
 </template>
@@ -60,28 +28,19 @@ const option = {
 
 | Name | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
-| `option` | `Object` | `{}` | Full ECharts option object. If provided, it overrides all other props. |
-| `chartType` | `String` | `""` | The type of chart when using simplified props (`"line"`, `"bar"`, `"pie"`). |
-| `xAxisData` | `Array` | `[]` | Categories for the X-axis (e.g., dates or labels). |
-| `seriesData` | `Array` | `[]` | Data points for the chart. For Pie charts, use an array of objects: `[{ value: 10, name: 'A' }]`. |
-| `xAxisType` | `String` | `"category"` | ECharts X-axis type (e.g., `"value"`, `"category"`, `"time"`, `"log"`). |
+| `option` | `Object` | `{}` | Full ECharts option object. If provided, overrides all other props. |
+| `chartType` | `String` | `""` | Chart type for simplified API (`"line"`, `"bar"`, `"pie"`). |
+| `xAxisData` | `Array` | `[]` | Categories for the X-axis. |
+| `seriesData` | `Array` | `[]` | Data points. For pie charts use `[{ value: 10, name: 'A' }]`. |
+| `xAxisType` | `String` | `"category"` | ECharts X-axis type (`"value"`, `"category"`, `"time"`, `"log"`). |
 | `yAxisType` | `String` | `"value"` | ECharts Y-axis type. |
-| `legendOrient` | `String` | `""` | Orientation of the chart legend (e.g., `"vertical"`, `"horizontal"`). |
-| `showPointValues` | `Boolean` | `false` | If true, displays the value label on each data point in the chart. |
-| `height` | `String` | `"400px"` | Height of the chart container (e.g., `"300px"`, `"100%"`). |
-
-
-
-## Events
-
-None.
-
-## Slots
-
-None.
+| `legendOrient` | `String` | `""` | Legend orientation (`"vertical"`, `"horizontal"`). |
+| `showPointValues` | `Boolean` | `false` | Display value labels on each data point. |
+| `height` | `String` | `"400px"` | Chart container height. |
 
 ## Notes
 
-- **Tree Shaking**: The component internally imports only the necessary ECharts modules (`CanvasRenderer`, `LineChart`, `PieChart`, `BarChart`, `GridComponent`, `TitleComponent`, `TooltipComponent`, `LegendComponent`) to keep the bundle size small.
-- **Autoresize**: The component has `autoresize` enabled by default.
-- **Pie Charts**: When `chartType="pie"`, the `xAxis` and `yAxis` configurations are automatically omitted.
+- **Tree Shaking**: Internally imports only needed ECharts modules (`CanvasRenderer`, `LineChart`, `PieChart`, `BarChart`, `GridComponent`, `TitleComponent`, `TooltipComponent`, `LegendComponent`).
+- **Autoresize**: Enabled by default.
+- **Pie Charts**: When `chartType="pie"`, `xAxis`/`yAxis` are automatically omitted.
+- Requires peer dependencies: `echarts`, `vue-echarts`.

package/.ai/ai_ref_AbColorPicker.md

@@ -2,10 +2,6 @@
 
 Radio-style color swatch picker. Takes a list of named colors and lets users pick one.
 
-## Installation
-
-Globally registered by the plugin.
-
 ## Usage
 
 ```vue
@@ -16,7 +12,6 @@ Globally registered by the plugin.
     :colors="[
       { name: 'blue', color: '#2563eb', title: 'Blue' },
       { name: 'green', color: '#16a34a', title: 'Green' },
-      { name: 'rose', color: '#e11d48', title: 'Rose' },
     ]"
     align="left"
     border-radius="50%"
@@ -44,12 +39,4 @@ const themeColor = ref('blue');
 
 | Event | Payload | Description |
 | --- | --- | --- |
-| `update:modelValue` | `colorName` | v-model sync. |
-
-## Slots
-
-None.
-
-## v-model
-
-Yes (emits the color `name`, not the hex value).
+| `update:modelValue` | `colorName` | v-model sync — emits the color `name`, not the hex value. |

package/.ai/ai_ref_AbConfirmPopover.md

@@ -1,16 +1,11 @@
 # AbConfirmPopover — AI Reference
 
-Confirmation popover with an async `onConfirm` handler and a built-in loader. Useful for destructive actions (delete, archive) that need an inline confirmation without opening a modal.
-
-## Installation
-
-Globally registered by the plugin.
+Confirmation popover with an async `onConfirm` handler and built-in loader. Useful for destructive actions (delete, archive) that need inline confirmation without a modal.
 
 ## Usage
 
 ```vue
 <template>
-  <!-- Recommended: async onConfirm handles loader automatically -->
   <ab-confirm-popover
     msg="Delete this record?"
     icon="warning"

package/.ai/ai_ref_AbCustomField.md

@@ -1,10 +1,6 @@
 # AbCustomField — AI Reference
 
-Dynamic form scaffold — takes a `fieldInputs` array describing multiple fields (text, number, date, toggle, dropdown, etc.) and renders them all, binding values to an external `customProps` object.
-
-## Installation
-
-Globally registered by the plugin.
+Dynamic form scaffold — takes a `fieldInputs` array describing multiple fields and renders them all, binding values to an external `customProps` object.
 
 ## Usage
 
@@ -55,10 +51,6 @@ const fields = [
 | `S` | Switch / toggle |
 | `C` | Checkbox |
 
-## Events
-
-None at the component level — use VeeValidate on the parent form for submission and validation.
-
 ## Slots (scoped by field id)
 
 For each field whose `id` is `xyz`, the following named slots are available:

package/.ai/ai_ref_AbDarkModeToggler.md

@@ -1,10 +1,6 @@
 # AbDarkModeToggler — AI Reference
 
-Light / dark theme toggle. Pairs with the `useTheme()` composable — clicking the toggle flips the current theme.
-
-## Installation
-
-Globally registered by the plugin. Uses the `useTheme` composable internally.
+Light/dark theme toggle. Pairs with the `useTheme()` composable — clicking flips the current theme.
 
 ## Usage
 
@@ -12,7 +8,6 @@ Globally registered by the plugin. Uses the `useTheme` composable internally.
 <template>
   <ab-dark-mode-toggler size="md" />
 
-  <!-- Custom icons -->
   <ab-dark-mode-toggler size="lg">
     <template #dark-icon><i class="bi bi-sun"></i></template>
     <template #light-icon><i class="bi bi-moon-stars"></i></template>
@@ -26,10 +21,6 @@ Globally registered by the plugin. Uses the `useTheme` composable internally.
 | --- | --- | --- | --- |
 | `size` | `String` | `"md"` | One of: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`. |
 
-## Events
-
-None.
-
 ## Slots
 
 | Name | Description |

package/.ai/ai_ref_AbDateTimePicker.md

@@ -1,46 +1,16 @@
 # AbDateTimePicker — AI Reference
 
-Advanced date / time / range picker built on `v-calendar`. Supports single-date, date-range, time-only, and datetime modes, with per-locale digit formatters and day/month name overrides.
-
-## Installation
-
-Globally registered by the plugin. Requires peer dependency `v-calendar`:
-
-```js
-import 'v-calendar/style.css';
-```
+Advanced date/time/range picker built on `v-calendar`. Supports single-date, date-range, time-only, and datetime modes, with per-locale digit formatters and day/month name overrides.
 
 ## Usage
 
 ```vue
 <template>
-  <!-- Single date -->
-  <ab-date-time-picker
-    v-model="date"
-    name="startDate"
-    label="Start date"
-    data-format="YYYY-MM-DD"
-    :min-date="new Date()"
-  />
+  <ab-date-time-picker v-model="date" name="startDate" label="Start date" data-format="YYYY-MM-DD" :min-date="new Date()" />
 
-  <!-- Date range -->
-  <ab-date-time-picker
-    v-model="range"
-    name="period"
-    label="Reporting period"
-    is-range
-    range-separator=" → "
-  />
+  <ab-date-time-picker v-model="range" name="period" label="Reporting period" is-range range-separator=" → " />
 
-  <!-- Datetime -->
-  <ab-date-time-picker
-    v-model="datetime"
-    name="meetingAt"
-    label="Meeting at"
-    mode="datetime"
-    is24-hour
-    :minute-step="15"
-  />
+  <ab-date-time-picker v-model="datetime" name="meetingAt" label="Meeting at" mode="datetime" is24-hour :minute-step="15" />
 </template>
 
 <script setup>
@@ -102,7 +72,3 @@ const datetime = ref(null);
 | `icon` | — | Calendar / clock icon. |
 | `hints` | — | Custom hints. |
 | `picker-container` | `{ isRange, showInInput, value }` | Override the entire picker UI. |
-
-## v-model
-
-Yes.

package/.ai/ai_ref_AbEasyModal.md

@@ -1,10 +1,6 @@
 # AbEasyModal — AI Reference
 
-Lightweight wrapper around `AbModal` that renders a trigger element and exposes imperative `openModal()` / `closeModal()` methods. Ideal for quick prompt-style dialogs where you do not need the full VeeValidate form wiring.
-
-## Installation
-
-Globally registered by the plugin.
+Lightweight wrapper around `AbModal` that renders a trigger element and exposes imperative `openModal()` / `closeModal()` methods. Ideal for quick dialogs without full VeeValidate form wiring.
 
 ## Usage
 
@@ -16,9 +12,7 @@ Globally registered by the plugin.
     </template>
 
     <template #title>Delete project?</template>
-    <template #body>
-      This cannot be undone.
-    </template>
+    <template #body>This cannot be undone.</template>
 
     <template #footer="{ closeModal }">
       <ab-button class="btn-outline-secondary" @click="closeModal">Cancel</ab-button>

package/.ai/ai_ref_AbField.md

@@ -1,10 +1,6 @@
 # AbField — AI Reference
 
-Polymorphic field wrapper — renders a text, textarea, select, multiselect, tag, checkbox, radio, toggle, or switch control based on the `type` prop. Use this when you want a single component to handle any form field type uniformly.
-
-## Installation
-
-Globally registered by the plugin.
+Polymorphic field wrapper — renders text, textarea, select, multiselect, tag, checkbox, radio, toggle, or switch based on the `type` prop.
 
 ## Usage
 
@@ -90,7 +86,3 @@ Globally registered by the plugin.
 | `helptext` | Custom help text. |
 | `option` | Custom option rendering (select). |
 | `singlelabel` | Custom single-value label (select). |
-
-## v-model
-
-Yes — supports `modelValue` / `update:modelValue`.

package/.ai/ai_ref_AbFileUploader.md

@@ -2,22 +2,12 @@
 
 File upload input with drag-and-drop, size validation, and preview. Can render a default uploader UI or accept a custom one via slots.
 
-## Installation
-
-Globally registered by the plugin.
-
 ## Usage
 
 ```vue
 <template>
-  <ab-file-uploader
-    v-model="file"
-    label="Upload avatar"
-    :max-size="1.5"
-    @on-select-files="handleFiles"
-  />
-
-  <!-- Custom UI -->
+  <ab-file-uploader v-model="file" label="Upload avatar" :max-size="1.5" @on-select-files="handleFiles" />
+
   <ab-file-uploader v-model="file" :max-size="5">
     <template #dial>
       <div class="my-drop-zone">Drop files here</div>
@@ -28,9 +18,7 @@ Globally registered by the plugin.
 <script setup>
 import { ref } from 'vue';
 const file = ref(null);
-function handleFiles(files) {
-  console.log('Selected files:', files);
-}
+function handleFiles(files) { console.log('Selected files:', files); }
 </script>
 ```
 
@@ -57,7 +45,3 @@ function handleFiles(files) {
 | `label` | Custom label. |
 | `dial` | Custom uploader UI (replaces the default design). |
 | `default` | Alternative custom UI slot. |
-
-## v-model
-
-Yes.

package/.ai/ai_ref_AbFilterPanel.md

@@ -2,10 +2,6 @@
 
 Advanced filter panel for list and table views. Supports quick/advance modes, single-field search, date ranges, and an optional QR/barcode scan button.
 
-## Installation
-
-Globally registered by the plugin.
-
 ## Usage
 
 ```vue

package/.ai/ai_ref_AbFormCheck.md

@@ -1,35 +1,22 @@
 # AbFormCheck / AbRadioInput — AI Reference
 
-Checkbox or radio group with card, segmented, and pill visual variants. `AbRadioInput` is an alias export of `AbFormCheck` — both register to the same component.
-
-## Installation
-
-Globally registered by the plugin.
+Checkbox or radio group with card, segmented, and pill visual variants. `AbRadioInput` is an alias export of `AbFormCheck`.
 
 ## Usage
 
 ```vue
 <template>
-  <!-- Checkbox group -->
   <ab-form-check
     v-model="selected"
     name="features"
     :options="[
       { val: 'a', title: 'Email reports' },
       { val: 'b', title: 'Slack notifications' },
-      { val: 'c', title: 'SMS alerts' },
     ]"
     label="Enable"
   />
 
-  <!-- Radio group — card variant -->
-  <ab-form-check
-    v-model="plan"
-    type="radio"
-    name="plan"
-    variant="card"
-    :options="plans"
-  />
+  <ab-form-check v-model="plan" type="radio" name="plan" variant="card" :options="plans" />
 </template>
 ```
 
@@ -69,7 +56,3 @@ Globally registered by the plugin.
 | `input-icon-{option.title}` | Per-option icon component slot. |
 | `label-{option.title}` | Per-option label slot. |
 | `description-{option.title}` | Per-option description slot. |
-
-## v-model
-
-Yes.

package/.ai/ai_ref_AbImageRadioInput.md

@@ -1,10 +1,6 @@
 # AbImageRadioInput — AI Reference
 
-Radio-group variant that renders visual image / icon tiles for each option. Useful for theme pickers, layout pickers, and other visual-first choices.
-
-## Installation
-
-Globally registered by the plugin.
+Radio-group variant that renders visual image/icon tiles for each option. Useful for theme pickers, layout pickers, and other visual-first choices.
 
 ## Usage
 
@@ -57,7 +53,3 @@ Globally registered by the plugin.
 | `icon_image` | `option` | Custom image/icon for each option. |
 | `label` | `option` | Custom label rendering. |
 | `label-{val}` | — | Custom label for a specific option by `val`. |
-
-## v-model
-
-Yes.