@appsbd/vue3-appsbd-ui 1.0.0

package/.ai/ai_ref_AbField.md

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

package/.ai/ai_ref_AbFileUploader.md

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

package/.ai/ai_ref_AbFilterPanel.md

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

package/.ai/ai_ref_AbFormCheck.md

@@ -0,0 +1,75 @@
+# AbFormCheck / AbRadioInput — AI Reference
+
+Checkbox or radio group with card, segmented, and pill visual variants. `AbRadioInput` is an alias export of `AbFormCheck` — both register to the same component.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <!-- Checkbox group -->
+  <ab-form-check
+    v-model="selected"
+    name="features"
+    :options="[
+      { val: 'a', title: 'Email reports' },
+      { val: 'b', title: 'Slack notifications' },
+      { val: 'c', title: 'SMS alerts' },
+    ]"
+    label="Enable"
+  />
+
+  <!-- Radio group — card variant -->
+  <ab-form-check
+    v-model="plan"
+    type="radio"
+    name="plan"
+    variant="card"
+    :options="plans"
+  />
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `any` | — | v-model binding (array for checkboxes, single value for radio). |
+| `label` | `String \| null` | `null` | Group label. |
+| `rules` | `String` | `""` | VeeValidate rules. |
+| `val` | `any` | `null` | Initial value. |
+| `type` | `String` | `"checkbox"` | `"checkbox"` or `"radio"`. |
+| `isInline` | `Boolean` | `false` | Render options inline. |
+| `options` | `Array` | `[]` | Each: `{ val, title, description?, icon?, img_src?, iconComponent?, disable? }`. |
+| `name` | `String` | **required** | Field name. |
+| `limit` | `Number` | `0` | Max selections (0 = unlimited). |
+| `containerClass` | `String` | `"mb-3"` | Wrapper class. |
+| `size` | `String` | `"md"` | Control size. |
+| `iconSize` | `String` | `"24px"` | Icon size (when option has an icon). |
+| `iconGap` | `String` | `"10px"` | Gap between icon and label. |
+| `variant` | `String` | `"default"` | `default`, `card`, `segmented`, `pill`. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `value` | v-model sync. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `label` | Group label. |
+| `description` | Group description. |
+| `help-text` | Helper text. |
+| `input-img-{option.title}` | Per-option image slot. |
+| `input-icon-{option.title}` | Per-option icon component slot. |
+| `label-{option.title}` | Per-option label slot. |
+| `description-{option.title}` | Per-option description slot. |
+
+## v-model
+
+Yes.

package/.ai/ai_ref_AbImageRadioInput.md

@@ -0,0 +1,63 @@
+# AbImageRadioInput — AI Reference
+
+Radio-group variant that renders visual image / icon tiles for each option. Useful for theme pickers, layout pickers, and other visual-first choices.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <ab-image-radio-input
+    v-model="theme"
+    :options="[
+      { val: 'light', label: 'Light', img_src: '/theme-light.png' },
+      { val: 'dark', label: 'Dark', img_src: '/theme-dark.png' },
+      { val: 'system', label: 'System', icon: 'bi bi-laptop' },
+    ]"
+  />
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `any` | — | v-model binding. |
+| `width` | `String` | `"auto"` | Option width. |
+| `height` | `String` | `"auto"` | Option height. |
+| `maxWidth` | `String` | `"inherit"` | Max width. |
+| `maxImgWidth` | `String` | `"50%"` | Image max width. |
+| `borderRadius` | `String` | `"5px"` | Option border radius. |
+| `margin` | `String` | `"0 15px 15px 0"` | Option margin. |
+| `padding` | `String` | `"10px"` | Option padding. |
+| `selectorTop` | `String` | `"5px"` | Position of the checkmark indicator (top). |
+| `selectorLeft` | `String` | `"5px"` | Position of the checkmark indicator (left). |
+| `selectorColor` | `String` | `""` | Checkmark color. |
+| `iconSize` | `String` | `"inherit"` | Option icon size. |
+| `options` | `Array` | `[]` | Option objects — see shape below. |
+| `isInline` | `Boolean` | `false` | Inline (row) layout. |
+| `optionClass` | `String` | `""` | Class for each option wrapper. |
+| `labelBorder` | `String` | `"1px solid transparent"` | Option border. |
+
+**Option shape**: `{ val, label?, img_src?, icon?, iconComponent?, icon_ctnr_class?, class? }`
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `value` | v-model sync. |
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `icon_image` | `option` | Custom image/icon for each option. |
+| `label` | `option` | Custom label rendering. |
+| `label-{val}` | — | Custom label for a specific option by `val`. |
+
+## v-model
+
+Yes.

package/.ai/ai_ref_AbInputField.md

@@ -0,0 +1,71 @@
+# AbInputField — AI Reference
+
+Core text input with built-in VeeValidate integration, localized feedback, and prefix/postfix/hint slots. Use this for single-line text inputs; use `AbField` if you want a polymorphic field that can render selects, toggles, etc.
+
+## Installation
+
+Globally registered by the plugin. Peer dependencies: `vee-validate`, `@vee-validate/rules`.
+
+## Usage
+
+```vue
+<template>
+  <ab-input-field
+    v-model="form.email"
+    name="email"
+    label="Email"
+    placeholder="you@example.com"
+    rules="required|email"
+    hints="We'll never share your email."
+  >
+    <template #prefix><i class="bi bi-envelope"></i></template>
+  </ab-input-field>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+const form = reactive({ email: '' });
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `any` | `null` | Two-way-bound value. |
+| `label` | `String` | `""` | Field label. |
+| `placeholder` | `String` | `""` | Input placeholder. |
+| `type` | `String` | `"text"` | Native input type (`text`, `email`, `password`, `number`, `tel`, …). |
+| `name` | `String` | **required** | VeeValidate field name. |
+| `isCodeInput` | `Boolean` | `false` | Applies monospace / code-input styling. |
+| `rules` | `String \| Object` | `""` | VeeValidate rules. |
+| `containerClass` | `String` | `"mb-3"` | Class on the wrapper `<div>`. |
+| `hints` | `String` | `""` | Helper text beneath the input. |
+| `prefix` | `String` | `""` | Prefix text/icon (shortcut for `#prefix` slot). |
+| `postfix` | `String` | `""` | Postfix text/icon. |
+| `maxlength` | `any` | `null` | Native `maxlength`. |
+| `isLeftIconBorder` | `Boolean` | `false` | Renders border between the prefix icon and the input. |
+| `isRightIconBorder` | `Boolean` | `false` | Renders border between the postfix icon and the input. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `value` | v-model sync. |
+| `input` | `value` | Fired on input. |
+| `keyup` | `KeyboardEvent` | Forwarded native event. |
+| `keydown` | `KeyboardEvent` | Forwarded native event. |
+| `paste` | `ClipboardEvent` | Forwarded native event. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `label` | Custom label content. |
+| `prefix` | Prefix icon / text. |
+| `postfix` | Postfix icon / text. |
+| `hints` | Helper text (overrides `hints` prop). |
+
+## v-model
+
+Yes — `modelValue` + `update:modelValue`.

package/.ai/ai_ref_AbInputTag.md

@@ -0,0 +1,73 @@
+# AbInputTag — AI Reference
+
+Multi-tag input — lets users enter and manage a list of tags. Optionally supports an `options` array for autocomplete-style selection.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <ab-input-tag
+    v-model="tags"
+    name="tags"
+    label="Tags"
+    placeholder="Type and press Enter"
+    :max="10"
+    hints="Up to 10 tags"
+  />
+
+  <!-- With preset options -->
+  <ab-input-tag
+    v-model="skills"
+    name="skills"
+    :options="['Vue', 'React', 'Angular', 'Svelte']"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const tags = ref([]);
+const skills = ref([]);
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `Array` | `[]` | v-model array of selected tags. |
+| `options` | `Array` | `[]` | Each entry: `{ val, title }` or a plain string. |
+| `label` | `String` | `""` | Field label. |
+| `size` | `String` | `"md"` | Adjusts component size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
+| `placeholder` | `String` | `""` | Placeholder text. |
+| `name` | `String` | **required** | VeeValidate field name. |
+| `rules` | `String \| Object` | `""` | VeeValidate rules. |
+| `containerClass` | `String` | `"mb-3"` | Wrapper class. |
+| `hints` | `String` | `""` | Helper text. |
+| `prefix` | `String` | `""` | Prefix icon/text. |
+| `postfix` | `String` | `""` | Postfix icon/text. |
+| `max` | `Number` | `0` | Max number of tags (0 = unlimited). |
+| `isLeftIconBorder` | `Boolean` | `false` | Border on prefix icon. |
+| `isRightIconBorder` | `Boolean` | `false` | Border on postfix icon. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `Array` | v-model sync. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `label` | Custom label. |
+| `prefix` | Prefix icon/text. |
+| `postfix` | Postfix icon/text. |
+| `hints` | Custom hints. |
+
+## v-model
+
+Yes.

package/.ai/ai_ref_AbKbd.md

@@ -0,0 +1,35 @@
+# AbKbd — AI Reference
+
+Styled `<kbd>`-like keyboard key chip. Compose multiple into a chord using `AbKbdGroup`.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  Press <ab-kbd>Esc</ab-kbd> to close.
+
+  <ab-kbd-group>
+    <ab-kbd>⌘</ab-kbd>
+    <ab-kbd>Shift</ab-kbd>
+    <ab-kbd>P</ab-kbd>
+  </ab-kbd-group>
+</template>
+```
+
+## Props
+
+No declared props.
+
+## Events
+
+None.
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Key label (typically a single character or short word). |

package/.ai/ai_ref_AbKbdGroup.md

@@ -0,0 +1,33 @@
+# AbKbdGroup — AI Reference
+
+Visual grouping container for multiple `AbKbd` chips — typically used to render keyboard chords / shortcuts.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <ab-kbd-group>
+    <ab-kbd>Ctrl</ab-kbd>
+    <ab-kbd>Alt</ab-kbd>
+    <ab-kbd>Del</ab-kbd>
+  </ab-kbd-group>
+</template>
+```
+
+## Props
+
+No declared props.
+
+## Events
+
+None.
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | One or more `AbKbd` children. |

package/.ai/ai_ref_AbModal.md

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