ConfirmDialog
Імперативні діалоги — confirm, alert і prompt через await.
Приклад
Результат: —
Використання
const { confirm, alert, prompt } = useConfirm()
if (await confirm('Видалити запис?')) {
await removeRecord()
}
const name = await prompt({
title: 'Нова назва',
input: { label: 'Назва', required: true },
})
if (name !== null) await rename(name)
Рендерер UiConfirmDialog монтується рівно один раз, зазвичай в
app.vue поруч із UiToaster.
API
Коли використовувати
Перед незворотною дією: видалення, скасування підписки, вихід без збереження.
Коли НЕ використовувати
Не питайте підтвердження перед дією, яку легко скасувати. Зайве підтвердження навчає натискати «Так» не читаючи — і тоді воно не спрацює там, де справді потрібне. Краще дія + можливість скасувати.
Не використовуйте window.confirm: він блокує потік, не стилізується, у
деяких браузерах вимикається галочкою «більше не показувати» і не працює в
iframe із sandbox.
Доступність
Побудований на UiModal, а не на власній розмітці — щоб пастка фокуса,
блокування прокрутки і стек шарів були ті самі. Діалог підтвердження майже
завжди відкривається поверх іншого оверлея, і саме там власна
реалізація z-index ламалася б.
Фокус ставиться на кнопку підтвердження, а для prompt — у поле введення;
Enter у полі підтверджує. Виняток — danger: true: там фокус отримує
«Скасувати», бо діалог з'являється раптово й Enter, натиснутий за інерцією,
не має незворотно нічого видаляти.
Віддається фокус через проп initialFocus самої UiModal. Власний
.focus() після nextTick тут не працює: модалка ставить фокус усередині
focusTrap.activate(), тобто пізніше за будь-який watch у рендерері, і
мовчки його перебиває.
Повторний виклик, поки попередній діалог відкритий, закриває перший як
«скасовано». Інакше його проміс не зарезолвився б ніколи, і await на
ньому завис би назавжди.