laif-ds 0.2.47 → 0.2.48

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

@@ -1,92 +1,124 @@
 "use client";
 import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import { cn as o } from "../../lib/utils.js";
-import { Controller as V } from "../../node_modules/react-hook-form/dist/index.esm.js";
+import { cn as s } from "../../lib/utils.js";
+import { Controller as w } from "../../node_modules/react-hook-form/dist/index.esm.js";
 import { AppSelect as v } from "./app-select.js";
-import { Button as j } from "./button.js";
+import { AsyncSelect as O } from "./async-select.js";
+import { Button as I } from "./button.js";
 import { Checkbox as A } from "./checkbox.js";
 import { DatePicker as F } from "./date-picker.js";
-import { Input as I } from "./input.js";
+import { Input as R } from "./input.js";
 import { Label as t } from "./label.js";
-import { RadioGroup as R, RadioGroupItem as B } from "./radio-group.js";
-import { Slider as T } from "./slider.js";
-import { Switch as $ } from "./switch.js";
-import { Textarea as D } from "./textarea.js";
+import { RadioGroup as j, RadioGroupItem as M } from "./radio-group.js";
+import { Slider as B } from "./slider.js";
+import { Switch as T } from "./switch.js";
+import { Textarea as $ } from "./textarea.js";
 import { Typo as i } from "./typo.js";
-const X = ({
-  items: p,
-  cols: m = "2",
-  form: b,
+const Z = ({
+  items: u,
+  cols: b = "2",
+  form: m,
   submitText: g = "Invia",
   onSubmit: x,
-  isSubmitting: h = !1,
+  isSubmitting: p = !1,
   showSubmitButton: C = !1
 }) => {
   const {
     control: N,
     handleSubmit: y,
-    formState: { errors: f, isValid: S, isDirty: k }
-  } = b, w = (e) => {
+    formState: { errors: f, isValid: S, isDirty: V }
+  } = m, k = (e) => {
     const c = f[e.name]?.message, d = c ? String(c) : void 0;
     return /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
-      V,
+      w,
       {
         name: e.name,
         control: N,
         render: ({ field: r }) => {
-          const s = /* @__PURE__ */ l("div", { className: "mb-2 flex items-center justify-between", children: [
+          const o = /* @__PURE__ */ l("div", { className: "mb-2 flex items-center justify-between", children: [
             /* @__PURE__ */ a(t, { children: e.label }),
             d && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: d })
           ] });
           switch (e.component) {
             case "input":
               return /* @__PURE__ */ l("div", { children: [
-                s,
+                o,
                 /* @__PURE__ */ a(
-                  I,
+                  R,
                   {
                     ...r,
                     type: e.inputType,
                     placeholder: e.placeholder,
-                    className: o(d && "border-d-destructive"),
+                    className: s(d && "border-d-destructive"),
                     disabled: e.disabled
                   }
                 )
               ] });
+            case "async":
+            case "async-multiple": {
+              if (!e.fetcher || !e.renderOptionItem || !e.resolveOptionValue || !e.renderSelectedValue)
+                return /* @__PURE__ */ l("div", { children: [
+                  o,
+                  /* @__PURE__ */ a(i, { variant: "caption", className: "text-d-destructive", children: "Async select non configurato correttamente." })
+                ] });
+              const n = e.component === "async-multiple";
+              return /* @__PURE__ */ l("div", { children: [
+                o,
+                /* @__PURE__ */ a(
+                  O,
+                  {
+                    multiple: n,
+                    fetcher: e.fetcher,
+                    initialOptions: e.initialOptions,
+                    renderOptionItem: e.renderOptionItem,
+                    resolveOptionValue: e.resolveOptionValue,
+                    renderSelectedValue: e.renderSelectedValue,
+                    value: r.value,
+                    onChange: r.onChange,
+                    placeholder: e.placeholder,
+                    disabled: e.disabled,
+                    notFound: e.notFound,
+                    noResultsMessage: e.noResultsMessage,
+                    debounce: e.debounce,
+                    clearable: e.clearable
+                  }
+                )
+              ] });
+            }
             case "textarea":
               return /* @__PURE__ */ l("div", { children: [
-                s,
+                o,
                 /* @__PURE__ */ a(
-                  D,
+                  $,
                   {
                     ...r,
                     placeholder: e.placeholder,
-                    className: o(d && "border-d-destructive"),
+                    className: s(d && "border-d-destructive"),
                     disabled: e.disabled
                   }
                 )
               ] });
             case "radio":
               return /* @__PURE__ */ l("div", { children: [
-                s,
+                o,
                 /* @__PURE__ */ a(
-                  R,
+                  j,
                   {
                     value: r.value != null ? String(r.value) : "",
                     onValueChange: (n) => r.onChange(n),
                     className: "space-y-2",
                     disabled: e.disabled,
                     children: (e.options ?? []).map((n) => {
-                      const u = `${e.name}-${n.value}`;
+                      const h = `${e.name}-${n.value}`;
                       return /* @__PURE__ */ l(
                         "div",
                         {
                           className: "flex items-center gap-2",
                           children: [
                             /* @__PURE__ */ a(
-                              B,
+                              M,
                               {
-                                id: u,
+                                id: h,
                                 value: String(n.value),
                                 disabled: e.disabled
                               }
@@ -94,8 +126,8 @@ const X = ({
                             /* @__PURE__ */ a(
                               t,
                               {
-                                htmlFor: u,
-                                className: o(
+                                htmlFor: h,
+                                className: s(
                                   "cursor-pointer",
                                   e.disabled && "cursor-not-allowed opacity-60"
                                 ),
@@ -112,7 +144,7 @@ const X = ({
               ] });
             case "select":
               return /* @__PURE__ */ l("div", { children: [
-                s,
+                o,
                 /* @__PURE__ */ a(
                   v,
                   {
@@ -126,7 +158,7 @@ const X = ({
               ] });
             case "multiselect":
               return /* @__PURE__ */ l("div", { children: [
-                s,
+                o,
                 /* @__PURE__ */ a(
                   v,
                   {
@@ -141,7 +173,7 @@ const X = ({
               ] });
             case "datepicker":
               return /* @__PURE__ */ l("div", { className: "relative", children: [
-                s,
+                o,
                 /* @__PURE__ */ a(
                   F,
                   {
@@ -177,7 +209,7 @@ const X = ({
                     t,
                     {
                       htmlFor: e.name,
-                      className: o(
+                      className: s(
                         "cursor-pointer",
                         e.disabled && "cursor-not-allowed opacity-60"
                       ),
@@ -210,7 +242,7 @@ const X = ({
                     )
                   ] }),
                   /* @__PURE__ */ a(
-                    $,
+                    T,
                     {
                       id: e.name,
                       checked: !!r.value,
@@ -223,9 +255,9 @@ const X = ({
               ] });
             case "slider":
               return /* @__PURE__ */ l("div", { children: [
-                s,
+                o,
                 /* @__PURE__ */ a(
-                  T,
+                  B,
                   {
                     value: Array.isArray(r.value) ? r.value : [r.value || e.min || 0],
                     onValueChange: (n) => r.onChange(n[0]),
@@ -251,25 +283,25 @@ const X = ({
     ) });
   };
   return /* @__PURE__ */ l("form", { onSubmit: y((e) => x?.(e)), children: [
-    /* @__PURE__ */ a("div", { className: o("grid gap-4", `grid-cols-${m}`), children: p.map((e, c) => /* @__PURE__ */ a(
+    /* @__PURE__ */ a("div", { className: s("grid gap-4", `grid-cols-${b}`), children: u.map((e, c) => /* @__PURE__ */ a(
       "div",
       {
-        className: o(c === p.length - 1 && "col-span-full"),
-        children: w(e)
+        className: s(c === u.length - 1 && "col-span-full"),
+        children: k(e)
       },
       e.name
     )) }),
     C && /* @__PURE__ */ a("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ a(
-      j,
+      I,
       {
         type: "submit",
-        disabled: !S || !k || h,
-        isLoading: h,
+        disabled: !S || !V || p,
+        isLoading: p,
         children: g
       }
     ) })
   ] });
 };
 export {
-  X as AppForm
+  Z as AppForm
 };

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

@@ -0,0 +1,137 @@
+"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,
+  className: j,
+  allowTaskCreate: v = !0
+}) {
+  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);
+        if (c !== -1) {
+          n = a, [t] = o[a].splice(c, 1);
+          break;
+        }
+      }
+      return !t || n === i ? r : (o[i] || (o[i] = []), o[i].push(t), n && l && l(e, n, i), o);
+    });
+  }, z = (e, i, r, o) => {
+    K((t) => {
+      const n = y(t), a = Object.keys(n).find(
+        (s) => n[s].some((L) => L.id === e)
+      );
+      if (!a) return t;
+      const c = n[a].findIndex(
+        (s) => s.id === e
+      );
+      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 (m === -1)
+        n[r].push(p);
+      else {
+        const s = o === "top" ? m : m + 1;
+        n[r].splice(s, 0, p);
+      }
+      return a !== r && l && l(e, a, r), n;
+    });
+  }, 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(
+              "span",
+              {
+                className: "inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium",
+                style: {
+                  backgroundColor: `${x(e.label)}20`,
+                  color: x(e.label)
+                },
+                children: e.label
+              }
+            ),
+            /* @__PURE__ */ d("span", { className: "text-d-muted-foreground text-xs", children: C[e.id]?.length ?? 0 })
+          ] }),
+          v && h && /* @__PURE__ */ d(
+            E,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "size-6 opacity-0 transition-opacity group-hover/column:opacity-100",
+              onClick: (i) => {
+                i.stopPropagation(), h(e.id);
+              },
+              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__ */ 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
+  )) }) });
+}
+export {
+  Z as AppKanban
+};