@type-dom/ui 0.0.10 → 0.1.0

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

@@ -4,12 +4,11 @@ exports.TdImageViewer = void 0;
 const framework_1 = require("@type-dom/framework");
 const utils_1 = require("@type-dom/utils");
 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_image_viewer_style_1 = require("./td-image-viewer.style");
-class TdImageViewer extends ui_abstract_1.UI {
+class TdImageViewer extends framework_1.TypeTransition {
     constructor(params = {}) {
-        super(params, 'fragment');
+        super();
         this.loading = false;
         this.className = 'TdImageViewer';
         this.transform = {
@@ -35,15 +34,17 @@ class TdImageViewer extends ui_abstract_1.UI {
                 })
             }
         };
-        this.mode = this.modes.CONTAIN;
+        this.viewMode = this.modes.CONTAIN;
         this.wrapper = new framework_1.Div();
-        this.transition = new framework_1.Transition({
-            slot: this.wrapper,
-        });
-        this.teleport = new framework_1.Teleport({
-            to: document.body,
-        });
-        this.teleport.addChild(this.transition);
+        // this.transition =  new Transition({
+        //   slot: this.wrapper,
+        // });
+        this.setContent(this.wrapper);
+        // this.teleport = new Teleport({
+        //   to: document.body,
+        // });
+        // this.teleport.addChild(this.transition);
+        // this.addChild(this.transition);
         // this.mount(document.body);
         // this.attr.addName('wrapper');
         // todo transition 如何设置样式 ？？？ developing ......
@@ -59,8 +60,9 @@ class TdImageViewer extends ui_abstract_1.UI {
             name: 'mask',
             events: {
                 click: (evt, element) => {
+                    var _a;
                     //
-                    element === null || element === void 0 ? void 0 : element.style.hide();
+                    (_a = element === null || element === void 0 ? void 0 : element.style) === null || _a === void 0 ? void 0 : _a.hide();
                 }
             }
         }), 
@@ -72,7 +74,8 @@ class TdImageViewer extends ui_abstract_1.UI {
                 top: '40px', right: '40px', width: '40px', height: '40px', fontSize: '40px' }),
             events: {
                 click: (evt, element) => {
-                    element === null || element === void 0 ? void 0 : element.style.hide();
+                    var _a;
+                    (_a = element === null || element === void 0 ? void 0 : element.style) === null || _a === void 0 ? void 0 : _a.hide();
                 }
             },
             childNodes: [
@@ -142,7 +145,7 @@ class TdImageViewer extends ui_abstract_1.UI {
                         new td_icon_class_1.TdIcon({
                             // ？？？
                             // svgObj: this.mode.icon,
-                            slot: this.mode.icon,
+                            slot: this.viewMode.icon,
                             events: {
                                 click: (evt, ele) => {
                                     this.toggleMode();
@@ -207,7 +210,7 @@ class TdImageViewer extends ui_abstract_1.UI {
             transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,
             transition: enableTransition ? 'transform .3s' : ''
         };
-        if (this.mode.name === this.modes.CONTAIN.name) {
+        if (this.viewMode.name === this.modes.CONTAIN.name) {
             style.maxWidth = style.maxHeight = '100%';
         }
         return style;
@@ -217,10 +220,10 @@ class TdImageViewer extends ui_abstract_1.UI {
             return;
         const modeNames = (0, utils_1.keysOf)(this.modes);
         const modeValues = Object.values(this.modes);
-        const currentMode = this.mode.name;
+        const currentMode = this.viewMode.name;
         const index = modeValues.findIndex((i) => i.name === currentMode);
         const nextIndex = (index + 1) % modeNames.length;
-        this.mode = this.modes[modeNames[nextIndex]];
+        this.viewMode = this.modes[modeNames[nextIndex]];
         this.reset();
     }
     reset() {

package/src/components/data/td-image-viewer/td-image-viewer.interface.d.ts

@@ -1,9 +1,9 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
 import { TdIcon } from '../../basic/td-icon/td-icon.class';
-export interface ITdImageViewer extends IUI {
+import { ITypeElement, ITypeTransitionConfig } from '@type-dom/framework';
+export interface ITdImageViewer extends ITypeElement {
     className: 'TdImageViewer';
 }
-export interface ITdImageViewerConfig extends IUIConfig {
+export interface ITdImageViewerConfig extends ITypeTransitionConfig {
     /**
      * @description preview link list.
      *     default: () => mutable([] as const),

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

@@ -1,6 +1,6 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { ITdResult, ITdResultConfig } from './td-result.interface';
-export declare class TdResult extends UI implements ITdResult {
+export declare class TdResult extends TypeDiv implements ITdResult {
     className: 'TdResult';
     props: ITdResultConfig;
     constructor(params?: ITdResultConfig);

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

@@ -2,15 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdResult = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_result_style_1 = require("./td-result.style");
 const td_result_constant_1 = require("./td-result.constant");
-class TdResult extends ui_abstract_1.UI {
+class TdResult extends framework_1.TypeDiv {
     // private iconSlot?: SlotNode;
     // private titleSlot?: SlotNode;
     constructor(params = {}) {
         var _a, _b, _c, _d, _e, _f;
-        super(params);
+        super();
         this.className = 'TdResult';
         this.attr.addName('td-result');
         this.style.addObj({
@@ -24,6 +23,7 @@ class TdResult extends ui_abstract_1.UI {
             padding: td_result_style_1.$result.padding
         });
         // this.iconSlot = new SlotNode('icon');
+        this.useSlots(params);
         this.addChild(new framework_1.Div({
             name: 'icon',
             childNodes: [this.getSlotNode('icon')]
@@ -55,6 +55,7 @@ class TdResult extends ui_abstract_1.UI {
                 childNodes: [this.getSlotNode('subTitle')],
             }));
             if ((_e = params.slots) === null || _e === void 0 ? void 0 : _e.subTitle) {
+                //
             }
             else {
                 this.getSlotNode('subTitle').addSlot(new framework_1.P({

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

@@ -1,9 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { TypeElement } from '@type-dom/framework';
-export interface ITdResult extends IUI {
+import { ITypeConfig, ITypeDiv, TypeElement } from '@type-dom/framework';
+export interface ITdResult extends ITypeDiv {
     className: 'TdResult';
 }
-export interface ITdResultConfig extends IUIConfig {
+export interface ITdResultConfig extends ITypeConfig {
     /**
      * @description title of result
      *     default: '',

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

@@ -1,7 +1,6 @@
-import { Input } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { Input, TypeDiv } from '@type-dom/framework';
 import { ITdSegmented, ITdSegmentedConfig, Option } from './td-segmented.interface';
-export declare class TdSegmented extends UI implements ITdSegmented {
+export declare class TdSegmented extends TypeDiv implements ITdSegmented {
     className: 'TdSegmented';
     props: ITdSegmentedConfig;
     private group;

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

@@ -2,21 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdSegmented = void 0;
 const framework_1 = require("@type-dom/framework");
-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 {
+class TdSegmented extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdSegmented';
         (0, td_segmented_style_1.useStyle)(params);
-        this.attr.addName('td-segmented');
-        this.style.addObj(td_segmented_style_1.$segmentedStyle);
         this.attr.addObj({
+            name: 'td-segmented',
             role: 'radiogroup',
             ariaLabel: 'Segmented',
             ariaLabelledby: 'Segmented'
         });
+        this.style.addObj(td_segmented_style_1.$segmentedStyle);
         this.modelValue = params === null || params === void 0 ? void 0 : params.modelValue;
         this.disabled = params === null || params === void 0 ? void 0 : params.disabled; // todo form disabled
         this.group = new framework_1.Div({
@@ -38,7 +37,7 @@ class TdSegmented extends ui_abstract_1.UI {
         const options = (params === null || params === void 0 ? void 0 : params.options) || [];
         const labels = [];
         options.forEach((option, index) => {
-            var _a;
+            var _a, _b;
             const label = new framework_1.Label({
                 name: 'td-segmented-item',
                 styleObj: td_segmented_style_1.$segmentedItemStyle,
@@ -62,13 +61,13 @@ class TdSegmented extends ui_abstract_1.UI {
             });
             if (typeof option === 'object' && option.slot) {
                 label.addChild(option.slot);
-                option.slot.style.addObj({
+                (_a = option.slot.style) === null || _a === void 0 ? void 0 : _a.addObj({
                     zIndex: 1 // todo ????? 否则显示不出来
                 });
             }
             else {
                 label.addChild(new framework_1.Div({
-                    text: (_a = this.getLabel(option)) === null || _a === void 0 ? void 0 : _a.toString(),
+                    text: (_b = this.getLabel(option)) === null || _b === void 0 ? void 0 : _b.toString(),
                     name: 'item-label',
                     styleObj: td_segmented_style_1.$segmentedItemLabelStyle
                 }));

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

@@ -1,8 +1,7 @@
-import { TypeElement } from '@type-dom/framework';
-import { IUI } from '../../../ui/ui.interface';
+import { ITypeDiv, TypeElement } from '@type-dom/framework';
 import { IAriaConfig } from '../../../aria';
 import { ISize } from '../../../styles/size';
-export interface ITdSegmented extends IUI {
+export interface ITdSegmented extends ITypeDiv {
     className: 'TdSegmented';
 }
 export type Option = {

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

@@ -1,11 +1,10 @@
-import { Div, Span, TypeElement } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { Div, Span, TypeDiv, TypeElement } from '@type-dom/framework';
 import { ITdStatisticConfig, ITdStatisticAbstract } from './td-statistic.interface';
 import { Dayjs } from 'dayjs';
-export declare abstract class TdStatisticAbstract extends UI implements ITdStatisticAbstract {
+export declare abstract class TdStatisticAbstract extends TypeDiv implements ITdStatisticAbstract {
     abstract className: 'TdStatistic' | 'TdCountDown';
     head?: Div;
-    content: Div;
+    mainContent: Div;
     prefix?: TypeElement;
     number: Span;
     suffix?: TypeElement;

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

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdStatisticAbstract = void 0;
 const framework_1 = require("@type-dom/framework");
 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 {
+class TdStatisticAbstract extends framework_1.TypeDiv {
     constructor(params = {}) {
         var _a, _b, _c, _d;
-        super(params);
-        if (params === null || params === void 0 ? void 0 : params.title) {
+        super();
+        console.warn('TdStatisticAbstract constructor . ');
+        if ((params === null || params === void 0 ? void 0 : params.title) || ((_a = params.slots) === null || _a === void 0 ? void 0 : _a.title)) {
             this.head = new framework_1.Div({
                 name: 'head',
                 styleObj: {
@@ -26,12 +26,13 @@ class TdStatisticAbstract extends ui_abstract_1.UI {
             if (params === null || params === void 0 ? void 0 : params.title) {
                 this.head.addChild(new framework_1.TextNode(params.title));
             }
-            if ((_a = params.slots) === null || _a === void 0 ? void 0 : _a.title) {
-                this.head.addChild((_b = params.slots) === null || _b === void 0 ? void 0 : _b.title);
+            else if ((_b = params.slots) === null || _b === void 0 ? void 0 : _b.title) {
+                console.warn('params.slots.title is ', params.slots.title);
+                this.head.addChild(params.slots.title);
             }
             this.addChild(this.head);
         }
-        this.content = new framework_1.Div({
+        this.mainContent = new framework_1.Div({
             name: 'content',
             styleObj: {
                 // font-weight: getCssVar('statistic-content-font-weight');
@@ -42,10 +43,10 @@ class TdStatisticAbstract extends ui_abstract_1.UI {
                 color: td_statistic_style_1.$statistic.contentColor
             }
         });
+        this.addChild(this.mainContent);
         if (params === null || params === void 0 ? void 0 : params.valueStyle) {
-            this.content.style.addObj(params.valueStyle);
+            this.mainContent.style.addObj(params.valueStyle);
         }
-        this.addChild(this.content);
         if (params === null || params === void 0 ? void 0 : params.prefix) {
             this.prefix = new framework_1.Div({
                 name: 'prefix',
@@ -59,11 +60,11 @@ class TdStatisticAbstract extends ui_abstract_1.UI {
                     })
                 ]
             });
-            this.content.addChild(this.prefix);
+            this.mainContent.addChild(this.prefix);
         }
         if ((_c = params === null || params === void 0 ? void 0 : params.slots) === null || _c === void 0 ? void 0 : _c.prefix) {
             this.prefix = params.slots.prefix;
-            this.content.addChild(params.slots.prefix);
+            this.mainContent.addChild(params.slots.prefix);
         }
         this.number = new framework_1.Span({
             text: this.formatValue((params === null || params === void 0 ? void 0 : params.value) || 0),
@@ -71,7 +72,7 @@ class TdStatisticAbstract extends ui_abstract_1.UI {
                 display: 'inline-block'
             }
         });
-        this.content.addChild(this.number);
+        this.mainContent.addChild(this.number);
         if (params === null || params === void 0 ? void 0 : params.suffix) {
             this.suffix = new framework_1.Div({
                 name: 'suffix',
@@ -85,11 +86,11 @@ class TdStatisticAbstract extends ui_abstract_1.UI {
                     })
                 ]
             });
-            this.content.addChild(this.suffix);
+            this.mainContent.addChild(this.suffix);
         }
         if ((_d = params === null || params === void 0 ? void 0 : params.slots) === null || _d === void 0 ? void 0 : _d.suffix) {
             this.suffix = params.slots.suffix;
-            this.content.addChild(params.slots.suffix);
+            this.mainContent.addChild(params.slots.suffix);
         }
         this.props = this.useParams(params);
     }

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

@@ -6,6 +6,7 @@ class TdStatistic extends td_statistic_abstract_1.TdStatisticAbstract {
     constructor(params) {
         super(params);
         this.className = 'TdStatistic';
+        // console.warn('TdStatistic constructor . ');
     }
 }
 exports.TdStatistic = TdStatistic;

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

@@ -1,14 +1,13 @@
-import { TypeElement } from '@type-dom/framework';
+import { ITypeConfig, ITypeDiv, TypeElement } from '@type-dom/framework';
 import { IStyle } from '@type-dom/css-type';
 import { Dayjs } from 'dayjs';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdStatisticAbstract extends IUI {
+export interface ITdStatisticAbstract extends ITypeDiv {
     className: 'TdStatistic' | 'TdCountDown';
 }
 export interface ITdStatistic extends ITdStatisticAbstract {
     className: 'TdStatistic';
 }
-export interface ITdStatisticConfig extends IUIConfig {
+export interface ITdStatisticConfig extends ITypeConfig {
     /**
      * @description Setting the decimal point
      *     default: '.',

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

@@ -1,11 +1,10 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeSpan } from '@type-dom/framework';
 import { ITdTag, ITdTagConfig } from './td-tag.interface';
-export declare class TdTag extends UI implements ITdTag {
+export declare class TdTag extends TypeSpan implements ITdTag {
     className: 'TdTag';
     props: ITdTagConfig;
-    private content;
     private closeIcon?;
-    private defaultSlot?;
+    private tagContent;
     constructor(params?: ITdTagConfig);
     handleClose(): void;
     handleClick(): void;

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

@@ -3,13 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdTag = void 0;
 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 var_1 = require("../../../styles/var");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const td_tag_style_1 = require("./td-tag.style");
-class TdTag extends ui_abstract_1.UI {
+class TdTag extends framework_1.TypeSpan {
     constructor(params = {}) {
-        super(params, 'span');
+        super();
         this.className = 'TdTag';
         this.attr.addName('td-tag');
         (0, td_tag_style_1.useType)();
@@ -58,15 +57,14 @@ class TdTag extends ui_abstract_1.UI {
             // padding-right: map.get($tag-icon-span-gap, 'default') - $border-width; // isClosable
             // paddingRight: params?.closable ? parseFloat($tagIconSpanGap.default) - parseFloat($borderWidth) + 'px' : ''
         });
-        this.content = new framework_1.Span({
+        this.tagContent = new framework_1.Span({
             // add content slot
             name: 'content'
         });
-        this.addChild(this.content);
-        if (params === null || params === void 0 ? void 0 : params.slot) {
-            this.defaultSlot = new framework_1.SlotNode('default', params.slot);
-            this.content.addChild(this.defaultSlot);
-        }
+        this.addChild(this.tagContent);
+        // this.useSlots(params);
+        // this.tagContent.addChild(this.getSlotNode());
+        this.tagContent.slotChild(params === null || params === void 0 ? void 0 : params.slot);
         // style样式应该在 style类中处理， useConfig useType useSize ....
         if (params === null || params === void 0 ? void 0 : params.hit) {
             this.style.addObj({
@@ -91,7 +89,7 @@ class TdTag extends ui_abstract_1.UI {
                 paddingRight: parseFloat(td_tag_style_1.$tagIconSpanGap.default) - parseFloat(var_1.$borderWidth) + 'px'
             });
             this.closeIcon = new td_icon_class_1.TdIcon({
-                svgObj: new svgs_1.ElCloseSvg(),
+                slot: new svgs_1.ElCloseSvg(),
                 styleObj: {
                     flexShrink: 0,
                     // color: getCssVar('tag', 'text-color'),
@@ -108,17 +106,19 @@ class TdTag extends ui_abstract_1.UI {
                 },
                 events: {
                     mouseenter: (evt, element) => {
+                        var _a;
                         // console.log('mouseenter . ');
                         evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
-                        element === null || element === void 0 ? void 0 : element.style.setObj({
+                        (_a = element === null || element === void 0 ? void 0 : element.style) === null || _a === void 0 ? void 0 : _a.setObj({
                             backgroundColor: td_tag_style_1.$tagTypes[type].hoverColor,
                             color: var_1.$colorWhite
                         });
                     },
                     mouseleave: (evt, element) => {
+                        var _a;
                         // console.log('mouseleave . ');
                         evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
-                        element === null || element === void 0 ? void 0 : element.style.setObj({
+                        (_a = element === null || element === void 0 ? void 0 : element.style) === null || _a === void 0 ? void 0 : _a.setObj({
                             backgroundColor: td_tag_style_1.$tagTypes[type].bgColor,
                             color: td_tag_style_1.$tagTypes[type].textColor
                         });

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

@@ -1,10 +1,10 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeSpan } from '@type-dom/framework';
 import { ISize } from '../../../styles/size';
 import { IType } from '../../../styles';
-export interface ITdTag extends IUI {
+export interface ITdTag extends ITypeSpan {
     className: 'TdTag';
 }
-export interface ITdTagConfig extends IUIConfig {
+export interface ITdTagConfig extends ITypeConfig {
     /**
      * @description type of Tag
      *     default: 'primary',

package/src/components/feedback/index.d.ts

@@ -11,3 +11,5 @@ export { TdNotification } from './td-notification/td-notification.class';
 export type * from './td-notification/td-notification.interface';
 export { TdLoading } from './td-loading/td-loading.class';
 export type * from './td-loading/td-loading.interface';
+export { TdTooltip } from './td-tooltip/td-tooltip.class';
+export type * from './td-tooltip/td-tooltip.interface';

package/src/components/feedback/index.js

@@ -2,7 +2,7 @@
 // export { Dialog } from './dialog/dialog.class';
 // export { MessageBox } from './message-box/message-box';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdLoading = exports.TdNotification = exports.TdMessageBox = exports.TdMessage = exports.TdDialog = exports.TdAlert = void 0;
+exports.TdTooltip = exports.TdLoading = exports.TdNotification = exports.TdMessageBox = exports.TdMessage = exports.TdDialog = exports.TdAlert = void 0;
 const tslib_1 = require("tslib");
 var td_alert_class_1 = require("./td-alert/td-alert.class");
 Object.defineProperty(exports, "TdAlert", { enumerable: true, get: function () { return td_alert_class_1.TdAlert; } });
@@ -18,3 +18,5 @@ var td_notification_class_1 = require("./td-notification/td-notification.class")
 Object.defineProperty(exports, "TdNotification", { enumerable: true, get: function () { return td_notification_class_1.TdNotification; } });
 var td_loading_class_1 = require("./td-loading/td-loading.class");
 Object.defineProperty(exports, "TdLoading", { enumerable: true, get: function () { return td_loading_class_1.TdLoading; } });
+var td_tooltip_class_1 = require("./td-tooltip/td-tooltip.class");
+Object.defineProperty(exports, "TdTooltip", { enumerable: true, get: function () { return td_tooltip_class_1.TdTooltip; } });

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

@@ -1,9 +1,8 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeTransition } from '@type-dom/framework';
 import { ITdAlert, ITdAlertConfig } from './td-alert.interface';
-export declare class TdAlert extends UI<undefined> implements ITdAlert {
+export declare class TdAlert extends TypeTransition implements ITdAlert {
     className: 'TdAlert';
     props: ITdAlertConfig;
-    private transition;
     private alertDiv;
     private alertContent;
     private alertTitle?;

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

@@ -3,37 +3,37 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdAlert = void 0;
 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_alert_style_1 = require("./td-alert.style");
-class TdAlert extends ui_abstract_1.UI {
+class TdAlert extends framework_1.TypeTransition {
     constructor(params = {}) {
-        super(params, 'fragment');
+        super();
         this.className = 'TdAlert';
         (0, td_alert_style_1.useStyle)(params);
         this.alertDiv = new framework_1.Div({
             attrObj: {
-                role: 'alert'
+                role: 'alert',
             },
             styleObj: td_alert_style_1.$alertStyle,
         });
         if (params === null || params === void 0 ? void 0 : params.styleObj) {
             this.alertDiv.style.addObj(params.styleObj);
         }
-        this.transition = new framework_1.Transition({
-            name: 'td-alert-fade',
-            slot: this.alertDiv,
-        });
-        this.addChild(this.transition);
+        // this.content = new Transition({
+        //   name: 'td-alert-fade',
+        //   slot: this.alertDiv,
+        // });
+        // this.addChild(this.content);
+        this.setContent(this.alertDiv);
         const IconComponent = svgs_1.TypeComponentsMap[(params === null || params === void 0 ? void 0 : params.type) || 'info'];
         if ((params === null || params === void 0 ? void 0 : params.showIcon) && IconComponent) {
             this.alertDiv.addChild(new td_icon_class_1.TdIcon({
                 styleObj: td_alert_style_1.$alertIconStyle,
-                svgObj: new IconComponent()
+                svgObj: new IconComponent(),
             }));
         }
         this.alertContent = new framework_1.Div({
-            styleObj: td_alert_style_1.$alertContentStyle
+            styleObj: td_alert_style_1.$alertContentStyle,
         });
         this.alertDiv.addChild(this.alertContent);
         this.addTitle(params);
@@ -45,7 +45,7 @@ class TdAlert extends ui_abstract_1.UI {
         var _a, _b;
         if ((params === null || params === void 0 ? void 0 : params.title) || ((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.title)) {
             this.alertTitle = new framework_1.Span({
-                styleObj: td_alert_style_1.$alertTitleStyle
+                styleObj: td_alert_style_1.$alertTitleStyle,
             });
             this.alertContent.addChild(this.alertTitle);
             if ((_b = params.slots) === null || _b === void 0 ? void 0 : _b.title) {
@@ -60,7 +60,7 @@ class TdAlert extends ui_abstract_1.UI {
         if ((params === null || params === void 0 ? void 0 : params.slot) || (params === null || params === void 0 ? void 0 : params.description)) {
             this.alertDescription = new framework_1.P({
                 name: 'alert-description',
-                styleObj: td_alert_style_1.$alertDescriptionStyle
+                styleObj: td_alert_style_1.$alertDescriptionStyle,
             });
             this.alertContent.addChild(this.alertDescription);
             if (params.slot) {
@@ -82,12 +82,13 @@ class TdAlert extends ui_abstract_1.UI {
                     events: {
                         click: () => {
                             var _a;
+                            console.log('close text click . ');
                             if ((_a = params.emits) === null || _a === void 0 ? void 0 : _a.close) {
                                 params.emits.close();
                             }
                             this.alertDiv.style.hide();
-                        }
-                    }
+                        },
+                    },
                 }));
             }
             else {
@@ -97,12 +98,13 @@ class TdAlert extends ui_abstract_1.UI {
                     events: {
                         click: () => {
                             var _a;
+                            console.log('close icon click . ');
                             if ((_a = params === null || params === void 0 ? void 0 : params.emits) === null || _a === void 0 ? void 0 : _a.close) {
                                 params.emits.close();
                             }
                             this.alertDiv.style.hide();
-                        }
-                    }
+                        },
+                    },
                 }));
             }
         }

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

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdAlert extends IUI {
+import { ITypeElement, ITypeTransitionConfig } from '@type-dom/framework';
+export interface ITdAlert extends ITypeElement {
     className: 'TdAlert';
 }
-export interface ITdAlertConfig extends IUIConfig {
+export interface ITdAlertConfig extends ITypeTransitionConfig {
     /**
      * @description alert title.
      *     default: ''

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

@@ -1,9 +1,9 @@
-import { UI } from '../../../ui/ui.abstract';
+import { Transition, TypeFragment } from '@type-dom/framework';
 import { ITdDialog, ITdDialogConfig } from './td-dialog.interface';
-export declare class TdDialog extends UI<undefined> implements ITdDialog {
+export declare class TdDialog extends TypeFragment implements ITdDialog {
     className: 'TdDialog';
+    content: Transition;
     props: ITdDialogConfig;
-    private teleport;
     private dialogContent;
     private overlay;
     constructor(params?: ITdDialogConfig);