@type-dom/ui 0.0.2 → 0.0.4

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/{basic → components/basic}/td-container/td-aside/td-aside.class.js

@@ -1,8 +1,8 @@
 "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 {
+const ui_abstract_1 = require("../../../../ui/ui.abstract");
+class TdAside extends ui_abstract_1.UI {
     constructor(config) {
         super();
         this.className = 'TdAside';
@@ -16,11 +16,11 @@ class TdAside extends framework_1.TypeAside {
             if (typeof config.width !== 'number') {
                 console.warn('TdAside: width should be a number');
                 this.addStyleObj({
-                    width: config.width,
+                    width: config.width
                 });
             }
             this.addStyleObj({
-                width: config.width + 'px',
+                width: config.width + 'px'
             });
         }
         this.setConfig(config);

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,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdContainer = void 0;
-const framework_1 = require("@type-dom/framework");
-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');
@@ -14,7 +14,7 @@ class TdContainer extends framework_1.TypeSection {
             flex: 1,
             flexBasis: 'auto',
             boxSizing: 'border-box',
-            minWidth: 0,
+            minWidth: 0
         });
         this.childNodes = [];
         if (config === null || config === void 0 ? void 0 : config.vertical) {

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/components/basic/td-container/td-header/td-header.class.d.ts

@@ -0,0 +1,9 @@
+import { UI } from '../../../../ui/ui.abstract';
+import { TdContainer } from '../td-container.class';
+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/{basic → components/basic}/td-container/td-main/td-main.class.d.ts

@@ -1,6 +1,6 @@
-import { TypeMain } from '@type-dom/framework';
+import { UI } from '../../../../ui/ui.abstract';
 import { ITdMain, ITdMainConfig } from './td-main.interface';
-export declare class TdMain extends TypeMain implements ITdMain {
+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,22 +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 {
+const ui_abstract_1 = require("../../../../ui/ui.abstract");
+class TdMain extends ui_abstract_1.UI {
     constructor(config) {
-        super();
+        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',
         });
-        if (config === null || config === void 0 ? void 0 : config.name) {
-            this.addAttrName(config.name);
-        }
         this.setConfig(config);
     }
 }

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/{basic → components/basic}/td-icon/td-icon.class.d.ts

@@ -1,11 +1,15 @@
-import { TypeHtml, TypeI, TypeSvgSvg } from '@type-dom/framework';
+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 TypeI implements ITdIcon {
+export declare class TdIcon extends UI implements ITdIcon {
     className: 'TdIcon';
-    parent?: TypeHtml;
     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,10 +2,11 @@
 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({ parent: this });
         this.childNodes = [slot];
@@ -18,33 +19,33 @@ class TdIcon extends framework_1.TypeI {
         return;
     }
     resetConfig(config) {
-        if (config === null || config === void 0 ? void 0 : config.SvgClass) { // todo 直接作为 childNodes的子元素更合理；
+        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的子元素更合理；
+        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 {
+        else if ((config === null || config === void 0 ? void 0 : config.position) === 'left') {
             this.addStyleObj(td_icon_style_1.$iconLeft);
         }
         // this.addStyleObj(sizeOpts[size]);
@@ -53,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,6 +2,7 @@
 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',
     width: '1em',
@@ -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;
+}

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

@@ -0,0 +1,128 @@
+"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(config) {
+        super();
+        this.className = 'TdCol';
+        this.config = config;
+        this.setConfig(config);
+    }
+    get screenWidth() {
+        return window.innerWidth || document.documentElement.clientWidth;
+    }
+    setConfig(config) {
+        super.setConfig(config);
+        if (config === null || config === void 0 ? void 0 : config.span) {
+            if (config.span === 0) {
+                this.addStyleObj({
+                    display: 'none'
+                });
+            }
+            else {
+                const proportion = (0, utils_1.formatFloat)(config.span / 24) * 100 + '%';
+                this.addStyleObj({
+                    maxWidth: proportion,
+                    flex: '0 0 ' + proportion
+                });
+            }
+        }
+        if (config === null || config === void 0 ? void 0 : config.offset) {
+            const proportion = (0, utils_1.formatFloat)(config.offset / 24) * 100 + '%';
+            this.addStyleObj({
+                marginLeft: proportion
+            });
+        }
+        if (config === null || config === void 0 ? void 0 : config.pull) {
+            const proportion = (0, utils_1.formatFloat)(config.pull / 24) * 100 + '%';
+            this.addStyleObj({
+                position: 'relative',
+                right: proportion
+            });
+        }
+        if (config === null || config === void 0 ? void 0 : config.push) {
+            const proportion = (0, utils_1.formatFloat)(config.push / 24) * 100 + '%';
+            this.addStyleObj({
+                position: 'relative',
+                left: proportion
+            });
+        }
+        this.resize();
+    }
+    resize() {
+        // console.log('this.screenWidth is ', this.screenWidth);
+        const config = this.config;
+        if (config === null || config === void 0 ? void 0 : config.xs) {
+            if (this.screenWidth < 768) {
+                // 超小屏幕（xs）
+                // console.log('当前屏幕尺寸小于768px，执行xs断点下的操作');
+                const proportion = (0, utils_1.formatFloat)(config.xs / 24) * 100 + '%';
+                this.setStyleObj({
+                    maxWidth: proportion,
+                    flex: '0 0 ' + proportion
+                });
+            }
+        }
+        if (config === null || config === void 0 ? void 0 : config.sm) {
+            if (this.screenWidth >= 768 && this.screenWidth < 992) {
+                // 小屏幕（sm）
+                // console.log('当前屏幕尺寸在768px至991px之间，执行md断点下的操作');
+                // 设置你的值或执行相应JS代码
+                const proportion = (0, utils_1.formatFloat)(config.sm / 24) * 100 + '%';
+                this.setStyleObj({
+                    maxWidth: proportion,
+                    flex: '0 0 ' + proportion
+                });
+            }
+        }
+        if (config === null || config === void 0 ? void 0 : config.md) {
+            if (this.screenWidth >= 992 && this.screenWidth < 1200) {
+                // 中屏幕（md）
+                // console.log('当前屏幕尺寸在992px至1199px之间，执行lg断点下的操作');
+                // 设置你的值或执行相应JS代码
+                const proportion = (0, utils_1.formatFloat)(config.md / 24) * 100 + '%';
+                this.setStyleObj({
+                    maxWidth: proportion,
+                    flex: '0 0 ' + proportion
+                });
+            }
+        }
+        if (config === null || config === void 0 ? void 0 : config.lg) {
+            if (this.screenWidth >= 1200 && this.screenWidth < 1920) {
+                // 大屏幕（lg）
+                // console.log('当前屏幕尺寸在1200px至1920px之间，执行lg断点下的操作');
+                // 设置你的值或执行相应JS代码
+                const proportion = (0, utils_1.formatFloat)(config.lg / 24) * 100 + '%';
+                this.setStyleObj({
+                    maxWidth: proportion,
+                    flex: '0 0 ' + proportion
+                });
+            }
+        }
+        if (config === null || config === void 0 ? void 0 : config.xl) {
+            if (this.screenWidth >= 1920) {
+                // 超大屏幕（xl及以上）
+                // console.log('当前屏幕尺寸等于或大于1920px，执行xl断点下的操作');
+                // 设置你的值或执行相应JS代码
+                const proportion = (0, utils_1.formatFloat)(config.xl / 24) * 100 + '%';
+                this.setStyleObj({
+                    maxWidth: proportion,
+                    flex: '0 0 ' + proportion
+                });
+            }
+        }
+    }
+    initEvents() {
+        this.subscriptions.push((0, rxjs_1.fromEvent)(window, 'resize')
+            .pipe((0, rxjs_1.debounceTime)(250) // 防抖延时
+        // distinctUntilChanged() // 可选，仅在窗口尺寸发生实际变化时才触发
+        )
+            .subscribe((event) => {
+            this.resize();
+        }));
+    }
+}
+exports.TdCol = TdCol;