@appsbd/vue3-appsbd-ui 1.0.23 → 1.0.24

package/.ai/ai_ref_AbDropdownMenu.md

@@ -0,0 +1,89 @@
+# AbDropdownMenu — AI Reference
+
+A standalone dropdown **menu** (teleported to `body`). It has **no trigger of its own**: it attaches to whatever opens it — `AbButton`, `AbActionButton`, an icon, an avatar, any element. Build the menu from an `items` array (each item can have its own `onClick` and/or be reported via the `select` event) or put custom content in the default slot. Width: fixed via `width`, otherwise at least as wide as the element it is attached to (`matchWidth`) and never narrower than `minWidth`.
+
+## Installation
+
+Not globally registered — import explicitly.
+
+```js
+import { AbDropdownMenu } from "vue3-appsbd-ui";
+```
+
+## Usage
+
+Open it from the trigger through a template ref (`toggle($event)` anchors the menu to the clicked element):
+
+```vue
+<template>
+  <ab-button color="primary" @click="menu.toggle($event)">Actions</ab-button>
+  <ab-action-button action="edit" @action="(a, e) => menu.toggle(e)" />
+  <ab-dropdown-menu ref="menu" :items="items" @select="handle" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+const menu = ref(null);
+const items = [
+  { label: "Edit", value: "edit", icon: Pencil },
+  { divider: true },
+  { label: "Delete", value: "delete", icon: Trash2, color: "danger", onClick: () => remove() },
+];
+</script>
+```
+
+`v-model` + `target` (element, component instance or CSS selector):
+
+```vue
+<ab-button id="more-btn" @click="open = !open">More</ab-button>
+<ab-dropdown-menu v-model="open" target="#more-btn" :items="items" />
+```
+
+Slot mode:
+
+```vue
+<ab-dropdown-menu ref="menu" :width="240">
+  <template #default="{ close }">
+    <div class="apbd-dropdown-header">Account</div>
+    <button type="button" class="apbd-dropdown-item" @click="profile(); close()">Profile</button>
+    <div class="apbd-dropdown-divider"></div>
+    <button type="button" class="apbd-dropdown-item apbd-dropdown-item-danger" @click="logout(); close()">Log out</button>
+  </template>
+</ab-dropdown-menu>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `Boolean` | `false` | `v-model` open state. |
+| `target` | `Object \| String` | `null` | Element, component instance or CSS selector to attach to. Optional if `toggle($event)` / `show(el)` is used. |
+| `items` | `Array` | `[]` | `{ label, value?, icon?, color?, disabled?, show?, onClick?(item, event) }`, `{ divider: true }` or `{ header: "Text" }`. `color` is a Bootstrap theme color name. `show: false` hides an item. Ignored when the default slot is used. |
+| `placement` | `String` | `"bottom-start"` | `bottom-end`, `top-start`, …; flips when out of room. |
+| `offset` | `Number \| String` | `4` | Gap (px) between the element and the menu. |
+| `width` | `Number \| String` | `null` | Fixed width (number = px). When unset, `minWidth` / `matchWidth` apply. |
+| `minWidth` | `Number \| String` | `160` | Minimum width when `width` is unset. |
+| `matchWidth` | `Boolean` | `true` | Menu at least as wide as the element it is attached to (ignored when `width` is set). |
+| `closeOnSelect` | `Boolean` | `true` | Close after an `items` entry is clicked. |
+| `closeOnClickOutside` | `Boolean` | `true` | Close on a click outside the menu and its anchor. `Esc` always closes. |
+| `contentClass` | `String` | `""` | Extra class on the menu element. |
+| `bordered` | `Boolean` | `false` | Separator line under every item except the last, edge to edge. |
+| `static` | `Boolean` | `false` | Render the menu inline where it is placed, always visible, instead of a popup (docs, sidebars, panels). |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `Boolean` | Open state changed. |
+| `select` | `(value, item, event)` | `items` entry clicked; `value` = `item.value ?? item.label`. The item's `onClick` also runs. |
+| `show` / `hide` | — | Menu opened / closed. |
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `default` | `{ close }` | Custom menu content, replaces `items`. Style with `.apbd-dropdown-item` (+ `-danger` etc.), `.apbd-dropdown-divider`, `.apbd-dropdown-header`. |
+
+## Exposed
+
+`show(elementOrEvent?)`, `hide()`, `toggle(elementOrEvent?)` — the argument is the element to attach to (an element, component instance, selector or a DOM event, whose `currentTarget` is used).

package/.ai/ai_ref_AbMultiSelect.md

@@ -32,7 +32,7 @@ Searchable single/multi/tag select. Custom built-in replacement for `@vueform/mu
 | `maxWidth` | `String \| Number` | `undefined` | `max-width` on the wrapper `<div>` (same number/string rules as `width`, same `min(<value>, 100%)` clamp) — caps growth inside a flex/grid parent without a fixed `width`. |
 | `hints` | `String` | `""` | Helper text. |
 | `multiple` | `Boolean` | `false` | Deprecated — use `mode` instead. |
-| `searchable` | `Boolean` | `false` | Enable option search/filter. |
+| `searchable` | `Boolean` | `false` | Enable option search/filter (single mode; `tags`/`multiple` always have a search input). Filters `options` locally by label (case-insensitive) unless `isAjaxSearch` is set. Focusing the input does not open the dropdown — it opens on click, typing, `ArrowDown` or `Enter`. |
 | `mode` | `String` | `"single"` | `single`, `multiple`, or `tags`. |
 | `size` | `String` | `undefined` | Adjusts component size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
 | `options` | `Array` | `[]` | Available options. |

package/AI_REFERENCE.md

@@ -47,6 +47,7 @@
 | `AbSlider`                     |  —  | Single or range numeric slider.                                                                                        | [.ai/ai_ref_AbSlider.md](./.ai/ai_ref_AbSlider.md)                     |
 | `AbColorPicker`                |  —  | Radio-style color swatch picker.                                                                                       | [.ai/ai_ref_AbColorPicker.md](./.ai/ai_ref_AbColorPicker.md)           |
 | `AbColorChooser`               |  —  | Round color swatch that opens a color-picking popover (saturation area, hue/opacity sliders, hex input, eyedropper, contrast ratio, preset swatches). `v-model` is a hex string. | [.ai/ai_ref_AbColorChooser.md](./.ai/ai_ref_AbColorChooser.md)         |
+| `AbDropdownMenu`               |  —  | Standalone dropdown menu (no trigger) that attaches to any button/element via `menu.toggle($event)`, `v-model` + `target` — `items` array (per-item `onClick` + `select`) or default slot; fixed `width`, else matches the element width with a `minWidth`. | [.ai/ai_ref_AbDropdownMenu.md](./.ai/ai_ref_AbDropdownMenu.md)         |
 | `AbFileUploader`               |  —  | File upload field with size validation; image mode (default, preview) or file mode (`allowedTypes` + extension icons); `variant="dropzone"` for a large icon/title/description/button card with drag & drop. | [.ai/ai_ref_AbFileUploader.md](./.ai/ai_ref_AbFileUploader.md)         |
 | `AbFilterPanel`                |  —  | Advanced filter panel with search and scan modes.                                                                      | [.ai/ai_ref_AbFilterPanel.md](./.ai/ai_ref_AbFilterPanel.md)           |
 | `AbSettingsForm`               |  —  | Settings-style form that auto-registers as a wizard step validator.                                                    | [.ai/ai_ref_AbSettingsForm.md](./.ai/ai_ref_AbSettingsForm.md)         |

package/CHANGELOG.md

@@ -2,7 +2,16 @@
 
 All notable changes to `@appsbd/vue3-appsbd-ui` are documented here. Format loosely follows [Keep a Changelog](https://keepachangelog.com/).
 
-## [1.0.23] - Unreleased
+## [1.0.24] - Unreleased
+
+- **Added**: `AbDropdownMenu` component — a standalone dropdown menu (no trigger of its own) that attaches to whatever opens it: an `AbButton`, `AbActionButton`, an icon, an avatar, any element. Open it from the trigger with `menu.toggle($event)` / `menu.show(elementOrEvent)` / `menu.hide()` (template ref), with `v-model` plus a `target` (element, component instance or CSS selector). Build the menu from an `items` array (`{ label, value?, icon?, color?, disabled?, show?, onClick? }`, `{ divider: true }`, `{ header }`; reported through `select` and/or each item's `onClick`) or put anything in the default slot (`{ close }`; style with `.apbd-dropdown-item` / `-divider` / `-header`). Width: fixed with `width`, otherwise at least as wide as the element it is attached to (`matchWidth`, default `true`) and never narrower than `minWidth` (default `160`). Closes on item click (`closeOnSelect`), outside click (`closeOnClickOutside`) and `Esc`. Also `placement` (default `"bottom-start"`), `offset`, `contentClass`, `bordered` (a separator line under every item except the last), and `static` (render the menu inline, always visible, instead of a popup). See `.ai/ai_ref_AbDropdownMenu.md`.
+- **Fixed**: `AbMultiSelect` — focusing the search input (Tab key, a label, or code such as modal autofocus) no longer opens the dropdown by itself. Previously the next click on the field hit the open/close toggle and closed it, so the dropdown looked like it would not open. It now opens on click, typing, `ArrowDown` or `Enter`, like the rest of the keyboard handling. See `.ai/ai_ref_AbMultiSelect.md`.
+- **Fixed**: `AbMultiSelect` `mode="tags"` / `"multiple"` — picking an option closed the dropdown (the picked option is removed from the list by `hideSelected`, and the outside-click check then treated the click as outside). The dropdown now stays open so several options can be picked in a row.
+- **Docs**: playground pages — every example now has its live preview and its exact full code (`<script setup>` + `<template>`) together. `AbSidebar` gets a dedicated live "Submenus" section (and `popoverTrigger` in its API table) with Installation/Usage right under the first preview; `AbConfirmPopover`, `AbFormCheck` (Card Width, Custom Check Icon, Pill Variant), `AbTabs` (one code block per variant), `AbCustomField`, `AbProgressbar`, `AbToggle`, `AbBottomNav`, `useResponsive`, `AbModal` and `AbWizard` got the missing live previews / code blocks; code samples that contain `{{ }}` no longer get evaluated by Vue.
+- **Docs**: `AbMainLayout` playground page — new "Body Header & Footer" (`#bodyHeader` / `#bodyFooter`), "Elevated Variation" (`variation="elevated"` without `gradient`) and "Bottom Navigation" (`bottom-nav` + `#bottomNav`) examples.
+- **Docs**: `AbMultiSelect` playground page — new "Searchable" section showing local (non-ajax) search in `single`, `tags` and `multiple` modes.
+
+## [1.0.23] - 2026-10-20
 
 - **Fixed**: `AbCard` — `bgColorVariant` / `borderBottomVariant` default `""` failed their own validators, so every card that didn't set them logged `[Vue warn]: Invalid prop: custom validator check failed`. The validators now accept `""`.
 - **Fixed**: `AbInputField` — `update:modelValue` on input sent the whole `InputEvent` instead of the field's value (the `input` event already sent the value). It now sends `event.target.value`.