VGAlert

<button type="button" class="btn btn-primary btn-sm" id="alert-data-trigger"
  data-vg-toggle="alert" data-size="compact"
  data-message-title="Подтвердить выбор?"
  data-message-description="Data API читает параметры с этой кнопки."
  data-buttons-agree-class='["btn-primary", "btn-sm"]'
  data-buttons-cancel-class='["btn-surface", "btn-sm"]'>Запустить Data API</button>
<p id="alert-data-result" role="status" class="mt-3 mb-0">Ожидает события.</p>

/**
 * Описание: рабочий пример VGAlert для копирования и демо.
 * Возможности: запуск публичного API и отображение результата без изменения данных.
 */
import { VGAlert } from 'vgapp';

function initAlertDemo() {
  // Дополнительная инициализация не требуется: используется Data API.
  // VGAlert.boot() нужен один раз, если приложение не запускает модули автоматически.
  VGAlert.boot();
  const button = document.querySelector('#alert-data-trigger');
  if (!button) return;
  const result = document.querySelector('#alert-data-result');
  for (const name of ['accept', 'reject', 'finally']) {
    button.addEventListener('vg.alert.' + name, () => {
      result.textContent += ' → vg.alert.' + name;
    });
  }
  button.addEventListener('click', () => { result.textContent = 'Ожидает решения'; });
}

initAlertDemo();

/* Дополнительные стили не требуются. */

<div id="alert-ajax-controls" class="d-flex flex-wrap gap-2">
  <button type="button" class="btn btn-primary btn-sm" data-alert-response="success">Успешный ответ</button>
  <button type="button" class="btn btn-surface btn-sm" data-alert-response="empty">Пустой ответ</button>
  <button type="button" class="btn btn-error btn-sm" data-alert-response="error">Ошибка 503</button>
</div>
<div id="alert-ajax-output" class="border rounded p-3 mt-3" aria-live="polite">Здесь появится ответ сервера.</div>
<pre id="alert-ajax-log" class="mt-3 mb-0" role="status">Запрос ещё не отправлялся.</pre>

/**
 * Описание: рабочий пример VGAlert для копирования и демо.
 * Возможности: запуск публичного API и отображение результата без изменения данных.
 */
import { VGAlert } from 'vgapp';

function initAlertDemo() {
  const controls = document.querySelector('#alert-ajax-controls');
  if (!controls) return;
  const log = document.querySelector('#alert-ajax-log');
  controls.querySelectorAll('button').forEach(button => {
    for (const name of ['loaded', 'accept', 'reject', 'finally']) {
      button.addEventListener('vg.alert.' + name, event => {
        const status = event.stats ?? event.vgalert?.status ?? '';
        log.textContent += '\nvg.alert.' + name + (status ? ': ' + status : '');
      });
    }
    button.addEventListener('click', () => {
      log.textContent = 'Ожидает подтверждения. GET отправится только после согласия.';
      VGAlert.confirm(button, {
        size: 'compact',
        message: { title: 'Выполнить тестовый GET?', description: 'Endpoint не изменяет данные.' },
        buttons: {"agree":{"text":"Продолжить","class":["btn-primary","btn-sm"]},"cancel":{"text":"Отмена","class":["btn-surface","btn-sm"]}},
        ajax: {
          route: '/api/alert/demo?mode=' + button.dataset.alertResponse,
          method: 'get', target: '#alert-ajax-output',
          loader: true, output: true, once: false,
        },
      });
    });
  });
}

initAlertDemo();

#alert-ajax-log { white-space: pre-wrap; overflow-wrap: anywhere; }