@appsbd/vue3-appsbd-ui 1.0.3 → 1.0.5

package/.ai/ai_ref_AbMainLayout.md

@@ -0,0 +1,106 @@
+# AbMainLayout — AI Reference
+
+Full-page application shell with left sidebar, right sidebar, header, body, and footer slots. On desktop the left sidebar is always visible; on mobile (< 576px) it becomes an overlay drawer with a backdrop. Use this as the top-level layout wrapper when building admin dashboards or panel-style applications.
+
+## Installation
+
+```bash
+npm install @vue3-appsbd-ui
+```
+
+`AbMainLayout` is **not** globally registered. Import it explicitly:
+
+```js
+import { AbMainLayout } from "vue3-appsbd-ui";
+```
+
+## Usage
+
+```vue
+<template>
+  <ab-main-layout ref="layoutRef">
+    <template #leftSidebar>
+      <ab-sidebar app-unique-id="my-app">
+        <ab-side-menu-item :to="{ name: 'dashboard' }">Dashboard</ab-side-menu-item>
+      </ab-sidebar>
+    </template>
+
+    <template #pageHeader>
+      <div class="d-flex align-items-center justify-content-between">
+        <h1>My App</h1>
+        <ab-dark-mode-toggler size="xs" />
+      </div>
+    </template>
+
+    <template #body>
+      <router-view />
+    </template>
+
+    <template #pageFooter>
+      <span>&copy; 2026 My Company</span>
+    </template>
+  </ab-main-layout>
+</template>
+
+<script setup>
+import { AbMainLayout } from "vue3-appsbd-ui";
+import { ref } from "vue";
+
+const layoutRef = ref(null);
+</script>
+```
+
+### Mobile sidebar toggle
+
+On mobile, call `toggleLeftSidebar()` via the template ref to open/close the drawer:
+
+```vue
+<template>
+  <ab-main-layout ref="layoutRef">
+    <template #pageHeader>
+      <button @click="layoutRef?.toggleLeftSidebar()">☰</button>
+      <h1>My App</h1>
+    </template>
+    <!-- ... -->
+  </ab-main-layout>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `headerClass` | `String` | `"apbd-bordered"` | CSS class applied to the page header wrapper. Use `"apbd-bordered"` for a bordered header or `""` for no border. |
+| `footerClass` | `String` | `""` | CSS class applied to the page footer wrapper. |
+
+## Slots
+
+| Name | Scoped Payload | Description |
+| --- | --- | --- |
+| `leftSidebar` | — | Left sidebar panel. On desktop it's always visible; on mobile it slides in as a drawer. Typically hosts `AbSidebar`. |
+| `pageHeader` | `{ headerClass }` | Top header bar. Receives the resolved `headerClass` as a scoped slot prop. |
+| `bodyHeader` | — | Content rendered above the scrollable body area. |
+| `body` | — | Main scrollable content area. |
+| `bodyFooter` | — | Content rendered below the scrollable body area. |
+| `pageFooter` | — | Bottom footer bar. |
+| `rightSidebar` | — | Right sidebar panel. Only rendered when `isRightSidebarOpen` is `true`. |
+
+## Exposed methods
+
+| Name | Signature | Description |
+| --- | --- | --- |
+| `isLeftSidebarOpen` | `Ref<boolean>` | Reactive state of the left sidebar (read-only). |
+| `isRightSidebarOpen` | `Ref<boolean>` | Reactive state of the right sidebar (read-only). |
+| `toggleLeftSidebar` | `(state?: boolean) => void` | Toggle or explicitly set left sidebar visibility. |
+| `toggleRightSidebar` | `(state?: boolean) => void` | Toggle or explicitly set right sidebar visibility. |
+
+## Provides
+
+The component provides a `layoutState` injection key to all descendants:
+
+```js
+inject: ['layoutState']
+// layoutState = { isLeftSidebarOpen, isRightSidebarOpen, toggleLeftSidebar, toggleRightSidebar }
+```
+
+Child components (like `AbSidebar`) can inject this to react to or control the sidebar state.

package/.ai/ai_ref_AbModal.md

@@ -1,103 +1,98 @@
-# AbModal — AI Reference
-
-Full-featured dialog with a built-in VeeValidate `<Form>`, loader overlay, and "message-only" mode. Exposes imperative methods for showing loaders, clearing forms, and closing.
-
-## Installation
-
-Globally registered by the plugin.
-
-## Usage
-
-```vue
-<template>
-  <ab-button class="btn-primary" @click="modalRef.open = true">Open</ab-button>
-
-  <ab-modal
-    ref="modal"
-    v-model:is-modal-visible="isOpen"
-    modal-size="modal-lg"
-    @on-submit="handleSubmit"
-    @close="isOpen = false"
-  >
-    <template #headerTitle>Edit profile</template>
-
-    <!-- default slot receives VeeValidate Form context -->
-    <ab-input-field name="email" label="Email" rules="required|email" v-model="form.email" />
-
-    <template #footer="{ close }">
-      <ab-button class="btn-outline-secondary" @click="close">Cancel</ab-button>
-      <ab-button class="btn-primary" type="submit">Save</ab-button>
-    </template>
-  </ab-modal>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const isOpen = ref(false);
-const modal = ref(null);
-const form = ref({ email: '' });
-
-async function handleSubmit(values, { resetForm }) {
-  modal.value.showLoader(true, 'Saving…');
-  await api.save(values);
-  modal.value.showLoader(false);
-  modal.value.close();
-}
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `isModalVisible` | `Boolean` | — | Visibility state (supports `v-model:is-modal-visible`). |
-| `modalSize` | `String` | `""` | Bootstrap size class (`modal-sm`, `modal-lg`, `modal-xl`). |
-| `modalMsg` | `String` | `""` | Default message for message-only mode. |
-| `hideHeader` | `Boolean` | `false` | Hide the header section entirely. |
-| `hideBody` | `Boolean` | `false` | Hide the body section entirely. |
-| `hideFooter` | `Boolean` | `false` | Hide the footer section entirely. |
-| `hideCrossBtn` | `Boolean` | `false` | Hide the top-right close button. |
-| `hideForm` | `Boolean` | `false` | Render the root as a plain `<div>` instead of a VeeValidate `<Form>`. |
-| `bodyClass` | `String` | `""` | Extra class on the body section. |
-| `isModalCenter` | `Boolean` | `true` | Vertically center the modal. |
-| `isBorder` | `Boolean` | `false` | Show a border around the modal content. |
-| `iconContainerClass` | `String` | `""` | Extra class on the header icon container. |
-| `headerClass` | `String` | `""` | Preferred extra class on the header. |
-| `headerrClass` | `String` | `""` | Legacy alias for `headerClass`. `headerClass` takes precedence when both are provided. |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `onSubmit` | `(event, { resetForm })` | Fired when the internal VeeValidate form is submitted. |
-| `loading-status` | `Boolean` | Emitted whenever the loader state toggles. |
-| `close` | — | Modal was closed (via ✕, Escape, or `close()`). |
-
-## Slots
-
-| Name | Scope | Description |
-| --- | --- | --- |
-| `default` | VeeValidate `Form` slot-props | Form / body content when `hideForm` is `false`. |
-| `header` | — | Overrides the entire header. |
-| `headerIcon` | — | Icon shown at the start of the header. |
-| `headerTitleContainer` | — | Overrides the title/subtitle wrapper. |
-| `headerTitle` | — | Modal title text. |
-| `headerSubTitle` | — | Modal subtitle text. |
-| `body` | — | Overrides the body section. |
-| `loader` | — | Overrides the default loader element. |
-| `footer` | `{ close }` | Footer content — receives a `close()` function. |
-
-## Exposed Methods (via template ref)
-
-| Method | Description |
-| --- | --- |
-| `showLoader(status, msg?)` | Show/hide the loader with an optional message. |
-| `close()` | Close the modal. |
-| `clearForm()` | Reset the VeeValidate form and close. |
-| `returnClear()` | Reset the form without closing. |
-| `showMsgOnly(msg, isHideFooter?)` | Switch to message-only mode. |
-| `setMessageOnly(status)` | Toggle message-only mode programmatically. |
-
-## Notes
-
-- Use `AbEasyModal` when you only need a simple trigger-and-close dialog without a form.
+# AbModal — AI Reference
+
+Full-featured dialog with a built-in VeeValidate `<Form>`, loader overlay, and "message-only" mode. Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <ab-button class="btn-primary" @click="isOpen = true">Open</ab-button>
+
+  <ab-modal
+    ref="modal"
+    v-model:is-modal-visible="isOpen"
+    modal-size="modal-lg"
+    @on-submit="handleSubmit"
+    @close="isOpen = false"
+  >
+    <template #headerTitle>Edit profile</template>
+
+    <ab-input-field name="email" label="Email" rules="required|email" v-model="form.email" />
+
+    <template #footer="{ close }">
+      <ab-button class="btn-outline-secondary" @click="close">Cancel</ab-button>
+      <ab-button class="btn-primary" type="submit">Save</ab-button>
+    </template>
+  </ab-modal>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const isOpen = ref(false);
+const modal = ref(null);
+const form = ref({ email: "" });
+
+async function handleSubmit(values, { resetForm }) {
+  modal.value.showLoader(true, "Saving…");
+  await api.save(values);
+  modal.value.showLoader(false);
+  modal.value.close();
+}
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `isModalVisible` | `Boolean` | — | Visibility state (`v-model:is-modal-visible`). |
+| `modalSize` | `String` | `""` | Bootstrap size class (`modal-sm`, `modal-lg`, `modal-xl`). |
+| `modalMsg` | `String` | `""` | Default message for message-only mode. |
+| `hideHeader` | `Boolean` | `false` | Hide the header section. |
+| `hideBody` | `Boolean` | `false` | Hide the body section. |
+| `hideFooter` | `Boolean` | `false` | Hide the footer section. |
+| `hideCrossBtn` | `Boolean` | `false` | Hide the top-right close button. |
+| `hideForm` | `Boolean` | `false` | Render root as plain `<div>` instead of VeeValidate `<Form>`. |
+| `bodyClass` | `String` | `""` | Extra class on the body section. |
+| `isModalCenter` | `Boolean` | `true` | Vertically center the modal. |
+| `isBorder` | `Boolean` | `false` | Border around modal content. |
+| `iconContainerClass` | `String` | `""` | Extra class on the header icon container. |
+| `headerClass` | `String` | `""` | Extra class on the header. |
+| `headerrClass` | `String` | `""` | Legacy alias for `headerClass`. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `onSubmit` | `(event, { resetForm })` | Fired when the internal VeeValidate form is submitted. |
+| `loading-status` | `Boolean` | Emitted when loader state toggles. |
+| `close` | — | Modal was closed (✕, Escape, or `close()`). |
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `default` | VeeValidate `Form` slot-props | Form body when `hideForm` is `false`. |
+| `header` | — | Overrides the entire header. |
+| `headerIcon` | — | Icon at the start of the header. |
+| `headerTitleContainer` | — | Overrides the title/subtitle wrapper. |
+| `headerTitle` | — | Modal title text. |
+| `headerSubTitle` | — | Modal subtitle text. |
+| `body` | — | Overrides the body section. |
+| `loader` | — | Overrides the default loader element. |
+| `footer` | `{ close }` | Footer content — receives a `close()` function. |
+
+## Exposed Methods
+
+| Method | Description |
+| --- | --- |
+| `showLoader(status, msg?)` | Show/hide the loader with optional message. |
+| `close()` | Close the modal. |
+| `clearForm()` | Reset the VeeValidate form and close. |
+| `returnClear()` | Reset the form without closing. |
+| `showMsgOnly(msg, isHideFooter?)` | Switch to message-only mode. |
+| `setMessageOnly(status)` | Toggle message-only mode programmatically. |
+
+## Notes
+
+Use `AbEasyModal` when you only need a simple trigger-and-close dialog without a form.

package/.ai/ai_ref_AbMultiSelect.md

@@ -1,112 +1,78 @@
-# AbMultiSelect — AI Reference
-
-Searchable single/multi/tag select. Custom built-in replacement for `@vueform/multiselect` — no third-party theme CSS required.
-
-## Installation
-
-Globally registered by the plugin.
-
-## Usage
-
-```vue
-<template>
-  <!-- Single select -->
-  <ab-multi-select
-    v-model="country"
-    name="country"
-    label="Country"
-    :options="countries"
-    label-key="title"
-    value-key="val"
-    searchable
-  />
-
-  <!-- Multiple -->
-  <ab-multi-select
-    v-model="skills"
-    name="skills"
-    label="Skills"
-    mode="multiple"
-    :options="skillOptions"
-    :max="5"
-  />
-
-  <!-- Tags mode -->
-  <ab-multi-select v-model="hashtags" name="hashtags" mode="tags" searchable />
-
-  <!-- AJAX search -->
-  <ab-multi-select
-    v-model="user"
-    name="user"
-    is-ajax-search
-    searchable
-    :on-search="searchUsers"
-    :loading="isSearching"
-  />
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `modelValue` | `any` | `null` | v-model value. |
-| `label` | `String` | `""` | Field label. |
-| `placeholder` | `String` | `""` | Placeholder text. |
-| `type` | `String` | `"text"` | Input type. |
-| `name` | `String` | **required** | VeeValidate field name. |
-| `rules` | `String \| Object` | `""` | VeeValidate rules. |
-| `containerClass` | `String` | `"mb-3"` | Wrapper class. |
-| `hints` | `String` | `""` | Helper text. |
-| `multiple` | `Boolean` | `false` | Deprecated — use `mode` instead. |
-| `searchable` | `Boolean` | `false` | Enable option search/filter. |
-| `mode` | `String` | `"single"` | `single`, `multiple`, or `tags`. |
-| `size` | `String` | `"md"` | Adjusts component size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
-| `options` | `Array` | `[]` | Available options. |
-| `labelKey` | `String` | `"title"` | Property to use for label. |
-| `valueKey` | `String` | `"val"` | Property to use for value. |
-| `max` | `Number` | `-1` | Max selections; `-1` = unlimited. |
-| `object` | `Boolean` | `false` | Return full objects instead of values. |
-| `prefix` | `String` | `""` | Prefix text. |
-| `postfix` | `String` | `""` | Postfix text. |
-| `isAjaxSearch` | `Boolean` | `false` | Enable async search via `onSearch`. |
-| `onSearch` | `Function` | `null` | Async handler `(query) => Promise<options>`. |
-| `hideSelected` | `Boolean` | `true` | Hide already-selected items from dropdown. |
-| `loading` | `Boolean` | `false` | Show a loading spinner. |
-| `disabled` | `Boolean` | `false` | Disable the field. |
-| `appendToBody` | `Boolean` | `true` | Teleport the dropdown to `<body>`. |
-| `isLeftIconBorder` | `Boolean` | `false` | Border on prefix icon. |
-| `isRightIconBorder` | `Boolean` | `false` | Border on postfix 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` | — | Selection cleared. |
-| `change` | `value` | Value changed. |
-| `select` | `value` | An option was selected. |
-| `open` | — | Dropdown opened. |
-| `close` | — | Dropdown closed. |
-| `search-change` | `query` | Search input changed. |
-
-## Slots
-
-| Name | Scope | Description |
-| --- | --- | --- |
-| `label` | — | Custom label. |
-| `prefix` | — | Prefix slot. |
-| `icon` | — | Custom icon slot. |
-| `postfix` | — | Postfix slot. |
-| `singlelabel` | `value` | Custom single-mode label rendering. |
-| `taglabel` | `value` | Custom tag-mode label rendering. |
-| `option` | `{ option, isSelected }` | Custom option rendering. |
-| `noresults` | — | Empty state content. |
-| `option-loading` | — | Loading message. |
-| `loader-icon` | — | Custom loader icon. |
-
-## v-model
-
-Yes.
+# AbMultiSelect — AI Reference
+
+Searchable single/multi/tag select. Custom built-in replacement for `@vueform/multiselect` — no third-party theme CSS required.
+
+## Usage
+
+```vue
+<template>
+  <ab-multi-select v-model="country" name="country" label="Country" :options="countries" label-key="title" value-key="val" searchable />
+
+  <ab-multi-select v-model="skills" name="skills" label="Skills" mode="multiple" :options="skillOptions" :max="5" />
+
+  <ab-multi-select v-model="hashtags" name="hashtags" mode="tags" searchable />
+
+  <ab-multi-select v-model="user" name="user" is-ajax-search searchable :on-search="searchUsers" :loading="isSearching" />
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `any` | `null` | v-model value. |
+| `label` | `String` | `""` | Field label. |
+| `placeholder` | `String` | `""` | Placeholder text. |
+| `type` | `String` | `"text"` | Input type. |
+| `name` | `String` | **required** | VeeValidate field name. |
+| `rules` | `String \| Object` | `""` | VeeValidate rules. |
+| `containerClass` | `String` | `"mb-3"` | Wrapper class. |
+| `hints` | `String` | `""` | Helper text. |
+| `multiple` | `Boolean` | `false` | Deprecated — use `mode` instead. |
+| `searchable` | `Boolean` | `false` | Enable option search/filter. |
+| `mode` | `String` | `"single"` | `single`, `multiple`, or `tags`. |
+| `size` | `String` | `"md"` | Adjusts component size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
+| `options` | `Array` | `[]` | Available options. |
+| `labelKey` | `String` | `"title"` | Property to use for label. |
+| `valueKey` | `String` | `"val"` | Property to use for value. |
+| `max` | `Number` | `-1` | Max selections; `-1` = unlimited. |
+| `object` | `Boolean` | `false` | Return full objects instead of values. |
+| `prefix` | `String` | `""` | Prefix text. |
+| `postfix` | `String` | `""` | Postfix text. |
+| `isAjaxSearch` | `Boolean` | `false` | Enable async search via `onSearch`. |
+| `onSearch` | `Function` | `null` | Async handler `(query) => Promise<options>`. |
+| `hideSelected` | `Boolean` | `true` | Hide already-selected items from dropdown. |
+| `loading` | `Boolean` | `false` | Show a loading spinner. |
+| `disabled` | `Boolean` | `false` | Disable the field. |
+| `appendToBody` | `Boolean` | `true` | Teleport the dropdown to `<body>`. |
+| `isLeftIconBorder` | `Boolean` | `false` | Border on prefix icon. |
+| `isRightIconBorder` | `Boolean` | `false` | Border on postfix 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` | — | Selection cleared. |
+| `change` | `value` | Value changed. |
+| `select` | `value` | An option was selected. |
+| `open` | — | Dropdown opened. |
+| `close` | — | Dropdown closed. |
+| `search-change` | `query` | Search input changed. |
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `label` | — | Custom label. |
+| `prefix` | — | Prefix slot. |
+| `icon` | — | Custom icon slot. |
+| `postfix` | — | Postfix slot. |
+| `singlelabel` | `value` | Custom single-mode label rendering. |
+| `taglabel` | `value` | Custom tag-mode label rendering. |
+| `option` | `{ option, isSelected }` | Custom option rendering. |
+| `noresults` | — | Empty state content. |
+| `option-loading` | — | Loading message. |
+| `loader-icon` | — | Custom loader icon. |