[{"data":1,"prerenderedAt":331},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fconfirm-dialog":3,"component-meta:UiConfirmDialog":318},{"id":4,"title":5,"body":6,"component":215,"dependsOn":301,"description":308,"emitDescriptions":309,"extension":310,"meta":311,"navigation":79,"order":312,"path":313,"seo":314,"status":315,"stem":316,"__hash__":317},"docs\u002Fdocs\u002Fcomponents\u002Fconfirm-dialog.md","ConfirmDialog",{"type":7,"value":8,"toc":293},"minimark",[9,14,19,23,209,230,234,237,241,244,248,251,258,262,273,283,289],[10,11,13],"h2",{"id":12},"приклад","Приклад",[15,16],"component-preview",{"name":17,"stage":18},"confirm-basic","min-h-32",[10,20,22],{"id":21},"використання","Використання",[24,25,30],"pre",{"className":26,"code":27,"language":28,"meta":29,"style":29},"language-ts shiki shiki-themes github-light github-dark","const { confirm, alert, prompt } = useConfirm()\n\nif (await confirm('Видалити запис?')) {\n  await removeRecord()\n}\n\nconst name = await prompt({\n  title: 'Нова назва',\n  input: { label: 'Назва', required: true },\n})\nif (name !== null) await rename(name)\n","ts","",[31,32,33,74,81,106,117,123,128,148,160,178,184],"code",{"__ignoreMap":29},[34,35,38,42,46,50,53,56,58,61,64,67,71],"span",{"class":36,"line":37},"line",1,[34,39,41],{"class":40},"szBVR","const",[34,43,45],{"class":44},"sVt8B"," { ",[34,47,49],{"class":48},"sj4cs","confirm",[34,51,52],{"class":44},", ",[34,54,55],{"class":48},"alert",[34,57,52],{"class":44},[34,59,60],{"class":48},"prompt",[34,62,63],{"class":44}," } ",[34,65,66],{"class":40},"=",[34,68,70],{"class":69},"sScJk"," useConfirm",[34,72,73],{"class":44},"()\n",[34,75,77],{"class":36,"line":76},2,[34,78,80],{"emptyLinePlaceholder":79},true,"\n",[34,82,84,87,90,93,96,99,103],{"class":36,"line":83},3,[34,85,86],{"class":40},"if",[34,88,89],{"class":44}," (",[34,91,92],{"class":40},"await",[34,94,95],{"class":69}," confirm",[34,97,98],{"class":44},"(",[34,100,102],{"class":101},"sZZnC","'Видалити запис?'",[34,104,105],{"class":44},")) {\n",[34,107,109,112,115],{"class":36,"line":108},4,[34,110,111],{"class":40},"  await",[34,113,114],{"class":69}," removeRecord",[34,116,73],{"class":44},[34,118,120],{"class":36,"line":119},5,[34,121,122],{"class":44},"}\n",[34,124,126],{"class":36,"line":125},6,[34,127,80],{"emptyLinePlaceholder":79},[34,129,131,133,136,139,142,145],{"class":36,"line":130},7,[34,132,41],{"class":40},[34,134,135],{"class":48}," name",[34,137,138],{"class":40}," =",[34,140,141],{"class":40}," await",[34,143,144],{"class":69}," prompt",[34,146,147],{"class":44},"({\n",[34,149,151,154,157],{"class":36,"line":150},8,[34,152,153],{"class":44},"  title: ",[34,155,156],{"class":101},"'Нова назва'",[34,158,159],{"class":44},",\n",[34,161,163,166,169,172,175],{"class":36,"line":162},9,[34,164,165],{"class":44},"  input: { label: ",[34,167,168],{"class":101},"'Назва'",[34,170,171],{"class":44},", required: ",[34,173,174],{"class":48},"true",[34,176,177],{"class":44}," },\n",[34,179,181],{"class":36,"line":180},10,[34,182,183],{"class":44},"})\n",[34,185,187,189,192,195,198,201,203,206],{"class":36,"line":186},11,[34,188,86],{"class":40},[34,190,191],{"class":44}," (name ",[34,193,194],{"class":40},"!==",[34,196,197],{"class":48}," null",[34,199,200],{"class":44},") ",[34,202,92],{"class":40},[34,204,205],{"class":69}," rename",[34,207,208],{"class":44},"(name)\n",[210,211,212,213,216,217,221,222,225,226,229],"p",{},"Рендерер ",[31,214,215],{},"UiConfirmDialog"," монтується ",[218,219,220],"strong",{},"рівно один раз",", зазвичай в\n",[31,223,224],{},"app.vue"," поруч із ",[31,227,228],{},"UiToaster",".",[10,231,233],{"id":232},"api","API",[235,236],"component-api",{},[10,238,240],{"id":239},"коли-використовувати","Коли використовувати",[210,242,243],{},"Перед незворотною дією: видалення, скасування підписки, вихід без\nзбереження.",[10,245,247],{"id":246},"коли-не-використовувати","Коли НЕ використовувати",[210,249,250],{},"Не питайте підтвердження перед дією, яку легко скасувати. Зайве\nпідтвердження навчає натискати «Так» не читаючи — і тоді воно не спрацює\nтам, де справді потрібне. Краще дія + можливість скасувати.",[210,252,253,254,257],{},"Не використовуйте ",[31,255,256],{},"window.confirm",": він блокує потік, не стилізується, у\nдеяких браузерах вимикається галочкою «більше не показувати» і не працює в\niframe із sandbox.",[10,259,261],{"id":260},"доступність","Доступність",[210,263,264,265,268,269,272],{},"Побудований на ",[31,266,267],{},"UiModal",", а не на власній розмітці — щоб пастка фокуса,\nблокування прокрутки і стек шарів були ті самі. Діалог підтвердження майже\nзавжди відкривається ",[218,270,271],{},"поверх іншого оверлея",", і саме там власна\nреалізація z-index ламалася б.",[210,274,275,276,278,279,282],{},"Фокус ставиться на кнопку підтвердження, а для ",[31,277,60],{}," — у поле введення.\n",[31,280,281],{},"Enter"," у полі підтверджує.",[210,284,285,286,288],{},"Повторний виклик, поки попередній діалог відкритий, закриває перший як\n«скасовано». Інакше його проміс не зарезолвився б ніколи, і ",[31,287,92],{}," на\nньому завис би назавжди.",[290,291,292],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":29,"searchDepth":76,"depth":76,"links":294},[295,296,297,298,299,300],{"id":12,"depth":76,"text":13},{"id":21,"depth":76,"text":22},{"id":232,"depth":76,"text":233},{"id":239,"depth":76,"text":240},{"id":246,"depth":76,"text":247},{"id":260,"depth":76,"text":261},[302,303,304,305,306,307],"app\u002Fcomposables\u002FuseConfirm.ts","app\u002Fcomponents\u002Fui\u002FUiModal.vue","app\u002Fcomposables\u002FuseOverlayStack.ts","app\u002Fcomposables\u002FuseScrollLock.ts","app\u002Fcomposables\u002FuseFocusTrap.ts","app\u002Fcomposables\u002FuseReducedMotion.ts","Імперативні діалоги — confirm, alert і prompt через await.",{},"md",{},21,"\u002Fdocs\u002Fcomponents\u002Fconfirm-dialog",{"title":5,"description":308},"stable","docs\u002Fcomponents\u002Fconfirm-dialog","HktHgS3FmWJOrV0M-ZUnlzwBNlc-1RdmW3ZgIccHIbA",{"mode":319,"prefetch":320,"preload":320,"filePath":321,"declarationPath":322,"pascalName":215,"kebabName":323,"chunkName":324,"priority":37,"_scanned":79,"meta":325},"all",false,"app\u002Fcomponents\u002Fui\u002FUiConfirmDialog.vue","C:\u002Fproject-DS\u002FtatetUI\u002Fapp\u002Fcomponents\u002Fui\u002FUiConfirmDialog.vue","ui-confirm-dialog","components\u002Fui-confirm-dialog",{"type":37,"props":326,"slots":327,"events":328,"exposed":329,"hash":330},[],[],[],[],"AnYndve7EAnanOcEICpqDpLDDtkd6gK8e6XxhB4gcLk",1788072639718]