@canlooks/can-ui 0.0.25 → 0.0.27

package/dist/esm/components/colorPicker/colorPicker.js

@@ -3,24 +3,19 @@ import { memo, useMemo } from 'react';
 import { Popper } from '../popper';
 import { InputBase } from '../inputBase';
 import { classes, colorPickerPopperStyle, style } from './colorPicker.style';
-import { classnames, cloneRef, colorTransfer, useControlled, useTouchRipple } from '../../utils';
+import { clsx, cloneRef, colorTransfer, useControlled, useTouchRipple } from '../../utils';
 import { useTheme } from '../theme';
 import { Palette } from '../palette';
 import Color from 'color';
-export const ColorPicker = memo(({ inputProps, inputRef, popperProps, popperRef, size, shape = 'square', label = '自定义', presets, defaultOpen, open, onOpenChange, defaultValue, value, onChange, ...props }) => {
+export const ColorPicker = memo(({ inputProps, popperProps, popperRef, size, shape = 'square', label = '自定义', presets, defaultOpen, open, onOpenChange, defaultValue, value, onChange, ...props }) => {
     const theme = useTheme();
     size ??= theme.size;
-    const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
-    const openChangeHandler = (open) => {
-        popperProps?.onOpenChange?.(open);
-        setInnerOpen(open);
-    };
     const [innerValue, setInnerValue] = useControlled(defaultValue ?? Color(theme.colors.primary.main, 'hex'), value, onChange);
-    return (_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), "data-size": size, "data-shape": shape, children: [presets?.map((color, i) => {
+    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-size": size, "data-shape": shape, children: [presets?.map((color, i) => {
                 const colorInstance = Color(typeof color === 'string' ? colorTransfer(color, theme) : color);
                 return (_jsx(BlockItem, { selected: colorInstance.hex() === innerValue.current.hex(), color: Color(color), onClick: () => setInnerValue(Color(color, 'hex')) }, i));
-            }), _jsx(Popper, { css: colorPickerPopperStyle, open: innerOpen.current, trigger: ['click', 'enter'], placement: "bottomLeft", content: _jsx(Palette, { value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onOpenChange: openChangeHandler, children: _jsx(InputBase, { className: classes.inputBase, size: size, shape: shape === 'circular' ? 'rounded' : shape, children: ({ ref, ...rest }) => _jsxs(_Fragment, { children: [_jsx(BlockItem, { color: innerValue.current }), !!label &&
-                                _jsx("div", { className: classes.label, children: label }), _jsx("input", { ...rest, ...inputProps, ref: cloneRef(ref, inputRef), "data-hidden": "true" })] }) }) })] }));
+            }), _jsx(Popper, { css: colorPickerPopperStyle, defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange, trigger: ['click', 'enter'], placement: "bottomLeft", content: _jsx(Palette, { value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, children: _jsx(InputBase, { className: classes.inputBase, size: size, shape: shape === 'circular' ? 'rounded' : shape, children: ({ ref, ...rest }) => _jsxs(_Fragment, { children: [_jsx(BlockItem, { color: innerValue.current }), !!label &&
+                                _jsx("div", { className: classes.label, children: label }), _jsx("input", { ...rest, ...inputProps, ref: cloneRef(ref, inputProps?.ref), "data-hidden": "true" })] }) }) })] }));
 });
 function BlockItem({ color, onClick, selected }) {
     const light = useMemo(() => color.luminosity() >= .8, [color]);
@@ -28,7 +23,7 @@ function BlockItem({ color, onClick, selected }) {
         hex: color.hex(),
         alpha: color.alpha()
     }), [color]);
-    const showRipple = useTouchRipple(light ? 'disabled' : colorObject.hex);
+    const showRipple = useTouchRipple(light ? 'text.disabled' : colorObject.hex);
     return (_jsx("div", { className: classes.block, "data-selected": selected, "data-light": light, onClick: e => {
             onClick?.();
             showRipple(e.currentTarget);

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

@@ -1,7 +1,7 @@
 import { BubbleProps } from '../bubble';
 import { ItemPropType } from '../menu';
+import { ReactNode } from 'react';
 export interface ContextMenuProps extends Omit<BubbleProps, 'onClick'> {
-    items?: ItemPropType[];
-    onClick?(item: ItemPropType): void;
+    items?: (ItemPropType | ReactNode)[];
 }
-export declare function ContextMenu({ items, onClick, ...props }: ContextMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ContextMenu({ items, ...props }: ContextMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/contextMenu/contextMenu.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Bubble } from '../bubble';
 import { MenuItem } from '../menuItem';
-export function ContextMenu({ items, onClick, ...props }) {
+import { isValidElement } from 'react';
+export function ContextMenu({ items, ...props }) {
     const renderItems = (items) => {
-        return items?.map((p, i) => _jsx(MenuItem, { ...p, onClick: e => {
-                p.onClick?.(e);
-                onClick?.(p);
-            }, children: renderItems(p.children) }, p.value ?? i));
+        return items?.map((p, i) => {
+            return typeof p === 'object' && p && !isValidElement(p)
+                ? _jsx(MenuItem, { ...p, children: renderItems(p.children) }, p.value ?? i)
+                : p;
+        });
     };
     return (_jsx(Bubble, { placement: "bottomRight", showArrow: false, ...props, trigger: "contextMenu", content: props.content ?? renderItems(items) }));
 }

package/dist/esm/components/counter/counter.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import { classes, style } from './counter.style';
-import { classnames, useControlled } from '../../utils';
+import { clsx, useControlled } from '../../utils';
 import { Button } from '../button';
-import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
 import { Input } from '../input';
 import { Flex } from '../flex';
+import { Icon } from '../..';
+import { faMinus } from '@fortawesome/free-solid-svg-icons/faMinus';
+import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 export const Counter = memo(({ size, min = -Infinity, max = Infinity, step = 1, precision = 0, defaultValue = 0, value, onChange, decreaseProps, increaseProps, inputProps, ...props }) => {
     const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
     const commonButtonProps = {
@@ -16,14 +18,14 @@ export const Counter = memo(({ size, min = -Infinity, max = Infinity, step = 1,
     const clickHandler = (dir) => {
         setInnerValue(Math.max(min, Math.min(max, innerValue.current + dir * step)));
     };
-    return (_jsxs(Flex, { compact: true, ...props, css: style, className: classnames(classes.root, props.className), children: [_jsx(Button, { disabled: innerValue.current <= min, ...commonButtonProps, ...decreaseProps, onClick: e => {
+    return (_jsxs(Flex, { compact: true, ...props, css: style, className: clsx(classes.root, props.className), children: [_jsx(Button, { disabled: innerValue.current <= min, ...commonButtonProps, ...decreaseProps, onClick: e => {
                     decreaseProps?.onClick?.(e);
                     clickHandler(-1);
-                }, children: _jsx(MinusOutlined, {}) }), _jsx(Input, { type: "number", widthAdaptable: true, size: size, min: min, max: max, step: step, precision: precision, ...inputProps, className: classnames(classes.input, inputProps?.className), value: innerValue.current, onChange: e => {
+                }, children: _jsx(Icon, { icon: faMinus }) }), _jsx(Input, { type: "number", widthAdaptable: true, size: size, min: min, max: max, step: step, precision: precision, ...inputProps, className: clsx(classes.input, inputProps?.className), value: innerValue.current, onChange: e => {
                     inputProps?.onChange?.(e);
                     setInnerValue(+e.target.value);
                 } }), _jsx(Button, { disabled: innerValue.current >= max, ...commonButtonProps, ...increaseProps, onClick: e => {
                     increaseProps?.onClick?.(e);
                     clickHandler(1);
-                }, children: _jsx(PlusOutlined, {}) })] }));
+                }, children: _jsx(Icon, { icon: faPlus }) })] }));
 });

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

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode, Ref } from 'react';
-import { DIVProps, Id, Obj } from '../../types';
+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';
@@ -12,7 +12,7 @@ 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 ColumnType<R> {
+export interface CurdColumn<R extends RowType = RowType> extends Omit<ColumnType<R>, 'children'> {
     /** 在表格中隐藏，表明该列只用于filter或form */
     hideInTable?: boolean;
     filter?: CurdFormItemType | (() => CurdFormItemType);
@@ -26,7 +26,7 @@ export type LoadRowsReturn<R extends RowType> = {
 type EachRowType<R extends RowType, T> = T | ((row: R) => T);
 export interface CurdBaseProps<R extends RowType, F extends FormValue> extends DataGridBaseProps<R> {
     /** 默认属性会传递给DataGrid组件，外层包裹元素的属性使用wrapperProps */
-    wrapperProps?: DIVProps;
+    wrapperProps?: DivProps;
     wrapperRef?: Ref<HTMLDivElement>;
     /** 嵌入式样式通常用于Dialog或Card组件内 */
     variant?: 'standard' | 'embeded';

package/dist/esm/components/curd/curd.js

@@ -3,9 +3,8 @@ import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { DataGrid } from '../dataGrid';
 import { CurdFilter } from './curdFilter';
 import { classes, style } from './curd.style';
-import { classnames, cloneRef, useControlled, useCurdColumns, useDerivedState, useLoading, useSync } from '../../utils';
+import { clsx, cloneRef, useControlled, useCurdColumns, useDerivedState, useLoading, useSync } from '../../utils';
 import { Button } from '../button';
-import { DeleteOutlined, EditOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons';
 import { Tooltip } from '../tooltip';
 import { CurdColumnConfig } from './curdColumnConfig';
 import { CurdResizable } from './curdResizable';
@@ -15,6 +14,11 @@ import { CurdDialog } from './curdDialog';
 import { useAppContext } from '../app';
 import { BubbleConfirm } from '../bubbleConfirm';
 import { useSelectionContext } from '../selectionContext';
+import { Icon } from '../..';
+import { faTrashCan } from '@fortawesome/free-regular-svg-icons/faTrashCan';
+import { faPenToSquare } from '@fortawesome/free-regular-svg-icons/faPenToSquare';
+import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
+import { faRotateRight } from '@fortawesome/free-solid-svg-icons/faRotateRight';
 export const Curd = memo((props) => {
     const { 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, postData, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
     /**
@@ -56,11 +60,11 @@ export const Curd = memo((props) => {
                 const _updateProps = _updatable ? (typeof updateButtonProps === 'function' ? updateButtonProps(row) : updateButtonProps) : void 0;
                 const _deleteProps = _deletable ? (typeof deleteButtonProps === 'function' ? deleteButtonProps(row) : deleteButtonProps) : void 0;
                 return (_jsxs("div", { className: classes.control, children: [renderExtraControl?.(row), _updatable &&
-                            _jsx(Button, { prefix: _jsx(EditOutlined, {}), variant: "plain", ..._updateProps, onClick: e => {
+                            _jsx(Button, { prefix: _jsx(Icon, { icon: faPenToSquare }), variant: "plain", ..._updateProps, onClick: e => {
                                     _updateProps?.onClick?.(e);
                                     updateHandler(row);
                                 }, children: "\u7F16\u8F91" }), _deletable &&
-                            _jsx(BubbleConfirm, { title: `删除${dataName}`, content: `删除后不可恢复，确定要删除该${dataName || '数据'}吗？`, ...deleteConfirmProps, onConfirm: e => deleteHandler(row, e), children: _jsx(Button, { prefix: _jsx(DeleteOutlined, {}), variant: "plain", color: "error", ..._deleteProps, children: "\u5220\u9664" }) })] }));
+                            _jsx(BubbleConfirm, { title: `删除${dataName}`, content: `删除后不可恢复，确定要删除该${dataName || '数据'}吗？`, ...deleteConfirmProps, onConfirm: e => deleteHandler(row, e), children: _jsx(Button, { prefix: _jsx(Icon, { icon: faTrashCan }), variant: "plain", color: "error", ..._deleteProps, children: "\u5220\u9664" }) })] }));
             }
         };
         return [...columns || [], controlColumn];
@@ -116,11 +120,11 @@ export const Curd = memo((props) => {
         }
     }, props.loading);
     useEffect(() => {
-        innerLoadRows();
+        innerLoadRows().then();
     }, [innerPage.current, innerPageSize.current, innerOrderColumn.current, innerOrderType.current]);
     const reloadHandler = () => {
         onReload?.();
-        innerLoadRows();
+        innerLoadRows().then();
     };
     const syncLoadRows = useSync(innerLoadRows);
     /**
@@ -132,11 +136,11 @@ export const Curd = memo((props) => {
     const createHandler = (e) => {
         createButtonProps?.onClick?.(e);
         activeRow.current = void 0;
-        curdDialogRef.current.open();
+        curdDialogRef.current.open().then();
     };
     const updateHandler = (row) => {
         activeRow.current = row;
-        curdDialogRef.current.open(row);
+        curdDialogRef.current.open(row).then();
     };
     const { message } = useAppContext();
     const syncProps = useSync({ dialogProps, onCreate, onUpdate });
@@ -145,8 +149,8 @@ export const Curd = memo((props) => {
         dialogProps?.onFinish?.(formValue);
         if (activeRow.current) {
             await onUpdate?.(formValue, activeRow.current);
-            innerLoadRows();
-            message.success(updateName + '成功');
+            innerLoadRows().then();
+            message.success(updateName + '成功').then();
         }
         else {
             await onCreate?.(formValue);
@@ -155,22 +159,22 @@ export const Curd = memo((props) => {
                 setInnerPage(1);
             }
             else {
-                innerLoadRows();
+                innerLoadRows().then();
             }
-            message.success(createName + '成功');
+            message.success(createName + '成功').then();
         }
     }, []);
     const deleteHandler = async (row, e) => {
         deleteConfirmProps?.onConfirm?.(e);
         await onDelete?.(row);
-        innerLoadRows();
-        message.success(deleteName + '成功');
+        innerLoadRows().then();
+        message.success(deleteName + '成功').then();
     };
-    return (_jsxs("div", { ...wrapperProps, ref: wrapperRef, css: style, className: classnames(classes.root, wrapperProps?.className), "data-variant": variant, children: [renderFilterFn(), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
+    return (_jsxs("div", { ...wrapperProps, ref: wrapperRef, css: style, className: clsx(classes.root, wrapperProps?.className), "data-variant": variant, children: [renderFilterFn(), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
                 _jsxs("div", { className: classes.toolbar, children: [_jsxs("div", { className: classes.toolbarLeft, children: [creatable &&
-                                    _jsxs(Button, { prefix: _jsx(PlusOutlined, {}), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), _jsxs("div", { className: classes.toolbarRight, children: [!!toolbarRight &&
+                                    _jsxs(Button, { prefix: _jsx(Icon, { icon: faPlus }), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), _jsxs("div", { className: classes.toolbarRight, children: [!!toolbarRight &&
                                     _jsxs(_Fragment, { children: [toolbarRight, _jsx(Divider, { className: classes.divider, orientation: "vertical" })] }), reloadable &&
-                                    _jsx(Tooltip, { title: "\u5237\u65B0", children: _jsx(Button, { shape: "circular", variant: "text", color: "text", prefix: _jsx(ReloadOutlined, {}), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
+                                    _jsx(Tooltip, { title: "\u5237\u65B0", children: _jsx(Button, { shape: "circular", variant: "text", color: "text", prefix: _jsx(Icon, { icon: faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
                                     _jsx(CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
                                     _jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
                         ...props.tableProps,

package/dist/esm/components/curd/curdColumnConfig.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useMemo } from 'react';
 import { Button } from '../button';
-import { SettingOutlined } from '@ant-design/icons';
 import { Bubble } from '../bubble';
 import { classes, style } from './curdColumnConfig.style';
 import { MenuItem } from '../menuItem';
@@ -10,6 +9,8 @@ import { SortableItem } from '../sortableItem';
 import { DndContext } from '@dnd-kit/core';
 import { SortableContext } from '@dnd-kit/sortable';
 import { isUnset, onDndDragEnd, useDndSensors } from '../../utils';
+import { Icon } from '../..';
+import { faGear } from '@fortawesome/free-solid-svg-icons/faGear';
 export const CurdColumnConfig = memo(({ columns = [], innerVisible, setInnerVisible, setInnerOrder, }) => {
     const dragEndHandler = (e) => {
         const newColumns = onDndDragEnd(e, columns, '_key');
@@ -23,5 +24,5 @@ export const CurdColumnConfig = memo(({ columns = [], innerVisible, setInnerVisi
             ? [...o, key]
             : o.filter(k => k !== key));
     };
-    return (_jsx(Bubble, { css: style, placement: "bottomRight", content: _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: _jsxs("div", { className: classes.content, children: [_jsx("div", { className: classes.title, children: "\u5217\u8BBE\u7F6E" }), columns?.map((col, i) => _jsx(SortableItem, { id: col._key ?? i, component: MenuItem, className: classes.item, prefix: _jsx(Checkbox, { className: classes.checkbox, checked: !isUnset(col._key) && visibleSet.has(col._key), onChange: e => !isUnset(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), children: _jsx(Button, { shape: "circular", variant: "text", color: "text", children: _jsx(SettingOutlined, {}) }) }));
+    return (_jsx(Bubble, { css: style, placement: "bottomRight", content: _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: _jsxs("div", { className: classes.content, children: [_jsx("div", { className: classes.title, children: "\u5217\u8BBE\u7F6E" }), columns?.map((col, i) => _jsx(SortableItem, { id: col._key ?? i, component: MenuItem, className: classes.item, prefix: _jsx(Checkbox, { className: classes.checkbox, checked: !isUnset(col._key) && visibleSet.has(col._key), onChange: e => !isUnset(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), children: _jsx(Button, { shape: "circular", variant: "text", color: "text", children: _jsx(Icon, { icon: faGear }) }) }));
 });

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

@@ -6,9 +6,10 @@ import { Curd } from './curd';
 import { cloneRef, columnsToFormItem, isUnset, useControlled, useLoading } from '../../utils';
 import { Loading } from '../loading';
 import { Button } from '../button';
-import { CopyOutlined } from '@ant-design/icons';
 import { classes, dialogStyle } from './curd.style';
 import { PickerDialog } from '../pickerDialog';
+import { Icon } from '../..';
+import { faCopy } from '@fortawesome/free-regular-svg-icons/faCopy';
 export const CurdDialog = memo(({ ref, onFinish, 
 // 继承来的属性
 curdProps, ...props }) => {
@@ -18,19 +19,17 @@ curdProps, ...props }) => {
      * ref与promise部分
      */
     const innerFormRef = useRef(null);
-    const resolveFn = useRef(void 0);
-    const rejectFn = useRef(void 0);
+    const resolvers = useRef(void 0);
     const [innerOpen, setInnerOpen] = useControlled(props.defaultOpen, props.open);
     const closeHandler = (reason) => {
         if (reason === 'confirmed') {
             return;
         }
         props.onClose?.(reason);
-        rejectFn.current?.({
+        resolvers.current?.reject({
             type: 'canceled',
             value: innerFormRef.current.getFormValue()
         });
-        resolveFn.current = rejectFn.current = void 0;
         setInnerOpen(false);
     };
     useImperativeHandle(ref, () => ({
@@ -38,10 +37,8 @@ curdProps, ...props }) => {
             innerFormRef.current?.resetForm();
             setInnerOpen(true);
             setActiveRow(row);
-            return new Promise((resolve, reject) => {
-                resolveFn.current = resolve;
-                rejectFn.current = reject;
-            });
+            const { promise } = resolvers.current = Promise.withResolvers();
+            return promise;
         }
     }));
     /**
@@ -63,12 +60,12 @@ curdProps, ...props }) => {
      * ----------------------------------------------------------------
      * 结果处理与loading
      */
-    const confirmHandler = () => {
-        innerFormRef.current.submit();
+    const confirmHandler = async () => {
+        await innerFormRef.current.submit();
     };
     const [innerLoading, finishHandler] = useLoading(async (value) => {
         formProps?.onFinish?.(value);
-        resolveFn.current?.(value);
+        resolvers.current?.resolve(value);
         await onFinish?.(value);
         setInnerOpen(false);
     }, props.confirmLoading);
@@ -90,6 +87,6 @@ curdProps, ...props }) => {
     return (_jsxs(Dialog, { css: dialogStyle, width: 600, title: activeRow
             ? `${updateName}${dataName}${rowTitle ? ' - ' + rowTitle : ''}`
             : _jsxs("div", { className: classes.dialogTitle, children: [_jsxs("span", { children: [createName, dataName] }), copyable &&
-                        _jsxs(Button, { variant: "plain", prefix: _jsx(CopyOutlined, {}), onClick: () => pickerDialogRef.current.open(), children: ["\u4ECE\u5DF2\u6709", dataName || '数据', "\u590D\u5236"] })] }), ...props, open: innerOpen.current, onClose: closeHandler, onConfirm: confirmHandler, confirmLoading: innerLoading.current, children: [_jsx(Loading, { loading: transforming.current, children: _jsx(Form, { labelWidth: "20%", ...formProps, ref: cloneRef(formRef, innerFormRef), onFinish: finishHandler, children: renderedFormItems }) }), copyable &&
+                        _jsxs(Button, { variant: "plain", prefix: _jsx(Icon, { icon: faCopy }), onClick: () => pickerDialogRef.current.open(), children: ["\u4ECE\u5DF2\u6709", dataName || '数据', "\u590D\u5236"] })] }), ...props, open: innerOpen.current, onClose: closeHandler, onConfirm: confirmHandler, confirmLoading: innerLoading.current, children: [_jsx(Loading, { open: transforming.current, children: _jsx(Form, { labelWidth: "20%", ...formProps, ref: cloneRef(formRef, innerFormRef), onFinish: finishHandler, children: renderedFormItems }) }), copyable &&
                 _jsx(PickerDialog, { ref: pickerDialogRef, onToggle: copiedHandler, children: _jsx(Curd, { ...curdProps, variant: "embeded", copyable: false, creatable: false, updatable: false, deletable: false }) })] }));
 });

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

@@ -2,12 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/reac
 import { isValidElement, memo, useMemo, useRef, useState } from 'react';
 import { Form, FormItem } from '../form';
 import { classes } from './curd.style';
-import { classnames, cloneRef, columnsToFilterItem } from '../../utils';
+import { clsx, cloneRef, columnsToFilterItem } from '../../utils';
 import { Grid } from '../grid';
 import { Button } from '../button';
-import { DownOutlined, FilterOutlined } from '@ant-design/icons';
 import { Collapse } from '../transitionBase';
 import { useTheme } from '../theme';
+import { Icon } from '../..';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
+import { faFilter } from '@fortawesome/free-solid-svg-icons/faFilter';
 export const CurdFilter = memo(({ ref, columns, expandable, showButton, renderConditions, buttonProps, onFilter, columnCount = 3, ...props }) => {
     const { spacing } = useTheme();
     const items = useMemo(() => {
@@ -43,12 +45,12 @@ export const CurdFilter = memo(({ ref, columns, expandable, showButton, renderCo
      * 已生效的筛选条件
      */
     const [filteredConditions, setFilteredConditions] = useState({});
-    return (_jsxs(_Fragment, { children: [_jsx(Form, { ...props, ref: cloneRef(ref, formRef), className: classnames(classes.filter, props.className), columnCount: columnCount, variant: "plain", onChange: changeHandler, children: !!items?.length &&
+    return (_jsxs(_Fragment, { children: [_jsx(Form, { ...props, ref: cloneRef(ref, formRef), className: clsx(classes.filter, props.className), columnCount: columnCount, variant: "plain", onChange: changeHandler, children: !!items?.length &&
                     _jsxs(_Fragment, { children: [expandable
                                 ? _jsx(Collapse, { className: classes.filterGridContainer, in: expanded, collapsedSize: () => firstItemRef.current?.offsetHeight || 56, appear: false, children: renderedGrid })
                                 : renderedGrid, (expandable || showButton) &&
                                 _jsxs("div", { className: classes.filterControl, children: [expandable &&
-                                            _jsx(Button, { variant: "text", suffix: _jsx(DownOutlined, { style: { rotate: expanded ? '180deg' : void 0 } }), onClick: () => setExpanded(o => !o), children: expanded ? '收起' : '展开' }), showButton &&
-                                            _jsx(Button, { prefix: _jsx(FilterOutlined, {}), variant: "outlined", ...buttonProps, onClick: clickHandler, children: buttonProps?.children ?? '筛选' })] })] }) }), !!renderConditions &&
+                                            _jsx(Button, { variant: "text", suffix: _jsx(Icon, { icon: faChevronDown, style: { rotate: expanded ? '180deg' : void 0 } }), onClick: () => setExpanded(o => !o), children: expanded ? '收起' : '展开' }), showButton &&
+                                            _jsx(Button, { prefix: _jsx(Icon, { icon: faFilter }), variant: "outlined", ...buttonProps, onClick: clickHandler, children: buttonProps?.children ?? '筛选' })] })] }) }), !!renderConditions &&
                 _jsxs("div", { className: classes.filtered, children: [_jsx("div", { className: classes.filteredTitle, children: "\u5DF2\u7B5B\u9009\uFF1A" }), renderConditions(filteredConditions, formRef.current)] })] }));
 });

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

@@ -4,7 +4,8 @@ import { Tooltip } from '../tooltip';
 import { Bubble } from '../bubble';
 import { MenuItem } from '../menuItem';
 import { Button } from '../button';
-import { ColumnHeightOutlined } from '@ant-design/icons';
+import { Icon } from '../..';
+import { faArrowsUpDown } from '@fortawesome/free-solid-svg-icons/faArrowsUpDown';
 export const CurdResizable = memo(({ innerSize, setInnerSize }) => {
-    return (_jsx(Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", children: _jsx(Bubble, { placement: "bottom", content: _jsxs(_Fragment, { children: [_jsx(MenuItem, { value: "small", label: "\u5C0F", selected: innerSize === 'small', onClick: () => setInnerSize('small') }), _jsx(MenuItem, { value: "medium", label: "\u4E2D", selected: innerSize === 'medium', onClick: () => setInnerSize('medium') }), _jsx(MenuItem, { value: "large", label: "\u5927", selected: innerSize === 'large', onClick: () => setInnerSize('large') })] }), children: _jsx(Button, { shape: "circular", variant: "text", color: "text", children: _jsx(ColumnHeightOutlined, {}) }) }) }));
+    return (_jsx(Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", children: _jsx(Bubble, { placement: "bottom", content: _jsxs(_Fragment, { children: [_jsx(MenuItem, { value: "small", label: "\u5C0F", selected: innerSize === 'small', onClick: () => setInnerSize('small') }), _jsx(MenuItem, { value: "medium", label: "\u4E2D", selected: innerSize === 'medium', onClick: () => setInnerSize('medium') }), _jsx(MenuItem, { value: "large", label: "\u5927", selected: innerSize === 'large', onClick: () => setInnerSize('large') })] }), children: _jsx(Button, { shape: "circular", variant: "text", color: "text", children: _jsx(Icon, { icon: faArrowsUpDown }) }) }) }));
 });

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

@@ -0,0 +1,10 @@
+import { ThCellProps } from '../table';
+import { ComponentType, ReactNode, RefObject } from 'react';
+export declare function ColumnResizeContext({ columnResizable, children }: {
+    columnResizable: boolean;
+    children(ref: {
+        scrollerRef: RefObject<HTMLDivElement | null>;
+        tableRef: RefObject<HTMLTableElement | null>;
+    }): ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function useRenderHead<T extends ReactNode>(render: (Column: ComponentType<ThCellProps>) => T): T;

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { ThCell } from '../table';
+import { createContext, useContext, useRef } from 'react';
+import { classes } from './dataGrid.style';
+import { useDraggableHandle } from '../../utils';
+const ColumnResizeContextProvider = createContext({
+    columnResizable: false,
+    columnRefs: { current: [] },
+    scrollToEnd() {
+    }
+});
+export function ColumnResizeContext({ columnResizable, children }) {
+    const scrollerRef = useRef(null);
+    const tableRef = useRef(null);
+    const columnRefs = useRef([]);
+    const scrollToEnd = () => {
+        scrollerRef.current.scrollLeft = scrollerRef.current.scrollWidth;
+    };
+    return (_jsx(ColumnResizeContextProvider, { value: { columnResizable, columnRefs, scrollToEnd }, children: children({ scrollerRef, tableRef }) }));
+}
+export function useRenderHead(render) {
+    const { columnRefs } = useContext(ColumnResizeContextProvider);
+    columnRefs.current = [];
+    return render(ResizableColumn);
+}
+function ResizableColumn(props) {
+    const { columnResizable, columnRefs, scrollToEnd } = useContext(ColumnResizeContextProvider);
+    const cellRef = useRef(null);
+    const findNext = () => {
+        const index = columnRefs.current.indexOf(cellRef.current);
+        let next = columnRefs.current[index + 1];
+        if (next?.classList.contains(classes.selectable)) {
+            next = columnRefs.current[index + 2];
+        }
+        return next;
+    };
+    const draggableHandle = useDraggableHandle({
+        onDragStart(e) {
+            const next = findNext();
+            return {
+                startX: e.clientX,
+                selfStartWidth: cellRef.current.offsetWidth,
+                nextStartWidth: next?.offsetWidth
+            };
+        },
+        onDrag({ deltaX, startData }) {
+            const next = findNext();
+            cellRef.current.style.width = startData.selfStartWidth + deltaX + 'px';
+            if (next) {
+                next.style.width = startData.nextStartWidth - deltaX + 'px';
+            }
+            else {
+                scrollToEnd();
+            }
+        }
+    });
+    if (!columnResizable) {
+        return _jsx(ThCell, { ...props });
+    }
+    return (_jsxs(ThCell, { ...props, ref: r => {
+            if (r) {
+                columnRefs.current.push(r);
+                cellRef.current = r;
+            }
+        }, children: [props.children, _jsx("div", { className: classes.resizeHandle, ...draggableHandle })] }));
+}

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

@@ -1,50 +1,47 @@
-import React, { ReactElement, ReactNode } from 'react';
-import { DIVProps, Id, Obj } from '../../types';
-import { FieldPath } from '../../utils';
-import { TableProps } from '../table';
-import { PaginationProps } from '../pagination';
+import { JSX, ReactElement, ReactNode } from 'react';
+import { DivProps, Id, Obj, ToRequired } from '../../types';
 import { SelectionContextProps } from '../selectionContext';
+import { PaginationProps } from '../pagination';
+import { TableProps } from '../table';
 import { CheckboxProps } from '../checkbox';
 import { RadioProps } from '../radio';
+import { FieldPath } from '../../utils';
 export type RowType = Obj;
-export interface ColumnType<R extends RowType = RowType> extends Omit<React.JSX.IntrinsicElements['td'], 'key' | 'ref' | 'title' | 'children'>, Omit<React.JSX.IntrinsicElements['th'], 'key' | 'ref' | 'title' | 'children'> {
+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'> {
     title?: ReactNode;
     /** 若不指定key，默认使用{@link field}作为key */
     key?: string | number;
-    /** 是否将列黏性固定在左侧，若指定number|string类型，表示left的值 */
-    stickyLeft?: boolean | number | string;
-    /** 是否将列黏性固定在右侧，若指定number|string类型，表示right的值 */
-    stickyRight?: boolean | number | string;
     children?: ColumnType<R>[];
+    /** 是否将列固定在左侧或右侧 */
+    sticky?: 'left' | 'right';
     /** 指定children后，下列属性均不生效 */
     field?: FieldPath;
     render?(row: R, index?: number, rows?: R[]): ReactNode;
     /** 指定为true时表示使用服务端排序，组件只做样式处理，不做数据排序处理；本地排序需指定 “正序” 的排序方法，倒序会自动处理 */
     sorter?: boolean | ((a: R, b: R) => number);
-    /** @private 内部使用 */
+    /** @private 内部使用，在{@link useDataGridColumns}内赋值 */
     _key?: string | number;
-    /** @private 内部使用 */
-    _colSpan?: number;
-    /** @private 内部使用 */
+    /** @private 内部使用，在{@link DataGridHead}内计算 */
     _negativeRowSpan?: number;
 }
 type DataGridSharedProps<R extends RowType> = {
-    /** 数据的主键名，默认为"id" */
+    rowProps?(row: R, index: number, rows: R[]): JSX.IntrinsicElements['tr'];
+    /** 数据的主键名，默认为`id` */
     primaryKey?: keyof R;
     /**
-     * 当数据中存在该字段，则会渲染可展开的子行；
-     * children允许的值类型 @type {R[] | ReactNode | ((parent: R, expanded: boolean) => ReactNode)}
+     * 当数据中存在该字段，则会渲染可展开的子行，默认为`null`表示不使用子行功能,
+     * children允许的值类型：
+     * @types {R[] | ReactNode | ((parent: R, expanded: boolean) => ReactNode)}
      */
-    childrenKey?: keyof R;
+    childrenKey?: keyof R | null;
+    /** 点击行时是否触发选中，默认为`true` */
+    clickRowToSelect?: boolean;
+    /** 子行缩进，默认为`24` */
     indent?: number;
     renderExpandIcon?(key: Id, isExpand: boolean, expanded: Id[]): ReactNode;
-    rowProps?(row: R, index: number, rows: R[]): React.JSX.IntrinsicElements['tr'];
-    /** 点击行时是否触发选中，默认为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'> {
+export interface DataGridBaseProps<R extends RowType> extends DataGridSharedProps<R>, Omit<DivProps, 'defaultValue' | 'onChange'> {
     columns?: (ColumnType<R> | symbol)[];
     rows?: R[];
     defaultOrderColumn?: Id;
@@ -55,25 +52,30 @@ export interface DataGridBaseProps<R extends RowType> extends DataGridSharedProp
     selectable?: boolean;
     /**
      * 行之间的关系
-     * @enum {"dependent"}：会自动判断子父行的选中关系。
-     * @enum {"standalone"}：所有行相互独立
+     * @enum {'dependent'}：会自动判断子父行的选中关系。
+     * @enum {'standalone'}：所有行相互独立
      * 默认为"dependent"
      */
     relation?: SelectionContextProps<R>['relation'];
     integration?: SelectionContextProps<R>['integration'];
     /** 是否允许全选，默认为true */
     allowSelectAll?: boolean;
+    selectorProps?(row: R, index: number, rows: R[]): CheckboxProps | RadioProps;
     defaultExpanded?: Id[];
     expanded?: Id[];
     onExpandedChange?(expanded: Id[], key: Id, isExpand: boolean): void;
-    loading?: boolean;
     /** 是否内置翻页，默认为true */
     paginatable?: boolean;
     paginationProps?: PaginationProps;
     renderPagination?(props: PaginationProps): ReactNode;
+    loading?: boolean;
+    emptyPlaceholder?: ReactNode;
+    /** 是否可以拖拽调整列宽，默认为`false`，开启此功能后表头分组功能将失效 */
+    columnResizable?: boolean;
     /** 传递给<Table />的属性 */
-    bordered?: boolean;
-    striped?: boolean;
+    size?: TableProps['size'];
+    bordered?: TableProps['bordered'];
+    striped?: TableProps['striped'];
     tableProps?: TableProps;
 }
 export interface DataGridSingleProps<R extends RowType, V extends Id = Id> extends DataGridBaseProps<R> {
@@ -89,34 +91,12 @@ export interface DataGridMultipleProps<R extends RowType, V extends Id = Id> ext
     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[]): React.JSX.IntrinsicElements["tr"];
-    /** 点击行时是否触发选中，默认为true */
-    clickRowToSelect?: boolean;
-    selectorProps?(row: RowType, index: number, rows: RowType[]): CheckboxProps | RadioProps;
-    primaryKey: keyof RowType;
-    indent: number;
+interface IDataGridContext<R extends RowType> extends ToRequired<DataGridSharedProps<R>, 'primaryKey' | 'childrenKey' | 'clickRowToSelect' | 'indent'> {
     expandedSet: Set<Id>;
-};
+    flattedColumns: (symbol | ColumnType<R>)[] | undefined;
+    toggleExpanded(key: Id): void;
+}
+export declare function useDataGridContext<R extends RowType>(): IDataGridContext<R>;
 export declare const DataGrid: {
     <R extends RowType, V extends Id = Id>(props: DataGridProps<R, V>): ReactElement;
     EXPAND_COLUMN: symbol;