@type-dom/ui 0.0.8 → 0.0.10

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',
@@ -28,9 +28,9 @@ class TdSwitchCore extends framework_1.TypeSpan {
             // transition: border-color var(--el-transition-duration), background-color var(--el-transition-duration);
             transition: var_1.$borderColor.base +
                 ' ' +
-                var_1.$transitionDuration +
+                var_1.$transitionDurationDefault +
                 ', background-color ' +
-                var_1.$transitionDuration,
+                var_1.$transitionDurationDefault,
             // minWidth: map.get($switch-core-width, 'default');
             minWidth: td_switch_style_1.$switchCoreWidth[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
             // height: map.get($switch-core-height, 'default');
@@ -42,7 +42,7 @@ class TdSwitchCore extends framework_1.TypeSpan {
                 styleObj: {
                     width: '100%',
                     // transition: all getCssVar('transition-duration'),
-                    transition: 'all ' + var_1.$transitionDuration,
+                    transition: 'all ' + var_1.$transitionDurationDefault,
                     // height: map.get($switch-button-size, 'default'),
                     height: td_switch_style_1.$switchButtonSize[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
                     display: 'flex',
@@ -108,7 +108,7 @@ class TdSwitchCore extends framework_1.TypeSpan {
                 // borderRadius: var(--el-border-radius-circle),
                 borderRadius: var_1.$borderRadius.circle,
                 // transition: all var(--el-transition-duration),
-                transition: 'all ' + var_1.$transitionDuration,
+                transition: 'all ' + var_1.$transitionDurationDefault,
                 width: td_switch_style_1.$switchButtonSize[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
                 // width: map.get($switch-button-size, 'default');
                 height: td_switch_style_1.$switchButtonSize[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
@@ -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.setProps(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.setProps(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.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;