@type-dom/ui 0.0.9 → 0.1.0

package/src/components/basic/td-scrollbar/td-scrollbar.class.js

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdScrollbar = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const bar_class_1 = require("./bar/bar.class");
-class TdScrollbar extends ui_abstract_1.UI {
+class TdScrollbar extends framework_1.TypeHtml {
     constructor(params = {}) {
-        super(params, params === null || params === void 0 ? void 0 : params.tag);
+        super();
         this.className = 'TdScrollbar';
+        this.nodeName = params.tag || 'div';
+        this.dom = document.createElement(this.nodeName);
         this.attr.addName('td-scrollbar');
         this.style.addObj({
             overflow: 'hidden',

package/src/components/basic/td-scrollbar/td-scrollbar.interface.d.ts

@@ -1,10 +1,9 @@
-import { TypeElement } from '@type-dom/framework';
 import { IStyle } from '@type-dom/css-type';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdScrollbar extends IUI {
+import { ITypeConfig, ITypeHtml, TypeElement } from '@type-dom/framework';
+export interface ITdScrollbar extends ITypeHtml {
     className: 'TdScrollbar';
 }
-export interface ITdScrollbarConfig extends IUIConfig {
+export interface ITdScrollbarConfig extends ITypeConfig {
     /**
      * @description height of scrollbar
      */

package/src/components/basic/td-scrollbar/td-scrollbar.interface.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-// export const scrollbarProps = buildProps({
+// export const scrollbarProps = ({
 //
 // } as const)

package/src/components/basic/td-scrollbar/thumb/thumb.class.d.ts

@@ -1,6 +1,6 @@
-import { UI } from '../../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { ITdScrollbarThumb, ITdScrollbarThumbConfig } from './thumb.interface';
-export declare class TdScrollbarThumb extends UI implements ITdScrollbarThumb {
+export declare class TdScrollbarThumb extends TypeDiv implements ITdScrollbarThumb {
     className: 'TdScrollbarThumb';
     props: ITdScrollbarThumbConfig;
     private thumb;

package/src/components/basic/td-scrollbar/thumb/thumb.class.js

@@ -2,11 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdScrollbarThumb = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
 const var_1 = require("../../../../styles/var");
-class TdScrollbarThumb extends ui_abstract_1.UI {
+class TdScrollbarThumb extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdScrollbarThumb';
         this.attr.addName('td-scrollbar-thumb');
         this.style.addObj({

package/src/components/basic/td-scrollbar/thumb/thumb.interface.d.ts

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../../ui/ui.interface';
-export interface ITdScrollbarThumb extends IUI {
+import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+export interface ITdScrollbarThumb extends ITypeDiv {
     className: 'TdScrollbarThumb';
 }
-export interface ITdScrollbarThumbConfig extends IUIConfig {
+export interface ITdScrollbarThumbConfig extends ITypeConfig {
     vertical?: boolean;
     size?: string;
     move?: number;

package/src/components/basic/td-space/td-space.class.d.ts

@@ -1,6 +1,6 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { ITdSpace, ITdSpaceConfig } from './td-space.interface';
-export declare class TdSpace extends UI implements ITdSpace {
+export declare class TdSpace extends TypeDiv implements ITdSpace {
     className: 'TdSpace';
     props: ITdSpaceConfig;
     horizontalSize?: number;

package/src/components/basic/td-space/td-space.class.js

@@ -3,27 +3,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdSpace = void 0;
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_space_const_1 = require("./td-space.const");
-class TdSpace extends ui_abstract_1.UI {
+class TdSpace extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdSpace';
+        this.attr.addName('td-space');
         this.style.addObj({
             display: 'inline-flex',
             verticalAlign: 'top'
         });
-        this.addChild(this.getSlotNode());
+        this.slotChild(params.slot);
         this.props = this.useParams(params);
     }
     setup() {
         this.children.forEach((item) => {
-            if (item instanceof framework_1.TypeElement) {
+            if (item instanceof framework_1.TypeHtml) {
                 item.style.addObj({
                     display: 'flex',
                     flexWrap: 'wrap'
                 });
             }
+            else if (item instanceof framework_1.TypeFragment) {
+                item.addStyleObj({
+                    display: 'flex',
+                    flexWrap: 'wrap'
+                });
+            }
         });
         const props = this.props;
         this.useSize(props === null || props === void 0 ? void 0 : props.size);

package/src/components/basic/td-space/td-space.interface.d.ts

@@ -1,11 +1,10 @@
-import { StyleAlignItems, TypeSvgSvg } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdSpace extends IUI {
+import { ITypeConfig, ITypeDiv, StyleAlignItems, TypeSvgSvg } from '@type-dom/framework';
+export interface ITdSpace extends ITypeDiv {
     className: 'TdSpace';
     horizontalSize?: number;
     verticalSize?: number;
 }
-export interface ITdSpaceConfig extends IUIConfig {
+export interface ITdSpaceConfig extends ITypeConfig {
     /**
      * @description Placement direction	排列的方向
      */

package/src/components/basic/td-text/td-text.class.d.ts

@@ -1,8 +1,10 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeHtml } from '@type-dom/framework';
 import { TdIcon } from '../td-icon/td-icon.class';
 import { ITdText, ITdTextConfig } from './td-text.interface';
-export declare class TdText extends UI implements ITdText {
+export declare class TdText extends TypeHtml implements ITdText {
     className: 'TdText';
+    nodeName: string;
+    dom: HTMLElement;
     props: ITdTextConfig;
     icon?: TdIcon;
     constructor(params?: ITdTextConfig);

package/src/components/basic/td-text/td-text.class.js

@@ -1,18 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdText = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
 const td_text_style_1 = require("./td-text.style");
-class TdText extends ui_abstract_1.UI {
+class TdText extends framework_1.TypeHtml {
     constructor(params = {}) {
-        super(params, (params === null || params === void 0 ? void 0 : params.tag) || 'span');
+        super();
         this.className = 'TdText';
+        this.nodeName = params.tag || 'span';
+        this.dom = document.createElement(this.nodeName);
         this.style.addObj(td_text_style_1.$baseText);
-        this.props = this.useParams(params);
         // this.addChild(this.getSlotNode());
         if (params.slot) {
             this.slotChild(params.slot);
         }
+        this.props = this.useParams(params);
     }
     setup() {
         const props = this.props;

package/src/components/basic/td-text/td-text.interface.d.ts

@@ -1,10 +1,10 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeHtml } from '@type-dom/framework';
 import { IType } from '../../../styles';
 import { ISize } from '../../../styles/size';
-export interface ITdText extends IUI {
+export interface ITdText extends ITypeHtml {
     className: 'TdText';
 }
-export interface ITdTextConfig extends IUIConfig {
+export interface ITdTextConfig extends ITypeConfig {
     type?: IType;
     size?: ISize;
     /**

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

@@ -1,6 +1,6 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeSpan } from '@type-dom/framework';
 import { ITdAvatar, ITdAvatarConfig } from './td-avatar.interface';
-export declare class TdAvatar extends UI implements ITdAvatar {
+export declare class TdAvatar extends TypeSpan implements ITdAvatar {
     className: 'TdAvatar';
     props: ITdAvatarConfig;
     private img?;

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

@@ -1,38 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdAvatar = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
 const td_avatar_style_1 = require("./td-avatar.style");
-const utils_1 = require("@type-dom/utils");
-class TdAvatar extends ui_abstract_1.UI {
+class TdAvatar extends framework_1.TypeSpan {
     constructor(params = {}) {
-        super(params, 'span');
+        super();
         this.className = 'TdAvatar';
         this.attr.addName('td-avatar');
-        this.style.addObj({
-            display: 'inline-flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            boxSizing: 'border-box',
-            textAlign: 'center',
-            overflow: 'hidden',
-            // color: getCssVar('avatar', 'text-color'),
-            color: td_avatar_style_1.$avatar.textColor,
-            // background: getCssVar('avatar', 'bg-color'),
-            background: td_avatar_style_1.$avatar.bgColor,
-            // width: getCssVar('avatar', 'size'),
-            width: td_avatar_style_1.$avatarSize.default,
-            // height: getCssVar('avatar', 'size'),
-            height: td_avatar_style_1.$avatarSize.default,
-            // font-size: getCssVar('avatar', 'text-size'),
-            fontSize: td_avatar_style_1.$avatar.textSize
-        });
+        this.style.addObj(td_avatar_style_1.$avatarStyle);
         this.hasLoadError = false;
         this.props = this.useParams(params);
     }
     setup() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const props = this.props;
         if (((props === null || props === void 0 ? void 0 : props.src) || (props === null || props === void 0 ? void 0 : props.srcSet)) && !this.hasLoadError) {
             this.img = new framework_1.Img({
@@ -77,12 +59,18 @@ class TdAvatar extends ui_abstract_1.UI {
                 width: (0, utils_1.addUnit)(size),
                 height: (0, utils_1.addUnit)(size)
             });
-            if ((props === null || props === void 0 ? void 0 : props.slot) instanceof framework_1.TypeElement) {
+            if ((props === null || props === void 0 ? void 0 : props.slot) instanceof framework_1.TypeHtml) {
                 props.slot.style.addObj({
                     width: (0, utils_1.addUnit)(size),
                     height: (0, utils_1.addUnit)(size)
                 });
             }
+            else if ((props === null || props === void 0 ? void 0 : props.slot) instanceof framework_1.TypeFragment) {
+                props.slot.addStyleObj({
+                    width: (0, utils_1.addUnit)(size),
+                    height: (0, utils_1.addUnit)(size)
+                });
+            }
         }
         else {
             this.style.addObj({
@@ -93,12 +81,18 @@ class TdAvatar extends ui_abstract_1.UI {
                 width: td_avatar_style_1.$avatarSize[size],
                 height: td_avatar_style_1.$avatarSize[size]
             });
-            if ((props === null || props === void 0 ? void 0 : props.slot) instanceof framework_1.TypeElement) {
+            if ((props === null || props === void 0 ? void 0 : props.slot) instanceof framework_1.TypeHtml) {
                 props.slot.style.addObj({
                     width: td_avatar_style_1.$avatarSize[size],
                     height: td_avatar_style_1.$avatarSize[size]
                 });
             }
+            else if ((props === null || props === void 0 ? void 0 : props.slot) instanceof framework_1.TypeFragment) {
+                (_d = props.slot) === null || _d === void 0 ? void 0 : _d.addStyleObj({
+                    width: td_avatar_style_1.$avatarSize[size],
+                    height: td_avatar_style_1.$avatarSize[size]
+                });
+            }
         }
     }
     // todo 监听 src 改变

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

@@ -1,11 +1,11 @@
 import { Globals } from '@type-dom/css-type';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeSpan } from '@type-dom/framework';
 import { ISize } from '../../../styles/size';
 import { TdIcon } from '../../basic/td-icon/td-icon.class';
-export interface ITdAvatar extends IUI {
+export interface ITdAvatar extends ITypeSpan {
     className: 'TdAvatar';
 }
-export interface ITdAvatarConfig extends IUIConfig {
+export interface ITdAvatarConfig extends ITypeConfig {
     /**
      * @description avatar size.
      *     default: '',

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

@@ -1,3 +1,4 @@
+import { IStyle } from '@type-dom/css-type';
 export declare const $avatar: {
     textColor: string;
     bgColor: string;
@@ -10,4 +11,5 @@ export declare const $avatarSize: {
     default: string;
     small: string;
 };
+export declare const $avatarStyle: IStyle;
 export declare const $avatarSizeDefault: string;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$avatarSizeDefault = exports.$avatarSize = exports.$avatar = void 0;
+exports.$avatarSizeDefault = exports.$avatarStyle = exports.$avatarSize = exports.$avatar = void 0;
 const var_1 = require("../../../styles/var");
 exports.$avatar = {
     // 'text-color': getCssVar('color-white'),
@@ -17,4 +17,22 @@ exports.$avatarSize = {
     default: '40px',
     small: '24px'
 };
+exports.$avatarStyle = {
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    textAlign: 'center',
+    overflow: 'hidden',
+    // color: getCssVar('avatar', 'text-color'),
+    color: exports.$avatar.textColor,
+    // background: getCssVar('avatar', 'bg-color'),
+    background: exports.$avatar.bgColor,
+    // width: getCssVar('avatar', 'size'),
+    width: exports.$avatarSize.default,
+    // height: getCssVar('avatar', 'size'),
+    height: exports.$avatarSize.default,
+    // font-size: getCssVar('avatar', 'text-size'),
+    fontSize: exports.$avatar.textSize
+};
 exports.$avatarSizeDefault = exports.$avatarSize.default;

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

@@ -1,6 +1,6 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import type { ITdBadge, ITdBadgeConfig } from './td-badge.interface';
-export declare class TdBadge extends UI implements ITdBadge {
+export declare class TdBadge extends TypeDiv implements ITdBadge {
     className: 'TdBadge';
     props: ITdBadgeConfig;
     private sup;

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

@@ -3,13 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdBadge = void 0;
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const var_1 = require("../../../styles/var");
 const td_badge_style_1 = require("./td-badge.style");
-class TdBadge extends ui_abstract_1.UI {
+class TdBadge extends framework_1.TypeDiv {
     constructor(params = {}) {
         var _a, _b, _c, _d;
-        super(params);
+        super();
         console.log('TdBadge constructor . ');
         this.className = 'TdBadge';
         this.attr.addName('td-badge');
@@ -44,7 +43,8 @@ class TdBadge extends ui_abstract_1.UI {
                 marginTop: (0, utils_1.addUnit)((_d = (_c = params === null || params === void 0 ? void 0 : params.offset) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : 0)
             }
         });
-        this.addChild(this.getSlotNode());
+        // this.addChild(this.getSlotNode());
+        this.slotChild(params.slot);
         this.addChild(new framework_1.Transition({
             name: 'td-badge',
             parent: this,

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

@@ -1,9 +1,9 @@
-import type { IUI, IUIConfig } from '../../../ui/ui.interface';
 import { IStyle } from '@type-dom/css-type';
-export interface ITdBadge extends IUI {
+import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+export interface ITdBadge extends ITypeDiv {
     className: 'TdBadge';
 }
-export interface ITdBadgeConfig extends IUIConfig {
+export interface ITdBadgeConfig extends ITypeConfig {
     /**
      * @description display value.
      *     default: '',

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

@@ -1,14 +1,13 @@
-import { Div } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { Div, TypeDiv } from '@type-dom/framework';
 import { ITdCard, ITdCardConfig } from './td-card.interface';
-export declare class TdCard extends UI implements ITdCard {
+export declare class TdCard extends TypeDiv implements ITdCard {
     className: 'TdCard';
     props: ITdCardConfig;
     body: Div;
     header?: Div;
     footer?: Div;
     constructor(params?: ITdCardConfig);
-    addShadow(params?: ITdCardConfig): void;
+    addShadow(params: ITdCardConfig): void;
     addHeader(params?: ITdCardConfig): void;
-    addFooter(params?: ITdCardConfig): void;
+    addFooter(params: ITdCardConfig): void;
 }

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

@@ -2,28 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCard = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-const transition_1 = require("../../../styles/transition");
 const var_1 = require("../../../styles/var");
 const td_card_style_1 = require("./td-card.style");
-class TdCard extends ui_abstract_1.UI {
+class TdCard extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdCard';
         this.attr.addName('td-card');
-        this.style.addObj({
-            //   border-radius: getCssVar('card', 'border-radius'),
-            borderRadius: td_card_style_1.$card.borderRadius,
-            // border: 1px solid getCssVar('card', 'border-color'),
-            border: '1px solid ' + td_card_style_1.$card.borderColor,
-            // background-color: getCssVar('card', 'bg-color'),
-            backgroundColor: td_card_style_1.$card.bgColor,
-            overflow: 'hidden',
-            // color: getCssVar('text-color', 'primary'),
-            color: var_1.$textColor.primary,
-            // transition: getCssVar('transition-duration'),
-            transition: transition_1.$transitionDuration.default
-        });
+        this.style.addObj(td_card_style_1.$cardStyle);
         this.addShadow(params);
         this.addHeader(params);
         this.body = new framework_1.Div({
@@ -32,13 +18,13 @@ class TdCard extends ui_abstract_1.UI {
                 padding: td_card_style_1.$card.padding
             }
         });
-        if (params === null || params === void 0 ? void 0 : params.bodyStyle) {
+        if (params.bodyStyle) {
             this.body.style.addObj(params.bodyStyle);
         }
-        if (params === null || params === void 0 ? void 0 : params.bodyClass) {
+        if (params.bodyClass) {
             this.body.attr.addClass(params.bodyClass);
         }
-        if (params === null || params === void 0 ? void 0 : params.slot) {
+        if (params.slot) {
             this.body.slotChild(params.slot);
         }
         this.addChild(this.body);
@@ -46,7 +32,7 @@ class TdCard extends ui_abstract_1.UI {
         this.props = this.useParams(params);
     }
     addShadow(params) {
-        const shadow = (params === null || params === void 0 ? void 0 : params.shadow) || 'always';
+        const shadow = params.shadow || 'always';
         if (shadow === 'always') {
             this.style.addObj({
                 boxShadow: var_1.$boxShadow.light
@@ -67,33 +53,33 @@ class TdCard extends ui_abstract_1.UI {
         var _a;
         if ((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.header) {
             this.header = new framework_1.Div({
-                styleObj: td_card_style_1.$cardHeader,
-                childNodes: [params.slots.header]
+                styleObj: td_card_style_1.$cardHeaderStyle
             });
+            this.header.slotChild(params.slots.header);
             this.addChild(this.header);
         }
         else if (params === null || params === void 0 ? void 0 : params.header) {
             // 文本
             this.header = new framework_1.Div({
                 text: params.header,
-                styleObj: td_card_style_1.$cardHeader
+                styleObj: td_card_style_1.$cardHeaderStyle
             });
             this.addChild(this.header);
         }
     }
     addFooter(params) {
         var _a;
-        if ((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.footer) {
+        if ((_a = params.slots) === null || _a === void 0 ? void 0 : _a.footer) {
             this.footer = new framework_1.Div({
-                styleObj: td_card_style_1.$cardFooter,
-                childNodes: [params.slots.footer]
+                styleObj: td_card_style_1.$cardFooterStyle
             });
+            this.footer.slotChild(params.slots.footer);
             this.addChild(this.footer);
         }
-        else if (params === null || params === void 0 ? void 0 : params.footer) {
+        else if (params.footer) {
             this.footer = new framework_1.Div({
-                text: params.footer,
-                styleObj: td_card_style_1.$cardFooter
+                slot: params.footer,
+                styleObj: td_card_style_1.$cardFooterStyle
             });
             this.addChild(this.footer);
         }

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

@@ -1,9 +1,9 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
 import { IStyle } from '@type-dom/css-type';
-export interface ITdCard extends IUI {
+import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+export interface ITdCard extends ITypeDiv {
     className: 'TdCard';
 }
-export interface ITdCardConfig extends IUIConfig {
+export interface ITdCardConfig extends ITypeConfig {
     /**
      * @description title of the card. Also accepts a DOM passed by `slot#header`
      *     default: '',

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

@@ -5,5 +5,6 @@ export declare const $card: {
     padding: string;
     bgColor: string;
 };
-export declare const $cardHeader: IStyle;
-export declare const $cardFooter: IStyle;
+export declare const $cardStyle: IStyle;
+export declare const $cardHeaderStyle: IStyle;
+export declare const $cardFooterStyle: IStyle;

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$cardFooter = exports.$cardHeader = exports.$card = void 0;
+exports.$cardFooterStyle = exports.$cardHeaderStyle = exports.$cardStyle = exports.$card = void 0;
 const var_1 = require("../../../styles/var");
+const transition_1 = require("../../../styles/transition");
 exports.$card = {
     // 'border-color': getCssVar('border-color', 'light'),
     borderColor: var_1.$borderColor.light,
@@ -10,7 +11,20 @@ exports.$card = {
     // 'bg-color': getCssVar('fill-color', 'blank'),
     bgColor: var_1.$fillColor.blank
 };
-exports.$cardHeader = {
+exports.$cardStyle = {
+    //   border-radius: getCssVar('card', 'border-radius'),
+    borderRadius: exports.$card.borderRadius,
+    // border: 1px solid getCssVar('card', 'border-color'),
+    border: '1px solid ' + exports.$card.borderColor,
+    // background-color: getCssVar('card', 'bg-color'),
+    backgroundColor: exports.$card.bgColor,
+    overflow: 'hidden',
+    // color: getCssVar('text-color', 'primary'),
+    color: var_1.$textColor.primary,
+    // transition: getCssVar('transition-duration'),
+    transition: transition_1.$transitionDuration.default
+};
+exports.$cardHeaderStyle = {
     // padding: calc(#{getCssVar('card', 'padding')} - 2px) getCssVar('card', 'padding'),
     padding: `calc(${exports.$card.padding} - 2px) ${exports.$card.padding}`,
     // border-bottom: 1px solid getCssVar('card', 'border-color'),
@@ -18,7 +32,7 @@ exports.$cardHeader = {
     // box-sizing: border-box,
     boxSizing: 'border-box'
 };
-exports.$cardFooter = {
+exports.$cardFooterStyle = {
     //     padding: calc(#{getCssVar('card', 'padding')} - 2px)
     // getCssVar('card', 'padding'),
     padding: `calc(${exports.$card.padding} - 2px) ${exports.$card.padding}`,

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

@@ -1,6 +1,6 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeSpan } from '@type-dom/framework';
 import { ITdCheckTag, ITdCheckTagConfig } from './td-check-tag.interface';
-export declare class TdCheckTag extends UI implements ITdCheckTag {
+export declare class TdCheckTag extends TypeSpan implements ITdCheckTag {
     className: 'TdCheckTag';
     props: ITdCheckTagConfig;
     checked?: boolean;

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

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCheckTag = void 0;
+const framework_1 = require("@type-dom/framework");
 const var_1 = require("../../../styles/var");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const event_1 = require("../../../constants/event");
 const td_check_tag_style_1 = require("./td-check-tag.style");
-class TdCheckTag extends ui_abstract_1.UI {
+class TdCheckTag extends framework_1.TypeSpan {
     constructor(params = {}) {
-        super(params, 'span');
+        super();
         this.className = 'TdCheckTag';
-        this.attr.addName('td-check-tag');
         this.type = (params === null || params === void 0 ? void 0 : params.type) || 'primary';
         (0, td_check_tag_style_1.useType)();
-        this.style.addObj(td_check_tag_style_1.$checkTag);
+        this.attr.addName('td-check-tag');
+        this.style.addObj(td_check_tag_style_1.$checkTagStyle);
         this.setChecked(params === null || params === void 0 ? void 0 : params.checked);
         this.props = this.useParams(params);
         this.addEvents({

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

@@ -1,10 +1,10 @@
+import { ITypeConfig, ITypeSpan } from '@type-dom/framework';
 import { IType } from '../../../styles/var';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
 import { CHANGE_EVENT } from '../../../constants/event';
-export interface ITdCheckTag extends IUI {
+export interface ITdCheckTag extends ITypeSpan {
     className: 'TdCheckTag';
 }
-export interface ITdCheckTagConfig extends IUIConfig {
+export interface ITdCheckTagConfig extends ITypeConfig {
     /**
      * @description is checked
      *     default: false,