@type-dom/ui 0.0.8 → 0.0.10

package/src/components/data/td-avatar/td-avatar.class.js

@@ -9,8 +9,8 @@ class TdAvatar extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'span');
         this.className = 'TdAvatar';
-        this.ctrl.addAttrName('td-avatar');
-        this.ctrl.addStyleObj({
+        this.attr.addName('td-avatar');
+        this.style.addObj({
             display: 'inline-flex',
             justifyContent: 'center',
             alignItems: 'center',
@@ -29,7 +29,7 @@ class TdAvatar extends ui_abstract_1.UI {
             fontSize: td_avatar_style_1.$avatar.textSize
         });
         this.hasLoadError = false;
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     setup() {
         var _a, _b, _c;
@@ -50,7 +50,7 @@ class TdAvatar extends ui_abstract_1.UI {
         }
         else if (props === null || props === void 0 ? void 0 : props.icon) {
             this.addChild(props.icon);
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 fontSize: td_avatar_style_1.$avatar.iconSize
             });
         }
@@ -60,47 +60,46 @@ class TdAvatar extends ui_abstract_1.UI {
             }
         }
         const fit = (props === null || props === void 0 ? void 0 : props.fit) || 'cover';
-        (_a = this.img) === null || _a === void 0 ? void 0 : _a.ctrl.addStyleObj({
+        (_a = this.img) === null || _a === void 0 ? void 0 : _a.style.addObj({
             objectFit: fit
         });
         const shape = (props === null || props === void 0 ? void 0 : props.shape) || 'circle';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             borderRadius: shape === 'circle' ? '50%' : td_avatar_style_1.$avatar.borderRadius
         });
         const size = (props === null || props === void 0 ? void 0 : props.size) || 'default';
         if ((0, utils_1.isNumber)(size)) {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 width: (0, utils_1.addUnit)(size),
                 height: (0, utils_1.addUnit)(size)
             });
-            (_b = this.img) === null || _b === void 0 ? void 0 : _b.ctrl.addStyleObj({
+            (_b = this.img) === null || _b === void 0 ? void 0 : _b.style.addObj({
                 width: (0, utils_1.addUnit)(size),
                 height: (0, utils_1.addUnit)(size)
             });
             if ((props === null || props === void 0 ? void 0 : props.slot) instanceof framework_1.TypeElement) {
-                props.slot.ctrl.addStyleObj({
+                props.slot.style.addObj({
                     width: (0, utils_1.addUnit)(size),
                     height: (0, utils_1.addUnit)(size)
                 });
             }
         }
         else {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 width: td_avatar_style_1.$avatarSize[size],
                 height: td_avatar_style_1.$avatarSize[size]
             });
-            (_c = this.img) === null || _c === void 0 ? void 0 : _c.ctrl.addStyleObj({
+            (_c = this.img) === null || _c === void 0 ? void 0 : _c.style.addObj({
                 width: td_avatar_style_1.$avatarSize[size],
                 height: td_avatar_style_1.$avatarSize[size]
             });
             if ((props === null || props === void 0 ? void 0 : props.slot) instanceof framework_1.TypeElement) {
-                props.slot.ctrl.addStyleObj({
+                props.slot.style.addObj({
                     width: td_avatar_style_1.$avatarSize[size],
                     height: td_avatar_style_1.$avatarSize[size]
                 });
             }
         }
-        // super.setProps(config);
     }
     // todo 监听 src 改变
     setSrc(src) {

package/src/components/data/td-badge/td-badge.class.js

@@ -12,8 +12,8 @@ class TdBadge extends ui_abstract_1.UI {
         super(params);
         console.log('TdBadge constructor . ');
         this.className = 'TdBadge';
-        this.ctrl.addAttrName('td-badge');
-        this.ctrl.addStyleObj({
+        this.attr.addName('td-badge');
+        this.style.addObj({
             position: 'relative',
             verticalAlign: 'middle',
             display: 'inline-block',
@@ -44,12 +44,13 @@ class TdBadge extends ui_abstract_1.UI {
                 marginTop: (0, utils_1.addUnit)((_d = (_c = params === null || params === void 0 ? void 0 : params.offset) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : 0)
             }
         });
+        this.addChild(this.getSlotNode());
         this.addChild(new framework_1.Transition({
             name: 'td-badge',
             parent: this,
-            childNodes: [this.sup]
+            slot: this.sup
         }));
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     setup() {
         console.log('TdBadge setup');
@@ -71,7 +72,7 @@ class TdBadge extends ui_abstract_1.UI {
             this.sup.getTextNode().setText(content);
         }
         if (props === null || props === void 0 ? void 0 : props.slot) {
-            this.sup.ctrl.addStyleObj({
+            this.sup.style.addObj({
                 // 默认样式
                 position: 'absolute',
                 top: '0',
@@ -83,7 +84,7 @@ class TdBadge extends ui_abstract_1.UI {
             });
         }
         if (props === null || props === void 0 ? void 0 : props.isDot) {
-            this.sup.ctrl.addStyleObj({
+            this.sup.style.addObj({
                 height: 8,
                 width: 8,
                 padding: 0,
@@ -92,12 +93,12 @@ class TdBadge extends ui_abstract_1.UI {
             });
         }
         if (props === null || props === void 0 ? void 0 : props.type) {
-            this.sup.ctrl.addStyleObj({
+            this.sup.style.addObj({
                 backgroundColor: var_1.$colors[props.type].base
             });
         }
         if (props === null || props === void 0 ? void 0 : props.dotStyle) {
-            this.sup.ctrl.addStyleObj(props.dotStyle);
+            this.sup.style.addObj(props.dotStyle);
         }
     }
     changeValue(value) {

package/src/components/data/td-card/td-card.class.js

@@ -10,8 +10,8 @@ class TdCard extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdCard';
-        this.ctrl.addAttrName('td-card');
-        this.ctrl.addStyleObj({
+        this.attr.addName('td-card');
+        this.style.addObj({
             //   border-radius: getCssVar('card', 'border-radius'),
             borderRadius: td_card_style_1.$card.borderRadius,
             // border: 1px solid getCssVar('card', 'border-color'),
@@ -33,28 +33,28 @@ class TdCard extends ui_abstract_1.UI {
             }
         });
         if (params === null || params === void 0 ? void 0 : params.bodyStyle) {
-            this.body.ctrl.addStyleObj(params.bodyStyle);
+            this.body.style.addObj(params.bodyStyle);
         }
         if (params === null || params === void 0 ? void 0 : params.bodyClass) {
-            this.body.ctrl.addAttrClass(params.bodyClass);
+            this.body.attr.addClass(params.bodyClass);
         }
         if (params === null || params === void 0 ? void 0 : params.slot) {
             this.body.slotChild(params.slot);
         }
         this.addChild(this.body);
         this.addFooter(params);
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     addShadow(params) {
         const shadow = (params === null || params === void 0 ? void 0 : params.shadow) || 'always';
         if (shadow === 'always') {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 boxShadow: var_1.$boxShadow.light
             });
         }
         else if (shadow === 'hover') {
             //   todo :hover :focus boxShadow: $boxShadow.light
-            this.ctrl.addAttrClass('hover-shadow');
+            this.attr.addClass('hover-shadow');
             (0, framework_1.createClass)('hover-shadow:hover', {
                 boxShadow: var_1.$boxShadow.light
             });

package/src/components/data/td-check-tag/td-check-tag.class.d.ts

@@ -6,7 +6,6 @@ export declare class TdCheckTag extends UI implements ITdCheckTag {
     checked?: boolean;
     private type;
     constructor(params?: ITdCheckTagConfig);
-    initEvents(): void;
     handleChange(): void;
     setChecked(checked?: boolean): void;
 }

package/src/components/data/td-check-tag/td-check-tag.class.js

@@ -9,14 +9,12 @@ class TdCheckTag extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'span');
         this.className = 'TdCheckTag';
-        this.ctrl.addAttrName('td-check-tag');
+        this.attr.addName('td-check-tag');
         this.type = (params === null || params === void 0 ? void 0 : params.type) || 'primary';
         (0, td_check_tag_style_1.useType)();
-        this.ctrl.addStyleObj(td_check_tag_style_1.$checkTag);
+        this.style.addObj(td_check_tag_style_1.$checkTag);
         this.setChecked(params === null || params === void 0 ? void 0 : params.checked);
-        this.props = this.setProps(params);
-    }
-    initEvents() {
+        this.props = this.useParams(params);
         this.addEvents({
             click: () => {
                 // if (this.props.emits?.change) {
@@ -27,24 +25,24 @@ class TdCheckTag extends ui_abstract_1.UI {
             },
             mouseenter: () => {
                 if (this.checked) {
-                    this.ctrl.setStyleObj({
+                    this.style.setObj({
                         backgroundColor: var_1.$colors[this.type]['light-7']
                     });
                 }
                 else {
-                    this.ctrl.setStyleObj({
+                    this.style.setObj({
                         backgroundColor: var_1.$colors.info['light-7']
                     });
                 }
             },
             mouseleave: () => {
                 if (this.checked) {
-                    this.ctrl.setStyleObj({
+                    this.style.setObj({
                         backgroundColor: var_1.$colors[this.type]['light-8']
                     });
                 }
                 else {
-                    this.ctrl.setStyleObj({
+                    this.style.setObj({
                         backgroundColor: var_1.$colors.info['light-9']
                     });
                 }
@@ -62,10 +60,10 @@ class TdCheckTag extends ui_abstract_1.UI {
     setChecked(checked) {
         this.checked = checked;
         if (checked) {
-            this.ctrl.setStyleObj(td_check_tag_style_1.$checkTagChecked[this.type]);
+            this.style.setObj(td_check_tag_style_1.$checkTagChecked[this.type]);
         }
         else {
-            this.ctrl.setStyleObj({
+            this.style.setObj({
                 backgroundColor: var_1.$colors.info['light-9'],
                 color: var_1.$colors.info.base
             });

package/src/components/data/td-collapse/td-collapse.class.js

@@ -10,7 +10,7 @@ class TdCollapse extends ui_abstract_1.UI {
         super(params);
         this.className = 'TdCollapse';
         this.childNodes = [];
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             //   border-top: 1px solid getCssVar('collapse-border-color');
             borderTop: '1px solid ' + td_collapse_style_1.$collapse.borderColor,
             // border-bottom: 1px solid getCssVar('collapse-border-color');
@@ -19,7 +19,7 @@ class TdCollapse extends ui_abstract_1.UI {
         this.activeNames = (0, utils_1.isArray)(params === null || params === void 0 ? void 0 : params.modelValue)
             ? params.modelValue
             : [(_a = params === null || params === void 0 ? void 0 : params.modelValue) !== null && _a !== void 0 ? _a : ''];
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     mounted() {
         this.setActiveNames(this.activeNames);

package/src/components/data/td-collapse-item/td-collapse-item.class.js

@@ -43,7 +43,7 @@ class TdCollapseItem extends ui_abstract_1.UI {
                 fontSize: td_collapse_style_1.$collapse.headerFontSize,
                 fontWeight: 500,
                 // transition: border-bottom-color getCssVar('transition-duration'),
-                transition: 'border-bottom-color ' + var_1.$transitionDuration,
+                transition: 'border-bottom-color ' + var_1.$transitionDurationDefault,
                 outline: 'none'
             },
             events: {
@@ -54,8 +54,7 @@ class TdCollapseItem extends ui_abstract_1.UI {
                 // keydown.space.enter.stop.prevent: () => {
                 // },
                 keydown: (event) => {
-                    if (event.key === 'Enter' ||
-                        event.key === ' ') {
+                    if ((event === null || event === void 0 ? void 0 : event.key) === 'Enter' || (event === null || event === void 0 ? void 0 : event.key) === ' ') {
                         event === null || event === void 0 ? void 0 : event.preventDefault();
                         event === null || event === void 0 ? void 0 : event.stopPropagation();
                         this.handleEnterClick();
@@ -81,7 +80,7 @@ class TdCollapseItem extends ui_abstract_1.UI {
             styleObj: {
                 margin: '0 8px 0 auto',
                 // transition: transform getCssVar('transition-duration'),
-                transition: 'transform ' + var_1.$transitionDuration,
+                transition: 'transform ' + var_1.$transitionDurationDefault,
                 fontWeight: 300
             }
         });
@@ -122,10 +121,10 @@ class TdCollapseItem extends ui_abstract_1.UI {
         this.wrapper.addChild(this.content);
         this.transition = new td_collapse_transition_class_1.TdCollapseTransition({
             parent: this,
-            childNodes: [this.wrapper]
+            slot: this.wrapper
         });
         this.addChild(this.transition);
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     setActive(active) {
         if (active) {
@@ -147,10 +146,10 @@ class TdCollapseItem extends ui_abstract_1.UI {
             //   });
             // });
             this.transition.showSlot(true);
-            this.headerBtn.ctrl.setStyleObj({
+            this.headerBtn.style.setObj({
                 borderBottomColor: 'transparent'
             });
-            this.arrowIcon.ctrl.setStyleObj({
+            this.arrowIcon.style.setObj({
                 transform: 'rotate(90deg)'
             });
         }
@@ -167,10 +166,10 @@ class TdCollapseItem extends ui_abstract_1.UI {
             //   });
             // });
             this.transition.showSlot(false);
-            this.headerBtn.ctrl.setStyleObj({
-                transition: 'transform ' + var_1.$transitionDuration
+            this.headerBtn.style.setObj({
+                transition: 'transform ' + var_1.$transitionDurationDefault,
             });
-            this.arrowIcon.ctrl.setStyleObj({
+            this.arrowIcon.style.setObj({
                 transform: 'rotate(0deg)'
             });
             // todo transition
@@ -179,14 +178,14 @@ class TdCollapseItem extends ui_abstract_1.UI {
     }
     setDisable(disabled) {
         if (disabled) {
-            this.headerBtn.ctrl.setStyleObj({
+            this.headerBtn.style.setObj({
                 // color: getCssVar('text-color-disabled'),
                 color: var_1.$textColor.disabled,
                 cursor: 'not-allowed'
             });
         }
         else {
-            this.headerBtn.ctrl.setStyleObj({
+            this.headerBtn.style.setObj({
                 // color: getCssVar('collapse-header-text-color'),
                 color: td_collapse_style_1.$collapse.headerTextColor,
                 cursor: 'pointer'
@@ -195,11 +194,11 @@ class TdCollapseItem extends ui_abstract_1.UI {
     }
     handleFocus() {
         setTimeout(() => {
-            if (!this.isClick) {
-                this.focusing = true;
+            if (this.isClick) {
+                this.isClick = false;
             }
             else {
-                this.isClick = false;
+                this.focusing = true;
             }
         }, 50);
     }

package/src/components/data/td-collapse-transition/td-collapse-transition.util.js

@@ -10,7 +10,7 @@ const reset = (element) => {
     // el.style.overflow = el.dataset.oldOverflow
     // el.style.paddingTop = el.dataset.oldPaddingTop
     // el.style.paddingBottom = el.dataset.oldPaddingBottom
-    element === null || element === void 0 ? void 0 : element.ctrl.setStyleObj({
+    element === null || element === void 0 ? void 0 : element.style.setObj({
         maxHeight: '',
         overflow: el.dataset.oldOverflow,
         paddingTop: el.dataset.oldPaddingTop,
@@ -26,9 +26,9 @@ exports.collapseTransitionConfig = {
         }
         if (!el.dataset) {
             // el.dataset = {};
-            element.ctrl.setAttribute('dataset', false);
+            element.attr.set('dataset', false);
         }
-        element.ctrl.setAttrObj({
+        element.attr.setObj({
             dataOldPaddingTop: el.style.paddingTop,
             dataOldPaddingBottom: el.style.paddingBottom
         });
@@ -36,14 +36,14 @@ exports.collapseTransitionConfig = {
         // el.dataset.oldPaddingBottom = el.style.paddingBottom
         if (el.style.height) {
             // el.dataset.existsHeight = el.style.height
-            element.ctrl.setAttrObj({
+            element.attr.setObj({
                 dataExistsHeight: el.style.height
             });
         }
         // el.style.maxHeight = 0
         // el.style.paddingTop = 0
         // el.style.paddingBottom = 0
-        element.ctrl.setStyleObj({
+        element.style.setObj({
             maxHeight: 0,
             paddingTop: 0,
             paddingBottom: 0,
@@ -57,32 +57,32 @@ exports.collapseTransitionConfig = {
             throw Error('element is not exist . ');
         }
         requestAnimationFrame(() => {
-            element.ctrl.setAttrObj({
+            element.attr.setObj({
                 dataOldOverflow: el.style.overflow
             });
             // el.dataset.oldOverflow = el.style.overflow
             if (el.dataset.existsHeight) {
                 // el.style.maxHeight = el.dataset.existsHeight
-                element.ctrl.setStyleObj({
+                element.style.setObj({
                     maxHeight: el.dataset.existsHeight
                 });
             }
             else if (el.scrollHeight !== 0) {
                 // el.style.maxHeight = `${el.scrollHeight}px`
-                element.ctrl.setStyleObj({
+                element.style.setObj({
                     maxHeight: `${el.scrollHeight}px`
                 });
             }
             else {
                 // el.style.maxHeight = 0
-                element.ctrl.setStyleObj({
+                element.style.setObj({
                     maxHeight: 0
                 });
             }
             // el.style.paddingTop = el.dataset.oldPaddingTop
             // el.style.paddingBottom = el.dataset.oldPaddingBottom
             // el.style.overflow = 'hidden'
-            element.ctrl.setStyleObj({
+            element.style.setObj({
                 paddingTop: el.dataset.oldPaddingTop,
                 paddingBottom: el.dataset.oldPaddingBottom,
                 overflow: 'hidden'
@@ -93,7 +93,7 @@ exports.collapseTransitionConfig = {
         var _a;
         // el.style.maxHeight = ''
         // el.style.overflow = el.dataset.oldOverflow
-        element === null || element === void 0 ? void 0 : element.ctrl.setStyleObj({
+        element === null || element === void 0 ? void 0 : element.style.setObj({
             maxHeight: '',
             overflow: (_a = element === null || element === void 0 ? void 0 : element.dom) === null || _a === void 0 ? void 0 : _a.dataset.oldOverflow
         });
@@ -110,14 +110,14 @@ exports.collapseTransitionConfig = {
         // el.dataset.oldPaddingTop = el.style.paddingTop
         // el.dataset.oldPaddingBottom = el.style.paddingBottom
         // el.dataset.oldOverflow = el.style.overflow
-        element.ctrl.setAttrObj({
+        element.attr.setObj({
             dataOldPaddingTop: el.style.paddingTop,
             dataOldPaddingBottom: el.style.paddingBottom,
             dataOldOverflow: el.style.overflow
         });
         // el.style.maxHeight = `${el.scrollHeight}px`
         // el.style.overflow = 'hidden'
-        element.ctrl.setStyleObj({
+        element.style.setObj({
             maxHeight: `${el.scrollHeight}px`,
             overflow: 'hidden'
         });
@@ -131,7 +131,7 @@ exports.collapseTransitionConfig = {
             // el.style.maxHeight = 0
             // el.style.paddingTop = 0
             // el.style.paddingBottom = 0
-            element.ctrl.setStyleObj({
+            element.style.setObj({
                 maxHeight: 0,
                 paddingTop: 0,
                 paddingBottom: 0

package/src/components/data/td-count-down/td-count-down.class.js

@@ -14,7 +14,7 @@ class TdCountDown extends td_statistic_abstract_1.TdStatisticAbstract {
         this.rawValue = (0, utils_2.getTime)((params === null || params === void 0 ? void 0 : params.value) || 0) - Date.now();
         this.setNumber(this.rawValue);
         this.addChild(this.getSlotNode());
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     mounted() {
         this.stopTimer();

package/src/components/data/td-descriptions/td-descriptions-row.js

@@ -13,7 +13,7 @@ class TdDescriptionsRow extends framework_1.TypeFragment {
         super();
         this.className = 'TdDescriptionsRow';
         this.childNodes = [];
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     created() {
         var _a;
@@ -74,7 +74,7 @@ class TdDescriptionsRow extends framework_1.TypeFragment {
             });
             this.addChild(tr);
         }
-        // this.setProps(this.config);
+        // this.useParams(this.config);
     }
 }
 exports.TdDescriptionsRow = TdDescriptionsRow;

package/src/components/data/td-descriptions/td-descriptions.class.js

@@ -10,7 +10,7 @@ class TdDescriptions extends ui_abstract_1.UI {
     constructor(params) {
         super(params);
         this.className = 'TdDescriptions';
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     created() {
         var _a, _b, _c, _d;
@@ -85,7 +85,7 @@ class TdDescriptions extends ui_abstract_1.UI {
         });
         this.body.addChild(this.bodyTable);
         this.addChild(this.body);
-        this.setProps(props); // todo ????
+        this.useParams(props); // todo ????
     }
     filledNode(node, span, count, isLast = false) {
         if (!node.props) {
@@ -139,15 +139,15 @@ class TdDescriptions extends ui_abstract_1.UI {
         this.props.size = size;
         (0, td_descriptions_style_1.useSize)(this.props);
         (0, td_descriptions_style_1.useBordered)(this.props);
-        this.ctrl.setStyleObj(td_descriptions_style_1.$descriptionsStyle);
-        (_a = this.header) === null || _a === void 0 ? void 0 : _a.ctrl.setStyleObj(td_descriptions_style_1.$descriptionsHeaderStyle);
-        (_b = this.headerTitle) === null || _b === void 0 ? void 0 : _b.ctrl.setStyleObj(td_descriptions_style_1.$descriptionsHeaderTitleStyle);
-        (_c = this.body) === null || _c === void 0 ? void 0 : _c.ctrl.setStyleObj(td_descriptions_style_1.$descriptionsBodyStyle);
-        (_d = this.bodyTable) === null || _d === void 0 ? void 0 : _d.ctrl.setStyleObj(td_descriptions_style_1.$descriptionsBodyTableStyle);
+        this.style.setObj(td_descriptions_style_1.$descriptionsStyle);
+        (_a = this.header) === null || _a === void 0 ? void 0 : _a.style.setObj(td_descriptions_style_1.$descriptionsHeaderStyle);
+        (_b = this.headerTitle) === null || _b === void 0 ? void 0 : _b.style.setObj(td_descriptions_style_1.$descriptionsHeaderTitleStyle);
+        (_c = this.body) === null || _c === void 0 ? void 0 : _c.style.setObj(td_descriptions_style_1.$descriptionsBodyStyle);
+        (_d = this.bodyTable) === null || _d === void 0 ? void 0 : _d.style.setObj(td_descriptions_style_1.$descriptionsBodyTableStyle);
         (_e = this.rows) === null || _e === void 0 ? void 0 : _e.forEach((row) => {
             row.childNodes.forEach((tr) => {
                 tr.childNodes.forEach((td) => {
-                    td.ctrl.setStyleObj(td_descriptions_style_1.$descriptionsBodyTableCellStyle);
+                    td.style.setObj(td_descriptions_style_1.$descriptionsBodyTableCellStyle);
                 });
             });
         });

package/src/components/data/td-descriptions/td-descritions-cell.js

@@ -8,7 +8,7 @@ class TdDescriptionsCell extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, (params === null || params === void 0 ? void 0 : params.tag) || 'td');
         this.className = 'TdDescriptionsCell';
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     created() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
@@ -21,34 +21,34 @@ class TdDescriptionsCell extends ui_abstract_1.UI {
         const isVertical = (descriptionsConfig === null || descriptionsConfig === void 0 ? void 0 : descriptionsConfig.direction) === 'vertical';
         // useSize(descriptionsConfig);
         // useBordered(descriptionsConfig);
-        this.ctrl.addStyleObj(td_descriptions_style_1.$descriptionsBodyTableCellStyle);
+        this.style.addObj(td_descriptions_style_1.$descriptionsBodyTableCellStyle);
         const props = this.props;
         const span = ((_a = props.cell) === null || _a === void 0 ? void 0 : _a.span) || 1;
         // console.log('span is ', span);
         switch (props.type) {
             case 'label':
                 console.log('label . ');
-                this.ctrl.addAttrObj({
+                this.attr.addObj({
                     colspan: isVertical ? span : 1,
                     // colspan: span * 2 - 1 || 1
                 });
-                this.ctrl.addStyleObj(td_descriptions_style_1.$descriptionsCellLabelStyle);
+                this.style.addObj(td_descriptions_style_1.$descriptionsCellLabelStyle);
                 if ((_c = (_b = props.cell) === null || _b === void 0 ? void 0 : _b.slots) === null || _c === void 0 ? void 0 : _c.label) {
                     this.addChild(props === null || props === void 0 ? void 0 : props.cell.slots.label);
                 }
                 else if ((_d = props.cell) === null || _d === void 0 ? void 0 : _d.label) {
                     this.addChild(new framework_1.TextNode(props.cell.label));
                     if (props.cell.labelStyle) {
-                        this.ctrl.addStyleObj((_e = props.cell) === null || _e === void 0 ? void 0 : _e.labelStyle);
+                        this.style.addObj((_e = props.cell) === null || _e === void 0 ? void 0 : _e.labelStyle);
                     }
                 }
                 if ((_f = props.cell) === null || _f === void 0 ? void 0 : _f.labelAlign) {
-                    this.ctrl.addStyleObj({
+                    this.style.addObj({
                         textAlign: props.cell.labelAlign
                     });
                 }
                 if ((_g = props.cell) === null || _g === void 0 ? void 0 : _g.width) {
-                    this.ctrl.addStyleObj({
+                    this.style.addObj({
                         width: props.cell.width
                     });
                 }
@@ -56,10 +56,10 @@ class TdDescriptionsCell extends ui_abstract_1.UI {
             case 'content':
                 // debugger;
                 console.log('content . ');
-                this.ctrl.addAttrObj({
+                this.attr.addObj({
                     colspan: span * 2 - 1 || 1
                 });
-                this.ctrl.addStyleObj(td_descriptions_style_1.$descriptionsCellContentStyle);
+                this.style.addObj(td_descriptions_style_1.$descriptionsCellContentStyle);
                 if (typeof ((_h = props.cell) === null || _h === void 0 ? void 0 : _h.text) === 'string') {
                     this.addChild(new framework_1.TextNode(props.cell.text));
                 }
@@ -67,25 +67,25 @@ class TdDescriptionsCell extends ui_abstract_1.UI {
                     this.slotChild(props.cell.slot);
                 }
                 if ((_k = props.cell) === null || _k === void 0 ? void 0 : _k.contentStyle) {
-                    this.ctrl.addStyleObj(props.cell.contentStyle);
+                    this.style.addObj(props.cell.contentStyle);
                 }
                 if ((_l = props.cell) === null || _l === void 0 ? void 0 : _l.align) {
-                    this.ctrl.addStyleObj({
+                    this.style.addObj({
                         textAlign: props.cell.align
                     });
                 }
                 if ((_m = props.cell) === null || _m === void 0 ? void 0 : _m.width) {
-                    this.ctrl.addStyleObj({
+                    this.style.addObj({
                         width: props.cell.width
                     });
                 }
                 break;
             default:
-                this.ctrl.addAttrObj({
+                this.attr.addObj({
                     colspan: span
                 });
                 if ((_p = (_o = props.cell) === null || _o === void 0 ? void 0 : _o.slots) === null || _p === void 0 ? void 0 : _p.label) {
-                    props.cell.slots.label.ctrl.setStyleObj(td_descriptions_style_1.$descriptionsCellLabelStyle);
+                    props.cell.slots.label.style.setObj(td_descriptions_style_1.$descriptionsCellLabelStyle);
                     this.addChild((_r = (_q = props.cell) === null || _q === void 0 ? void 0 : _q.slots) === null || _r === void 0 ? void 0 : _r.label);
                 }
                 else if ((_s = props.cell) === null || _s === void 0 ? void 0 : _s.label) {