laif-ds 0.2.23 → 0.2.25

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

@@ -0,0 +1,112 @@
+"use client";
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import { Button as g } from "../../../button.js";
+import { cn as w } from "../../../../../lib/utils.js";
+import { useState as p, useRef as x, useEffect as v } from "react";
+import { Tooltip as q, TooltipTrigger as z, TooltipContent as D } from "../../../tooltip.js";
+function P({
+  searchableColumnsHeaders: b = [],
+  i18n: i,
+  className: T = "",
+  onSearch: u,
+  debounceMs: d = 300,
+  initialValue: t
+}) {
+  const [c, s] = p(t || ""), [f, a] = p(!!(t && t.length > 0)), S = "search_input_" + Math.random().toString(36).substring(2, 9), h = x(null), n = x(null);
+  v(() => {
+    t && t.length > 0 ? (s(t), a(!0)) : (t === "" || t === void 0) && (s(""), a(!1));
+  }, [t]), v(() => (u && (n.current && clearTimeout(n.current), n.current = setTimeout(() => {
+    u(c);
+  }, d)), () => {
+    n.current && clearTimeout(n.current);
+  }), [c, u, d]);
+  const C = () => {
+    f ? h.current?.focus() : (a(!0), setTimeout(() => {
+      h.current?.focus();
+    }, 10));
+  }, B = (e) => {
+    e.preventDefault(), e.stopPropagation(), s(""), a(!1), setTimeout(() => {
+      e?.currentTarget?.closest(".relative")?.querySelector('button[aria-label="Search"]')?.focus();
+    }, 0);
+  }, N = (e) => {
+    const r = e.relatedTarget, m = !e.currentTarget.contains(r), k = r?.parentElement?.getAttribute("aria-label") === "Search", y = r?.closest(
+      'button[aria-label="Clear search"]'
+    );
+    m && !k && !y && c === "" && (a(!1), setTimeout(() => {
+      e?.currentTarget?.closest(".relative")?.querySelector('button[aria-label="Search"]')?.focus();
+    }, 0));
+  };
+  return /* @__PURE__ */ o("div", { className: w("relative", T), children: /* @__PURE__ */ l("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ l(q, { children: [
+      /* @__PURE__ */ o(z, { asChild: !0, children: /* @__PURE__ */ o(
+        g,
+        {
+          className: "h-6 w-6",
+          iconLeft: "Search",
+          size: "icon",
+          variant: "ghost",
+          onClick: C,
+          "aria-label": i.search
+        }
+      ) }),
+      /* @__PURE__ */ l(
+        D,
+        {
+          className: "flex max-h-24 min-h-0 flex-col gap-0 px-2 py-1.5",
+          variant: "card",
+          children: [
+            /* @__PURE__ */ o("div", { className: "text-d-foreground/90 text-xs", children: i.searchTooltipLabel }),
+            /* @__PURE__ */ o("ul", { className: "flex flex-col gap-0 overflow-auto", children: b.map((e) => /* @__PURE__ */ l("li", { className: "text-d-foreground/75 text-xs", children: [
+              "⋅ ",
+              e
+            ] }, e)) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: `overflow-hidden transition-all duration-300 ease-in-out ${f ? "w-52" : "w-0"}`,
+        onBlur: N,
+        children: /* @__PURE__ */ l("div", { className: "flex w-52 items-center", children: [
+          /* @__PURE__ */ o(
+            "input",
+            {
+              ref: h,
+              id: S,
+              className: "bg-background placeholder:text-muted-foreground h-8 flex-1 rounded-md border-0 px-2 py-1 text-xs outline-none",
+              placeholder: i.searchPlaceholder,
+              value: c,
+              onChange: (e) => {
+                s(e.target.value);
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Escape") {
+                  const r = e.target;
+                  r.value ? (s(""), r.focus()) : (a(!1), r.closest(".relative")?.querySelector(
+                    'button[aria-label="Search"]'
+                  )?.focus());
+                }
+              }
+            }
+          ),
+          c !== "" && /* @__PURE__ */ o(
+            g,
+            {
+              className: "text-muted-foreground hover:text-foreground hover:text-d-destructive absolute top-1 right-0 size-6 -translate-y-1",
+              iconLeft: "X",
+              size: "icon",
+              variant: "ghost",
+              onClick: B,
+              "aria-label": i.clearSearch
+            }
+          )
+        ] })
+      }
+    )
+  ] }) });
+}
+export {
+  P as DataTableSearchbar
+};

package/dist/components/ui/tables/data-table/components/data-table-simple-filters.js

@@ -0,0 +1,263 @@
+"use client";
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import { AppSelect as d } from "../../../app-select.js";
+import { Button as m } from "../../../button.js";
+import { Popover as v, PopoverTrigger as h, PopoverContent as g } from "../../../popover.js";
+import { getStringFilterOptions as x, getNumberFilterOptions as T, getBooleanFilterOptions as b, getDateFilterOptions as y, getDateTimeFilterOptions as C, getListSingleSelectFilterOptions as D, getListMultiSelectFilterOptions as w } from "../data-table-constants.js";
+import { FilterValueInput as l } from "./data-table-filter-inputs.js";
+function p({
+  filter: e,
+  setFilterBadges: n,
+  options: t,
+  content: r,
+  i18n: i
+}) {
+  return /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ s("div", { className: "flex max-w-full flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 flex-row items-center gap-2", children: [
+        /* @__PURE__ */ a("div", { className: "text-d-foreground max-w-[40%] overflow-hidden text-xs text-ellipsis whitespace-nowrap", children: e.columnLabel }),
+        /* @__PURE__ */ a(
+          d,
+          {
+            size: "sm",
+            wrpClassName: "flex flex-1",
+            options: t,
+            value: e.operator ?? "eq",
+            onValueChange: (o) => n(
+              (u) => u.map(
+                (c) => c.id === e.id ? { ...c, operator: String(o) } : c
+              )
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ s(v, { children: [
+        /* @__PURE__ */ a(h, { asChild: !0, children: /* @__PURE__ */ a(m, { variant: "ghost", iconLeft: "Ellipsis", size: "sm" }) }),
+        /* @__PURE__ */ a(g, { side: "right", className: "flex w-auto", children: /* @__PURE__ */ a(
+          m,
+          {
+            variant: "ghost-destructive",
+            iconLeft: "Trash2",
+            size: "sm",
+            onClick: () => n(
+              (o) => o.filter((u) => u.id !== e.id)
+            ),
+            children: i.filters.deleteFilter
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ a("div", { children: r })
+  ] });
+}
+function _({
+  filter: e,
+  setFilterBadges: n,
+  i18n: t
+}) {
+  return /* @__PURE__ */ a(
+    p,
+    {
+      filter: e,
+      setFilterBadges: n,
+      options: x(t),
+      content: /* @__PURE__ */ a(
+        l,
+        {
+          columnType: "string",
+          operator: e.operator,
+          value: e.value,
+          onChange: (r) => n(
+            (i) => i.map((o) => o.id === e.id ? { ...o, value: r } : o)
+          ),
+          i18n: t
+        }
+      ),
+      i18n: t
+    }
+  );
+}
+function j({
+  filter: e,
+  setFilterBadges: n,
+  i18n: t
+}) {
+  return /* @__PURE__ */ a(
+    p,
+    {
+      filter: e,
+      setFilterBadges: n,
+      options: T(t),
+      content: /* @__PURE__ */ a(
+        l,
+        {
+          columnType: "number",
+          operator: e.operator,
+          value: e.value,
+          onChange: (r) => n(
+            (i) => i.map((o) => o.id === e.id ? { ...o, value: r } : o)
+          ),
+          i18n: t
+        }
+      ),
+      i18n: t
+    }
+  );
+}
+function z({
+  filter: e,
+  setFilterBadges: n,
+  i18n: t
+}) {
+  return /* @__PURE__ */ a(
+    p,
+    {
+      filter: e,
+      setFilterBadges: n,
+      options: b(t),
+      content: /* @__PURE__ */ a(
+        l,
+        {
+          columnType: "boolean",
+          operator: e.operator,
+          value: e.value,
+          onChange: (r) => n(
+            (i) => i.map((o) => o.id === e.id ? { ...o, value: r } : o)
+          ),
+          i18n: t
+        }
+      ),
+      i18n: t
+    }
+  );
+}
+function P({
+  filter: e,
+  setFilterBadges: n,
+  i18n: t
+}) {
+  return /* @__PURE__ */ a(
+    p,
+    {
+      filter: e,
+      setFilterBadges: n,
+      options: D(t),
+      content: /* @__PURE__ */ a(
+        l,
+        {
+          columnType: "list_single_select",
+          operator: e.operator,
+          value: e.value,
+          onChange: (r) => n(
+            (i) => i.map(
+              (o) => o.id === e.id ? {
+                ...o,
+                value: Array.isArray(r) && r.length === 0 ? void 0 : r
+              } : o
+            )
+          ),
+          listOptions: e.listOptions ?? [],
+          i18n: t
+        }
+      ),
+      i18n: t
+    }
+  );
+}
+function M({
+  filter: e,
+  setFilterBadges: n,
+  i18n: t
+}) {
+  return /* @__PURE__ */ a(
+    p,
+    {
+      filter: e,
+      setFilterBadges: n,
+      options: w(t),
+      content: /* @__PURE__ */ a(
+        l,
+        {
+          columnType: "list_multi_select",
+          operator: e.operator,
+          value: e.value,
+          onChange: (r) => n(
+            (i) => i.map(
+              (o) => o.id === e.id ? {
+                ...o,
+                value: Array.isArray(r) && r.length === 0 ? void 0 : r
+              } : o
+            )
+          ),
+          listOptions: e.listOptions ?? [],
+          i18n: t
+        }
+      ),
+      i18n: t
+    }
+  );
+}
+function V({
+  filter: e,
+  setFilterBadges: n,
+  i18n: t
+}) {
+  return /* @__PURE__ */ a(
+    p,
+    {
+      filter: e,
+      setFilterBadges: n,
+      options: y(t),
+      content: /* @__PURE__ */ a(
+        l,
+        {
+          columnType: "date",
+          operator: e.operator,
+          value: e.value,
+          onChange: (r) => n(
+            (i) => i.map((o) => o.id === e.id ? { ...o, value: r } : o)
+          ),
+          i18n: t
+        }
+      ),
+      i18n: t
+    }
+  );
+}
+function k({
+  filter: e,
+  setFilterBadges: n,
+  i18n: t
+}) {
+  return /* @__PURE__ */ a(
+    p,
+    {
+      filter: e,
+      setFilterBadges: n,
+      options: C(t),
+      content: /* @__PURE__ */ a(
+        l,
+        {
+          columnType: "datetime",
+          operator: e.operator,
+          value: e.value,
+          onChange: (r) => n(
+            (i) => i.map((o) => o.id === e.id ? { ...o, value: r } : o)
+          ),
+          i18n: t
+        }
+      ),
+      i18n: t
+    }
+  );
+}
+export {
+  z as DataTableBooleanFilter,
+  V as DataTableDateFilter,
+  k as DataTableDateTimeFilter,
+  p as DataTableFilter,
+  M as DataTableListMultiSelectFilter,
+  P as DataTableListSingleSelectFilter,
+  j as DataTableNumberFilter,
+  _ as DataTableStringFilter
+};

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

@@ -0,0 +1,128 @@
+"use client";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { AppSelect as h } from "../../../app-select.js";
+import { Badge as S } from "../../../badge.js";
+import { Button as f } from "../../../button.js";
+import { Icon as z } from "../../../icon.js";
+import { Popover as C, PopoverTrigger as k, PopoverContent as A } from "../../../popover.js";
+function T({
+  table: a,
+  sortedColumns: g = [],
+  sortableColumns: d,
+  i18n: l,
+  maxSortedColumns: m = 3
+}) {
+  const r = a.getState().sorting || [], p = new Set(r.map((n) => n.id)), u = (n, t) => {
+    const e = r[n], s = r.map(
+      (i, N) => N === n ? { id: t, desc: e?.desc ?? !1 } : i
+    );
+    a.setSorting(s);
+  }, x = (n, t) => {
+    const e = r.map(
+      (s, i) => i === n ? { ...s, desc: t === "desc" } : s
+    );
+    a.setSorting(e);
+  }, v = () => {
+    if (r.length >= m) return;
+    const n = new Set(r.map((i) => i.id)), e = (d.find((i) => !n.has(i.column.id)) ?? d[0])?.column.id;
+    if (!e) return;
+    const s = [...r, { id: e, desc: !1 }];
+    a.setSorting(s);
+  }, w = (n) => {
+    const t = r.filter((e, s) => s !== n);
+    a.setSorting(t);
+  };
+  return /* @__PURE__ */ c(C, { children: [
+    /* @__PURE__ */ o(k, { asChild: !0, children: /* @__PURE__ */ c(
+      S,
+      {
+        variant: g.length > 0 ? "default" : "ghost",
+        className: "hover:border-d-border cursor-pointer hover:border",
+        children: [
+          /* @__PURE__ */ o(z, { name: "ArrowUpDown" }),
+          l.sorting.sort
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ c(A, { className: "flex w-[400px] flex-col gap-2", children: [
+      /* @__PURE__ */ o("div", { className: "text-d-foreground text-md font-semibold", children: l.sorting.sorting }),
+      g.length > 0 && /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ c("div", { className: "flex w-full flex-row gap-1 pr-9 text-sm", children: [
+          /* @__PURE__ */ o("div", { className: "flex flex-1", children: l.sorting.column }),
+          /* @__PURE__ */ o("div", { className: "flex flex-1", children: l.sorting.order })
+        ] }),
+        g.map((n, t) => /* @__PURE__ */ c("div", { className: "flex w-full flex-row items-end gap-1", children: [
+          /* @__PURE__ */ o(
+            h,
+            {
+              size: "sm",
+              wrpClassName: "flex flex-1",
+              options: d.filter((e) => {
+                const s = e.column.id;
+                return s === n?.column.id || !p.has(s);
+              }).map((e) => ({
+                value: e.column.id,
+                label: e.column.columnDef.header?.toString() || e.column.id
+              })),
+              value: n?.column.id,
+              onValueChange: (e) => {
+                e != null && u(t, String(e));
+              }
+            }
+          ),
+          /* @__PURE__ */ o(
+            h,
+            {
+              size: "sm",
+              wrpClassName: "flex flex-1",
+              options: [
+                { value: "asc", label: l.sorting.ascending },
+                { value: "desc", label: l.sorting.descending }
+              ],
+              value: r?.[t]?.desc ? "desc" : "asc",
+              onValueChange: (e) => {
+                e && x(t, e);
+              }
+            }
+          ),
+          /* @__PURE__ */ o(
+            f,
+            {
+              variant: "ghost-destructive",
+              size: "sm",
+              onClick: () => w(t),
+              iconLeft: "X"
+            }
+          )
+        ] }, t))
+      ] }),
+      /* @__PURE__ */ c("div", { className: "flex w-full gap-2", children: [
+        /* @__PURE__ */ o(
+          f,
+          {
+            className: "flex flex-1",
+            variant: "ghost-destructive",
+            size: "sm",
+            onClick: () => a.resetSorting(),
+            disabled: r.length === 0 || d.length === 0,
+            children: l.sorting.resetSorting
+          }
+        ),
+        /* @__PURE__ */ o(
+          f,
+          {
+            className: "flex flex-1",
+            variant: "ghost",
+            size: "sm",
+            onClick: v,
+            disabled: d.length === 0 || r.length >= m,
+            children: l.sorting.addSort
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  T as DataTableSortingComponent
+};

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

@@ -0,0 +1,58 @@
+"use client";
+var a = /* @__PURE__ */ ((e) => (e.AND = "AND", e.OR = "OR", e))(a || {});
+const l = (e) => [
+  { value: "like", label: e.stringOperators.like },
+  { value: "n_like", label: e.stringOperators.nLike },
+  { value: "starts_with", label: e.stringOperators.startsWith },
+  { value: "ends_with", label: e.stringOperators.endsWith },
+  { value: "eq", label: e.stringOperators.eq },
+  { value: "ne", label: e.stringOperators.ne }
+  // { value: "eq_null", label: i18n.stringOperators.eqNull },
+  // { value: "n_eq_null", label: i18n.stringOperators.nEqNull },
+], t = (e) => [
+  { value: "eq", label: e.numberOperators.eq },
+  { value: "ne", label: e.numberOperators.ne },
+  { value: "lt", label: e.numberOperators.lt },
+  { value: "le", label: e.numberOperators.le },
+  { value: "gt", label: e.numberOperators.gt },
+  { value: "ge", label: e.numberOperators.ge }
+  // { value: "eq_null", label: i18n.numberOperators.eqNull },
+  // { value: "n_eq_null", label: i18n.numberOperators.nEqNull },
+], r = (e) => [
+  { value: "eq", label: e.booleanOperators.eq },
+  { value: "ne", label: e.booleanOperators.ne },
+  { value: "checked", label: e.booleanOperators.checked },
+  { value: "unchecked", label: e.booleanOperators.unchecked }
+], s = (e) => [
+  { value: "eq", label: e.dateOperators.is },
+  { value: "date_before", label: e.dateOperators.isBefore },
+  { value: "date_after", label: e.dateOperators.isAfter }
+  // { value: "eq_null", label: i18n.dateOperators.eqNull },
+  // { value: "n_eq_null", label: i18n.dateOperators.nEqNull },
+], o = (e) => [
+  { value: "date_time_before", label: e.dateTimeOperators.isBefore },
+  { value: "date_time_after", label: e.dateTimeOperators.isAfter }
+  // { value: "eq_null", label: i18n.dateTimeOperators.eqNull },
+  // { value: "n_eq_null", label: i18n.dateTimeOperators.nEqNull },
+], b = (e) => [
+  { value: "array_overlap", label: e.listOperators.is },
+  { value: "n_array_overlap", label: e.listOperators.isNot }
+  // { value: "eq_null", label: i18n.listOperators.eqNull },
+  // { value: "n_eq_null", label: i18n.listOperators.nEqNull },
+], u = (e) => [
+  { value: "array_overlap", label: e.listOperators.contains },
+  { value: "n_array_overlap", label: e.listOperators.doesNotContain }
+  // { value: "eq_null", label: i18n.listOperators.eqNull },
+  // { value: "n_eq_null", label: i18n.listOperators.nEqNull },
+], n = "border-d-destructive border rounded-md";
+export {
+  a as ELogicalFilterOperator,
+  n as errorSelectClass,
+  r as getBooleanFilterOptions,
+  s as getDateFilterOptions,
+  o as getDateTimeFilterOptions,
+  u as getListMultiSelectFilterOptions,
+  b as getListSingleSelectFilterOptions,
+  t as getNumberFilterOptions,
+  l as getStringFilterOptions
+};

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

@@ -0,0 +1,138 @@
+"use client";
+const e = {
+  // General
+  search: "Search",
+  searchPlaceholder: "Search...",
+  clearSearch: "Clear search",
+  reset: "Reset",
+  loading: "Loading...",
+  notFoundMessage: "No results found",
+  // Tooltip / helper text
+  searchTooltipLabel: "You will search across these columns:",
+  // Checkboxes
+  selectAll: "Select all",
+  selectRow: "Select row",
+  // Filters
+  filters: {
+    addFilter: "Add Filter",
+    advancedFilter: "Advanced Filter",
+    addFilterRule: "Add Rule",
+    addFilterGroup: "Add Group",
+    deleteFilter: "Delete Filter",
+    deleteCondition: "Delete Condition",
+    deleteGroup: "Delete Group",
+    duplicateCondition: "Duplicate Condition",
+    duplicateGroup: "Duplicate Group",
+    operator: "Operator",
+    value: "Value",
+    searchFilters: "Search columns",
+    searchPlaceholder: "Search",
+    selectDate: "Select date",
+    where: "Where",
+    and: "AND",
+    or: "OR",
+    filterNotSupported: "Filter not supported",
+    column: "Column",
+    filter: "Filter"
+  },
+  // Filter operators - String
+  stringOperators: {
+    eq: "Equal to",
+    ne: "Not equal to",
+    like: "Contains",
+    nLike: "Does not contain",
+    startsWith: "Starts with",
+    endsWith: "Ends with",
+    eqNull: "Is empty",
+    nEqNull: "Is not empty"
+  },
+  // Filter operators - Number
+  numberOperators: {
+    eq: "=",
+    ne: "!=",
+    lt: "<",
+    le: "<=",
+    gt: ">",
+    ge: ">=",
+    eqNull: "Is empty",
+    nEqNull: "Is not empty"
+  },
+  // Filter operators - Boolean
+  booleanOperators: {
+    eq: "Equal to",
+    ne: "Not equal to",
+    checked: "Checked",
+    unchecked: "Unchecked",
+    true: "True",
+    false: "False"
+  },
+  // Filter operators - Date
+  dateOperators: {
+    is: "Is",
+    isBefore: "Is before",
+    isAfter: "Is after",
+    eqNull: "Is empty",
+    nEqNull: "Is not empty"
+  },
+  // Filter operators - DateTime
+  dateTimeOperators: {
+    isBefore: "Is before",
+    isAfter: "Is after",
+    eqNull: "Is empty",
+    nEqNull: "Is not empty"
+  },
+  // Filter operators - List
+  listOperators: {
+    is: "Is",
+    isNot: "Is not",
+    contains: "Contains",
+    doesNotContain: "Does not contain",
+    eqNull: "Is empty",
+    nEqNull: "Is not empty"
+  },
+  // Sorting
+  sorting: {
+    sort: "Sort",
+    sorting: "Sorting",
+    column: "Column",
+    order: "Order",
+    sortBy: "Sort by",
+    ascending: "Ascending",
+    descending: "Descending",
+    clearSort: "Clear sort",
+    resetSorting: "Reset Sorting",
+    addSort: "Add sort"
+  },
+  // Column visibility
+  columnVisibility: {
+    visibleColumns: "Visible columns",
+    hiddenColumns: "Hidden columns",
+    hideColumn: "Hide column",
+    showColumn: "Show column",
+    hideAll: "Hide all",
+    showAll: "Show all"
+  },
+  // Pagination
+  pagination: {
+    previous: "Previous",
+    next: "Next",
+    first: "First",
+    last: "Last",
+    page: "Page",
+    of: "of",
+    rows: "rows",
+    pages: "pages",
+    rowsPerPage: "Rows per page",
+    goToPage: "Go to page",
+    showing: "Showing",
+    to: "to",
+    entries: "entries"
+  },
+  // Table actions
+  tableActions: {
+    actions: "Actions"
+  }
+};
+export {
+  e as defaultDataTableI18n
+};