# @web/kanban

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

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

## 快速上手

### 1. 引入模块
使用 `loader.js` 或直接通过 `importmap` 引入：

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

### 2. 使用组件
```html
<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)
```typescript
interface Column {
  id: string;
  title: string;
  items: Item[];
}

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

### 事件 (Events)
- `@update`: 当看板项位置发生变化时触发。`event.detail` 包含完整的 `Column[]` 数据。