[{"data":1,"prerenderedAt":304},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fmodal":3,"component-meta:UiModal":200},{"id":4,"title":5,"body":6,"component":162,"dependsOn":181,"description":186,"emitDescriptions":187,"extension":191,"meta":192,"navigation":193,"order":194,"path":195,"seo":196,"status":197,"stem":198,"__hash__":199},"docs\u002Fdocs\u002Fcomponents\u002Fmodal.md","Modal",{"type":7,"value":8,"toc":170},"minimark",[9,18,23,28,32,35,38,42,45,49,52,59,63,66,85,89,112,130,143,153,157],[10,11,12,13,17],"p",{},"Знизу до ",[14,15,16],"code",{},"sm"," вікно — bottom sheet, вище — центрований діалог. Це не декор:\nцентроване вікно на телефоні з піднятою клавіатурою просто не вміщається.",[19,20,22],"h2",{"id":21},"приклад","Приклад",[24,25],"component-preview",{"name":26,"stage":27},"modal-basic","min-h-24",[19,29,31],{"id":30},"вкладені-оверлеї","Вкладені оверлеї",[10,33,34],{},"Усі оверлеї бібліотеки ділять один стек шарів. Відкрийте другий рівень і\nнатисніть Escape — закриється лише верхній.",[24,36],{"name":37,"stage":27},"modal-nested",[19,39,41],{"id":40},"api","API",[43,44],"component-api",{},[19,46,48],{"id":47},"коли-використовувати","Коли використовувати",[10,50,51],{},"Для короткої взаємодії, яка має перервати основний потік: підтвердження,\nкомпактна форма, перегляд деталі.",[10,53,54,55,58],{},"Якщо форма велика або користувач має звірятися зі сторінкою під нею —\nберіть ",[14,56,57],{},"UiDrawer",".",[19,60,62],{"id":61},"коли-не-використовувати","Коли НЕ використовувати",[10,64,65],{},"Не кладіть у модалку багатокрокові майстри. Заблокована прокрутка фону плюс\nобмежена висота панелі роблять довгий вміст незручним саме там, де його\nнайбільше.",[10,67,68,69,72,73,77,78,81,82,58],{},"Не ставте ",[14,70,71],{},":closable=\"false\"",", доки у вікні немає власного шляху виходу.\nЦей прапорець вимикає ",[74,75,76],"strong",{},"всі"," способи закриття одразу: і хрестик, і Escape,\nі клік по фону. Разом із пасткою фокуса, яка робить решту сторінки ",[14,79,80],{},"inert",",\nвікно стає глухим кутом — вийти можна хіба перезавантаженням вкладки. Саме\nтак свого часу поводився пошук по цій документації. Якщо закриття справді\nмає бути лише явним, лишіть у вікні власну кнопку, яка змінює ",[14,83,84],{},"v-model",[19,86,88],{"id":87},"доступність","Доступність",[10,90,91,92,95,96,99,100,103,104,107,108,111],{},"Панель має ",[14,93,94],{},"role=\"dialog\"",", ",[14,97,98],{},"aria-modal=\"true\""," і назву — з ",[14,101,102],{},"title"," через\n",[14,105,106],{},"aria-labelledby"," або з ",[14,109,110],{},"aria-label",", якщо заголовок замінено слотом.",[10,113,114,115,118,119,122,123,125,126,129],{},"Коли слот ",[14,116,117],{},"header"," містить не заголовок, а керування — поле пошуку,\nперемикач — назву треба задати props ",[14,120,121],{},"ariaLabel"," явно. Інакше\n",[14,124,106],{}," вказує на контейнер слота, і назву вікна браузер\nобчислює зі ",[74,127,128],{},"значення"," поля: діалог оголошувався як «Діалог: тек», щойно\nкористувач набирав «текст».",[10,131,132,133,136,137,139,140,58],{},"Фокус утримується всередині панелі, а при закритті повертається на елемент,\nз якого вікно відкрили. Решта прямих дітей ",[14,134,135],{},"\u003Cbody>"," на час відкриття\nпозначаються ",[14,138,80],{}," і ",[14,141,142],{},"aria-hidden",[10,144,145,146,149,150,58],{},"Типово фокус отримує ",[74,147,148],{},"сама панель, а не перший інпут",": на мобільних\nавтофокус в інпуті одразу піднімає клавіатуру і з'їдає пів екрана. Якщо\nпотрібно інакше — задайте ",[14,151,152],{},"initialFocus",[19,154,156],{"id":155},"портування","Портування",[10,158,159,160,163,164,139,166,169],{},"Компонент не працює сам по собі: йому потрібні чотири композабли зі списку\nзалежностей вище. Разом вони становлять overlay-ядро, спільне для ",[14,161,162],{},"UiModal",",\n",[14,165,57],{},[14,167,168],{},"UiConfirmDialog"," — копіюйте їх один раз на проєкт.",{"title":171,"searchDepth":172,"depth":172,"links":173},"",2,[174,175,176,177,178,179,180],{"id":21,"depth":172,"text":22},{"id":30,"depth":172,"text":31},{"id":40,"depth":172,"text":41},{"id":47,"depth":172,"text":48},{"id":61,"depth":172,"text":62},{"id":87,"depth":172,"text":88},{"id":155,"depth":172,"text":156},[182,183,184,185],"app\u002Fcomposables\u002FuseOverlayStack.ts","app\u002Fcomposables\u002FuseScrollLock.ts","app\u002Fcomposables\u002FuseFocusTrap.ts","app\u002Fcomposables\u002FuseReducedMotion.ts","Модальне вікно зі стеком шарів, пасткою фокуса й блокуванням прокрутки.",{"update:modelValue":188,"close":189},"Зміна стану відкриття. Використовуйте через `v-model`.",{"Вікно закрито — будь-яким способом":190},"хрестиком, Escape або кліком по фону.","md",{},true,1,"\u002Fdocs\u002Fcomponents\u002Fmodal",{"title":5,"description":186},"stable","docs\u002Fcomponents\u002Fmodal","9eZRbDBZzFPFx90C5obrYHRLJD5TTw6ZVgIm1YX-h10",{"mode":201,"prefetch":202,"preload":202,"filePath":203,"declarationPath":204,"pascalName":162,"kebabName":205,"chunkName":206,"priority":194,"_scanned":193,"meta":207},"all",false,"app\u002Fcomponents\u002Fui\u002FUiModal.vue","C:\u002Fproject-DS\u002FtatetUI\u002Fapp\u002Fcomponents\u002Fui\u002FUiModal.vue","ui-modal","components\u002Fui-modal",{"type":194,"props":208,"slots":274,"events":287,"exposed":302,"hash":303},[209,214,227,231,235,238,241,250,256,262,268],{"name":102,"global":202,"default":210,"description":211,"tags":212,"required":202,"type":213,"schema":213},"\"\"","Заголовок. Ігнорується, якщо задано слот `header`.",[],"string",{"name":215,"global":202,"default":216,"description":217,"tags":218,"required":202,"type":219,"schema":220},"size","\"lg\"","Ширина панелі.",[],"\"lg\" | \"sm\" | \"md\" | \"xl\" | \"full\"",{"kind":221,"type":219,"schema":222},"enum",{"0":216,"1":223,"2":224,"3":225,"4":226},"\"sm\"","\"md\"","\"xl\"","\"full\"",{"name":228,"global":202,"default":210,"description":229,"tags":230,"required":202,"type":213,"schema":213},"panelClass","Додаткові класи панелі — коли готових розмірів не вистачає.",[],{"name":232,"global":202,"description":233,"tags":234,"required":202,"type":213,"schema":213},"modalId","Стабільний id шару в стеку оверлеїв. Задавати не обов'язково:\r\nбез нього генерується автоматично.",[],{"name":152,"global":202,"description":236,"tags":237,"required":202,"type":213,"schema":213},"CSS-селектор усередині панелі, якому віддати фокус при відкритті.\r\n\r\nТипово фокус отримує сама панель, а НЕ перший інпут: на мобільних\r\nавтофокус в інпуті одразу піднімає клавіатуру і з'їдає пів екрана.",[],{"name":121,"global":202,"description":239,"tags":240,"required":202,"type":213,"schema":213},"Доступне ім'я діалогу, коли слот `header` не є заголовком.\r\n\r\nБез нього aria-labelledby вказує на контейнер слота, і якщо там\r\nлежить поле вводу — ім'я вікна обчислюється з його ЗНАЧЕННЯ. Діалог\r\nпошуку оголошувався як «Діалог: тек» на слові «текст».",[],{"name":242,"global":202,"default":243,"description":244,"tags":245,"required":202,"type":246,"schema":247},"modelValue","false","Відкрито. Використовуйте через `v-model`.",[],"boolean",{"kind":221,"type":246,"schema":248},{"0":243,"1":249},"true",{"name":251,"global":202,"default":249,"description":252,"tags":253,"required":202,"type":246,"schema":254},"closable","Показувати хрестик і дозволяти закриття через Escape.",[],{"kind":221,"type":246,"schema":255},{"0":243,"1":249},{"name":257,"global":202,"default":249,"description":258,"tags":259,"required":202,"type":246,"schema":260},"closeOnBackdrop","Клік по затемненому фону закриває вікно.\r\n\r\nТипово `true` — на відміну від UiDrawer, де типово `false`.\r\nМодалка зазвичай інформаційна, і випадкове закриття нічого не коштує;\r\ndrawer майже завжди містить форму, де це втрата введеного.",[],{"kind":221,"type":246,"schema":261},{"0":243,"1":249},{"name":263,"global":202,"default":243,"description":264,"tags":265,"required":202,"type":246,"schema":266},"persistent","Ні Escape, ні клік по фону не закривають — лише явна дія.",[],{"kind":221,"type":246,"schema":267},{"0":243,"1":249},{"name":269,"global":202,"default":243,"description":270,"tags":271,"required":202,"type":246,"schema":272},"noPadding","Прибрати внутрішні відступи вмісту.",[],{"kind":221,"type":246,"schema":273},{"0":243,"1":249},[275,280,283],{"name":276,"type":277,"description":278,"tags":279,"schema":277},"default","any","Вміст вікна.",[],{"name":117,"type":277,"description":281,"tags":282,"schema":277},"Замінює заголовок цілком. Тоді `title` не використовується.",[],{"name":284,"type":277,"description":285,"tags":286,"schema":277},"footer","Кнопки дій. Футер не рендериться, якщо слот порожній.",[],[288,296],{"name":289,"description":171,"tags":290,"type":291,"signature":292,"schema":293},"update:modelValue",[],"[value: boolean]","(event: \"update:modelValue\", value: boolean): void",[294],{"kind":221,"type":246,"schema":295},[243,249],{"name":297,"description":171,"tags":298,"type":299,"signature":300,"schema":301},"close",[],"[]","(event: \"close\"): void",[],[],"laXe2QXJ5uGPU4Xj86LDqqTR8R2U2mTD5vH0zPg-XTc",1788072639723]