@composy/kanban-core 0.0.1 → 0.0.2

package/dist/index.js

@@ -2,96 +2,15 @@
 * ***********************************
 * @composy/kanban-core v0.0.1     *
 * Built with rollup               *
-* Build time: 2024-08-17 11:33:25 *
+* Build time: 2024-10-12 17:29:01 *
 * 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 = {}));
+	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.LDesignKanbanCore = {}));
 })(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") {
@@ -113,15 +32,25 @@
 		*/
 		init(columns) {
 			this.columns = columns.map((col, index) => this.normalizeColumn(col, index));
+			this.sortColumns();
 		}
 		/**
 		* 标准化列数据
 		*/
 		normalizeColumn(partial, index) {
+			const id = partial.id || generateId("col");
+			const cards = (partial.cards ?? []).map((card, cardIndex) => this.normalizeCard({
+				...card,
+				columnId: id
+			}, id, cardIndex));
+			cards.sort((a, b) => a.order - b.order);
+			cards.forEach((card, cardIndex) => {
+				card.order = cardIndex;
+			});
 			return {
-				id: partial.id || generateId("col"),
-				title: partial.title || `Column ${index + 1}`,
-				cards: (partial.cards || []).map((card, cardIndex) => this.normalizeCard(card, partial.id || "", cardIndex)),
+				id,
+				title: partial.title ?? `Column ${index + 1}`,
+				cards,
 				wipLimit: partial.wipLimit,
 				collapsed: partial.collapsed ?? false,
 				color: partial.color,
@@ -134,16 +63,16 @@
 		normalizeCard(partial, columnId, index) {
 			return {
 				id: partial.id || generateId("card"),
-				title: partial.title || "",
+				title: partial.title ?? "",
 				description: partial.description,
-				labels: partial.labels || [],
-				assignees: partial.assignees || [],
+				labels: partial.labels?.map((label) => ({ ...label })) ?? [],
+				assignees: partial.assignees ? [...partial.assignees] : [],
 				dueDate: partial.dueDate,
 				priority: partial.priority,
 				order: partial.order ?? index,
-				columnId: partial.columnId || columnId,
+				columnId: partial.columnId ?? columnId,
 				data: partial.data,
-				createdAt: partial.createdAt || (/* @__PURE__ */ new Date()).toISOString(),
+				createdAt: partial.createdAt ?? (/* @__PURE__ */ new Date()).toISOString(),
 				updatedAt: partial.updatedAt
 			};
 		}
@@ -164,11 +93,8 @@
 		*/
 		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.sortColumns();
 			this.events.emit("column:add", { column });
 			return column;
 		}
@@ -190,6 +116,12 @@
 			const column = this.columns.find((c) => c.id === id);
 			if (!column) return void 0;
 			Object.assign(column, changes, { id });
+			if (changes.cards) {
+				column.cards = changes.cards.map((card, index) => this.normalizeCard(card, id, index));
+				column.cards.sort((a, b) => a.order - b.order);
+				this.reorderCards(column);
+			}
+			if (changes.order !== void 0) this.sortColumns();
 			this.events.emit("column:update", {
 				column,
 				changes
@@ -200,15 +132,17 @@
 		* 移动列
 		*/
 		moveColumn(id, toIndex) {
+			this.sortColumns();
 			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);
+			const targetIndex = this.clampIndex(toIndex, this.columns.length);
+			this.columns.splice(targetIndex, 0, column);
 			this.reorderColumns();
 			this.events.emit("column:move", {
 				column,
 				fromIndex,
-				toIndex
+				toIndex: targetIndex
 			});
 		}
 		/**
@@ -320,14 +254,15 @@
 			}
 			const [card] = fromColumn.cards.splice(cardIndex, 1);
 			card.columnId = toColumnId;
-			toColumn.cards.splice(toIndex, 0, card);
+			const targetIndex = this.clampIndex(toIndex, toColumn.cards.length);
+			toColumn.cards.splice(targetIndex, 0, card);
 			this.reorderCards(fromColumn);
 			this.reorderCards(toColumn);
 			this.events.emit("card:move", {
 				card,
 				fromColumnId: fromColumn.id,
 				toColumnId,
-				toIndex
+				toIndex: targetIndex
 			});
 		}
 		/**
@@ -364,7 +299,8 @@
 		* 设置列数据（用于导入）
 		*/
 		setColumns(columns) {
-			this.columns = columns;
+			this.columns = columns.map((column, index) => this.normalizeColumn(column, index));
+			this.sortColumns();
 		}
 		/**
 		* 清空所有数据
@@ -372,6 +308,14 @@
 		clear() {
 			this.columns = [];
 		}
+		clampIndex(index, length) {
+			if (!Number.isFinite(index)) return length;
+			return Math.min(Math.max(Math.trunc(index), 0), length);
+		}
+		sortColumns() {
+			this.columns.sort((a, b) => a.order - b.order);
+			this.reorderColumns();
+		}
 	};
 	//#endregion
 	//#region src/core/DragController.ts
@@ -403,6 +347,8 @@
 				this.state.dragging = true;
 				this.state.cardId = cardId;
 				this.state.sourceColumnId = columnId;
+				this.state.targetColumnId = columnId;
+				this.state.targetIndex = 0;
 				cardEl.classList.add(`${this.prefix}-card--dragging`);
 				this.events.emit("card:drag-start", {
 					cardId,
@@ -416,6 +362,8 @@
 				this.state.dragging = false;
 				this.state.cardId = null;
 				this.state.sourceColumnId = null;
+				this.state.targetColumnId = null;
+				this.state.targetIndex = 0;
 				this.events.emit("card:drag-end", { cardId });
 			};
 			cardEl.addEventListener("dragstart", onDragStart);
@@ -465,6 +413,7 @@
 						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.state.targetIndex = dropIndex;
 				this.events.emit("card:drop", {
 					cardId,
 					fromColumnId: this.state.sourceColumnId,
@@ -584,6 +533,72 @@
 			this.cleanupFns.forEach((fn) => fn());
 			this.cleanupFns = [];
 			this.removePlaceholder();
+			this.state.dragging = false;
+			this.state.cardId = null;
+			this.state.sourceColumnId = null;
+			this.state.targetColumnId = null;
+			this.state.targetIndex = 0;
+		}
+	};
+	//#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());
+			const handlers = this.listeners.get(event);
+			if (!handlers) return () => this.off(event, handler);
+			handlers.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) {
+			const handlers = this.listeners.get(event);
+			if (!handlers) return;
+			handlers.delete(handler);
+			if (handlers.size === 0) this.listeners.delete(event);
+		}
+		/**
+		* 触发事件
+		*/
+		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
@@ -611,11 +626,13 @@
 		*/
 		search(keyword, columns) {
 			this.events.emit("search:change", { keyword });
-			if (!keyword.trim()) {
+			const normalizedKeyword = keyword.trim();
+			this.currentCriteria = normalizedKeyword ? { keyword: normalizedKeyword } : null;
+			if (!normalizedKeyword) {
 				this.clearFilter();
 				return columns.flatMap((col) => col.cards);
 			}
-			const lowerKeyword = keyword.toLowerCase();
+			const lowerKeyword = normalizedKeyword.toLowerCase();
 			const allCards = columns.flatMap((col) => col.cards);
 			const matched = [];
 			this.hiddenCardIds.clear();
@@ -681,11 +698,14 @@
 			if (criteria.dueDateRange) {
 				if (!card.dueDate) return false;
 				const dueDate = new Date(card.dueDate).getTime();
+				if (Number.isNaN(dueDate)) return false;
 				if (criteria.dueDateRange.start) {
-					if (dueDate < new Date(criteria.dueDateRange.start).getTime()) return false;
+					const start = new Date(criteria.dueDateRange.start).getTime();
+					if (Number.isNaN(start) || dueDate < start) return false;
 				}
 				if (criteria.dueDateRange.end) {
-					if (dueDate > new Date(criteria.dueDateRange.end).getTime()) return false;
+					const end = new Date(criteria.dueDateRange.end).getTime();
+					if (Number.isNaN(end) || dueDate > end) return false;
 				}
 			}
 			if (criteria.custom) {
@@ -702,6 +722,34 @@
 		}
 	};
 	//#endregion
+	//#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/version.ts
+	const VERSION = "0.1.0";
+	//#endregion
 	//#region src/core/Renderer.ts
 	var Renderer = class {
 		constructor(container, events, dragController, options) {
@@ -732,7 +780,7 @@
 			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", () => {
+				addColBtn.querySelector("button")?.addEventListener("click", () => {
 					this.events.emit("ui:add-column");
 				});
 				columnsContainer.appendChild(addColBtn);
@@ -760,7 +808,7 @@
 				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", () => {
+					addBtn.querySelector("button")?.addEventListener("click", () => {
 						this.events.emit("ui:add-card", { columnId: column.id });
 					});
 					body.appendChild(addBtn);
@@ -768,9 +816,10 @@
 				if (this.options.draggable !== false) this.dragController.enableColumnDrop(body, column.id);
 			}
 			colEl.appendChild(body);
-			if (this.options.columnDraggable !== false && this.boardEl) {
+			const boardEl = this.boardEl;
+			if (this.options.columnDraggable !== false && boardEl) {
 				const dragHandle = header.querySelector(`.${p}-column-drag-handle`);
-				if (dragHandle) this.dragController.enableColumnDrag(colEl, dragHandle, column.id, this.boardEl);
+				if (dragHandle) this.dragController.enableColumnDrag(colEl, dragHandle, column.id, boardEl);
 			}
 			this.columnElements.set(column.id, colEl);
 			this.columnBodyElements.set(column.id, body);
@@ -891,8 +940,11 @@
 				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`);
+					if (Number.isNaN(date.getTime())) dueEl.textContent = "Invalid date";
+					else {
+						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);
@@ -936,10 +988,22 @@
 		}
 	};
 	//#endregion
-	//#region src/version.ts
-	const VERSION = "0.1.0";
-	//#endregion
 	//#region src/core/KanbanBoard.ts
+	function isRecord(value) {
+		return typeof value === "object" && value !== null;
+	}
+	function isCard(value) {
+		return isRecord(value) && typeof value.id === "string" && typeof value.title === "string" && typeof value.order === "number" && typeof value.columnId === "string";
+	}
+	function isColumn(value) {
+		return isRecord(value) && typeof value.id === "string" && typeof value.title === "string" && Array.isArray(value.cards) && typeof value.order === "number";
+	}
+	function isCardDropPayload(value) {
+		return isRecord(value) && typeof value.cardId === "string" && (value.fromColumnId === null || typeof value.fromColumnId === "string") && typeof value.toColumnId === "string" && typeof value.toIndex === "number";
+	}
+	function isColumnDropPayload(value) {
+		return isRecord(value) && typeof value.fromColumnId === "string" && typeof value.toColumnId === "string" && typeof value.toIndex === "number";
+	}
 	var KanbanBoard = class {
 		constructor(options) {
 			this.destroyed = false;
@@ -974,7 +1038,7 @@
 			this.render();
 			this.events.emit("ready", { instance: this });
 			this.options.onReady?.(this);
-			if (this.options.debug) console.log("[KanbanBoard] Initialized", {
+			if (this.options.debug) console.debug("[KanbanBoard] Initialized", {
 				columns: this.columnManager.getColumns().length,
 				cards: this.columnManager.getCardCount()
 			});
@@ -984,30 +1048,57 @@
 		*/
 		bindInternalEvents() {
 			this.events.on("card:drop", (payload) => {
+				if (!isCardDropPayload(payload)) return;
+				const card = this.columnManager.getCard(payload.cardId);
 				this.columnManager.moveCard(payload.cardId, payload.toColumnId, payload.toIndex);
-				this.options.onCardMove?.(this.columnManager.getCard(payload.cardId), payload.fromColumnId, payload.toColumnId, payload.toIndex);
+				if (card && card.columnId === payload.toColumnId) this.options.onCardMove?.(card, payload.fromColumnId ?? "", payload.toColumnId, card.order);
 				this.scheduleRender();
 			});
 			this.events.on("column:drop", (payload) => {
-				const fromIndex = this.columnManager.getColumns().findIndex((c) => c.id === payload.fromColumnId);
+				if (!isColumnDropPayload(payload)) return;
+				const columns = this.columnManager.getColumns();
+				if (payload.fromColumnId === payload.toColumnId || !columns.some((column) => column.id === payload.fromColumnId) || !columns.some((column) => column.id === payload.toColumnId)) return;
+				const fromIndex = columns.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);
+				if (col) this.options.onColumnMove?.(col, fromIndex, col.order);
 				this.scheduleRender();
 			});
 			this.events.on("ui:toggle-collapse", (payload) => {
+				if (!isRecord(payload) || typeof payload.columnId !== "string") return;
 				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));
+			this.events.on("card:add", (p) => {
+				if (!isRecord(p) || !isCard(p.card) || typeof p.columnId !== "string") return;
+				this.options.onCardAdd?.(p.card, p.columnId);
+			});
+			this.events.on("card:remove", (p) => {
+				if (!isRecord(p) || !isCard(p.card) || typeof p.columnId !== "string") return;
+				this.options.onCardRemove?.(p.card, p.columnId);
+			});
+			this.events.on("card:click", (p) => {
+				if (!isRecord(p) || !isCard(p.card)) return;
+				this.options.onCardClick?.(p.card);
+			});
+			this.events.on("card:update", (p) => {
+				if (!isRecord(p) || !isCard(p.card)) return;
+				this.options.onCardUpdate?.(p.card);
+			});
+			this.events.on("column:add", (p) => {
+				if (!isRecord(p) || !isColumn(p.column)) return;
+				this.options.onColumnAdd?.(p.column);
+			});
+			this.events.on("column:remove", (p) => {
+				if (!isRecord(p) || !isColumn(p.column)) return;
+				this.options.onColumnRemove?.(p.column);
+			});
+			this.events.on("error", (p) => {
+				if (!isRecord(p) || !(p.error instanceof Error)) return;
+				this.options.onError?.(p.error);
+			});
 		}
 		/**
 		* 添加列
@@ -1148,8 +1239,12 @@
 		* 导入看板数据
 		*/
 		importData(data) {
+			if (!data || !Array.isArray(data.columns)) {
+				this.events.emit("error", { error: /* @__PURE__ */ new Error("[KanbanBoard] Invalid board data: columns must be an array") });
+				return;
+			}
 			this.columnManager.setColumns(data.columns);
-			this.labels = data.labels || [];
+			this.labels = Array.isArray(data.labels) ? [...data.labels] : [];
 			this.filterEngine.clearFilter();
 			this.events.emit("data:import", { board: data });
 			this.render();
@@ -1239,7 +1334,7 @@
 			this.events.emit("destroy", void 0);
 			this.options.onDestroy?.();
 			this.events.removeAll();
-			if (this.options.debug) console.log("[KanbanBoard] Destroyed");
+			if (this.options.debug) console.debug("[KanbanBoard] Destroyed");
 		}
 		/**
 		* 是否已销毁