@type-dom/ui 0.0.7 → 0.0.9

package/src/components/form/td-switch/td-switch.class.js

@@ -15,7 +15,7 @@ class TdSwitch extends ui_abstract_1.UI {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         super(params);
         this.className = 'TdSwitch';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             display: 'inline-flex',
             alignItems: 'center',
             position: 'relative',
@@ -62,7 +62,7 @@ class TdSwitch extends ui_abstract_1.UI {
             this.right = new td_switch_right_1.TdSwitchRight(params);
             this.addChild(this.right);
         }
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
     get actualValue() {
         return this.isControlled ? this.props.modelValue : false;
@@ -74,13 +74,13 @@ class TdSwitch extends ui_abstract_1.UI {
         const props = this.props;
         this.setChecked(this.modelValue === this.activeValue);
         if (props === null || props === void 0 ? void 0 : props.disabled) {
-            this.setDisabled(props === null || props === void 0 ? void 0 : props.disabled);
+            this.setDisabled(props.disabled);
         }
         if (props.loading) {
-            this.setLoading(props === null || props === void 0 ? void 0 : props.loading);
+            this.setLoading(props.loading);
         }
     }
-    initEvents() {
+    setup() {
         this.addEvents({
             click: (evt) => {
                 // changeValue
@@ -90,19 +90,18 @@ class TdSwitch extends ui_abstract_1.UI {
         });
     }
     handleChange() {
-        var _a, _b, _c, _d, _e, _f;
         console.log('handleChange . ');
         const props = this.props;
         const checked = this.modelValue === this.activeValue;
         // this.modelValue = !this.modelValue;
         this.modelValue = checked ? this.inactiveValue : this.activeValue;
         const val = checked ? this.inactiveValue : this.activeValue;
-        // emit(UPDATE_MODEL_EVENT, val)
-        (_b = (_a = this.props.emits) === null || _a === void 0 ? void 0 : _a[event_1.UPDATE_MODEL_EVENT]) === null || _b === void 0 ? void 0 : _b.call(_a, val);
-        // emit(CHANGE_EVENT, val)
-        (_d = (_c = this.props.emits) === null || _c === void 0 ? void 0 : _c[event_1.CHANGE_EVENT]) === null || _d === void 0 ? void 0 : _d.call(_c, val);
-        // emit(INPUT_EVENT, val)
-        (_f = (_e = this.props.emits) === null || _e === void 0 ? void 0 : _e[event_1.INPUT_EVENT]) === null || _f === void 0 ? void 0 : _f.call(_e, val);
+        this.emit(event_1.UPDATE_MODEL_EVENT, val);
+        // this.props.emits?.[UPDATE_MODEL_EVENT]?.(val);
+        this.emit(event_1.CHANGE_EVENT, val);
+        // this.props.emits?.[CHANGE_EVENT]?.(val);
+        this.emit(event_1.INPUT_EVENT, val);
+        // this.props.emits?.[INPUT_EVENT]?.(val);
         (0, framework_1.nextTick)(() => {
             this.input.dom.checked = !checked;
             console.log('handleChange . this.input.dom.checked is ', checked);
@@ -113,32 +112,32 @@ class TdSwitch extends ui_abstract_1.UI {
     setDisabled(disabled) {
         var _a, _b;
         if (disabled) {
-            this.ctrl.setStyleObj({
+            this.style.setObj({
                 opacity: 0.6
             });
-            this.input.ctrl.setAttrObj({
+            this.input.attr.setObj({
                 disabled: true,
                 ariaDisabled: true
             });
-            (_a = this.left) === null || _a === void 0 ? void 0 : _a.ctrl.setStyleObj({
+            (_a = this.left) === null || _a === void 0 ? void 0 : _a.style.setObj({
                 cursor: 'not-allowed'
             });
-            this.core.ctrl.setStyleObj({
+            this.core.style.setObj({
                 cursor: 'not-allowed'
             });
         }
         else {
-            this.ctrl.setStyleObj({
+            this.style.setObj({
                 opacity: 1
             });
-            this.input.ctrl.setAttrObj({
+            this.input.attr.setObj({
                 disabled: false,
                 ariaDisabled: false
             });
-            (_b = this.left) === null || _b === void 0 ? void 0 : _b.ctrl.setStyleObj({
+            (_b = this.left) === null || _b === void 0 ? void 0 : _b.style.setObj({
                 cursor: 'auto'
             });
-            this.core.ctrl.setStyleObj({
+            this.core.style.setObj({
                 cursor: 'auto'
             });
         }
@@ -147,10 +146,10 @@ class TdSwitch extends ui_abstract_1.UI {
     setChecked(checked) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         if (checked) {
-            this.core.ctrl.setStyleObj({
+            this.core.style.setObj({
                 backgroundColor: (_a = this.props.switchOnColor) !== null && _a !== void 0 ? _a : td_switch_style_1.$switchOnColor
             });
-            this.core.action.ctrl.setStyleObj({
+            this.core.action.style.setObj({
                 color: td_switch_style_1.$switchOnColor,
                 // left: calc(100% - #{map.get($switch-button-size, 'default') + 1px});
                 left: 'calc(100% - ' +
@@ -158,12 +157,12 @@ class TdSwitch extends ui_abstract_1.UI {
                     ' - 1px)'
             });
             if (this.right) {
-                this.right.ctrl.setStyleObj({
+                this.right.style.setObj({
                     color: var_1.$colors.primary.base
                 });
             }
             if (this.left) {
-                this.left.ctrl.setStyleObj({
+                this.left.style.setObj({
                     color: var_1.$colors.default.base
                 });
             }
@@ -178,20 +177,20 @@ class TdSwitch extends ui_abstract_1.UI {
             }
         }
         else {
-            this.core.ctrl.setStyleObj({
+            this.core.style.setObj({
                 backgroundColor: (_e = this.props.switchOffColor) !== null && _e !== void 0 ? _e : td_switch_style_1.$switchOffColor
             });
-            this.core.action.ctrl.setStyleObj({
+            this.core.action.style.setObj({
                 left: '1px',
                 color: td_switch_style_1.$switchOffColor
             });
             if (this.left) {
-                this.left.ctrl.setStyleObj({
+                this.left.style.setObj({
                     color: var_1.$colors.primary.base
                 });
             }
             if (this.right) {
-                this.right.ctrl.setStyleObj({
+                this.right.style.setObj({
                     color: var_1.$colors.default.base
                 });
             }

package/src/components/form/td-switch/widget/td-switch-core.js

@@ -10,10 +10,10 @@ class TdSwitchCore extends framework_1.TypeSpan {
     constructor(params = {}) {
         super();
         this.className = 'TdSwitchCore';
-        this.ctrl.addAttrObj({
+        this.attr.addObj({
             name: 'switch-core'
         });
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             display: 'inline-flex',
             position: 'relative',
             alignItems: 'center',
@@ -131,7 +131,7 @@ class TdSwitchCore extends framework_1.TypeSpan {
             this.action.addChild(loadingIcon);
         }
         else if ((params === null || params === void 0 ? void 0 : params.modelValue) === (params === null || params === void 0 ? void 0 : params.activeValue)) {
-            this.action.ctrl.addStyleObj({
+            this.action.style.addObj({
                 color: td_switch_style_1.$switchOnColor
             });
             if (params === null || params === void 0 ? void 0 : params.activeActionIcon) {
@@ -166,12 +166,12 @@ class TdSwitchCore extends framework_1.TypeSpan {
             }
         }
         this.addChild(this.action);
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
     setInnerChecked(checked) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         if (checked) {
-            (_a = this.inner) === null || _a === void 0 ? void 0 : _a.ctrl.setStyleObj({
+            (_a = this.inner) === null || _a === void 0 ? void 0 : _a.style.setObj({
                 // padding: 0 calc(#{map.get($switch-button-size, 'default')} + 2px) 0 #{map.get(
                 //   $switch-content-padding,
                 //   'default'
@@ -191,7 +191,7 @@ class TdSwitchCore extends framework_1.TypeSpan {
             }
         }
         else {
-            (_e = this.inner) === null || _e === void 0 ? void 0 : _e.ctrl.setStyleObj({
+            (_e = this.inner) === null || _e === void 0 ? void 0 : _e.style.setObj({
                 // padding: 0 #{map.get($switch-content-padding, 'default')} 0 calc(#{map.get(
                 //   $switch-button-size,
                 //   'default'

package/src/components/form/td-switch/widget/td-switch-left.js

@@ -8,8 +8,8 @@ class TdSwitchLeft extends framework_1.TypeSpan {
     constructor(params = {}) {
         super();
         this.className = 'TdSwitchLeft';
-        this.ctrl.addAttrName('switch-label');
-        this.ctrl.addStyleObj(Object.assign(Object.assign({}, td_switch_style_1.$switchLabel), { marginRight: '10px' }));
+        this.attr.addName('switch-label');
+        this.style.addObj(Object.assign(Object.assign({}, td_switch_style_1.$switchLabel), { marginRight: '10px' }));
         if (params === null || params === void 0 ? void 0 : params.inactiveIcon) {
             this.addChild(new td_icon_class_1.TdIcon({
                 svgObj: params.inactiveIcon
@@ -20,7 +20,7 @@ class TdSwitchLeft extends framework_1.TypeSpan {
                 text: params.inactiveText
             }));
         }
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdSwitchLeft = TdSwitchLeft;

package/src/components/form/td-switch/widget/td-switch-right.js

@@ -8,7 +8,7 @@ class TdSwitchRight extends framework_1.TypeSpan {
     constructor(params = {}) {
         super();
         this.className = 'TdSwitchRight';
-        this.ctrl.addStyleObj(Object.assign(Object.assign({}, td_switch_style_1.$switchLabel), { marginLeft: '10px' }));
+        this.style.addObj(Object.assign(Object.assign({}, td_switch_style_1.$switchLabel), { marginLeft: '10px' }));
         if (params === null || params === void 0 ? void 0 : params.activeIcon) {
             this.addChild(new td_icon_class_1.TdIcon({
                 svgObj: params.activeIcon
@@ -19,7 +19,7 @@ class TdSwitchRight extends framework_1.TypeSpan {
                 text: params.activeText
             }));
         }
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdSwitchRight = TdSwitchRight;

package/src/components/navigation/td-affix/td-affix.class.d.ts

@@ -1,3 +1,4 @@
+import { TypeNode } from '@type-dom/framework';
 import { UI } from '../../../ui/ui.abstract';
 import { ITdAffix, ITdAffixConfig } from './td-affix.interface';
 import { IStyle } from '@type-dom/css-type';
@@ -21,5 +22,7 @@ export declare class TdAffix extends UI implements ITdAffix {
     get rootStyle(): IStyle;
     get affixStyle(): IStyle;
     mounted(): void;
+    destroy(root?: TypeNode): void;
+    onScroll: () => void;
     change(): void;
 }

package/src/components/navigation/td-affix/td-affix.class.js

@@ -1,19 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdAffix = void 0;
-const rxjs_1 = require("rxjs");
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 class TdAffix extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
+        this.onScroll = () => {
+            console.log('this.scrollContainer scroll . ');
+            // if (this.fixed) {
+            this.style.setObj(this.rootStyle);
+            this.affix.style.setObj(this.affixStyle);
+            // }
+            this.updateRoot();
+        };
         console.log('TdAffix constructor . ');
         this.className = 'TdAffix';
-        this.ctrl.addAttrName('td-affix');
+        this.attr.addName('td-affix');
         this.windowHeight = (0, framework_1.useWindowSize)().height;
         const { height, width, top, bottom, update } = (0, framework_1.useElementBounding)(this, {
-            windowScroll: false
+            windowScroll: false,
         });
         this.rootHeight = height;
         this.rootWidth = width;
@@ -29,21 +36,21 @@ class TdAffix extends ui_abstract_1.UI {
         this.scrollTop = 0;
         this.transform = 0;
         // todo rootStyle
-        this.ctrl.addStyleObj(this.rootStyle);
+        this.style.addObj(this.rootStyle);
         this.affix = new framework_1.Div({
             name: 'fix',
-            styleObj: this.affixStyle
+            styleObj: this.affixStyle,
         });
         if (params === null || params === void 0 ? void 0 : params.slot) {
             this.affix.slotChild(params.slot);
         }
         this.addChild(this.affix);
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
     get rootStyle() {
         return {
             height: this.fixed ? this.rootHeight : '',
-            width: this.fixed ? this.rootWidth : ''
+            width: this.fixed ? this.rootWidth : '',
         };
     }
     get affixStyle() {
@@ -57,7 +64,7 @@ class TdAffix extends ui_abstract_1.UI {
             top: position === 'top' ? offset : '',
             bottom: position === 'bottom' ? offset : '',
             transform: this.transform ? `translateY(${this.transform}px)` : '',
-            zIndex: (props === null || props === void 0 ? void 0 : props.zIndex) || 100
+            zIndex: (props === null || props === void 0 ? void 0 : props.zIndex) || 100,
         };
     }
     mounted() {
@@ -73,25 +80,20 @@ class TdAffix extends ui_abstract_1.UI {
             this.target = document.documentElement;
         }
         (0, framework_1.nextTick)(() => {
-            var _a;
             console.log('nextTick . ');
             this.scrollContainer = (0, utils_1.getScrollContainer)(this.dom, true);
             console.log('this.scrollContainer is ', this.scrollContainer);
             this.updateRoot();
+            // todo destroy
             this.scrollContainer &&
-                (0, rxjs_1.fromEvent)(this.scrollContainer, 'scroll').subscribe(() => {
-                    console.log('this.scrollContainer scroll . ');
-                    // if (this.fixed) {
-                    this.ctrl.setStyleObj(this.rootStyle);
-                    this.affix.ctrl.setStyleObj(this.affixStyle);
-                    // }
-                    this.updateRoot();
-                });
-            (_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', () => {
-                console.log('this.scrollContent scroll . listener . ');
-            });
+                this.scrollContainer.addEventListener('scroll', this.onScroll);
         });
     }
+    destroy(root) {
+        this.scrollContainer &&
+            this.scrollContainer.removeEventListener('scroll', this.onScroll);
+        super.destroy(root);
+    }
     change() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
         if (!this.scrollContainer)

package/src/components/navigation/td-anchor/td-anchor-link/td-anchor-link.class.js

@@ -24,7 +24,7 @@ class TdAnchorLink extends ui_abstract_1.UI {
             this.list.addChildren(...params.contents);
             this.addChild(this.list);
         }
-        this.setParams(params);
+        this.useParams(params);
     }
 }
 exports.TdAnchorLink = TdAnchorLink;

package/src/components/navigation/td-anchor/td-anchor.class.js

@@ -10,7 +10,7 @@ class TdAnchor extends ui_abstract_1.UI {
         var _a, _b, _c, _d;
         super(params);
         this.className = 'TdAnchor';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             position: 'relative',
             // background-color: getCssVar('anchor-bg-color')
             backgroundColor: td_anchor_style_1.$anchor.bgColor.default
@@ -38,14 +38,14 @@ class TdAnchor extends ui_abstract_1.UI {
         const type = (params === null || params === void 0 ? void 0 : params.type) || 'default';
         const direction = (params === null || params === void 0 ? void 0 : params.direction) || 'vertical';
         if (direction === 'vertical') {
-            (_a = this.marker) === null || _a === void 0 ? void 0 : _a.ctrl.addStyleObj({
+            (_a = this.marker) === null || _a === void 0 ? void 0 : _a.style.addObj({
                 width: '4px',
                 height: '14px',
                 top: '8px',
                 left: '0',
                 transition: 'top 0.25s ease-in-out, opacity 0.25s'
             });
-            this.list.ctrl.addStyleObj({
+            this.list.style.addObj({
                 // paddingLeft: getCssVar('anchor-padding-indent'),
                 paddingLeft: td_anchor_style_1.$anchor.paddingIndent
             });
@@ -60,32 +60,32 @@ class TdAnchor extends ui_abstract_1.UI {
                         content: ''
                     }
                 }));
-                (_b = this.marker) === null || _b === void 0 ? void 0 : _b.ctrl.addStyleObj({
+                (_b = this.marker) === null || _b === void 0 ? void 0 : _b.style.addObj({
                     width: '2px',
                     borderRadius: 'unset'
                 });
             }
         }
         else {
-            (_c = this.marker) === null || _c === void 0 ? void 0 : _c.ctrl.addStyleObj({
+            (_c = this.marker) === null || _c === void 0 ? void 0 : _c.style.addObj({
                 height: '2px',
                 width: '20px',
                 bottom: '0',
                 transition: 'left 0.25s ease-in-out, opacity 0.25s, width 0.25s'
             });
-            this.list.ctrl.addStyleObj({
+            this.list.style.addObj({
                 display: 'flex',
                 paddingBottom: '4px'
             });
             this.list.childNodes.forEach((item, index) => {
                 if (item instanceof framework_1.TypeHtml) {
                     if (index === 0) {
-                        item.ctrl.addStyleObj({
+                        item.style.addObj({
                             paddingLeft: '0'
                         });
                     }
                     else {
-                        item.ctrl.addStyleObj({
+                        item.style.addObj({
                             paddingLeft: '16px'
                         });
                     }
@@ -102,13 +102,13 @@ class TdAnchor extends ui_abstract_1.UI {
                         content: ''
                     }
                 }));
-                (_d = this.marker) === null || _d === void 0 ? void 0 : _d.ctrl.addStyleObj({
+                (_d = this.marker) === null || _d === void 0 ? void 0 : _d.style.addObj({
                     height: '2px',
                     borderRadius: 'unset'
                 });
             }
         }
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
     handleClick(e, href) {
         // emit('click', e, href)

package/src/components/navigation/td-backtop/td-backtop.class.d.ts

@@ -1,3 +1,4 @@
+import { TypeNode } from '@type-dom/framework';
 import { UI } from '../../../ui/ui.abstract';
 import { ITdBackTop, ITdBackTopConfig } from './td-backtop.interface';
 export declare class TdBackTop extends UI implements ITdBackTop {
@@ -11,7 +12,8 @@ export declare class TdBackTop extends UI implements ITdBackTop {
     private division;
     constructor(params?: ITdBackTopConfig);
     mounted(): void;
-    initEvents(): void;
-    handleScroll(event?: MouseEvent): void;
-    handleClick(event?: MouseEvent): void;
+    destroy(root?: TypeNode): void;
+    throttleScroll: () => void;
+    handleScroll: () => void;
+    handleClick(): void;
 }

package/src/components/navigation/td-backtop/td-backtop.class.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdBackTop = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
 const utils_1 = require("@type-dom/utils");
@@ -13,6 +12,24 @@ class TdBackTop extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'fragment');
         this.visible = false;
+        this.throttleScroll = () => {
+            console.log('throttleScroll .');
+            return (0, utils_1.throttle)(this.handleScroll, 300)();
+        };
+        this.handleScroll = () => {
+            var _a;
+            console.error('handleScroll . ');
+            // console.log('this.el', this.el);
+            if (this.el) {
+                this.visible =
+                    this.el.scrollTop >= (((_a = this.props) === null || _a === void 0 ? void 0 : _a.visibilityHeight) || 200);
+                console.log('this.visible', this.visible);
+                // this.setStyleObj({
+                //   display: this.visible ? 'flex' : 'none',
+                // })
+                this.transition.showSlot(this.visible);
+            }
+        };
         this.className = 'TdBackTop';
         this.division = new framework_1.Div({
             name: 'td-back-top',
@@ -41,20 +58,20 @@ class TdBackTop extends ui_abstract_1.UI {
                 zIndex: 999
             },
             events: {
-                click: (event) => {
-                    this.handleClick(event);
+                click: () => {
+                    this.handleClick();
                 }
             }
         });
-        this.division.ctrl.addAttrObj({
+        this.division.attr.addObj({
             componentId: this.componentId
         });
         this.transition = new framework_1.Transition({
             name: 'fade',
-            slot: this.division
+            slot: this.division,
         });
         this.addChild(this.transition);
-        // this.ctrl.addAttrName('td-back-top');
+        // this.attr.addName('td-back-top');
         if (!TdBackTop.initCalled) {
             TdBackTop.initCalled = true;
             (0, framework_1.createClass)('td-back-top', {
@@ -82,7 +99,6 @@ class TdBackTop extends ui_abstract_1.UI {
         }
         this.division.addChild(this.getSlotNode());
         if (params === null || params === void 0 ? void 0 : params.slot) {
-            // this.setSlot(this.transition, this.props.slot);
             // this.division.slotChild(params.slot);
         }
         else {
@@ -93,7 +109,12 @@ class TdBackTop extends ui_abstract_1.UI {
         }
         this.container = document;
         this.el = document.documentElement; // todo 监听不生效 ？？？？
-        this.props = this.setParams(params);
+        this.buildProps({
+            visibilityHeight: 200,
+            right: 40,
+            bottom: 40,
+        });
+        this.props = this.useParams(params);
     }
     mounted() {
         var _a;
@@ -108,34 +129,21 @@ class TdBackTop extends ui_abstract_1.UI {
         // this.container.style.setProperty('over-flow', 'scroll');
         // Give visible an initial value, fix #13066
         this.handleScroll();
+        this.container.addEventListener('scroll', this.throttleScroll);
+        // 监听 window 的滚动事件
+        window.addEventListener('scroll', () => {
+            console.log('Window scrolled:', window.scrollY);
+        });
+        // 监听 document 的滚动事件
+        document.addEventListener('scroll', () => {
+            console.log('Document scrolled:', document.documentElement.scrollTop || document.body.scrollTop);
+        });
     }
-    initEvents() {
-        console.log('TdBackTop initEvents');
-        // nextTick(() => {
-        console.log('TdBackTop initEvents 2');
-        this.subscriptions.push((0, rxjs_1.fromEvent)(this.container, 'scroll')
-            .pipe((0, rxjs_1.throttleTime)(300))
-            .subscribe((event) => {
-            // console.error('handleScroll . 1');
-            this.handleScroll(event);
-        }));
-        // });
-    }
-    handleScroll(event) {
-        var _a;
-        console.error('handleScroll . ');
-        // console.log('this.el', this.el);
-        if (this.el) {
-            this.visible =
-                this.el.scrollTop >= (((_a = this.props) === null || _a === void 0 ? void 0 : _a.visibilityHeight) || 200);
-            console.log('this.visible', this.visible);
-            // this.setStyleObj({
-            //   display: this.visible ? 'flex' : 'none',
-            // })
-            this.transition.showSlot(this.visible);
-        }
+    destroy(root) {
+        this.container.removeEventListener('scroll', this.throttleScroll);
+        super.destroy(root);
     }
-    handleClick(event) {
+    handleClick() {
         var _a;
         console.error('handleClick . ');
         (_a = this.el) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: 0, behavior: 'smooth' });

package/src/components/navigation/td-backtop/td-backtop.interface.d.ts

@@ -23,4 +23,7 @@ export interface ITdBackTopConfig extends IUIConfig {
      *     default: 40,
      */
     bottom?: number;
+    emits?: {
+        click: (event: MouseEvent) => void;
+    };
 }

package/src/components/navigation/td-backtop/use-backtop.d.ts

@@ -0,0 +1,7 @@
+import { AnyFn } from '@type-dom/framework';
+import { ITdBackTopConfig } from './td-backtop.interface';
+export declare const useBackTop: (props: ITdBackTopConfig, emit: (event: string, fn: AnyFn) => void, componentName: string) => {
+    visible: boolean;
+    handleClick: (fn: AnyFn) => void;
+    mounted: () => void;
+};

package/src/components/navigation/td-backtop/use-backtop.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBackTop = void 0;
+const useBackTop = (props, 
+// emit: ITdBacktopEmits,
+emit, componentName) => {
+    let el;
+    let container;
+    let visible = false;
+    const handleScroll = () => {
+        var _a;
+        if (el) {
+            visible = el.scrollTop >= ((_a = props.visibilityHeight) !== null && _a !== void 0 ? _a : 0);
+        }
+    };
+    const handleClick = (fn) => {
+        el === null || el === void 0 ? void 0 : el.scrollTo({ top: 0, behavior: 'smooth' });
+        emit('click', fn);
+    };
+    // const handleScrollThrottled = useThrottleFn(handleScroll, 300, true)
+    //
+    // useEventListener(container, 'scroll', handleScrollThrottled);
+    const mounted = () => {
+        var _a;
+        container = document;
+        el = document.documentElement;
+        if (props.target) {
+            // el = document.querySelector<HTMLElement>(props.target) ?? undefined
+            el = (_a = props.target) !== null && _a !== void 0 ? _a : undefined;
+            if (!el) {
+                throw Error(componentName + `target does not exist: ${props.target}`);
+            }
+            container = el;
+        }
+        // Give visible an initial value, fix #13066
+        handleScroll();
+    };
+    return {
+        visible,
+        handleClick,
+        mounted
+    };
+};
+exports.useBackTop = useBackTop;