laif-ds 0.2.23 → 0.2.24

package/dist/components/ui/tables/data-table/components/data-table-actions.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { Button as n } from "../../../button.js";
+import { Popover as r, PopoverTrigger as s, PopoverContent as a } from "../../../popover.js";
+function x({
+  actions: l,
+  i18n: o
+}) {
+  if (!l?.length) return null;
+  if (l.length === 1) {
+    const [e] = l;
+    return /* @__PURE__ */ t(
+      n,
+      {
+        size: "sm",
+        iconLeft: e.icon,
+        variant: "default",
+        onClick: e.onClick,
+        className: "h-6 max-h-6 text-xs",
+        children: e.label
+      }
+    );
+  }
+  return /* @__PURE__ */ i(r, { children: [
+    /* @__PURE__ */ t(s, { asChild: !0, children: /* @__PURE__ */ t(
+      n,
+      {
+        size: "sm",
+        iconRight: "ChevronDown",
+        variant: "default",
+        className: "h-6 max-h-6 !px-2 text-xs",
+        children: o.tableActions.actions
+      }
+    ) }),
+    /* @__PURE__ */ t(a, { side: "top", className: "flex w-auto flex-col p-2", children: l.map((e) => /* @__PURE__ */ t(
+      n,
+      {
+        variant: "ghost",
+        iconLeft: e.icon,
+        size: "sm",
+        onClick: e.onClick,
+        className: "justify-start text-xs",
+        children: e.label
+      },
+      e.label
+    )) })
+  ] });
+}
+export {
+  x as DataTableActionsComponent
+};

package/dist/components/ui/tables/data-table/components/data-table-advanced-filter.js

@@ -0,0 +1,470 @@
+"use client";
+import { jsxs as m, jsx as o, Fragment as T } from "react/jsx-runtime";
+import { useState as P } from "react";
+import { AppSelect as O } from "../../../app-select.js";
+import { Button as x } from "../../../button.js";
+import { Popover as G, PopoverTrigger as L, PopoverContent as R } from "../../../popover.js";
+import { errorSelectClass as y, getListMultiSelectFilterOptions as k, getListSingleSelectFilterOptions as V, getDateTimeFilterOptions as q, getDateFilterOptions as B, getBooleanFilterOptions as E, getNumberFilterOptions as M, getStringFilterOptions as $ } from "../data-table-constants.js";
+import { FilterValueInput as H } from "./data-table-filter-inputs.js";
+import { cn as J } from "../../../../../lib/utils.js";
+function u() {
+  return Math.random().toString(36).substr(2, 9);
+}
+function A({
+  onDelete: s,
+  onDuplicate: e,
+  type: d,
+  i18n: i
+}) {
+  return /* @__PURE__ */ m(G, { children: [
+    /* @__PURE__ */ o(L, { asChild: !0, children: /* @__PURE__ */ o(
+      x,
+      {
+        variant: "ghost",
+        iconLeft: "Ellipsis",
+        size: "sm",
+        className: "size-7"
+      }
+    ) }),
+    /* @__PURE__ */ m(R, { side: "right", className: "flex w-auto flex-col p-1", children: [
+      /* @__PURE__ */ o(
+        x,
+        {
+          className: "justify-start text-xs",
+          variant: "ghost-destructive",
+          iconLeft: "Trash2",
+          size: "sm",
+          onClick: s,
+          children: d === "condition" ? i.filters.deleteCondition : i.filters.deleteGroup
+        }
+      ),
+      /* @__PURE__ */ o(
+        x,
+        {
+          className: "justify-start text-xs",
+          variant: "ghost",
+          iconLeft: "Copy",
+          size: "sm",
+          onClick: e,
+          children: d === "condition" ? i.filters.duplicateCondition : i.filters.duplicateGroup
+        }
+      )
+    ] })
+  ] });
+}
+function S(s, e) {
+  switch (s) {
+    case "string":
+      return $(e);
+    case "number":
+      return M(e);
+    case "boolean":
+      return E(e);
+    case "date":
+      return B(e);
+    case "datetime":
+      return q(e);
+    case "list_single_select":
+      return V(e);
+    case "list_multi_select":
+      return k(e);
+    default:
+      return [];
+  }
+}
+function K({
+  condition: s,
+  columns: e,
+  onUpdate: d,
+  onRemove: i,
+  onDuplicate: w,
+  showLogicalOperator: h = !1,
+  logicalOperator: p = "AND",
+  onLogicalOperatorChange: n,
+  isFirstInGroup: g = !1,
+  isSecondInGroup: C = !1,
+  i18n: c
+}) {
+  const v = e.find((r) => r.id === s.columnId), D = v ? S(
+    v.column.columnDef.meta?.type,
+    c
+  ) : [], F = () => {
+    if (!v) return null;
+    const r = v.column.columnDef.meta?.type, f = s.value === void 0 || typeof s.value == "string" && s.value === "" || r === "list_multi_select" && !Array.isArray(s.value);
+    return /* @__PURE__ */ o(
+      H,
+      {
+        columnType: r,
+        value: s.value,
+        onChange: (N) => d({ ...s, value: N }),
+        listOptions: v.column.columnDef.meta?.listOptions ?? [],
+        placeholder: c.filters.value,
+        operator: s.operator,
+        size: "sm",
+        className: r === "list_single_select" || r === "list_multi_select" ? "w-52" : "",
+        hasError: f
+      }
+    );
+  };
+  return /* @__PURE__ */ m("div", { className: "flex min-w-0 flex-1 items-center gap-2 rounded-md", children: [
+    /* @__PURE__ */ m("div", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-x-auto overflow-y-clip", children: [
+      h && n && /* @__PURE__ */ o(T, { children: C ? /* @__PURE__ */ o(
+        O,
+        {
+          size: "sm",
+          className: `w-[72px] min-w-[72px] ${p === void 0 ? y : ""}`,
+          options: [
+            { value: "AND", label: c.filters.and },
+            { value: "OR", label: c.filters.or }
+          ],
+          value: p,
+          onValueChange: (r) => n(r)
+        }
+      ) : /* @__PURE__ */ o("span", { className: "text-muted-foreground w-[72px] min-w-[72px] text-right text-xs", children: p }) }),
+      g && /* @__PURE__ */ o("span", { className: "text-muted-foreground w-[72px] min-w-[72px] text-right text-xs", children: c.filters.where }),
+      /* @__PURE__ */ o(
+        O,
+        {
+          size: "sm",
+          placeholder: c.filters.column,
+          className: s.columnId === void 0 || s.columnId === "" ? y : "",
+          options: e.map((r) => ({
+            value: r.id,
+            label: r.column.columnDef.header?.toString() ?? ""
+          })),
+          value: s.columnId || void 0,
+          onValueChange: (r) => {
+            if (r) {
+              const f = e.find((N) => N.id === r);
+              if (f) {
+                const N = S(
+                  f.column.columnDef.meta?.type,
+                  c
+                )[0]?.value;
+                d({
+                  ...s,
+                  columnId: String(r),
+                  columnLabel: f.column.columnDef.header?.toString() ?? "",
+                  columnType: f.column.columnDef.meta?.type,
+                  operator: String(N || "eq"),
+                  value: void 0
+                });
+              }
+            }
+          }
+        }
+      ),
+      s.columnId && /* @__PURE__ */ o(
+        O,
+        {
+          size: "sm",
+          placeholder: c.filters.operator,
+          className: s.operator === void 0 ? y : "",
+          options: D,
+          value: s.operator || void 0,
+          onValueChange: (r) => {
+            r && d({
+              ...s,
+              operator: String(r)
+            });
+          }
+        }
+      ),
+      F()
+    ] }),
+    /* @__PURE__ */ o(
+      A,
+      {
+        type: "condition",
+        onDelete: i,
+        onDuplicate: w,
+        i18n: c
+      }
+    )
+  ] });
+}
+function _({
+  className: s,
+  group: e,
+  columns: d,
+  onUpdate: i,
+  isRoot: w = !1,
+  depth: h,
+  maxNestedDepth: p = 2,
+  i18n: n
+}) {
+  const g = {
+    id: u(),
+    columnId: "",
+    columnLabel: "",
+    columnType: "string",
+    operator: "eq",
+    value: void 0
+  }, C = {
+    id: u(),
+    logicalOperator: "AND",
+    conditions: [
+      {
+        id: u(),
+        columnId: "",
+        columnLabel: "",
+        columnType: "string",
+        operator: "eq",
+        value: void 0
+      }
+    ],
+    groups: []
+  }, c = () => {
+    i({
+      ...e,
+      conditions: [...e.conditions, g]
+    });
+  }, v = () => {
+    i({
+      ...e,
+      groups: [...e.groups || [], C]
+    });
+  }, D = (l, t) => {
+    i({
+      ...e,
+      conditions: e.conditions.map(
+        (a) => a.id === l ? t : a
+      )
+    });
+  }, F = (l) => {
+    const t = e.conditions.findIndex((I) => I.id === l);
+    if (t === -1) return;
+    const b = {
+      ...e.conditions[t],
+      id: u()
+    };
+    i({
+      ...e,
+      conditions: [
+        ...e.conditions.slice(0, t + 1),
+        b,
+        ...e.conditions.slice(t + 1)
+      ]
+    });
+  }, r = (l) => {
+    i({
+      ...e,
+      conditions: e.conditions.filter((t) => t.id !== l)
+    });
+  }, f = (l, t) => {
+    i({
+      ...e,
+      groups: (e.groups || []).map(
+        (a) => a.id === l ? t : a
+      )
+    });
+  }, N = (l) => {
+    i({
+      ...e,
+      groups: (e.groups || []).filter((t) => t.id !== l)
+    });
+  }, z = (l) => ({
+    id: u(),
+    logicalOperator: l.logicalOperator,
+    conditions: l.conditions.map((t) => ({
+      ...t,
+      id: u()
+    })),
+    groups: (l.groups || []).map((t) => z(t))
+  }), j = (l) => {
+    const t = e.groups || [], a = t.findIndex((I) => I.id === l);
+    if (a === -1) return;
+    const b = z(t[a]);
+    i({
+      ...e,
+      groups: [...t.slice(0, a + 1), b, ...t.slice(a + 1)]
+    });
+  };
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: J(
+        "min-w-0 space-y-2 overflow-auto",
+        w ? "" : "bg-d-foreground/5 border-d-foreground rounded border-l-2 p-2 pl-3",
+        s
+      ),
+      children: [
+        e.conditions.map((l, t) => /* @__PURE__ */ o(
+          K,
+          {
+            condition: l,
+            columns: d,
+            onUpdate: (a) => D(l.id, a),
+            onRemove: () => r(l.id),
+            onDuplicate: () => F(l.id),
+            showLogicalOperator: t > 0,
+            logicalOperator: e.logicalOperator,
+            onLogicalOperatorChange: (a) => i({ ...e, logicalOperator: a }),
+            isFirstInGroup: t === 0,
+            isSecondInGroup: t === 1,
+            i18n: n
+          },
+          l.id
+        )),
+        (e.groups || []).map((l, t) => /* @__PURE__ */ m(
+          "div",
+          {
+            className: "flex min-w-0 flex-1 flex-row gap-2",
+            children: [
+              t === 1 && e.conditions.length === 0 || t === 0 && e.conditions.length === 1 ? /* @__PURE__ */ o(
+                O,
+                {
+                  className: `w-[72px] min-w-[72px] ${e.logicalOperator === void 0 ? y : ""}`,
+                  size: "sm",
+                  options: [
+                    { value: "AND", label: n.filters.and },
+                    { value: "OR", label: n.filters.or }
+                  ],
+                  value: e.logicalOperator,
+                  onValueChange: (a) => i({
+                    ...e,
+                    logicalOperator: a
+                  })
+                }
+              ) : t === 0 && e.conditions.length === 0 ? /* @__PURE__ */ o("span", { className: "text-muted-foreground w-[72px] text-right text-xs", children: n.filters.where }) : /* @__PURE__ */ o("span", { className: "text-muted-foreground w-[72px] text-right text-xs", children: e.logicalOperator }),
+              /* @__PURE__ */ o(
+                _,
+                {
+                  className: "flex flex-1 flex-col",
+                  group: l,
+                  columns: d,
+                  onUpdate: (a) => f(l.id, a),
+                  depth: h + 1,
+                  maxNestedDepth: p,
+                  i18n: n
+                }
+              ),
+              /* @__PURE__ */ o(
+                A,
+                {
+                  type: "group",
+                  onDelete: () => N(l.id),
+                  onDuplicate: () => j(l.id),
+                  i18n: n
+                }
+              )
+            ]
+          },
+          l.id
+        )),
+        h < p ? /* @__PURE__ */ m(G, { children: [
+          /* @__PURE__ */ o(L, { asChild: !0, children: /* @__PURE__ */ o(
+            x,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "w-full justify-start text-xs",
+              iconLeft: "Plus",
+              iconRight: "ChevronDown",
+              children: n.filters.addFilterRule
+            }
+          ) }),
+          /* @__PURE__ */ m(R, { side: "top", className: "flex w-auto flex-col p-1", children: [
+            /* @__PURE__ */ o(
+              x,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "justify-start text-xs",
+                iconLeft: "Plus",
+                onClick: c,
+                children: n.filters.addFilterRule
+              }
+            ),
+            /* @__PURE__ */ o(
+              x,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "justify-start text-xs",
+                iconLeft: "CopyPlus",
+                onClick: v,
+                children: n.filters.addFilterGroup
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ o(
+          x,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "w-full justify-start text-xs",
+            iconLeft: "Plus",
+            onClick: c,
+            children: n.filters.addFilterRule
+          }
+        )
+      ]
+    }
+  );
+}
+function le({
+  columns: s,
+  onFilterChange: e,
+  initialFilter: d,
+  i18n: i
+}) {
+  const [w, h] = P(
+    d || {
+      id: u(),
+      rootGroup: {
+        id: u(),
+        logicalOperator: "AND",
+        conditions: [],
+        groups: []
+      }
+    }
+  ), p = (g) => {
+    const C = {
+      ...w,
+      rootGroup: g
+    };
+    h(C), e(C);
+  }, n = () => {
+    const g = {
+      id: u(),
+      rootGroup: {
+        id: u(),
+        logicalOperator: "AND",
+        conditions: [],
+        groups: []
+      }
+    };
+    h(g), e(null);
+  };
+  return /* @__PURE__ */ m("div", { className: "flex max-h-[500px] min-w-0 flex-col gap-0.5 overflow-auto", children: [
+    /* @__PURE__ */ o(
+      _,
+      {
+        className: "flex flex-1 flex-col",
+        group: w.rootGroup,
+        columns: s,
+        onUpdate: p,
+        isRoot: !0,
+        depth: 0,
+        maxNestedDepth: 2,
+        i18n: i
+      }
+    ),
+    /* @__PURE__ */ o("div", { className: "border-d-border w-full border-b" }),
+    /* @__PURE__ */ o(
+      x,
+      {
+        variant: "ghost-destructive",
+        size: "sm",
+        onClick: n,
+        className: "w-full justify-start text-xs",
+        iconRight: "Trash2",
+        children: i.filters.deleteFilter
+      }
+    )
+  ] });
+}
+export {
+  le as DataTableAdvancedFilterComponent
+};