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