@konstructio/ui 0.1.2-alpha.77 → 0.1.2-alpha.78

package/dist/components/VirtualizedTable/components/Body/Body.js

@@ -27,35 +27,89 @@ const U = ({
   if (g || w)
     return /* @__PURE__ */ a(M, { numberOfRows: h, table: i });
   const d = i.getRowModel().rows ?? [];
-  return /* @__PURE__ */ a("tbody", { className: l("text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"), children: d.map((x, s) => {
-    const {
-      id: m,
-      original: c,
-      getVisibleCells: j
-    } = x, {
-      meta: o = {}
-    } = c, n = j(), e = N && x.getIsExpanded(), z = !!o.expandedRow || !!b, u = n[0]?.column.id !== "__expand" || y ? 0 : D ? 1 : null;
-    return /* @__PURE__ */ A(H, { children: [
-      /* @__PURE__ */ a("tr", { className: l({
-        "group/row": p
-      }, "border-b", "border-b-gray-200", "dark:text-metal-50", "dark:border-b-metal-700", "bg-transparent", o.className), "data-row-id": m, ...o.attributes ?? {}, children: n.map(({
-        id: F,
-        column: r,
-        getContext: S
-      }, f) => {
-        const _ = typeof r.columnDef.meta?.className == "function" ? r.columnDef.meta?.className(c) : r.columnDef.meta?.className;
-        return /* @__PURE__ */ a("td", { className: l("px-4", "py-1", "text-sm", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", {
-          "group-hover/row:bg-zinc-100 dark:group-hover/row:bg-metal-800": p,
-          [l("bg-zinc-100 dark:bg-metal-800", v)]: !!e
-        }, C, _, {
-          "rounded-bl-lg": s === d.length - 1 && u !== null && f === u && !t && !e,
-          "rounded-br-lg": s === d.length - 1 && f === n.length - 1 && !t && !e,
-          "dark:[tr:last-child_&]:border-b": !t
-        }), "data-expanded": e ? !0 : void 0, ...r.columnDef.meta?.attributes ?? {}, children: B(r.columnDef.cell, S()) }, F);
-      }) }),
-      z && /* @__PURE__ */ a(O, { classNameExpandedCell: k, classNameExpandedContent: E, classNameExpandedRow: R, colSpan: n.length, id: m, isExpanded: !!e, isLastRow: s === d.length - 1 && !t, children: o.expandedRow ?? b?.(c) })
-    ] }, m);
-  }) });
+  return /* @__PURE__ */ a(
+    "tbody",
+    {
+      className: l(
+        "text-slate-800",
+        "text-sm",
+        "font-normal",
+        "relative",
+        "dark:border-x"
+      ),
+      children: d.map((x, s) => {
+        const { id: m, original: c, getVisibleCells: j } = x, { meta: o = {} } = c, n = j(), e = N && x.getIsExpanded(), z = !!o.expandedRow || !!b, u = n[0]?.column.id !== "__expand" || y ? 0 : D ? 1 : null;
+        return /* @__PURE__ */ A(H, { children: [
+          /* @__PURE__ */ a(
+            "tr",
+            {
+              className: l(
+                { "group/row": p },
+                "border-b",
+                "border-b-gray-200",
+                "dark:text-metal-50",
+                "dark:border-b-metal-700",
+                "bg-transparent",
+                o.className
+              ),
+              "data-row-id": m,
+              ...o.attributes ?? {},
+              children: n.map(({ id: F, column: r, getContext: S }, f) => {
+                const _ = typeof r.columnDef.meta?.className == "function" ? r.columnDef.meta?.className(c) : r.columnDef.meta?.className;
+                return /* @__PURE__ */ a(
+                  "td",
+                  {
+                    className: l(
+                      "px-4",
+                      "py-1",
+                      "text-sm",
+                      "bg-white",
+                      "dark:bg-metal-900",
+                      "dark:border-t",
+                      "dark:border-metal-700",
+                      "dark:first:border-l",
+                      "dark:last:border-r",
+                      {
+                        "group-hover/row:bg-zinc-100 dark:group-hover/row:bg-metal-800": p,
+                        [l(
+                          "bg-zinc-100 dark:bg-metal-800",
+                          v
+                        )]: !!e
+                      },
+                      C,
+                      _,
+                      {
+                        "rounded-bl-lg": s === d.length - 1 && u !== null && f === u && !t && !e,
+                        "rounded-br-lg": s === d.length - 1 && f === n.length - 1 && !t && !e,
+                        "dark:[tr:last-child_&]:border-b": !t
+                      }
+                    ),
+                    "data-expanded": e ? !0 : void 0,
+                    ...r.columnDef.meta?.attributes ?? {},
+                    children: B(r.columnDef.cell, S())
+                  },
+                  F
+                );
+              })
+            }
+          ),
+          z && /* @__PURE__ */ a(
+            O,
+            {
+              classNameExpandedCell: k,
+              classNameExpandedContent: E,
+              classNameExpandedRow: R,
+              colSpan: n.length,
+              id: m,
+              isExpanded: !!e,
+              isLastRow: s === d.length - 1 && !t,
+              children: o.expandedRow ?? b?.(c)
+            }
+          )
+        ] }, m);
+      })
+    }
+  );
 };
 export {
   U as Body

package/dist/components/VirtualizedTable/components/DotPaginate/DotPaginate.js

@@ -1,108 +1,169 @@
-import { jsx as r, jsxs as _ } from "react/jsx-runtime";
-import { c as b } from "../../../../compiler-runtime-DA41awpA.js";
-import { memo as y } from "react";
-import { cn as C } from "../../../../utils/index.js";
-import { C as B } from "../../../../chevron-left-BHBf-gQY.js";
-import { C as V } from "../../../../chevron-right-DvXGOiS_.js";
-import { useTableContext as v } from "../../contexts/table.hook.js";
-const m = y((t) => {
-  const e = b.c(12), {
-    index: l,
-    currentPage: s,
-    handlePage: o
-  } = t;
-  let u;
-  e[0] !== o || e[1] !== l ? (u = () => o(l), e[0] = o, e[1] = l, e[2] = u) : u = e[2];
-  const f = l === s;
-  let a;
-  e[3] !== f ? (a = C("px-2.5 py-1 rounded-lg text-blue-600 cursor-pointer dark:text-aurora-500", {
-    "bg-blue-600 text-white font-semibold dark:bg-aurora-500 dark:text-metal-800": f
-  }), e[3] = f, e[4] = a) : a = e[4];
-  const c = l + 1;
-  let n;
-  e[5] !== u || e[6] !== a || e[7] !== c ? (n = /* @__PURE__ */ r("button", { type: "button", onClick: u, className: a, children: c }), e[5] = u, e[6] = a, e[7] = c, e[8] = n) : n = e[8];
-  let d;
-  return e[9] !== l || e[10] !== n ? (d = /* @__PURE__ */ r("li", { children: n }, l), e[9] = l, e[10] = n, e[11] = d) : d = e[11], d;
-});
-m.displayName = "KonstructPageButton";
-const x = y((t) => {
-  const e = b.c(3), {
-    keyValue: l
-  } = t;
-  let s;
-  e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r("span", { className: "text-blue-600 select-none dark:text-aurora-500", children: "..." }), e[0] = s) : s = e[0];
-  let o;
-  return e[1] !== l ? (o = /* @__PURE__ */ r("li", { className: "px-2", children: s }, l), e[1] = l, e[2] = o) : o = e[2], o;
-});
-x.displayName = "KonstructEllipsis";
-const k = y((t) => {
-  const e = b.c(10), {
-    direction: l,
-    disabled: s,
-    onClick: o
-  } = t, u = l === "left" ? B : V, f = !s;
-  let a;
-  e[0] !== s || e[1] !== f ? (a = C("h-6 w-6 cursor-pointer", {
-    "text-blue-600 dark:text-aurora-500": f,
-    "text-slate-400 cursor-not-allowed": s
-  }), e[0] = s, e[1] = f, e[2] = a) : a = e[2];
-  let c;
-  e[3] !== u || e[4] !== a ? (c = /* @__PURE__ */ r(u, { className: a }), e[3] = u, e[4] = a, e[5] = c) : c = e[5];
-  let n;
-  return e[6] !== s || e[7] !== o || e[8] !== c ? (n = /* @__PURE__ */ r("li", { className: "flex items-center justify-center", children: /* @__PURE__ */ r("button", { onClick: o, disabled: s, children: c }) }), e[6] = s, e[7] = o, e[8] = c, e[9] = n) : n = e[9], n;
-});
-k.displayName = "KonstructNavigationButton";
-const D = () => {
-  const t = b.c(22), {
-    totalPages: e,
-    page: l,
-    handlePage: s
-  } = v();
-  let o;
-  t[0] !== s || t[1] !== l || t[2] !== e ? (o = () => {
-    if (e <= 5)
-      return Array.from({
-        length: e
-      }, (i, N) => /* @__PURE__ */ r(m, { index: N, currentPage: l, handlePage: s }, N));
-    const p = [];
-    if (l < 3) {
-      for (let i = 0; i < 3; i++)
-        p.push(/* @__PURE__ */ r(m, { index: i, currentPage: l, handlePage: s }, i));
-      p.push(/* @__PURE__ */ r(x, { keyValue: "ellipsis" }, "ellipsis"));
-      for (let i = e - 2; i < e; i++)
-        p.push(/* @__PURE__ */ r(m, { index: i, currentPage: l, handlePage: s }, i));
-    } else if (l >= e - 5) {
-      p.push(/* @__PURE__ */ r(m, { index: 0, currentPage: l, handlePage: s }, 0)), e > 6 && p.push(/* @__PURE__ */ r(x, { keyValue: "ellipsis" }, "ellipsis"));
-      for (let i = Math.max(1, e - 5); i < e; i++)
-        p.push(/* @__PURE__ */ r(m, { index: i, currentPage: l, handlePage: s }, i));
-    } else {
-      p.push(/* @__PURE__ */ r(m, { index: 0, currentPage: l, handlePage: s }, 0)), l > 3 && p.push(/* @__PURE__ */ r(x, { keyValue: "ellipsis1" }, "ellipsis1"));
-      for (let i = l - 1; i <= l + 1; i++)
-        i > 0 && i < e - 1 && p.push(/* @__PURE__ */ r(m, { index: i, currentPage: l, handlePage: s }, i));
-      l < e - 4 && p.push(/* @__PURE__ */ r(x, { keyValue: "ellipsis2" }, "ellipsis2")), p.push(/* @__PURE__ */ r(m, { index: e - 1, currentPage: l, handlePage: s }, e - 1));
+import { jsx as s, jsxs as m } from "react/jsx-runtime";
+import { memo as u } from "react";
+import { cn as p } from "../../../../utils/index.js";
+import { C as h } from "../../../../chevron-left-BHBf-gQY.js";
+import { C as f } from "../../../../chevron-right-DvXGOiS_.js";
+import { useTableContext as g } from "../../contexts/table.hook.js";
+const l = u(
+  ({
+    index: t,
+    currentPage: e,
+    handlePage: i
+  }) => /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
+    "button",
+    {
+      type: "button",
+      onClick: () => i(t),
+      className: p(
+        "px-2.5 py-1 rounded-lg text-blue-600 cursor-pointer dark:text-aurora-500",
+        {
+          "bg-blue-600 text-white font-semibold dark:bg-aurora-500 dark:text-metal-800": t === e
+        }
+      ),
+      children: t + 1
     }
-    return p;
-  }, t[0] = s, t[1] = l, t[2] = e, t[3] = o) : o = t[3];
-  const u = o;
-  let f;
-  t[4] !== s || t[5] !== l ? (f = () => s(l - 1), t[4] = s, t[5] = l, t[6] = f) : f = t[6];
-  const a = l === 0;
-  let c;
-  t[7] !== f || t[8] !== a ? (c = /* @__PURE__ */ r(k, { direction: "left", onClick: f, disabled: a }), t[7] = f, t[8] = a, t[9] = c) : c = t[9];
-  let n;
-  t[10] !== u ? (n = u(), t[10] = u, t[11] = n) : n = t[11];
-  let d;
-  t[12] !== s || t[13] !== l ? (d = () => s(l + 1), t[12] = s, t[13] = l, t[14] = d) : d = t[14];
-  const P = l >= e - 1;
-  let h;
-  t[15] !== d || t[16] !== P ? (h = /* @__PURE__ */ r(k, { direction: "right", onClick: d, disabled: P }), t[15] = d, t[16] = P, t[17] = h) : h = t[17];
-  let g;
-  return t[18] !== c || t[19] !== n || t[20] !== h ? (g = /* @__PURE__ */ _("ul", { className: "flex items-center gap-2", children: [
-    c,
-    n,
-    h
-  ] }), t[18] = c, t[19] = n, t[20] = h, t[21] = g) : g = t[21], g;
+  ) }, t)
+);
+l.displayName = "KonstructPageButton";
+const a = u(({ keyValue: t }) => /* @__PURE__ */ s("li", { className: "px-2", children: /* @__PURE__ */ s("span", { className: "text-blue-600 select-none dark:text-aurora-500", children: "..." }) }, t));
+a.displayName = "KonstructEllipsis";
+const o = u(
+  ({
+    direction: t,
+    disabled: e,
+    onClick: i
+  }) => /* @__PURE__ */ s("li", { className: "flex items-center justify-center", children: /* @__PURE__ */ s("button", { onClick: i, disabled: e, children: /* @__PURE__ */ s(
+    t === "left" ? h : f,
+    {
+      className: p("h-6 w-6 cursor-pointer", {
+        "text-blue-600 dark:text-aurora-500": !e,
+        "text-slate-400 cursor-not-allowed": e
+      })
+    }
+  ) }) })
+);
+o.displayName = "KonstructNavigationButton";
+const C = () => {
+  const { totalPages: t, page: e, handlePage: i } = g();
+  return /* @__PURE__ */ m("ul", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ s(
+      o,
+      {
+        direction: "left",
+        onClick: () => i(e - 1),
+        disabled: e === 0
+      }
+    ),
+    (() => {
+      if (t <= 5)
+        return Array.from({ length: t }, (r, c) => /* @__PURE__ */ s(
+          l,
+          {
+            index: c,
+            currentPage: e,
+            handlePage: i
+          },
+          c
+        ));
+      const n = [];
+      if (e < 3) {
+        for (let r = 0; r < 3; r++)
+          n.push(
+            /* @__PURE__ */ s(
+              l,
+              {
+                index: r,
+                currentPage: e,
+                handlePage: i
+              },
+              r
+            )
+          );
+        n.push(/* @__PURE__ */ s(a, { keyValue: "ellipsis" }, "ellipsis"));
+        for (let r = t - 2; r < t; r++)
+          n.push(
+            /* @__PURE__ */ s(
+              l,
+              {
+                index: r,
+                currentPage: e,
+                handlePage: i
+              },
+              r
+            )
+          );
+      } else if (e >= t - 5) {
+        n.push(
+          /* @__PURE__ */ s(
+            l,
+            {
+              index: 0,
+              currentPage: e,
+              handlePage: i
+            },
+            0
+          )
+        ), t > 6 && n.push(/* @__PURE__ */ s(a, { keyValue: "ellipsis" }, "ellipsis"));
+        for (let r = Math.max(1, t - 5); r < t; r++)
+          n.push(
+            /* @__PURE__ */ s(
+              l,
+              {
+                index: r,
+                currentPage: e,
+                handlePage: i
+              },
+              r
+            )
+          );
+      } else {
+        n.push(
+          /* @__PURE__ */ s(
+            l,
+            {
+              index: 0,
+              currentPage: e,
+              handlePage: i
+            },
+            0
+          )
+        ), e > 3 && n.push(/* @__PURE__ */ s(a, { keyValue: "ellipsis1" }, "ellipsis1"));
+        for (let r = e - 1; r <= e + 1; r++)
+          r > 0 && r < t - 1 && n.push(
+            /* @__PURE__ */ s(
+              l,
+              {
+                index: r,
+                currentPage: e,
+                handlePage: i
+              },
+              r
+            )
+          );
+        e < t - 4 && n.push(/* @__PURE__ */ s(a, { keyValue: "ellipsis2" }, "ellipsis2")), n.push(
+          /* @__PURE__ */ s(
+            l,
+            {
+              index: t - 1,
+              currentPage: e,
+              handlePage: i
+            },
+            t - 1
+          )
+        );
+      }
+      return n;
+    })(),
+    /* @__PURE__ */ s(
+      o,
+      {
+        direction: "right",
+        onClick: () => i(e + 1),
+        disabled: e >= t - 1
+      }
+    )
+  ] });
 };
 export {
-  D as DotPaginate
+  C as DotPaginate
 };

package/dist/components/VirtualizedTable/components/DropdownPaginate/DropdownPaginate.js

@@ -6,21 +6,27 @@ import { useTableContext as d } from "../../contexts/table.hook.js";
 const u = ({
   pageSizes: m = g
 }) => {
-  const {
-    pageSize: r,
-    onPageSize: t,
-    handlePage: a
-  } = d(), s = l(() => m.map(String).map((e) => ({
-    label: e,
-    value: e
-  })), []), n = p((e) => {
-    t(Number(e)), a(0);
-  }, [a, t]);
+  const { pageSize: r, onPageSize: t, handlePage: a } = d(), s = l(
+    () => m.map(String).map((e) => ({ label: e, value: e })),
+    []
+  ), n = p(
+    (e) => {
+      t(Number(e)), a(0);
+    },
+    [a, t]
+  );
   return /* @__PURE__ */ i("div", { className: "flex items-center gap-2 dark:text-metal-300", children: [
     /* @__PURE__ */ o("span", { children: "Show" }),
-    /* @__PURE__ */ o(c, { className: "w-22 [&>div>p]:text-sm bg-white", listItemClassName: "[&>p]:text-sm dark:bg-metal-800", options: s, value: r.toString(), onChange: ({
-      target: e
-    }) => n(e.value) })
+    /* @__PURE__ */ o(
+      c,
+      {
+        className: "w-22 [&>div>p]:text-sm bg-white",
+        listItemClassName: "[&>p]:text-sm dark:bg-metal-800",
+        options: s,
+        value: r.toString(),
+        onChange: ({ target: e }) => n(e.value)
+      }
+    )
   ] });
 };
 export {

package/dist/components/VirtualizedTable/components/ExpandableRow/ExpandableRow.js

@@ -1,45 +1,51 @@
-import { jsx as b } from "react/jsx-runtime";
-import { c as E } from "../../../../compiler-runtime-DA41awpA.js";
-import { cn as m } from "../../../../utils/index.js";
-const R = (k) => {
-  const e = E.c(25), {
-    children: p,
-    classNameExpandedCell: f,
-    classNameExpandedContent: g,
-    classNameExpandedRow: x,
-    colSpan: w,
-    id: h,
-    isExpanded: r,
-    isLastRow: d
-  } = k;
-  let t;
-  e[0] !== x ? (t = m("h-0 leading-0", x), e[0] = x, e[1] = t) : t = e[1];
-  let a;
-  e[2] !== r || e[3] !== d ? (a = m("p-0 bg-white dark:bg-metal-900 dark:border-x dark:border-metal-700", {
-    "rounded-b-lg": d
-  }, {
-    "border-t border-b border-gray-200 dark:border-t-metal-700": r && d,
-    "border-t border-b border-gray-200 dark:border-t-metal-700 dark:border-b-0": r && !d,
-    "border-y-0": !r && !d,
-    "border-t-0 border-b border-b-gray-200 dark:border-b-metal-700": !r && d
-  }), e[2] = r, e[3] = d, e[4] = a) : a = e[4];
-  const N = !r;
-  let o;
-  e[5] !== g || e[6] !== r || e[7] !== N ? (o = m("grid transition-[grid-template-rows] duration-300 ease-in-out", {
-    "grid-rows-[1fr]": r,
-    "grid-rows-[0fr]": N
-  }, g), e[5] = g, e[6] = r, e[7] = N, e[8] = o) : o = e[8];
-  let l;
-  e[9] !== f ? (l = m("px-4 py-3", f), e[9] = f, e[10] = l) : l = e[10];
-  let s;
-  e[11] !== p || e[12] !== l ? (s = /* @__PURE__ */ b("div", { className: "overflow-hidden", children: /* @__PURE__ */ b("div", { className: l, children: p }) }), e[11] = p, e[12] = l, e[13] = s) : s = e[13];
-  let i;
-  e[14] !== o || e[15] !== s ? (i = /* @__PURE__ */ b("div", { className: o, children: s }), e[14] = o, e[15] = s, e[16] = i) : i = e[16];
-  let n;
-  e[17] !== w || e[18] !== a || e[19] !== i ? (n = /* @__PURE__ */ b("td", { colSpan: w, className: a, children: i }), e[17] = w, e[18] = a, e[19] = i, e[20] = n) : n = e[20];
-  let c;
-  return e[21] !== h || e[22] !== t || e[23] !== n ? (c = /* @__PURE__ */ b("tr", { className: t, "data-expanded-row-id": h, children: n }), e[21] = h, e[22] = t, e[23] = n, e[24] = c) : c = e[24], c;
-};
+import { jsx as d } from "react/jsx-runtime";
+import { cn as o } from "../../../../utils/index.js";
+const n = ({
+  children: a,
+  classNameExpandedCell: b,
+  classNameExpandedContent: t,
+  classNameExpandedRow: l,
+  colSpan: m,
+  id: i,
+  isExpanded: r,
+  isLastRow: e
+}) => /* @__PURE__ */ d(
+  "tr",
+  {
+    className: o("h-0 leading-0", l),
+    "data-expanded-row-id": i,
+    children: /* @__PURE__ */ d(
+      "td",
+      {
+        colSpan: m,
+        className: o(
+          "p-0 bg-white dark:bg-metal-900 dark:border-x dark:border-metal-700",
+          { "rounded-b-lg": e },
+          {
+            "border-t border-b border-gray-200 dark:border-t-metal-700": r && e,
+            "border-t border-b border-gray-200 dark:border-t-metal-700 dark:border-b-0": r && !e,
+            "border-y-0": !r && !e,
+            "border-t-0 border-b border-b-gray-200 dark:border-b-metal-700": !r && e
+          }
+        ),
+        children: /* @__PURE__ */ d(
+          "div",
+          {
+            className: o(
+              "grid transition-[grid-template-rows] duration-300 ease-in-out",
+              {
+                "grid-rows-[1fr]": r,
+                "grid-rows-[0fr]": !r
+              },
+              t
+            ),
+            children: /* @__PURE__ */ d("div", { className: "overflow-hidden", children: /* @__PURE__ */ d("div", { className: o("px-4 py-3", b), children: a }) })
+          }
+        )
+      }
+    )
+  }
+);
 export {
-  R as ExpandableRow
+  n as ExpandableRow
 };