@type-dom/ui 0.0.5 → 0.0.7

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.wheelHandler = void 0;
+exports.wheelHandler = wheelHandler;
 function wheelHandler(e) {
     if (!e.ctrlKey)
         return false;
@@ -16,4 +16,3 @@ function wheelHandler(e) {
         return false;
     }
 }
-exports.wheelHandler = wheelHandler;

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';

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,7 +70,7 @@ 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);
     }

package/src/components/data/td-result/td-result.style.d.ts

@@ -13,4 +13,4 @@ export declare const $titlePStyle: IStyle;
 export declare const $subTitleStyle: IStyle;
 export declare const $subTitlePStyle: IStyle;
 export declare const $extraStyle: IStyle;
-export declare const $icon: Record<IType, IStyle<0 | (string & {}), string & {}>>;
+export declare const $icon: Record<IType, IStyle>;

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);

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

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSize = exports.useStyle = exports.$segmentedItemLabelStyle = exports.$segmentedItemInputStyle = exports.$segmentedItemSelectedStyle = exports.$segmentedItemStyle = exports.$segmentedGroupStyle = exports.$segmentedStyle = exports.$segmented = exports.$segmentedItemPadding = exports.$segmentedFontSize = exports.$segmentedBorderRadius = void 0;
+exports.$segmentedItemLabelStyle = exports.$segmentedItemInputStyle = exports.$segmentedItemSelectedStyle = exports.$segmentedItemStyle = exports.$segmentedGroupStyle = exports.$segmentedStyle = exports.$segmented = exports.$segmentedItemPadding = exports.$segmentedFontSize = exports.$segmentedBorderRadius = void 0;
+exports.useStyle = useStyle;
+exports.useSize = useSize;
 const var_1 = require("../../../styles/var");
 const td_button_style_1 = require("../../basic/td-button/td-button.style");
 const td_input_style_1 = require("../../form/td-input/td-input.style");
@@ -129,7 +131,6 @@ function useStyle(config) {
     //
     // }
 }
-exports.useStyle = useStyle;
 function useSize(config) {
     const size = (config === null || config === void 0 ? void 0 : config.size) || 'default';
     exports.$segmentedStyle.minHeight = td_input_style_1.$inputHeight[size];
@@ -139,4 +140,3 @@ function useSize(config) {
     exports.$segmentedItemStyle.borderRadius = parseInt(exports.$segmentedBorderRadius[size]) - 2 + 'px';
     exports.$segmentedItemStyle.padding = exports.$segmentedItemPadding[size];
 }
-exports.useSize = useSize;

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) {

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');

package/src/components/data/td-tag/td-tag.style.d.ts

@@ -41,5 +41,5 @@ export declare const $tagTypes: Record<IType, {
     hit: string;
 }>;
 export declare function genTheme($backgroundColorWeight: string | false, $borderColorWeight: string, $hoverColorWeight: string): void;
-export declare const $tagSizes: Record<ISize, IStyle<0 | (string & {}), string & {}>>;
+export declare const $tagSizes: Record<ISize, IStyle>;
 export declare function useType(): void;

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

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useType = exports.$tagSizes = exports.genTheme = exports.$tagTypes = exports.$iconSize = exports.$tagIconSpanGap = exports.$tagBorderWidth = exports.$tagIconSize = exports.$tagPadding = exports.$tagHeight = exports.$tag = void 0;
+exports.$tagSizes = exports.$tagTypes = exports.$iconSize = exports.$tagIconSpanGap = exports.$tagBorderWidth = exports.$tagIconSize = exports.$tagPadding = exports.$tagHeight = exports.$tag = void 0;
+exports.genTheme = genTheme;
+exports.useType = useType;
 const var_1 = require("../../../styles/var");
 exports.$tag = {
     fontSize: '12px',
@@ -50,7 +52,6 @@ function genTheme($backgroundColorWeight, $borderColorWeight, $hoverColorWeight)
     const hoverColor = returnVarList($hoverColorWeight, 'primary');
     console.log('hoverColor is ', hoverColor);
 }
-exports.genTheme = genTheme;
 function returnVarList($var, $type = 'primary') {
     console.log('returnVarList . ');
     let $list = var_1.$fillColor.blank;
@@ -77,4 +78,3 @@ function useType() {
         }
     }
 }
-exports.useType = useType;

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

@@ -3,7 +3,7 @@ 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({

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

@@ -3,7 +3,7 @@ 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({

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({

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

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useType = exports.useStyle = exports.$alertCloseBtnStyle = exports.$alertDescriptionStyle = exports.$alertTitleStyle = exports.$alertIconStyle = exports.$alertContentStyle = exports.$alertStyle = exports.$alert = void 0;
+exports.$alertCloseBtnStyle = exports.$alertDescriptionStyle = exports.$alertTitleStyle = exports.$alertIconStyle = exports.$alertContentStyle = exports.$alertStyle = exports.$alert = void 0;
+exports.useStyle = useStyle;
+exports.useType = useType;
 const var_1 = require("../../../styles/var");
 exports.$alert = {
     padding: '8px 16px',
@@ -82,7 +84,6 @@ function useStyle(config) {
         exports.$alertTitleStyle.fontSize = exports.$alert.titleWithDescriptionFontSize;
     }
 }
-exports.useStyle = useStyle;
 function useType(config) {
     const effect = (config === null || config === void 0 ? void 0 : config.effect) || 'light';
     const $alertBgColor = var_1.$colors[(config === null || config === void 0 ? void 0 : config.type) || 'info']['light-9'];
@@ -99,4 +100,3 @@ function useType(config) {
     }
     // if (config.)
 }
-exports.useType = useType;

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,12 +34,15 @@ 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,
@@ -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';

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

@@ -5,7 +5,7 @@ const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_overlay_class_1 = require("../td-overlay/td-overlay.class");
 class TdDrawer extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'fragment');
         this.className = 'TdDrawer';
         this.transition = new framework_1.Transition({

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

@@ -4,9 +4,9 @@ export interface ITdDrawer extends IUI {
     className: 'TdDrawer';
 }
 export interface ITdDrawerConfig extends ITdDialogConfig {
-    direction: 'ltr' | 'rtl' | 'ttb' | 'btt';
-    size: string | number;
-    withHeader: boolean;
-    modalFade: boolean;
-    headerAriaLevel: string;
+    direction?: 'ltr' | 'rtl' | 'ttb' | 'btt';
+    size?: string | number;
+    withHeader?: boolean;
+    modalFade?: boolean;
+    headerAriaLevel?: string;
 }

package/src/components/feedback/td-focus-trap/td-focus-trap.class.js

@@ -5,7 +5,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const aria_1 = require("../../../aria");
 const utils_1 = require("./utils");
 class TdFocusTrap extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'fragment');
         this.className = 'TdFocusTrap';
         this.inheritAttrs = false;

package/src/components/feedback/td-focus-trap/td-focus-trap.interface.d.ts

@@ -8,12 +8,12 @@ export interface ITdFocusTrapConfig extends IUIConfig {
     trapped?: boolean;
     focusTrapEl?: HTMLElement;
     focusStartEl?: 'container' | 'first' | HTMLElement;
-    emits: {
+    emits?: {
         [ON_TRAP_FOCUS_EVT]?: () => void;
         [ON_RELEASE_FOCUS_EVT]?: () => void;
-        focusin: () => void;
-        focusout: () => void;
-        focusoutPrevented: () => void;
-        releaseRequested: () => void;
+        focusin?: () => void;
+        focusout?: () => void;
+        focusoutPrevented?: () => void;
+        releaseRequested?: () => void;
     };
 }

package/src/components/feedback/td-focus-trap/utils.d.ts

@@ -21,5 +21,5 @@ export declare const isFocusCausedByUserEvent: () => boolean;
 export declare const useFocusReason: () => {
     focusReason: typeof focusReason;
 };
-export declare const createFocusOutPreventedEvent: (detail: CustomEventInit['detail']) => CustomEvent<any>;
+export declare const createFocusOutPreventedEvent: (detail: CustomEventInit["detail"]) => CustomEvent<any>;
 export {};

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

@@ -5,7 +5,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
 class TdLoading extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'fragment');
         this.className = 'TdLoading';
         this.transition = new framework_1.Transition({

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

@@ -59,7 +59,7 @@ class TdMessage extends ui_abstract_1.UI {
         });
         // this.message.ctrl.hide();
         // this.transition.setSlot(this.message);
-        this.transition.slotChild(this.message);
+        this.transition.addSlot(this.message);
         const type = (params === null || params === void 0 ? void 0 : params.type) || 'info';
         const iconComponent = (params === null || params === void 0 ? void 0 : params.icon) || (new svgs_1.TypeComponentsMap[type]()) || '';
         console.log('iconComponent', iconComponent);
@@ -215,7 +215,6 @@ class TdMessage extends ui_abstract_1.UI {
         this.visible = false;
         this.message.ctrl.hide();
         this.clearTimer();
-        this.destroy();
         TdMessage.msgId = (TdMessage.msgId || 1) - 1;
         TdMessage.msgList = TdMessage.msgList.filter(item => item !== this);
         console.log('TdMessage.msgList is ', TdMessage.msgList, TdMessage.msgList.length);
@@ -226,6 +225,7 @@ class TdMessage extends ui_abstract_1.UI {
             };
             msg.message.ctrl.setStyleObj(customStyle);
         });
+        this.destroy();
     }
     keydown({ code }) {
         if (code === aria_1.EVENT_CODE.esc) {

package/src/components/feedback/td-message/td-message.style.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useType = exports.$messageIconStyle = exports.useStyle = exports.$messageCloseBtnStyle = exports.$messageBadgeStyle = exports.$messageContentStyle = exports.$messageStyle = exports.$message = void 0;
+exports.$messageIconStyle = exports.$messageCloseBtnStyle = exports.$messageBadgeStyle = exports.$messageContentStyle = exports.$messageStyle = exports.$message = void 0;
+exports.useStyle = useStyle;
+exports.useType = useType;
 const var_1 = require("../../../styles/var");
 exports.$message = {
     // bgColor: getCssVar('color', 'info', 'light-9'),
@@ -77,7 +79,6 @@ function useStyle(config) {
         exports.$messageStyle.boxShadow = undefined;
     }
 }
-exports.useStyle = useStyle;
 exports.$messageIconStyle = {};
 function useType(config) {
     const type = (config === null || config === void 0 ? void 0 : config.type) || 'info';
@@ -101,4 +102,3 @@ function useType(config) {
     exports.$messageContentStyle.overflowWrap = 'break-word';
     exports.$messageIconStyle.color = $messageTextColor;
 }
-exports.useType = useType;

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

@@ -11,7 +11,7 @@ const td_input_class_1 = require("../../form/td-input/td-input.class");
 const td_overlay_class_1 = require("../td-overlay/td-overlay.class");
 const td_message_box_style_1 = require("./td-message-box.style");
 class TdMessageBox extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         var _a, _b;
         super(params, 'fragment');
         this.handleInputEnter = (e) => {
@@ -83,7 +83,7 @@ class TdMessageBox extends ui_abstract_1.UI {
             // styleObj: $messageBoxStyle,
         });
         this.overlayEvent = (0, framework_1.useSameTarget)(this.handleWrapperClick);
-        this.transition.slotNode.addSlot(this.overlay);
+        this.transition.addSlot(this.overlay);
         this.dialog = new framework_1.Div({
             name: 'message-box-overlay',
             attrObj: {

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

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useType = exports.useStyle = exports.$messageBoxBtnsStyle = exports.$messageBoxErrorMsgStyle = exports.$messageBoxMessagePStyle = exports.$messageBoxMessageStyle = exports.$messageBoxStatusStyle = exports.$messageBoxInputStyle = exports.$messageBoxContainerStyle = exports.$messageBoxContentStyle = exports.$messageBoxHeaderBtnStyle = exports.$messageBoxTitleStyle = exports.$messageBoxHeaderCloseStyle = exports.$messageBoxHeaderStyle = exports.$messageBoxOverlayStyle = exports.$messageBoxStyle = exports.$messageBox = void 0;
+exports.$messageBoxBtnsStyle = exports.$messageBoxErrorMsgStyle = exports.$messageBoxMessagePStyle = exports.$messageBoxMessageStyle = exports.$messageBoxStatusStyle = exports.$messageBoxInputStyle = exports.$messageBoxContainerStyle = exports.$messageBoxContentStyle = exports.$messageBoxHeaderBtnStyle = exports.$messageBoxTitleStyle = exports.$messageBoxHeaderCloseStyle = exports.$messageBoxHeaderStyle = exports.$messageBoxOverlayStyle = exports.$messageBoxStyle = exports.$messageBox = void 0;
+exports.useStyle = useStyle;
+exports.useType = useType;
 const var_1 = require("../../../styles/var");
 const td_message_style_1 = require("../td-message/td-message.style");
 exports.$messageBox = {
@@ -172,11 +174,9 @@ function useStyle(config) {
         delete exports.$messageBoxContainerStyle.justifyContent;
     }
 }
-exports.useStyle = useStyle;
 function useType(config) {
     const type = (config === null || config === void 0 ? void 0 : config.type) || 'info';
     const $messageBoxColor = var_1.$colors[type].base;
     // $messageBoxIconStyle.color = $messageBoxColor;
     exports.$messageBoxStatusStyle.color = $messageBoxColor;
 }
-exports.useType = useType;

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

@@ -57,7 +57,7 @@ class TdNotification extends ui_abstract_1.UI {
                 },
             },
         });
-        this.transition.addChild(this.notification);
+        this.transition.addSlot(this.notification);
         let iconComponent;
         if ((params === null || params === void 0 ? void 0 : params.type) && svgs_1.TypeComponentsMap[params.type]) {
             console.log('params.type is ', params.type);
@@ -193,7 +193,6 @@ class TdNotification extends ui_abstract_1.UI {
     close() {
         this.visible = false;
         this.notification.ctrl.hide();
-        this.destroy(); // todo 应该是 Transition 的 afterLeave 触发 destroy；
         const position = this.props.position || 'top-right';
         TdNotification.notifications[position] = TdNotification.notifications[position].filter((notification) => notification !== this);
         TdNotification.notifyId = TdNotification.notifyId - 1;
@@ -206,6 +205,7 @@ class TdNotification extends ui_abstract_1.UI {
             });
             verticalOffset += item.notification.dom.offsetHeight; // + this.GAP_SIZE;
         });
+        this.destroy(); // todo 应该是 Transition 的 afterLeave 触发 destroy；  会删除props
     }
     onKeydown({ code }) {
         console.log('onKeydown ', code);

package/src/components/feedback/td-notification/td-notification.style.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useType = exports.useStyle = exports.$notificationCloseBtnStyle = exports.$notificationIconStyle = exports.$notificationContentStyle = exports.$notificationTitleStyle = exports.$notificationGroupStyle = exports.$notificationStyle = exports.$notification = exports.$messageCloseSize = void 0;
+exports.$notificationCloseBtnStyle = exports.$notificationIconStyle = exports.$notificationContentStyle = exports.$notificationTitleStyle = exports.$notificationGroupStyle = exports.$notificationStyle = exports.$notification = exports.$messageCloseSize = void 0;
+exports.useStyle = useStyle;
+exports.useType = useType;
 const var_1 = require("../../../styles/var");
 const td_message_style_1 = require("../td-message/td-message.style");
 exports.$messageCloseSize = td_message_style_1.$message.closeSize;
@@ -121,7 +123,6 @@ exports.$notificationCloseBtnStyle = {
 function useStyle(config) {
     useType(config);
 }
-exports.useStyle = useStyle;
 function useType(config) {
     // @each $type in (success, info, warning, error) {
     //   & .#{$namespace}-notification--#{$type} {
@@ -135,4 +136,3 @@ function useType(config) {
     const $notificationIconColor = var_1.$colors[(config === null || config === void 0 ? void 0 : config.type) || 'info'].base;
     exports.$notificationStyle.color = $notificationIconColor;
 }
-exports.useType = useType;

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

@@ -5,7 +5,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_overlay_style_1 = require("./td-overlay.style");
 exports.overlayZIndex = 2000;
 class TdOverlay extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         exports.overlayZIndex = exports.overlayZIndex + 1;
         this.className = 'TdOverlay';

package/src/components/feedback/td-popper/arrow/arrow.class.js

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

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

@@ -4,7 +4,7 @@ exports.TdPopperContent = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 const td_focus_trap_class_1 = require("../../td-focus-trap/td-focus-trap.class");
 class TdPopperContent extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdPopperContent';
         this.ctrl.addAttrName('td-popper-content');

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdPopper = void 0;
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 class TdPopper extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'fragment');
         this.className = 'TdPopper';
         this.props = this.setParams(params);

package/src/components/feedback/td-popper/trigger/trigger.class.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdPopperTrigger = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdPopperTrigger extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdPopperTrigger';
         this.props = this.setParams(params);

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdTooltipContent = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdTooltipContent extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdTooltipContent';
         this.props = this.setParams(params);

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

@@ -8,7 +8,7 @@ const arrow_class_1 = require("../td-popper/arrow/arrow.class");
 const trigger_class_1 = require("./trigger/trigger.class");
 const content_class_1 = require("./content/content.class");
 class TdTooltip extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdTooltip';
         this.trigger = new trigger_class_1.TdTooltipTrigger();

package/src/components/feedback/td-tooltip/trigger/trigger.class.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdTooltipTrigger = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdTooltipTrigger extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdTooltipTrigger';
         this.props = this.setParams(params);

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

@@ -4,7 +4,7 @@ exports.RadioGroup = void 0;
 const framework_1 = require("@type-dom/framework");
 const radio_option_class_1 = require("./radio-option/radio-option.class");
 class RadioGroup extends framework_1.TypeDiv {
-    constructor(params) {
+    constructor(params = {}) {
         super();
         this.className = 'RadioGroup';
         this.ctrl.addAttrName('radio-group');