@ztwoint/z-ui 0.1.45 → 0.1.46

package/dist/components/table/components/table-filter/table-filter.context.js

@@ -0,0 +1,13 @@
+import * as e from "react";
+const o = e.createContext(
+  void 0
+), r = () => {
+  const t = e.useContext(o);
+  if (t === void 0)
+    throw new Error("useTableFilterContext must be used within a TableFilterProvider");
+  return t;
+};
+export {
+  o as TableFilterContext,
+  r as useTableFilterContext
+};

package/dist/components/table/components/table-filter/table-filter.hook.d.ts

@@ -2,16 +2,15 @@ import { default as React } from 'react';
 import { TableFilterProps } from './table-filter.type';
 import { FilterRule } from '../../table.type';
 declare const useTableFilter: ({ filter, schema }: TableFilterProps) => {
-    isOpen: boolean;
     selectedColumn: string | null;
     setSelectedColumn: React.Dispatch<React.SetStateAction<string | null>>;
     getFilterForColumn: (columnKey: string) => FilterRule | undefined;
     hasFilterForColumn: (columnKey: string) => boolean;
+    hasAppliedFilterForColumn: (columnKey: string) => boolean;
     updateColumnFilter: (columnKey: string, condition?: string, value?: string | string[]) => void;
     clearAllFilters: () => void;
     applyFilters: () => void;
     hasActiveFilters: boolean;
-    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
     tempFilters: FilterRule[];
     filterableFields: import('../../table.type').TableSchemaColumn[];
 };

package/dist/components/table/components/table-filter/table-filter.hook.js

@@ -1,54 +1,56 @@
-import a from "react";
-const b = ({ filter: s, schema: p }) => {
-  const [m, o] = a.useState(!1), [i, c] = a.useState(null), [l, n] = a.useState(s.value), u = p.filter((t) => t.filterable !== !1);
-  a.useEffect(() => {
-    !i && u.length > 0 && c(u[0].key);
-  }, [i, u]);
-  const d = (t) => l.find((e) => e.field === t), g = (t) => {
-    const e = d(t);
+import u from "react";
+const S = ({ filter: l, schema: v }) => {
+  const [i, f] = u.useState(null), [r, n] = u.useState(l.value), a = v.filter((t) => t.filterable !== !1);
+  u.useEffect(() => {
+    !i && a.length > 0 && f(a[0].key);
+  }, [i, a]);
+  const c = (t) => r.find((e) => e.field === t), p = (t) => {
+    const e = c(t);
     return e ? Array.isArray(e.value) ? e.value.length > 0 : e.value !== "" : !1;
-  }, h = (t, e, f) => {
-    const F = l.findIndex((r) => r.field === t);
-    if (F >= 0) {
-      const r = l.map(
-        (v, x) => x === F ? {
-          ...v,
+  }, m = (t) => l.value.find((e) => e.field === t), A = (t) => {
+    const e = m(t);
+    return e ? Array.isArray(e.value) ? e.value.length > 0 : e.value !== "" : !1;
+  }, g = (t, e, o) => {
+    const d = r.findIndex((s) => s.field === t);
+    if (d >= 0) {
+      const s = r.map(
+        (F, x) => x === d ? {
+          ...F,
           ...e !== void 0 ? { condition: e } : {},
-          ...f !== void 0 ? { value: f } : {}
-        } : v
+          ...o !== void 0 ? { value: o } : {}
+        } : F
       );
-      n(r);
+      n(s);
     } else {
-      const r = {
+      const s = {
         field: t,
         ...e ? { condition: e } : {},
-        value: f || ""
+        value: o || ""
       };
-      n([...l, r]);
+      n([...r, s]);
     }
-  }, A = () => {
+  }, h = () => {
     n([]);
   }, C = () => {
-    const t = l.filter((e) => Array.isArray(e.value) ? e.value.length > 0 : e.value !== "");
-    s.onChange(t), o(!1);
-  }, y = s.value.length > 0;
-  return a.useEffect(() => {
-    n(s.value);
-  }, [s.value]), {
-    isOpen: m,
+    const t = r.filter((e) => Array.isArray(e.value) ? e.value.length > 0 : e.value !== "");
+    l.onChange(t);
+  }, y = l.value.length > 0;
+  return u.useEffect(() => {
+    n(l.value);
+  }, [l.value]), {
     selectedColumn: i,
-    setSelectedColumn: c,
-    getFilterForColumn: d,
-    hasFilterForColumn: g,
-    updateColumnFilter: h,
-    clearAllFilters: A,
+    setSelectedColumn: f,
+    getFilterForColumn: c,
+    hasFilterForColumn: p,
+    hasAppliedFilterForColumn: A,
+    updateColumnFilter: g,
+    clearAllFilters: h,
     applyFilters: C,
     hasActiveFilters: y,
-    setIsOpen: o,
-    tempFilters: l,
-    filterableFields: u
+    tempFilters: r,
+    filterableFields: a
   };
 };
 export {
-  b as default
+  S as default
 };

package/dist/components/table/index.d.ts

@@ -1,9 +1,8 @@
 export { Table as default, Table, TableProvider } from './table-provider';
 export { TableBody } from './table';
 export type { TableProps, TableSchema, TableSchemaColumn, CellType, CellValue, CellRenderer, CellRendererProps, FilterRule, FilterCondition, FilterOption, TableFilter as TableFilterType, TablePaginationConfig, SortDirection, SortColumn, TableSort, } from './table.type';
-export { getNestedValue, extractCellValue } from './table.utils';
+export { extractCellValue } from './table.utils';
 export { DEFAULT_EMPTY_MESSAGE, TABLE_CSS_CLASSES } from './table.const';
 export { TableContext, useTableContext } from './table.context';
 export { TableCell, TableHeader, TableRow, TableEmptyState, TableLoadingState, TablePagination, TextCell, NumberCell, BooleanCell, TableHeaderWrapper, TableHeaderContent, TableFooter, TableFooterContent, } from './components';
-export { TableFilter } from './components/table-filter';
 export { PaginationInfo, PaginationQuickJumper } from './components/pagination/components';

package/dist/components/table/table-provider.d.ts

@@ -1,6 +1,6 @@
 import { TableProps } from './table.type';
 import { TableBody } from './table';
-import { TableFilter } from './components/table-filter';
+import { TableFilter } from './components/table-filter/table-filter-provider';
 import { TableSearch } from './components/table-search';
 import { Pagination } from './components/pagination';
 import { TableHeaderWrapper, TableHeaderContent, TableFooter, TableFooterContent } from './components';

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

@@ -2,17 +2,17 @@ import { jsx as a } from "react/jsx-runtime";
 import * as n from "react";
 import { TableContext as m } from "./table.context.js";
 import { TableBody as p } from "./table.js";
-import { TableFilter as f } from "./components/table-filter/table-filter.js";
+import { TableFilter as f } from "./components/table-filter/table-filter-provider.js";
 import { TableSearch as l } from "./components/table-search/table-search.js";
 import { Pagination as s } from "./components/pagination/pagination.js";
+import { PaginationInfo as T } from "./components/pagination/components/pagination-info.js";
+import { PaginationQuickJumper as b } from "./components/pagination/components/pagination-quick-jumper.js";
 import "clsx";
 import "tailwind-merge";
-import { TableHeaderWrapper as T } from "./components/table-header-wrapper.js";
-import { TableHeaderContent as b } from "./components/table-header-content.js";
-import { TableFooter as c } from "./components/table-footer.js";
-import { TableFooterContent as d } from "./components/table-footer-content.js";
-import { PaginationInfo as u } from "./components/pagination/components/pagination-info.js";
-import { PaginationQuickJumper as g } from "./components/pagination/components/pagination-quick-jumper.js";
+import { TableHeaderWrapper as c } from "./components/table-header-wrapper.js";
+import { TableHeaderContent as d } from "./components/table-header-content.js";
+import { TableFooter as u } from "./components/table-footer.js";
+import { TableFooterContent as g } from "./components/table-footer-content.js";
 const t = ({
   children: e,
   pagination: C,
@@ -33,13 +33,13 @@ o.Body = p;
 o.Filter = f;
 o.Search = l;
 o.Pagination = s;
-o.PaginationInfo = u;
-o.PaginationQuickJumper = g;
+o.PaginationInfo = T;
+o.PaginationQuickJumper = b;
 o.Provider = t;
-o.Header = T;
-o.HeaderContent = b;
-o.Footer = c;
-o.FooterContent = d;
+o.Header = c;
+o.HeaderContent = d;
+o.Footer = u;
+o.FooterContent = g;
 export {
   o as Table,
   t as TableProvider,

package/dist/components/table/table.type.d.ts

@@ -17,6 +17,7 @@ export type FilterRule = {
 export type FilterOption = {
     label: string;
     value: string;
+    total?: number;
 };
 export type TableFilter = {
     value: FilterRule[];
@@ -47,6 +48,7 @@ export type TableSort = {
 };
 export type TableSchemaColumn = {
     key: string;
+    valueGetter?: (record: Record<string, any>) => string | number | boolean | null | undefined;
     title: string;
     cellType: CellType;
     cellRenderer?: CellRenderer;

package/dist/components/table/table.utils.d.ts

@@ -1,3 +1,2 @@
 import { CellValue, TableSchemaColumn } from './table.type';
-export declare const getNestedValue: (object: Record<string, unknown>, path: string) => CellValue;
 export declare const extractCellValue: (record: Record<string, unknown>, column: TableSchemaColumn) => CellValue;

package/dist/components/table/table.utils.js

@@ -1,5 +1,7 @@
-const s = (t, l) => l.split(".").reduce((e, o) => e && typeof e == "object" && o in e ? e[o] : void 0, t), u = (t, l) => s(t, l.key);
+const a = (t, e) => {
+  var r;
+  return e.valueGetter ? e.valueGetter(t) : (r = t[e.key]) == null ? void 0 : r.toString();
+};
 export {
-  u as extractCellValue,
-  s as getNestedValue
+  a as extractCellValue
 };

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

@@ -1,132 +1,137 @@
-import { jsx as t, jsxs as h } from "react/jsx-runtime";
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
 import { Table as e } from "../table/table-provider.js";
 import "react";
-import { cn as m } from "../../lib/utils.js";
+import { cn as P } from "../../lib/utils.js";
 import "../table/table.context.js";
 import "../button/button.js";
 import "../input/input.js";
-const E = ({
-  dataSource: v,
+const M = ({
+  dataSource: w,
   schema: C,
-  loading: F,
-  emptyMessage: T,
-  className: _,
-  rounded: d = !1,
-  bordered: c = !1,
-  showHeader: u = !0,
+  loading: T,
+  emptyMessage: _,
+  className: k,
+  rounded: n = !0,
+  bordered: d = !0,
+  showHeader: x = !0,
   headerClassName: R,
-  search: o,
-  filter: P,
-  headerLeftContent: n,
-  headerActions: x,
+  search: a,
+  filter: t,
+  headerLeftContent: m,
+  headerActions: u,
   body: l = {
     cell: { cellHeight: "small", hasBorder: !0 },
     className: "",
     stickyHeader: !0
   },
-  showFooter: g = !0,
+  showFooter: F = !0,
   footerClassName: j,
-  pagination: r,
-  paginationInfo: a,
-  paginationQuickJumper: s
+  pagination: s,
+  paginationInfo: c,
+  paginationQuickJumper: o
 }) => {
-  const N = s && s.totalPage && s.totalPage >= 2, H = r && r.totalPage && r.totalPage >= 2 || !!a || N, f = o || P || n || x;
-  return /* @__PURE__ */ t("div", { className: m("flex flex-col overflow-hidden", _), children: /* @__PURE__ */ h(e, { dataSource: v, schema: C, loading: F, emptyMessage: T, children: [
-    u && f && /* @__PURE__ */ h(
+  var N;
+  const g = o && o.totalPage && o.totalPage >= 2, B = s && s.totalPage && s.totalPage >= 2 || !!c || g, H = a || t || m || u, q = typeof (t == null ? void 0 : t.showFilterButton) > "u" ? !0 : t == null ? void 0 : t.showFilterButton;
+  return /* @__PURE__ */ r("div", { className: P("flex flex-col overflow-hidden", k), children: /* @__PURE__ */ h(e, { dataSource: w, schema: C, loading: T, emptyMessage: _, children: [
+    x && H && /* @__PURE__ */ h(
       e.Header,
       {
-        className: m(
+        className: P(
           "flex-shrink-0",
-          c && "border-stroke-solid-medium border-1 border-b-0",
-          d && "rounded-t-xl",
+          d && "border-stroke-solid-medium border-1 border-b-0",
+          n && "rounded-t-xl",
           R
         ),
         children: [
           /* @__PURE__ */ h(e.HeaderContent, { children: [
-            n && n,
-            o && /* @__PURE__ */ t(
+            m && m,
+            a && /* @__PURE__ */ r(
               e.Search,
               {
                 search: {
-                  value: o.value || "",
-                  onChange: o.onChange || (() => {
+                  value: a.value || "",
+                  onChange: a.onChange || (() => {
                   }),
-                  placeholder: o.placeholder
+                  placeholder: a.placeholder
                 },
-                className: o.className
+                className: a.className
               }
             ),
-            P && /* @__PURE__ */ t(
+            t && /* @__PURE__ */ h(
               e.Filter,
               {
                 schema: C,
                 filter: {
-                  value: P.value || [],
-                  onChange: P.onChange || (() => {
+                  value: t.value || [],
+                  onChange: t.onChange || (() => {
                   })
-                }
+                },
+                children: [
+                  q && /* @__PURE__ */ r(e.Filter.FilterButton, {}),
+                  (N = t == null ? void 0 : t.quickFilters) == null ? void 0 : N.map((v) => /* @__PURE__ */ r(e.Filter.FilterColumnButton, { filterName: v }, v))
+                ]
               }
             )
           ] }),
-          x && /* @__PURE__ */ t(e.HeaderContent, { children: x })
+          u && /* @__PURE__ */ r(e.HeaderContent, { children: u })
         ]
       }
     ),
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ r(
       e.Body,
       {
         cell: l == null ? void 0 : l.cell,
         sort: l == null ? void 0 : l.sort,
-        className: m(
+        className: P(
           "flex-1 min-h-0",
-          c && "border-stroke-solid-light border-b-1 border-x-1 border-t-0",
-          d && !(u && f) && "rounded-t-xl",
-          d && !(g && H) && "rounded-b-xl",
-          c && "[&_td:first-child]:border-l-0 [&_td:last-child]:border-r-0",
-          c && "[&_th:first-child]:border-l-0 [&_th:last-child]:border-r-0",
+          d && "border-stroke-solid-light border-b-1 border-x-1 border-t-0",
+          n && !(x && H) && "rounded-t-xl",
+          n && !(F && B) && "rounded-b-xl",
+          d && "[&_td:first-child]:border-l-0 [&_td:last-child]:border-r-0",
+          d && "[&_th:first-child]:border-l-0 [&_th:last-child]:border-r-0",
           l == null ? void 0 : l.className
         ),
         stickyHeader: l == null ? void 0 : l.stickyHeader
       }
     ),
-    g && H && /* @__PURE__ */ h(
+    F && B && /* @__PURE__ */ h(
       e.Footer,
       {
-        className: m(
+        className: P(
           "flex-shrink-0",
-          c && "border-stroke-solid-light border border-t-[0.5px]",
-          d && "rounded-b-xl",
+          d && "border-stroke-solid-light border border-t-[0.5px]",
+          n && "rounded-b-xl",
           j
         ),
         children: [
-          a ? /* @__PURE__ */ t(e.FooterContent, { children: /* @__PURE__ */ t(
+          c ? /* @__PURE__ */ r(e.FooterContent, { children: /* @__PURE__ */ r(
             e.PaginationInfo,
             {
-              showTotal: a.showTotal || !0,
-              totalItems: a.totalItems,
-              currentPage: a.currentPage || 1,
-              itemsPerPage: a.itemsPerPage || a.totalItems
+              showTotal: c.showTotal,
+              totalItems: c.totalItems,
+              currentPage: c.currentPage,
+              itemsPerPage: c.itemsPerPage
             }
-          ) }) : s || r ? /* @__PURE__ */ t(e.FooterContent, { children: null }) : null,
-          (s || r) && /* @__PURE__ */ h(e.FooterContent, { children: [
-            N && /* @__PURE__ */ t(
+          ) }) : o || s ? /* @__PURE__ */ r(e.FooterContent, { children: null }) : null,
+          (o || s) && /* @__PURE__ */ h(e.FooterContent, { children: [
+            g && /* @__PURE__ */ r(
               e.PaginationQuickJumper,
               {
-                currentPage: s.currentPage || 1,
-                totalPage: s.totalPage || 1,
-                onChange: s.onChange || (() => {
+                currentPage: o.currentPage,
+                totalPage: o.totalPage,
+                onChange: o.onChange || (() => {
                 }),
-                disabled: s.disabled || !1
+                disabled: o.disabled
               }
             ),
-            r && /* @__PURE__ */ t(
+            s && /* @__PURE__ */ r(
               e.Pagination,
               {
-                currentPage: r.currentPage || 1,
-                totalPage: r.totalPage || 1,
-                onChange: r.onChange || (() => {
+                currentPage: s.currentPage,
+                totalPage: s.totalPage,
+                onChange: s.onChange || (() => {
                 }),
-                totalItems: r.totalItems
+                totalItems: s.totalItems
               }
             )
           ] })
@@ -136,5 +141,5 @@ const E = ({
   ] }) });
 };
 export {
-  E as default
+  M as default
 };

package/dist/components/table-card/table-card.type.d.ts

@@ -12,7 +12,10 @@ export interface TableCardProps {
     search?: Partial<TableSearch> & {
         className?: string;
     };
-    filter?: Partial<TableFilter>;
+    filter?: Partial<TableFilter> & {
+        quickFilters?: string[];
+        showFilterButton?: boolean;
+    };
     headerLeftContent?: React.ReactNode;
     headerActions?: React.ReactNode;
     body?: {
@@ -23,12 +26,9 @@ export interface TableCardProps {
     };
     showFooter?: boolean;
     footerClassName?: string;
-    pagination?: Partial<PaginationProps>;
-    paginationInfo?: Partial<Omit<PaginationInfoProps, 'itemsPerPage' | 'totalItems'>> & {
-        itemsPerPage: number;
-        totalItems: number;
-    };
-    paginationQuickJumper?: Partial<PaginationQuickJumperProps>;
+    pagination?: PaginationProps;
+    paginationInfo?: PaginationInfoProps;
+    paginationQuickJumper?: PaginationQuickJumperProps;
     loading?: boolean;
     emptyMessage?: string;
 }