@type-dom/ui 0.0.10 → 0.1.0

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

@@ -1,21 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdLoading = void 0;
-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 {
+class TdLoading extends framework_1.TypeTransition {
     constructor(params = {}) {
-        super(params, 'fragment');
+        super();
         this.className = 'TdLoading';
-        this.transition = new framework_1.Transition({
-            name: 'td-loading-fade',
-            emits: {
-                afterLeave: () => {
-                    console.log('afterLeave');
-                }
+        // this.content = new Transition({
+        //   name: 'td-loading-fade',
+        //   emits: {
+        //     afterLeave: () => {
+        //       console.log('afterLeave');
+        //     }
+        //   }
+        // });
+        this.addEmits({
+            afterLeave: () => {
+                console.log('afterLeave');
             }
         });
+        // this.addChild(this.content);
         this.svg = (params === null || params === void 0 ? void 0 : params.spinner) || (params === null || params === void 0 ? void 0 : params.svg);
         this.spinner = new svgs_1.SvgSvg({
             name: 'spinner',
@@ -46,19 +51,18 @@ class TdLoading extends ui_abstract_1.UI {
             childNodes: [
                 new framework_1.Div({
                     name: 'spinner',
-                    childNodes: (() => {
+                    init: (element) => {
+                        console.log('element is ', element);
+                        element === null || element === void 0 ? void 0 : element.addChild(this.spinner);
                         if (this.spinnerText) {
-                            return [this.spinner, this.spinnerText];
+                            element === null || element === void 0 ? void 0 : element.addChild(this.spinnerText);
                         }
-                        else {
-                            return [this.spinner];
-                        }
-                    })()
+                    },
                 })
             ]
         });
-        this.transition.addChild(this.mask);
-        this.addChild(this.transition);
+        // this.content.addChild(this.mask);
+        this.setContent(this.mask);
         this.props = this.useParams(params);
     }
     static service(params) {

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

@@ -1,9 +1,8 @@
-import { TypeElement } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdLoading extends IUI {
+import { ITypeElement, ITypeTransitionConfig, TypeElement } from '@type-dom/framework';
+export interface ITdLoading extends ITypeElement {
     className: 'TdLoading';
 }
-export interface ITdLoadingConfig extends IUIConfig {
+export interface ITdLoadingConfig extends ITypeTransitionConfig {
     parent?: TypeElement;
     /**
      * @description background color of the mask

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

@@ -1,15 +1,15 @@
-import { TypeNode } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { Transition, TypeFragment, TypeNode } from '@type-dom/framework';
 import { ITdMessage, ITdMessageConfig } from './td-message.interface';
-export declare class TdMessage extends UI<undefined> implements ITdMessage {
+export declare class TdMessage extends TypeFragment implements ITdMessage {
     className: 'TdMessage';
-    private transition;
+    content: Transition;
     private message;
     props: ITdMessageConfig;
     private visible?;
     private stopTimer;
     static msgId: number;
     static msgList: TdMessage[];
+    static groupList: TdMessage[];
     private repeatNum?;
     private badge?;
     constructor(option?: string | ITdMessageConfig);

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

@@ -4,14 +4,20 @@ exports.TdMessage = void 0;
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_badge_class_1 = require("../../data/td-badge/td-badge.class");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const td_message_interface_1 = require("./td-message.interface");
 const td_message_style_1 = require("./td-message.style");
-class TdMessage extends ui_abstract_1.UI {
+class TdMessage extends framework_1.TypeFragment {
     constructor(option) {
         var _a;
+        super();
+        this.keydown = ({ code }) => {
+            if (code === utils_1.EVENT_CODE.esc) {
+                // press esc to close the message
+                this.close();
+            }
+        };
         let params = {};
         if (typeof option === 'string') {
             params.message = option;
@@ -19,35 +25,11 @@ class TdMessage extends ui_abstract_1.UI {
         else {
             params = option || {};
         }
-        super(params, 'fragment');
-        this.keydown = ({ code }) => {
-            if (code === utils_1.EVENT_CODE.esc) {
-                // press esc to close the message
-                this.close();
-            }
-        };
         this.className = 'TdMessage';
         this.visible = false;
         this.stopTimer = undefined;
         (0, td_message_style_1.useStyle)(params);
         this.to = (params === null || params === void 0 ? void 0 : params.appendTo) || document.body;
-        this.transition = new framework_1.Transition({
-            name: 'td-message-fade',
-            emits: {
-                beforeLeave: () => {
-                    var _a;
-                    console.log('beforeLeave');
-                    (_a = params.onClose) === null || _a === void 0 ? void 0 : _a.call(params);
-                },
-                afterLeave: () => {
-                    var _a, _b;
-                    console.log('afterLeave');
-                    (_b = (_a = params.emits) === null || _a === void 0 ? void 0 : _a.destroy) === null || _b === void 0 ? void 0 : _b.call(_a); // destroy ???
-                    this.message.dom.remove();
-                }
-            }
-        });
-        this.addChild(this.transition);
         this.message = new framework_1.Div({
             attrObj: {
                 role: 'alert'
@@ -64,9 +46,25 @@ class TdMessage extends ui_abstract_1.UI {
                 }
             }
         });
+        this.content = new framework_1.Transition({
+            name: 'td-message-fade',
+            slot: this.message,
+            emits: {
+                beforeLeave: () => {
+                    var _a;
+                    console.log('beforeLeave');
+                    (_a = params.onClose) === null || _a === void 0 ? void 0 : _a.call(params);
+                },
+                afterLeave: () => {
+                    var _a, _b;
+                    console.log('afterLeave');
+                    (_b = (_a = params.emits) === null || _a === void 0 ? void 0 : _a.destroy) === null || _b === void 0 ? void 0 : _b.call(_a); // destroy ???
+                    this.message.dom.remove();
+                }
+            }
+        });
+        this.addChild(this.content);
         // this.message.style.hide();
-        // this.transition.setSlot(this.message);
-        this.transition.addChild(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);
@@ -136,14 +134,14 @@ class TdMessage extends ui_abstract_1.UI {
             top: offset
         });
         if (params.grouping) {
-            if (TdMessage.msgList.length === 0) {
+            if (TdMessage.groupList.length === 0) {
                 TdMessage.msgId = TdMessage.msgId + 1;
-                TdMessage.msgList.push(this);
+                TdMessage.groupList.push(this);
                 // 特殊类，需要直接渲染。事件触发的类。
                 this.mount(this.to);
             }
             else {
-                const msg = TdMessage.msgList[0];
+                const msg = TdMessage.groupList[0];
                 msg.repeatNum = (msg.repeatNum || 1) + 1;
                 console.log('msg.repeatNum is ', msg.repeatNum);
                 if (msg.repeatNum > 1) {
@@ -229,6 +227,7 @@ class TdMessage extends ui_abstract_1.UI {
         this.message.style.hide();
         this.clearTimer();
         TdMessage.msgId = (TdMessage.msgId || 1) - 1;
+        TdMessage.groupList = TdMessage.groupList.filter(item => item !== this);
         TdMessage.msgList = TdMessage.msgList.filter(item => item !== this);
         console.log('TdMessage.msgList is ', TdMessage.msgList, TdMessage.msgList.length);
         TdMessage.msgList.forEach((msg, index) => {
@@ -244,3 +243,4 @@ class TdMessage extends ui_abstract_1.UI {
 exports.TdMessage = TdMessage;
 TdMessage.msgId = 0;
 TdMessage.msgList = [];
+TdMessage.groupList = [];

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

@@ -1,6 +1,5 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { TypeElement, TypeSvgSvg } from '@type-dom/framework';
-export interface ITdMessage extends IUI {
+import { ITypeConfig, ITypeElement, TypeElement, TypeSvgSvg } from '@type-dom/framework';
+export interface ITdMessage extends ITypeElement {
     className: 'TdMessage';
 }
 export declare const messageDefaults: {
@@ -22,7 +21,7 @@ export declare const messageDefaults: {
     readonly appendTo: HTMLElement;
 };
 export type IMessageTypes = 'success' | 'info' | 'warning' | 'error';
-export interface ITdMessageConfig extends IUIConfig {
+export interface ITdMessageConfig extends ITypeConfig {
     /**
      * @description custom class name for Message
      *     default: messageDefaults.customClass,

package/src/components/feedback/td-message-box/td-message-box.class.d.ts

@@ -1,10 +1,9 @@
-import { UI } from '../../../ui/ui.abstract';
-import { TdInput } from '../../form/td-input/td-input.class';
-import { ITdMessageBox, ITdMessageBoxConfig, IAction, IMessageBoxInputData } from './td-message-box.interface';
-export declare class TdMessageBox extends UI<undefined> implements ITdMessageBox {
+import { Transition, TypeFragment } from '@type-dom/framework';
+import { IAction, ITdMessageBox, ITdMessageBoxConfig } from './td-message-box.interface';
+export declare class TdMessageBox extends TypeFragment implements ITdMessageBox {
     className: 'TdMessageBox';
+    content: Transition;
     props: ITdMessageBoxConfig;
-    private transition;
     private overlay;
     private dialog;
     private messageBox;
@@ -12,7 +11,7 @@ export declare class TdMessageBox extends UI<undefined> implements ITdMessageBox
     private title?;
     private visible;
     private state;
-    private content;
+    private msgContent;
     private container;
     private inputDiv?;
     private btns;
@@ -27,17 +26,16 @@ export declare class TdMessageBox extends UI<undefined> implements ITdMessageBox
     constructor(params?: ITdMessageBoxConfig);
     mounted(): void;
     beforeDestroy(): void;
-    static show(params?: ITdMessageBoxConfig): Promise<IMessageBoxInputData>;
+    static info(params?: ITdMessageBoxConfig): TdMessageBox;
     static alert(message: string, title?: string, params?: ITdMessageBoxConfig): void;
-    static confirm(message: string, title?: string, params?: ITdMessageBoxConfig): Promise<IMessageBoxInputData>;
-    static prompt(message: string, title?: string, params?: ITdMessageBoxConfig): Promise<IMessageBoxInputData>;
-    promise(input?: TdInput): Promise<IMessageBoxInputData>;
+    static confirm(message: string, title?: string, params?: ITdMessageBoxConfig): TdMessageBox;
+    static prompt(message: string, title?: string, params?: ITdMessageBoxConfig): TdMessageBox;
     doClose(): void;
-    handleWrapperClick(): void;
+    handleWrapperClick: () => void;
     handleInputEnter: (e: KeyboardEvent) => void;
     handleAction(action: IAction): void;
     validate(): boolean;
-    getInputElement(): HTMLInputElement | HTMLTextAreaElement | undefined;
+    getInputElement(): HTMLTextAreaElement | HTMLInputElement | undefined;
     handleClose(): void;
     onCloseRequested(): void;
     getAppendToElement(props?: ITdMessageBoxConfig): HTMLElement;

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

@@ -4,16 +4,21 @@ exports.TdMessageBox = void 0;
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_button_class_1 = require("../../basic/td-button/td-button.class");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 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 {
+class TdMessageBox extends framework_1.TypeFragment {
     constructor(params = {}) {
         var _a, _b;
-        super(params, 'fragment');
+        super();
+        // 作为参数调用要用箭头函数
+        this.handleWrapperClick = () => {
+            if (this.props.closeOnClickModal) {
+                this.handleAction(this.state.distinguishCancelAndClose ? 'close' : 'cancel');
+            }
+        };
         this.handleInputEnter = (e) => {
             if (this.state.inputType !== 'textarea') {
                 e.preventDefault();
@@ -104,7 +109,7 @@ class TdMessageBox extends ui_abstract_1.UI {
             slot: this.dialog,
         });
         this.overlayEvent = (0, framework_1.useSameTarget)(this.handleWrapperClick);
-        this.transition = new framework_1.Transition({
+        this.content = new framework_1.Transition({
             name: 'fade-in-linear',
             emits: {
                 afterLeave: () => {
@@ -114,7 +119,7 @@ class TdMessageBox extends ui_abstract_1.UI {
             },
             slot: this.overlay,
         });
-        this.addChild(this.transition);
+        this.addChild(this.content);
         let iconComponent;
         if (params === null || params === void 0 ? void 0 : params.icon) {
             iconComponent = params.icon;
@@ -169,11 +174,11 @@ class TdMessageBox extends ui_abstract_1.UI {
                 }));
             }
         }
-        this.content = new framework_1.Div({
-            name: 'content',
+        this.msgContent = new framework_1.Div({
+            name: 'msg-content',
             styleObj: td_message_box_style_1.$messageBoxContentStyle,
         });
-        this.messageBox.addChild(this.content);
+        this.messageBox.addChild(this.msgContent);
         this.container = new framework_1.Div({
             name: 'message-box-container',
             styleObj: td_message_box_style_1.$messageBoxContainerStyle,
@@ -255,7 +260,7 @@ class TdMessageBox extends ui_abstract_1.UI {
                 }
             }
         }
-        this.content.addChild(this.container);
+        this.msgContent.addChild(this.container);
         if (params === null || params === void 0 ? void 0 : params.showInput) {
             this.input = new td_input_class_1.TdInput({
                 // id: params.inputId,
@@ -281,7 +286,7 @@ class TdMessageBox extends ui_abstract_1.UI {
                 styleObj: td_message_box_style_1.$messageBoxInputStyle,
                 childNodes: [this.input, this.errorMsg],
             });
-            this.content.addChild(this.inputDiv);
+            this.msgContent.addChild(this.inputDiv);
         }
         this.btns = new framework_1.Div({
             name: 'btns',
@@ -301,11 +306,13 @@ class TdMessageBox extends ui_abstract_1.UI {
                     click: () => {
                         console.log('this.cancelBtn click . ');
                         this.handleAction('cancel');
+                        this.resolve({ action: 'cancel' });
                     },
                     keydown: (evt) => {
                         evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                        if (evt.key === 'Enter') {
+                        if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Enter') {
                             this.handleAction('cancel');
+                            this.resolve({ action: 'cancel' });
                         }
                     }
                 },
@@ -326,11 +333,15 @@ class TdMessageBox extends ui_abstract_1.UI {
             events: {
                 click: () => {
                     this.handleAction('confirm');
+                    const input = this.input;
+                    this.resolve({ action: 'confirm', input });
                 },
-                keydown: (evt) => {
+                keydown: (evt, element) => {
                     evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                    if (evt.key === 'Enter') {
+                    if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Enter') {
                         this.handleAction('confirm');
+                        const input = this.input;
+                        this.resolve({ action: 'confirm', input });
                     }
                 },
             },
@@ -370,10 +381,9 @@ class TdMessageBox extends ui_abstract_1.UI {
     //     offDraggable()
     //   })
     // 普通显示
-    static show(params) {
+    static info(params) {
         console.log('TdMessageBox show params is ', params);
-        const msgBox = new TdMessageBox(params);
-        return msgBox.promise();
+        return new TdMessageBox(params);
     }
     // 用 callback
     static alert(message, title, params) {
@@ -381,46 +391,19 @@ class TdMessageBox extends ui_abstract_1.UI {
             title }, params));
     }
     static confirm(message, title, params) {
-        const msgBox = new TdMessageBox(Object.assign({ boxType: 'confirm', message,
+        return new TdMessageBox(Object.assign({ boxType: 'confirm', message,
             title, showCancelButton: true }, params));
-        return msgBox.promise();
     }
     // todo 多次提交时，不触发返回操作。
     static prompt(message, title, params) {
-        const msgBox = new TdMessageBox(Object.assign({ boxType: 'prompt', message,
+        return new TdMessageBox(Object.assign({ boxType: 'prompt', message,
             title, showCancelButton: true, showInput: true }, params));
-        const input = msgBox.input;
-        return msgBox.promise(input);
-    }
-    promise(input) {
-        return new Promise((resolve, reject) => {
-            var _a;
-            this.confirmBtn.setEvent('click', () => {
-                console.log('confirm click . then resolve . ');
-                resolve({ action: 'confirm', input });
-            });
-            // this.cancelBtn.removeEvent('click', this.cancelBtn.dom);
-            (_a = this.cancelBtn) === null || _a === void 0 ? void 0 : _a.setEvents({
-                click: () => {
-                    // todo
-                    console.log('this.cancelBtn click . ');
-                    // this.handleAction('cancel');
-                    resolve({ action: 'cancel' }); // todo why must add catch(...)  .otherwise it will not be resolved
-                },
-                keydown: (evt) => {
-                    // evt?.preventDefault();
-                    if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Enter') {
-                        // this.handleAction('cancel');
-                        resolve({ action: 'cancel' });
-                    }
-                },
-            });
-        });
     }
     doClose() {
         console.log('doClose . ');
-        if (!this.visible)
+        if (!this.visible) {
             return;
+        }
         this.visible = false;
         this.messageBox.style.hide();
         (0, framework_1.nextTick)(() => {
@@ -431,11 +414,6 @@ class TdMessageBox extends ui_abstract_1.UI {
             }
         });
     }
-    handleWrapperClick() {
-        if (this.props.closeOnClickModal) {
-            this.handleAction(this.state.distinguishCancelAndClose ? 'close' : 'cancel');
-        }
-    }
     handleAction(action) {
         var _a, _b, _c;
         console.log('handleAction', action);

package/src/components/feedback/td-message-box/td-message-box.interface.d.ts

@@ -1,9 +1,8 @@
-import { InputEnum, TypeElement, TypeSvgSvg } from '@type-dom/framework';
+import { InputEnum, ITypeConfig, ITypeElement, TypeElement, TypeSvgSvg } from '@type-dom/framework';
 import { IStyle } from '@type-dom/css-type';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
 import { ISize } from '../../../styles/size';
 import { TdInput } from '../../form';
-export interface ITdMessageBox extends IUI {
+export interface ITdMessageBox extends ITypeElement {
     className: 'TdMessageBox';
 }
 type MessageType = '' | 'success' | 'warning' | 'info' | 'error';
@@ -55,8 +54,8 @@ export declare interface IMessageBoxState {
     validateError?: boolean;
     zIndex?: number;
 }
-export type Callback = ((value: string, action?: IAction) => any) | ((action: IAction) => any);
-export interface ITdMessageBoxConfig extends IUIConfig {
+export type Callback = (action: IAction) => void;
+export interface ITdMessageBoxConfig extends ITypeConfig {
     /**
      * auto focus when open message-box
      */

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

@@ -1,15 +1,14 @@
-import { TypeNode } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { Transition, TypeFragment, TypeNode } from '@type-dom/framework';
 import { INotificationPosition, ITdNotification, ITdNotificationConfig } from './td-notification.interface';
-export declare class TdNotification extends UI<undefined> implements ITdNotification {
+export declare class TdNotification extends TypeFragment implements ITdNotification {
     className: 'TdNotification';
+    content: Transition;
     props: ITdNotificationConfig;
     visible: boolean;
-    private transition;
     private notification;
     private group;
     private title;
-    private content;
+    private groupContent;
     private closeBtn?;
     static notifyId: number;
     static notifications: Record<INotificationPosition, TdNotification[]>;

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

@@ -4,19 +4,11 @@ exports.TdNotification = void 0;
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const td_notification_style_1 = require("./td-notification.style");
-class TdNotification extends ui_abstract_1.UI {
+class TdNotification extends framework_1.TypeFragment {
     constructor(option) {
-        let params;
-        if (typeof option === 'string') {
-            params = { message: option };
-        }
-        else {
-            params = option;
-        }
-        super(params, 'fragment');
+        super();
         this.visible = false;
         // the gap size between each notification
         this.GAP_SIZE = 16;
@@ -37,10 +29,17 @@ class TdNotification extends ui_abstract_1.UI {
                 this.startTimer(); // resume timer
             }
         };
+        let params;
+        if (typeof option === 'string') {
+            params = { message: option };
+        }
+        else {
+            params = option;
+        }
         this.className = 'TdNotification';
         (0, td_notification_style_1.useStyle)(params);
         this.to = document.body;
-        this.transition = new framework_1.Transition({
+        this.content = new framework_1.Transition({
             name: 'fade',
             emits: {
                 beforeLeave: (el, done) => {
@@ -54,7 +53,7 @@ class TdNotification extends ui_abstract_1.UI {
                 },
             },
         });
-        this.addChild(this.transition);
+        this.addChild(this.content);
         this.notification = new framework_1.Div({
             attrObj: {
                 role: 'alert',
@@ -72,7 +71,7 @@ class TdNotification extends ui_abstract_1.UI {
                 },
             },
         });
-        this.transition.addChild(this.notification);
+        this.content.addChild(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);
@@ -101,19 +100,19 @@ class TdNotification extends ui_abstract_1.UI {
             styleObj: td_notification_style_1.$notificationTitleStyle,
         });
         this.group.addChild(this.title);
-        this.content = new framework_1.Div({
+        this.groupContent = new framework_1.Div({
             name: 'content',
             styleObj: td_notification_style_1.$notificationContentStyle,
         });
         if (params === null || params === void 0 ? void 0 : params.slot) {
-            this.content.slotChild(params.slot);
+            this.groupContent.slotChild(params.slot);
         }
         else {
             if (params === null || params === void 0 ? void 0 : params.dangerouslyUseHTMLString) {
                 if (typeof params.message === 'string') {
                     const parser = new framework_1.Parser();
                     const el = parser.parseFromString(params.message);
-                    this.content.addChild(new framework_1.P({
+                    this.groupContent.addChild(new framework_1.P({
                         childNodes: [el],
                     }));
                 }
@@ -129,10 +128,10 @@ class TdNotification extends ui_abstract_1.UI {
                 else {
                     p.addChild(new framework_1.TextNode(params === null || params === void 0 ? void 0 : params.message));
                 }
-                this.content.addChild(p);
+                this.groupContent.addChild(p);
             }
         }
-        this.group.addChild(this.content);
+        this.group.addChild(this.groupContent);
         if ((params === null || params === void 0 ? void 0 : params.showClose) !== false) {
             this.closeBtn = new td_icon_class_1.TdIcon({
                 name: 'close-btn',

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

@@ -1,11 +1,10 @@
-import { TypeElement, TypeSvgSvg } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeElement, TypeElement, TypeSvgSvg } from '@type-dom/framework';
 export type INotificationPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 export type INotificationType = 'success' | 'info' | 'warning' | 'error';
-export interface ITdNotification extends IUI {
+export interface ITdNotification extends ITypeElement {
     className: 'TdNotification';
 }
-export interface ITdNotificationConfig extends IUIConfig {
+export interface ITdNotificationConfig extends ITypeConfig {
     /**
      * @description custom class name for Notification
      *     default: ''

package/src/components/feedback/td-only-child/td-only-child.class.d.ts

@@ -1,7 +1,7 @@
-import { ITypeConfig } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
-export declare class TdOnlyChild extends UI {
+import { ITypeConfig, SlotNode, TypeFragment } from '@type-dom/framework';
+export declare class TdOnlyChild extends TypeFragment {
     className: 'TdOnlyChild';
+    content: SlotNode;
     constructor(params?: ITypeConfig);
     setup(): null;
 }

package/src/components/feedback/td-only-child/td-only-child.class.js

@@ -4,11 +4,11 @@ exports.TdOnlyChild = void 0;
 const framework_1 = require("@type-dom/framework");
 const utils_1 = require("@type-dom/utils");
 const use_forward_ref_1 = require("../../../hooks/use-forward-ref");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-class TdOnlyChild extends ui_abstract_1.UI {
+class TdOnlyChild extends framework_1.TypeFragment {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdOnlyChild';
+        this.content = new framework_1.SlotNode();
         this.props = this.useParams(params);
     }
     setup() {

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

@@ -1,8 +1,7 @@
-import { TypeElement } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv, TypeElement } from '@type-dom/framework';
 import { ITdOverlay, ITdOverlayConfig } from './td-overlay.interface';
 export declare let overlayZIndex: number;
-export declare class TdOverlay extends UI implements ITdOverlay {
+export declare class TdOverlay extends TypeDiv implements ITdOverlay {
     className: 'TdOverlay';
     props: ITdOverlayConfig;
     constructor(params?: ITdOverlayConfig);