@type-dom/ui 0.0.8 → 0.0.9

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.setProps(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.setProps(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.setProps(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.setProps(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',
-            childNodes: [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.setProps(params);
+        this.buildProps({
+            visibilityHeight: 200,
+            right: 40,
+            bottom: 40,
+        });
+        this.props = this.useParams(params);
     }
     mounted() {
         var _a;
@@ -108,33 +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();
-    }
-    initEvents() {
-        console.log('TdBackTop initEvents');
-        // nextTick(() => {
-        console.log('TdBackTop initEvents 2');
-        (0, rxjs_1.fromEvent)(this.container, 'scroll')
-            .pipe((0, rxjs_1.throttleTime)(300))
-            .subscribe((event) => {
-            // console.error('handleScroll . 1');
-            this.handleScroll(event);
+        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);
         });
     }
-    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;

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

@@ -7,14 +7,14 @@ class TdBreadcrumb extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdBreadcrumb';
-        this.ctrl.addAttrName('td-breadcrumb');
-        this.ctrl.addStyleObj({
+        this.attr.addName('td-breadcrumb');
+        this.style.addObj({
             fontSize: '14px',
             lineHeight: 1
         });
         this.childNodes = [];
         this.addChild(this.getSlotNode());
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     created() {
         console.log('TdBreadcrumb created . ');
@@ -28,7 +28,7 @@ class TdBreadcrumb extends ui_abstract_1.UI {
         var _a;
         const items = this.childNodes;
         if (items.length) {
-            (_a = items[items.length - 1]) === null || _a === void 0 ? void 0 : _a.ctrl.setAttribute('aria-current', 'page');
+            (_a = items[items.length - 1]) === null || _a === void 0 ? void 0 : _a.attr.set('aria-current', 'page');
         }
     }
 }

package/src/components/navigation/td-breadcrumb-item/td-breadcrumb-item.class.js

@@ -9,7 +9,7 @@ class TdBreadcrumbItem extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'span');
         this.className = 'TdBreadcrumbItem';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             float: 'left',
             display: 'inline-flex',
             alignItems: 'center'
@@ -39,11 +39,11 @@ class TdBreadcrumbItem extends ui_abstract_1.UI {
         if (params === null || params === void 0 ? void 0 : params.slot) {
             this.slotChild(params === null || params === void 0 ? void 0 : params.slot);
         }
-        this.setProps(params);
+        this.useParams(params);
     }
     addSeparator(breadcrumbConfig) {
         if (breadcrumbConfig === null || breadcrumbConfig === void 0 ? void 0 : breadcrumbConfig.separatorIcon) {
-            breadcrumbConfig.separatorIcon.ctrl.addStyleObj({
+            breadcrumbConfig.separatorIcon.style.addObj({
                 verticalAlign: 'middle'
             });
             this.addChild(new td_icon_class_1.TdIcon({

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

@@ -7,11 +7,11 @@ class TdMenu extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'ul');
         this.className = 'TdMenu';
-        this.ctrl.addAttrObj({
+        this.attr.addObj({
             name: 'td-menu',
             role: 'menubar'
         });
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             // border-right: solid 1px var(--el-menu-border-color),
             borderRight: 'solid 1px ' + var_1.$borderColor.base,
             listStyle: 'none',
@@ -22,16 +22,16 @@ class TdMenu extends ui_abstract_1.UI {
             backgroundColor: var_1.$borderColor.base,
             boxSizing: 'border-box'
         });
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     setup() {
         const props = this.props;
         const mode = props.mode || 'vertical';
         if (mode === 'vertical') {
-            this.ctrl.addStyleObj({});
+            this.style.addObj({});
         }
         else {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 display: 'flex',
                 flexWrap: 'nowrap',
                 borderRight: 'none'

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

@@ -1,4 +1,5 @@
 import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { Router } from '@type-dom/framework';
 export interface ITdMenu extends IUI {
     className: 'TdMenu';
 }
@@ -6,7 +7,7 @@ export interface ITdMenuConfig extends IUIConfig {
     mode?: 'horizontal' | 'vertical';
     defaultActive?: string;
     uniqueOpened?: boolean;
-    router?: boolean;
+    router?: Router;
     menuTrigger?: 'hover' | 'click';
     collapse?: boolean;
     backgroundColor?: string;

package/src/components/navigation/td-tabs/td-tab-bar.class.js

@@ -8,10 +8,10 @@ class TdTabBar extends ui_abstract_1.UI {
     constructor(params) {
         super(params);
         this.className = 'TdTabBar';
-        this.ctrl.addAttrName('td-tab-bar');
-        this.ctrl.addStyleObj(td_tabs_style_1.$tabsActiveBarStyle);
+        this.attr.addName('td-tab-bar');
+        this.style.addObj(td_tabs_style_1.$tabsActiveBarStyle);
         this.rootTabs = params === null || params === void 0 ? void 0 : params.rootTabs;
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     getBarStyle() {
         var _a;
@@ -26,7 +26,7 @@ class TdTabBar extends ui_abstract_1.UI {
         this.props.tabs && this.props.tabs.every((tab, index) => {
             var _a, _b, _c, _d, _e;
             // const $el = instance.parent?.refs?.[`tab-${tab.uid}`] as HTMLElement
-            const $el = ((_a = this.rootTabs) === null || _a === void 0 ? void 0 : _a.tabNav.tabs) && ((_c = (_b = this.rootTabs) === null || _b === void 0 ? void 0 : _b.tabNav.tabs.find((node) => { var _a, _b; return ((_a = node.props.attrObj) === null || _a === void 0 ? void 0 : _a.tabName) === ((_b = tab.name) !== null && _b !== void 0 ? _b : (index + 1)); })) === null || _c === void 0 ? void 0 : _c.dom);
+            const $el = ((_a = this.rootTabs) === null || _a === void 0 ? void 0 : _a.tabNav.tabs) && ((_c = (_b = this.rootTabs) === null || _b === void 0 ? void 0 : _b.tabNav.tabs.find((node) => { var _a; return node.attr.get('tabName') === ((_a = tab.name) !== null && _a !== void 0 ? _a : (index + 1)); })) === null || _c === void 0 ? void 0 : _c.dom);
             console.log('$el is ', $el);
             if (!$el)
                 return false;
@@ -56,7 +56,7 @@ class TdTabBar extends ui_abstract_1.UI {
     change() {
         console.log('update . ');
         this.barStyle = this.getBarStyle();
-        this.ctrl.setStyleObj(this.barStyle);
+        this.style.setObj(this.barStyle);
     }
 }
 exports.TdTabBar = TdTabBar;

package/src/components/navigation/td-tabs/td-tab-nav.class.js

@@ -2,12 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdTabNav = void 0;
 const tslib_1 = require("tslib");
+const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
-const utils_1 = require("@type-dom/utils");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const var_1 = require("../../../styles/var");
-const aria_1 = require("../../../aria");
 const td_tabs_style_1 = require("./td-tabs.style");
 const td_tab_bar_class_1 = require("./td-tab-bar.class");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
@@ -17,8 +16,8 @@ class TdTabNav extends ui_abstract_1.UI {
         super(params);
         this.tabs = [];
         this.className = 'TdTabNav';
-        this.ctrl.addAttrName('td-tab-nav-wrap');
-        this.ctrl.addStyleObj(td_tabs_style_1.$tabsNavWrapStyle);
+        this.attr.addName('td-tab-nav-wrap');
+        this.style.addObj(td_tabs_style_1.$tabsNavWrapStyle);
         this.addChild(new framework_1.U({
             name: 'underline',
             styleObj: td_tabs_style_1.$tabsNavWrapAfterStyle,
@@ -134,6 +133,8 @@ class TdTabNav extends ui_abstract_1.UI {
                             this.removeFocus();
                             // this.rootTabs.currentName = tabName;
                             (_b = (_a = params.emits) === null || _a === void 0 ? void 0 : _a.tabClick) === null || _b === void 0 ? void 0 : _b.call(_a, pane, tabName, evt);
+                            // tabClick是上级 tabs 的事件监听器，不是tabNav的；
+                            // this.emit('tabClick', pane, tabName, evt);
                             (0, framework_1.nextTick)(() => {
                                 this.selectTab(ele);
                             });
@@ -141,21 +142,20 @@ class TdTabNav extends ui_abstract_1.UI {
                         keydown: (ev) => {
                             var _a, _b;
                             if (closable &&
-                                (ev.code === aria_1.EVENT_CODE.delete ||
-                                    ev.code === aria_1.EVENT_CODE.backspace)) {
-                                // emit('tabRemove', pane, ev)
+                                ((ev === null || ev === void 0 ? void 0 : ev.code) === utils_1.EVENT_CODE.delete || (ev === null || ev === void 0 ? void 0 : ev.code) === utils_1.EVENT_CODE.backspace)) {
+                                // emit('tabRemove', pane, ev);
                                 (_b = (_a = params.emits) === null || _a === void 0 ? void 0 : _a.tabRemove) === null || _b === void 0 ? void 0 : _b.call(_a, pane, ev);
                             }
                         },
                     },
                 });
                 if (tabName === ((_d = this.rootTabs) === null || _d === void 0 ? void 0 : _d.currentName)) {
-                    item.ctrl.addStyleObj({
+                    item.style.addObj({
                         color: var_1.$colors.primary.base,
                     });
                 }
                 else {
-                    item.ctrl.addStyleObj({
+                    item.style.addObj({
                         color: var_1.$textColor.regular,
                     });
                 }
@@ -187,8 +187,8 @@ class TdTabNav extends ui_abstract_1.UI {
             })) || [];
         console.log('this.tabs is ', this.tabs);
         this.nav.addChildren(...this.tabs);
-        this.nav.ctrl.addStyleObj(this.navStyle);
-        this.props = this.setProps(params);
+        this.nav.style.addObj(this.navStyle);
+        this.props = this.useParams(params);
     }
     mounted() {
         setTimeout(() => this.scrollToActiveTab(), 0);
@@ -300,12 +300,12 @@ class TdTabNav extends ui_abstract_1.UI {
         (_a = this.tabBar) === null || _a === void 0 ? void 0 : _a.change();
         this.tabs.forEach((tab) => {
             if (item === tab) {
-                tab.ctrl.setStyleObj({
+                tab.style.setObj({
                     color: var_1.$colors.primary.base,
                 });
             }
             else {
-                tab.ctrl.setStyleObj({
+                tab.style.setObj({
                     color: var_1.$textColor.regular,
                 });
             }
@@ -313,7 +313,7 @@ class TdTabNav extends ui_abstract_1.UI {
     }
     changeTab(e) {
         const code = e.code;
-        const { up, down, left, right } = aria_1.EVENT_CODE;
+        const { up, down, left, right } = utils_1.EVENT_CODE;
         if (![up, down, left, right].includes(code))
             return;
         // 左右上下键更换tab