@canlooks/can-ui 0.0.110 → 0.0.112

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

@@ -78,7 +78,7 @@ exports.Curd = (0, react_1.memo)((props) => {
             return columns;
         }
         const controlColumn = {
-            key: '$control',
+            key: utils_1.CONTROL_COLUMN_KEY,
             title: controlColumnTitle,
             render(row) {
                 const _updatable = typeof updatable === 'function' ? updatable(row) : updatable;

package/dist/cjs/components/image/image.js

@@ -47,6 +47,6 @@ exports.Image = (0, react_1.memo)(({ src, fallback, onLoad, onError, renderLoadi
                 }, onLoad: loadHandler, onError: errorHandler }), loading.current &&
                 (renderLoading ?? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: image_style_1.classes.skeleton })), !!renderedActions && !failed.current &&
                 (0, jsx_runtime_1.jsx)("div", { className: image_style_1.classes.mask, children: renderedActions }), previewable && src &&
-                (0, jsx_runtime_1.jsx)(gallery_1.Gallery, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen })] }));
+                (0, jsx_runtime_1.jsx)(gallery_1.Gallery, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen, onPointerDown: e => e.stopPropagation() })] }));
 });
 exports.Image.Gallery = gallery_1.Gallery;

package/dist/cjs/components/pinchable/pinchable.js

@@ -15,12 +15,12 @@ exports.Pinchable = (({ component: Component = 'div', ref, gestureOptions, defau
                 zoomFn(innerScale.current * .5);
             };
             wrapperRef.current.zoomTo = zoomFn;
-            wrapperRef.current.rotate =
-                wrapperRef.current.rotateLeft = () => {
-                    rotateFn(innerRotate.current - 90);
-                };
+            wrapperRef.current.rotate = rotateFn;
+            wrapperRef.current.rotateLeft = () => {
+                rotateFn(innerRotate.current - 90);
+            };
             wrapperRef.current.rotateRight = () => {
-                rotateFn(innerRotate.current + 90);
+                rotateFn(innerRotate.current - 90);
             };
             wrapperRef.current.reset = resetAll;
         }
@@ -134,7 +134,7 @@ exports.Pinchable = (({ component: Component = 'div', ref, gestureOptions, defau
         resetZoom(false);
         setInnerRotate(0);
     };
-    const doubleClickHandler = (e) => {
+    const onDoubleClick = (e) => {
         childrenProps.onDoubleClick?.(e);
         if (innerScale.current < 1.5) {
             zoomFn(3, e.clientX, e.clientY);
@@ -143,12 +143,16 @@ exports.Pinchable = (({ component: Component = 'div', ref, gestureOptions, defau
             resetZoom();
         }
     };
-    const wheelHandler = (e) => {
+    const onWheel = (e) => {
         childrenProps.onMouseWheel?.(e);
         e.deltaY > 0
             ? zoomFn(innerScale.current * .8, e.clientX, e.clientY)
             : zoomFn(innerScale.current * 1.2, e.clientX, e.clientY);
     };
+    const onTransitionEnd = (e) => {
+        e.currentTarget.dataset.transition = 'false';
+        setInnerRotate(innerRotate.current % 360);
+    };
     return ((0, jsx_runtime_1.jsx)(Component, { ...props, ref: wrapperRef, css: pinchable_style_1.style, className: (0, utils_1.clsx)(pinchable_style_1.classes.root, props.className), ...pinchableHandles, children: (0, react_1.cloneElement)(children, {
             ref: (0, utils_1.cloneRef)(contentRef, childrenProps.ref),
             className: (0, utils_1.clsx)(pinchable_style_1.classes.content, childrenProps.className),
@@ -160,8 +164,8 @@ exports.Pinchable = (({ component: Component = 'div', ref, gestureOptions, defau
                 transformOrigin: 'center'
             },
             ...draggableHandles,
-            onDoubleClick: doubleClickHandler,
-            onWheel: wheelHandler,
-            onTransitionEnd: e => e.currentTarget.dataset.transition = 'false'
+            onDoubleClick,
+            onWheel,
+            onTransitionEnd
         }) }));
 });

package/dist/cjs/components/sortableItem/sortableItem.js

@@ -6,6 +6,9 @@ const react_1 = require("react");
 const sortable_1 = require("@dnd-kit/sortable");
 const utilities_1 = require("@dnd-kit/utilities");
 const utils_1 = require("../../utils");
+const react_2 = require("@emotion/react");
+const treeDnd_style_1 = require("../tree/treeDnd.style");
+const sortableItem_style_1 = require("./sortableItem.style");
 exports.SortableItem = (({ component: Component = 'div', id, disabled, sortableArguments, ...props }) => {
     const { attributes, isDragging, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({
         ...sortableArguments,
@@ -30,9 +33,9 @@ exports.SortableItem = (({ component: Component = 'div', id, disabled, sortableA
         addEventListener('pointerup', onPointerUp);
     }, []);
     (0, react_1.useEffect)(() => removeListener, []);
-    return ((0, jsx_runtime_1.jsx)(Component, { ...attributes, ...listeners, ...props, ref: (0, utils_1.cloneRef)(setNodeRef, props.ref), style: {
-            transform: utilities_1.CSS.Transform.toString(transform),
-            transition,
-            ...props.style
-        }, onTouchStart: disabled ? void 0 : onTouchStart, "data-dragging": isDragging }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Component, { ...attributes, ...listeners, ...props, ref: (0, utils_1.cloneRef)(setNodeRef, props.ref), css: sortableItem_style_1.style, className: (0, utils_1.clsx)(sortableItem_style_1.classes.root, props.className), style: {
+                    transform: utilities_1.CSS.Transform.toString(transform),
+                    transition,
+                    ...props.style
+                }, onTouchStart: disabled ? void 0 : onTouchStart, "data-dragging": isDragging }), isDragging && (0, jsx_runtime_1.jsx)(react_2.Global, { styles: treeDnd_style_1.globalGrabbingStyle })] }));
 });

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

@@ -0,0 +1,5 @@
+export declare const classes: {
+    root: string;
+};
+export declare const style: import("@emotion/react").SerializedStyles;
+export declare const globalGrabbingStyle: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.globalGrabbingStyle = exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineInnerClasses)('sortable-item');
+exports.style = (0, react_1.css) `
+    cursor: grab;
+    
+    &:active {
+        cursor: grabbing;
+    }
+`;
+exports.globalGrabbingStyle = (0, react_1.css) `
+    * {
+        cursor: grabbing;
+    }
+`;

package/dist/cjs/components/tree/treeDnd.js

@@ -5,6 +5,7 @@ exports.useTreeDndContext = useTreeDndContext;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const treeDnd_style_1 = require("./treeDnd.style");
+const react_2 = require("@emotion/react");
 exports.TreeDndContext = (0, react_1.createContext)({});
 function useTreeDndContext() {
     return (0, react_1.useContext)(exports.TreeDndContext);
@@ -13,8 +14,8 @@ exports.TreeDnd = (0, react_1.memo)(({ sortable, showDragHandle, onSort, childre
     const dragging = (0, react_1.useState)(void 0);
     const overing = (0, react_1.useRef)(void 0);
     const placement = (0, react_1.useRef)(void 0);
-    return ((0, jsx_runtime_1.jsx)(exports.TreeDndContext, { value: {
+    return ((0, jsx_runtime_1.jsxs)(exports.TreeDndContext, { value: {
             sortable, showDragHandle, onSort,
             dragging, overing, placement
-        }, children: (0, jsx_runtime_1.jsx)("div", { className: treeDnd_style_1.treeDndClasses.levelBlock, children: children }) }));
+        }, children: [(0, jsx_runtime_1.jsx)("div", { className: treeDnd_style_1.treeDndClasses.levelBlock, children: children }), !!dragging[0] && (0, jsx_runtime_1.jsx)(react_2.Global, { styles: treeDnd_style_1.globalGrabbingStyle })] }));
 });

package/dist/cjs/components/tree/treeDnd.style.d.ts

@@ -13,3 +13,4 @@ export declare const treeDndClasses: {
 export declare function useStyle({ indent }: {
     indent: number;
 }): import("@emotion/react").SerializedStyles;
+export declare const globalGrabbingStyle: import("@emotion/react").SerializedStyles;

package/dist/cjs/components/tree/treeDnd.style.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.treeDndClasses = void 0;
+exports.globalGrabbingStyle = exports.treeDndClasses = void 0;
 exports.useStyle = useStyle;
 const tslib_1 = require("tslib");
 const utils_1 = require("../../utils");
@@ -191,3 +191,8 @@ function useStyle({ indent }) {
         }
     `, [indent]);
 }
+exports.globalGrabbingStyle = (0, react_1.css) `
+    * {
+        cursor: grabbing;
+    }
+`;

package/dist/cjs/components/tree/treeNode.js

@@ -64,6 +64,7 @@ exports.TreeNode = (0, react_1.memo)(({ id, label, prefix, suffix, disabled, _le
     const pointerLeavePredecessor = (e) => {
         inactiveBlock(e.currentTarget);
     };
+    const overingTimeout = (0, react_1.useRef)(void 0);
     const activeBlock = (el, _placement, upLevel = 0) => {
         if (_placement === 'parent') {
             let i = upLevel;
@@ -93,6 +94,13 @@ exports.TreeNode = (0, react_1.memo)(({ id, label, prefix, suffix, disabled, _le
                 return true;
             }
         });
+        // 如果有children且为折叠状态，over在该节点上一定时间后，需要展开该节点
+        if (hasChildren && !currentExpanded) {
+            overingTimeout.current ||= setTimeout(() => {
+                overingTimeout.current = void 0;
+                toggleExpanded(id);
+            }, 600);
+        }
     };
     const inactiveBlock = (el) => {
         if (el) {
@@ -105,6 +113,10 @@ exports.TreeNode = (0, react_1.memo)(({ id, label, prefix, suffix, disabled, _le
             el.dataset.active = 'false';
         });
         overing.current = void 0;
+        if (overingTimeout.current) {
+            clearTimeout(overingTimeout.current);
+            overingTimeout.current = void 0;
+        }
     };
     /**
      * ---------------------------------------------------------------------

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

@@ -14,6 +14,7 @@ export declare function columnsToFilterItem(columns?: (CurdColumn<any> | symbol)
  * @param row
  */
 export declare function columnsToFormItem(columns?: (CurdColumn<any> | symbol)[], row?: Obj): (ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | CurdFormItemProps)[] | undefined;
+export declare const CONTROL_COLUMN_KEY = "$control";
 /**
  * 统一处理Columns
  */

package/dist/cjs/utils/curd.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.CONTROL_COLUMN_KEY = void 0;
 exports.columnsToFilterItem = columnsToFilterItem;
 exports.columnsToFormItem = columnsToFormItem;
 exports.useCurdColumns = useCurdColumns;
@@ -58,6 +59,7 @@ function columnsTransfer(columns, type = 'filter', row) {
     })
         .sort((a, b) => (a.order || 0) - (b.order || 0));
 }
+exports.CONTROL_COLUMN_KEY = '$control';
 /**
  * 统一处理Columns
  */
@@ -68,8 +70,20 @@ function useCurdColumns({ columns, columnConfigurable }) {
     }
     let { defaultVisible, visible, onVisibleChange, defaultOrder, order, onOrderChange } = columnConfigurable;
     if (!defaultVisible || !defaultOrder) {
-        const defaultKeys = columns?.flatMap((col) => col.hideInTable ? [] : (col._key ?? [])) || [];
-        defaultKeys.push('$control');
+        let hasControlColumn = false;
+        const defaultKeys = columns?.flatMap((col) => {
+            if (col.hideInTable) {
+                return [];
+            }
+            if (col._key) {
+                if (col._key === exports.CONTROL_COLUMN_KEY) {
+                    hasControlColumn = true;
+                }
+                return col._key;
+            }
+            return [];
+        }) || [];
+        !hasControlColumn && defaultKeys.push(exports.CONTROL_COLUMN_KEY);
         defaultVisible ||= defaultKeys;
         defaultOrder ||= defaultKeys;
     }

package/dist/cjs/utils/tree.d.ts

@@ -1,4 +1,5 @@
 import { Id, Obj } from '../types';
+import { NodeType, SortInfo } from '../components/tree';
 /**
  * ------------------------------------------------------------------------
  * 统一处理树形搜索
@@ -25,3 +26,11 @@ export declare function useTreeSearch<N extends Obj, V extends Id = Id>({ nodes,
     setInnerSearchValue: import("react").Dispatch<import("react").SetStateAction<string>>;
     filteredTreeData: N[] | undefined;
 };
+/**
+ * 得到排序后的树结构
+ */
+export declare function sortTreeNodes<N extends NodeType<V>, V extends Id = Id>(props: {
+    nodes: N[];
+    primaryKey?: keyof N;
+    childrenKey?: keyof N;
+}, sortInfo: SortInfo<V>): N[];

package/dist/cjs/utils/tree.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTreeSearch = useTreeSearch;
+exports.sortTreeNodes = sortTreeNodes;
 const react_1 = require("react");
 const hooks_1 = require("./hooks");
 function useTreeSearch({ nodes, primaryKey = 'id', labelKey = 'label', childrenKey = 'children', searchTokenKey = 'searchToken', defaultExpanded = [], expanded, onExpandedChange, defaultSearchValue = '', searchValue, onSearchChange }) {
@@ -61,3 +62,58 @@ function useTreeSearch({ nodes, primaryKey = 'id', labelKey = 'label', childrenK
         filteredTreeData
     };
 }
+/**
+ * 得到排序后的树结构
+ */
+function sortTreeNodes(props, sortInfo) {
+    let { nodes, primaryKey = 'id', childrenKey = 'children' } = props;
+    const { source, destination, placement } = sortInfo;
+    nodes = structuredClone(nodes);
+    const pickUp = (nodes) => {
+        if (!nodes?.length) {
+            return null;
+        }
+        for (let i = 0, { length } = nodes; i < length; i++) {
+            const node = nodes[i];
+            if (node[primaryKey] === source) {
+                nodes.splice(i, 1);
+                return node;
+            }
+            const foundInChildren = pickUp(node[childrenKey]);
+            if (foundInChildren) {
+                return foundInChildren;
+            }
+        }
+        return null;
+    };
+    pickUp(nodes);
+    const putDown = (nodes) => {
+        if (!nodes?.length) {
+            return false;
+        }
+        for (let i = 0, { length } = nodes; i < length; i++) {
+            const node = nodes[i];
+            if (node[primaryKey] === destination) {
+                switch (placement) {
+                    case 'before':
+                        nodes.splice(i, 0, node);
+                        return true;
+                    case 'after':
+                        nodes.splice(i + 1, 0, node);
+                        return true;
+                    default:
+                        node.children ||= [];
+                        node.children.push(node);
+                        return true;
+                }
+            }
+            const foundInChildren = pickUp(node[childrenKey]);
+            if (foundInChildren) {
+                return foundInChildren;
+            }
+        }
+        return false;
+    };
+    putDown(nodes);
+    return nodes;
+}

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

@@ -4,7 +4,7 @@ import { DataGrid } from '../dataGrid';
 import { Form } from '../form';
 import { CurdFilterable } from './curdFilterable';
 import { classes, style } from './curd.style';
-import { clsx, useControlled, useCurdColumns, useDerivedState, useLoading, useSync, mergeComponentProps } from '../../utils';
+import { clsx, useControlled, useCurdColumns, useDerivedState, useLoading, useSync, mergeComponentProps, CONTROL_COLUMN_KEY } from '../../utils';
 import { Button } from '../button';
 import { Tooltip } from '../tooltip';
 import { CurdColumnConfig } from './curdColumnConfig';
@@ -75,7 +75,7 @@ export const Curd = memo((props) => {
             return columns;
         }
         const controlColumn = {
-            key: '$control',
+            key: CONTROL_COLUMN_KEY,
             title: controlColumnTitle,
             render(row) {
                 const _updatable = typeof updatable === 'function' ? updatable(row) : updatable;

package/dist/esm/components/image/image.js

@@ -44,6 +44,6 @@ export const Image = memo(({ src, fallback, onLoad, onError, renderLoading, alt
                 }, onLoad: loadHandler, onError: errorHandler }), loading.current &&
                 (renderLoading ?? _jsx(Skeleton, { className: classes.skeleton })), !!renderedActions && !failed.current &&
                 _jsx("div", { className: classes.mask, children: renderedActions }), previewable && src &&
-                _jsx(Gallery, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen })] }));
+                _jsx(Gallery, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen, onPointerDown: e => e.stopPropagation() })] }));
 });
 Image.Gallery = Gallery;

package/dist/esm/components/pinchable/pinchable.js

@@ -12,12 +12,12 @@ export const Pinchable = (({ component: Component = 'div', ref, gestureOptions,
                 zoomFn(innerScale.current * .5);
             };
             wrapperRef.current.zoomTo = zoomFn;
-            wrapperRef.current.rotate =
-                wrapperRef.current.rotateLeft = () => {
-                    rotateFn(innerRotate.current - 90);
-                };
+            wrapperRef.current.rotate = rotateFn;
+            wrapperRef.current.rotateLeft = () => {
+                rotateFn(innerRotate.current - 90);
+            };
             wrapperRef.current.rotateRight = () => {
-                rotateFn(innerRotate.current + 90);
+                rotateFn(innerRotate.current - 90);
             };
             wrapperRef.current.reset = resetAll;
         }
@@ -131,7 +131,7 @@ export const Pinchable = (({ component: Component = 'div', ref, gestureOptions,
         resetZoom(false);
         setInnerRotate(0);
     };
-    const doubleClickHandler = (e) => {
+    const onDoubleClick = (e) => {
         childrenProps.onDoubleClick?.(e);
         if (innerScale.current < 1.5) {
             zoomFn(3, e.clientX, e.clientY);
@@ -140,12 +140,16 @@ export const Pinchable = (({ component: Component = 'div', ref, gestureOptions,
             resetZoom();
         }
     };
-    const wheelHandler = (e) => {
+    const onWheel = (e) => {
         childrenProps.onMouseWheel?.(e);
         e.deltaY > 0
             ? zoomFn(innerScale.current * .8, e.clientX, e.clientY)
             : zoomFn(innerScale.current * 1.2, e.clientX, e.clientY);
     };
+    const onTransitionEnd = (e) => {
+        e.currentTarget.dataset.transition = 'false';
+        setInnerRotate(innerRotate.current % 360);
+    };
     return (_jsx(Component, { ...props, ref: wrapperRef, css: style, className: clsx(classes.root, props.className), ...pinchableHandles, children: cloneElement(children, {
             ref: cloneRef(contentRef, childrenProps.ref),
             className: clsx(classes.content, childrenProps.className),
@@ -157,8 +161,8 @@ export const Pinchable = (({ component: Component = 'div', ref, gestureOptions,
                 transformOrigin: 'center'
             },
             ...draggableHandles,
-            onDoubleClick: doubleClickHandler,
-            onWheel: wheelHandler,
-            onTransitionEnd: e => e.currentTarget.dataset.transition = 'false'
+            onDoubleClick,
+            onWheel,
+            onTransitionEnd
         }) }));
 });

package/dist/esm/components/sortableItem/sortableItem.js

@@ -1,8 +1,11 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useCallback, useEffect, useRef } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { cloneRef, useSync } from '../../utils';
+import { cloneRef, clsx, useSync } from '../../utils';
+import { Global } from '@emotion/react';
+import { globalGrabbingStyle } from '../tree/treeDnd.style';
+import { classes, style } from './sortableItem.style';
 export const SortableItem = (({ component: Component = 'div', id, disabled, sortableArguments, ...props }) => {
     const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
         ...sortableArguments,
@@ -27,9 +30,9 @@ export const SortableItem = (({ component: Component = 'div', id, disabled, sort
         addEventListener('pointerup', onPointerUp);
     }, []);
     useEffect(() => removeListener, []);
-    return (_jsx(Component, { ...attributes, ...listeners, ...props, ref: cloneRef(setNodeRef, props.ref), style: {
-            transform: CSS.Transform.toString(transform),
-            transition,
-            ...props.style
-        }, onTouchStart: disabled ? void 0 : onTouchStart, "data-dragging": isDragging }));
+    return (_jsxs(_Fragment, { children: [_jsx(Component, { ...attributes, ...listeners, ...props, ref: cloneRef(setNodeRef, props.ref), css: style, className: clsx(classes.root, props.className), style: {
+                    transform: CSS.Transform.toString(transform),
+                    transition,
+                    ...props.style
+                }, onTouchStart: disabled ? void 0 : onTouchStart, "data-dragging": isDragging }), isDragging && _jsx(Global, { styles: globalGrabbingStyle })] }));
 });

package/dist/esm/components/sortableItem/sortableItem.style.d.ts

@@ -0,0 +1,5 @@
+export declare const classes: {
+    root: string;
+};
+export declare const style: import("@emotion/react").SerializedStyles;
+export declare const globalGrabbingStyle: import("@emotion/react").SerializedStyles;

package/dist/esm/components/sortableItem/sortableItem.style.js

@@ -0,0 +1,15 @@
+import { css } from '@emotion/react';
+import { defineInnerClasses } from '../../utils';
+export const classes = defineInnerClasses('sortable-item');
+export const style = css `
+    cursor: grab;
+    
+    &:active {
+        cursor: grabbing;
+    }
+`;
+export const globalGrabbingStyle = css `
+    * {
+        cursor: grabbing;
+    }
+`;

package/dist/esm/components/tree/treeDnd.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createContext, memo, useContext, useRef, useState } from 'react';
-import { treeDndClasses } from './treeDnd.style';
+import { globalGrabbingStyle, treeDndClasses } from './treeDnd.style';
+import { Global } from '@emotion/react';
 export const TreeDndContext = createContext({});
 export function useTreeDndContext() {
     return useContext(TreeDndContext);
@@ -9,8 +10,8 @@ export const TreeDnd = memo(({ sortable, showDragHandle, onSort, children }) =>
     const dragging = useState(void 0);
     const overing = useRef(void 0);
     const placement = useRef(void 0);
-    return (_jsx(TreeDndContext, { value: {
+    return (_jsxs(TreeDndContext, { value: {
             sortable, showDragHandle, onSort,
             dragging, overing, placement
-        }, children: _jsx("div", { className: treeDndClasses.levelBlock, children: children }) }));
+        }, children: [_jsx("div", { className: treeDndClasses.levelBlock, children: children }), !!dragging[0] && _jsx(Global, { styles: globalGrabbingStyle })] }));
 });

package/dist/esm/components/tree/treeDnd.style.d.ts

@@ -13,3 +13,4 @@ export declare const treeDndClasses: {
 export declare function useStyle({ indent }: {
     indent: number;
 }): import("@emotion/react").SerializedStyles;
+export declare const globalGrabbingStyle: import("@emotion/react").SerializedStyles;

package/dist/esm/components/tree/treeDnd.style.js

@@ -186,3 +186,8 @@ export function useStyle({ indent }) {
         }
     `, [indent]);
 }
+export const globalGrabbingStyle = css `
+    * {
+        cursor: grabbing;
+    }
+`;

package/dist/esm/components/tree/treeNode.js

@@ -61,6 +61,7 @@ export const TreeNode = memo(({ id, label, prefix, suffix, disabled, _level = 0,
     const pointerLeavePredecessor = (e) => {
         inactiveBlock(e.currentTarget);
     };
+    const overingTimeout = useRef(void 0);
     const activeBlock = (el, _placement, upLevel = 0) => {
         if (_placement === 'parent') {
             let i = upLevel;
@@ -90,6 +91,13 @@ export const TreeNode = memo(({ id, label, prefix, suffix, disabled, _level = 0,
                 return true;
             }
         });
+        // 如果有children且为折叠状态，over在该节点上一定时间后，需要展开该节点
+        if (hasChildren && !currentExpanded) {
+            overingTimeout.current ||= setTimeout(() => {
+                overingTimeout.current = void 0;
+                toggleExpanded(id);
+            }, 600);
+        }
     };
     const inactiveBlock = (el) => {
         if (el) {
@@ -102,6 +110,10 @@ export const TreeNode = memo(({ id, label, prefix, suffix, disabled, _level = 0,
             el.dataset.active = 'false';
         });
         overing.current = void 0;
+        if (overingTimeout.current) {
+            clearTimeout(overingTimeout.current);
+            overingTimeout.current = void 0;
+        }
     };
     /**
      * ---------------------------------------------------------------------

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

@@ -14,6 +14,7 @@ export declare function columnsToFilterItem(columns?: (CurdColumn<any> | symbol)
  * @param row
  */
 export declare function columnsToFormItem(columns?: (CurdColumn<any> | symbol)[], row?: Obj): (ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | CurdFormItemProps)[] | undefined;
+export declare const CONTROL_COLUMN_KEY = "$control";
 /**
  * 统一处理Columns
  */

package/dist/esm/utils/curd.js

@@ -53,6 +53,7 @@ function columnsTransfer(columns, type = 'filter', row) {
     })
         .sort((a, b) => (a.order || 0) - (b.order || 0));
 }
+export const CONTROL_COLUMN_KEY = '$control';
 /**
  * 统一处理Columns
  */
@@ -63,8 +64,20 @@ export function useCurdColumns({ columns, columnConfigurable }) {
     }
     let { defaultVisible, visible, onVisibleChange, defaultOrder, order, onOrderChange } = columnConfigurable;
     if (!defaultVisible || !defaultOrder) {
-        const defaultKeys = columns?.flatMap((col) => col.hideInTable ? [] : (col._key ?? [])) || [];
-        defaultKeys.push('$control');
+        let hasControlColumn = false;
+        const defaultKeys = columns?.flatMap((col) => {
+            if (col.hideInTable) {
+                return [];
+            }
+            if (col._key) {
+                if (col._key === CONTROL_COLUMN_KEY) {
+                    hasControlColumn = true;
+                }
+                return col._key;
+            }
+            return [];
+        }) || [];
+        !hasControlColumn && defaultKeys.push(CONTROL_COLUMN_KEY);
         defaultVisible ||= defaultKeys;
         defaultOrder ||= defaultKeys;
     }

package/dist/esm/utils/tree.d.ts

@@ -1,4 +1,5 @@
 import { Id, Obj } from '../types';
+import { NodeType, SortInfo } from '../components/tree';
 /**
  * ------------------------------------------------------------------------
  * 统一处理树形搜索
@@ -25,3 +26,11 @@ export declare function useTreeSearch<N extends Obj, V extends Id = Id>({ nodes,
     setInnerSearchValue: import("react").Dispatch<import("react").SetStateAction<string>>;
     filteredTreeData: N[] | undefined;
 };
+/**
+ * 得到排序后的树结构
+ */
+export declare function sortTreeNodes<N extends NodeType<V>, V extends Id = Id>(props: {
+    nodes: N[];
+    primaryKey?: keyof N;
+    childrenKey?: keyof N;
+}, sortInfo: SortInfo<V>): N[];

package/dist/esm/utils/tree.js

@@ -58,3 +58,58 @@ export function useTreeSearch({ nodes, primaryKey = 'id', labelKey = 'label', ch
         filteredTreeData
     };
 }
+/**
+ * 得到排序后的树结构
+ */
+export function sortTreeNodes(props, sortInfo) {
+    let { nodes, primaryKey = 'id', childrenKey = 'children' } = props;
+    const { source, destination, placement } = sortInfo;
+    nodes = structuredClone(nodes);
+    const pickUp = (nodes) => {
+        if (!nodes?.length) {
+            return null;
+        }
+        for (let i = 0, { length } = nodes; i < length; i++) {
+            const node = nodes[i];
+            if (node[primaryKey] === source) {
+                nodes.splice(i, 1);
+                return node;
+            }
+            const foundInChildren = pickUp(node[childrenKey]);
+            if (foundInChildren) {
+                return foundInChildren;
+            }
+        }
+        return null;
+    };
+    pickUp(nodes);
+    const putDown = (nodes) => {
+        if (!nodes?.length) {
+            return false;
+        }
+        for (let i = 0, { length } = nodes; i < length; i++) {
+            const node = nodes[i];
+            if (node[primaryKey] === destination) {
+                switch (placement) {
+                    case 'before':
+                        nodes.splice(i, 0, node);
+                        return true;
+                    case 'after':
+                        nodes.splice(i + 1, 0, node);
+                        return true;
+                    default:
+                        node.children ||= [];
+                        node.children.push(node);
+                        return true;
+                }
+            }
+            const foundInChildren = pickUp(node[childrenKey]);
+            if (foundInChildren) {
+                return foundInChildren;
+            }
+        }
+        return false;
+    };
+    putDown(nodes);
+    return nodes;
+}

package/package.json

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