@composy/kanban-core 0.0.1

package/dist/index.js

@@ -0,0 +1,1279 @@
+/*!
+* ***********************************
+* @composy/kanban-core v0.0.1     *
+* Built with rollup               *
+* Build time: 2024-08-17 11:33:25 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+(function(global, factory) {
+	typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.LDesignKanban = {}));
+})(this, function(exports) {
+	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+	//#region src/utils/dom.ts
+	function createElement(tag, className, attributes) {
+		const el = document.createElement(tag);
+		if (className) el.className = className;
+		if (attributes) Object.entries(attributes).forEach(([key, value]) => {
+			el.setAttribute(key, value);
+		});
+		return el;
+	}
+	function resolveElement(target) {
+		if (typeof target === "string") return document.querySelector(target);
+		return target;
+	}
+	function clearElement(el) {
+		el.innerHTML = "";
+	}
+	function removeElement(el) {
+		el?.parentNode?.removeChild(el);
+	}
+	function insertAt(parent, child, index) {
+		const ref = parent.children[index];
+		if (ref) parent.insertBefore(child, ref);
+		else parent.appendChild(child);
+	}
+	//#endregion
+	//#region src/core/EventEmitter.ts
+	var EventEmitter = class {
+		constructor() {
+			this.listeners = /* @__PURE__ */ new Map();
+		}
+		/**
+		* 监听事件
+		*/
+		on(event, handler) {
+			if (!this.listeners.has(event)) this.listeners.set(event, /* @__PURE__ */ new Set());
+			this.listeners.get(event).add(handler);
+			return () => this.off(event, handler);
+		}
+		/**
+		* 监听一次性事件
+		*/
+		once(event, handler) {
+			const wrapper = (...args) => {
+				this.off(event, wrapper);
+				handler(...args);
+			};
+			return this.on(event, wrapper);
+		}
+		/**
+		* 移除监听器
+		*/
+		off(event, handler) {
+			this.listeners.get(event)?.delete(handler);
+		}
+		/**
+		* 触发事件
+		*/
+		emit(event, payload) {
+			const handlers = this.listeners.get(event);
+			if (handlers) handlers.forEach((handler) => {
+				try {
+					handler(payload);
+				} catch (err) {
+					console.error(`[KanbanBoard] Error in event handler for "${event}":`, err);
+				}
+			});
+		}
+		/**
+		* 移除所有监听器
+		*/
+		removeAll() {
+			this.listeners.clear();
+		}
+		/**
+		* 获取监听器数量
+		*/
+		listenerCount(event) {
+			return this.listeners.get(event)?.size ?? 0;
+		}
+	};
+	//#endregion
+	//#region src/utils/id.ts
+	let counter = 0;
+	function generateId(prefix = "kb") {
+		counter++;
+		return `${prefix}_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 6)}_${counter}`;
+	}
+	function resetIdCounter() {
+		counter = 0;
+	}
+	//#endregion
+	//#region src/core/ColumnManager.ts
+	var ColumnManager = class {
+		constructor(events) {
+			this.columns = [];
+			this.events = events;
+		}
+		/**
+		* 初始化列
+		*/
+		init(columns) {
+			this.columns = columns.map((col, index) => this.normalizeColumn(col, index));
+		}
+		/**
+		* 标准化列数据
+		*/
+		normalizeColumn(partial, index) {
+			return {
+				id: partial.id || generateId("col"),
+				title: partial.title || `Column ${index + 1}`,
+				cards: (partial.cards || []).map((card, cardIndex) => this.normalizeCard(card, partial.id || "", cardIndex)),
+				wipLimit: partial.wipLimit,
+				collapsed: partial.collapsed ?? false,
+				color: partial.color,
+				order: partial.order ?? index
+			};
+		}
+		/**
+		* 标准化卡片数据
+		*/
+		normalizeCard(partial, columnId, index) {
+			return {
+				id: partial.id || generateId("card"),
+				title: partial.title || "",
+				description: partial.description,
+				labels: partial.labels || [],
+				assignees: partial.assignees || [],
+				dueDate: partial.dueDate,
+				priority: partial.priority,
+				order: partial.order ?? index,
+				columnId: partial.columnId || columnId,
+				data: partial.data,
+				createdAt: partial.createdAt || (/* @__PURE__ */ new Date()).toISOString(),
+				updatedAt: partial.updatedAt
+			};
+		}
+		/**
+		* 获取所有列
+		*/
+		getColumns() {
+			return [...this.columns].sort((a, b) => a.order - b.order);
+		}
+		/**
+		* 获取单列
+		*/
+		getColumn(id) {
+			return this.columns.find((c) => c.id === id);
+		}
+		/**
+		* 添加列
+		*/
+		addColumn(partial) {
+			const column = this.normalizeColumn(partial, this.columns.length);
+			column.cards = column.cards.map((card) => ({
+				...card,
+				columnId: column.id
+			}));
+			this.columns.push(column);
+			this.events.emit("column:add", { column });
+			return column;
+		}
+		/**
+		* 移除列
+		*/
+		removeColumn(id) {
+			const index = this.columns.findIndex((c) => c.id === id);
+			if (index === -1) return void 0;
+			const [column] = this.columns.splice(index, 1);
+			this.reorderColumns();
+			this.events.emit("column:remove", { column });
+			return column;
+		}
+		/**
+		* 更新列
+		*/
+		updateColumn(id, changes) {
+			const column = this.columns.find((c) => c.id === id);
+			if (!column) return void 0;
+			Object.assign(column, changes, { id });
+			this.events.emit("column:update", {
+				column,
+				changes
+			});
+			return column;
+		}
+		/**
+		* 移动列
+		*/
+		moveColumn(id, toIndex) {
+			const fromIndex = this.columns.findIndex((c) => c.id === id);
+			if (fromIndex === -1) return;
+			const [column] = this.columns.splice(fromIndex, 1);
+			this.columns.splice(toIndex, 0, column);
+			this.reorderColumns();
+			this.events.emit("column:move", {
+				column,
+				fromIndex,
+				toIndex
+			});
+		}
+		/**
+		* 折叠/展开列
+		*/
+		toggleCollapse(id) {
+			const column = this.columns.find((c) => c.id === id);
+			if (!column) return;
+			column.collapsed = !column.collapsed;
+			this.events.emit("column:collapse", {
+				column,
+				collapsed: column.collapsed
+			});
+		}
+		/**
+		* 获取列中的卡片
+		*/
+		getCards(columnId) {
+			const column = this.columns.find((c) => c.id === columnId);
+			return column ? [...column.cards].sort((a, b) => a.order - b.order) : [];
+		}
+		/**
+		* 添加卡片到列
+		*/
+		addCard(columnId, partial) {
+			const column = this.columns.find((c) => c.id === columnId);
+			if (!column) return void 0;
+			if (column.wipLimit && column.cards.length >= column.wipLimit) {
+				this.events.emit("error", { error: /* @__PURE__ */ new Error(`Column "${column.title}" reached WIP limit (${column.wipLimit})`) });
+				return;
+			}
+			const card = this.normalizeCard({
+				...partial,
+				columnId
+			}, columnId, column.cards.length);
+			column.cards.push(card);
+			this.events.emit("card:add", {
+				card,
+				columnId
+			});
+			return card;
+		}
+		/**
+		* 移除卡片
+		*/
+		removeCard(cardId) {
+			for (const column of this.columns) {
+				const index = column.cards.findIndex((c) => c.id === cardId);
+				if (index !== -1) {
+					const [card] = column.cards.splice(index, 1);
+					this.reorderCards(column);
+					this.events.emit("card:remove", {
+						card,
+						columnId: column.id
+					});
+					return card;
+				}
+			}
+		}
+		/**
+		* 更新卡片
+		*/
+		updateCard(cardId, changes) {
+			for (const column of this.columns) {
+				const card = column.cards.find((c) => c.id === cardId);
+				if (card) {
+					Object.assign(card, changes, {
+						id: cardId,
+						columnId: column.id
+					});
+					card.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
+					this.events.emit("card:update", {
+						card,
+						changes
+					});
+					return card;
+				}
+			}
+		}
+		/**
+		* 获取单张卡片
+		*/
+		getCard(cardId) {
+			for (const column of this.columns) {
+				const card = column.cards.find((c) => c.id === cardId);
+				if (card) return card;
+			}
+		}
+		/**
+		* 移动卡片
+		*/
+		moveCard(cardId, toColumnId, toIndex) {
+			let fromColumn;
+			let cardIndex = -1;
+			for (const column of this.columns) {
+				const idx = column.cards.findIndex((c) => c.id === cardId);
+				if (idx !== -1) {
+					fromColumn = column;
+					cardIndex = idx;
+					break;
+				}
+			}
+			if (!fromColumn || cardIndex === -1) return;
+			const toColumn = this.columns.find((c) => c.id === toColumnId);
+			if (!toColumn) return;
+			if (fromColumn.id !== toColumnId && toColumn.wipLimit && toColumn.cards.length >= toColumn.wipLimit) {
+				this.events.emit("error", { error: /* @__PURE__ */ new Error(`Column "${toColumn.title}" reached WIP limit (${toColumn.wipLimit})`) });
+				return;
+			}
+			const [card] = fromColumn.cards.splice(cardIndex, 1);
+			card.columnId = toColumnId;
+			toColumn.cards.splice(toIndex, 0, card);
+			this.reorderCards(fromColumn);
+			this.reorderCards(toColumn);
+			this.events.emit("card:move", {
+				card,
+				fromColumnId: fromColumn.id,
+				toColumnId,
+				toIndex
+			});
+		}
+		/**
+		* 获取所有卡片
+		*/
+		getAllCards() {
+			const cards = [];
+			for (const column of this.columns) cards.push(...column.cards);
+			return cards;
+		}
+		/**
+		* 获取卡片总数
+		*/
+		getCardCount() {
+			return this.columns.reduce((sum, col) => sum + col.cards.length, 0);
+		}
+		/**
+		* 重新排序列
+		*/
+		reorderColumns() {
+			this.columns.forEach((col, index) => {
+				col.order = index;
+			});
+		}
+		/**
+		* 重新排序列中的卡片
+		*/
+		reorderCards(column) {
+			column.cards.forEach((card, index) => {
+				card.order = index;
+			});
+		}
+		/**
+		* 设置列数据（用于导入）
+		*/
+		setColumns(columns) {
+			this.columns = columns;
+		}
+		/**
+		* 清空所有数据
+		*/
+		clear() {
+			this.columns = [];
+		}
+	};
+	//#endregion
+	//#region src/core/DragController.ts
+	var DragController = class {
+		constructor(events, prefix) {
+			this.state = {
+				dragging: false,
+				cardId: null,
+				sourceColumnId: null,
+				targetColumnId: null,
+				targetIndex: 0,
+				placeholder: null
+			};
+			this.cleanupFns = [];
+			this.events = events;
+			this.prefix = prefix;
+		}
+		/**
+		* 为卡片元素启用拖拽
+		*/
+		enableCardDrag(cardEl, cardId, columnId) {
+			cardEl.setAttribute("draggable", "true");
+			cardEl.dataset.cardId = cardId;
+			cardEl.dataset.columnId = columnId;
+			const onDragStart = (e) => {
+				if (!e.dataTransfer) return;
+				e.dataTransfer.effectAllowed = "move";
+				e.dataTransfer.setData("text/plain", cardId);
+				this.state.dragging = true;
+				this.state.cardId = cardId;
+				this.state.sourceColumnId = columnId;
+				cardEl.classList.add(`${this.prefix}-card--dragging`);
+				this.events.emit("card:drag-start", {
+					cardId,
+					columnId
+				});
+				this.createPlaceholder(cardEl);
+			};
+			const onDragEnd = () => {
+				cardEl.classList.remove(`${this.prefix}-card--dragging`);
+				this.removePlaceholder();
+				this.state.dragging = false;
+				this.state.cardId = null;
+				this.state.sourceColumnId = null;
+				this.events.emit("card:drag-end", { cardId });
+			};
+			cardEl.addEventListener("dragstart", onDragStart);
+			cardEl.addEventListener("dragend", onDragEnd);
+			this.cleanupFns.push(() => {
+				cardEl.removeEventListener("dragstart", onDragStart);
+				cardEl.removeEventListener("dragend", onDragEnd);
+			});
+		}
+		/**
+		* 为列容器启用拖拽接受
+		*/
+		enableColumnDrop(columnBodyEl, columnId) {
+			const onDragOver = (e) => {
+				e.preventDefault();
+				if (!e.dataTransfer) return;
+				e.dataTransfer.dropEffect = "move";
+				this.state.targetColumnId = columnId;
+				const afterElement = this.getDragAfterElement(columnBodyEl, e.clientY);
+				const placeholder = this.state.placeholder;
+				if (placeholder) if (afterElement) columnBodyEl.insertBefore(placeholder, afterElement);
+				else {
+					const addBtn = columnBodyEl.querySelector(`.${this.prefix}-add-card`);
+					if (addBtn) columnBodyEl.insertBefore(placeholder, addBtn);
+					else columnBodyEl.appendChild(placeholder);
+				}
+			};
+			const onDragEnter = (e) => {
+				e.preventDefault();
+				columnBodyEl.classList.add(`${this.prefix}-column-body--drag-over`);
+			};
+			const onDragLeave = (e) => {
+				const rect = columnBodyEl.getBoundingClientRect();
+				if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) columnBodyEl.classList.remove(`${this.prefix}-column-body--drag-over`);
+			};
+			const onDrop = (e) => {
+				e.preventDefault();
+				columnBodyEl.classList.remove(`${this.prefix}-column-body--drag-over`);
+				const cardId = this.state.cardId;
+				if (!cardId) return;
+				const placeholder = this.state.placeholder;
+				let dropIndex = 0;
+				if (placeholder && placeholder.parentNode === columnBodyEl) {
+					const children = [...columnBodyEl.children];
+					for (const child of children) {
+						if (child === placeholder) break;
+						if (child.hasAttribute("data-card-id") && !child.classList.contains(`${this.prefix}-card--dragging`)) dropIndex++;
+					}
+				} else dropIndex = columnBodyEl.querySelectorAll(`[data-card-id]:not(.${this.prefix}-card--dragging)`).length;
+				this.events.emit("card:drop", {
+					cardId,
+					fromColumnId: this.state.sourceColumnId,
+					toColumnId: columnId,
+					toIndex: dropIndex
+				});
+				this.removePlaceholder();
+			};
+			columnBodyEl.addEventListener("dragover", onDragOver);
+			columnBodyEl.addEventListener("dragenter", onDragEnter);
+			columnBodyEl.addEventListener("dragleave", onDragLeave);
+			columnBodyEl.addEventListener("drop", onDrop);
+			this.cleanupFns.push(() => {
+				columnBodyEl.removeEventListener("dragover", onDragOver);
+				columnBodyEl.removeEventListener("dragenter", onDragEnter);
+				columnBodyEl.removeEventListener("dragleave", onDragLeave);
+				columnBodyEl.removeEventListener("drop", onDrop);
+			});
+		}
+		/**
+		* 为列头部启用列拖拽
+		*/
+		enableColumnDrag(columnEl, handleEl, columnId, boardEl) {
+			handleEl.setAttribute("draggable", "true");
+			const onDragStart = (e) => {
+				if (!e.dataTransfer) return;
+				e.dataTransfer.effectAllowed = "move";
+				e.dataTransfer.setData("application/kanban-column", columnId);
+				columnEl.classList.add(`${this.prefix}-column--dragging`);
+			};
+			const onDragEnd = () => {
+				columnEl.classList.remove(`${this.prefix}-column--dragging`);
+				boardEl.querySelectorAll(`.${this.prefix}-column--drag-over`).forEach((el) => {
+					el.classList.remove(`${this.prefix}-column--drag-over`);
+				});
+			};
+			const onDragOver = (e) => {
+				if (!e.dataTransfer?.types.includes("application/kanban-column")) return;
+				e.preventDefault();
+				e.dataTransfer.dropEffect = "move";
+				columnEl.classList.add(`${this.prefix}-column--drag-over`);
+			};
+			const onDragLeave = () => {
+				columnEl.classList.remove(`${this.prefix}-column--drag-over`);
+			};
+			const onDrop = (e) => {
+				e.preventDefault();
+				columnEl.classList.remove(`${this.prefix}-column--drag-over`);
+				const fromColumnId = e.dataTransfer?.getData("application/kanban-column");
+				if (!fromColumnId || fromColumnId === columnId) return;
+				const toIndex = [...boardEl.querySelectorAll(`[data-column-id]`)].indexOf(columnEl);
+				this.events.emit("column:drop", {
+					fromColumnId,
+					toColumnId: columnId,
+					toIndex
+				});
+			};
+			handleEl.addEventListener("dragstart", onDragStart);
+			handleEl.addEventListener("dragend", onDragEnd);
+			columnEl.addEventListener("dragover", onDragOver);
+			columnEl.addEventListener("dragleave", onDragLeave);
+			columnEl.addEventListener("drop", onDrop);
+			this.cleanupFns.push(() => {
+				handleEl.removeEventListener("dragstart", onDragStart);
+				handleEl.removeEventListener("dragend", onDragEnd);
+				columnEl.removeEventListener("dragover", onDragOver);
+				columnEl.removeEventListener("dragleave", onDragLeave);
+				columnEl.removeEventListener("drop", onDrop);
+			});
+		}
+		/**
+		* 获取鼠标位置之后的元素
+		*/
+		getDragAfterElement(container, y) {
+			const draggableElements = [...container.querySelectorAll(`[data-card-id]:not(.${this.prefix}-card--dragging):not(.${this.prefix}-placeholder)`)];
+			let closestOffset = Number.NEGATIVE_INFINITY;
+			let closestElement = null;
+			draggableElements.forEach((child) => {
+				const box = child.getBoundingClientRect();
+				const offset = y - box.top - box.height / 2;
+				if (offset < 0 && offset > closestOffset) {
+					closestOffset = offset;
+					closestElement = child;
+				}
+			});
+			return closestElement;
+		}
+		/**
+		* 创建占位符
+		*/
+		createPlaceholder(cardEl) {
+			this.removePlaceholder();
+			const placeholder = document.createElement("div");
+			placeholder.className = `${this.prefix}-placeholder`;
+			placeholder.style.height = `${cardEl.offsetHeight}px`;
+			this.state.placeholder = placeholder;
+		}
+		/**
+		* 移除占位符
+		*/
+		removePlaceholder() {
+			if (this.state.placeholder) {
+				this.state.placeholder.parentNode?.removeChild(this.state.placeholder);
+				this.state.placeholder = null;
+			}
+		}
+		/**
+		* 获取当前拖拽状态
+		*/
+		getState() {
+			return { ...this.state };
+		}
+		/**
+		* 销毁
+		*/
+		destroy() {
+			this.cleanupFns.forEach((fn) => fn());
+			this.cleanupFns = [];
+			this.removePlaceholder();
+		}
+	};
+	//#endregion
+	//#region src/core/FilterEngine.ts
+	var FilterEngine = class {
+		constructor(events) {
+			this.currentCriteria = null;
+			/** 被过滤隐藏的卡片 ID 集合 */
+			this.hiddenCardIds = /* @__PURE__ */ new Set();
+			this.events = events;
+		}
+		/**
+		* 应用筛选条件
+		*/
+		filter(criteria, columns) {
+			this.currentCriteria = criteria;
+			this.hiddenCardIds.clear();
+			const allCards = columns.flatMap((col) => col.cards);
+			for (const card of allCards) if (!this.matchCriteria(card, criteria)) this.hiddenCardIds.add(card.id);
+			this.events.emit("filter:change", { criteria });
+			return new Set(this.hiddenCardIds);
+		}
+		/**
+		* 搜索卡片
+		*/
+		search(keyword, columns) {
+			this.events.emit("search:change", { keyword });
+			if (!keyword.trim()) {
+				this.clearFilter();
+				return columns.flatMap((col) => col.cards);
+			}
+			const lowerKeyword = keyword.toLowerCase();
+			const allCards = columns.flatMap((col) => col.cards);
+			const matched = [];
+			this.hiddenCardIds.clear();
+			for (const card of allCards) {
+				const titleMatch = card.title.toLowerCase().includes(lowerKeyword);
+				const descMatch = card.description?.toLowerCase().includes(lowerKeyword) ?? false;
+				const labelMatch = card.labels?.some((l) => l.name.toLowerCase().includes(lowerKeyword)) ?? false;
+				const assigneeMatch = card.assignees?.some((a) => a.toLowerCase().includes(lowerKeyword)) ?? false;
+				if (titleMatch || descMatch || labelMatch || assigneeMatch) matched.push(card);
+				else this.hiddenCardIds.add(card.id);
+			}
+			return matched;
+		}
+		/**
+		* 清除筛选
+		*/
+		clearFilter() {
+			this.currentCriteria = null;
+			this.hiddenCardIds.clear();
+			this.events.emit("filter:clear", void 0);
+		}
+		/**
+		* 检查卡片是否可见
+		*/
+		isCardVisible(cardId) {
+			return !this.hiddenCardIds.has(cardId);
+		}
+		/**
+		* 获取隐藏的卡片 ID 集合
+		*/
+		getHiddenCardIds() {
+			return new Set(this.hiddenCardIds);
+		}
+		/**
+		* 获取当前筛选条件
+		*/
+		getCurrentCriteria() {
+			return this.currentCriteria;
+		}
+		/**
+		* 匹配筛选条件
+		*/
+		matchCriteria(card, criteria) {
+			if (criteria.keyword) {
+				const kw = criteria.keyword.toLowerCase();
+				const titleMatch = card.title.toLowerCase().includes(kw);
+				const descMatch = card.description?.toLowerCase().includes(kw) ?? false;
+				if (!titleMatch && !descMatch) return false;
+			}
+			if (criteria.labelIds?.length) {
+				const cardLabelIds = card.labels?.map((l) => l.id) ?? [];
+				if (!criteria.labelIds.some((id) => cardLabelIds.includes(id))) return false;
+			}
+			if (criteria.assignees?.length) {
+				if (!criteria.assignees.some((a) => card.assignees?.includes(a))) return false;
+			}
+			if (criteria.priorities?.length) {
+				if (!card.priority || !criteria.priorities.includes(card.priority)) return false;
+			}
+			if (criteria.columnIds?.length) {
+				if (!criteria.columnIds.includes(card.columnId)) return false;
+			}
+			if (criteria.dueDateRange) {
+				if (!card.dueDate) return false;
+				const dueDate = new Date(card.dueDate).getTime();
+				if (criteria.dueDateRange.start) {
+					if (dueDate < new Date(criteria.dueDateRange.start).getTime()) return false;
+				}
+				if (criteria.dueDateRange.end) {
+					if (dueDate > new Date(criteria.dueDateRange.end).getTime()) return false;
+				}
+			}
+			if (criteria.custom) {
+				if (!criteria.custom(card)) return false;
+			}
+			return true;
+		}
+		/**
+		* 销毁
+		*/
+		destroy() {
+			this.hiddenCardIds.clear();
+			this.currentCriteria = null;
+		}
+	};
+	//#endregion
+	//#region src/core/Renderer.ts
+	var Renderer = class {
+		constructor(container, events, dragController, options) {
+			this.boardEl = null;
+			this.columnElements = /* @__PURE__ */ new Map();
+			this.columnBodyElements = /* @__PURE__ */ new Map();
+			this.cardElements = /* @__PURE__ */ new Map();
+			this.container = container;
+			this.events = events;
+			this.dragController = dragController;
+			this.options = options;
+			this.prefix = options.classPrefix || "kanban";
+		}
+		/**
+		* 渲染整个看板
+		*/
+		render(columns, hiddenCardIds) {
+			this.cleanup();
+			this.container.querySelectorAll("[data-kanban-board]").forEach((el) => el.remove());
+			const p = this.prefix;
+			this.boardEl = createElement("div", `${p}-board`);
+			this.boardEl.setAttribute("data-kanban-board", "");
+			const columnsContainer = createElement("div", `${p}-columns`);
+			for (const column of columns) {
+				const colEl = this.renderColumn(column, hiddenCardIds);
+				columnsContainer.appendChild(colEl);
+			}
+			if (this.options.showAddColumn !== false) {
+				const addColBtn = createElement("div", `${p}-add-column`);
+				addColBtn.innerHTML = `<button class="${p}-add-column-btn">+ \u6DFB\u52A0\u5217</button>`;
+				addColBtn.querySelector("button").addEventListener("click", () => {
+					this.events.emit("ui:add-column");
+				});
+				columnsContainer.appendChild(addColBtn);
+			}
+			this.boardEl.appendChild(columnsContainer);
+			this.container.appendChild(this.boardEl);
+		}
+		/**
+		* 渲染单个列
+		*/
+		renderColumn(column, hiddenCardIds) {
+			const p = this.prefix;
+			const colEl = createElement("div", `${p}-column`, { "data-column-id": column.id });
+			if (column.collapsed) colEl.classList.add(`${p}-column--collapsed`);
+			const header = this.renderColumnHeader(column);
+			colEl.appendChild(header);
+			const body = createElement("div", `${p}-column-body`);
+			body.dataset.columnId = column.id;
+			if (!column.collapsed) {
+				const visibleCards = column.cards.filter((card) => !hiddenCardIds || !hiddenCardIds.has(card.id)).sort((a, b) => a.order - b.order);
+				for (const card of visibleCards) {
+					const cardEl = this.renderCard(card, column.id);
+					body.appendChild(cardEl);
+				}
+				if (this.options.showAddCard !== false) {
+					const addBtn = createElement("div", `${p}-add-card`);
+					addBtn.innerHTML = `<button class="${p}-add-card-btn">+ \u6DFB\u52A0\u5361\u7247</button>`;
+					addBtn.querySelector("button").addEventListener("click", () => {
+						this.events.emit("ui:add-card", { columnId: column.id });
+					});
+					body.appendChild(addBtn);
+				}
+				if (this.options.draggable !== false) this.dragController.enableColumnDrop(body, column.id);
+			}
+			colEl.appendChild(body);
+			if (this.options.columnDraggable !== false && this.boardEl) {
+				const dragHandle = header.querySelector(`.${p}-column-drag-handle`);
+				if (dragHandle) this.dragController.enableColumnDrag(colEl, dragHandle, column.id, this.boardEl);
+			}
+			this.columnElements.set(column.id, colEl);
+			this.columnBodyElements.set(column.id, body);
+			return colEl;
+		}
+		/**
+		* 渲染列头部
+		*/
+		renderColumnHeader(column) {
+			const p = this.prefix;
+			const header = createElement("div", `${p}-column-header`);
+			if (this.options.columnHeaderRenderer) {
+				this.options.columnHeaderRenderer(column, header);
+				return header;
+			}
+			if (this.options.columnDraggable !== false) {
+				const handle = createElement("span", `${p}-column-drag-handle`);
+				handle.innerHTML = "&#8942;&#8942;";
+				handle.title = "拖拽排序";
+				header.appendChild(handle);
+			}
+			if (column.color) {
+				const indicator = createElement("span", `${p}-column-color`);
+				indicator.style.backgroundColor = column.color;
+				header.appendChild(indicator);
+			}
+			const titleEl = createElement("span", `${p}-column-title`);
+			titleEl.textContent = column.title;
+			header.appendChild(titleEl);
+			if (this.options.showCardCount !== false) {
+				const count = createElement("span", `${p}-column-count`);
+				const wipText = column.wipLimit ? `/${column.wipLimit}` : "";
+				count.textContent = `${column.cards.length}${wipText}`;
+				if (column.wipLimit && column.cards.length >= column.wipLimit) count.classList.add(`${p}-column-count--limit`);
+				header.appendChild(count);
+			}
+			const collapseBtn = createElement("button", `${p}-column-collapse-btn`);
+			collapseBtn.innerHTML = column.collapsed ? "&#9654;" : "&#9660;";
+			collapseBtn.title = column.collapsed ? "展开" : "折叠";
+			collapseBtn.addEventListener("click", () => {
+				this.events.emit("ui:toggle-collapse", { columnId: column.id });
+			});
+			header.appendChild(collapseBtn);
+			if (this.options.showColumnActions !== false) {
+				const actions = createElement("button", `${p}-column-actions-btn`);
+				actions.innerHTML = "&#8943;";
+				actions.title = "更多操作";
+				actions.addEventListener("click", (e) => {
+					e.stopPropagation();
+					this.events.emit("ui:column-actions", {
+						columnId: column.id,
+						event: e
+					});
+				});
+				header.appendChild(actions);
+			}
+			return header;
+		}
+		/**
+		* 渲染单张卡片
+		*/
+		renderCard(card, columnId) {
+			const p = this.prefix;
+			const cardEl = createElement("div", `${p}-card`, { "data-card-id": card.id });
+			if (this.options.cardRenderer) this.options.cardRenderer(card, cardEl);
+			else this.renderDefaultCard(card, cardEl);
+			if (this.options.draggable !== false) this.dragController.enableCardDrag(cardEl, card.id, columnId);
+			cardEl.addEventListener("click", () => {
+				this.events.emit("card:click", { card });
+			});
+			this.cardElements.set(card.id, cardEl);
+			return cardEl;
+		}
+		/**
+		* 默认卡片渲染
+		*/
+		renderDefaultCard(card, cardEl) {
+			const p = this.prefix;
+			if (card.priority) {
+				const priorityEl = createElement("div", `${p}-card-priority ${p}-card-priority--${card.priority}`);
+				cardEl.appendChild(priorityEl);
+			}
+			if (card.labels?.length) {
+				const labelsEl = createElement("div", `${p}-card-labels`);
+				for (const label of card.labels) {
+					const labelEl = createElement("span", `${p}-card-label`);
+					labelEl.style.backgroundColor = label.color;
+					labelEl.textContent = label.name;
+					labelsEl.appendChild(labelEl);
+				}
+				cardEl.appendChild(labelsEl);
+			}
+			const titleEl = createElement("div", `${p}-card-title`);
+			titleEl.textContent = card.title;
+			cardEl.appendChild(titleEl);
+			if (card.description) {
+				const descEl = createElement("div", `${p}-card-desc`);
+				descEl.textContent = card.description;
+				cardEl.appendChild(descEl);
+			}
+			if (card.assignees?.length || card.dueDate) {
+				const footer = createElement("div", `${p}-card-footer`);
+				if (card.assignees?.length) {
+					const assigneesEl = createElement("div", `${p}-card-assignees`);
+					for (const assignee of card.assignees.slice(0, 3)) {
+						const avatar = createElement("span", `${p}-card-avatar`);
+						avatar.textContent = assignee.charAt(0).toUpperCase();
+						avatar.title = assignee;
+						assigneesEl.appendChild(avatar);
+					}
+					if (card.assignees.length > 3) {
+						const more = createElement("span", `${p}-card-avatar-more`);
+						more.textContent = `+${card.assignees.length - 3}`;
+						assigneesEl.appendChild(more);
+					}
+					footer.appendChild(assigneesEl);
+				}
+				if (card.dueDate) {
+					const dueEl = createElement("span", `${p}-card-due`);
+					const date = new Date(card.dueDate);
+					dueEl.textContent = `${date.getMonth() + 1}/${date.getDate()}`;
+					if (date < /* @__PURE__ */ new Date()) dueEl.classList.add(`${p}-card-due--overdue`);
+					footer.appendChild(dueEl);
+				}
+				cardEl.appendChild(footer);
+			}
+		}
+		/**
+		* 获取列元素
+		*/
+		getColumnElement(columnId) {
+			return this.columnElements.get(columnId);
+		}
+		/**
+		* 获取卡片元素
+		*/
+		getCardElement(cardId) {
+			return this.cardElements.get(cardId);
+		}
+		/**
+		* 获取看板根元素
+		*/
+		getBoardElement() {
+			return this.boardEl;
+		}
+		/**
+		* 清理 DOM
+		*/
+		cleanup() {
+			this.columnElements.clear();
+			this.columnBodyElements.clear();
+			this.cardElements.clear();
+			if (this.boardEl) {
+				this.boardEl.remove();
+				this.boardEl = null;
+			}
+		}
+		/**
+		* 销毁
+		*/
+		destroy() {
+			this.cleanup();
+		}
+	};
+	//#endregion
+	//#region src/version.ts
+	const VERSION = "0.1.0";
+	//#endregion
+	//#region src/core/KanbanBoard.ts
+	var KanbanBoard = class {
+		constructor(options) {
+			this.destroyed = false;
+			this.labels = [];
+			this.renderTimer = null;
+			this.options = {
+				draggable: true,
+				columnDraggable: true,
+				crossColumnDrag: true,
+				searchable: true,
+				showAddCard: true,
+				showAddColumn: true,
+				showColumnActions: true,
+				showCardCount: true,
+				classPrefix: "kanban",
+				...options
+			};
+			const el = resolveElement(options.container);
+			if (!el) throw new Error("[KanbanBoard] Container element not found");
+			this.container = el;
+			this.events = new EventEmitter();
+			this.columnManager = new ColumnManager(this.events);
+			this.dragController = new DragController(this.events, this.options.classPrefix || "kanban");
+			this.filterEngine = new FilterEngine(this.events);
+			this.renderer = new Renderer(this.container, this.events, this.dragController, this.options);
+			this.labels = options.labels || [];
+			this.init();
+		}
+		init() {
+			if (this.options.columns?.length) this.columnManager.init(this.options.columns);
+			this.bindInternalEvents();
+			this.render();
+			this.events.emit("ready", { instance: this });
+			this.options.onReady?.(this);
+			if (this.options.debug) console.log("[KanbanBoard] Initialized", {
+				columns: this.columnManager.getColumns().length,
+				cards: this.columnManager.getCardCount()
+			});
+		}
+		/**
+		* 绑定内部事件
+		*/
+		bindInternalEvents() {
+			this.events.on("card:drop", (payload) => {
+				this.columnManager.moveCard(payload.cardId, payload.toColumnId, payload.toIndex);
+				this.options.onCardMove?.(this.columnManager.getCard(payload.cardId), payload.fromColumnId, payload.toColumnId, payload.toIndex);
+				this.scheduleRender();
+			});
+			this.events.on("column:drop", (payload) => {
+				const fromIndex = this.columnManager.getColumns().findIndex((c) => c.id === payload.fromColumnId);
+				this.columnManager.moveColumn(payload.fromColumnId, payload.toIndex);
+				const col = this.columnManager.getColumn(payload.fromColumnId);
+				if (col) this.options.onColumnMove?.(col, fromIndex, payload.toIndex);
+				this.scheduleRender();
+			});
+			this.events.on("ui:toggle-collapse", (payload) => {
+				this.columnManager.toggleCollapse(payload.columnId);
+				const col = this.columnManager.getColumn(payload.columnId);
+				if (col) this.options.onColumnCollapse?.(col, col.collapsed ?? false);
+				this.render();
+			});
+			this.events.on("card:add", (p) => this.options.onCardAdd?.(p.card, p.columnId));
+			this.events.on("card:remove", (p) => this.options.onCardRemove?.(p.card, p.columnId));
+			this.events.on("card:click", (p) => this.options.onCardClick?.(p.card));
+			this.events.on("card:update", (p) => this.options.onCardUpdate?.(p.card));
+			this.events.on("column:add", (p) => this.options.onColumnAdd?.(p.column));
+			this.events.on("column:remove", (p) => this.options.onColumnRemove?.(p.column));
+			this.events.on("error", (p) => this.options.onError?.(p.error));
+		}
+		/**
+		* 添加列
+		*/
+		addColumn(partial) {
+			const column = this.columnManager.addColumn(partial);
+			this.render();
+			return column;
+		}
+		/**
+		* 移除列
+		*/
+		removeColumn(id) {
+			const column = this.columnManager.removeColumn(id);
+			if (column) this.render();
+			return column;
+		}
+		/**
+		* 更新列
+		*/
+		updateColumn(id, changes) {
+			const column = this.columnManager.updateColumn(id, changes);
+			if (column) this.render();
+			return column;
+		}
+		/**
+		* 移动列
+		*/
+		moveColumn(id, toIndex) {
+			this.columnManager.moveColumn(id, toIndex);
+			this.render();
+		}
+		/**
+		* 折叠/展开列
+		*/
+		toggleColumnCollapse(id) {
+			this.columnManager.toggleCollapse(id);
+			this.render();
+		}
+		/**
+		* 获取所有列
+		*/
+		getColumns() {
+			return this.columnManager.getColumns();
+		}
+		/**
+		* 获取单列
+		*/
+		getColumn(id) {
+			return this.columnManager.getColumn(id);
+		}
+		/**
+		* 添加卡片
+		*/
+		addCard(columnId, partial) {
+			const card = this.columnManager.addCard(columnId, partial);
+			if (card) this.render();
+			return card;
+		}
+		/**
+		* 移除卡片
+		*/
+		removeCard(cardId) {
+			const card = this.columnManager.removeCard(cardId);
+			if (card) this.render();
+			return card;
+		}
+		/**
+		* 更新卡片
+		*/
+		updateCard(cardId, changes) {
+			const card = this.columnManager.updateCard(cardId, changes);
+			if (card) this.render();
+			return card;
+		}
+		/**
+		* 移动卡片
+		*/
+		moveCard(cardId, toColumnId, toIndex) {
+			this.columnManager.moveCard(cardId, toColumnId, toIndex);
+			this.render();
+		}
+		/**
+		* 获取单张卡片
+		*/
+		getCard(cardId) {
+			return this.columnManager.getCard(cardId);
+		}
+		/**
+		* 获取所有卡片
+		*/
+		getAllCards() {
+			return this.columnManager.getAllCards();
+		}
+		/**
+		* 获取卡片总数
+		*/
+		getCardCount() {
+			return this.columnManager.getCardCount();
+		}
+		/**
+		* 筛选卡片
+		*/
+		filter(criteria) {
+			this.filterEngine.filter(criteria, this.columnManager.getColumns());
+			this.render();
+		}
+		/**
+		* 搜索卡片
+		*/
+		search(keyword) {
+			const result = this.filterEngine.search(keyword, this.columnManager.getColumns());
+			this.render();
+			return result;
+		}
+		/**
+		* 清除筛选
+		*/
+		clearFilter() {
+			this.filterEngine.clearFilter();
+			this.render();
+		}
+		/**
+		* 导出看板数据
+		*/
+		exportData() {
+			const data = {
+				version: VERSION,
+				title: this.options.title || "Kanban Board",
+				columns: this.columnManager.getColumns(),
+				labels: this.labels,
+				exportedAt: (/* @__PURE__ */ new Date()).toISOString()
+			};
+			this.events.emit("data:export", { board: data });
+			return data;
+		}
+		/**
+		* 导入看板数据
+		*/
+		importData(data) {
+			this.columnManager.setColumns(data.columns);
+			this.labels = data.labels || [];
+			this.filterEngine.clearFilter();
+			this.events.emit("data:import", { board: data });
+			this.render();
+		}
+		/**
+		* 监听事件
+		*/
+		on(event, handler) {
+			return this.events.on(event, handler);
+		}
+		/**
+		* 监听一次性事件
+		*/
+		once(event, handler) {
+			return this.events.once(event, handler);
+		}
+		/**
+		* 移除事件监听
+		*/
+		off(event, handler) {
+			this.events.off(event, handler);
+		}
+		/**
+		* 获取所有标签
+		*/
+		getLabels() {
+			return [...this.labels];
+		}
+		/**
+		* 添加标签
+		*/
+		addLabel(label) {
+			this.labels.push(label);
+		}
+		/**
+		* 移除标签
+		*/
+		removeLabel(id) {
+			this.labels = this.labels.filter((l) => l.id !== id);
+		}
+		/**
+		* 延迟渲染（合并多次调用，等待浏览器拖拽操作完成）
+		*/
+		scheduleRender() {
+			if (this.renderTimer !== null) return;
+			this.renderTimer = setTimeout(() => {
+				this.renderTimer = null;
+				this.render();
+			}, 0);
+		}
+		/**
+		* 重新渲染
+		*/
+		render() {
+			if (this.destroyed) return;
+			this.dragController.destroy();
+			this.dragController = new DragController(this.events, this.options.classPrefix || "kanban");
+			this.renderer = new Renderer(this.container, this.events, this.dragController, this.options);
+			this.renderer.render(this.columnManager.getColumns(), this.filterEngine.getHiddenCardIds());
+		}
+		/**
+		* 获取看板根元素
+		*/
+		getBoardElement() {
+			return this.renderer.getBoardElement();
+		}
+		/**
+		* 获取配置
+		*/
+		getOptions() {
+			return { ...this.options };
+		}
+		/**
+		* 销毁实例
+		*/
+		destroy() {
+			if (this.destroyed) return;
+			this.destroyed = true;
+			if (this.renderTimer !== null) {
+				clearTimeout(this.renderTimer);
+				this.renderTimer = null;
+			}
+			this.dragController.destroy();
+			this.filterEngine.destroy();
+			this.renderer.destroy();
+			this.columnManager.clear();
+			this.events.emit("destroy", void 0);
+			this.options.onDestroy?.();
+			this.events.removeAll();
+			if (this.options.debug) console.log("[KanbanBoard] Destroyed");
+		}
+		/**
+		* 是否已销毁
+		*/
+		isDestroyed() {
+			return this.destroyed;
+		}
+	};
+	function createKanbanBoard(options) {
+		return new KanbanBoard(options);
+	}
+	//#endregion
+	//#region src/utils/index.ts
+	function getElement(target) {
+		if (typeof target === "string") return document.querySelector(target);
+		return target;
+	}
+	//#endregion
+	exports.ColumnManager = ColumnManager;
+	exports.DragController = DragController;
+	exports.EventEmitter = EventEmitter;
+	exports.FilterEngine = FilterEngine;
+	exports.KanbanBoard = KanbanBoard;
+	exports.Renderer = Renderer;
+	exports.VERSION = VERSION;
+	exports.clearElement = clearElement;
+	exports.createElement = createElement;
+	exports.createKanbanBoard = createKanbanBoard;
+	exports.generateId = generateId;
+	exports.getElement = getElement;
+	exports.insertAt = insertAt;
+	exports.removeElement = removeElement;
+	exports.resetIdCounter = resetIdCounter;
+	exports.resolveElement = resolveElement;
+});
+/*! End of @composy/kanban-core | Powered by @composy/builder */
+//# sourceMappingURL=index.js.map