[{"data":1,"prerenderedAt":271},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fcombobox":3,"component-meta:UiCombobox":116},{"id":4,"title":5,"body":6,"component":99,"dependsOn":100,"description":103,"emitDescriptions":104,"extension":107,"meta":108,"navigation":109,"order":110,"path":111,"seo":112,"status":113,"stem":114,"__hash__":115},"docs\u002Fdocs\u002Fcomponents\u002Fcombobox.md","Combobox",{"type":7,"value":8,"toc":90},"minimark",[9,18,23,28,32,35,39,46,50,53,56,60,87],[10,11,12,13,17],"p",{},"Відмінність від Select принципова: Select фільтрує свій статичний список\nлокально, Combobox — НІ. Панель показує рівно те, що споживач поклав в\n",[14,15,16],"code",{},"options",". Подвійна фільтрація (тут + сервером) ховала б валідні матчі,\nякі сервер знайшов за іншим полем.",[19,20,22],"h2",{"id":21},"приклад","Приклад",[24,25],"component-preview",{"name":26,"stage":27},"combobox-async","min-h-56",[19,29,31],{"id":30},"api","API",[33,34],"component-api",{},[19,36,38],{"id":37},"коли-використовувати","Коли використовувати",[10,40,41,42,45],{},"Вибір з ВЕЛИКИХ або віддалених наборів: користувачі, групи, моделі,\nміста. ",[14,43,44],{},"minChars"," береже сервер від пошуку по одній букві.",[19,47,49],{"id":48},"коли-не-використовувати","Коли НЕ використовувати",[10,51,52],{},"Для статичного списку на 5–50 пунктів потрібен Select: локальна\nфільтрація миттєва й не коштує запитів.",[10,54,55],{},"Для мультивибору є MultiSelect.",[19,57,59],{"id":58},"доступність","Доступність",[10,61,62,63,66,67,70,71,74,75,78,79,82,83,86],{},"Той самий ARIA-комбобокс, що в Select: ",[14,64,65],{},"role=\"combobox\"",",\n",[14,68,69],{},"aria-autocomplete=\"list\"",", панель — ",[14,72,73],{},"listbox",", пункти — ",[14,76,77],{},"option"," з\n",[14,80,81],{},"aria-selected",". ",[14,84,85],{},"Escape"," закриває панель і не «протікає» в модалку\nнавколо.",[10,88,89],{},"Стан завантаження замінює шеврон спінером і показує «Завантаження…» в\nпанелі — користувач розуміє, що пошук живий, а не зламався.",{"title":91,"searchDepth":92,"depth":92,"links":93},"",2,[94,95,96,97,98],{"id":21,"depth":92,"text":22},{"id":30,"depth":92,"text":31},{"id":37,"depth":92,"text":38},{"id":48,"depth":92,"text":49},{"id":58,"depth":92,"text":59},"UiCombobox",[101,102],"app\u002Futils\u002FuiFieldStyles.ts","app\u002Futils\u002FoverlayPosition.ts","Async-пошук без локальної фільтрації — компонент показує рівно те, що дійшло з сервера.",{"update:modelValue":105,"search":106},"Обране значення або `null`, якщо вибір скинуто.","Введений текст. Споживач дебаунить і фетчить сам.","md",{},true,39,"\u002Fdocs\u002Fcomponents\u002Fcombobox",{"title":5,"description":103},"stable","docs\u002Fcomponents\u002Fcombobox","0-rBWH1lFDGfoLJo90UuzjgMAeLj-xepbGCpApXNsYA",{"mode":117,"prefetch":118,"preload":118,"filePath":119,"declarationPath":120,"pascalName":99,"kebabName":121,"chunkName":122,"priority":123,"_scanned":109,"meta":124},"all",false,"app\u002Fcomponents\u002Fui\u002FUiCombobox.vue","C:\u002Fproject-DS\u002FtatetUI\u002Fapp\u002Fcomponents\u002Fui\u002FUiCombobox.vue","ui-combobox","components\u002Fui-combobox",1,{"type":123,"props":125,"slots":219,"events":246,"exposed":261,"hash":270},[126,157,163,165,169,179,183,187,190,194,198,202,207,213],{"name":16,"global":118,"description":127,"tags":128,"required":109,"type":129,"schema":130},"Поточні варіанти. Компонент їх НЕ фільтрує: список приходить із\r\nсервера у відповідь на подію `search`.",[],"ComboboxOption[]",{"kind":131,"type":129,"schema":132},"array",{"0":133},{"kind":134,"type":135,"schema":136},"object","ComboboxOption",{"value":137,"label":146,"disabled":149},{"name":138,"global":118,"description":91,"tags":139,"required":109,"type":140,"schema":141},"value",[],"string | number",{"kind":142,"type":140,"schema":143},"enum",{"0":144,"1":145},"string","number",{"name":147,"global":118,"description":91,"tags":148,"required":109,"type":144,"schema":144},"label",[],{"name":150,"global":118,"description":91,"tags":151,"required":118,"type":152,"schema":153},"disabled",[],"boolean",{"kind":142,"type":152,"schema":154},{"0":155,"1":156},"false","true",{"name":158,"global":118,"description":159,"tags":160,"required":118,"type":140,"schema":161},"modelValue","Обране значення. Використовуйте через `v-model`.",[],{"kind":142,"type":140,"schema":162},{"0":144,"1":145},{"name":147,"global":118,"description":91,"tags":164,"required":118,"type":144,"schema":144},[],{"name":166,"global":118,"default":167,"description":91,"tags":168,"required":118,"type":144,"schema":144},"placeholder","\"Пошук…\"",[],{"name":170,"global":118,"default":171,"description":172,"tags":173,"required":118,"type":174,"schema":175},"size","\"md\"","Висота поля. На мобільному кожен розмір вищий за десктопний.",[],"FieldSize",{"kind":142,"type":174,"schema":176},{"0":177,"1":171,"2":178},"\"sm\"","\"lg\"",{"name":180,"global":118,"description":181,"tags":182,"required":118,"type":144,"schema":144},"error","Текст помилки. Сама його наявність вмикає стан помилки.",[],{"name":184,"global":118,"description":185,"tags":186,"required":118,"type":144,"schema":144},"hint","Підказка під полем. Ховається, коли показано помилку.",[],{"name":188,"global":118,"description":91,"tags":189,"required":118,"type":144,"schema":144},"name",[],{"name":44,"global":118,"default":191,"description":192,"tags":193,"required":118,"type":145,"schema":145},"0","Не емітити `search`, доки запит коротший. 0 — емітити все.",[],{"name":195,"global":118,"description":196,"tags":197,"required":118,"type":144,"schema":144},"id","Стабільний DOM id. `name` використовується лише для форми.",[],{"name":150,"global":118,"default":155,"description":91,"tags":199,"required":118,"type":152,"schema":200},[],{"kind":142,"type":152,"schema":201},{"0":155,"1":156},{"name":203,"global":118,"description":91,"tags":204,"required":118,"type":152,"schema":205},"required",[],{"kind":142,"type":152,"schema":206},{"0":155,"1":156},{"name":208,"global":118,"default":155,"description":209,"tags":210,"required":118,"type":152,"schema":211},"loading","Керований стан завантаження — панель показує «Завантаження…».",[],{"kind":142,"type":152,"schema":212},{"0":155,"1":156},{"name":214,"global":118,"default":156,"description":215,"tags":216,"required":118,"type":152,"schema":217},"clearable","Дозволяє скинути вибір хрестиком.",[],{"kind":142,"type":152,"schema":218},{"0":155,"1":156},[220],{"name":77,"type":221,"description":222,"tags":223,"schema":224},"{ option: ComboboxOption; highlighted: boolean; selected: boolean; }","Власний рендер пункту списку.",[],{"kind":134,"type":221,"schema":225},{"option":226,"highlighted":240,"selected":243},{"name":77,"global":118,"description":91,"tags":227,"required":109,"type":135,"schema":228},[],{"kind":134,"type":135,"schema":229},{"value":230,"label":234,"disabled":236},{"name":138,"global":118,"description":91,"tags":231,"required":109,"type":140,"schema":232},[],{"kind":142,"type":140,"schema":233},{"0":144,"1":145},{"name":147,"global":118,"description":91,"tags":235,"required":109,"type":144,"schema":144},[],{"name":150,"global":118,"description":91,"tags":237,"required":118,"type":152,"schema":238},[],{"kind":142,"type":152,"schema":239},{"0":155,"1":156},{"name":241,"global":118,"description":91,"tags":242,"required":109,"type":152,"schema":152},"highlighted",[],{"name":244,"global":118,"description":91,"tags":245,"required":109,"type":152,"schema":152},"selected",[],[247,255],{"name":248,"description":91,"tags":249,"type":250,"signature":251,"schema":252},"update:modelValue",[],"[value: string | number]","(event: \"update:modelValue\", value: string | number): void",[253],{"kind":142,"type":140,"schema":254},[144,145],{"name":256,"description":91,"tags":257,"type":258,"signature":259,"schema":260},"search",[],"[query: string]","(event: \"search\", query: string): void",[144],[262],{"name":263,"type":264,"description":265,"tags":266,"schema":267},"focus","() => void","Ставить фокус на поле.",[],{"kind":268,"type":269},"event","(): void","b-MdlQqGqOuNKmcWi9mg9owlKpMXcIP9TsaRiQ1khfo",1788072639717]