VueCraft NPM

Toast ​

Рендерер отдельного элемента, используемый внутри <ToastContainer> для каждого видимого тоста. Экспортируется отдельно для продвинутых случаев — полностью кастомный контейнер на основе useToastState(), либо переопределение слота #toast у <ToastContainer> напрямую компонентом <Toast> вместо собственной разметки.

vue
<Toast :toast="item" :on-dismiss="(id) => queue.dismiss(id)" />

Пропы ​

toast ​

ToastItem

Реактивный элемент тоста для рендера (из queue.active, useToastState() и т.д.).

onDismiss ​

(id: string) => void

Вызывается при закрытии тоста — кнопкой закрытия, свайпом, Escape или истечением таймера.

onGroupToggle ​

(groupKey: string) => void · по умолчанию: —

Вызывается при клике по счётчику группы. Актуально только при toast.groupCount.value > 1.

Слоты ​

toast-icon ​

Область видимости: { toast }

Заменяет иконку. По умолчанию — ToastIcon.

toast-content ​

Область видимости: { toast }

Заменяет область сообщения + действий.

toast-action ​

Область видимости: { toast }

Заменяет кнопки действия / отмены. По умолчанию — ToastActions.

toast-close ​

Область видимости: { toast, dismiss }

Заменяет кнопку закрытия.

toast-undo ​

Область видимости: { toast, remaining }

Заменяет прогресс-бар внизу тоста. По умолчанию — ToastProgressBar.

<ToastContainer> пробрасывает свои одноимённые слоты (#toast-icon, #toast-content и т.д.) напрямую в Toast — обращаться к слотам Toast напрямую нужно редко, разве что вы рендерите его вне <ToastContainer>.

Доступность ​

Toast выставляет role="alert" для типа error/warning или приоритета critical, role="status" в остальных случаях; aria-live — "assertive" для приоритета critical (либо то, что переопределяет options.ariaLive), "polite" в остальных случаях; aria-atomic="true" всегда; tabindex="0" только когда тост закрываемый, имеет действие или кнопку отмены (иначе он вообще не фокусируется с клавиатуры); Escape закрывает тост (только если закрываемый) и возвращает фокус на элемент, который был активен до появления тоста.

Компоненты слотов по умолчанию ​

Три меньших компонента экспортируются вместе с Toast — это дефолтные рендереры собственных именованных слотов Toast, вне этого контекста они не имеют самостоятельного смысла.

ToastIcon ​

{ type: ToastType, icon?: Component | string | false }

Рендерит icon, если это компонент или строка эмодзи; по умолчанию — встроенный SVG по type, когда icon не задан; ничего не рендерит, когда icon равен false. aria-hidden="true" (декоративный).

ToastProgressBar ​

{ remaining: number } — 0–1, доля оставшегося времени таймера.

Рендерит полосу обратного отсчёта внизу тоста (scaleX(remaining)). aria-hidden="true" (декоративный).

ToastActions ​

{ toast: ToastItem, onDismiss: (id: string) => void }

Рендерит кнопку действия (toast.options.action) и/или кнопку отмены (toast.options.undo), когда задано хотя бы одно.