Toast

Стан черги оголошено на рівні модуля, тому useToast() — singleton: усі виклики в застосунку працюють з однією чергою. Показати повідомлення можна звідки завгодно, не заводячи Pinia-стор і нічого не прокидаючи через дерево.

Приклад

Використання

const toast = useToast()

toast.success('Зміни збережено')
toast.error('Не вдалося зберегти')

// Кнопки дій під повідомленням: дії — дані тоста, а не слот, бо черга
// живе в composable поза шаблоном. Клік по дії сам тост не закриває —
// закривайте через dismiss(id), коли потрібно.
const id = toast.info('Файл завеликий', {
  duration: 0,
  actions: [
    { label: 'Стиснути', onClick: () => compress() },
    { label: 'Закрити', onClick: () => toast.dismiss(id) },
  ],
})

Контейнер UiToaster монтується рівно один раз, зазвичай в app.vue.

API

Коли використовувати

Для результату дії, який не вимагає реакції: збережено, надіслано, скопійовано.

Коли НЕ використовувати

Не повідомляйте тостом про те, що потребує рішення. Тост зникає — питання лишається. Для цього є useConfirm().

Не дублюйте тостом помилку поля форми: її місце під самим полем, де видно, що виправляти.

Доступність

Помилки отримують role="alert" і aria-live="assertive" — їх скрінрідер зачитає одразу. Решта — role="status" і polite, щоб не перебивати те, що користувач читає.

Тривалість різна за типом: помилка тримається 6 секунд, попередження 5, решта 3. Помилку треба встигнути прочитати, а не побачити спалах на місці, де щойно щось пішло не так.

Контейнер має data-overlay-ignore — маркер, який поважає useFocusTrap. Без нього тости, що з'явилися під відкритою модалкою, отримали б inert разом з рештою фону, і закрити їх було б неможливо.

Що виправлено проти вихідної версії

Таймер автозакриття тепер скасовується при ручному. Раніше він лишався жити: користувач закривав тост хрестиком, а через секунду спрацьовував відкладений splice і зносив інший тост, який на той час опинився на його місці в масиві.

Тони беруть токени статусів. Вихідна версія малювала попередження білим по bg-amber-500 — контраст ≈1.9:1, тобто найгірше читабельним було саме те повідомлення, яке найважливіше прочитати.