@appsbd/vue3-appsbd-ui 1.0.3 → 1.0.5

package/.ai/ai_ref_AbAvatar.md

@@ -1,51 +1,41 @@
-# 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.
-
-## Usage
-
-```vue
-<template>
-  <ab-avatar :src="user.avatarUrl" alt="Profile photo" />
-
-  <!-- File upload mode -->
-  <ab-avatar variant="add" />
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `src` | `String` | `""` | Image source URL. |
-| `alt` | `String` | `""` | Alt text. |
-| `variant` | `String` | `"image"` | `"image"` or `"add"` (file-upload placeholder). |
-| `size` | `String` | `"md"` | Avatar size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
-| `isActive` | `Boolean` | `false` | Shows active status indicator. |
-| `isVerified` | `Boolean` | `false` | Shows verified status indicator and badge. |
-
-## Events
-
-| Name | Payload | Description |
-| --- | --- | --- |
-| `change` | `Event` | Fired when a file is selected in `add` variant. The selected file(s) can be accessed via `event.target.files`. |
-
-## Exposed Methods
-
-| Name | Description |
-| --- | --- |
-| `triggerFileSelect()` | Programmatically triggers the file selection dialog when in `add` variant. |
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `default` | Additional content (overlays, badges, etc.). |
-
-## Notes
-
-Sizes (`sm`, `md`, `lg`) and status indicators (`isActive`, `isVerified`) are natively supported through props.
+# AbAvatar — AI Reference
+
+Profile avatar component with `image` and `add` (upload placeholder) variants.
+
+## Usage
+
+```vue
+<template>
+  <ab-avatar :src="user.avatarUrl" alt="Profile photo" />
+  <ab-avatar variant="add" />
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `src` | `String` | `""` | Image source URL. |
+| `alt` | `String` | `""` | Alt text. |
+| `variant` | `String` | `"image"` | `"image"` or `"add"` (file-upload placeholder). |
+| `size` | `String` | `"md"` | Avatar size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
+| `isActive` | `Boolean` | `false` | Shows active status indicator. |
+| `isVerified` | `Boolean` | `false` | Shows verified status indicator and badge. |
+
+## Events
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| `change` | `Event` | Fired when a file is selected in `add` variant. The selected file(s) can be accessed via `event.target.files`. |
+
+## Exposed Methods
+
+| Name | Description |
+| --- | --- |
+| `triggerFileSelect()` | Programmatically triggers the file selection dialog when in `add` variant. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Additional content (overlays, badges, etc.). |

package/.ai/ai_ref_AbBadge.md

@@ -1,45 +1,36 @@
-# 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.
-
-## Usage
-
-```vue
-<template>
-  <ab-badge color="primary">New</ab-badge>
-  <ab-badge color="success" is-rounded-pill>12</ab-badge>
-  <ab-badge color="warning" is-outline>Pending</ab-badge>
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `size` | `String` | `"md"` | Size of the badge (`sm`, `md`, `lg`). |
-| `color` | `String` | `"primary"` | Color theme (`primary`, `secondary`, `danger`, `warning`, `success`, `info`). |
-| `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 |
-| --- | --- |
-| `default` | Badge content. |
-| `content` | Slot for an icon, image, or avatar. Placed according to the `position` prop. |
-
-## Notes
-
-The component exposes dedicated props for the most common styling variants, but still passes `$attrs` seamlessly to the root `<span>`.
+# AbBadge — AI Reference
+
+Bootstrap badge wrapper for statuses or counts with size, variant, shape, and icon variations.
+
+## Usage
+
+```vue
+<template>
+  <ab-badge color="primary">New</ab-badge>
+  <ab-badge color="success" is-rounded-pill>12</ab-badge>
+  <ab-badge color="warning" is-outline>Pending</ab-badge>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | `String` | `"md"` | Size of the badge (`sm`, `md`, `lg`). |
+| `color` | `String` | `"primary"` | Color theme (`primary`, `secondary`, `danger`, `warning`, `success`, `info`). |
+| `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. |
+| `isAdd` | `Boolean` | `false` | Adjusts styling for an add/plus icon badge. |
+| `position` | `String` | `"right"` | Position of the `content` slot (`"left"`, `"right"`). |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Badge content. |
+| `content` | Slot for an icon, image, or avatar. Placed according to the `position` prop. |
+
+## Notes
+
+The component passes `$attrs` seamlessly to the root `<span>`.

package/.ai/ai_ref_AbButton.md

@@ -1,70 +1,52 @@
-# 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.
-
-## 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>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const isSaving = ref(false);
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `type` | `String` | `"button"` | Native button type (`button`, `submit`, `reset`). |
-| `color` | `String` | `"primary"` | Color variant (primary, secondary, success, danger, warning, info, light, dark). |
-| `size` | `String` | `"md"` | Button size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
-| `isOutline` | `Boolean` | `false` | Applies the outline style for the selected color. |
-| `isIconBtn` | `Boolean` | `false` | Formats the button styling for a single icon. |
-| `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. |
-
-## Events
-
-No custom events emitted. 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). |
-| `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`.
+# AbButton — AI Reference
+
+Customizable button with optional loader animation and leading icon slot.
+
+## Usage
+
+```vue
+<template>
+  <ab-button color="primary">Save</ab-button>
+
+  <ab-button color="secondary" is-outline show-icon-divider>
+    <template #icon><i class="bi bi-plus-lg"></i></template>
+    New Item
+  </ab-button>
+
+  <ab-button color="primary" :is-animated="isSaving" is-hide-text-on-animate>
+    Save
+  </ab-button>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const isSaving = ref(false);
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `type` | `String` | `"button"` | Native button type (`button`, `submit`, `reset`). |
+| `color` | `String` | `"primary"` | Color variant (primary, secondary, success, danger, warning, info, light, dark). |
+| `size` | `String` | `"md"` | Button size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
+| `isOutline` | `Boolean` | `false` | Applies the outline style for the selected color. |
+| `isIconBtn` | `Boolean` | `false` | Formats the button styling for a single icon. |
+| `isRounded` | `Boolean` | `false` | Applies a fully rounded, pill-like border radius to the button. |
+| `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. All native button events (`click`, `focus`, `blur`, …) bubble up via `$attrs`.
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `default` | — | Button label / content. |
+| `icon` | — | Icon element (rendered before or after the label depending on `iconPosition`). |
+| `svg` | — | Overrides the built-in loader SVG (only used while `isAnimated`). |

package/.ai/ai_ref_AbCard.md

@@ -1,70 +1,51 @@
-# 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);
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `containerClass` | `String` | `undefined` | CSS class applied to the card root. |
-| `headerClass` | `String` | `""` | CSS class for the header section. |
-| `bodyClass` | `String` | `""` | CSS class for the body section. |
-| `footerClass` | `String` | `""` | CSS class for the footer section. |
-| `isBorderCard` | `Boolean` | `true` | Whether to display the default card border. |
-| `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. |
-| `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>
-    </template>
-  </ab-card>
-
-  <!-- Custom Styled Card -->
-  <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>
-      <ab-button size="sm">Action</ab-button>
-    </template>
-  </ab-card>
-</template>
-```
-
-## Events
-
-None.
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `header` | Card header content. Omit to hide the header. |
-| `body` | Card body content. |
-| `footer` | Card footer content. Omit to hide the footer. |
-
-## 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`.
+# AbCard — AI Reference
+
+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
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `containerClass` | `String` | `undefined` | CSS class applied to the card root. |
+| `headerClass` | `String` | `""` | CSS class for the header section. |
+| `bodyClass` | `String` | `""` | CSS class for the body section. |
+| `footerClass` | `String` | `""` | CSS class for the footer section. |
+| `isBorderCard` | `Boolean` | `true` | Whether to display the default card border. |
+| `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>
+  <ab-card is-tile-card :is-border-card="false">
+    <template #body>
+      <span class="tile-title">Total Revenue</span>
+      <span class="tile-value">$12,480</span>
+    </template>
+  </ab-card>
+
+  <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>
+      <ab-button size="sm">Action</ab-button>
+    </template>
+  </ab-card>
+</template>
+```
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `header` | Card header content. Omit to hide the header. |
+| `body` | Card body content. |
+| `footer` | Card footer content. Omit to hide the footer. |
+
+## 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`.

package/.ai/ai_ref_AbCarousel.md

@@ -1,47 +1,36 @@
-# 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.
-
-## 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>
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `scrollAmount` | `Number` | `200` | Pixels scrolled per click. When children exist, falls back to item width. |
-| `orientation` | `String` | `"horizontal"` | `horizontal` or `vertical`. |
-| `edgeFade` | `Boolean` | `false` | Fade the leading/trailing edges. |
-| `autoplay` | `Boolean` | `false` | Auto-scroll enabled. |
-| `autoplayInterval` | `Number` | `3000` | Autoplay interval in ms. |
-| `navOutside` | `Boolean` | `false` | Render nav buttons outside the carousel. |
-| `navOnHover` | `Boolean` | `false` | Show nav buttons only on hover. |
-
-## Events
-
-None.
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `default` | Carousel items (images, cards, or arbitrary HTML). |
+# AbCarousel — AI Reference
+
+Rotating slider for images or arbitrary HTML content. Supports horizontal/vertical orientations, autoplay, edge-fade, and outside/hover-only navigation buttons.
+
+## Usage
+
+```vue
+<template>
+  <ab-carousel edge-fade autoplay :autoplay-interval="4000">
+    <img src="/slide1.jpg" alt="" />
+    <img src="/slide2.jpg" alt="" />
+  </ab-carousel>
+
+  <ab-carousel orientation="vertical" nav-outside nav-on-hover>
+    <ab-card v-for="card in cards" :key="card.id">…</ab-card>
+  </ab-carousel>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `scrollAmount` | `Number` | `200` | Pixels scrolled per click. When children exist, falls back to item width. |
+| `orientation` | `String` | `"horizontal"` | `horizontal` or `vertical`. |
+| `edgeFade` | `Boolean` | `false` | Fade the leading/trailing edges. |
+| `autoplay` | `Boolean` | `false` | Auto-scroll enabled. |
+| `autoplayInterval` | `Number` | `3000` | Autoplay interval in ms. |
+| `navOutside` | `Boolean` | `false` | Render nav buttons outside the carousel. |
+| `navOnHover` | `Boolean` | `false` | Show nav buttons only on hover. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Carousel items (images, cards, or arbitrary HTML). |

package/.ai/ai_ref_AbChart.md

@@ -1,87 +1,46 @@
-# AbChart
-
-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
-```
-
-## 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" 
-  />
-</template>
-```
-
-### Using full ECharts option (Advanced API)
-
-```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>
-```
-
-## Props
-
-| 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"`). |
-| `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.
-
-## 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.
+# AbChart — AI Reference
+
+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
+
+```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" />
+</template>
+```
+
+Full ECharts option (overrides all other props):
+
+```vue
+<template>
+  <AbChart :option="option" height="400px" />
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `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` | `""` | Legend orientation (`"vertical"`, `"horizontal"`). |
+| `showPointValues` | `Boolean` | `false` | Display value labels on each data point. |
+| `height` | `String` | `"400px"` | Chart container height. |
+
+## Notes
+
+- **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`.