[{"data":1,"prerenderedAt":246},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fdrawer":3,"component-meta:UiDrawer":127},{"id":4,"title":5,"body":6,"component":109,"dependsOn":110,"description":115,"emitDescriptions":116,"extension":119,"meta":120,"navigation":121,"order":100,"path":122,"seo":123,"status":124,"stem":125,"__hash__":126},"docs\u002Fdocs\u002Fcomponents\u002Fdrawer.md","Drawer",{"type":7,"value":8,"toc":98},"minimark",[9,22,27,32,36,39,43,46,50,53,60,64,67,71,82,85,89],[10,11,12,13,17,18,21],"p",{},"Drawer ділить overlay-ядро з ",[14,15,16],"code",{},"UiModal",", але має протилежний типовий\n",[14,19,20],{},"closeOnBackdrop",". Це не непослідовність, а різне призначення: модалка\nзазвичай інформаційна, drawer майже завжди містить форму. Випадковий клік\nповз панель не має знищувати заповнене.",[23,24,26],"h2",{"id":25},"приклад","Приклад",[28,29],"component-preview",{"name":30,"stage":31},"drawer-basic","min-h-24",[23,33,35],{"id":34},"позиції","Позиції",[28,37],{"name":38,"stage":31},"drawer-positions",[23,40,42],{"id":41},"api","API",[44,45],"component-api",{},[23,47,49],{"id":48},"коли-використовувати","Коли використовувати",[10,51,52],{},"Для форм і панелей деталей, де користувач має бачити контекст під панеллю\nабо де вмісту забагато для модалки.",[10,54,55,56,59],{},"Нижня позиція (",[14,57,58],{},"position=\"bottom\"",") — природний вибір для мобільних дій:\nпанель ближче до великого пальця, ніж будь-що вгорі екрана.",[23,61,63],{"id":62},"коли-не-використовувати","Коли НЕ використовувати",[10,65,66],{},"Не робіть drawer заміною сторінки. Якщо на вміст треба дати посилання,\nповернутися до нього кнопкою «назад» або відкрити в новій вкладці — це\nсторінка, а не панель.",[23,68,70],{"id":69},"доступність","Доступність",[10,72,73,74,77,78,81],{},"Свайп працює лише знизу і лише коли ",[14,75,76],{},"closable",". Ручка та шапка мають\n",[14,79,80],{},"touch-none"," — без нього браузер забирає вертикальний жест собі як\nпрокрутку сторінки, і панель не рухається.",[10,83,84],{},"Закриття за свайпом спрацьовує або за пройденою чвертю висоти, або за\nрізким флінгом: короткий швидкий рух — теж однозначний намір закрити.",[23,86,88],{"id":87},"портування","Портування",[10,90,91,92,94,95,97],{},"Ті самі чотири композабли, що й для ",[14,93,16],{},". Якщо в проєкті вже є\n",[14,96,16],{},", копіювати їх удруге не потрібно.",{"title":99,"searchDepth":100,"depth":100,"links":101},"",2,[102,103,104,105,106,107,108],{"id":25,"depth":100,"text":26},{"id":34,"depth":100,"text":35},{"id":41,"depth":100,"text":42},{"id":48,"depth":100,"text":49},{"id":62,"depth":100,"text":63},{"id":69,"depth":100,"text":70},{"id":87,"depth":100,"text":88},"UiDrawer",[111,112,113,114],"app\u002Fcomposables\u002FuseOverlayStack.ts","app\u002Fcomposables\u002FuseScrollLock.ts","app\u002Fcomposables\u002FuseFocusTrap.ts","app\u002Fcomposables\u002FuseReducedMotion.ts","Бічна панель, що виїжджає з будь-якого краю, зі свайпом для закриття знизу.",{"update:modelValue":117,"close":118},"Зміна стану відкриття. Використовуйте через `v-model`.","Панель закрито — хрестиком, Escape, кліком по фону або свайпом.","md",{},true,"\u002Fdocs\u002Fcomponents\u002Fdrawer",{"title":5,"description":115},"stable","docs\u002Fcomponents\u002Fdrawer","Gbd1JgBYBEBPIQxihybjzRdMYmPSVcsevhooy-ZU7Ag",{"mode":128,"prefetch":129,"preload":129,"filePath":130,"declarationPath":131,"pascalName":109,"kebabName":132,"chunkName":133,"priority":134,"_scanned":121,"meta":135},"all",false,"app\u002Fcomponents\u002Fui\u002FUiDrawer.vue","C:\u002Fproject-DS\u002FtatetUI\u002Fapp\u002Fcomponents\u002Fui\u002FUiDrawer.vue","ui-drawer","components\u002Fui-drawer",1,{"type":134,"props":136,"slots":215,"events":229,"exposed":244,"hash":245},[137,143,155,170,174,178,187,192,198,203,209],{"name":138,"global":129,"default":139,"description":140,"tags":141,"required":129,"type":142,"schema":142},"title","\"\"","Заголовок. Ігнорується, якщо задано слот `header`.",[],"string",{"name":144,"global":129,"default":145,"description":146,"tags":147,"required":129,"type":148,"schema":149},"position","\"right\"","З якого краю виїжджає панель.",[],"\"right\" | \"left\" | \"top\" | \"bottom\"",{"kind":150,"type":148,"schema":151},"enum",{"0":145,"1":152,"2":153,"3":154},"\"left\"","\"top\"","\"bottom\"",{"name":156,"global":129,"default":157,"description":158,"tags":159,"required":129,"type":160,"schema":161},"size","\"lg\"","Розмір поперек напрямку: ширина для left\u002Fright, висота для top\u002Fbottom.",[],"\"lg\" | \"xs\" | \"sm\" | \"md\" | \"xl\" | \"2xl\" | \"full\" | \"auto\"",{"kind":150,"type":160,"schema":162},{"0":157,"1":163,"2":164,"3":165,"4":166,"5":167,"6":168,"7":169},"\"xs\"","\"sm\"","\"md\"","\"xl\"","\"2xl\"","\"full\"","\"auto\"",{"name":171,"global":129,"default":139,"description":172,"tags":173,"required":129,"type":142,"schema":142},"panelClass","Додаткові класи панелі. Якщо задано, замінює стандартний фон.",[],{"name":175,"global":129,"description":176,"tags":177,"required":129,"type":142,"schema":142},"initialFocus","CSS-селектор усередині панелі, якому віддати фокус при відкритті.\r\nТипово фокус отримує сама панель — щоб на мобільних не піднімалася\r\nклавіатура.",[],{"name":179,"global":129,"default":180,"description":181,"tags":182,"required":129,"type":183,"schema":184},"modelValue","false","Відкрито. Використовуйте через `v-model`.",[],"boolean",{"kind":150,"type":183,"schema":185},{"0":180,"1":186},"true",{"name":76,"global":129,"default":186,"description":188,"tags":189,"required":129,"type":183,"schema":190},"Показувати хрестик і дозволяти закриття через Escape.",[],{"kind":150,"type":183,"schema":191},{"0":180,"1":186},{"name":193,"global":129,"default":180,"description":194,"tags":195,"required":129,"type":183,"schema":196},"noPadding","Прибрати внутрішні відступи вмісту.",[],{"kind":150,"type":183,"schema":197},{"0":180,"1":186},{"name":20,"global":129,"default":180,"description":199,"tags":200,"required":129,"type":183,"schema":201},"Клік по затемненому фону закриває drawer.\r\n\r\nТипово ВИМКНЕНО — на відміну від UiModal. Drawer майже завжди\r\nмістить форму, і випадковий клік повз панель не має знищувати\r\nнезбережене введення.",[],{"kind":150,"type":183,"schema":202},{"0":180,"1":186},{"name":204,"global":129,"default":180,"description":205,"tags":206,"required":129,"type":183,"schema":207},"persistent","Ні Escape, ні клік по фону не закривають — лише явна дія.",[],{"kind":150,"type":183,"schema":208},{"0":180,"1":186},{"name":210,"global":129,"default":186,"description":211,"tags":212,"required":129,"type":183,"schema":213},"swipeToClose","Свайп вниз закриває нижній drawer. Вимикається, якщо заважає.",[],{"kind":150,"type":183,"schema":214},{"0":180,"1":186},[216,221,225],{"name":217,"type":218,"description":219,"tags":220,"schema":218},"default","any","Вміст панелі.",[],{"name":222,"type":218,"description":223,"tags":224,"schema":218},"header","Замінює заголовок цілком. Тоді `title` не використовується.",[],{"name":226,"type":218,"description":227,"tags":228,"schema":218},"footer","Кнопки дій. Футер не рендериться, якщо слот порожній.",[],[230,238],{"name":231,"description":99,"tags":232,"type":233,"signature":234,"schema":235},"update:modelValue",[],"[value: boolean]","(event: \"update:modelValue\", value: boolean): void",[236],{"kind":150,"type":183,"schema":237},[180,186],{"name":239,"description":99,"tags":240,"type":241,"signature":242,"schema":243},"close",[],"[]","(event: \"close\"): void",[],[],"hYs52Vk9EBCbXtGfoVMyQTsnTayaGA4_V16FmYJbHTE",1788072639721]