@canlooks/can-ui 0.0.164 → 0.0.166

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

@@ -8,10 +8,10 @@ export declare const classes: {
     file: string;
     files: string;
     images: string;
-    sortable: string;
     control: string;
     imageWrap: string;
+    sortableItem: string;
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const style: () => import("@emotion/utils").SerializedStyles;

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

@@ -13,7 +13,7 @@ export const classes = defineInnerClasses('upload', [
     'images',
     'imageWrap',
     'image',
-    'sortable'
+    'sortableItem'
 ]);
 export const style = defineCss(({ spacing, mode, text, gray, borderRadius, colors, divider, easing, background }) => {
     const maskBg = Color(background.content).alpha(.9).string();
@@ -146,18 +146,12 @@ export const style = defineCss(({ spacing, mode, text, gray, borderRadius, color
                 }
             }
 
-            .${classes.sortable}[data-dragging=true] {
-                position: relative;
-                z-index: 1;
-            }
-
             &[data-sortable=true] {
-                .${classes.file}, .${classes.imageWrap} {
-                    cursor: grab;
+                .${classes.sortableItem}[data-dragging=true] {
+                    position: relative;
+                    z-index: 1;
                 }
-            }
 
-            &:not([data-sortable=true]) {
                 .${classes.file}, .${classes.imageWrap} {
                     cursor: default;
                 }

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

@@ -8,4 +8,4 @@ export declare function useStyle({ columnCount, columnGap, rowGap }: {
     columnCount: ResponsiveValue;
     columnGap: ResponsiveValue;
     rowGap: ResponsiveValue;
-}): import("@emotion/react").SerializedStyles;
+}): import("@emotion/utils").SerializedStyles;

package/dist/esm/extensions/documentViewer/documentViewer.style.d.ts

@@ -11,5 +11,5 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const iframeStyle: import("@emotion/react").SerializedStyles;
-export declare const svgStyle: () => import("@emotion/react").SerializedStyles;
+export declare const iframeStyle: import("@emotion/utils").SerializedStyles;
+export declare const svgStyle: () => import("@emotion/utils").SerializedStyles;

package/dist/esm/extensions/textFormatter/textFormatter.style.d.ts

@@ -1,4 +1,4 @@
 export declare const classes: {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const style: () => import("@emotion/utils").SerializedStyles;

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

@@ -1,18 +1,20 @@
-import { DragEndEvent } from '@dnd-kit/core';
 import { Id, Obj } from '../types.js';
 import { NodeType, SortInfo } from '../components/tree/index.js';
 import { BezierFunc } from './bezier.js';
+import { Customizable, DragDropEvents, Sensors } from '@dnd-kit/abstract';
 /**
- * 默认提供给@dnd-kit的sensors属性
+ * 默认提供给@dnd-kit<DragDropProvider/>的sensors属性
  */
-export declare function useDndSensors(): import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
+export declare const defaultSensors: Customizable<Sensors>;
 /**
- * <DndContext>组件通用的onDragEnd方法
+ * <DragDropProvider>组件通用的onDragEnd方法
  * @param e 事件
- * @param prevState 传入需要排序的数组
+ * @param items 传入需要排序的数组
  * @param primaryKey 索引用的主键，默认为`id`
+ * @return 返回新的数组，但如果顺序未改变，会得到null
  */
-export declare function onDndDragEnd<S extends Obj>(e: DragEndEvent, prevState: S[], primaryKey?: keyof S): S[] | undefined;
+export declare function onDndDragEnd<T extends Obj>({ operation }: Parameters<DragDropEvents<any, any, any>['dragend']>[0], items: T[], primaryKey?: keyof T): T[] | null;
+export declare function arrayMove<T>(array: T[], from: number, to: number): T[];
 /**
  * <Tree>组件通用的onSort方法，注意：该方法会原地修改{@link treeNodes}
  * @param info 信息

package/dist/esm/utils/dnd.js

@@ -1,32 +1,57 @@
-import { PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
-import { arrayMove } from '@dnd-kit/sortable';
 import { range } from './utils.js';
 import { cubicBezier } from './bezier.js';
+import { PointerSensor } from '@dnd-kit/react';
+import { PointerActivationConstraints } from '@dnd-kit/dom';
 /**
- * 默认提供给@dnd-kit的sensors属性
+ * 默认提供给@dnd-kit<DragDropProvider/>的sensors属性
  */
-export function useDndSensors() {
-    return useSensors(useSensor(PointerSensor, {
-        activationConstraint: {
-            distance: 5
-        }
-    }));
-}
+export const defaultSensors = defaults => [
+    ...defaults,
+    PointerSensor.configure({
+        activationConstraints: [
+            new PointerActivationConstraints.Distance({ value: 5 })
+        ]
+    })
+];
 /**
- * <DndContext>组件通用的onDragEnd方法
+ * <DragDropProvider>组件通用的onDragEnd方法
  * @param e 事件
- * @param prevState 传入需要排序的数组
+ * @param items 传入需要排序的数组
  * @param primaryKey 索引用的主键，默认为`id`
+ * @return 返回新的数组，但如果顺序未改变，会得到null
  */
-export function onDndDragEnd(e, prevState, primaryKey = 'id') {
-    const { active, over } = e;
-    if (!over || active.id === over.id) {
-        // 并未产生顺序的改变，返回undefined
-        return;
+export function onDndDragEnd({ operation }, items, primaryKey = 'id') {
+    const { source, target, canceled } = operation;
+    if (!source || !target || canceled) {
+        return null;
+    }
+    const sourceIndex = items.findIndex(item => item[primaryKey] === source.id);
+    const targetIndex = items.findIndex(item => item[primaryKey] === target.id);
+    if (sourceIndex === -1 || targetIndex === -1) {
+        if (typeof source.initialIndex === 'number' && typeof source.index === 'number') {
+            const from = source.initialIndex;
+            const to = source.index;
+            if (from === to || from < 0 || from >= items.length) {
+                return null;
+            }
+            return arrayMove(items, from, to);
+        }
+        return null;
+    }
+    if (typeof source.index === 'number') {
+        if (source.index !== sourceIndex) {
+            return arrayMove(items, sourceIndex, source.index);
+        }
+    }
+    return arrayMove(items, sourceIndex, targetIndex);
+}
+export function arrayMove(array, from, to) {
+    if (from === to) {
+        return array;
     }
-    const oldIndex = prevState.findIndex(v => v[primaryKey] === active.id);
-    const newIndex = prevState.findIndex(v => v[primaryKey] === over.id);
-    return arrayMove(prevState, oldIndex, newIndex);
+    const newArray = [...array];
+    newArray.splice(to, 0, newArray.splice(from, 1)[0]);
+    return newArray;
 }
 /**
  * <Tree>组件通用的onSort方法，注意：该方法会原地修改{@link treeNodes}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.164",
+  "version": "0.0.166",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",
@@ -37,7 +37,7 @@
     "./*": "./*"
   },
   "scripts": {
-    "clean": "npx shx rm -rf dist documentation/bootstrap.mjs documentation/vite.config.mjs",
+    "clean": "npx shx rm -rf dist",
     "build": "tsc -m esnext --outDir dist/esm & tsc -m commonjs --outDir dist/cjs",
     "build:alias": "tsc-alias --outDir dist/esm",
     "rebuild": "npm run clean && npm run build && npm run build:alias",
@@ -46,40 +46,39 @@
     "test:unit": "npx ts-node test/unit.ts"
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/react": "^0.3.2",
     "@emotion/react": "^11.14.0",
     "@fortawesome/free-brands-svg-icons": "^7.2.0",
     "@fortawesome/free-regular-svg-icons": "^7.2.0",
     "@fortawesome/free-solid-svg-icons": "^7.2.0",
-    "@fortawesome/react-fontawesome": "^3.2.0",
+    "@fortawesome/react-fontawesome": "^3.3.0",
     "@types/react-transition-group": "^4.4.12",
     "color": "^5.0.3",
-    "dayjs": "^1.11.19",
+    "dayjs": "^1.11.20",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@ant-design/icons": "^6.1.0",
-    "@canlooks/react-router": "^1.1.0",
+    "@ant-design/icons": "^6.1.1",
+    "@canlooks/react-router": "^1.2.1",
     "@canlooks/reactive": "^4.7.15",
     "@emotion/styled": "^11.14.1",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
-    "@mui/icons-material": "^7.3.8",
-    "@types/node": "^25.3.2",
+    "@mui/icons-material": "^7.3.9",
+    "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
     "mime": "^4.1.0",
-    "next": "^16.1.6",
+    "next": "^16.2.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.1",
     "remark-gfm": "^4.0.1",
     "tsc-alias": "^1.8.16",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1"
+    "typescript": "^6.0.2",
+    "vite": "^8.0.3"
   }
 }