@object-ui/plugin-kanban 4.0.3 → 4.0.4

package/dist/KanbanImpl-CBkrj9oG.js

@@ -0,0 +1,401 @@
+import * as e from "react";
+import { useDnd as t, useHasDndProvider as n } from "@object-ui/react";
+import { Badge as r, Button as i, Card as a, CardContent as o, CardDescription as s, CardHeader as c, CardTitle as l, Input as u, ScrollArea as d, useResizeObserver as f } from "@object-ui/components";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { Plus as g } from "lucide-react";
+import { DndContext as _, DragOverlay as v, PointerSensor as y, TouchSensor as b, closestCorners as x, useSensor as S, useSensors as C } from "@dnd-kit/core";
+import { SortableContext as w, arrayMove as T, useSortable as E, verticalListSortingStrategy as D } from "@dnd-kit/sortable";
+import { CSS as O } from "@dnd-kit/utilities";
+//#region src/KanbanImpl.tsx
+var k = (...e) => e.filter(Boolean).join(" "), A = "Uncategorized";
+function j(e, t) {
+	if (!t || t.length === 0) return {};
+	for (let n of t) {
+		let t = e[n.field];
+		if (t == null) continue;
+		let r = !1, i = String(t);
+		switch (n.operator) {
+			case "equals":
+				r = i === String(n.value);
+				break;
+			case "not_equals":
+				r = i !== String(n.value);
+				break;
+			case "contains":
+				r = i.toLowerCase().includes(String(n.value).toLowerCase());
+				break;
+			case "in":
+				r = Array.isArray(n.value) && n.value.includes(i);
+				break;
+		}
+		if (r) return {
+			...n.backgroundColor ? { backgroundColor: n.backgroundColor } : {},
+			...n.borderColor ? { borderColor: n.borderColor } : {}
+		};
+	}
+	return {};
+}
+function M({ card: e, onCardClick: t, conditionalFormatting: n }) {
+	let { attributes: i, listeners: u, setNodeRef: d, transform: f, transition: p, isDragging: g } = E({ id: e.id }), _ = {
+		transform: O.Transform.toString(f),
+		transition: p,
+		opacity: g ? .5 : void 0
+	}, v = j(e, n);
+	return /* @__PURE__ */ m("div", {
+		ref: d,
+		style: _,
+		...i,
+		...u,
+		role: "listitem",
+		"aria-label": e.title,
+		onClick: () => t?.(e),
+		children: /* @__PURE__ */ h(a, {
+			className: "mb-2 cursor-grab active:cursor-grabbing border-border border-l-4 border-l-primary/40 bg-card/60 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 group touch-manipulation",
+			style: v,
+			children: [
+				e.coverImage && /* @__PURE__ */ m("div", {
+					className: "w-full h-32 overflow-hidden rounded-t-lg",
+					children: /* @__PURE__ */ m("img", {
+						src: e.coverImage,
+						alt: "",
+						className: "w-full h-full object-cover",
+						loading: "lazy"
+					})
+				}),
+				/* @__PURE__ */ h(c, {
+					className: "p-2 sm:p-4",
+					children: [/* @__PURE__ */ m(l, {
+						className: "text-xs sm:text-sm font-medium tracking-tight text-foreground group-hover:text-primary transition-colors",
+						children: e.title
+					}), e.description && /* @__PURE__ */ m(s, {
+						className: "text-xs text-muted-foreground line-clamp-2 sm:line-clamp-none",
+						children: e.description
+					})]
+				}),
+				e.badges && e.badges.length > 0 && /* @__PURE__ */ m(o, {
+					className: "p-2 sm:p-4 pt-0",
+					children: /* @__PURE__ */ m("div", {
+						className: "flex flex-wrap gap-1",
+						children: e.badges.map((e, t) => /* @__PURE__ */ m(r, {
+							variant: e.variant || "default",
+							className: "text-xs",
+							children: e.label
+						}, t))
+					})
+				})
+			]
+		})
+	});
+}
+function N({ columnId: t, onAdd: n }) {
+	let [r, a] = e.useState(!1), [o, s] = e.useState(""), c = e.useRef(null), l = () => {
+		let e = o.trim();
+		e && (n(t, e), s("")), a(!1);
+	};
+	return r ? /* @__PURE__ */ m("div", {
+		className: "mt-2 space-y-2",
+		children: /* @__PURE__ */ m(u, {
+			ref: c,
+			value: o,
+			onChange: (e) => s(e.target.value),
+			onKeyDown: (e) => {
+				e.key === "Enter" ? (e.preventDefault(), l()) : e.key === "Escape" && (s(""), a(!1));
+			},
+			onBlur: l,
+			placeholder: "Enter card title...",
+			className: "text-sm",
+			autoFocus: !0
+		})
+	}) : /* @__PURE__ */ h(i, {
+		variant: "ghost",
+		size: "sm",
+		className: "w-full mt-2 text-muted-foreground hover:text-foreground",
+		onClick: () => {
+			a(!0), setTimeout(() => c.current?.focus(), 0);
+		},
+		children: [/* @__PURE__ */ m(g, { className: "h-4 w-4 mr-1" }), "Add Card"]
+	});
+}
+function P({ column: e, cards: t, onCardClick: n, quickAdd: i, onQuickAdd: a, conditionalFormatting: o, columnStyle: s }) {
+	let c = t || [], { setNodeRef: l } = E({
+		id: e.id,
+		data: { type: "column" }
+	}), u = e.limit && c.length >= e.limit, f = s && s.width != null ? "flex-shrink-0" : "w-[85vw] sm:w-80 flex-shrink-0";
+	return /* @__PURE__ */ h("div", {
+		ref: l,
+		role: "group",
+		"aria-label": e.title,
+		style: s,
+		className: k("flex flex-col rounded-lg border border-border bg-card/20 backdrop-blur-sm shadow-xl snap-start max-h-full min-h-0", f, e.className),
+		children: [/* @__PURE__ */ m("div", {
+			className: "p-3 sm:p-4 border-b border-border/50 bg-muted/30 rounded-t-lg",
+			children: /* @__PURE__ */ h("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ m("h3", {
+					id: `kanban-col-${e.id}`,
+					className: " text-xs sm:text-sm font-semibold tracking-wider text-primary/90 uppercase truncate",
+					children: e.title
+				}), /* @__PURE__ */ h("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ h(r, {
+						variant: "secondary",
+						className: "text-xs tabular-nums",
+						children: [c.length, e.limit && ` / ${e.limit}`]
+					}), u && /* @__PURE__ */ m(r, {
+						variant: "destructive",
+						className: "text-xs",
+						children: "Full"
+					})]
+				})]
+			})
+		}), /* @__PURE__ */ h(d, {
+			className: "flex-1 p-4",
+			children: [/* @__PURE__ */ m(w, {
+				items: c.map((e) => e.id),
+				strategy: D,
+				children: /* @__PURE__ */ h("div", {
+					className: "space-y-2",
+					role: "list",
+					"aria-label": `${e.title} cards`,
+					children: [c.length === 0 && /* @__PURE__ */ m("div", {
+						className: "flex flex-col items-center justify-center py-8 text-muted-foreground/50",
+						children: /* @__PURE__ */ m("span", {
+							className: "text-xs",
+							children: "No cards"
+						})
+					}), c.map((e) => /* @__PURE__ */ m(M, {
+						card: e,
+						onCardClick: n,
+						conditionalFormatting: o
+					}, e.id))]
+				})
+			}), i && a && /* @__PURE__ */ m(N, {
+				columnId: e.id,
+				onAdd: a
+			})]
+		})]
+	});
+}
+function F({ children: e }) {
+	return /* @__PURE__ */ m(p, { children: e(t()) });
+}
+function I({ columns: e, onCardMove: t, onCardClick: r, className: i, quickAdd: a, onQuickAdd: o, coverImageField: s, conditionalFormatting: c, swimlaneField: l }) {
+	return n() ? /* @__PURE__ */ m(F, { children: (n) => /* @__PURE__ */ m(L, {
+		columns: e,
+		onCardMove: t,
+		onCardClick: r,
+		className: i,
+		dnd: n,
+		quickAdd: a,
+		onQuickAdd: o,
+		coverImageField: s,
+		conditionalFormatting: c,
+		swimlaneField: l
+	}) }) : /* @__PURE__ */ m(L, {
+		columns: e,
+		onCardMove: t,
+		onCardClick: r,
+		className: i,
+		dnd: null,
+		quickAdd: a,
+		onQuickAdd: o,
+		coverImageField: s,
+		conditionalFormatting: c,
+		swimlaneField: l
+	});
+}
+function L({ columns: t, onCardMove: n, onCardClick: r, className: i, dnd: a, quickAdd: o, onQuickAdd: s, coverImageField: c, conditionalFormatting: l, swimlaneField: u }) {
+	let [d, p] = e.useState(null), g = e.useRef(null), { width: E } = f(g), O = e.useMemo(() => E ? E < 480 ? { width: Math.max(E - 32, 220) } : E < 720 ? { width: 280 } : { width: 320 } : {}, [E]), j = u ? `objectui:kanban-collapsed:${u}` : null, [N, F] = e.useState(() => {
+		if (!j) return /* @__PURE__ */ new Set();
+		try {
+			let e = localStorage.getItem(j);
+			if (e) {
+				let t = JSON.parse(e);
+				if (Array.isArray(t)) return new Set(t.filter((e) => typeof e == "string"));
+			}
+		} catch {}
+		return /* @__PURE__ */ new Set();
+	}), I = e.useMemo(() => (t || []).map((e) => ({
+		...e,
+		cards: e.cards || []
+	})), [t]), [L, R] = e.useState(I);
+	e.useEffect(() => {
+		R(I);
+	}, [I]);
+	let z = e.useMemo(() => {
+		if (!u) return null;
+		let e = L.flatMap((e) => e.cards), t = /* @__PURE__ */ new Set();
+		return e.forEach((e) => {
+			let n = e[u];
+			t.add(n == null ? A : String(n));
+		}), Array.from(t).sort();
+	}, [L, u]), B = e.useCallback((e) => {
+		F((t) => {
+			let n = new Set(t);
+			if (n.has(e) ? n.delete(e) : n.add(e), j) try {
+				localStorage.setItem(j, JSON.stringify([...n]));
+			} catch {}
+			return n;
+		});
+	}, [j]), V = C(S(y, { activationConstraint: { distance: 5 } }), S(b, { activationConstraint: {
+		delay: 200,
+		tolerance: 5
+	} })), H = (e) => {
+		let { active: t } = e, n = W(t.id);
+		if (p(n), a && n) {
+			let e = G(n.id);
+			e && a.startDrag({
+				id: n.id,
+				type: "kanban-card",
+				data: n,
+				sourceId: e.id
+			});
+		}
+	}, U = (e) => {
+		let { active: t, over: r } = e;
+		if (p(null), !r) {
+			a && a.endDrag();
+			return;
+		}
+		let i = t.id, o = r.id;
+		if (i === o) {
+			a && a.endDrag();
+			return;
+		}
+		let s = G(i), c = G(o) || K(o);
+		if (!s || !c) {
+			a && a.endDrag();
+			return;
+		}
+		if (s.id === c.id) {
+			let e = [...s.cards], t = T(e, e.findIndex((e) => e.id === i), e.findIndex((e) => e.id === o));
+			R((e) => e.map((e) => e.id === s.id ? {
+				...e,
+				cards: t
+			} : e));
+		} else {
+			let e = [...s.cards], t = [...c.cards], r = e.findIndex((e) => e.id === i), a = o === c.id ? t.length : t.findIndex((e) => e.id === o), [l] = e.splice(r, 1);
+			t.splice(a, 0, l), R((n) => n.map((n) => n.id === s.id ? {
+				...n,
+				cards: e
+			} : n.id === c.id ? {
+				...n,
+				cards: t
+			} : n)), n && n(i, s.id, c.id, a);
+		}
+		a && a.endDrag(c.id);
+	}, W = e.useCallback((e) => {
+		for (let t of L) {
+			let n = t.cards.find((t) => t.id === e);
+			if (n) return n;
+		}
+		return null;
+	}, [L]), G = e.useCallback((e) => L.find((t) => t.cards.some((t) => t.id === e)) || null, [L]), K = e.useCallback((e) => L.find((t) => t.id === e) || null, [L]);
+	return /* @__PURE__ */ h(_, {
+		sensors: V,
+		collisionDetection: x,
+		onDragStart: H,
+		onDragEnd: U,
+		children: [/* @__PURE__ */ h("div", {
+			ref: g,
+			className: "flex flex-col min-w-0 min-h-0 h-full",
+			children: [/* @__PURE__ */ h("div", {
+				className: "flex sm:hidden items-center justify-between px-3 pb-2 text-xs text-muted-foreground",
+				children: [/* @__PURE__ */ h("span", { children: [L.length, " columns"] }), /* @__PURE__ */ m("span", { children: "← Swipe to navigate →" })]
+			}), z ? /* @__PURE__ */ h("div", {
+				className: k("flex flex-col gap-1 p-2 sm:p-4 min-w-0 overflow-hidden", i),
+				role: "region",
+				"aria-label": "Kanban board with swimlanes",
+				children: [/* @__PURE__ */ m("div", {
+					className: "flex gap-3 sm:gap-4 pl-36 sm:pl-44 overflow-x-auto",
+					children: L.map((e) => /* @__PURE__ */ h("div", {
+						className: "w-[85vw] sm:w-80 flex-shrink-0 text-center",
+						children: [/* @__PURE__ */ m("span", {
+							className: " text-xs sm:text-sm font-semibold tracking-wider text-primary/90 uppercase",
+							children: e.title
+						}), /* @__PURE__ */ h("span", {
+							className: "ml-2 text-xs text-muted-foreground",
+							children: [
+								"(",
+								e.cards.length,
+								")"
+							]
+						})]
+					}, e.id))
+				}), z.map((e) => {
+					let t = N.has(e), n = L.reduce((t, n) => t + n.cards.filter((t) => (t[u] == null ? A : String(t[u])) === e).length, 0);
+					return /* @__PURE__ */ h("div", {
+						className: "border rounded-lg bg-muted/10",
+						children: [/* @__PURE__ */ h("button", {
+							className: "w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-muted/30 transition-colors",
+							onClick: () => B(e),
+							"aria-expanded": !t,
+							children: [
+								/* @__PURE__ */ m("span", {
+									className: k("transition-transform text-xs", t ? "" : "rotate-90"),
+									children: "▶"
+								}),
+								/* @__PURE__ */ m("span", {
+									className: " text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+									children: e
+								}),
+								/* @__PURE__ */ h("span", {
+									className: " text-xs text-muted-foreground",
+									children: [
+										"(",
+										n,
+										")"
+									]
+								})
+							]
+						}), !t && /* @__PURE__ */ m("div", {
+							className: "flex gap-3 sm:gap-4 overflow-x-auto px-2 pb-3 pl-36 sm:pl-44",
+							children: L.map((t) => {
+								let n = t.cards.filter((t) => (t[u] == null ? A : String(t[u])) === e);
+								return /* @__PURE__ */ m("div", {
+									className: "w-[85vw] sm:w-80 flex-shrink-0 min-h-[60px] rounded-md bg-card/20 p-2",
+									children: /* @__PURE__ */ m(w, {
+										items: n.map((e) => e.id),
+										strategy: D,
+										children: /* @__PURE__ */ m("div", {
+											className: "space-y-2",
+											role: "list",
+											"aria-label": `${t.title} - ${e} cards`,
+											children: n.map((e) => /* @__PURE__ */ m(M, {
+												card: e,
+												onCardClick: r,
+												conditionalFormatting: l
+											}, e.id))
+										})
+									})
+								}, t.id);
+							})
+						})]
+					}, e);
+				})]
+			}) : /* @__PURE__ */ m("div", {
+				className: k("flex gap-3 sm:gap-4 overflow-x-auto snap-x snap-mandatory p-2 sm:p-4 bg-muted/10 rounded-lg [-webkit-overflow-scrolling:touch] min-w-0 min-h-0 h-full", i),
+				role: "region",
+				"aria-label": "Kanban board",
+				children: L.map((e) => /* @__PURE__ */ m(P, {
+					column: e,
+					cards: e.cards,
+					onCardClick: r,
+					quickAdd: o,
+					onQuickAdd: s,
+					conditionalFormatting: l,
+					columnStyle: O
+				}, e.id))
+			})]
+		}), /* @__PURE__ */ m(v, { children: /* @__PURE__ */ m("div", {
+			"aria-live": "assertive",
+			"aria-label": d ? `Dragging ${d.title}` : void 0,
+			children: d ? /* @__PURE__ */ m(M, {
+				card: d,
+				conditionalFormatting: l
+			}) : null
+		}) })]
+	});
+}
+//#endregion
+export { I as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-kanban",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "type": "module",
   "license": "MIT",
   "description": "Kanban board plugin for Object UI, powered by dnd-kit",
@@ -29,10 +29,10 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@tanstack/react-virtual": "^3.13.24",
     "lucide-react": "^1.14.0",
-    "@object-ui/components": "4.0.3",
-    "@object-ui/core": "4.0.3",
-    "@object-ui/react": "4.0.3",
-    "@object-ui/types": "4.0.3"
+    "@object-ui/components": "4.0.4",
+    "@object-ui/core": "4.0.4",
+    "@object-ui/react": "4.0.4",
+    "@object-ui/types": "4.0.4"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -45,7 +45,7 @@
     "typescript": "^6.0.3",
     "vite": "^8.0.10",
     "vite-plugin-dts": "^5.0.0",
-    "@object-ui/data-objectstack": "4.0.3"
+    "@object-ui/data-objectstack": "4.0.4"
   },
   "keywords": [
     "objectui",