[{"data":1,"prerenderedAt":333},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fselect":3,"component-meta:UiSelect":176},{"id":4,"title":5,"body":6,"component":159,"dependsOn":160,"description":163,"emitDescriptions":164,"extension":167,"meta":168,"navigation":169,"order":170,"path":171,"seo":172,"status":173,"stem":174,"__hash__":175},"docs\u002Fdocs\u002Fcomponents\u002Fselect.md","Select",{"type":7,"value":8,"toc":149},"minimark",[9,18,23,28,32,35,39,46,50,53,56,60,94,105,112,116,123,134,142],[10,11,12,13,17],"p",{},"Єдиний серед чотирьох вихідних проєктів компонент із повноцінним\nARIA-combobox. Решта реалізацій були ",[14,15,16],"code",{},"\u003Cdiv>"," із випадайкою — візуально\nсхоже, для скрінрідера не існує.",[19,20,22],"h2",{"id":21},"приклад","Приклад",[24,25],"component-preview",{"name":26,"stage":27},"select-basic","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],{},"filterable"," — гортати довгий список гірше, ніж набрати три букви.",[19,47,49],{"id":48},"коли-не-використовувати","Коли НЕ використовувати",[10,51,52],{},"Для двох-трьох варіантів беріть радіокнопки: вони показують усі варіанти\nодразу, без зайвого кліку.",[10,54,55],{},"Для довільного тексту з підказками потрібен інший компонент — цей завжди\nповертає значення зі списку.",[19,57,59],{"id":58},"доступність","Доступність",[10,61,62,63,66,67,66,70,73,74,77,78,81,82,85,86,89,90,93],{},"Поле має ",[14,64,65],{},"role=\"combobox\"",", ",[14,68,69],{},"aria-autocomplete=\"list\"",[14,71,72],{},"aria-expanded",",\n",[14,75,76],{},"aria-controls"," і ",[14,79,80],{},"aria-activedescendant",". Панель — ",[14,83,84],{},"role=\"listbox\"",", пункти\n— ",[14,87,88],{},"role=\"option\""," з ",[14,91,92],{},"aria-selected",".",[10,95,96,97,100,101,104],{},"Стрілки пропускають деактивовані пункти, а не зупиняються на них. ",[14,98,99],{},"Escape","\nвикликає ",[14,102,103],{},"stopPropagation"," — інакше той самий натиск закрив би ще й модалку,\nу якій селект стоїть.",[10,106,107,108,111],{},"Панель телепортується в ",[14,109,110],{},"body",". Базовий шар — 1100, а всередині вкладеного\nModal або Drawer значення автоматично піднімається над найближчим оверлеєм.",[19,113,115],{"id":114},"деталі-реалізації","Деталі реалізації",[10,117,118,119,122],{},"Позиція рахується власним кодом, без ",[14,120,121],{},"@floating-ui"," і без VueUse —\nкомпонент має копіюватись у чужий проєкт без нової залежності.",[10,124,125,126,129,130,133],{},"Слухач прокрутки навішено з ",[14,127,128],{},"capture: true",". Подія ",[14,131,132],{},"scroll"," не спливає, тож\nбез цього відкрита панель лишалася б висіти на місці, поки список під нею\nвід'їжджає.",[10,135,136,137,141],{},"Позиція вимірюється ",[138,139,140],"strong",{},"двічі",": перший раз із припущенням висоти 240px,\nдругий — коли панель уже отримала реальну. Без другого проходу вибір\nнапрямку відкриття інколи помилявся.",[10,143,144,145,148],{},"Поки користувач не почав набирати, показується ",[138,146,147],{},"весь"," список. Інакше після\nвідкриття видно лише один пункт — той, що вже обраний і чия назва стоїть у\nполі як текст фільтра.",{"title":150,"searchDepth":151,"depth":151,"links":152},"",2,[153,154,155,156,157,158],{"id":21,"depth":151,"text":22},{"id":30,"depth":151,"text":31},{"id":37,"depth":151,"text":38},{"id":48,"depth":151,"text":49},{"id":58,"depth":151,"text":59},{"id":114,"depth":151,"text":115},"UiSelect",[161,162],"app\u002Futils\u002FuiFieldStyles.ts","app\u002Futils\u002FoverlayPosition.ts","Випадний список із фільтрацією, повною клавіатурною навігацією та ARIA-combobox.",{"update:modelValue":165,"search":166},"Обране значення або `null`, якщо вибір скинуто.","Введений текст. Підключайте для серверної фільтрації.","md",{},true,16,"\u002Fdocs\u002Fcomponents\u002Fselect",{"title":5,"description":163},"stable","docs\u002Fcomponents\u002Fselect","SNgpcoz208S0wgfEDtY2xSE8L4vMgBvsTACun_0CAzo",{"mode":177,"prefetch":178,"preload":178,"filePath":179,"declarationPath":180,"pascalName":159,"kebabName":181,"chunkName":182,"priority":183,"_scanned":169,"meta":184},"all",false,"app\u002Fcomponents\u002Fui\u002FUiSelect.vue","C:\u002Fproject-DS\u002FtatetUI\u002Fapp\u002Fcomponents\u002Fui\u002FUiSelect.vue","ui-select","components\u002Fui-select",1,{"type":183,"props":185,"slots":280,"events":308,"exposed":323,"hash":332},[186,218,224,226,229,239,243,247,251,254,258,263,269,275],{"name":187,"global":178,"description":188,"tags":189,"required":169,"type":190,"schema":191},"options","Варіанти вибору. Фільтрація за введеним текстом відбувається\r\nлокально.",[],"SelectOption[]",{"kind":192,"type":190,"schema":193},"array",{"0":194},{"kind":195,"type":196,"schema":197},"object","SelectOption",{"value":198,"label":207,"disabled":210},{"name":199,"global":178,"description":150,"tags":200,"required":169,"type":201,"schema":202},"value",[],"string | number",{"kind":203,"type":201,"schema":204},"enum",{"0":205,"1":206},"string","number",{"name":208,"global":178,"description":150,"tags":209,"required":169,"type":205,"schema":205},"label",[],{"name":211,"global":178,"description":150,"tags":212,"required":178,"type":213,"schema":214},"disabled",[],"boolean",{"kind":203,"type":213,"schema":215},{"0":216,"1":217},"false","true",{"name":219,"global":178,"description":220,"tags":221,"required":178,"type":201,"schema":222},"modelValue","Обране значення. Використовуйте через `v-model`.",[],{"kind":203,"type":201,"schema":223},{"0":205,"1":206},{"name":208,"global":178,"description":150,"tags":225,"required":178,"type":205,"schema":205},[],{"name":227,"global":178,"description":150,"tags":228,"required":178,"type":205,"schema":205},"placeholder",[],{"name":230,"global":178,"default":231,"description":232,"tags":233,"required":178,"type":234,"schema":235},"size","\"md\"","Висота поля. На мобільному кожен розмір вищий за десктопний.",[],"FieldSize",{"kind":203,"type":234,"schema":236},{"0":237,"1":238,"2":231},"\"lg\"","\"sm\"",{"name":240,"global":178,"description":241,"tags":242,"required":178,"type":205,"schema":205},"error","Текст помилки. Його наявність вмикає стан помилки.",[],{"name":244,"global":178,"description":245,"tags":246,"required":178,"type":205,"schema":205},"hint","Підказка під полем. Ховається, коли показано помилку.",[],{"name":248,"global":178,"description":249,"tags":250,"required":178,"type":205,"schema":205},"id","Стабільний DOM id. `name` використовується лише для форми.",[],{"name":252,"global":178,"description":150,"tags":253,"required":178,"type":205,"schema":205},"name",[],{"name":211,"global":178,"description":150,"tags":255,"required":178,"type":213,"schema":256},[],{"kind":203,"type":213,"schema":257},{"0":216,"1":217},{"name":259,"global":178,"description":150,"tags":260,"required":178,"type":213,"schema":261},"required",[],{"kind":203,"type":213,"schema":262},{"0":216,"1":217},{"name":264,"global":178,"description":265,"tags":266,"required":178,"type":213,"schema":267},"loading","Показує індикатор замість списку — для серверного пошуку.",[],{"kind":203,"type":213,"schema":268},{"0":216,"1":217},{"name":270,"global":178,"description":271,"tags":272,"required":178,"type":213,"schema":273},"clearable","Дозволяє скинути вибір хрестиком.",[],{"kind":203,"type":213,"schema":274},{"0":216,"1":217},{"name":44,"global":178,"default":217,"description":276,"tags":277,"required":178,"type":213,"schema":278},"Дозволяє звужувати список набором тексту.",[],{"kind":203,"type":213,"schema":279},{"0":216,"1":217},[281],{"name":282,"type":283,"description":284,"tags":285,"schema":286},"option","{ option: SelectOption; highlighted: boolean; selected: boolean; }","Власний рендер пункту списку.",[],{"kind":195,"type":283,"schema":287},{"option":288,"highlighted":302,"selected":305},{"name":282,"global":178,"description":150,"tags":289,"required":169,"type":196,"schema":290},[],{"kind":195,"type":196,"schema":291},{"value":292,"label":296,"disabled":298},{"name":199,"global":178,"description":150,"tags":293,"required":169,"type":201,"schema":294},[],{"kind":203,"type":201,"schema":295},{"0":205,"1":206},{"name":208,"global":178,"description":150,"tags":297,"required":169,"type":205,"schema":205},[],{"name":211,"global":178,"description":150,"tags":299,"required":178,"type":213,"schema":300},[],{"kind":203,"type":213,"schema":301},{"0":216,"1":217},{"name":303,"global":178,"description":150,"tags":304,"required":169,"type":213,"schema":213},"highlighted",[],{"name":306,"global":178,"description":150,"tags":307,"required":169,"type":213,"schema":213},"selected",[],[309,315],{"name":310,"description":150,"tags":311,"type":312,"signature":313,"schema":314},"search",[],"[query: string]","(event: \"search\", query: string): void",[205],{"name":316,"description":150,"tags":317,"type":318,"signature":319,"schema":320},"update:modelValue",[],"[value: string | number]","(event: \"update:modelValue\", value: string | number): void",[321],{"kind":203,"type":201,"schema":322},[205,206],[324],{"name":325,"type":326,"description":327,"tags":328,"schema":329},"focus","() => void","Ставить фокус на поле.",[],{"kind":330,"type":331},"event","(): void","5UW-WWgPUHVLmcsbrP9OtEp46kDrf-vOJNaYfyMY4Qs",1788072639726]