@type-dom/ui 0.1.1 → 0.1.3

package/src/components/basic/td-layout/td-col/style/css.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-col.css");

package/src/components/basic/td-layout/td-col/td-col.class.js

@@ -59,7 +59,7 @@ class TdCol extends framework_1.TypeDiv {
             if (gutter.get()) {
                 classes.push(ns.is('guttered'));
             }
-            console.error('classes is ', classes);
+            // console.error('classes is ', classes);
             return [ns.b(), classes];
         });
         this.attr.addClass(colKls);

package/src/components/basic/td-layout/td-row/style/css.d.ts

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-row.css';

package/src/components/basic/td-layout/td-row/style/css.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-row.css");

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

@@ -1,19 +1,12 @@
 import { TypeFragment } from '@type-dom/framework';
-import { TdScrollbarThumb } from '../thumb/thumb.class';
-import { ITdScrollbarBar, ITdScrollbarBarConfig } from './bar.interface';
-export declare class TdScrollbarBar extends TypeFragment implements ITdScrollbarBar {
-    className: 'TdScrollbarBar';
-    props: ITdScrollbarBarConfig;
-    childNodes: TdScrollbarThumb[];
-    private scrollbar?;
-    private moveX;
-    private moveY;
-    private sizeWidth;
-    private sizeHeight;
-    private ratioX;
-    private ratioY;
-    constructor(params?: ITdScrollbarBarConfig);
+import { Thumb } from '../thumb/thumb.class';
+import { IBar, BarProps } from './bar.interface';
+export declare class Bar extends TypeFragment implements IBar {
+    className: 'Bar';
+    props: BarProps;
+    childNodes: Thumb[];
+    handleScroll?: (el?: HTMLDivElement) => void;
+    updateDom?: (el?: HTMLDivElement) => void;
+    constructor(params?: BarProps);
     setup(): void;
-    handleScroll: (wrap: HTMLDivElement) => void;
-    updateBar: () => void;
 }

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

@@ -1,72 +1,75 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdScrollbarBar = void 0;
+exports.Bar = void 0;
 const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
 const util_1 = require("../util");
 const thumb_class_1 = require("../thumb/thumb.class");
 const td_scrollbar_const_1 = require("../td-scrollbar.const");
 const bar_const_1 = require("./bar.const");
-class TdScrollbarBar extends framework_1.TypeFragment {
+class Bar extends framework_1.TypeFragment {
     constructor(params = {}) {
         super();
-        this.handleScroll = (wrap) => {
+        this.className = 'Bar';
+        this.childNodes = [];
+        // this.attr.addName('td-scrollbar-bar');
+        this.assignProps(bar_const_1.barProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        const props = this.props;
+        const scrollbar = (0, framework_1.inject)(td_scrollbar_const_1.scrollbarContextKey);
+        const moveX = (0, signals_1.signal)(0);
+        const moveY = (0, signals_1.signal)(0);
+        const sizeWidth = (0, signals_1.signal)('');
+        const sizeHeight = (0, signals_1.signal)('');
+        const ratioY = (0, signals_1.signal)(1);
+        const ratioX = (0, signals_1.signal)(1);
+        const handleScroll = (wrap) => {
             if (wrap) {
                 const offsetHeight = wrap.offsetHeight - util_1.GAP;
                 const offsetWidth = wrap.offsetWidth - util_1.GAP;
-                this.moveY = ((wrap.scrollTop * 100) / offsetHeight) * this.ratioY;
-                this.moveX = ((wrap.scrollLeft * 100) / offsetWidth) * this.ratioX;
+                moveY.set(((wrap.scrollTop * 100) / offsetHeight) * ratioY.get());
+                moveX.set(((wrap.scrollLeft * 100) / offsetWidth) * ratioX.get());
             }
         };
-        this.updateBar = () => {
-            var _a;
-            const wrap = (_a = this.scrollbar) === null || _a === void 0 ? void 0 : _a.wrapElement.dom;
-            if (!wrap) {
+        const update = () => {
+            const wrap = scrollbar === null || scrollbar === void 0 ? void 0 : scrollbar.wrapElement.get();
+            if (!wrap)
                 return;
-            }
             const offsetHeight = wrap.offsetHeight - util_1.GAP;
             const offsetWidth = wrap.offsetWidth - util_1.GAP;
             const originalHeight = Math.pow(offsetHeight, 2) / wrap.scrollHeight;
             const originalWidth = Math.pow(offsetWidth, 2) / wrap.scrollWidth;
-            const height = Math.max(originalHeight, this.props.minSize);
-            const width = Math.max(originalWidth, this.props.minSize);
-            this.ratioY =
-                originalHeight /
-                    (offsetHeight - originalHeight) /
-                    (height / (offsetHeight - height));
-            this.ratioX =
-                originalWidth /
-                    (offsetWidth - originalWidth) /
-                    (width / (offsetWidth - width));
-            this.sizeHeight = height + util_1.GAP < offsetHeight ? `${height}px` : '';
-            this.sizeWidth = width + util_1.GAP < offsetWidth ? `${width}px` : '';
+            const height = Math.max(originalHeight, props.minSize);
+            const width = Math.max(originalWidth, props.minSize);
+            ratioY.set(originalHeight /
+                (offsetHeight - originalHeight) /
+                (height / (offsetHeight - height)));
+            ratioX.set(originalWidth /
+                (offsetWidth - originalWidth) /
+                (width / (offsetWidth - width)));
+            sizeHeight.set(height + util_1.GAP < offsetHeight ? `${height}px` : '');
+            // console.warn('sizeHeight is ', sizeHeight);
+            sizeWidth.set(width + util_1.GAP < offsetWidth ? `${width}px` : '');
+            // console.warn('sizeWidth is ', sizeWidth);
         };
-        this.className = 'TdScrollbarBar';
-        this.childNodes = [];
-        // this.attr.addName('td-scrollbar-bar');
-        // this.style.addObj($scrollbarBarStyle);
-        // config?.minSize 20
-        this.moveX = 0;
-        this.moveY = 0;
-        this.sizeWidth = '';
-        this.sizeHeight = '';
-        this.ratioY = 1;
-        this.ratioX = 1;
-        this.assignProps(bar_const_1.barProps);
-        this.props = this.useParams(params);
-        this.addChildren(new thumb_class_1.TdScrollbarThumb({
-            move: this.moveX,
-            ratio: this.ratioX,
-            size: this.sizeWidth,
-            always: this.props.always,
-        }), new thumb_class_1.TdScrollbarThumb({
-            move: this.moveY,
-            ratio: this.ratioY,
-            always: this.props.always,
+        (0, framework_1.defineExpose)({
+            handleScroll,
+            updateDom: update,
+        });
+        this.addChildren(new thumb_class_1.Thumb({
+            move: moveX,
+            ratio: ratioX,
+            size: sizeWidth,
+            always: props.always,
+        }), new thumb_class_1.Thumb({
+            move: moveY,
+            ratio: ratioY,
+            size: sizeHeight,
             vertical: true,
+            always: props.always,
         }));
     }
-    setup() {
-        this.scrollbar = this.inject(td_scrollbar_const_1.scrollbarContextKey);
-    }
 }
-exports.TdScrollbarBar = TdScrollbarBar;
+exports.Bar = Bar;

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

@@ -1,2 +1,2 @@
-import { ITdScrollbarBarConfig } from './bar.interface';
-export declare const barProps: ITdScrollbarBarConfig;
+import { BarProps } from './bar.interface';
+export declare const barProps: BarProps;

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

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.barProps = void 0;
 exports.barProps = {
     always: true,
-    // minSize: 20,
+    // minSize: 20, // required: true,
 };

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

@@ -1,8 +1,8 @@
 import { ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
-export interface ITdScrollbarBar extends ITypeFragment {
-    className: 'TdScrollbarBar';
+export interface IBar extends ITypeFragment {
+    className: 'Bar';
 }
-export interface ITdScrollbarBarConfig extends TypeFragmentProps {
+export interface BarProps extends TypeFragmentProps {
     always?: boolean;
     minSize?: number;
 }

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

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-scrollbar.css';

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

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-scrollbar.css");

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

@@ -1,20 +1,18 @@
 import { TypeDiv } from '@type-dom/framework';
-import { ITdScrollbar, ITdScrollbarConfig } from './td-scrollbar.interface';
+import { Arrayable } from '@type-dom/utils';
+import { ITdScrollbar, ScrollbarProps } from './td-scrollbar.interface';
+import './style/index';
 export declare class TdScrollbar extends TypeDiv implements ITdScrollbar {
     className: 'TdScrollbar';
-    props: ITdScrollbarConfig;
-    private wrap;
-    private bar?;
+    props: ScrollbarProps;
+    updateDom?: () => void;
     handleScroll?: () => void;
     stopResizeObserver?: () => void;
     stopResizeListener?: () => void;
     scrollTo?: (xCord: number, yCord?: number) => void;
-    setScrollTop?: (value: number) => void;
+    setScrollTop?: (value: Arrayable<number>) => void;
     scrollLeft?: (value: number) => void;
-    constructor(params?: ITdScrollbarConfig);
+    private tag;
+    constructor(params?: ScrollbarProps);
     setup(): void;
-    mounted(): void;
-    updateScroll: () => void;
-    setResize(noresize?: boolean): void;
-    beforeUnmount(): void;
 }

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

@@ -2,154 +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");
 const td_scrollbar_const_1 = require("./td-scrollbar.const");
-const td_scrollbar_style_1 = require("./td-scrollbar.style");
-const utils_1 = require("@type-dom/utils");
+require("./style/index");
 class TdScrollbar extends framework_1.TypeDiv {
     constructor(params = {}) {
-        var _a, _b, _c;
         super();
-        this.updateScroll = () => {
-            var _a;
-            (_a = this.bar) === null || _a === void 0 ? void 0 : _a.updateBar();
-        };
         this.className = 'TdScrollbar';
         this.attr.addName('td-scrollbar');
-        this.style.addObj(td_scrollbar_style_1.$scrollbarStyle);
+        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);
-        this.wrap = new framework_1.Div({
-            name: 'td-scrollbar-wrap',
-            styleObj: Object.assign({}, td_scrollbar_style_1.$scrollbarWrapStyle, params.wrapStyle),
-            slot: [
-                new framework_1.XElement({
-                    tag: this.props.tag,
-                    name: 'td-scrollbar-resize',
-                    attrObj: {
-                        role: 'role',
-                        ariaLabel: params.ariaLabel,
-                        ariaOrientation: params.ariaOrientation,
-                    },
-                    styleObj: params.viewStyle,
-                    init: (element) => {
-                        element.slotChildren(params.slot);
-                    },
-                }),
-            ],
-        });
-        const wrapStyle = {};
-        if (params.height) {
-            wrapStyle.height = (0, utils_1.addUnit)(params.height);
-        }
-        if (params.maxHeight) {
-            wrapStyle.maxHeight = (0, utils_1.addUnit)(params.maxHeight);
-        }
-        this.wrap.style.addObj(wrapStyle);
-        if (!this.props.native) {
-            this.wrap.style.addObj(td_scrollbar_style_1.$scrollbarWrapHiddenDefaultStyle);
-        }
-        this.addChild(this.wrap);
-        this.addEmits(td_scrollbar_const_1.scrollbarEmits);
-        if (!((_a = this.props) === null || _a === void 0 ? void 0 : _a.native)) {
-            this.bar = new bar_class_1.TdScrollbarBar({
-                always: (_b = this.props) === null || _b === void 0 ? void 0 : _b.always,
-                minSize: (_c = this.props) === null || _c === void 0 ? void 0 : _c.minSize,
-            });
-            this.addChild(this.bar);
-        }
-        this.provide(td_scrollbar_const_1.scrollbarContextKey, {
-            scrollbarElement: this,
-            wrapElement: this.wrap,
-        });
     }
     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];
+        });
+        const wrapKls = (0, signals_1.computed)(() => {
+            return [
+                props.wrapClass,
+                ns.e('wrap'),
+                { [ns.em('wrap', 'hidden-default')]: !props.native },
+            ];
+        });
+        const resizeKls = (0, signals_1.computed)(() => {
+            return [ns.e('view'), props.viewClass];
+        });
         const handleScroll = () => {
-            var _a;
-            if (this.wrap.dom) {
-                (_a = this.bar) === null || _a === void 0 ? void 0 : _a.handleScroll(this.wrap.dom);
-                wrapScrollTop = this.wrap.dom.scrollTop;
-                wrapScrollLeft = this.wrap.dom.scrollLeft;
-                this.emit('scroll', {
-                    scrollTop: this.wrap.dom.scrollTop,
-                    scrollLeft: this.wrap.dom.scrollLeft,
+            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,
                 });
             }
         };
-        this.handleScroll = handleScroll;
-        this.wrap.addEvents({
-            scroll: handleScroll,
-        });
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const self = this;
         function scrollTo(arg1, arg2) {
-            var _a, _b;
             if ((0, utils_1.isObject)(arg1)) {
-                (_a = self.wrap.dom) === null || _a === void 0 ? void 0 : _a.scrollTo(arg1);
+                wrapRef.get().scrollTo(arg1);
             }
             else if ((0, utils_1.isNumber)(arg1) && (0, utils_1.isNumber)(arg2)) {
-                (_b = self.wrap.dom) === null || _b === void 0 ? void 0 : _b.scrollTo(arg1, arg2);
+                wrapRef.get().scrollTo(arg1, arg2);
             }
         }
-        this.scrollTo = scrollTo;
         const setScrollTop = (value) => {
             if (!(0, utils_1.isNumber)(value)) {
                 (0, utils_1.debugWarn)(COMPONENT_NAME, 'value must be a number');
                 return;
             }
-            this.wrap.dom.scrollTop = value;
+            wrapRef.get().scrollTop = value;
         };
-        this.setScrollTop = setScrollTop;
         const setScrollLeft = (value) => {
             if (!(0, utils_1.isNumber)(value)) {
                 (0, utils_1.debugWarn)(COMPONENT_NAME, 'value must be a number');
                 return;
             }
-            this.wrap.dom.scrollLeft = value;
+            wrapRef.get().scrollLeft = value;
         };
-        this.scrollLeft = setScrollLeft;
-        this.onUpdated(() => this.updateScroll);
-        this.setResize(this.props.noresize);
-        if (!this.props.native) {
-            (0, framework_1.nextTick)(() => {
-                var _a;
-                this.updateScroll();
-                if (this.wrap.dom) {
-                    (_a = this.bar) === null || _a === void 0 ? void 0 : _a.handleScroll(this.wrap.dom);
-                }
-            });
-        }
-        // onActivated(() => {
-        //   if (wrapRef.value) {
-        //     wrapRef.value.scrollTop = wrapScrollTop
-        //     wrapRef.value.scrollLeft = wrapScrollLeft
-        //   }
+        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,
         // })
-    }
-    mounted() {
-        if (!this.props.native) {
-            (0, framework_1.nextTick)(() => {
-                this.updateScroll();
-            });
-        }
-    }
-    setResize(noresize) {
-        var _a, _b;
-        if (noresize) {
-            (_a = this.stopResizeObserver) === null || _a === void 0 ? void 0 : _a.call(this);
-            (_b = this.stopResizeListener) === null || _b === void 0 ? void 0 : _b.call(this);
-        }
-        else {
-            // ({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update))
-            // this.stopResizeListener = useEventListener('resize', update)
-            window.addEventListener('resize', this.updateScroll);
+        {
+            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,
+            }));
         }
     }
-    beforeUnmount() {
-        window.removeEventListener('resize', this.updateScroll);
-    }
 }
 exports.TdScrollbar = TdScrollbar;

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

@@ -1,6 +1,6 @@
 import { InjectionKey } from '@type-dom/framework';
-import { ITdScrollbarConfig, ScrollbarContext } from './td-scrollbar.interface';
-export declare const scrollbarProps: ITdScrollbarConfig;
+import { ScrollbarProps, ScrollbarContext } from './td-scrollbar.interface';
+export declare const scrollbarProps: ScrollbarProps;
 export declare const scrollbarEmits: {
     scroll: ({ scrollTop, scrollLeft, }: {
         scrollTop: number;

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

@@ -1,10 +1,10 @@
 import { IStyle } from '@type-dom/css-type';
-import { ITypeDiv, TypeDivProps, TypeDiv } from '@type-dom/framework';
-import { TdScrollbar } from './td-scrollbar.class';
+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 TypeDivProps {
+export interface ScrollbarProps extends TypeDivProps {
     /**
      * @description height of scrollbar
      */
@@ -22,10 +22,14 @@ export interface ITdScrollbarConfig extends TypeDivProps {
      * @description style of wrap
      */
     wrapStyle?: Partial<IStyle>;
+    /**
+     * @description class of wrap
+     */
+    wrapClass?: ClassValue;
     /**
      * @description class of view
      */
-    viewClass?: string;
+    viewClass?: ClassValue;
     /**
      * @description style of view
      */
@@ -47,6 +51,10 @@ export interface ITdScrollbarConfig extends TypeDivProps {
      * @description minimum size of scrollbar
      */
     minSize?: number;
+    /**
+     * @description Wrap tabindex
+     */
+    tabindex?: string | number;
     /**
      * @description id of view
      */
@@ -65,6 +73,6 @@ export interface ITdScrollbarConfig extends TypeDivProps {
     ariaOrientation?: 'horizontal' | 'vertical';
 }
 export interface ScrollbarContext {
-    scrollbarElement: TdScrollbar;
-    wrapElement: TypeDiv;
+    scrollbarElement: Signal<HTMLDivElement | undefined>;
+    wrapElement: Signal<HTMLDivElement | undefined>;
 }

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

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