@type-dom/ui 0.0.10 → 0.1.1

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

@@ -1,22 +1,21 @@
 "use strict";
 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 {
+const framework_1 = require("@type-dom/framework");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+class TdMain extends framework_1.TypeMain {
     constructor(params = {}) {
-        super(params, (params === null || params === void 0 ? void 0 : params.tag) || 'main');
+        super();
         this.className = 'TdMain';
-        this.style.addObj({
-            display: 'block',
-            flex: 1,
-            flexBasis: 'auto',
-            overflow: 'auto',
-            boxSizing: 'border-box'
-            // padding: '20px',
-        });
-        this.addChild(this.getSlotNode());
-        console.warn('TdMain slotNodes.default is ', this.getSlotNode());
+        this.attr.addName('td-main');
         this.props = this.useParams(params);
     }
+    setup() {
+        var _a;
+        const props = this.props;
+        const ns = (0, use_namespace_1.useNamespace)('main');
+        this.attr.addClass(ns.b());
+        this.slotChildren(props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default));
+    }
 }
 exports.TdMain = TdMain;

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

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

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

@@ -0,0 +1,8 @@
+import { TypeHtml } from '@type-dom/framework';
+import { ITdMain, TdMainProps } from './td-main.interface';
+export declare class TdMain extends TypeHtml implements ITdMain {
+    className: 'TdMain';
+    dom?: HTMLElement;
+    props: TdMainProps;
+    constructor(params?: TdMainProps);
+}

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdMain = void 0;
+const framework_1 = require("@type-dom/framework");
+class TdMain extends framework_1.TypeHtml {
+    constructor(params = {}) {
+        super();
+        this.className = 'TdMain';
+        this.assignProps({
+            nodeName: params.tag || 'main',
+        });
+        this.attr.addName('td-main');
+        this.style.addObj({
+            display: 'block',
+            flex: 1,
+            flexBasis: 'auto',
+            overflow: 'auto',
+            boxSizing: 'border-box',
+            // padding: '20px',
+        });
+        // console.log('then slotChild . params.slot is ', params.slot);
+        this.slotChildren(params.slot);
+        this.props = this.useParams(params);
+    }
+}
+exports.TdMain = TdMain;

package/src/components/basic/td-icon/style/css.d.ts

@@ -0,0 +1 @@
+import '../../../../components/base/style/css';

package/src/components/basic/td-icon/style/css.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../../components/base/style/css");

package/src/components/basic/td-icon/style/index.d.ts

@@ -0,0 +1 @@
+import '../../../base/style';

package/src/components/basic/td-icon/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style");

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

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

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

@@ -2,83 +2,45 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdIcon = void 0;
 const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
 const utils_1 = require("@type-dom/utils");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-const td_icon_style_1 = require("./td-icon.style");
+const use_namespace_1 = require("../../../hooks/use-namespace");
 /**
- * TdIcon 类继承自 UI 类，实现了 ITdIcon 接口。
+ * TdIcon 类继承自 TypeI 类，实现了 ITdIcon 接口。
  * 该类用于创建和管理图标，支持配置不同的图标样式和SVG图形。
  */
-class TdIcon extends ui_abstract_1.UI {
+class TdIcon extends framework_1.TypeI {
     /**
      * TdIcon 类的构造函数。
-     * @param config 图标配置对象，可选参数。
+     * @param params
      */
     constructor(params = {}) {
-        super(params, 'i');
+        super();
         this.className = 'TdIcon';
-        this.style.addObj(td_icon_style_1.$tdIcon);
-        if (params === null || params === void 0 ? void 0 : params.loading) {
-            this.style.addObj(td_icon_style_1.$iconLoading);
-        }
-        // 首次创建时，添加style标签；避免重复创建
-        if (!TdIcon.initCalled) {
-            TdIcon.initCalled = true;
-            const cssText = `
-/* 选择所有带有 data-v-366071 属性的元素 */
-/* 在这里添加您的样式规则 */
-@keyframes rotating-${framework_1.vHash} {
-  0% {
-    transform: rotateZ(0deg);
-  }
-  100% {
-    transform: rotateZ(360deg);
-  }
-}
-      `;
-            (0, framework_1.createStyle)(cssText);
-            // createClass('td-icon', $tdIcon);
-        }
-        this.attr.addClass('td-icon');
-        this.addChild(this.getSlotNode());
         this.props = this.useParams(params);
     }
     /**
      * 根据配置更新图标的状态和样式。
-     * @param config 图标的配置对象，可选参数。
      */
     setup() {
-        var _a;
         const props = this.props;
-        if (props === null || props === void 0 ? void 0 : props.svgObj) {
-            // 直接作为 childNodes的子元素更合理；
-            this.getSlotNode().resetSlot(props.svgObj);
-            this.svg = props.svgObj;
-            this.svg.attr.addObj({
-                height: '1em',
-                width: '1em',
-            });
-        }
-        if (props === null || props === void 0 ? void 0 : props.color) {
-            this.style.addObj({
-                color: props.color,
-            });
-        }
-        if (props === null || props === void 0 ? void 0 : props.size) {
-            this.style.addObj({
-                fontSize: (0, utils_1.addUnit)(props.size),
-            });
-            (_a = this.svg) === null || _a === void 0 ? void 0 : _a.resetSize(props.size, props.size);
-        }
-        if ((props === null || props === void 0 ? void 0 : props.position) === 'right') {
-            // 位置应该是引用的对象中设置，自身应该不需要设置。
-            this.style.addObj(td_icon_style_1.$iconRight);
-        }
-        else if ((props === null || props === void 0 ? void 0 : props.position) === 'left') {
-            this.style.addObj(td_icon_style_1.$iconLeft);
-        }
+        const ns = (0, use_namespace_1.useNamespace)('icon');
+        const style = (0, signals_1.computed)(() => {
+            const { size, color } = props;
+            if (!size && !color) {
+                return {};
+            }
+            return {
+                fontSize: (0, utils_1.isUndefined)(size) ? undefined : (0, utils_1.addUnit)(size),
+                '--color': color,
+            };
+        });
+        this.attr.addClass(ns.b());
+        this.style.addObj(style);
+        this.slotChildren(props.slot);
     }
     /**
+     * todo delete
      * 替换子节点中的SVG元素。
      *
      * 此方法用于查找并替换当前节点中指定的SVG元素。如果找不到指定的SVG元素，则将新SVG元素添加为子节点。
@@ -89,15 +51,15 @@ class TdIcon extends ui_abstract_1.UI {
      */
     replaceSvg(toSvg, fromSvg) {
         var _a;
-        const slotNode = this.getSlotNode('default');
-        console.log('replaceSvg slotNode is ', slotNode);
+        console.log('replaceSvg ');
         // 查找要替换的SVG元素的索引。
-        const svgIndex = (_a = slotNode.childNodes) === null || _a === void 0 ? void 0 : _a.findIndex((child) => {
+        const svgIndex = (_a = this.childNodes) === null || _a === void 0 ? void 0 : _a.findIndex((child) => {
             // 如果指定了要替换的SVG元素，则判断当前元素是否是待替换的元素。
             if (fromSvg) {
                 return child === fromSvg;
             }
-            else if (child instanceof framework_1.TypeSvgSvg) { // 如果没有指定具体的SVG元素，则查找所有实例化的SVG元素的第一个。
+            else if (child instanceof framework_1.TypeSvgSvg) {
+                // 如果没有指定具体的SVG元素，则查找所有实例化的SVG元素的第一个。
                 fromSvg = child;
                 return true;
             }
@@ -105,48 +67,22 @@ class TdIcon extends ui_abstract_1.UI {
         });
         // 如果找不到指定的SVG元素，则将新SVG元素添加为子节点。
         if (svgIndex === -1) {
-            slotNode.addChild(toSvg);
+            this.addChild(toSvg);
         }
         else {
             // 替换找到的SVG元素为新SVG元素。
             if (fromSvg) {
-                fromSvg !== toSvg && slotNode.replaceChild(toSvg, fromSvg);
+                fromSvg !== toSvg && this.replaceChild(toSvg, fromSvg);
             }
             else {
-                slotNode.addChild(toSvg);
+                this.addChild(toSvg);
             }
-            // slotNode.childNodes.splice(svgIndex, 1, toSvg);
-            this.clearChildrenDom();
         }
         // // 设置新SVG元素的父节点为当前节点。
-        // toSvg.parent = slotNode;
         // 更新渲染，以显示替换或添加的新SVG元素。
-        slotNode.mount(this.dom);
-    }
-    /**
-     * 组件挂载后的钩子函数。
-     * 该函数目前用于处理加载状态的动画效果。
-     */
-    mounted() {
-        /**
-         * loading 效果
-         * todo css 中配置
-         * @keyframes rotating {
-         *   0% {
-         *     transform: rotateZ(0deg);
-         *   }
-         *   100% {
-         *     transform: rotateZ(360deg);
-         *   }
-         * }
-         * 现在配置的不生效 ？？？？  shadowRoot 会隔离了样式。
-         * 而打包时，样式会在最外层的项目中生成，导致样式失效。
-         */
-        // if (this.props.loading) {
-        //   const a = createRotatableElement(this.dom, 0, 60);
-        //   a.start();
-        // }
+        // toSvg?.mount(this.dom);
+        toSvg === null || toSvg === void 0 ? void 0 : toSvg.update();
+        // this.mount(this.elementParent?.dom);
     }
 }
 exports.TdIcon = TdIcon;
-TdIcon.initCalled = false;

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

@@ -1,25 +1,20 @@
-import { TypeSvgSvg } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { TdIcon } from './td-icon.class';
+import { ITypeI, TypeIProps } from '@type-dom/framework';
 /**
  * 定义了图标的接口，继承自IUI接口。
  * 此接口用于规范图标的属性和行为。
  */
-export interface ITdIcon extends IUI {
+export interface ITdIcon extends ITypeI {
     /**
      * 类名，固定为'TdIcon'，用于在HTML元素上应用样式。
      */
     className: 'TdIcon';
+    props: IconProps;
 }
 /**
  * 定义了图标配置的接口，扩展了IUIConfig接口。
  * 这些配置用于自定义图标的展示方式。
  */
-export interface ITdIconConfig extends IUIConfig {
-    /**
-     * 可选。指定一个SVG图形对象，用于显示自定义SVG图标。
-     */
-    svgObj?: TypeSvgSvg;
+export interface IconProps extends TypeIProps {
     /**
      * 可选。指定图标的大小，可以是字符串（如"20px"）或数字。
      */
@@ -28,16 +23,4 @@ export interface ITdIconConfig extends IUIConfig {
      * 可选。指定图标的颜色，使用字符串表示的颜色值。
      */
     color?: string;
-    /**
-     * 可选。指定图标是否处于加载状态，用于显示加载中的动画效果。
-     */
-    loading?: boolean;
-    /**
-     * 可选。指定图标的对齐方式，可以是"left"（左对齐）或"right"（右对齐）。
-     */
-    position?: 'left' | 'right';
-    /**
-     * 可选。用于插槽的SVG图形对象，可以替换默认的图标展示。
-     */
-    slot?: TypeSvgSvg | TdIcon;
 }

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

@@ -1,5 +1,5 @@
 import { IStyle } from '@type-dom/css-type';
-export declare const $tdIcon: IStyle;
-export declare const $iconLoading: IStyle;
-export declare const $iconRight: IStyle;
-export declare const $iconLeft: IStyle;
+export declare const $iconStyle: IStyle;
+export declare const $iconLoadingStyle: IStyle;
+export declare const $iconRightStyle: IStyle;
+export declare const $iconLeftStyle: IStyle;

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$iconLeft = exports.$iconRight = exports.$iconLoading = exports.$tdIcon = void 0;
+exports.$iconLeftStyle = exports.$iconRightStyle = exports.$iconLoadingStyle = exports.$iconStyle = void 0;
 const framework_1 = require("@type-dom/framework");
-exports.$tdIcon = {
+exports.$iconStyle = {
     height: '1em',
     width: '1em',
     lineHeight: '1em',
@@ -12,16 +12,16 @@ exports.$tdIcon = {
     position: 'relative',
     fill: 'currentColor',
     // color: 'var(--color)',
-    fontSize: 'inherit'
+    fontSize: 'inherit',
 };
-exports.$iconLoading = {
-    animation: `rotating-${framework_1.vHash} 2s linear infinite`
+exports.$iconLoadingStyle = {
+    animation: `rotating-${framework_1.vHash} 2s linear infinite`,
 };
-exports.$iconRight = {
+exports.$iconRightStyle = {
     marginLeft: '5px',
-    float: 'right'
+    float: 'right',
 };
-exports.$iconLeft = {
+exports.$iconLeftStyle = {
     marginRight: '5px',
-    float: 'left'
+    float: 'left',
 };

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

@@ -0,0 +1,2 @@
+import '@element-plus/components/base/style/css';
+import '@element-plus/theme-chalk/el-col.css';

package/src/components/basic/td-layout/td-col/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@element-plus/components/base/style/css");
+require("@element-plus/theme-chalk/el-col.css");

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

@@ -0,0 +1,2 @@
+import '../../../../base/style';
+import '../../../../../theme-chalk/col.scss';

package/src/components/basic/td-layout/td-col/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../../base/style");
+require("../../../../../theme-chalk/col.scss");

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

@@ -1,16 +1,11 @@
-import { UI } from '../../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { TdRow } from '../td-row/td-row.class';
-import { ITdCol, ITdColConfig } from './td-col.interface';
-import { TypeNode } from '@type-dom/framework';
-export declare class TdCol extends UI implements ITdCol {
+import { ColProps, ITdCol } from './td-col.interface';
+import './style/index';
+export declare class TdCol extends TypeDiv implements ITdCol {
     className: 'TdCol';
     parent?: TdRow;
-    props: ITdColConfig;
-    constructor(params?: ITdColConfig);
-    get screenWidth(): number;
+    props: ColProps;
+    constructor(params?: ColProps);
     setup(): void;
-    mounted(): void;
-    destroy(root?: TypeNode): void;
-    debounceResize: () => void;
-    resize: () => void;
 }

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

@@ -2,130 +2,69 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCol = void 0;
 const utils_1 = require("@type-dom/utils");
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
-class TdCol extends ui_abstract_1.UI {
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+const td_row_const_1 = require("../td-row/td-row.const");
+const td_col_const_1 = require("./td-col.const");
+require("./style/index");
+class TdCol extends framework_1.TypeDiv {
     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
-                    });
-                }
-            }
-        };
+        super();
         this.className = 'TdCol';
-        this.addChild(this.getSlotNode());
+        this.attr.addName('td-col');
+        this.assignProps(td_col_const_1.colProps);
         this.props = this.useParams(params);
     }
-    get screenWidth() {
-        return window.innerWidth || document.documentElement.clientWidth;
-    }
     setup() {
+        var _a;
         const props = this.props;
-        if (props === null || props === void 0 ? void 0 : props.span) {
-            if (props.span === 0) {
-                this.style.addObj({
-                    display: 'none'
-                });
+        const { gutter } = (0, framework_1.inject)(td_row_const_1.rowContextKey, {
+            gutter: (0, signals_1.computed)(() => 0),
+        });
+        const ns = (0, use_namespace_1.useNamespace)('col');
+        const style = (0, signals_1.computed)(() => {
+            const styles = {};
+            if (gutter.get()) {
+                styles.paddingLeft = styles.paddingRight = `${gutter.get() / 2}px`;
             }
-            else {
-                const proportion = (0, utils_1.formatFloat)(props.span / 24) * 100 + '%';
-                this.style.addObj({
-                    maxWidth: proportion,
-                    flex: '0 0 ' + proportion
-                });
-            }
-        }
-        if (props === null || props === void 0 ? void 0 : props.offset) {
-            const proportion = (0, utils_1.formatFloat)(props.offset / 24) * 100 + '%';
-            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.style.addObj({
-                position: 'relative',
-                right: proportion
+            return styles;
+        });
+        const colKls = (0, signals_1.computed)(() => {
+            const classes = [];
+            const pos = ['span', 'offset', 'pull', 'push'];
+            pos.forEach((prop) => {
+                const size = props[prop];
+                if ((0, utils_1.isNumber)(size)) {
+                    if (prop === 'span')
+                        classes.push(ns.b(`${props[prop]}`));
+                    else if (size > 0)
+                        classes.push(ns.b(`${prop}-${props[prop]}`));
+                }
             });
-        }
-        if (props === null || props === void 0 ? void 0 : props.push) {
-            const proportion = (0, utils_1.formatFloat)(props.push / 24) * 100 + '%';
-            this.style.addObj({
-                position: 'relative',
-                left: proportion
+            const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
+            sizes.forEach((size) => {
+                if ((0, utils_1.isNumber)(props[size])) {
+                    classes.push(ns.b(`${size}-${props[size]}`));
+                }
+                else if ((0, utils_1.isObject)(props[size])) {
+                    Object.entries(props[size]).forEach(([prop, sizeProp]) => {
+                        classes.push(prop !== 'span'
+                            ? ns.b(`${size}-${prop}-${sizeProp}`)
+                            : ns.b(`${size}-${sizeProp}`));
+                    });
+                }
             });
-        }
-        this.resize();
-    }
-    mounted() {
-        // 监听窗口大小改变事件
-        window.addEventListener('resize', this.debounceResize);
-    }
-    destroy(root) {
-        window.removeEventListener('resize', this.debounceResize);
-        super.destroy(root);
+            // this is for the fix
+            if (gutter.get()) {
+                classes.push(ns.is('guttered'));
+            }
+            console.error('classes is ', classes);
+            return [ns.b(), classes];
+        });
+        this.attr.addClass(colKls);
+        this.style.addObj(style);
+        this.slotChildren(props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default));
     }
 }
 exports.TdCol = TdCol;

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

@@ -0,0 +1,2 @@
+import { ColProps } from './td-col.interface';
+export declare const colProps: ColProps;