[{"data":1,"prerenderedAt":325},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fmenu":3,"component-meta:UiMenu":195},{"id":4,"title":5,"body":6,"component":180,"dependsOn":181,"description":183,"emitDescriptions":184,"extension":186,"meta":187,"navigation":188,"order":189,"path":190,"seo":191,"status":192,"stem":193,"__hash__":194},"docs\u002Fdocs\u002Fcomponents\u002Fmenu.md","Menu",{"type":7,"value":8,"toc":170},"minimark",[9,26,31,36,40,43,47,50,61,65,76,79,83,105,116,119,129,133,140,148,159],[10,11,12,13,17,18,21,22,25],"p",{},"Меню телепортується в ",[14,15,16],"code",{},"body",", а не рендериться в потоці. Це не оптимізація:\nвсередині контейнера з ",[14,19,20],{},"overflow: hidden"," або ",[14,23,24],{},"overflow-x: auto"," — а це будь-яка\nтаблиця — випадайка в потоці була б обрізана краєм контейнера.",[27,28,30],"h2",{"id":29},"приклад","Приклад",[32,33],"component-preview",{"name":34,"stage":35},"menu-basic","min-h-40",[27,37,39],{"id":38},"api","API",[41,42],"component-api",{},[27,44,46],{"id":45},"коли-використовувати","Коли використовувати",[10,48,49],{},"Для набору дій над однією сутністю, які не варті окремих кнопок: перейменувати,\nдублювати, експортувати, видалити.",[10,51,52,53,56,57,60],{},"Тригер малюєте самі через слот — компонент не нав'язує вигляду кнопки.\nПередайте ",[14,54,55],{},"triggerAttrs"," реальній кнопці через ",[14,58,59],{},"v-bind",", щоб ARIA-стан\nналежав фокусованому елементу, а не wrapper-у.",[27,62,64],{"id":63},"коли-не-використовувати","Коли НЕ використовувати",[10,66,67,68,71,72,75],{},"Не робіть меню з вибором значення. Для цього є ",[14,69,70],{},"UiSelect"," — він має\n",[14,73,74],{},"role=\"combobox\"",", працює з клавіатури і повідомляє обране значення.",[10,77,78],{},"Не ховайте в меню головну дію екрана. Те, що потрібно всім, має бути кнопкою.",[27,80,82],{"id":81},"доступність","Доступність",[10,84,85,86,89,90,93,94,96,97,100,101,104],{},"Тригер отримує ",[14,87,88],{},"aria-haspopup"," і ",[14,91,92],{},"aria-expanded"," через ",[14,95,55],{},",\nпанель — ",[14,98,99],{},"role=\"menu\"",".\nПунктам додавайте ",[14,102,103],{},"role=\"menuitem\""," самі: компонент не знає, чим ви їх\nнаповните.",[10,106,107,108,111,112,115],{},"Стрілки, Home та End переміщують фокус між пунктами. Для складеного вмісту\nна кшталт налаштувань таблиці використовуйте ",[14,109,110],{},"panelRole=\"dialog\""," і\n",[14,113,114],{},"ariaLabel",", а не прикидайте форму меню-командою.",[10,117,118],{},"Після закриття фокус повертається на тригер. Без цього Tab починав би обхід з\nпочатку сторінки, і користувач втрачав би місце.",[10,120,121,124,125,128],{},[14,122,123],{},"Escape"," викликає ",[14,126,127],{},"stopPropagation"," — інакше той самий натиск закрив би ще й\nмодалку, у якій меню стоїть.",[27,130,132],{"id":131},"деталі-реалізації","Деталі реалізації",[10,134,135,136,139],{},"Позиція рахується власним кодом, без ",[14,137,138],{},"@floating-ui"," — компонент має\nкопіюватись у чужий проєкт без нової залежності.",[10,141,142,143,147],{},"Вимірювання відбувається ",[144,145,146],"strong",{},"двічі",": перший раз із запасними габаритами (панелі\nще немає в DOM), другий — коли вона їх отримала. Без другого проходу вибір\nнапрямку відкриття інколи помилявся.",[10,149,150,151,154,155,158],{},"Слухач прокрутки навішено з ",[14,152,153],{},"capture: true",". Подія ",[14,156,157],{},"scroll"," не спливає, тож без\nцього відкрита панель лишалася б висіти на місці, поки контейнер під нею\nвід'їжджає.",[10,160,161,162,165,166,169],{},"Базовий ",[14,163,164],{},"z-index"," панелі — ",[14,167,168],{},"1100","; усередині глибоко вкладеного оверлея він\nавтоматично піднімається над шаром найближчого Modal або Drawer.",{"title":171,"searchDepth":172,"depth":172,"links":173},"",2,[174,175,176,177,178,179],{"id":29,"depth":172,"text":30},{"id":38,"depth":172,"text":39},{"id":45,"depth":172,"text":46},{"id":63,"depth":172,"text":64},{"id":81,"depth":172,"text":82},{"id":131,"depth":172,"text":132},"UiMenu",[182],"app\u002Futils\u002FoverlayPosition.ts","Випадне меню, телепортоване в body, з фліпом і притисканням до вікна.",{"update:open":185},"Меню відкрито або закрито.","md",{},true,18,"\u002Fdocs\u002Fcomponents\u002Fmenu",{"title":5,"description":183},"stable","docs\u002Fcomponents\u002Fmenu","SCzDsCP2LJRDi9WIlyRvNkj8s5PrZTjCRfpAdAUCwk8",{"mode":196,"prefetch":197,"preload":197,"filePath":198,"declarationPath":199,"pascalName":180,"kebabName":200,"chunkName":201,"priority":202,"_scanned":188,"meta":203},"all",false,"app\u002Fcomponents\u002Fui\u002FUiMenu.vue","C:\u002Fproject-DS\u002FtatetUI\u002Fapp\u002Fcomponents\u002Fui\u002FUiMenu.vue","ui-menu","components\u002Fui-menu",1,{"type":202,"props":204,"slots":245,"events":299,"exposed":308,"hash":324},[205,218,228,233,237],{"name":206,"global":197,"default":207,"description":208,"tags":209,"required":197,"type":210,"schema":211},"placement","\"bottom-end\"","Куди відкривати відносно тригера. Автоматично фліпається, якщо не влазить.",[],"\"bottom-end\" | \"bottom-start\" | \"bottom\" | \"top\" | \"right\"",{"kind":212,"type":210,"schema":213},"enum",{"0":207,"1":214,"2":215,"3":216,"4":217},"\"bottom-start\"","\"bottom\"","\"top\"","\"right\"",{"name":219,"global":197,"default":220,"description":221,"tags":222,"required":197,"type":223,"schema":224},"panelRole","\"menu\"","Семантика панелі: menu для команд, dialog для складених контролів.",[],"\"menu\" | \"dialog\" | \"none\"",{"kind":212,"type":223,"schema":225},{"0":220,"1":226,"2":227},"\"dialog\"","\"none\"",{"name":114,"global":197,"default":229,"description":230,"tags":231,"required":197,"type":232,"schema":232},"undefined","Доступна назва панелі, особливо для `panelRole=\"dialog\"`.",[],"string",{"name":234,"global":197,"description":235,"tags":236,"required":197,"type":232,"schema":232},"width","Ширина панелі, напр. `\"14rem\"`. Без неї — за вмістом.",[],{"name":238,"global":197,"description":171,"tags":239,"required":197,"type":240,"schema":241},"disabled",[],"boolean",{"kind":212,"type":240,"schema":242},{"0":243,"1":244},"false","true",[246,285],{"name":247,"type":248,"description":249,"tags":250,"schema":251},"trigger","{ toggle: () => void; isOpen: boolean; triggerAttrs: { 'aria-haspopup': \"menu\" | \"dialog\"; 'aria-expanded': boolean; 'aria-controls': string; 'aria-disabled': \"true\"; }; }","Тригер. `triggerAttrs` потрібно передати реальній кнопці через `v-bind`.",[],{"kind":252,"type":248,"schema":253},"object",{"toggle":254,"isOpen":261,"triggerAttrs":266},{"name":255,"global":197,"description":171,"tags":256,"required":188,"type":257,"schema":258},"toggle",[],"() => void",{"kind":259,"type":260},"event","(): void",{"name":262,"global":197,"description":171,"tags":263,"required":188,"type":240,"schema":264},"isOpen",[],{"kind":212,"type":240,"schema":265},{"0":243,"1":244},{"name":55,"global":197,"description":171,"tags":267,"required":188,"type":268,"schema":269},[],"{ 'aria-haspopup': \"menu\" | \"dialog\"; 'aria-expanded': boolean; 'aria-controls': string; 'aria-disabled': \"true\"; }",{"kind":252,"type":268,"schema":270},{"aria-haspopup":271,"aria-expanded":276,"aria-controls":278,"aria-disabled":281},{"name":88,"global":197,"description":171,"tags":272,"required":188,"type":273,"schema":274},[],"\"menu\" | \"dialog\"",{"kind":212,"type":273,"schema":275},{"0":220,"1":226},{"name":92,"global":197,"description":171,"tags":277,"required":188,"type":240,"schema":240},[],{"name":279,"global":197,"description":171,"tags":280,"required":188,"type":232,"schema":232},"aria-controls",[],{"name":282,"global":197,"description":171,"tags":283,"required":188,"type":284,"schema":284},"aria-disabled",[],"\"true\"",{"name":286,"type":287,"description":288,"tags":289,"schema":290},"content","{ toggle: () => void; isOpen: boolean; }","Вміст панелі. `toggle` дає змогу закрити меню з пункту.",[],{"kind":252,"type":287,"schema":291},{"toggle":292,"isOpen":295},{"name":255,"global":197,"description":171,"tags":293,"required":188,"type":257,"schema":294},[],{"kind":259,"type":260},{"name":262,"global":197,"description":171,"tags":296,"required":188,"type":240,"schema":297},[],{"kind":212,"type":240,"schema":298},{"0":243,"1":244},[300],{"name":301,"description":171,"tags":302,"type":303,"signature":304,"schema":305},"update:open",[],"[value: boolean]","(event: \"update:open\", value: boolean): void",[306],{"kind":212,"type":240,"schema":307},[243,244],[309,316],{"name":310,"type":311,"description":312,"tags":313,"schema":314},"open","() => Promise\u003Cvoid>","Відкрити меню програмно.",[],{"kind":259,"type":315},"(): Promise\u003Cvoid>",{"name":317,"type":318,"description":319,"tags":320,"schema":321},"close","(restoreFocus?: boolean) => void","Закрити меню програмно.",[],{"kind":259,"type":322,"schema":323},"(restoreFocus?: boolean): void",{},"gykrvbnivjd1JRWSLBQSXm6uRAacPM3pRt0W75EH2ks",1788072639722]