VGAlert

Подтверждения и сообщения: modal, dropdown, overlay, Data API и AJAX.

Оформление

Темы, размеры, кнопки и локализация.

Под каждым примером — его HTML, JavaScript и CSS. Подключите JS из vgapp и SCSS из vgapp/scss (или готовый CSS пакета). Кнопки и раскладка используют OKAUX 1.0.2; тема сайта управляется OKAUX.

Темы и размеры

Четыре семантические темы и размеры default / compact. Тема сайта остаётся под управлением OKAUX, цвета VGApp подключены через общий SCSS-адаптер.

Выберите тему и размер.

HTML 
<div id="alert-themes-controls" class="d-flex flex-wrap gap-2">
  <button type="button" class="btn btn-error btn-sm" data-alert-theme="danger">Danger · default</button>
  <button type="button" class="btn btn-warning btn-sm" data-alert-theme="warning">Warning · compact</button>
  <button type="button" class="btn btn-success btn-sm" data-alert-theme="success">Success · default</button>
  <button type="button" class="btn btn-info btn-sm" data-alert-theme="info">Info · compact</button>
</div>
<p id="alert-themes-result" role="status" class="mt-3 mb-0">Выберите тему и размер.</p>
JavaScript 
/**
 * Описание: рабочий пример VGAlert для копирования и демо.
 * Возможности: запуск публичного API и отображение результата без изменения данных.
 */
import { VGAlert } from 'vgapp';

function initAlertDemo() {
  const controls = document.querySelector('#alert-themes-controls');
  if (!controls) return;
  controls.querySelectorAll('button').forEach(button => {
    button.addEventListener('click', () => {
      const theme = button.dataset.alertTheme;
      VGAlert.call({
        theme,
        size: ['warning', 'info'].includes(theme) ? 'compact' : 'default',
        mode: 'info',
        message: { title: theme, description: 'Цвета наследуют текущую тему сайта.' },
        buttons: { cancel: { text: 'Закрыть', class: ['btn-surface', 'btn-sm'] } },
      }).catch(() => { document.querySelector('#alert-themes-result').textContent = theme + ': сообщение закрыто.'; });
    });
  });
}

initAlertDemo();
CSS 
/* Дополнительные стили не требуются. */

Своя разметка кнопок

buttons.agree.element принимает доверенный HTML. Сохраните data-vg-alert-agree; для отмены используется data-vg-alert-cancel. Не вставляйте непроверенные данные.

Ожидает действия.

HTML 
<button type="button" class="btn btn-primary btn-sm" id="alert-buttons-trigger">Собственные кнопки</button>
<p id="alert-buttons-result" class="mt-3 mb-0" role="status">Ожидает действия.</p>
JavaScript 
/**
 * Описание: рабочий пример VGAlert для копирования и демо.
 * Возможности: запуск публичного API и отображение результата без изменения данных.
 */
import { VGAlert } from 'vgapp';

function initAlertDemo() {
  const button = document.querySelector('#alert-buttons-trigger');
  if (!button) return;
  const result = document.querySelector('#alert-buttons-result');
  button.addEventListener('click', () => {
    VGAlert.call({
      ...{
        "theme": "info",
        "message": {
          "title": "Сохранить черновик?",
          "description": "Кнопка согласия использует доверенную HTML-разметку."
        },
        "buttons": {
          "agree": {
            "element": "<button type=\"button\" class=\"btn btn-primary btn-sm\" data-vg-alert-agree>Сохранить</button>"
          },
          "cancel": {
            "text": "Вернуться",
            "class": [
              "btn-surface",
              "btn-sm"
            ]
          }
        }
      },
      relatedTarget: button,
    }, 'ru')
      .then(value => { result.textContent = 'Подтверждено: accepted = ' + value.accepted; })
      .catch(error => { result.textContent = 'Отменено: accepted = ' + error.accepted; });
  });
}

initAlertDemo();
CSS 
/* Дополнительные стили не требуются. */

Английская локализация

Второй аргумент call задаёт язык встроенных сообщений и кнопок: ru или en. Для confirm язык передают в options.lang.

Ожидает действия.

HTML 
<button type="button" class="btn btn-primary btn-sm" id="alert-locale-trigger">Open in English</button>
<p id="alert-locale-result" class="mt-3 mb-0" role="status">Ожидает действия.</p>
JavaScript 
/**
 * Описание: рабочий пример VGAlert для копирования и демо.
 * Возможности: запуск публичного API и отображение результата без изменения данных.
 */
import { VGAlert } from 'vgapp';

function initAlertDemo() {
  const button = document.querySelector('#alert-locale-trigger');
  if (!button) return;
  const result = document.querySelector('#alert-locale-result');
  button.addEventListener('click', () => {
    VGAlert.call({
      ...{
        "theme": "info",
        "buttons": {
          "agree": {
            "class": [
              "btn-primary",
              "btn-sm"
            ]
          },
          "cancel": {
            "class": [
              "btn-surface",
              "btn-sm"
            ]
          }
        }
      },
      relatedTarget: button,
    }, 'en')
      .then(value => { result.textContent = 'Подтверждено: accepted = ' + value.accepted; })
      .catch(error => { result.textContent = 'Отменено: accepted = ' + error.accepted; });
  });
}

initAlertDemo();
CSS 
/* Дополнительные стили не требуются. */