Drawer

import '@bluui/web/styles.css'

import { createDrawer } from "@bluui/web";
export function mount(host: HTMLElement) {
  const open = document.createElement("button");
  open.textContent = "Open drawer";
  open.className = "blu-common-button blu-common-button--primary";
  const content = document.createElement("div");
  const label = document.createElement("label");
  label.textContent = "Account name";
  const input = document.createElement("input");
  input.value = "Northstar Studio";
  label.append(input);
  content.append(label);
  host.append(open);
  const panel = createDrawer(host, { Title: "Edit account", Content: content, ConfirmLabel: "Save changes" }, {
    Confirm: () => {
      host.dataset.account = input.value;
      panel.update({ IsOpen: false });
    },
  });
  open.onclick = () => panel.update({ IsOpen: true });
  return { destroy() { panel.destroy(); open.remove(); } };
}

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

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