@canlooks/can-ui 0.0.136 → 0.0.138

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

@@ -5,6 +5,10 @@ export interface AccordionProps extends Omit<DivProps, 'title' | 'prefix'> {
     title?: ReactNode;
     prefix?: ReactNode;
     suffix?: ReactNode;
+    /**
+     * 展开图标的位置，默认为`left`
+     */
+    expandIconPlacement?: 'left' | 'right';
     expandIcon?: ReactNode | ((expanded: boolean) => ReactNode);
     defaultExpanded?: boolean;
     expanded?: boolean;
@@ -12,4 +16,4 @@ export interface AccordionProps extends Omit<DivProps, 'title' | 'prefix'> {
     readOnly?: boolean;
     disabled?: boolean;
 }
-export declare function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded, expanded, onExpandedChange, readOnly, disabled, ...props }: AccordionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Accordion({ size, title, prefix, suffix, expandIconPlacement, expandIcon, defaultExpanded, expanded, onExpandedChange, readOnly, disabled, ...props }: AccordionProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/accordion/accordion.js

@@ -8,7 +8,7 @@ const theme_1 = require("../theme");
 const transitionBase_1 = require("../transitionBase");
 const icon_1 = require("../icon");
 const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded = false, expanded, onExpandedChange, readOnly, disabled, ...props }) {
+function Accordion({ size, title, prefix, suffix, expandIconPlacement = 'left', expandIcon, defaultExpanded = false, expanded, onExpandedChange, readOnly, disabled, ...props }) {
     const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
     const [innerExpanded, setInnerExpanded] = (0, utils_1.useControlled)(defaultExpanded, expanded, onExpandedChange);
@@ -24,6 +24,8 @@ function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded =
         }
         return expandIcon;
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: accordion_style_1.style, className: (0, utils_1.clsx)(accordion_style_1.classes.root, props.className), "data-size": size, "data-expanded": innerExpanded.current, "data-read-only": readOnly, "data-disabled": disabled, children: [(0, jsx_runtime_1.jsxs)("div", { className: accordion_style_1.classes.titleRow, onClick: toggleExpanded, children: [renderExpandIcon(), !!prefix && (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.title, children: title }), !!suffix && (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.suffix, children: suffix })] }), !!props.children &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: accordion_style_1.style, className: (0, utils_1.clsx)(accordion_style_1.classes.root, props.className), "data-size": size, "data-expanded": innerExpanded.current, "data-read-only": readOnly, "data-disabled": disabled, children: [(0, jsx_runtime_1.jsxs)("div", { className: accordion_style_1.classes.titleRow, style: {
+                    flexDirection: expandIconPlacement === 'right' ? 'row-reverse' : 'row'
+                }, onClick: toggleExpanded, children: [renderExpandIcon(), (0, jsx_runtime_1.jsxs)("div", { className: accordion_style_1.classes.titleContentWrapper, children: [!!prefix && (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.title, children: title }), !!suffix && (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.suffix, children: suffix })] })] }), !!props.children &&
                 (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { in: innerExpanded.current, children: (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.content, children: props.children }) })] }));
 }

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

@@ -5,6 +5,7 @@ export declare const classes: {
     suffix: string;
     expandIcon: string;
     titleRow: string;
+    titleContentWrapper: string;
 } & {
     root: string;
 };

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

@@ -6,6 +6,7 @@ const utils_1 = require("../../utils");
 exports.classes = (0, utils_1.defineInnerClasses)('accordion', [
     'titleRow',
     'expandIcon',
+    'titleContentWrapper',
     'title',
     'prefix',
     'suffix',
@@ -25,21 +26,28 @@ exports.style = (0, utils_1.defineCss)(({ divider, borderRadius, background, spa
             padding: 9px ${spacing[5]}px;
             transition: padding .25s ${easing.easeOut};
 
-            .${exports.classes.expandIcon} {
+            > .${exports.classes.expandIcon} {
                 color: ${text.disabled};
                 transition: transform .25s ${easing.easeOut};
             }
-
-            .${exports.classes.title} {
+            
+            > .${exports.classes.titleContentWrapper} {
                 flex: 1;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;
-            }
+                display: flex;
+                align-items: center;
+                gap: ${spacing[2]}px;
+
+                > .${exports.classes.title} {
+                    flex: 1;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
 
-            .${exports.classes.prefix},
-            .${exports.classes.suffix} {
-                color: ${text.secondary};
+                > .${exports.classes.prefix},
+                > .${exports.classes.suffix} {
+                    color: ${text.secondary};
+                }
             }
         }
 

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

@@ -72,7 +72,7 @@ function useStyle({ color }) {
                 }
 
                 .${exports.classes.label} {
-                    transition: color .25s ${easing.easeOut};
+                    transition: opacity .25s ${easing.easeOut};
                 }
 
                 &[data-size=small] {
@@ -114,7 +114,7 @@ function useStyle({ color }) {
                     }
 
                     .${exports.classes.label} {
-                        transition: color 0s;
+                        transition: opacity 0s;
                         opacity: 1;
                     }
                 }

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

@@ -37,10 +37,12 @@ type SharedGestureOptions = {
     onClick?: MouseEventHandler;
 };
 export interface DraggableGestureOptions<D = any> extends SharedGestureOptions {
-    /** 按下后经过一段时间才触发拖拽事件，单位ms */
+    /** 按下后经过一段时间才触发拖拽事件，默认`0`，单位ms */
     delay?: number;
-    /** 拖拽一段距离后才触发拖拽事件，单位px */
+    /** 拖拽一段距离后才触发拖拽事件，默认`0`，单位px */
     distance?: number;
+    /** 允许点击事件触发的抖动距离，默认`2`，单位px */
+    clickVibration?: number;
     onDragStart?(e: React.PointerEvent): D;
     onDrag?(info: DragInfo<D>, e: PointerEvent): void;
     onDragEnd?(info: DragEndInfo<D>): void;

package/dist/cjs/utils/gesture.js

@@ -18,6 +18,7 @@ function useGesture(options) {
         zoom,
         draggable: true,
         distance: 0,
+        clickVibration: 2,
         preventNativeTouchMove: true,
         ...options
     });
@@ -73,9 +74,10 @@ function useGesture(options) {
     const draggingPointerMove = (0, react_1.useCallback)((e) => {
         e.preventDefault();
         const dragInfo = settleDragInfo(e);
+        const absDiffX = Math.abs(dragInfo.diff[0]);
+        const absDiffY = Math.abs(dragInfo.diff[1]);
         if (!isRollback.current) {
-            const absDiffX = Math.abs(dragInfo.diff[0]);
-            const absDiffY = Math.abs(dragInfo.diff[1]);
+            // 非pinching事件回滚
             if (delayTimeout.current) {
                 if (absDiffX > 5 || absDiffY > 5) {
                     // 延时尚未结束，但偏移量过大，取消拖拽
@@ -89,7 +91,11 @@ function useGesture(options) {
                 return;
             }
         }
-        isDragged.current = true;
+        const { clickVibration } = syncOptions.current;
+        if (!isDragged.current && (absDiffX > clickVibration || absDiffY > clickVibration)) {
+            // 拖拽距离超过允许抖动，将isDragged标记为true
+            isDragged.current = true;
+        }
         syncOptions.current.onDrag?.(dragInfo, e);
     }, []);
     const cancelDragFn = () => {

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

@@ -5,6 +5,10 @@ export interface AccordionProps extends Omit<DivProps, 'title' | 'prefix'> {
     title?: ReactNode;
     prefix?: ReactNode;
     suffix?: ReactNode;
+    /**
+     * 展开图标的位置，默认为`left`
+     */
+    expandIconPlacement?: 'left' | 'right';
     expandIcon?: ReactNode | ((expanded: boolean) => ReactNode);
     defaultExpanded?: boolean;
     expanded?: boolean;
@@ -12,4 +16,4 @@ export interface AccordionProps extends Omit<DivProps, 'title' | 'prefix'> {
     readOnly?: boolean;
     disabled?: boolean;
 }
-export declare function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded, expanded, onExpandedChange, readOnly, disabled, ...props }: AccordionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Accordion({ size, title, prefix, suffix, expandIconPlacement, expandIcon, defaultExpanded, expanded, onExpandedChange, readOnly, disabled, ...props }: AccordionProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/accordion/accordion.js

@@ -5,7 +5,7 @@ import { useTheme } from '../theme';
 import { Collapse } from '../transitionBase';
 import { Icon } from '../icon';
 import { faCaretRight } from '@fortawesome/free-solid-svg-icons';
-export function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded = false, expanded, onExpandedChange, readOnly, disabled, ...props }) {
+export function Accordion({ size, title, prefix, suffix, expandIconPlacement = 'left', expandIcon, defaultExpanded = false, expanded, onExpandedChange, readOnly, disabled, ...props }) {
     const theme = useTheme();
     size ??= theme.size;
     const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded, expanded, onExpandedChange);
@@ -21,6 +21,8 @@ export function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpa
         }
         return expandIcon;
     };
-    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-size": size, "data-expanded": innerExpanded.current, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsxs("div", { className: classes.titleRow, onClick: toggleExpanded, children: [renderExpandIcon(), !!prefix && _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.title, children: title }), !!suffix && _jsx("div", { className: classes.suffix, children: suffix })] }), !!props.children &&
+    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-size": size, "data-expanded": innerExpanded.current, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsxs("div", { className: classes.titleRow, style: {
+                    flexDirection: expandIconPlacement === 'right' ? 'row-reverse' : 'row'
+                }, onClick: toggleExpanded, children: [renderExpandIcon(), _jsxs("div", { className: classes.titleContentWrapper, children: [!!prefix && _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.title, children: title }), !!suffix && _jsx("div", { className: classes.suffix, children: suffix })] })] }), !!props.children &&
                 _jsx(Collapse, { in: innerExpanded.current, children: _jsx("div", { className: classes.content, children: props.children }) })] }));
 }

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

@@ -5,6 +5,7 @@ export declare const classes: {
     suffix: string;
     expandIcon: string;
     titleRow: string;
+    titleContentWrapper: string;
 } & {
     root: string;
 };

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

@@ -3,6 +3,7 @@ import { defineInnerClasses, defineCss } from '../../utils';
 export const classes = defineInnerClasses('accordion', [
     'titleRow',
     'expandIcon',
+    'titleContentWrapper',
     'title',
     'prefix',
     'suffix',
@@ -22,21 +23,28 @@ export const style = defineCss(({ divider, borderRadius, background, spacing, te
             padding: 9px ${spacing[5]}px;
             transition: padding .25s ${easing.easeOut};
 
-            .${classes.expandIcon} {
+            > .${classes.expandIcon} {
                 color: ${text.disabled};
                 transition: transform .25s ${easing.easeOut};
             }
-
-            .${classes.title} {
+            
+            > .${classes.titleContentWrapper} {
                 flex: 1;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;
-            }
+                display: flex;
+                align-items: center;
+                gap: ${spacing[2]}px;
+
+                > .${classes.title} {
+                    flex: 1;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
 
-            .${classes.prefix},
-            .${classes.suffix} {
-                color: ${text.secondary};
+                > .${classes.prefix},
+                > .${classes.suffix} {
+                    color: ${text.secondary};
+                }
             }
         }
 

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

@@ -67,7 +67,7 @@ export function useStyle({ color }) {
                 }
 
                 .${classes.label} {
-                    transition: color .25s ${easing.easeOut};
+                    transition: opacity .25s ${easing.easeOut};
                 }
 
                 &[data-size=small] {
@@ -109,7 +109,7 @@ export function useStyle({ color }) {
                     }
 
                     .${classes.label} {
-                        transition: color 0s;
+                        transition: opacity 0s;
                         opacity: 1;
                     }
                 }

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

@@ -37,10 +37,12 @@ type SharedGestureOptions = {
     onClick?: MouseEventHandler;
 };
 export interface DraggableGestureOptions<D = any> extends SharedGestureOptions {
-    /** 按下后经过一段时间才触发拖拽事件，单位ms */
+    /** 按下后经过一段时间才触发拖拽事件，默认`0`，单位ms */
     delay?: number;
-    /** 拖拽一段距离后才触发拖拽事件，单位px */
+    /** 拖拽一段距离后才触发拖拽事件，默认`0`，单位px */
     distance?: number;
+    /** 允许点击事件触发的抖动距离，默认`2`，单位px */
+    clickVibration?: number;
     onDragStart?(e: React.PointerEvent): D;
     onDrag?(info: DragInfo<D>, e: PointerEvent): void;
     onDragEnd?(info: DragEndInfo<D>): void;

package/dist/esm/utils/gesture.js

@@ -13,6 +13,7 @@ export function useGesture(options) {
         zoom,
         draggable: true,
         distance: 0,
+        clickVibration: 2,
         preventNativeTouchMove: true,
         ...options
     });
@@ -68,9 +69,10 @@ export function useGesture(options) {
     const draggingPointerMove = useCallback((e) => {
         e.preventDefault();
         const dragInfo = settleDragInfo(e);
+        const absDiffX = Math.abs(dragInfo.diff[0]);
+        const absDiffY = Math.abs(dragInfo.diff[1]);
         if (!isRollback.current) {
-            const absDiffX = Math.abs(dragInfo.diff[0]);
-            const absDiffY = Math.abs(dragInfo.diff[1]);
+            // 非pinching事件回滚
             if (delayTimeout.current) {
                 if (absDiffX > 5 || absDiffY > 5) {
                     // 延时尚未结束，但偏移量过大，取消拖拽
@@ -84,7 +86,11 @@ export function useGesture(options) {
                 return;
             }
         }
-        isDragged.current = true;
+        const { clickVibration } = syncOptions.current;
+        if (!isDragged.current && (absDiffX > clickVibration || absDiffY > clickVibration)) {
+            // 拖拽距离超过允许抖动，将isDragged标记为true
+            isDragged.current = true;
+        }
         syncOptions.current.onDrag?.(dragInfo, e);
     }, []);
     const cancelDragFn = () => {

package/package.json

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