@ztwoint/z-ui 0.1.33 → 0.1.34

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

@@ -1,105 +1,119 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { jsxs as t, jsx as l } from "react/jsx-runtime";
 import { Button as s } from "../../../button/button.js";
-import N from "./table-filter.hook.js";
+import C from "./table-filter.hook.js";
 import T from "./filters/text.js";
-import z from "./filters/boolean.js";
-import w from "./filters/number.js";
-const C = ({
-  filterComponents: o = {},
-  schema: c,
-  filter: n
+import j from "./filters/boolean.js";
+import z from "./filters/number/number.js";
+import A from "./filters/checkbox.js";
+import O from "../../../assets/icons/circle-check-filled.js";
+const E = ({
+  filterComponents: n = {},
+  schema: d,
+  filter: o
 }) => {
   const {
-    addFilterRule: b,
-    applyFilters: y,
-    filterableFields: k,
-    hasActiveFilters: d,
+    selectedColumn: r,
+    setSelectedColumn: p,
+    getFilterForColumn: x,
+    hasFilterForColumn: b,
+    updateColumnFilter: f,
+    clearAllFilters: v,
+    applyFilters: k,
+    hasActiveFilters: i,
     isOpen: m,
-    removeFilterRule: F,
-    setIsOpen: p,
-    tempFilters: x,
-    updateFilterRule: u
-  } = N({ schema: c, filter: n || { value: [], onChange: () => {
+    setIsOpen: u,
+    filterableFields: y
+  } = C({ schema: d, filter: o || { value: [], onChange: () => {
   } } });
-  return n ? /* @__PURE__ */ r("div", { className: "relative", children: [
-    /* @__PURE__ */ r(
+  if (!o)
+    return null;
+  const N = () => {
+    if (!r) return null;
+    const e = d.find((c) => c.key === r), F = {
+      boolean: j,
+      text: T,
+      number: z,
+      checkbox: A
+    }, h = (n == null ? void 0 : n[(e == null ? void 0 : e.cellType) || ""]) || F[(e == null ? void 0 : e.cellType) || "text"];
+    if (!h)
+      return console.warn(
+        `No filter component found for column "${e == null ? void 0 : e.key}" with cellType "${e == null ? void 0 : e.cellType}". Provide a custom filter component or use supported types: "text", "number", "boolean", "checkbox".`
+      ), null;
+    const a = x(r), g = {
+      condition: (a == null ? void 0 : a.condition) || "",
+      value: (a == null ? void 0 : a.value) || ""
+    };
+    return /* @__PURE__ */ l("div", { className: "flex-1", children: /* @__PURE__ */ l("div", { className: "mb-4", children: /* @__PURE__ */ l("div", { className: "", children: /* @__PURE__ */ l(
+      h,
+      {
+        value: g,
+        onChange: ({ condition: c, value: w }) => f(r, c, w),
+        filterOptions: e == null ? void 0 : e.filterOptions
+      }
+    ) }) }) });
+  };
+  return /* @__PURE__ */ t("div", { className: "relative", children: [
+    /* @__PURE__ */ t(
       s,
       {
-        onClick: () => p(!m),
-        variant: d ? "filled" : "stroke",
-        shade: d ? "brand" : "neutral",
+        onClick: () => u(!m),
+        variant: i ? "filled" : "stroke",
+        shade: i ? "brand" : "neutral",
         size: "small",
         children: [
           "Filter ",
-          d && `(${n.value.length})`
+          i && `(${o.value.length})`
         ]
       }
     ),
-    m && /* @__PURE__ */ t("div", { className: "absolute top-full left-0 mt-2 min-w-96 bg-surface-neutral-default border border-stroke-solid-medium rounded-md shadow-default z-10 p-4", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
-      x.map((i, a) => {
-        const e = c.find((l) => l.key === i.field), h = {
-          boolean: z,
-          text: T,
-          number: w
-        }, v = (o == null ? void 0 : o[(e == null ? void 0 : e.cellType) || ""]) || h[(e == null ? void 0 : e.cellType) || "text"];
-        v || console.warn(
-          `No filter component found for column "${e == null ? void 0 : e.key}" with cellType "${e == null ? void 0 : e.cellType}". Provide a custom filter component or use supported types: "text", "number", "boolean".`
-        );
-        const g = v ?? h.text;
-        return /* @__PURE__ */ r("div", { className: "flex gap-2 items-center", children: [
-          /* @__PURE__ */ t(
-            "select",
-            {
-              value: i.field,
-              onChange: (l) => u(a, { field: l.target.value, condition: void 0 }),
-              className: "border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary rounded px-2 py-1 text-sm flex-1",
-              children: k.map((l) => /* @__PURE__ */ t("option", { value: l.key, children: l.title }, l.key))
-            }
-          ),
-          /* @__PURE__ */ t(
-            g,
+    m && /* @__PURE__ */ t("div", { className: "absolute top-full left-0 mt-2 min-w-[600px] bg-surface-neutral-default border border-stroke-solid-medium rounded-md shadow-default z-10", children: [
+      /* @__PURE__ */ t("div", { className: "flex min-h-[300px]", children: [
+        /* @__PURE__ */ t("div", { className: "w-48 border-r border-stroke-solid-medium", children: [
+          /* @__PURE__ */ l("div", { className: "p-3 border-b border-stroke-solid-medium", children: /* @__PURE__ */ l("h3", { className: "text-sm font-medium text-text-neutral-primary", children: "Columns" }) }),
+          /* @__PURE__ */ l("div", { className: "py-2", children: y.map((e) => /* @__PURE__ */ t(
+            "button",
             {
-              onChange: ({ condition: l, value: f }) => {
-                u(a, {
-                  ...l ? { condition: l } : {},
-                  ...f ? { value: f } : {}
-                });
-              },
-              value: { value: i.value, condition: i.condition }
+              onClick: () => p(e.key),
+              className: `w-full text-left px-3 py-2 text-sm flex items-center justify-between hover:bg-surface-neutral-hovered transition-colors ${r === e.key ? "bg-surface-brand-subtle text-text-brand-primary" : "text-text-neutral-primary"}`,
+              children: [
+                /* @__PURE__ */ l("span", { className: "truncate", children: e.title }),
+                b(e.key) && /* @__PURE__ */ l(O, { className: "w-4 h-4 text-icon-brand-primary flex-shrink-0 ml-2" })
+              ]
             },
-            a
-          ),
-          /* @__PURE__ */ t(
-            s,
-            {
-              onClick: () => F(a),
-              variant: "ghost",
-              shade: "danger",
-              size: "small",
-              className: "!px-2 !py-1",
-              children: "×"
-            }
-          )
-        ] }, a);
-      }),
-      /* @__PURE__ */ r("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ t(s, { onClick: b, variant: "stroke", shade: "neutral", size: "small", children: "+ Add" }),
-        /* @__PURE__ */ t("div", { className: "flex-1" }),
-        /* @__PURE__ */ t(
+            e.key
+          )) })
+        ] }),
+        /* @__PURE__ */ l("div", { className: "flex-1 flex flex-col", children: r ? N() : /* @__PURE__ */ l("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }) })
+      ] }),
+      /* @__PURE__ */ t("div", { className: "flex justify-between items-center p-4 border-t border-stroke-solid-medium", children: [
+        /* @__PURE__ */ l(
           s,
           {
-            onClick: () => p(!1),
-            variant: "stroke",
+            onClick: v,
+            variant: "ghost",
             shade: "neutral",
             size: "small",
-            children: "Cancel"
+            disabled: !i,
+            children: "Clear All"
           }
         ),
-        /* @__PURE__ */ t(s, { onClick: y, variant: "filled", shade: "brand", size: "small", children: "Apply" })
+        /* @__PURE__ */ t("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ l(
+            s,
+            {
+              onClick: () => u(!1),
+              variant: "stroke",
+              shade: "neutral",
+              size: "small",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ l(s, { onClick: k, variant: "filled", shade: "neutral", size: "small", children: "Apply" })
+        ] })
       ] })
-    ] }) })
-  ] }) : null;
+    ] })
+  ] });
 };
 export {
-  C as TableFilter
+  E as TableFilter
 };

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

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { TableFilter, TableSchema } from '../../table.type';
+import { TableFilter, TableSchema, FilterOption } from '../../table.type';
 export interface TableFilterProps {
     schema: TableSchema;
     filter: TableFilter;
@@ -8,11 +8,12 @@ export interface TableFilterProps {
 export type FilterComponentProps = {
     onChange: (input: {
         condition?: string;
-        value?: string;
+        value?: string | string[];
     }) => void;
     value: {
         condition?: string;
-        value: string;
+        value: string | string[];
     };
+    filterOptions?: FilterOption[];
 };
 export type FilterComponentType = FC<FilterComponentProps>;

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

@@ -1,6 +1,6 @@
 export { Table as default, Table, TableProvider } from './table-provider';
 export { TableBody } from './table';
-export type { TableProps, TableSchema, TableSchemaColumn, CellType, CellValue, CellRenderer, CellRendererProps, FilterRule, FilterCondition, TableFilter as TableFilterType, TablePaginationConfig, SortDirection, SortColumn, TableSort, } from './table.type';
+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 { DEFAULT_EMPTY_MESSAGE, TABLE_CSS_CLASSES } from './table.const';
 export { TableContext, useTableContext } from './table.context';

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

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { FilterComponentType } from './components/table-filter/table-filter.type';
-export type CellType = 'text' | 'number' | 'boolean';
+export type CellType = 'text' | 'number' | 'boolean' | 'checkbox';
 export type CellValue = string | number | boolean | null | undefined;
 export type CellRendererProps = {
     value: CellValue;
@@ -12,6 +12,10 @@ export type FilterCondition = 'contains' | 'notEqual' | 'equal' | '>' | '<' | '=
 export type FilterRule = {
     field: string;
     condition?: string;
+    value: string | string[];
+};
+export type FilterOption = {
+    label: string;
     value: string;
 };
 export type TableFilter = {
@@ -49,6 +53,7 @@ export type TableSchemaColumn = {
     filterable?: boolean;
     hideable?: boolean;
     sortable?: boolean;
+    filterOptions?: FilterOption[];
 };
 export type TableSchema = TableSchemaColumn[];
 export type TableProps = {

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

@@ -0,0 +1,105 @@
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import { Table as e } from "../table/table-provider.js";
+import "react";
+import { cn as c } from "../../lib/utils.js";
+import "../table/table.context.js";
+import "../button/button.js";
+import "../input/input.js";
+const J = ({
+  dataSource: g,
+  schema: h,
+  className: C,
+  showHeader: b = !0,
+  headerClassName: x,
+  search: m,
+  filter: f,
+  body: k = {
+    cell: { cellHeight: "small", hasBorder: !0 },
+    className: "",
+    stickyHeader: !0
+  },
+  showFooter: N = !0,
+  footerClassName: v,
+  paginationInfo: u,
+  paginationQuickJumper: P,
+  pagination: p,
+  overrides: n = {},
+  ...y
+}) => {
+  const r = m ? { ...m, ...n.search } : void 0, d = f ? { ...f, ...n.filter } : void 0, i = { ...k, ...n.body }, o = u ? { ...u, ...n.paginationInfo } : void 0, t = P ? { ...P, ...n.paginationQuickJumper } : void 0, l = p ? { ...p, ...n.pagination } : void 0;
+  return /* @__PURE__ */ a("div", { className: c("flex flex-col overflow-hidden", C), children: /* @__PURE__ */ s(e, { dataSource: g, schema: h, ...y, children: [
+    b && /* @__PURE__ */ a(e.Header, { className: c("flex-shrink-0", x), children: /* @__PURE__ */ s(e.HeaderContent, { children: [
+      r && /* @__PURE__ */ a(
+        e.Search,
+        {
+          search: {
+            value: r.value || "",
+            onChange: r.onChange || (() => {
+            }),
+            placeholder: r.placeholder
+          },
+          className: r.className
+        }
+      ),
+      d && /* @__PURE__ */ a(
+        e.Filter,
+        {
+          schema: h,
+          filter: {
+            value: d.value || [],
+            onChange: d.onChange || (() => {
+            })
+          }
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ a(
+      e.Body,
+      {
+        cell: i.cell,
+        sort: i.sort,
+        className: c(
+          "flex-1 min-h-0",
+          g.length < 1 && "border-stroke-solid-light border-b-1 border-x-1 border-t-0  rounded-b-xl",
+          i.className
+        ),
+        stickyHeader: i.stickyHeader
+      }
+    ),
+    N && (o || t || l) && /* @__PURE__ */ s(e.Footer, { className: c("flex-shrink-0", v), children: [
+      o && /* @__PURE__ */ a(e.FooterContent, { children: /* @__PURE__ */ a(
+        e.PaginationInfo,
+        {
+          showTotal: o.showTotal || !1,
+          totalItems: o.totalItems || 0,
+          currentPage: o.currentPage || 1,
+          itemsPerPage: o.itemsPerPage || 10
+        }
+      ) }),
+      (t || l) && /* @__PURE__ */ s(e.FooterContent, { children: [
+        t && /* @__PURE__ */ a(
+          e.PaginationQuickJumper,
+          {
+            currentPage: t.currentPage || 1,
+            totalPage: t.totalPage || 1,
+            onChange: t.onChange || (() => {
+            }),
+            disabled: t.disabled || !1
+          }
+        ),
+        l && /* @__PURE__ */ a(
+          e.Pagination,
+          {
+            currentPage: l.currentPage || 1,
+            totalPage: l.totalPage || 1,
+            onChange: l.onChange || (() => {
+            })
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+};
+export {
+  J as default
+};