@composy/kanban-core 0.0.1

package/es/core/Renderer.js

@@ -0,0 +1,247 @@
+/*!
+* ***********************************
+* @composy/kanban-core v0.0.1     *
+* Built with rollup               *
+* Build time: 2024-08-17 11:33:25 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { createElement } from "../utils/dom.js";
+//#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
+export { Renderer };
+/*! End of @composy/kanban-core | Powered by @composy/builder */
+//# sourceMappingURL=Renderer.js.map

package/es/core/Renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Renderer.js","names":[],"sources":["../../src/core/Renderer.ts"],"sourcesContent":["import type { Column, Card, KanbanOptions } from '../types';\nimport { createElement } from '../utils/dom';\nimport { EventEmitter } from './EventEmitter';\nimport { DragController } from './DragController';\n\n/**\n * DOM 渲染器\n */\nexport class Renderer {\n  private container: HTMLElement;\n  private boardEl: HTMLElement | null = null;\n  private events: EventEmitter;\n  private dragController: DragController;\n  private options: KanbanOptions;\n  private prefix: string;\n  private columnElements = new Map<string, HTMLElement>();\n  private columnBodyElements = new Map<string, HTMLElement>();\n  private cardElements = new Map<string, HTMLElement>();\n\n  constructor(\n    container: HTMLElement,\n    events: EventEmitter,\n    dragController: DragController,\n    options: KanbanOptions,\n  ) {\n    this.container = container;\n    this.events = events;\n    this.dragController = dragController;\n    this.options = options;\n    this.prefix = options.classPrefix || 'kanban';\n  }\n\n  /**\n   * 渲染整个看板\n   */\n  render(columns: Column[], hiddenCardIds?: Set<string>): void {\n    this.cleanup();\n\n    // 清除容器中残留的旧看板元素（HMR / 重复渲染保护）\n    const staleBoards = this.container.querySelectorAll('[data-kanban-board]');\n    staleBoards.forEach(el => el.remove());\n\n    const p = this.prefix;\n    this.boardEl = createElement('div', `${p}-board`);\n    this.boardEl.setAttribute('data-kanban-board', '');\n\n    // 列容器\n    const columnsContainer = createElement('div', `${p}-columns`);\n\n    for (const column of columns) {\n      const colEl = this.renderColumn(column, hiddenCardIds);\n      columnsContainer.appendChild(colEl);\n    }\n\n    // 添加列按钮\n    if (this.options.showAddColumn !== false) {\n      const addColBtn = createElement('div', `${p}-add-column`);\n      addColBtn.innerHTML = `<button class=\"${p}-add-column-btn\">+ 添加列</button>`;\n      addColBtn.querySelector('button')!.addEventListener('click', () => {\n        this.events.emit('ui:add-column');\n      });\n      columnsContainer.appendChild(addColBtn);\n    }\n\n    this.boardEl.appendChild(columnsContainer);\n    this.container.appendChild(this.boardEl);\n  }\n\n  /**\n   * 渲染单个列\n   */\n  private renderColumn(column: Column, hiddenCardIds?: Set<string>): HTMLElement {\n    const p = this.prefix;\n    const colEl = createElement('div', `${p}-column`, { 'data-column-id': column.id });\n    if (column.collapsed) colEl.classList.add(`${p}-column--collapsed`);\n\n    // 列头部\n    const header = this.renderColumnHeader(column);\n    colEl.appendChild(header);\n\n    // 列内容\n    const body = createElement('div', `${p}-column-body`);\n    body.dataset.columnId = column.id;\n\n    if (!column.collapsed) {\n      const visibleCards = column.cards\n        .filter(card => !hiddenCardIds || !hiddenCardIds.has(card.id))\n        .sort((a, b) => a.order - b.order);\n\n      for (const card of visibleCards) {\n        const cardEl = this.renderCard(card, column.id);\n        body.appendChild(cardEl);\n      }\n\n      // 添加卡片按钮\n      if (this.options.showAddCard !== false) {\n        const addBtn = createElement('div', `${p}-add-card`);\n        addBtn.innerHTML = `<button class=\"${p}-add-card-btn\">+ 添加卡片</button>`;\n        addBtn.querySelector('button')!.addEventListener('click', () => {\n          this.events.emit('ui:add-card', { columnId: column.id });\n        });\n        body.appendChild(addBtn);\n      }\n\n      // 启用列内拖拽放置\n      if (this.options.draggable !== false) {\n        this.dragController.enableColumnDrop(body, column.id);\n      }\n    }\n\n    colEl.appendChild(body);\n\n    // 列拖拽\n    if (this.options.columnDraggable !== false && this.boardEl) {\n      const dragHandle = header.querySelector(`.${p}-column-drag-handle`) as HTMLElement;\n      if (dragHandle) {\n        this.dragController.enableColumnDrag(colEl, dragHandle, column.id, this.boardEl!);\n      }\n    }\n\n    this.columnElements.set(column.id, colEl);\n    this.columnBodyElements.set(column.id, body);\n\n    return colEl;\n  }\n\n  /**\n   * 渲染列头部\n   */\n  private renderColumnHeader(column: Column): HTMLElement {\n    const p = this.prefix;\n    const header = createElement('div', `${p}-column-header`);\n\n    if (this.options.columnHeaderRenderer) {\n      this.options.columnHeaderRenderer(column, header);\n      return header;\n    }\n\n    // 拖拽手柄\n    if (this.options.columnDraggable !== false) {\n      const handle = createElement('span', `${p}-column-drag-handle`);\n      handle.innerHTML = '&#8942;&#8942;';\n      handle.title = '拖拽排序';\n      header.appendChild(handle);\n    }\n\n    // 颜色指示器\n    if (column.color) {\n      const indicator = createElement('span', `${p}-column-color`);\n      indicator.style.backgroundColor = column.color;\n      header.appendChild(indicator);\n    }\n\n    // 标题\n    const titleEl = createElement('span', `${p}-column-title`);\n    titleEl.textContent = column.title;\n    header.appendChild(titleEl);\n\n    // 卡片计数\n    if (this.options.showCardCount !== false) {\n      const count = createElement('span', `${p}-column-count`);\n      const wipText = column.wipLimit ? `/${column.wipLimit}` : '';\n      count.textContent = `${column.cards.length}${wipText}`;\n      if (column.wipLimit && column.cards.length >= column.wipLimit) {\n        count.classList.add(`${p}-column-count--limit`);\n      }\n      header.appendChild(count);\n    }\n\n    // 折叠按钮\n    const collapseBtn = createElement('button', `${p}-column-collapse-btn`);\n    collapseBtn.innerHTML = column.collapsed ? '&#9654;' : '&#9660;';\n    collapseBtn.title = column.collapsed ? '展开' : '折叠';\n    collapseBtn.addEventListener('click', () => {\n      this.events.emit('ui:toggle-collapse', { columnId: column.id });\n    });\n    header.appendChild(collapseBtn);\n\n    // 操作菜单\n    if (this.options.showColumnActions !== false) {\n      const actions = createElement('button', `${p}-column-actions-btn`);\n      actions.innerHTML = '&#8943;';\n      actions.title = '更多操作';\n      actions.addEventListener('click', (e) => {\n        e.stopPropagation();\n        this.events.emit('ui:column-actions', { columnId: column.id, event: e });\n      });\n      header.appendChild(actions);\n    }\n\n    return header;\n  }\n\n  /**\n   * 渲染单张卡片\n   */\n  private renderCard(card: Card, columnId: string): HTMLElement {\n    const p = this.prefix;\n    const cardEl = createElement('div', `${p}-card`, { 'data-card-id': card.id });\n\n    if (this.options.cardRenderer) {\n      this.options.cardRenderer(card, cardEl);\n    } else {\n      this.renderDefaultCard(card, cardEl);\n    }\n\n    // 启用卡片拖拽\n    if (this.options.draggable !== false) {\n      this.dragController.enableCardDrag(cardEl, card.id, columnId);\n    }\n\n    // 点击事件\n    cardEl.addEventListener('click', () => {\n      this.events.emit('card:click', { card });\n    });\n\n    this.cardElements.set(card.id, cardEl);\n    return cardEl;\n  }\n\n  /**\n   * 默认卡片渲染\n   */\n  private renderDefaultCard(card: Card, cardEl: HTMLElement): void {\n    const p = this.prefix;\n\n    // 优先级指示器\n    if (card.priority) {\n      const priorityEl = createElement('div', `${p}-card-priority ${p}-card-priority--${card.priority}`);\n      cardEl.appendChild(priorityEl);\n    }\n\n    // 标签\n    if (card.labels?.length) {\n      const labelsEl = createElement('div', `${p}-card-labels`);\n      for (const label of card.labels) {\n        const labelEl = createElement('span', `${p}-card-label`);\n        labelEl.style.backgroundColor = label.color;\n        labelEl.textContent = label.name;\n        labelsEl.appendChild(labelEl);\n      }\n      cardEl.appendChild(labelsEl);\n    }\n\n    // 标题\n    const titleEl = createElement('div', `${p}-card-title`);\n    titleEl.textContent = card.title;\n    cardEl.appendChild(titleEl);\n\n    // 描述\n    if (card.description) {\n      const descEl = createElement('div', `${p}-card-desc`);\n      descEl.textContent = card.description;\n      cardEl.appendChild(descEl);\n    }\n\n    // 底部信息栏\n    const hasFooter = card.assignees?.length || card.dueDate;\n    if (hasFooter) {\n      const footer = createElement('div', `${p}-card-footer`);\n\n      if (card.assignees?.length) {\n        const assigneesEl = createElement('div', `${p}-card-assignees`);\n        for (const assignee of card.assignees.slice(0, 3)) {\n          const avatar = createElement('span', `${p}-card-avatar`);\n          avatar.textContent = assignee.charAt(0).toUpperCase();\n          avatar.title = assignee;\n          assigneesEl.appendChild(avatar);\n        }\n        if (card.assignees.length > 3) {\n          const more = createElement('span', `${p}-card-avatar-more`);\n          more.textContent = `+${card.assignees.length - 3}`;\n          assigneesEl.appendChild(more);\n        }\n        footer.appendChild(assigneesEl);\n      }\n\n      if (card.dueDate) {\n        const dueEl = createElement('span', `${p}-card-due`);\n        const date = new Date(card.dueDate);\n        dueEl.textContent = `${date.getMonth() + 1}/${date.getDate()}`;\n        const now = new Date();\n        if (date < now) dueEl.classList.add(`${p}-card-due--overdue`);\n        footer.appendChild(dueEl);\n      }\n\n      cardEl.appendChild(footer);\n    }\n  }\n\n  /**\n   * 获取列元素\n   */\n  getColumnElement(columnId: string): HTMLElement | undefined {\n    return this.columnElements.get(columnId);\n  }\n\n  /**\n   * 获取卡片元素\n   */\n  getCardElement(cardId: string): HTMLElement | undefined {\n    return this.cardElements.get(cardId);\n  }\n\n  /**\n   * 获取看板根元素\n   */\n  getBoardElement(): HTMLElement | null {\n    return this.boardEl;\n  }\n\n  /**\n   * 清理 DOM\n   */\n  private cleanup(): void {\n    this.columnElements.clear();\n    this.columnBodyElements.clear();\n    this.cardElements.clear();\n    if (this.boardEl) {\n      this.boardEl.remove();\n      this.boardEl = null;\n    }\n  }\n\n  /**\n   * 销毁\n   */\n  destroy(): void {\n    this.cleanup();\n  }\n}\n"],"mappings":"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"}

package/es/core/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @file index.ts
+ * @description index 模块
+ */
+export { KanbanBoard, createKanbanBoard } from './KanbanBoard';
+export { EventEmitter, type EventHandler } from './EventEmitter';
+export { ColumnManager } from './ColumnManager';
+export { DragController, type DragState } from './DragController';
+export { FilterEngine } from './FilterEngine';
+export { Renderer } from './Renderer';
+//# sourceMappingURL=index.d.ts.map

package/es/core/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/es/core/index.js

@@ -0,0 +1,17 @@
+/*!
+* ***********************************
+* @composy/kanban-core v0.0.1     *
+* Built with rollup               *
+* Build time: 2024-08-17 11:33:25 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { ColumnManager } from "./ColumnManager.js";
+import { DragController } from "./DragController.js";
+import { EventEmitter } from "./EventEmitter.js";
+import { FilterEngine } from "./FilterEngine.js";
+import { Renderer } from "./Renderer.js";
+import { KanbanBoard, createKanbanBoard } from "./KanbanBoard.js";
+export { ColumnManager, DragController, EventEmitter, FilterEngine, KanbanBoard, Renderer, createKanbanBoard };
+/*! End of @composy/kanban-core | Powered by @composy/builder */

package/es/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @composy/kanban-core
+ * 看板视图库，支持拖拽卡片与列管理
+ */
+import './styles/kanban.less';
+export type { Label, Card, Column, Board, KanbanOptions, KanbanEventMap, FilterCriteria, BoardData, } from './types';
+export { KanbanBoard, createKanbanBoard } from './core/KanbanBoard';
+export { EventEmitter, type EventHandler } from './core/EventEmitter';
+export { ColumnManager } from './core/ColumnManager';
+export { DragController, type DragState } from './core/DragController';
+export { FilterEngine } from './core/FilterEngine';
+export { Renderer } from './core/Renderer';
+export * from './utils';
+export { VERSION } from './version';
+//# sourceMappingURL=index.d.ts.map

package/es/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,sBAAsB,CAAC;AAG9B,YAAY,EACV,KAAK,EACL,IAAI,EACJ,MAAM,EACN,KAAK,EACL,aAAa,EACb,cAAc,EACd,cAAc,EACd,SAAS,GACV,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,cAAc,SAAS,CAAC;AAGxB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/es/index.js

@@ -0,0 +1,21 @@
+/*!
+* ***********************************
+* @composy/kanban-core v0.0.1     *
+* Built with rollup               *
+* Build time: 2024-08-17 11:33:25 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { generateId, resetIdCounter } from "./utils/id.js";
+import { ColumnManager } from "./core/ColumnManager.js";
+import { DragController } from "./core/DragController.js";
+import { EventEmitter } from "./core/EventEmitter.js";
+import { FilterEngine } from "./core/FilterEngine.js";
+import { clearElement, createElement, insertAt, removeElement, resolveElement } from "./utils/dom.js";
+import { Renderer } from "./core/Renderer.js";
+import { VERSION } from "./version.js";
+import { KanbanBoard, createKanbanBoard } from "./core/KanbanBoard.js";
+import { getElement } from "./utils/index.js";
+export { ColumnManager, DragController, EventEmitter, FilterEngine, KanbanBoard, Renderer, VERSION, clearElement, createElement, createKanbanBoard, generateId, getElement, insertAt, removeElement, resetIdCounter, resolveElement };
+/*! End of @composy/kanban-core | Powered by @composy/builder */

package/es/styles/kanban.css

@@ -0,0 +1,306 @@
+/* @composy/kanban-core - Default Styles */
+.kanban-board {
+  width: 100%;
+  min-height: 400px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  max-width: 100%;
+}
+.kanban-columns {
+  display: flex;
+  gap: 16px;
+  padding: 8px;
+  min-height: 100%;
+  align-items: flex-start;
+}
+/* Column */
+.kanban-column {
+  flex: 0 0 280px;
+  max-width: 280px;
+  background: #f4f5f7;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 200px);
+  transition: opacity 0.2s, box-shadow 0.2s;
+}
+.kanban-column--collapsed {
+  flex: 0 0 48px;
+  max-width: 48px;
+  min-height: 200px;
+}
+.kanban-column--dragging {
+  opacity: 0.5;
+}
+.kanban-column--drag-over {
+  box-shadow: 0 0 0 2px #4c9aff;
+}
+/* Column Header */
+.kanban-column-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 12px;
+  border-bottom: 1px solid #e1e4e8;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.kanban-column-drag-handle {
+  cursor: grab;
+  color: #a0a0a0;
+  font-size: 12px;
+  letter-spacing: -3px;
+  line-height: 1;
+  padding: 2px 0;
+}
+.kanban-column-drag-handle:active {
+  cursor: grabbing;
+}
+.kanban-column-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+.kanban-column-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #172b4d;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kanban-column-count {
+  font-size: 12px;
+  color: #6b778c;
+  background: #dfe1e6;
+  border-radius: 10px;
+  padding: 1px 8px;
+  flex-shrink: 0;
+}
+.kanban-column-count--limit {
+  background: #ffebe6;
+  color: #bf2600;
+}
+.kanban-column-collapse-btn,
+.kanban-column-actions-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #6b778c;
+  font-size: 12px;
+  padding: 2px 4px;
+  border-radius: 3px;
+  line-height: 1;
+}
+.kanban-column-collapse-btn:hover,
+.kanban-column-actions-btn:hover {
+  background: #dfe1e6;
+  color: #172b4d;
+}
+/* Column Body */
+.kanban-column-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+  min-height: 40px;
+}
+.kanban-column-body--drag-over {
+  background: #e3f2fd;
+  border-radius: 0 0 8px 8px;
+}
+/* Placeholder */
+.kanban-placeholder {
+  background: #e3f2fd;
+  border: 2px dashed #90caf9;
+  border-radius: 6px;
+  margin-bottom: 8px;
+  min-height: 40px;
+  transition: height 0.15s ease;
+}
+/* Card */
+.kanban-card {
+  background: #fff;
+  border-radius: 6px;
+  padding: 10px 12px;
+  margin-bottom: 8px;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  transition: box-shadow 0.2s, transform 0.15s, opacity 0.2s;
+  border: 1px solid transparent;
+  position: relative;
+}
+.kanban-card:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  border-color: #e1e4e8;
+}
+.kanban-card--dragging {
+  opacity: 0.4;
+  transform: rotate(2deg);
+}
+/* Card Priority */
+.kanban-card-priority {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  border-radius: 6px 0 0 6px;
+}
+.kanban-card-priority--low {
+  background: #36b37e;
+}
+.kanban-card-priority--medium {
+  background: #ffab00;
+}
+.kanban-card-priority--high {
+  background: #ff5630;
+}
+.kanban-card-priority--urgent {
+  background: #bf2600;
+}
+/* Card Labels */
+.kanban-card-labels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 6px;
+}
+.kanban-card-label {
+  display: inline-block;
+  padding: 1px 8px;
+  border-radius: 3px;
+  font-size: 11px;
+  color: #fff;
+  font-weight: 500;
+  line-height: 1.6;
+}
+/* Card Title */
+.kanban-card-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #172b4d;
+  line-height: 1.4;
+  word-break: break-word;
+}
+/* Card Description */
+.kanban-card-desc {
+  font-size: 12px;
+  color: #6b778c;
+  margin-top: 4px;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+/* Card Footer */
+.kanban-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 8px;
+  gap: 8px;
+}
+.kanban-card-assignees {
+  display: flex;
+  gap: -4px;
+}
+.kanban-card-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: #dfe1e6;
+  color: #42526e;
+  font-size: 11px;
+  font-weight: 600;
+  border: 2px solid #fff;
+  margin-left: -4px;
+}
+.kanban-card-avatar:first-child {
+  margin-left: 0;
+}
+.kanban-card-avatar-more {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: #c1c7d0;
+  color: #42526e;
+  font-size: 10px;
+  font-weight: 600;
+  border: 2px solid #fff;
+  margin-left: -4px;
+}
+.kanban-card-due {
+  font-size: 12px;
+  color: #6b778c;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.kanban-card-due--overdue {
+  color: #ff5630;
+  font-weight: 600;
+}
+/* Add Buttons */
+.kanban-add-card {
+  padding: 0 4px;
+}
+.kanban-add-card-btn {
+  width: 100%;
+  padding: 6px 8px;
+  background: none;
+  border: none;
+  border-radius: 6px;
+  color: #6b778c;
+  font-size: 13px;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s, color 0.15s;
+}
+.kanban-add-card-btn:hover {
+  background: #dfe1e6;
+  color: #172b4d;
+}
+.kanban-add-column {
+  flex: 0 0 280px;
+}
+.kanban-add-column-btn {
+  width: 100%;
+  padding: 10px;
+  background: rgba(0, 0, 0, 0.04);
+  border: 2px dashed #d0d4d9;
+  border-radius: 8px;
+  color: #6b778c;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+.kanban-add-column-btn:hover {
+  background: rgba(0, 0, 0, 0.08);
+  border-color: #a5adba;
+  color: #172b4d;
+}
+/* Scrollbar */
+.kanban-column-body::-webkit-scrollbar {
+  width: 6px;
+}
+.kanban-column-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+.kanban-column-body::-webkit-scrollbar-thumb {
+  background: #c1c7d0;
+  border-radius: 3px;
+}
+.kanban-column-body::-webkit-scrollbar-thumb:hover {
+  background: #a5adba;
+}
+/*# sourceMappingURL=src/styles/kanban.less.map */