deepsea-components 2.8.2 → 2.8.3

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

@@ -1,21 +1,33 @@
 import { CSSProperties } from "react";
 import { ScrollProps } from "./Scroll";
 export interface AutoScrollProps extends ScrollProps {
-    /** 轮播的数据 */
+    /** 轮播元素的个数 */
     count: number;
     /** 轮播元素的高度 */
     itemHeight: number;
-    /** 轮播动画的时间 */
-    animation: number;
-    /** 每个元素的停留时间 */
-    duration: number;
-    /** 元素之间的间距 */
+    /**
+     * 轮播动画的时间，单位毫秒
+     * @default 1000
+     */
+    animation?: number;
+    /**
+     * 每个元素的停留时间，单位毫秒
+     * @default 3000
+     */
+    duration?: number;
+    /**
+     * 元素之间的间距
+     * @default 0
+     */
     gap?: number;
     /** 容器类名 */
     containerClassName?: string;
     /** 容器样式 */
     containerStyle?: CSSProperties;
-    /** 在鼠标移入时是否继续播放 */
+    /**
+     * 在鼠标移入时是否继续播放
+     * @default false
+     */
     playOnMouseEnter?: boolean;
 }
 export declare const AutoScroll: import("react").ForwardRefExoticComponent<AutoScrollProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/AutoScroll.js

@@ -29,7 +29,7 @@ var import_deepsea_tools = require("deepsea-tools");
 var import_react = require("react");
 var import_Scroll = require("./Scroll");
 var AutoScroll = (0, import_react.forwardRef)((props, ref) => {
-  const { count, itemHeight, animation, duration, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, ...rest } = props;
+  const { count, itemHeight, animation = 1e3, duration = 3e3, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, ...rest } = props;
   const bar = (0, import_react.useRef)(null);
   const timeout = (0, import_react.useRef)(void 0);
   const ele = (0, import_react.useRef)(null);

package/dist/cjs/components/AutoScroll.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/AutoScroll.tsx"],
-  "sourcesContent": ["\"use client\"\r\nimport { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx, getArray } from \"deepsea-tools\"\r\nimport { CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\r\nimport { Scroll, ScrollProps } from \"./Scroll\"\r\n\r\nexport interface AutoScrollProps extends ScrollProps {\r\n    /** 轮播的数据 */\r\n    count: number\r\n\r\n    /** 轮播元素的高度 */\r\n    itemHeight: number\r\n\r\n    /** 轮播动画的时间 */\r\n    animation: number\r\n\r\n    /** 每个元素的停留时间 */\r\n    duration: number\r\n\r\n    /** 元素之间的间距 */\r\n    gap?: number\r\n\r\n    /** 容器类名 */\r\n    containerClassName?: string\r\n\r\n    /** 容器样式 */\r\n    containerStyle?: CSSProperties\r\n\r\n    /** 在鼠标移入时是否继续播放 */\r\n    playOnMouseEnter?: boolean\r\n}\r\n\r\nexport const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {\r\n    const { count, itemHeight, animation, duration, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, ...rest } = props\r\n    const bar = useRef<Scrollbar | null>(null)\r\n    const timeout = useRef<NodeJS.Timeout | undefined>(undefined)\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const size = useSize(ele)\r\n    const pause = useRef(false)\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n    useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n    useEffect(() => {\r\n        if (playOnMouseEnter) pause.current = false\r\n    }, [playOnMouseEnter])\r\n\r\n    useEffect(() => {\r\n        if (!size || count === 0) return\r\n        const { height } = size\r\n        const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))\r\n        const scrollHeight = range[range.length - 1]\r\n        if (height >= scrollHeight) return\r\n        function scroll(target: number) {\r\n            clearTimeout(timeout.current)\r\n            timeout.current = setTimeout(() => {\r\n                if (pause.current) return scroll(target)\r\n                bar.current?.scrollTo(0, target, animation)\r\n            }, duration)\r\n        }\r\n        scroll(range[0])\r\n        function listener(status: ScrollStatus) {\r\n            const { y } = status.offset\r\n            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05\r\n            const target = scrollToBottom ? 0 : range.find(item => item > y)!\r\n            scroll(target)\r\n        }\r\n        bar.current?.addListener(listener)\r\n        return () => {\r\n            clearTimeout(timeout.current)\r\n            bar.current?.removeListener(listener)\r\n            bar.current?.scrollTo(0, 0)\r\n        }\r\n    }, [size, count, itemHeight, gap, duration, animation])\r\n\r\n    function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (playOnMouseEnter) return\r\n        pause.current = true\r\n        onMouseEnter?.(e)\r\n    }\r\n\r\n    function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (playOnMouseEnter) return\r\n        pause.current = false\r\n        onMouseLeave?.(e)\r\n    }\r\n\r\n    return (\r\n        <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>\r\n            <div\r\n                className={clsx(\r\n                    css`\r\n                        display: flex;\r\n                        flex-direction: column;\r\n                        gap: var(--gap, 0);\r\n                        & > * {\r\n                            flex: none;\r\n                        }\r\n                    `,\r\n                    containerClassName\r\n                )}\r\n                style={{ \"--gap\": `${gap}px`, ...containerStyle } as CSSProperties}>\r\n                {children}\r\n            </div>\r\n        </Scroll>\r\n    )\r\n})\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAoB;AACpB,oBAAwB;AACxB,2BAA+B;AAC/B,mBAAiH;AAGjH,oBAAoC;AA4B7B,IAAM,iBAAa,yBAA4C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,OAAO,YAAY,WAAW,UAAU,cAAc,cAAc,MAAM,GAAG,oBAAoB,gBAAgB,UAAU,kBAAkB,WAAW,GAAG,KAAK,IAAI;AAC5K,QAAM,UAAM,qBAAyB,IAAI;AACzC,QAAM,cAAU,qBAAmC,MAAS;AAC5D,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,WAAO,uBAAQ,GAAG;AACxB,QAAM,YAAQ,qBAAO,KAAK;AAE1B,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAC/C,wCAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AAErD,8BAAU,MAAM;AACZ,QAAI;AAAkB,YAAM,UAAU;AAAA,EAC1C,GAAG,CAAC,gBAAgB,CAAC;AAErB,8BAAU,MAAM;AACZ,QAAI,CAAC,QAAQ,UAAU;AAAG;AAC1B,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,YAAQ,+BAAS,OAAO,YAAU,aAAa,QAAQ,QAAQ,MAAM,UAAU,QAAQ,IAAI,MAAM,EAAE;AACzG,UAAM,eAAe,MAAM,MAAM,SAAS,CAAC;AAC3C,QAAI,UAAU;AAAc;AAC5B,aAAS,OAAO,QAAgB;AAC5B,mBAAa,QAAQ,OAAO;AAC5B,cAAQ,UAAU,WAAW,MAAM;AAC/B,YAAI,MAAM;AAAS,iBAAO,OAAO,MAAM;AACvC,YAAI,SAAS,SAAS,GAAG,QAAQ,SAAS;AAAA,MAC9C,GAAG,QAAQ;AAAA,IACf;AACA,WAAO,MAAM,CAAC,CAAC;AACf,aAAS,SAAS,QAAsB;AACpC,YAAM,EAAE,EAAE,IAAI,OAAO;AACrB,YAAM,iBAAiB,KAAK,IAAI,IAAI,SAAS,YAAY,IAAI,cAAc;AAC3E,YAAM,SAAS,iBAAiB,IAAI,MAAM,KAAK,UAAQ,OAAO,CAAC;AAC/D,aAAO,MAAM;AAAA,IACjB;AACA,QAAI,SAAS,YAAY,QAAQ;AACjC,WAAO,MAAM;AACT,mBAAa,QAAQ,OAAO;AAC5B,UAAI,SAAS,eAAe,QAAQ;AACpC,UAAI,SAAS,SAAS,GAAG,CAAC;AAAA,IAC9B;AAAA,EACJ,GAAG,CAAC,MAAM,OAAO,YAAY,KAAK,UAAU,SAAS,CAAC;AAEtD,WAAS,sBAAsB,GAAgD;AAC3E,QAAI;AAAkB;AACtB,UAAM,UAAU;AAChB,mBAAe,CAAC;AAAA,EACpB;AAEA,WAAS,sBAAsB,GAAgD;AAC3E,QAAI;AAAkB;AACtB,UAAM,UAAU;AAChB,mBAAe,CAAC;AAAA,EACpB;AAEA,SACI,oCAAC,wBAAO,KAAK,KAAK,WAAW,KAAK,cAAc,uBAAuB,cAAc,uBAAwB,GAAG,QAC5G;AAAA,IAAC;AAAA;AAAA,MACG,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQA;AAAA,MACJ;AAAA,MACA,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,eAAe;AAAA;AAAA,IAC/C;AAAA,EACL,CACJ;AAER,CAAC;",
+  "sourcesContent": ["\"use client\"\r\nimport { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx, getArray } from \"deepsea-tools\"\r\nimport { CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\r\nimport { Scroll, ScrollProps } from \"./Scroll\"\r\n\r\nexport interface AutoScrollProps extends ScrollProps {\r\n    /** 轮播元素的个数 */\r\n    count: number\r\n\r\n    /** 轮播元素的高度 */\r\n    itemHeight: number\r\n\r\n    /**\r\n     * 轮播动画的时间，单位毫秒\r\n     * @default 1000\r\n     */\r\n    animation?: number\r\n\r\n    /**\r\n     * 每个元素的停留时间，单位毫秒\r\n     * @default 3000\r\n     */\r\n    duration?: number\r\n\r\n    /** \r\n     * 元素之间的间距 \r\n     * @default 0\r\n     */\r\n    gap?: number\r\n\r\n    /** 容器类名 */\r\n    containerClassName?: string\r\n\r\n    /** 容器样式 */\r\n    containerStyle?: CSSProperties\r\n\r\n    /** \r\n     * 在鼠标移入时是否继续播放\r\n     * @default false\r\n     */\r\n    playOnMouseEnter?: boolean\r\n}\r\n\r\nexport const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {\r\n    const { count, itemHeight, animation = 1000, duration = 3000, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, ...rest } = props\r\n    const bar = useRef<Scrollbar | null>(null)\r\n    const timeout = useRef<NodeJS.Timeout | undefined>(undefined)\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const size = useSize(ele)\r\n    const pause = useRef(false)\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n    useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n    useEffect(() => {\r\n        if (playOnMouseEnter) pause.current = false\r\n    }, [playOnMouseEnter])\r\n\r\n    useEffect(() => {\r\n        if (!size || count === 0) return\r\n        const { height } = size\r\n        const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))\r\n        const scrollHeight = range[range.length - 1]\r\n        if (height >= scrollHeight) return\r\n        function scroll(target: number) {\r\n            clearTimeout(timeout.current)\r\n            timeout.current = setTimeout(() => {\r\n                if (pause.current) return scroll(target)\r\n                bar.current?.scrollTo(0, target, animation)\r\n            }, duration)\r\n        }\r\n        scroll(range[0])\r\n        function listener(status: ScrollStatus) {\r\n            const { y } = status.offset\r\n            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05\r\n            const target = scrollToBottom ? 0 : range.find(item => item > y)!\r\n            scroll(target)\r\n        }\r\n        bar.current?.addListener(listener)\r\n        return () => {\r\n            clearTimeout(timeout.current)\r\n            bar.current?.removeListener(listener)\r\n            bar.current?.scrollTo(0, 0)\r\n        }\r\n    }, [size, count, itemHeight, gap, duration, animation])\r\n\r\n    function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (playOnMouseEnter) return\r\n        pause.current = true\r\n        onMouseEnter?.(e)\r\n    }\r\n\r\n    function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (playOnMouseEnter) return\r\n        pause.current = false\r\n        onMouseLeave?.(e)\r\n    }\r\n\r\n    return (\r\n        <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>\r\n            <div\r\n                className={clsx(\r\n                    css`\r\n                        display: flex;\r\n                        flex-direction: column;\r\n                        gap: var(--gap, 0);\r\n                        & > * {\r\n                            flex: none;\r\n                        }\r\n                    `,\r\n                    containerClassName\r\n                )}\r\n                style={{ \"--gap\": `${gap}px`, ...containerStyle } as CSSProperties}>\r\n                {children}\r\n            </div>\r\n        </Scroll>\r\n    )\r\n})\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAoB;AACpB,oBAAwB;AACxB,2BAA+B;AAC/B,mBAAiH;AAGjH,oBAAoC;AAwC7B,IAAM,iBAAa,yBAA4C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,OAAO,YAAY,YAAY,KAAM,WAAW,KAAM,cAAc,cAAc,MAAM,GAAG,oBAAoB,gBAAgB,UAAU,kBAAkB,WAAW,GAAG,KAAK,IAAI;AAC1L,QAAM,UAAM,qBAAyB,IAAI;AACzC,QAAM,cAAU,qBAAmC,MAAS;AAC5D,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,WAAO,uBAAQ,GAAG;AACxB,QAAM,YAAQ,qBAAO,KAAK;AAE1B,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAC/C,wCAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AAErD,8BAAU,MAAM;AACZ,QAAI;AAAkB,YAAM,UAAU;AAAA,EAC1C,GAAG,CAAC,gBAAgB,CAAC;AAErB,8BAAU,MAAM;AACZ,QAAI,CAAC,QAAQ,UAAU;AAAG;AAC1B,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,YAAQ,+BAAS,OAAO,YAAU,aAAa,QAAQ,QAAQ,MAAM,UAAU,QAAQ,IAAI,MAAM,EAAE;AACzG,UAAM,eAAe,MAAM,MAAM,SAAS,CAAC;AAC3C,QAAI,UAAU;AAAc;AAC5B,aAAS,OAAO,QAAgB;AAC5B,mBAAa,QAAQ,OAAO;AAC5B,cAAQ,UAAU,WAAW,MAAM;AAC/B,YAAI,MAAM;AAAS,iBAAO,OAAO,MAAM;AACvC,YAAI,SAAS,SAAS,GAAG,QAAQ,SAAS;AAAA,MAC9C,GAAG,QAAQ;AAAA,IACf;AACA,WAAO,MAAM,CAAC,CAAC;AACf,aAAS,SAAS,QAAsB;AACpC,YAAM,EAAE,EAAE,IAAI,OAAO;AACrB,YAAM,iBAAiB,KAAK,IAAI,IAAI,SAAS,YAAY,IAAI,cAAc;AAC3E,YAAM,SAAS,iBAAiB,IAAI,MAAM,KAAK,UAAQ,OAAO,CAAC;AAC/D,aAAO,MAAM;AAAA,IACjB;AACA,QAAI,SAAS,YAAY,QAAQ;AACjC,WAAO,MAAM;AACT,mBAAa,QAAQ,OAAO;AAC5B,UAAI,SAAS,eAAe,QAAQ;AACpC,UAAI,SAAS,SAAS,GAAG,CAAC;AAAA,IAC9B;AAAA,EACJ,GAAG,CAAC,MAAM,OAAO,YAAY,KAAK,UAAU,SAAS,CAAC;AAEtD,WAAS,sBAAsB,GAAgD;AAC3E,QAAI;AAAkB;AACtB,UAAM,UAAU;AAChB,mBAAe,CAAC;AAAA,EACpB;AAEA,WAAS,sBAAsB,GAAgD;AAC3E,QAAI;AAAkB;AACtB,UAAM,UAAU;AAChB,mBAAe,CAAC;AAAA,EACpB;AAEA,SACI,oCAAC,wBAAO,KAAK,KAAK,WAAW,KAAK,cAAc,uBAAuB,cAAc,uBAAwB,GAAG,QAC5G;AAAA,IAAC;AAAA;AAAA,MACG,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQA;AAAA,MACJ;AAAA,MACA,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,eAAe;AAAA;AAAA,IAC/C;AAAA,EACL,CACJ;AAER,CAAC;",
   "names": []
 }

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

@@ -5,7 +5,13 @@ export { default as Scrollbar } from "smooth-scrollbar";
 export * from "smooth-scrollbar/interfaces";
 export interface ScrollOptions extends Partial<ScrollbarOptions> {
     /** 滑块宽度 */
-    thumbWidth?: number;
+    thumbWidth?: number | string;
+    /** 滑块圆角大小 */
+    thumbRadius?: number | string;
+    /** 滑块背景颜色 */
+    thumbColor?: string;
+    /** 滚动条背景颜色 */
+    trackColor?: string;
 }
 export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
     /** 滚动的配置 */

package/dist/cjs/components/Scroll.js

@@ -43,7 +43,7 @@ var import_smooth_scrollbar2 = __toESM(require("smooth-scrollbar"));
 __reExport(Scroll_exports, require("smooth-scrollbar/interfaces"), module.exports);
 var Scroll = (0, import_react.forwardRef)((props, ref) => {
   const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props;
-  const { thumbWidth, ...scrollbarOptions } = options || {};
+  const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {};
   const ele = (0, import_react.useRef)(null);
   const bar = (0, import_react.useRef)(null);
   (0, import_react.useLayoutEffect)(() => {
@@ -63,27 +63,36 @@ var Scroll = (0, import_react.forwardRef)((props, ref) => {
     {
       ref: ele,
       className: (0, import_deepsea_tools.clsx)(
-        typeof thumbWidth === "number" && import_css.css`
-                        .scrollbar-track.scrollbar-track-x {
-                            height: var(--thumb-width);
-                        }
+        import_css.css`
+                    .scrollbar-track.scrollbar-track-x {
+                        ${thumbWidth !== void 0 ? "height: var(--thumb-width);" : ""}
+                        ${trackColor !== void 0 ? "background-color: var(--track-color);" : ""}
+                    }
 
-                        .scrollbar-thumb.scrollbar-thumb-x {
-                            height: var(--thumb-width);
-                        }
+                    .scrollbar-thumb.scrollbar-thumb-x {
+                        ${thumbWidth !== void 0 ? "height: var(--thumb-width);" : ""}
+                        ${thumbRadius !== void 0 ? "border-radius: var(--thumb-radius);" : ""}
+                        ${thumbColor !== void 0 ? "background-color: var(--thumb-color);" : ""}
+                    }
 
-                        .scrollbar-track.scrollbar-track-y {
-                            width: var(--thumb-width);
-                        }
+                    .scrollbar-track.scrollbar-track-y {
+                        ${thumbWidth !== void 0 ? "width: var(--thumb-width);" : ""}
+                        ${trackColor !== void 0 ? "background-color: var(--track-color);" : ""}
+                    }
 
-                        .scrollbar-thumb.scrollbar-thumb-y {
-                            width: var(--thumb-width);
-                        }
-                    `,
+                    .scrollbar-thumb.scrollbar-thumb-y {
+                        ${thumbWidth !== void 0 ? "width: var(--thumb-width);" : ""}
+                        ${thumbRadius !== void 0 ? "border-radius: var(--thumb-radius);" : ""}
+                        ${thumbColor !== void 0 ? "background-color: var(--thumb-color);" : ""}
+                    }
+                `,
         className
       ),
       style: {
-        "--thumb-width": typeof thumbWidth === "number" ? `${thumbWidth}px` : void 0,
+        "--thumb-width": typeof thumbWidth === "number" ? `${thumbWidth}px` : thumbWidth,
+        "--thumb-radius": typeof thumbRadius === "number" ? `${thumbRadius}px` : thumbRadius,
+        "--thumb-color": thumbColor,
+        "--track-color": trackColor,
         ...style
       },
       ...rest

package/dist/cjs/components/Scroll.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Scroll.tsx"],
-  "sourcesContent": ["\"use client\"\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport type { ScrollbarOptions, ScrollListener } from \"smooth-scrollbar/interfaces\"\r\nexport { default as Scrollbar } from \"smooth-scrollbar\"\r\nexport * from \"smooth-scrollbar/interfaces\"\r\n\r\nexport interface ScrollOptions extends Partial<ScrollbarOptions> {\r\n    /** 滑块宽度 */\r\n    thumbWidth?: number\r\n}\r\n\r\nexport interface ScrollProps extends HTMLAttributes<HTMLDivElement> {\r\n    /** 滚动的配置 */\r\n    options?: ScrollOptions\r\n    /** 滚动条实例 */\r\n    scrollbar?: ForwardedRef<Scrollbar>\r\n    /** 滚动条滚动事件 */\r\n    onScrollbar?: ScrollListener\r\n}\r\n\r\nexport const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {\r\n    const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props\r\n    const { thumbWidth, ...scrollbarOptions } = options || {}\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const bar = useRef<Scrollbar | null>(null)\r\n\r\n    useLayoutEffect(() => {\r\n        bar.current = Scrollbar.init(ele.current!, scrollbarOptions)\r\n        return () => bar.current?.destroy()\r\n    }, [])\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n\r\n    useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n    useEffect(() => {\r\n        if (!onScrollbar) return\r\n        bar.current?.addListener(onScrollbar)\r\n        return () => bar.current?.removeListener(onScrollbar)\r\n    }, [onScrollbar])\r\n\r\n    return (\r\n        <div\r\n            ref={ele}\r\n            className={clsx(\r\n                typeof thumbWidth === \"number\" &&\r\n                    css`\r\n                        .scrollbar-track.scrollbar-track-x {\r\n                            height: var(--thumb-width);\r\n                        }\r\n\r\n                        .scrollbar-thumb.scrollbar-thumb-x {\r\n                            height: var(--thumb-width);\r\n                        }\r\n\r\n                        .scrollbar-track.scrollbar-track-y {\r\n                            width: var(--thumb-width);\r\n                        }\r\n\r\n                        .scrollbar-thumb.scrollbar-thumb-y {\r\n                            width: var(--thumb-width);\r\n                        }\r\n                    `,\r\n                className\r\n            )}\r\n            style={\r\n                {\r\n                    \"--thumb-width\": typeof thumbWidth === \"number\" ? `${thumbWidth}px` : undefined,\r\n                    ...style\r\n                } as CSSProperties\r\n            }\r\n            {...rest}>\r\n            {children}\r\n        </div>\r\n    )\r\n})\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAoB;AACpB,2BAAqB;AACrB,mBAAiI;AACjI,8BAAsB;AAEtB,IAAAA,2BAAqC;AACrC,2BAAc,wCAPd;AAuBO,IAAM,aAAS,yBAAwC,CAAC,OAAO,QAAQ;AAC1E,QAAM,EAAE,UAAU,SAAS,WAAW,OAAO,WAAW,aAAa,GAAG,KAAK,IAAI;AACjF,QAAM,EAAE,YAAY,GAAG,iBAAiB,IAAI,WAAW,CAAC;AACxD,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,UAAM,qBAAyB,IAAI;AAEzC,oCAAgB,MAAM;AAClB,QAAI,UAAU,wBAAAC,QAAU,KAAK,IAAI,SAAU,gBAAgB;AAC3D,WAAO,MAAM,IAAI,SAAS,QAAQ;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAE/C,wCAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AAErD,8BAAU,MAAM;AACZ,QAAI,CAAC;AAAa;AAClB,QAAI,SAAS,YAAY,WAAW;AACpC,WAAO,MAAM,IAAI,SAAS,eAAe,WAAW;AAAA,EACxD,GAAG,CAAC,WAAW,CAAC;AAEhB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP,OAAO,eAAe,YAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAiBJ;AAAA,MACJ;AAAA,MACA,OACI;AAAA,QACI,iBAAiB,OAAO,eAAe,WAAW,GAAG,iBAAiB;AAAA,QACtE,GAAG;AAAA,MACP;AAAA,MAEH,GAAG;AAAA;AAAA,IACH;AAAA,EACL;AAER,CAAC;",
+  "sourcesContent": ["\"use client\"\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport type { ScrollbarOptions, ScrollListener } from \"smooth-scrollbar/interfaces\"\r\nexport { default as Scrollbar } from \"smooth-scrollbar\"\r\nexport * from \"smooth-scrollbar/interfaces\"\r\n\r\nexport interface ScrollOptions extends Partial<ScrollbarOptions> {\r\n    /** 滑块宽度 */\r\n    thumbWidth?: number | string\r\n    /** 滑块圆角大小 */\r\n    thumbRadius?: number | string\r\n    /** 滑块背景颜色 */\r\n    thumbColor?: string\r\n    /** 滚动条背景颜色 */\r\n    trackColor?: string\r\n}\r\n\r\nexport interface ScrollProps extends HTMLAttributes<HTMLDivElement> {\r\n    /** 滚动的配置 */\r\n    options?: ScrollOptions\r\n    /** 滚动条实例 */\r\n    scrollbar?: ForwardedRef<Scrollbar>\r\n    /** 滚动条滚动事件 */\r\n    onScrollbar?: ScrollListener\r\n}\r\n\r\nexport const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {\r\n    const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props\r\n    const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {}\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const bar = useRef<Scrollbar | null>(null)\r\n\r\n    useLayoutEffect(() => {\r\n        bar.current = Scrollbar.init(ele.current!, scrollbarOptions)\r\n        return () => bar.current?.destroy()\r\n    }, [])\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n\r\n    useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n    useEffect(() => {\r\n        if (!onScrollbar) return\r\n        bar.current?.addListener(onScrollbar)\r\n        return () => bar.current?.removeListener(onScrollbar)\r\n    }, [onScrollbar])\r\n\r\n    return (\r\n        <div\r\n            ref={ele}\r\n            className={clsx(\r\n                css`\r\n                    .scrollbar-track.scrollbar-track-x {\r\n                        ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\r\n                        ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\r\n                    }\r\n\r\n                    .scrollbar-thumb.scrollbar-thumb-x {\r\n                        ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\r\n                        ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\r\n                        ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\r\n                    }\r\n\r\n                    .scrollbar-track.scrollbar-track-y {\r\n                        ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\r\n                        ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\r\n                    }\r\n\r\n                    .scrollbar-thumb.scrollbar-thumb-y {\r\n                        ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\r\n                        ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\r\n                        ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\r\n                    }\r\n                `,\r\n                className\r\n            )}\r\n            style={\r\n                {\r\n                    \"--thumb-width\": typeof thumbWidth === \"number\" ? `${thumbWidth}px` : thumbWidth,\r\n                    \"--thumb-radius\": typeof thumbRadius === \"number\" ? `${thumbRadius}px` : thumbRadius,\r\n                    \"--thumb-color\": thumbColor,\r\n                    \"--track-color\": trackColor,\r\n                    ...style\r\n                } as CSSProperties\r\n            }\r\n            {...rest}>\r\n            {children}\r\n        </div>\r\n    )\r\n})\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAoB;AACpB,2BAAqB;AACrB,mBAAiI;AACjI,8BAAsB;AAEtB,IAAAA,2BAAqC;AACrC,2BAAc,wCAPd;AA6BO,IAAM,aAAS,yBAAwC,CAAC,OAAO,QAAQ;AAC1E,QAAM,EAAE,UAAU,SAAS,WAAW,OAAO,WAAW,aAAa,GAAG,KAAK,IAAI;AACjF,QAAM,EAAE,YAAY,aAAa,YAAY,YAAY,GAAG,iBAAiB,IAAI,WAAW,CAAC;AAC7F,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,UAAM,qBAAyB,IAAI;AAEzC,oCAAgB,MAAM;AAClB,QAAI,UAAU,wBAAAC,QAAU,KAAK,IAAI,SAAU,gBAAgB;AAC3D,WAAO,MAAM,IAAI,SAAS,QAAQ;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAE/C,wCAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AAErD,8BAAU,MAAM;AACZ,QAAI,CAAC;AAAa;AAClB,QAAI,SAAS,YAAY,WAAW;AACpC,WAAO,MAAM,IAAI,SAAS,eAAe,WAAW;AAAA,EACxD,GAAG,CAAC,WAAW,CAAC;AAEhB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA,0BAEU,eAAe,SAAY,gCAAgC;AAAA,0BAC3D,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,gCAAgC;AAAA,0BAC3D,gBAAgB,SAAY,wCAAwC;AAAA,0BACpE,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,+BAA+B;AAAA,0BAC1D,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,+BAA+B;AAAA,0BAC1D,gBAAgB,SAAY,wCAAwC;AAAA,0BACpE,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA,QAG/E;AAAA,MACJ;AAAA,MACA,OACI;AAAA,QACI,iBAAiB,OAAO,eAAe,WAAW,GAAG,iBAAiB;AAAA,QACtE,kBAAkB,OAAO,gBAAgB,WAAW,GAAG,kBAAkB;AAAA,QACzE,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,GAAG;AAAA,MACP;AAAA,MAEH,GAAG;AAAA;AAAA,IACH;AAAA,EACL;AAER,CAAC;",
   "names": ["import_smooth_scrollbar", "Scrollbar"]
 }

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

@@ -1,21 +1,33 @@
 import { CSSProperties } from "react";
 import { ScrollProps } from "./Scroll";
 export interface AutoScrollProps extends ScrollProps {
-    /** 轮播的数据 */
+    /** 轮播元素的个数 */
     count: number;
     /** 轮播元素的高度 */
     itemHeight: number;
-    /** 轮播动画的时间 */
-    animation: number;
-    /** 每个元素的停留时间 */
-    duration: number;
-    /** 元素之间的间距 */
+    /**
+     * 轮播动画的时间，单位毫秒
+     * @default 1000
+     */
+    animation?: number;
+    /**
+     * 每个元素的停留时间，单位毫秒
+     * @default 3000
+     */
+    duration?: number;
+    /**
+     * 元素之间的间距
+     * @default 0
+     */
     gap?: number;
     /** 容器类名 */
     containerClassName?: string;
     /** 容器样式 */
     containerStyle?: CSSProperties;
-    /** 在鼠标移入时是否继续播放 */
+    /**
+     * 在鼠标移入时是否继续播放
+     * @default false
+     */
     playOnMouseEnter?: boolean;
 }
 export declare const AutoScroll: import("react").ForwardRefExoticComponent<AutoScrollProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/AutoScroll.js

@@ -10,8 +10,8 @@ export const AutoScroll = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     count,
     itemHeight,
-    animation,
-    duration,
+    animation = 1000,
+    duration = 3000,
     onMouseEnter,
     onMouseLeave,
     gap = 0,

package/dist/esm/components/AutoScroll.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","useSize","clsx","getArray","forwardRef","useEffect","useImperativeHandle","useRef","Scroll","jsx","_jsx","AutoScroll","props","ref","count","itemHeight","animation","duration","onMouseEnter","onMouseLeave","gap","containerClassName","containerStyle","children","playOnMouseEnter","scrollbar","rest","bar","timeout","undefined","ele","size","pause","current","height","range","index","scrollHeight","length","scroll","target","clearTimeout","setTimeout","scrollTo","listener","status","y","offset","scrollToBottom","Math","abs","find","item","addListener","removeListener","onContainerMouseEnter","e","onContainerMouseLeave","className","style"],"sources":["../../../src/components/AutoScroll.tsx"],"sourcesContent":["\"use client\"\r\nimport { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx, getArray } from \"deepsea-tools\"\r\nimport { CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\r\nimport { Scroll, ScrollProps } from \"./Scroll\"\r\n\r\nexport interface AutoScrollProps extends ScrollProps {\r\n    /** 轮播的数据 */\r\n    count: number\r\n\r\n    /** 轮播元素的高度 */\r\n    itemHeight: number\r\n\r\n    /** 轮播动画的时间 */\r\n    animation: number\r\n\r\n    /** 每个元素的停留时间 */\r\n    duration: number\r\n\r\n    /** 元素之间的间距 */\r\n    gap?: number\r\n\r\n    /** 容器类名 */\r\n    containerClassName?: string\r\n\r\n    /** 容器样式 */\r\n    containerStyle?: CSSProperties\r\n\r\n    /** 在鼠标移入时是否继续播放 */\r\n    playOnMouseEnter?: boolean\r\n}\r\n\r\nexport const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {\r\n    const { count, itemHeight, animation, duration, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, ...rest } = props\r\n    const bar = useRef<Scrollbar | null>(null)\r\n    const timeout = useRef<NodeJS.Timeout | undefined>(undefined)\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const size = useSize(ele)\r\n    const pause = useRef(false)\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n    useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n    useEffect(() => {\r\n        if (playOnMouseEnter) pause.current = false\r\n    }, [playOnMouseEnter])\r\n\r\n    useEffect(() => {\r\n        if (!size || count === 0) return\r\n        const { height } = size\r\n        const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))\r\n        const scrollHeight = range[range.length - 1]\r\n        if (height >= scrollHeight) return\r\n        function scroll(target: number) {\r\n            clearTimeout(timeout.current)\r\n            timeout.current = setTimeout(() => {\r\n                if (pause.current) return scroll(target)\r\n                bar.current?.scrollTo(0, target, animation)\r\n            }, duration)\r\n        }\r\n        scroll(range[0])\r\n        function listener(status: ScrollStatus) {\r\n            const { y } = status.offset\r\n            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05\r\n            const target = scrollToBottom ? 0 : range.find(item => item > y)!\r\n            scroll(target)\r\n        }\r\n        bar.current?.addListener(listener)\r\n        return () => {\r\n            clearTimeout(timeout.current)\r\n            bar.current?.removeListener(listener)\r\n            bar.current?.scrollTo(0, 0)\r\n        }\r\n    }, [size, count, itemHeight, gap, duration, animation])\r\n\r\n    function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (playOnMouseEnter) return\r\n        pause.current = true\r\n        onMouseEnter?.(e)\r\n    }\r\n\r\n    function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (playOnMouseEnter) return\r\n        pause.current = false\r\n        onMouseLeave?.(e)\r\n    }\r\n\r\n    return (\r\n        <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>\r\n            <div\r\n                className={clsx(\r\n                    css`\r\n                        display: flex;\r\n                        flex-direction: column;\r\n                        gap: var(--gap, 0);\r\n                        & > * {\r\n                            flex: none;\r\n                        }\r\n                    `,\r\n                    containerClassName\r\n                )}\r\n                style={{ \"--gap\": `${gap}px`, ...containerStyle } as CSSProperties}>\r\n                {children}\r\n            </div>\r\n        </Scroll>\r\n    )\r\n})\r\n"],"mappings":"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"}
+{"version":3,"names":["css","useSize","clsx","getArray","forwardRef","useEffect","useImperativeHandle","useRef","Scroll","jsx","_jsx","AutoScroll","props","ref","count","itemHeight","animation","duration","onMouseEnter","onMouseLeave","gap","containerClassName","containerStyle","children","playOnMouseEnter","scrollbar","rest","bar","timeout","undefined","ele","size","pause","current","height","range","index","scrollHeight","length","scroll","target","clearTimeout","setTimeout","scrollTo","listener","status","y","offset","scrollToBottom","Math","abs","find","item","addListener","removeListener","onContainerMouseEnter","e","onContainerMouseLeave","className","style"],"sources":["../../../src/components/AutoScroll.tsx"],"sourcesContent":["\"use client\"\r\nimport { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx, getArray } from \"deepsea-tools\"\r\nimport { CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\r\nimport { Scroll, ScrollProps } from \"./Scroll\"\r\n\r\nexport interface AutoScrollProps extends ScrollProps {\r\n    /** 轮播元素的个数 */\r\n    count: number\r\n\r\n    /** 轮播元素的高度 */\r\n    itemHeight: number\r\n\r\n    /**\r\n     * 轮播动画的时间，单位毫秒\r\n     * @default 1000\r\n     */\r\n    animation?: number\r\n\r\n    /**\r\n     * 每个元素的停留时间，单位毫秒\r\n     * @default 3000\r\n     */\r\n    duration?: number\r\n\r\n    /** \r\n     * 元素之间的间距 \r\n     * @default 0\r\n     */\r\n    gap?: number\r\n\r\n    /** 容器类名 */\r\n    containerClassName?: string\r\n\r\n    /** 容器样式 */\r\n    containerStyle?: CSSProperties\r\n\r\n    /** \r\n     * 在鼠标移入时是否继续播放\r\n     * @default false\r\n     */\r\n    playOnMouseEnter?: boolean\r\n}\r\n\r\nexport const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {\r\n    const { count, itemHeight, animation = 1000, duration = 3000, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, ...rest } = props\r\n    const bar = useRef<Scrollbar | null>(null)\r\n    const timeout = useRef<NodeJS.Timeout | undefined>(undefined)\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const size = useSize(ele)\r\n    const pause = useRef(false)\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n    useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n    useEffect(() => {\r\n        if (playOnMouseEnter) pause.current = false\r\n    }, [playOnMouseEnter])\r\n\r\n    useEffect(() => {\r\n        if (!size || count === 0) return\r\n        const { height } = size\r\n        const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))\r\n        const scrollHeight = range[range.length - 1]\r\n        if (height >= scrollHeight) return\r\n        function scroll(target: number) {\r\n            clearTimeout(timeout.current)\r\n            timeout.current = setTimeout(() => {\r\n                if (pause.current) return scroll(target)\r\n                bar.current?.scrollTo(0, target, animation)\r\n            }, duration)\r\n        }\r\n        scroll(range[0])\r\n        function listener(status: ScrollStatus) {\r\n            const { y } = status.offset\r\n            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05\r\n            const target = scrollToBottom ? 0 : range.find(item => item > y)!\r\n            scroll(target)\r\n        }\r\n        bar.current?.addListener(listener)\r\n        return () => {\r\n            clearTimeout(timeout.current)\r\n            bar.current?.removeListener(listener)\r\n            bar.current?.scrollTo(0, 0)\r\n        }\r\n    }, [size, count, itemHeight, gap, duration, animation])\r\n\r\n    function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (playOnMouseEnter) return\r\n        pause.current = true\r\n        onMouseEnter?.(e)\r\n    }\r\n\r\n    function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (playOnMouseEnter) return\r\n        pause.current = false\r\n        onMouseLeave?.(e)\r\n    }\r\n\r\n    return (\r\n        <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>\r\n            <div\r\n                className={clsx(\r\n                    css`\r\n                        display: flex;\r\n                        flex-direction: column;\r\n                        gap: var(--gap, 0);\r\n                        & > * {\r\n                            flex: none;\r\n                        }\r\n                    `,\r\n                    containerClassName\r\n                )}\r\n                style={{ \"--gap\": `${gap}px`, ...containerStyle } as CSSProperties}>\r\n                {children}\r\n            </div>\r\n        </Scroll>\r\n    )\r\n})\r\n"],"mappings":"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"}

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

@@ -5,7 +5,13 @@ export { default as Scrollbar } from "smooth-scrollbar";
 export * from "smooth-scrollbar/interfaces";
 export interface ScrollOptions extends Partial<ScrollbarOptions> {
     /** 滑块宽度 */
-    thumbWidth?: number;
+    thumbWidth?: number | string;
+    /** 滑块圆角大小 */
+    thumbRadius?: number | string;
+    /** 滑块背景颜色 */
+    thumbColor?: string;
+    /** 滚动条背景颜色 */
+    trackColor?: string;
 }
 export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
     /** 滚动的配置 */

package/dist/esm/components/Scroll.js

@@ -19,6 +19,9 @@ export const Scroll = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const {
     thumbWidth,
+    thumbRadius,
+    thumbColor,
+    trackColor,
     ...scrollbarOptions
   } = options || {};
   const ele = useRef(null);
@@ -36,25 +39,34 @@ export const Scroll = /*#__PURE__*/forwardRef((props, ref) => {
   }, [onScrollbar]);
   return /*#__PURE__*/_jsx("div", {
     ref: ele,
-    className: clsx(typeof thumbWidth === "number" && css`
-                        .scrollbar-track.scrollbar-track-x {
-                            height: var(--thumb-width);
-                        }
+    className: clsx(css`
+                    .scrollbar-track.scrollbar-track-x {
+                        ${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""}
+                        ${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
+                    }
 
-                        .scrollbar-thumb.scrollbar-thumb-x {
-                            height: var(--thumb-width);
-                        }
+                    .scrollbar-thumb.scrollbar-thumb-x {
+                        ${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""}
+                        ${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""}
+                        ${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
+                    }
 
-                        .scrollbar-track.scrollbar-track-y {
-                            width: var(--thumb-width);
-                        }
+                    .scrollbar-track.scrollbar-track-y {
+                        ${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""}
+                        ${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
+                    }
 
-                        .scrollbar-thumb.scrollbar-thumb-y {
-                            width: var(--thumb-width);
-                        }
-                    `, className),
+                    .scrollbar-thumb.scrollbar-thumb-y {
+                        ${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""}
+                        ${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""}
+                        ${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
+                    }
+                `, className),
     style: {
-      "--thumb-width": typeof thumbWidth === "number" ? `${thumbWidth}px` : undefined,
+      "--thumb-width": typeof thumbWidth === "number" ? `${thumbWidth}px` : thumbWidth,
+      "--thumb-radius": typeof thumbRadius === "number" ? `${thumbRadius}px` : thumbRadius,
+      "--thumb-color": thumbColor,
+      "--track-color": trackColor,
       ...style
     },
     ...rest,

package/dist/esm/components/Scroll.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","clsx","forwardRef","useEffect","useImperativeHandle","useLayoutEffect","useRef","Scrollbar","jsx","_jsx","default","Scroll","props","ref","children","options","className","style","scrollbar","onScrollbar","rest","thumbWidth","scrollbarOptions","ele","bar","current","init","destroy","addListener","removeListener","undefined"],"sources":["../../../src/components/Scroll.tsx"],"sourcesContent":["\"use client\"\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport type { ScrollbarOptions, ScrollListener } from \"smooth-scrollbar/interfaces\"\r\nexport { default as Scrollbar } from \"smooth-scrollbar\"\r\nexport * from \"smooth-scrollbar/interfaces\"\r\n\r\nexport interface ScrollOptions extends Partial<ScrollbarOptions> {\r\n    /** 滑块宽度 */\r\n    thumbWidth?: number\r\n}\r\n\r\nexport interface ScrollProps extends HTMLAttributes<HTMLDivElement> {\r\n    /** 滚动的配置 */\r\n    options?: ScrollOptions\r\n    /** 滚动条实例 */\r\n    scrollbar?: ForwardedRef<Scrollbar>\r\n    /** 滚动条滚动事件 */\r\n    onScrollbar?: ScrollListener\r\n}\r\n\r\nexport const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {\r\n    const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props\r\n    const { thumbWidth, ...scrollbarOptions } = options || {}\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const bar = useRef<Scrollbar | null>(null)\r\n\r\n    useLayoutEffect(() => {\r\n        bar.current = Scrollbar.init(ele.current!, scrollbarOptions)\r\n        return () => bar.current?.destroy()\r\n    }, [])\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n\r\n    useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n    useEffect(() => {\r\n        if (!onScrollbar) return\r\n        bar.current?.addListener(onScrollbar)\r\n        return () => bar.current?.removeListener(onScrollbar)\r\n    }, [onScrollbar])\r\n\r\n    return (\r\n        <div\r\n            ref={ele}\r\n            className={clsx(\r\n                typeof thumbWidth === \"number\" &&\r\n                    css`\r\n                        .scrollbar-track.scrollbar-track-x {\r\n                            height: var(--thumb-width);\r\n                        }\r\n\r\n                        .scrollbar-thumb.scrollbar-thumb-x {\r\n                            height: var(--thumb-width);\r\n                        }\r\n\r\n                        .scrollbar-track.scrollbar-track-y {\r\n                            width: var(--thumb-width);\r\n                        }\r\n\r\n                        .scrollbar-thumb.scrollbar-thumb-y {\r\n                            width: var(--thumb-width);\r\n                        }\r\n                    `,\r\n                className\r\n            )}\r\n            style={\r\n                {\r\n                    \"--thumb-width\": typeof thumbWidth === \"number\" ? `${thumbWidth}px` : undefined,\r\n                    ...style\r\n                } as CSSProperties\r\n            }\r\n            {...rest}>\r\n            {children}\r\n        </div>\r\n    )\r\n})\r\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAAsCC,UAAU,EAAkBC,SAAS,EAAEC,mBAAmB,EAAEC,eAAe,EAAEC,MAAM,QAAQ,OAAO;AACxI,OAAOC,SAAS,MAAM,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAExC,SAASC,OAAO,IAAIH,SAAS,QAAQ,kBAAkB;AACvD,cAAc,6BAA6B;AAgB3C,OAAO,MAAMI,MAAM,gBAAGT,UAAU,CAA8B,CAACU,KAAK,EAAEC,GAAG,KAAK;EAC1E,MAAM;IAAEC,QAAQ;IAAEC,OAAO;IAAEC,SAAS;IAAEC,KAAK;IAAEC,SAAS;IAAEC,WAAW;IAAE,GAAGC;EAAK,CAAC,GAAGR,KAAK;EACtF,MAAM;IAAES,UAAU;IAAE,GAAGC;EAAiB,CAAC,GAAGP,OAAO,IAAI,CAAC,CAAC;EACzD,MAAMQ,GAAG,GAAGjB,MAAM,CAAiB,IAAI,CAAC;EACxC,MAAMkB,GAAG,GAAGlB,MAAM,CAAmB,IAAI,CAAC;EAE1CD,eAAe,CAAC,MAAM;IAClBmB,GAAG,CAACC,OAAO,GAAGlB,SAAS,CAACmB,IAAI,CAACH,GAAG,CAACE,OAAO,EAAGH,gBAAgB,CAAC;IAC5D,OAAO,MAAME,GAAG,CAACC,OAAO,EAAEE,OAAO,CAAC,CAAC;EACvC,CAAC,EAAE,EAAE,CAAC;EAENvB,mBAAmB,CAACS,GAAG,EAAE,MAAMU,GAAG,CAACE,OAAQ,EAAE,EAAE,CAAC;EAEhDrB,mBAAmB,CAACc,SAAS,EAAE,MAAMM,GAAG,CAACC,OAAQ,EAAE,EAAE,CAAC;EAEtDtB,SAAS,CAAC,MAAM;IACZ,IAAI,CAACgB,WAAW,EAAE;IAClBK,GAAG,CAACC,OAAO,EAAEG,WAAW,CAACT,WAAW,CAAC;IACrC,OAAO,MAAMK,GAAG,CAACC,OAAO,EAAEI,cAAc,CAACV,WAAW,CAAC;EACzD,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,oBACIV,IAAA;IACII,GAAG,EAAEU,GAAI;IACTP,SAAS,EAAEf,IAAI,CACX,OAAOoB,UAAU,KAAK,QAAQ,IAC1BrB,GAAI;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,EACLgB,SACJ,CAAE;IACFC,KAAK,EACD;MACI,eAAe,EAAE,OAAOI,UAAU,KAAK,QAAQ,GAAI,GAAEA,UAAW,IAAG,GAAGS,SAAS;MAC/E,GAAGb;IACP,CACH;IAAA,GACGG,IAAI;IAAAN,QAAA,EACPA;EAAQ,CACR,CAAC;AAEd,CAAC,CAAC"}
+{"version":3,"names":["css","clsx","forwardRef","useEffect","useImperativeHandle","useLayoutEffect","useRef","Scrollbar","jsx","_jsx","default","Scroll","props","ref","children","options","className","style","scrollbar","onScrollbar","rest","thumbWidth","thumbRadius","thumbColor","trackColor","scrollbarOptions","ele","bar","current","init","destroy","addListener","removeListener","undefined"],"sources":["../../../src/components/Scroll.tsx"],"sourcesContent":["\"use client\"\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport type { ScrollbarOptions, ScrollListener } from \"smooth-scrollbar/interfaces\"\r\nexport { default as Scrollbar } from \"smooth-scrollbar\"\r\nexport * from \"smooth-scrollbar/interfaces\"\r\n\r\nexport interface ScrollOptions extends Partial<ScrollbarOptions> {\r\n    /** 滑块宽度 */\r\n    thumbWidth?: number | string\r\n    /** 滑块圆角大小 */\r\n    thumbRadius?: number | string\r\n    /** 滑块背景颜色 */\r\n    thumbColor?: string\r\n    /** 滚动条背景颜色 */\r\n    trackColor?: string\r\n}\r\n\r\nexport interface ScrollProps extends HTMLAttributes<HTMLDivElement> {\r\n    /** 滚动的配置 */\r\n    options?: ScrollOptions\r\n    /** 滚动条实例 */\r\n    scrollbar?: ForwardedRef<Scrollbar>\r\n    /** 滚动条滚动事件 */\r\n    onScrollbar?: ScrollListener\r\n}\r\n\r\nexport const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {\r\n    const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props\r\n    const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {}\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const bar = useRef<Scrollbar | null>(null)\r\n\r\n    useLayoutEffect(() => {\r\n        bar.current = Scrollbar.init(ele.current!, scrollbarOptions)\r\n        return () => bar.current?.destroy()\r\n    }, [])\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n\r\n    useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n    useEffect(() => {\r\n        if (!onScrollbar) return\r\n        bar.current?.addListener(onScrollbar)\r\n        return () => bar.current?.removeListener(onScrollbar)\r\n    }, [onScrollbar])\r\n\r\n    return (\r\n        <div\r\n            ref={ele}\r\n            className={clsx(\r\n                css`\r\n                    .scrollbar-track.scrollbar-track-x {\r\n                        ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\r\n                        ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\r\n                    }\r\n\r\n                    .scrollbar-thumb.scrollbar-thumb-x {\r\n                        ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\r\n                        ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\r\n                        ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\r\n                    }\r\n\r\n                    .scrollbar-track.scrollbar-track-y {\r\n                        ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\r\n                        ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\r\n                    }\r\n\r\n                    .scrollbar-thumb.scrollbar-thumb-y {\r\n                        ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\r\n                        ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\r\n                        ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\r\n                    }\r\n                `,\r\n                className\r\n            )}\r\n            style={\r\n                {\r\n                    \"--thumb-width\": typeof thumbWidth === \"number\" ? `${thumbWidth}px` : thumbWidth,\r\n                    \"--thumb-radius\": typeof thumbRadius === \"number\" ? `${thumbRadius}px` : thumbRadius,\r\n                    \"--thumb-color\": thumbColor,\r\n                    \"--track-color\": trackColor,\r\n                    ...style\r\n                } as CSSProperties\r\n            }\r\n            {...rest}>\r\n            {children}\r\n        </div>\r\n    )\r\n})\r\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "deepsea-components",
-    "version": "2.8.2",
+    "version": "2.8.3",
     "description": "格数科技自用组件库",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",

package/src/components/AutoScroll.tsx

@@ -8,19 +8,28 @@ import { ScrollStatus } from "smooth-scrollbar/interfaces/scrollbar"
 import { Scroll, ScrollProps } from "./Scroll"
 
 export interface AutoScrollProps extends ScrollProps {
-    /** 轮播的数据 */
+    /** 轮播元素的个数 */
     count: number
 
     /** 轮播元素的高度 */
     itemHeight: number
 
-    /** 轮播动画的时间 */
-    animation: number
+    /**
+     * 轮播动画的时间，单位毫秒
+     * @default 1000
+     */
+    animation?: number
 
-    /** 每个元素的停留时间 */
-    duration: number
+    /**
+     * 每个元素的停留时间，单位毫秒
+     * @default 3000
+     */
+    duration?: number
 
-    /** 元素之间的间距 */
+    /** 
+     * 元素之间的间距 
+     * @default 0
+     */
     gap?: number
 
     /** 容器类名 */
@@ -29,12 +38,15 @@ export interface AutoScrollProps extends ScrollProps {
     /** 容器样式 */
     containerStyle?: CSSProperties
 
-    /** 在鼠标移入时是否继续播放 */
+    /** 
+     * 在鼠标移入时是否继续播放
+     * @default false
+     */
     playOnMouseEnter?: boolean
 }
 
 export const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {
-    const { count, itemHeight, animation, duration, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, ...rest } = props
+    const { count, itemHeight, animation = 1000, duration = 3000, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, ...rest } = props
     const bar = useRef<Scrollbar | null>(null)
     const timeout = useRef<NodeJS.Timeout | undefined>(undefined)
     const ele = useRef<HTMLDivElement>(null)

package/src/components/Scroll.tsx

@@ -9,7 +9,13 @@ export * from "smooth-scrollbar/interfaces"
 
 export interface ScrollOptions extends Partial<ScrollbarOptions> {
     /** 滑块宽度 */
-    thumbWidth?: number
+    thumbWidth?: number | string
+    /** 滑块圆角大小 */
+    thumbRadius?: number | string
+    /** 滑块背景颜色 */
+    thumbColor?: string
+    /** 滚动条背景颜色 */
+    trackColor?: string
 }
 
 export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
@@ -23,7 +29,7 @@ export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
 
 export const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {
     const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props
-    const { thumbWidth, ...scrollbarOptions } = options || {}
+    const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {}
     const ele = useRef<HTMLDivElement>(null)
     const bar = useRef<Scrollbar | null>(null)
 
@@ -46,29 +52,37 @@ export const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {
         <div
             ref={ele}
             className={clsx(
-                typeof thumbWidth === "number" &&
-                    css`
-                        .scrollbar-track.scrollbar-track-x {
-                            height: var(--thumb-width);
-                        }
+                css`
+                    .scrollbar-track.scrollbar-track-x {
+                        ${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""}
+                        ${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
+                    }
 
-                        .scrollbar-thumb.scrollbar-thumb-x {
-                            height: var(--thumb-width);
-                        }
+                    .scrollbar-thumb.scrollbar-thumb-x {
+                        ${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""}
+                        ${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""}
+                        ${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
+                    }
 
-                        .scrollbar-track.scrollbar-track-y {
-                            width: var(--thumb-width);
-                        }
+                    .scrollbar-track.scrollbar-track-y {
+                        ${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""}
+                        ${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
+                    }
 
-                        .scrollbar-thumb.scrollbar-thumb-y {
-                            width: var(--thumb-width);
-                        }
-                    `,
+                    .scrollbar-thumb.scrollbar-thumb-y {
+                        ${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""}
+                        ${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""}
+                        ${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
+                    }
+                `,
                 className
             )}
             style={
                 {
-                    "--thumb-width": typeof thumbWidth === "number" ? `${thumbWidth}px` : undefined,
+                    "--thumb-width": typeof thumbWidth === "number" ? `${thumbWidth}px` : thumbWidth,
+                    "--thumb-radius": typeof thumbRadius === "number" ? `${thumbRadius}px` : thumbRadius,
+                    "--thumb-color": thumbColor,
+                    "--track-color": trackColor,
                     ...style
                 } as CSSProperties
             }