@canlooks/can-ui 0.0.139 → 0.0.140

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

@@ -8,6 +8,7 @@ import { RadioProps } from '../radio';
 import { FieldPath } from '../../utils';
 import { FormProps, FormValue } from '../form';
 import { FilterControlProps, FilterOptionsProps } from './filterBubbleContent';
+import { BubbleProps } from '../bubble';
 export type RowType = Obj;
 export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentProps<'td'>, 'key' | 'ref' | 'title' | 'children'>, Omit<ComponentProps<'th'>, 'key' | 'ref' | 'title' | 'children'> {
     title?: ReactNode;
@@ -73,6 +74,7 @@ export interface DataGridBaseProps<R extends RowType = RowType> extends DataGrid
     rows?: R[];
     filterProps?: FormProps;
     initialFilterValue?: FormValue;
+    filterBubbleProps?: BubbleProps;
     onFilter?(filterValue: FormValue): void;
     onFilterClick?(column: Id, e: React.MouseEvent<HTMLButtonElement>): void;
     /** 若需要本地筛选，必须指定该方法 */

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

@@ -19,7 +19,7 @@ const DataGridContext = (0, react_1.createContext)({});
 function useDataGridContext() {
     return (0, react_1.useContext)(DataGridContext);
 }
-exports.DataGrid = (0, react_1.memo)(({ slots, slotProps, 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 }) => {
+exports.DataGrid = (0, react_1.memo)(({ slots, slotProps, columns, rows, rowProps, primaryKey = 'id', childrenKey = null, filterProps, initialFilterValue, filterBubbleProps, 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 }) => {
     /**
      * ---------------------------------------------------------------
      * 选择行
@@ -131,12 +131,12 @@ exports.DataGrid = (0, react_1.memo)(({ slots, slotProps, columns, rows, rowProp
         return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
     }, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
     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)({
+                    className: dataGrid_style_1.classes.filterForm,
                     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)(() => ({
+                }), 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, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
                                                     slots, slotProps,
                                                     rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
                                                     expandedSet, flattedColumns, toggleExpanded

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

@@ -6,6 +6,7 @@ interface DataGridHeadProps<R extends RowType, V extends Id = Id> extends Requir
     orderColumn: Id | undefined;
     flattedColumns: (symbol | ColumnType<R>)[] | undefined;
     completedColumns: (symbol | ColumnType<R>)[] | undefined;
+    filterBubbleProps: DataGridProps<R, V>['filterBubbleProps'];
     onFilterClick: DataGridProps<R, V>['onFilterClick'];
 }
 export declare const DataGridHead: <R extends RowType, V extends Id = Id>(props: DataGridHeadProps<R, V>) => ReactElement;

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

@@ -18,7 +18,7 @@ const bubble_1 = require("../bubble");
 const filterBubbleContent_1 = require("./filterBubbleContent");
 const form_1 = require("../form");
 const utils_1 = require("../../utils");
-exports.DataGridHead = (0, react_2.memo)(({ allowSelectAll, columnResizable, flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, onFilterClick }) => {
+exports.DataGridHead = (0, react_2.memo)(({ allowSelectAll, columnResizable, flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, filterBubbleProps, onFilterClick }) => {
     const { multiple, setValue, selectionStatus } = (0, selectionContext_1.useSelectionContext)();
     const allSelectionStatus = (0, react_2.useMemo)(() => {
         if (multiple && allowSelectAll) {
@@ -103,7 +103,14 @@ exports.DataGridHead = (0, react_2.memo)(({ allowSelectAll, columnResizable, fla
                                     : (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 }) })] })
+                                            : (0, jsx_runtime_1.jsx)(bubble_1.Bubble, { ...(0, utils_1.mergeComponentProps)({
+                                                    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()
+                                                }, filterBubbleProps), children: filterButton }) })] })
                         : title)
                 ];
             }) }, i));

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

@@ -8,6 +8,7 @@ import { RadioProps } from '../radio';
 import { FieldPath } from '../../utils';
 import { FormProps, FormValue } from '../form';
 import { FilterControlProps, FilterOptionsProps } from './filterBubbleContent';
+import { BubbleProps } from '../bubble';
 export type RowType = Obj;
 export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentProps<'td'>, 'key' | 'ref' | 'title' | 'children'>, Omit<ComponentProps<'th'>, 'key' | 'ref' | 'title' | 'children'> {
     title?: ReactNode;
@@ -73,6 +74,7 @@ export interface DataGridBaseProps<R extends RowType = RowType> extends DataGrid
     rows?: R[];
     filterProps?: FormProps;
     initialFilterValue?: FormValue;
+    filterBubbleProps?: BubbleProps;
     onFilter?(filterValue: FormValue): void;
     onFilterClick?(column: Id, e: React.MouseEvent<HTMLButtonElement>): void;
     /** 若需要本地筛选，必须指定该方法 */

package/dist/esm/components/dataGrid/dataGrid.js

@@ -15,7 +15,7 @@ const DataGridContext = createContext({});
 export function useDataGridContext() {
     return useContext(DataGridContext);
 }
-export const DataGrid = memo(({ slots, slotProps, 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 }) => {
+export const DataGrid = memo(({ slots, slotProps, columns, rows, rowProps, primaryKey = 'id', childrenKey = null, filterProps, initialFilterValue, filterBubbleProps, 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 }) => {
     /**
      * ---------------------------------------------------------------
      * 选择行
@@ -127,12 +127,12 @@ export const DataGrid = memo(({ slots, slotProps, columns, rows, rowProps, prima
         return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
     }, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
     return (_jsxs(Loading, { fill: false, ...props, css: style, className: clsx(classes.root, props.className), open: loading, "data-column-resizable": columnResizable, children: [_jsx(Form, { ...mergeComponentProps({
+                    className: classes.filterForm,
                     variant: 'plain',
                     initialValue: innerFilterValue
                 }, filterProps, {
-                    className: classes.filterForm,
                     onFinish: filterHandler
-                }), children: _jsx(ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => _jsxs(TableContainer, { ref: scrollerRef, className: classes.container, children: [_jsx(Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: cloneRef(tableProps?.ref, tableRef), children: _jsxs(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: [_jsx(DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, onFilterClick: onFilterClick }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
+                }), children: _jsx(ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => _jsxs(TableContainer, { ref: scrollerRef, className: classes.container, children: [_jsx(Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: cloneRef(tableProps?.ref, tableRef), children: _jsxs(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: [_jsx(DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
                                                     slots, slotProps,
                                                     rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
                                                     expandedSet, flattedColumns, toggleExpanded

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

@@ -6,6 +6,7 @@ interface DataGridHeadProps<R extends RowType, V extends Id = Id> extends Requir
     orderColumn: Id | undefined;
     flattedColumns: (symbol | ColumnType<R>)[] | undefined;
     completedColumns: (symbol | ColumnType<R>)[] | undefined;
+    filterBubbleProps: DataGridProps<R, V>['filterBubbleProps'];
     onFilterClick: DataGridProps<R, V>['onFilterClick'];
 }
 export declare const DataGridHead: <R extends RowType, V extends Id = Id>(props: DataGridHeadProps<R, V>) => ReactElement;

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

@@ -14,8 +14,8 @@ import { faFilter } from '@fortawesome/free-solid-svg-icons/faFilter';
 import { Bubble } from '../bubble';
 import { FilterBubbleContent } from './filterBubbleContent';
 import { useFormValueContext } from '../form';
-import { isUnset } from '../../utils';
-export const DataGridHead = memo(({ allowSelectAll, columnResizable, flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, onFilterClick }) => {
+import { isUnset, mergeComponentProps } from '../../utils';
+export const DataGridHead = memo(({ allowSelectAll, columnResizable, flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, filterBubbleProps, onFilterClick }) => {
     const { multiple, setValue, selectionStatus } = useSelectionContext();
     const allSelectionStatus = useMemo(() => {
         if (multiple && allowSelectAll) {
@@ -100,7 +100,14 @@ export const DataGridHead = memo(({ allowSelectAll, columnResizable, flattedColu
                                     : _jsx("div", { className: classes.title, children: title }), filter &&
                                     _jsx(Tooltip, { title: "\u7B5B\u9009", placement: "top", clickToClose: true, children: filter === true
                                             ? filterButton
-                                            : _jsx(Bubble, { style: { maxWidth: 360 }, trigger: "click", placement: "bottomRight", autoClose: false, content: _jsx(FilterBubbleContent, { columnKey: _key, columnFilterProps: filter }), onClick: e => e.stopPropagation(), children: filterButton }) })] })
+                                            : _jsx(Bubble, { ...mergeComponentProps({
+                                                    style: { maxWidth: 360 },
+                                                    trigger: 'click',
+                                                    placement: 'bottomRight',
+                                                    autoClose: false,
+                                                    content: (_jsx(FilterBubbleContent, { columnKey: _key, columnFilterProps: filter })),
+                                                    onClick: e => e.stopPropagation()
+                                                }, filterBubbleProps), children: filterButton }) })] })
                         : title)
                 ];
             }) }, i));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.139",
+  "version": "0.0.140",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",