@type-dom/ui 0.0.9 → 0.1.0

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

@@ -4,74 +4,60 @@ exports.TdBackTop = void 0;
 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 td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const td_backtop_style_1 = require("./td-backtop.style");
-class TdBackTop extends ui_abstract_1.UI {
+const td_backtop_const_1 = require("./td-backtop.const");
+class TdBackTop extends framework_1.TypeFragment {
     constructor(params = {}) {
-        super(params, 'fragment');
+        super(); // 要传 params， 否则 el 无法定位。
         this.visible = false;
         this.throttleScroll = () => {
             console.log('throttleScroll .');
             return (0, utils_1.throttle)(this.handleScroll, 300)();
         };
-        this.handleScroll = () => {
+        this.handleScroll = (target, event) => {
             var _a;
-            console.error('handleScroll . ');
+            console.error('handleScroll . target is ', target);
             // console.log('this.el', this.el);
-            if (this.el) {
+            if (this.target) {
                 this.visible =
-                    this.el.scrollTop >= (((_a = this.props) === null || _a === void 0 ? void 0 : _a.visibilityHeight) || 200);
+                    this.target.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.content.showSlot(this.visible);
             }
         };
         this.className = 'TdBackTop';
+        this.assignProps(td_backtop_const_1.backtopProps);
         this.division = new framework_1.Div({
-            name: 'td-back-top',
             attrObj: {
+                name: 'td-back-top',
                 class: 'td-back-top'
             },
-            styleObj: {
-                right: (0, utils_1.addUnit)(params === null || params === void 0 ? void 0 : params.right) || '40px',
-                bottom: (0, utils_1.addUnit)(params === null || params === void 0 ? void 0 : params.bottom) || '40px',
-                position: 'fixed',
-                // backgroundColor: getCssVar('backtop', 'bg-color'),
-                // backgroundColor: $backtop.bgColor,
-                width: '40px',
-                height: '40px',
-                borderRadius: '50%',
-                // color: getCssVar('backtop', 'text-color'),
-                color: td_backtop_style_1.$backtop.textColor,
-                // display: this.visible ? 'flex' : 'none',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                fontSize: '20px',
-                // boxShadow: getCssVar('box-shadow', 'lighter'),
-                boxShadow: var_1.$boxShadow.lighter,
-                cursor: 'pointer',
-                zIndex: 999
-            },
+            styleObj: td_backtop_style_1.$backtopStyle,
             events: {
-                click: () => {
-                    this.handleClick();
-                }
+                click: (evt) => this.handleClick()
             }
         });
         this.division.attr.addObj({
             componentId: this.componentId
         });
-        this.transition = new framework_1.Transition({
+        this.content = new framework_1.Transition({
             name: 'fade',
             slot: this.division,
         });
-        this.addChild(this.transition);
-        // this.attr.addName('td-back-top');
+        this.addChild(this.content);
+        this.division.useStyle(params);
+        this.division.style.addObj({
+            right: (params.right || 40) + 'px',
+            bottom: (params.bottom || 40) + 'px',
+        });
+        this.division.useAttr(params);
+        // if (this.visible) {
+        //   this.content.addChild(this.division);
+        // }
         if (!TdBackTop.initCalled) {
             TdBackTop.initCalled = true;
             (0, framework_1.createClass)('td-back-top', {
@@ -84,7 +70,6 @@ class TdBackTop extends ui_abstract_1.UI {
                 // // color: getCssVar('backtop', 'text-color'),
                 // color: $backtop.textColor,
                 // display: 'flex',
-                // // display: 'flex',
                 // alignItems: 'center',
                 // justifyContent: 'center',
                 // fontSize: '20px',
@@ -100,6 +85,7 @@ class TdBackTop extends ui_abstract_1.UI {
         this.division.addChild(this.getSlotNode());
         if (params === null || params === void 0 ? void 0 : params.slot) {
             // this.division.slotChild(params.slot);
+            this.getSlotNode().addSlot(params.slot);
         }
         else {
             this.getSlotNode().resetSlot(new td_icon_class_1.TdIcon({
@@ -108,45 +94,36 @@ class TdBackTop extends ui_abstract_1.UI {
             }));
         }
         this.container = document;
-        this.el = document.documentElement; // todo 监听不生效 ？？？？
-        this.buildProps({
-            visibilityHeight: 200,
-            right: 40,
-            bottom: 40,
-        });
+        this.target = document.documentElement; // todo 监听不生效 ？？？？
         this.props = this.useParams(params);
     }
     mounted() {
         var _a;
         console.log('TdBackTop mounted');
+        this.container = document; // this.el;
+        this.target = document.documentElement;
         if ((_a = this.props) === null || _a === void 0 ? void 0 : _a.target) {
-            this.el = this.props.target;
-            // if (!this.el) {
-            //   throw Error(`target does not exist: ${this.props.target}`)
-            // }
+            this.target = this.props.target;
+            if (!this.target) {
+                throw Error(`target does not exist: ${this.props.target}`);
+            }
         }
-        // this.container = this.root?.dom as HTMLDivElement; // this.el;
+        // this.container = this.target;
         // this.container.style.setProperty('over-flow', 'scroll');
+        // listener scroll
+        this.container.addEventListener('scroll', this.throttleScroll);
         // 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);
-        });
     }
     destroy(root) {
+        console.log('TdBackTop destroy');
         this.container.removeEventListener('scroll', this.throttleScroll);
         super.destroy(root);
     }
     handleClick() {
         var _a;
         console.error('handleClick . ');
-        (_a = this.el) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: 0, behavior: 'smooth' });
+        (_a = this.target) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: 0, behavior: 'smooth' });
     }
 }
 exports.TdBackTop = TdBackTop;

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

@@ -0,0 +1,18 @@
+export declare const backtopProps: {
+    /**
+     * @description the button will not show until the scroll height reaches this value.
+     */
+    visibilityHeight: number;
+    /**
+     * @description the target to trigger scroll.
+     */
+    target: string;
+    /**
+     * @description right distance.
+     */
+    right: number;
+    /**
+     * @description bottom distance.
+     */
+    bottom: number;
+};

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.backtopProps = void 0;
+exports.backtopProps = {
+    /**
+     * @description the button will not show until the scroll height reaches this value.
+     */
+    visibilityHeight: 200,
+    /**
+     * @description the target to trigger scroll.
+     */
+    target: '',
+    /**
+     * @description right distance.
+     */
+    right: 40,
+    /**
+     * @description bottom distance.
+     */
+    bottom: 40,
+};

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

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdBackTop extends IUI {
+import type { ITransitionConfig, ITypeElement } from '@type-dom/framework';
+export interface ITdBackTop extends ITypeElement {
     className: 'TdBackTop';
 }
-export interface ITdBackTopConfig extends IUIConfig {
+export interface ITdBackTopConfig extends ITransitionConfig {
     /**
      * @description the button will not show until the scroll height reaches this value.
      *     default: 200,

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

@@ -1,5 +1,7 @@
+import { IStyle } from '@type-dom/css-type';
 export declare const $backtop: {
     bgColor: string;
     textColor: string;
     hoverBgColor: string;
 };
+export declare const $backtopStyle: IStyle;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$backtop = void 0;
+exports.$backtopStyle = exports.$backtop = void 0;
 const var_1 = require("../../../styles/var");
 exports.$backtop = {
     // 'bg-color': getCssVar('bg-color', 'overlay'),
@@ -11,3 +11,21 @@ exports.$backtop = {
     hoverBgColor: var_1.$borderColor.extraLight
     // 'hover-text-color':
 };
+exports.$backtopStyle = {
+    position: 'fixed',
+    // background-color: getCssVar('backtop', 'bg-color'),
+    backgroundColor: exports.$backtop.bgColor,
+    width: '40px',
+    height: '40px',
+    borderRadius: '50%',
+    // color: getCssVar('backtop', 'text-color'),
+    color: exports.$backtop.textColor,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '20px',
+    // boxShadow: getCssVar('box-shadow', 'lighter'),
+    boxShadow: var_1.$boxShadow.lighter,
+    cursor: 'pointer',
+    zIndex: 15, // 5 会被遮挡
+};

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

@@ -1,7 +1,6 @@
-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) => {
+export declare const useBackTop: (props: ITdBackTopConfig, emit: (eventName: string, event?: Event) => void, componentName: string) => {
     visible: boolean;
-    handleClick: (fn: AnyFn) => void;
+    handleClick: (event: MouseEvent) => void;
     mounted: () => void;
 };

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

@@ -13,9 +13,9 @@ emit, componentName) => {
             visible = el.scrollTop >= ((_a = props.visibilityHeight) !== null && _a !== void 0 ? _a : 0);
         }
     };
-    const handleClick = (fn) => {
+    const handleClick = (event) => {
         el === null || el === void 0 ? void 0 : el.scrollTo({ top: 0, behavior: 'smooth' });
-        emit('click', fn);
+        emit('click', event);
     };
     // const handleScrollThrottled = useThrottleFn(handleScroll, 300, true)
     //

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

@@ -1,11 +1,11 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { TdBreadcrumbItem } from '../td-breadcrumb-item/td-breadcrumb-item.class';
 import { ITdBreadcrumb, ITdBreadcrumbConfig } from './td-breadcrumb.interface';
-export declare class TdBreadcrumb extends UI implements ITdBreadcrumb {
+export declare class TdBreadcrumb extends TypeDiv implements ITdBreadcrumb {
     className: 'TdBreadcrumb';
     props: ITdBreadcrumbConfig;
     childNodes: TdBreadcrumbItem[];
     constructor(params?: ITdBreadcrumbConfig);
-    created(): void;
+    setup(): void;
     mounted(): void;
 }

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

@@ -1,23 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdBreadcrumb = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
 //  todo link 样式没有添加
-class TdBreadcrumb extends ui_abstract_1.UI {
+class TdBreadcrumb extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdBreadcrumb';
-        this.attr.addName('td-breadcrumb');
-        this.style.addObj({
+        this.attr.setObj({
+            name: 'td-breadcrumb',
+            'aria-label': 'Breadcrumb', // :aria-label="t('el.breadcrumb.label')"
+            role: 'navigation',
+        });
+        this.style.setObj({
             fontSize: '14px',
             lineHeight: 1
         });
         this.childNodes = [];
-        this.addChild(this.getSlotNode());
+        this.slotChild(params.slot);
         this.props = this.useParams(params);
     }
-    created() {
-        console.log('TdBreadcrumb created . ');
+    setup() {
+        console.log('TdBreadcrumb setup . ');
         this.childNodes.forEach((item, index) => {
             if (index < this.childNodes.length - 1) {
                 item.addSeparator(this.props);

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

@@ -1,9 +1,8 @@
-import { TypeSvgSvg } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdBreadcrumb extends IUI {
+import { ITypeConfig, ITypeDiv, TypeSvgSvg } from '@type-dom/framework';
+export interface ITdBreadcrumb extends ITypeDiv {
     className: 'TdBreadcrumb';
 }
-export interface ITdBreadcrumbConfig extends IUIConfig {
+export interface ITdBreadcrumbConfig extends ITypeConfig {
     /**
      * @description separator character
      *     default: '/',

package/src/components/navigation/td-breadcrumb-item/td-breadcrumb-item.class.d.ts

@@ -1,7 +1,7 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeSpan } from '@type-dom/framework';
 import { ITdBreadcrumbConfig } from '../td-breadcrumb/td-breadcrumb.interface';
 import { ITdBreadcrumbItem, ITdBreadcrumbItemConfig } from './td-breadcrumb-item.interface';
-export declare class TdBreadcrumbItem extends UI implements ITdBreadcrumbItem {
+export declare class TdBreadcrumbItem extends TypeSpan implements ITdBreadcrumbItem {
     className: 'TdBreadcrumbItem';
     constructor(params?: ITdBreadcrumbItemConfig);
     addSeparator(breadcrumbConfig?: ITdBreadcrumbConfig): void;

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

@@ -2,12 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdBreadcrumbItem = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const var_1 = require("../../../styles/var");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
-class TdBreadcrumbItem extends ui_abstract_1.UI {
+class TdBreadcrumbItem extends framework_1.TypeSpan {
     constructor(params = {}) {
-        super(params, 'span');
+        super();
         this.className = 'TdBreadcrumbItem';
         this.style.addObj({
             float: 'left',

package/src/components/navigation/td-breadcrumb-item/td-breadcrumb-item.interface.d.ts

@@ -1,9 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { Router } from '@type-dom/framework';
-export interface ITdBreadcrumbItem extends IUI {
+import { ITypeConfig, ITypeSpan, Router } from '@type-dom/framework';
+export interface ITdBreadcrumbItem extends ITypeSpan {
     className: 'TdBreadcrumbItem';
 }
-export interface ITdBreadcrumbItemConfig extends IUIConfig {
+export interface ITdBreadcrumbItemConfig extends ITypeConfig {
     /**
      * @description target route of the link, same as `to` of `vue-router`
      *     default: '',

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

@@ -1,6 +1,6 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeUL } from '@type-dom/framework';
 import { ITdMenu, ITdMenuConfig } from './td-menu.interface';
-export declare class TdMenu extends UI implements ITdMenu {
+export declare class TdMenu extends TypeUL implements ITdMenu {
     className: 'TdMenu';
     props: ITdMenuConfig;
     constructor(params?: ITdMenuConfig);

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

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdMenu = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
 const var_1 = require("../../../styles/var");
-class TdMenu extends ui_abstract_1.UI {
+class TdMenu extends framework_1.TypeUL {
     constructor(params = {}) {
-        super(params, 'ul');
+        super();
+        // this.useTag('ul');
         this.className = 'TdMenu';
         this.attr.addObj({
             name: 'td-menu',

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

@@ -1,9 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { Router } from '@type-dom/framework';
-export interface ITdMenu extends IUI {
+import { ITypeConfig, ITypeUL, Router } from '@type-dom/framework';
+export interface ITdMenu extends ITypeUL {
     className: 'TdMenu';
 }
-export interface ITdMenuConfig extends IUIConfig {
+export interface ITdMenuConfig extends ITypeConfig {
     mode?: 'horizontal' | 'vertical';
     defaultActive?: string;
     uniqueOpened?: boolean;

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

@@ -1,7 +1,7 @@
 import { IStyle } from '@type-dom/css-type';
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { ITdTabBar, ITdTabBarConfig } from './td-tab-bar.interface';
-export declare class TdTabBar extends UI implements ITdTabBar {
+export declare class TdTabBar extends TypeDiv implements ITdTabBar {
     className: 'TdTabBar';
     props: ITdTabBarConfig;
     barStyle?: IStyle;

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

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdTabBar = void 0;
 const utils_1 = require("@type-dom/utils");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
 const td_tabs_style_1 = require("./td-tabs.style");
-class TdTabBar extends ui_abstract_1.UI {
+class TdTabBar extends framework_1.TypeDiv {
     constructor(params) {
-        super(params);
+        super();
         this.className = 'TdTabBar';
         this.attr.addName('td-tab-bar');
         this.style.addObj(td_tabs_style_1.$tabsActiveBarStyle);

package/src/components/navigation/td-tabs/td-tab-bar.interface.d.ts

@@ -1,10 +1,10 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
 import { ITdTabPaneConfig } from './td-tab-pane.interface';
 import { TdTabs } from './td-tabs.class';
-export interface ITdTabBar extends IUI {
+export interface ITdTabBar extends ITypeDiv {
     className: 'TdTabBar';
 }
-export interface ITdTabBarConfig extends IUIConfig {
+export interface ITdTabBarConfig extends ITypeConfig {
     tabs?: ITdTabPaneConfig[];
     rootTabs?: TdTabs;
 }

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

@@ -1,7 +1,6 @@
-import { Div, Span, TypeElement } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { Div, Span, TypeElement, TypeDiv } from '@type-dom/framework';
 import { IScrollable, ITdTabNav, ITdTabNavConfig } from './td-tab-nav.interface';
-export declare class TdTabNav extends UI implements ITdTabNav {
+export declare class TdTabNav extends TypeDiv implements ITdTabNav {
     className: 'TdTabNav';
     props: ITdTabNavConfig;
     scrollBtn?: Span[];

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

@@ -5,15 +5,14 @@ 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 ui_abstract_1 = require("../../../ui/ui.abstract");
 const var_1 = require("../../../styles/var");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 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");
-class TdTabNav extends ui_abstract_1.UI {
+class TdTabNav extends framework_1.TypeDiv {
     constructor(params = {}) {
         var _a, _b;
-        super(params);
+        super();
         this.tabs = [];
         this.className = 'TdTabNav';
         this.attr.addName('td-tab-nav-wrap');

package/src/components/navigation/td-tabs/td-tab-nav.interface.d.ts

@@ -1,11 +1,11 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
 import { ITdTabPaneConfig } from './td-tab-pane.interface';
 import { TdTabs } from './td-tabs.class';
 import { ITabPaneName } from './td-tabs.interface';
-export interface ITdTabNav extends IUI {
+export interface ITdTabNav extends ITypeDiv {
     className: 'TdTabNav';
 }
-export interface ITdTabNavConfig extends IUIConfig {
+export interface ITdTabNavConfig extends ITypeConfig {
     rootTabs?: TdTabs;
     panes?: ITdTabPaneConfig[];
     currentName?: string | number;

package/src/components/navigation/td-tabs/td-tab-pane.class.d.ts

@@ -1,12 +1,11 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { ITdTabPane, ITdTabPaneConfig } from './td-tab-pane.interface';
-export declare class TdTabPane extends UI<undefined> implements ITdTabPane {
+export declare class TdTabPane extends TypeDiv implements ITdTabPane {
     className: 'TdTabPane';
     props: ITdTabPaneConfig;
     isClosable?: boolean;
     active: boolean;
     shouldBeRender: boolean;
-    private panel?;
     private loaded;
     constructor(params?: ITdTabPaneConfig);
     setActive(active: boolean): void;

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

@@ -2,39 +2,35 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdTabPane = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-class TdTabPane extends ui_abstract_1.UI {
+class TdTabPane extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params, 'fragment');
+        super();
+        // this.useTag('fragment');
         this.className = 'TdTabPane';
         this.isClosable = params === null || params === void 0 ? void 0 : params.closable;
         this.active = false;
         this.loaded = false; // params?.loaded;
         this.shouldBeRender = !(params === null || params === void 0 ? void 0 : params.lazy) || this.loaded || this.active;
         if (this.shouldBeRender) {
-            this.panel = new framework_1.Div({
-                className: 'tab-pane',
-                attrObj: {
-                    role: 'tab-panel',
-                },
-                styleObj: {
-                    display: !this.active ? 'block' : 'none',
-                },
+            this.attr.addObj({
+                role: 'tab-panel',
+            });
+            this.style.addObj({
+                display: !this.active ? 'block' : 'none',
             });
             if (params === null || params === void 0 ? void 0 : params.slot) {
-                this.panel.slotChild(params.slot);
+                this.slotChild(params.slot);
             }
-            this.addChild(this.panel);
+            // this.addChild(this);
         }
         this.props = this.useParams(params);
     }
     setActive(active) {
-        var _a, _b;
         if (active) {
-            (_a = this.panel) === null || _a === void 0 ? void 0 : _a.style.show();
+            this === null || this === void 0 ? void 0 : this.style.show();
         }
         else {
-            (_b = this.panel) === null || _b === void 0 ? void 0 : _b.style.hide();
+            this === null || this === void 0 ? void 0 : this.style.hide();
         }
     }
 }

package/src/components/navigation/td-tabs/td-tab-pane.interface.d.ts

@@ -1,9 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { TypeElement } from '@type-dom/framework';
-export interface ITdTabPane extends IUI {
+import { ITypeConfig, ITypeDiv, TypeElement } from '@type-dom/framework';
+export interface ITdTabPane extends ITypeDiv {
     className: 'TdTabPane';
 }
-export interface ITdTabPaneConfig extends IUIConfig {
+export interface ITdTabPaneConfig extends ITypeConfig {
     /**
      * @description title of the tab
      *     default: '',

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

@@ -1,8 +1,8 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { ITdTabPaneConfig } from './td-tab-pane.interface';
 import { ITabPaneName, ITdTabs, ITdTabsConfig } from './td-tabs.interface';
 import { TdTabNav } from './td-tab-nav.class';
-export declare class TdTabs extends UI implements ITdTabs {
+export declare class TdTabs extends TypeDiv implements ITdTabs {
     className: 'TdTabs';
     props: ITdTabsConfig;
     currentName: ITabPaneName;