laif-ds 0.2.47 → 0.2.49

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,157 @@
+"use client";
+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,
+  createTaskLabel: O = "Nuovo task"
+}) {
+  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) {
+          i = s, [d] = t[s].splice(c, 1);
+          break;
+        }
+      }
+      return !d || i === n ? e : (t[n] || (t[n] = []), t[n].push(d), i && p && p(r, i, n), t);
+    });
+  }, 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 (!s) return d;
+      const c = i[s].findIndex(
+        (a) => a.id === r
+      );
+      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 (f === -1)
+        i[e].push(m);
+      else {
+        const a = t === "top" ? f : f + 1;
+        i[e].splice(a, 0, m);
+      }
+      return s !== e && p && p(r, s, e), i;
+    });
+  }, 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 rounded px-1.5 py-0.5 text-sm font-semibold tracking-tight",
+                style: {
+                  backgroundColor: `${n}18`,
+                  color: n
+                },
+                children: r.label
+              }
+            ),
+            /* @__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,
+            {
+              cardId: e.id,
+              onDropOverListItem: (t, d) => {
+                if (d === "none") return;
+                const i = N(t);
+                L(
+                  i.id,
+                  e.id,
+                  r.id,
+                  d
+                );
+              },
+              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 })
+                  ] })
+                }
+              )
+            },
+            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 {
+  _ as AppKanban
+};