@canlooks/can-ui 0.0.25 → 0.0.27

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

@@ -3,8 +3,9 @@ import { ColumnType, DataGridProps, RowType } from '../components/dataGrid';
 /**
  * 为列添加key
  * @param col
+ * @param index
  */
-export declare function setDefaultColumnKey<R extends Obj>(col: Pick<ColumnType<R>, 'key' | 'field'>): string | number | undefined;
+export declare function setDefaultColumnKey<R extends Obj>(col: Pick<ColumnType<R>, 'key' | 'field'>, index: number): string | number;
 /**
  * 索引列
  * @param columns

package/dist/esm/utils/dataGrid.js

@@ -5,9 +5,10 @@ import { isUnset, queryDeep } from './utils';
 /**
  * 为列添加key
  * @param col
+ * @param index
  */
-export function setDefaultColumnKey(col) {
-    return col._key ??= col.key ?? (col.field ? stringifyField(col.field) : void 0);
+export function setDefaultColumnKey(col, index) {
+    return col._key ??= col.key ?? (col.field ? stringifyField(col.field) : index);
 }
 /**
  * 索引列
@@ -16,9 +17,9 @@ export function setDefaultColumnKey(col) {
 export function useColumnMap(columns) {
     return useMemo(() => {
         const map = new Map();
-        columns?.forEach(col => {
+        columns?.forEach((col, i) => {
             if (typeof col !== 'symbol') {
-                const _key = setDefaultColumnKey(col);
+                const _key = setDefaultColumnKey(col, i);
                 !isUnset(_key) && map.set(_key, col);
             }
         });

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

@@ -12,16 +12,16 @@ export declare function useDndSensors(): import("@dnd-kit/core").SensorDescripto
  * @param primaryKey 索引用的主键
  */
 export declare function onDndDragEnd<S extends Obj>(e: DragEndEvent, prevState: S[], primaryKey?: string): S[] | undefined;
-export type DraggableOptions<T extends Element = Element> = {
+export type DraggableOptions<T extends Element = Element, D = any> = {
+    disabled?: boolean;
     /** 按下后经过一段时间才触发拖拽事件，单位ms */
     delay?: number;
     /** 拖拽一段距离后才触发拖拽事件，单位px */
     distance?: number;
-    disabled?: boolean;
-    onDragStart?(e: React.PointerEvent<T>): void;
-    onDrag?(info: DragInfo, e: PointerEvent): void;
-    onDragEnd?(info: DragEndInfo): void;
-    onDragCancel?(info: DragEndInfo): void;
+    onDragStart?(e: React.PointerEvent<T>): D;
+    onDrag?(info: DragInfo<D>, e: PointerEvent): void;
+    onDragEnd?(info: DragEndInfo<D>): void;
+    onDragCancel?(info: DragEndInfo<D>): void;
     /** 若设为true，则会禁用浏览器默认拖拽行为，通常在触屏端使用 */
     disableNativeTouchMove?: boolean;
     /** 托管原有的onPointerDown、onTouchStart、onClick事件 */
@@ -31,7 +31,7 @@ export type DraggableOptions<T extends Element = Element> = {
     /** 若拖拽节点受zoom样式的影响，可传入zoom值修正 */
     zoom?: number;
 };
-export type DragInfo = {
+export type DragInfo<T> = {
     /** 开始位置 */
     startX: number;
     startY: number;
@@ -41,8 +41,10 @@ export type DragInfo = {
     /** 拖拽距离，往右下拖拽为正数，往左上拖拽为负数 */
     deltaX: number;
     deltaY: number;
+    /** `onDragStart`的返回值 */
+    startData: T | undefined;
 };
-export interface DragEndInfo extends DragInfo {
+export interface DragEndInfo<T> extends DragInfo<T> {
     /** 从按下到抬起经过的时长（ms） */
     duration: number;
     /** 拖拽速度（px/ms） */
@@ -50,4 +52,4 @@ export interface DragEndInfo extends DragInfo {
     speedY: number;
 }
 export type HandleProps<T extends Element> = Required<Pick<HTMLAttributes<T>, 'onPointerDown' | 'onTouchStart' | 'onClick' | 'onDragStart'>>;
-export declare function useDraggableHandle<T extends Element>(options?: DraggableOptions<T>): HandleProps<T>;
+export declare function useDraggableHandle<T extends Element, D = any>(options?: DraggableOptions<T, D>): HandleProps<T>;

package/dist/esm/utils/dnd.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { useSync } from './hooks';
 import { PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 import { arrayMove } from '@dnd-kit/sortable';
@@ -45,6 +45,7 @@ export function useDraggableHandle(options = {}) {
     const startTime = useRef(0);
     const startPosition = useRef([0, 0]);
     const delay = useRef(void 0);
+    const data = useRef(void 0);
     const onPointerDown = useCallback((e) => {
         if (syncOptions.current.disabled) {
             return;
@@ -53,7 +54,8 @@ export function useDraggableHandle(options = {}) {
         const dragStart = () => {
             startTime.current = Date.now();
             startPosition.current = [e.clientX, e.clientY];
-            syncOptions.current.onDragStart?.(e);
+            data.current = syncOptions.current.onDragStart?.(e);
+            document.documentElement.style.userSelect = 'none';
         };
         if (syncOptions.current.delay) {
             delay.current = setTimeout(() => {
@@ -75,7 +77,8 @@ export function useDraggableHandle(options = {}) {
         return {
             startX, startY,
             currentX: clientX, currentY: clientY,
-            deltaX, deltaY
+            deltaX, deltaY,
+            startData: data.current
         };
     };
     const onPointerMove = (e) => {
@@ -103,6 +106,7 @@ export function useDraggableHandle(options = {}) {
             removeEventListener('touchmove', preventDefaultCallback.current);
             preventDefaultCallback.current = void 0;
         }
+        document.documentElement.style.userSelect = '';
         removeEventListener('pointermove', onPointerMove);
         removeEventListener('pointerup', onPointerUp);
         removeEventListener('pointercancel', onPointerCancel);
@@ -126,7 +130,6 @@ export function useDraggableHandle(options = {}) {
         const callback = syncOptions.current.onDragCancel || syncOptions.current.onDragEnd;
         callback?.(buildDragEndInfo(e));
     };
-    useEffect(() => removeListener, []);
     const isDragged = useRef(false);
     const onClick = useCallback((e) => {
         if (isDragged.current) {

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

@@ -39,6 +39,7 @@ export declare function useUnmounted(): RefObject<boolean>;
  */
 export declare function useControlled<T = any>(defaultValue: T, value?: T, onChange?: (value: T) => void): [RefObject<T>, Dispatch<SetStateAction<T>>];
 export declare function useControlled<T = any>(defaultValue?: T, value?: T, onChange?: (value: T) => void): [RefObject<T | undefined>, Dispatch<SetStateAction<T | undefined>>];
+export declare function useControlled<T = any>(defaultValue: () => T, value?: T, onChange?: (value: T) => void): [RefObject<T | undefined>, Dispatch<SetStateAction<T | undefined>>];
 /**
  * 将某个方法使用loading包裹
  */

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

@@ -5,6 +5,7 @@ export * from './dnd';
 export * from './form';
 export * from './hooks';
 export * from './keyboard';
+export * from './polyfill';
 export * from './style';
 export * from './tree';
 export * from './utils';

package/dist/esm/utils/index.js

@@ -5,6 +5,7 @@ export * from './dnd';
 export * from './form';
 export * from './hooks';
 export * from './keyboard';
+export * from './polyfill';
 export * from './style';
 export * from './tree';
 export * from './utils';

package/dist/esm/utils/keyboard.js

@@ -94,7 +94,6 @@ export function useEscapeClosable({ escapeClosable, close }, onEscape) {
                 removeEventListener('keydown', keydown);
             };
         }
-        return;
     }, [escapeClosable]);
     return overlayRef;
 }

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/polyfill.js

@@ -0,0 +1,11 @@
+Promise.withResolvers ||= function withResolvers() {
+    if (!this)
+        throw new TypeError('Promise.withResolvers called on non-object');
+    const out = {};
+    out.promise = new this((resolve_, reject_) => {
+        out.resolve = resolve_;
+        out.reject = reject_;
+    });
+    return out;
+};
+export {};

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

@@ -1,6 +1,7 @@
 import { Theme } from '../components/theme';
 import { Breakpoints, ColorPropsValue, ResponsiveProp, ResponsiveValue } from '../types';
 import { StatusType } from '../components/status';
+import { SerializedStyles } from '@emotion/react';
 /**
  * 为类名添加统一前缀，通常为内部使用
  * @param prefixName
@@ -46,11 +47,24 @@ export declare function useColor(colorPropsValue: ColorPropsValue): string;
  */
 export declare function useTouchRipple(colorPropsValue: ColorPropsValue): (element: Animatable) => void;
 /**
- * 生成响应式样式
- * @param theme
- * @param callback
+ * 生成响应式样式，与{@link responsiveStyles}的区别在于，本方法会遍历{@link Theme}中的所有`breakpoints`，触发回调函数
+ * @param breakpoints 传入{@link Theme}中的断点，或自定义断点
+ * @param callback 每个断点触发一次回调
+ */
+export declare function responsiveVariables(breakpoints: ResponsiveValue, callback: (key: Breakpoints, px: number) => string | SerializedStyles): string;
+/**
+ * 生成响应式样式，与{@link responsiveVariables}的区别在于，本方法只会生成给定的断点所对应的样式
+ * @param styles 样式定义，对象类型，键名可为断点也可为具体的宽度
+ * @param breakpoints 定义断点，默认使用{@link defaultBreakpoints}
+ * @example
+ * responsiveStyles({
+ *   sm: 'color: red;',
+ *   '500px': 'color: pink;'
+ * })
  */
-export declare function responsiveVariables(theme: Theme, callback: (key: Breakpoints, px: number) => string): string;
+export declare function responsiveStyles(styles: {
+    [P in Breakpoints]?: string | SerializedStyles;
+}, breakpoints?: ResponsiveValue): string;
 /**
  * 将响应式的值统一转换为对象格式
  */

package/dist/esm/utils/style.js

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { useTheme } from '../components/theme';
+import { defaultBreakpoints, useTheme } from '../components/theme';
 import { humpToSegmented, isUnset } from './utils';
 import Color from 'color';
 /**
@@ -15,7 +15,7 @@ export function definePrefix(prefixName) {
     };
 }
 export function defineClasses(prefixName, names) {
-    const prefix = definePrefix(prefixName);
+    const prefix = definePrefix(humpToSegmented(prefixName));
     const ret = { root: prefix() };
     names?.forEach(name => {
         ret[name] = prefix(humpToSegmented(name));
@@ -99,12 +99,11 @@ export function useTouchRipple(colorPropsValue) {
     };
 }
 /**
- * 生成响应式样式
- * @param theme
- * @param callback
+ * 生成响应式样式，与{@link responsiveStyles}的区别在于，本方法会遍历{@link Theme}中的所有`breakpoints`，触发回调函数
+ * @param breakpoints 传入{@link Theme}中的断点，或自定义断点
+ * @param callback 每个断点触发一次回调
  */
-export function responsiveVariables(theme, callback) {
-    const { breakpoints } = theme;
+export function responsiveVariables(breakpoints, callback) {
     let ret = '';
     for (const k in breakpoints) {
         const px = breakpoints[k];
@@ -116,7 +115,41 @@ export function responsiveVariables(theme, callback) {
             `;
         }
         else {
-            ret += callback(k, px) || '';
+            ret += `${callback(k, px) || ''}`;
+        }
+    }
+    return ret;
+}
+/**
+ * 生成响应式样式，与{@link responsiveVariables}的区别在于，本方法只会生成给定的断点所对应的样式
+ * @param styles 样式定义，对象类型，键名可为断点也可为具体的宽度
+ * @param breakpoints 定义断点，默认使用{@link defaultBreakpoints}
+ * @example
+ * responsiveStyles({
+ *   sm: 'color: red;',
+ *   '500px': 'color: pink;'
+ * })
+ */
+export function responsiveStyles(styles, breakpoints = defaultBreakpoints) {
+    let ret = '';
+    for (const k in styles) {
+        let px = breakpoints[k] ?? k;
+        let style = styles[k];
+        if (typeof style === 'object' && style.styles) {
+            style = style.styles;
+        }
+        if (px && px !== '0') {
+            if (typeof px === 'number') {
+                px += 'px';
+            }
+            ret += `
+                @media (max-width: ${px}) {
+                    ${style}
+                }                
+            `;
+        }
+        else {
+            ret += style;
         }
     }
     return ret;

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

@@ -4,7 +4,7 @@ import { Id } from '../types';
  * 生成最简易的随机ID
  * @param namespace
  */
-export declare function getEazyID(namespace?: string): string;
+export declare function getEasyID(namespace?: string): string;
 /**
  * 获取任意长度由随机字母组成的ID
  * @param length
@@ -14,7 +14,7 @@ export declare function getShortID(length?: number): string;
  * 拼接元素的类名
  * @param classes
  */
-export declare function classnames(...classes: any[]): string;
+export declare function clsx(...classes: any[]): string;
 /**
  * 驼峰转分隔
  * @param str
@@ -48,7 +48,7 @@ export declare function mergeDeep<T extends {}, U, V, W, X, Y, Z>(target: T, sou
 export declare function mergeDeep(target: object, ...sources: any[]): any;
 /**
  * 判断元素是否完全在目标容器内，用于Popper组件
- * @param el
+ * @param target
  * @param container
  */
 export declare function isElementVisibleCompletely(target: Element, container?: Element): boolean;
@@ -106,7 +106,14 @@ export declare function isChildOf(target: Element | null, container?: Element |
  * @param target
  * @param callback
  */
-export declare function fineParent(target: Element, callback: (el: Element) => any): HTMLElement | null;
+export declare function findPredecessor(target: Element, callback: (el: Element) => any): HTMLElement | null;
+/**
+ * 监听某个元素的所有祖先元素的滚动事件
+ * @param target
+ * @param listener
+ * @returns {() => void} 返回一个清除函数
+ */
+export declare function listenAllPredecessorsScroll(target: Element | Document, listener: (e: Event) => void): () => void;
 /**
  * 将数值限制在某个范围内
  * @param value

package/dist/esm/utils/utils.js

@@ -2,7 +2,7 @@
  * 生成最简易的随机ID
  * @param namespace
  */
-export function getEazyID(namespace = '') {
+export function getEasyID(namespace = '') {
     return `${namespace}${Date.now()}${Math.random()}`;
 }
 const randomIdAlphabet = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_-';
@@ -22,7 +22,7 @@ export function getShortID(length = 8) {
  * 拼接元素的类名
  * @param classes
  */
-export function classnames(...classes) {
+export function clsx(...classes) {
     const ret = [];
     for (let i = 0, { length } = classes; i < length; i++) {
         const cls = classes[i];
@@ -31,7 +31,7 @@ export function classnames(...classes) {
         }
         if (typeof cls === 'object') {
             if (Array.isArray(cls)) {
-                cls.length && ret.push(classnames(...cls));
+                cls.length && ret.push(clsx(...cls));
             }
             else {
                 for (const k in cls) {
@@ -100,7 +100,7 @@ export function cloneDeep(target) {
 export function mergeDeep(target, ...sources) {
     for (let i = 0, { length } = sources; i < length; i++) {
         const source = sources[i];
-        if (source && typeof source === 'object') {
+        if (typeof source === 'object' && source) {
             for (const k in source) {
                 const v = source[k];
                 if (typeof v === 'object' && v) {
@@ -117,7 +117,7 @@ export function mergeDeep(target, ...sources) {
 }
 /**
  * 判断元素是否完全在目标容器内，用于Popper组件
- * @param el
+ * @param target
  * @param container
  */
 export function isElementVisibleCompletely(target, container) {
@@ -226,7 +226,7 @@ export function isChildOf(target, container) {
  * @param target
  * @param callback
  */
-export function fineParent(target, callback) {
+export function findPredecessor(target, callback) {
     while (target) {
         const { parentElement } = target;
         if (!parentElement || callback(parentElement)) {
@@ -236,6 +236,30 @@ export function fineParent(target, callback) {
     }
     return null;
 }
+/**
+ * 监听某个元素的所有祖先元素的滚动事件
+ * @param target
+ * @param listener
+ * @returns {() => void} 返回一个清除函数
+ */
+export function listenAllPredecessorsScroll(target, listener) {
+    const disposers = [];
+    if (target !== document) {
+        findPredecessor(target, parent => {
+            if (parent.scrollHeight > parent.clientHeight || parent.scrollWidth > parent.clientWidth) {
+                parent.addEventListener('scroll', listener);
+                disposers.push(() => {
+                    parent.removeEventListener('scroll', listener);
+                });
+            }
+        });
+    }
+    document.addEventListener('scroll', listener);
+    disposers.push(() => {
+        document.removeEventListener('scroll', listener);
+    });
+    return () => disposers.forEach(disposer => disposer());
+}
 /**
  * 将数值限制在某个范围内
  * @param value

package/documentation/bootstrap.mjs

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+import { preview } from 'vite';
+import inlineConfig from './vite.config.mjs';
+(async () => {
+    const server = await preview(inlineConfig);
+    server.printUrls();
+    server.bindCLIShortcuts({ print: true });
+})();