@type-dom/ui 0.0.9 → 0.1.0

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

@@ -1,7 +1,7 @@
 import { IStyle } from '@type-dom/css-type';
 import { IType } from '../../../styles/var';
-export declare const $checkTag: IStyle;
-export declare const $checkTagHover: IStyle;
+export declare const $checkTagStyle: IStyle;
+export declare const $checkTagHoverStyle: IStyle;
 export declare const $checkTagChecked: Record<IType, IStyle>;
 export declare const $checkTagCheckedHover: Record<IType, string>;
 export declare function useType(): void;

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

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$checkTagCheckedHover = exports.$checkTagChecked = exports.$checkTagHover = exports.$checkTag = void 0;
+exports.$checkTagCheckedHover = exports.$checkTagChecked = exports.$checkTagHoverStyle = exports.$checkTagStyle = void 0;
 exports.useType = useType;
 const var_1 = require("../../../styles/var");
 const transition_1 = require("../../../styles/transition");
-exports.$checkTag = {
+exports.$checkTagStyle = {
     // background-color: getCssVar('color', 'info', 'light-9'),
     backgroundColor: var_1.$colors.info['light-9'],
     // border-radius: getCssVar('border-radius', 'base'),
@@ -23,7 +23,7 @@ exports.$checkTag = {
     fontWeight: 'bold',
     userSelect: 'none', // 禁止用户选中文本
 };
-exports.$checkTagHover = {
+exports.$checkTagHoverStyle = {
     backgroundColor: var_1.$colors.info['light-7'],
 };
 exports.$checkTagChecked = {};

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

@@ -1,7 +1,7 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { TdCollapseItem } from '../td-collapse-item/td-collapse-item.class';
 import type { ICollapseActiveName, ITdCollapse, ITdCollapseConfig } from './td-collapse.interface';
-export declare class TdCollapse extends UI implements ITdCollapse {
+export declare class TdCollapse extends TypeDiv implements ITdCollapse {
     className: 'TdCollapse';
     props: ITdCollapseConfig;
     childNodes: TdCollapseItem[];

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

@@ -2,20 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCollapse = void 0;
 const utils_1 = require("@type-dom/utils");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
+const td_collapse_item_class_1 = require("../td-collapse-item/td-collapse-item.class");
 const td_collapse_style_1 = require("./td-collapse.style");
-class TdCollapse extends ui_abstract_1.UI {
+class TdCollapse extends framework_1.TypeDiv {
     constructor(params = {}) {
         var _a;
-        super(params);
+        super();
         this.className = 'TdCollapse';
         this.childNodes = [];
-        this.style.addObj({
-            //   border-top: 1px solid getCssVar('collapse-border-color');
-            borderTop: '1px solid ' + td_collapse_style_1.$collapse.borderColor,
-            // border-bottom: 1px solid getCssVar('collapse-border-color');
-            borderBottom: '1px solid ' + td_collapse_style_1.$collapse.borderColor
-        });
+        this.style.addObj(td_collapse_style_1.$collapseStyle);
         this.activeNames = (0, utils_1.isArray)(params === null || params === void 0 ? void 0 : params.modelValue)
             ? params.modelValue
             : [(_a = params === null || params === void 0 ? void 0 : params.modelValue) !== null && _a !== void 0 ? _a : ''];
@@ -37,23 +33,27 @@ class TdCollapse extends ui_abstract_1.UI {
         if (activeNames) {
             if (this.props.accordion) {
                 this.childNodes.forEach((item) => {
-                    if (item.props.nameId === activeNames[0]) {
-                        item.setActive(true);
-                    }
-                    else {
-                        item.setActive(false);
+                    if (item instanceof td_collapse_item_class_1.TdCollapseItem) {
+                        if (item.props.nameId === activeNames[0]) {
+                            item.setActive(true);
+                        }
+                        else {
+                            item.setActive(false);
+                        }
                     }
                 });
             }
             else {
                 this.childNodes.forEach((item) => {
                     var _a;
-                    if (activeNames && ((_a = item.props) === null || _a === void 0 ? void 0 : _a.nameId)) {
-                        if (activeNames.includes(item.props.nameId)) {
-                            item.setActive(true);
-                        }
-                        else {
-                            item.setActive(false);
+                    if (item instanceof td_collapse_item_class_1.TdCollapseItem) {
+                        if (activeNames && ((_a = item.props) === null || _a === void 0 ? void 0 : _a.nameId)) {
+                            if (activeNames.includes(item.props.nameId)) {
+                                item.setActive(true);
+                            }
+                            else {
+                                item.setActive(false);
+                            }
                         }
                     }
                 });

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

@@ -1,9 +1,9 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
 import { Arrayable } from '../../feedback/td-tooltip/utils';
-export interface ITdCollapse extends IUI {
+import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+export interface ITdCollapse extends ITypeDiv {
     className: 'TdCollapse';
 }
-export interface ITdCollapseConfig extends IUIConfig {
+export interface ITdCollapseConfig extends ITypeConfig {
     /**
      * @description whether to activate accordion mode
      */

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

@@ -1,3 +1,4 @@
+import { IStyle } from '@type-dom/css-type';
 export declare const $collapse: {
     borderColor: string;
     headerHeight: string;
@@ -9,3 +10,4 @@ export declare const $collapse: {
     contentFontSize: string;
     contentTextColor: string;
 };
+export declare const $collapseStyle: IStyle;

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

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$collapse = void 0;
+exports.$collapseStyle = exports.$collapse = void 0;
 const var_1 = require("../../../styles/var");
+// Collapse
+// css3 var in packages/theme-chalk/src/collapse.scss
 exports.$collapse = {
     // 'border-color': getCssVar('border-color-lighter'),
     borderColor: var_1.$borderColor.lighter,
@@ -20,3 +22,9 @@ exports.$collapse = {
     // 'content-text-color': getCssVar('text-color-primary'),
     contentTextColor: var_1.$textColor.primary
 };
+exports.$collapseStyle = {
+    // border-top: 1px solid getCssVar('collapse-border-color');
+    borderTop: '1px solid ' + exports.$collapse.borderColor,
+    // border-bottom: 1px solid getCssVar('collapse-border-color');
+    borderBottom: '1px solid ' + exports.$collapse.borderColor,
+};

package/src/components/data/td-collapse-item/td-collapse-item.class.d.ts

@@ -1,17 +1,16 @@
-import { Button, Div } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { Button, Div, TypeDiv } from '@type-dom/framework';
 import { TdIcon } from '../../basic/td-icon/td-icon.class';
 import { TdCollapse } from '../td-collapse/td-collapse.class';
 import { ICollapseActiveName } from '../td-collapse/td-collapse.interface';
 import { ITdCollapseItem, ITdCollapseItemConfig } from './td-collapse-item.interface';
-export declare class TdCollapseItem extends UI<undefined> implements ITdCollapseItem {
+export declare class TdCollapseItem extends TypeDiv implements ITdCollapseItem {
     className: 'TdCollapseItem';
     props: ITdCollapseItemConfig;
     parent?: TdCollapse;
     headerBtn: Button;
-    private disabled?;
     wrapper: Div;
-    content: Div;
+    wrapperContent: Div;
+    private disabled?;
     private focusing?;
     private isClick?;
     private transition;

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

@@ -3,17 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCollapseItem = 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 var_1 = require("../../../styles/var");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 // import { $collapseTransition, $collapseTransitionActive, $transition } from '../../../styles/transition';
 const td_collapse_style_1 = require("../td-collapse/td-collapse.style");
 const td_collapse_transition_class_1 = require("../td-collapse-transition/td-collapse-transition.class");
-class TdCollapseItem extends ui_abstract_1.UI {
+class TdCollapseItem extends framework_1.TypeDiv {
     constructor(params = {}) {
         var _a;
-        super(params, 'fragment');
+        super();
         this.className = 'TdCollapseItem';
+        this.attr.addName('td-collapse-item');
         this.headerBtn = new framework_1.Button({
             name: 'collapse-item-header',
             attrObj: {
@@ -43,7 +43,7 @@ class TdCollapseItem extends ui_abstract_1.UI {
                 fontSize: td_collapse_style_1.$collapse.headerFontSize,
                 fontWeight: 500,
                 // transition: border-bottom-color getCssVar('transition-duration'),
-                transition: 'border-bottom-color ' + var_1.$transitionDuration,
+                transition: 'border-bottom-color ' + var_1.$transitionDurationDefault,
                 outline: 'none'
             },
             events: {
@@ -54,8 +54,7 @@ class TdCollapseItem extends ui_abstract_1.UI {
                 // keydown.space.enter.stop.prevent: () => {
                 // },
                 keydown: (event) => {
-                    if (event.key === 'Enter' ||
-                        event.key === ' ') {
+                    if ((event === null || event === void 0 ? void 0 : event.key) === 'Enter' || (event === null || event === void 0 ? void 0 : event.key) === ' ') {
                         event === null || event === void 0 ? void 0 : event.preventDefault();
                         event === null || event === void 0 ? void 0 : event.stopPropagation();
                         this.handleEnterClick();
@@ -81,7 +80,7 @@ class TdCollapseItem extends ui_abstract_1.UI {
             styleObj: {
                 margin: '0 8px 0 auto',
                 // transition: transform getCssVar('transition-duration'),
-                transition: 'transform ' + var_1.$transitionDuration,
+                transition: 'transform ' + var_1.$transitionDurationDefault,
                 fontWeight: 300
             }
         });
@@ -105,7 +104,7 @@ class TdCollapseItem extends ui_abstract_1.UI {
                 borderBottom: '1px solid ' + td_collapse_style_1.$collapse.borderColor
             }
         });
-        this.content = new framework_1.Div({
+        this.wrapperContent = new framework_1.Div({
             name: 'collapse-item-content',
             styleObj: {
                 paddingBottom: '25px',
@@ -117,17 +116,18 @@ class TdCollapseItem extends ui_abstract_1.UI {
             }
         });
         if (params === null || params === void 0 ? void 0 : params.slot) {
-            this.content.slotChild(params.slot);
+            this.wrapperContent.slotChild(params.slot);
         }
-        this.wrapper.addChild(this.content);
+        this.wrapper.addChild(this.wrapperContent);
         this.transition = new td_collapse_transition_class_1.TdCollapseTransition({
             parent: this,
-            childNodes: [this.wrapper]
+            slot: this.wrapper
         });
         this.addChild(this.transition);
         this.props = this.useParams(params);
     }
     setActive(active) {
+        var _a;
         if (active) {
             // todo transition
             // this.wrapper.addStyleObj($collapseTransitionActive);
@@ -150,7 +150,7 @@ class TdCollapseItem extends ui_abstract_1.UI {
             this.headerBtn.style.setObj({
                 borderBottomColor: 'transparent'
             });
-            this.arrowIcon.style.setObj({
+            (_a = this.arrowIcon.style) === null || _a === void 0 ? void 0 : _a.setObj({
                 transform: 'rotate(90deg)'
             });
         }
@@ -168,7 +168,7 @@ class TdCollapseItem extends ui_abstract_1.UI {
             // });
             this.transition.showSlot(false);
             this.headerBtn.style.setObj({
-                transition: 'transform ' + var_1.$transitionDuration
+                transition: 'transform ' + var_1.$transitionDurationDefault,
             });
             this.arrowIcon.style.setObj({
                 transform: 'rotate(0deg)'
@@ -195,11 +195,11 @@ class TdCollapseItem extends ui_abstract_1.UI {
     }
     handleFocus() {
         setTimeout(() => {
-            if (!this.isClick) {
-                this.focusing = true;
+            if (this.isClick) {
+                this.isClick = false;
             }
             else {
-                this.isClick = false;
+                this.focusing = true;
             }
         }, 50);
     }

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

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdCollapseItem extends IUI {
+import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+export interface ITdCollapseItem extends ITypeDiv {
     className: 'TdCollapseItem';
 }
-export interface ITdCollapseItemConfig extends IUIConfig {
+export interface ITdCollapseItemConfig extends ITypeConfig {
     /**
      * @description title of the panel
      *     default: '',

package/src/components/data/td-count-down/td-count-down.class.d.ts

@@ -2,9 +2,9 @@ import { TdStatisticAbstract } from '../td-statistic/td-statistic.abstract';
 import { ITdCountDown, ITdCountDownConfig } from './td-count-down.interface';
 export declare class TdCountDown extends TdStatisticAbstract implements ITdCountDown {
     className: 'TdCountDown';
+    props: ITdCountDownConfig;
     private rawValue;
     private timer?;
-    props: ITdCountDownConfig;
     constructor(params?: ITdCountDownConfig);
     mounted(): void;
     stopTimer(): void;

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

@@ -13,7 +13,7 @@ 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);
-        this.addChild(this.getSlotNode());
+        this.slotChild(params.slot);
         this.props = this.useParams(params);
     }
     mounted() {

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

@@ -1,10 +1,9 @@
-import { TableRow, TypeFragment } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeElement, TableRow, TypeFragment } from '@type-dom/framework';
 import { TdDescriptionsItem } from '../td-descriptions-item/td-descriptions-item.class';
-export interface ITdDescriptionsRow extends IUI {
+export interface ITdDescriptionsRow extends ITypeElement {
     className: 'TdDescriptionsRow';
 }
-export interface ITdDescriptionsRowConfig extends IUIConfig {
+export interface ITdDescriptionsRowConfig extends ITypeConfig {
     row?: TdDescriptionsItem[];
 }
 /**
@@ -17,5 +16,5 @@ export declare class TdDescriptionsRow extends TypeFragment implements ITdDescri
     props: ITdDescriptionsRowConfig;
     childNodes: TableRow[];
     constructor(params?: ITdDescriptionsRowConfig);
-    created(): void;
+    setup(): void;
 }

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

@@ -15,7 +15,7 @@ class TdDescriptionsRow extends framework_1.TypeFragment {
         this.childNodes = [];
         this.props = this.useParams(params);
     }
-    created() {
+    setup() {
         var _a;
         // todo  descriptions.direction === 'vertical'
         //     descriptions.border 根据这两个条件判断，创建cell.

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

@@ -1,15 +1,15 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { ISize } from '../../../styles/size';
 import { TdDescriptionsItem } from '../td-descriptions-item/td-descriptions-item.class';
 import { ITdDescriptions, ITdDescriptionsConfig } from './td-descriptions.interface';
-export declare class TdDescriptions extends UI implements ITdDescriptions {
+export declare class TdDescriptions extends TypeDiv implements ITdDescriptions {
     className: 'TdDescriptions';
+    props: ITdDescriptionsConfig;
     private header?;
     private body?;
     private rows?;
     private headerTitle?;
     private bodyTable?;
-    props: ITdDescriptionsConfig;
     constructor(params: ITdDescriptionsConfig);
     created(): void;
     filledNode(node: TdDescriptionsItem, span: number, count: number, isLast?: boolean): TdDescriptionsItem;

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

@@ -2,13 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdDescriptions = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_descriptions_item_class_1 = require("../td-descriptions-item/td-descriptions-item.class");
 const td_descriptions_row_1 = require("./td-descriptions-row");
 const td_descriptions_style_1 = require("./td-descriptions.style");
-class TdDescriptions extends ui_abstract_1.UI {
+class TdDescriptions extends framework_1.TypeDiv {
     constructor(params) {
-        super(params);
+        super();
         this.className = 'TdDescriptions';
         this.props = this.useParams(params);
     }

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

@@ -1,11 +1,10 @@
-import { TypeElement } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeDiv, TypeElement } from '@type-dom/framework';
 import { ISize } from '../../../styles/size';
 import { TdDescriptionsItem } from '../td-descriptions-item/td-descriptions-item.class';
-export interface ITdDescriptions extends IUI {
+export interface ITdDescriptions extends ITypeDiv {
     className: 'TdDescriptions';
 }
-export interface ITdDescriptionsConfig extends IUIConfig {
+export interface ITdDescriptionsConfig extends ITypeConfig {
     /**
      * @description with or without border
      *     default: false,

package/src/components/data/td-descriptions/td-descritions-cell.d.ts

@@ -1,15 +1,16 @@
-import { UI } from '../../../ui/ui.abstract';
-import { IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, TypeHtml } from '@type-dom/framework';
 import { ITdDescriptionsItemConfig } from '../td-descriptions-item/td-descriptions-item.interface';
-export interface ITdDescriptionsCellConfig extends IUIConfig {
+export interface ITdDescriptionsCellConfig extends ITypeConfig {
     cell?: ITdDescriptionsItemConfig;
     tag?: string;
     type?: string;
     span?: number;
 }
-export declare class TdDescriptionsCell extends UI {
+export declare class TdDescriptionsCell extends TypeHtml {
     className: 'TdDescriptionsCell';
+    nodeName: 'td' | string;
+    dom: HTMLElement;
     props: ITdDescriptionsCellConfig;
     constructor(params?: ITdDescriptionsCellConfig);
-    created(): void;
+    setup(): void;
 }

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

@@ -2,15 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdDescriptionsCell = void 0;
 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 {
+class TdDescriptionsCell extends framework_1.TypeHtml {
     constructor(params = {}) {
-        super(params, (params === null || params === void 0 ? void 0 : params.tag) || 'td');
+        super();
         this.className = 'TdDescriptionsCell';
+        this.nodeName = params.tag || 'td';
+        this.dom = document.createElement(this.nodeName);
         this.props = this.useParams(params);
     }
-    created() {
+    setup() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
         const descriptions = this.up('TdDescriptions');
         // console.log('descriptions is ', descriptions);

package/src/components/data/td-descriptions-item/td-descriptions-item.class.d.ts

@@ -1,7 +1,6 @@
-import { TextNode, TypeNode } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { TextNode, TypeDiv, TypeNode } from '@type-dom/framework';
 import { ITdDescriptionsItem, ITdDescriptionsItemConfig } from './td-descriptions-item.interface';
-export declare class TdDescriptionsItem extends UI implements ITdDescriptionsItem {
+export declare class TdDescriptionsItem extends TypeDiv implements ITdDescriptionsItem {
     className: 'TdDescriptionsItem';
     props: ITdDescriptionsItemConfig;
     label?: TypeNode;

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

@@ -1,17 +1,18 @@
 "use strict";
 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 {
+const framework_1 = require("@type-dom/framework");
+class TdDescriptionsItem extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdDescriptionsItem';
         // if (config?.slots?.label) {
         //   this.label = config.slots.label
         // } else if (config?.label) {
         //   this.label = new TextNode(config.label);
         // }
-        this.addChild(this.getSlotNode());
+        // this.addChild(this.getSlotNode());
+        this.slotChild(params.slot);
         this.props = this.useParams(params);
     }
 }

package/src/components/data/td-descriptions-item/td-descriptions-item.interface.d.ts

@@ -1,10 +1,9 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { TypeHtml } from '@type-dom/framework';
+import { ITypeConfig, ITypeDiv, TypeHtml } from '@type-dom/framework';
 import { IStyle } from '@type-dom/css-type';
-export interface ITdDescriptionsItem extends IUI {
+export interface ITdDescriptionsItem extends ITypeDiv {
     className: 'TdDescriptionsItem';
 }
-export interface ITdDescriptionsItemConfig extends IUIConfig {
+export interface ITdDescriptionsItemConfig extends ITypeConfig {
     /**
      * @description label text
      *     default: '',

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

@@ -1,7 +1,7 @@
 import { IStyle } from '@type-dom/css-type';
-import { UI } from '../../../ui/ui.abstract';
 import { ITdEmpty, ITdEmptyConfig } from './td-empty.interface';
-export declare class TdEmpty extends UI implements ITdEmpty {
+import { TypeDiv } from '@type-dom/framework';
+export declare class TdEmpty extends TypeDiv implements ITdEmpty {
     className: 'TdEmpty';
     props: ITdEmptyConfig;
     private image;

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

@@ -2,14 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdEmpty = void 0;
 const utils_1 = require("@type-dom/utils");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 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 {
+class TdEmpty extends framework_1.TypeDiv {
     constructor(params = {}) {
         var _a, _b;
-        super(params);
+        super();
         this.className = 'TdEmpty';
         this.attr.addName('td-empty');
         this.style.addObj(td_empty_style_1.$emptyStyle);

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

@@ -1,9 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { TypeElement } from '@type-dom/framework';
-export interface ITdEmpty extends IUI {
+import { ITypeConfig, ITypeDiv, TypeElement } from '@type-dom/framework';
+export interface ITdEmpty extends ITypeDiv {
     className: 'TdEmpty';
 }
-export interface ITdEmptyConfig extends IUIConfig {
+export interface ITdEmptyConfig extends ITypeConfig {
     /**
      * @description image URL of empty
      *     default: ''

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

@@ -1,7 +1,6 @@
-import { SlotNode } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { SlotNode, TypeDiv } from '@type-dom/framework';
 import { ITdImage, ITdImageConfig } from './td-image.interface';
-export declare class TdImage extends UI implements ITdImage {
+export declare class TdImage extends TypeDiv implements ITdImage {
     className: 'TdImage';
     props: ITdImageConfig;
     private img?;

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

@@ -2,34 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdImage = void 0;
 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 {
+class TdImage extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdImage';
-        this.attr.addName('td-image');
         this.attr.addObj({
+            name: 'td-image',
             ref: 'container'
         });
-        this.style.addObj({
-            display: 'inline-flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            boxSizing: 'border-box',
-            textAlign: 'center',
-            overflow: 'hidden',
-            // color: getCssVar('image', 'text-color'),
-            color: td_image_style_1.$image.textColor,
-            // background: getCssVar('image', 'bg-color'),
-            background: td_image_style_1.$image.bgColor,
-            // width: getCssVar('image', 'size'),
-            width: td_image_style_1.$size.width,
-            // height: getCssVar('image', 'size'),
-            height: td_image_style_1.$size.height,
-            // font-size: getCssVar('image', 'text-size'),
-            fontSize: td_image_style_1.$image.textSize
-        });
+        this.style.addObj(td_image_style_1.$imageStyle);
         this.hasLoadError = false;
         // todo preview
         this.props = this.useParams(params);

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

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdImage extends IUI {
+import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+export interface ITdImage extends ITypeDiv {
     className: 'TdImage';
 }
-export interface ITdImageConfig extends IUIConfig {
+export interface ITdImageConfig extends ITypeConfig {
     /**
      * @description when enabling preview, use this flag to control whether clicking on backdrop can exit preview mode.
      */

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

@@ -1,3 +1,4 @@
+import { IStyle } from '@type-dom/css-type';
 export declare const $image: {
     textColor: string;
     bgColor: string;
@@ -9,3 +10,4 @@ export declare const $size: {
     width: string;
     height: string;
 };
+export declare const $imageStyle: IStyle;