laif-ds 0.2.22 → 0.2.24

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

@@ -0,0 +1,254 @@
+"use client";
+import { getListMultiSelectFilterOptions as v, getListSingleSelectFilterOptions as D, getDateTimeFilterOptions as F, getDateFilterOptions as A, getBooleanFilterOptions as b, getNumberFilterOptions as T, getStringFilterOptions as q } from "./data-table-constants.js";
+import { defaultDataTableI18n as m } from "./data-table-i18n.js";
+function L(e, a = "string") {
+  const t = (s) => {
+    switch (s) {
+      case "string":
+        return q(m)?.[0]?.value ?? "like";
+      case "number":
+        return T(m)?.[0]?.value ?? "eq";
+      case "boolean":
+        return b(m)?.[0]?.value ?? "eq";
+      case "date":
+        return A(m)?.[0]?.value ?? "eq";
+      case "datetime":
+        return F(m)?.[0]?.value ?? "date_time_before";
+      case "list_single_select":
+        return D(m)?.[0]?.value ?? "array_overlap";
+      case "list_multi_select":
+        return v(m)?.[0]?.value ?? "array_overlap";
+      default:
+        return "eq";
+    }
+  };
+  return {
+    id: crypto.randomUUID(),
+    columnId: e?.id || "",
+    columnLabel: e?.column.columnDef.header?.toString() || "",
+    columnType: e?.column.columnDef.meta?.type || a,
+    operator: t(
+      e?.column.columnDef.meta?.type
+    ),
+    listOptions: e?.column.columnDef.meta?.listOptions
+  };
+}
+function O() {
+  const e = () => crypto.randomUUID();
+  return {
+    id: e(),
+    rootGroup: {
+      id: e(),
+      logicalOperator: "AND",
+      conditions: [
+        {
+          id: e(),
+          columnId: "",
+          columnLabel: "",
+          columnType: "string",
+          operator: "eq",
+          value: void 0
+        }
+      ],
+      groups: []
+    }
+  };
+}
+function k(e, a) {
+  const t = e.filter((n) => n.operator === "eq_null" || n.operator === "n_eq_null" ? !0 : n.value === void 0 || n.value === "" ? !1 : n.columnType === "list_multi_select" ? (Array.isArray(n.value) ? n.value.filter((l) => l !== void 0) : [n.value].filter((l) => l !== void 0)).length > 0 : !0), u = a ? ((n) => {
+    const p = (l) => {
+      const _ = l.conditions.filter((o) => !o.columnId || !o.operator ? !1 : o.operator === "eq_null" || o.operator === "n_eq_null" ? !0 : o.value === void 0 ? !1 : o.columnType === "list_multi_select" ? (Array.isArray(o.value) ? o.value.filter((y) => y !== void 0) : [o.value].filter((y) => y !== void 0)).length > 0 : !0).map((o) => ({
+        [o.columnId]: {
+          operator: o.operator,
+          value: o.operator === "eq_null" || o.operator === "n_eq_null" ? "" : o.columnType === "list_single_select" ? Array.isArray(o.value) ? o.value.filter((f) => f !== void 0) : [o.value].filter((f) => f !== void 0) : o.value
+        }
+      })), g = l.groups?.map(p).filter(Boolean) || [], d = [
+        ..._,
+        ...g
+      ];
+      return d.length === 0 ? null : d.length === 1 ? d[0] : l.logicalOperator === "AND" ? { _and: d } : { _or: d };
+    };
+    return p(n.rootGroup);
+  })(a) : null, c = t.map(
+    (n) => ({
+      [n.columnId]: {
+        operator: n.operator,
+        value: n.operator === "eq_null" || n.operator === "n_eq_null" ? "" : n.columnType === "list_single_select" ? Array.isArray(n.value) ? n.value.filter((p) => p !== void 0) : [n.value].filter((p) => p !== void 0) : n.value ?? ""
+      }
+    })
+  ), r = [
+    ...u ? [u] : [],
+    ...c
+  ];
+  return r.length > 0 ? r.length === 1 ? r[0] : { _and: r } : {};
+}
+function H(e, a) {
+  const {
+    rowHeight: t = 1,
+    headerHeight: s = 1,
+    containerHeight: u = 1,
+    onPageChange: c,
+    setPagination: r
+  } = a, i = e?.offsetHeight || u, n = Math.floor(
+    (i - s) / t
+  ), p = n > 1 ? n : 1;
+  r((l) => {
+    if (l.pageSize !== p) {
+      if (c) {
+        const _ = Math.max(
+          0,
+          Math.ceil(l.pageSize * (l.pageIndex + 1) / p) - 1
+        ), g = Math.min(l.pageIndex, _);
+        c(g, p);
+      }
+      return { ...l, pageSize: p };
+    }
+    return l;
+  });
+}
+function C(e, a, t) {
+  if (e == null)
+    switch (a) {
+      case "eq_null":
+        return !0;
+      case "n_eq_null":
+        return !1;
+      default:
+        return !1;
+    }
+  const s = (r) => r == null || typeof r == "string" ? r : String(r), u = s(e), c = s(t);
+  switch (a) {
+    case "eq":
+      return u === c;
+    case "ne":
+      return u !== c;
+    case "lt":
+      return typeof e == "number" && typeof t == "number" ? e < t : u < c;
+    case "le":
+      return typeof e == "number" && typeof t == "number" ? e <= t : u <= c;
+    case "gt":
+      return typeof e == "number" && typeof t == "number" ? e > t : u > c;
+    case "ge":
+      return typeof e == "number" && typeof t == "number" ? e >= t : u >= c;
+    case "like":
+      return u?.toLowerCase().includes(c?.toLowerCase());
+    case "n_like":
+      return !u?.toLowerCase().includes(c?.toLowerCase());
+    case "starts_with":
+      return u?.toLowerCase().startsWith(c?.toLowerCase());
+    case "ends_with":
+      return u?.toLowerCase().endsWith(c?.toLowerCase());
+    case "eq_null":
+      return e == null || e === "";
+    case "n_eq_null":
+      return e != null && e !== "";
+    case "array_overlap":
+      return Array.isArray(e) && Array.isArray(t) ? t.length === 0 ? !0 : e.length === 0 ? !1 : t.some(
+        (r) => e.some(
+          (i) => s(i) === s(r)
+        )
+      ) : !1;
+    case "n_array_overlap":
+      return Array.isArray(e) && Array.isArray(t) ? t.length === 0 || e.length === 0 ? !0 : !t.some(
+        (r) => e.some(
+          (i) => s(i) === s(r)
+        )
+      ) : !0;
+    case "checked":
+      return e === !0;
+    case "unchecked":
+      return e === !1;
+    case "date_before":
+      try {
+        const r = new Date(e), i = new Date(t);
+        return r.setHours(0, 0, 0, 0), i.setHours(0, 0, 0, 0), r < i;
+      } catch {
+        return !1;
+      }
+    case "date_after":
+      try {
+        const r = new Date(e), i = new Date(t);
+        return r.setHours(0, 0, 0, 0), i.setHours(0, 0, 0, 0), r > i;
+      } catch {
+        return !1;
+      }
+    case "date_time_before":
+      try {
+        const r = new Date(e), i = new Date(t);
+        return r < i;
+      } catch {
+        return !1;
+      }
+    case "date_time_after":
+      try {
+        const r = new Date(e), i = new Date(t);
+        return r > i;
+      } catch {
+        return !1;
+      }
+    default:
+      return console.warn(`Unknown filter operator: ${a}`), !0;
+  }
+}
+function h(e, a) {
+  if (!a || Object.keys(a).length === 0)
+    return !0;
+  if ("_and" in a && Array.isArray(a._and))
+    return a._and.every(
+      (t) => h(e, t)
+    );
+  if ("_or" in a && Array.isArray(a._or))
+    return a._or.some(
+      (t) => h(e, t)
+    );
+  for (const [t, s] of Object.entries(a))
+    if (!t.startsWith("_") && typeof s == "object" && s !== null && "operator" in s) {
+      const u = e.getValue(t);
+      if (!C(
+        u,
+        s.operator,
+        s.value
+      )) return !1;
+    }
+  return !0;
+}
+function M(e, a) {
+  let t;
+  return function(...s) {
+    clearTimeout(t), t = setTimeout(() => {
+      e(...s);
+    }, a);
+  };
+}
+function x(e) {
+  switch (e) {
+    case "string":
+      return "CaseUpper";
+    case "number":
+      return "Binary";
+    case "boolean":
+      return "ToggleRight";
+    case "date":
+      return "Calendar1";
+    case "datetime":
+      return "CalendarClock";
+    case "list_single_select":
+      return "List";
+    case "list_multi_select":
+      return "ListTodo";
+    case "other":
+      return "FileQuestionMark";
+    default:
+      return "FileQuestionMark";
+  }
+}
+export {
+  C as applyClientSideFilter,
+  h as applySearchFilterToRow,
+  k as buildSearchFilter,
+  L as createBadgeFilterFromHeader,
+  O as createDefaultAdvancedFilter,
+  M as debounce,
+  x as getIconFromColumnType,
+  H as updatePageSizeFromContainer
+};

package/dist/components/ui/tabs.js

@@ -1,68 +1,68 @@
 "use client";
-import { jsx as a } from "react/jsx-runtime";
-import { Root as n, List as o, Trigger as r, Content as i } from "../../node_modules/@radix-ui/react-tabs/dist/index.js";
-import { cn as s } from "../../lib/utils.js";
+import { jsx as s } from "react/jsx-runtime";
+import { Root as o, List as i, Trigger as r, Content as a } from "../../node_modules/@radix-ui/react-tabs/dist/index.js";
+import { cn as n } from "../../lib/utils.js";
 function u({
-  className: t,
-  ...e
+  className: e,
+  ...t
 }) {
-  return /* @__PURE__ */ a(
-    n,
+  return /* @__PURE__ */ s(
+    o,
     {
       "data-slot": "tabs",
-      className: s("flex flex-col gap-2", t),
-      ...e
+      className: n("flex flex-col gap-2", e),
+      ...t
     }
   );
 }
 function f({
-  className: t,
-  ...e
+  className: e,
+  ...t
 }) {
-  return /* @__PURE__ */ a(
-    o,
+  return /* @__PURE__ */ s(
+    i,
     {
       "data-slot": "tabs-list",
-      className: s(
+      className: n(
         "bg-d-secondary text-d-secondary-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-        t
+        e
       ),
-      ...e
+      ...t
     }
   );
 }
-function g({
-  className: t,
-  ...e
+function b({
+  className: e,
+  ...t
 }) {
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ s(
     r,
     {
       "data-slot": "tabs-trigger",
-      className: s(
-        "data-[state=active]:bg-d-background dark:data-[state=active]:text-d-foreground focus-visible:border-d-ring focus-visible:ring-d-ring/50 focus-visible:outline-d-ring dark:data-[state=active]:border-d-input dark:data-[state=active]:bg-d-background text-d-foreground dark:text-d-secondary-foreground d-border inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        t
+      className: n(
+        "data-[state=active]:bg-d-background focus-visible:border-d-ring focus-visible:ring-d-ring/50 focus-visible:outline-d-ring text-d-foreground d-border inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        e
       ),
-      ...e
+      ...t
     }
   );
 }
-function b({
-  className: t,
-  ...e
+function g({
+  className: e,
+  ...t
 }) {
-  return /* @__PURE__ */ a(
-    i,
+  return /* @__PURE__ */ s(
+    a,
     {
       "data-slot": "tabs-content",
-      className: s("flex-1 outline-none", t),
-      ...e
+      className: n("flex-1 outline-none", e),
+      ...t
     }
   );
 }
 export {
   u as Tabs,
-  b as TabsContent,
+  g as TabsContent,
   f as TabsList,
-  g as TabsTrigger
+  b as TabsTrigger
 };

package/dist/components/ui/textarea.js

@@ -1,28 +1,31 @@
 "use client";
-import { jsxs as t, Fragment as a, jsx as r } from "react/jsx-runtime";
-import { cn as n } from "../../lib/utils.js";
-import { Label as o } from "./label.js";
-function c({
-  className: d,
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { Label as s } from "./label.js";
+import { cn as l } from "../../lib/utils.js";
+function x({
+  className: i,
   label: e,
-  ...i
+  labelClassName: d,
+  id: o,
+  ...a
 }) {
-  return /* @__PURE__ */ t(a, { children: [
-    e && /* @__PURE__ */ r(o, { htmlFor: i.id, children: e }),
-    /* @__PURE__ */ r(
+  const r = o || (e ? `textarea-${Math.random().toString(36).substring(2, 9)}` : void 0);
+  return /* @__PURE__ */ n("div", { className: "space-y-1.5", children: [
+    e && /* @__PURE__ */ t(s, { htmlFor: r, className: d, children: e }),
+    /* @__PURE__ */ t(
       "textarea",
       {
-        id: i.id,
+        id: r,
         "data-slot": "textarea",
-        className: n(
-          "border-d-input placeholder:text-d-muted-foreground focus-visible:border-d-ring focus-visible:ring-d-ring/50 aria-invalid:ring-d-destructive/20 dark:aria-invalid:ring-d-destructive/40 aria-invalid:border-d-destructive dark:bg-d-input/30 !bg-d-input flex field-sizing-content min-h-16 w-full rounded-md border px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          d
+        className: l(
+          "border-d-input placeholder:text-d-muted-foreground focus-visible:border-d-ring focus-visible:ring-d-ring/50 aria-invalid:ring-d-destructive/20 aria-invalid:border-d-destructive !bg-d-input flex field-sizing-content min-h-16 w-full rounded-md border px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          i
         ),
-        ...i
+        ...a
       }
     )
   ] });
 }
 export {
-  c as Textarea
+  x as Textarea
 };

package/dist/components/ui/tooltip.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
 import { Root as l, Trigger as p, Portal as m, Content as c, Arrow as f, Provider as u } from "../../node_modules/@radix-ui/react-tooltip/dist/index.js";
-import { cva as d } from "../../node_modules/class-variance-authority/dist/index.js";
+import { cva as e } from "../../node_modules/class-variance-authority/dist/index.js";
 import { cn as i } from "../../lib/utils.js";
-const g = d(
+const g = e(
   "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
   {
     variants: {
@@ -16,13 +16,13 @@ const g = d(
       variant: "primary"
     }
   }
-), b = d(
+), x = e(
   "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]",
   {
     variants: {
       variant: {
         primary: "bg-d-primary fill-d-primary",
-        card: "bg-d-card fill-d-card border border-d-border"
+        card: "bg-d-card fill-d-card"
       }
     },
     defaultVariants: {
@@ -30,7 +30,7 @@ const g = d(
     }
   }
 );
-function x({
+function b({
   delayDuration: t = 0,
   ...o
 }) {
@@ -46,7 +46,7 @@ function x({
 function w({
   ...t
 }) {
-  return /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(l, { "data-slot": "tooltip", ...t }) });
+  return /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(l, { "data-slot": "tooltip", ...t }) });
 }
 function z({
   ...t
@@ -57,7 +57,7 @@ function V({
   className: t,
   sideOffset: o = 0,
   variant: a,
-  children: e,
+  children: d,
   ...n
 }) {
   return /* @__PURE__ */ r(m, { children: /* @__PURE__ */ s(
@@ -68,11 +68,11 @@ function V({
       className: i(g({ variant: a }), t),
       ...n,
       children: [
-        e,
+        d,
         /* @__PURE__ */ r(
           f,
           {
-            className: i(b({ variant: a }))
+            className: i(x({ variant: a }))
           }
         )
       ]
@@ -82,6 +82,6 @@ function V({
 export {
   w as Tooltip,
   V as TooltipContent,
-  x as TooltipProvider,
+  b as TooltipProvider,
   z as TooltipTrigger
 };

package/dist/css-for-template.css

@@ -0,0 +1,57 @@
+/* This files contains everything that should be imported in the template */
+
+@theme inline {
+  --radius-d-sm: calc(var(--d-radius) - 4px);
+  --radius-d-md: calc(var(--d-radius) - 2px);
+  --radius-d-lg: var(--d-radius);
+  --radius-d-xl: calc(var(--d-radius) + 4px);
+  --color-d-background: var(--d-background);
+  --color-d-foreground: var(--d-foreground);
+  --color-d-card: var(--d-card);
+  --color-d-card-foreground: var(--d-card-foreground);
+  --color-d-popover: var(--d-popover);
+  --color-d-popover-foreground: var(--d-popover-foreground);
+  --color-d-primary: var(--d-primary);
+  --color-d-primary-foreground: var(--d-primary-foreground);
+  --color-d-secondary: var(--d-secondary);
+  --color-d-secondary-foreground: var(--d-secondary-foreground);
+  --color-d-muted: var(--d-muted);
+  --color-d-muted-foreground: var(--d-muted-foreground);
+  --color-d-accent: var(--d-accent);
+  --color-d-accent-foreground: var(--d-accent-foreground);
+  --color-d-destructive: var(--d-destructive);
+  --color-d-destructive-foreground: var(--d-destructive-foreground);
+  --color-d-border: var(--d-border);
+  --color-d-input: var(--d-input);
+  --color-d-ring: var(--d-ring);
+  --color-d-chart-1: var(--d-chart-1);
+  --color-d-chart-2: var(--d-chart-2);
+  --color-d-chart-3: var(--d-chart-3);
+  --color-d-chart-4: var(--d-chart-4);
+  --color-d-chart-5: var(--d-chart-5);
+  --color-d-sidebar: var(--d-sidebar);
+  --color-d-sidebar-foreground: var(--d-sidebar-foreground);
+  --color-d-sidebar-primary: var(--d-sidebar-primary);
+  --color-d-sidebar-primary-foreground: var(--d-sidebar-primary-foreground);
+  --color-d-sidebar-accent: var(--d-sidebar-accent);
+  --color-d-sidebar-accent-foreground: var(--d-sidebar-accent-foreground);
+  --color-d-sidebar-border: var(--d-sidebar-border);
+  --color-d-sidebar-ring: var(--d-sidebar-ring);
+}
+
+/* Force checkbox column to have fixed width */
+[data-column-id="data-table-integrated-checkbox-column"] {
+  width: 24px !important;
+  min-width: 24px !important;
+  max-width: 24px !important;
+}
+
+/* Base styles */
+* {
+  outline-color: color-mix(in oklab, var(--d-ring) 50%, transparent);
+}
+
+body {
+  background-color: var(--d-background);
+  color: var(--d-foreground);
+}