[{"data":1,"prerenderedAt":162},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fswitch":3,"component-meta:UiSwitch":116},{"id":4,"title":5,"body":6,"component":102,"dependsOn":103,"description":104,"emitDescriptions":105,"extension":107,"meta":108,"navigation":109,"order":110,"path":111,"seo":112,"status":113,"stem":114,"__hash__":115},"docs\u002Fdocs\u002Fcomponents\u002Fswitch.md","Switch",{"type":7,"value":8,"toc":93},"minimark",[9,14,19,23,26,30,34,38,46,50,73,90],[10,11,13],"h2",{"id":12},"приклад","Приклад",[15,16],"component-preview",{"name":17,"stage":18},"switch-basic","min-h-40",[10,20,22],{"id":21},"api","API",[24,25],"component-api",{},[10,27,29],{"id":28},"коли-використовувати","Коли використовувати",[31,32,33],"p",{},"Для налаштування, що діє негайно. Якщо зміна застосується лише після\nнатискання «Зберегти» — це чекбокс у формі, а не перемикач.",[10,35,37],{"id":36},"коли-не-використовувати","Коли НЕ використовувати",[31,39,40,41,45],{},"Не ставте перемикач без доступної назви. Якщо поруч немає видимого тексту,\n",[42,43,44],"code",{},"label"," обов'язковий.",[10,47,49],{"id":48},"доступність","Доступність",[31,51,52,55,56,59,60,63,64,67,68,72],{},[42,53,54],{},"role=\"switch\""," і ",[42,57,58],{},"aria-checked",". У вихідних проєктах це був ",[42,61,62],{},"\u003Cdiv>","\nусередині ",[42,65,66],{},"\u003Cbutton>",", де стан передавався ",[69,70,71],"strong",{},"лише кольором"," — для\nскрінрідера перемикач просто не існував.",[31,74,75,76,79,80,82,83,85,86,89],{},"Окремої згадки вартий ",[42,77,78],{},"presentational",". Коли перемикач стоїть усередині\nкнопки-рядка меню, вкладені ",[42,81,66],{}," у ",[42,84,66],{}," — невалідний HTML. У\nцьому режимі компонент рендериться як ",[42,87,88],{},"\u003Cspan aria-hidden>",", а роль і стан\nнесе зовнішня кнопка.",[31,91,92],{},"Сам перемикач навмисно дрібний: це індикатор, а не кнопка. Але 20×36 пальцем\nне влучиш, тому на тач-пристроях навколо нього є невидима зона 44×44 —\nвізуальна щільність списків при цьому не страждає.",{"title":94,"searchDepth":95,"depth":95,"links":96},"",2,[97,98,99,100,101],{"id":12,"depth":95,"text":13},{"id":21,"depth":95,"text":22},{"id":28,"depth":95,"text":29},{"id":36,"depth":95,"text":37},{"id":48,"depth":95,"text":49},"UiSwitch",[],"Перемикач із роллю switch і невидимою зоною натискання 44px.",{"update:modelValue":106},"Новий стан перемикача.","md",{},true,12,"\u002Fdocs\u002Fcomponents\u002Fswitch",{"title":5,"description":104},"stable","docs\u002Fcomponents\u002Fswitch","zswVd9hjLfPECyOc-riG6USdghBUZ3Xa7LYS1g14ZJ4",{"mode":117,"prefetch":118,"preload":118,"filePath":119,"declarationPath":120,"pascalName":102,"kebabName":121,"chunkName":122,"priority":123,"_scanned":109,"meta":124},"all",false,"app\u002Fcomponents\u002Fui\u002FUiSwitch.vue","C:\u002Fproject-DS\u002FtatetUI\u002Fapp\u002Fcomponents\u002Fui\u002FUiSwitch.vue","ui-switch","components\u002Fui-switch",1,{"type":123,"props":125,"slots":150,"events":151,"exposed":160,"hash":161},[126,136,140,145],{"name":127,"global":118,"description":128,"tags":129,"required":109,"type":130,"schema":131},"modelValue","Стан перемикача. Використовуйте через `v-model`.",[],"boolean",{"kind":132,"type":130,"schema":133},"enum",{"0":134,"1":135},"false","true",{"name":44,"global":118,"description":137,"tags":138,"required":118,"type":139,"schema":139},"Доступна назва. ОБОВ'ЯЗКОВА, якщо поруч немає видимого лейбла.",[],"string",{"name":141,"global":118,"description":94,"tags":142,"required":118,"type":130,"schema":143},"disabled",[],{"kind":132,"type":130,"schema":144},{"0":134,"1":135},{"name":78,"global":118,"description":146,"tags":147,"required":118,"type":130,"schema":148},"Суто візуальний режим: рендериться `\u003Cspan aria-hidden>` без власної\r\nінтерактивності.\r\n\r\nПотрібен, коли перемикач стоїть УСЕРЕДИНІ кнопки-рядка меню: вкладені\r\n`\u003Cbutton>` у `\u003Cbutton>` — невалідний HTML. У такому разі\r\n`role=\"switch\"` і `aria-checked` несе зовнішня кнопка, а перемикач\r\nлишається лише картинкою.",[],{"kind":132,"type":130,"schema":149},{"0":134,"1":135},[],[152],{"name":153,"description":94,"tags":154,"type":155,"signature":156,"schema":157},"update:modelValue",[],"[value: boolean]","(event: \"update:modelValue\", value: boolean): void",[158],{"kind":132,"type":130,"schema":159},[134,135],[],"0yRKT13cUPO7gOD-BHMjfCNvbvJiyZc3QfMY7Tu8rV4",1788072641192]