@canlooks/can-ui 0.0.70 → 0.0.72

package/dist/cjs/components/curd/{curdFilter.js → curdFilterable.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CurdFilter = void 0;
+exports.CurdFilterable = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("@emotion/react");
 const react_2 = require("react");
@@ -14,7 +14,7 @@ const theme_1 = require("../theme");
 const icon_1 = require("../icon");
 const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
 const faFilter_1 = require("@fortawesome/free-solid-svg-icons/faFilter");
-exports.CurdFilter = (0, react_2.memo)(({ ref, columns, expandable, showButton, renderConditions, buttonProps, onFilter, ...props }) => {
+exports.CurdFilterable = (0, react_2.memo)(({ columns, expandable, showButton = true, renderFilterConditions, buttonProps, ...props }) => {
     const { spacing } = (0, theme_1.useTheme)();
     const items = (0, react_2.useMemo)(() => {
         return (0, utils_1.columnsToFilterItem)(columns);
@@ -34,29 +34,24 @@ exports.CurdFilter = (0, react_2.memo)(({ ref, columns, expandable, showButton,
      * --------------------------------------------------------------
      * 触发筛选
      */
-    const formRef = (0, react_2.useRef)(null);
-    const clickHandler = (e) => {
+    const { formRef } = (0, form_1.useFormContext)();
+    const filterButtonClick = (e) => {
         buttonProps?.onClick?.(e);
-        const filterValue = formRef.current.getFormValue();
-        onFilter?.(filterValue);
-        renderConditions && setFilteredConditions(filterValue);
+        formRef.current.submit().then();
     };
-    const changeHandler = (field, value, formValue) => {
-        props.onChange?.(field, value, formValue);
-        !showButton && onFilter?.(formValue);
-        renderConditions && setFilteredConditions(formValue);
-    };
-    /**
-     * --------------------------------------------------------------
-     * 已生效的筛选条件
-     */
-    const [filteredConditions, setFilteredConditions] = (0, react_2.useState)({});
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_1.Form, { ...props, ref: (0, utils_1.cloneRef)(ref, formRef), className: (0, utils_1.clsx)(curd_style_1.classes.filter, props.className), variant: "plain", onChange: changeHandler, children: !!items?.length &&
-                    (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [expandable
-                                ? (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { className: curd_style_1.classes.filterGridContainer, in: expanded, collapsedSize: () => firstItemRef.current?.offsetHeight || 56, appear: false, children: renderedGrid })
-                                : renderedGrid, (expandable || showButton) &&
-                                (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.filterControl, children: [expandable &&
+    const _expandable = expandable && items && items.length > 1;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ...props, className: (0, utils_1.clsx)(curd_style_1.classes.filter, props.className), children: !!items?.length &&
+                    (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [_expandable
+                                ? (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { className: curd_style_1.classes.filterGridContainer, in: expanded, collapsedSize: () => firstItemRef.current?.offsetHeight || 50, appear: false, children: renderedGrid })
+                                : renderedGrid, (_expandable || showButton) &&
+                                (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.filterControl, children: [_expandable &&
                                             (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", suffix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronDown_1.faChevronDown, style: { rotate: expanded ? '180deg' : void 0 } }), onClick: () => setExpanded(o => !o), children: expanded ? '收起' : '展开' }), showButton &&
-                                            (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faFilter_1.faFilter }), variant: "outlined", ...buttonProps, onClick: clickHandler, children: buttonProps?.children ?? '筛选' })] })] }) }), !!renderConditions &&
-                (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.filtered, children: [(0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.filteredTitle, children: "\u5DF2\u7B5B\u9009\uFF1A" }), renderConditions(filteredConditions, formRef.current)] })] }));
+                                            (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faFilter_1.faFilter }), variant: "outlined", ...buttonProps, onClick: filterButtonClick, children: buttonProps?.children ?? '筛选' })] })] }) }), (0, jsx_runtime_1.jsx)(FilterConditions, { renderFilterConditions: renderFilterConditions })] }));
+});
+const FilterConditions = (0, react_2.memo)(({ renderFilterConditions }) => {
+    const { formRef } = (0, form_1.useFormContext)();
+    const { formValue } = (0, form_1.useFormValueContext)();
+    const filterConditions = renderFilterConditions?.(formValue, formRef.current);
+    return !(0, utils_1.isUnset)(filterConditions) &&
+        (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.filtered, children: [(0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.filteredTitle, children: "\u5DF2\u7B5B\u9009\uFF1A" }), (0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.filteredContent, children: filterConditions })] });
 });

package/dist/cjs/components/curd/index.d.ts

@@ -1,4 +1,4 @@
 export * from './curd';
 export * from './curdDialog';
-export * from './curdFilter';
+export * from './curdFilterable';
 export * from './curdResizable';

package/dist/cjs/components/curd/index.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./curd"), exports);
 tslib_1.__exportStar(require("./curdDialog"), exports);
-tslib_1.__exportStar(require("./curdFilter"), exports);
+tslib_1.__exportStar(require("./curdFilterable"), exports);
 tslib_1.__exportStar(require("./curdResizable"), exports);

package/dist/cjs/components/dataGrid/columnResize.js

@@ -61,10 +61,10 @@ function ResizableColumn(props) {
     if (!columnResizable) {
         return (0, jsx_runtime_1.jsx)(table_1.ThCell, { ...props });
     }
-    return ((0, jsx_runtime_1.jsxs)(table_1.ThCell, { ...props, ref: r => {
+    return ((0, jsx_runtime_1.jsxs)(table_1.ThCell, { ...props, ref: (0, utils_1.cloneRef)(r => {
             if (r) {
                 columnRefs.current.push(r);
                 cellRef.current = r;
             }
-        }, children: [props.children, (0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.resizeHandle, ...draggableHandles })] }));
+        }, props.ref), children: [props.children, (0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.resizeHandle, ...draggableHandles })] }));
 }

package/dist/cjs/components/dataGrid/dataGrid.d.ts

@@ -1,4 +1,4 @@
-import { JSX, ReactElement, ReactNode } from 'react';
+import React, { ComponentProps, ReactElement, ReactNode } from 'react';
 import { DivProps, Id, Obj, ToRequired } from '../../types';
 import { SelectionContextProps } from '../selectionContext';
 import { PaginationProps } from '../pagination';
@@ -6,9 +6,10 @@ import { TableProps } from '../table';
 import { CheckboxProps } from '../checkbox';
 import { RadioProps } from '../radio';
 import { FieldPath } from '../../utils';
+import { FormProps, FormValue } from '../form';
+import { FilterControlProps, FilterOptionsProps } from './filterBubbleContent';
 export type RowType = Obj;
-export type OrderType = 'ascend' | 'descend';
-export interface ColumnType<R extends RowType = RowType> extends Omit<JSX.IntrinsicElements['td'], 'key' | 'ref' | 'title' | 'children'>, Omit<JSX.IntrinsicElements['th'], 'key' | 'ref' | 'title' | 'children'> {
+export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentProps<'td'>, 'key' | 'ref' | 'title' | 'children'>, Omit<ComponentProps<'th'>, 'key' | 'ref' | 'title' | 'children'> {
     title?: ReactNode;
     /** 若不指定key，默认使用{@link field}作为key */
     key?: string | number;
@@ -18,15 +19,24 @@ export interface ColumnType<R extends RowType = RowType> extends Omit<JSX.Intrin
     /** 指定children后，下列属性均不生效 */
     field?: FieldPath;
     render?(row: R, index?: number, rows?: R[]): ReactNode;
-    /** 指定为true时表示使用服务端排序，组件只做样式处理，不做数据排序处理；本地排序需指定 “正序” 的排序方法，倒序会自动处理 */
+    /**
+     * @enum true 使用服务端排序，组件只做样式处理，不做数据排序处理；
+     * @enum function 本地排序需指定 `正序` 的排序方法，倒序会自动处理
+     */
     sorter?: boolean | ((a: R, b: R) => number);
+    /**
+     * @enum true 不会弹出气泡框，需配合{@link DataGridBaseProps.onFilterClick}实现筛选逻辑
+     * @enum FilterOptionsProps 传递至`OptionsBase`组件
+     * @enum FilterControlProps 自定义渲染气泡内容
+     */
+    filter?: boolean | FilterOptionsProps | FilterControlProps;
     /** @private 内部使用，在{@link useDataGridColumns}内赋值 */
-    _key?: string | number;
+    _key?: Id;
     /** @private 内部使用，在{@link DataGridHead}内计算 */
     _negativeRowSpan?: number;
 }
-type DataGridSharedProps<R extends RowType> = {
-    rowProps?(row: R, index: number, rows: R[]): JSX.IntrinsicElements['tr'];
+type DataGridSharedProps<R extends RowType = RowType> = {
+    rowProps?(row: R, index: number, rows: R[]): ComponentProps<'tr'>;
     /** 数据的主键名，默认为`id` */
     primaryKey?: keyof R;
     /**
@@ -41,9 +51,16 @@ type DataGridSharedProps<R extends RowType> = {
     indent?: number;
     renderExpandIcon?(key: Id, isExpand: boolean, expanded: Id[]): ReactNode;
 };
-export interface DataGridBaseProps<R extends RowType> extends DataGridSharedProps<R>, Omit<DivProps, 'defaultValue' | 'onChange'> {
+export type OrderType = 'ascend' | 'descend';
+export interface DataGridBaseProps<R extends RowType = RowType> extends DataGridSharedProps<R>, Omit<DivProps, 'defaultValue' | 'onChange'> {
     columns?: (ColumnType<R> | symbol)[];
     rows?: R[];
+    filterProps?: FormProps;
+    initialFilterValue?: FormValue;
+    onFilter?(filterValue: FormValue): void;
+    onFilterClick?(column: Id, e: React.MouseEvent<HTMLButtonElement>): void;
+    /** 若需要本地筛选，必须指定该方法 */
+    filterPredicate?(row: R, index: number, filterValue: FormValue): any;
     defaultOrderColumn?: Id;
     orderColumn?: Id;
     defaultOrderType?: OrderType;
@@ -78,20 +95,20 @@ export interface DataGridBaseProps<R extends RowType> extends DataGridSharedProp
     striped?: TableProps['striped'];
     tableProps?: TableProps;
 }
-export interface DataGridSingleProps<R extends RowType, V extends Id = Id> extends DataGridBaseProps<R> {
+export interface DataGridSingleProps<R extends RowType = RowType, V extends Id = Id> extends DataGridBaseProps<R> {
     multiple?: false;
     defaultValue?: V;
     value?: V;
     onChange?(value: V): void;
 }
-export interface DataGridMultipleProps<R extends RowType, V extends Id = Id> extends DataGridBaseProps<R> {
+export interface DataGridMultipleProps<R extends RowType = RowType, V extends Id = Id> extends DataGridBaseProps<R> {
     multiple: true;
     defaultValue?: V[];
     value?: V[];
     onChange?(value: V[]): void;
 }
-export type DataGridProps<R extends RowType, V extends Id = Id> = DataGridSingleProps<R, V> | DataGridMultipleProps<R, V>;
-interface IDataGridContext<R extends RowType> extends ToRequired<DataGridSharedProps<R>, 'primaryKey' | 'childrenKey' | 'clickRowToSelect' | 'indent'> {
+export type DataGridProps<R extends RowType = RowType, V extends Id = Id> = DataGridSingleProps<R, V> | DataGridMultipleProps<R, V>;
+interface IDataGridContext<R extends RowType = RowType> extends ToRequired<DataGridSharedProps<R>, 'primaryKey' | 'childrenKey' | 'clickRowToSelect' | 'indent'> {
     expandedSet: Set<Id>;
     flattedColumns: (symbol | ColumnType<R>)[] | undefined;
     toggleExpanded(key: Id): void;

package/dist/cjs/components/dataGrid/dataGrid.js

@@ -14,11 +14,12 @@ const dataGridHead_1 = require("./dataGridHead");
 const placeholder_1 = require("../placeholder");
 const dataGridRows_1 = require("./dataGridRows");
 const columnResize_1 = require("./columnResize");
+const form_1 = require("../form");
 const DataGridContext = (0, react_1.createContext)({});
 function useDataGridContext() {
     return (0, react_1.useContext)(DataGridContext);
 }
-exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'id', childrenKey = null, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, multiple, defaultValue, value, onChange, ...props }) => {
+exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'id', childrenKey = null, filterProps, initialFilterValue, onFilter, onFilterClick, filterPredicate, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, multiple, defaultValue, value, onChange, ...props }) => {
     /**
      * ---------------------------------------------------------------
      * 选择行
@@ -35,7 +36,24 @@ exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'i
     });
     /**
      * ---------------------------------------------------------------
-     * 行排序
+     * 筛选
+     */
+    const [innerFilterValue, setInnerFilterValue] = (0, react_1.useState)(initialFilterValue || {});
+    const filterHandler = (value) => {
+        onFilter?.(value);
+        filterPredicate && setInnerFilterValue(value);
+    };
+    const filteredRows = (0, react_1.useMemo)(() => {
+        if (!filterPredicate) {
+            return rows;
+        }
+        return rows?.filter((row, index) => {
+            return filterPredicate(row, index, innerFilterValue);
+        });
+    }, [rows, innerFilterValue, filterPredicate]);
+    /**
+     * ---------------------------------------------------------------
+     * 排序
      */
     const [innerOrderColumn, setInnerOrderColumn] = (0, utils_1.useControlled)(() => {
         return defaultOrderColumn ?? flattedColumns
@@ -43,24 +61,25 @@ exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'i
             ?._key;
     }, orderColumn);
     const [innerOrderType, setInnerOrderType] = (0, utils_1.useControlled)(defaultOrderType, orderType);
-    const orderChangeHandler = (orderColumn, orderType) => {
-        onOrderChange?.(orderColumn, orderType);
+    const syncOnOrderChange = (0, utils_1.useSync)(onOrderChange);
+    const orderChangeHandler = (0, react_1.useCallback)((orderColumn, orderType) => {
+        syncOnOrderChange.current?.(orderColumn, orderType);
         setInnerOrderColumn(orderColumn);
         setInnerOrderType(orderType);
-    };
+    }, []);
     const orderedRows = (0, react_1.useMemo)(() => {
         if (!innerOrderColumn.current) {
-            return rows;
+            return filteredRows;
         }
         const orderingColumn = columnMapByKey.get(innerOrderColumn.current);
         if (!orderingColumn?.sorter || typeof orderingColumn.sorter !== 'function') {
-            return rows;
+            return filteredRows;
         }
-        return rows?.toSorted((a, b) => {
+        return filteredRows?.toSorted((a, b) => {
             const ret = orderingColumn.sorter(a, b);
             return innerOrderType.current === 'ascend' ? ret : -ret;
         });
-    }, [rows, innerOrderColumn.current, innerOrderType.current]);
+    }, [filteredRows, innerOrderColumn.current, innerOrderType.current, columnMapByKey]);
     /**
      * ---------------------------------------------------------------
      * 展开行
@@ -69,16 +88,17 @@ exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'i
     const expandedSet = (0, react_1.useMemo)(() => {
         return new Set(innerExpanded.current);
     }, [innerExpanded.current]);
-    const toggleExpanded = (key) => {
+    const syncOnExpandedChange = (0, utils_1.useSync)(onExpandedChange);
+    const toggleExpanded = (0, react_1.useCallback)((key) => {
         const currentExpanded = expandedSet.has(key);
         setInnerExpanded(o => {
             const newExpanded = currentExpanded
                 ? o.filter(v => v !== key)
                 : [...o, key];
-            onExpandedChange?.(newExpanded, key, !currentExpanded);
+            syncOnExpandedChange.current?.(newExpanded, key, !currentExpanded);
             return newExpanded;
         });
-    };
+    }, []);
     /**
      * ---------------------------------------------------------------
      * 分页
@@ -110,14 +130,20 @@ exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'i
         const { page, pageSize } = _paginationProps;
         return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
     }, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
-    return ((0, jsx_runtime_1.jsxs)(loading_1.Loading, { ...props, css: dataGrid_style_1.style, className: (0, utils_1.clsx)(dataGrid_style_1.classes.root, props.className), open: loading, "data-column-resizable": columnResizable, children: [(0, jsx_runtime_1.jsx)(columnResize_1.ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => (0, jsx_runtime_1.jsxs)(table_1.TableContainer, { ref: scrollerRef, className: dataGrid_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)(table_1.Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: (0, utils_1.cloneRef)(tableProps?.ref, tableRef), children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { flattedColumns: flattedColumns, completedColumns: completedColumns, rows: rows, primaryKey: primaryKey, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, allowSelectAll: allowSelectAll, columnResizable: columnResizable }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
-                                                rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
-                                                expandedSet, flattedColumns, toggleExpanded
-                                            }), [
-                                                rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
-                                                expandedSet, flattedColumns
-                                            ]), children: !!paginatedRows?.length &&
-                                                (0, jsx_runtime_1.jsx)(dataGridRows_1.DataGridRows, { rows: paginatedRows }) }) })] }) }), !paginatedRows?.length && (emptyPlaceholder ?? (0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, { className: dataGrid_style_1.classes.empty }))] }) }), renderPaginationFn()] }));
+    return ((0, jsx_runtime_1.jsxs)(loading_1.Loading, { fill: false, ...props, css: dataGrid_style_1.style, className: (0, utils_1.clsx)(dataGrid_style_1.classes.root, props.className), open: loading, "data-column-resizable": columnResizable, children: [(0, jsx_runtime_1.jsx)(form_1.Form, { ...(0, utils_1.mergeComponentProps)({
+                    variant: 'plain',
+                    initialValue: innerFilterValue
+                }, filterProps, {
+                    className: dataGrid_style_1.classes.filterForm,
+                    onFinish: filterHandler
+                }), children: (0, jsx_runtime_1.jsx)(columnResize_1.ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => (0, jsx_runtime_1.jsxs)(table_1.TableContainer, { ref: scrollerRef, className: dataGrid_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)(table_1.Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: (0, utils_1.cloneRef)(tableProps?.ref, tableRef), children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, onFilterClick: onFilterClick }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
+                                                    rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
+                                                    expandedSet, flattedColumns, toggleExpanded
+                                                }), [
+                                                    rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
+                                                    expandedSet, flattedColumns
+                                                ]), children: !!paginatedRows?.length &&
+                                                    (0, jsx_runtime_1.jsx)(dataGridRows_1.DataGridRows, { rows: paginatedRows }) }) })] }) }), !paginatedRows?.length && (emptyPlaceholder ?? (0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, { className: dataGrid_style_1.classes.empty }))] }) }) }), renderPaginationFn()] }));
 });
 exports.DataGrid.EXPAND_COLUMN = Symbol('expand-column');
 exports.DataGrid.SELECT_COLUMN = Symbol('select-column');

package/dist/cjs/components/dataGrid/dataGrid.style.d.ts

@@ -1,14 +1,16 @@
 export declare const classes: {
     sub: string;
     title: string;
+    children: string;
     container: string;
-    sorter: string;
-    icon: string;
+    filterForm: string;
+    functionalCell: string;
+    sortIcon: string;
+    filterButton: string;
     expandable: string;
     expandableWrap: string;
     selectable: string;
     subTd: string;
-    children: string;
     empty: string;
     resizeHandle: string;
 } & {

package/dist/cjs/components/dataGrid/dataGrid.style.js

@@ -5,10 +5,12 @@ const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const loading_style_1 = require("../loading/loading.style");
 exports.classes = (0, utils_1.defineInnerClasses)('data-grid', [
+    'filterForm',
     'container',
     'title',
-    'sorter',
-    'icon',
+    'functionalCell',
+    'sortIcon',
+    'filterButton',
     'expandable',
     'expandableWrap',
     'selectable',
@@ -19,20 +21,37 @@ exports.classes = (0, utils_1.defineInnerClasses)('data-grid', [
     'resizeHandle'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing, mode, gray, text, colors, easing }) => (0, react_1.css) `
-    max-height: 100%;
-    min-height: 0;
-    
     .${loading_style_1.classes.container} {
-        height: auto;
         display: flex;
         flex-direction: column;
+        gap: ${spacing[5]}px;
+    }
+
+    .${exports.classes.filterForm} {
+        min-height: 0;
     }
 
     .${exports.classes.container} {
-        flex: 1;
-        
-        &:not(:last-of-type) {
-            margin-bottom: ${spacing[5]}px;
+        height: 100%;
+    }
+
+    .${exports.classes.functionalCell} {
+        display: flex;
+        align-items: center;
+
+        .${exports.classes.title} {
+            flex: 1;
+        }
+
+        .${exports.classes.sortIcon} {
+            color: ${text.placeholder};
+            transition: translate .25s ${easing.swing};
+        }
+
+        .${exports.classes.filterButton} {
+            width: ${20 / 14}em;
+            height: ${20 / 14}em;
+            margin-left: ${spacing[2]}px;
         }
     }
 
@@ -50,35 +69,21 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, gray, text, colors, eas
             background-color: ${gray(mode === 'light' ? .01 : .22)};
         }
 
-        .${exports.classes.sorter} {
-            display: flex;
-            align-items: center;
-            
-            .${exports.classes.title} {
-                flex: 1;
-            }
-
-            .${exports.classes.icon} {
-                color: ${text.placeholder};
-                transition: translate .25s ${easing.swing};
-            }
-        }
-
         &[data-ordering=true] {
-            .${exports.classes.icon} {
+            .${exports.classes.sortIcon} {
                 color: ${colors.primary.main};
             }
         }
 
         &[data-order-type=ascend] {
-            .${exports.classes.icon} {
+            .${exports.classes.sortIcon} {
                 translate: 0 -3px;
                 rotate: 180deg;
             }
         }
 
         &[data-order-type=descend] {
-            .${exports.classes.icon} {
+            .${exports.classes.sortIcon} {
                 translate: 0 3px;
                 rotate: 0deg;
             }
@@ -93,7 +98,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, gray, text, colors, eas
         .${exports.classes.subTd} {
             padding: 0;
             border: none;
-    
+
             .${exports.classes.children} {
                 padding: ${spacing[4]}px ${spacing[5]}px;
                 border-bottom: 1px solid ${gray(mode === 'light' ? .12 : .32)};
@@ -125,19 +130,19 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, gray, text, colors, eas
         padding-top: 0;
         padding-bottom: 0;
         padding-left: 0;
-        
+
         .${exports.classes.expandableWrap} {
             display: flex;
             align-items: center;
             gap: ${spacing[1]}px;
         }
     }
-    
+
     .${exports.classes.empty} {
         position: sticky;
         left: 0;
     }
-    
+
     .${exports.classes.resizeHandle} {
         width: 8px;
         height: 100%;
@@ -148,12 +153,12 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, gray, text, colors, eas
         right: -4px;
         z-index: 1;
     }
-    
+
     &[data-column-resizable=true] table {
         width: max-content;
         table-layout: fixed;
     }
-    
+
     th:last-of-type {
         .${exports.classes.resizeHandle} {
             width: 4px;

package/dist/cjs/components/dataGrid/dataGridHead.d.ts

@@ -1,9 +1,12 @@
 import { ReactElement } from 'react';
 import { ColumnType, DataGridProps, RowType } from './dataGrid';
 import { Id } from '../../types';
-interface DataGridHeadProps<R extends RowType, V extends Id = Id> extends Required<Pick<DataGridProps<R, V>, 'primaryKey' | 'orderType' | 'onOrderChange' | 'allowSelectAll' | 'columnResizable'>>, Pick<DataGridProps<R, V>, 'rows' | 'orderColumn'> {
+interface DataGridHeadProps<R extends RowType, V extends Id = Id> extends Required<Pick<DataGridProps<R, V>, 'primaryKey' | 'orderType' | 'onOrderChange' | 'allowSelectAll' | 'columnResizable'>> {
+    rows: R[] | undefined;
+    orderColumn: Id | undefined;
     flattedColumns: (symbol | ColumnType<R>)[] | undefined;
     completedColumns: (symbol | ColumnType<R>)[] | undefined;
+    onFilterClick: DataGridProps<R, V>['onFilterClick'];
 }
 export declare const DataGridHead: <R extends RowType, V extends Id = Id>(props: DataGridHeadProps<R, V>) => ReactElement;
 export {};

package/dist/cjs/components/dataGrid/dataGridHead.js

@@ -8,12 +8,15 @@ const dataGrid_style_1 = require("./dataGrid.style");
 const dataGrid_1 = require("./dataGrid");
 const columnResize_1 = require("./columnResize");
 const checkbox_1 = require("../checkbox");
-const utils_1 = require("../../utils");
 const icon_1 = require("../icon");
 const selectionContext_1 = require("../selectionContext");
 const tooltip_1 = require("../tooltip");
 const faCaretDown_1 = require("@fortawesome/free-solid-svg-icons/faCaretDown");
-exports.DataGridHead = (0, react_2.memo)(({ flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, allowSelectAll, columnResizable }) => {
+const button_1 = require("../button");
+const faFilter_1 = require("@fortawesome/free-solid-svg-icons/faFilter");
+const bubble_1 = require("../bubble");
+const filterBubbleContent_1 = require("./filterBubbleContent");
+exports.DataGridHead = (0, react_2.memo)(({ allowSelectAll, columnResizable, flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, onFilterClick }) => {
     const { multiple, setValue, selectionStatus } = (0, selectionContext_1.useSelectionContext)();
     const allSelectionStatus = (0, react_2.useMemo)(() => {
         if (multiple && allowSelectAll) {
@@ -69,29 +72,35 @@ exports.DataGridHead = (0, react_2.memo)(({ flattedColumns, completedColumns, ro
                         return [];
                     }
                     // col === DataGrid.SELECT_COLUMN
-                    return ((0, jsx_runtime_1.jsx)(Column, { className: dataGrid_style_1.classes.selectable, rowSpan: headRows.length, sticky: j === 0 ? 'left' : void 0, children: multiple && allowSelectAll &&
-                            (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: allSelectionStatus === 2, indeterminate: allSelectionStatus === 1, onChange: selectAllChangeHandler }) }, j + '_selectable'));
+                    return [
+                        (0, jsx_runtime_1.jsx)(Column, { className: dataGrid_style_1.classes.selectable, rowSpan: headRows.length, sticky: j === 0 ? 'left' : void 0, children: multiple && allowSelectAll &&
+                                (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: allSelectionStatus === 2, indeterminate: allSelectionStatus === 1, onChange: selectAllChangeHandler }) }, j + '_selectable')
+                    ];
                 }
                 const { 
                 // 排除无需加入dom节点的属性
-                title, key, children, sticky, field, render, sorter, _key, _negativeRowSpan = 0, ...colProps } = col;
-                const sortable = sorter && children?.length;
+                title, key, children, sticky, field, render, sorter, filter, _key, _negativeRowSpan = 0, ...colProps } = col;
+                const sortable = sorter && !children?.length;
                 const isOrderingColumn = orderColumn === _key;
                 const currentOrderType = isOrderingColumn ? orderType : 'descend';
-                const renderedTh = ((0, react_1.createElement)(Column, { rowSpan: headRows.length - _negativeRowSpan, ...colProps, key: _key, sticky: sticky, "data-sortable": !!sortable, "data-ordering": isOrderingColumn, "data-order-type": currentOrderType, onClick: e => {
-                        colProps.onClick?.(e);
-                        if (sortable && !(0, utils_1.isUnset)(_key)) {
-                            onOrderChange?.(_key, currentOrderType === 'descend' ? 'ascend' : 'descend');
-                        }
-                    } }, sorter
-                    ? (0, jsx_runtime_1.jsxs)("div", { className: dataGrid_style_1.classes.sorter, children: [(0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.title, children: title }), (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCaretDown_1.faCaretDown, className: dataGrid_style_1.classes.icon })] })
-                    : title));
+                const filterButton = ((0, jsx_runtime_1.jsx)(button_1.Button, { className: dataGrid_style_1.classes.filterButton, variant: "plain", color: "text.placeholder", onClick: e => {
+                        e.stopPropagation();
+                        onFilterClick?.(_key, e);
+                    }, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faFilter_1.faFilter }) }));
                 return [
-                    sortable
-                        ? (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: currentOrderType === 'descend'
-                                ? '点击升序'
-                                : '点击降序', children: renderedTh }, _key)
-                        : renderedTh
+                    (0, react_1.createElement)(Column, { rowSpan: headRows.length - _negativeRowSpan, ...colProps, key: _key, sticky: sticky, "data-sortable": !!sortable, "data-ordering": isOrderingColumn, "data-order-type": currentOrderType, onClick: e => {
+                            colProps.onClick?.(e);
+                            sortable && onOrderChange?.(_key, currentOrderType === 'descend' ? 'ascend' : 'descend');
+                        } }, sortable || filter
+                        ? (0, jsx_runtime_1.jsxs)("div", { className: dataGrid_style_1.classes.functionalCell, children: [sortable
+                                    ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: currentOrderType === 'descend'
+                                                    ? '点击升序'
+                                                    : '点击降序', children: (0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.title, children: title }) }), (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCaretDown_1.faCaretDown, className: dataGrid_style_1.classes.sortIcon })] })
+                                    : (0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.title, children: title }), filter &&
+                                    (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7B5B\u9009", placement: "top", clickToClose: true, children: filter === true
+                                            ? filterButton
+                                            : (0, jsx_runtime_1.jsx)(bubble_1.Bubble, { style: { maxWidth: 360 }, trigger: "click", placement: "bottomRight", autoClose: false, content: (0, jsx_runtime_1.jsx)(filterBubbleContent_1.FilterBubbleContent, { columnKey: _key, columnFilterProps: filter }), onClick: e => e.stopPropagation(), children: filterButton }) })] })
+                        : title)
                 ];
             }) }, i));
     });

package/dist/cjs/components/dataGrid/dataGridRows.js

@@ -54,7 +54,7 @@ exports.DataGridRows = (0, react_2.memo)(({ rows, _level = 0 }) => {
                 // 排除无需加入dom节点的属性
                 // width属性只需加入thead列中，普通列需排除
                 // rowSpan与colSpan需排除
-                title, key, children, sticky, field, render, sorter, width, _key, _negativeRowSpan, rowSpan, colSpan, ..._colProps } = col;
+                title, key, children, sticky, field, render, sorter, filter, width, _key, _negativeRowSpan, rowSpan, colSpan, ..._colProps } = col;
                 const renderedContent = (0, utils_1.renderCell)({ render, field }, row, i, arr);
                 const shouldRenderExpand = expandableIndex === j - 1;
                 return ((0, react_1.createElement)(table_1.TdCell, { ..._colProps, key: _key, className: shouldRenderExpand ? dataGrid_style_1.classes.expandable : void 0, sticky: sticky }, shouldRenderExpand

package/dist/cjs/components/dataGrid/filterBubbleContent.d.ts

@@ -0,0 +1,19 @@
+import { MenuOptionType, OptionsBaseProps } from '../optionsBase';
+import { Id } from '../../types';
+import { FormItemChildren } from '../form';
+type FilterSharedProps = {
+    /** 是否显示`重置`与`确定`按钮，默认为`true` */
+    showButton?: boolean;
+};
+export interface FilterOptionsProps extends FilterSharedProps, OptionsBaseProps<MenuOptionType> {
+    /** 默认为`true` */
+    multiple?: boolean;
+}
+export interface FilterControlProps extends FilterSharedProps {
+    control: FormItemChildren;
+}
+export declare const FilterBubbleContent: import("react").MemoExoticComponent<({ columnKey, columnFilterProps }: {
+    columnKey: Id;
+    columnFilterProps: FilterOptionsProps | FilterControlProps;
+}) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export {};