laif-ds 0.2.23 → 0.2.25

package/dist/components/ui/table.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as r } from "react/jsx-runtime";
-import { cn as a } from "../../lib/utils.js";
-function d({ className: e, ...t }) {
+import { cn as o } from "../../lib/utils.js";
+function l({ className: e, ...t }) {
   return /* @__PURE__ */ r(
     "table",
     {
       "data-slot": "table-container",
-      className: a(
+      className: o(
         "relative w-full caption-bottom overflow-x-auto text-sm",
         e
       ),
@@ -14,22 +14,22 @@ function d({ className: e, ...t }) {
     }
   );
 }
-function n({ className: e, ...t }) {
+function b({ className: e, ...t }) {
   return /* @__PURE__ */ r(
     "thead",
     {
       "data-slot": "table-header",
-      className: a("border-d-border [&_tr]:border-b", e),
+      className: o("border-d-border [&_tr]:border-b", e),
       ...t
     }
   );
 }
-function b({ className: e, ...t }) {
+function n({ className: e, ...t }) {
   return /* @__PURE__ */ r(
     "tbody",
     {
       "data-slot": "table-body",
-      className: a("border-d-border [&_tr:last-child]:border-0", e),
+      className: o("border-d-border [&_tr:last-child]:border-0", e),
       ...t
     }
   );
@@ -39,7 +39,7 @@ function s({ className: e, ...t }) {
     "tfoot",
     {
       "data-slot": "table-footer",
-      className: a(
+      className: o(
         "bg-d-secondary/50 border-d-border border-t font-medium [&>tr]:last:border-b-0",
         e
       ),
@@ -52,7 +52,7 @@ function c({ className: e, ...t }) {
     "tr",
     {
       "data-slot": "table-row",
-      className: a(
+      className: o(
         "hover:bg-d-secondary/50 data-[state=selected]:bg-d-secondary border-d-border border-b transition-colors",
         e
       ),
@@ -65,7 +65,7 @@ function i({ className: e, ...t }) {
     "th",
     {
       "data-slot": "table-head",
-      className: a(
+      className: o(
         "text-d-foreground border-d-border h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
         e
       ),
@@ -78,8 +78,8 @@ function u({ className: e, ...t }) {
     "td",
     {
       "data-slot": "table-cell",
-      className: a(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className: o(
+        "border-d-border/50 border p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
         e
       ),
       ...t
@@ -94,18 +94,18 @@ function m({
     "caption",
     {
       "data-slot": "table-caption",
-      className: a("text-d-secondary-foreground mt-4 text-sm", e),
+      className: o("text-d-secondary-foreground mt-4 text-sm", e),
       ...t
     }
   );
 }
 export {
-  d as Table,
-  b as TableBody,
+  l as Table,
+  n as TableBody,
   m as TableCaption,
   u as TableCell,
   s as TableFooter,
   i as TableHead,
-  n as TableHeader,
+  b as TableHeader,
   c as TableRow
 };

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

@@ -10,8 +10,8 @@ import { cn as V } from "../../../../lib/utils.js";
 import { Button as k } from "../../button.js";
 import { Icon as q } from "../../icon.js";
 import { Popover as Be, PopoverTrigger as Fe, PopoverContent as Oe } from "../../popover.js";
-import { Table as ie, TableHeader as ae, TableRow as G, TableHead as ce, TableBody as We, TableCell as Ue } from "../../table.js";
-import { getSortedRowModel as Xe, getCoreRowModel as Ye } from "../../../../node_modules/@tanstack/table-core/build/lib/index.js";
+import { getSortedRowModel as We, getCoreRowModel as Ue } from "../../../../node_modules/@tanstack/table-core/build/lib/index.js";
+import { Table as ie, TableHeader as ae, TableRow as G, TableHead as ce, TableBody as Xe, TableCell as Ye } from "../../table.js";
 function ct({
   crossTableData: E,
   filterable: v = !1,
@@ -180,8 +180,8 @@ function ct({
     columns: Ee,
     state: { sorting: ge },
     onSortingChange: xe,
-    getCoreRowModel: Ye(),
-    getSortedRowModel: Xe()
+    getCoreRowModel: Ue(),
+    getSortedRowModel: We()
   }), Z = Le(null), ee = $e({
     count: R.getRowModel().rows.length,
     getScrollElement: () => Z.current,
@@ -287,7 +287,7 @@ function ct({
             }
           ),
           /* @__PURE__ */ l(
-            We,
+            Xe,
             {
               style: {
                 height: `${ee.getTotalSize()}px`,
@@ -312,7 +312,7 @@ function ct({
                     children: e.getVisibleCells().map((n, o) => {
                       const i = o === 0, r = n.getValue(), a = i ? "var(--d-secondary)" : r?.bgColor || "transparent", N = r.editable ?? !0;
                       return /* @__PURE__ */ l(
-                        Ue,
+                        Ye,
                         {
                           onClick: (m) => {
                             !N || !C || (m.stopPropagation(), m.preventDefault());

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
+};