@type-dom/ui 0.0.8 → 0.0.10

package/src/components/basic/td-layout/td-col/td-col.class.js

@@ -1,15 +1,82 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCol = void 0;
-const rxjs_1 = require("rxjs");
 const utils_1 = require("@type-dom/utils");
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdCol extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
+        // 使用防抖函数包装处理函数
+        this.debounceResize = () => (0, utils_1.debounce)(this.resize, 250)();
+        this.resize = () => {
+            console.log('this.screenWidth is ', this.screenWidth);
+            const props = this.props;
+            if (props === null || props === void 0 ? void 0 : props.xs) {
+                if (this.screenWidth < 768) {
+                    // 超小屏幕（xs）
+                    // 当前屏幕尺寸小于768px，执行xs断点下的操作
+                    const proportion = (0, utils_1.formatFloat)(props.xs / 24) * 100 + '%';
+                    this.style.setObj({
+                        maxWidth: proportion,
+                        flex: '0 0 ' + proportion
+                    });
+                }
+            }
+            if (props === null || props === void 0 ? void 0 : props.sm) {
+                if (this.screenWidth >= 768) {
+                    // && this.screenWidth < 992
+                    // 小屏幕（sm）
+                    // 当前屏幕尺寸在768px至991px之间，执行md断点下的操作
+                    // 设置你的值或执行相应JS代码
+                    const proportion = (0, utils_1.formatFloat)(props.sm / 24) * 100 + '%';
+                    this.style.setObj({
+                        maxWidth: proportion,
+                        flex: '0 0 ' + proportion
+                    });
+                }
+            }
+            if (props === null || props === void 0 ? void 0 : props.md) {
+                if (this.screenWidth >= 992) {
+                    // && this.screenWidth < 1200
+                    // 中屏幕（md）
+                    // 当前屏幕尺寸在992px至1199px之间，执行lg断点下的操作
+                    // 设置你的值或执行相应JS代码
+                    const proportion = (0, utils_1.formatFloat)(props.md / 24) * 100 + '%';
+                    this.style.setObj({
+                        maxWidth: proportion,
+                        flex: '0 0 ' + proportion
+                    });
+                }
+            }
+            if (props === null || props === void 0 ? void 0 : props.lg) {
+                if (this.screenWidth >= 1200) {
+                    // && this.screenWidth < 1920
+                    // 大屏幕（lg）
+                    // 当前屏幕尺寸在1200px至1920px之间，执行lg断点下的操作
+                    // 设置你的值或执行相应JS代码
+                    const proportion = (0, utils_1.formatFloat)(props.lg / 24) * 100 + '%';
+                    this.style.setObj({
+                        maxWidth: proportion,
+                        flex: '0 0 ' + proportion
+                    });
+                }
+            }
+            if (props === null || props === void 0 ? void 0 : props.xl) {
+                if (this.screenWidth >= 1920) {
+                    // 超大屏幕（xl及以上）
+                    // 当前屏幕尺寸等于或大于1920px，执行xl断点下的操作
+                    // 设置你的值或执行相应JS代码
+                    const proportion = (0, utils_1.formatFloat)(props.xl / 24) * 100 + '%';
+                    this.style.setObj({
+                        maxWidth: proportion,
+                        flex: '0 0 ' + proportion
+                    });
+                }
+            }
+        };
         this.className = 'TdCol';
         this.addChild(this.getSlotNode());
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     get screenWidth() {
         return window.innerWidth || document.documentElement.clientWidth;
@@ -18,13 +85,13 @@ class TdCol extends ui_abstract_1.UI {
         const props = this.props;
         if (props === null || props === void 0 ? void 0 : props.span) {
             if (props.span === 0) {
-                this.ctrl.addStyleObj({
+                this.style.addObj({
                     display: 'none'
                 });
             }
             else {
                 const proportion = (0, utils_1.formatFloat)(props.span / 24) * 100 + '%';
-                this.ctrl.addStyleObj({
+                this.style.addObj({
                     maxWidth: proportion,
                     flex: '0 0 ' + proportion
                 });
@@ -32,100 +99,33 @@ class TdCol extends ui_abstract_1.UI {
         }
         if (props === null || props === void 0 ? void 0 : props.offset) {
             const proportion = (0, utils_1.formatFloat)(props.offset / 24) * 100 + '%';
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 marginLeft: proportion
             });
         }
         if (props === null || props === void 0 ? void 0 : props.pull) {
             const proportion = (0, utils_1.formatFloat)(props.pull / 24) * 100 + '%';
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 position: 'relative',
                 right: proportion
             });
         }
         if (props === null || props === void 0 ? void 0 : props.push) {
             const proportion = (0, utils_1.formatFloat)(props.push / 24) * 100 + '%';
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 position: 'relative',
                 left: proportion
             });
         }
         this.resize();
     }
-    resize() {
-        console.log('this.screenWidth is ', this.screenWidth);
-        const props = this.props;
-        if (props === null || props === void 0 ? void 0 : props.xs) {
-            if (this.screenWidth < 768) {
-                // 超小屏幕（xs）
-                // 当前屏幕尺寸小于768px，执行xs断点下的操作
-                const proportion = (0, utils_1.formatFloat)(props.xs / 24) * 100 + '%';
-                this.ctrl.setStyleObj({
-                    maxWidth: proportion,
-                    flex: '0 0 ' + proportion
-                });
-            }
-        }
-        if (props === null || props === void 0 ? void 0 : props.sm) {
-            if (this.screenWidth >= 768) {
-                // && this.screenWidth < 992
-                // 小屏幕（sm）
-                // 当前屏幕尺寸在768px至991px之间，执行md断点下的操作
-                // 设置你的值或执行相应JS代码
-                const proportion = (0, utils_1.formatFloat)(props.sm / 24) * 100 + '%';
-                this.ctrl.setStyleObj({
-                    maxWidth: proportion,
-                    flex: '0 0 ' + proportion
-                });
-            }
-        }
-        if (props === null || props === void 0 ? void 0 : props.md) {
-            if (this.screenWidth >= 992) {
-                // && this.screenWidth < 1200
-                // 中屏幕（md）
-                // 当前屏幕尺寸在992px至1199px之间，执行lg断点下的操作
-                // 设置你的值或执行相应JS代码
-                const proportion = (0, utils_1.formatFloat)(props.md / 24) * 100 + '%';
-                this.ctrl.setStyleObj({
-                    maxWidth: proportion,
-                    flex: '0 0 ' + proportion
-                });
-            }
-        }
-        if (props === null || props === void 0 ? void 0 : props.lg) {
-            if (this.screenWidth >= 1200) {
-                // && this.screenWidth < 1920
-                // 大屏幕（lg）
-                // 当前屏幕尺寸在1200px至1920px之间，执行lg断点下的操作
-                // 设置你的值或执行相应JS代码
-                const proportion = (0, utils_1.formatFloat)(props.lg / 24) * 100 + '%';
-                this.ctrl.setStyleObj({
-                    maxWidth: proportion,
-                    flex: '0 0 ' + proportion
-                });
-            }
-        }
-        if (props === null || props === void 0 ? void 0 : props.xl) {
-            if (this.screenWidth >= 1920) {
-                // 超大屏幕（xl及以上）
-                // 当前屏幕尺寸等于或大于1920px，执行xl断点下的操作
-                // 设置你的值或执行相应JS代码
-                const proportion = (0, utils_1.formatFloat)(props.xl / 24) * 100 + '%';
-                this.ctrl.setStyleObj({
-                    maxWidth: proportion,
-                    flex: '0 0 ' + proportion
-                });
-            }
-        }
+    mounted() {
+        // 监听窗口大小改变事件
+        window.addEventListener('resize', this.debounceResize);
     }
-    initEvents() {
-        (0, rxjs_1.fromEvent)(window, 'resize')
-            .pipe((0, rxjs_1.debounceTime)(250) // 防抖延时
-        // distinctUntilChanged() // 可选，仅在窗口尺寸发生实际变化时才触发
-        )
-            .subscribe((event) => {
-            this.resize();
-        });
+    destroy(root) {
+        window.removeEventListener('resize', this.debounceResize);
+        super.destroy(root);
     }
 }
 exports.TdCol = TdCol;

package/src/components/basic/td-layout/td-row/td-row.class.js

@@ -10,7 +10,7 @@ class TdRow extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdRow';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             display: 'flex',
             flexWrap: 'wrap',
             position: 'relative',
@@ -18,20 +18,20 @@ class TdRow extends ui_abstract_1.UI {
         });
         this.childNodes = [];
         this.addChild(this.getSlotNode());
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     setup() {
         const props = this.props;
         if (props === null || props === void 0 ? void 0 : props.gutter) {
             this.gutter = props.gutter;
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 marginLeft: `-${props.gutter / 2}px`,
                 marginRight: `-${props.gutter / 2}px`
             });
             this.children.forEach((child) => {
                 if (child instanceof td_col_class_1.TdCol) {
                     if (props.gutter) {
-                        child.ctrl.addStyleObj({
+                        child.style.addObj({
                             boxSizing: 'border-box',
                             paddingLeft: `${props.gutter / 2}px`,
                             paddingRight: `${props.gutter / 2}px`
@@ -44,27 +44,27 @@ class TdRow extends ui_abstract_1.UI {
             // this.setJustify(props.justify);
             switch (props.justify) {
                 case 'center':
-                    this.ctrl.addStyleObj({
+                    this.style.addObj({
                         justifyContent: 'center'
                     });
                     break;
                 case 'end':
-                    this.ctrl.addStyleObj({
+                    this.style.addObj({
                         justifyContent: 'flex-end'
                     });
                     break;
                 case 'space-between':
-                    this.ctrl.addStyleObj({
+                    this.style.addObj({
                         justifyContent: 'space-between'
                     });
                     break;
                 case 'space-around':
-                    this.ctrl.addStyleObj({
+                    this.style.addObj({
                         justifyContent: 'space-around'
                     });
                     break;
                 case 'space-evenly':
-                    this.ctrl.addStyleObj({
+                    this.style.addObj({
                         justifyContent: 'space-evenly'
                     });
                     break;
@@ -76,22 +76,22 @@ class TdRow extends ui_abstract_1.UI {
             // this.setAlign(props.align);
             switch (props.align) {
                 case 'top':
-                    this.ctrl.addStyleObj({
+                    this.style.addObj({
                         alignItems: 'flex-start'
                     });
                     break;
                 case 'middle':
-                    this.ctrl.addStyleObj({
+                    this.style.addObj({
                         alignItems: 'center'
                     });
                     break;
                 case 'bottom':
-                    this.ctrl.addStyleObj({
+                    this.style.addObj({
                         alignItems: 'flex-end'
                     });
                     break;
                 case 'stretch':
-                    this.ctrl.addStyleObj({
+                    this.style.addObj({
                         alignItems: 'stretch'
                     });
                     break;

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

@@ -6,6 +6,5 @@ export declare class TdLink extends UI implements ITdLink {
     private inner?;
     constructor(params: ITdLinkConfig);
     setup(): void;
-    initEvents(): void;
     handleClick(event: MouseEvent): void;
 }

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

@@ -9,29 +9,29 @@ class TdLink extends ui_abstract_1.UI {
         super(params, 'a');
         this.className = 'TdLink';
         (0, td_link_style_1.useType)(params);
-        this.ctrl.addStyleObj(td_link_style_1.$linkStyle);
-        this.props = this.setProps(params);
+        this.style.addObj(td_link_style_1.$linkStyle);
+        this.props = this.useParams(params);
     }
     // override beforeCreate() {
-    //   this.ctrl.addStyleObj($linkStyle);
+    //   this.style.addObj($linkStyle);
     // }
     setup() {
         const props = this.props;
-        this.ctrl.addAttrObj({
+        this.attr.addObj({
             href: props === null || props === void 0 ? void 0 : props.href,
             target: props === null || props === void 0 ? void 0 : props.target,
             disabled: props === null || props === void 0 ? void 0 : props.disabled
         });
         if (props === null || props === void 0 ? void 0 : props.type) {
             if (props === null || props === void 0 ? void 0 : props.disabled) {
-                this.ctrl.addStyleObj(td_link_style_1.$linkStateColors[props.type].disabled);
+                this.style.addObj(td_link_style_1.$linkStateColors[props.type].disabled);
             }
             else {
-                this.ctrl.addStyleObj(td_link_style_1.$linkStateColors[props.type].default);
+                this.style.addObj(td_link_style_1.$linkStateColors[props.type].default);
             }
         }
         else {
-            this.ctrl.addStyleObj(td_link_style_1.$linkStateColors.default.default);
+            this.style.addObj(td_link_style_1.$linkStateColors.default.default);
         }
         if (props === null || props === void 0 ? void 0 : props.icon) {
             this.unshiftChild(props.icon);
@@ -42,8 +42,6 @@ class TdLink extends ui_abstract_1.UI {
         });
         this.inner.addChild(this.getSlotNode());
         this.addChild(this.inner);
-    }
-    initEvents() {
         this.addEvents({
             click: (evt) => {
                 this.handleClick(evt);
@@ -51,47 +49,47 @@ class TdLink extends ui_abstract_1.UI {
             mouseenter: () => {
                 if (this.props.type) {
                     if (this.props.disabled) {
-                        this.ctrl.setStyleObj({
+                        this.style.setObj({
                             cursor: 'notAllowed'
                         });
                     }
                     else {
-                        this.ctrl.setStyleObj(td_link_style_1.$linkStateColors[this.props.type].hover);
+                        this.style.setObj(td_link_style_1.$linkStateColors[this.props.type].hover);
                     }
                 }
                 else {
-                    this.ctrl.setStyleObj(td_link_style_1.$linkStateColors.default.hover);
+                    this.style.setObj(td_link_style_1.$linkStateColors.default.hover);
                 }
                 if (this.props.underline === false) {
                     // 设置 false 的情况下，不显示下划线
-                    this.ctrl.setStyleObj({
+                    this.style.setObj({
                         textDecoration: 'none'
                     });
                 }
                 else {
                     // 1. 默认显示下划线
                     // 2. 默认显示下划线，如果设置了 underline 为 true，则显示下划线
-                    this.ctrl.setStyleObj({
+                    this.style.setObj({
                         textDecoration: 'underline'
                     });
                 }
             },
             mouseleave: (evt) => {
-                this.ctrl.setStyleObj({
+                this.style.setObj({
                     textDecoration: 'none'
                 });
                 if (this.props.type) {
-                    this.ctrl.removeStyleObj(td_link_style_1.$linkStateColors[this.props.type].hover);
+                    this.style.removeObj(td_link_style_1.$linkStateColors[this.props.type].hover);
                     if (this.props.disabled) {
                         evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                        this.ctrl.setStyleObj(td_link_style_1.$linkStateColors[this.props.type].disabled);
+                        this.style.setObj(td_link_style_1.$linkStateColors[this.props.type].disabled);
                     }
                     else {
-                        this.ctrl.setStyleObj(td_link_style_1.$linkStateColors[this.props.type].default);
+                        this.style.setObj(td_link_style_1.$linkStateColors[this.props.type].default);
                     }
                 }
                 else {
-                    this.ctrl.removeStyleObj(td_link_style_1.$linkStateColors.default.hover);
+                    this.style.removeObj(td_link_style_1.$linkStateColors.default.hover);
                 }
             }
         });

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

@@ -7,8 +7,8 @@ class TdScrollbarBar extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdScrollbarBar';
-        this.ctrl.addAttrName('td-scrollbar-bar');
-        this.ctrl.addStyleObj({
+        this.attr.addName('td-scrollbar-bar');
+        this.style.addObj({
             position: 'absolute',
             right: '2px',
             bottom: '2px',
@@ -26,7 +26,7 @@ class TdScrollbarBar extends ui_abstract_1.UI {
                 ratio: 1
             })
         ];
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdScrollbarBar = TdScrollbarBar;

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

@@ -8,8 +8,8 @@ class TdScrollbar extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, params === null || params === void 0 ? void 0 : params.tag);
         this.className = 'TdScrollbar';
-        this.ctrl.addAttrName('td-scrollbar');
-        this.ctrl.addStyleObj({
+        this.attr.addName('td-scrollbar');
+        this.style.addObj({
             overflow: 'hidden',
             position: 'relative',
             height: '100%'
@@ -26,11 +26,11 @@ class TdScrollbar extends ui_abstract_1.UI {
             name: 'td-scrollbar-view'
         });
         if (params === null || params === void 0 ? void 0 : params.viewStyle) {
-            this.view.ctrl.addStyleObj(params.viewStyle);
+            this.view.style.addObj(params.viewStyle);
         }
         this.wrap.addChild(this.view);
         if (params === null || params === void 0 ? void 0 : params.wrapStyle) {
-            this.wrap.ctrl.addStyleObj(params.wrapStyle);
+            this.wrap.style.addObj(params.wrapStyle);
         }
         this.addChild(this.wrap);
         if (!(params === null || params === void 0 ? void 0 : params.native)) {
@@ -43,7 +43,7 @@ class TdScrollbar extends ui_abstract_1.UI {
         if (params === null || params === void 0 ? void 0 : params.contents) {
             this.view.addChildren(...params.contents);
         }
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdScrollbar = TdScrollbar;

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

@@ -8,8 +8,8 @@ class TdScrollbarThumb extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdScrollbarThumb';
-        this.ctrl.addAttrName('td-scrollbar-thumb');
-        this.ctrl.addStyleObj({
+        this.attr.addName('td-scrollbar-thumb');
+        this.style.addObj({
             position: 'absolute',
             right: '2px',
             bottom: '2px',
@@ -39,7 +39,7 @@ class TdScrollbarThumb extends ui_abstract_1.UI {
             }
         });
         this.addChild(this.thumb);
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdScrollbarThumb = TdScrollbarThumb;

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

@@ -9,17 +9,17 @@ class TdSpace extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdSpace';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             display: 'inline-flex',
             verticalAlign: 'top'
         });
         this.addChild(this.getSlotNode());
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     setup() {
         this.children.forEach((item) => {
             if (item instanceof framework_1.TypeElement) {
-                item.ctrl.addStyleObj({
+                item.style.addObj({
                     display: 'flex',
                     flexWrap: 'wrap'
                 });
@@ -28,23 +28,23 @@ class TdSpace extends ui_abstract_1.UI {
         const props = this.props;
         this.useSize(props === null || props === void 0 ? void 0 : props.size);
         if (props === null || props === void 0 ? void 0 : props.wrap) {
-            this.ctrl.addStyle('flexWrap', 'wrap');
+            this.style.add('flexWrap', 'wrap');
         }
         if (props === null || props === void 0 ? void 0 : props.fill) {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 flexWrap: 'wrap',
                 flexGrow: 1,
                 minWidth: `${(props === null || props === void 0 ? void 0 : props.fillRatio) || 100}%`
             });
         }
         if ((props === null || props === void 0 ? void 0 : props.direction) === 'horizontal') {
-            this.ctrl.addStyle('flexDirection', 'row');
+            this.style.add('flexDirection', 'row');
         }
         if ((props === null || props === void 0 ? void 0 : props.direction) === 'vertical') {
-            this.ctrl.addStyle('flexDirection', 'column');
+            this.style.add('flexDirection', 'column');
         }
         if (props === null || props === void 0 ? void 0 : props.alignment) {
-            this.ctrl.addStyle('alignItems', props.alignment);
+            this.style.add('alignItems', props.alignment);
         }
     }
     useSize(size) {
@@ -77,7 +77,7 @@ class TdSpace extends ui_abstract_1.UI {
                 }
             }
         }
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             rowGap: this.verticalSize + 'px',
             columnGap: this.horizontalSize + 'px'
         });
@@ -85,7 +85,7 @@ class TdSpace extends ui_abstract_1.UI {
     setSize(size) {
         console.log('setSize size is ', size);
         this.useSize(size);
-        this.ctrl.setStyleObj({
+        this.style.setObj({
             rowGap: this.verticalSize + 'px',
             columnGap: this.horizontalSize + 'px'
         });

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

@@ -7,26 +7,29 @@ class TdText extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, (params === null || params === void 0 ? void 0 : params.tag) || 'span');
         this.className = 'TdText';
-        this.ctrl.addStyleObj(td_text_style_1.$baseText);
-        this.addChild(this.getSlotNode());
-        this.props = this.setProps(params);
+        this.style.addObj(td_text_style_1.$baseText);
+        this.props = this.useParams(params);
+        // this.addChild(this.getSlotNode());
+        if (params.slot) {
+            this.slotChild(params.slot);
+        }
     }
     setup() {
         const props = this.props;
         if (props === null || props === void 0 ? void 0 : props.type) {
-            this.ctrl.addStyleObj(td_text_style_1.$textStateColors[props.type].default);
+            this.style.addObj(td_text_style_1.$textStateColors[props.type].default);
         }
         else {
-            this.ctrl.addStyleObj(td_text_style_1.$textStateColors.default.default);
+            this.style.addObj(td_text_style_1.$textStateColors.default.default);
         }
         if (props === null || props === void 0 ? void 0 : props.size) {
-            this.ctrl.addStyleObj(td_text_style_1.sizeOpts[props === null || props === void 0 ? void 0 : props.size]);
+            this.style.addObj(td_text_style_1.sizeOpts[props === null || props === void 0 ? void 0 : props.size]);
         }
         else {
-            this.ctrl.addStyleObj(td_text_style_1.sizeOpts.default);
+            this.style.addObj(td_text_style_1.sizeOpts.default);
         }
         if ((props === null || props === void 0 ? void 0 : props.truncated) && (props === null || props === void 0 ? void 0 : props.width)) {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 display: 'inline-block',
                 maxWidth: '100%',
                 textOverflow: 'ellipsis',
@@ -36,7 +39,7 @@ class TdText extends ui_abstract_1.UI {
             });
         }
         if (props === null || props === void 0 ? void 0 : props.lineClamp) {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 // '-webkit-line-clamp': props?.lineClamp,
                 WebkitLineClamp: props === null || props === void 0 ? void 0 : props.lineClamp,
                 display: '-webkit-inline-box',