@appsbd/vue3-appsbd-ui 1.0.0 → 1.0.2

package/.ai/ai_ref_AbEasyModal.md

@@ -1,62 +1,62 @@
-# 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.
-
-## Usage
-
-```vue
-<template>
-  <ab-easy-modal ref="modal">
-    <template #action>
-      <ab-button class="btn-primary">Show dialog</ab-button>
-    </template>
-
-    <template #title>Delete project?</template>
-    <template #body>
-      This cannot be undone.
-    </template>
-
-    <template #footer="{ closeModal }">
-      <ab-button class="btn-outline-secondary" @click="closeModal">Cancel</ab-button>
-      <ab-button class="btn-danger" @click="confirmDelete">Delete</ab-button>
-    </template>
-  </ab-easy-modal>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const modal = ref(null);
-async function confirmDelete() {
-  await api.delete();
-  modal.value.closeModal();
-}
-</script>
-```
-
-## Props
-
-All `AbModal` props can be forwarded via `$attrs` (e.g. `modal-size`, `hide-footer`).
-
-## Events
-
-Inherits `AbModal`'s `onSubmit`, `loading-status`, and `close` events.
-
-## Slots
-
-| Name | Scope | Description |
-| --- | --- | --- |
-| `action` | — | Trigger element rendered outside the modal (clicking it opens the modal). |
-| `title` | — | Modal title. |
-| `body` | — | Modal body content. |
-| `footer` | `{ closeModal, close }` | Footer; receives both close helpers. |
-
-## Exposed Methods
-
-| Method | Description |
-| --- | --- |
-| `openModal()` | Open the modal programmatically. |
-| `closeModal()` | Close the modal programmatically. |
+# 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.
+
+## Usage
+
+```vue
+<template>
+  <ab-easy-modal ref="modal">
+    <template #action>
+      <ab-button class="btn-primary">Show dialog</ab-button>
+    </template>
+
+    <template #title>Delete project?</template>
+    <template #body>
+      This cannot be undone.
+    </template>
+
+    <template #footer="{ closeModal }">
+      <ab-button class="btn-outline-secondary" @click="closeModal">Cancel</ab-button>
+      <ab-button class="btn-danger" @click="confirmDelete">Delete</ab-button>
+    </template>
+  </ab-easy-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const modal = ref(null);
+async function confirmDelete() {
+  await api.delete();
+  modal.value.closeModal();
+}
+</script>
+```
+
+## Props
+
+All `AbModal` props can be forwarded via `$attrs` (e.g. `modal-size`, `hide-footer`).
+
+## Events
+
+Inherits `AbModal`'s `onSubmit`, `loading-status`, and `close` events.
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `action` | — | Trigger element rendered outside the modal (clicking it opens the modal). |
+| `title` | — | Modal title. |
+| `body` | — | Modal body content. |
+| `footer` | `{ closeModal, close }` | Footer; receives both close helpers. |
+
+## Exposed Methods
+
+| Method | Description |
+| --- | --- |
+| `openModal()` | Open the modal programmatically. |
+| `closeModal()` | Close the modal programmatically. |

package/.ai/ai_ref_AbField.md

@@ -1,93 +1,96 @@
-# 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.
-
-## Usage
-
-```vue
-<template>
-  <ab-field type="text" v-model="form.name" name="name" label="Name" rules="required" />
-
-  <ab-field
-    type="select"
-    v-model="form.country"
-    name="country"
-    label="Country"
-    :options="countries"
-    label-key="title"
-    value-key="val"
-    searchable
-  />
-
-  <ab-field
-    type="toggle"
-    v-model="form.notifications"
-    name="notifications"
-    title="Enable notifications"
-    description="Receive email updates"
-  />
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `val` | `any` | `null` | Initial value (used when `modelValue` is empty). |
-| `label` | `String` | **required** | Field label. |
-| `name` | `String` | **required** | VeeValidate field name. |
-| `type` | `String` | `"text"` | `text`, `email`, `password`, `number`, `url`, `textarea`, `select`, `multiselect`, `tag`, `checkbox`, `radio`, `toggle`, `switch`. |
-| `prefix` | `String` | `""` | Prefix text/icon. |
-| `postfix` | `String` | `""` | Postfix text/icon. |
-| `modelValue` | `String \| Number \| Boolean \| Array \| Object` | `""` | Two-way-bound value. |
-| `isCodeInput` | `Boolean` | `false` | Applies monospace styling. |
-| `containerClass` | `String` | `""` | Wrapper class. |
-| `maxlength` | `String \| Number` | `""` | Native maxlength. |
-| `minlength` | `String \| Number` | `""` | Native minlength. |
-| `placeholder` | `String` | `""` | Input placeholder. |
-| `hints` | `String \| Array` | `""` | Helper text. |
-| `rules` | `String \| Array` | `""` | VeeValidate rules. |
-| `options` | `Array` | `[]` | Options for select / checkbox / radio. |
-| `labelKey` | `String` | `"title"` | Option label property. |
-| `valueKey` | `String` | `"val"` | Option value property. |
-| `max` | `Number` | `-1` | Max selections (multiselect/tag); `-1` = unlimited. |
-| `size` | `String` | `"md"` | Field size. |
-| `object` | `Boolean` | `false` | Return full objects instead of values (multiselect). |
-| `searchable` | `Boolean` | `false` | Enable search (select). |
-| `description` | `String` | `""` | Secondary description. |
-| `helptext` | `String` | `""` | Help text. |
-| `isInline` | `Boolean` | `false` | Inline layout (checkbox/radio). |
-| `trueValue` | `any` | `"Y"` | Toggle/switch on value. |
-| `falseValue` | `any` | `"N"` | Toggle/switch off value. |
-| `title` | `String \| null` | `null` | Toggle/switch title. |
-| `isLeftIconBorder` | `Boolean` | `false` | Border on left icon. |
-| `isRightIconBorder` | `Boolean` | `false` | Border on right icon. |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `update:modelValue` | `value` | v-model sync. |
-| `clear` | `event` | Multiselect field cleared. |
-| `change` | `value` | Multiselect value changed. |
-| `select` | `value` | Multiselect option selected. |
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `label` | Custom label. |
-| `prefix` | Custom prefix. |
-| `postfix` | Custom postfix. |
-| `description` | Custom description. |
-| `helptext` | Custom help text. |
-| `option` | Custom option rendering (select). |
-| `singlelabel` | Custom single-value label (select). |
-
-## v-model
-
-Yes — supports `modelValue` / `update:modelValue`.
+# 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.
+
+## Usage
+
+```vue
+<template>
+  <ab-field type="text" v-model="form.name" name="name" label="Name" rules="required" />
+
+  <ab-field
+    type="select"
+    v-model="form.country"
+    name="country"
+    label="Country"
+    :options="countries"
+    label-key="title"
+    value-key="val"
+    searchable
+  />
+
+  <ab-field
+    type="toggle"
+    v-model="form.notifications"
+    name="notifications"
+    title="Enable notifications"
+    description="Receive email updates"
+  />
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `val` | `any` | `null` | Initial value (used when `modelValue` is empty). |
+| `label` | `String` | **required** | Field label. |
+| `name` | `String` | **required** | VeeValidate field name. |
+| `type` | `String` | `"text"` | `text`, `email`, `password`, `number`, `url`, `textarea`, `select`, `multiselect`, `tag`, `checkbox`, `radio`, `toggle`, `switch`. |
+| `prefix` | `String` | `""` | Prefix text/icon. |
+| `postfix` | `String` | `""` | Postfix text/icon. |
+| `modelValue` | `String \| Number \| Boolean \| Array \| Object` | `""` | Two-way-bound value. |
+| `isCodeInput` | `Boolean` | `false` | Applies monospace styling. |
+| `containerClass` | `String` | `""` | Wrapper class. |
+| `maxlength` | `String \| Number` | `""` | Native maxlength. |
+| `minlength` | `String \| Number` | `""` | Native minlength. |
+| `placeholder` | `String` | `""` | Input placeholder. |
+| `hints` | `String \| Array` | `""` | Helper text. |
+| `rules` | `String \| Array` | `""` | VeeValidate rules. |
+| `options` | `Array` | `[]` | Options for select / checkbox / radio. |
+| `labelKey` | `String` | `"title"` | Option label property. |
+| `valueKey` | `String` | `"val"` | Option value property. |
+| `max` | `Number` | `-1` | Max selections (multiselect/tag); `-1` = unlimited. |
+| `size` | `String` | `"md"` | Field size. |
+| `object` | `Boolean` | `false` | Return full objects instead of values (multiselect). |
+| `searchable` | `Boolean` | `false` | Enable search (select). |
+| `description` | `String` | `""` | Secondary description. |
+| `helptext` | `String` | `""` | Help text. |
+| `isInline` | `Boolean` | `false` | Inline layout (checkbox/radio). |
+| `trueValue` | `any` | `"Y"` | Toggle/switch on value. |
+| `falseValue` | `any` | `"N"` | Toggle/switch off value. |
+| `title` | `String \| null` | `null` | Toggle/switch title. |
+| `isLeftIconBorder` | `Boolean` | `false` | Border on left icon. |
+| `isRightIconBorder` | `Boolean` | `false` | Border on right icon. |
+| `isHideLabel` | `Boolean` | `false` | Hide the label visually. |
+| `iconPosition` | `String` | `"right"` | Position of the custom `#icon` slot (`"left"`, `"right"`). |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `value` | v-model sync. |
+| `clear` | `event` | Multiselect field cleared. |
+| `change` | `value` | Multiselect value changed. |
+| `select` | `value` | Multiselect option selected. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `label` | Custom label. |
+| `prefix` | Custom prefix. |
+| `icon` | Custom icon. |
+| `postfix` | Custom postfix. |
+| `description` | Custom description. |
+| `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

@@ -1,63 +1,63 @@
-# AbFileUploader — AI Reference
-
-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" :max-size="5">
-    <template #dial>
-      <div class="my-drop-zone">Drop files here</div>
-    </template>
-  </ab-file-uploader>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const file = ref(null);
-function handleFiles(files) {
-  console.log('Selected files:', files);
-}
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `modelValue` | `File \| Array \| String` | `null` | Selected file (or URL string / array). |
-| `maxSize` | `Number` | `2.0` | Max file size in MB. |
-| `label` | `String` | `""` | Field label. |
-| `containerClass` | `String` | `""` | Wrapper class. |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `update:modelValue` | `file` | v-model sync. |
-| `onSelectFiles` | `files` | All selected files after size validation. |
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `label` | Custom label. |
-| `dial` | Custom uploader UI (replaces the default design). |
-| `default` | Alternative custom UI slot. |
-
-## v-model
-
-Yes.
+# AbFileUploader — AI Reference
+
+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" :max-size="5">
+    <template #dial>
+      <div class="my-drop-zone">Drop files here</div>
+    </template>
+  </ab-file-uploader>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const file = ref(null);
+function handleFiles(files) {
+  console.log('Selected files:', files);
+}
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `File \| Array \| String` | `null` | Selected file (or URL string / array). |
+| `maxSize` | `Number` | `2.0` | Max file size in MB. |
+| `label` | `String` | `""` | Field label. |
+| `containerClass` | `String` | `""` | Wrapper class. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `file` | v-model sync. |
+| `onSelectFiles` | `files` | All selected files after size validation. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `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

@@ -1,71 +1,71 @@
-# AbFilterPanel — AI Reference
-
-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
-<template>
-  <ab-filter-panel
-    :filter-options="filterOptions"
-    is-advance
-    is-searchable
-    size="sm"
-    @search-filter="handleSearch"
-    @reset="handleReset"
-  />
-</template>
-
-<script setup>
-const filterOptions = [
-  { propName: 'name', label: 'Name', type: 'text' },
-  { propName: 'status', label: 'Status', type: 'select', options: [...] },
-  { propName: 'createdAt', label: 'Created', type: 'daterange' },
-];
-
-function handleSearch(data) {
-  // data: [{ propName, operators, value }, ...]
-}
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `isAdvance` | `Boolean` | `false` | Show all filters in an expanded layout. |
-| `isQuickAdvance` | `Boolean` | `false` | Quick advance mode. |
-| `isSingle` | `Boolean` | `false` | Single-field search mode. |
-| `isAllowed` | `Boolean` | `false` | Permission flag consumed by the template. |
-| `canScan` | `Boolean` | `false` | Show a QR / barcode scan button. |
-| `filterOptions` | `Array` | `[]` | Filter field definitions. |
-| `scanProps` | `String` | `""` | Property name to apply scan result to. |
-| `showScanFld` | `Boolean` | `false` | Force-show the scan field. |
-| `showDrGroupText` | `Boolean` | `true` | Show date-range group label. |
-| `dateFormat` | `String` | `"MMM DD,YYYY"` | Date display format. |
-| `isSearchable` | `Boolean` | `false` | Allow searching within option lists. |
-| `isMaxDate` | `Boolean` | `true` | Limit date pickers to today as max. |
-| `size` | `String` | `"xs"` | Control size. |
-| `advanceSearchInputContainerClass` | `String` | `"col-6"` | Grid column class for inputs in advance mode. |
-| `isQuickAdvanceAutoSearch` | `Boolean` | `false` | Fire search automatically on field change (quick advance). |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `searchFilter` | `Array<{ propName, operators, value }>` | User triggered a search. |
-| `reset` | — | Filter reset clicked. |
-| `ChangeSearchMode` | `showScan: Boolean` | Toggled between search and scan modes. |
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `prefix` | Filter prefix. |
-| `postfix` | Filter postfix. |
-| `icon` | Filter icon. |
-| `hints` | Helper text. |
+# AbFilterPanel — AI Reference
+
+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
+<template>
+  <ab-filter-panel
+    :filter-options="filterOptions"
+    is-advance
+    is-searchable
+    size="sm"
+    @search-filter="handleSearch"
+    @reset="handleReset"
+  />
+</template>
+
+<script setup>
+const filterOptions = [
+  { propName: 'name', label: 'Name', type: 'text' },
+  { propName: 'status', label: 'Status', type: 'select', options: [...] },
+  { propName: 'createdAt', label: 'Created', type: 'daterange' },
+];
+
+function handleSearch(data) {
+  // data: [{ propName, operators, value }, ...]
+}
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `isAdvance` | `Boolean` | `false` | Show all filters in an expanded layout. |
+| `isQuickAdvance` | `Boolean` | `false` | Quick advance mode. |
+| `isSingle` | `Boolean` | `false` | Single-field search mode. |
+| `isAllowed` | `Boolean` | `false` | Permission flag consumed by the template. |
+| `canScan` | `Boolean` | `false` | Show a QR / barcode scan button. |
+| `filterOptions` | `Array` | `[]` | Filter field definitions. |
+| `scanProps` | `String` | `""` | Property name to apply scan result to. |
+| `showScanFld` | `Boolean` | `false` | Force-show the scan field. |
+| `showDrGroupText` | `Boolean` | `true` | Show date-range group label. |
+| `dateFormat` | `String` | `"MMM DD,YYYY"` | Date display format. |
+| `isSearchable` | `Boolean` | `false` | Allow searching within option lists. |
+| `isMaxDate` | `Boolean` | `true` | Limit date pickers to today as max. |
+| `size` | `String` | `"xs"` | Control size. |
+| `advanceSearchInputContainerClass` | `String` | `"col-6"` | Grid column class for inputs in advance mode. |
+| `isQuickAdvanceAutoSearch` | `Boolean` | `false` | Fire search automatically on field change (quick advance). |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `searchFilter` | `Array<{ propName, operators, value }>` | User triggered a search. |
+| `reset` | — | Filter reset clicked. |
+| `ChangeSearchMode` | `showScan: Boolean` | Toggled between search and scan modes. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `prefix` | Filter prefix. |
+| `postfix` | Filter postfix. |
+| `icon` | Filter icon. |
+| `hints` | Helper text. |