Tour

import '@bluui/web/styles.css'

import { createTour } from "@bluui/web";
export function mount(host: HTMLElement) {
  const start = document.createElement("button");
  start.textContent = "Start tour";
  start.className = "blu-common-button blu-common-button--primary";
  const target = document.createElement("button");
  target.id = "project-" + crypto.randomUUID();
  target.textContent = "Create project";
  target.className = "blu-common-button";
  host.append(start, target);
  const tour = createTour(host, { Steps: [
    { Key: "create", Title: "Create your project", Description: "Choose a name and invite your team.", TargetId: target.id },
    { Key: "finish", Title: "Ready to work", Description: "Steps without a target are centered." },
  ] }, { Completed: () => { host.dataset.completed = "true"; } });
  start.onclick = () => tour.update({ IsOpen: true, CurrentStep: 1 });
  return { destroy() { tour.destroy(); start.remove(); target.remove(); } };
}

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

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