[{"data":1,"prerenderedAt":306},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fvirtual-list":3,"component-meta:UiVirtualList":241},{"id":4,"title":5,"body":6,"component":87,"dependsOn":228,"description":230,"emitDescriptions":231,"extension":232,"meta":233,"navigation":234,"order":235,"path":236,"seo":237,"status":238,"stem":239,"__hash__":240},"docs\u002Fdocs\u002Fcomponents\u002Fvirtual-list.md","VirtualList",{"type":7,"value":8,"toc":220},"minimark",[9,14,19,23,27,30,34,66,159,169,173,176,180,190,197,201,216],[10,11,13],"h2",{"id":12},"приклад","Приклад",[15,16],"component-preview",{"name":17,"stage":18},"virtual-list-basic","min-h-64",[20,21,22],"p",{},"Всередині сцени — 10 000 рядків; у DOM їх менше кількох десятків: списком\nкерує позиція скролу, а не розмір масиву.",[10,24,26],{"id":25},"api","API",[28,29],"component-api",{},[10,31,33],{"id":32},"слоти","Слоти",[20,35,36,37,41,42,45,46,49,50,53,54,57,58,61,62,65],{},"Єдиний слот — ",[38,39,40],"code",{},"item",", і він обов'язковий: без нього списку нема чим\nмалювати. Слот отримує ",[38,43,44],{},"{ item, index }"," (",[38,47,48],{},"index"," — абсолютний номер у\n",[38,51,52],{},"items",", а не позиція у вікні) і рендерить вміст ОДНОГО рядка. Висоту\nрядка задає сам компонент (",[38,55,56],{},"itemHeight","), тож у слоті не можна покладатися\nна ",[38,59,60],{},"min-h"," чи ",[38,63,64],{},"py-"," — рядок має вкладатися у відведені пікселі:",[67,68,73],"pre",{"className":69,"code":70,"language":71,"meta":72,"style":72},"language-vue shiki shiki-themes github-light github-dark","\u003CUiVirtualList ref=\"list\" :items=\"items\" :item-height=\"36\">\n  \u003Ctemplate #item=\"{ item, index }\">\n    \u003Cdiv class=\"flex items-center px-3\">{{ index }}. {{ item.label }}\u003C\u002Fdiv>\n  \u003C\u002Ftemplate>\n\u003C\u002FUiVirtualList>\n","vue","",[38,74,75,131,137,143,149],{"__ignoreMap":72},[76,77,80,84,88,92,95,99,102,104,106,109,111,113,115,118,120,122,126,128],"span",{"class":78,"line":79},"line",1,[76,81,83],{"class":82},"sVt8B","\u003C",[76,85,87],{"class":86},"s9eBZ","UiVirtualList",[76,89,91],{"class":90},"sScJk"," ref",[76,93,94],{"class":82},"=",[76,96,98],{"class":97},"sZZnC","\"list\"",[76,100,101],{"class":82}," :",[76,103,52],{"class":90},[76,105,94],{"class":82},[76,107,108],{"class":97},"\"",[76,110,52],{"class":82},[76,112,108],{"class":97},[76,114,101],{"class":82},[76,116,117],{"class":90},"item-height",[76,119,94],{"class":82},[76,121,108],{"class":97},[76,123,125],{"class":124},"sj4cs","36",[76,127,108],{"class":97},[76,129,130],{"class":82},">\n",[76,132,134],{"class":78,"line":133},2,[76,135,136],{"class":82},"  \u003Ctemplate #item=\"{ item, index }\">\n",[76,138,140],{"class":78,"line":139},3,[76,141,142],{"class":82},"    \u003Cdiv class=\"flex items-center px-3\">{{ index }}. {{ item.label }}\u003C\u002Fdiv>\n",[76,144,146],{"class":78,"line":145},4,[76,147,148],{"class":82},"  \u003C\u002Ftemplate>\n",[76,150,152,155,157],{"class":78,"line":151},5,[76,153,154],{"class":82},"\u003C\u002F",[76,156,87],{"class":86},[76,158,130],{"class":82},[20,160,161,162,165,166,168],{},"Програмна прокрутка — ",[38,163,164],{},"list.value.scrollToIndex(index)",": рядок опиняється\nпосередині вікна, позиція клаймиться в межі полотна. При різкому\nскороченні ",[38,167,52],{}," стара позиція скролу, що вилізла за нове полотно,\nскидається на початок — інакше вікно діапазону рахувалося б із «висячого»\nscrollTop і список показував би порожнє місце.",[10,170,172],{"id":171},"коли-використовувати","Коли використовувати",[20,174,175],{},"Для довгих однорідних списків — логів, стрічок платіжок, результатів\nпошуку, — де рендер всіх рядків означає тисячі зайвих вузлів DOM. Разом з\nUiPagination: пагінація зменшує обсяг даних, віртуалізація — кількість\nвідрендерених вузлів.",[10,177,179],{"id":178},"коли-не-використовувати","Коли НЕ використовувати",[20,181,182,186,187,189],{},[183,184,185],"strong",{},"Контракт фіксованої висоти."," ",[38,188,56],{}," — не налаштування, а\nпередумова: уся арифметика віртуалізації (позиція діапазону, зміщення\nрядків, загальна висота полотна) обчислюється множенням на це число.\nЗмінна висота рядків ламає розрахунок — останні екрани списку або не\nпоказуються, або показуються з дірками. Рядки різної висоти — це не\n«складніший випадок», а інший компонент.",[20,191,192,193,196],{},"Для коротких списків до кількох сотень рядків: звичайний ",[38,194,195],{},"v-for"," дешевший\nза вимірювання скролу, а браузер сам впорається з кількома сотнями вузлів.",[10,198,200],{"id":199},"доступність","Доступність",[20,202,203,204,207,208,211,212,215],{},"Прокрутка контейнера доступна з клавіатури як звичайна зона скролу\n(",[38,205,206],{},"overflow-y-auto","). Рядки — абсолютні прямокутники з координатами\n",[38,209,210],{},"top = index * itemHeight",", тож порядок у DOM відповідає порядку на\nекрані; ключ рядків береться з ",[38,213,214],{},"keyField",", щоб фокус і стан рядка не\nзагубилися під час перемальовування вікна.",[217,218,219],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":72,"searchDepth":133,"depth":133,"links":221},[222,223,224,225,226,227],{"id":12,"depth":133,"text":13},{"id":25,"depth":133,"text":26},{"id":32,"depth":133,"text":33},{"id":171,"depth":133,"text":172},{"id":178,"depth":133,"text":179},{"id":199,"depth":133,"text":200},[229],"app\u002Fcomposables\u002FuseReducedMotion.ts","Віртуалізований список із фіксованою висотою рядка — рендерить лише видиме вікно діапазону з overscan-запасом.",{},"md",{},true,43,"\u002Fdocs\u002Fcomponents\u002Fvirtual-list",{"title":5,"description":230},"stable","docs\u002Fcomponents\u002Fvirtual-list","6jx-7oP66BI2V6yvwvr46tyQj99OvgfwKaQ8BX8rJqE",{"mode":242,"prefetch":243,"preload":243,"filePath":244,"declarationPath":245,"pascalName":87,"kebabName":246,"chunkName":247,"priority":79,"_scanned":234,"meta":248},"all",false,"app\u002Fcomponents\u002Fui\u002FUiVirtualList.vue","C:\u002Fproject-DS\u002FtatetUI\u002Fapp\u002Fcomponents\u002Fui\u002FUiVirtualList.vue","ui-virtual-list","components\u002Fui-virtual-list",{"type":133,"props":249,"slots":282,"events":294,"exposed":295,"hash":305},[250,258,262,268,273,277],{"name":52,"global":243,"description":251,"tags":252,"required":234,"type":253,"schema":254},"Масив рядків. Порядок у масиві — порядок на екрані, компонент його не міняє.",[],"T[]",{"kind":255,"type":253,"schema":256},"array",{"0":257},"T",{"name":56,"global":243,"description":259,"tags":260,"required":234,"type":261,"schema":261},"Висота КОЖНОГО рядка в пікселях (число, не рядок).\r\n\r\nЦе контракт компонента, а не налаштування: уся арифметика віртуалізації\r\n— позиція діапазону, зміщення рядків, загальна висота полотна —\r\nобчислюється множенням на це число. Рядки іншої висоти ламають\r\nрозрахунок: останні екрани списку або не показуються, або показуються\r\nз дірками. Рядок має гарантовано вкладатися у задану висоту\r\n(`truncate`, `line-clamp-*`, фіксована кількість рядків тексту).",[],"number",{"name":263,"global":243,"default":264,"description":265,"tags":266,"required":243,"type":267,"schema":267},"height","\"20rem\"","Висота контейнера прокрутки, напр. `\"16rem\"`.",[],"string",{"name":269,"global":243,"default":270,"description":271,"tags":272,"required":243,"type":261,"schema":261},"overscan","5","Скільки рядків за межами видимої зони тримати відрендереними з кожного\r\nбоку. Більший overscan — плавніший скрол, більший DOM.",[],{"name":214,"global":243,"default":274,"description":275,"tags":276,"required":243,"type":267,"schema":267},"\"id\"","Поле-ідентифікатор рядка для `:key`.",[],{"name":278,"global":243,"default":279,"description":280,"tags":281,"required":243,"type":267,"schema":267},"ariaLabel","\"Віртуальний список\"","Доступна назва scrollable-списку.",[],[283],{"name":40,"type":284,"description":285,"tags":286,"schema":287},"{ item: T; index: number; }","Обов'язковий рендер одного рядка. Висоту рядку задає сам компонент.",[],{"kind":288,"type":284,"schema":289},"object",{"item":290,"index":292},{"name":40,"global":243,"description":72,"tags":291,"required":234,"type":257,"schema":257},[],{"name":48,"global":243,"description":72,"tags":293,"required":234,"type":261,"schema":261},[],[],[296],{"name":297,"type":298,"description":299,"tags":300,"schema":301},"scrollToIndex","(index: number) => void","Прокрутити до рядка за номером у `items` (центр вікна).",[],{"kind":302,"type":303,"schema":304},"event","(index: number): void",{},"mTre7b6q3IQAbRTcSOWsM_F-3W-dlUcLqaW-hYQEcTo",1788072641349]