@object-ui/plugin-kanban 0.3.1 → 2.0.0

package/dist/KanbanImpl--kTNN_B8.js

@@ -0,0 +1,144 @@
+import { j as e } from "./index-a4_RI-v7.js";
+import * as x from "react";
+import { u as L, a as P, D as T, c as F, b as H, d as M, P as $, e as k, S as q, v as z, C as G } from "./sortable.esm-ZHwgFQIO.js";
+import { Badge as B, ScrollArea as J, Card as Q, CardHeader as U, CardTitle as V, CardDescription as W, CardContent as X } from "@object-ui/components";
+const E = (...s) => s.filter(Boolean).join(" ");
+function R({ card: s }) {
+  const {
+    attributes: f,
+    listeners: d,
+    setNodeRef: u,
+    transform: p,
+    transition: t,
+    isDragging: n
+  } = k({ id: s.id }), b = {
+    transform: G.Transform.toString(p),
+    transition: t,
+    opacity: n ? 0.5 : void 0
+  };
+  return /* @__PURE__ */ e.jsx("div", { ref: u, style: b, ...f, ...d, children: /* @__PURE__ */ e.jsxs(Q, { className: "mb-2 cursor-grab active:cursor-grabbing border-border bg-card/60 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 group", children: [
+    /* @__PURE__ */ e.jsxs(U, { className: "p-4", children: [
+      /* @__PURE__ */ e.jsx(V, { className: "text-sm font-medium font-mono tracking-tight text-foreground group-hover:text-primary transition-colors", children: s.title }),
+      s.description && /* @__PURE__ */ e.jsx(W, { className: "text-xs text-muted-foreground font-mono", children: s.description })
+    ] }),
+    s.badges && s.badges.length > 0 && /* @__PURE__ */ e.jsx(X, { className: "p-4 pt-0", children: /* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-1", children: s.badges.map((S, y) => /* @__PURE__ */ e.jsx(B, { variant: S.variant || "default", className: "text-xs", children: S.label }, y)) }) })
+  ] }) });
+}
+function Y({
+  column: s,
+  cards: f
+}) {
+  const d = f || [], { setNodeRef: u } = k({
+    id: s.id,
+    data: {
+      type: "column"
+    }
+  }), p = s.limit && d.length >= s.limit;
+  return /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      ref: u,
+      className: E(
+        "flex flex-col w-80 flex-shrink-0 rounded-lg border border-border bg-card/20 backdrop-blur-sm shadow-xl",
+        s.className
+      ),
+      children: [
+        /* @__PURE__ */ e.jsx("div", { className: "p-4 border-b border-border/50 bg-muted/20", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ e.jsx("h3", { className: "font-mono text-sm font-semibold tracking-wider text-primary/90 uppercase", children: s.title }),
+          /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e.jsxs("span", { className: "font-mono text-xs text-muted-foreground", children: [
+              d.length,
+              s.limit && ` / ${s.limit}`
+            ] }),
+            p && /* @__PURE__ */ e.jsx(B, { variant: "destructive", className: "text-xs", children: "Full" })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ e.jsx(J, { className: "flex-1 p-4", children: /* @__PURE__ */ e.jsx(
+          q,
+          {
+            items: d.map((t) => t.id),
+            strategy: z,
+            children: /* @__PURE__ */ e.jsx("div", { className: "space-y-2", children: d.map((t) => /* @__PURE__ */ e.jsx(R, { card: t }, t.id)) })
+          }
+        ) })
+      ]
+    }
+  );
+}
+function se({ columns: s, onCardMove: f, className: d }) {
+  const [u, p] = x.useState(null), t = x.useMemo(() => (s || []).map((r) => ({
+    ...r,
+    cards: r.cards || []
+  })), [s]), [n, b] = x.useState(t);
+  x.useEffect(() => {
+    b(t);
+  }, [t]);
+  const S = L(
+    P($, {
+      activationConstraint: {
+        distance: 8
+      }
+    })
+  ), y = (r) => {
+    const { active: a } = r, i = A(a.id);
+    p(i);
+  }, O = (r) => {
+    const { active: a, over: i } = r;
+    if (p(null), !i) return;
+    const c = a.id, g = i.id;
+    if (c === g) return;
+    const l = I(c), h = I(g) || K(g);
+    if (!(!l || !h))
+      if (l.id === h.id) {
+        const m = [...l.cards], v = m.findIndex((o) => o.id === c), D = m.findIndex((o) => o.id === g), w = M(m, v, D);
+        b(
+          (o) => o.map(
+            (C) => C.id === l.id ? { ...C, cards: w } : C
+          )
+        );
+      } else {
+        const m = [...l.cards], v = [...h.cards], D = m.findIndex((j) => j.id === c), o = g === h.id ? v.length : v.findIndex((j) => j.id === g), [C] = m.splice(D, 1);
+        v.splice(o, 0, C), b(
+          (j) => j.map((N) => N.id === l.id ? { ...N, cards: m } : N.id === h.id ? { ...N, cards: v } : N)
+        ), f && f(c, l.id, h.id, o);
+      }
+  }, A = x.useCallback(
+    (r) => {
+      for (const a of n) {
+        const i = a.cards.find((c) => c.id === r);
+        if (i) return i;
+      }
+      return null;
+    },
+    [n]
+  ), I = x.useCallback(
+    (r) => n.find((a) => a.cards.some((i) => i.id === r)) || null,
+    [n]
+  ), K = x.useCallback(
+    (r) => n.find((a) => a.id === r) || null,
+    [n]
+  );
+  return /* @__PURE__ */ e.jsxs(
+    T,
+    {
+      sensors: S,
+      collisionDetection: F,
+      onDragStart: y,
+      onDragEnd: O,
+      children: [
+        /* @__PURE__ */ e.jsx("div", { className: E("flex gap-4 overflow-x-auto p-4", d), children: n.map((r) => /* @__PURE__ */ e.jsx(
+          Y,
+          {
+            column: r,
+            cards: r.cards
+          },
+          r.id
+        )) }),
+        /* @__PURE__ */ e.jsx(H, { children: u ? /* @__PURE__ */ e.jsx(R, { card: u }) : null })
+      ]
+    }
+  );
+}
+export {
+  se as default
+};