VGAlert
Подтверждения и сообщения: modal, dropdown, overlay, Data API и AJAX.
Справочник API
Методы, параметры, события и CSS-переменные.
Под каждым примером — его HTML, JavaScript и CSS. Подключите JS из
vgapp и SCSS из vgapp/scss (или готовый CSS пакета).
Кнопки и раскладка используют OKAUX 1.0.2; тема сайта управляется OKAUX.
Публичные методы
VGAlert не требует создания экземпляра снаружи: основные сценарии доступны через статические методы.
| Метод | Назначение |
|---|---|
VGAlert.boot() |
Подключает делегированный Data API. Повторный вызов безопасен. |
VGAlert.call(options, lang) |
Открывает alert и возвращает Promise с accepted и timestamp. |
VGAlert.confirm(element, options) |
Сразу запускает confirm на элементе, читает data-атрибуты и отправляет DOM-события. Promise не возвращает; параметры экземпляра сохраняются с первого вызова. |
Основные параметры
Вложенные параметры Data API записываются через дефис: render.type становится data-render-type, message.title — data-message-title.
| Параметр | По умолчанию | Тип / значения | Назначение |
|---|---|---|---|
mode |
'confirm' |
'confirm' | 'info' |
Количество и назначение кнопок. |
size |
'default' |
'default' | 'compact' |
Размер alert; compact добавляет модификатор .vg-alert-compact. |
theme |
'danger' |
'danger' | 'warning' | 'success' | 'info' |
Семантическая тема и иконка. |
render.type |
'modal' |
'modal' | 'overlay' | 'dropdown' |
Контейнер отображения. |
render.dismiss |
false |
boolean |
После accept в overlay закрывает родительский контейнер. |
message.title |
Из языкового пакета |
string |
Заголовок сообщения. |
message.description |
Из языкового пакета |
string |
Описание сообщения. |
buttons.agree / cancel |
Встроенные кнопки |
object |
Тег, type, текст, классы, атрибуты или готовый element. |
modal |
Параметры VGModal |
object |
Backdrop, keyboard, centered, dismiss и animation. |
dropdown |
Параметры VGDropdown |
object |
Placement, hover и animation. |
ajax |
GET без route |
object |
Route, method, target, loader, once и output. |
relatedTarget |
null |
Element |
Опорный элемент для overlay и dropdown. |
Поведение и ограничения
Эти особенности важны при проектировании пользовательского сценария.
- Одновременно может быть открыт только один VGAlert; следующий
call()отклонит Promise сaccepted: false. - Overlay требует
relatedTargetвнутри.vg-modalили.vg-sidebar, иначе используется modal. - Dropdown требует
relatedTarget, подключённый к DOM, иначе используется modal. - Enter подтверждает alert, Escape отменяет его. В overlay Escape также обрабатывается родительским контейнером с keyboard: true и может закрыть его. В режиме info Escape и единственная кнопка завершают Promise через reject.
- AJAX выполняется только в цепочке
VGAlert.confirm(); простойVGAlert.call()сам запрос не отправляет.
События confirm / Data API
- vg.alert.loaded
- После AJAX: event.stats (success/error), event.data — тело ответа.
- vg.alert.accept
- event.vgalert содержит { accepted, timestamp } без AJAX или { status, data } после запроса. Проверяйте status: HTTP-ошибка также завершает AJAX-цепочку.
- vg.alert.reject
- Отмена или отклонённая цепочка. Результат находится в event.vgalert.
- vg.alert.finally
- Завершение цепочки; event.vgalert равен строке finally.
CSS-переменные
Переопределяйте переменные на .vg-alert-wrapper или .vg-alert-overlay. Переменные темы наследуются от OKAUX через vgapp/theme; отдельный переключатель не нужен.
- --vg-alert-color / --vg-alert-icon
- Цвет текста и иконки, зависящий от семантической темы.
- --vg-alert-buttons-bg
- Фон области действий, по умолчанию --vg-surface-muted-bg.
- --vg-alert-overlay-z-index
- Слой внутри родителя: 1.
- --vg-alert-overlay-backdrop-bg / --vg-alert-overlay-backdrop-show-bg
- Прозрачный начальный фон и затемнение --vg-backdrop-subtle-color.
- --vg-alert-overlay-backdrop-transition
- Переход фона: background-color .05s linear.
- --vg-alert-overlay-wrapper-bg / --vg-alert-overlay-wrapper-width
- Фон --vg-surface-bg и ширина 90%. Compact задаёт собственную ширину.
- --vg-alert-overlay-wrapper-top / --vg-alert-overlay-wrapper-start
- Положение: 1rem сверху и 50% слева.
- --vg-alert-overlay-wrapper-transform / --vg-alert-overlay-wrapper-show-transform
- Начальное translate(-50%, -1rem) и открытое translate(-50%, 0).
- --vg-alert-overlay-wrapper-transition
- Переход панели: transform .12s ease-out.