@type-dom/ui 0.0.1

package/README.md

@@ -0,0 +1,11 @@
+# ui
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build ui` to build the library.
+
+## Running unit tests
+
+Run `nx test ui` to execute the unit tests via [Jest](https://jestjs.io).

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@type-dom/ui",
+  "version": "0.0.1",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "type": "commonjs",
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/basic/index.d.ts

@@ -0,0 +1,15 @@
+export { TdButton } from './td-button/td-button.class';
+export type { ITdButton } from './td-button/td-button.interface';
+export { TdIcon } from './td-icon/td-icon.class';
+export type { ITdIcon } from './td-icon/td-icon.interface';
+export { TdContainer } from './td-container/td-container.class';
+export { TdContainerComp } from './td-container/td-container';
+export type { ITdContainer } from './td-container/td-container.interface';
+export { TdHeader } from './td-container/td-header/td-header.class';
+export type { ITdHeader, ITdHeaderConfig } from './td-container/td-header/td-header.interface';
+export { TdAside } from './td-container/td-aside/td-aside.class';
+export type { ITdAside, ITdAsideConfig } from './td-container/td-aside/td-aside.interface';
+export { TdMain } from './td-container/td-main/td-main.class';
+export type { ITdMain, ITdMainConfig } from './td-container/td-main/td-main.interface';
+export { TdFooter } from './td-container/td-footer/td-footer.class';
+export type { ITdFooter } from './td-container/td-footer/td-footer.interface';

package/src/basic/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdFooter = exports.TdMain = exports.TdAside = exports.TdHeader = exports.TdContainerComp = exports.TdContainer = exports.TdIcon = exports.TdButton = void 0;
+var td_button_class_1 = require("./td-button/td-button.class");
+Object.defineProperty(exports, "TdButton", { enumerable: true, get: function () { return td_button_class_1.TdButton; } });
+var td_icon_class_1 = require("./td-icon/td-icon.class");
+Object.defineProperty(exports, "TdIcon", { enumerable: true, get: function () { return td_icon_class_1.TdIcon; } });
+var td_container_class_1 = require("./td-container/td-container.class");
+Object.defineProperty(exports, "TdContainer", { enumerable: true, get: function () { return td_container_class_1.TdContainer; } });
+var td_container_1 = require("./td-container/td-container");
+Object.defineProperty(exports, "TdContainerComp", { enumerable: true, get: function () { return td_container_1.TdContainerComp; } });
+var td_header_class_1 = require("./td-container/td-header/td-header.class");
+Object.defineProperty(exports, "TdHeader", { enumerable: true, get: function () { return td_header_class_1.TdHeader; } });
+var td_aside_class_1 = require("./td-container/td-aside/td-aside.class");
+Object.defineProperty(exports, "TdAside", { enumerable: true, get: function () { return td_aside_class_1.TdAside; } });
+var td_main_class_1 = require("./td-container/td-main/td-main.class");
+Object.defineProperty(exports, "TdMain", { enumerable: true, get: function () { return td_main_class_1.TdMain; } });
+var td_footer_class_1 = require("./td-container/td-footer/td-footer.class");
+Object.defineProperty(exports, "TdFooter", { enumerable: true, get: function () { return td_footer_class_1.TdFooter; } });

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

@@ -0,0 +1,16 @@
+import { TypeButton, TextNode, Span, TypeHtml, XElement } from '@type-dom/framework';
+import { TdIcon } from '../td-icon/td-icon.class';
+import { ITdButton, ITdButtonConfig } from './td-button.interface';
+export declare class TdButton extends TypeButton implements ITdButton {
+    className: 'TdButton';
+    parent?: TypeHtml | XElement;
+    childNodes: (Span | TdIcon)[];
+    span: Span;
+    textNode: TextNode;
+    private type?;
+    private plain?;
+    private disabled?;
+    constructor(config?: Partial<ITdButtonConfig>);
+    setConfig(config?: Partial<ITdButtonConfig>): void;
+    initEvents(): void;
+}

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

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdButton = void 0;
+const rxjs_1 = require("rxjs");
+const framework_1 = require("@type-dom/framework");
+const td_icon_style_1 = require("../td-icon/td-icon.style");
+const var_1 = require("../../styles/var");
+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 TdButton extends framework_1.TypeButton {
+    constructor(config) {
+        super();
+        this.className = 'TdButton';
+        // this.template = new Template(this);
+        this.span = new framework_1.Span(this);
+        this.span.addStyleObj({
+            display: 'inline-flex',
+            alignItems: 'center',
+        });
+        this.textNode = new framework_1.TextNode();
+        this.span.addChild(this.textNode);
+        const slot = new framework_1.Slot(this.span);
+        this.span.addChild(slot);
+        this.childNodes = [this.span];
+        this.setConfig(config);
+    }
+    setConfig(config) {
+        this.addStyleObj(td_button_style_1.tdButtonBase);
+        if (config === null || config === void 0 ? void 0 : config.title) {
+            this.textNode.setText(config.title);
+        }
+        if (config === null || config === void 0 ? void 0 : config.SvgClass) {
+            const icon = new td_icon_class_1.TdIcon({
+                SvgClass: config.SvgClass,
+            });
+            if (config.iconPosition === 'right') {
+                icon.addStyleObj(td_icon_style_1.$iconRight);
+                this.addChild(icon);
+            }
+            else {
+                if (config.title) {
+                    icon.addStyleObj(td_icon_style_1.$iconLeft);
+                }
+                // else {
+                //   icon.addStyleObj()
+                // }
+                this.unshiftChild(icon);
+            }
+            if (config.loading) {
+                icon.addStyleObj(td_icon_style_1.$iconLoading);
+            }
+        }
+        // const type = config?.type ? config.type : 'default';
+        // this.type = type;
+        if (config === null || config === void 0 ? void 0 : config.type) {
+            this.type = config.type;
+            if (config === null || config === void 0 ? void 0 : config.plain) {
+                console.log('config.plain . ');
+                this.plain = config.plain;
+                if (config.disabled) {
+                    this.addStyleObj(td_button_style_1.$buttonPlainColors[config.type].disabled);
+                }
+                else {
+                    console.log(td_button_style_1.$buttonPlainColors[config.type].default);
+                    this.addStyleObj(td_button_style_1.$buttonPlainColors[config.type].default);
+                }
+            }
+            else {
+                if (config === null || config === void 0 ? void 0 : config.disabled) {
+                    console.log('config?.disabled is true . $button.disabled is ', var_1.$button.disabled);
+                    this.disabled = config.disabled;
+                    this.addStyleObj(td_button_style_1.$buttonStateColors[config.type].disabled);
+                }
+                else {
+                    this.addStyleObj(td_button_style_1.$buttonStateColors[config.type].default);
+                }
+            }
+        }
+        const size = (config === null || config === void 0 ? void 0 : config.size) ? config.size : 'middle';
+        this.addStyleObj(td_button_style_1.sizeOpts[size]);
+        if (config === null || config === void 0 ? void 0 : config.round) {
+            this.addStyleObj({
+                borderRadius: var_1.$borderRadius.round,
+            });
+        }
+        else if (config === null || config === void 0 ? void 0 : config.circle) {
+            this.addStyleObj({
+                borderRadius: var_1.$borderRadius.circle,
+                padding: var_1.$buttonPaddingVertical.default
+            });
+        }
+    }
+    // 悬浮、聚焦、激活状态样式
+    initEvents() {
+        this.events.push((0, rxjs_1.fromEvent)(this.dom, 'mouseover').subscribe(() => {
+            if (this.disabled) {
+                this.setStyleObj({
+                    cursor: framework_1.StyleCursor.notAllowed
+                });
+            }
+            else {
+                if (this.type) {
+                    this.setStyleObj(td_button_style_1.$buttonStateColors[this.type].hover);
+                }
+                else {
+                    this.setStyleObj({
+                        color: var_1.$button.hover.textColor,
+                        backgroundColor: var_1.$button.hover.borderColor,
+                        borderColor: var_1.$button.hover.borderColor,
+                    });
+                }
+            }
+        }), (0, rxjs_1.fromEvent)(this.dom, 'mouseout').subscribe(() => {
+            if (this.disabled) {
+                this.setStyleObj({
+                    cursor: framework_1.StyleCursor.auto,
+                });
+            }
+            else {
+                if (this.type) {
+                    if (this.plain) {
+                        this.setStyleObj(td_button_style_1.$buttonPlainColors[this.type].default);
+                    }
+                    else {
+                        this.setStyleObj(td_button_style_1.$buttonStateColors[this.type].default);
+                    }
+                }
+                else {
+                    this.setStyleObj({
+                        color: var_1.$button.textColor,
+                        backgroundColor: var_1.$button.bgColor,
+                        borderColor: var_1.$button.borderColor,
+                    });
+                }
+            }
+        }));
+    }
+}
+exports.TdButton = TdButton;

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

@@ -0,0 +1,38 @@
+import { ITypeButton, ISpan } from '@type-dom/framework';
+import { ITdIcon } from '../td-icon/td-icon.interface';
+export interface ITdButton extends ITypeButton {
+    className: 'TdButton';
+    childNodes: (ISpan | ITdIcon)[];
+}
+export type IButtonSize = '' | 'mini' | 'small' | 'middle' | 'large';
+export type IButtonType = 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger' | 'text' | '';
+export type IButtonNativeType = 'button' | 'submit' | 'reset';
+/**
+ *     type、plain、round 和 circle 来定义按钮的样式。
+ *         type: primary/success/warning/danger/info
+ *         size: mini/small/middle/large
+ *         round,
+ *         circle: boolean
+ *     使用 icon 属性来为按钮添加图标。
+ *         icon: 'Search'
+ *     通过设置 loading 属性为 true 来显示加载中状态。
+ *     loading-icon  自定义加载中状态图标组件
+ *     color 自定义按钮的颜色。
+ *     disabled  按钮是否为禁用状态
+ */
+export interface ITdButtonConfig {
+    size: IButtonSize;
+    disabled: boolean;
+    title: string;
+    type: IButtonType;
+    SvgClass: any;
+    iconPosition: 'left' | 'right';
+    icon: string;
+    nativeType: IButtonNativeType;
+    loading: boolean;
+    plain: boolean;
+    round: boolean;
+    circle: boolean;
+    loadingIcon: string;
+    color: string;
+}

package/src/basic/td-button/td-button.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,13 @@
+import { IStyle } from '@type-dom/framework';
+import { IType } from '../../styles/var';
+export declare const $buttonIconSpanGap: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const sizeOpts: Record<string, Partial<IStyle>>;
+export declare const tdButtonBase: Partial<IStyle>;
+export declare const $buttonStateColors: Record<string, Record<string, Partial<IStyle>>>;
+export declare function buttonVariant($type: IType): void;
+export declare const $buttonPlainColors: Record<string, Record<string, Partial<IStyle>>>;
+export declare function buttonPlain($type: IType): void;

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

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonPlain = exports.$buttonPlainColors = exports.buttonVariant = exports.$buttonStateColors = exports.tdButtonBase = exports.sizeOpts = exports.$buttonIconSpanGap = void 0;
+const framework_1 = require("@type-dom/framework");
+const var_1 = require("../../styles/var");
+exports.$buttonIconSpanGap = {
+    large: '8px',
+    default: '6px',
+    small: '4px',
+};
+exports.sizeOpts = {
+    mini: {
+        height: var_1.$commonComponentSize.small,
+        fontSize: var_1.$buttonFontSize.small,
+        padding: var_1.$buttonPaddingVertical.small + ' ' + var_1.$buttonPaddingHorizontal.small,
+        borderRadius: var_1.$buttonBorderRadius.small,
+    },
+    small: {
+        height: var_1.$commonComponentSize.small,
+        fontSize: var_1.$buttonFontSize.small,
+        padding: var_1.$buttonPaddingVertical.small + ' ' + var_1.$buttonPaddingHorizontal.small,
+        borderRadius: var_1.$buttonBorderRadius.small,
+    },
+    middle: {
+        height: var_1.$commonComponentSize.default,
+        fontSize: var_1.$buttonFontSize.default,
+        padding: var_1.$buttonPaddingVertical.default + ' ' + var_1.$buttonPaddingHorizontal.default,
+        borderRadius: var_1.$buttonBorderRadius.default,
+    },
+    large: {
+        height: var_1.$commonComponentSize.large,
+        fontSize: var_1.$buttonFontSize.large,
+        padding: var_1.$buttonPaddingVertical.large + ' ' + var_1.$buttonPaddingHorizontal.large,
+        borderRadius: var_1.$buttonBorderRadius.large,
+    }
+};
+exports.tdButtonBase = {
+    display: framework_1.StyleDisplay.inlineFlex,
+    justifyContent: 'center',
+    alignItems: 'center',
+    lineHeight: '1',
+    // min-height will expand when in flex
+    height: '32px',
+    whiteSpace: 'nowrap',
+    cursor: framework_1.StyleCursor.pointer,
+    color: var_1.$button.textColor,
+    textAlign: 'center',
+    boxSizing: 'border-box',
+    outline: 'none',
+    transition: '.1s',
+    fontWeight: var_1.$button.fontWeight,
+    userSelect: 'none',
+    verticalAlign: 'middle',
+    appearance: 'none',
+    // '-webkit-appearance': 'none',
+    backgroundColor: var_1.$button.bgColor,
+    // border: $border, // getCssVar('border'),
+    borderWidth: var_1.$borderWidth,
+    borderStyle: var_1.$borderStyle,
+    borderColor: var_1.$button.borderColor,
+    padding: '8px 15px',
+};
+exports.$buttonStateColors = {};
+function buttonVariant($type) {
+    const $buttonColorTypes = {
+        default: {
+            color: var_1.$colorWhite,
+            backgroundColor: var_1.$colors[$type].base,
+            borderColor: var_1.$colors[$type].base,
+            borderWidth: var_1.$borderWidth,
+            outlineColor: var_1.$colors[$type]['light-5'],
+            // activeColor: $colors[$type]['dark-2'],
+        },
+        hover: {
+            color: var_1.$colorWhite,
+            // 'link-text-color': $colors[$type]['light-5'],
+            backgroundColor: var_1.$colors[$type]['light-3'],
+            borderColor: var_1.$colors[$type]['light-3'], // ['color', $type, 'light-3'],
+        },
+        active: {
+            backgroundColor: var_1.$colors[$type]['dark-2'],
+            borderColor: var_1.$colors[$type]['dark-2'] // ['color', $type, 'dark-2'],
+        },
+        disabled: {
+            color: var_1.$colorWhite,
+            backgroundColor: var_1.$colors[$type]['light-5'],
+            borderColor: var_1.$colors[$type]['light-5'], // ['color', $type, 'light-5'],
+        },
+    };
+    exports.$buttonStateColors[$type] = $buttonColorTypes;
+    // for (const $type1 in $buttonColorTypes) {
+    //   console.log('$type1 is ', $type1);
+    //   const $typeMap = $buttonColorTypes[$type1];
+    //   console.log('$typeMap is ', $typeMap);
+    //   for (const $typeColor in $typeMap) {
+    //     console.log('$typeColor is ', $typeColor);
+    //     const $list = $typeMap[$typeColor];
+    //     console.log('$list is ', $list);
+    //     // cssVarFromGlobal(('button', $type, $typeColor), $list);
+    //   }
+    // }
+    // @each $type, $typeMap in $buttonColorTypes {
+    //   @each $typeColor, $list in $typeMap {
+    //     @include css-var-from-global(('button', $type, $typeColor), $list);
+    //   }
+    // }
+    // &.is-plain,
+    // &.is-text,
+    // &.is-link {
+    //   @include button-plain($type);
+    // }
+}
+exports.buttonVariant = buttonVariant;
+for (const $type of ['default', 'primary', 'success', 'warning', 'danger', 'info']) {
+    // @include m($type) {
+    //   @include button-variant($type);
+    //   }
+    buttonVariant($type);
+}
+exports.$buttonPlainColors = {};
+function buttonPlain($type) {
+    const $buttonColorTypes = {
+        default: {
+            color: var_1.$colors[$type].base,
+            backgroundColor: var_1.$colors[$type]['light-9'],
+            borderColor: var_1.$colors[$type]['light-5'],
+            borderWidth: var_1.$borderWidth,
+        },
+        hover: {
+            color: var_1.$colorWhite,
+            backgroundColor: var_1.$colors[$type].base,
+            borderColor: var_1.$colors[$type].base,
+        },
+        active: {
+            color: var_1.$colorWhite
+        }
+    };
+    exports.$buttonPlainColors[$type] = $buttonColorTypes;
+}
+exports.buttonPlain = buttonPlain;
+for (const $type of ['default', 'primary', 'success', 'warning', 'danger', 'info']) {
+    buttonPlain($type);
+}

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

@@ -0,0 +1,6 @@
+import { TypeAside } from '@type-dom/framework';
+import { ITdAsideConfig } from './td-aside.interface';
+export declare class TdAside extends TypeAside {
+    className: 'TdAside';
+    constructor(config?: ITdAsideConfig);
+}

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdAside = void 0;
+const framework_1 = require("@type-dom/framework");
+class TdAside extends framework_1.TypeAside {
+    constructor(config) {
+        super();
+        this.className = 'TdAside';
+        this.addStyleObj({
+            overflow: 'auto',
+            boxSizing: 'border-box',
+            flexShrink: 0,
+            width: (config === null || config === void 0 ? void 0 : config.width) || '300px'
+        });
+    }
+}
+exports.TdAside = TdAside;

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

@@ -0,0 +1,7 @@
+import { ITypeAside } from '@type-dom/framework';
+export interface ITdAside extends ITypeAside {
+    className: 'td-aside';
+}
+export interface ITdAsideConfig {
+    width: string | number;
+}

package/src/basic/td-container/td-aside/td-aside.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,7 @@
+import { TypeHtml, TypeSection, XElement } from '@type-dom/framework';
+import { ITdContainerConfig } from './td-container.interface';
+export declare class TdContainer extends TypeSection {
+    className: 'TdContainer';
+    parent?: TypeHtml | XElement;
+    constructor(config?: ITdContainerConfig);
+}

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdContainer = void 0;
+const framework_1 = require("@type-dom/framework");
+// import '../../style/scss/index.scss';
+class TdContainer extends framework_1.TypeSection {
+    constructor(config) {
+        super();
+        this.className = 'TdContainer';
+        this.addAttrName('td-container');
+        this.addAttrClass('td-container');
+        this.addStyleObj({
+            display: 'flex',
+            flexDirection: 'row',
+            flex: 1,
+            flexBasis: 'auto',
+            boxSizing: 'border-box',
+            minWidth: 0,
+        });
+        if (config === null || config === void 0 ? void 0 : config.vertical) {
+            this.addStyleObj({
+                flexDirection: 'column'
+            });
+        }
+    }
+}
+exports.TdContainer = TdContainer;

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

@@ -0,0 +1,8 @@
+export declare class TdContainerComp extends HTMLElement {
+    static observedAttributes: never[];
+    /**
+     * connectedCallback会在 custom element 首次被插入到文档 DOM 节点上时被调用，
+     * 而 attributeChangedCallback则会在 custom element 增加、删除或者修改某个属性时被调用。
+     */
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,8 @@
+import { ITypeSection } from '@type-dom/framework';
+export interface ITdContainer extends ITypeSection {
+    className: 'TdContainer';
+}
+export interface ITdContainerConfig {
+    vertical: boolean;
+    direction: 'vertical' | 'horizontal';
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdContainerComp = void 0;
+const td_container_class_1 = require("./td-container.class");
+class TdContainerComp extends HTMLElement {
+    /**
+     * connectedCallback会在 custom element 首次被插入到文档 DOM 节点上时被调用，
+     * 而 attributeChangedCallback则会在 custom element 增加、删除或者修改某个属性时被调用。
+     */
+    connectedCallback() {
+        const title = 'td-container';
+        const container = new td_container_class_1.TdContainer();
+        container.setAttrName(title);
+        // 渲染
+        container.render();
+        console.log('container is ', container);
+    }
+}
+exports.TdContainerComp = TdContainerComp;
+TdContainerComp.observedAttributes = [];
+customElements.define('td-container', TdContainerComp);

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdFooter = void 0;
+const framework_1 = require("@type-dom/framework");
+class TdFooter extends framework_1.TypeFooter {
+    constructor(config) {
+        super();
+        this.className = 'TdFooter';
+        this.addStyleObj({
+            padding: '0 20px',
+            height: (config === null || config === void 0 ? void 0 : config.height) || '60px',
+            boxSizing: 'border-box',
+            flexShrink: 0,
+            backgroundColor: '#a0cfff',
+        });
+    }
+}
+exports.TdFooter = TdFooter;

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

@@ -0,0 +1,7 @@
+import { ITypeFooter } from '@type-dom/framework';
+export interface ITdFooter extends ITypeFooter {
+    className: 'TdFooter';
+}
+export interface ITdFooterConfig {
+    height: string;
+}

package/src/basic/td-container/td-footer/td-footer.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,8 @@
+import { TypeHeader } from '@type-dom/framework';
+import type { ITdHeader, ITdHeaderConfig } from './td-header.interface';
+import { TdContainer } from '../td-container.class';
+export declare class TdHeader extends TypeHeader implements ITdHeader {
+    className: 'TdHeader';
+    parent?: TdContainer;
+    constructor(config?: ITdHeaderConfig);
+}

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdHeader = void 0;
+const framework_1 = require("@type-dom/framework");
+class TdHeader extends framework_1.TypeHeader {
+    constructor(config) {
+        super();
+        this.className = 'TdHeader';
+        this.addStyleObj({
+            padding: '0 20px',
+            height: (config === null || config === void 0 ? void 0 : config.height) || '60px',
+            boxSizing: 'border-box',
+            flexShrink: 0,
+            backgroundColor: '#a0cfff',
+        });
+    }
+}
+exports.TdHeader = TdHeader;

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

@@ -0,0 +1,7 @@
+import { ITypeHeader } from '@type-dom/framework';
+export interface ITdHeader extends ITypeHeader {
+    className: 'TdHeader';
+}
+export interface ITdHeaderConfig {
+    height: string;
+}

package/src/basic/td-container/td-header/td-header.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,6 @@
+import { TypeMain } from '@type-dom/framework';
+import { ITdMain } from './td-main.interface';
+export declare class TdMain extends TypeMain implements ITdMain {
+    className: 'TdMain';
+    constructor();
+}

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdMain = void 0;
+const framework_1 = require("@type-dom/framework");
+class TdMain extends framework_1.TypeMain {
+    constructor() {
+        super();
+        this.className = 'TdMain';
+        this.addStyleObj({
+            display: 'block',
+            flex: 1,
+            flexBasis: 'auto',
+            overflow: 'auto',
+            boxSizing: 'border-box',
+            padding: '20px',
+        });
+    }
+}
+exports.TdMain = TdMain;