@type-dom/ui 0.0.7 → 0.0.9

package/src/components/form/field-select/field-select.class.js

@@ -1,21 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldSelect = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 const option_class_1 = require("./option/option.class");
 class FieldSelect extends framework_1.TypeSelect {
     constructor() {
         super();
         this.className = 'FieldSelect';
-        this.ctrl.addAttrName('td-select');
+        this.attr.addName('td-select');
         this.childNodes = [];
     }
     setOptions(options, value) {
         this.clearChildren();
         const firstOpt = new option_class_1.SelectOption();
         firstOpt.textNode.setText('请选择');
-        firstOpt.ctrl.addAttrObj({
+        firstOpt.attr.addObj({
             label: '请选择',
             value: 0
         });
@@ -23,7 +22,7 @@ class FieldSelect extends framework_1.TypeSelect {
         options.forEach((opt) => {
             const optObj = new option_class_1.SelectOption();
             optObj.textNode.setText(opt.label);
-            optObj.ctrl.addAttrObj({
+            optObj.attr.addObj({
                 label: opt.label,
                 value: opt.value
             });
@@ -32,12 +31,11 @@ class FieldSelect extends framework_1.TypeSelect {
             this.addChild(optObj);
         });
         this.childNodes.forEach((optObj) => {
-            var _a;
-            if (String((_a = optObj.props.attrObj) === null || _a === void 0 ? void 0 : _a.value).trim() === String(value).trim()) {
-                optObj.ctrl.addAttribute('selected', true);
+            if (String(optObj.attr.get('value')).trim() === String(value).trim()) {
+                optObj.attr.add('selected', true);
             }
             else {
-                // optObj.ctrl.removeAttribute('selected');
+                // optObj.attr.remove('selected');
             }
         });
         // console.error('this.dom.value is ', this.dom.value);
@@ -47,22 +45,23 @@ class FieldSelect extends framework_1.TypeSelect {
         this.mount(); // 需要单独渲染。
         // console.error('this.dom.value is ', this.dom.value);
     }
-    initEvents() {
-        this.subscriptions.push(
-        // 如果只有一个选项时，监听change，input有问题。
-        (0, rxjs_1.fromEvent)(this.dom, 'click').subscribe((evt) => {
-            console.log('this.select.dom click, event is ', evt);
-            console.log('this.select.dom.value is ', this.dom.value);
-            // console.log(this.reset);
-            // this.setValue(this.dom.value);
-            this.value = this.dom.value;
-        }), (0, rxjs_1.fromEvent)(this.dom, 'change').subscribe((evt) => {
-            console.log('this.select.dom change, event is ', evt);
-            console.log('this.select.dom.value is ', this.dom.value);
-            // console.log(this.reset);
-            // this.setValue(this.dom.value);
-            this.value = this.dom.value;
-        }));
+    setup() {
+        this.addEvents({
+            click: (evt) => {
+                console.log('this.select.dom click, event is ', evt);
+                console.log('this.select.dom.value is ', this.dom.value);
+                // console.log(this.reset);
+                // this.setValue(this.dom.value);
+                this.value = this.dom.value;
+            },
+            change: (evt) => {
+                console.log('this.select.dom change, event is ', evt);
+                console.log('this.select.dom.value is ', this.dom.value);
+                // console.log(this.reset);
+                // this.setValue(this.dom.value);
+                this.value = this.dom.value;
+            }
+        });
     }
 }
 exports.FieldSelect = FieldSelect;

package/src/components/form/field-select/option/option.class.js

@@ -6,9 +6,7 @@ class SelectOption extends framework_1.TypeOption {
     constructor() {
         super();
         this.className = 'SelectOption';
-        this.props.attrObj = {
-            name: 'option'
-        };
+        this.attr.addName('option');
         this.textNode = new framework_1.TextNode('一个选项');
         this.childNodes = [this.textNode];
     }

package/src/components/form/radio-group/radio-group.class.js

@@ -7,10 +7,10 @@ class RadioGroup extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
         this.className = 'RadioGroup';
-        this.ctrl.addAttrName('radio-group');
+        this.attr.addName('radio-group');
         this.value = '';
         this.childNodes = [];
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
     setup() {
         const props = this.props;
@@ -23,7 +23,7 @@ class RadioGroup extends framework_1.TypeDiv {
         const random = Math.random();
         options.forEach((opt) => {
             const optObj = new radio_option_class_1.RadioOption({ parent: this });
-            optObj.input.ctrl.addAttrObj({
+            optObj.input.attr.addObj({
                 name: 'radio' + random,
                 label: opt.label,
                 value: opt.value,
@@ -40,14 +40,13 @@ class RadioGroup extends framework_1.TypeDiv {
         this.value = value;
         // console.error('value is ', value);
         this.childNodes.forEach((opt) => {
-            var _a;
-            if (String((_a = opt.input.props.attrObj) === null || _a === void 0 ? void 0 : _a.value) === String(value)) {
-                opt.input.ctrl.setAttrObj({
+            if (String(opt.input.attr.get('value')) === String(value)) {
+                opt.input.attr.setObj({
                     checked: true
                 });
             }
             else {
-                opt.input.ctrl.removeAttribute('checked');
+                opt.input.attr.remove('checked');
             }
         });
     }

package/src/components/form/radio-group/radio-option/radio-option.class.d.ts

@@ -10,5 +10,4 @@ export declare class RadioOption extends TypeSpan implements IRadioOption {
     textNode: TextNode;
     constructor(params?: IRadioOptionConfig);
     setup(config?: IRadioOptionConfig): void;
-    initEvents(): void;
 }

package/src/components/form/radio-group/radio-option/radio-option.class.js

@@ -1,17 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioOption = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 class RadioOption extends framework_1.TypeSpan {
     constructor(params = {}) {
         super();
         this.className = 'RadioOption';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             padding: '0 5px'
         });
         this.input = new framework_1.Input({ parent: this });
-        this.input.ctrl.addAttrObj({
+        this.input.attr.addObj({
             type: 'radio'
             // name: optionSetting.name,
             // label: opt.label,
@@ -20,26 +19,26 @@ class RadioOption extends framework_1.TypeSpan {
         });
         this.textNode = new framework_1.TextNode('');
         this.childNodes = [this.input, this.textNode];
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
     setup(config) {
         if (config === null || config === void 0 ? void 0 : config.name) {
-            this.input.ctrl.addAttrName(config.name);
+            this.input.attr.addName(config.name);
         }
         if (config === null || config === void 0 ? void 0 : config.value) {
-            this.input.ctrl.addAttrObj({ value: config.value });
+            this.input.attr.addObj({ value: config.value });
         }
         if (config === null || config === void 0 ? void 0 : config.checked) {
-            this.input.ctrl.addAttrObj({ checked: config.checked || false });
+            this.input.attr.addObj({ checked: config.checked || false });
         }
-    }
-    initEvents() {
-        this.subscriptions.push((0, rxjs_1.fromEvent)(this.input.dom, 'click').subscribe(() => {
-            console.log('this.input.dom click . ');
-            console.log('this.input.dom.value is ', this.input.dom.value);
-            if (this.parent)
-                this.parent.value = this.input.dom.value;
-        }));
+        this.input.addEvents({
+            click: () => {
+                console.log('this.input.dom click . ');
+                console.log('this.input.dom.value is ', this.input.dom.value);
+                if (this.parent)
+                    this.parent.value = this.input.dom.value;
+            }
+        });
     }
 }
 exports.RadioOption = RadioOption;

package/src/components/form/select/select.class.d.ts

@@ -6,7 +6,7 @@ export declare class Select extends TypeSelect implements ISelect {
     value: string | number | boolean;
     constructor();
     setOptionSetting(optionSetting: IOptionSetting): void;
-    initEvents(): void;
+    setup(): void;
     jsSelectIsExitItem(objSelect: HTMLSelectElement, objItemValue: string): boolean;
     jsAddItemToSelect(objSelect: HTMLSelectElement, objItemText: string | undefined, objItemValue: string): void;
     jsRemoveItemFromSelect(objSelect: HTMLSelectElement, objItemValue: string): void;

package/src/components/form/select/select.class.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 class Select extends framework_1.TypeSelect {
     constructor() {
@@ -14,7 +13,7 @@ class Select extends framework_1.TypeSelect {
         this.clearChildren();
         optionSetting.options.forEach((opt) => {
             const optionObj = new framework_1.Option({ parent: this });
-            optionObj.ctrl.setAttrObj({
+            optionObj.attr.setObj({
                 // label: opt.label,
                 value: opt.value,
                 selected: opt.selected || false
@@ -27,22 +26,24 @@ class Select extends framework_1.TypeSelect {
             this.addChild(optionObj);
         });
     }
-    initEvents() {
-        this.subscriptions.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe(() => {
-            console.log('this.dom click . ');
-            console.log('this.dom.value is ', this.dom.value);
-            this.value = this.dom.value; // 对应的opt.label.
-            this.childNodes.forEach((opt) => {
-                if (opt.dom.value === this.dom.value) {
-                    opt.ctrl.setAttrObj({
-                        selected: true
-                    });
-                }
-                else {
-                    opt.ctrl.removeAttribute('selected');
-                }
-            });
-        }));
+    setup() {
+        this.addEvents({
+            click: () => {
+                console.log('this.dom click . ');
+                console.log('this.dom.value is ', this.dom.value);
+                this.value = this.dom.value; // 对应的opt.label.
+                this.childNodes.forEach((opt) => {
+                    if (opt.dom.value === this.dom.value) {
+                        opt.attr.setObj({
+                            selected: true
+                        });
+                    }
+                    else {
+                        opt.attr.remove('selected');
+                    }
+                });
+            }
+        });
     }
     // 1.判断select选项中 是否存在Value="paraValue"的Item
     jsSelectIsExitItem(objSelect, objItemValue) {

package/src/components/form/td-checkbox/td-checkbox.class.js

@@ -11,10 +11,10 @@ class TdCheckbox extends ui_abstract_1.UI {
         const tag = !hasOwnLabel ? 'span' : 'label';
         super(params, tag); // label | span
         this.className = 'TdCheckbox';
-        this.ctrl.addAttrObj({
+        this.attr.addObj({
             name: 'td-checkbox'
         });
-        this.ctrl.addStyleObj(td_checkbox_style_1.$checkboxStyle);
+        this.style.addObj(td_checkbox_style_1.$checkboxStyle);
         const inputSpan = new framework_1.Span({
             attrObj: {
                 name: 'td-checkbox-input-span'
@@ -71,7 +71,7 @@ class TdCheckbox extends ui_abstract_1.UI {
             }
             this.addChild(labelSpan);
         }
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
     handleChange(ev) {
         if (this.isLimitExceeded)

package/src/components/form/td-checkbox-button/td-checkbox-button.class.js

@@ -10,10 +10,10 @@ class TdCheckboxButton extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'label'); // label | span
         this.className = 'TdCheckboxButton';
-        this.ctrl.addAttrObj({
+        this.attr.addObj({
             name: 'td-checkbox-button'
         });
-        this.ctrl.addStyleObj(td_checkbox_button_style_1.$checkboxButtonStyle);
+        this.style.addObj(td_checkbox_button_style_1.$checkboxButtonStyle);
         const { hasOwnLabel } = (0, use_checkbox_1.useCheckbox)(params);
         const original = new framework_1.Input({
             name: 'original',
@@ -53,7 +53,7 @@ class TdCheckboxButton extends ui_abstract_1.UI {
             }
             this.addChild(labelSpan);
         }
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
     handleChange(ev) {
         if (this.isLimitExceeded)

package/src/components/form/td-checkbox-group/td-checkbox-group.class.js

@@ -7,14 +7,14 @@ class TdCheckboxGroup extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdCheckboxGroup';
-        this.ctrl.addAttrObj({
+        this.attr.addObj({
             role: 'group',
             // ariaLabel: !config.isLabeledByFormItem ? config?.ariaLabel || 'checkbox-group' : undefined,
             // aria-labelledby="isLabeledByFormItem ? formItem?.labelId : undefined"
         });
-        this.ctrl.addStyleObj(td_checkbox_style_1.$checkboxGroupStyle);
+        this.style.addObj(td_checkbox_style_1.$checkboxGroupStyle);
         this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdCheckboxGroup = TdCheckboxGroup;

package/src/components/form/td-form/td-form.class.js

@@ -16,13 +16,15 @@ class TdForm extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'form');
         this.className = 'TdForm';
-        this.ctrl.addAttrName('td-form');
+        this.attr.addName('td-form');
         this.provide(td_form_const_1.formContextKey, params); // 要在form-item 中 inject
-        this.addChild(this.getSlotNode());
+        if (params.slot) {
+            this.slotChild(params.slot);
+        }
         if (params === null || params === void 0 ? void 0 : params.model) {
             this.model = params.model;
         }
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdForm = TdForm;

package/src/components/form/td-form-item/td-form-item.class.js

@@ -13,8 +13,8 @@ class TdFormItem extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdFormItem';
-        this.ctrl.addAttrName('td-form-item');
-        this.ctrl.addStyleObj({
+        this.attr.addName('td-form-item');
+        this.style.addObj({
             display: 'flex',
             // --font-size: 14px,
             fontSize: var_1.$fontSizes[(params === null || params === void 0 ? void 0 : params.size) || 'base'],
@@ -64,7 +64,7 @@ class TdFormItem extends ui_abstract_1.UI {
         // this.content.addChild(this.error);
         this.addChild(this.content);
         this.content.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
     created() {
         // inject 要在 created 之中，否则无法确定 parent .
@@ -75,7 +75,7 @@ class TdFormItem extends ui_abstract_1.UI {
         // 下面的方法要调用到 this.parent 才能获取到。需要 form的setConfig 方法调用后
     }
     setup() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const props = this.props;
         if (props === null || props === void 0 ? void 0 : props.label) {
             this.label = new framework_1.Label({
@@ -102,7 +102,7 @@ class TdFormItem extends ui_abstract_1.UI {
             else {
                 const labelWidth = (0, utils_1.addUnit)(props.labelWidth || ((_b = this.parent) === null || _b === void 0 ? void 0 : _b.props.labelWidth) || '120px');
                 if (labelWidth) {
-                    this.label.ctrl.addStyleObj({
+                    this.label.style.addObj({
                         width: labelWidth,
                     });
                 }
@@ -117,17 +117,17 @@ class TdFormItem extends ui_abstract_1.UI {
                 }));
             }
             (_d = this.labelWrap) === null || _d === void 0 ? void 0 : _d.addChild(this.label);
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 display: ((_e = this.parent) === null || _e === void 0 ? void 0 : _e.props.inline) ? 'inline-flex' : 'flex',
                 verticalAlign: 'middle',
                 marginRight: ((_f = this.parent) === null || _f === void 0 ? void 0 : _f.props.inline)
                     ? '32px'
-                    : (_g = this.props.styleObj) === null || _g === void 0 ? void 0 : _g.marginRight,
+                    : this.style.get('marginRight'),
                 // justifyContent: justifyContent,
             });
-            this.setLabelPosition((_h = this.parent) === null || _h === void 0 ? void 0 : _h.props.labelPosition);
-            this.setSize((_j = this.parent) === null || _j === void 0 ? void 0 : _j.props.size);
-            this.setLabelWidth((_k = this.parent) === null || _k === void 0 ? void 0 : _k.props.labelWidth);
+            this.setLabelPosition((_g = this.parent) === null || _g === void 0 ? void 0 : _g.props.labelPosition);
+            this.setSize((_h = this.parent) === null || _h === void 0 ? void 0 : _h.props.size);
+            this.setLabelWidth((_j = this.parent) === null || _j === void 0 ? void 0 : _j.props.labelWidth);
         }
     }
     // 待实现：设置子元素的labelWidth
@@ -136,31 +136,31 @@ class TdFormItem extends ui_abstract_1.UI {
         if (width === undefined) {
             return;
         }
-        (_a = this.label) === null || _a === void 0 ? void 0 : _a.ctrl.addStyleObj({
+        (_a = this.label) === null || _a === void 0 ? void 0 : _a.style.addObj({
             width: (0, utils_1.addUnit)(width),
         });
     }
     setLabelPosition(position) {
         var _a;
         // todo top 怎么处理 ？
-        (_a = this.label) === null || _a === void 0 ? void 0 : _a.ctrl.addStyleObj({
+        (_a = this.label) === null || _a === void 0 ? void 0 : _a.style.addObj({
             justifyContent: position === 'left' ? 'flex-start' : 'flex-end',
         });
     }
     setSize(size = 'default') {
         var _a, _b;
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             fontSize: var_1.$fontSizes[size],
             marginBottom: td_form_item_style_1.$formItemMarginBottom[size],
         });
-        (_a = this.label) === null || _a === void 0 ? void 0 : _a.ctrl.addStyleObj({
+        (_a = this.label) === null || _a === void 0 ? void 0 : _a.style.addObj({
             height: td_form_item_style_1.$formItemLineHeight[size],
             lineHeight: td_form_item_style_1.$formItemLineHeight[size],
         });
-        this.content.ctrl.addStyleObj({
+        this.content.style.addObj({
             lineHeight: td_form_item_style_1.$formItemLineHeight[size],
         });
-        (_b = this.error) === null || _b === void 0 ? void 0 : _b.ctrl.addStyleObj({
+        (_b = this.error) === null || _b === void 0 ? void 0 : _b.style.addObj({
             paddingTop: td_form_item_style_1.$formItemErrorPaddingTop[size],
         });
     }

package/src/components/form/td-input/td-input-field.class.js

@@ -8,27 +8,27 @@ class TdInputField extends field_input_abstract_1.FieldInput {
         super(params.labelTitle, params.placeholder);
         console.log('InputItem constructor . ');
         this.className = 'TdInputField';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             padding: '2px 10px 2px 0'
         });
-        this.ctrl.addAttrName('input-item');
-        this.label.ctrl.addStyleObj({
+        this.attr.addName('input-item');
+        this.label.style.addObj({
             fontSize: '16px',
             width: params.labelWidth || '150px'
         });
-        this.content.ctrl.addAttrObj({
+        this.content.attr.addObj({
             type: (params === null || params === void 0 ? void 0 : params.type) || 'text'
         });
         // todo 有后缀时才需要这样
-        // this.content.ctrl.addStyleObj({
+        // this.content.style.addObj({
         //   borderRadius: '4px 0 0 4px',
         // });
         if (params.readonly) {
-            this.content.ctrl.addAttrObj({
+            this.content.attr.addObj({
                 disabled: true
             });
         }
-        // this.button.ctrl.setStyleObj({
+        // this.button.style.setObj({
         //   display: 'inline-block',
         //   padding: '4px 3px',
         //   fontSize: '14px',
@@ -44,7 +44,7 @@ class TdInputField extends field_input_abstract_1.FieldInput {
         //   OfdEditor.selectedControl?.resetLabelText(this.content.dom.value);
         //   return;
         // }
-        // if (this.props.styleObj.display === 'none') this.setStyle('display', 'block');
+        // if (this.style.get('display') === 'none') this.setStyle('display', 'block');
         // if (OfdEditor.selectedControl?.formItem.labelText?.text) {
         //   this.resetInputValue(OfdEditor.selectedControl.formItem.labelText.text);
         // } else {

package/src/components/form/td-input/td-input.class.d.ts

@@ -14,7 +14,6 @@ export declare class TdInput extends UI implements ITdInput {
     constructor(params?: ITdInputConfig);
     get value(): string;
     setup(): void;
-    initEvents(): void;
     setModelValue(value: IJsonDataProp): void;
     setHovering(hovering: boolean): void;
     setFocus(isFocused: boolean): void;

package/src/components/form/td-input/td-input.class.js

@@ -13,11 +13,11 @@ class TdInput extends ui_abstract_1.UI {
         super(params);
         console.log('TdInput constructor . ');
         this.className = 'TdInput';
-        this.ctrl.addAttrName('td-input');
-        this.ctrl.addAttrObj({
+        this.attr.addName('td-input');
+        this.attr.addObj({
             tabIndex: 0
         });
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             position: 'relative',
             display: 'inline-flex',
             width: '100%',
@@ -33,7 +33,7 @@ class TdInput extends ui_abstract_1.UI {
         if (params === null || params === void 0 ? void 0 : params.modelValue) {
             this.modelValue = params.modelValue;
         }
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
     get value() {
         return this.panel.inner.value;
@@ -41,7 +41,7 @@ class TdInput extends ui_abstract_1.UI {
     setup() {
         const props = this.props;
         if (props === null || props === void 0 ? void 0 : props.width) {
-            this.ctrl.addWidth(props.width);
+            this.style.addWidth(props.width);
         }
         //   todo
         if ((props === null || props === void 0 ? void 0 : props.type) === 'textarea') {
@@ -60,8 +60,6 @@ class TdInput extends ui_abstract_1.UI {
         if (!(props === null || props === void 0 ? void 0 : props.formatter) && (props === null || props === void 0 ? void 0 : props.parser)) {
             throw new Error('If you set the parser, you also need to set the formatter');
         }
-    }
-    initEvents() {
         if (this.props.disabled) {
             return;
         }
@@ -172,14 +170,14 @@ class TdInput extends ui_abstract_1.UI {
         this.hovering = hovering;
         if (hovering) {
             if (!this.isFocused) {
-                (_a = this.panel) === null || _a === void 0 ? void 0 : _a.ctrl.setStyleObj({
+                (_a = this.panel) === null || _a === void 0 ? void 0 : _a.style.setObj({
                     boxShadow: '0 0 0 1px ' + td_input_style_1.$input.hoverBorderColor + ' inset'
                 });
             }
         }
         else {
             if (!this.isFocused) {
-                (_b = this.panel) === null || _b === void 0 ? void 0 : _b.ctrl.setStyleObj({
+                (_b = this.panel) === null || _b === void 0 ? void 0 : _b.style.setObj({
                     boxShadow: '0 0 0 1px ' + td_input_style_1.$input.borderColor + ' inset'
                 });
             }
@@ -189,12 +187,12 @@ class TdInput extends ui_abstract_1.UI {
         var _a, _b;
         this.isFocused = isFocused;
         if (isFocused) {
-            (_a = this.panel) === null || _a === void 0 ? void 0 : _a.ctrl.setStyleObj({
+            (_a = this.panel) === null || _a === void 0 ? void 0 : _a.style.setObj({
                 boxShadow: '0 0 0 1px ' + td_input_style_1.$input.focusBorderColor + ' inset'
             });
         }
         else {
-            (_b = this.panel) === null || _b === void 0 ? void 0 : _b.ctrl.setStyleObj({
+            (_b = this.panel) === null || _b === void 0 ? void 0 : _b.style.setObj({
                 boxShadow: '0 0 0 1px ' + td_input_style_1.$input.borderColor + ' inset'
             });
         }

package/src/components/form/td-input/widget/prefix.js

@@ -9,7 +9,7 @@ class TdInputPrefix extends framework_1.TypeSpan {
         super();
         this.parent = parent;
         this.className = 'TdInputPrefix';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             display: (config === null || config === void 0 ? void 0 : config.prefixIcon) ? 'inline-flex' : 'none',
             whiteSpace: 'nowrap',
             flexShrink: 0,

package/src/components/form/td-input/widget/suffix.js

@@ -10,7 +10,7 @@ class TdInputSuffix extends framework_1.TypeSpan {
         super();
         this.parent = parent;
         this.className = 'TdInputSuffix';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             display: this.parent.suffixVisible ? 'inline-flex' : 'none',
             whiteSpace: 'nowrap',
             flexShrink: 0,
@@ -80,12 +80,12 @@ class TdInputSuffix extends framework_1.TypeSpan {
                         this.parent.passwordVisible = !this.parent.passwordVisible;
                         (_a = this.passwordIcon) === null || _a === void 0 ? void 0 : _a.replaceSvg(this.parent.passwordVisible ? new svgs_1.ElViewSvg() : new svgs_1.ElHideSvg());
                         if (this.parent.passwordVisible) {
-                            this.parent.inner.ctrl.setAttrObj({
+                            this.parent.inner.attr.setObj({
                                 type: 'text'
                             });
                         }
                         else {
-                            this.parent.inner.ctrl.setAttrObj({
+                            this.parent.inner.attr.setObj({
                                 type: 'password'
                             });
                         }