@ztwoint/z-ui 0.1.107 → 0.1.109

package/dist/components/dynamic-table/z2-table.js

@@ -0,0 +1,408 @@
+import { jsxs as p, jsx as n, Fragment as z } from "react/jsx-runtime";
+import { Fragment as P } from "react";
+import { Z2Checkbox as R } from "../checkbox/checkbox.js";
+import { useZ2Table as g } from "./z2-table-context.js";
+import { flexRender as w } from "@tanstack/react-table";
+import { cva as N } from "class-variance-authority";
+import { cn as m } from "../../lib/utils.js";
+const B = N("", {
+  variants: {
+    size: {
+      dense: "p-2 h-8",
+      default: "p-3"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+}), S = N("", {
+  variants: {
+    size: {
+      dense: "p-2",
+      default: "px-3 py-2.5"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+function v(l) {
+  const e = l.getIsPinned();
+  return {
+    left: e === "left" ? `${l.getStart("left")}px` : void 0,
+    right: e === "right" ? `${l.getAfter("right")}px` : void 0,
+    position: e ? "sticky" : "relative",
+    width: l.getSize(),
+    zIndex: e ? 1 : 0
+  };
+}
+function I({ children: l }) {
+  var t, r, a;
+  const { props: e } = g();
+  return /* @__PURE__ */ n(
+    "table",
+    {
+      "data-slot": "data-grid-table",
+      className: m(
+        "w-full align-middle text-left rtl:text-right text-neutral-secondary",
+        !((t = e.tableLayout) != null && t.columnsDraggable) && "border-separate border-spacing-0",
+        ((r = e.tableLayout) == null ? void 0 : r.width) === "fixed" ? "table-fixed" : "table-auto",
+        (a = e.tableClassNames) == null ? void 0 : a.base
+      ),
+      children: l
+    }
+  );
+}
+function T({ children: l }) {
+  var t, r, a;
+  const { props: e } = g();
+  return /* @__PURE__ */ n(
+    "thead",
+    {
+      className: m(
+        "",
+        (t = e.tableClassNames) == null ? void 0 : t.header,
+        ((r = e.tableLayout) == null ? void 0 : r.headerSticky) && ((a = e.tableClassNames) == null ? void 0 : a.headerSticky)
+      ),
+      children: l
+    }
+  );
+}
+function Z({
+  children: l,
+  headerGroup: e
+}) {
+  var r, a, o, d, i;
+  const { props: t } = g();
+  return /* @__PURE__ */ n(
+    "tr",
+    {
+      className: m(
+        "bg-transparent leading-none-medium-sm tracking-wider rounded-xl",
+        ((r = t.tableLayout) == null ? void 0 : r.headerBorder) && "[&>th]:border-b border-stroke-solid-light",
+        ((a = t.tableLayout) == null ? void 0 : a.cellBorder) && "[&_>:last-child]:border-e-0",
+        ((o = t.tableLayout) == null ? void 0 : o.stripped) && "bg-transparent",
+        ((d = t.tableLayout) == null ? void 0 : d.headerBackground) !== !1 && "bg-background-neutral-medium",
+        (i = t.tableClassNames) == null ? void 0 : i.headerRow
+      ),
+      children: l
+    },
+    e.id
+  );
+}
+function D({
+  children: l,
+  header: e,
+  dndRef: t,
+  dndStyle: r
+}) {
+  var c, b, h, f, y, C, x, k;
+  const { props: a } = g(), { column: o } = e, d = o.getIsPinned(), i = d === "left" && o.getIsLastColumn("left"), s = d === "right" && o.getIsFirstColumn("right"), u = B({
+    size: (c = a.tableLayout) != null && c.dense ? "dense" : "default"
+  });
+  return /* @__PURE__ */ n(
+    "th",
+    {
+      ref: t,
+      style: {
+        ...((b = a.tableLayout) == null ? void 0 : b.width) === "fixed" && {
+          width: `${e.getSize()}px`
+        },
+        ...((h = a.tableLayout) == null ? void 0 : h.columnsPinnable) && o.getCanPin() && v(o),
+        ...r || null
+      },
+      "data-pinned": d || void 0,
+      "data-last-col": i ? "left" : s ? "right" : void 0,
+      className: m(
+        "relative h-10 text-left rtl:text-right align-middle [&:has([role=checkbox])]:pe-0 border-stroke-solid-light leading-none-medium-sm dark:text-inverted-secondary",
+        u,
+        ((f = a.tableLayout) == null ? void 0 : f.cellBorder) && "border-e",
+        ((y = a.tableLayout) == null ? void 0 : y.columnsResizable) && o.getCanResize() && "truncate",
+        ((C = a.tableLayout) == null ? void 0 : C.columnsPinnable) && o.getCanPin() && "[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs",
+        (x = e.column.columnDef.meta) == null ? void 0 : x.headerClassName,
+        o.getIndex() === 0 || o.getIndex() === e.headerGroup.headers.length - 1 ? (k = a.tableClassNames) == null ? void 0 : k.edgeCell : ""
+      ),
+      children: l
+    },
+    e.id
+  );
+}
+function _({ header: l }) {
+  const { column: e } = l;
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      onDoubleClick: () => e.resetSize(),
+      onMouseDown: l.getResizeHandler(),
+      onTouchStart: l.getResizeHandler(),
+      className: "absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -end-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:-translate-x-px"
+    }
+  );
+}
+function A() {
+  return /* @__PURE__ */ n("tbody", { "aria-hidden": "true", className: "h-2" });
+}
+function V({ children: l }) {
+  var t, r;
+  const { props: e } = g();
+  return /* @__PURE__ */ n(
+    "tbody",
+    {
+      className: m(
+        "[&_tr:last-child]:border-0",
+        ((t = e.tableLayout) == null ? void 0 : t.rowRounded) && "[&_td:first-child]:rounded-s-lg [&_td:last-child]:rounded-e-lg",
+        (r = e.tableClassNames) == null ? void 0 : r.body
+      ),
+      children: l
+    }
+  );
+}
+function F({ children: l }) {
+  var r, a, o, d, i;
+  const { table: e, props: t } = g();
+  return /* @__PURE__ */ n(
+    "tr",
+    {
+      className: m(
+        "hover:bg-background-neutral-medium data-[state=selected]:bg-muted/50 border-stroke-solid-light",
+        t.onRowClick && "cursor-pointer",
+        !((r = t.tableLayout) != null && r.stripped) && ((a = t.tableLayout) == null ? void 0 : a.rowBorder) && "[&:not(:last-child)>td]:border-b [&:not(:last-child)>td]:border-stroke-solid-light",
+        ((o = t.tableLayout) == null ? void 0 : o.cellBorder) && "[&_>:last-child]:border-e-0",
+        ((d = t.tableLayout) == null ? void 0 : d.stripped) && "odd:bg-background-neutral-medium hover:bg-transparent odd:hover:bg-background-neutral-medium",
+        e.options.enableRowSelection && "[&_>:first-child]:relative",
+        (i = t.tableClassNames) == null ? void 0 : i.bodyRow
+      ),
+      children: l
+    }
+  );
+}
+function H({
+  children: l,
+  column: e
+}) {
+  var o, d, i, s, u, c, b;
+  const { props: t, table: r } = g(), a = S({
+    size: (o = t.tableLayout) != null && o.dense ? "dense" : "default"
+  });
+  return /* @__PURE__ */ n(
+    "td",
+    {
+      style: {
+        ...((d = t.tableLayout) == null ? void 0 : d.width) === "fixed" && {
+          width: `${e.getSize()}px`
+        }
+      },
+      className: m(
+        "align-middle",
+        a,
+        ((i = t.tableLayout) == null ? void 0 : i.cellBorder) && "border-e border-stroke-solid-light",
+        ((s = t.tableLayout) == null ? void 0 : s.columnsResizable) && e.getCanResize() && "truncate",
+        (u = e.columnDef.meta) == null ? void 0 : u.cellClassName,
+        ((c = t.tableLayout) == null ? void 0 : c.columnsPinnable) && e.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-stroke-solid-light data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"',
+        e.getIndex() === 0 || e.getIndex() === r.getVisibleFlatColumns().length - 1 ? (b = t.tableClassNames) == null ? void 0 : b.edgeCell : ""
+      ),
+      children: l
+    }
+  );
+}
+function M({
+  children: l,
+  row: e,
+  dndRef: t,
+  dndStyle: r
+}) {
+  var d, i, s, u, c;
+  const { props: a, table: o } = g();
+  return /* @__PURE__ */ n(
+    "tr",
+    {
+      ref: t,
+      style: { ...r || null },
+      "data-state": o.options.enableRowSelection && e.getIsSelected() ? "selected" : void 0,
+      onClick: () => a.onRowClick && a.onRowClick(e.original),
+      className: m(
+        "hover:bg-background-neutral-medium data-[state=selected]:bg-muted/50 border-stroke-solid-light",
+        a.onRowClick && "cursor-pointer",
+        !((d = a.tableLayout) != null && d.stripped) && ((i = a.tableLayout) == null ? void 0 : i.rowBorder) && "border-b [&:not(:last-child)>td]:border-b",
+        ((s = a.tableLayout) == null ? void 0 : s.cellBorder) && "[&_>:last-child]:border-e-0",
+        ((u = a.tableLayout) == null ? void 0 : u.stripped) && "odd:bg-background-neutral-medium hover:bg-transparent odd:hover:bg-background-neutral-medium",
+        o.options.enableRowSelection && "[&_>:first-child]:relative",
+        (c = a.tableClassNames) == null ? void 0 : c.bodyRow
+      ),
+      children: l
+    }
+  );
+}
+function $({ row: l }) {
+  var a, o, d, i, s, u;
+  const { props: e, table: t } = g();
+  return ((o = (a = t.getAllColumns().find((c) => {
+    var b;
+    return (b = c.columnDef.meta) == null ? void 0 : b.expandedContent;
+  })) == null ? void 0 : a.columnDef.meta) == null ? void 0 : o.expandedContent) ? /* @__PURE__ */ n(
+    "tr",
+    {
+      className: m(
+        ((d = e.tableLayout) == null ? void 0 : d.rowBorder) && "[&:not(:last-child)>td]:border-b [&:not(:last-child)>td]:border-stroke-solid-light"
+      ),
+      children: /* @__PURE__ */ n("td", { colSpan: l.getVisibleCells().length, children: (u = (s = (i = t.getAllColumns().find((c) => {
+        var b;
+        return (b = c.columnDef.meta) == null ? void 0 : b.expandedContent;
+      })) == null ? void 0 : i.columnDef.meta) == null ? void 0 : s.expandedContent) == null ? void 0 : u.call(s, l.original) })
+    }
+  ) : null;
+}
+function j({
+  children: l,
+  cell: e,
+  dndRef: t,
+  dndStyle: r
+}) {
+  var b, h, f, y, C, x, k, L;
+  const { props: a } = g(), { column: o, row: d } = e, i = o.getIsPinned(), s = i === "left" && o.getIsLastColumn("left"), u = i === "right" && o.getIsFirstColumn("right"), c = S({
+    size: (b = a.tableLayout) != null && b.dense ? "dense" : "default"
+  });
+  return /* @__PURE__ */ n(
+    "td",
+    {
+      ref: t,
+      ...(h = a.tableLayout) != null && h.columnsDraggable && !i ? { cell: e } : {},
+      style: {
+        ...((f = a.tableLayout) == null ? void 0 : f.columnsPinnable) && o.getCanPin() && v(o),
+        ...r || null
+      },
+      "data-pinned": i || void 0,
+      "data-last-col": s ? "left" : u ? "right" : void 0,
+      className: m(
+        "align-middle border-stroke-solid-light leading-none-medium-sm text-neutral-primary dark:text-inverted-primary",
+        c,
+        ((y = a.tableLayout) == null ? void 0 : y.cellBorder) && "border-e border-stroke-solid-light",
+        ((C = a.tableLayout) == null ? void 0 : C.columnsResizable) && o.getCanResize() && "truncate",
+        (x = e.column.columnDef.meta) == null ? void 0 : x.cellClassName,
+        ((k = a.tableLayout) == null ? void 0 : k.columnsPinnable) && o.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"',
+        o.getIndex() === 0 || o.getIndex() === d.getVisibleCells().length - 1 ? (L = a.tableClassNames) == null ? void 0 : L.edgeCell : ""
+      ),
+      children: l
+    },
+    e.id
+  );
+}
+function E() {
+  const { table: l, props: e } = g(), t = l.getAllColumns().length;
+  return /* @__PURE__ */ n("tr", { children: /* @__PURE__ */ n("td", { colSpan: t, className: "text-center text-muted-foreground py-6", children: e.emptyMessage || "No data available" }) });
+}
+function G() {
+  const { table: l, props: e } = g(), t = l.getAllColumns().length;
+  return /* @__PURE__ */ n("tr", { children: /* @__PURE__ */ n("td", { colSpan: t, className: "text-center text-muted-foreground py-6", children: /* @__PURE__ */ p("div", { className: "text-muted-foreground bg-card  flex items-center gap-2 px-4 py-2 font-medium leading-none text-sm", children: [
+    /* @__PURE__ */ p(
+      "svg",
+      {
+        className: "animate-spin -ml-1 h-5 w-5 text-muted-foreground",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        children: [
+          /* @__PURE__ */ n(
+            "circle",
+            {
+              className: "opacity-25",
+              cx: "12",
+              cy: "12",
+              r: "10",
+              stroke: "currentColor",
+              strokeWidth: "3"
+            }
+          ),
+          /* @__PURE__ */ n(
+            "path",
+            {
+              className: "opacity-75",
+              fill: "currentColor",
+              d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            }
+          )
+        ]
+      }
+    ),
+    e.loadingMessage || "Loading..."
+  ] }) }) });
+}
+function X({
+  row: l
+  //   size,
+}) {
+  return /* @__PURE__ */ p(z, { children: [
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: m(
+          "hidden absolute top-0 bottom-0 start-0 w-[2px] bg-primary",
+          l.getIsSelected() && "block"
+        )
+      }
+    ),
+    /* @__PURE__ */ n(
+      R,
+      {
+        checked: l.getIsSelected(),
+        onCheckedChange: (e) => l.toggleSelected(!!e),
+        "aria-label": "Select row",
+        className: "align-[inherit]"
+      }
+    )
+  ] });
+}
+function Y(l) {
+  const { table: e, recordCount: t, isLoading: r } = g();
+  return /* @__PURE__ */ n(
+    R,
+    {
+      checked: e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected() && "indeterminate",
+      disabled: r || t === 0,
+      onCheckedChange: (a) => e.toggleAllPageRowsSelected(!!a),
+      "aria-label": "Select all",
+      className: "align-[inherit]"
+    }
+  );
+}
+function ee() {
+  var a, o;
+  const { table: l, isLoading: e, props: t } = g(), r = l.getState().pagination;
+  return /* @__PURE__ */ p(I, { children: [
+    /* @__PURE__ */ n(T, { children: l.getHeaderGroups().map((d, i) => /* @__PURE__ */ n(Z, { headerGroup: d, children: d.headers.map((s, u) => {
+      var b;
+      const { column: c } = s;
+      return /* @__PURE__ */ p(D, { header: s, children: [
+        s.isPlaceholder ? null : w(s.column.columnDef.header, s.getContext()),
+        ((b = t.tableLayout) == null ? void 0 : b.columnsResizable) && c.getCanResize() && /* @__PURE__ */ n(_, { header: s })
+      ] }, u);
+    }) }, i)) }),
+    (((a = t.tableLayout) == null ? void 0 : a.stripped) || !((o = t.tableLayout) != null && o.rowBorder)) && /* @__PURE__ */ n(A, {}),
+    /* @__PURE__ */ n(V, { children: e && (r != null && r.pageSize) ? t.loadingMode === "skeleton" ? Array.from({ length: r.pageSize }).map((d, i) => /* @__PURE__ */ n(F, { children: l.getVisibleFlatColumns().map((s, u) => {
+      var c;
+      return /* @__PURE__ */ n(H, { column: s, children: (c = s.columnDef.meta) == null ? void 0 : c.skeleton }, u);
+    }) }, i)) : /* @__PURE__ */ n(G, {}) : l.getRowModel().rows.length ? l.getRowModel().rows.map((d, i) => /* @__PURE__ */ p(P, { children: [
+      /* @__PURE__ */ n(M, { row: d, children: d.getVisibleCells().map((s, u) => /* @__PURE__ */ n(j, { cell: s, children: w(s.column.columnDef.cell, s.getContext()) }, u)) }, i),
+      d.getIsExpanded() && /* @__PURE__ */ n($, { row: d })
+    ] }, d.id)) : /* @__PURE__ */ n(E, {}) })
+  ] });
+}
+export {
+  ee as Z2Table,
+  I as Z2TableBase,
+  V as Z2TableBody,
+  M as Z2TableBodyRow,
+  j as Z2TableBodyRowCell,
+  $ as Z2TableBodyRowExpandded,
+  F as Z2TableBodyRowSkeleton,
+  H as Z2TableBodyRowSkeletonCell,
+  E as Z2TableEmpty,
+  T as Z2TableHead,
+  Z as Z2TableHeadRow,
+  D as Z2TableHeadRowCell,
+  _ as Z2TableHeadRowCellResize,
+  G as Z2TableLoader,
+  X as Z2TableRowSelect,
+  Y as Z2TableRowSelectAll,
+  A as Z2TableRowSpacer
+};

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,16 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { cn as n } from "../../lib/utils.js";
+function i({ className: t, ...e }) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: n("bg-accent animate-pulse rounded-md", t),
+      ...e
+    }
+  );
+}
+export {
+  i as Z2Skeleton
+};

package/dist/components/table/components/cell/avatar-cell.js

@@ -42,7 +42,9 @@ import "@radix-ui/react-slot";
 import "@radix-ui/react-radio-group";
 import "../../../segmented-control/item.js";
 import "@radix-ui/react-popover";
-const it = ({
+import "../../../dynamic-table/z2-table.js";
+import "../../../dynamic-table/z2-table-context.js";
+const mt = ({
   avatar: m,
   value: a,
   rightIcon: o,
@@ -80,5 +82,5 @@ const it = ({
   }
 );
 export {
-  it as AvatarCell
+  mt as AvatarCell
 };

package/dist/components/table/table-provider.js

@@ -47,6 +47,8 @@ import "@radix-ui/react-slot";
 import "@radix-ui/react-radio-group";
 import "../segmented-control/item.js";
 import "@radix-ui/react-popover";
+import "../dynamic-table/z2-table.js";
+import "../dynamic-table/z2-table-context.js";
 import { TableHeaderWrapper as T } from "./components/table-header-wrapper.js";
 import { TableHeaderContent as b } from "./components/table-header-content.js";
 import { TableFooter as s } from "./components/table-footer.js";

package/dist/components/table-card/table-card.js

@@ -31,7 +31,7 @@ import "../stepper/stepper.js";
 import "../stepper-item/stepper-item.js";
 import "@radix-ui/react-tabs";
 import "../tooltip/tooltip.js";
-import { Filter as p } from "../table-filter/index.js";
+import { Filter as x } from "../table-filter/index.js";
 import "../badge/badge.js";
 import "../avatar/avatar.js";
 import "../text-preset/text-preset.js";
@@ -42,8 +42,10 @@ import "@radix-ui/react-slot";
 import "@radix-ui/react-radio-group";
 import "../segmented-control/item.js";
 import "@radix-ui/react-popover";
+import "../dynamic-table/z2-table.js";
+import "../dynamic-table/z2-table-context.js";
 import "../table/table.context.js";
-const be = ({
+const He = ({
   dataSource: w,
   schema: B,
   loading: b,
@@ -67,17 +69,17 @@ const be = ({
   pagination: o,
   paginationInfo: i,
   paginationQuickJumper: a,
-  error: x = !1,
+  error: p = !1,
   dataSourceError: _ = !1
 }) => {
   var F;
-  if (x)
+  if (p)
     return /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center h-64 bg-background-error-subtle rounded-lg text-text-warning-secondary", children: /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ e(S, { className: "mt-1.5" }),
       /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ e("div", { className: "text-text-error-primary text-lg font-medium", children: "Error loading data" }),
         /* @__PURE__ */ e("div", { className: "text-sm", children: "Please try again later" }),
-        typeof x == "string" && /* @__PURE__ */ e("div", { className: "text-text-warning-secondary text-sm", children: x })
+        typeof p == "string" && /* @__PURE__ */ e("div", { className: "text-text-warning-secondary text-sm", children: p })
       ] })
     ] }) });
   const C = a && a.totalPage && a.totalPage >= 2, N = o && o.totalPage && o.totalPage >= 2 || !!i || C, v = m || t || h || u, R = typeof (t == null ? void 0 : t.showFilterButton) > "u" ? !0 : t == null ? void 0 : t.showFilterButton;
@@ -108,7 +110,7 @@ const be = ({
                 }
               ),
               t && /* @__PURE__ */ s(
-                p,
+                x,
                 {
                   filterSchema: t.filterSchema,
                   filter: {
@@ -119,8 +121,8 @@ const be = ({
                     loading: t.loading
                   },
                   children: [
-                    R && /* @__PURE__ */ e(p.FilterButton, {}),
-                    (F = t == null ? void 0 : t.quickFilters) == null ? void 0 : F.map((f) => /* @__PURE__ */ e(p.FilterColumnButton, { filterName: f }, f))
+                    R && /* @__PURE__ */ e(x.FilterButton, {}),
+                    (F = t == null ? void 0 : t.quickFilters) == null ? void 0 : F.map((f) => /* @__PURE__ */ e(x.FilterColumnButton, { filterName: f }, f))
                   ]
                 }
               )
@@ -199,5 +201,5 @@ const be = ({
   ] });
 };
 export {
-  be as default
+  He as default
 };