GrAlert

Примеры 6 у каждого — живое демо и его код

• Предупреждение рядом с причиной

  Сообщение стоит в карточке оплаты, а не в углу экрана, и остаётся, пока с ним не разберутся, — в отличие от тоста. Заголовок — факт, текст — последствие, а слот #actions ставит выходы под текстом. «Напомнить через неделю» меняет предупреждение на заметку info той же формы.

  BillingBusiness plan · 18 seats

  Active

  Your card expires in 12 days

  Visa ending 4242 expires on 31 October. The November invoice of €522.00 will fail without a new card.

  Update cardRemind me in a week

  Next invoice1 November · €522.00

  Payment methodVisa •••• 4242 · expires 10/26
  Код и пропы

• Результат, который слышит диктор

  Одно сообщение, у которого меняются слова по итогу синхронизации: живой регион объявляет смену содержимого, а только что вставленный может пройти незамеченным. При live="auto" роль выбирает тон — warning и danger перебивают, success ждёт паузы. Запустите синхронизацию несколько раз: сервис отвечает по-разному.

  Fabrikam Books ConnectedInvoices and payments sync every hour.

  Sync now

  Last sync 2 hours ago

  214 invoices and 61 payments are in Fabrikam Books.

  Open Fabrikam Books
  Код и пропы

• Тон, вес и значок, который называет предмет

  Тон и вариант — разные оси: инцидент — danger на тонированной подложке, плановые работы — outline и с ним не спорят. #icon меняет глиф на предмет — карту, ракету, часы. Сообщения, пришедшие вместе со страницей, — содержимое, а не события, поэтому у инцидента live="off".

  System statusUpdated 2 minutes ago

  Partial outage

  Card payments are delayed

  Charges go through, but receipts arrive up to 20 minutes late. We are working on it with the payment provider.

  Subscribe to updates

  Release 2026.10.6 is live

  Faster exports and the new invoice editor are on for every workspace.

  Maintenance on Saturday, 11 October

  02:00–03:00 UTC. Sign-in and the API stay up; exports pause for about ten minutes.
  Код и пропы

• Два способа закрыть

  С v-model:visible крестик прячет сообщение, и больше никому знать не нужно. Только с @close это просьба: сообщение остаётся, решает экран — здесь он сначала спрашивает, потому что выключение сводок меняет пространство для всех.

  New: export to Excel

  Number formats and formulas survive the export. Find it under Reports → Export.

  AI summaries are on

  Every invoice and report opens with a three-line summary.

  How summaries work
  Код и пропы

• Тихие заметки в плотном спискеSettingsNotes.vueдемо + код →
• Партнёр в своём цветеPartnerBanner.vueдемо + код →

API порождается из пакета · разойтись не может

import type { GrAlertTone, GrAlertLive, GrAlertProps } from '@feugene/granularity/components/GrAlert'

const grAlertConfig: import("@feugene/granum/contract").GranumComponentDescriptor<"GrAlert">;

type GrAlertTone = GrTone;

type GrAlertLive = 'auto' | 'assertive' | 'polite' | 'off';

interface GrAlertProps {
    /**
     * Смысл сообщения: цвет подложки и рамки, глиф иконки и — при `live="auto"` —
     * роль для скринридера. `warning` и `danger` перебивают речь, остальные ждут
     * паузы. По умолчанию `info`; глобально — `componentDefaults`.
     */
    tone?: GrAlertTone;
    /**
     * Вес: `soft` — тонированная подложка, `outline` — только рамка тона для
     * спокойных пояснений рядом с другими сообщениями. По умолчанию `soft`.
     */
    variant?: GrAlertVariant;
    /**
     * Короткий факт первой строкой: «Карта истекает через 12 дней». Подробности —
     * в тексте под ним; без заголовка сообщение — одна строка текста.
     */
    title?: string;
    /**
     * Кнопка закрытия. Сама она сообщение не прячет: эмитит `close` и
     * `update:visible` — прятать ли, решает экран (см. `visible`).
     */
    closable?: boolean;
    /**
     * Как сообщение объявляется скринридеру: `auto` — по тону, `assertive` —
     * `role="alert"`, `polite` — `role="status"`, `off` — без роли, когда оно уже
     * объявлено иначе. По умолчанию `auto`.
     */
    live?: GrAlertLive;
    /**
     * Показывать ли иконку тона. Своя иконка — слотом `#icon`; проп нужен для
     * случая «иконка мешает»: узкая колонка, плотный список, сообщение в форме.
     */
    icon?: boolean;
    /**
     * Видимость сообщения — **только контролируемая**: без пропа алерт виден
     * всегда, и закрытие остаётся заботой потребителя (`@close`). С
     * `v-model:visible` компонент прячет себя сам.
     *
     * Собственного состояния у пропа нет намеренно. Оно превратило бы кнопку
     * закрытия в необратимое действие у всех, кто уже живёт на `@close` и,
     * например, спрашивает по нему подтверждение.
     */
    visible?: boolean;
    /**
     * Подложка вместо тона — цвет бренда или партнёра. Раскладка, иконка и
     * закрытие остаются прежними. Переменная `--gr-alert-bg` делает то же из CSS.
     */
    backgroundColor?: string;
    /** Цвет текста, заголовка и иконки вместо тона (`--gr-alert-*` в `tokens.md`). */
    textColor?: string;
    /** Цвет рамки вместо тона; у `outline` это главный цвет сообщения. */
    borderColor?: string;
}

interface GrAlertEmits {
    /** Нажата кнопка закрытия. Эмитится всегда, с `v-model:visible` и без него. */
    (e: 'close'): void;
    /** Пользователь закрыл сообщение (`v-model:visible`). */
    (e: 'update:visible', value: boolean): void;
}

interface GrAlertConfigurableProps {
    tone: GrTone;
    variant: GrAlertVariant;
    closable: boolean;
    live: GrAlertLive;
}

type GrAlertVariant = typeof GR_ALERT_VARIANTS[number];

Связанные четвёртый вопрос: когда не это

• GrToasterОбратная связь

  Сообщение о результате действия, короткое

• GrResponseErrorBannerОбратная связь

  Ошибка ответа сервера со статусом и деталями

• GrFormFieldФормы

  Ошибка одного поля

• GrEmptyStateОбратная связь

  На экране пусто, и надо объяснить почему

• GrConfirmDialogСлои

  Требуется ответ пользователя

• GrMarkdownРедакторссылается сюда

  Берут, когда текст пришёл markdown-строкой и его надо показать оформленным.

• GrTooltipНавигацияссылается сюда

  Берут, когда подпись к иконочной кнопке.