@type-dom/ui 0.1.0 → 0.1.1

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

@@ -5,246 +5,89 @@ 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 var_1 = require("../../../styles/var");
+const signals_1 = require("@type-dom/signals");
+const aria_1 = require("../../../constants/aria");
+const use_namespace_1 = require("../../../hooks/use-namespace");
 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 constants_1 = require("./constants");
 class TdTabNav extends framework_1.TypeDiv {
     constructor(params = {}) {
-        var _a, _b;
         super();
-        this.tabs = [];
         this.className = 'TdTabNav';
         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,
-        }));
-        this.scrollable = false;
-        this.navOffset = 0;
-        this.isFocus = false;
-        this.focusable = true;
-        this.rootTabs = params === null || params === void 0 ? void 0 : params.rootTabs;
-        this.sizeName = ['top', 'bottom'].includes(((_a = this.rootTabs) === null || _a === void 0 ? void 0 : _a.props.tabPosition) || 'top')
-            ? 'width'
-            : 'height';
-        if (this.scrollable) {
-            this.scrollBtn = [
-                new framework_1.Span({
-                    name: 'nav-prev',
-                    // ns.is('disabled', !scrollable.value.prev),
-                    styleObj: Object.assign(Object.assign({}, td_tabs_style_1.$tabsNavScrollStyle), { left: 0 }),
-                    events: {
-                        click: (evt) => {
-                            this.scrollPrev();
-                        },
-                    },
-                    childNodes: [
-                        new td_icon_class_1.TdIcon({
-                            svgObj: new svgs_1.ElArrowLeftSvg(),
-                        }),
-                    ],
-                }),
-                new framework_1.Span({
-                    name: 'nav-next',
-                    //  ns.is('disabled', !scrollable.value.next),
-                    styleObj: Object.assign(Object.assign({}, td_tabs_style_1.$tabsNavScrollStyle), { right: 0 }),
-                    events: {
-                        click: (evt) => {
-                            this.scrollNext();
-                        },
-                    },
-                    childNodes: [
-                        new td_icon_class_1.TdIcon({
-                            svgObj: new svgs_1.ElArrowRightSvg(),
-                        }),
-                    ],
-                }),
-            ];
-            this.slotChild(this.scrollBtn);
-        }
-        // <div class={ns.e('nav-scroll')} ref={navScroll$}>
-        this.navScroll = new framework_1.Div({
-            name: 'nav-scroll',
-        });
-        this.addChild(this.navScroll);
-        this.nav = new framework_1.Div({
-            name: 'td-tab-nav-wrap-inner',
-            attrObj: {
-                role: 'tablist',
-            },
-            //  ns.is(rootTabs.props.tabPosition),
-            //  ns.is(
-            //    'stretch',
-            //    props.stretch &&
-            //      ['top', 'bottom'].includes(rootTabs.props.tabPosition)
-            //  ),
-            styleObj: td_tabs_style_1.$tabsNavStyle,
-            events: {
-                keydown: (evt) => {
-                    this.changeTab(evt);
-                },
-            },
-        });
-        this.navScroll.addChild(this.nav);
-        if (!params.type) {
-            this.tabBar = new td_tab_bar_class_1.TdTabBar({
-                rootTabs: params === null || params === void 0 ? void 0 : params.rootTabs,
-                tabs: (params === null || params === void 0 ? void 0 : params.panes) || [],
-            });
-            this.nav.addChild(this.tabBar);
-        }
-        this.tabs =
-            ((_b = params.panes) === null || _b === void 0 ? void 0 : _b.map((pane, index) => {
-                var _a, _b, _c, _d, _e, _f;
-                // const uid = pane.uid
-                const disabled = pane.disabled;
-                const active = ((_a = this.rootTabs) === null || _a === void 0 ? void 0 : _a.currentName) === ((_b = pane.name) !== null && _b !== void 0 ? _b : index);
-                const tabindex = !disabled && active ? 0 : -1;
-                const tabName = (_c = pane.name) !== null && _c !== void 0 ? _c : (index + 1);
-                console.log('tabName is ', tabName);
-                const item = new framework_1.Div({
-                    name: 'tab-nav-item',
-                    //      ns.is(rootTabs.props.tabPosition),
-                    //         ns.is('active', pane.active),
-                    //         ns.is('disabled', disabled),
-                    //         ns.is('closable', closable),
-                    //         ns.is('focus', isFocus.value),
-                    attrObj: {
-                        tabName: tabName,
-                        //   aria-controls={`pane-${tabName}`}
-                        role: 'tab',
-                        ariaSelected: active,
-                        tabindex: tabindex
-                    },
-                    styleObj: td_tabs_style_1.$tabsItemStyle,
-                    events: {
-                        focus: () => {
-                            this.setFocus();
-                        },
-                        blur: () => {
-                            this.removeFocus();
-                        },
-                        click: (evt, ele) => {
-                            var _a, _b;
-                            console.log('tab-nav-item click . ');
-                            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);
-                            });
-                        },
-                        keydown: (ev) => {
-                            var _a, _b;
-                            if (closable &&
-                                ((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.style.addObj({
-                        color: var_1.$colors.primary.base,
-                    });
-                }
-                else {
-                    item.style.addObj({
-                        color: var_1.$textColor.regular,
-                    });
-                }
-                // const tabLabelContent = pane.slots?.label || pane?.label;
-                if ((_e = pane.slots) === null || _e === void 0 ? void 0 : _e.label) {
-                    item.slotChild(pane.slots.label);
-                }
-                else if (pane.label) {
-                    item.addChild(new framework_1.TextNode(pane.label));
-                }
-                const closable = !disabled &&
-                    (pane.closable || ((_f = this.rootTabs) === null || _f === void 0 ? void 0 : _f.props.closable) || params.editable);
-                // pane.index = `${index}`
-                if (closable) {
-                    const btnClose = new td_icon_class_1.TdIcon({
-                        name: 'is-icon-close',
-                        svgObj: new svgs_1.ElCloseSvg(),
-                        events: {
-                            click: (evt) => {
-                                var _a, _b;
-                                console.log('btnClose click . ');
-                                (_b = (_a = params.emits) === null || _a === void 0 ? void 0 : _a.tabRemove) === null || _b === void 0 ? void 0 : _b.call(_a, pane, evt);
-                            },
-                        },
-                    });
-                    item.addChild(btnClose);
-                }
-                return item;
-            })) || [];
-        console.log('this.tabs is ', this.tabs);
-        this.nav.addChildren(...this.tabs);
-        this.nav.style.addObj(this.navStyle);
         this.props = this.useParams(params);
     }
-    mounted() {
-        setTimeout(() => this.scrollToActiveTab(), 0);
-        (0, framework_1.nextTick)().then(() => {
-            var _a;
-            (_a = this.tabBar) === null || _a === void 0 ? void 0 : _a.change();
+    setup() {
+        var _a, _b, _c;
+        const props = this.props;
+        const emit = this.emit;
+        const COMPONENT_NAME = 'TdTabNav';
+        const rootTabs = (0, framework_1.inject)(constants_1.tabsRootContextKey);
+        if (!rootTabs)
+            (0, utils_1.throwError)(COMPONENT_NAME, `<td-tabs><tab-nav /></td-tabs>`);
+        const ns = (0, use_namespace_1.useNamespace)('tabs');
+        const visibility = (0, framework_1.useDocumentVisibility)();
+        const focused = (0, framework_1.useWindowFocus)();
+        const navScroll$ = (0, signals_1.signal)();
+        const nav$ = (0, signals_1.signal)();
+        const el$ = (0, signals_1.signal)();
+        const tabBarRef = (0, signals_1.signal)();
+        const scrollable = (0, signals_1.signal)(undefined);
+        const navOffset = (0, signals_1.signal)(0);
+        const isFocus = (0, signals_1.signal)(false);
+        const focusable = (0, signals_1.signal)(true);
+        const sizeName = (0, signals_1.computed)(() => ['top', 'bottom'].includes(rootTabs.props.tabPosition)
+            ? 'width'
+            : 'height');
+        const navStyle = (0, signals_1.computed)(() => {
+            const dir = sizeName.get() === 'width' ? 'X' : 'Y';
+            return {
+                transform: `translate${dir}(-${navOffset.get()}px)`,
+            };
         });
-    }
-    get navStyle() {
-        const dir = this.sizeName === 'width' ? 'X' : 'Y';
-        return {
-            transform: `translate${dir}(-${this.navOffset}px)`,
+        const scrollPrev = () => {
+            var _a;
+            if (!navScroll$.get())
+                return;
+            const containerSize = (_a = navScroll$.get()) === null || _a === void 0 ? void 0 : _a[`offset${(0, utils_1.capitalize)(sizeName.get())}`];
+            const currentOffset = navOffset.get();
+            if (!currentOffset)
+                return;
+            const newOffset = currentOffset > containerSize ? currentOffset - containerSize : 0;
+            navOffset.set(newOffset);
         };
-    }
-    scrollPrev() {
-        var _a;
-        if (!this.navScroll)
-            return;
-        const containerSize = (_a = this.navScroll) === null || _a === void 0 ? void 0 : _a.dom[`offset${(0, utils_1.capitalize)(this.sizeName)}`];
-        const currentOffset = this.navOffset;
-        if (!currentOffset)
-            return;
-        const newOffset = currentOffset > containerSize ? currentOffset - containerSize : 0;
-        this.navOffset = newOffset;
-    }
-    scrollNext() {
-        var _a, _b;
-        if (!this.navScroll || !this.nav)
-            return;
-        const navSize = (_a = this.nav) === null || _a === void 0 ? void 0 : _a.dom[`offset${(0, utils_1.capitalize)(this.sizeName)}`];
-        const containerSize = (_b = this.navScroll) === null || _b === void 0 ? void 0 : _b.dom[`offset${(0, utils_1.capitalize)(this.sizeName)}`];
-        const currentOffset = this.navOffset || 0;
-        if (navSize - currentOffset <= containerSize)
-            return;
-        const newOffset = navSize - currentOffset > containerSize * 2
-            ? currentOffset + containerSize
-            : navSize - containerSize;
-        this.navOffset = newOffset;
-    }
-    scrollToActiveTab() {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c;
-            const nav = (_a = this.nav) === null || _a === void 0 ? void 0 : _a.dom;
-            if (!this.scrollable || !this.navScroll || !nav)
+        const scrollNext = () => {
+            var _a, _b;
+            if (!navScroll$.get() || !nav$.get())
+                return;
+            const navSize = (_a = nav$.get()) === null || _a === void 0 ? void 0 : _a[`offset${(0, utils_1.capitalize)(sizeName.get())}`];
+            const containerSize = (_b = navScroll$.get()) === null || _b === void 0 ? void 0 : _b[`offset${(0, utils_1.capitalize)(sizeName.get())}`];
+            const currentOffset = navOffset.get();
+            if (navSize - currentOffset <= containerSize)
+                return;
+            const newOffset = navSize - currentOffset > containerSize * 2
+                ? currentOffset + containerSize
+                : navSize - containerSize;
+            navOffset.set(newOffset);
+        };
+        const scrollToActiveTab = () => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const nav = nav$.get();
+            if (!scrollable.get() || !el$.get() || !navScroll$.get() || !nav)
                 return;
             yield (0, framework_1.nextTick)();
-            const activeTab = this.dom.querySelector('.is-active');
+            const activeTab = (_a = el$.get()) === null || _a === void 0 ? void 0 : _a.querySelector('.is-active');
             if (!activeTab)
                 return;
-            const navScroll = (_b = this.navScroll) === null || _b === void 0 ? void 0 : _b.dom;
-            const isHorizontal = ['top', 'bottom'].includes(((_c = this.rootTabs) === null || _c === void 0 ? void 0 : _c.props.tabPosition) || 'top');
+            const navScroll = navScroll$.get();
+            const isHorizontal = ['top', 'bottom'].includes(rootTabs.props.tabPosition);
             const activeTabBounding = activeTab.getBoundingClientRect();
             const navScrollBounding = navScroll === null || navScroll === void 0 ? void 0 : navScroll.getBoundingClientRect();
             const maxOffset = isHorizontal
                 ? nav.offsetWidth - navScrollBounding.width
                 : nav.offsetHeight - navScrollBounding.height;
-            const currentOffset = this.navOffset || 0;
+            const currentOffset = navOffset.get();
             let newOffset = currentOffset;
             if (isHorizontal) {
                 if (activeTabBounding.left < navScrollBounding.left) {
@@ -263,92 +106,226 @@ class TdTabNav extends framework_1.TypeDiv {
                 }
                 if (activeTabBounding.bottom > navScrollBounding.bottom) {
                     newOffset =
-                        currentOffset + (activeTabBounding.bottom - navScrollBounding.bottom);
+                        currentOffset +
+                            (activeTabBounding.bottom - navScrollBounding.bottom);
                 }
             }
             newOffset = Math.max(newOffset, 0);
-            this.navOffset = Math.min(newOffset, maxOffset);
+            navOffset.set(Math.min(newOffset, maxOffset));
         });
-    }
-    change() {
-        var _a, _b, _c;
-        if (!this.nav || !this.navScroll)
-            return;
-        this.props.stretch && ((_a = this.tabBar) === null || _a === void 0 ? void 0 : _a.change());
-        const navSize = (_b = this.nav) === null || _b === void 0 ? void 0 : _b.dom[`offset${(0, utils_1.capitalize)(this.sizeName)}`];
-        const containerSize = (_c = this.navScroll) === null || _c === void 0 ? void 0 : _c.dom[`offset${(0, utils_1.capitalize)(this.sizeName)}`];
-        const currentOffset = this.navOffset || 0;
-        if (containerSize < navSize) {
-            this.scrollable = this.scrollable || {};
-            this.scrollable.prev = currentOffset;
-            this.scrollable.next = currentOffset + containerSize < navSize;
-            if (navSize - currentOffset < containerSize) {
-                this.navOffset = navSize - containerSize;
-            }
-        }
-        else {
-            this.scrollable = false;
-            if (currentOffset > 0) {
-                this.navOffset = 0;
-            }
-        }
-    }
-    selectTab(item) {
-        var _a;
-        console.log('selectTab is ', item);
-        (_a = this.tabBar) === null || _a === void 0 ? void 0 : _a.change();
-        this.tabs.forEach((tab) => {
-            if (item === tab) {
-                tab.style.setObj({
-                    color: var_1.$colors.primary.base,
-                });
+        const update = () => {
+            var _a, _b, _c;
+            if (!nav$.get() || !navScroll$.get())
+                return;
+            props.stretch && ((_a = tabBarRef.get()) === null || _a === void 0 ? void 0 : _a.update());
+            const navSize = (_b = nav$.get()) === null || _b === void 0 ? void 0 : _b[`offset${(0, utils_1.capitalize)(sizeName.get())}`];
+            const containerSize = (_c = navScroll$.get()) === null || _c === void 0 ? void 0 : _c[`offset${(0, utils_1.capitalize)(sizeName.get())}`];
+            const currentOffset = navOffset.get();
+            if (containerSize < navSize) {
+                scrollable.set(scrollable.get() || {});
+                scrollable.get().prev = currentOffset;
+                scrollable.get().next = currentOffset + containerSize < navSize;
+                if (navSize - currentOffset < containerSize) {
+                    navOffset.set(navSize - containerSize);
+                }
             }
             else {
-                tab.style.setObj({
-                    color: var_1.$textColor.regular,
-                });
+                scrollable.set(undefined);
+                if (currentOffset > 0) {
+                    navOffset.set(0);
+                }
             }
-        });
-    }
-    changeTab(e) {
-        const code = e.code;
-        const { up, down, left, right } = utils_1.EVENT_CODE;
-        if (![up, down, left, right].includes(code))
-            return;
-        // 左右上下键更换tab
-        const tabList = Array.from(e.currentTarget.querySelectorAll('[role=tab]:not(.is-disabled)'));
-        const currentIndex = tabList.indexOf(e.target);
-        let nextIndex;
-        if (code === left || code === up) {
-            // left
-            if (currentIndex === 0) {
-                // first
+        };
+        const changeTab = (event) => {
+            let step = 0;
+            switch (event === null || event === void 0 ? void 0 : event.code) {
+                case aria_1.EVENT_CODE.left:
+                case aria_1.EVENT_CODE.up:
+                    step = -1;
+                    break;
+                case aria_1.EVENT_CODE.right:
+                case aria_1.EVENT_CODE.down:
+                    step = 1;
+                    break;
+                default:
+                    return;
+            }
+            const tabList = Array.from(event.currentTarget.querySelectorAll('[role=tab]:not(.is-disabled)'));
+            const currentIndex = tabList.indexOf(event.target);
+            let nextIndex = currentIndex + step;
+            if (nextIndex < 0) {
                 nextIndex = tabList.length - 1;
             }
-            else {
-                nextIndex = currentIndex - 1;
+            else if (nextIndex >= tabList.length) {
+                nextIndex = 0;
+            }
+            tabList[nextIndex].focus({ preventScroll: true }); // 改变焦点元素
+            tabList[nextIndex].click(); // 选中下一个tab
+            setFocus();
+        };
+        const setFocus = () => {
+            if (focusable.get())
+                isFocus.set(true);
+        };
+        const removeFocus = () => isFocus.set(false);
+        (0, signals_1.watch)(visibility, (visibility) => {
+            if (visibility === 'hidden') {
+                focusable.set(false);
+            }
+            else if (visibility === 'visible') {
+                setTimeout(() => focusable.set(true), 50);
             }
-        }
-        else {
-            // right
-            if (currentIndex < tabList.length - 1) {
-                // not last
-                nextIndex = currentIndex + 1;
+        });
+        (0, signals_1.watch)(focused, (focused) => {
+            if (focused) {
+                setTimeout(() => focusable.set(true), 50);
             }
             else {
-                nextIndex = 0;
+                focusable.set(false);
             }
-        }
-        tabList[nextIndex].focus({ preventScroll: true }); // 改变焦点元素
-        tabList[nextIndex].click(); // 选中下一个tab
-        this.setFocus();
-    }
-    setFocus() {
-        if (this.focusable)
-            this.isFocus = true;
-    }
-    removeFocus() {
-        this.isFocus = false;
+        });
+        (0, framework_1.useResizeObserver)(el$, update);
+        (0, framework_1.onMounted)(() => setTimeout(() => scrollToActiveTab(), 0));
+        (0, framework_1.onUpdated)(() => update());
+        (0, framework_1.defineExpose)({
+            scrollToActiveTab,
+            removeFocus,
+        });
+        const scrollBtn = scrollable.get()
+            ? [
+                new framework_1.Span({
+                    name: 'nav-prev',
+                    class: [
+                        ns.e('nav-prev'),
+                        ns.is('disabled', !((_a = scrollable.get()) === null || _a === void 0 ? void 0 : _a.prev)),
+                    ],
+                    events: {
+                        click: (evt) => {
+                            scrollPrev();
+                        },
+                    },
+                    slot: [
+                        new td_icon_class_1.TdIcon({
+                            slot: new svgs_1.ElArrowLeftSvg(),
+                        }),
+                    ],
+                }),
+                new framework_1.Span({
+                    name: 'nav-next',
+                    class: [
+                        ns.e('nav-next'),
+                        ns.is('disabled', !((_b = scrollable.get()) === null || _b === void 0 ? void 0 : _b.next)),
+                    ],
+                    events: {
+                        click: (evt) => {
+                            scrollNext();
+                        },
+                    },
+                    slot: [
+                        new td_icon_class_1.TdIcon({
+                            slot: new svgs_1.ElArrowRightSvg(),
+                        }),
+                    ],
+                }),
+            ]
+            : undefined;
+        const tabs = (_c = props.panes) === null || _c === void 0 ? void 0 : _c.map((pane, index) => {
+            var _a, _b, _c;
+            const uid = pane.uid;
+            const disabled = pane.props.disabled;
+            const tabName = (_b = (_a = pane.props.name) !== null && _a !== void 0 ? _a : pane.index) !== null && _b !== void 0 ? _b : `${index}`;
+            const closable = !disabled && (pane.isClosable || props.editable);
+            pane.index = `${index}`;
+            const btnClose = closable
+                ? new td_icon_class_1.TdIcon({
+                    class: 'is-icon-close',
+                    events: {
+                        // `onClick` not exist when generate dts
+                        click: (ev) => emit('tabRemove', pane, ev),
+                    },
+                    slot: new svgs_1.ElCloseSvg(),
+                })
+                : undefined;
+            const tabLabelContent = ((_c = pane.slots) === null || _c === void 0 ? void 0 : _c.label) || pane.props.label;
+            const tabindex = !disabled && pane.active ? 0 : -1;
+            return new framework_1.Div({
+                refId: `tab-${uid}`,
+                class: [
+                    ns.e('item'),
+                    ns.is(rootTabs.props.tabPosition),
+                    ns.is('active', pane.active.get()),
+                    ns.is('disabled', (0, signals_1.unref)(disabled)),
+                    ns.is('closable', (0, signals_1.unref)(closable)),
+                    ns.is('focus', isFocus.get()),
+                ],
+                attrObj: {
+                    id: `tab-${tabName}`,
+                    key: `tab-${uid}`,
+                    ariaControls: `pane-${tabName}`,
+                    role: 'tab',
+                    ariaSelected: pane.active.get(),
+                    tabindex: tabindex,
+                },
+                events: {
+                    focus: () => setFocus(),
+                    blur: () => removeFocus(),
+                    click: (ev) => {
+                        removeFocus();
+                        emit('tabClick', pane, tabName, ev);
+                    },
+                    keydown: (ev) => {
+                        if (closable &&
+                            ((ev === null || ev === void 0 ? void 0 : ev.code) === aria_1.EVENT_CODE.delete ||
+                                (ev === null || ev === void 0 ? void 0 : ev.code) === aria_1.EVENT_CODE.backspace)) {
+                            emit('tabRemove', pane, ev);
+                        }
+                    },
+                },
+                slot: [...(0, framework_1.arraySlot)(tabLabelContent), btnClose],
+            });
+        });
+        this.addChild(new framework_1.Div({
+            refDom: el$,
+            class: [
+                ns.e('nav-wrap'),
+                ns.is('scrollable', !!scrollable.get()),
+                ns.is(rootTabs.props.tabPosition),
+            ],
+            slot: [
+                ...scrollBtn,
+                new framework_1.Div({
+                    class: ns.e('nav-scroll'),
+                    refDom: navScroll$,
+                    slot: [
+                        new framework_1.Div({
+                            refDom: nav$,
+                            class: [
+                                ns.e('nav'),
+                                ns.is(rootTabs.props.tabPosition),
+                                ns.is('stretch', props.stretch &&
+                                    ['top', 'bottom'].includes(rootTabs.props.tabPosition)),
+                            ],
+                            attrObj: {
+                                role: 'tablist',
+                            },
+                            styleObj: navStyle,
+                            events: {
+                                keydown: changeTab,
+                            },
+                            init: (ele) => {
+                                if (!props.type) {
+                                    ele.addChild(new td_tab_bar_class_1.TdTabBar({
+                                        refEl: tabBarRef,
+                                        tabs: [...props.panes],
+                                    }));
+                                }
+                                ele.slotChildren(tabs);
+                            },
+                        }),
+                    ],
+                }),
+            ],
+        }));
     }
 }
 exports.TdTabNav = TdTabNav;

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

@@ -0,0 +1,6 @@
+import { TabsPaneContext } from './constants';
+import { TabPaneName } from './td-tabs.interface';
+export declare const tabNavEmits: {
+    tabClick: (tab: TabsPaneContext, tabName: TabPaneName, ev: Event) => boolean;
+    tabRemove: (tab: TabsPaneContext, ev: Event) => boolean;
+};

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tabNavEmits = void 0;
+exports.tabNavEmits = {
+    tabClick: (tab, tabName, ev) => ev instanceof Event,
+    tabRemove: (tab, ev) => ev instanceof Event,
+};

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

@@ -1,23 +1,23 @@
-import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
-import { ITdTabPaneConfig } from './td-tab-pane.interface';
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
 import { TdTabs } from './td-tabs.class';
-import { ITabPaneName } from './td-tabs.interface';
+import { TabPaneName } from './td-tabs.interface';
+import { TabsPaneContext } from './constants';
 export interface ITdTabNav extends ITypeDiv {
     className: 'TdTabNav';
 }
-export interface ITdTabNavConfig extends ITypeConfig {
+export interface TabNavProps extends TypeDivProps {
     rootTabs?: TdTabs;
-    panes?: ITdTabPaneConfig[];
+    panes?: TabsPaneContext[];
     currentName?: string | number;
     editable?: boolean;
     type?: 'card' | 'border-card' | '';
     stretch?: boolean;
     emits?: {
-        tabClick?: (tab: ITdTabPaneConfig, tabName: ITabPaneName, event: Event) => void;
-        tabRemove?: (tab: ITdTabPaneConfig, evt: Event) => void;
+        tabClick?: (tab: TabsPaneContext, tabName: TabPaneName, event: Event) => void;
+        tabRemove?: (tab: TabsPaneContext, evt: Event) => void;
     };
 }
-export interface IScrollable {
+export interface Scrollable {
     next?: boolean;
     prev?: number;
 }