@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,16 @@
+import { ReactElement, ReactNode } from 'react';
+import { FormProps, FormRef, FormValue } from '../form';
+import { CurdBaseProps } from './curd';
+import { ButtonProps } from '../button';
+import { RowType } from '../dataGrid';
+export interface CurdFilterProps<R extends RowType, F extends FormValue = FormValue> extends Omit<FormProps<F>, 'variant'>, Pick<CurdBaseProps<R, F>, 'columns'> {
+    /** 筛选项是否可收起与展开，若开启此功能，需保证每项的高度一致，否则可能出现样式问题 */
+    expandable?: boolean;
+    /** 是否显示"筛选"按钮，若为false，则每次触发onChange的同时会触发onFilter，若为true，则onFilter只会在点击按钮时触发，@default false */
+    showButton?: boolean;
+    /** 是否显示已生效的筛选条件 */
+    renderConditions?(filterValue: F, formInstance: FormRef<F> | null): ReactNode;
+    buttonProps?: ButtonProps;
+    onFilter?(filterValue: F): void;
+}
+export declare const CurdFilter: <R extends RowType, F extends FormValue = FormValue>(props: CurdFilterProps<R, F>) => ReactElement;

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurdFilter = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const form_1 = require("../form");
+const curd_style_1 = require("./curd.style");
+const utils_1 = require("../../utils");
+const grid_1 = require("../grid");
+const button_1 = require("../button");
+const icons_1 = require("@ant-design/icons");
+const transitionBase_1 = require("../transitionBase");
+const app_1 = require("../app");
+exports.CurdFilter = (0, react_1.memo)((0, react_1.forwardRef)(({ columns, expandable, showButton, renderConditions, buttonProps, onFilter, columnCount = 3, ...props }, ref) => {
+    const { spacing } = (0, app_1.useTheme)();
+    const items = (0, react_1.useMemo)(() => {
+        return (0, utils_1.columnsToFilterItem)(columns);
+    }, [columns]);
+    /**
+     * --------------------------------------------------------------
+     * 收起与展开
+     */
+    const firstItemRef = (0, react_1.useRef)(null);
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const renderedGrid = ((0, jsx_runtime_1.jsx)(grid_1.Grid, { className: curd_style_1.classes.filterGrid, columnGap: spacing[8], children: items?.map((item, i) => (0, react_1.isValidElement)(item)
+            ? item
+            : (0, jsx_runtime_1.jsx)(form_1.FormItem, { span: { xs: 12, md: 6, lg: 4 }, ...item, wrapperRef: !i ? firstItemRef : void 0 }, i)) }));
+    /**
+     * --------------------------------------------------------------
+     * 触发筛选
+     */
+    const formRef = (0, react_1.useRef)(null);
+    const clickHandler = (e) => {
+        buttonProps?.onClick?.(e);
+        const filterValue = formRef.current.getFormValue();
+        onFilter?.(filterValue);
+        renderConditions && setFilteredConditions(filterValue);
+    };
+    const changeHandler = (field, value, formValue) => {
+        props.onChange?.(field, value, formValue);
+        !showButton && onFilter?.(formValue);
+        renderConditions && setFilteredConditions(formValue);
+    };
+    /**
+     * --------------------------------------------------------------
+     * 已生效的筛选条件
+     */
+    const [filteredConditions, setFilteredConditions] = (0, react_1.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.classnames)(curd_style_1.classes.filter, props.className), columnCount: columnCount, 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 &&
+                                            (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", suffix: (0, jsx_runtime_1.jsx)(icons_1.DownOutlined, { 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)(icons_1.FilterOutlined, {}), 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)] })] }));
+}));

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

@@ -0,0 +1,6 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Size } from '../../../types';
+export declare const CurdResizable: import("react").MemoExoticComponent<({ innerSize, setInnerSize }: {
+    innerSize: Size;
+    setInnerSize: Dispatch<SetStateAction<Size>>;
+}) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurdResizable = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const tooltip_1 = require("../tooltip");
+const bubble_1 = require("../bubble");
+const menuItem_1 = require("../menuItem");
+const button_1 = require("../button");
+const icons_1 = require("@ant-design/icons");
+exports.CurdResizable = (0, react_1.memo)(({ innerSize, setInnerSize }) => {
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", children: (0, jsx_runtime_1.jsx)(bubble_1.Bubble, { placement: "bottom", content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "small", label: "\u5C0F", selected: innerSize === 'small', onClick: () => setInnerSize('small') }), (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "medium", label: "\u4E2D", selected: innerSize === 'medium', onClick: () => setInnerSize('medium') }), (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "large", label: "\u5927", selected: innerSize === 'large', onClick: () => setInnerSize('large') })] }), children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text", children: (0, jsx_runtime_1.jsx)(icons_1.ColumnHeightOutlined, {}) }) }) }));
+});

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+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("./curdResizable"), exports);

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

@@ -0,0 +1,123 @@
+import { ReactElement, ReactNode } from 'react';
+import { DIVProps, Id, Obj } from '../../../types';
+import { FieldPath } from '../../utils';
+import { TableProps } from '../table';
+import { PaginationProps } from '../pagination';
+import { SelectionContextProps } from '../selectionContext';
+import { CheckboxProps } from '../checkbox';
+import { RadioProps } from '../radio';
+export type RowType = Obj;
+export interface ColumnType<R extends RowType = RowType> extends Omit<JSX.IntrinsicElements['td'], 'key' | 'ref' | 'title' | 'children'>, Omit<JSX.IntrinsicElements['th'], 'key' | 'ref' | 'title' | 'children'> {
+    title?: ReactNode;
+    /** 若不指定key，默认使用{@link field}作为key */
+    key?: string | number;
+    /** 是否将列黏性固定在左侧，若指定number|string类型，表示left的值 */
+    sticky?: boolean | number | string;
+    children?: ColumnType<R>[];
+    /** 指定children后，下列属性均不生效 */
+    field?: FieldPath;
+    render?(row: R, index?: number, rows?: R[]): ReactNode;
+    /** 指定为true时表示使用服务端排序，组件只做样式处理，不做数据排序处理；本地排序需指定 “正序” 的排序方法，倒序会自动处理 */
+    sorter?: boolean | ((a: R, b: R) => number);
+    /** @private 内部使用 */
+    _key?: string | number;
+    /** @private 内部使用 */
+    _colSpan?: number;
+    /** @private 内部使用 */
+    _negativeRowSpan?: number;
+}
+type DataGridSharedProps<R extends RowType> = {
+    /** 数据的主键名，@default "id" */
+    primaryKey?: keyof R;
+    /**
+     * 当数据中存在该字段，则会渲染可展开的子行；
+     * children允许的值类型 @type {R[] | ReactNode | ((parent: R, expanded: boolean) => ReactNode)}
+     */
+    childrenKey?: keyof R;
+    indent?: number;
+    renderExpandIcon?(key: Id, isExpand: boolean, expanded: Id[]): ReactNode;
+    rowProps?(row: R, index: number, rows: R[]): JSX.IntrinsicElements['tr'];
+    /** 点击行时是否触发选中，@default true */
+    clickRowToSelect?: boolean;
+    selectorProps?(row: R, index: number, rows: R[]): CheckboxProps | RadioProps;
+};
+export type OrderType = 'ascend' | 'descend';
+export interface DataGridBaseProps<R extends RowType> extends DataGridSharedProps<R>, Omit<DIVProps, 'defaultValue' | 'onChange'> {
+    columns?: (ColumnType<R> | symbol)[];
+    rows?: R[];
+    defaultOrderColumn?: Id;
+    orderColumn?: Id;
+    defaultOrderType?: OrderType;
+    orderType?: OrderType;
+    onOrderChange?(orderColumn: Id, orderType: OrderType): void;
+    selectable?: boolean;
+    /**
+     * 行之间的关系
+     * @enum {"dependent"}：会自动判断子父行的选中关系。
+     * @enum {"standalone"}：所有行相互独立
+     * @default "dependent"
+     */
+    relation?: SelectionContextProps<R>['relation'];
+    integration?: SelectionContextProps<R>['integration'];
+    /** 是否允许全选，@default true */
+    allowSelectAll?: boolean;
+    defaultExpanded?: Id[];
+    expanded?: Id[];
+    onExpandedChange?(expanded: Id[], key: Id, isExpand: boolean): void;
+    loading?: boolean;
+    /** 是否内置翻页，@default true */
+    paginatable?: boolean;
+    paginationProps?: PaginationProps;
+    renderPagination?(props: PaginationProps): ReactNode;
+    /** 传递给<Table />的属性 */
+    bordered?: boolean;
+    striped?: boolean;
+    tableProps?: TableProps;
+}
+export interface DataGridSingleProps<R extends 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> {
+    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>;
+export interface DataGridContext<R extends RowType> extends DataGridSharedProps<R> {
+    flattedColumns?: (ColumnType<R> | symbol)[];
+    expandedSet?: Set<Id>;
+    toggleExpanded?(key: Id): void;
+    multiple?: boolean;
+    innerValue?: Id | Id[];
+    toggleSelected?(key: Id): void;
+}
+export declare function useDataGridContext(): {
+    flattedColumns?: (symbol | ColumnType<RowType>)[] | undefined;
+    toggleExpanded?(key: Id): void;
+    multiple?: boolean;
+    innerValue?: Id | Id[];
+    toggleSelected?(key: Id): void;
+    /**
+     * 当数据中存在该字段，则会渲染可展开的子行；
+     * children允许的值类型 @type {R[] | ReactNode | ((parent: R, expanded: boolean) => ReactNode)}
+     */
+    childrenKey?: keyof RowType | undefined;
+    renderExpandIcon?(key: Id, isExpand: boolean, expanded: Id[]): ReactNode;
+    rowProps?(row: RowType, index: number, rows: RowType[]): JSX.IntrinsicElements["tr"];
+    /** 点击行时是否触发选中，@default true */
+    clickRowToSelect?: boolean;
+    selectorProps?(row: RowType, index: number, rows: RowType[]): CheckboxProps | RadioProps;
+    primaryKey: keyof RowType;
+    indent: number;
+    expandedSet: Set<Id>;
+};
+export declare const DataGrid: {
+    <R extends RowType, V extends Id = Id>(props: DataGridProps<R, V>): ReactElement;
+    EXPAND_COLUMN: symbol;
+    SELECT_COLUMN: symbol;
+};
+export {};

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

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGrid = void 0;
+exports.useDataGridContext = useDataGridContext;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const dataGrid_style_1 = require("./dataGrid.style");
+const utils_1 = require("../../utils");
+const table_1 = require("../table");
+const dataGridHead_1 = require("./dataGridHead");
+const dataGridRows_1 = require("./dataGridRows");
+const pagination_1 = require("../pagination");
+const loading_1 = require("../loading");
+const placeholder_1 = require("../placeholder");
+const selectionContext_1 = require("../selectionContext");
+const dataGridContext = (0, react_1.createContext)({});
+function useDataGridContext() {
+    const { primaryKey = 'id', indent = 24, expandedSet = new Set(), ...context } = (0, react_1.useContext)(dataGridContext);
+    return { primaryKey, indent, expandedSet, ...context };
+}
+exports.DataGrid = (0, react_1.memo)((0, react_1.forwardRef)(({ columns, rows, rowProps, selectorProps, primaryKey = 'id', childrenKey, indent = 24, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, clickRowToSelect = true, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, defaultExpanded = [], expanded, onExpandedChange, loading, renderExpandIcon, multiple, defaultValue, value, onChange, paginatable = true, paginationProps = {}, renderPagination, bordered, striped, tableProps, ...props }, ref) => {
+    const { inSelection, disabled } = (0, selectionContext_1.useSelectionContext)();
+    // 在SelectionContext内，且未disabled，需要默认打开selectable
+    selectable ??= inSelection && !disabled;
+    const { completedColumns, columnMapByKey, flattedColumns } = (0, utils_1.useDataGridColumns)({
+        columns, selectable, childrenKey
+    });
+    /**
+     * ---------------------------------------------------------------
+     * 行排序
+     */
+    const [innerOrderColumn, setInnerOrderColumn] = (0, utils_1.useControlled)(defaultOrderColumn, orderColumn);
+    const [innerOrderType, setInnerOrderType] = (0, utils_1.useControlled)(defaultOrderType, orderType);
+    const orderChangeHandler = (orderColumn, orderType) => {
+        onOrderChange?.(orderColumn, orderType);
+        setInnerOrderColumn(orderColumn);
+        setInnerOrderType(orderType);
+    };
+    const orderedRows = (0, react_1.useMemo)(() => {
+        if (!innerOrderColumn.current) {
+            return rows;
+        }
+        const orderingColumn = columnMapByKey.get(innerOrderColumn.current);
+        if (!orderingColumn?.sorter || typeof orderingColumn.sorter !== 'function') {
+            return rows;
+        }
+        return rows?.toSorted((a, b) => {
+            const ret = orderingColumn.sorter(a, b);
+            return innerOrderType.current === 'ascend' ? ret : -ret;
+        });
+    }, [rows, innerOrderColumn.current, innerOrderType.current]);
+    /**
+     * ---------------------------------------------------------------
+     * 分页
+     */
+    const [innerPage, setInnerPage] = (0, utils_1.useControlled)(paginationProps.defaultPage ?? 1, paginationProps.page, paginationProps.onPageChange);
+    const [innerPageSize, setInnerPageSize] = (0, utils_1.useControlled)(paginationProps.defaultPageSize ?? 10, paginationProps.pageSize, paginationProps.onPageSizeChange);
+    const pageChangeHandler = (page, pageSize) => {
+        paginationProps.onChange?.(page, pageSize);
+        setInnerPage(page);
+        setInnerPageSize(pageSize);
+    };
+    const _paginationProps = {
+        total: rows?.length,
+        ...paginationProps,
+        page: innerPage.current,
+        pageSize: innerPageSize.current,
+        onChange: pageChangeHandler
+    };
+    const paginatedRows = (0, react_1.useMemo)(() => {
+        if (!paginatable) {
+            return orderedRows;
+        }
+        const { page, pageSize } = _paginationProps;
+        return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
+    }, [orderedRows, _paginationProps.page, _paginationProps.pageSize]);
+    /**
+     * ---------------------------------------------------------------
+     * 展开行
+     */
+    const [innerExpanded, setInnerExpanded] = (0, utils_1.useControlled)(defaultExpanded, expanded);
+    const expandedSet = (0, react_1.useMemo)(() => {
+        return new Set(innerExpanded.current);
+    }, [innerExpanded.current]);
+    const toggleExpanded = (key) => {
+        const currentExpanded = expandedSet.has(key);
+        setInnerExpanded(o => {
+            const newExpanded = currentExpanded
+                ? o.filter(v => v !== key)
+                : [...o, key];
+            onExpandedChange?.(newExpanded, key, !currentExpanded);
+            return newExpanded;
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)(loading_1.Loading, { ...props, ref: ref, css: dataGrid_style_1.style, className: (0, utils_1.classnames)(dataGrid_style_1.classes.root, props.className), loading: loading, children: [(0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.container, children: (0, jsx_runtime_1.jsx)(table_1.Table, { bordered: bordered, striped: striped, ...tableProps, children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { columns: completedColumns, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, allowSelectAll: allowSelectAll, multiple: multiple, primaryKey: primaryKey, rows: rows }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(dataGridContext.Provider, { value: (0, react_1.useMemo)(() => ({
+                                        primaryKey, childrenKey, flattedColumns, rowProps, clickRowToSelect,
+                                        indent, expandedSet, toggleExpanded, multiple
+                                    }), [
+                                        primaryKey, childrenKey, flattedColumns, rowProps, clickRowToSelect,
+                                        indent, expandedSet, multiple
+                                    ]), children: paginatedRows?.length
+                                        ? (0, jsx_runtime_1.jsx)(dataGridRows_1.DataGridRows, { rows: paginatedRows })
+                                        : (0, jsx_runtime_1.jsx)("tr", { className: dataGrid_style_1.classes.empty, children: (0, jsx_runtime_1.jsx)("td", { colSpan: flattedColumns.length, children: (0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, {}) }) }) }) })] }) }) }), renderPagination
+                ? renderPagination(_paginationProps)
+                : paginatable && (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ..._paginationProps })] }));
+}));
+exports.DataGrid.EXPAND_COLUMN = Symbol('expand-column');
+exports.DataGrid.SELECT_COLUMN = Symbol('select-column');

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

@@ -0,0 +1,16 @@
+export declare const classes: {
+    children: string;
+    sub: string;
+    title: string;
+    container: string;
+    icon: string;
+    sorter: string;
+    expandable: string;
+    expandableWrap: string;
+    selectable: string;
+    subTd: string;
+    empty: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("@emotion/react");
+const style_1 = require("../../utils/style");
+const color_1 = tslib_1.__importDefault(require("color"));
+exports.classes = (0, style_1.defineClasses)('data-grid', [
+    'container',
+    'title',
+    'sorter',
+    'icon',
+    'expandable',
+    'expandableWrap',
+    'selectable',
+    'sub',
+    'subTd',
+    'children',
+    'empty'
+]);
+exports.style = (0, style_1.defineCss)(({ spacing, mode, gray, text, colors, easing }) => (0, react_1.css) `
+    max-height: 100%;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: ${spacing[5]}px;
+
+    .${exports.classes.container} {
+        flex: 1;
+        overflow: auto;
+    }
+
+    th[data-sortable=true] {
+        cursor: pointer;
+        transition: background-color .2s ${easing.easeOut};
+
+        &:hover {
+            background-color: ${gray(mode === 'light' ? .05 : .26)};
+        }
+
+        &:active {
+            transition: background-color 0s;
+            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 .2s ${easing.swing};
+            }
+        }
+
+        &[data-ordering=true] {
+            .${exports.classes.icon} {
+                color: ${colors.primary};
+            }
+        }
+
+        &[data-order-type=ascend] {
+            .${exports.classes.icon} {
+                translate: 0 -4px;
+                rotate: 180deg;
+            }
+        }
+
+        &[data-order-type=descend] {
+            .${exports.classes.icon} {
+                translate: 0 4px;
+                rotate: 0deg;
+            }
+        }
+    }
+
+    tr {
+        &[data-selected=true] {
+            background-color: ${(0, color_1.default)(colors.primary).alpha(mode === 'light' ? .05 : .1).string()};
+        }
+        
+        &.${exports.classes.sub} {
+            background-color: ${gray(mode === 'light' ? .02 : .22)};
+        }
+
+        .${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)};
+            }
+        }
+    }
+
+    th, td {
+        &.${exports.classes.selectable} {
+            width: 0;
+            padding-top: 0;
+            padding-bottom: 0;
+
+            + *:before {
+                display: none;
+            }
+        }
+    }
+
+    tr:not([data-selected=true]) {
+        th, td {
+            &[data-sticky=true] {
+                position: sticky;
+                left: 0;
+                background-color: ${gray(mode === 'light' ? .04 : .24)};
+            }
+        }
+    }
+
+    th[data-sticky=true] {
+        z-index: 2;
+    }
+
+    .${exports.classes.expandable} {
+        padding-top: 0;
+        padding-bottom: 0;
+        padding-left: 0;
+        
+        .${exports.classes.expandableWrap} {
+            display: flex;
+            align-items: center;
+            gap: ${spacing[1]}px;
+        }
+    }
+`);

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

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { DataGridProps, OrderType } from './dataGrid';
+import { Id, Obj } from '../../../types';
+interface DataGridHeadProps<R extends Obj, V extends Id = Id> extends Pick<DataGridProps<R, V>, 'columns' | 'onOrderChange' | 'allowSelectAll' | 'multiple' | 'primaryKey' | 'rows'> {
+    orderColumn?: Id;
+    orderType?: OrderType;
+}
+export declare const DataGridHead: <R extends Obj, V extends Id = Id>(props: DataGridHeadProps<R, V>) => ReactElement;
+export {};

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

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridHead = void 0;
+const react_1 = require("@emotion/react");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_2 = require("react");
+const dataGrid_1 = require("./dataGrid");
+const icons_1 = require("@ant-design/icons");
+const dataGrid_style_1 = require("./dataGrid.style");
+const tooltip_1 = require("../tooltip");
+const checkbox_1 = require("../checkbox");
+const selectionContext_1 = require("../selectionContext");
+const utils_1 = require("../../utils");
+exports.DataGridHead = (0, react_2.memo)(({ columns, orderColumn, orderType, onOrderChange, allowSelectAll, multiple, primaryKey, rows, }) => {
+    const { innerValue, setInnerValue, selectionStatus } = (0, selectionContext_1.useSelectionContext)();
+    const allSelectionStatus = (0, react_2.useMemo)(() => {
+        if (multiple && allowSelectAll) {
+            const sum = rows?.reduce((prev, row) => {
+                const status = selectionStatus?.get(row[primaryKey]) || 0;
+                return prev + status;
+            }, 0) || 0;
+            return sum === 0 ? 0 : sum < rows.length * 2 ? 1 : 2;
+        }
+        return 0;
+    }, [innerValue?.current, multiple, allowSelectAll]);
+    const checkboxChangeHandler = (e) => {
+        setInnerValue(e.target.checked
+            ? rows?.flatMap(r => {
+                return r[primaryKey] ?? [];
+            }) || []
+            : []);
+    };
+    const renderHead = () => {
+        if (!columns) {
+            return;
+        }
+        let allRows = 1;
+        const headRows = [];
+        const fn = (arr, parents = []) => {
+            let colSpan = 0;
+            arr?.forEach(col => {
+                if (typeof col !== 'symbol') {
+                    col._colSpan = fn(col.children, [...parents, col]) || 1;
+                    colSpan += col._colSpan;
+                    if (col.children?.length) {
+                        col['data-grouped'] = 'true';
+                        col.rowSpan = 1;
+                    }
+                    else {
+                        col._negativeRowSpan = col.children?.length ? 1 : parents.length;
+                    }
+                    if (parents.length + 1 > allRows) {
+                        allRows = parents.length + 1;
+                    }
+                }
+                headRows[parents.length] ||= [];
+                headRows[parents.length].push(col);
+            });
+            return colSpan;
+        };
+        fn(columns);
+        return headRows.map((cols, i) => (0, jsx_runtime_1.jsx)("tr", { children: cols.flatMap((col, j) => {
+                if (typeof col === 'symbol') {
+                    return col === dataGrid_1.DataGrid.EXPAND_COLUMN
+                        ? []
+                        : (0, jsx_runtime_1.jsx)("th", { className: dataGrid_style_1.classes.selectable, children: multiple && allowSelectAll &&
+                                (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: allSelectionStatus === 2, indeterminate: allSelectionStatus === 1, onChange: checkboxChangeHandler }) }, j + '_selectable');
+                }
+                const { 
+                // 排除无需加入dom节点的属性
+                title, _key, key, field, render, sorter, sticky, _colSpan, _negativeRowSpan, ...colProps } = col;
+                const isOrderingColumn = orderColumn === _key;
+                const currentOrderType = isOrderingColumn ? orderType : 'descend';
+                const renderedTh = ((0, react_1.createElement)("th", { colSpan: _colSpan, rowSpan: allRows - (_negativeRowSpan || 0), ...colProps, key: _key ?? j, "data-sortable": !!sorter, "data-ordering": isOrderingColumn, "data-order-type": currentOrderType, "data-sticky": typeof sticky !== 'undefined', style: {
+                        ...typeof sticky === 'number' && { left: sticky },
+                        ...colProps.style
+                    }, onClick: e => {
+                        colProps.onClick?.(e);
+                        sorter && !(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)(icons_1.CaretDownFilled, { className: dataGrid_style_1.classes.icon })] })
+                    : title));
+                return [
+                    sorter
+                        ? (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: currentOrderType === 'descend'
+                                ? '点击升序'
+                                : '点击降序', children: renderedTh }, _key)
+                        : renderedTh
+                ];
+            }) }, i));
+    };
+    return ((0, jsx_runtime_1.jsx)("thead", { children: renderHead() }));
+});

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

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { DataGridProps } from './dataGrid';
+import { Id, Obj } from '../../../types';
+interface DataGridRowsProps<R extends Obj, V extends Id = Id> extends Pick<DataGridProps<R, V>, 'rows'> {
+    /** @private 内部使用，用于缩进子行 */
+    _level?: number;
+}
+export declare const DataGridRows: <R extends Obj, V extends Id = Id>(props: DataGridRowsProps<R, V>) => ReactElement;
+export {};