@object-ui/plugin-kanban 3.0.3 → 3.1.0

package/dist/KanbanImpl-4dgoNPtI.js

@@ -0,0 +1,350 @@
+import { j as e, P as Q } from "./index-CyNcIIS1.js";
+import * as p from "react";
+import { u as F, a as V, D as ee, c as se, S as _, v as H, b as te, d as re, T as ae, P as ne, e as J, C as ie } from "./sortable.esm-CNNHgHk5.js";
+import { Card as oe, CardHeader as le, CardTitle as de, CardDescription as ce, CardContent as ue, Badge as T, ScrollArea as me, Button as fe, Input as xe } from "@object-ui/components";
+import { useHasDndProvider as pe, useDnd as ge } from "@object-ui/react";
+const E = (...s) => s.filter(Boolean).join(" "), R = "Uncategorized";
+function he(s, c) {
+  if (!c || c.length === 0) return {};
+  for (const i of c) {
+    const u = s[i.field];
+    if (u == null) continue;
+    let r = !1;
+    const m = String(u);
+    switch (i.operator) {
+      case "equals":
+        r = m === String(i.value);
+        break;
+      case "not_equals":
+        r = m !== String(i.value);
+        break;
+      case "contains":
+        r = m.toLowerCase().includes(String(i.value).toLowerCase());
+        break;
+      case "in":
+        r = Array.isArray(i.value) && i.value.includes(m);
+        break;
+    }
+    if (r)
+      return {
+        ...i.backgroundColor ? { backgroundColor: i.backgroundColor } : {},
+        ...i.borderColor ? { borderColor: i.borderColor } : {}
+      };
+  }
+  return {};
+}
+function $({ card: s, onCardClick: c, conditionalFormatting: i }) {
+  const {
+    attributes: u,
+    listeners: r,
+    setNodeRef: m,
+    transform: f,
+    transition: v,
+    isDragging: g
+  } = J({ id: s.id }), n = {
+    transform: ie.Transform.toString(f),
+    transition: v,
+    opacity: g ? 0.5 : void 0
+  }, b = he(s, i);
+  return /* @__PURE__ */ e.jsx(
+    "div",
+    {
+      ref: m,
+      style: n,
+      ...u,
+      ...r,
+      role: "listitem",
+      "aria-label": s.title,
+      onClick: () => c?.(s),
+      children: /* @__PURE__ */ e.jsxs(oe, { 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: b, children: [
+        s.coverImage && /* @__PURE__ */ e.jsx("div", { className: "w-full h-32 overflow-hidden rounded-t-lg", children: /* @__PURE__ */ e.jsx(
+          "img",
+          {
+            src: s.coverImage,
+            alt: "",
+            className: "w-full h-full object-cover",
+            loading: "lazy"
+          }
+        ) }),
+        /* @__PURE__ */ e.jsxs(le, { className: "p-2 sm:p-4", children: [
+          /* @__PURE__ */ e.jsx(de, { className: "text-xs sm:text-sm font-medium font-mono tracking-tight text-foreground group-hover:text-primary transition-colors", children: s.title }),
+          s.description && /* @__PURE__ */ e.jsx(ce, { className: "text-xs text-muted-foreground font-mono line-clamp-2 sm:line-clamp-none", children: s.description })
+        ] }),
+        s.badges && s.badges.length > 0 && /* @__PURE__ */ e.jsx(ue, { className: "p-2 sm:p-4 pt-0", children: /* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-1", children: s.badges.map((w, C) => /* @__PURE__ */ e.jsx(T, { variant: w.variant || "default", className: "text-xs", children: w.label }, C)) }) })
+      ] })
+    }
+  );
+}
+function ve({ columnId: s, onAdd: c }) {
+  const [i, u] = p.useState(!1), [r, m] = p.useState(""), f = p.useRef(null), v = () => {
+    const n = r.trim();
+    n && (c(s, n), m("")), u(!1);
+  }, g = (n) => {
+    n.key === "Enter" ? (n.preventDefault(), v()) : n.key === "Escape" && (m(""), u(!1));
+  };
+  return i ? /* @__PURE__ */ e.jsx("div", { className: "mt-2 space-y-2", children: /* @__PURE__ */ e.jsx(
+    xe,
+    {
+      ref: f,
+      value: r,
+      onChange: (n) => m(n.target.value),
+      onKeyDown: g,
+      onBlur: v,
+      placeholder: "Enter card title...",
+      className: "text-sm",
+      autoFocus: !0
+    }
+  ) }) : /* @__PURE__ */ e.jsxs(
+    fe,
+    {
+      variant: "ghost",
+      size: "sm",
+      className: "w-full mt-2 text-muted-foreground hover:text-foreground",
+      onClick: () => {
+        u(!0), setTimeout(() => f.current?.focus(), 0);
+      },
+      children: [
+        /* @__PURE__ */ e.jsx(Q, { className: "h-4 w-4 mr-1" }),
+        "Add Card"
+      ]
+    }
+  );
+}
+function be({
+  column: s,
+  cards: c,
+  onCardClick: i,
+  quickAdd: u,
+  onQuickAdd: r,
+  conditionalFormatting: m
+}) {
+  const f = c || [], { setNodeRef: v } = J({
+    id: s.id,
+    data: {
+      type: "column"
+    }
+  }), g = s.limit && f.length >= s.limit;
+  return /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      ref: v,
+      role: "group",
+      "aria-label": s.title,
+      className: E(
+        "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",
+        s.className
+      ),
+      children: [
+        /* @__PURE__ */ e.jsx("div", { className: "p-3 sm:p-4 border-b border-border/50 bg-muted/30 rounded-t-lg", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ e.jsx("h3", { id: `kanban-col-${s.id}`, className: "font-mono text-xs sm:text-sm font-semibold tracking-wider text-primary/90 uppercase truncate", children: s.title }),
+          /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e.jsxs(T, { variant: "secondary", className: "text-xs font-mono tabular-nums", children: [
+              f.length,
+              s.limit && ` / ${s.limit}`
+            ] }),
+            g && /* @__PURE__ */ e.jsx(T, { variant: "destructive", className: "text-xs", children: "Full" })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ e.jsxs(me, { className: "flex-1 p-4", children: [
+          /* @__PURE__ */ e.jsx(
+            _,
+            {
+              items: f.map((n) => n.id),
+              strategy: H,
+              children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", role: "list", "aria-label": `${s.title} cards`, children: [
+                f.length === 0 && /* @__PURE__ */ e.jsx("div", { className: "flex flex-col items-center justify-center py-8 text-muted-foreground/50", children: /* @__PURE__ */ e.jsx("span", { className: "text-xs font-mono", children: "No cards" }) }),
+                f.map((n) => /* @__PURE__ */ e.jsx($, { card: n, onCardClick: i, conditionalFormatting: m }, n.id))
+              ] })
+            }
+          ),
+          u && r && /* @__PURE__ */ e.jsx(ve, { columnId: s.id, onAdd: r })
+        ] })
+      ]
+    }
+  );
+}
+function je({ children: s }) {
+  const c = ge();
+  return /* @__PURE__ */ e.jsx(e.Fragment, { children: s(c) });
+}
+function we({ columns: s, onCardMove: c, onCardClick: i, className: u, quickAdd: r, onQuickAdd: m, coverImageField: f, conditionalFormatting: v, swimlaneField: g }) {
+  return pe() ? /* @__PURE__ */ e.jsx(je, { children: (b) => /* @__PURE__ */ e.jsx(z, { columns: s, onCardMove: c, onCardClick: i, className: u, dnd: b, quickAdd: r, onQuickAdd: m, coverImageField: f, conditionalFormatting: v, swimlaneField: g }) }) : /* @__PURE__ */ e.jsx(z, { columns: s, onCardMove: c, onCardClick: i, className: u, dnd: null, quickAdd: r, onQuickAdd: m, coverImageField: f, conditionalFormatting: v, swimlaneField: g });
+}
+function z({ columns: s, onCardMove: c, onCardClick: i, className: u, dnd: r, quickAdd: m, onQuickAdd: f, coverImageField: v, conditionalFormatting: g, swimlaneField: n }) {
+  const [b, w] = p.useState(null), C = n ? `objectui:kanban-collapsed:${n}` : null, [M, U] = p.useState(() => {
+    if (!C) return /* @__PURE__ */ new Set();
+    try {
+      const t = localStorage.getItem(C);
+      if (t) {
+        const o = JSON.parse(t);
+        if (Array.isArray(o)) return new Set(o.filter((a) => typeof a == "string"));
+      }
+    } catch {
+    }
+    return /* @__PURE__ */ new Set();
+  }), A = p.useMemo(() => (s || []).map((t) => ({
+    ...t,
+    cards: t.cards || []
+  })), [s]), [x, B] = p.useState(A);
+  p.useEffect(() => {
+    B(A);
+  }, [A]);
+  const O = p.useMemo(() => {
+    if (!n) return null;
+    const t = x.flatMap((a) => a.cards), o = /* @__PURE__ */ new Set();
+    return t.forEach((a) => {
+      const l = a[n];
+      o.add(l != null ? String(l) : R);
+    }), Array.from(o).sort();
+  }, [x, n]), q = p.useCallback((t) => {
+    U((o) => {
+      const a = new Set(o);
+      if (a.has(t) ? a.delete(t) : a.add(t), C)
+        try {
+          localStorage.setItem(C, JSON.stringify([...a]));
+        } catch {
+        }
+      return a;
+    });
+  }, [C]), G = F(
+    V(ne, {
+      activationConstraint: {
+        distance: 5
+      }
+    }),
+    V(ae, {
+      activationConstraint: {
+        delay: 200,
+        tolerance: 5
+      }
+    })
+  ), Z = (t) => {
+    const { active: o } = t, a = X(o.id);
+    if (w(a), r && a) {
+      const l = K(a.id);
+      l && r.startDrag({ id: a.id, type: "kanban-card", data: a, sourceId: l.id });
+    }
+  }, W = (t) => {
+    const { active: o, over: a } = t;
+    if (w(null), !a) {
+      r && r.endDrag();
+      return;
+    }
+    const l = o.id, h = a.id;
+    if (l === h) {
+      r && r.endDrag();
+      return;
+    }
+    const d = K(l), y = K(h) || Y(h);
+    if (!d || !y) {
+      r && r.endDrag();
+      return;
+    }
+    if (d.id === y.id) {
+      const N = [...d.cards], S = N.findIndex((j) => j.id === l), L = N.findIndex((j) => j.id === h), P = re(N, S, L);
+      B(
+        (j) => j.map(
+          (D) => D.id === d.id ? { ...D, cards: P } : D
+        )
+      );
+    } else {
+      const N = [...d.cards], S = [...y.cards], L = N.findIndex((k) => k.id === l), j = h === y.id ? S.length : S.findIndex((k) => k.id === h), [D] = N.splice(L, 1);
+      S.splice(j, 0, D), B(
+        (k) => k.map((I) => I.id === d.id ? { ...I, cards: N } : I.id === y.id ? { ...I, cards: S } : I)
+      ), c && c(l, d.id, y.id, j);
+    }
+    r && r.endDrag(y.id);
+  }, X = p.useCallback(
+    (t) => {
+      for (const o of x) {
+        const a = o.cards.find((l) => l.id === t);
+        if (a) return a;
+      }
+      return null;
+    },
+    [x]
+  ), K = p.useCallback(
+    (t) => x.find((o) => o.cards.some((a) => a.id === t)) || null,
+    [x]
+  ), Y = p.useCallback(
+    (t) => x.find((o) => o.id === t) || null,
+    [x]
+  );
+  return /* @__PURE__ */ e.jsxs(
+    ee,
+    {
+      sensors: G,
+      collisionDetection: se,
+      onDragStart: Z,
+      onDragEnd: W,
+      children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "flex sm:hidden items-center justify-between px-3 pb-2 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ e.jsxs("span", { children: [
+            x.length,
+            " columns"
+          ] }),
+          /* @__PURE__ */ e.jsx("span", { children: "← Swipe to navigate →" })
+        ] }),
+        O ? (
+          /* Swimlane (2D) layout */
+          /* @__PURE__ */ e.jsxs("div", { className: E("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__ */ e.jsx("div", { className: "flex gap-3 sm:gap-4 pl-36 sm:pl-44 overflow-x-auto", children: x.map((t) => /* @__PURE__ */ e.jsxs("div", { className: "w-[85vw] sm:w-80 flex-shrink-0 text-center", children: [
+              /* @__PURE__ */ e.jsx("span", { className: "font-mono text-xs sm:text-sm font-semibold tracking-wider text-primary/90 uppercase", children: t.title }),
+              /* @__PURE__ */ e.jsxs("span", { className: "ml-2 font-mono text-xs text-muted-foreground", children: [
+                "(",
+                t.cards.length,
+                ")"
+              ] })
+            ] }, t.id)) }),
+            O.map((t) => {
+              const o = M.has(t), a = x.reduce((l, h) => l + h.cards.filter((d) => (d[n] != null ? String(d[n]) : R) === t).length, 0);
+              return /* @__PURE__ */ e.jsxs("div", { className: "border rounded-lg bg-muted/10", children: [
+                /* @__PURE__ */ e.jsxs(
+                  "button",
+                  {
+                    className: "w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-muted/30 transition-colors",
+                    onClick: () => q(t),
+                    "aria-expanded": !o,
+                    children: [
+                      /* @__PURE__ */ e.jsx("span", { className: E("transition-transform text-xs", o ? "" : "rotate-90"), children: "▶" }),
+                      /* @__PURE__ */ e.jsx("span", { className: "font-mono text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: t }),
+                      /* @__PURE__ */ e.jsxs("span", { className: "font-mono text-xs text-muted-foreground", children: [
+                        "(",
+                        a,
+                        ")"
+                      ] })
+                    ]
+                  }
+                ),
+                !o && /* @__PURE__ */ e.jsx("div", { className: "flex gap-3 sm:gap-4 overflow-x-auto px-2 pb-3 pl-36 sm:pl-44", children: x.map((l) => {
+                  const h = l.cards.filter(
+                    (d) => (d[n] != null ? String(d[n]) : R) === t
+                  );
+                  return /* @__PURE__ */ e.jsx("div", { className: "w-[85vw] sm:w-80 flex-shrink-0 min-h-[60px] rounded-md bg-card/20 p-2", children: /* @__PURE__ */ e.jsx(_, { items: h.map((d) => d.id), strategy: H, children: /* @__PURE__ */ e.jsx("div", { className: "space-y-2", role: "list", "aria-label": `${l.title} - ${t} cards`, children: h.map((d) => /* @__PURE__ */ e.jsx($, { card: d, onCardClick: i, conditionalFormatting: g }, d.id)) }) }) }, l.id);
+                }) })
+              ] }, t);
+            })
+          ] })
+        ) : (
+          /* Standard flat layout */
+          /* @__PURE__ */ e.jsx("div", { className: E("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: x.map((t) => /* @__PURE__ */ e.jsx(
+            be,
+            {
+              column: t,
+              cards: t.cards,
+              onCardClick: i,
+              quickAdd: m,
+              onQuickAdd: f,
+              conditionalFormatting: g
+            },
+            t.id
+          )) })
+        ),
+        /* @__PURE__ */ e.jsx(te, { children: /* @__PURE__ */ e.jsx("div", { "aria-live": "assertive", "aria-label": b ? `Dragging ${b.title}` : void 0, children: b ? /* @__PURE__ */ e.jsx($, { card: b, conditionalFormatting: g }) : null }) })
+      ]
+    }
+  );
+}
+export {
+  we as default
+};