UxPopover
components/ux/Popover.vue
Trigger + anchored panel primitive on Headless UI Popover — toggle, Escape, click-outside, and focus return owned by Headless; chrome and alignment owned here. The root is inline-flex so that as a flex item (a FilterTriggerBar segment) the trigger stretches to the row; the focus ring is inset so a clipped host still shows it. Prototyped in c93, extracted in c95.
picked: —
Scenarios
components/ux/Popover.vue
Usage
<UxPopover
align = "right"
side = "below"
:wide = "false"
>
Content here
</UxPopover>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| align | String | 'right' | Which edge of the trigger the panel hangs from: 'left' or 'right' |
| side | String | 'below' | 'below' or 'above' — above keeps the content beneath the trigger uncovered |
| wide | Boolean | false | w-80 instead of w-64 — for panels with a secondary column of text |
Slots
| Slot | Description |
|---|---|
| trigger | Trigger content, rendered inside the Headless PopoverButton; scope { open } |
| default | Panel content; scope { close } to dismiss programmatically |