Toast

Черга сповіщень, доступна з будь-якого місця без прокидання пропсів.

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

Приклад

Повідомлення для кожної ситуації

Спробуйте взаємодію

Змахніть картку вбік, щоб закрити. Від трьох повідомлень з’явиться «Очистити всі». Наведення, фокус і дотик призупиняють автозакриття.

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

const toast = useToast()

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

// Прибрати всі повідомлення та їхні таймери, включно з duration: 0.
toast.dismissAll()

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

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

API

useToast()

Метод	Призначення
`show(options): number`	Додає повідомлення й повертає його id. Опції: `message`, `title`, `type`, `duration`, `actions`.
`success / info / warning / error(message, options?): number`	Скорочені виклики для відповідного статусу.
`dismiss(id): void`	Закриває одне повідомлення та скасовує його таймер.
`dismissAll(): void`	Очищає всю чергу й усі таймери. Безпечний для порожньої черги.
`pause(id) / resume(id): void`	Призупиняє або відновлює автозакриття; після відновлення лишається щонайменше секунда.

toasts — спільний реактивний список у порядку надходження. Дії не закривають Toast автоматично; duration: 0 залишає його до ручного закриття.

Черга та мобільні пристрої

На екранах від 768 px Toast з’являються зверху праворуч, до 400 px завширшки. На телефоні — знизу, із полями та відступом від системної панелі. Висота області обмежена: до 70% екрана на комп’ютері й 50% на мобільному. Довга черга прокручується, а панель керування лишається доступною.

Від трьох повідомлень з’являються лічильник і «Очистити всі». Кнопка прибирає також постійні повідомлення. Нові Toast додаються в кінець; список слідує за ними лише тоді, коли ви вже перебуваєте біля кінця.

Свайп ліворуч або праворуч на 48 px закриває окрему картку. Короткий або скасований жест повертає її на місце. Вертикальний рух прокручує список. Натискання кнопок дій не починає свайп.

Поки курсор, фокус або дотик перебувають у черзі, автозакриття всіх її повідомлень призупинене, включно з новими. Відлік продовжиться після завершення всіх взаємодій.

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

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

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

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

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

Доступність

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

Поява Toast не перехоплює фокус. Кнопки доступні з клавіатури й мають видимий індикатор фокуса; мобільні цілі натискання — щонайменше 44×44 px. Системне налаштування зменшеного руху прибирає анімації переміщення.

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

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

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

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

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