@konstructio/ui 0.1.2-alpha.4 → 0.1.2-alpha.5

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,73 @@
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { d as M } from "../../../../debounce-BFejQm9P.js";
+import { useRef as j, useCallback as u, useMemo as f } from "react";
+import { Filter as n } from "../../../Filter/Filter.js";
+import { Input as v } from "../../../Input/Input.js";
+import { useTableContext as O } from "../../contexts/table.hook.js";
+const B = ({
+  placeholder: h,
+  multiSelectFilter: d,
+  showFilterInput: p = !0
+}) => {
+  const r = j(null), {
+    termOfSearch: o,
+    multiselectSelected: c,
+    onChangeTermOfSearch: t,
+    onSelectMultiselect: i
+  } = O(), g = u(
+    (e, l) => i(
+      e,
+      l.map((s) => s.id)
+    ),
+    [i]
+  ), x = u(() => {
+    t(""), r.current && (r.current.value = "");
+  }, [t]), C = f(
+    () => M((e) => {
+      t(e.target.value);
+    }, 500),
+    [t]
+  ), S = f(
+    () => !!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: [
+    p && /* @__PURE__ */ a(
+      v,
+      {
+        ref: r,
+        placeholder: h,
+        isSearch: !0,
+        autoComplete: "false",
+        className: "w-72",
+        inputMode: "search",
+        onChange: C
+      }
+    ),
+    /* @__PURE__ */ m(n, { children: [
+      d?.map(
+        ({ key: e, label: l, position: s = "right", options: b }) => /* @__PURE__ */ a(
+          n.BadgeMultiSelect,
+          {
+            label: l,
+            position: s,
+            options: b,
+            onApply: (F) => g(e, F)
+          },
+          l
+        )
+      ),
+      /* @__PURE__ */ a(
+        n.ResetButton,
+        {
+          className: "text-slate-700 hover:text-slate-700 disabled:text-slate-700/45 select-none",
+          disabled: !S,
+          onClick: x
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  B 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
+};