@type-dom/ui 0.0.3 → 0.0.5

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

@@ -5,22 +5,22 @@ const framework_1 = require("@type-dom/framework");
 const td_icon_class_1 = require("../../../basic/td-icon/td-icon.class");
 const td_switch_style_1 = require("../td-switch.style");
 class TdSwitchLeft extends framework_1.TypeSpan {
-    constructor(config) {
+    constructor(params) {
         super();
         this.className = 'TdSwitchLeft';
-        this.config = config;
-        this.addAttrName('switch-label');
-        this.addStyleObj(Object.assign(Object.assign({}, td_switch_style_1.$switchLabel), { marginRight: '10px' }));
-        if (config === null || config === void 0 ? void 0 : config.inactiveIcon) {
+        this.ctrl.addAttrName('switch-label');
+        this.ctrl.addStyleObj(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: config.inactiveIcon
+                svgObj: params.inactiveIcon
             }));
         }
-        if (!(config === null || config === void 0 ? void 0 : config.inactiveIcon) && (config === null || config === void 0 ? void 0 : config.inactiveText)) {
+        if (!(params === null || params === void 0 ? void 0 : params.inactiveIcon) && (params === null || params === void 0 ? void 0 : params.inactiveText)) {
             this.addChild(new framework_1.Span({
-                text: config.inactiveText
+                text: params.inactiveText
             }));
         }
+        this.props = this.setParams(params);
     }
 }
 exports.TdSwitchLeft = TdSwitchLeft;

package/src/components/form/td-switch/widget/td-switch-right.d.ts

@@ -1,7 +1,7 @@
 import { TypeSpan } from '@type-dom/framework';
-import { ITdSwitchConfig } from '@type-dom/ui';
+import { ITdSwitchConfig } from '../td-switch.interface';
 export declare class TdSwitchRight extends TypeSpan {
     className: 'TdSwitchRight';
-    config?: ITdSwitchConfig;
-    constructor(config?: ITdSwitchConfig);
+    props: ITdSwitchConfig;
+    constructor(params?: ITdSwitchConfig);
 }

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

@@ -2,24 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdSwitchRight = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_1 = require("@type-dom/ui");
 const td_switch_style_1 = require("../td-switch.style");
+const td_icon_class_1 = require("../../../basic/td-icon/td-icon.class");
 class TdSwitchRight extends framework_1.TypeSpan {
-    constructor(config) {
+    constructor(params) {
         super();
         this.className = 'TdSwitchRight';
-        this.config = config;
-        this.addStyleObj(Object.assign(Object.assign({}, td_switch_style_1.$switchLabel), { marginLeft: '10px' }));
-        if (config === null || config === void 0 ? void 0 : config.activeIcon) {
-            this.addChild(new ui_1.TdIcon({
-                svgObj: config.activeIcon
+        this.ctrl.addStyleObj(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
             }));
         }
-        if (!(config === null || config === void 0 ? void 0 : config.activeIcon) && (config === null || config === void 0 ? void 0 : config.activeText)) {
+        if (!(params === null || params === void 0 ? void 0 : params.activeIcon) && (params === null || params === void 0 ? void 0 : params.activeText)) {
             this.addChild(new framework_1.Span({
-                text: config.activeText
+                text: params.activeText
             }));
         }
+        this.props = this.setParams(params);
     }
 }
 exports.TdSwitchRight = TdSwitchRight;

package/src/components/form/td-time-picker/td-time-picker.class.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/form/td-time-picker/td-time-picker.interface.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/form/td-time-select/td-time-select.class.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/form/td-time-select/td-time-select.interface.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1 @@
+"use strict";

package/src/components/form/td-transfer/td-transfer.interface.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1 @@
+"use strict";

package/src/components/form/td-upload/td-upload.interface.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/navigation/index.d.ts

@@ -1,2 +1,18 @@
 export { TdMenu } from './td-menu/td-menu.class';
 export type { ITdMenu } from './td-menu/td-menu.interface';
+export { TdAffix } from './td-affix/td-affix.class';
+export type { ITdAffix } from './td-affix/td-affix.interface';
+export { TdAnchor } from './td-anchor/td-anchor.class';
+export type { ITdAnchor } from './td-anchor/td-anchor.interface';
+export { TdAnchorLink } from './td-anchor/td-anchor-link/td-anchor-link.class';
+export type { ITdAnchorLink } from './td-anchor/td-anchor-link/td-anchor-link.interface';
+export { TdBackTop } from './td-backtop/td-backtop.class';
+export type { ITdBackTop } from './td-backtop/td-backtop.interface';
+export { TdBreadcrumb } from './td-breadcrumb/td-breadcrumb.class';
+export type { ITdBreadcrumb } from './td-breadcrumb/td-breadcrumb.interface';
+export { TdBreadcrumbItem } from './td-breadcrumb-item/td-breadcrumb-item.class';
+export type { ITdBreadcrumbItem } from './td-breadcrumb-item/td-breadcrumb-item.interface';
+export { TdTabs } from './td-tabs/td-tabs.class';
+export type * from './td-tabs/td-tabs.interface';
+export { TdTabPane } from './td-tabs/td-tab-pane.class';
+export type * from './td-tabs/td-tab-pane.interface';

package/src/components/navigation/index.js

@@ -1,5 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdMenu = void 0;
+exports.TdTabPane = exports.TdTabs = exports.TdBreadcrumbItem = exports.TdBreadcrumb = exports.TdBackTop = exports.TdAnchorLink = exports.TdAnchor = exports.TdAffix = exports.TdMenu = void 0;
 var td_menu_class_1 = require("./td-menu/td-menu.class");
 Object.defineProperty(exports, "TdMenu", { enumerable: true, get: function () { return td_menu_class_1.TdMenu; } });
+var td_affix_class_1 = require("./td-affix/td-affix.class");
+Object.defineProperty(exports, "TdAffix", { enumerable: true, get: function () { return td_affix_class_1.TdAffix; } });
+var td_anchor_class_1 = require("./td-anchor/td-anchor.class");
+Object.defineProperty(exports, "TdAnchor", { enumerable: true, get: function () { return td_anchor_class_1.TdAnchor; } });
+var td_anchor_link_class_1 = require("./td-anchor/td-anchor-link/td-anchor-link.class");
+Object.defineProperty(exports, "TdAnchorLink", { enumerable: true, get: function () { return td_anchor_link_class_1.TdAnchorLink; } });
+var td_backtop_class_1 = require("./td-backtop/td-backtop.class");
+Object.defineProperty(exports, "TdBackTop", { enumerable: true, get: function () { return td_backtop_class_1.TdBackTop; } });
+var td_breadcrumb_class_1 = require("./td-breadcrumb/td-breadcrumb.class");
+Object.defineProperty(exports, "TdBreadcrumb", { enumerable: true, get: function () { return td_breadcrumb_class_1.TdBreadcrumb; } });
+var td_breadcrumb_item_class_1 = require("./td-breadcrumb-item/td-breadcrumb-item.class");
+Object.defineProperty(exports, "TdBreadcrumbItem", { enumerable: true, get: function () { return td_breadcrumb_item_class_1.TdBreadcrumbItem; } });
+var td_tabs_class_1 = require("./td-tabs/td-tabs.class");
+Object.defineProperty(exports, "TdTabs", { enumerable: true, get: function () { return td_tabs_class_1.TdTabs; } });
+var td_tab_pane_class_1 = require("./td-tabs/td-tab-pane.class");
+Object.defineProperty(exports, "TdTabPane", { enumerable: true, get: function () { return td_tab_pane_class_1.TdTabPane; } });

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

@@ -0,0 +1,25 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdAffix, ITdAffixConfig } from './td-affix.interface';
+import { IStyle } from '@type-dom/css-type';
+export declare class TdAffix extends UI implements ITdAffix {
+    className: 'TdAffix';
+    props: ITdAffixConfig;
+    private affix;
+    private target?;
+    private rootHeight;
+    private rootWidth;
+    private rootTop;
+    private rootBottom;
+    private updateRoot;
+    private transform;
+    private targetRect?;
+    private fixed;
+    private scrollTop;
+    private scrollContainer?;
+    private windowHeight?;
+    constructor(params?: ITdAffixConfig);
+    get rootStyle(): IStyle<0 | (string & {}), string & {}>;
+    get affixStyle(): IStyle<0 | (string & {}), string & {}>;
+    mounted(): void;
+    change(): void;
+}

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

@@ -0,0 +1,134 @@
+"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);
+        console.log('TdAffix constructor . ');
+        this.className = 'TdAffix';
+        this.ctrl.addAttrName('td-affix');
+        this.windowHeight = (0, framework_1.useWindowSize)().height;
+        const { height, width, top, bottom, update } = (0, framework_1.useElementBounding)(this, {
+            windowScroll: false
+        });
+        this.rootHeight = height;
+        this.rootWidth = width;
+        this.rootTop = top;
+        this.rootBottom = bottom;
+        this.updateRoot = update;
+        // const rect = this.dom.getBoundingClientRect();
+        // console.log('rect is ', rect);
+        this.targetRect = (params === null || params === void 0 ? void 0 : params.target)
+            ? (0, framework_1.useElementBounding)(params.target.value)
+            : undefined;
+        this.fixed = false;
+        this.scrollTop = 0;
+        this.transform = 0;
+        // todo rootStyle
+        this.ctrl.addStyleObj(this.rootStyle);
+        this.affix = new framework_1.Div({
+            name: 'fix',
+            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);
+    }
+    get rootStyle() {
+        return {
+            height: this.fixed ? this.rootHeight : '',
+            width: this.fixed ? this.rootWidth : ''
+        };
+    }
+    get affixStyle() {
+        const props = this.props;
+        const offset = (props === null || props === void 0 ? void 0 : props.offset) ? (0, utils_1.addUnit)(props.offset) : 0;
+        const position = (props === null || props === void 0 ? void 0 : props.position) || 'top';
+        return {
+            position: this.fixed ? 'fixed' : '',
+            // height: this.rootHeight + 'px',
+            // width: this.rootWidth + 'px',
+            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
+        };
+    }
+    mounted() {
+        var _a, _b, _c;
+        console.log('TdAffix mounted . ');
+        if ((_a = this.props) === null || _a === void 0 ? void 0 : _a.target) {
+            if (!((_b = this.props) === null || _b === void 0 ? void 0 : _b.target.value)) {
+                throw Error(`Target is not existed: ${(_c = this.props) === null || _c === void 0 ? void 0 : _c.target}`);
+            }
+            this.target = this.props.target.value;
+        }
+        else {
+            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();
+            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 . ');
+            });
+        });
+    }
+    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)
+            return;
+        this.scrollTop =
+            this.scrollContainer instanceof Window
+                ? document.documentElement.scrollTop
+                : this.scrollContainer.scrollTop || 0;
+        if (((_a = this.props) === null || _a === void 0 ? void 0 : _a.position) === 'top') {
+            if ((_b = this.props) === null || _b === void 0 ? void 0 : _b.target) {
+                const difference = ((_d = (_c = this.targetRect) === null || _c === void 0 ? void 0 : _c.bottom) !== null && _d !== void 0 ? _d : 0) -
+                    ((_f = (_e = this.props) === null || _e === void 0 ? void 0 : _e.offset) !== null && _f !== void 0 ? _f : 0) -
+                    this.rootHeight;
+                this.fixed =
+                    ((_h = (_g = this.props) === null || _g === void 0 ? void 0 : _g.offset) !== null && _h !== void 0 ? _h : 0) > this.rootTop &&
+                        ((_k = (_j = this.targetRect) === null || _j === void 0 ? void 0 : _j.bottom) !== null && _k !== void 0 ? _k : 0) > 0;
+                this.transform = difference < 0 ? difference : 0;
+            }
+            else {
+                this.fixed = ((_m = (_l = this.props) === null || _l === void 0 ? void 0 : _l.offset) !== null && _m !== void 0 ? _m : 0) > this.rootTop;
+            }
+        }
+        else if ((_o = this.props) === null || _o === void 0 ? void 0 : _o.target) {
+            const difference = ((_p = this.windowHeight) !== null && _p !== void 0 ? _p : 0) -
+                ((_r = (_q = this.targetRect) === null || _q === void 0 ? void 0 : _q.top) !== null && _r !== void 0 ? _r : 0) -
+                ((_t = (_s = this.props) === null || _s === void 0 ? void 0 : _s.offset) !== null && _t !== void 0 ? _t : 0) -
+                this.rootHeight;
+            this.fixed =
+                ((_u = this.windowHeight) !== null && _u !== void 0 ? _u : 0) - ((_w = (_v = this.props) === null || _v === void 0 ? void 0 : _v.offset) !== null && _w !== void 0 ? _w : 0) <
+                    this.rootBottom &&
+                    ((_x = this.windowHeight) !== null && _x !== void 0 ? _x : 0) > ((_z = (_y = this.targetRect) === null || _y === void 0 ? void 0 : _y.top) !== null && _z !== void 0 ? _z : 0);
+            this.transform = difference < 0 ? -difference : 0;
+        }
+        else {
+            this.fixed =
+                ((_0 = this.windowHeight) !== null && _0 !== void 0 ? _0 : 0) - ((_2 = (_1 = this.props) === null || _1 === void 0 ? void 0 : _1.offset) !== null && _2 !== void 0 ? _2 : 0) < this.rootBottom;
+        }
+    }
+}
+exports.TdAffix = TdAffix;

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

@@ -0,0 +1,27 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { IJsonData, XProxy } from '@type-dom/framework';
+export interface ITdAffix extends IUI {
+    className: 'TdAffix';
+}
+export interface ITdAffixConfig extends IUIConfig {
+    /**
+     * @description affix element zIndex value
+     *     default: 100,
+     * */
+    zIndex?: number | string;
+    /**
+     * @description target container. (CSS selector)
+     *     default: '',
+     */
+    target?: XProxy<IJsonData>;
+    /**
+     * @description offset distance
+     *     default: 0,
+     * */
+    offset?: number;
+    /**
+     * @description position of affix
+     *     default: 'top',
+     * */
+    position?: 'top' | 'bottom';
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/components/navigation/td-anchor/td-anchor-link/td-anchor-link.class.d.ts

@@ -0,0 +1,8 @@
+import { UI } from '../../../../ui/ui.abstract';
+import { ITdAnchorLink, ITdAnchorLinkConfig } from './td-anchor-link.interface';
+export declare class TdAnchorLink extends UI implements ITdAnchorLink {
+    className: 'TdAnchorLink';
+    private href;
+    private list?;
+    constructor(params?: ITdAnchorLinkConfig);
+}

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdAnchorLink = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../../ui/ui.abstract");
+class TdAnchorLink extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params);
+        this.className = 'TdAnchorLink';
+        this.href = new framework_1.A({
+            text: (params === null || params === void 0 ? void 0 : params.title) || '',
+            attrObj: {
+                href: (params === null || params === void 0 ? void 0 : params.href) || ''
+            },
+            events: {
+                click: () => {
+                    console.log('click . ');
+                }
+            }
+        });
+        this.addChild(this.href);
+        if (params === null || params === void 0 ? void 0 : params.contents) {
+            this.list = new framework_1.Div({});
+            this.list.addChildren(...params.contents);
+            this.addChild(this.list);
+        }
+        this.setParams(params);
+    }
+}
+exports.TdAnchorLink = TdAnchorLink;

package/src/components/navigation/td-anchor/td-anchor-link/td-anchor-link.interface.d.ts

@@ -0,0 +1,16 @@
+import { IUI, IUIConfig } from '../../../../ui/ui.interface';
+import { TypeElement } from '@type-dom/framework';
+export interface ITdAnchorLink extends IUI {
+    className: 'TdAnchorLink';
+}
+export interface ITdAnchorLinkConfig extends IUIConfig {
+    /**
+     * @description the text content of the anchor link
+     */
+    title?: string;
+    /**
+     * @description The address of the anchor link
+     */
+    href?: string;
+    contents?: TypeElement[];
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,10 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdAnchor, ITdAnchorConfig } from './td-anchor.interface';
+export declare class TdAnchor extends UI implements ITdAnchor {
+    className: 'TdAnchor';
+    props: ITdAnchorConfig;
+    private marker?;
+    private list?;
+    constructor(params: ITdAnchorConfig);
+    handleClick(e: MouseEvent, href?: string): void;
+}

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

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdAnchor = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_anchor_style_1 = require("./td-anchor.style");
+const td_anchor_function_1 = require("./td-anchor.function");
+class TdAnchor extends ui_abstract_1.UI {
+    constructor(params) {
+        var _a, _b, _c, _d;
+        super(params);
+        this.className = 'TdAnchor';
+        this.ctrl.addStyleObj({
+            position: 'relative',
+            // background-color: getCssVar('anchor-bg-color')
+            backgroundColor: td_anchor_style_1.$anchor.bgColor.default
+        });
+        if (params === null || params === void 0 ? void 0 : params.marker) {
+            this.marker = new framework_1.Div({
+                styleObj: {
+                    position: 'absolute',
+                    // background-color: getCssVar('anchor-marker-bg-color'),
+                    backgroundColor: td_anchor_style_1.$anchor.markerBgColor,
+                    borderRadius: '4px',
+                    opacity: 0,
+                    zIndex: 0
+                }
+            });
+            this.addChild(this.marker);
+        }
+        this.list = new framework_1.Div({
+            name: 'list'
+        });
+        this.addChild(this.list);
+        if (params === null || params === void 0 ? void 0 : params.slot) {
+            this.list.slotChild(params.slot);
+        }
+        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({
+                width: '4px',
+                height: '14px',
+                top: '8px',
+                left: '0',
+                transition: 'top 0.25s ease-in-out, opacity 0.25s'
+            });
+            this.list.ctrl.addStyleObj({
+                // paddingLeft: getCssVar('anchor-padding-indent'),
+                paddingLeft: td_anchor_style_1.$anchor.paddingIndent
+            });
+            if (type === 'underline') {
+                this.unshiftChild(new framework_1.I({
+                    styleObj: {
+                        position: 'absolute',
+                        left: '0',
+                        width: '2px',
+                        height: '100%',
+                        backgroundColor: 'rgba(5, 5, 5, 0.06)',
+                        content: ''
+                    }
+                }));
+                (_b = this.marker) === null || _b === void 0 ? void 0 : _b.ctrl.addStyleObj({
+                    width: '2px',
+                    borderRadius: 'unset'
+                });
+            }
+        }
+        else {
+            (_c = this.marker) === null || _c === void 0 ? void 0 : _c.ctrl.addStyleObj({
+                height: '2px',
+                width: '20px',
+                bottom: '0',
+                transition: 'left 0.25s ease-in-out, opacity 0.25s, width 0.25s'
+            });
+            this.list.ctrl.addStyleObj({
+                display: 'flex',
+                paddingBottom: '4px'
+            });
+            this.list.childNodes.forEach((item, index) => {
+                if (item instanceof framework_1.TypeHtml) {
+                    if (index === 0) {
+                        item.ctrl.addStyleObj({
+                            paddingLeft: '0'
+                        });
+                    }
+                    else {
+                        item.ctrl.addStyleObj({
+                            paddingLeft: '16px'
+                        });
+                    }
+                }
+            });
+            if (type === 'underline') {
+                this.unshiftChild(new framework_1.I({
+                    styleObj: {
+                        position: 'absolute',
+                        bottom: '0',
+                        width: '100%',
+                        height: '2px',
+                        backgroundColor: 'rgba(5, 5, 5, 0.06)',
+                        content: ''
+                    }
+                }));
+                (_d = this.marker) === null || _d === void 0 ? void 0 : _d.ctrl.addStyleObj({
+                    height: '2px',
+                    borderRadius: 'unset'
+                });
+            }
+        }
+        this.props = this.setParams(params);
+    }
+    handleClick(e, href) {
+        // emit('click', e, href)
+        (0, td_anchor_function_1.scrollTo)(href, this.props);
+    }
+}
+exports.TdAnchor = TdAnchor;

package/src/components/navigation/td-anchor/td-anchor.function.d.ts

@@ -0,0 +1,2 @@
+import { ITdAnchorConfig } from './td-anchor.interface';
+export declare const scrollTo: (href?: string, config?: ITdAnchorConfig) => void;

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

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scrollTo = void 0;
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const currentAnchor = (0, framework_1.createProxy)(null);
+const containerEl = (0, framework_1.createProxy)(null); // ref<HTMLElement | Window>()
+const links = {};
+let isScrolling = false;
+let currentScrollTop = 0;
+const addLink = (state) => {
+    links[state.href] = state.el;
+};
+const removeLink = (href) => {
+    delete links[href];
+};
+const setCurrentAnchor = (href) => {
+    const activeHref = currentAnchor.value;
+    if (activeHref !== href) {
+        currentAnchor.value = href;
+        // emit('change', href)
+    }
+};
+let clearAnimate = null;
+const scrollToAnchor = (href, props) => {
+    if (!containerEl.value)
+        return;
+    const target = (0, utils_1.getElement)(href);
+    if (!target)
+        return;
+    if (clearAnimate)
+        clearAnimate();
+    isScrolling = true;
+    const scrollEle = (0, utils_1.getScrollElement)(target, containerEl.value);
+    const distance = (0, utils_1.getOffsetTopDistance)(target, scrollEle);
+    const max = scrollEle.scrollHeight - scrollEle.clientHeight;
+    const to = Math.min(distance - ((props === null || props === void 0 ? void 0 : props.offset) || 0), max);
+    clearAnimate = (0, utils_1.animateScrollTo)(containerEl.value, currentScrollTop, to, (props === null || props === void 0 ? void 0 : props.duration) || 300, () => {
+        // make sure it is executed after throttleByRaf's handleScroll
+        setTimeout(() => {
+            isScrolling = false;
+        }, 20);
+    });
+};
+const scrollTo = (href, config) => {
+    if (href) {
+        setCurrentAnchor(href);
+        scrollToAnchor(href, config);
+    }
+};
+exports.scrollTo = scrollTo;
+//
+// const handleScroll = throttleByRaf(() => {
+//   if (containerEl.value) {
+//     currentScrollTop = getScrollTop(containerEl.value);
+//   }
+//   const currentHref = getCurrentHref();
+//   if (isScrolling || isUndefined(currentHref)) return;
+//   setCurrentAnchor(currentHref);
+// });
+//
+//
+// const getCurrentHref = (props?: ITdAnchorConfig) => {
+//   if (!containerEl.value) return;
+//   const scrollTop = getScrollTop(containerEl.value);
+//   const anchorTopList: { top: number; href: string }[] = [];
+//
+//   for (const href of Object.keys(links)) {
+//     const target = getElement(href);
+//     if (!target) continue;
+//     const scrollEle = getScrollElement(target, containerEl.value);
+//     const distance = getOffsetTopDistance(target, scrollEle);
+//     anchorTopList.push({
+//       top: distance - (props?.offset || 0) - (props?.bound || 15),
+//       href
+//     });
+//   }
+//   anchorTopList.sort((prev, next) => prev.top - next.top);
+//
+//   for (let i = 0; i < anchorTopList.length; i++) {
+//     const item = anchorTopList[i];
+//     const next = anchorTopList[i + 1];
+//
+//     if (i === 0 && scrollTop === 0) {
+//       return '';
+//     }
+//     if (item.top <= scrollTop && (!next || next.top > scrollTop)) {
+//       return item.href;
+//     }
+//   }
+// };