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