@type-dom/ui 0.0.6 → 0.0.8

package/src/components/data/td-count-down/td-count-down.class.js

@@ -13,10 +13,8 @@ class TdCountDown extends td_statistic_abstract_1.TdStatisticAbstract {
         this.className = 'TdCountDown';
         this.rawValue = (0, utils_2.getTime)((params === null || params === void 0 ? void 0 : params.value) || 0) - Date.now();
         this.setNumber(this.rawValue);
-        if (params === null || params === void 0 ? void 0 : params.slot) {
-            this.slotChild(params.slot);
-        }
-        this.props = this.setParams(params);
+        this.addChild(this.getSlotNode());
+        this.props = this.setProps(params);
     }
     mounted() {
         this.stopTimer();

package/src/components/data/td-descriptions/td-descriptions-row.d.ts

@@ -5,7 +5,7 @@ export interface ITdDescriptionsRow extends IUI {
     className: 'TdDescriptionsRow';
 }
 export interface ITdDescriptionsRowConfig extends IUIConfig {
-    row: TdDescriptionsItem[];
+    row?: TdDescriptionsItem[];
 }
 /**
  * @name TdDescriptionsRow

package/src/components/data/td-descriptions/td-descriptions-row.js

@@ -9,11 +9,11 @@ const td_descritions_cell_1 = require("./td-descritions-cell");
  * @author darcrand
  */
 class TdDescriptionsRow extends framework_1.TypeFragment {
-    constructor(params) {
+    constructor(params = {}) {
         super();
         this.className = 'TdDescriptionsRow';
         this.childNodes = [];
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     created() {
         var _a;
@@ -74,7 +74,7 @@ class TdDescriptionsRow extends framework_1.TypeFragment {
             });
             this.addChild(tr);
         }
-        // this.setParams(this.config);
+        // this.setProps(this.config);
     }
 }
 exports.TdDescriptionsRow = TdDescriptionsRow;

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

@@ -10,7 +10,7 @@ class TdDescriptions extends ui_abstract_1.UI {
     constructor(params) {
         super(params);
         this.className = 'TdDescriptions';
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     created() {
         var _a, _b, _c, _d;
@@ -85,7 +85,7 @@ class TdDescriptions extends ui_abstract_1.UI {
         });
         this.body.addChild(this.bodyTable);
         this.addChild(this.body);
-        this.setParams(props); // todo ????
+        this.setProps(props); // todo ????
     }
     filledNode(node, span, count, isLast = false) {
         if (!node.props) {

package/src/components/data/td-descriptions/td-descritions-cell.js

@@ -5,10 +5,10 @@ const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_descriptions_style_1 = require("./td-descriptions.style");
 class TdDescriptionsCell extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, (params === null || params === void 0 ? void 0 : params.tag) || 'td');
         this.className = 'TdDescriptionsCell';
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     created() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdDescriptionsItem = void 0;
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 class TdDescriptionsItem extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdDescriptionsItem';
         // if (config?.slots?.label) {
@@ -11,10 +11,8 @@ class TdDescriptionsItem extends ui_abstract_1.UI {
         // } else if (config?.label) {
         //   this.label = new TextNode(config.label);
         // }
-        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);
     }
 }
 exports.TdDescriptionsItem = TdDescriptionsItem;

package/src/components/data/td-empty/img-empty.class.js

@@ -4,7 +4,7 @@ exports.ImgEmpty = void 0;
 const framework_1 = require("@type-dom/framework");
 const td_empty_style_1 = require("./td-empty.style");
 class ImgEmpty extends framework_1.TypeSvgSvg {
-    constructor(params) {
+    constructor(params = {}) {
         super();
         this.className = 'ImgEmpty';
         this.ctrl.addAttrObj({
@@ -198,7 +198,7 @@ class ImgEmpty extends framework_1.TypeSvgSvg {
                 })
             ]
         }));
-        // this.setParams(params);
+        // this.setProps(params);
     }
 }
 exports.ImgEmpty = ImgEmpty;

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

@@ -7,7 +7,7 @@ const framework_1 = require("@type-dom/framework");
 const td_empty_style_1 = require("./td-empty.style");
 const img_empty_class_1 = require("./img-empty.class");
 class TdEmpty extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         var _a, _b;
         super(params);
         this.className = 'TdEmpty';
@@ -65,7 +65,7 @@ class TdEmpty extends ui_abstract_1.UI {
             this.addChild(this.bottom);
             this.bottom.slotChild(params.slot);
         }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     get emptyDescription() {
         return this.props.description || 'No Data'; // || t('el.table.emptyText')

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

@@ -5,7 +5,7 @@ const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_image_style_1 = require("./td-image.style");
 class TdImage extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdImage';
         this.ctrl.addAttrName('td-image');
@@ -32,7 +32,7 @@ class TdImage extends ui_abstract_1.UI {
         });
         this.hasLoadError = false;
         // todo preview
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     setup() {
         var _a, _b;
@@ -76,7 +76,7 @@ class TdImage extends ui_abstract_1.UI {
         (_b = this.img) === null || _b === void 0 ? void 0 : _b.ctrl.addStyleObj({
             objectFit: fit
         });
-        super.setParams(props);
+        super.setProps(props);
     }
     // todo 监听 src 改变
     setSrc(src) {

package/src/components/data/td-image-viewer/td-image-viewer.class.js

@@ -8,7 +8,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const td_image_viewer_style_1 = require("./td-image-viewer.style");
 class TdImageViewer extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'fragment');
         this.loading = false;
         this.className = 'TdImageViewer';
@@ -43,6 +43,7 @@ class TdImageViewer extends ui_abstract_1.UI {
         this.teleport.addChild(this.transition);
         // this.mount(document.body);
         // this.ctrl.addAttrName('wrapper');
+        // todo transition 如何设置样式 ？？？ developing ......
         this.transition.ctrl.addStyleObj({
             position: 'fixed',
             top: 0,
@@ -179,7 +180,7 @@ class TdImageViewer extends ui_abstract_1.UI {
         this.transition.addChild(new framework_1.Div({
             childNodes: imgList
         }));
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     get imgStyle() {
         const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;

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

@@ -8,7 +8,7 @@ const td_result_constant_1 = require("./td-result.constant");
 class TdResult extends ui_abstract_1.UI {
     // private iconSlot?: SlotNode;
     // private titleSlot?: SlotNode;
-    constructor(params) {
+    constructor(params = {}) {
         var _a, _b, _c, _d, _e, _f;
         super(params);
         this.className = 'TdResult';
@@ -28,9 +28,7 @@ class TdResult extends ui_abstract_1.UI {
             name: 'icon',
             childNodes: [this.getSlotNode('icon')]
         }));
-        if ((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.icon) {
-        }
-        else {
+        if (!((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.icon)) {
             const resultIcon = this.resultIcon(params);
             this.getSlotNode('icon').addSlot(resultIcon);
         }
@@ -41,9 +39,7 @@ class TdResult extends ui_abstract_1.UI {
                 styleObj: td_result_style_1.$titleStyle,
                 childNodes: [this.getSlotNode('title')]
             }));
-            if ((_c = params.slots) === null || _c === void 0 ? void 0 : _c.title) {
-            }
-            else {
+            if (!((_c = params.slots) === null || _c === void 0 ? void 0 : _c.title)) {
                 this.getSlotNode('title').addSlot(new framework_1.P({
                     name: 'title',
                     text: params.title,
@@ -74,9 +70,9 @@ class TdResult extends ui_abstract_1.UI {
                 styleObj: td_result_style_1.$extraStyle,
                 childNodes: [this.getSlotNode('extra')]
             }));
-            this.getSlotNode('extra').addSlot(params.slots.extra);
+            // this.getSlotNode('extra').addSlot(params.slots.extra);
         }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     resultIcon(params) {
         const icon = params === null || params === void 0 ? void 0 : params.icon;

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

@@ -6,7 +6,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const event_1 = require("../../../constants/event");
 const td_segmented_style_1 = require("./td-segmented.style");
 class TdSegmented extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdSegmented';
         (0, td_segmented_style_1.useStyle)(params);
@@ -82,7 +82,7 @@ class TdSegmented extends ui_abstract_1.UI {
             labels.push(label);
         });
         this.group.addChildren(...labels);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     mounted() {
         console.log('TdSegmented created');
@@ -149,24 +149,23 @@ class TdSegmented extends ui_abstract_1.UI {
         this.selectedDiv.ctrl.setStyleObj(this.selectedStyle);
     }
     handleChange(item, element) {
-        var _a, _b;
-        // const value = getValue(item)
-        // emit(UPDATE_MODEL_EVENT, value)
-        // emit(CHANGE_EVENT, value)
+        const value = this.getValue(item);
+        this.emit(event_1.UPDATE_MODEL_EVENT, value);
+        this.emit(event_1.CHANGE_EVENT, value);
         console.log('handleChange ', item);
         this.modelValue = this.getValue(item);
         // element.attrObj?.checked = true;
         element.ctrl.addAttribute('checked', true);
         this.updateSelect();
-        const value = this.getValue(item);
-        const update = (_a = this.props.emits) === null || _a === void 0 ? void 0 : _a[event_1.UPDATE_MODEL_EVENT];
-        if (update) {
-            update(value);
-        }
-        const change = (_b = this.props.emits) === null || _b === void 0 ? void 0 : _b[event_1.CHANGE_EVENT];
-        if (change) {
-            change(value);
-        }
+        // const value = this.getValue(item);
+        // const update = this.props.emits?.[UPDATE_MODEL_EVENT];
+        // if (update) {
+        //   update(value);
+        // }
+        // const change = this.props.emits?.[CHANGE_EVENT];
+        // if (change) {
+        //   change(value);
+        // }
     }
 }
 exports.TdSegmented = TdSegmented;

package/src/components/data/td-statistic/td-statistic.abstract.d.ts

@@ -10,6 +10,6 @@ export declare abstract class TdStatisticAbstract extends UI implements ITdStati
     number: Span;
     suffix?: TypeElement;
     props: ITdStatisticConfig;
-    protected constructor(params: ITdStatisticConfig);
+    protected constructor(params?: ITdStatisticConfig);
     formatValue(value: number | string | Dayjs): string;
 }

package/src/components/data/td-statistic/td-statistic.abstract.js

@@ -6,7 +6,7 @@ const utils_1 = require("@type-dom/utils");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_statistic_style_1 = require("./td-statistic.style");
 class TdStatisticAbstract extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         var _a, _b, _c, _d;
         super(params);
         if (params === null || params === void 0 ? void 0 : params.title) {
@@ -91,7 +91,7 @@ class TdStatisticAbstract extends ui_abstract_1.UI {
             this.suffix = params.slots.suffix;
             this.content.addChild(params.slots.suffix);
         }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     formatValue(value) {
         const { formatter, precision, decimalSeparator, groupSeparator } = this.props;

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

@@ -8,7 +8,7 @@ const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const var_1 = require("../../../styles/var");
 const td_tag_style_1 = require("./td-tag.style");
 class TdTag extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'span');
         this.className = 'TdTag';
         this.ctrl.addAttrName('td-tag');
@@ -82,10 +82,10 @@ class TdTag extends ui_abstract_1.UI {
         this.ctrl.addStyleObj(td_tag_style_1.$tagSizes[size]);
         // if (!params?.disableTransitions) { // TODO: 添加过渡
         //   params?.parent?.addChild(new Transition({
-        //     slot: this,
+        //     childNodes: [this],
         //   }))
         // }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
         if (params === null || params === void 0 ? void 0 : params.closable) {
             this.ctrl.addStyleObj({
                 paddingRight: parseFloat(td_tag_style_1.$tagIconSpanGap.default) - parseFloat(var_1.$borderWidth) + 'px'

package/src/components/feedback/dialog/dialog.class.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dialog = void 0;
 const overlay_abstract_1 = require("../overlay/overlay.abstract");
 class Dialog extends overlay_abstract_1.Overlay {
-    constructor(params) {
+    constructor(params = {}) {
         super();
         this.className = 'Dialog';
         this.ctrl.addAttrObj({
             name: 'dialog'
         });
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
         if (params === null || params === void 0 ? void 0 : params.to) {
             this.mount(params.to);
         }

package/src/components/feedback/message-box/message-box.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MessageBox = void 0;
 const overlay_abstract_1 = require("../overlay/overlay.abstract");
 class MessageBox extends overlay_abstract_1.Overlay {
-    constructor(params) {
+    constructor(params = {}) {
         super();
         this.className = 'MessageBox';
         this.ctrl.addAttrObj({
             name: 'message-box'
         });
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
         if (params === null || params === void 0 ? void 0 : params.el) {
             this.mount(params.el);
         }

package/src/components/feedback/overlay/container/container.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OverlayContainer = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 const header_1 = require("./header/header");
 const body_1 = require("./body/body");
@@ -29,9 +28,11 @@ class OverlayContainer extends framework_1.TypeDiv {
         this.childNodes = [this.header, this.body, this.footer];
     }
     initEvents() {
-        this.subscriptions.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe((e) => {
-            e.stopPropagation();
-        }));
+        this.addEvents({
+            click: (e) => {
+                e === null || e === void 0 ? void 0 : e.stopPropagation();
+            }
+        });
     }
 }
 exports.OverlayContainer = OverlayContainer;

package/src/components/feedback/overlay/container/footer/cancel-button/cancel-button.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CancelButton = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 class CancelButton extends framework_1.TypeButton {
     constructor() {
@@ -22,10 +21,12 @@ class CancelButton extends framework_1.TypeButton {
         if (!((_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent)) {
             console.error('this.parent?.parent?.parent is undefined . ');
         }
-        this.subscriptions.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe(() => {
-            var _a, _b, _c;
-            (_c = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent) === null || _c === void 0 ? void 0 : _c.ctrl.hide();
-        }));
+        this.addEvents({
+            click: () => {
+                var _a, _b, _c;
+                (_c = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent) === null || _c === void 0 ? void 0 : _c.ctrl.hide();
+            }
+        });
     }
 }
 exports.CancelButton = CancelButton;

package/src/components/feedback/overlay/container/footer/confirm-button/confirm-button.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfirmButton = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 class ConfirmButton extends framework_1.TypeButton {
     constructor() {
@@ -22,10 +21,12 @@ class ConfirmButton extends framework_1.TypeButton {
         if (!((_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent)) {
             console.error('this.parent?.parent?.parent is undefined . ');
         }
-        this.subscriptions.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe(() => {
-            var _a, _b, _c;
-            (_c = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent) === null || _c === void 0 ? void 0 : _c.ctrl.hide();
-        }));
+        this.addEvents({
+            click: () => {
+                var _a, _b, _c;
+                (_c = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent) === null || _c === void 0 ? void 0 : _c.ctrl.hide();
+            }
+        });
     }
 }
 exports.ConfirmButton = ConfirmButton;

package/src/components/feedback/overlay/container/header/close-button/close-button.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CloseButton = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
 class CloseButton extends framework_1.TypeButton {
@@ -24,10 +23,12 @@ class CloseButton extends framework_1.TypeButton {
         this.childNodes = [this.svg];
     }
     initEvents() {
-        this.subscriptions.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe(() => {
-            var _a, _b, _c;
-            (_c = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent) === null || _c === void 0 ? void 0 : _c.ctrl.hide();
-        }));
+        this.addEvents({
+            click: () => {
+                var _a, _b, _c;
+                (_c = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent) === null || _c === void 0 ? void 0 : _c.ctrl.hide();
+            }
+        });
     }
 }
 exports.CloseButton = CloseButton;

package/src/components/feedback/overlay/overlay.abstract.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Overlay = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 const container_1 = require("./container/container");
 class Overlay extends framework_1.TypeDiv {
@@ -51,9 +50,11 @@ class Overlay extends framework_1.TypeDiv {
         // this.container.body.clearChildDom();
     }
     initEvents() {
-        this.subscriptions.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe(() => {
-            this.ctrl.hide();
-        }));
+        this.addEvents({
+            click: () => {
+                this.ctrl.hide();
+            }
+        });
     }
 }
 exports.Overlay = Overlay;

package/src/components/feedback/td-alert/td-alert.class.js

@@ -7,7 +7,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const td_alert_style_1 = require("./td-alert.style");
 class TdAlert extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'fragment');
         this.className = 'TdAlert';
         this.transition = new framework_1.Transition({
@@ -39,7 +39,7 @@ class TdAlert extends ui_abstract_1.UI {
         this.addTitle(params);
         this.addDescription(params);
         this.addCloseElement(params);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     addTitle(params) {
         var _a, _b;

package/src/components/feedback/td-dialog/td-dialog.class.d.ts

@@ -9,4 +9,7 @@ export declare class TdDialog extends UI<undefined> implements ITdDialog {
     constructor(params?: ITdDialogConfig);
     show(): void;
     handleClose(): void;
+    afterEnter(): void;
+    afterLeave(): void;
+    beforeLeave(): void;
 }

package/src/components/feedback/td-dialog/td-dialog.class.js

@@ -5,8 +5,9 @@ const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_dialog_content_class_1 = require("../td-dialog-content/td-dialog-content.class");
 const td_overlay_class_1 = require("../td-overlay/td-overlay.class");
+const event_1 = require("../../../constants/event");
 class TdDialog extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'fragment');
         console.log('TdDialog . ');
         this.className = 'TdDialog';
@@ -33,20 +34,23 @@ class TdDialog extends ui_abstract_1.UI {
                     emits: {
                         afterEnter: () => {
                             console.log('afterEnter . ');
+                            this.afterEnter();
                         },
                         afterLeave: () => {
                             console.log('afterLeave . ');
+                            this.afterLeave();
                         },
                         beforeLeave: () => {
                             console.log('beforeLeave . ');
+                            this.beforeLeave();
                         }
                     },
-                    slot: this.overlay,
+                    childNodes: [this.overlay],
                 }),
             ]
         });
         this.addChild(this.teleport);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     show() {
         console.log('TdDialog . show . ');
@@ -66,5 +70,18 @@ class TdDialog extends ui_abstract_1.UI {
         //   close()
         // }
     }
+    afterEnter() {
+        this.emit('opened');
+    }
+    afterLeave() {
+        this.emit('closed');
+        this.emit(event_1.UPDATE_MODEL_EVENT, false);
+        if (this.props.destroyOnClose) {
+            this.rendered = false;
+        }
+    }
+    beforeLeave() {
+        this.emit('close');
+    }
 }
 exports.TdDialog = TdDialog;

package/src/components/feedback/td-dialog/td-dialog.interface.d.ts

@@ -1,5 +1,6 @@
 import { IUI } from '../../../ui/ui.interface';
 import { ITdDialogContentConfig } from '../td-dialog-content/td-dialog-content.interface';
+import { UPDATE_MODEL_EVENT } from '../../../constants/event';
 export interface ITdDialog extends IUI {
     className: 'TdDialog';
 }
@@ -76,4 +77,22 @@ export interface ITdDialogConfig extends ITdDialogContentConfig {
      *     default: '2',
      */
     headerAriaLevel?: string;
+    emits?: {
+        open?: () => void;
+        opened?: () => void;
+        close?: () => void;
+        closed?: () => void;
+        [UPDATE_MODEL_EVENT]?: (value: boolean) => void;
+        openAutoFocus?: () => void;
+        closeAutoFocus?: () => void;
+    };
 }
+export declare const dialogEmits: {
+    open: () => boolean;
+    opened: () => boolean;
+    close: () => boolean;
+    closed: () => boolean;
+    "update:modelValue": (value: boolean) => boolean;
+    openAutoFocus: () => boolean;
+    closeAutoFocus: () => boolean;
+};

package/src/components/feedback/td-dialog/td-dialog.interface.js

@@ -1,2 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.dialogEmits = void 0;
+const event_1 = require("../../../constants/event");
+const utils_1 = require("@type-dom/utils");
+exports.dialogEmits = {
+    open: () => true,
+    opened: () => true,
+    close: () => true,
+    closed: () => true,
+    [event_1.UPDATE_MODEL_EVENT]: (value) => (0, utils_1.isBoolean)(value),
+    openAutoFocus: () => true,
+    closeAutoFocus: () => true,
+};

package/src/components/feedback/td-dialog-content/td-dialog-content.class.js

@@ -7,7 +7,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const td_dialog_style_1 = require("../td-dialog/td-dialog.style");
 class TdDialogContent extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         var _a, _b, _c;
         super(params);
         this.className = 'TdDialogContent';
@@ -73,7 +73,7 @@ class TdDialogContent extends ui_abstract_1.UI {
             this.footer.addChild(this.getSlotNode('footer'));
             this.addChild(this.footer);
         }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdDialogContent = TdDialogContent;