@web/kanban

原生 ESM 驱动的极简看板引擎，专注于无状态渲染与高性能拖拽。

核心特性

• 零依赖: 仅使用原生 Web Components 与 Drag & Drop API。
• 双轨分发: 提供源码版 kanban.js 与压缩版 kanban.min.js。
• 高性能: 支持数百个看板项的丝滑交互。

快速上手

1. 引入模块

使用 loader.js 或直接通过 importmap 引入：

<script type="importmap">
{
  "imports": {
    "@web/kanban": "./dist/kanban.js"
  }
}
</script>
<script type="module">
  import '@web/kanban';
</script>

2. 使用组件

<web-kanban id="my-kanban"></web-kanban>

<script type="module">
  const kanban = document.querySelector('#my-kanban');
  
  // 注入数据
  kanban.data = [
    {
      id: 'todo',
      title: '待处理',
      items: [
        { id: '1', content: '任务一' }
      ]
    },
    {
      id: 'done',
      title: '已完成',
      items: []
    }
  ];

  // 监听更新
  kanban.addEventListener('@update', (e) => {
    console.log('最新数据:', e.detail);
  });
</script>

API 参考

属性 (Properties)

• data: Array<Column> - 获取或设置看板数据。

数据结构 (Types)

interface Column {
  id: string;
  title: string;
  items: Item[];
}

interface Item {
  id: string;
  content: string;
}

事件 (Events)

• @update: 当看板项位置发生变化时触发。event.detail 包含完整的 Column[] 数据。