Notification

import '@bluui/web/styles.css'

import { createNotification, showNotification, updateNotification } from "@bluui/web";
export function mount(host: HTMLElement) {
  const hostKey = "example-" + crypto.randomUUID();
  const notices = createNotification(host, { HostKey: hostKey });
  const button = document.createElement("button");
  button.textContent = "Show notification";
  button.className = "blu-common-button blu-common-button--primary";
  button.onclick = () => showNotification({ Key: "saved", Title: "Changes saved", Color: "Success", Duration: 5 }, hostKey);
  const update = document.createElement("button");
  update.textContent = "Show then update";
  update.className = "blu-common-button";
  update.onclick = () => {
    showNotification({ Key: "export", Title: "Preparing export", Color: "Processing", Duration: 0 }, hostKey);
    updateNotification({ Key: "export", Title: "Export ready", Description: "Your application supplies the real export result.", Color: "Success", Duration: 5 }, hostKey);
  };
  host.append(button, update);
  return { destroy() { notices.destroy(); button.remove(); update.remove(); } };
}

const instance = mount(document.getElementById('example')!)

// When this page or framework component is removed:
// instance.destroy()