@type-dom/ui 0.1.3 → 0.2.1

package/src/components/navigation/td-menu/utils/menu-item.d.ts

@@ -1,9 +0,0 @@
-import SubMenu from './submenu';
-declare class MenuItem {
-    domNode: HTMLElement;
-    submenu: SubMenu | null;
-    constructor(domNode: HTMLElement, namespace: string);
-    init(namespace: string): void;
-    addListeners(): void;
-}
-export default MenuItem;

package/src/components/navigation/td-menu/utils/menu-item.js

@@ -1,58 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-// import { triggerEvent } from '@element-plus/utils'
-// import { EVENT_CODE } from '@element-plus/constants'
-const utils_1 = require("@type-dom/utils");
-const aria_1 = require("../../../../constants/aria");
-const submenu_1 = require("./submenu");
-class MenuItem {
-    constructor(domNode, namespace) {
-        this.domNode = domNode;
-        this.submenu = null;
-        this.submenu = null;
-        this.init(namespace);
-    }
-    init(namespace) {
-        this.domNode.setAttribute('tabindex', '0');
-        const menuChild = this.domNode.querySelector(`.${namespace}-menu`);
-        if (menuChild) {
-            this.submenu = new submenu_1.default(this, menuChild);
-        }
-        this.addListeners();
-    }
-    addListeners() {
-        this.domNode.addEventListener('keydown', (event) => {
-            let prevDef = false;
-            switch (event.code) {
-                case aria_1.EVENT_CODE.down: {
-                    (0, utils_1.triggerEvent)(event.currentTarget, 'mouseenter');
-                    this.submenu && this.submenu.gotoSubIndex(0);
-                    prevDef = true;
-                    break;
-                }
-                case aria_1.EVENT_CODE.up: {
-                    (0, utils_1.triggerEvent)(event.currentTarget, 'mouseenter');
-                    this.submenu &&
-                        this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1);
-                    prevDef = true;
-                    break;
-                }
-                case aria_1.EVENT_CODE.tab: {
-                    (0, utils_1.triggerEvent)(event.currentTarget, 'mouseleave');
-                    break;
-                }
-                case aria_1.EVENT_CODE.enter:
-                case aria_1.EVENT_CODE.numpadEnter:
-                case aria_1.EVENT_CODE.space: {
-                    prevDef = true;
-                    event.currentTarget.click();
-                    break;
-                }
-            }
-            if (prevDef) {
-                event.preventDefault();
-            }
-        });
-    }
-}
-exports.default = MenuItem;

package/src/components/navigation/td-menu/utils/submenu.d.ts

@@ -1,12 +0,0 @@
-import type MenuItem from './menu-item';
-declare class SubMenu {
-    parent: MenuItem;
-    domNode: ParentNode;
-    subMenuItems: NodeList;
-    subIndex: number;
-    constructor(parent: MenuItem, domNode: ParentNode);
-    init(): void;
-    gotoSubIndex(idx: number): void;
-    addListeners(): void;
-}
-export default SubMenu;

package/src/components/navigation/td-menu/utils/submenu.js

@@ -1,66 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-// import { triggerEvent } from '@element-plus/utils'
-// import { EVENT_CODE } from '@element-plus/constants'
-const utils_1 = require("@type-dom/utils");
-const aria_1 = require("../../../../constants/aria");
-class SubMenu {
-    constructor(parent, domNode) {
-        this.parent = parent;
-        this.domNode = domNode;
-        this.subIndex = 0;
-        this.subIndex = 0;
-        this.init();
-    }
-    init() {
-        this.subMenuItems = this.domNode.querySelectorAll('li');
-        this.addListeners();
-    }
-    gotoSubIndex(idx) {
-        if (idx === this.subMenuItems.length) {
-            idx = 0;
-        }
-        else if (idx < 0) {
-            idx = this.subMenuItems.length - 1;
-        }
-        this.subMenuItems[idx].focus();
-        this.subIndex = idx;
-    }
-    addListeners() {
-        const parentNode = this.parent.domNode;
-        Array.prototype.forEach.call(this.subMenuItems, (el) => {
-            el === null || el === void 0 ? void 0 : el.addEventListener('keydown', (event) => {
-                let prevDef = false;
-                switch (event.code) {
-                    case aria_1.EVENT_CODE.down: {
-                        this.gotoSubIndex(this.subIndex + 1);
-                        prevDef = true;
-                        break;
-                    }
-                    case aria_1.EVENT_CODE.up: {
-                        this.gotoSubIndex(this.subIndex - 1);
-                        prevDef = true;
-                        break;
-                    }
-                    case aria_1.EVENT_CODE.tab: {
-                        (0, utils_1.triggerEvent)(parentNode, 'mouseleave');
-                        break;
-                    }
-                    case aria_1.EVENT_CODE.enter:
-                    case aria_1.EVENT_CODE.numpadEnter:
-                    case aria_1.EVENT_CODE.space: {
-                        prevDef = true;
-                        event.currentTarget.click();
-                        break;
-                    }
-                }
-                if (prevDef) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
-                return false;
-            });
-        });
-    }
-}
-exports.default = SubMenu;

package/src/components/navigation/td-menu-item/style/css.d.ts

@@ -1,2 +0,0 @@
-import '../../../base/style/css';
-import '@element-plus/theme-chalk/el-menu-item.css';

package/src/components/navigation/td-menu-item/style/css.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../base/style/css");
-require("@element-plus/theme-chalk/el-menu-item.css");

package/src/components/navigation/td-menu-item/style/index.d.ts

@@ -1,2 +0,0 @@
-import '../../../../components/base/style';
-import '../../../../theme-chalk/menu-item.scss';

package/src/components/navigation/td-menu-item/style/index.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../../components/base/style");
-require("../../../../theme-chalk/menu-item.scss");

package/src/components/navigation/td-menu-item-group/style/css.d.ts

@@ -1,2 +0,0 @@
-import '../../../base/style/css';
-import '@element-plus/theme-chalk/el-menu-item-group.css';

package/src/components/navigation/td-menu-item-group/style/css.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../base/style/css");
-require("@element-plus/theme-chalk/el-menu-item-group.css");

package/src/components/navigation/td-menu-item-group/style/index.d.ts

@@ -1,2 +0,0 @@
-import '../../../../components/base/style';
-import '../../../../theme-chalk/menu-item-group.scss';

package/src/components/navigation/td-menu-item-group/style/index.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../../components/base/style");
-require("../../../../theme-chalk/menu-item-group.scss");

package/src/components/navigation/td-page-header/style/css.d.ts

@@ -1,3 +0,0 @@
-import '../../../base/style/css';
-import '../../../others/td-divider/style/css';
-import '@element-plus/theme-chalk/el-page-header.css';

package/src/components/navigation/td-page-header/style/css.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../base/style/css");
-require("../../../others/td-divider/style/css");
-require("@element-plus/theme-chalk/el-page-header.css");

package/src/components/navigation/td-page-header/style/index.d.ts

@@ -1,3 +0,0 @@
-import '../../../../components/base/style';
-import '../../../../components/others/td-divider/style';
-import '../../../../theme-chalk/page-header.scss';

package/src/components/navigation/td-page-header/style/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../../components/base/style");
-require("../../../../components/others/td-divider/style");
-require("../../../../theme-chalk/page-header.scss");

package/src/components/navigation/td-page-header/td-page-header.class.d.ts

@@ -1,8 +0,0 @@
-import { TypeDiv } from '@type-dom/framework';
-import { ITdPageHeader, PageHeaderProps } from './td-page-header.interface';
-export declare class TdPageHeader extends TypeDiv implements ITdPageHeader {
-    className: 'PageHeader';
-    props: PageHeaderProps;
-    constructor(param: PageHeaderProps);
-    setup(): void;
-}

package/src/components/navigation/td-page-header/td-page-header.class.js

@@ -1,96 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdPageHeader = void 0;
-const framework_1 = require("@type-dom/framework");
-const signals_1 = require("@type-dom/signals");
-const use_locale_1 = require("../../../hooks/use-locale");
-const use_namespace_1 = require("../../../hooks/use-namespace");
-const td_page_header_const_1 = require("./td-page-header.const");
-const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
-const td_divider_class_1 = require("../../others/td-divider/td-divider.class");
-class TdPageHeader extends framework_1.TypeDiv {
-    constructor(param) {
-        super();
-        this.className = 'PageHeader';
-        this.assignProps(td_page_header_const_1.pageHeaderProps);
-        this.props = this.useParams(param);
-    }
-    setup() {
-        var _a, _b, _c, _d;
-        const props = this.props;
-        const emit = this.emit;
-        const slots = (0, framework_1.useSlots)();
-        const { t } = (0, use_locale_1.useLocale)();
-        const ns = (0, use_namespace_1.useNamespace)('page-header');
-        const kls = (0, signals_1.computed)(() => {
-            return [
-                ns.b(),
-                {
-                    [ns.m('has-breadcrumb')]: !!(slots === null || slots === void 0 ? void 0 : slots.breadcrumb),
-                    [ns.m('has-extra')]: !!(slots === null || slots === void 0 ? void 0 : slots.extra),
-                    [ns.is('contentful')]: !!(slots === null || slots === void 0 ? void 0 : slots.default),
-                },
-            ];
-        });
-        function handleClick() {
-            emit('back');
-        }
-        this.attr.addClass(kls);
-        this.addChildren(new framework_1.Div({
-            vIf: slots === null || slots === void 0 ? void 0 : slots.breadcrumb,
-            class: ns.e('breadcrumb'),
-            slot: slots === null || slots === void 0 ? void 0 : slots.breadcrumb,
-        }), new framework_1.Div({
-            class: ns.e('header'),
-            slot: [
-                new framework_1.Div({
-                    class: ns.e('left'),
-                    slot: [
-                        new framework_1.Div({
-                            class: ns.e('back'),
-                            attrObj: {
-                                role: 'button',
-                                tabindex: '0',
-                            },
-                            events: {
-                                click: handleClick,
-                            },
-                            slot: [
-                                new framework_1.Div({
-                                    vIf: props.icon || (slots === null || slots === void 0 ? void 0 : slots.icon),
-                                    ariaLabel: props.title || t('el.pageHeader.title'),
-                                    class: ns.e('icon'),
-                                    slot: (_a = slots === null || slots === void 0 ? void 0 : slots.icon) !== null && _a !== void 0 ? _a : new td_icon_class_1.TdIcon({
-                                        vIf: props.icon,
-                                        slot: new props.icon(),
-                                    }),
-                                }),
-                                new framework_1.Div({
-                                    class: ns.e('title'),
-                                    slot: (_b = slots === null || slots === void 0 ? void 0 : slots.title) !== null && _b !== void 0 ? _b : (props.title || t('el.pageHeader.title')),
-                                }),
-                            ],
-                        }),
-                        new td_divider_class_1.TdDivider({
-                            direction: 'vertical',
-                        }),
-                        new framework_1.Div({
-                            class: ns.e('content'),
-                            slot: (_c = slots === null || slots === void 0 ? void 0 : slots.content) !== null && _c !== void 0 ? _c : props.content,
-                        }),
-                    ],
-                }),
-                new framework_1.Div({
-                    vIf: slots === null || slots === void 0 ? void 0 : slots.extra,
-                    class: ns.e('extra'),
-                    slot: slots === null || slots === void 0 ? void 0 : slots.extra,
-                }),
-            ],
-        }), new framework_1.Div({
-            vIf: props.slot || (slots === null || slots === void 0 ? void 0 : slots.default),
-            class: ns.e('main'),
-            slot: (_d = props.slot) !== null && _d !== void 0 ? _d : slots === null || slots === void 0 ? void 0 : slots.default,
-        }));
-    }
-}
-exports.TdPageHeader = TdPageHeader;

package/src/components/navigation/td-page-header/td-page-header.const.d.ts

@@ -1,5 +0,0 @@
-import { PageHeaderProps } from './td-page-header.interface';
-export declare const pageHeaderProps: PageHeaderProps;
-export declare const pageHeaderEmits: {
-    back: () => boolean;
-};

package/src/components/navigation/td-page-header/td-page-header.const.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.pageHeaderEmits = exports.pageHeaderProps = void 0;
-const svgs_1 = require("@type-dom/svgs");
-exports.pageHeaderProps = {
-    icon: svgs_1.ElBackSvg,
-};
-exports.pageHeaderEmits = {
-    back: () => true,
-};

package/src/components/navigation/td-page-header/td-page-header.interface.d.ts

@@ -1,21 +0,0 @@
-import { ITypeDiv, TypeDivProps, TypeSvgSvg } from '@type-dom/framework';
-export interface ITdPageHeader extends ITypeDiv {
-    className: 'PageHeader';
-}
-export interface PageHeaderProps extends TypeDivProps {
-    /**
-     * @description icon component of page header
-     */
-    icon?: typeof TypeSvgSvg;
-    /**
-     * @description main title of page header
-     */
-    title?: string;
-    /**
-     * @description content of page header
-     */
-    content?: string;
-}
-export declare const pageHeaderEmits: {
-    back: () => boolean;
-};

package/src/components/navigation/td-page-header/td-page-header.interface.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.pageHeaderEmits = void 0;
-exports.pageHeaderEmits = {
-    back: () => true,
-};

package/src/components/navigation/td-step/style/css.d.ts

@@ -1,2 +0,0 @@
-import '../../../base/style/css';
-import '@element-plus/theme-chalk/el-step.css';

package/src/components/navigation/td-step/style/css.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../base/style/css");
-require("@element-plus/theme-chalk/el-step.css");

package/src/components/navigation/td-step/style/index.d.ts

@@ -1,2 +0,0 @@
-import '../../../../components/base/style';
-import '../../../../theme-chalk/step.scss';

package/src/components/navigation/td-step/style/index.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../../components/base/style");
-require("../../../../theme-chalk/step.scss");

package/src/components/navigation/td-steps/style/css.d.ts

@@ -1,2 +0,0 @@
-import '../../../base/style/css';
-import '@element-plus/theme-chalk/el-steps.css';

package/src/components/navigation/td-steps/style/css.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../base/style/css");
-require("@element-plus/theme-chalk/el-steps.css");

package/src/components/navigation/td-steps/style/index.d.ts

@@ -1,2 +0,0 @@
-import '../../../../components/base/style';
-import '../../../../theme-chalk/steps.scss';

package/src/components/navigation/td-steps/style/index.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../../components/base/style");
-require("../../../../theme-chalk/steps.scss");

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

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

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

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

package/src/components/navigation/td-tab-pane/style/css.d.ts

@@ -1,2 +0,0 @@
-import '../../../base/style/css';
-import '@element-plus/theme-chalk/el-tab-pane.css';

package/src/components/navigation/td-tab-pane/style/css.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../base/style/css");
-require("@element-plus/theme-chalk/el-tab-pane.css");

package/src/components/navigation/td-tab-pane/style/index.d.ts

@@ -1,2 +0,0 @@
-import '../../../..//components/base/style';
-import '../../../..//theme-chalk/tab-pane.scss';

package/src/components/navigation/td-tab-pane/style/index.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../..//components/base/style");
-require("../../../..//theme-chalk/tab-pane.scss");

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

@@ -1,8 +0,0 @@
-import { TypeFragment } from '@type-dom/framework';
-import { ITdTabPane, TabPaneProps } from './td-tab-pane.interface';
-export declare class TdTabPane extends TypeFragment implements ITdTabPane {
-    className: 'TdTabPane';
-    props: TabPaneProps;
-    constructor(params?: TabPaneProps);
-    setup(): void;
-}

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

@@ -1,65 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdTabPane = void 0;
-const framework_1 = require("@type-dom/framework");
-const utils_1 = require("@type-dom/utils");
-const signals_1 = require("@type-dom/signals");
-const use_namespace_1 = require("../../../hooks/use-namespace");
-const constants_1 = require("../td-tabs/constants");
-class TdTabPane extends framework_1.TypeFragment {
-    constructor(params = {}) {
-        super();
-        this.className = 'TdTabPane';
-        this.props = this.useParams(params);
-    }
-    setup() {
-        var _a;
-        const COMPONENT_NAME = 'TdTabPane';
-        const props = this.props;
-        const instance = (0, framework_1.getCurrentInstance)();
-        const slots = (0, framework_1.useSlots)();
-        const tabsRoot = (0, framework_1.inject)(constants_1.tabsRootContextKey);
-        if (!tabsRoot)
-            (0, utils_1.throwError)(COMPONENT_NAME, 'usage: <el-tabs><el-tab-pane /></el-tabs/>');
-        const ns = (0, use_namespace_1.useNamespace)('tab-pane');
-        const index = (0, signals_1.signal)();
-        const isClosable = (0, signals_1.computed)(() => props.closable || tabsRoot.props.closable);
-        const active = (0, signals_1.computed)(() => { var _a; return tabsRoot.currentName.get() === ((_a = props.name) !== null && _a !== void 0 ? _a : index.get()); });
-        const loaded = (0, signals_1.signal)(active.get());
-        const paneName = (0, signals_1.computed)(() => { var _a; return (_a = props.name) !== null && _a !== void 0 ? _a : index.get(); });
-        const shouldBeRender = (0, signals_1.computed)(() => !props.lazy || loaded.get() || active.get());
-        (0, signals_1.watch)(active, (val) => {
-            if (val)
-                loaded.set(true);
-        });
-        const pane = {
-            uid: instance.uid,
-            slots,
-            props,
-            paneName,
-            active,
-            index,
-            isClosable,
-        };
-        tabsRoot.registerPane(pane);
-        (0, framework_1.onMounted)(() => {
-            tabsRoot.sortPane(pane);
-        });
-        (0, framework_1.onUnmounted)(() => {
-            tabsRoot.unregisterPane(pane.uid);
-        });
-        this.addChild(new framework_1.Div({
-            vIf: shouldBeRender,
-            vShow: active,
-            class: ns.b(),
-            attrObj: {
-                id: `pane-${paneName.get()}`,
-                role: 'tabpanel',
-                ariaHidden: !active.get(),
-                ariaLabelledby: `tab-${paneName.get()}`,
-            },
-            slot: (_a = props.slot) !== null && _a !== void 0 ? _a : slots === null || slots === void 0 ? void 0 : slots.default,
-        }));
-    }
-}
-exports.TdTabPane = TdTabPane;

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

@@ -1,30 +0,0 @@
-import { TypeElement, ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
-export interface ITdTabPane extends ITypeFragment {
-    className: 'TdTabPane';
-}
-export interface TabPaneProps extends TypeFragmentProps {
-    /**
-     * @description title of the tab
-     *     default: '',
-     */
-    label?: string;
-    /**
-     * @description identifier corresponding to the name of Tabs, representing the alias of the tab-pane, the default is ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '0'
-     */
-    name?: string | number;
-    /**
-     * @description whether Tab is closable
-     */
-    closable?: boolean;
-    /**
-     * @description whether Tab is disabled
-     */
-    disabled?: boolean;
-    /**
-     * @description whether Tab is lazily rendered
-     */
-    lazy?: boolean;
-    slots?: {
-        label?: TypeElement;
-    };
-}

package/src/components/navigation/td-tab-pane/td-tab-pane.interface.js

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

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

@@ -1,21 +0,0 @@
-import { Computed, MaybeRef, Ref } from '@type-dom/signals';
-import { TabPaneProps } from '../td-tab-pane/td-tab-pane.interface';
-import { TabsProps } from './td-tabs.interface';
-import { InjectionKey, ISlots } from '@type-dom/framework';
-export type TabsPaneContext = {
-    uid: number;
-    slots?: ISlots;
-    props: TabPaneProps;
-    paneName: Computed<string | number | undefined>;
-    active: Computed<boolean>;
-    index?: MaybeRef<string | undefined>;
-    isClosable: Computed<boolean | undefined>;
-};
-export interface TabsRootContext {
-    props: TabsProps;
-    currentName: Ref<string | number>;
-    registerPane: (pane: TabsPaneContext) => void;
-    sortPane: (pane: TabsPaneContext) => void;
-    unregisterPane: (uid: number) => void;
-}
-export declare const tabsRootContextKey: InjectionKey<TabsRootContext>;

package/src/components/navigation/td-tabs/constants.js

@@ -1,7 +0,0 @@
-"use strict";
-// import type { ComputedRef, InjectionKey, Ref, Slots, UnwrapRef } from 'vue'
-// import type { TabsProps } from './tabs'
-// import type { TabPaneProps } from './tab-pane'
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tabsRootContextKey = void 0;
-exports.tabsRootContextKey = Symbol('tabsRootContextKey');

package/src/components/navigation/td-tabs/style/css.d.ts

@@ -1,2 +0,0 @@
-import '../../../base/style/css';
-import '@element-plus/theme-chalk/el-tabs.css';

package/src/components/navigation/td-tabs/style/css.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../base/style/css");
-require("@element-plus/theme-chalk/el-tabs.css");

package/src/components/navigation/td-tabs/style/index.d.ts

@@ -1,2 +0,0 @@
-import '../../../../components/base/style';
-import '../../../../theme-chalk/tabs.scss';

package/src/components/navigation/td-tabs/style/index.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../../components/base/style");
-require("../../../../theme-chalk/tabs.scss");

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

@@ -1,11 +0,0 @@
-import { TypeDiv } from '@type-dom/framework';
-import { ITdTabBar, TabBarProps } from './td-tab-bar.interface';
-import { Signal } from '@type-dom/signals';
-export declare class TdTabBar extends TypeDiv implements ITdTabBar {
-    className: 'TdTabBar';
-    props: TabBarProps;
-    ref?: Signal<HTMLElement | undefined>;
-    updateTabBar?: () => void;
-    constructor(params: TabBarProps);
-    setup(): void;
-}