@type-dom/ui 0.0.1 → 0.0.3

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

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdButtonGroup = void 0;
+const ui_1 = require("@type-dom/ui");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_button_style_1 = require("../td-button/td-button.style");
+class TdButtonGroup extends ui_abstract_1.UI {
+    constructor(config) {
+        super();
+        this.className = 'TdButtonGroup';
+        this.addStyleObj({
+            display: 'inline-block',
+            verticalAlign: 'middle',
+        });
+        this.setConfig(config);
+    }
+    created() {
+        this.children.forEach((btn, index) => {
+            if (btn instanceof ui_1.TdButton) {
+                if (this.children.length > 1) {
+                    this.addBtnStyle(btn, index);
+                }
+            }
+        });
+    }
+    mounted() {
+        this.children.forEach((btn, index) => {
+            if (btn instanceof ui_1.TdButton) {
+                btn.addEvents({
+                    mouseover: () => {
+                        btn.setStyleObj({
+                            zIndex: 1,
+                        });
+                        if (this.children.length > 1) {
+                            this.setBtnStyle(btn, index);
+                        }
+                    },
+                    mouseout: () => {
+                        btn.setStyleObj({
+                            zIndex: 1,
+                        });
+                        if (this.children.length > 1) {
+                            this.setBtnStyle(btn, index);
+                        }
+                    },
+                });
+            }
+        });
+    }
+    addBtnStyle(btn, index) {
+        if (index === 0) {
+            btn.addStyleObj({
+                borderTopRightRadius: 0,
+                borderBottomRightRadius: 0,
+                marginRight: '-1px',
+                borderRightColor: td_button_style_1.$borderRightColor,
+            });
+        }
+        else if (index === this.children.length - 1) {
+            btn.addStyleObj({
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderLeftColor: td_button_style_1.$borderRightColor,
+            });
+        }
+        else {
+            btn.addStyleObj({
+                borderTopRightRadius: 0,
+                borderTopLeftRadius: 0,
+                borderBottomRightRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderLeftColor: td_button_style_1.$borderRightColor,
+                borderRightColor: td_button_style_1.$borderRightColor,
+            });
+        }
+    }
+    setBtnStyle(btn, index) {
+        if (index === 0) {
+            btn.setStyleObj({
+                borderTopRightRadius: 0,
+                borderBottomRightRadius: 0,
+                marginRight: '-1px',
+                borderRightColor: td_button_style_1.$borderRightColor,
+            });
+        }
+        else if (index === this.children.length - 1) {
+            btn.setStyleObj({
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderLeftColor: td_button_style_1.$borderRightColor,
+            });
+        }
+        else {
+            btn.setStyleObj({
+                borderTopRightRadius: 0,
+                borderTopLeftRadius: 0,
+                borderBottomRightRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderLeftColor: td_button_style_1.$borderRightColor,
+                borderRightColor: td_button_style_1.$borderRightColor,
+            });
+        }
+    }
+}
+exports.TdButtonGroup = TdButtonGroup;

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

@@ -0,0 +1,16 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { IButtonSize, IButtonType, ITdButtonConfig } from '../td-button/td-button.interface';
+export interface ITdButtonGroup extends IUI {
+    className: 'TdButtonGroup';
+}
+export interface ITdButtonGroupConfig extends IUIConfig {
+    /**
+     * @description control the size of buttons in this button-group
+     */
+    size?: IButtonSize;
+    /**
+     * @description control the type of buttons in this button-group
+     */
+    type?: IButtonType;
+    options?: ITdButtonConfig[];
+}

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

@@ -0,0 +1,6 @@
+import { ITdAside, ITdAsideConfig } from './td-aside.interface';
+import { UI } from '../../../../ui/ui.abstract';
+export declare class TdAside extends UI implements ITdAside {
+    className: 'TdAside';
+    constructor(config?: Partial<ITdAsideConfig>);
+}

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdAside = void 0;
+const ui_abstract_1 = require("../../../../ui/ui.abstract");
+class TdAside extends ui_abstract_1.UI {
+    constructor(config) {
+        super();
+        this.className = 'TdAside';
+        this.addStyleObj({
+            overflow: 'auto',
+            boxSizing: 'border-box',
+            flexShrink: 0,
+            width: '300px'
+        });
+        if (config === null || config === void 0 ? void 0 : config.width) {
+            if (typeof config.width !== 'number') {
+                console.warn('TdAside: width should be a number');
+                this.addStyleObj({
+                    width: config.width
+                });
+            }
+            this.addStyleObj({
+                width: config.width + 'px'
+            });
+        }
+        this.setConfig(config);
+    }
+}
+exports.TdAside = TdAside;

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

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

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

@@ -0,0 +1,11 @@
+import { TypeElement } from '@type-dom/framework';
+import { ITdContainer, ITdContainerConfig } from './td-container.interface';
+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 { UI } from '../../../ui/ui.abstract';
+export declare class TdContainer extends UI implements ITdContainer {
+    className: 'TdContainer';
+    childNodes: (TdAside | TdHeader | TdMain | TdContainer | TypeElement)[];
+    constructor(config?: ITdContainerConfig);
+}

package/src/{basic → components/basic}/td-container/td-container.class.js

@@ -1,27 +1,28 @@
 "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 {
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+class TdContainer extends ui_abstract_1.UI {
     constructor(config) {
-        super();
+        super({ tag: 'section' });
         this.className = 'TdContainer';
         this.addAttrName('td-container');
         this.addAttrClass('td-container');
         this.addStyleObj({
             display: 'flex',
-            flexDirection: 'row',
+            flexDirection: 'row', // vertical ===> column
             flex: 1,
             flexBasis: 'auto',
             boxSizing: 'border-box',
-            minWidth: 0,
+            minWidth: 0
         });
+        this.childNodes = [];
         if (config === null || config === void 0 ? void 0 : config.vertical) {
             this.addStyleObj({
                 flexDirection: 'column'
             });
         }
+        this.setConfig(config);
     }
 }
 exports.TdContainer = TdContainer;

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

@@ -0,0 +1,15 @@
+import { TextNode, TypeElement } from '@type-dom/framework';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+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 {
+    className: 'TdContainer';
+}
+export interface ITdContainerConfig extends IUIConfig {
+    name?: string;
+    vertical?: boolean;
+    direction?: 'vertical' | 'horizontal';
+    childNodes?: (TdAside | TdHeader | TdMain | TdContainer | TypeElement | TextNode)[];
+}

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

@@ -0,0 +1,8 @@
+import { UI } from '../../../../ui/ui.abstract';
+import type { ITdHeaderConfig } from '../td-header/td-header.interface';
+import type { ITdFooter, ITdFooterConfig } from './td-footer.interface';
+export declare class TdFooter extends UI implements ITdFooter {
+    className: 'TdFooter';
+    constructor(config?: Partial<ITdFooterConfig>);
+    setConfig(config?: Partial<ITdHeaderConfig>): void;
+}

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdFooter = void 0;
+const ui_abstract_1 = require("../../../../ui/ui.abstract");
+class TdFooter extends ui_abstract_1.UI {
+    constructor(config) {
+        super({ tag: 'footer' });
+        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'
+        });
+        this.setConfig(config);
+    }
+    setConfig(config) {
+        super.setConfig(config);
+        this.addHeight((config === null || config === void 0 ? void 0 : config.height) || '60px');
+        this.addBackgroundColor((config === null || config === void 0 ? void 0 : config.backgroundColor) || 'fff');
+    }
+}
+exports.TdFooter = TdFooter;

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

@@ -0,0 +1,8 @@
+import { IUI, IUIConfig } from '../../../../ui/ui.interface';
+export interface ITdFooter extends IUI {
+    className: 'TdFooter';
+}
+export interface ITdFooterConfig extends IUIConfig {
+    height?: string | number;
+    backgroundColor?: string;
+}

package/src/{basic → components/basic}/td-container/td-header/td-header.class.d.ts

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

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdHeader = void 0;
+const ui_abstract_1 = require("../../../../ui/ui.abstract");
+class TdHeader extends ui_abstract_1.UI {
+    constructor(config) {
+        super({ tag: 'header' });
+        this.className = 'TdHeader';
+        this.addAttrName('td-header');
+        this.addStyleObj({
+            display: 'flex',
+            alignItems: 'center',
+            padding: '0 20px',
+            boxSizing: 'border-box',
+            flexShrink: 0
+        });
+        this.setConfig(config);
+    }
+    setConfig(config) {
+        super.setConfig(config);
+        this.addHeight((config === null || config === void 0 ? void 0 : config.height) || '60px');
+        this.addBackgroundColor((config === null || config === void 0 ? void 0 : config.backgroundColor) || 'fff');
+    }
+}
+exports.TdHeader = TdHeader;

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

@@ -0,0 +1,8 @@
+import { IUI, IUIConfig } from '../../../../ui/ui.interface';
+export interface ITdHeader extends IUI {
+    className: 'TdHeader';
+}
+export interface ITdHeaderConfig extends IUIConfig {
+    height?: string | number;
+    backgroundColor?: string;
+}

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

@@ -0,0 +1,6 @@
+import { UI } from '../../../../ui/ui.abstract';
+import { ITdMain, ITdMainConfig } from './td-main.interface';
+export declare class TdMain extends UI implements ITdMain {
+    className: 'TdMain';
+    constructor(config?: Partial<ITdMainConfig>);
+}

package/src/{basic → components/basic}/td-container/td-main/td-main.class.js

@@ -1,19 +1,20 @@
 "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();
+const ui_abstract_1 = require("../../../../ui/ui.abstract");
+class TdMain extends ui_abstract_1.UI {
+    constructor(config) {
+        super({ tag: 'main' });
         this.className = 'TdMain';
         this.addStyleObj({
             display: 'block',
             flex: 1,
             flexBasis: 'auto',
             overflow: 'auto',
-            boxSizing: 'border-box',
-            padding: '20px',
+            boxSizing: 'border-box'
+            // padding: '20px',
         });
+        this.setConfig(config);
     }
 }
 exports.TdMain = TdMain;

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

@@ -0,0 +1,7 @@
+import { IUI, IUIConfig } from '../../../../ui/ui.interface';
+export interface ITdMain extends IUI {
+    className: 'TdMain';
+}
+export interface ITdMainConfig extends IUIConfig {
+    tag?: 'main';
+}

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

@@ -0,0 +1,15 @@
+import { TypeHtml, TypeSvgSvg } from '@type-dom/framework';
+import { UI } from '../../../ui/ui.abstract';
+import { ITdIcon, ITdIconConfig } from './td-icon.interface';
+export declare class TdIcon extends UI implements ITdIcon {
+    className: 'TdIcon';
+    svg?: TypeSvgSvg;
+    parent?: TypeHtml;
+    config?: ITdIconConfig;
+    constructor(config?: Partial<ITdIconConfig>);
+    createSvg(className: string): void;
+    resetConfig(config?: Partial<ITdIconConfig>): void;
+    created(): void;
+    replaceSvg(svg: TypeSvgSvg): void;
+    mounted(): void;
+}

package/src/{basic → components/basic}/td-icon/td-icon.class.js

@@ -2,45 +2,51 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdIcon = void 0;
 const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_icon_style_1 = require("./td-icon.style");
-class TdIcon extends framework_1.TypeI {
+class TdIcon extends ui_abstract_1.UI {
     constructor(config) {
-        super();
+        super({ tag: 'i' });
         this.className = 'TdIcon';
-        const slot = new framework_1.Slot(this);
+        const slot = new framework_1.Slot({ parent: this });
         this.childNodes = [slot];
+        this.addStyleObj(td_icon_style_1.$tdIcon);
         this.setConfig(config);
+        this.resetConfig(config);
     }
     // todo
     createSvg(className) {
         return;
     }
-    setConfig(config) {
-        this.addStyleObj(td_icon_style_1.$tdIcon);
+    resetConfig(config) {
         if (config === null || config === void 0 ? void 0 : config.SvgClass) {
+            // todo 直接作为 childNodes的子元素更合理；
             const svg = new config.SvgClass(this);
             // svg.resetSize('1em', '1em');
             this.addChild(svg);
             this.svg = svg;
         }
+        if (config === null || config === void 0 ? void 0 : config.svgObj) {
+            // 直接作为 childNodes的子元素更合理；
+            this.addChild(config.svgObj);
+            this.svg = config.svgObj;
+        }
         if (config === null || config === void 0 ? void 0 : config.color) {
             this.addStyleObj({
-                color: config.color,
+                color: config.color
             });
         }
         if (config === null || config === void 0 ? void 0 : config.size) {
             this.addStyleObj({
-                fontSize: config.size,
+                fontSize: config.size
             });
         }
-        if (config === null || config === void 0 ? void 0 : config.loading) {
-            this.addStyleObj(td_icon_style_1.$iconLoading);
-        }
-        if ((config === null || config === void 0 ? void 0 : config.position) === 'right') { // 位置应该是引用的对象中设置，自身应该不需要设置。
+        if ((config === null || config === void 0 ? void 0 : config.position) === 'right') {
+            // 位置应该是引用的对象中设置，自身应该不需要设置。
             this.addStyleObj(td_icon_style_1.$iconRight);
         }
-        else {
-            // this.addStyleObj($iconLeft);
+        else if ((config === null || config === void 0 ? void 0 : config.position) === 'left') {
+            this.addStyleObj(td_icon_style_1.$iconLeft);
         }
         // this.addStyleObj(sizeOpts[size]);
         // this.addAttrObj({
@@ -48,10 +54,35 @@ class TdIcon extends framework_1.TypeI {
         //   size: 'middle' // small middle, large
         // });
     }
+    created() {
+        var _a;
+        if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.loading) {
+            this.addStyleObj(td_icon_style_1.$iconLoading);
+        }
+    }
     replaceSvg(svg) {
         this.childNodes.splice(1, 1, svg);
         svg.parent = this;
         this.render();
     }
+    mounted() {
+        /**
+         * loading 效果
+         * todo css 中配置 @keyframes rotating {
+         *   0% {
+         *     transform: rotateZ(0deg);
+         *   }
+         *   100% {
+         *     transform: rotateZ(360deg);
+         *   }
+         * }
+         * 现在配置的不生效 ？？？？  shadowRoot 会隔离了样式。
+         * 而打包时，样式会在最外层的项目中生成，导致样式失效。
+         */
+        // if (this.config?.loading) {
+        //   const a = createRotatableElement(this.dom, 0, 60);
+        //   a.start();
+        // }
+    }
 }
 exports.TdIcon = TdIcon;

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

@@ -0,0 +1,13 @@
+import { TypeSvgSvg } from '@type-dom/framework';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdIcon extends IUI {
+    className: 'TdIcon';
+}
+export interface ITdIconConfig extends IUIConfig {
+    SvgClass: any;
+    svgObj: TypeSvgSvg;
+    size: string;
+    color: string;
+    loading: boolean;
+    position: 'left' | 'right';
+}

package/src/{basic → components/basic}/td-icon/td-icon.style.d.ts

@@ -1,4 +1,5 @@
 import { IStyle } from '@type-dom/framework';
+import './icon.scss';
 export declare const $tdIcon: Partial<IStyle>;
 export declare const $iconLoading: {
     animation: string;

package/src/{basic → components/basic}/td-icon/td-icon.style.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.$iconLeft = exports.$iconRight = exports.$iconLoading = exports.$tdIcon = void 0;
 const framework_1 = require("@type-dom/framework");
+require("./icon.scss");
 exports.$tdIcon = {
-    height: '1em',
+    // height: '1em',
     width: '1em',
     lineHeight: '1em',
     display: framework_1.StyleDisplay.inlineFlex,
@@ -12,16 +13,16 @@ exports.$tdIcon = {
     position: framework_1.StylePosition.relative,
     fill: 'currentColor',
     // color: var(--color),
-    fontSize: 'inherit',
+    fontSize: 'inherit'
 };
 exports.$iconLoading = {
     animation: 'rotating 2s linear infinite'
 };
 exports.$iconRight = {
     marginLeft: '5px',
-    float: 'right',
+    float: 'right'
 };
 exports.$iconLeft = {
     marginRight: '5px',
-    float: 'left',
+    float: 'left'
 };

package/src/components/basic/td-layout/td-col/td-col.class.d.ts

@@ -0,0 +1,13 @@
+import { TdRow } from '../td-row/td-row.class';
+import { ITdCol, ITdColConfig } from './td-col.interface';
+import { UI } from '../../../../ui/ui.abstract';
+export declare class TdCol extends UI implements ITdCol {
+    className: 'TdCol';
+    config?: ITdColConfig;
+    parent?: TdRow;
+    constructor(config?: ITdColConfig);
+    get screenWidth(): number;
+    setConfig(config?: ITdColConfig): void;
+    resize(): void;
+    initEvents(): void;
+}