@object-ui/plugin-kanban 3.1.2 → 3.1.4

package/dist/KanbanImpl-ii52_k8g.js

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

package/dist/chevron-down-DpXJN6OX.js

@@ -0,0 +1,7 @@
+import { n as e } from "./plus-CAtTu4zt.js";
+var t = e("chevron-down", [["path", {
+	d: "m6 9 6 6 6-6",
+	key: "qrunsl"
+}]]);
+//#endregion
+export { t };