@type-dom/ui 0.1.0 → 0.1.2

package/src/components/basic/td-scrollbar/td-scrollbar.class.js

@@ -2,49 +2,189 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdScrollbar = void 0;
 const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const use_namespace_1 = require("../../../hooks/use-namespace");
 const bar_class_1 = require("./bar/bar.class");
-class TdScrollbar extends framework_1.TypeHtml {
+const td_scrollbar_const_1 = require("./td-scrollbar.const");
+require("./style/index");
+class TdScrollbar extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
         this.className = 'TdScrollbar';
-        this.nodeName = params.tag || 'div';
-        this.dom = document.createElement(this.nodeName);
         this.attr.addName('td-scrollbar');
-        this.style.addObj({
-            overflow: 'hidden',
-            position: 'relative',
-            height: '100%'
+        this.tag = params.tag;
+        params.tag = 'div';
+        this.addEmits(td_scrollbar_const_1.scrollbarEmits);
+        this.assignProps(td_scrollbar_const_1.scrollbarProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        const COMPONENT_NAME = 'TdScrollbar';
+        const props = this.props;
+        const emit = this.emit;
+        const ns = (0, use_namespace_1.useNamespace)('scrollbar');
+        let stopResizeObserver = undefined;
+        let stopResizeListener = undefined;
+        let wrapScrollTop = 0;
+        let wrapScrollLeft = 0;
+        const scrollbarRef = (0, signals_1.signal)();
+        const wrapRef = (0, signals_1.signal)();
+        const resizeRef = (0, signals_1.signal)();
+        const barRef = (0, signals_1.signal)();
+        const wrapStyle = (0, signals_1.computed)(() => {
+            const style = {};
+            if (props.height)
+                style.height = (0, utils_1.addUnit)(props.height);
+            if (props.maxHeight)
+                style.maxHeight = (0, utils_1.addUnit)(props.maxHeight);
+            return [props.wrapStyle, style];
         });
-        this.wrap = new framework_1.Div({
-            name: 'td-scrollbar-wrap',
-            styleObj: {
-                overflow: 'auto',
-                height: (params === null || params === void 0 ? void 0 : params.height) || '100%'
-            }
+        const wrapKls = (0, signals_1.computed)(() => {
+            return [
+                props.wrapClass,
+                ns.e('wrap'),
+                { [ns.em('wrap', 'hidden-default')]: !props.native },
+            ];
         });
-        this.view = new framework_1.Div({
-            // params?.tag 默认是div，简化处理，不加其它的tag标签了；
-            name: 'td-scrollbar-view'
+        const resizeKls = (0, signals_1.computed)(() => {
+            return [ns.e('view'), props.viewClass];
         });
-        if (params === null || params === void 0 ? void 0 : params.viewStyle) {
-            this.view.style.addObj(params.viewStyle);
-        }
-        this.wrap.addChild(this.view);
-        if (params === null || params === void 0 ? void 0 : params.wrapStyle) {
-            this.wrap.style.addObj(params.wrapStyle);
-        }
-        this.addChild(this.wrap);
-        if (!(params === null || params === void 0 ? void 0 : params.native)) {
-            const bar = new bar_class_1.TdScrollbarBar({
-                always: (params === null || params === void 0 ? void 0 : params.always) || true,
-                minSize: (params === null || params === void 0 ? void 0 : params.minSize) || 20
-            });
-            this.addChildren(...bar.thumbs);
+        const handleScroll = () => {
+            var _a, _b, _c, _d;
+            // console.warn('handleScroll')
+            if (wrapRef.get()) {
+                (_b = (_a = barRef.get()) === null || _a === void 0 ? void 0 : _a.handleScroll) === null || _b === void 0 ? void 0 : _b.call(_a, wrapRef.get());
+                wrapScrollTop = wrapRef.get().scrollTop;
+                wrapScrollLeft = wrapRef.get().scrollLeft;
+                emit('scroll', {
+                    scrollTop: (_c = wrapRef.get()) === null || _c === void 0 ? void 0 : _c.scrollTop,
+                    scrollLeft: (_d = wrapRef.get()) === null || _d === void 0 ? void 0 : _d.scrollLeft,
+                });
+            }
+        };
+        function scrollTo(arg1, arg2) {
+            if ((0, utils_1.isObject)(arg1)) {
+                wrapRef.get().scrollTo(arg1);
+            }
+            else if ((0, utils_1.isNumber)(arg1) && (0, utils_1.isNumber)(arg2)) {
+                wrapRef.get().scrollTo(arg1, arg2);
+            }
         }
-        if (params === null || params === void 0 ? void 0 : params.contents) {
-            this.view.addChildren(...params.contents);
+        const setScrollTop = (value) => {
+            if (!(0, utils_1.isNumber)(value)) {
+                (0, utils_1.debugWarn)(COMPONENT_NAME, 'value must be a number');
+                return;
+            }
+            wrapRef.get().scrollTop = value;
+        };
+        const setScrollLeft = (value) => {
+            if (!(0, utils_1.isNumber)(value)) {
+                (0, utils_1.debugWarn)(COMPONENT_NAME, 'value must be a number');
+                return;
+            }
+            wrapRef.get().scrollLeft = value;
+        };
+        const update = () => {
+            var _a, _b;
+            (_b = (_a = barRef.get()) === null || _a === void 0 ? void 0 : _a.updateDom) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
+        (0, signals_1.watch)(() => props.noresize, (noresize) => {
+            if (noresize) {
+                stopResizeObserver === null || stopResizeObserver === void 0 ? void 0 : stopResizeObserver();
+                stopResizeListener === null || stopResizeListener === void 0 ? void 0 : stopResizeListener();
+            }
+            else {
+                ({ stop: stopResizeObserver } = (0, framework_1.useResizeObserver)(resizeRef, update));
+                stopResizeListener = (0, framework_1.useEventListener)('resize', update);
+            }
+        }, { immediate: true });
+        (0, signals_1.watch)(() => [props.maxHeight, props.height], () => {
+            if (!props.native)
+                (0, framework_1.nextTick)(() => {
+                    var _a, _b;
+                    update();
+                    if (wrapRef.get()) {
+                        (_b = (_a = barRef.get()) === null || _a === void 0 ? void 0 : _a.handleScroll) === null || _b === void 0 ? void 0 : _b.call(_a, wrapRef.get());
+                    }
+                });
+        });
+        (0, framework_1.provide)(td_scrollbar_const_1.scrollbarContextKey, 
+        // reactive({
+        //   scrollbarElement: scrollbarRef,
+        //   wrapElement: wrapRef,
+        // })
+        {
+            scrollbarElement: scrollbarRef,
+            wrapElement: wrapRef,
+        });
+        (0, framework_1.onActivated)(() => {
+            if (wrapRef.get()) {
+                wrapRef.get().scrollTop = wrapScrollTop;
+                wrapRef.get().scrollLeft = wrapScrollLeft;
+            }
+        });
+        (0, framework_1.onMounted)(() => {
+            if (!props.native)
+                (0, framework_1.nextTick)(() => {
+                    update();
+                });
+        });
+        (0, framework_1.onUpdated)(() => update());
+        (0, framework_1.defineExpose)({
+            /** @description scrollbar wrap ref */
+            wrapRef,
+            /** @description update scrollbar state manually */
+            updateDom: update,
+            /** @description scrolls to a particular set of coordinates */
+            scrollTo,
+            /** @description set distance to scroll top */
+            setScrollTop,
+            /** @description set distance to scroll left */
+            setScrollLeft,
+            /** @description handle scroll event */
+            handleScroll,
+        });
+        this.assignProps({
+            refDom: scrollbarRef,
+            // class: ns.b() // todo 不生效 ？？？
+        });
+        this.attr.addClass(ns.b());
+        this.addChild(new framework_1.Div({
+            name: 'td-scrollbar-wrap',
+            refDom: wrapRef,
+            class: wrapKls,
+            styleObj: wrapStyle,
+            attrObj: {
+                tabindex: props.tabindex,
+            },
+            events: {
+                scroll: handleScroll,
+            },
+            slot: [
+                new framework_1.XElement({
+                    tag: this.tag,
+                    refDom: resizeRef,
+                    class: resizeKls,
+                    name: 'td-scrollbar-resize',
+                    attrObj: {
+                        id: props.id,
+                        role: props.role,
+                        ariaLabel: props.ariaLabel,
+                        ariaOrientation: props.ariaOrientation,
+                    },
+                    styleObj: props.viewStyle,
+                    slot: props.slot
+                }),
+            ],
+        }));
+        if (!(props === null || props === void 0 ? void 0 : props.native)) {
+            this.addChild(new bar_class_1.Bar({
+                refEl: barRef,
+                always: props === null || props === void 0 ? void 0 : props.always,
+                minSize: props === null || props === void 0 ? void 0 : props.minSize,
+            }));
         }
-        this.props = this.useParams(params);
     }
 }
 exports.TdScrollbar = TdScrollbar;

package/src/components/basic/td-scrollbar/td-scrollbar.const.d.ts

@@ -0,0 +1,10 @@
+import { InjectionKey } from '@type-dom/framework';
+import { ScrollbarProps, ScrollbarContext } from './td-scrollbar.interface';
+export declare const scrollbarProps: ScrollbarProps;
+export declare const scrollbarEmits: {
+    scroll: ({ scrollTop, scrollLeft, }: {
+        scrollTop: number;
+        scrollLeft: number;
+    }) => boolean;
+};
+export declare const scrollbarContextKey: InjectionKey<ScrollbarContext>;

package/src/components/basic/td-scrollbar/td-scrollbar.const.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scrollbarContextKey = exports.scrollbarEmits = exports.scrollbarProps = void 0;
+const utils_1 = require("@type-dom/utils");
+exports.scrollbarProps = {
+    native: false,
+    tag: 'div',
+    minSize: 20,
+    // ...useAriaProps(['ariaLabel', 'ariaOrientation']),
+};
+exports.scrollbarEmits = {
+    scroll: ({ scrollTop, scrollLeft, }) => [scrollTop, scrollLeft].every(utils_1.isNumber),
+};
+exports.scrollbarContextKey = Symbol('scrollbarContextKey');

package/src/components/basic/td-scrollbar/td-scrollbar.interface.d.ts

@@ -1,9 +1,10 @@
 import { IStyle } from '@type-dom/css-type';
-import { ITypeConfig, ITypeHtml, TypeElement } from '@type-dom/framework';
-export interface ITdScrollbar extends ITypeHtml {
+import { ClassValue, ITypeDiv, TypeDivProps } from '@type-dom/framework';
+import { Signal } from '@type-dom/signals';
+export interface ITdScrollbar extends ITypeDiv {
     className: 'TdScrollbar';
 }
-export interface ITdScrollbarConfig extends ITypeConfig {
+export interface ScrollbarProps extends TypeDivProps {
     /**
      * @description height of scrollbar
      */
@@ -14,15 +15,21 @@ export interface ITdScrollbarConfig extends ITypeConfig {
     maxHeight?: number | string;
     /**
      * @description whether to use the native scrollbar
+     *     default: false,
      */
     native?: boolean;
     /**
      * @description style of wrap
      */
     wrapStyle?: Partial<IStyle>;
+    /**
+     * @description class of wrap
+     */
+    wrapClass?: ClassValue;
     /**
      * @description class of view
      */
+    viewClass?: ClassValue;
     /**
      * @description style of view
      */
@@ -31,6 +38,7 @@ export interface ITdScrollbarConfig extends ITypeConfig {
      * @description element tag of the view
      * default: div
      */
+    tag?: string;
     /**
      * @description do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance
      */
@@ -43,6 +51,10 @@ export interface ITdScrollbarConfig extends ITypeConfig {
      * @description minimum size of scrollbar
      */
     minSize?: number;
+    /**
+     * @description Wrap tabindex
+     */
+    tabindex?: string | number;
     /**
      * @description id of view
      */
@@ -59,5 +71,8 @@ export interface ITdScrollbarConfig extends ITypeConfig {
      * @description aria-orientation of view
      */
     ariaOrientation?: 'horizontal' | 'vertical';
-    contents?: TypeElement[];
+}
+export interface ScrollbarContext {
+    scrollbarElement: Signal<HTMLDivElement | undefined>;
+    wrapElement: Signal<HTMLDivElement | undefined>;
 }

package/src/components/basic/td-scrollbar/td-scrollbar.interface.js

@@ -1,5 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-// export const scrollbarProps = ({
-//
-// } as const)

package/src/components/basic/td-scrollbar/td-scrollbar.style.d.ts

@@ -0,0 +1,13 @@
+import { IStyle } from '@type-dom/css-type';
+export declare const $scrollbar: {
+    opacity: number;
+    bgColor: string;
+    hoverOpacity: number;
+    hoverBgColor: string;
+};
+export declare const $scrollbarStyle: IStyle;
+export declare const $scrollbarWrapStyle: IStyle;
+export declare const $scrollbarWrapHiddenDefaultStyle: IStyle;
+export declare const $scrollbarThumbStyle: IStyle;
+export declare const $scrollbarThumbHoverStyle: IStyle;
+export declare const $scrollbarBarStyle: IStyle;

package/src/components/basic/td-scrollbar/td-scrollbar.style.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$scrollbarBarStyle = exports.$scrollbarThumbHoverStyle = exports.$scrollbarThumbStyle = exports.$scrollbarWrapHiddenDefaultStyle = exports.$scrollbarWrapStyle = exports.$scrollbarStyle = exports.$scrollbar = void 0;
+const transition_1 = require("../../../styles/transition");
+const var_1 = require("../../../styles/var");
+// Scrollbar
+// css3 var in packages/theme-chalk/src/scrollbar.scss
+exports.$scrollbar = {
+    opacity: 0.3,
+    // bg-color: getCssVar('text-color-secondary'),
+    bgColor: var_1.$textColor.secondary,
+    hoverOpacity: 0.5,
+    // hover-bg-color: getCssVar('text-color-secondary'),
+    hoverBgColor: var_1.$textColor.secondary,
+};
+exports.$scrollbarStyle = {
+    overflow: 'hidden',
+    position: 'relative',
+    height: '100%',
+};
+exports.$scrollbarWrapStyle = {
+    overflow: 'auto',
+    height: '100%',
+};
+exports.$scrollbarWrapHiddenDefaultStyle = {
+    scrollbarWidth: 'none',
+    // &::-webkit-scrollbar {
+    //   display: none,
+    // }
+};
+exports.$scrollbarThumbStyle = {
+    position: 'relative',
+    display: 'block',
+    width: 0,
+    height: 0,
+    cursor: 'pointer',
+    borderRadius: 'inherit',
+    // background-color: var(
+    //   #{getCssVarName('scrollbar-bg-color')},
+    //   map.get($scrollbar, 'bg-color')
+    // );
+    backgroundColor: exports.$scrollbar.bgColor,
+    // transition: getCssVar('transition-duration') background-color;
+    transition: transition_1.$transitionDuration.default + 'background-color',
+    // opacity: var(
+    //   #{getCssVarName('scrollbar-opacity')},
+    //   map.get($scrollbar, 'opacity')
+    // );
+    opacity: exports.$scrollbar.opacity,
+};
+exports.$scrollbarThumbHoverStyle = {
+    //   background-color: var(
+    //     #{getCssVarName('scrollbar-hover-bg-color')},
+    //     map.get($scrollbar, 'hover-bg-color')
+    //   );
+    backgroundColor: exports.$scrollbar.hoverBgColor,
+    //   opacity: var(
+    //     #{getCssVarName('scrollbar-hover-opacity')},
+    //     map.get($scrollbar, 'hover-opacity')
+    //   );
+    opacity: exports.$scrollbar.hoverOpacity,
+};
+exports.$scrollbarBarStyle = {
+    position: 'absolute',
+    right: '2px',
+    bottom: '2px',
+    zIndex: 1,
+    borderRadius: '4px',
+};

package/src/components/basic/td-scrollbar/thumb/thumb.class.d.ts

@@ -1,8 +1,8 @@
-import { TypeDiv } from '@type-dom/framework';
-import { ITdScrollbarThumb, ITdScrollbarThumbConfig } from './thumb.interface';
-export declare class TdScrollbarThumb extends TypeDiv implements ITdScrollbarThumb {
-    className: 'TdScrollbarThumb';
-    props: ITdScrollbarThumbConfig;
-    private thumb;
-    constructor(params?: ITdScrollbarThumbConfig);
+import { TypeFragment } from '@type-dom/framework';
+import { IThumb, ThumbProps } from './thumb.interface';
+export declare class Thumb extends TypeFragment implements IThumb {
+    className: 'Thumb';
+    props: ThumbProps;
+    constructor(params?: ThumbProps);
+    setup(): void;
 }

package/src/components/basic/td-scrollbar/thumb/thumb.class.js

@@ -1,44 +1,153 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdScrollbarThumb = void 0;
+exports.Thumb = void 0;
 const framework_1 = require("@type-dom/framework");
-const var_1 = require("../../../../styles/var");
-class TdScrollbarThumb extends framework_1.TypeDiv {
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+const util_1 = require("../util");
+const td_scrollbar_const_1 = require("../td-scrollbar.const");
+class Thumb extends framework_1.TypeFragment {
     constructor(params = {}) {
         super();
-        this.className = 'TdScrollbarThumb';
-        this.attr.addName('td-scrollbar-thumb');
-        this.style.addObj({
-            position: 'absolute',
-            right: '2px',
-            bottom: '2px',
-            zIndex: 1,
-            borderRadius: '4px'
+        this.className = 'Thumb';
+        this.props = this.useParams(params);
+    }
+    setup() {
+        const props = this.props;
+        const COMPONENT_NAME = 'Thumb';
+        const scrollbar = (0, framework_1.inject)(td_scrollbar_const_1.scrollbarContextKey);
+        const ns = (0, use_namespace_1.useNamespace)('scrollbar');
+        if (!scrollbar)
+            (0, utils_1.throwError)(COMPONENT_NAME, 'can not inject scrollbar context');
+        const instance = (0, signals_1.signal)();
+        const thumb = (0, signals_1.signal)();
+        const thumbState = (0, signals_1.signal)({});
+        const visible = (0, signals_1.signal)(false);
+        let cursorDown = false;
+        let cursorLeave = false;
+        let originalOnSelectStart = utils_1.isClient ? document.onselectstart : null;
+        const bar = (0, signals_1.computed)(() => util_1.BAR_MAP[props.vertical ? 'vertical' : 'horizontal']);
+        const thumbStyle = (0, signals_1.computed)(() => {
+            // console.warn('thumStyle . ');
+            // props.size?.get();
+            // props.move?.get();
+            return (0, util_1.renderThumbStyle)({
+                size: props.size,
+                move: props.move,
+                bar: bar.get(),
+            });
         });
-        this.thumb = new framework_1.Div({
-            styleObj: {
-                position: 'relative',
-                display: 'block',
-                width: 0,
-                height: 0,
-                cursor: 'pointer',
-                borderRadius: 'inherit',
-                // background-color: var(
-                //   #{getCssVarName('scrollbar-bg-color')},
-                //   map.get($scrollbar, 'bg-color')
-                // ),
-                backgroundColor: var_1.$scrollbar.bgColor,
-                // transition: getCssVar('transition-duration') background-color,
-                // transition: $transitionDuration + ' ' + $bgColor.default,
-                // opacity: var(
-                //   #{getCssVarName('scrollbar-opacity')},
-                //   map.get($scrollbar, 'opacity')
-                // ),
-                opacity: var_1.$scrollbar.opacity
-            }
+        const offsetRatio = (0, signals_1.computed)(() => 
+        // offsetRatioX = original width of thumb / current width of thumb / ratioX
+        // offsetRatioY = original height of thumb / current height of thumb / ratioY
+        // instance height = wrap height - GAP
+        Math.pow(instance.get()[bar.get().offset], 2) /
+            scrollbar.wrapElement.get()[bar.get().scrollSize] /
+            (0, signals_1.unref)(props.ratio) /
+            thumb.get()[bar.get().offset]);
+        const clickThumbHandler = (e) => {
+            var _a;
+            // prevent click event of middle and right button
+            if (!e)
+                return;
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+            if ((e === null || e === void 0 ? void 0 : e.ctrlKey) || [1, 2].includes(e.button))
+                return;
+            (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+            startDrag(e);
+            const el = e.currentTarget;
+            if (!el)
+                return;
+            thumbState.get()[bar.get().axis] =
+                el[bar.get().offset] -
+                    (e[bar.get().client] - el.getBoundingClientRect()[bar.get().direction]);
+        };
+        const clickTrackHandler = (e) => {
+            if (!e || !thumb.get() || !instance.get() || !scrollbar.wrapElement)
+                return;
+            const offset = Math.abs(e.target.getBoundingClientRect()[bar.get().direction] -
+                e[bar.get().client]);
+            const thumbHalf = thumb.get()[bar.get().offset] / 2;
+            const thumbPositionPercentage = ((offset - thumbHalf) * 100 * offsetRatio.get()) /
+                instance.get()[bar.get().offset];
+            scrollbar.wrapElement.get()[bar.get().scroll] =
+                (thumbPositionPercentage * scrollbar.wrapElement.get()[bar.get().scrollSize]) /
+                    100;
+        };
+        const startDrag = (e) => {
+            e.stopImmediatePropagation();
+            cursorDown = true;
+            document.addEventListener('mousemove', mouseMoveDocumentHandler);
+            document.addEventListener('mouseup', mouseUpDocumentHandler);
+            originalOnSelectStart = document.onselectstart;
+            document.onselectstart = () => false;
+        };
+        const mouseMoveDocumentHandler = (e) => {
+            if (!instance.get() || !thumb.get())
+                return;
+            if (cursorDown === false)
+                return;
+            const prevPage = thumbState.get()[bar.get().axis];
+            if (!prevPage)
+                return;
+            const offset = (instance.get().getBoundingClientRect()[bar.get().direction] -
+                e[bar.get().client]) *
+                -1;
+            const thumbClickPosition = thumb.get()[bar.get().offset] - prevPage;
+            const thumbPositionPercentage = ((offset - thumbClickPosition) * 100 * offsetRatio.get()) /
+                instance.get()[bar.get().offset];
+            scrollbar.wrapElement.get()[bar.get().scroll] =
+                (thumbPositionPercentage * scrollbar.wrapElement.get()[bar.get().scrollSize]) /
+                    100;
+        };
+        const mouseUpDocumentHandler = () => {
+            cursorDown = false;
+            thumbState.get()[bar.get().axis] = 0;
+            document.removeEventListener('mousemove', mouseMoveDocumentHandler);
+            document.removeEventListener('mouseup', mouseUpDocumentHandler);
+            restoreOnselectstart();
+            if (cursorLeave)
+                visible.set(false);
+        };
+        const mouseMoveScrollbarHandler = () => {
+            var _a;
+            cursorLeave = false;
+            visible.set(!!((_a = props.size) === null || _a === void 0 ? void 0 : _a.get()));
+        };
+        const mouseLeaveScrollbarHandler = () => {
+            cursorLeave = true;
+            visible.set(cursorDown);
+        };
+        (0, framework_1.onBeforeUnmount)(() => {
+            restoreOnselectstart();
+            document.removeEventListener('mouseup', mouseUpDocumentHandler);
         });
-        this.addChild(this.thumb);
-        this.props = this.useParams(params);
+        const restoreOnselectstart = () => {
+            if (document.onselectstart !== originalOnSelectStart)
+                document.onselectstart = originalOnSelectStart;
+        };
+        (0, framework_1.useEventListener)(scrollbar.scrollbarElement, 'mousemove', mouseMoveScrollbarHandler);
+        (0, framework_1.useEventListener)(scrollbar.scrollbarElement, 'mouseleave', mouseLeaveScrollbarHandler);
+        this.addChild(new framework_1.Transition({
+            name: ns.b('fade'),
+            slot: new framework_1.Div({
+                vShow: (0, signals_1.computed)(() => props.always || visible.get()),
+                refDom: instance,
+                class: (0, signals_1.computed)(() => [ns.e('bar'), ns.is(bar.get().key)]),
+                events: {
+                    mousedown: clickTrackHandler,
+                },
+                slot: new framework_1.Div({
+                    refDom: thumb,
+                    class: ns.e('thumb'),
+                    styleObj: thumbStyle,
+                    events: {
+                        mousedown: clickThumbHandler,
+                    },
+                }),
+            })
+        }));
     }
 }
-exports.TdScrollbarThumb = TdScrollbarThumb;
+exports.Thumb = Thumb;

package/src/components/basic/td-scrollbar/thumb/thumb.interface.d.ts

@@ -1,11 +1,12 @@
-import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
-export interface ITdScrollbarThumb extends ITypeDiv {
-    className: 'TdScrollbarThumb';
+import { ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
+import { Ref } from '@type-dom/signals';
+export interface IThumb extends ITypeFragment {
+    className: 'Thumb';
 }
-export interface ITdScrollbarThumbConfig extends ITypeConfig {
+export interface ThumbProps extends TypeFragmentProps {
     vertical?: boolean;
-    size?: string;
-    move?: number;
-    ratio?: number;
+    size?: Ref<string>;
+    move?: Ref<number>;
+    ratio?: Ref<number>;
     always?: boolean;
 }

package/src/components/basic/td-scrollbar/util.d.ts

@@ -0,0 +1,28 @@
+import { IStyle } from '@type-dom/css-type';
+import { ThumbProps } from './thumb/thumb.interface';
+export declare const GAP = 4;
+export declare const BAR_MAP: {
+    readonly vertical: {
+        readonly offset: "offsetHeight";
+        readonly scroll: "scrollTop";
+        readonly scrollSize: "scrollHeight";
+        readonly size: "height";
+        readonly key: "vertical";
+        readonly axis: "Y";
+        readonly client: "clientY";
+        readonly direction: "top";
+    };
+    readonly horizontal: {
+        readonly offset: "offsetWidth";
+        readonly scroll: "scrollLeft";
+        readonly scrollSize: "scrollWidth";
+        readonly size: "width";
+        readonly key: "horizontal";
+        readonly axis: "X";
+        readonly client: "clientX";
+        readonly direction: "left";
+    };
+};
+export declare const renderThumbStyle: ({ move, size, bar, }: Pick<ThumbProps, "move" | "size"> & {
+    bar: (typeof BAR_MAP)[keyof typeof BAR_MAP];
+}) => IStyle;