@type-dom/ui 0.0.6 → 0.0.8

package/README.md

@@ -1,44 +1,44 @@
-## 项目说明
-
-> 这是一个基于自建前端框架TypeDom创建的ui组件库。
-
-## 安装
-
-> npm install @type-dom/ui
-
-## 框架介绍
-
-    1、技术栈
-        –	type-dom框架
-        –	webpack
-        –	typescript
-        –	抽象类
-        –	实体类
-    2、项目结构
-        –	src
-            –	lib
-                -   basic
-                -   data
-                -   feedback
-                -   form
-                -   navigation
-                -   other
-                -   styles
-            –
-        -   test
-
-# type-dom 自定义组件
-
-## basic 基础组件
-
-### button 按钮组件
-
-## data 数据组件
-
-## form 表单组件
-
-## feedback 反馈组件
-
-## navigation 导航组件
-
-## other 其它组件
+## 项目说明
+
+> 这是一个基于自建前端框架TypeDom创建的ui组件库。
+
+## 安装
+
+> npm install @type-dom/ui
+
+## 框架介绍
+
+    1、技术栈
+        –	type-dom框架
+        –	webpack
+        –	typescript
+        –	抽象类
+        –	实体类
+    2、项目结构
+        –	src
+            –	lib
+                -   basic
+                -   data
+                -   feedback
+                -   form
+                -   navigation
+                -   other
+                -   styles
+            –
+        -   test
+
+# type-dom 自定义组件
+
+## basic 基础组件
+
+### button 按钮组件
+
+## data 数据组件
+
+## form 表单组件
+
+## feedback 反馈组件
+
+## navigation 导航组件
+
+## other 其它组件

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@type-dom/ui",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "dependencies": {
     "@type-dom/svgs": "*",
     "rxjs": "^7.5.7",

package/src/components/basic/td-button/td-button.abstract.js

@@ -10,14 +10,14 @@ const td_icon_class_1 = require("../td-icon/td-icon.class");
 const td_button_style_1 = require("./td-button.style");
 // import '../../styles/style.css';
 class TdButtonAbstract extends ui_abstract_1.UI {
-    constructor(params) {
-        super(params, (params === null || params === void 0 ? void 0 : params.tag) || 'button');
+    constructor(params = {}) {
+        super(params, params.tag || 'button');
         this.ctrl.addAttrObj({
             type: 'button' // 默认
         });
         this.ctrl.addStyleObj(td_button_style_1.$tdButtonBase);
         this.childNodes = [];
-        this.props = this.setParams(params); // 这里的config赋值是要替换掉上面的config的预置值的。
+        this.props = this.setProps(params); // 这里的config赋值是要替换掉上面的config的预置值的。
     }
     setup() {
         var _a, _b, _c;

package/src/components/basic/td-button/td-button.class.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdButton = void 0;
 const td_button_abstract_1 = require("./td-button.abstract");
 class TdButton extends td_button_abstract_1.TdButtonAbstract {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdButton';
     }

package/src/components/basic/td-button-group/td-button-group.class.js

@@ -15,7 +15,7 @@ class TdButtonGroup 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);
     }
     created() {
         this.children.forEach((btn, index) => {

package/src/components/basic/td-container/td-aside/td-aside.class.js

@@ -4,7 +4,7 @@ exports.TdAside = void 0;
 const utils_1 = require("@type-dom/utils");
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdAside extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdAside';
         this.ctrl.addStyleObj({
@@ -14,7 +14,7 @@ class TdAside extends ui_abstract_1.UI {
             width: (params === null || params === void 0 ? void 0 : params.width) ? (0, utils_1.addUnit)(params.width) : '300px'
         });
         this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdAside = TdAside;

package/src/components/basic/td-container/td-container.class.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdContainer = void 0;
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 class TdContainer extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'section');
         this.className = 'TdContainer';
         this.ctrl.addAttrName('td-container');
@@ -23,7 +23,7 @@ class TdContainer extends ui_abstract_1.UI {
             });
         }
         this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdContainer = TdContainer;

package/src/components/basic/td-container/td-footer/td-footer.class.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdFooter = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdFooter extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'footer');
         this.className = 'TdFooter';
         this.ctrl.addStyleObj({
@@ -14,9 +14,9 @@ class TdFooter extends ui_abstract_1.UI {
             backgroundColor: (params === null || params === void 0 ? void 0 : params.backgroundColor) || 'fff' // '#a0cfff'
         });
         if (params === null || params === void 0 ? void 0 : params.slot) {
-            this.slotChild(params === null || params === void 0 ? void 0 : params.slot);
+            this.slotChild(params.slot);
         }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdFooter = TdFooter;

package/src/components/basic/td-container/td-header/td-header.class.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdHeader = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdHeader extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'header');
         this.className = 'TdHeader';
         this.ctrl.addAttrName('td-header');
@@ -12,14 +12,14 @@ class TdHeader extends ui_abstract_1.UI {
             alignItems: 'center',
             padding: '0 20px',
             boxSizing: 'border-box',
-            flexShrink: 0
+            flexShrink: 0,
+            height: 60,
+            backgroundColor: '#fff'
         });
         if (params === null || params === void 0 ? void 0 : params.slot) {
-            this.slotChild(params === null || params === void 0 ? void 0 : params.slot);
+            this.slotChild(params.slot);
         }
-        this.props = this.setParams(params);
-        this.ctrl.addHeight((params === null || params === void 0 ? void 0 : params.height) || '60px');
-        this.ctrl.addBackgroundColor((params === null || params === void 0 ? void 0 : params.backgroundColor) || 'fff');
+        this.props = this.setProps(params);
     }
 }
 exports.TdHeader = TdHeader;

package/src/components/basic/td-container/td-main/td-main.class.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdMain = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdMain extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, (params === null || params === void 0 ? void 0 : params.tag) || 'main');
         this.className = 'TdMain';
         this.ctrl.addStyleObj({
@@ -16,7 +16,7 @@ class TdMain extends ui_abstract_1.UI {
         });
         this.addChild(this.getSlotNode());
         console.warn('TdMain slotNodes.default is ', this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdMain = TdMain;

package/src/components/basic/td-icon/td-icon.class.js

@@ -14,7 +14,7 @@ class TdIcon extends ui_abstract_1.UI {
      * TdIcon 类的构造函数。
      * @param config 图标配置对象，可选参数。
      */
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'i');
         this.className = 'TdIcon';
         this.ctrl.addStyleObj(td_icon_style_1.$tdIcon);
@@ -24,24 +24,24 @@ class TdIcon extends ui_abstract_1.UI {
         // 首次创建时，添加style标签；避免重复创建
         if (!TdIcon.initCalled) {
             TdIcon.initCalled = true;
-            const cssText = `
-/* 选择所有带有 data-v-366071 属性的元素 */
-/* 在这里添加您的样式规则 */
-@keyframes rotating-${framework_1.vHash} {
-  0% {
-    transform: rotateZ(0deg);
-  }
-  100% {
-    transform: rotateZ(360deg);
-  }
-}
+            const cssText = `
+/* 选择所有带有 data-v-366071 属性的元素 */
+/* 在这里添加您的样式规则 */
+@keyframes rotating-${framework_1.vHash} {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
       `;
             (0, framework_1.createStyle)(cssText);
             // createClass('td-icon', $tdIcon);
         }
         this.ctrl.addAttrClass('td-icon');
         this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     /**
      * 根据配置更新图标的状态和样式。

package/src/components/basic/td-layout/td-col/td-col.class.js

@@ -5,11 +5,11 @@ const rxjs_1 = require("rxjs");
 const utils_1 = require("@type-dom/utils");
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdCol extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdCol';
         this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     get screenWidth() {
         return window.innerWidth || document.documentElement.clientWidth;
@@ -119,13 +119,13 @@ class TdCol extends ui_abstract_1.UI {
         }
     }
     initEvents() {
-        this.subscriptions.push((0, rxjs_1.fromEvent)(window, 'resize')
+        (0, rxjs_1.fromEvent)(window, 'resize')
             .pipe((0, rxjs_1.debounceTime)(250) // 防抖延时
         // distinctUntilChanged() // 可选，仅在窗口尺寸发生实际变化时才触发
         )
             .subscribe((event) => {
             this.resize();
-        }));
+        });
     }
 }
 exports.TdCol = TdCol;

package/src/components/basic/td-layout/td-row/td-row.class.js

@@ -7,7 +7,7 @@ class TdRow extends ui_abstract_1.UI {
     // justify: string = 'start';
     // align: string = 'top';
     // tag: string = 'div';
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdRow';
         this.ctrl.addStyleObj({
@@ -18,7 +18,7 @@ class TdRow extends ui_abstract_1.UI {
         });
         this.childNodes = [];
         this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     setup() {
         const props = this.props;

package/src/components/basic/td-link/td-link.class.js

@@ -10,7 +10,7 @@ class TdLink extends ui_abstract_1.UI {
         this.className = 'TdLink';
         (0, td_link_style_1.useType)(params);
         this.ctrl.addStyleObj(td_link_style_1.$linkStyle);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     // override beforeCreate() {
     //   this.ctrl.addStyleObj($linkStyle);

package/src/components/basic/td-scrollbar/bar/bar.class.js

@@ -4,7 +4,7 @@ exports.TdScrollbarBar = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 const thumb_class_1 = require("../thumb/thumb.class");
 class TdScrollbarBar extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdScrollbarBar';
         this.ctrl.addAttrName('td-scrollbar-bar');
@@ -26,7 +26,7 @@ class TdScrollbarBar extends ui_abstract_1.UI {
                 ratio: 1
             })
         ];
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdScrollbarBar = TdScrollbarBar;

package/src/components/basic/td-scrollbar/bar/bar.interface.d.ts

@@ -4,5 +4,5 @@ export interface ITdScrollbarBar extends IUI {
 }
 export interface ITdScrollbarBarConfig extends IUIConfig {
     always?: boolean;
-    minSize: number;
+    minSize?: number;
 }

package/src/components/basic/td-scrollbar/td-scrollbar.class.js

@@ -5,7 +5,7 @@ const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const bar_class_1 = require("./bar/bar.class");
 class TdScrollbar extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, params === null || params === void 0 ? void 0 : params.tag);
         this.className = 'TdScrollbar';
         this.ctrl.addAttrName('td-scrollbar');
@@ -43,7 +43,7 @@ class TdScrollbar extends ui_abstract_1.UI {
         if (params === null || params === void 0 ? void 0 : params.contents) {
             this.view.addChildren(...params.contents);
         }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdScrollbar = TdScrollbar;

package/src/components/basic/td-scrollbar/thumb/thumb.class.js

@@ -5,7 +5,7 @@ const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 const var_1 = require("../../../../styles/var");
 class TdScrollbarThumb extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdScrollbarThumb';
         this.ctrl.addAttrName('td-scrollbar-thumb');
@@ -39,7 +39,7 @@ class TdScrollbarThumb extends ui_abstract_1.UI {
             }
         });
         this.addChild(this.thumb);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdScrollbarThumb = TdScrollbarThumb;

package/src/components/basic/td-scrollbar/thumb/thumb.interface.d.ts

@@ -6,6 +6,6 @@ export interface ITdScrollbarThumbConfig extends IUIConfig {
     vertical?: boolean;
     size?: string;
     move?: number;
-    ratio: number;
+    ratio?: number;
     always?: boolean;
 }

package/src/components/basic/td-space/td-space.class.js

@@ -6,7 +6,7 @@ const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_space_const_1 = require("./td-space.const");
 class TdSpace extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdSpace';
         this.ctrl.addStyleObj({
@@ -14,7 +14,7 @@ class TdSpace extends ui_abstract_1.UI {
             verticalAlign: 'top'
         });
         this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     setup() {
         this.children.forEach((item) => {

package/src/components/basic/td-text/td-text.class.js

@@ -4,12 +4,12 @@ exports.TdText = void 0;
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_text_style_1 = require("./td-text.style");
 class TdText extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, (params === null || params === void 0 ? void 0 : params.tag) || 'span');
         this.className = 'TdText';
         this.ctrl.addStyleObj(td_text_style_1.$baseText);
         this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     setup() {
         const props = this.props;

package/src/components/data/td-avatar/td-avatar.class.js

@@ -6,7 +6,7 @@ const framework_1 = require("@type-dom/framework");
 const td_avatar_style_1 = require("./td-avatar.style");
 const utils_1 = require("@type-dom/utils");
 class TdAvatar extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'span');
         this.className = 'TdAvatar';
         this.ctrl.addAttrName('td-avatar');
@@ -29,7 +29,7 @@ class TdAvatar extends ui_abstract_1.UI {
             fontSize: td_avatar_style_1.$avatar.textSize
         });
         this.hasLoadError = false;
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     setup() {
         var _a, _b, _c;
@@ -100,7 +100,7 @@ class TdAvatar extends ui_abstract_1.UI {
                 });
             }
         }
-        // super.setParams(config);
+        // super.setProps(config);
     }
     // todo 监听 src 改变
     setSrc(src) {

package/src/components/data/td-badge/td-badge.class.d.ts

@@ -6,4 +6,5 @@ export declare class TdBadge extends UI implements ITdBadge {
     private sup;
     constructor(params?: ITdBadgeConfig);
     setup(): void;
+    changeValue(value: number | string): void;
 }

package/src/components/data/td-badge/td-badge.class.js

@@ -7,7 +7,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const var_1 = require("../../../styles/var");
 const td_badge_style_1 = require("./td-badge.style");
 class TdBadge extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         var _a, _b, _c, _d;
         super(params);
         console.log('TdBadge constructor . ');
@@ -19,7 +19,7 @@ class TdBadge extends ui_abstract_1.UI {
             display: 'inline-block',
             width: 'fit-content'
         });
-        this.addChild(this.getSlotNode());
+        // this.addChild(this.getSlotNode());
         this.sup = new framework_1.Sup({
             styleObj: {
                 // background-color: getCssVar('badge', 'bg-color'),
@@ -47,17 +47,17 @@ class TdBadge extends ui_abstract_1.UI {
         this.addChild(new framework_1.Transition({
             name: 'td-badge',
             parent: this,
-            slot: this.sup
+            childNodes: [this.sup]
         }));
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     setup() {
-        var _a;
         console.log('TdBadge setup');
         const props = this.props;
         let content = (props === null || props === void 0 ? void 0 : props.isDot) ? '' : props === null || props === void 0 ? void 0 : props.value;
         console.warn('TdBadge setup content is ', content);
-        this.sup.addChild(new framework_1.TextNode(content));
+        this.sup.getTextNode().setText(content || '');
+        // this.sup.addChild(new TextNode(content))
         if ((props === null || props === void 0 ? void 0 : props.max) &&
             (props === null || props === void 0 ? void 0 : props.value) &&
             (0, utils_1.isNumber)(props === null || props === void 0 ? void 0 : props.value) &&
@@ -68,7 +68,7 @@ class TdBadge extends ui_abstract_1.UI {
             else {
                 content = props.value === 0 && !props.showZero ? '' : props.value;
             }
-            (_a = this.sup.textNode) === null || _a === void 0 ? void 0 : _a.setText(content);
+            this.sup.getTextNode().setText(content);
         }
         if (props === null || props === void 0 ? void 0 : props.slot) {
             this.sup.ctrl.addStyleObj({
@@ -100,5 +100,8 @@ class TdBadge extends ui_abstract_1.UI {
             this.sup.ctrl.addStyleObj(props.dotStyle);
         }
     }
+    changeValue(value) {
+        this.props.value = value;
+    }
 }
 exports.TdBadge = TdBadge;

package/src/components/data/td-card/td-card.class.js

@@ -7,7 +7,7 @@ const transition_1 = require("../../../styles/transition");
 const var_1 = require("../../../styles/var");
 const td_card_style_1 = require("./td-card.style");
 class TdCard extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdCard';
         this.ctrl.addAttrName('td-card');
@@ -43,7 +43,7 @@ class TdCard extends ui_abstract_1.UI {
         }
         this.addChild(this.body);
         this.addFooter(params);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     addShadow(params) {
         const shadow = (params === null || params === void 0 ? void 0 : params.shadow) || 'always';

package/src/components/data/td-check-tag/td-check-tag.class.js

@@ -6,7 +6,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const event_1 = require("../../../constants/event");
 const td_check_tag_style_1 = require("./td-check-tag.style");
 class TdCheckTag extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'span');
         this.className = 'TdCheckTag';
         this.ctrl.addAttrName('td-check-tag');
@@ -14,7 +14,7 @@ class TdCheckTag extends ui_abstract_1.UI {
         (0, td_check_tag_style_1.useType)();
         this.ctrl.addStyleObj(td_check_tag_style_1.$checkTag);
         this.setChecked(params === null || params === void 0 ? void 0 : params.checked);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     initEvents() {
         this.addEvents({

package/src/components/data/td-collapse/td-collapse.class.js

@@ -5,7 +5,7 @@ const utils_1 = require("@type-dom/utils");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_collapse_style_1 = require("./td-collapse.style");
 class TdCollapse extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         var _a;
         super(params);
         this.className = 'TdCollapse';
@@ -19,10 +19,7 @@ class TdCollapse extends ui_abstract_1.UI {
         this.activeNames = (0, utils_1.isArray)(params === null || params === void 0 ? void 0 : params.modelValue)
             ? params.modelValue
             : [(_a = params === null || params === void 0 ? void 0 : params.modelValue) !== null && _a !== void 0 ? _a : ''];
-        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.props = this.setProps(params);
     }
     mounted() {
         this.setActiveNames(this.activeNames);

package/src/components/data/td-collapse/td-collapse.interface.d.ts

@@ -13,6 +13,7 @@ export interface ITdCollapseConfig extends IUIConfig {
      *   default: () => mutable([] as const),
      */
     modelValue?: string | number | ICollapseActiveName[];
+    slot?: undefined;
 }
 export type ICollapseActiveName = string | number;
 export type ICollapseModelValue = Arrayable<ICollapseActiveName>;

package/src/components/data/td-collapse-item/td-collapse-item.class.js

@@ -10,7 +10,7 @@ const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const td_collapse_style_1 = require("../td-collapse/td-collapse.style");
 const td_collapse_transition_class_1 = require("../td-collapse-transition/td-collapse-transition.class");
 class TdCollapseItem extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         var _a;
         super(params, 'fragment');
         this.className = 'TdCollapseItem';
@@ -122,10 +122,10 @@ class TdCollapseItem extends ui_abstract_1.UI {
         this.wrapper.addChild(this.content);
         this.transition = new td_collapse_transition_class_1.TdCollapseTransition({
             parent: this,
-            slot: this.wrapper
+            childNodes: [this.wrapper]
         });
         this.addChild(this.transition);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     setActive(active) {
         if (active) {

package/src/components/data/td-collapse-transition/td-collapse-transition.class.js

@@ -4,7 +4,7 @@ exports.TdCollapseTransition = void 0;
 const framework_1 = require("@type-dom/framework");
 const td_collapse_transition_util_1 = require("./td-collapse-transition.util");
 class TdCollapseTransition extends framework_1.TypeTransition {
-    constructor(params) {
+    constructor(params = {}) {
         super(Object.assign(td_collapse_transition_util_1.collapseTransitionConfig, params));
         this.className = 'TdCollapseTransition';
     }