@canlooks/can-ui 0.0.70 → 0.0.72

package/dist/cjs/components/cascade/cascadePanel.js

@@ -39,20 +39,30 @@ function CascadePanel({ options, index = 0 }) {
             const status = selectionStatus?.get(optVal);
             const opened = openedPanels[index] === optVal;
             const hasChildren = !!opt[childrenKey]?.length;
-            return ((0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { showCheckbox: showCheckbox, ...opt, checkboxProps: {
-                    ...opt?.checkboxProps,
-                    ...showCheckbox && {
-                        indeterminate: status === 1,
-                        checked: status === 2,
-                        async onClick(e) {
-                            opt.onClick?.(e);
-                            e.stopPropagation();
-                            onCheckboxClick(opt, index);
+            return ((0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { ...(0, utils_1.mergeComponentProps)({
+                    showCheckbox,
+                    key: optVal
+                }, opt, {
+                    checkboxProps: (0, utils_1.mergeComponentProps)(opt?.checkboxProps, showCheckbox
+                        ? {
+                            indeterminate: status === 1,
+                            checked: status === 2,
+                            async onClick(e) {
+                                e.stopPropagation();
+                                onCheckboxClick(opt, index);
+                            }
                         }
-                    }
-                }, selected: isSelected(optVal) || (opened && hasChildren), focused: horizontalIndex === index && verticalIndex === i, label: opt[labelKey], onClick: () => onOptionClick(opt, index), onPointerEnter: onPointerEnter, suffix: innerLoading && loadingOption === optVal
-                    ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
-                    : hasChildren && (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronRight_1.faChevronRight }), children: null }, optVal));
+                        : void 0),
+                    selected: isSelected(optVal) || (opened && hasChildren),
+                    focused: horizontalIndex === index && verticalIndex === i,
+                    label: opt[labelKey],
+                    onClick: () => onOptionClick(opt, index),
+                    onPointerEnter,
+                    suffix: innerLoading && loadingOption === optVal
+                        ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
+                        : hasChildren && (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronRight_1.faChevronRight }),
+                    children: null
+                }) }));
         });
     };
     const nextOptions = optionsMap.get(openedPanels[index])?.[childrenKey];

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

@@ -1,7 +1,7 @@
-import React, { ReactNode, JSX } from 'react';
+import React, { ReactNode, ComponentProps } from 'react';
 import { ColorPropsValue, DivProps, Id, Size } from '../../types';
 export interface CheckboxBaseProps extends DivProps {
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: ComponentProps<'input'>;
     /** @private 内部使用 */
     _type: 'checkbox' | 'radio';
     size?: Size;

package/dist/cjs/components/checkboxBase/checkboxBase.js

@@ -31,7 +31,7 @@ exports.CheckboxBase = (0, react_1.memo)(({ inputProps, _type, size, color, labe
         onChange?.(e);
         setInnerChecked(newChecked);
     };
-    const inputKeydown = (e) => {
+    const onKeyDown = (e) => {
         inputProps?.onKeyDown?.(e);
         e.key === 'Enter' && clickHandler(e);
     };
@@ -44,5 +44,12 @@ exports.CheckboxBase = (0, react_1.memo)(({ inputProps, _type, size, color, labe
                 : (0, jsx_runtime_1.jsx)("div", { ref: checkboxRef, className: `${checkboxBase_style_1.classes.checkbox} ${checkboxBase_style_1.classes.radio}`, children: innerChecked.current
                         ? (0, jsx_runtime_1.jsx)("div", { className: checkboxBase_style_1.classes.radioChecked })
                         : null }), !!label &&
-                (0, jsx_runtime_1.jsx)("div", { className: checkboxBase_style_1.classes.label, children: label }), (0, jsx_runtime_1.jsx)("input", { type: _type, disabled: disabled, readOnly: readOnly, ...inputProps, ref: (0, utils_1.cloneRef)(innerInputRef, inputProps?.ref), className: (0, utils_1.clsx)(checkboxBase_style_1.classes.input, inputProps?.className), onKeyDown: inputKeydown })] }));
+                (0, jsx_runtime_1.jsx)("div", { className: checkboxBase_style_1.classes.label, children: label }), (0, jsx_runtime_1.jsx)("input", { ...(0, utils_1.mergeComponentProps)({
+                    type: _type,
+                    disabled,
+                    readOnly,
+                    ref: innerInputRef,
+                    className: checkboxBase_style_1.classes.input,
+                    onKeyDown
+                }, inputProps) })] }));
 });

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

@@ -3,8 +3,8 @@ export declare const classes: {
     input: string;
     label: string;
     icon: string;
-    checkbox: string;
     radio: string;
+    checkbox: string;
     radioChecked: string;
     indeterminate: string;
 } & {

package/dist/cjs/components/checkboxBaseGroup/checkboxBaseGroup.js

@@ -18,13 +18,13 @@ function useCheckboxBaseGroupContext() {
 }
 exports.CheckboxBaseGroup = (({ size, color, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }) => {
     const { spacing } = (0, theme_1.useTheme)();
-    const [innerValue, toggleSelected] = (0, selectionContext_1.useShallowSelection)({ multiple, defaultValue, value, onChange });
+    const [innerValue, toggleSelected] = (0, selectionContext_1.useFlatSelection)({ multiple, defaultValue, value, onChange });
     const renderItems = () => {
         if (items) {
             return items.map((p, i) => {
                 const Component = multiple ? checkbox_1.Checkbox : radio_1.Radio;
                 const itemValue = p[primaryKey];
-                return ((0, react_1.createElement)(Component, { ...p, key: p.key ?? itemValue ?? i, size: p.size ?? size, color: p.color ?? color, checked: (0, utils_1.isSelected)(itemValue, innerValue), onChange: e => {
+                return ((0, react_1.createElement)(Component, { size: size, color: color, ...p, key: p.key ?? itemValue ?? i, checked: (0, utils_1.isSelected)(itemValue, innerValue), onChange: e => {
                         p.onChange?.(e);
                         toggleSelected(itemValue);
                     } }));

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

@@ -18,26 +18,26 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     suppressContentEditableWarning: boolean;
     suppressHydrationWarning: boolean;
     accessKey: string;
-    autoCapitalize: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters";
+    autoCapitalize: "none" | (string & {}) | "off" | "on" | "sentences" | "words" | "characters";
     autoFocus: boolean;
     className: string;
-    contentEditable: boolean | "inherit" | "false" | "true" | "plaintext-only";
+    contentEditable: boolean | "true" | "inherit" | "false" | "plaintext-only";
     contextMenu: string;
     dir: string;
-    draggable: boolean | "false" | "true";
-    enterKeyHint: "search" | "done" | "next" | "enter" | "go" | "previous" | "send";
+    draggable: boolean | "true" | "false";
+    enterKeyHint: "search" | "done" | "send" | "next" | "enter" | "go" | "previous";
     hidden: boolean;
     id: string;
     lang: string;
     nonce: string;
     slot: string;
-    spellCheck: boolean | "false" | "true";
+    spellCheck: boolean | "true" | "false";
     style: import("react").CSSProperties;
     tabIndex: number;
     title: string;
-    translate: "yes" | "no";
+    translate: "no" | "yes";
     radioGroup: string;
-    role: "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "search" | "table" | "switch" | "status" | (string & {}) | "none" | "checkbox" | "listbox" | "radio" | "region" | "cell" | "grid" | "row" | "listitem" | "menubar" | "progressbar" | "separator" | "tab" | "tabpanel" | "toolbar" | "tooltip" | "treeitem" | "scrollbar" | "alert" | "alertdialog" | "application" | "banner" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "feed" | "gridcell" | "group" | "heading" | "list" | "log" | "marquee" | "math" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "note" | "presentation" | "radiogroup" | "rowgroup" | "rowheader" | "searchbox" | "slider" | "spinbutton" | "tablist" | "term" | "textbox" | "timer" | "tree" | "treegrid";
+    role: "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "search" | "table" | "switch" | "none" | "status" | "feed" | "grid" | "heading" | "list" | "note" | "presentation" | "radio" | "slider" | "timer" | "tree" | (string & {}) | "checkbox" | "listbox" | "region" | "cell" | "row" | "listitem" | "menubar" | "progressbar" | "separator" | "tab" | "tabpanel" | "toolbar" | "tooltip" | "treeitem" | "scrollbar" | "alert" | "alertdialog" | "application" | "banner" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "gridcell" | "group" | "log" | "marquee" | "math" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "radiogroup" | "rowgroup" | "rowheader" | "searchbox" | "spinbutton" | "tablist" | "term" | "textbox" | "treegrid";
     about: string;
     content: string;
     datatype: string;
@@ -60,8 +60,8 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     results: number;
     security: string;
     unselectable: "off" | "on";
-    popover: "" | "auto" | "manual";
-    popoverTargetAction: "hide" | "show" | "toggle";
+    popover: "" | "auto" | "manual" | "hint";
+    popoverTargetAction: "toggle" | "hide" | "show";
     popoverTarget: string;
     inert: boolean;
     inputMode: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
@@ -69,52 +69,52 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     exportparts: string;
     part: string;
     "aria-activedescendant": string;
-    "aria-atomic": boolean | "false" | "true";
-    "aria-autocomplete": "both" | "none" | "inline" | "list";
+    "aria-atomic": boolean | "true" | "false";
+    "aria-autocomplete": "none" | "list" | "both" | "inline";
     "aria-braillelabel": string;
     "aria-brailleroledescription": string;
-    "aria-busy": boolean | "false" | "true";
-    "aria-checked": boolean | "mixed" | "false" | "true";
+    "aria-busy": boolean | "true" | "false";
+    "aria-checked": boolean | "true" | "mixed" | "false";
     "aria-colcount": number;
     "aria-colindex": number;
     "aria-colindextext": string;
     "aria-colspan": number;
     "aria-controls": string;
-    "aria-current": boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date";
+    "aria-current": boolean | "time" | "true" | "location" | "page" | "false" | "step" | "date";
     "aria-describedby": string;
     "aria-description": string;
     "aria-details": string;
-    "aria-disabled": boolean | "false" | "true";
-    "aria-dropeffect": "link" | "none" | "copy" | "move" | "execute" | "popup";
+    "aria-disabled": boolean | "true" | "false";
+    "aria-dropeffect": "link" | "copy" | "none" | "move" | "execute" | "popup";
     "aria-errormessage": string;
-    "aria-expanded": boolean | "false" | "true";
+    "aria-expanded": boolean | "true" | "false";
     "aria-flowto": string;
-    "aria-grabbed": boolean | "false" | "true";
-    "aria-haspopup": boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree";
-    "aria-hidden": boolean | "false" | "true";
-    "aria-invalid": boolean | "false" | "true" | "grammar" | "spelling";
+    "aria-grabbed": boolean | "true" | "false";
+    "aria-haspopup": boolean | "dialog" | "menu" | "true" | "grid" | "tree" | "listbox" | "false";
+    "aria-hidden": boolean | "true" | "false";
+    "aria-invalid": boolean | "true" | "false" | "grammar" | "spelling";
     "aria-keyshortcuts": string;
     "aria-label": string;
     "aria-labelledby": string;
     "aria-level": number;
     "aria-live": "off" | "assertive" | "polite";
-    "aria-modal": boolean | "false" | "true";
-    "aria-multiline": boolean | "false" | "true";
-    "aria-multiselectable": boolean | "false" | "true";
+    "aria-modal": boolean | "true" | "false";
+    "aria-multiline": boolean | "true" | "false";
+    "aria-multiselectable": boolean | "true" | "false";
     "aria-orientation": "horizontal" | "vertical";
     "aria-owns": string;
     "aria-placeholder": string;
     "aria-posinset": number;
-    "aria-pressed": boolean | "mixed" | "false" | "true";
-    "aria-readonly": boolean | "false" | "true";
+    "aria-pressed": boolean | "true" | "mixed" | "false";
+    "aria-readonly": boolean | "true" | "false";
     "aria-relevant": "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
-    "aria-required": boolean | "false" | "true";
+    "aria-required": boolean | "true" | "false";
     "aria-roledescription": string;
     "aria-rowcount": number;
     "aria-rowindex": number;
     "aria-rowindextext": string;
     "aria-rowspan": number;
-    "aria-selected": boolean | "false" | "true";
+    "aria-selected": boolean | "true" | "false";
     "aria-setsize": number;
     "aria-sort": "none" | "ascending" | "descending" | "other";
     "aria-valuemax": number;

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

@@ -1,9 +1,9 @@
-import { ReactNode, Ref, JSX } from 'react';
+import { ReactNode, Ref, ComponentProps } from 'react';
 import { PopperProps, PopperRef } from '../popper';
 import { ColorPropsValue, DivProps, Size } from '../../types';
 import { ColorInstance } from 'color';
 export interface ColorPickerProps extends Omit<DivProps, 'defaultValue' | 'onChange'> {
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: ComponentProps<'input'>;
     popperProps?: PopperProps;
     popperRef?: Ref<PopperRef>;
     size?: Size;

package/dist/cjs/components/colorPicker/colorPicker.js

@@ -18,8 +18,8 @@ exports.ColorPicker = (0, react_1.memo)(({ inputProps, popperProps, popperRef, s
     return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: colorPicker_style_1.style, className: (0, utils_1.clsx)(colorPicker_style_1.classes.root, props.className), "data-size": size, "data-shape": shape, children: [presets?.map((color, i) => {
                 const colorInstance = (0, color_1.default)(typeof color === 'string' ? (0, utils_1.colorTransfer)(color, theme) : color);
                 return ((0, jsx_runtime_1.jsx)(BlockItem, { selected: colorInstance.hex() === innerValue.current.hex(), color: (0, color_1.default)(color), onClick: () => setInnerValue((0, color_1.default)(color, 'hex')) }, i));
-            }), (0, jsx_runtime_1.jsx)(popper_1.Popper, { css: colorPicker_style_1.colorPickerPopperStyle, defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange, trigger: ['click', 'enter'], placement: "bottomLeft", content: (0, jsx_runtime_1.jsx)(palette_1.Palette, { value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { className: colorPicker_style_1.classes.inputBase, size: size, shape: shape === 'circular' ? 'rounded' : shape, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BlockItem, { color: innerValue.current }), !!label &&
-                                (0, jsx_runtime_1.jsx)("div", { className: colorPicker_style_1.classes.label, children: label }), (0, jsx_runtime_1.jsx)("input", { ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputProps?.ref), "data-hidden": "true" })] }) }) })] }));
+            }), (0, jsx_runtime_1.jsx)(popper_1.Popper, { css: colorPicker_style_1.colorPickerPopperStyle, defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange, trigger: ['click', 'enter'], placement: "bottomLeft", content: (0, jsx_runtime_1.jsx)(palette_1.Palette, { value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { className: colorPicker_style_1.classes.inputBase, size: size, shape: shape === 'circular' ? 'rounded' : shape, children: inputBaseProps => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BlockItem, { color: innerValue.current }), !!label &&
+                                (0, jsx_runtime_1.jsx)("div", { className: colorPicker_style_1.classes.label, children: label }), (0, jsx_runtime_1.jsx)("input", { ...(0, utils_1.mergeComponentProps)(inputProps, inputBaseProps), "data-hidden": "true" })] }) }) })] }));
 });
 function BlockItem({ color, onClick, selected }) {
     const light = (0, react_1.useMemo)(() => color.luminosity() >= .8, [color]);

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;