laif-ds 0.2.48 → 0.2.49

package/dist/components/ui/app-kanban.js

@@ -1,137 +1,157 @@
 "use client";
-import { jsx as d, jsxs as f, Fragment as P } from "react/jsx-runtime";
-import { useState as H } from "react";
-import { KanbanBoardProvider as S, KanbanBoard as A, KanbanBoardColumn as F, KanbanBoardColumnHeader as I, KanbanBoardColumnList as J, KanbanBoardColumnListItem as W, KanbanBoardCard as $, KanbanBoardCardTitle as q, KanbanBoardCardDescription as w } from "../kanban.js";
-import { Button as E } from "./button.js";
-import { stringToHexColor as x } from "../../lib/utils.js";
-import G from "../../node_modules/lucide-react/dist/esm/icons/plus.js";
-function Z({
-  columns: g,
-  initialTasks: N,
-  onTaskMove: l,
-  onTaskEdit: b,
-  onTaskCreate: h,
-  taskActions: O,
-  renderTaskContent: u,
+import { jsx as o, jsxs as l, Fragment as $ } from "react/jsx-runtime";
+import { useState as z } from "react";
+import { KanbanBoardProvider as H, KanbanBoard as I, KanbanBoardColumn as S, KanbanBoardColumnHeader as w, KanbanBoardColumnList as A, KanbanBoardColumnListItem as F, KanbanBoardCard as J, KanbanBoardCardTitle as W, KanbanBoardCardDescription as q } from "../kanban.js";
+import { stringToHexColor as E } from "../../lib/utils.js";
+import { Icon as G } from "./icon.js";
+import Q from "../../node_modules/lucide-react/dist/esm/icons/plus.js";
+function _({
+  columns: y,
+  initialTasks: K,
+  onTaskMove: p,
+  onTaskEdit: x,
+  onTaskCreate: u,
+  taskActions: B,
+  renderTaskContent: b,
   className: j,
-  allowTaskCreate: v = !0
+  allowTaskCreate: v = !0,
+  createTaskLabel: O = "Nuovo task"
 }) {
-  const [C, K] = H(N), y = (e) => {
-    const i = {};
-    for (const r of Object.keys(e))
-      i[r] = [...e[r]];
-    return i;
-  }, D = (e, i) => {
-    K((r) => {
-      const o = y(r);
-      let t, n;
-      for (const a of Object.keys(o)) {
-        const c = o[a].findIndex((p) => p.id === e);
+  const [h, C] = z(K), g = (r) => {
+    const n = {};
+    for (const e of Object.keys(r))
+      n[e] = [...r[e]];
+    return n;
+  }, D = (r, n) => {
+    C((e) => {
+      const t = g(e);
+      let d, i;
+      for (const s of Object.keys(t)) {
+        const c = t[s].findIndex((m) => m.id === r);
         if (c !== -1) {
-          n = a, [t] = o[a].splice(c, 1);
+          i = s, [d] = t[s].splice(c, 1);
           break;
         }
       }
-      return !t || n === i ? r : (o[i] || (o[i] = []), o[i].push(t), n && l && l(e, n, i), o);
+      return !d || i === n ? e : (t[n] || (t[n] = []), t[n].push(d), i && p && p(r, i, n), t);
     });
-  }, z = (e, i, r, o) => {
-    K((t) => {
-      const n = y(t), a = Object.keys(n).find(
-        (s) => n[s].some((L) => L.id === e)
+  }, L = (r, n, e, t) => {
+    C((d) => {
+      const i = g(d), s = Object.keys(i).find(
+        (a) => i[a].some((P) => P.id === r)
       );
-      if (!a) return t;
-      const c = n[a].findIndex(
-        (s) => s.id === e
+      if (!s) return d;
+      const c = i[s].findIndex(
+        (a) => a.id === r
       );
-      if (c === -1) return t;
-      const [p] = n[a].splice(c, 1);
-      n[r] || (n[r] = []);
-      const m = n[r].findIndex(
-        (s) => s.id === i
+      if (c === -1) return d;
+      const [m] = i[s].splice(c, 1);
+      i[e] || (i[e] = []);
+      const f = i[e].findIndex(
+        (a) => a.id === n
       );
-      if (m === -1)
-        n[r].push(p);
+      if (f === -1)
+        i[e].push(m);
       else {
-        const s = o === "top" ? m : m + 1;
-        n[r].splice(s, 0, p);
+        const a = t === "top" ? f : f + 1;
+        i[e].splice(a, 0, m);
       }
-      return a !== r && l && l(e, a, r), n;
+      return s !== e && p && p(r, s, e), i;
     });
-  }, B = (e) => JSON.parse(e);
-  return /* @__PURE__ */ d(S, { children: /* @__PURE__ */ d(A, { className: j, children: g.map((e) => /* @__PURE__ */ f(
-    F,
-    {
-      columnId: e.id,
-      onDropOverColumn: (i) => {
-        const r = B(i);
-        D(r.id, e.id);
-      },
-      className: "group/column",
-      children: [
-        /* @__PURE__ */ f(I, { className: "relative", children: [
-          /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ d(
+  }, N = (r) => JSON.parse(r);
+  return /* @__PURE__ */ o(H, { children: /* @__PURE__ */ o(I, { className: j, children: y.map((r) => {
+    const n = E(r.label);
+    return /* @__PURE__ */ l(
+      S,
+      {
+        columnId: r.id,
+        onDropOverColumn: (e) => {
+          const t = N(e);
+          D(t.id, r.id);
+        },
+        className: "group/column border-0",
+        style: {
+          backgroundColor: `${n}1d`
+        },
+        children: [
+          /* @__PURE__ */ o(w, { className: "relative mb-2", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ o(
               "span",
               {
-                className: "inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium",
+                className: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-sm font-semibold tracking-tight",
                 style: {
-                  backgroundColor: `${x(e.label)}20`,
-                  color: x(e.label)
+                  backgroundColor: `${n}18`,
+                  color: n
                 },
-                children: e.label
+                children: r.label
               }
             ),
-            /* @__PURE__ */ d("span", { className: "text-d-muted-foreground text-xs", children: C[e.id]?.length ?? 0 })
-          ] }),
-          v && h && /* @__PURE__ */ d(
-            E,
+            /* @__PURE__ */ o("span", { className: "text-d-muted-foreground text-sm", children: h[r.id]?.length ?? 0 })
+          ] }) }),
+          /* @__PURE__ */ o(A, { children: h[r.id]?.map((e) => /* @__PURE__ */ o(
+            F,
             {
-              variant: "ghost",
-              size: "icon",
-              className: "size-6 opacity-0 transition-opacity group-hover/column:opacity-100",
-              onClick: (i) => {
-                i.stopPropagation(), h(e.id);
+              cardId: e.id,
+              onDropOverListItem: (t, d) => {
+                if (d === "none") return;
+                const i = N(t);
+                L(
+                  i.id,
+                  e.id,
+                  r.id,
+                  d
+                );
               },
-              children: /* @__PURE__ */ d(G, { className: "size-4" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ d(J, { children: C[e.id]?.map((i) => /* @__PURE__ */ d(
-          W,
-          {
-            cardId: i.id,
-            onDropOverListItem: (r, o) => {
-              if (o === "none") return;
-              const t = B(r);
-              z(
-                t.id,
-                i.id,
-                e.id,
-                o
-              );
+              children: /* @__PURE__ */ o(
+                J,
+                {
+                  data: e,
+                  onEdit: x ? () => x(e, r.id) : void 0,
+                  actions: B?.(e, r.id),
+                  meta: e.meta,
+                  backgroundColor: n,
+                  children: b ? b(e, r.id) : /* @__PURE__ */ l($, { children: [
+                    /* @__PURE__ */ l("div", { className: "flex items-start gap-2", children: [
+                      e.icon && /* @__PURE__ */ o(
+                        G,
+                        {
+                          name: e.icon,
+                          size: "sm",
+                          className: "text-d-foreground/80 mt-0.5"
+                        }
+                      ),
+                      /* @__PURE__ */ o(W, { className: "flex-1", children: e.title })
+                    ] }),
+                    e.description && /* @__PURE__ */ o(q, { children: e.description })
+                  ] })
+                }
+              )
             },
-            children: /* @__PURE__ */ d(
-              $,
-              {
-                data: i,
-                onEdit: b ? () => b(i, e.id) : void 0,
-                actions: O?.(i, e.id),
-                meta: i.meta,
-                backgroundColor: x(e.label),
-                children: u ? u(i, e.id) : /* @__PURE__ */ f(P, { children: [
-                  /* @__PURE__ */ d(q, { children: i.title }),
-                  i.description && /* @__PURE__ */ d(w, { children: i.description })
-                ] })
-              }
-            )
-          },
-          i.id
-        )) })
-      ]
-    },
-    e.id
-  )) }) });
+            e.id
+          )) }),
+          v && u && /* @__PURE__ */ o("div", { className: "px-2 pt-1", children: /* @__PURE__ */ l(
+            "button",
+            {
+              className: "flex w-full cursor-pointer items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-sm transition-colors",
+              style: {
+                backgroundColor: `${n}1a`,
+                color: n
+              },
+              onClick: (e) => {
+                e.stopPropagation(), u(r.id);
+              },
+              children: [
+                /* @__PURE__ */ o(Q, { className: "size-4" }),
+                /* @__PURE__ */ o("span", { children: O })
+              ]
+            }
+          ) })
+        ]
+      },
+      r.id
+    );
+  }) }) });
 }
 export {
-  Z as AppKanban
+  _ as AppKanban
 };

package/dist/index.d.ts

@@ -184,7 +184,7 @@ declare interface AppFormProps {
     showSubmitButton?: boolean;
 }
 
-export declare function AppKanban<T = any>({ columns, initialTasks, onTaskMove, onTaskEdit, onTaskCreate, taskActions, renderTaskContent, className, allowTaskCreate, }: AppKanbanConfig<T>): JSX.Element;
+export declare function AppKanban<T = any>({ columns, initialTasks, onTaskMove, onTaskEdit, onTaskCreate, taskActions, renderTaskContent, className, allowTaskCreate, createTaskLabel, }: AppKanbanConfig<T>): JSX.Element;
 
 export declare type AppKanbanColumn = {
     id: string;
@@ -201,6 +201,7 @@ export declare type AppKanbanConfig<T = any> = {
     renderTaskContent?: (task: AppKanbanTask<T>, columnId: string) => ReactNode;
     className?: string;
     allowTaskCreate?: boolean;
+    createTaskLabel?: string;
 };
 
 export declare type AppKanbanTask<T = any> = {
@@ -209,6 +210,8 @@ export declare type AppKanbanTask<T = any> = {
     description?: string;
     data?: T;
     meta?: KanbanBoardCardMetaItem[];
+    icon?: IconName;
+    createTaskLabel?: string;
 };
 
 /**