[{"data":1,"prerenderedAt":374},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fnumber-input":3,"component-meta:UiNumberInput":246},{"id":4,"title":5,"body":6,"component":230,"dependsOn":231,"description":233,"emitDescriptions":234,"extension":237,"meta":238,"navigation":239,"order":240,"path":241,"seo":242,"status":243,"stem":244,"__hash__":245},"docs\u002Fdocs\u002Fcomponents\u002Fnumber-input.md","NumberInput",{"type":7,"value":8,"toc":219},"minimark",[9,13,18,27,30,56,82,93,97,100,106,112,115,119,122,126,138,142,172,176,198,205],[10,11,12],"p",{},"Кількість, ціна, знижка, вага — усе, де число вводять руками, а помилка на\nпорядок коштує грошей.",[14,15],"component-preview",{"name":16,"stage":17},"number-input-basic","min-h-64",[19,20,22,23],"h2",{"id":21},"чому-не-typenumber","Чому не ",[24,25,26],"code",{},"type=\"number\"",[10,28,29],{},"Нативне числове поле здається очевидним вибором і не годиться відразу з\nтрьох причин:",[31,32,33,42,49],"ol",{},[34,35,36,37,41],"li",{},"Воно ",[38,39,40],"strong",{},"не приймає згрупований рядок",". «14 762,50» для нього невалідне\nзначення, тобто групування тисяч вимкнене назавжди.",[34,43,44,45,48],{},"Воно малює ",[38,46,47],{},"власні стрілки"," — поруч із нашими кнопками «−»\u002F«+».",[34,50,51,52,55],{},"Для невалідного вводу воно повертає ",[38,53,54],{},"порожній рядок"," — рівно те саме,\nщо й для порожнього поля. Відрізнити «користувач нічого не ввів» від\n«користувач ввів казна-що» неможливо.",[10,57,58,59,62,63,66,67,70,71,74,75,74,78,81],{},"Тому тут ",[24,60,61],{},"type=\"text\""," плюс ",[24,64,65],{},"inputmode=\"decimal\""," (числова клавіатура на\nтелефоні) плюс ",[24,68,69],{},"role=\"spinbutton\""," з ",[24,72,73],{},"aria-valuenow","\u002F",[24,76,77],{},"min",[24,79,80],{},"max",". Роль\nобов'язкова: без неї скрінрідер оголошує звичайне текстове поле, і робота\nстрілок виглядає як поламка.",[10,83,84,85,88,89,92],{},"Розбір значення розуміє український запис: кому як десятковий роздільник і\nнерозривний пробіл як роздільник тисяч. ",[24,86,87],{},"Number.parseFloat"," на «1 234,5»\nповернув би ",[24,90,91],{},"1",".",[19,94,96],{"id":95},"видимий-рядок-не-модель","Видимий рядок — не модель",[14,98],{"name":99,"stage":17},"number-input-precision",[10,101,102,103,92],{},"У фокусі поле показує сире число, поза фокусом — згруповане. Це вимагає\nтримати видимий рядок окремо від моделі й синхронізувати його з неї ",[38,104,105],{},"лише\nпоки поле не у фокусі",[10,107,108,109,111],{},"Інакше відбувається таке: користувач набирає «1,», батько отримує ",[24,110,91],{},",\nповертає його назад у поле, рядок перетворюється на «1», а каретка\nстрибає в кінець. Проміжні стани — «1,», «-», «0,00» — парсяться в число,\nале переписувати рядок на них не можна.",[10,113,114],{},"Клавіші ArrowUp\u002FArrowDown, PageUp\u002FPageDown і Home\u002FEnd одразу оновлюють і\nмодель, і видимий сирий рядок; після blur рядок знову локалізується.",[19,116,118],{"id":117},"api","API",[120,121],"component-api",{},[19,123,125],{"id":124},"коли-використовувати","Коли використовувати",[127,128,129,132,135],"ul",{},[34,130,131],{},"Кількість, ціна, відсоток, вага — будь-яке число з відомим кроком.",[34,133,134],{},"Поля, де стрілки з клавіатури природні: коригування на одиницю.",[34,136,137],{},"Значення з межами, які треба показати користувачу.",[19,139,141],{"id":140},"коли-не-використовувати","Коли НЕ використовувати",[127,143,144,154,163],{},[34,145,146,147,92],{},"Для номера телефону, картки, рахунку: це не числа, а рядки цифр, і крок\nдля них не має сенсу. Беріть ",[148,149,151],"a",{"href":150},"\u002Fdocs\u002Fcomponents\u002Finput",[24,152,153],{},"UiInput",[34,155,156,157,92],{},"Для коду підтвердження — ",[148,158,160],{"href":159},"\u002Fdocs\u002Fcomponents\u002Finput-otp",[24,161,162],{},"UiInputOtp",[34,164,165,166,92],{},"Для вибору з діапазону, де точне значення не важливе —\n",[148,167,169],{"href":168},"\u002Fdocs\u002Fcomponents\u002Fslider",[24,170,171],{},"UiSlider",[19,173,175],{"id":174},"доступність","Доступність",[10,177,178,70,180,182,183,182,186,189,190,193,194,197],{},[24,179,69],{},[24,181,73],{},", ",[24,184,185],{},"aria-valuemin",[24,187,188],{},"aria-valuemax",".\nКоли задано ",[24,191,192],{},"unit",", значення дублюється в ",[24,195,196],{},"aria-valuetext"," разом з\nодиницею — інакше «15» звучить без «відсотків».",[10,199,200,201,204],{},"Кнопки «−»\u002F«+» мають ",[24,202,203],{},"tabindex=\"-1\"",": та сама дія вже доступна стрілками, і\nдві зайві зупинки табуляції на кожному числовому полі форми — це дорого.\nРозмір кнопок — 44px на мобільному, 36px на десктопі.",[10,206,207,208,211,212,182,215,218],{},"Утримання кнопки повторює крок. Таймери знімаються на ",[24,209,210],{},"pointerup",",\n",[24,213,214],{},"pointercancel",[24,216,217],{},"pointerleave"," і на приховуванні вкладки: пропустити хоч\nодин шлях — і значення продовжує рости у фоновій вкладці.",{"title":220,"searchDepth":221,"depth":221,"links":222},"",2,[223,225,226,227,228,229],{"id":21,"depth":221,"text":224},"Чому не type=\"number\"",{"id":95,"depth":221,"text":96},{"id":117,"depth":221,"text":118},{"id":124,"depth":221,"text":125},{"id":140,"depth":221,"text":141},{"id":174,"depth":221,"text":175},"UiNumberInput",[232],"app\u002Futils\u002FuiFieldStyles.ts","Числове поле зі степерами, групуванням тисяч і повною клавіатурою — без нативного type=number.",{"update:modelValue":235,"change":236},"Нове значення або `null`, якщо поле порожнє. Використовуйте через `v-model`.","Значення, зафіксоване після втрати фокуса або натискання степерів.","md",{},true,59,"\u002Fdocs\u002Fcomponents\u002Fnumber-input",{"title":5,"description":233},"stable","docs\u002Fcomponents\u002Fnumber-input","8dEIDVWv2F3ThDKojU7ajqbmQ9jcwvhyJUckcMQyYpk",{"mode":247,"prefetch":248,"preload":248,"filePath":249,"declarationPath":250,"pascalName":230,"kebabName":251,"chunkName":252,"priority":253,"_scanned":239,"meta":254},"all",false,"app\u002Fcomponents\u002Fui\u002FUiNumberInput.vue","C:\u002Fproject-DS\u002FtatetUI\u002Fapp\u002Fcomponents\u002Fui\u002FUiNumberInput.vue","ui-number-input","components\u002Fui-number-input",1,{"type":253,"props":255,"slots":346,"events":347,"exposed":359,"hash":373},[256,262,273,277,282,286,289,292,296,300,303,306,309,313,316,325,331,336,341],{"name":257,"global":248,"default":258,"description":259,"tags":260,"required":248,"type":261,"schema":261},"modelValue","null","Значення. Порожнє поле — `null`, ніколи не `NaN`. Через `v-model`.",[],"number",{"name":263,"global":248,"default":264,"description":265,"tags":266,"required":248,"type":267,"schema":268},"size","\"md\"","Висота поля. На мобільному кожен розмір вищий за десктопний.",[],"FieldSize",{"kind":269,"type":267,"schema":270},"enum",{"0":271,"1":272,"2":264},"\"lg\"","\"sm\"",{"name":274,"global":248,"default":91,"description":275,"tags":276,"required":248,"type":261,"schema":261},"step","Крок стрілок і кнопок «−»\u002F«+».",[],{"name":278,"global":248,"default":279,"description":280,"tags":281,"required":248,"type":261,"schema":261},"precision","0","Скільки знаків після коми лишати. Округлення відбувається на blur.",[],{"name":283,"global":248,"description":220,"tags":284,"required":248,"type":285,"schema":285},"name",[],"string",{"name":287,"global":248,"description":220,"tags":288,"required":248,"type":285,"schema":285},"label",[],{"name":290,"global":248,"description":220,"tags":291,"required":248,"type":285,"schema":285},"placeholder",[],{"name":293,"global":248,"description":294,"tags":295,"required":248,"type":285,"schema":285},"error","Текст помилки. Стан помилки вмикає САМА наявність тексту.",[],{"name":297,"global":248,"description":298,"tags":299,"required":248,"type":285,"schema":285},"hint","Підказка під полем. Ховається, коли показано помилку.",[],{"name":301,"global":248,"description":220,"tags":302,"required":248,"type":285,"schema":285},"id",[],{"name":77,"global":248,"description":304,"tags":305,"required":248,"type":261,"schema":261},"Найменше допустиме значення.",[],{"name":80,"global":248,"description":307,"tags":308,"required":248,"type":261,"schema":261},"Найбільше допустиме значення.",[],{"name":310,"global":248,"description":311,"tags":312,"required":248,"type":261,"schema":261},"stepFast","Крок PageUp\u002FPageDown. Типово — `step` × 10.",[],{"name":192,"global":248,"description":314,"tags":315,"required":248,"type":285,"schema":285},"Суфікс одиниці: %, грн, шт. Потрапляє і в `aria-valuetext`.",[],{"name":317,"global":248,"default":318,"description":319,"tags":320,"required":248,"type":321,"schema":322},"formatOnBlur","true","Групувати тисячі, поки поле поза фокусом. У фокусі показується сире\r\nчисло: редагувати рядок із нерозривними пробілами неможливо.",[],"boolean",{"kind":269,"type":321,"schema":323},{"0":324,"1":318},"false",{"name":326,"global":248,"default":318,"description":327,"tags":328,"required":248,"type":321,"schema":329},"steppers","Кнопки «−» і «+». Без них лишається чистий числовий ввід.",[],{"kind":269,"type":321,"schema":330},{"0":324,"1":318},{"name":332,"global":248,"description":220,"tags":333,"required":248,"type":321,"schema":334},"required",[],{"kind":269,"type":321,"schema":335},{"0":324,"1":318},{"name":337,"global":248,"description":220,"tags":338,"required":248,"type":321,"schema":339},"disabled",[],{"kind":269,"type":321,"schema":340},{"0":324,"1":318},{"name":342,"global":248,"description":220,"tags":343,"required":248,"type":321,"schema":344},"readonly",[],{"kind":269,"type":321,"schema":345},{"0":324,"1":318},[],[348,354],{"name":349,"description":220,"tags":350,"type":351,"signature":352,"schema":353},"update:modelValue",[],"[value: number]","(event: \"update:modelValue\", value: number): void",[261],{"name":355,"description":220,"tags":356,"type":351,"signature":357,"schema":358},"change",[],"(event: \"change\", value: number): void",[261],[360,368],{"name":361,"type":362,"description":363,"tags":364,"schema":365},"focus","() => void","Ставить фокус на поле.",[],{"kind":366,"type":367},"event","(): void",{"name":369,"type":362,"description":370,"tags":371,"schema":372},"select","Виділяє весь текст у полі.",[],{"kind":366,"type":367},"2VUcbp3dxkCRnxnAzIjISZ1xqFaEUYgmTU5KxldmH38",1788072639724]