Kanban

import '@bluui/web/styles.css'

import { createKanban } from "@bluui/web";
export function mount(host: HTMLElement) {
  const board = createKanban(
    host,
    {
      Columns: [
        { Key: "todo", Label: "To do", Color: "Primary" },
        { Key: "done", Label: "Done", Color: "Success" },
      ],
      Cards: [
        { Key: "task-1", ColumnKey: "todo", Title: "Build the first page" },
      ],
      AllowEditing: true,
      EnableBulkSave: true,
      AllowReorder: true,
    },
    {
      SaveRequested: (requestId, cards) => {
        // Runnable local example. Replace this with an awaited request to your own backend.
        try {
          localStorage.setItem("bluui-starter-cards", JSON.stringify(cards));
          board.update({
            SaveResultRequestId: requestId,
            SaveResultSuccess: true,
            SaveResultCards: cards,
            SaveResultMessage: "Saved in this browser.",
          });
        } catch {
          board.update({
            SaveResultRequestId: requestId,
            SaveResultSuccess: false,
            SaveResultMessage: "Saving failed. Your draft remains available.",
          });
        }
      },
    },
  );
  return board;
}

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

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