[{"data":1,"prerenderedAt":438},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Ftag-input":3,"component-meta:UiTagInput":250},{"id":4,"title":5,"body":6,"component":231,"dependsOn":232,"description":235,"emitDescriptions":236,"extension":241,"meta":242,"navigation":243,"order":244,"path":245,"seo":246,"status":247,"stem":248,"__hash__":249},"docs\u002Fdocs\u002Fcomponents\u002Ftag-input.md","TagInput",{"type":7,"value":8,"toc":220},"minimark",[9,22,27,32,35,47,51,73,84,88,91,116,127,131,134,138,151,155,182,186,208,214],[10,11,12,13,21],"p",{},"Мітки клієнта, галузі, теги задачі. На відміну від\n",[14,15,17],"a",{"href":16},"\u002Fdocs\u002Fcomponents\u002Fmulti-select",[18,19,20],"code",{},"UiMultiSelect",", тут значення не обмежені\nготовим списком: користувач вводить своє.",[23,24],"component-preview",{"name":25,"stage":26},"tag-input-basic","min-h-64",[28,29,31],"h2",{"id":30},"backspace-не-має-зїдати-мітки-мовчки","Backspace не має з'їдати мітки мовчки",[10,33,34],{},"Найдорожча помилка такого поля — видалення однією клавішею. Користувач\nшвидко набирає, промахується Backspace на порожньому полі, і остання мітка\nзникає без сліду. Помічають це вже після збереження форми.",[10,36,37,38,42,43,46],{},"Тому перше натискання лише ",[39,40,41],"strong",{},"зводить"," останню мітку: вона отримує видимий\nстан «зараз зникне». Друге видаляє. І кожне видалення оголошується в\n",[18,44,45],{},"aria-live"," — інакше для скрінрідера нічого не відбувається взагалі, бо\nфокус лишається в тому самому полі.",[28,48,50],{"id":49},"пакетна-вставка","Пакетна вставка",[10,52,53,54,57,58,60,61,64,65,68,69,72],{},"Вставка ",[18,55,56],{},"a, b, a, c"," у поле, де вже є ",[18,59,14],{},", з ",[18,62,63],{},"max: 3"," має додати ",[18,66,67],{},"b",",\nспинитися на межі й повідомити про це ",[39,70,71],{},"один раз",". Логіка «на кожне\nнатискання» тут не працює: вона дала б чотири події і напівзастосований\nмасив.",[10,74,75,76,79,80,83],{},"Тому весь список проходить через одну функцію, яка перевіряє пакет проти\nробочої копії й емітить ",[18,77,78],{},"update:modelValue"," рівно раз. Причина відмови\nприходить у ",[18,81,82],{},"reject"," — рішення, чи це помилка й якими словами, лишається\nза формою, а не за полем.",[28,85,87],{"id":86},"підказки","Підказки",[23,89],{"name":90,"stage":26},"tag-input-suggestions",[10,92,93,94,97,98,101,102,101,105,108,109,115],{},"З непорожнім ",[18,95,96],{},"suggestions"," поле стає справжнім ARIA-комбобоксом:\n",[18,99,100],{},"aria-expanded",", ",[18,103,104],{},"aria-controls",[18,106,107],{},"aria-activedescendant",", стрілки й Enter\n— так само, як у ",[14,110,112],{"href":111},"\u002Fdocs\u002Fcomponents\u002Fcombobox",[18,113,114],{},"UiCombobox",". Вільний ввід\nпри цьому лишається: підказки допомагають, а не обмежують.",[10,117,118,119,122,123,126],{},"Панель переприв'язується не лише на прокрутку й зміну розміру вікна, а й\nчерез ",[18,120,121],{},"ResizeObserver"," на самому полі. Причина конкретна: ",[39,124,125],{},"поле росте"," —\nмітки переносяться на новий рядок, висота змінюється, і панель відклеїлася\nб від нього тієї ж миті.",[28,128,130],{"id":129},"api","API",[132,133],"component-api",{},[28,135,137],{"id":136},"коли-використовувати","Коли використовувати",[139,140,141,145,148],"ul",{},[142,143,144],"li",{},"Мітки й теги, де список значень заздалегідь невідомий.",[142,146,147],{},"Отримувачі листа, ключові слова, довільні категорії.",[142,149,150],{},"Поля, куди значення часто вставляють із буфера списком.",[28,152,154],{"id":153},"коли-не-використовувати","Коли НЕ використовувати",[139,156,157,165,173],{},[142,158,159,160,164],{},"Коли значення обмежені готовим набором — це\n",[14,161,162],{"href":16},[18,163,20],{}," з чекбоксами й\n«вибрати все».",[142,166,167,168,172],{},"Для одного значення з підказками —\n",[14,169,170],{"href":111},[18,171,114],{},".",[142,174,175,176,172],{},"Для довгого тексту, який лише виглядає як список —\n",[14,177,179],{"href":178},"\u002Fdocs\u002Fcomponents\u002Ftextarea",[18,180,181],{},"UiTextarea",[28,183,185],{"id":184},"доступність","Доступність",[10,187,188,189,192,193,196,197,200,201,204,205,207],{},"Мітки — це ",[18,190,191],{},"\u003Cul>"," уже ухвалених значень, а ",[39,194,195],{},"не"," ",[18,198,199],{},"role=\"listbox\"",". Дві\nпричини. По-перше, кожна мітка містить кнопку видалення, а ",[18,202,203],{},"role=\"option\"","\nзабороняє інтерактивних нащадків — кнопка стала б недосяжною в режимі\nчитання. По-друге, з підказками в одному віджеті було б два listbox, а\n",[18,206,104],{}," на полі може вказувати лише на один.",[10,209,210,211,172],{},"Кнопка видалення кожної мітки має власне ім'я «Видалити ‹мітка›».\nДодавання, видалення й досягнення межі оголошуються через\n",[18,212,213],{},"aria-live=\"polite\"",[10,215,216,219],{},[18,217,218],{},"aria-describedby"," вказує рівно на один опис: помилка перекриває підказку,\nа не додається до неї.",{"title":221,"searchDepth":222,"depth":222,"links":223},"",2,[224,225,226,227,228,229,230],{"id":30,"depth":222,"text":31},{"id":49,"depth":222,"text":50},{"id":86,"depth":222,"text":87},{"id":129,"depth":222,"text":130},{"id":136,"depth":222,"text":137},{"id":153,"depth":222,"text":154},{"id":184,"depth":222,"text":185},"UiTagInput",[233,234],"app\u002Futils\u002FuiFieldStyles.ts","app\u002Futils\u002FoverlayPosition.ts","Вільний ввід міток з підказками — з пакетною вставкою і Backspace, який не з'їдає теги мовчки.",{"update:modelValue":237,"add":238,"remove":239,"reject":240},"Новий список міток. Використовуйте через `v-model`.","Мітку додано. Приходить уже нормалізоване значення.","Мітку видалено. Приходять саме значення і його колишній індекс.","Мітку відхилено. Другим аргументом — причина - duplicate, max, length або empty.","md",{},true,58,"\u002Fdocs\u002Fcomponents\u002Ftag-input",{"title":5,"description":235},"stable","docs\u002Fcomponents\u002Ftag-input","h-F2XESBY3kMzmSLtBNSCL1mAr-mwtGF8ijaEDO4qRQ",{"mode":251,"prefetch":252,"preload":252,"filePath":253,"declarationPath":254,"pascalName":231,"kebabName":255,"chunkName":256,"priority":257,"_scanned":243,"meta":258},"all",false,"app\u002Fcomponents\u002Fui\u002FUiTagInput.vue","C:\u002Fproject-DS\u002FtatetUI\u002Fapp\u002Fcomponents\u002Fui\u002FUiTagInput.vue","ui-tag-input","components\u002Fui-tag-input",1,{"type":257,"props":259,"slots":356,"events":395,"exposed":426,"hash":437},[260,269,275,280,284,291,300,311,315,319,322,325,328,331,340,346,351],{"name":261,"global":252,"description":262,"tags":263,"required":243,"type":264,"schema":265},"modelValue","Мітки. Використовуйте через `v-model`.",[],"string[]",{"kind":266,"type":264,"schema":267},"array",{"0":268},"string",{"name":96,"global":252,"default":270,"description":271,"tags":272,"required":252,"type":264,"schema":273},"[]","Підказки для панелі. Порожньо — панелі немає взагалі, лишається\r\nчистий вільний ввід.",[],{"kind":266,"type":264,"schema":274},{"0":268},{"name":276,"global":252,"description":277,"tags":278,"required":252,"type":279,"schema":279},"max","Максимальна кількість міток. Досягнувши межі, поле блокує ввід.",[],"number",{"name":281,"global":252,"description":282,"tags":283,"required":252,"type":279,"schema":279},"maxLength","Максимальна довжина однієї мітки.",[],{"name":285,"global":252,"default":286,"description":287,"tags":288,"required":252,"type":264,"schema":289},"delimiters","[\",\", \";\"]","Символи, що завершують мітку і ділять вставлений текст. Enter\r\nзавершує мітку завжди й у цей список не входить.",[],{"kind":266,"type":264,"schema":290},{"0":268},{"name":292,"global":252,"description":293,"tags":294,"required":252,"type":295,"schema":296},"normalize","Нормалізація перед додаванням — обрізання, нижній регістр, зняття «#».\r\nПорожній результат скасовує додавання.",[],"(raw: string) => string",{"kind":297,"type":298,"schema":299},"event","(raw: string): string",{},{"name":301,"global":252,"default":302,"description":303,"tags":304,"required":252,"type":305,"schema":306},"size","\"md\"","Висота поля. На мобільному кожен розмір вищий за десктопний.",[],"FieldSize",{"kind":307,"type":305,"schema":308},"enum",{"0":309,"1":302,"2":310},"\"sm\"","\"lg\"",{"name":312,"global":252,"description":313,"tags":314,"required":252,"type":268,"schema":268},"error","Текст помилки. Стан помилки вмикає САМА наявність тексту.",[],{"name":316,"global":252,"description":317,"tags":318,"required":252,"type":268,"schema":268},"hint","Підказка під полем. Ховається, коли показано помилку.",[],{"name":320,"global":252,"description":221,"tags":321,"required":252,"type":268,"schema":268},"label",[],{"name":323,"global":252,"description":221,"tags":324,"required":252,"type":268,"schema":268},"placeholder",[],{"name":326,"global":252,"description":221,"tags":327,"required":252,"type":268,"schema":268},"id",[],{"name":329,"global":252,"description":221,"tags":330,"required":252,"type":268,"schema":268},"name",[],{"name":332,"global":252,"default":333,"description":334,"tags":335,"required":252,"type":336,"schema":337},"allowDuplicates","false","Дозволити однакові мітки. Типово дублікат відхиляється через `reject`.",[],"boolean",{"kind":307,"type":336,"schema":338},{"0":333,"1":339},"true",{"name":341,"global":252,"default":339,"description":342,"tags":343,"required":252,"type":336,"schema":344},"addOnBlur","Додавати недописану мітку при втраті фокуса.",[],{"kind":307,"type":336,"schema":345},{"0":333,"1":339},{"name":347,"global":252,"description":221,"tags":348,"required":252,"type":336,"schema":349},"disabled",[],{"kind":307,"type":336,"schema":350},{"0":333,"1":339},{"name":352,"global":252,"description":221,"tags":353,"required":252,"type":336,"schema":354},"required",[],{"kind":307,"type":336,"schema":355},{"0":333,"1":339},[357,376,390],{"name":358,"type":359,"description":360,"tags":361,"schema":362},"tag","{ tag: string; index: number; remove: () => void; }","Власний рендер мітки. `remove` прибирає саме цю мітку.",[],{"kind":363,"type":359,"schema":364},"object",{"tag":365,"index":367,"remove":370},{"name":358,"global":252,"description":221,"tags":366,"required":243,"type":268,"schema":268},[],{"name":368,"global":252,"description":221,"tags":369,"required":243,"type":279,"schema":279},"index",[],{"name":371,"global":252,"description":221,"tags":372,"required":243,"type":373,"schema":374},"remove",[],"() => void",{"kind":297,"type":375},"(): void",{"name":377,"type":378,"description":379,"tags":380,"schema":381},"suggestion","{ suggestion: string; highlighted: boolean; }","Власний рендер підказки в панелі.",[],{"kind":363,"type":378,"schema":382},{"suggestion":383,"highlighted":385},{"name":377,"global":252,"description":221,"tags":384,"required":243,"type":268,"schema":268},[],{"name":386,"global":252,"description":221,"tags":387,"required":243,"type":336,"schema":388},"highlighted",[],{"kind":307,"type":336,"schema":389},{"0":333,"1":339},{"name":391,"type":392,"description":393,"tags":394,"schema":392},"empty","any","Показується, коли під запит немає підказок.",[],[396,403,409,414],{"name":78,"description":221,"tags":397,"type":398,"signature":399,"schema":400},[],"[value: string[]]","(event: \"update:modelValue\", value: string[]): void",[401],{"kind":266,"type":264,"schema":402},[268],{"name":404,"description":221,"tags":405,"type":406,"signature":407,"schema":408},"add",[],"[tag: string]","(event: \"add\", tag: string): void",[268],{"name":371,"description":221,"tags":410,"type":411,"signature":412,"schema":413},[],"[tag: string, index: number]","(event: \"remove\", tag: string, index: number): void",[268,279],{"name":82,"description":221,"tags":415,"type":416,"signature":417,"schema":418},[],"[tag: string, reason: \"length\" | \"max\" | \"duplicate\" | \"empty\"]","(event: \"reject\", tag: string, reason: \"length\" | \"max\" | \"duplicate\" | \"empty\"): void",[268,419],{"kind":307,"type":420,"schema":421},"\"length\" | \"max\" | \"duplicate\" | \"empty\"",[422,423,424,425],"\"length\"","\"max\"","\"duplicate\"","\"empty\"",[427,432],{"name":428,"type":373,"description":429,"tags":430,"schema":431},"focus","Ставить фокус на поле вводу.",[],{"kind":297,"type":375},{"name":433,"type":373,"description":434,"tags":435,"schema":436},"clear","Прибирає всі мітки одним оновленням моделі.",[],{"kind":297,"type":375},"rhII-OxlJT5eyB1odd0vYzyDEKVFXm-Ke0my9pS_SY8",1788072641266]