@konstructio/ui 0.1.2-alpha.2 → 0.1.2-alpha.20

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

@@ -0,0 +1,165 @@
+import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import { memo as u } from "react";
+import { cn as p } from "../../../../utils/index.js";
+import { C as g, a as d } from "../../../../chevron-right-DeMVrnIg.js";
+import { useTableContext as f } from "../../contexts/table.hook.js";
+const r = u(
+  ({
+    index: e,
+    currentPage: t,
+    handlePage: l
+  }) => /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
+    "button",
+    {
+      type: "button",
+      onClick: () => l(e),
+      className: p("px-2.5 py-1 rounded-lg text-blue-600 cursor-pointer", {
+        "bg-blue-600 text-white": e === t
+      }),
+      children: e + 1
+    }
+  ) }, e)
+);
+r.displayName = "PageButton";
+const o = u(({ keyValue: e }) => /* @__PURE__ */ i("li", { className: "px-2", children: /* @__PURE__ */ i("span", { className: "text-blue-600 select-none", children: "..." }) }, e));
+o.displayName = "Ellipsis";
+const a = u(
+  ({
+    direction: e,
+    onClick: t,
+    disabled: l
+  }) => /* @__PURE__ */ i("li", { className: "flex items-center justify-center", children: /* @__PURE__ */ i("button", { onClick: t, disabled: l, children: /* @__PURE__ */ i(
+    e === "left" ? g : d,
+    {
+      className: p("h-6 w-6 cursor-pointer", {
+        "text-blue-600": !l,
+        "text-slate-400 cursor-not-allowed": l
+      })
+    }
+  ) }) })
+);
+a.displayName = "NavigationButton";
+const k = () => {
+  const { totalPages: e, page: t, handlePage: l } = f();
+  return /* @__PURE__ */ m("ul", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ i(
+      a,
+      {
+        direction: "left",
+        onClick: () => l(t - 1),
+        disabled: t === 0
+      }
+    ),
+    (() => {
+      if (e <= 5)
+        return Array.from({ length: e }, (s, c) => /* @__PURE__ */ i(
+          r,
+          {
+            index: c,
+            currentPage: t,
+            handlePage: l
+          },
+          c
+        ));
+      const n = [];
+      if (t < 3) {
+        for (let s = 0; s < 3; s++)
+          n.push(
+            /* @__PURE__ */ i(
+              r,
+              {
+                index: s,
+                currentPage: t,
+                handlePage: l
+              },
+              s
+            )
+          );
+        n.push(/* @__PURE__ */ i(o, { keyValue: "ellipsis" }, "ellipsis"));
+        for (let s = e - 2; s < e; s++)
+          n.push(
+            /* @__PURE__ */ i(
+              r,
+              {
+                index: s,
+                currentPage: t,
+                handlePage: l
+              },
+              s
+            )
+          );
+      } else if (t >= e - 5) {
+        n.push(
+          /* @__PURE__ */ i(
+            r,
+            {
+              index: 0,
+              currentPage: t,
+              handlePage: l
+            },
+            0
+          )
+        ), e > 6 && n.push(/* @__PURE__ */ i(o, { keyValue: "ellipsis" }, "ellipsis"));
+        for (let s = Math.max(1, e - 5); s < e; s++)
+          n.push(
+            /* @__PURE__ */ i(
+              r,
+              {
+                index: s,
+                currentPage: t,
+                handlePage: l
+              },
+              s
+            )
+          );
+      } else {
+        n.push(
+          /* @__PURE__ */ i(
+            r,
+            {
+              index: 0,
+              currentPage: t,
+              handlePage: l
+            },
+            0
+          )
+        ), t > 3 && n.push(/* @__PURE__ */ i(o, { keyValue: "ellipsis1" }, "ellipsis1"));
+        for (let s = t - 1; s <= t + 1; s++)
+          s > 0 && s < e - 1 && n.push(
+            /* @__PURE__ */ i(
+              r,
+              {
+                index: s,
+                currentPage: t,
+                handlePage: l
+              },
+              s
+            )
+          );
+        t < e - 4 && n.push(/* @__PURE__ */ i(o, { keyValue: "ellipsis2" }, "ellipsis2")), n.push(
+          /* @__PURE__ */ i(
+            r,
+            {
+              index: e - 1,
+              currentPage: t,
+              handlePage: l
+            },
+            e - 1
+          )
+        );
+      }
+      return n;
+    })(),
+    /* @__PURE__ */ i(
+      a,
+      {
+        direction: "right",
+        onClick: () => l(t + 1),
+        disabled: t >= e - 1
+      }
+    )
+  ] });
+};
+export {
+  k as DotPaginate
+};

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

@@ -0,0 +1,34 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { useMemo as p, useCallback as l } from "react";
+import { Dropdown as c } from "../../../Dropdown/Dropdown.js";
+import { DEFAULT_PAGE_SIZES as g } from "../../constants/pagination.js";
+import { useTableContext as x } from "../../contexts/table.hook.js";
+const b = ({
+  pageSizes: n = g
+}) => {
+  const { pageSize: s, onPageSize: o, handlePage: t } = x(), r = p(
+    () => n.map(String).map((e) => ({ label: e, value: e })),
+    []
+  ), m = l(
+    (e) => {
+      o(Number(e)), t(0);
+    },
+    [t, o]
+  );
+  return /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ a("span", { children: "Show" }),
+    /* @__PURE__ */ a(
+      c,
+      {
+        className: "w-[88px] [&>div>p]:text-xs bg-white",
+        listItemClassName: "[&>p]:text-xs",
+        options: r,
+        value: s.toString(),
+        onChange: ({ target: e }) => m(e.value)
+      }
+    )
+  ] });
+};
+export {
+  b as DropdownPaginate
+};

package/dist/components/VirtualizedTable/components/Filter/Filter.js

@@ -0,0 +1,88 @@
+import { jsxs as m, jsx as l } from "react/jsx-runtime";
+import { d as v } from "../../../../debounce-BFejQm9P.js";
+import { useRef as O, useCallback as u, useMemo as p } from "react";
+import { Filter as n } from "../../../Filter/Filter.js";
+import { Input as R } from "../../../Input/Input.js";
+import { Button as y } from "../../../Button/Button.js";
+import { useTableContext as B } from "../../contexts/table.hook.js";
+const $ = ({
+  actions: d,
+  multiSelectFilter: f,
+  placeholder: h,
+  showFilterInput: g = !0,
+  showResetButton: x = !0
+}) => {
+  const s = O(null), {
+    termOfSearch: o,
+    multiselectSelected: c,
+    onChangeTermOfSearch: a,
+    onSelectMultiselect: i
+  } = B(), C = u(
+    (e, t) => i(
+      e,
+      t.map((r) => r.id)
+    ),
+    [i]
+  ), S = u(() => {
+    a(""), s.current && (s.current.value = "");
+  }, [a]), b = p(
+    () => v((e) => {
+      a(e.target.value);
+    }, 500),
+    [a]
+  ), F = p(
+    () => !!o || Object.entries(c ?? {}).map(([, e]) => e).flat().length > 0,
+    [o, c]
+  );
+  return /* @__PURE__ */ m("div", { className: "w-full flex items-center justify-end pb-6", children: [
+    g && /* @__PURE__ */ l(
+      R,
+      {
+        ref: s,
+        placeholder: h,
+        isSearch: !0,
+        autoComplete: "false",
+        className: "w-72",
+        inputMode: "search",
+        onChange: b
+      }
+    ),
+    /* @__PURE__ */ m(n, { children: [
+      f?.map(
+        ({ key: e, label: t, position: r = "right", options: M }) => /* @__PURE__ */ l(
+          n.BadgeMultiSelect,
+          {
+            label: t,
+            position: r,
+            options: M,
+            onApply: (j) => {
+              C(e, j);
+            }
+          },
+          t
+        )
+      ),
+      d?.map(({ label: e, onClick: t, variant: r = "secondary" }) => /* @__PURE__ */ l(
+        y,
+        {
+          variant: r,
+          appearance: "compact",
+          onClick: t,
+          children: e
+        },
+        e
+      )),
+      x && /* @__PURE__ */ l(
+        n.ResetButton,
+        {
+          className: "text-slate-700 hover:text-slate-700 disabled:text-slate-700/45 select-none",
+          disabled: !F,
+          onClick: S
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  $ as Filter
+};

package/dist/components/VirtualizedTable/components/FormPaginate/FormPaginate.js

@@ -0,0 +1,48 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useRef as l, useCallback as p } from "react";
+import { Input as c } from "../../../Input/Input.js";
+import { useTableContext as f } from "../../contexts/table.hook.js";
+const h = () => {
+  const r = l(null), { totalPages: e, handlePage: o } = f(), m = p(
+    (n) => {
+      n.preventDefault();
+      const s = new FormData(n.currentTarget), a = Number(s.get("jump-to")), u = (a < e ? a : e) || 1;
+      o(u - 1), r.current?.reset();
+    },
+    [o, e]
+  );
+  return /* @__PURE__ */ i(
+    "form",
+    {
+      "aria-label": "footer-pagination",
+      ref: r,
+      onSubmit: m,
+      className: "flex items-center gap-2",
+      children: [
+        /* @__PURE__ */ t("span", { className: "min-w-fit", children: "Jump to" }),
+        /* @__PURE__ */ t(
+          c,
+          {
+            type: "number",
+            className: "w-[72px] text-xs no-spinner",
+            name: "jump-to",
+            min: 1,
+            max: e,
+            required: !0
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "submit",
+            className: "text-xs text-blue-600 p-2 cursor-pointer",
+            children: "Go"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  h as FormPaginate
+};

package/dist/components/VirtualizedTable/components/Header/Header.js

@@ -0,0 +1,82 @@
+import { jsx as s, jsxs as a } from "react/jsx-runtime";
+import { f as u } from "../../../../index-Dx2grAuN.js";
+import { useCallback as i } from "react";
+import { cn as o } from "../../../../utils/index.js";
+import b from "../../assets/chevron-up.js";
+import g from "../../assets/chevron-down.js";
+import { useTableContext as S } from "../../contexts/table.hook.js";
+const y = ({
+  className: p,
+  classNameArrows: n,
+  classNameActiveArrows: l
+}) => {
+  const { table: c, onSorting: r } = S(), d = i(
+    (t) => r([{ id: t.id, desc: !1 }]),
+    [r]
+  ), x = i(
+    (t) => r([{ id: t.id, desc: !0 }]),
+    [r]
+  );
+  return /* @__PURE__ */ s(
+    "thead",
+    {
+      className: o(
+        "font-semibold uppercase text-slate-500 text-xs not-italic bg-slate-100 w-full relative block overflow-hidden [clip-path:inset(-1px_-1px_0px_-1px_round_8px_8px_0px_0px)]",
+        p
+      ),
+      children: c.getHeaderGroups().map(({ id: t, headers: f }) => /* @__PURE__ */ s("tr", { className: "table w-full table-fixed", children: f.map(({ id: m, column: e, getContext: h }) => /* @__PURE__ */ s(
+        "th",
+        {
+          scope: "col",
+          className: "px-4 py-3 text-left text-xs",
+          style: { width: e.columnDef.size },
+          children: /* @__PURE__ */ a("span", { className: "flex items-center gap-2 w-full", children: [
+            u(e.columnDef.header, h()),
+            e.getCanSort() && /* @__PURE__ */ a(
+              "div",
+              {
+                className: o(
+                  "flex flex-col text-slate-400 justify-center items-center gap-1",
+                  n
+                ),
+                role: "presentation",
+                children: [
+                  /* @__PURE__ */ s(
+                    b,
+                    {
+                      className: o(
+                        "w-2 h-2 cursor-pointer",
+                        {
+                          "text-blue-600": e.getIsSorted() === "asc"
+                        },
+                        l
+                      ),
+                      onClick: () => d(e)
+                    }
+                  ),
+                  /* @__PURE__ */ s(
+                    g,
+                    {
+                      className: o(
+                        "w-2 h-2 cursor-pointer",
+                        {
+                          "text-blue-600": e.getIsSorted() === "desc"
+                        },
+                        l
+                      ),
+                      onClick: () => x(e)
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        },
+        m
+      )) }, t))
+    }
+  );
+};
+export {
+  y as Header
+};

package/dist/components/VirtualizedTable/components/Pagination/Pagination.js

@@ -0,0 +1,45 @@
+import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { DotPaginate as d } from "../DotPaginate/DotPaginate.js";
+import { DropdownPaginate as p } from "../DropdownPaginate/DropdownPaginate.js";
+import { FormPaginate as f } from "../FormPaginate/FormPaginate.js";
+import { cn as x } from "../../../../utils/index.js";
+import { useTableContext as u } from "../../contexts/table.hook.js";
+import { DEFAULT_PAGE_SIZE as g } from "../../constants/pagination.js";
+const F = ({
+  showTotalItems: a = !0,
+  showDropdownPagination: i = !0,
+  showDotPagination: n = !0,
+  showFormPagination: s = !0,
+  pageSizes: l,
+  classNamePagination: o
+}) => {
+  const { totalItems: r = -1 / 0, tableFetching: m } = u();
+  return r <= g || m ? null : /* @__PURE__ */ t(c, { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: x(
+          "bg-slate-50 border border-y-transparent border-x-slate-100 text-slate-500 text-xs not-italic py-2 px-6 rounded-b-lg shadow",
+          o
+        ),
+        children: /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ t("div", { className: "flex items-center gap-6", children: [
+            r && a ? /* @__PURE__ */ t("span", { className: "text-slate-800", children: [
+              r,
+              " Results"
+            ] }) : null,
+            i && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e(p, { pageSizes: l }) })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "flex items-center gap-8", children: [
+            n && /* @__PURE__ */ e(d, {}),
+            s && /* @__PURE__ */ e(f, {})
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "w-full min-h-[150px]" })
+  ] });
+};
+export {
+  F as Pagination
+};