@canlooks/can-ui 0.0.70 → 0.0.71

package/dist/cjs/components/counter/counter.js

@@ -21,14 +21,13 @@ exports.Counter = (0, react_1.memo)(({ size, min = -Infinity, max = Infinity, st
     const clickHandler = (dir) => {
         setInnerValue(Math.max(min, Math.min(max, innerValue.current + dir * step)));
     };
-    return ((0, jsx_runtime_1.jsxs)(flex_1.Flex, { compact: true, ...props, css: counter_style_1.style, className: (0, utils_1.clsx)(counter_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)(button_1.Button, { disabled: innerValue.current <= min, ...commonButtonProps, ...decreaseProps, onClick: e => {
-                    decreaseProps?.onClick?.(e);
-                    clickHandler(-1);
-                }, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMinus_1.faMinus }) }), (0, jsx_runtime_1.jsx)(input_1.Input, { type: "number", widthAdaptable: true, size: size, min: min, max: max, step: step, precision: precision, ...inputProps, className: (0, utils_1.clsx)(counter_style_1.classes.input, inputProps?.className), value: innerValue.current, onChange: e => {
-                    inputProps?.onChange?.(e);
-                    setInnerValue(+e.target.value);
-                } }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: innerValue.current >= max, ...commonButtonProps, ...increaseProps, onClick: e => {
-                    increaseProps?.onClick?.(e);
-                    clickHandler(1);
-                }, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faPlus_1.faPlus }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(flex_1.Flex, { compact: true, ...props, css: counter_style_1.style, className: (0, utils_1.clsx)(counter_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)(button_1.Button, { disabled: innerValue.current <= min, ...(0, utils_1.mergeComponentProps)(commonButtonProps, decreaseProps, {
+                    onClick: () => clickHandler(-1)
+                }), children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMinus_1.faMinus }) }), (0, jsx_runtime_1.jsx)(input_1.Input, { type: "number", widthAdaptable: true, size: size, min: min, max: max, step: step, precision: precision, ...(0, utils_1.mergeComponentProps)(inputProps, {
+                    className: counter_style_1.classes.input,
+                    value: innerValue.current,
+                    onChange: e => setInnerValue(+e.target.value)
+                }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: innerValue.current >= max, ...(0, utils_1.mergeComponentProps)(commonButtonProps, increaseProps, {
+                    onClick: () => clickHandler(1)
+                }), children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faPlus_1.faPlus }) })] }));
 });

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

@@ -2,7 +2,7 @@ import { ReactElement, ReactNode, Ref } from 'react';
 import { DivProps, Id, Obj } from '../../types';
 import { ColumnType, DataGridBaseProps, DataGridMultipleProps, DataGridSingleProps, OrderType, RowType } from '../dataGrid';
 import { FormItemProps, FormProps, FormRef, FormValue } from '../form';
-import { CurdFilter, CurdFilterProps } from './curdFilter';
+import { CurdFilterable, CurdFilterableProps } from './curdFilterable';
 import { FieldPath } from '../../utils';
 import { ButtonProps } from '../button';
 import { CurdDialogProps } from './curdDialog';
@@ -12,28 +12,28 @@ export type CurdFormItemProps<I = any> = FormItemProps<I> & {
     order?: number;
 } & Obj;
 export type CurdFormItemType<I = any> = CurdFormItemProps<I> | ReactElement | true;
-export interface CurdColumn<R extends RowType = RowType> extends Omit<ColumnType<R>, 'children'> {
+export interface CurdColumn<R extends RowType = RowType> extends Omit<ColumnType<R>, 'filter' | 'children'> {
     /** 在表格中隐藏，表明该列只用于filter或form */
     hideInTable?: boolean;
     filter?: CurdFormItemType | (() => CurdFormItemType);
+    filterInline?: ColumnType<R>['filter'];
     form?: CurdFormItemType | ((activeRow?: R) => CurdFormItemType);
 }
-export type LoadRowsReturn<R extends RowType> = {
+export type LoadRowsReturn<R extends RowType = RowType> = {
     rows: R[];
     /** 必须返回总数才能使翻页正常工作 */
     total: number;
 };
 type EachRowType<R extends RowType, T> = T | ((row: R) => T);
 export type CurdRef<R extends RowType = RowType, F extends FormValue = FormValue> = {
-    openCreateDialog(initialValue?: F): Promise<F> | undefined;
+    openCreateDialog(defaultValue?: F): Promise<F> | undefined;
     selectSingle(): Promise<R> | undefined;
     selectMultiple(selected?: Id[]): Promise<Id[]> | undefined;
 };
-export interface CurdBaseProps<R extends RowType, F extends FormValue> extends Omit<DataGridBaseProps<R>, 'ref'> {
+export interface CurdBaseProps<R extends RowType = RowType, F extends FormValue = FormValue> extends Omit<DataGridBaseProps<R>, 'ref' | 'columns' | 'filterPredicate'> {
     ref?: Ref<CurdRef<R, F>>;
     /** 默认属性会传递给DataGrid组件，外层包裹元素的属性使用wrapperProps */
     wrapperProps?: DivProps;
-    wrapperRef?: Ref<HTMLDivElement>;
     /** 嵌入式样式通常用于Dialog或Card组件内 */
     variant?: 'standard' | 'embeded';
     loadRows?: (pagination?: {
@@ -57,11 +57,9 @@ export interface CurdBaseProps<R extends RowType, F extends FormValue> extends O
         order?: Id[];
         onOrderChange?(order: Id[]): void;
     };
-    filterProps?: CurdFilterProps<R>;
-    filterRef?: Ref<FormRef>;
-    initialFilterValue?: CurdFilterProps<R>['initialValue'];
-    onFilter?(filterValue: FormValue): void;
-    renderFilter?(filterProps: CurdFilterProps<R>): ReactNode;
+    filterableProps?: Omit<CurdFilterableProps, 'columns'>;
+    renderFilterable?(filterableProps: CurdFilterableProps): ReactNode;
+    renderFilterConditions?: CurdFilterableProps['renderFilterConditions'];
     copyable?: boolean;
     creatable?: boolean;
     updatable?: EachRowType<R, boolean>;
@@ -100,7 +98,7 @@ interface CurdMultipleProps<R extends RowType, F extends FormValue = FormValue,
 export type CurdProps<R extends RowType, F extends FormValue = FormValue, V extends Id = Id> = CurdSingleProps<R, F, V> | CurdMultipleProps<R, F, V>;
 export declare const Curd: {
     <R extends RowType, F extends FormValue = FormValue, V extends Id = Id>(props: CurdProps<R, F, V>): ReactElement;
-    Filter: typeof CurdFilter;
+    Filter: typeof CurdFilterable;
     CONTROL_COLUMN: symbol;
 };
 export {};

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

@@ -4,7 +4,8 @@ exports.Curd = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const dataGrid_1 = require("../dataGrid");
-const curdFilter_1 = require("./curdFilter");
+const form_1 = require("../form");
+const curdFilterable_1 = require("./curdFilterable");
 const curd_style_1 = require("./curd.style");
 const utils_1 = require("../../utils");
 const button_1 = require("../button");
@@ -23,14 +24,14 @@ const faPenToSquare_1 = require("@fortawesome/free-regular-svg-icons/faPenToSqua
 const faPlus_1 = require("@fortawesome/free-solid-svg-icons/faPlus");
 const faRotateRight_1 = require("@fortawesome/free-solid-svg-icons/faRotateRight");
 exports.Curd = (0, react_1.memo)((props) => {
-    const { ref, wrapperProps, wrapperRef, variant = 'standard', loadRows, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, columnConfigurable = true, filterProps, filterRef, initialFilterValue, onFilter, renderFilter, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, rowToForm, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
+    const { ref, wrapperProps, variant = 'standard', loadRows, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, columnConfigurable = true, filterProps, initialFilterValue, onFilter, filterableProps, renderFilterable, renderFilterConditions, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, rowToForm, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
     /**
      * -------------------------------------------------------------
      * ref
      */
     (0, react_1.useImperativeHandle)(ref, () => ({
-        openCreateDialog(initialValue) {
-            return curdDialogRef.current?.open(void 0, initialValue);
+        openCreateDialog(defaultValue) {
+            return curdDialogRef.current?.open(void 0, defaultValue);
         },
         selectSingle() {
             return curdDialogRef.current?.selectSingle();
@@ -44,22 +45,20 @@ exports.Curd = (0, react_1.memo)((props) => {
      * 筛选部分
      */
     const innerFilterRef = (0, react_1.useRef)(null);
-    const syncOnFilter = (0, utils_1.useSync)(onFilter);
-    const renderFilterFn = () => {
+    const filterHandler = (value) => {
+        onFilter?.(value);
+        innerLoadRows().then();
+    };
+    const renderFilterableFn = () => {
         const _filterProps = {
-            initialValue: initialFilterValue,
-            ...filterProps,
-            ref: (0, react_1.useCallback)((0, utils_1.cloneRef)(filterRef, innerFilterRef), []),
-            columns,
-            onFilter: (0, react_1.useCallback)((filterValue) => {
-                syncOnFilter.current?.(filterValue);
-                syncLoadRows.current();
-            }, [])
+            renderFilterConditions,
+            ...filterableProps,
+            columns
         };
-        if (renderFilter) {
-            return renderFilter(_filterProps);
+        if (renderFilterable) {
+            return renderFilterable(_filterProps);
         }
-        return (0, jsx_runtime_1.jsx)(curdFilter_1.CurdFilter, { ..._filterProps });
+        return (0, jsx_runtime_1.jsx)(curdFilterable_1.CurdFilterable, { ..._filterProps });
     };
     /**
      * -------------------------------------------------------------
@@ -101,6 +100,7 @@ exports.Curd = (0, react_1.memo)((props) => {
     const [innerOrderColumn, setInnerOrderColumn] = (0, utils_1.useControlled)(props.defaultOrderColumn, props.orderColumn);
     const [innerOrderType, setInnerOrderType] = (0, utils_1.useControlled)(props.defaultOrderType || 'descend', props.orderType);
     const orderChangeHandler = (orderColumn, orderType) => {
+        dataGridProps?.onOrderChange?.(orderColumn, orderType);
         setInnerOrderColumn(orderColumn);
         setInnerOrderType(orderType);
     };
@@ -125,13 +125,13 @@ exports.Curd = (0, react_1.memo)((props) => {
                     page: innerPage.current,
                     pageSize: innerPageSize.current,
                 }
-                : void 0, innerFilterRef.current?.getFormValue(), innerOrderColumn.current
+                : void 0, innerFilterRef.current.getFormValue(), innerOrderColumn.current
                 ? {
                     field: innerOrderColumn.current,
                     type: innerOrderType.current
                 }
                 : void 0);
-            if (res) {
+            if (typeof res === 'object' && res !== null) {
                 setInnerRows(res.rows);
                 setInnerTotal(res.total);
             }
@@ -144,7 +144,6 @@ exports.Curd = (0, react_1.memo)((props) => {
         onReload?.();
         innerLoadRows().then();
     };
-    const syncLoadRows = (0, utils_1.useSync)(innerLoadRows);
     /**
      * -------------------------------------------------------------
      * 弹窗与曾删改部分
@@ -188,19 +187,25 @@ exports.Curd = (0, react_1.memo)((props) => {
         innerLoadRows().then();
         message.success(deleteName + '成功').then();
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...wrapperProps, ref: wrapperRef, css: curd_style_1.style, className: (0, utils_1.clsx)(curd_style_1.classes.root, wrapperProps?.className), "data-variant": variant, children: [renderFilterFn(), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
-                (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbar, children: [(0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarLeft, children: [creatable &&
-                                    (0, jsx_runtime_1.jsxs)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faPlus_1.faPlus }), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarRight, children: [!!toolbarRight &&
-                                    (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolbarRight, (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: curd_style_1.classes.divider, orientation: "vertical" })] }), reloadable &&
-                                    (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u5237\u65B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faRotateRight_1.faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
-                                    (0, jsx_runtime_1.jsx)(curdResizable_1.CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
-                                    (0, jsx_runtime_1.jsx)(curdColumnConfig_1.CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), (0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.card, children: (0, jsx_runtime_1.jsx)(dataGrid_1.DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
-                        ...props.tableProps,
-                        ...resizable && { size: innerSize.current }
-                    }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
-                        ? () => (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
-                        : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler }) }), (creatable || updatable) &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...wrapperProps, css: curd_style_1.style, className: (0, utils_1.clsx)(curd_style_1.classes.root, wrapperProps?.className), "data-variant": variant, children: [(0, jsx_runtime_1.jsxs)(form_1.Form, { ...(0, utils_1.mergeComponentProps)({
+                    variant: 'plain',
+                    initialValue: initialFilterValue
+                }, filterProps, {
+                    ref: innerFilterRef,
+                    onFinish: filterHandler
+                }), children: [renderFilterableFn(), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
+                        (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbar, children: [(0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarLeft, children: [creatable &&
+                                            (0, jsx_runtime_1.jsxs)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faPlus_1.faPlus }), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarRight, children: [!!toolbarRight &&
+                                            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolbarRight, (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: curd_style_1.classes.divider, orientation: "vertical" })] }), reloadable &&
+                                            (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u5237\u65B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faRotateRight_1.faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
+                                            (0, jsx_runtime_1.jsx)(curdResizable_1.CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
+                                            (0, jsx_runtime_1.jsx)(curdColumnConfig_1.CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), (0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.card, children: (0, jsx_runtime_1.jsx)(dataGrid_1.DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
+                                ...props.tableProps,
+                                ...resizable && { size: innerSize.current }
+                            }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
+                                ? () => (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
+                                : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler }) })] }), (creatable || updatable) &&
                 (0, jsx_runtime_1.jsx)(curdDialog_1.CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));
 });
-exports.Curd.Filter = curdFilter_1.CurdFilter;
+exports.Curd.Filter = curdFilterable_1.CurdFilterable;
 exports.Curd.CONTROL_COLUMN = Symbol('control-column');

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

@@ -2,16 +2,17 @@ export declare const classes: {
     filter: string;
     divider: string;
     toolbar: string;
+    control: string;
     filterGridContainer: string;
     filterGrid: string;
     filterItem: string;
     filterControl: string;
     filtered: string;
     filteredTitle: string;
+    filteredContent: string;
     toolbarLeft: string;
     toolbarRight: string;
     card: string;
-    control: string;
     dialogTitle: string;
     copyButton: string;
 } & {

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

@@ -13,6 +13,7 @@ exports.classes = (0, utils_1.defineInnerClasses)('curd', [
     'filterControl',
     'filtered',
     'filteredTitle',
+    'filteredContent',
     'toolbar',
     'toolbarLeft',
     'toolbarRight',
@@ -32,27 +33,36 @@ exports.style = (0, utils_1.defineCss)(({ spacing, text, background, borderRadiu
 
     .${exports.classes.filter} {
         display: flex;
+        gap: ${spacing[6]}px;
 
-        .${exports.classes.filterGridContainer},
-        .${exports.classes.filterGrid} {
+        .${exports.classes.filterGrid}, .${exports.classes.filterGridContainer} {
             flex: 1;
+            opacity: 1;
+            justify-content: flex-end;
         }
 
         .${exports.classes.filterControl} {
             align-self: flex-end;
-            margin-bottom: ${spacing[4]}px;
+            margin-bottom: ${spacing[6]}px;
         }
     }
 
     .${exports.classes.filtered} {
         display: flex;
         align-items: center;
-        margin-bottom: ${spacing[8]}px;
+        margin-bottom: ${spacing[6]}px;
 
         .${exports.classes.filteredTitle} {
             color: ${text.secondary};
             font-size: ${13 / 14}em;
         }
+        
+        .${exports.classes.filteredContent} {
+            flex: 1;
+            display: flex;
+            flex-wrap: wrap;
+            gap: ${spacing[2]}px;
+        }
     }
 
     .${exports.classes.toolbar} {

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

@@ -92,7 +92,8 @@ exports.CurdDialog = (0, react_2.memo)(({ ref, onFinish, curdProps, ...props })
      * ----------------------------------------------------------------
      * 结果处理与loading
      */
-    const confirmHandler = async () => {
+    const confirmHandler = async (e) => {
+        props.onConfirm?.(e);
         await innerFormRef.current.submit();
     };
     const [innerLoading, finishHandler] = (0, utils_1.useLoading)(async (value) => {

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

@@ -0,0 +1,21 @@
+import { ReactElement, ReactNode } from 'react';
+import { FormRef, FormValue } from '../form';
+import { CurdBaseProps } from './curd';
+import { ButtonProps } from '../button';
+import { DivProps } from '../../types';
+export interface CurdFilterableProps<F extends FormValue = FormValue> extends DivProps {
+    columns?: CurdBaseProps<any, F>['columns'];
+    /**
+     * 筛选项是否可收起与展开。若开启此功能，至少保证第一行每项的高度一致，否则可能出现样式问题
+     */
+    expandable?: boolean;
+    /** 是否显示"筛选"按钮，默认为`true`
+     * @enum true onFilter只会在点击按钮时触发
+     * @enum false 每次触发onChange的同时会触发onFilter
+     */
+    showButton?: boolean;
+    /** 渲染已生效的筛选条件 */
+    renderFilterConditions?(filterValue: F, formInstance: FormRef<F>): ReactNode;
+    buttonProps?: ButtonProps;
+}
+export declare const CurdFilterable: <F extends FormValue = FormValue>(props: CurdFilterableProps<F>) => ReactElement;

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;