@type-dom/ui 0.0.3 → 0.0.5

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;
 }

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

@@ -2,73 +2,136 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdIcon = void 0;
 const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_icon_style_1 = require("./td-icon.style");
+/**
+ * TdIcon 类继承自 UI 类，实现了 ITdIcon 接口。
+ * 该类用于创建和管理图标，支持配置不同的图标样式和SVG图形。
+ */
 class TdIcon extends ui_abstract_1.UI {
-    constructor(config) {
-        super({ tag: 'i' });
+    /**
+     * TdIcon 类的构造函数。
+     * @param config 图标配置对象，可选参数。
+     */
+    constructor(params) {
+        super(params, 'i');
         this.className = 'TdIcon';
-        const slot = new framework_1.Slot({ parent: this });
-        this.childNodes = [slot];
-        this.addStyleObj(td_icon_style_1.$tdIcon);
-        this.setConfig(config);
-        this.resetConfig(config);
-    }
-    // todo
-    createSvg(className) {
-        return;
-    }
-    resetConfig(config) {
-        if (config === null || config === void 0 ? void 0 : config.SvgClass) {
-            // todo 直接作为 childNodes的子元素更合理；
-            const svg = new config.SvgClass(this);
-            // svg.resetSize('1em', '1em');
-            this.addChild(svg);
-            this.svg = svg;
+        this.ctrl.addStyleObj(td_icon_style_1.$tdIcon);
+        if (params === null || params === void 0 ? void 0 : params.loading) {
+            this.ctrl.addStyleObj(td_icon_style_1.$iconLoading);
         }
-        if (config === null || config === void 0 ? void 0 : config.svgObj) {
+        // 首次创建时，添加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.ctrl.addAttrClass('td-icon');
+        this.addChild(this.getSlotNode());
+        this.props = this.setParams(params);
+    }
+    /**
+     * 根据配置更新图标的状态和样式。
+     * @param config 图标的配置对象，可选参数。
+     */
+    setup() {
+        var _a;
+        const props = this.props;
+        if (props === null || props === void 0 ? void 0 : props.svgObj) {
             // 直接作为 childNodes的子元素更合理；
-            this.addChild(config.svgObj);
-            this.svg = config.svgObj;
+            this.getSlotNode().resetSlot(props.svgObj);
+            this.svg = props.svgObj;
+            this.svg.ctrl.addAttrObj({
+                height: '1em',
+                width: '1em',
+            });
         }
-        if (config === null || config === void 0 ? void 0 : config.color) {
-            this.addStyleObj({
-                color: config.color
+        if (props === null || props === void 0 ? void 0 : props.color) {
+            this.ctrl.addStyleObj({
+                color: props.color,
             });
         }
-        if (config === null || config === void 0 ? void 0 : config.size) {
-            this.addStyleObj({
-                fontSize: config.size
+        if (props === null || props === void 0 ? void 0 : props.size) {
+            this.ctrl.addStyleObj({
+                fontSize: (0, utils_1.addUnit)(props.size),
             });
+            (_a = this.svg) === null || _a === void 0 ? void 0 : _a.resetSize(props.size, props.size);
         }
-        if ((config === null || config === void 0 ? void 0 : config.position) === 'right') {
+        if ((props === null || props === void 0 ? void 0 : props.position) === 'right') {
             // 位置应该是引用的对象中设置，自身应该不需要设置。
-            this.addStyleObj(td_icon_style_1.$iconRight);
+            this.ctrl.addStyleObj(td_icon_style_1.$iconRight);
         }
-        else if ((config === null || config === void 0 ? void 0 : config.position) === 'left') {
-            this.addStyleObj(td_icon_style_1.$iconLeft);
+        else if ((props === null || props === void 0 ? void 0 : props.position) === 'left') {
+            this.ctrl.addStyleObj(td_icon_style_1.$iconLeft);
         }
-        // this.addStyleObj(sizeOpts[size]);
-        // this.addAttrObj({
-        //   type: 'primary', // success warn danger primary
-        //   size: 'middle' // small middle, large
-        // });
     }
-    created() {
+    /**
+     * 替换子节点中的SVG元素。
+     *
+     * 此方法用于查找并替换当前节点中指定的SVG元素。如果找不到指定的SVG元素，则将新SVG元素添加为子节点。
+     * 这对于动态更新SVG内容特别有用，比如在用户交互或数据变化时更新图表。
+     *
+     * @param toSvg 要替换为的新SVG元素。
+     * @param fromSvg 可选参数，指定要替换的SVG元素。如果不提供，则替换所有实例化的SVG元素。
+     */
+    replaceSvg(toSvg, fromSvg) {
         var _a;
-        if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.loading) {
-            this.addStyleObj(td_icon_style_1.$iconLoading);
+        const slotNode = this.getSlotNode('default');
+        console.log('replaceSvg slotNode is ', slotNode);
+        // 查找要替换的SVG元素的索引。
+        const svgIndex = (_a = slotNode.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元素的第一个。
+                fromSvg = child;
+                return true;
+            }
+            return false;
+        });
+        // 如果找不到指定的SVG元素，则将新SVG元素添加为子节点。
+        if (svgIndex === -1) {
+            slotNode.addChild(toSvg);
         }
+        else {
+            // 替换找到的SVG元素为新SVG元素。
+            if (fromSvg) {
+                fromSvg !== toSvg && slotNode.replaceChild(toSvg, fromSvg);
+            }
+            else {
+                slotNode.addChild(toSvg);
+            }
+            // slotNode.childNodes.splice(svgIndex, 1, toSvg);
+            this.clearChildrenDom();
+        }
+        // // 设置新SVG元素的父节点为当前节点。
+        // toSvg.parent = slotNode;
+        // 更新渲染，以显示替换或添加的新SVG元素。
+        slotNode.mount(this.dom);
     }
-    replaceSvg(svg) {
-        this.childNodes.splice(1, 1, svg);
-        svg.parent = this;
-        this.render();
-    }
+    /**
+     * 组件挂载后的钩子函数。
+     * 该函数目前用于处理加载状态的动画效果。
+     */
     mounted() {
         /**
          * loading 效果
-         * todo css 中配置 @keyframes rotating {
+         * todo css 中配置
+         * @keyframes rotating {
          *   0% {
          *     transform: rotateZ(0deg);
          *   }
@@ -79,10 +142,11 @@ class TdIcon extends ui_abstract_1.UI {
          * 现在配置的不生效 ？？？？  shadowRoot 会隔离了样式。
          * 而打包时，样式会在最外层的项目中生成，导致样式失效。
          */
-        // if (this.config?.loading) {
+        // if (this.props.loading) {
         //   const a = createRotatableElement(this.dom, 0, 60);
         //   a.start();
         // }
     }
 }
 exports.TdIcon = TdIcon;
+TdIcon.initCalled = false;