@type-dom/ui 0.0.5 → 0.0.7

package/src/components/form/radio-group/radio-group.interface.d.ts

@@ -5,7 +5,7 @@ export interface IRadioGroup extends ITypeDiv {
     childNodes: IRadioOption[];
 }
 export interface IRadioGroupConfig extends ITypeConfig {
-    name: string;
-    options: IOptionConfig[];
+    name?: string;
+    options?: IOptionConfig[];
     value?: string | number;
 }

package/src/components/form/radio-group/radio-option/radio-option.class.js

@@ -4,7 +4,7 @@ exports.RadioOption = void 0;
 const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 class RadioOption extends framework_1.TypeSpan {
-    constructor(params) {
+    constructor(params = {}) {
         super();
         this.className = 'RadioOption';
         this.ctrl.addStyleObj({

package/src/components/form/td-checkbox/td-checkbox.class.js

@@ -6,7 +6,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_checkbox_style_1 = require("./td-checkbox.style");
 const use_checkbox_1 = require("./composables/use-checkbox");
 class TdCheckbox extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         const { hasOwnLabel } = (0, use_checkbox_1.useCheckbox)(params);
         const tag = !hasOwnLabel ? 'span' : 'label';
         super(params, tag); // label | span

package/src/components/form/td-checkbox/td-checkbox.style.js

@@ -106,8 +106,8 @@ exports.$checkboxInnerStyle = {
     backgroundColor: var_1.$bgColor.default,
     // z-index: getCssVar('index-normal'),
     zIndex: var_1.$zIndex.normal,
-    transition: `border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
-      background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
+    transition: `border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
+      background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
       outline 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46)`
 };
 exports.$checkboxInnerAfterStyle = {

package/src/components/form/td-checkbox-button/td-checkbox-button.class.js

@@ -7,7 +7,7 @@ const use_checkbox_1 = require("../td-checkbox/composables/use-checkbox");
 const td_checkbox_style_1 = require("../td-checkbox/td-checkbox.style");
 const td_checkbox_button_style_1 = require("./td-checkbox-button.style");
 class TdCheckboxButton extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'label'); // label | span
         this.className = 'TdCheckboxButton';
         this.ctrl.addAttrObj({

package/src/components/form/td-checkbox-group/td-checkbox-group.class.js

@@ -4,7 +4,7 @@ exports.TdCheckboxGroup = void 0;
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_checkbox_style_1 = require("../td-checkbox/td-checkbox.style");
 class TdCheckboxGroup extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdCheckboxGroup';
         this.ctrl.addAttrObj({

package/src/components/form/td-form/td-form.class.js

@@ -13,7 +13,7 @@ class TdForm extends ui_abstract_1.UI {
      * 构造函数，初始化表单配置。
      * @param params
      */
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'form');
         this.className = 'TdForm';
         this.ctrl.addAttrName('td-form');

package/src/components/form/td-form-item/td-form-item.class.js

@@ -10,7 +10,7 @@ const var_1 = require("../../../styles/var");
 const td_form_item_style_1 = require("./td-form-item.style");
 class TdFormItem extends ui_abstract_1.UI {
     // new TdFormItem 是 发生在 TdForm slotChild 之前的。
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdFormItem';
         this.ctrl.addAttrName('td-form-item');

package/src/components/form/td-input/td-input.class.js

@@ -9,7 +9,7 @@ const td_input_wrapper_class_1 = require("./widget/td-input-wrapper.class");
 const td_input_style_1 = require("./td-input.style");
 const td_textarea_wrapper_1 = require("./widget/td-textarea-wrapper");
 class TdInput extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         console.log('TdInput constructor . ');
         this.className = 'TdInput';

package/src/components/form/td-input/widget/td-input-wrapper.class.js

@@ -7,7 +7,7 @@ const td_input_style_1 = require("../td-input.style");
 const suffix_1 = require("./suffix");
 const prefix_1 = require("./prefix");
 class TdInputWrapper extends framework_1.TypeDiv {
-    constructor(params) {
+    constructor(params = {}) {
         super();
         this.className = 'TdInputWrapper';
         this.parent = params === null || params === void 0 ? void 0 : params.parent;

package/src/components/form/td-input/widget/td-textarea-wrapper.js

@@ -5,7 +5,7 @@ const framework_1 = require("@type-dom/framework");
 const var_1 = require("../../../../styles/var");
 const td_input_style_1 = require("../td-input.style");
 class TdTextareaWrapper extends framework_1.TypeDiv {
-    constructor(params) {
+    constructor(params = {}) {
         super();
         this.className = 'TextareaWrapper';
         this.ctrl.addStyleObj({

package/src/components/form/td-input/widget/utils.js

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.calcTextareaHeight = void 0;
+exports.calcTextareaHeight = calcTextareaHeight;
 const utils_1 = require("@type-dom/utils");
 let hiddenTextarea = undefined;
-const HIDDEN_STYLE = `
-  height:0 !important;
-  visibility:hidden !important;
-  ${utils_1.isFireFox ? '' : 'overflow:hidden !important;'}
-  position:absolute !important;
-  z-index:-1000 !important;
-  top:0 !important;
-  right:0 !important;
+const HIDDEN_STYLE = `
+  height:0 !important;
+  visibility:hidden !important;
+  ${utils_1.isFireFox ? '' : 'overflow:hidden !important;'}
+  position:absolute !important;
+  z-index:-1000 !important;
+  top:0 !important;
+  right:0 !important;
 `;
 const CONTEXT_STYLE = [
     'letter-spacing',
@@ -78,4 +78,3 @@ function calcTextareaHeight(targetElement, minRows = 1, maxRows) {
     hiddenTextarea = undefined;
     return result;
 }
-exports.calcTextareaHeight = calcTextareaHeight;

package/src/components/form/td-option/td-option.class.js

@@ -4,7 +4,7 @@ exports.TdOption = void 0;
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_select_style_1 = require("../td-select/td-select.style");
 class TdOption extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'li');
         this.className = 'TdOption';
         this.ctrl.addAttrObj({

package/src/components/form/td-option/td-option.interface.d.ts

@@ -7,7 +7,7 @@ export interface ITdOptionConfig extends IUIConfig {
      * @description value of option
      *     required: true,
      */
-    value: string | number | boolean | object;
+    value?: string | number | boolean | object;
     /**
      * @description label of option, same as `value` if omitted
      */

package/src/components/form/td-option-group/td-option-group.class.js

@@ -5,7 +5,7 @@ const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_select_style_1 = require("../td-select/td-select.style");
 class TdOptionGroup extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'ul');
         this.className = 'TdOptionGroup';
         this.ctrl.addAttrObj({

package/src/components/form/td-radio/td-radio.class.js

@@ -6,7 +6,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const var_1 = require("../../../styles/var");
 const td_radio_group_class_1 = require("../td-radio-group/td-radio-group.class");
 class TdRadio extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'label');
         this.className = 'TdRadio';
         this.ctrl.addStyleObj({

package/src/components/form/td-radio-button/td-radio-button.class.js

@@ -6,7 +6,7 @@ const var_1 = require("../../../styles/var");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_radio_group_class_1 = require("../td-radio-group/td-radio-group.class");
 class TdRadioButton extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'label');
         this.className = 'TdRadioButton';
         this.ctrl.addAttrName('radio-button');

package/src/components/form/td-radio-group/td-radio-group.class.js

@@ -6,7 +6,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_radio_class_1 = require("../td-radio/td-radio.class");
 const td_radio_button_class_1 = require("../td-radio-button/td-radio-button.class");
 class TdRadioGroup extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdRadioGroup';
         this.ctrl.addStyleObj({

package/src/components/form/td-select/dropdown/dropdown.class.js

@@ -6,7 +6,7 @@ const ui_abstract_1 = require("../../../../ui/ui.abstract");
 const framework_1 = require("@type-dom/framework");
 const td_select_style_1 = require("../td-select.style");
 class TdSelectDropDown extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdSelectDropdown';
         this.ctrl.addStyleObj({

package/src/components/form/td-select/td-select.class.js

@@ -7,7 +7,7 @@ const td_tooltip_class_1 = require("../../feedback/td-tooltip/td-tooltip.class")
 const dropdown_class_1 = require("./dropdown/dropdown.class");
 const td_select_style_1 = require("./td-select.style");
 class TdSelect extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdSelect';
         this.ctrl.addStyleObj(td_select_style_1.$select);

package/src/components/form/td-switch/td-switch.class.js

@@ -11,7 +11,7 @@ const td_switch_left_1 = require("./widget/td-switch-left");
 const td_switch_right_1 = require("./widget/td-switch-right");
 const td_switch_style_1 = require("./td-switch.style");
 class TdSwitch extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         super(params);
         this.className = 'TdSwitch';

package/src/components/form/td-switch/widget/td-switch-core.js

@@ -7,7 +7,7 @@ const var_1 = require("../../../../styles/var");
 const td_icon_class_1 = require("../../../basic/td-icon/td-icon.class");
 const td_switch_style_1 = require("../td-switch.style");
 class TdSwitchCore extends framework_1.TypeSpan {
-    constructor(params) {
+    constructor(params = {}) {
         super();
         this.className = 'TdSwitchCore';
         this.ctrl.addAttrObj({

package/src/components/form/td-switch/widget/td-switch-left.js

@@ -5,7 +5,7 @@ const framework_1 = require("@type-dom/framework");
 const td_icon_class_1 = require("../../../basic/td-icon/td-icon.class");
 const td_switch_style_1 = require("../td-switch.style");
 class TdSwitchLeft extends framework_1.TypeSpan {
-    constructor(params) {
+    constructor(params = {}) {
         super();
         this.className = 'TdSwitchLeft';
         this.ctrl.addAttrName('switch-label');

package/src/components/form/td-switch/widget/td-switch-right.js

@@ -5,7 +5,7 @@ const framework_1 = require("@type-dom/framework");
 const td_switch_style_1 = require("../td-switch.style");
 const td_icon_class_1 = require("../../../basic/td-icon/td-icon.class");
 class TdSwitchRight extends framework_1.TypeSpan {
-    constructor(params) {
+    constructor(params = {}) {
         super();
         this.className = 'TdSwitchRight';
         this.ctrl.addStyleObj(Object.assign(Object.assign({}, td_switch_style_1.$switchLabel), { marginLeft: '10px' }));

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

@@ -18,8 +18,8 @@ export declare class TdAffix extends UI implements ITdAffix {
     private scrollContainer?;
     private windowHeight?;
     constructor(params?: ITdAffixConfig);
-    get rootStyle(): IStyle<0 | (string & {}), string & {}>;
-    get affixStyle(): IStyle<0 | (string & {}), string & {}>;
+    get rootStyle(): IStyle;
+    get affixStyle(): IStyle;
     mounted(): void;
     change(): void;
 }

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

@@ -6,7 +6,7 @@ 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) {
+    constructor(params = {}) {
         super(params);
         console.log('TdAffix constructor . ');
         this.className = 'TdAffix';

package/src/components/navigation/td-anchor/td-anchor-link/td-anchor-link.class.js

@@ -4,7 +4,7 @@ exports.TdAnchorLink = void 0;
 const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdAnchorLink extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdAnchorLink';
         this.href = new framework_1.A({

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

@@ -5,6 +5,6 @@ export declare class TdAnchor extends UI implements ITdAnchor {
     props: ITdAnchorConfig;
     private marker?;
     private list?;
-    constructor(params: ITdAnchorConfig);
+    constructor(params?: ITdAnchorConfig);
     handleClick(e: MouseEvent, href?: string): void;
 }

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

@@ -6,7 +6,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_anchor_style_1 = require("./td-anchor.style");
 const td_anchor_function_1 = require("./td-anchor.function");
 class TdAnchor extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         var _a, _b, _c, _d;
         super(params);
         this.className = 'TdAnchor';

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

@@ -10,7 +10,7 @@ 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 {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'fragment');
         this.visible = false;
         this.className = 'TdBackTop';

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

@@ -4,7 +4,7 @@ exports.TdBreadcrumb = void 0;
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 //  todo link 样式没有添加
 class TdBreadcrumb extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdBreadcrumb';
         this.ctrl.addAttrName('td-breadcrumb');
@@ -13,9 +13,7 @@ class TdBreadcrumb extends ui_abstract_1.UI {
             lineHeight: 1
         });
         this.childNodes = [];
-        if (params === null || params === void 0 ? void 0 : params.slot) {
-            this.slotChild(params === null || params === void 0 ? void 0 : params.slot);
-        }
+        this.addChild(this.getSlotNode());
         this.props = this.setParams(params);
     }
     created() {

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

@@ -6,7 +6,7 @@ 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 {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'span');
         this.className = 'TdBreadcrumbItem';
         this.ctrl.addStyleObj({

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

@@ -4,7 +4,7 @@ exports.TdMenu = void 0;
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const var_1 = require("../../../styles/var");
 class TdMenu extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'ul');
         this.className = 'TdMenu';
         this.ctrl.addAttrObj({

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

@@ -5,7 +5,7 @@ export declare class TdTabBar extends UI implements ITdTabBar {
     className: 'TdTabBar';
     props: ITdTabBarConfig;
     barStyle?: IStyle;
-    private rootTabs;
+    private rootTabs?;
     constructor(params: ITdTabBarConfig);
     getBarStyle(): IStyle;
     change(): void;

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

@@ -10,7 +10,7 @@ class TdTabBar extends ui_abstract_1.UI {
         this.className = 'TdTabBar';
         this.ctrl.addAttrName('td-tab-bar');
         this.ctrl.addStyleObj(td_tabs_style_1.$tabsActiveBarStyle);
-        this.rootTabs = params.rootTabs;
+        this.rootTabs = params === null || params === void 0 ? void 0 : params.rootTabs;
         this.props = this.setParams(params);
     }
     getBarStyle() {
@@ -23,15 +23,15 @@ class TdTabBar extends ui_abstract_1.UI {
             : 'height';
         const sizeDir = sizeName === 'width' ? 'x' : 'y';
         const position = sizeDir === 'x' ? 'left' : 'top';
-        this.props.tabs.every((tab, index) => {
-            var _a, _b;
+        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.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 || _a === void 0 ? void 0 : _a.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, _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);
             console.log('$el is ', $el);
             if (!$el)
                 return false;
-            const tabName = (_b = tab.name) !== null && _b !== void 0 ? _b : (index + 1);
-            if (tabName !== this.rootTabs.currentName) {
+            const tabName = (_d = tab.name) !== null && _d !== void 0 ? _d : (index + 1);
+            if (tabName !== ((_e = this.rootTabs) === null || _e === void 0 ? void 0 : _e.currentName)) {
                 return true;
             }
             offset =

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

@@ -5,6 +5,6 @@ export interface ITdTabBar extends IUI {
     className: 'TdTabBar';
 }
 export interface ITdTabBarConfig extends IUIConfig {
-    tabs: ITdTabPaneConfig[];
-    rootTabs: TdTabs;
+    tabs?: ITdTabPaneConfig[];
+    rootTabs?: TdTabs;
 }

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

@@ -10,12 +10,12 @@ export declare class TdTabNav extends UI implements ITdTabNav {
     private navScroll?;
     private navOffset?;
     private sizeName;
-    private rootTabs;
+    private rootTabs?;
     private focusable?;
     private isFocus;
     private tabBar?;
     tabs: Div[];
-    constructor(params: ITdTabNavConfig);
+    constructor(params?: ITdTabNavConfig);
     mounted(): void;
     get navStyle(): {
         transform: string;

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

@@ -12,8 +12,8 @@ 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 {
-    constructor(params) {
-        var _a;
+    constructor(params = {}) {
+        var _a, _b;
         super(params);
         this.tabs = [];
         this.className = 'TdTabNav';
@@ -27,8 +27,8 @@ class TdTabNav extends ui_abstract_1.UI {
         this.navOffset = 0;
         this.isFocus = false;
         this.focusable = true;
-        this.rootTabs = params.rootTabs;
-        this.sizeName = ['top', 'bottom'].includes(this.rootTabs.props.tabPosition || 'top')
+        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) {
@@ -92,19 +92,19 @@ class TdTabNav extends ui_abstract_1.UI {
         this.navScroll.addChild(this.nav);
         if (!params.type) {
             this.tabBar = new td_tab_bar_class_1.TdTabBar({
-                rootTabs: params.rootTabs,
+                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 =
-            ((_a = params.panes) === null || _a === void 0 ? void 0 : _a.map((pane, index) => {
+            ((_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 = this.rootTabs.currentName === ((_a = pane.name) !== null && _a !== void 0 ? _a : index);
+                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 = (_b = pane.name) !== null && _b !== void 0 ? _b : (index + 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',
@@ -149,7 +149,7 @@ class TdTabNav extends ui_abstract_1.UI {
                         },
                     },
                 });
-                if (tabName === ((_c = this.rootTabs) === null || _c === void 0 ? void 0 : _c.currentName)) {
+                if (tabName === ((_d = this.rootTabs) === null || _d === void 0 ? void 0 : _d.currentName)) {
                     item.ctrl.addStyleObj({
                         color: var_1.$colors.primary.base,
                     });
@@ -160,8 +160,8 @@ class TdTabNav extends ui_abstract_1.UI {
                     });
                 }
                 // const tabLabelContent = pane.slots?.label || pane?.label;
-                if ((_d = pane.slots) === null || _d === void 0 ? void 0 : _d.label) {
-                    item.slotChild((_e = pane.slots) === null || _e === void 0 ? void 0 : _e.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));
@@ -241,7 +241,7 @@ class TdTabNav extends ui_abstract_1.UI {
             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 activeTabBounding = activeTab.getBoundingClientRect();
-            const navScrollBounding = navScroll.getBoundingClientRect();
+            const navScrollBounding = navScroll === null || navScroll === void 0 ? void 0 : navScroll.getBoundingClientRect();
             const maxOffset = isHorizontal
                 ? nav.offsetWidth - navScrollBounding.width
                 : nav.offsetHeight - navScrollBounding.height;

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

@@ -6,7 +6,7 @@ export interface ITdTabNav extends IUI {
     className: 'TdTabNav';
 }
 export interface ITdTabNavConfig extends IUIConfig {
-    rootTabs: TdTabs;
+    rootTabs?: TdTabs;
     panes?: ITdTabPaneConfig[];
     currentName?: string | number;
     editable?: boolean;

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

@@ -4,7 +4,7 @@ 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 {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'fragment');
         this.className = 'TdTabPane';
         this.isClosable = params === null || params === void 0 ? void 0 : params.closable;

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

@@ -12,7 +12,7 @@ const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const td_tab_nav_class_1 = require("./td-tab-nav.class");
 const td_tabs_style_1 = require("./td-tabs.style");
 class TdTabs extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         var _a, _b;
         super(params);
         this.className = 'TdTabs';

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyle = exports.$tabsContentStyle = exports.$tabsItemStyle = exports.$tabsNavStyle = exports.$tabsNavPrevStyle = exports.$tabNavNextStyle = exports.$tabsNavWrapAfterStyle = exports.$tabsNavScrollStyle = exports.$tabsNavWrapStyle = exports.$tabsNewTabStyle = exports.$tabsActiveBarStyle = exports.$tabsHeaderVerticalStyle = exports.$tabsHeaderStyle = exports.$tabsStyle = exports.$tabs = void 0;
+exports.$tabsContentStyle = exports.$tabsItemStyle = exports.$tabsNavStyle = exports.$tabsNavPrevStyle = exports.$tabNavNextStyle = exports.$tabsNavWrapAfterStyle = exports.$tabsNavScrollStyle = exports.$tabsNavWrapStyle = exports.$tabsNewTabStyle = exports.$tabsActiveBarStyle = exports.$tabsHeaderVerticalStyle = exports.$tabsHeaderStyle = exports.$tabsStyle = exports.$tabs = void 0;
+exports.useStyle = useStyle;
 const var_1 = require("../../../styles/var");
 const transition_1 = require("../../../styles/transition");
 const utils_1 = require("@type-dom/utils");
@@ -125,4 +126,3 @@ exports.$tabsContentStyle = {
 };
 function useStyle(config) {
 }
-exports.useStyle = useStyle;

package/src/components/others/td-divider/td-divider.class.js

@@ -5,7 +5,7 @@ const framework_1 = require("@type-dom/framework");
 const var_1 = require("../../../styles/var");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 class TdDivider extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdDivider';
         this.ctrl.addStyleObj({