@type-dom/ui 0.0.4 → 0.0.5

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

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$borderRightColor = exports.buttonPlain = exports.$buttonPlainColors = exports.buttonVariant = exports.$buttonStateColors = exports.tdButtonBase = exports.sizeOpts = exports.$buttonIconSpanGap = void 0;
-const framework_1 = require("@type-dom/framework");
+exports.$buttonBorderRadius = exports.$borderRightColor = exports.buttonPlain = exports.$buttonPlainColors = exports.buttonVariant = exports.$buttonStateColors = exports.$tdButtonBase = exports.$sizeOpts = exports.$buttonIconSpanGap = void 0;
 const var_1 = require("../../../styles/var");
 exports.$buttonIconSpanGap = {
     large: '8px',
     default: '6px',
     small: '4px'
 };
-exports.sizeOpts = {
+exports.$sizeOpts = {
     // mini: {
     //   height: $commonComponentSize.small,
     //   fontSize: $fontSizeMap.small,
@@ -34,15 +33,15 @@ exports.sizeOpts = {
         borderRadius: var_1.$borderRadiusMap.large
     }
 };
-exports.tdButtonBase = {
-    display: framework_1.StyleDisplay.inlineFlex,
+exports.$tdButtonBase = {
+    display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
     lineHeight: '1',
     // min-height will expand when in flex
     height: '32px',
     whiteSpace: 'nowrap',
-    cursor: framework_1.StyleCursor.pointer,
+    cursor: 'pointer',
     color: var_1.$button.textColor,
     textAlign: 'center',
     boxSizing: 'border-box',
@@ -110,7 +109,14 @@ function buttonVariant($type) {
     // }
 }
 exports.buttonVariant = buttonVariant;
-for (const $type of ['default', 'primary', 'success', 'warning', 'danger', 'info']) {
+for (const $type of [
+    'default',
+    'primary',
+    'success',
+    'warning',
+    'danger',
+    'info'
+]) {
     // @include m($type) {
     //   @include button-variant($type);
     //   }
@@ -141,7 +147,19 @@ function buttonPlain($type) {
     };
 }
 exports.buttonPlain = buttonPlain;
-for (const $type of ['default', 'primary', 'success', 'warning', 'danger', 'info']) {
+for (const $type of [
+    'default',
+    'primary',
+    'success',
+    'warning',
+    'danger',
+    'info'
+]) {
     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',
+};

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

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

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

@@ -1,22 +1,25 @@
 "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");
+const td_button_class_1 = require("../td-button/td-button.class");
 class TdButtonGroup extends ui_abstract_1.UI {
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params);
         this.className = 'TdButtonGroup';
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             display: 'inline-block',
-            verticalAlign: 'middle',
+            verticalAlign: 'middle'
         });
-        this.setConfig(config);
+        if (params === null || params === void 0 ? void 0 : params.slot) {
+            this.slotChild(params === null || params === void 0 ? void 0 : params.slot);
+        }
+        this.setParams(params);
     }
     created() {
         this.children.forEach((btn, index) => {
-            if (btn instanceof ui_1.TdButton) {
+            if (btn instanceof td_button_class_1.TdButton) {
                 if (this.children.length > 1) {
                     this.addBtnStyle(btn, index);
                 }
@@ -25,79 +28,79 @@ class TdButtonGroup extends ui_abstract_1.UI {
     }
     mounted() {
         this.children.forEach((btn, index) => {
-            if (btn instanceof ui_1.TdButton) {
+            if (btn instanceof td_button_class_1.TdButton) {
                 btn.addEvents({
                     mouseover: () => {
-                        btn.setStyleObj({
-                            zIndex: 1,
+                        btn.ctrl.setStyleObj({
+                            zIndex: 1
                         });
                         if (this.children.length > 1) {
                             this.setBtnStyle(btn, index);
                         }
                     },
                     mouseout: () => {
-                        btn.setStyleObj({
-                            zIndex: 1,
+                        btn.ctrl.setStyleObj({
+                            zIndex: 1
                         });
                         if (this.children.length > 1) {
                             this.setBtnStyle(btn, index);
                         }
-                    },
+                    }
                 });
             }
         });
     }
     addBtnStyle(btn, index) {
         if (index === 0) {
-            btn.addStyleObj({
+            btn.ctrl.addStyleObj({
                 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.addStyleObj({
+            btn.ctrl.addStyleObj({
                 borderTopLeftRadius: 0,
                 borderBottomLeftRadius: 0,
-                borderLeftColor: td_button_style_1.$borderRightColor,
+                borderLeftColor: td_button_style_1.$borderRightColor
             });
         }
         else {
-            btn.addStyleObj({
+            btn.ctrl.addStyleObj({
                 borderTopRightRadius: 0,
                 borderTopLeftRadius: 0,
                 borderBottomRightRadius: 0,
                 borderBottomLeftRadius: 0,
                 borderLeftColor: td_button_style_1.$borderRightColor,
-                borderRightColor: td_button_style_1.$borderRightColor,
+                borderRightColor: td_button_style_1.$borderRightColor
             });
         }
     }
     setBtnStyle(btn, index) {
         if (index === 0) {
-            btn.setStyleObj({
+            btn.ctrl.setStyleObj({
                 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.setStyleObj({
+            btn.ctrl.setStyleObj({
                 borderTopLeftRadius: 0,
                 borderBottomLeftRadius: 0,
-                borderLeftColor: td_button_style_1.$borderRightColor,
+                borderLeftColor: td_button_style_1.$borderRightColor
             });
         }
         else {
-            btn.setStyleObj({
+            btn.ctrl.setStyleObj({
                 borderTopRightRadius: 0,
                 borderTopLeftRadius: 0,
                 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-container/td-aside/td-aside.class.d.ts

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

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

@@ -1,29 +1,20 @@
 "use strict";
 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 {
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params);
         this.className = 'TdAside';
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             overflow: 'auto',
             boxSizing: 'border-box',
             flexShrink: 0,
-            width: '300px'
+            width: (params === null || params === void 0 ? void 0 : params.width) ? (0, utils_1.addUnit)(params.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);
+        this.addChild(this.getSlotNode());
+        this.props = this.setParams(params);
     }
 }
 exports.TdAside = TdAside;

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

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

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

@@ -3,12 +3,12 @@ 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 {
-    constructor(config) {
-        super({ tag: 'section' });
+    constructor(params) {
+        super(params, 'section');
         this.className = 'TdContainer';
-        this.addAttrName('td-container');
-        this.addAttrClass('td-container');
-        this.addStyleObj({
+        this.ctrl.addAttrName('td-container');
+        this.ctrl.addAttrClass('td-container');
+        this.ctrl.addStyleObj({
             display: 'flex',
             flexDirection: 'row', // vertical ===> column
             flex: 1,
@@ -17,12 +17,13 @@ class TdContainer extends ui_abstract_1.UI {
             minWidth: 0
         });
         this.childNodes = [];
-        if (config === null || config === void 0 ? void 0 : config.vertical) {
-            this.addStyleObj({
+        if (params === null || params === void 0 ? void 0 : params.vertical) {
+            this.ctrl.addStyleObj({
                 flexDirection: 'column'
             });
         }
-        this.setConfig(config);
+        this.addChild(this.getSlotNode());
+        this.props = this.setParams(params);
     }
 }
 exports.TdContainer = TdContainer;

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

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

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

@@ -8,11 +8,12 @@ class TdContainerComp extends HTMLElement {
      * 而 attributeChangedCallback则会在 custom element 增加、删除或者修改某个属性时被调用。
      */
     connectedCallback() {
+        // 省去了监听document加载完毕
         const title = 'td-container';
         const container = new td_container_class_1.TdContainer();
-        container.setAttrName(title);
+        container.ctrl.setAttrName(title);
         // 渲染
-        container.render();
+        container.mount();
         console.log('container is ', container);
     }
 }

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

@@ -1,8 +1,7 @@
 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;
+    props: ITdFooterConfig;
+    constructor(params?: ITdFooterConfig);
 }

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

@@ -3,22 +3,20 @@ 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' });
+    constructor(params) {
+        super(params, 'footer');
         this.className = 'TdFooter';
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             padding: '0 20px',
-            height: (config === null || config === void 0 ? void 0 : config.height) || '60px',
+            height: (params === null || params === void 0 ? void 0 : params.height) || '60px',
             boxSizing: 'border-box',
             flexShrink: 0,
-            backgroundColor: '#a0cfff'
+            backgroundColor: (params === null || params === void 0 ? void 0 : params.backgroundColor) || 'fff' // '#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');
+        if (params === null || params === void 0 ? void 0 : params.slot) {
+            this.slotChild(params === null || params === void 0 ? void 0 : params.slot);
+        }
+        this.props = this.setParams(params);
     }
 }
 exports.TdFooter = TdFooter;

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

@@ -3,7 +3,7 @@ import { TdContainer } from '../td-container.class';
 import type { ITdHeader, ITdHeaderConfig } from './td-header.interface';
 export declare class TdHeader extends UI implements ITdHeader {
     className: 'TdHeader';
+    props: ITdHeaderConfig;
     parent?: TdContainer;
-    constructor(config?: ITdHeaderConfig);
-    setConfig(config?: ITdHeaderConfig): void;
+    constructor(params?: ITdHeaderConfig);
 }

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

@@ -3,23 +3,23 @@ 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' });
+    constructor(params) {
+        super(params, 'header');
         this.className = 'TdHeader';
-        this.addAttrName('td-header');
-        this.addStyleObj({
+        this.ctrl.addAttrName('td-header');
+        this.ctrl.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');
+        if (params === null || params === void 0 ? void 0 : params.slot) {
+            this.slotChild(params === null || params === void 0 ? void 0 : params.slot);
+        }
+        this.props = this.setParams(params);
+        this.ctrl.addHeight((params === null || params === void 0 ? void 0 : params.height) || '60px');
+        this.ctrl.addBackgroundColor((params === null || params === void 0 ? void 0 : params.backgroundColor) || 'fff');
     }
 }
 exports.TdHeader = TdHeader;

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

@@ -2,5 +2,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>);
+    props: ITdMainConfig;
+    constructor(params?: ITdMainConfig);
 }

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

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdMain = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdMain extends ui_abstract_1.UI {
-    constructor(config) {
-        super({ tag: 'main' });
+    constructor(params) {
+        super(params, (params === null || params === void 0 ? void 0 : params.tag) || 'main');
         this.className = 'TdMain';
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             display: 'block',
             flex: 1,
             flexBasis: 'auto',
@@ -14,7 +14,9 @@ class TdMain extends ui_abstract_1.UI {
             boxSizing: 'border-box'
             // padding: '20px',
         });
-        this.setConfig(config);
+        this.addChild(this.getSlotNode());
+        console.warn('TdMain slotNodes.default is ', this.getSlotNode());
+        this.props = this.setParams(params);
     }
 }
 exports.TdMain = TdMain;

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

@@ -1,15 +1,39 @@
 import { TypeHtml, TypeSvgSvg } from '@type-dom/framework';
 import { UI } from '../../../ui/ui.abstract';
 import { ITdIcon, ITdIconConfig } from './td-icon.interface';
+/**
+ * TdIcon 类继承自 UI 类，实现了 ITdIcon 接口。
+ * 该类用于创建和管理图标，支持配置不同的图标样式和SVG图形。
+ */
 export declare class TdIcon extends UI implements ITdIcon {
     className: 'TdIcon';
+    props: ITdIconConfig;
     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;
+    static initCalled: boolean;
+    /**
+     * TdIcon 类的构造函数。
+     * @param config 图标配置对象，可选参数。
+     */
+    constructor(params?: ITdIconConfig);
+    /**
+     * 根据配置更新图标的状态和样式。
+     * @param config 图标的配置对象，可选参数。
+     */
+    setup(): void;
+    /**
+     * 替换子节点中的SVG元素。
+     *
+     * 此方法用于查找并替换当前节点中指定的SVG元素。如果找不到指定的SVG元素，则将新SVG元素添加为子节点。
+     * 这对于动态更新SVG内容特别有用，比如在用户交互或数据变化时更新图表。
+     *
+     * @param toSvg 要替换为的新SVG元素。
+     * @param fromSvg 可选参数，指定要替换的SVG元素。如果不提供，则替换所有实例化的SVG元素。
+     */
+    replaceSvg(toSvg: TypeSvgSvg, fromSvg?: TypeSvgSvg): void;
+    /**
+     * 组件挂载后的钩子函数。
+     * 该函数目前用于处理加载状态的动画效果。
+     */
     mounted(): void;
 }