npm i @velkin/react
import { VuPopover } from "@velkin/react/popover";| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | Whether the popover is open. |
| anchor | VuPopoverAnchor | — | Anchor selector, element, or ref object. |
| anchorScope | VuPopoverAnchorScope | "document" | `document` or shadow `root` lookup for selectors. |
| anchorEl | null | HTMLElement | — | Direct anchor element (JS only). |
| placement | VuPopoverPlacement | "auto" | Preferred placement before flip. |
| align | VuPopoverAlign | "start" | Alignment along the anchor edge. |
| gap | number | 6 | Gap between anchor and surface in px. |
| padding | number | 8 | Viewport edge inset for flip/clamp math in px. |
| matchAnchorWidth | boolean | false | Matches surface width to the anchor. |
| maxWidthToViewport | boolean | true | Caps surface width to the viewport. |
| maxWidthMode | VuPopoverMaxWidthMode | "cap" | Max-width application strategy. |
| flip | boolean | true | Enables placement flipping. |
| flipOrder | VuPopoverFlipSide[] | [] | Preferred flip order. |
| preset | VuPopoverPreset | "scale" | Open/close animation preset. |
| duration | number | 220 | Open animation duration in ms. |
| closeDuration | number | 180 | Close animation duration in ms. |
| animateReposition | boolean | true | Animates position updates while open. |
| repositionMs | number | 160 | Reposition animation duration in ms. |
| closeOnEscape | boolean | true | Closes on Escape. |
| closeOnOutside | boolean | true | Closes on outside pointer down. |
| restoreFocusOnClose | boolean | true | Restores focus to the prior active element. |
| ignoreOutsideSelector | string | "" | Selector for elements that ignore outside dismiss. |
| ignoreOutsideAttr | string | "data-popover-ignore-outside" | Attribute marking ignore zones for outside dismiss. |
| groupEventName | string | — | Optional coordinated group event channel. |
| groupId | unknown | — | Optional group identifier for coordinated open/close. |
| Event | Detail | Description |
|---|---|---|
| vu-open | CustomEvent<void> | When the popover begins opening. |
| vu-close | CustomEvent<void> | When the popover begins closing. |
| vu-open-change | VuPopoverOpenChangeDetail | When `open` changes. |
| Slot | Description |
|---|---|
| — | - Popover body (light DOM for host styling compatibility). |
| Part | Description |
|---|---|
| base | Host is the positioned `popover="manual"` surface. |
| Method | Description |
|---|---|
| show | - Sets `open` to true. |
| hide | - Sets `open` to false. |
| toggle | - Toggles `open`. |
| reconnectTarget | - Re-resolves the anchor and syncs controller state. |
| Name | Definition |
|---|---|
| HTMLElement | null | |
| VuPopoverAlign | |
| VuPopoverAnchor | |
| VuPopoverAnchorScope | |
| VuPopoverMaxWidthMode | |
| VuPopoverOpenChangeDetail | |
| VuPopoverPlacement | |
| VuPopoverPreset | |