VGToast

<div class="d-flex flex-wrap gap-2">
<button type="button" id="toast-api-show" class="btn btn-primary btn-sm">show</button>
<button type="button" id="toast-api-hide" class="btn btn-primary btn-sm">hide</button>
<button type="button" id="toast-api-toggle" class="btn btn-primary btn-sm">toggle</button>
<button type="button" id="toast-api-dispose" class="btn btn-primary btn-sm">dispose</button>
<button type="button" id="toast-api-init" class="btn btn-primary btn-sm">init</button>
</div>
<label class="d-block mt-3"><input type="checkbox" id="toast-prevent"> Запретить скрытие через preventDefault()</label>
<pre id="toast-api-log" class="toast-demo-log" role="log" aria-live="polite">Журнал событий</pre>
<div id="toast-api" class="vg-toast bottom center" role="status" aria-live="polite" >
  <div class="vg-toast-wrapper">
    <div class="vg-toast-content"><div class="vg-toast-body">Управление экземпляром. Esc и кнопка закрытия вызывают hide().</div></div>
    <div class="vg-toast-button"><button type="button" class="vg-btn-close" data-vg-dismiss="toast" aria-label="Закрыть уведомление"></button></div>
  </div>
</div>

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

function initToastDemo() {
  const element = document.querySelector('#toast-api');
  if (!element) return;
  const log = document.querySelector('#toast-api-log');
  const write = text => { log.textContent = (log.textContent + '\n' + text).split('\n').slice(-12).join('\n'); };
  let instance;
  const init = () => {
    instance = VGToast.getOrCreateInstance(element, {static: true, enableClickToast: false, animation: {enable: false, delay: 0}});
    write('Экземпляр готов');
  };
  ['show', 'shown', 'hide', 'hidden'].forEach(name => {
    element.addEventListener('vg.toast.' + name, event => {
      if (name === 'hide' && document.querySelector('#toast-prevent').checked) {
        event.preventDefault();
        write('hide отменён');
      } else write(name);
    });
  });
  init();
  ['show', 'hide', 'toggle'].forEach(method => {
    document.querySelector('#toast-api-' + method).addEventListener('click', () => {
      if (instance) instance[method]();
      else write('Сначала нажмите init');
    });
  });
  document.querySelector('#toast-api-dispose').addEventListener('click', () => {
    if (!instance) return;
    if (element.classList.contains('show')) { write('Сначала hide, затем dispose'); return; }
    instance.dispose();
    instance = null;
    write('dispose: статический DOM сохранён');
  });
  document.querySelector('#toast-api-init').addEventListener('click', init);
}

initToastDemo();

/* Композиция демо и публичные переменные VGToast. Тему переключает OKAUX. */
.page-module-toast .vg-toast {
  --vg-toast-width: min(28rem, 100%);
  --vg-toast-border-radius: var(--vg-radius-lg);
  --vg-toast-background-color: var(--vg-bg-secondary);
  --vg-toast-color: var(--vg-text-primary);
  --vg-toast-border-color: var(--vg-border-default);
}
.page-module-toast .vg-toast-content { min-width: 0; overflow-wrap: anywhere; }
.module-toast-content { min-width: 0; }
.toast-demo-log { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; background: var(--vg-bg-secondary); border: 1px solid var(--vg-border-default); border-radius: var(--vg-radius-lg); }
.toast-demo-reference { overflow-wrap: anywhere; }
.toast-demo-reference dt { margin-top: 1rem; font-family: monospace; }
.toast-demo-reference dd { margin: .25rem 0 0; }