@krosoft/react 0.0.78 → 0.0.79

package/dist/TableFilter-DgChe4aX.js

@@ -0,0 +1,406 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { useState as k, useEffect as M, useMemo as A } from "react";
+import { M as O, a as $, D as j, b as I, c as _, S as z } from "./SearchInput-Cf5NHhnz.js";
+import { X as C, I as P, S as R, n as B, g as Q, j as V, m as H, L as X, i as G, P as J, e as K, d as U, c as E } from "./popover-UjRQmYGN.js";
+import { B as w, C as W } from "./floating-ui.react-dom-BIcsGc3t.js";
+import "./card-7XPLAra3.js";
+import { S as Y, h as Z, i as q, a as ee, c as re } from "./select-CtU681LB.js";
+import { B as L } from "./badge-Bw-aBz_H.js";
+import { c as te } from "./index-gWiv5-6R.js";
+import { c as le } from "./createLucideIcon-CRdjzt2A.js";
+/**
+ * @license lucide-react v1.16.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ae = [
+  [
+    "path",
+    {
+      d: "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z",
+      key: "sc7q7i"
+    }
+  ]
+], se = le("funnel", ae), T = (s, l, a = {}) => {
+  if (l instanceof Date)
+    return l.toLocaleDateString("fr-FR");
+  const o = String(l), i = a[`${s}_${o}`];
+  return i !== void 0 ? i : s.includes("ok") || l === "true" || l === "false" ? l === "true" ? "Oui" : "Non" : o;
+};
+function ce({ filters: s, onRemoveFilter: l, onClearAll: a, filterLabels: o = {}, optionLabels: i = {} }) {
+  const d = Object.entries(s).filter(([n, p]) => !(p == null || p === "" || Array.isArray(p) && p.length === 0));
+  return d.length === 0 ? null : /* @__PURE__ */ m("div", { className: "flex flex-wrap items-center gap-2 mb-4", children: [
+    /* @__PURE__ */ r("span", { className: "text-sm text-gray-600 font-medium", children: "Filtres actifs :" }),
+    d.flatMap(([n, p]) => {
+      const f = o[n] ?? n;
+      if (Array.isArray(p))
+        return p.map((v) => {
+          const b = T(n, v, i);
+          return /* @__PURE__ */ m(
+            L,
+            {
+              variant: "secondary",
+              className: "flex items-center gap-1 px-3 py-1 bg-blue-50 text-blue-700 border border-blue-200 hover:bg-blue-100",
+              children: [
+                f,
+                ": ",
+                b,
+                /* @__PURE__ */ r(
+                  "button",
+                  {
+                    onClick: () => {
+                      l(n, v);
+                    },
+                    className: "ml-1 hover:bg-blue-200 rounded-full p-0.5",
+                    children: /* @__PURE__ */ r(C, { className: "size-4" })
+                  }
+                )
+              ]
+            },
+            `${n}_${String(v)}`
+          );
+        });
+      const x = T(n, p, i);
+      return /* @__PURE__ */ m(L, { variant: "secondary", className: "flex items-center gap-1 px-3 py-1 bg-blue-50 text-blue-700 border border-blue-200 hover:bg-blue-100", children: [
+        f,
+        ": ",
+        x,
+        /* @__PURE__ */ r(
+          "button",
+          {
+            onClick: () => {
+              l(n);
+            },
+            className: "ml-1 hover:bg-blue-200 rounded-full p-0.5",
+            children: /* @__PURE__ */ r(C, { className: "size-4" })
+          }
+        )
+      ] }, n);
+    }),
+    d.length > 0 && /* @__PURE__ */ r("button", { onClick: a, className: "text-xs text-red-500 hover:text-red-600 transition-colors font-medium ml-2", children: "Effacer tout" })
+  ] });
+}
+const ne = ({ field: s, value: l, onChange: a, onToggleMultiSelect: o }) => {
+  var i;
+  switch (s.type) {
+    case "text":
+      return /* @__PURE__ */ r(
+        P,
+        {
+          placeholder: s.placeholder,
+          value: l ?? "",
+          onChange: (d) => {
+            a(d.target.value);
+          }
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ r(
+        P,
+        {
+          type: "number",
+          placeholder: s.placeholder,
+          value: l ?? "",
+          onChange: (d) => {
+            a(d.target.value);
+          },
+          min: s.min,
+          max: s.max
+        }
+      );
+    case "select":
+      return s.searchable === !0 ? /* @__PURE__ */ r(
+        I,
+        {
+          options: s.options ?? [],
+          value: l,
+          onChange: a,
+          placeholder: s.placeholder,
+          searchPlaceholder: s.searchPlaceholder
+        }
+      ) : /* @__PURE__ */ m(Y, { value: l ?? "", onValueChange: a, children: [
+        /* @__PURE__ */ r(Z, { className: te((l === void 0 || l === "") && "text-muted-foreground"), children: /* @__PURE__ */ r(q, { placeholder: s.placeholder }) }),
+        /* @__PURE__ */ r(ee, { children: (i = s.options) == null ? void 0 : i.map((d) => /* @__PURE__ */ r(re, { value: d.value, children: d.label }, d.value)) })
+      ] });
+    case "date":
+      return /* @__PURE__ */ r(j, { date: l, onDateChange: a, placeholder: s.placeholder ?? "Sélectionner une date" });
+    case "date-range":
+      return /* @__PURE__ */ r($, { value: l, onChange: a, placeholder: s.placeholder });
+    case "multi-select":
+      return /* @__PURE__ */ r(
+        O,
+        {
+          options: s.options ?? [],
+          selected: l ?? [],
+          onToggle: o,
+          onClear: () => {
+            a([]);
+          },
+          onSelectAll: a,
+          placeholder: s.placeholder,
+          searchable: s.searchable,
+          searchPlaceholder: s.searchPlaceholder
+        }
+      );
+    default:
+      return null;
+  }
+};
+function oe({
+  sections: s,
+  filters: l,
+  onFiltersChange: a,
+  buttonText: o = "Plus de filtres",
+  sheetTitle: i = "Filtres avancés"
+}) {
+  const [d, n] = k(!1), [p, f] = k(l);
+  M(() => {
+    f(l);
+  }, [l, d]);
+  const x = (g, t) => {
+    f((h) => ({ ...h, [g]: t }));
+  }, v = (g, t) => {
+    const h = p[g], e = Array.isArray(h) ? h : [], u = e.includes(t) ? e.filter((c) => c !== t) : [...e, t];
+    x(g, u);
+  }, b = () => {
+    a(p), n(!1);
+  }, N = () => {
+    f({}), a({}), n(!1);
+  };
+  return /* @__PURE__ */ m(R, { open: d, onOpenChange: n, children: [
+    /* @__PURE__ */ r(B, { asChild: !0, children: /* @__PURE__ */ m(w, { variant: "outline", className: "gap-2", children: [
+      /* @__PURE__ */ r(se, { className: "size-4 shrink-0" }),
+      o
+    ] }) }),
+    /* @__PURE__ */ m(Q, { side: "right", className: "w-[400px] sm:w-[500px] flex flex-col p-0", children: [
+      /* @__PURE__ */ r(V, { className: "p-6 pb-0", children: /* @__PURE__ */ r(H, { children: i }) }),
+      /* @__PURE__ */ r("div", { className: "flex-1 overflow-y-auto p-6 pt-6", children: /* @__PURE__ */ r("div", { className: "space-y-6", children: s.map((g, t) => /* @__PURE__ */ m("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ r("h3", { className: "font-semibold text-sm text-gray-900 dark:text-gray-100 border-b pb-2", children: g.title }),
+        g.filters.map((h) => /* @__PURE__ */ m("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ r(X, { htmlFor: h.key, children: h.label }),
+          /* @__PURE__ */ r(
+            ne,
+            {
+              field: h,
+              value: p[h.key],
+              onChange: (e) => {
+                x(h.key, e);
+              },
+              onToggleMultiSelect: (e) => {
+                v(h.key, e);
+              }
+            }
+          )
+        ] }, h.key))
+      ] }, t)) }) }),
+      /* @__PURE__ */ m(G, { className: "gap-2 p-6 border-t bg-white dark:bg-gray-950", children: [
+        /* @__PURE__ */ r(w, { variant: "outline", className: "flex-1", onClick: N, children: "Effacer les filtres" }),
+        /* @__PURE__ */ r(w, { className: "flex-1 bg-orange-500 hover:bg-orange-600 text-white", onClick: b, children: "Rechercher" })
+      ] })
+    ] })
+  ] });
+}
+function ie({
+  label: s,
+  options: l,
+  selected: a,
+  onToggle: o,
+  onClear: i,
+  onSelectAll: d,
+  searchable: n = !1,
+  searchPlaceholder: p = "Rechercher..."
+}) {
+  const [f, x] = k(""), v = a.length > 0, b = A(() => f === "" ? l : l.filter((t) => t.label.toLowerCase().includes(f.toLowerCase())), [l, f]), N = A(() => b.length === 0 ? !1 : b.every((t) => a.includes(t.value)), [b, a]), g = () => {
+    if (N)
+      if (d !== void 0) {
+        const t = b.map((e) => e.value), h = a.filter((e) => !t.includes(e));
+        d(h);
+      } else i !== void 0 ? i() : a.forEach((t) => {
+        o(t);
+      });
+    else if (d !== void 0) {
+      const t = [...a];
+      b.forEach((h) => {
+        t.includes(h.value) || t.push(h.value);
+      }), d(t);
+    } else
+      b.forEach((t) => {
+        a.includes(t.value) || o(t.value);
+      });
+  };
+  return /* @__PURE__ */ m(
+    J,
+    {
+      onOpenChange: () => {
+        x("");
+      },
+      children: [
+        /* @__PURE__ */ r(K, { asChild: !0, children: /* @__PURE__ */ m(
+          "button",
+          {
+            className: `inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm transition-colors whitespace-nowrap ${v ? "border-primary bg-primary/10 text-primary font-medium" : "border-border bg-card text-card-foreground hover:bg-muted"}`,
+            children: [
+              s,
+              a.length > 0 && /* @__PURE__ */ r("span", { className: "flex h-4 min-w-[16px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-bold text-primary-foreground", children: a.length }),
+              /* @__PURE__ */ r(W, { className: "size-3.5 opacity-60" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ m(U, { className: "w-56 p-0", align: "start", children: [
+          n ? /* @__PURE__ */ r("div", { className: "border-b border-border p-2", children: /* @__PURE__ */ m("div", { className: "relative", children: [
+            /* @__PURE__ */ r(_, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+            /* @__PURE__ */ r(
+              "input",
+              {
+                className: "w-full rounded-md bg-muted/50 py-1.5 pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground outline-none focus:ring-1 focus:ring-ring",
+                placeholder: p,
+                value: f,
+                onChange: (t) => {
+                  x(t.target.value);
+                },
+                autoFocus: !0
+              }
+            )
+          ] }) }) : null,
+          /* @__PURE__ */ m("div", { className: "flex flex-col gap-0.5 max-h-56 overflow-y-auto p-1.5", children: [
+            b.length > 0 && /* @__PURE__ */ m("label", { className: "flex items-center gap-2.5 rounded-md px-2 py-2 text-sm hover:bg-muted cursor-pointer transition-colors", children: [
+              /* @__PURE__ */ r(E, { checked: N, onCheckedChange: g }),
+              "Tout sélectionner"
+            ] }),
+            b.length === 0 && /* @__PURE__ */ r("p", { className: "px-2 py-3 text-center text-xs text-muted-foreground", children: "Aucun résultat" }),
+            b.map((t) => /* @__PURE__ */ m("label", { className: "flex items-center gap-2.5 rounded-md px-2 py-2 text-sm hover:bg-muted cursor-pointer transition-colors", children: [
+              /* @__PURE__ */ r(
+                E,
+                {
+                  checked: a.includes(t.value),
+                  onCheckedChange: () => {
+                    o(t.value);
+                  }
+                }
+              ),
+              t.label
+            ] }, t.value))
+          ] }),
+          a.length > 0 && /* @__PURE__ */ r("div", { className: "border-t border-border p-1.5", children: /* @__PURE__ */ r(
+            "button",
+            {
+              onClick: () => {
+                i !== void 0 ? i() : a.forEach((t) => {
+                  o(t);
+                });
+              },
+              className: "w-full rounded-md px-2 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors text-center",
+              children: "Tout désélectionner"
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+function ye({
+  searchQuery: s,
+  onSearchChange: l,
+  searchPlaceholder: a = "Rechercher...",
+  filters: o,
+  onFiltersChange: i,
+  filterLabels: d = {},
+  sections: n,
+  advancedButtonText: p = "Filtres",
+  sheetTitle: f = "Filtres avancés"
+}) {
+  const x = (e, u) => {
+    const c = o[e], y = Array.isArray(c) ? c : [], S = y.includes(u) ? y.filter((D) => D !== u) : [...y, u], F = { ...o };
+    S.length === 0 ? delete F[e] : F[e] = S, i(F);
+  }, v = (e) => {
+    const u = { ...o };
+    delete u[e], i(u);
+  }, b = () => {
+    i({});
+  }, N = (e, u) => {
+    const c = { ...o }, y = c[e];
+    Array.isArray(y) && u !== void 0 ? (c[e] = y.filter((S) => S !== u), Array.isArray(c[e]) && c[e].length === 0 && delete c[e]) : delete c[e], i(c);
+  }, g = A(() => {
+    const e = [];
+    return n.forEach((u) => {
+      u.filters.forEach((c) => {
+        c.isQuickFilter === !0 && e.push({
+          key: c.key,
+          label: c.label,
+          options: c.options ?? [],
+          searchable: c.searchable,
+          searchPlaceholder: c.searchPlaceholder
+        });
+      });
+    }), e;
+  }, [n]), t = A(() => {
+    const e = { ...d };
+    return n.forEach((u) => {
+      u.filters.forEach((c) => {
+        e[c.key] = c.label;
+      });
+    }), e;
+  }, [n, d]), h = A(() => {
+    const e = {};
+    return n.forEach((u) => {
+      u.filters.forEach((c) => {
+        c.options !== void 0 && c.options.forEach((y) => {
+          e[`${c.key}_${y.value}`] = y.label;
+        });
+      });
+    }), e;
+  }, [n]);
+  return /* @__PURE__ */ m("div", { className: "space-y-4 w-full", children: [
+    /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center gap-3 justify-between", children: /* @__PURE__ */ m("div", { className: "flex flex-wrap items-center gap-3", children: [
+      l !== void 0 ? /* @__PURE__ */ r(
+        z,
+        {
+          searchQuery: s,
+          onSearch: l,
+          onClear: () => {
+            l("");
+          },
+          placeholder: a
+        }
+      ) : null,
+      g.map((e) => /* @__PURE__ */ r(
+        ie,
+        {
+          label: e.label,
+          options: e.options,
+          selected: Array.isArray(o[e.key]) ? o[e.key] : [],
+          onToggle: (u) => {
+            x(e.key, u);
+          },
+          onClear: () => {
+            v(e.key);
+          },
+          onSelectAll: (u) => {
+            i({ ...o, [e.key]: u });
+          },
+          searchable: e.searchable,
+          searchPlaceholder: e.searchPlaceholder
+        },
+        e.key
+      )),
+      n.length > 0 && /* @__PURE__ */ r(oe, { sections: n, filters: o, onFiltersChange: i, buttonText: p, sheetTitle: f })
+    ] }) }),
+    /* @__PURE__ */ r(
+      ce,
+      {
+        filters: o,
+        onRemoveFilter: N,
+        onClearAll: b,
+        filterLabels: t,
+        optionLabels: h
+      }
+    )
+  ] });
+}
+export {
+  ce as A,
+  ie as S,
+  ye as T,
+  oe as a
+};