[{"data":1,"prerenderedAt":284},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fresizable-panels":3,"component-meta:UiResizablePanels":171},{"id":4,"title":5,"body":6,"component":156,"dependsOn":157,"description":158,"emitDescriptions":159,"extension":162,"meta":163,"navigation":164,"order":165,"path":166,"seo":167,"status":168,"stem":169,"__hash__":170},"docs\u002Fdocs\u002Fcomponents\u002Fresizable-panels.md","ResizablePanels",{"type":7,"value":8,"toc":145},"minimark",[9,14,19,23,26,30,34,50,54,72,76,85,105,109,120,124,138],[10,11,13],"h2",{"id":12},"приклад","Приклад",[15,16],"component-preview",{"name":17,"stage":18},"resizable-panels-basic","min-h-80",[10,20,22],{"id":21},"api","API",[24,25],"component-api",{},[10,27,29],{"id":28},"коли-використовувати","Коли використовувати",[31,32,33],"p",{},"Для редакторів, файлових менеджерів і dashboard, де користувачу потрібно\nрозподіляти місце між двома одночасно важливими областями.",[31,35,36,37,41,42,45,46,49],{},"Збереження ширини (",[38,39,40],"code",{},"storage-key",") — саме для таких екранів: оператор,\nякий щодня розсуває список товарів на 40%, не має робити цього двічі.\nКомпонент сам читає значення в ",[38,43,44],{},"onMounted"," і сам записує його після\nдії користувача — батьківській сторінці не потрібно тримати ні стан,\nні власний ",[38,47,48],{},"localStorage","-ключ.",[10,51,53],{"id":52},"коли-не-використовувати","Коли НЕ використовувати",[31,55,56,57,60,61,60,64,67,68,71],{},"Не використовуйте resize, якщо одна панель є тимчасовою — тоді краще Drawer.\nНа вузьких екранах часто зрозуміліше скласти блоки вертикально без separator:\nдля цього панелям і роздільнику можна передати адаптивні класи\n(",[38,58,59],{},"start-class",", ",[38,62,63],{},"end-class",[38,65,66],{},"separator-class","), напр. ",[38,69,70],{},"max-md:hidden",",\nі вузький екран залишиться з одною панеллю без жодного JS.",[10,73,75],{"id":74},"збереження-розміру","Збереження розміру",[31,77,78,80,81,84],{},[38,79,40],{}," вимикає необхідність у ",[38,82,83],{},"v-model"," повністю: компонент\nзберігає останню встановлену ширину і відновлює її наступного разу.",[86,87,88,95,102],"ul",{},[89,90,91,92,94],"li",{},"відновлення відбувається в ",[38,93,44],{}," — перший (серверний) рендер дає\nдефолт, клієнтський застосовує збережене значення до першої взаємодії;",[89,96,97,98,101],{},"запис — лише після дії користувача (drag або клавіатура): зміни\n",[38,99,100],{},"modelValue"," ззовні не перезаписують збережену ширину;",[89,103,104],{},"значення — голе число (частка першої панелі у відсотках), тож ключ\nверсіонуйте: зміна сенсу числа вимагає нового ключа, а не парсера.",[10,106,108],{"id":107},"доступність","Доступність",[31,110,111,112,115,116,119],{},"Роздільник має ",[38,113,114],{},"role=\"separator\"",", значення min\u002Fmax\u002Fnow і правильну\norientation. Arrow-клавіші змінюють розмір на ",[38,117,118],{},"step",", Home та End переходять\nдо меж. Disabled separator вилучається з tab order.",[10,121,123],{"id":122},"портування","Портування",[31,125,126,127,130,131,133,134,137],{},"Компонент не має зовнішніх залежностей і сам імпортує все з ",[38,128,129],{},"vue"," —\n",[38,132,44],{}," у тому числі. У проєктах без Nuxt-автоімпортів (чистий Vite,\nVitest) це різниця між «працює» і ",[38,135,136],{},"ReferenceError",".",[31,139,140,141,144],{},"Корінь несе ",[38,142,143],{},"h-full w-full",": компонент заповнює батька цілком. У flex-батьку\nбез цього він мірявся контентом, і права панель залишала порожній хвіст.",{"title":146,"searchDepth":147,"depth":147,"links":148},"",2,[149,150,151,152,153,154,155],{"id":12,"depth":147,"text":13},{"id":21,"depth":147,"text":22},{"id":28,"depth":147,"text":29},{"id":52,"depth":147,"text":53},{"id":74,"depth":147,"text":75},{"id":107,"depth":147,"text":108},{"id":122,"depth":147,"text":123},"UiResizablePanels",[],"Дві панелі з pointer resize, збереженням ширини в localStorage та доступним separator-контролем.",{"update:modelValue":160,"change":161},"Частка першої панелі у відсотках. Емітується після drag, клавіатури та при відновленні збереженого розміру.","Фінальне значення після keyboard або pointer дії.","md",{},true,50,"\u002Fdocs\u002Fcomponents\u002Fresizable-panels",{"title":5,"description":158},"stable","docs\u002Fcomponents\u002Fresizable-panels","3INMkPBwHlPfVUhadip0IRzkwmcWcn1ND2I-2rT1ElY",{"mode":172,"prefetch":173,"preload":173,"filePath":174,"declarationPath":175,"pascalName":156,"kebabName":176,"chunkName":177,"priority":178,"_scanned":164,"meta":179},"all",false,"app\u002Fcomponents\u002Fui\u002FUiResizablePanels.vue","C:\u002Fproject-DS\u002FtatetUI\u002Fapp\u002Fcomponents\u002Fui\u002FUiResizablePanels.vue","ui-resizable-panels","components\u002Fui-resizable-panels",1,{"type":178,"props":180,"slots":250,"events":270,"exposed":282,"hash":283},[181,186,191,196,200,210,215,219,223,227,232,237,242],{"name":100,"global":173,"default":182,"description":183,"tags":184,"required":173,"type":185,"schema":185},"undefined","Розмір першої панелі у відсотках. Використовуйте через `v-model`.",[],"number",{"name":187,"global":173,"default":188,"description":189,"tags":190,"required":173,"type":185,"schema":185},"min","20","Мінімальний розмір першої панелі у відсотках.",[],{"name":192,"global":173,"default":193,"description":194,"tags":195,"required":173,"type":185,"schema":185},"max","80","Максимальний розмір першої панелі у відсотках.",[],{"name":118,"global":173,"default":197,"description":198,"tags":199,"required":173,"type":185,"schema":185},"5","Крок зміни розміру стрілками з клавіатури.",[],{"name":201,"global":173,"default":202,"description":203,"tags":204,"required":173,"type":205,"schema":206},"direction","\"horizontal\"","Вісь поділу: панелі поруч чи одна над одною.",[],"\"vertical\" | \"horizontal\"",{"kind":207,"type":205,"schema":208},"enum",{"0":209,"1":202},"\"vertical\"",{"name":211,"global":173,"default":182,"description":212,"tags":213,"required":173,"type":214,"schema":214},"storageKey","Ключ localStorage, під яким зберігається розмір між сесіями.\r\n\r\nЗбережене значення читається один раз у onMounted і заявляється через\r\nзвичайний `update:modelValue`; запис відбувається лише після дії\r\nкористувача (drag або клавіатура) — сторонні зміни `modelValue`\r\nзбереженого значення не перезаписують. Значення — голе число, тож ключ\r\nмає бути версіонованим: зміна сенсу числа вимагає нового ключа,\r\nа не «захисного» парсера.",[],"string",{"name":216,"global":173,"default":182,"description":217,"tags":218,"required":173,"type":214,"schema":214},"startClass","Клас першої панелі (`\u003Csection>`): напр. адаптивне приховування.",[],{"name":220,"global":173,"default":182,"description":221,"tags":222,"required":173,"type":214,"schema":214},"endClass","Клас другої панелі (`\u003Csection>`).",[],{"name":224,"global":173,"default":182,"description":225,"tags":226,"required":173,"type":214,"schema":214},"separatorClass","Клас роздільника: напр. прибрати його разом із прихованою панеллю.",[],{"name":228,"global":173,"default":229,"description":230,"tags":231,"required":173,"type":214,"schema":214},"startLabel","\"Перша панель\"","Доступна назва першої панелі.",[],{"name":233,"global":173,"default":234,"description":235,"tags":236,"required":173,"type":214,"schema":214},"endLabel","\"Друга панель\"","Доступна назва другої панелі.",[],{"name":238,"global":173,"default":239,"description":240,"tags":241,"required":173,"type":214,"schema":214},"separatorLabel","\"Змінити розмір панелей\"","Доступна назва роздільника. Він оголошений як `separator` з\r\n`aria-valuenow`, тож без назви скрінрідер зачитає лише відсоток.",[],{"name":243,"global":173,"default":244,"description":146,"tags":245,"required":173,"type":246,"schema":247},"disabled","false",[],"boolean",{"kind":207,"type":246,"schema":248},{"0":244,"1":249},"true",[251,262],{"name":252,"type":253,"description":254,"tags":255,"schema":256},"start","{ size: number; }","Вміст першої панелі. `size` — її поточний розмір у відсотках.",[],{"kind":257,"type":253,"schema":258},"object",{"size":259},{"name":260,"global":173,"description":146,"tags":261,"required":164,"type":185,"schema":185},"size",[],{"name":263,"type":253,"description":264,"tags":265,"schema":266},"end","Вміст другої панелі. `size` — розмір ПЕРШОЇ панелі у відсотках.",[],{"kind":257,"type":253,"schema":267},{"size":268},{"name":260,"global":173,"description":146,"tags":269,"required":164,"type":185,"schema":185},[],[271,277],{"name":272,"description":146,"tags":273,"type":274,"signature":275,"schema":276},"update:modelValue",[],"[value: number]","(event: \"update:modelValue\", value: number): void",[185],{"name":278,"description":146,"tags":279,"type":274,"signature":280,"schema":281},"change",[],"(event: \"change\", value: number): void",[185],[],"k_aMqq6N5ejDij27zLJbW4yx3MADKyHK8r0jDTTcARg",1788072639725]