@appsbd/vue3-appsbd-ui 1.0.3 → 1.0.5

package/.ai/ai_ref_AbColorPicker.md

@@ -1,55 +1,42 @@
-# AbColorPicker — AI Reference
-
-Radio-style color swatch picker. Takes a list of named colors and lets users pick one.
-
-## Installation
-
-Globally registered by the plugin.
-
-## Usage
-
-```vue
-<template>
-  <ab-color-picker
-    v-model="themeColor"
-    name="theme"
-    :colors="[
-      { name: 'blue', color: '#2563eb', title: 'Blue' },
-      { name: 'green', color: '#16a34a', title: 'Green' },
-      { name: 'rose', color: '#e11d48', title: 'Rose' },
-    ]"
-    align="left"
-    border-radius="50%"
-  />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const themeColor = ref('blue');
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `modelValue` | `String` | `""` | Selected color `name` (v-model). |
-| `name` | `String` | `"color"` | Radio group name. |
-| `colors` | `Array` | `[]` | Each: `{ name, color, title? }`. |
-| `align` | `String` | `"left"` | Flex alignment (`left`, `center`, `right`, …). |
-| `borderRadius` | `String` | `"50%"` | Swatch border-radius. |
-| `size` | `String` | `"md"` | Item size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `update:modelValue` | `colorName` | v-model sync. |
-
-## Slots
-
-None.
-
-## v-model
-
-Yes (emits the color `name`, not the hex value).
+# AbColorPicker — AI Reference
+
+Radio-style color swatch picker. Takes a list of named colors and lets users pick one.
+
+## Usage
+
+```vue
+<template>
+  <ab-color-picker
+    v-model="themeColor"
+    name="theme"
+    :colors="[
+      { name: 'blue', color: '#2563eb', title: 'Blue' },
+      { name: 'green', color: '#16a34a', title: 'Green' },
+    ]"
+    align="left"
+    border-radius="50%"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const themeColor = ref('blue');
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `String` | `""` | Selected color `name` (v-model). |
+| `name` | `String` | `"color"` | Radio group name. |
+| `colors` | `Array` | `[]` | Each: `{ name, color, title? }`. |
+| `align` | `String` | `"left"` | Flex alignment (`left`, `center`, `right`, …). |
+| `borderRadius` | `String` | `"50%"` | Swatch border-radius. |
+| `size` | `String` | `"md"` | Item size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `colorName` | v-model sync — emits the color `name`, not the hex value. |

package/.ai/ai_ref_AbConfirmPopover.md

@@ -1,59 +1,54 @@
-# 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 built-in loader. Useful for destructive actions (delete, archive) that need inline confirmation without a modal.
+
+## Usage
+
+```vue
+<template>
+  <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_AbCustomField.md

@@ -1,74 +1,66 @@
-# 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.
-
-## Usage
-
-```vue
-<template>
-  <ab-custom-field :field-inputs="fields" :custom-props="form" size="sm" />
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-
-const form = reactive({ username: '', age: null, role: 'admin', active: 'Y' });
-
-const fields = [
-  { id: 'username', type: 'T', label: 'Username', rules: 'required' },
-  { id: 'age', type: 'N', label: 'Age' },
-  { id: 'role', type: 'W', label: 'Role', options: [
-    { val: 'admin', title: 'Admin' },
-    { val: 'user', title: 'User' },
-  ] },
-  { id: 'active', type: 'S', label: 'Active' },
-];
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `fieldInputs` | `Array` | `[]` | Field definitions (see type table below). |
-| `size` | `String` | `"sm"` | Default input size applied to every field. |
-| `customProps` | `Object` | `{}` | Reactive object that field values bind into (keyed by each field's `id`). |
-
-### Field `type` codes
-
-| Code | Renders |
-| --- | --- |
-| `T` | Text input |
-| `N` | Number input |
-| `U` | URL input |
-| `P` | Password input |
-| `E` | Textarea |
-| `H` | Hidden input |
-| `D` | Date picker |
-| `DR` | Date range picker |
-| `R` | Radio group |
-| `W` | Dropdown / select |
-| `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:
-
-| Slot | Description |
-| --- | --- |
-| `Label{id}` | Custom label for the field. |
-| `Hints{id}` | Custom hints/helper text. |
-| `Prefix{id}` | Custom prefix. |
-| `Postfix{id}` | Custom postfix. |
-| `Icon{id}` | Custom icon (date picker). |
-| `Description{id}` | Custom description. |
-| `HelpText{id}` | Custom help text. |
+# AbCustomField — AI Reference
+
+Dynamic form scaffold — takes a `fieldInputs` array describing multiple fields and renders them all, binding values to an external `customProps` object.
+
+## Usage
+
+```vue
+<template>
+  <ab-custom-field :field-inputs="fields" :custom-props="form" size="sm" />
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+
+const form = reactive({ username: '', age: null, role: 'admin', active: 'Y' });
+
+const fields = [
+  { id: 'username', type: 'T', label: 'Username', rules: 'required' },
+  { id: 'age', type: 'N', label: 'Age' },
+  { id: 'role', type: 'W', label: 'Role', options: [
+    { val: 'admin', title: 'Admin' },
+    { val: 'user', title: 'User' },
+  ] },
+  { id: 'active', type: 'S', label: 'Active' },
+];
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `fieldInputs` | `Array` | `[]` | Field definitions (see type table below). |
+| `size` | `String` | `"sm"` | Default input size applied to every field. |
+| `customProps` | `Object` | `{}` | Reactive object that field values bind into (keyed by each field's `id`). |
+
+### Field `type` codes
+
+| Code | Renders |
+| --- | --- |
+| `T` | Text input |
+| `N` | Number input |
+| `U` | URL input |
+| `P` | Password input |
+| `E` | Textarea |
+| `H` | Hidden input |
+| `D` | Date picker |
+| `DR` | Date range picker |
+| `R` | Radio group |
+| `W` | Dropdown / select |
+| `S` | Switch / toggle |
+| `C` | Checkbox |
+
+## Slots (scoped by field id)
+
+For each field whose `id` is `xyz`, the following named slots are available:
+
+| Slot | Description |
+| --- | --- |
+| `Label{id}` | Custom label for the field. |
+| `Hints{id}` | Custom hints/helper text. |
+| `Prefix{id}` | Custom prefix. |
+| `Postfix{id}` | Custom postfix. |
+| `Icon{id}` | Custom icon (date picker). |
+| `Description{id}` | Custom description. |
+| `HelpText{id}` | Custom help text. |

package/.ai/ai_ref_AbDarkModeToggler.md

@@ -1,42 +1,33 @@
-# 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 flips the current theme.
+
+## Usage
+
+```vue
+<template>
+  <ab-dark-mode-toggler size="md" />
+
+  <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`. |
+
+## 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

@@ -1,108 +1,74 @@
-# 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';
-```
-
-## 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()"
-  />
-
-  <!-- Date range -->
-  <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"
-  />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const date = ref(null);
-const range = ref({ start: null, end: null });
-const datetime = ref(null);
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `modelValue` | `String \| Object` | `null` | Date (or `{ start, end }` for range). |
-| `label` | `String` | `""` | Field label. |
-| `placeholder` | `String` | `""` | Input placeholder. |
-| `name` | `String` | **required** | VeeValidate field name. |
-| `rules` | `String \| Object` | `""` | VeeValidate rules. |
-| `isRange` | `Boolean` | `false` | Enable date-range mode. |
-| `size` | `String` | `"md"` | Adjusts component size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
-| `containerClass` | `String` | `"mb-3"` | Wrapper class. |
-| `hints` | `String` | `""` | Helper text. |
-| `isDisable` | `Boolean` | `false` | Disable the picker. |
-| `visibility` | `String` | `"click"` | v-calendar popover trigger. |
-| `mask` | `String` | `""` | Input mask. |
-| `dataFormat` | `String` | `"YYYY-MM-DD"` | Storage format. |
-| `displayFormat` | `String` | `"YYYY-MM-DD"` | Display format. |
-| `maxDate` | `Date \| String` | `undefined` | Maximum selectable date. |
-| `minDate` | `Date \| String` | `undefined` | Minimum selectable date. |
-| `disableDates` | `Array` | `[]` | Accepts `Date`, string, or `{ repeat: { weekdays: [...] } }` entries. |
-| `showInInput` | `Boolean` | `true` | Input-style trigger (vs button). |
-| `monthNames` | `Array` | `undefined` | Custom full month names. |
-| `monthNamesShort` | `Array` | `undefined` | Custom short month names. |
-| `dayNames` | `Array` | `undefined` | Custom day names. |
-| `formatDigit` | `Function` | `undefined` | Locale digit formatter (e.g. Bengali digits). |
-| `rangeSeparator` | `String` | `undefined` | Display separator between range start/end. |
-| `mode` | `String` | `"date"` | `date`, `time`, or `datetime`. |
-| `is24Hour` | `Boolean` | `undefined` | 24-hour clock. |
-| `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
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `update:modelValue` | `value` | v-model sync. |
-
-## Slots
-
-| Name | Scope | Description |
-| --- | --- | --- |
-| `label` | — | Custom label. |
-| `prefix` | — | Prefix area. |
-| `icon` | — | Calendar / clock icon. |
-| `hints` | — | Custom hints. |
-| `picker-container` | `{ isRange, showInInput, value }` | Override the entire picker UI. |
-
-## v-model
-
-Yes.
+# 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.
+
+## Usage
+
+```vue
+<template>
+  <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="range" name="period" label="Reporting period" is-range range-separator=" → " />
+
+  <ab-date-time-picker v-model="datetime" name="meetingAt" label="Meeting at" mode="datetime" is24-hour :minute-step="15" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const date = ref(null);
+const range = ref({ start: null, end: null });
+const datetime = ref(null);
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `String \| Object` | `null` | Date (or `{ start, end }` for range). |
+| `label` | `String` | `""` | Field label. |
+| `placeholder` | `String` | `""` | Input placeholder. |
+| `name` | `String` | **required** | VeeValidate field name. |
+| `rules` | `String \| Object` | `""` | VeeValidate rules. |
+| `isRange` | `Boolean` | `false` | Enable date-range mode. |
+| `size` | `String` | `"md"` | Adjusts component size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
+| `containerClass` | `String` | `"mb-3"` | Wrapper class. |
+| `hints` | `String` | `""` | Helper text. |
+| `isDisable` | `Boolean` | `false` | Disable the picker. |
+| `visibility` | `String` | `"click"` | v-calendar popover trigger. |
+| `mask` | `String` | `""` | Input mask. |
+| `dataFormat` | `String` | `"YYYY-MM-DD"` | Storage format. |
+| `displayFormat` | `String` | `"YYYY-MM-DD"` | Display format. |
+| `maxDate` | `Date \| String` | `undefined` | Maximum selectable date. |
+| `minDate` | `Date \| String` | `undefined` | Minimum selectable date. |
+| `disableDates` | `Array` | `[]` | Accepts `Date`, string, or `{ repeat: { weekdays: [...] } }` entries. |
+| `showInInput` | `Boolean` | `true` | Input-style trigger (vs button). |
+| `monthNames` | `Array` | `undefined` | Custom full month names. |
+| `monthNamesShort` | `Array` | `undefined` | Custom short month names. |
+| `dayNames` | `Array` | `undefined` | Custom day names. |
+| `formatDigit` | `Function` | `undefined` | Locale digit formatter (e.g. Bengali digits). |
+| `rangeSeparator` | `String` | `undefined` | Display separator between range start/end. |
+| `mode` | `String` | `"date"` | `date`, `time`, or `datetime`. |
+| `is24Hour` | `Boolean` | `undefined` | 24-hour clock. |
+| `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
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `value` | v-model sync. |
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `label` | — | Custom label. |
+| `prefix` | — | Prefix area. |
+| `icon` | — | Calendar / clock icon. |
+| `hints` | — | Custom hints. |
+| `picker-container` | `{ isRange, showInInput, value }` | Override the entire picker UI. |