VGAlert

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

Базовые сценарии

Подтверждение и информационное сообщение через Promise.

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

Подтверждение через Promise

Modal используется по умолчанию. Согласие возвращает accepted: true, отмена — accepted: false через catch. Enter подтверждает, Esc отменяет.

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

<button type="button" class="btn btn-primary btn-sm" id="alert-confirm-trigger">Подтвердить действие</button>
<p id="alert-confirm-result" class="mt-3 mb-0" role="status">Ожидает действия.</p>

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

function initAlertDemo() {
  const button = document.querySelector('#alert-confirm-trigger');
  if (!button) return;
  const result = document.querySelector('#alert-confirm-result');
  button.addEventListener('click', () => {
    VGAlert.call({
      ...{
        "theme": "warning",
        "message": {
          "title": "Продолжить работу?",
          "description": "Пример показывает результат Promise. Данные не изменяются."
        },
        "buttons": {
          "agree": {
            "text": "Продолжить",
            "class": [
              "btn-primary",
              "btn-sm"
            ]
          },
          "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();

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

Информационное сообщение

Режим info оставляет только кнопку cancel. Её закрытие также проходит через catch — это ожидаемое поведение, а не ошибка запроса.

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

<button type="button" class="btn btn-primary btn-sm" id="alert-info-trigger">Показать сообщение</button>
<p id="alert-info-result" class="mt-3 mb-0" role="status">Ожидает действия.</p>

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

function initAlertDemo() {
  const button = document.querySelector('#alert-info-trigger');
  if (!button) return;
  const result = document.querySelector('#alert-info-result');
  button.addEventListener('click', () => {
    VGAlert.call({
      ...{
        "mode": "info",
        "theme": "success",
        "message": {
          "title": "Всё готово",
          "description": "Закрытие информационного сообщения обрабатывается в catch."
        },
        "buttons": {
          "cancel": {
            "text": "Понятно",
            "class": [
              "btn-success",
              "btn-sm"
            ]
          }
        }
      },
      relatedTarget: button,
    }, 'ru')
      .then(value => { result.textContent = 'Подтверждено: accepted = ' + value.accepted; })
      .catch(error => { result.textContent = 'Сообщение закрыто: accepted = ' + error.accepted; });
  });
}

initAlertDemo();

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