Popover

SSR-безпечна немодальна панель біля trigger з фліпом, focus return і outside click.

API

Props

Назва	Тип	Типово	Опис
`placement`	bottom-startbottombottom-endtop-starttoptop-endleftright	`"bottom-start"`	Бажана позиція панелі. Якщо не вміщається — перевертається на протилежний бік і притискається до краю вікна.
`panelRole`	dialoggroupnone	`"dialog"`	Роль панелі. `dialog` — коли всередині є керування; `group` — для згрупованого вмісту без власної семантики вікна.
`initialFocus`	`string`	—	Селектор елемента, який отримує фокус після відкриття.
`ariaLabel`	`string`	—	Доступна назва панелі. Потрібна, коли всередині немає власного заголовка.
`width`	`string`	—	Ширина панелі, будь-яка CSS-величина. Без неї — за вмістом.
`modelValue`	`boolean`	`false`	Відкрито. Використовуйте через `v-model`.
`closeOnOutside`	`boolean`	`true`	Клік поза панеллю закриває її.
`closeOnEscape`	`boolean`	`true`	Escape закриває панель. Escape отримує лише ВЕРХНІЙ шар: відкритий селект чи підказка всередині панелі закриваються першими.
`disabled`	`boolean`	—	—

Події

Назва	Payload	Опис
`update:modelValue`	`[value: boolean]`	Панель відкрито або закрито.
`close`	`[]`	Панель закрилася.
`open`	`[]`	Панель відкрилася.

Слоти

Назва	Опис
`trigger`	Тригер. `triggerAttrs` — на реальну кнопку через `v-bind`: у них ARIA, клік і клавіші (ArrowDown і Tab ведуть у відкриту панель).
`default`	Вміст панелі. `close` закриває її й повертає фокус на тригер.

Доступно через ref

Назва	Тип	Опис
`open`	`(focusInside?: boolean) => void`	—
`close`	`(restoreFocus?: boolean) => void`	—
`toggle`	`(event?: Event) => void`	—

Коли використовувати

Для компактних фільтрів, налаштувань і довільних немодальних контролів біля кнопки. Слот trigger отримує triggerAttrs — передайте їх реальному фокусованому елементу.

Коли НЕ використовувати

Не використовуйте для критичного підтвердження або довгої форми — беріть UiModal чи UiDrawer. Для набору команд із menu-семантикою є UiMenu.

Відкриття з клавіатури (Enter, Space чи ArrowDown на тригері) переносить фокус у панель — на перший контроль або, якщо їх немає, на саму панель. Мишею фокус лишається на тригері, але Tab із нього все одно веде в панель. Панель телепортована в кінець body, тож без цього Tab перестрибував би відкритий вміст.

Tab з останнього контролу закриває панель і веде до елемента, що йде за тригером на сторінці; Shift+Tab із першого повертає на тригер.

Escape закриває панель і повертає фокус, якщо він був у ній чи на тригері. panelRole дозволяє обрати dialog, group або прибрати роль, а ariaLabel дає стабільну доступну назву.

Вкладені шари

Поповер зареєстрований у спільному стеку оверлеїв (useFloatingLayer), тож Escape отримує лише верхній шар: відкритий UiSelect чи підказка всередині панелі закриваються першими, а сам поповер — наступним натиском.

Клік «повз» не рахує нічого, що з'явилося після відкриття поповера: випадайку селекта всередині, вкладене меню, діалог поверх. Раніше вибір пункту в селекті всередині поповера закривав поповер ще до того, як значення встигало змінитися.

Teleport вимкнений на сервері й під час першого client render, тому гідратація має однакове дерево; перенесення в body відбувається після mount.