@type-dom/ui 0.0.10 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@type-dom/ui",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "dependencies": {
     "@type-dom/svgs": "*"
   },
@@ -10,6 +10,5 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/type-dom/ui.git"
-  },
-  "types": "./src/index.d.ts"
-}
+  }
+}

package/src/aria.d.ts

@@ -1,5 +1,5 @@
-import { IUIConfig } from './ui/ui.interface';
-export interface IAriaConfig extends IUIConfig {
+import { ITypeConfig } from '@type-dom/framework';
+export interface IAriaConfig extends ITypeConfig {
     /**
      * @description native `aria-label` attribute
      */

package/src/components/basic/td-button/td-button.abstract.d.ts

@@ -1,17 +1,17 @@
-import { SlotNode, Span, TextNode } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { SlotNode, Span, TextNode, TypeHtml } from '@type-dom/framework';
 import { TdIcon } from '../td-icon/td-icon.class';
 import { ITdButtonAbstract, ITdButtonConfig } from './td-button.interface';
-export declare abstract class TdButtonAbstract extends UI implements ITdButtonAbstract {
+export declare abstract class TdButtonAbstract extends TypeHtml implements ITdButtonAbstract {
     abstract className: 'TdButton' | string;
-    childNodes: (Span | TdIcon)[];
     textNode?: TextNode;
     props: ITdButtonConfig;
+    nodeName: string;
+    dom: HTMLElement;
     span?: Span;
+    icon?: TdIcon | SlotNode;
     private type?;
     private plain?;
     private disabled?;
-    icon?: TdIcon | SlotNode;
     protected constructor(params?: ITdButtonConfig);
     setup(): void;
     useType(params?: ITdButtonConfig): void;

package/src/components/basic/td-button/td-button.abstract.js

@@ -3,28 +3,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdButtonAbstract = 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_input_style_1 = require("../../form/td-input/td-input.style");
 // import { $iconLeft, $iconLoading, $iconRight } from '../td-icon/td-icon.style';
 const td_icon_class_1 = require("../td-icon/td-icon.class");
 const td_button_style_1 = require("./td-button.style");
-// import '../../styles/style.css';
-class TdButtonAbstract extends ui_abstract_1.UI {
+class TdButtonAbstract extends framework_1.TypeHtml {
     constructor(params = {}) {
-        super(params, params.tag || 'button');
+        var _a, _b, _c;
+        super();
+        // this.useTag(params.tag || 'button');
+        this.nodeName = params.tag || 'button';
+        this.dom = document.createElement(this.nodeName);
         this.attr.addObj({
-            type: 'button' // 默认
+            name: 'td-button',
+            type: 'button'
         });
         this.style.addObj(td_button_style_1.$tdButtonBase);
-        this.childNodes = [];
-        this.props = this.useParams(params); // 这里的config赋值是要替换掉上面的config的预置值的。
-    }
-    setup() {
-        var _a, _b, _c;
-        const props = this.props;
-        if (props === null || props === void 0 ? void 0 : props.loading) {
-            if ((_a = props === null || props === void 0 ? void 0 : props.slots) === null || _a === void 0 ? void 0 : _a.loading) {
+        if (params === null || params === void 0 ? void 0 : params.loading) {
+            if ((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.loading) {
                 // 如果插槽有 loading
                 // this.icon = props.slots.loading as TdIcon;
                 // this.loadingSlot = new SlotNode('loading', props.slots.loading);
@@ -40,23 +37,23 @@ class TdButtonAbstract extends ui_abstract_1.UI {
                 this.addChild(this.icon);
             }
         }
-        else if ((props === null || props === void 0 ? void 0 : props.svgObj) || ((_b = props === null || props === void 0 ? void 0 : props.slots) === null || _b === void 0 ? void 0 : _b.icon)) {
+        else if ((params === null || params === void 0 ? void 0 : params.svgObj) || ((_b = params === null || params === void 0 ? void 0 : params.slots) === null || _b === void 0 ? void 0 : _b.icon)) {
             this.icon = new td_icon_class_1.TdIcon({
                 name: 'icon-expand',
                 // svgObj: props.svgObj
             });
-            if (props.svgObj) {
-                this.icon.getSlotNode().addSlot(props.svgObj);
+            if (params.svgObj) {
+                this.icon.addChild(params.svgObj);
             }
-            else if ((_c = props === null || props === void 0 ? void 0 : props.slots) === null || _c === void 0 ? void 0 : _c.icon) {
+            else if ((_c = params === null || params === void 0 ? void 0 : params.slots) === null || _c === void 0 ? void 0 : _c.icon) {
                 // this.icon = props.slots.icon;
                 // this.iconSlot = new SlotNode('icon', props.slots.icon);
-                this.icon.getSlotNode().addSlot(props.slots.icon);
+                this.icon.slotChild(params.slots.icon);
             }
             this.addChild(this.icon);
         }
         // this.useIcon(props);
-        if (props === null || props === void 0 ? void 0 : props.slot) {
+        if (params === null || params === void 0 ? void 0 : params.slot) {
             // this.defaultSlot = new SlotNode('default', props.slot);
             // this.icon?.style.addObj($iconLeft);
             // todo 会运行 2 次；
@@ -71,31 +68,10 @@ class TdButtonAbstract extends ui_abstract_1.UI {
                 },
                 childNodes: [this.getSlotNode()]
             });
+            // 没有 this.useSlots，所以这里要手动添加 slot。
+            this.getSlotNode().addSlot(params.slot);
             this.addChild(span);
         }
-        this.useType(props);
-        if (props === null || props === void 0 ? void 0 : props.disabled) {
-            this.disabled = props.disabled;
-            this.style.addObj({
-            // color: $button.disabled.textColor,
-            // backgroundColor: $button.disabled.bgColor,
-            // borderColor: $button.disabled.borderColor,
-            });
-        }
-        const size = (props === null || props === void 0 ? void 0 : props.size) ? props.size : 'default';
-        this.style.addObj(td_button_style_1.$sizeOpts[size]);
-        if (props === null || props === void 0 ? void 0 : props.round) {
-            this.style.addObj({
-                borderRadius: var_1.$borderRadius.round
-            });
-        }
-        else if (props === null || props === void 0 ? void 0 : props.circle) {
-            this.style.addObj({
-                width: td_input_style_1.$inputHeight[props.size || 'default'], // map.get($input-height, 'default');
-                borderRadius: var_1.$borderRadius.circle,
-                padding: var_1.$paddingVerticalMap.default
-            });
-        }
         // 悬浮、聚焦、激活状态样式
         // console.log('then td-button add events . ');
         this.addEvents({
@@ -145,6 +121,34 @@ class TdButtonAbstract extends ui_abstract_1.UI {
                 }
             }
         });
+        this.props = this.useParams(params); // 这里的config赋值是要替换掉上面的config的预置值的。
+    }
+    setup() {
+        console.log('td-button setup . ');
+        const props = this.props;
+        this.useType(props);
+        if (props.disabled) {
+            this.disabled = props.disabled;
+            this.style.addObj({
+            // color: $button.disabled.textColor,
+            // backgroundColor: $button.disabled.bgColor,
+            // borderColor: $button.disabled.borderColor,
+            });
+        }
+        const size = props.size ? props.size : 'default';
+        this.style.addObj(td_button_style_1.$sizeOpts[size]);
+        if (props.round) {
+            this.style.addObj({
+                borderRadius: var_1.$borderRadius.round
+            });
+        }
+        else if (props.circle) {
+            this.style.addObj({
+                width: td_input_style_1.$inputHeight[props.size || 'default'], // map.get($input-height, 'default');
+                borderRadius: var_1.$borderRadius.circle,
+                padding: td_button_style_1.$buttonPaddingVertical.default
+            });
+        }
     }
     useType(params) {
         // const type = params?.type ? params.type : 'default';

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

@@ -1,9 +1,6 @@
-import { ISpan, TypeSvgSvg } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { ITdIcon } from '../td-icon/td-icon.interface';
-export interface ITdButtonAbstract extends IUI {
+import { ITypeConfig, ITypeHtml, TypeSvgSvg } from '@type-dom/framework';
+export interface ITdButtonAbstract extends ITypeHtml {
     className: 'TdButton' | string;
-    childNodes: (ISpan | ITdIcon)[];
 }
 export interface ITdButton extends ITdButtonAbstract {
     className: 'TdButton';
@@ -29,7 +26,7 @@ export type IButtonNativeType = 'button' | 'submit' | 'reset';
  *     color 自定义按钮的颜色。
  *     disabled  按钮是否为禁用状态
  */
-export interface ITdButtonConfig extends IUIConfig {
+export interface ITdButtonConfig extends ITypeConfig {
     size?: IButtonSize;
     disabled?: boolean;
     type?: IButtonType;

package/src/components/basic/td-button/td-button.style.d.ts

@@ -1,5 +1,20 @@
 import { IStyle } from '@type-dom/css-type';
 import { IType } from '../../../styles/var';
+export declare const $buttonBorderRadius: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $buttonPaddingVertical: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $buttonPaddingHorizontal: {
+    large: string;
+    default: string;
+    small: string;
+};
 export declare const $buttonIconSpanGap: {
     large: string;
     default: string;
@@ -12,8 +27,4 @@ export declare function buttonVariant($type: IType): void;
 export declare const $buttonPlainColors: Record<string, Record<string, Partial<IStyle>>>;
 export declare function buttonPlain($type: IType): void;
 export declare const $borderRightColor = "rgba(255, 255, 255, .5)";
-export declare const $buttonBorderRadius: {
-    large: string;
-    default: string;
-    small: string;
-};
+export declare function buttonSize($paddingVertical: string, $paddingHorizontal: string, $fontSize: string, $borderRadius: string | number): IStyle;

package/src/components/basic/td-button/td-button.style.js

@@ -1,9 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$buttonBorderRadius = exports.$borderRightColor = exports.$buttonPlainColors = exports.$buttonStateColors = exports.$tdButtonBase = exports.$sizeOpts = exports.$buttonIconSpanGap = void 0;
+exports.$borderRightColor = exports.$buttonPlainColors = exports.$buttonStateColors = exports.$tdButtonBase = exports.$sizeOpts = exports.$buttonIconSpanGap = exports.$buttonPaddingHorizontal = exports.$buttonPaddingVertical = exports.$buttonBorderRadius = void 0;
 exports.buttonVariant = buttonVariant;
 exports.buttonPlain = buttonPlain;
+exports.buttonSize = buttonSize;
 const var_1 = require("../../../styles/var");
+exports.$buttonBorderRadius = {
+    large: var_1.$borderRadius.base,
+    default: var_1.$borderRadius.base,
+    small: parseInt(var_1.$borderRadius.base, 10) - 1 + 'px',
+};
+exports.$buttonPaddingVertical = {
+    large: '13px',
+    default: '9px',
+    small: '6px',
+};
+exports.$buttonPaddingHorizontal = {
+    large: '20px',
+    default: '16px',
+    small: '12px',
+};
 exports.$buttonIconSpanGap = {
     large: '8px',
     default: '6px',
@@ -13,26 +29,26 @@ exports.$sizeOpts = {
     // mini: {
     //   height: $commonComponentSize.small,
     //   fontSize: $fontSizeMap.small,
-    //   padding: $paddingVerticalMap.small + ' ' + $paddingHorizontalMap.small,
-    //   borderRadius: $borderRadiusMap.small
+    //   padding: $buttonPaddingVertical.small + ' ' + $buttonPaddingHorizontal.small,
+    //   borderRadius: $buttonBorderRadius.small
     // },
     small: {
         height: var_1.$commonComponentSize.small,
         fontSize: var_1.$fontSizeMap.small,
-        padding: var_1.$paddingVerticalMap.small + ' ' + var_1.$paddingHorizontalMap.small,
-        borderRadius: var_1.$borderRadiusMap.small
+        padding: exports.$buttonPaddingVertical.small + ' ' + exports.$buttonPaddingHorizontal.small,
+        borderRadius: exports.$buttonBorderRadius.small
     },
     default: {
         height: var_1.$commonComponentSize.default,
         fontSize: var_1.$fontSizeMap.default,
-        padding: var_1.$paddingVerticalMap.default + ' ' + var_1.$paddingHorizontalMap.default,
-        borderRadius: var_1.$borderRadiusMap.default
+        padding: exports.$buttonPaddingVertical.default + ' ' + exports.$buttonPaddingHorizontal.default,
+        borderRadius: exports.$buttonBorderRadius.default
     },
     large: {
         height: var_1.$commonComponentSize.large,
         fontSize: var_1.$fontSizeMap.large,
-        padding: var_1.$paddingVerticalMap.large + ' ' + var_1.$paddingHorizontalMap.large,
-        borderRadius: var_1.$borderRadiusMap.large
+        padding: exports.$buttonPaddingVertical.large + ' ' + exports.$buttonPaddingHorizontal.large,
+        borderRadius: exports.$buttonBorderRadius.large
     }
 };
 exports.$tdButtonBase = {
@@ -55,9 +71,9 @@ exports.$tdButtonBase = {
     appearance: 'none',
     // '-webkit-appearance': 'none',
     backgroundColor: var_1.$button.bgColor, // getCssVar('button', 'bg-color');
-    // border: $border, // getCssVar('border'),
-    borderWidth: var_1.$borderWidth,
-    borderStyle: var_1.$borderStyle,
+    border: var_1.$border, // getCssVar('border'),
+    // borderWidth: $borderWidth,
+    // borderStyle: $borderStyle,
     borderColor: var_1.$button.borderColor, // getCssVar('button', 'border-color');
     padding: '8px 15px'
 };
@@ -158,8 +174,18 @@ for (const $type of [
     buttonPlain($type);
 }
 exports.$borderRightColor = 'rgba(255, 255, 255, .5)';
-exports.$buttonBorderRadius = {
-    large: var_1.$borderRadius.base,
-    default: var_1.$borderRadius.base,
-    small: parseInt(var_1.$borderRadius.base) - 1 + 'px',
-};
+// export const $buttonBorderRadius = {
+//   large: $borderRadius.base,
+//   default: $borderRadius.base,
+//   small: parseInt($borderRadius.base) - 1 + 'px',
+// };
+function buttonSize($paddingVertical, $paddingHorizontal, $fontSize, $borderRadius) {
+    return {
+        padding: $paddingVertical + ' ' + $paddingHorizontal,
+        fontSize: $fontSize,
+        borderRadius: $borderRadius + '',
+        //  &.is-round {
+        //    padding: $padding-vertical $padding-horizontal;
+        //  }
+    };
+}

package/src/components/basic/td-button-group/td-button-group.class.d.ts

@@ -1,8 +1,9 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { TdButton } from '../td-button/td-button.class';
 import { ITdButtonGroup, ITdButtonGroupConfig } from './td-button-group.interface';
-export declare class TdButtonGroup extends UI implements ITdButtonGroup {
+export declare class TdButtonGroup extends TypeDiv implements ITdButtonGroup {
     className: 'TdButtonGroup';
+    childNodes: TdButton[];
     constructor(params: ITdButtonGroupConfig);
     setup(): void;
     addBtnStyle(btn: TdButton, index: number): void;

package/src/components/basic/td-button-group/td-button-group.class.js

@@ -1,67 +1,64 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdButtonGroup = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
 const td_button_style_1 = require("../td-button/td-button.style");
-const td_button_class_1 = require("../td-button/td-button.class");
-class TdButtonGroup extends ui_abstract_1.UI {
+class TdButtonGroup extends framework_1.TypeDiv {
     constructor(params) {
-        super(params);
+        super();
         this.className = 'TdButtonGroup';
+        this.attr.addName('td-button-group');
         this.style.addObj({
             display: 'inline-block',
-            verticalAlign: 'middle'
+            verticalAlign: 'middle',
         });
+        this.childNodes = [];
         if (params === null || params === void 0 ? void 0 : params.slot) {
             this.slotChild(params.slot);
         }
         this.useParams(params);
     }
     setup() {
-        this.children.forEach((btn, index) => {
-            if (btn instanceof td_button_class_1.TdButton) {
-                if (this.children.length > 1) {
-                    this.addBtnStyle(btn, index);
-                }
+        console.log('td-button-group setup . ');
+        this.childNodes.forEach((btn, index) => {
+            if (this.childNodes.length > 1) {
+                this.setBtnStyle(btn, index);
             }
-        });
-        this.children.forEach((btn, index) => {
-            if (btn instanceof td_button_class_1.TdButton) {
-                btn.addEvents({
-                    mouseenter: () => {
-                        btn.style.setObj({
-                            zIndex: 1
-                        });
-                        if (this.children.length > 1) {
-                            this.setBtnStyle(btn, index);
-                        }
-                    },
-                    mouseleave: () => {
-                        btn.style.setObj({
-                            zIndex: 1
-                        });
-                        if (this.children.length > 1) {
-                            this.setBtnStyle(btn, index);
-                        }
+            btn.addEvents({
+                mouseenter: () => {
+                    btn.style.setObj({
+                        zIndex: 1,
+                    });
+                    if (this.childNodes.length > 1) {
+                        this.setBtnStyle(btn, index);
                     }
-                });
-            }
+                },
+                mouseleave: () => {
+                    btn.style.setObj({
+                        zIndex: 1,
+                    });
+                    if (this.childNodes.length > 1) {
+                        this.setBtnStyle(btn, index);
+                    }
+                },
+            });
         });
     }
     addBtnStyle(btn, index) {
+        console.log('td-button-group addBtnStyle . ');
         if (index === 0) {
             btn.style.addObj({
                 borderTopRightRadius: 0,
                 borderBottomRightRadius: 0,
                 marginRight: '-1px',
-                borderRightColor: td_button_style_1.$borderRightColor
+                borderRightColor: td_button_style_1.$borderRightColor,
             });
         }
         else if (index === this.children.length - 1) {
             btn.style.addObj({
                 borderTopLeftRadius: 0,
                 borderBottomLeftRadius: 0,
-                borderLeftColor: td_button_style_1.$borderRightColor
+                borderLeftColor: td_button_style_1.$borderRightColor,
             });
         }
         else {
@@ -71,7 +68,7 @@ class TdButtonGroup extends ui_abstract_1.UI {
                 borderBottomRightRadius: 0,
                 borderBottomLeftRadius: 0,
                 borderLeftColor: td_button_style_1.$borderRightColor,
-                borderRightColor: td_button_style_1.$borderRightColor
+                borderRightColor: td_button_style_1.$borderRightColor,
             });
         }
     }
@@ -81,14 +78,14 @@ class TdButtonGroup extends ui_abstract_1.UI {
                 borderTopRightRadius: 0,
                 borderBottomRightRadius: 0,
                 marginRight: '-1px',
-                borderRightColor: td_button_style_1.$borderRightColor
+                borderRightColor: td_button_style_1.$borderRightColor,
             });
         }
         else if (index === this.children.length - 1) {
             btn.style.setObj({
                 borderTopLeftRadius: 0,
                 borderBottomLeftRadius: 0,
-                borderLeftColor: td_button_style_1.$borderRightColor
+                borderLeftColor: td_button_style_1.$borderRightColor,
             });
         }
         else {
@@ -98,7 +95,7 @@ class TdButtonGroup extends ui_abstract_1.UI {
                 borderBottomRightRadius: 0,
                 borderBottomLeftRadius: 0,
                 borderLeftColor: td_button_style_1.$borderRightColor,
-                borderRightColor: td_button_style_1.$borderRightColor
+                borderRightColor: td_button_style_1.$borderRightColor,
             });
         }
     }

package/src/components/basic/td-button-group/td-button-group.interface.d.ts

@@ -1,9 +1,9 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
 import { IButtonSize, IButtonType, ITdButtonConfig } from '../td-button/td-button.interface';
-export interface ITdButtonGroup extends IUI {
+export interface ITdButtonGroup extends ITypeDiv {
     className: 'TdButtonGroup';
 }
-export interface ITdButtonGroupConfig extends IUIConfig {
+export interface ITdButtonGroupConfig extends ITypeConfig {
     /**
      * @description control the size of buttons in this button-group
      */

package/src/components/basic/td-container/td-aside/td-aside.class.d.ts

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

package/src/components/basic/td-container/td-aside/td-aside.class.js

@@ -2,18 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdAside = void 0;
 const utils_1 = require("@type-dom/utils");
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
-class TdAside extends ui_abstract_1.UI {
+const framework_1 = require("@type-dom/framework");
+class TdAside extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdAside';
+        this.attr.addName('td-aside');
         this.style.addObj({
             overflow: 'auto',
             boxSizing: 'border-box',
             flexShrink: 0,
-            width: (params === null || params === void 0 ? void 0 : params.width) ? (0, utils_1.addUnit)(params.width) : '300px'
+            width: (params === null || params === void 0 ? void 0 : params.width) ? (0, utils_1.addUnit)(params.width) : '300px',
         });
-        this.addChild(this.getSlotNode());
+        this.slotChild(params.slot);
         this.props = this.useParams(params);
     }
 }

package/src/components/basic/td-container/td-aside/td-aside.interface.d.ts

@@ -1,7 +1,7 @@
-import { IUI, IUIConfig } from '../../../../ui/ui.interface';
-export interface ITdAside extends IUI {
+import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+export interface ITdAside extends ITypeDiv {
     className: 'TdAside';
 }
-export interface ITdAsideConfig extends IUIConfig {
+export interface ITdAsideConfig extends ITypeConfig {
     width?: string | number;
 }

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

@@ -1,10 +1,9 @@
-import { TypeElement } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { TypeElement, TypeSection } from '@type-dom/framework';
 import { TdAside } from './td-aside/td-aside.class';
 import { TdHeader } from './td-header/td-header.class';
 import { TdMain } from './td-main/td-main.class';
 import { ITdContainer, ITdContainerConfig } from './td-container.interface';
-export declare class TdContainer extends UI implements ITdContainer {
+export declare class TdContainer extends TypeSection implements ITdContainer {
     className: 'TdContainer';
     props: ITdContainerConfig;
     childNodes: (TdAside | TdHeader | TdMain | TdContainer | TypeElement)[];

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

@@ -1,13 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdContainer = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-class TdContainer extends ui_abstract_1.UI {
+const framework_1 = require("@type-dom/framework");
+class TdContainer extends framework_1.TypeSection {
     constructor(params = {}) {
-        super(params, 'section');
+        super();
         this.className = 'TdContainer';
-        this.attr.addName('td-container');
-        this.attr.addClass('td-container');
+        this.childNodes = [];
+        this.attr.addObj({
+            name: 'td-container',
+            class: 'td-container'
+        });
         this.style.addObj({
             display: 'flex',
             flexDirection: 'row', // vertical ===> column
@@ -16,13 +19,12 @@ class TdContainer extends ui_abstract_1.UI {
             boxSizing: 'border-box',
             minWidth: 0
         });
-        this.childNodes = [];
         if (params === null || params === void 0 ? void 0 : params.vertical) {
             this.style.addObj({
                 flexDirection: 'column'
             });
         }
-        this.addChild(this.getSlotNode());
+        this.slotChild(params.slot);
         this.props = this.useParams(params);
     }
 }

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

@@ -1,13 +1,12 @@
-import { TypeElement } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeSection, TypeElement } from '@type-dom/framework';
 import { TdAside } from './td-aside/td-aside.class';
 import { TdHeader } from './td-header/td-header.class';
 import { TdMain } from './td-main/td-main.class';
 import { TdContainer } from './td-container.class';
-export interface ITdContainer extends IUI {
+export interface ITdContainer extends ITypeSection {
     className: 'TdContainer';
 }
-export interface ITdContainerConfig extends IUIConfig {
+export interface ITdContainerConfig extends ITypeConfig {
     name?: string;
     vertical?: boolean;
     direction?: 'vertical' | 'horizontal';

package/src/components/basic/td-container/td-container.js

@@ -10,8 +10,9 @@ class TdContainerComp extends HTMLElement {
     connectedCallback() {
         // 省去了监听document加载完毕
         const title = 'td-container';
-        const container = new td_container_class_1.TdContainer();
-        container.attr.setName(title);
+        const container = new td_container_class_1.TdContainer({
+            attrObj: { name: title },
+        });
         // 渲染
         container.mount();
         console.log('container is ', container);

package/src/components/basic/td-container/td-footer/td-footer.class.d.ts

@@ -1,6 +1,6 @@
-import { UI } from '../../../../ui/ui.abstract';
+import { TypeFooter } from '@type-dom/framework';
 import type { ITdFooter, ITdFooterConfig } from './td-footer.interface';
-export declare class TdFooter extends UI implements ITdFooter {
+export declare class TdFooter extends TypeFooter implements ITdFooter {
     className: 'TdFooter';
     props: ITdFooterConfig;
     constructor(params?: ITdFooterConfig);