@type-dom/ui 0.0.6 → 0.0.8

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';
@@ -62,7 +62,7 @@ class TdSwitch extends ui_abstract_1.UI {
             this.right = new td_switch_right_1.TdSwitchRight(params);
             this.addChild(this.right);
         }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     get actualValue() {
         return this.isControlled ? this.props.modelValue : false;
@@ -90,19 +90,18 @@ class TdSwitch extends ui_abstract_1.UI {
         });
     }
     handleChange() {
-        var _a, _b, _c, _d, _e, _f;
         console.log('handleChange . ');
         const props = this.props;
         const checked = this.modelValue === this.activeValue;
         // this.modelValue = !this.modelValue;
         this.modelValue = checked ? this.inactiveValue : this.activeValue;
         const val = checked ? this.inactiveValue : this.activeValue;
-        // emit(UPDATE_MODEL_EVENT, val)
-        (_b = (_a = this.props.emits) === null || _a === void 0 ? void 0 : _a[event_1.UPDATE_MODEL_EVENT]) === null || _b === void 0 ? void 0 : _b.call(_a, val);
-        // emit(CHANGE_EVENT, val)
-        (_d = (_c = this.props.emits) === null || _c === void 0 ? void 0 : _c[event_1.CHANGE_EVENT]) === null || _d === void 0 ? void 0 : _d.call(_c, val);
-        // emit(INPUT_EVENT, val)
-        (_f = (_e = this.props.emits) === null || _e === void 0 ? void 0 : _e[event_1.INPUT_EVENT]) === null || _f === void 0 ? void 0 : _f.call(_e, val);
+        this.emit(event_1.UPDATE_MODEL_EVENT, val);
+        // this.props.emits?.[UPDATE_MODEL_EVENT]?.(val);
+        this.emit(event_1.CHANGE_EVENT, val);
+        // this.props.emits?.[CHANGE_EVENT]?.(val);
+        this.emit(event_1.INPUT_EVENT, val);
+        // this.props.emits?.[INPUT_EVENT]?.(val);
         (0, framework_1.nextTick)(() => {
             this.input.dom.checked = !checked;
             console.log('handleChange . this.input.dom.checked is ', checked);

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({
@@ -166,7 +166,7 @@ class TdSwitchCore extends framework_1.TypeSpan {
             }
         }
         this.addChild(this.action);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     setInnerChecked(checked) {
         var _a, _b, _c, _d, _e, _f, _g, _h;

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');
@@ -20,7 +20,7 @@ class TdSwitchLeft extends framework_1.TypeSpan {
                 text: params.inactiveText
             }));
         }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdSwitchLeft = TdSwitchLeft;

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' }));
@@ -19,7 +19,7 @@ class TdSwitchRight extends framework_1.TypeSpan {
                 text: params.activeText
             }));
         }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdSwitchRight = TdSwitchRight;

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';
@@ -38,7 +38,7 @@ class TdAffix extends ui_abstract_1.UI {
             this.affix.slotChild(params.slot);
         }
         this.addChild(this.affix);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     get rootStyle() {
         return {

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({
@@ -24,7 +24,7 @@ class TdAnchorLink extends ui_abstract_1.UI {
             this.list.addChildren(...params.contents);
             this.addChild(this.list);
         }
-        this.setParams(params);
+        this.setProps(params);
     }
 }
 exports.TdAnchorLink = TdAnchorLink;

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';
@@ -108,7 +108,7 @@ class TdAnchor extends ui_abstract_1.UI {
                 });
             }
         }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     handleClick(e, href) {
         // emit('click', e, href)

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';
@@ -51,7 +51,7 @@ class TdBackTop extends ui_abstract_1.UI {
         });
         this.transition = new framework_1.Transition({
             name: 'fade',
-            slot: this.division
+            childNodes: [this.division]
         });
         this.addChild(this.transition);
         // this.ctrl.addAttrName('td-back-top');
@@ -93,7 +93,7 @@ class TdBackTop extends ui_abstract_1.UI {
         }
         this.container = document;
         this.el = document.documentElement; // todo 监听不生效 ？？？？
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     mounted() {
         var _a;
@@ -113,13 +113,12 @@ class TdBackTop extends ui_abstract_1.UI {
         console.log('TdBackTop initEvents');
         // nextTick(() => {
         console.log('TdBackTop initEvents 2');
-        this.subscriptions.push((0, rxjs_1.fromEvent)(this.container, 'scroll')
+        (0, rxjs_1.fromEvent)(this.container, 'scroll')
             .pipe((0, rxjs_1.throttleTime)(300))
             .subscribe((event) => {
             // console.error('handleScroll . 1');
             this.handleScroll(event);
-        }));
-        // });
+        });
     }
     handleScroll(event) {
         var _a;

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,10 +13,8 @@ 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.props = this.setParams(params);
+        this.addChild(this.getSlotNode());
+        this.props = this.setProps(params);
     }
     created() {
         console.log('TdBreadcrumb 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({
@@ -39,7 +39,7 @@ class TdBreadcrumbItem extends ui_abstract_1.UI {
         if (params === null || params === void 0 ? void 0 : params.slot) {
             this.slotChild(params === null || params === void 0 ? void 0 : params.slot);
         }
-        this.setParams(params);
+        this.setProps(params);
     }
     addSeparator(breadcrumbConfig) {
         if (breadcrumbConfig === null || breadcrumbConfig === void 0 ? void 0 : breadcrumbConfig.separatorIcon) {

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({
@@ -22,7 +22,7 @@ class TdMenu extends ui_abstract_1.UI {
             backgroundColor: var_1.$borderColor.base,
             boxSizing: 'border-box'
         });
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     setup() {
         const props = this.props;

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,8 +10,8 @@ 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.props = this.setParams(params);
+        this.rootTabs = params === null || params === void 0 ? void 0 : params.rootTabs;
+        this.props = this.setProps(params);
     }
     getBarStyle() {
         var _a;
@@ -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));
@@ -188,7 +188,7 @@ class TdTabNav extends ui_abstract_1.UI {
         console.log('this.tabs is ', this.tabs);
         this.nav.addChildren(...this.tabs);
         this.nav.ctrl.addStyleObj(this.navStyle);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     mounted() {
         setTimeout(() => this.scrollToActiveTab(), 0);
@@ -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;
@@ -26,7 +26,7 @@ class TdTabPane extends ui_abstract_1.UI {
             }
             this.addChild(this.panel);
         }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     setActive(active) {
         var _a, _b;

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';
@@ -92,11 +92,11 @@ class TdTabs extends ui_abstract_1.UI {
         else {
             this.childNodes = [this.panel, this.header];
         }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     setCurrentName(value_1) {
         return tslib_1.__awaiter(this, arguments, void 0, function* (value, trigger = false) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            var _a, _b, _c, _d, _e;
             console.log('setCurrentName .');
             // should do nothing.
             if (this.currentName === value || (0, utils_1.isUndefined)(value))
@@ -106,12 +106,12 @@ class TdTabs extends ui_abstract_1.UI {
                 if (canLeave !== false) {
                     this.currentName = value;
                     if (trigger) {
-                        // emit(UPDATE_MODEL_EVENT, value)
-                        (_d = (_c = this.props.emits) === null || _c === void 0 ? void 0 : _c[event_1.UPDATE_MODEL_EVENT]) === null || _d === void 0 ? void 0 : _d.call(_c, value);
-                        // emit('tabChange', value)
-                        (_f = (_e = this.props.emits) === null || _e === void 0 ? void 0 : _e.tabChange) === null || _f === void 0 ? void 0 : _f.call(_e, value);
+                        this.emit(event_1.UPDATE_MODEL_EVENT, value);
+                        // this.props.emits?.[UPDATE_MODEL_EVENT]?.(value);
+                        this.emit('tabChange', value);
+                        // this.props.emits?.tabChange?.(value);
                     }
-                    (_g = this.props.slot) === null || _g === void 0 ? void 0 : _g.forEach((pane, index) => {
+                    (_c = this.props.slot) === null || _c === void 0 ? void 0 : _c.forEach((pane, index) => {
                         var _a;
                         const tabName = (_a = pane.props.name) !== null && _a !== void 0 ? _a : (index + 1);
                         if (tabName === this.currentName) {
@@ -121,39 +121,36 @@ class TdTabs extends ui_abstract_1.UI {
                             pane.setActive(false);
                         }
                     });
-                    (_j = (_h = this.tabNav) === null || _h === void 0 ? void 0 : _h.removeFocus) === null || _j === void 0 ? void 0 : _j.call(_h);
+                    (_e = (_d = this.tabNav) === null || _d === void 0 ? void 0 : _d.removeFocus) === null || _e === void 0 ? void 0 : _e.call(_d);
                 }
             }
-            catch (_k) {
+            catch (_f) {
                 console.error('tab change error');
             }
         });
     }
     handleTabClick(tab, tabName, event) {
-        var _a, _b;
         console.log('handleTabClick . ');
         if (tab.disabled)
             return;
         this.setCurrentName(tabName, true);
-        // emit('tabClick', tab, event)
-        (_b = (_a = this.props.emits) === null || _a === void 0 ? void 0 : _a.tabClick) === null || _b === void 0 ? void 0 : _b.call(_a, tab, event);
+        this.emit('tabClick', tab, event);
+        // this.props.emits?.tabClick?.(tab, event);
     }
     handleTabRemove(pane, ev) {
-        var _a, _b, _c, _d;
         if (pane.disabled || (0, utils_1.isUndefined)(pane.name))
             return;
         ev.stopPropagation();
-        // emit('edit', pane.props.name, 'remove')
-        (_b = (_a = this.props.emits) === null || _a === void 0 ? void 0 : _a.edit) === null || _b === void 0 ? void 0 : _b.call(_a, pane.name, 'remove');
-        // emit('tabRemove', pane.props.name)
-        (_d = (_c = this.props.emits) === null || _c === void 0 ? void 0 : _c.tabRemove) === null || _d === void 0 ? void 0 : _d.call(_c, pane.name);
+        this.emit('edit', pane.name, 'remove');
+        // this.props.emits?.edit?.(pane.name, 'remove');
+        this.emit('tabRemove', pane.name);
+        // this.props.emits?.tabRemove?.(pane.name);
     }
     handleTabAdd() {
-        var _a, _b, _c, _d;
-        // emit('edit', undefined, 'add')
-        (_b = (_a = this.props.emits) === null || _a === void 0 ? void 0 : _a.edit) === null || _b === void 0 ? void 0 : _b.call(_a, undefined, 'add');
-        // emit('tabAdd')
-        (_d = (_c = this.props.emits) === null || _c === void 0 ? void 0 : _c.tabAdd) === null || _d === void 0 ? void 0 : _d.call(_c);
+        this.emit('edit', undefined, 'add');
+        // this.props.emits?.edit?.(undefined, 'add');
+        this.emit('tabAdd');
+        // this.props.emits?.tabAdd?.();
     }
 }
 exports.TdTabs = TdTabs;

package/src/components/others/collapsible-box/heading/expand-heading.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandHeading = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
 class ExpandHeading extends framework_1.TypeDiv {
@@ -39,32 +38,34 @@ class ExpandHeading extends framework_1.TypeDiv {
         this.title.setText(title);
     }
     initEvents() {
-        this.subscriptions.push((0, rxjs_1.fromEvent)(this.svg.dom, 'click').subscribe((e) => {
-            var _a, _b, _c;
-            console.log('expand-heading svg.dom clicked');
-            e.stopPropagation();
-            // const style = getComputedStyle(this.svg.dom);
-            // console.log('style.transform is ', style.transform);
-            if (((_a = this.svg.props.styleObj) === null || _a === void 0 ? void 0 : _a.transform) === 'rotate(-90deg)') {
-                this.svg.ctrl.setStyleObj({
-                    transform: 'rotate(0deg)',
-                    transition: 'transform 0.3s'
-                });
+        this.svg.addEvents({
+            click: (e) => {
+                var _a, _b, _c;
+                console.log('expand-heading svg.dom clicked');
+                e === null || e === void 0 ? void 0 : e.stopPropagation();
+                // const style = getComputedStyle(this.svg.dom);
                 // console.log('style.transform is ', style.transform);
-                if (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.lastChild) instanceof framework_1.TypeHtml) {
-                    this.parent.lastChild.ctrl.setStyle('display', 'flex'); // flex
+                if (((_a = this.svg.props.styleObj) === null || _a === void 0 ? void 0 : _a.transform) === 'rotate(-90deg)') {
+                    this.svg.ctrl.setStyleObj({
+                        transform: 'rotate(0deg)',
+                        transition: 'transform 0.3s'
+                    });
+                    // console.log('style.transform is ', style.transform);
+                    if (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.lastChild) instanceof framework_1.TypeHtml) {
+                        this.parent.lastChild.ctrl.setStyle('display', 'flex'); // flex
+                    }
                 }
-            }
-            else {
-                this.svg.ctrl.setStyleObj({
-                    transform: 'rotate(-90deg)',
-                    transition: 'transform 0.3s'
-                });
-                if (((_c = this.parent) === null || _c === void 0 ? void 0 : _c.lastChild) instanceof framework_1.TypeHtml) {
-                    this.parent.lastChild.ctrl.setStyle('display', 'none');
+                else {
+                    this.svg.ctrl.setStyleObj({
+                        transform: 'rotate(-90deg)',
+                        transition: 'transform 0.3s'
+                    });
+                    if (((_c = this.parent) === null || _c === void 0 ? void 0 : _c.lastChild) instanceof framework_1.TypeHtml) {
+                        this.parent.lastChild.ctrl.setStyle('display', 'none');
+                    }
                 }
             }
-        }));
+        });
     }
 }
 exports.ExpandHeading = ExpandHeading;

package/src/components/others/custom-block/custom-block.d.ts

@@ -0,0 +1,11 @@
+import { ITypeConfig, TextNode, TypeDiv, TypeElement } from '@type-dom/framework';
+export interface ICustomBlockConfig extends ITypeConfig {
+    type?: 'tip' | 'warning';
+    title: string;
+    paragraphs: (TypeElement | TextNode)[];
+    blockquote?: TypeElement | TextNode;
+}
+export declare class CustomBlock extends TypeDiv {
+    className: 'CustomBlock';
+    constructor(params: ICustomBlockConfig);
+}