@appsbd/vue3-appsbd-ui 1.0.0 → 1.0.2

package/.ai/ai_ref_AbAvatar.md

@@ -30,7 +30,15 @@ Globally registered by the plugin.
 
 ## Events
 
-None.
+| 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
 

package/.ai/ai_ref_AbBadge.md

@@ -10,9 +10,9 @@ Globally registered by the plugin.
 
 ```vue
 <template>
-  <ab-badge variant="primary">New</ab-badge>
-  <ab-badge variant="success" is-rounded-pill>12</ab-badge>
-  <ab-badge variant="warning" is-outline>Pending</ab-badge>
+  <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>
 ```
 
@@ -21,13 +21,13 @@ Globally registered by the plugin.
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | `size` | `String` | `"md"` | Size of the badge (`sm`, `md`, `lg`). |
-| `variant` | `String` | `"primary"` | Color theme (`primary`, `secondary`, `danger`, `warning`, `success`, `info`). |
+| `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. |
-| `isAvatar` | `Boolean` | `false` | Adjusts layout to accommodate an avatar image/SVG. |
 | `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
 
@@ -38,6 +38,7 @@ None.
 | Name | Description |
 | --- | --- |
 | `default` | Badge content. |
+| `content` | Slot for an icon, image, or avatar. Placed according to the `position` prop. |
 
 ## Notes
 

package/.ai/ai_ref_AbButton.md

@@ -1,6 +1,6 @@
 # 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 (`variant`, `size`, `isOutline`, `isIconBtn`).
+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
 
@@ -19,16 +19,16 @@ No per-component import required.
 ```vue
 <template>
   <!-- Basic -->
-  <ab-button variant="primary">Save</ab-button>
+  <ab-button color="primary">Save</ab-button>
 
   <!-- With icon + divider -->
-  <ab-button outline-variant="secondary" is-outline show-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 variant="primary" :is-animated="isSaving" is-hide-text-on-animate>
+  <ab-button color="primary" :is-animated="isSaving" is-hide-text-on-animate>
     Save
   </ab-button>
 </template>
@@ -44,10 +44,9 @@ const isSaving = ref(false);
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | `type` | `String` | `"button"` | Native button type (`button`, `submit`, `reset`). |
-| `variant` | `String` | `"primary"` | Color variant (primary, secondary, success, danger, warning, info, light, dark). |
-| `outlineVariant` | `String` | `"primary"` | Color variant applied when `isOutline` is true. |
+| `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 variant. |
+| `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`. |
@@ -67,5 +66,5 @@ No custom events emitted. All native button events (`click`, `focus`, `blur`,
 
 ## Notes
 
-- Size and color are now controlled via the `size` and `variant` props rather than raw Bootstrap utility classes.
-- If no `variant` prop is supplied, the component auto-applies `primary`.
+- 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,53 +1,70 @@
-# 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);
-```
-
-## Usage
-
-```vue
-<template>
-  <ab-card container-class="insight-card" header-class="fw-semibold">
-    <template #header>Revenue this month</template>
-    <template #body>
-      <h3>$12,480</h3>
-      <p>+8.2% vs last month</p>
-    </template>
-    <template #footer>
-      <ab-button class="btn-outline-primary btn-sm">View Report</ab-button>
-    </template>
-  </ab-card>
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `containerClass` | `String` | `""` | CSS class applied to the card root (use to pick a layout variant). |
-| `headerClass` | `String` | `""` | CSS class for the header section. |
-| `bodyClass` | `String` | `""` | CSS class for the body section. |
-| `footerClass` | `String` | `""` | CSS class for the footer section. |
-
-## 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
+
+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`.

package/.ai/ai_ref_AbCarousel.md

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

package/.ai/ai_ref_AbChart.md

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

package/.ai/ai_ref_AbConfirmPopover.md

@@ -1,59 +1,59 @@
-# 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.
-
-## Usage
-
-```vue
-<template>
-  <!-- Recommended: async onConfirm handles loader automatically -->
-  <ab-confirm-popover
-    msg="Delete this record?"
-    icon="warning"
-    :on-confirm="handleDelete"
-    :item-data="record"
-    confirm-text="Delete"
-    cancel-text="Keep"
-  >
-    <ab-button class="btn-danger"><i class="bi bi-trash"></i></ab-button>
-  </ab-confirm-popover>
-</template>
-
-<script setup>
-async function handleDelete(record) {
-  await api.delete(record.id);
-  // loader and popover close handled by the component
-}
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `msg` | `String` | `"Are you sure?"` | Confirmation message. |
-| `title` | `String` | `""` | Optional title above the message. |
-| `confirmText` | `String` | `"Yes"` | Confirm button label. |
-| `cancelText` | `String` | `"No"` | Cancel button label. |
-| `icon` | `String` | `"question"` | `success`, `error`, `warning`, `info`, `question`. |
-| `type` | `String` | `"confirm"` | `confirm`, `confirm-ajax`, or `alert`. |
-| `onConfirm` | `Function` | `null` | Async handler `(itemData) => Promise`. Preferred over `onConfirmed` event. |
-| `itemData` | `Object \| String \| Number \| Array` | `null` | Payload passed to `onConfirm`. |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `onConfirmed` | `{ showLoader(status), itemData, closePopover }` | Legacy callback — used only when no `onConfirm` prop is provided. Call `showLoader(true)` to start the loader, then `closePopover()` when done. |
-
-## Slots
-
-| Name | Scope | Description |
-| --- | --- | --- |
-| `default` | — | Trigger element (typically an `AbButton`). |
-| `desc` | — | Additional description below the message. |
-| `actionButtons` | `{ removeConfirmed, state }` | Custom action buttons — call `removeConfirmed()` to trigger the confirm flow. |
+# 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.
+
+## Usage
+
+```vue
+<template>
+  <!-- Recommended: async onConfirm handles loader automatically -->
+  <ab-confirm-popover
+    msg="Delete this record?"
+    icon="warning"
+    :on-confirm="handleDelete"
+    :item-data="record"
+    confirm-text="Delete"
+    cancel-text="Keep"
+  >
+    <ab-button class="btn-danger"><i class="bi bi-trash"></i></ab-button>
+  </ab-confirm-popover>
+</template>
+
+<script setup>
+async function handleDelete(record) {
+  await api.delete(record.id);
+  // loader and popover close handled by the component
+}
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `msg` | `String` | `"Are you sure?"` | Confirmation message. |
+| `title` | `String` | `""` | Optional title above the message. |
+| `confirmText` | `String` | `"Yes"` | Confirm button label. |
+| `cancelText` | `String` | `"No"` | Cancel button label. |
+| `icon` | `String` | `"question"` | `success`, `error`, `warning`, `info`, `question`. |
+| `type` | `String` | `"confirm"` | `confirm`, `confirm-ajax`, or `alert`. |
+| `onConfirm` | `Function` | `null` | Async handler `(itemData) => Promise`. Preferred over `onConfirmed` event. |
+| `itemData` | `Object \| String \| Number \| Array` | `null` | Payload passed to `onConfirm`. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `onConfirmed` | `{ showLoader(status), itemData, closePopover }` | Legacy callback — used only when no `onConfirm` prop is provided. Call `showLoader(true)` to start the loader, then `closePopover()` when done. |
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `default` | — | Trigger element (typically an `AbButton`). |
+| `desc` | — | Additional description below the message. |
+| `actionButtons` | `{ removeConfirmed, state }` | Custom action buttons — call `removeConfirmed()` to trigger the confirm flow. |

package/.ai/ai_ref_AbDarkModeToggler.md

@@ -1,42 +1,42 @@
-# 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.
-
-## Usage
-
-```vue
-<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>
-  </ab-dark-mode-toggler>
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `size` | `String` | `"md"` | One of: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`. |
-
-## Events
-
-None.
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `dark-icon` | Icon shown when the current theme is dark (typically a sun). |
-| `light-icon` | Icon shown when the current theme is light (typically a moon). |
-
-## Related
-
-- `useTheme()` composable exposes `isDarkMode`, `toggleTheme()`, `setTheme()`.
+# 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.
+
+## Usage
+
+```vue
+<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>
+  </ab-dark-mode-toggler>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | `String` | `"md"` | One of: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`. |
+
+## Events
+
+None.
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `dark-icon` | Icon shown when the current theme is dark (typically a sun). |
+| `light-icon` | Icon shown when the current theme is light (typically a moon). |
+
+## Related
+
+- `useTheme()` composable exposes `isDarkMode`, `toggleTheme()`, `setTheme()`.

package/.ai/ai_ref_AbDateTimePicker.md

@@ -83,6 +83,9 @@ const datetime = ref(null);
 | `minuteStep` | `Number` | `1` | Minute increment. |
 | `isLeftIconBorder` | `Boolean` | `false` | Border on prefix icon. |
 | `isRightIconBorder` | `Boolean` | `false` | Border on suffix icon. |
+| `isHideLabel` | `Boolean` | `false` | Hide the label visually. |
+| `defaultIconPosition` | `String` | `"right"` | Position of the default calendar/clock icon. |
+| `iconPosition` | `String` | `"right"` | Position of the custom `#icon` slot. |
 
 ## Events