@type-dom/ui 0.0.8 → 0.0.10

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

@@ -9,7 +9,7 @@ class TdRadio extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'label');
         this.className = 'TdRadio';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             color: var_1.$textColor.regular,
             fontWeight: var_1.$fontWeightPrimary,
             position: 'relative',
@@ -87,36 +87,61 @@ class TdRadio extends ui_abstract_1.UI {
             }
         });
         this.addChildren(this.radioInput, this.radioLabel);
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
+        // 点击事件 todo 会触发两次，先不管。
+        this.addEvents({
+            click: (evt) => {
+                var _a;
+                console.log('this.inputOriginal.dom click . ');
+                console.log('this.inputOriginal.dom.value is ', this.inputOriginal.dom.value);
+                if (this.disabled) {
+                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                    return;
+                }
+                // this.inputOriginal.dom.click();
+                if (this.parent instanceof td_radio_group_class_1.TdRadioGroup) {
+                    this.parent.setModelValue(this.inputOriginal.value); // 触发父级的事件，重置整个组。
+                }
+                this.setChecked(true);
+                (_a = this.parent) === null || _a === void 0 ? void 0 : _a.childNodes.forEach((node) => {
+                    if (node instanceof TdRadio &&
+                        node.inputOriginal.attr.get('name') ===
+                            this.inputOriginal.attr.get('name') &&
+                        node !== this) {
+                        node.setChecked(false);
+                    }
+                });
+            }
+        });
     }
     setup() {
         var _a;
         const props = this.props;
         if (props === null || props === void 0 ? void 0 : props.name) {
             console.log('setConfig props?.name', props === null || props === void 0 ? void 0 : props.name);
-            this.inputOriginal.ctrl.addAttrName(props.name);
+            this.inputOriginal.attr.addName(props.name);
         }
         if (props === null || props === void 0 ? void 0 : props.value) {
-            this.inputOriginal.ctrl.addAttrObj({ value: props.value });
+            this.inputOriginal.attr.addObj({ value: props.value });
         }
         if (props === null || props === void 0 ? void 0 : props.checked) {
-            this.inputOriginal.ctrl.addAttrObj({ checked: props.checked || false });
+            this.inputOriginal.attr.addObj({ checked: props.checked || false });
         }
         if (props === null || props === void 0 ? void 0 : props.label) {
             (_a = this.radioLabel.textNode) === null || _a === void 0 ? void 0 : _a.setText(props.label);
         }
         if (props === null || props === void 0 ? void 0 : props.disabled) {
-            this.inputOriginal.ctrl.addAttrObj({ disabled: props.disabled });
+            this.inputOriginal.attr.addObj({ disabled: props.disabled });
             //   todo 样式
         }
         if (props === null || props === void 0 ? void 0 : props.size) {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 height: var_1.$commonComponentSize[props.size],
                 fontSize: var_1.$fontSizes[props.size]
             });
         }
         if (props === null || props === void 0 ? void 0 : props.border) {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 borderWidth: var_1.$borderWidth,
                 borderStyle: var_1.$borderStyle,
                 borderColor: var_1.$borderColor.base,
@@ -125,26 +150,26 @@ class TdRadio extends ui_abstract_1.UI {
             });
         }
         if (props === null || props === void 0 ? void 0 : props.checked) {
-            this.setChecked(props === null || props === void 0 ? void 0 : props.checked);
+            this.setChecked(props.checked);
         }
         if (props === null || props === void 0 ? void 0 : props.disabled) {
-            this.setDisabled(props === null || props === void 0 ? void 0 : props.disabled);
+            this.setDisabled(props.disabled);
         }
     }
     setDisabled(disabled) {
         this.disabled = disabled;
         if (disabled) {
-            this.ctrl.setStyleObj({
+            this.style.setObj({
                 cursor: 'notAllowed',
                 opacity: 0.5
                 //   禁用事件
                 //   pointerEvents: 'none',
             });
-            this.radioLabel.ctrl.setStyleObj({
+            this.radioLabel.style.setObj({
                 color: var_1.$colors.default.base
             });
-            this.inputOriginal.ctrl.setAttrObj({ disabled: true });
-            this.inputInner.ctrl.setStyleObj({
+            this.inputOriginal.attr.setObj({ disabled: true });
+            this.inputInner.style.setObj({
                 cursor: 'notAllowed',
                 // color: $colors.default.base,
                 // borderWidth: '1px',
@@ -155,30 +180,30 @@ class TdRadio extends ui_abstract_1.UI {
             });
         }
         else {
-            this.ctrl.setStyleObj({
+            this.style.setObj({
                 cursor: 'pointer',
                 opacity: 1,
                 pointerEvents: 'auto'
             });
-            this.inputOriginal.ctrl.removeAttribute('disabled');
-            this.inputInner.ctrl.setStyleObj({
+            this.inputOriginal.attr.remove('disabled');
+            this.inputInner.style.setObj({
                 cursor: 'auto'
             });
         }
     }
     setChecked(checked) {
         if (checked) {
-            this.ctrl.setStyleObj({
+            this.style.setObj({
                 borderColor: var_1.$colors.primary.base
             });
-            this.inputOriginal.ctrl.setAttrObj({
+            this.inputOriginal.attr.setObj({
                 checked: true
             });
             //  设置选中样式
-            this.radioLabel.ctrl.setStyleObj({
+            this.radioLabel.style.setObj({
                 color: var_1.$colors.primary.base
             });
-            this.inputInner.ctrl.setStyleObj({
+            this.inputInner.style.setObj({
                 color: var_1.$colors.primary.base,
                 borderWidth: '5px',
                 borderStyle: 'solid',
@@ -187,14 +212,14 @@ class TdRadio extends ui_abstract_1.UI {
         }
         else {
             // 设置非选中样式
-            this.ctrl.setStyleObj({
+            this.style.setObj({
                 borderColor: var_1.$borderColor.base
             });
-            this.inputOriginal.ctrl.removeAttribute('checked');
-            this.radioLabel.ctrl.setStyleObj({
+            this.inputOriginal.attr.remove('checked');
+            this.radioLabel.style.setObj({
                 color: var_1.$colors.default.base
             });
-            this.inputInner.ctrl.setStyleObj({
+            this.inputInner.style.setObj({
                 borderWidth: '1px',
                 borderStyle: 'solid',
                 borderColor: var_1.$borderColor.base,
@@ -202,33 +227,5 @@ class TdRadio extends ui_abstract_1.UI {
             });
         }
     }
-    initEvents() {
-        // 点击事件 todo 会触发两次，先不管。
-        this.addEvents({
-            click: (evt) => {
-                var _a;
-                console.log('this.inputOriginal.dom click . ');
-                console.log('this.inputOriginal.dom.value is ', this.inputOriginal.dom.value);
-                if (this.disabled) {
-                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                    return;
-                }
-                // this.inputOriginal.dom.click();
-                if (this.parent instanceof td_radio_group_class_1.TdRadioGroup) {
-                    this.parent.setModelValue(this.inputOriginal.value); // 触发父级的事件，重置整个组。
-                }
-                this.setChecked(true);
-                (_a = this.parent) === null || _a === void 0 ? void 0 : _a.childNodes.forEach((node) => {
-                    var _a, _b;
-                    if (node instanceof TdRadio &&
-                        ((_a = node.inputOriginal.props.attrObj) === null || _a === void 0 ? void 0 : _a.name) ===
-                            ((_b = this.inputOriginal.props.attrObj) === null || _b === void 0 ? void 0 : _b.name) &&
-                        node !== this) {
-                        node.setChecked(false);
-                    }
-                });
-            }
-        });
-    }
 }
 exports.TdRadio = TdRadio;

package/src/components/form/td-radio-button/td-radio-button.class.d.ts

@@ -11,5 +11,4 @@ export declare class TdRadioButton extends UI implements ITdRadioButton {
     setup(): void;
     setDisabled(disabled?: boolean): void;
     setChecked(checked: boolean): void;
-    initEvents(): void;
 }

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

@@ -9,8 +9,8 @@ class TdRadioButton extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'label');
         this.className = 'TdRadioButton';
-        this.ctrl.addAttrName('radio-button');
-        this.ctrl.addStyleObj({
+        this.attr.addName('radio-button');
+        this.style.addObj({
             position: 'relative',
             display: 'inline-block',
             outline: 'none'
@@ -65,51 +65,51 @@ class TdRadioButton extends ui_abstract_1.UI {
             }
         });
         this.addChildren(this.inputOriginal, this.radioLabel);
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     setup() {
         var _a;
         const props = this.props;
         if (props.name) {
             console.log('setConfig props.name', props.name);
-            this.inputOriginal.ctrl.addAttrName(props.name);
+            this.inputOriginal.attr.addName(props.name);
         }
         if (props.value) {
-            this.inputOriginal.ctrl.addAttrObj({ value: props.value });
+            this.inputOriginal.attr.addObj({ value: props.value });
         }
         if (props.checked) {
-            this.inputOriginal.ctrl.addAttrObj({ checked: props.checked || false });
+            this.inputOriginal.attr.addObj({ checked: props.checked || false });
         }
         if (props === null || props === void 0 ? void 0 : props.label) {
             (_a = this.radioLabel.textNode) === null || _a === void 0 ? void 0 : _a.setText(props.label);
         }
         if (props === null || props === void 0 ? void 0 : props.disabled) {
-            this.inputOriginal.ctrl.addAttrObj({ disabled: props.disabled });
+            this.inputOriginal.attr.addObj({ disabled: props.disabled });
             //   todo 样式
         }
         // size 默认值是 default
         const size = (props === null || props === void 0 ? void 0 : props.size) || 'default';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             height: var_1.$commonComponentSize[size]
         });
-        this.radioLabel.ctrl.addStyleObj({
+        this.radioLabel.style.addObj({
             padding: var_1.$paddingVerticalMap[size] + ' ' + var_1.$paddingHorizontalMap[size],
             fontSize: var_1.$fontSizes[size]
         });
         if (props === null || props === void 0 ? void 0 : props.isFirst) {
             const radius = var_1.$borderRadiusMap[size];
-            this.radioLabel.ctrl.addStyleObj({
+            this.radioLabel.style.addObj({
                 borderRadius: radius + ' 0 0 ' + radius
             });
         }
         else {
-            this.radioLabel.ctrl.addStyleObj({
+            this.radioLabel.style.addObj({
                 borderLeft: '0'
             });
         }
         if (props === null || props === void 0 ? void 0 : props.isLast) {
             const radius = var_1.$borderRadiusMap[size];
-            this.radioLabel.ctrl.addStyleObj({
+            this.radioLabel.style.addObj({
                 borderRadius: '0 ' + radius + ' ' + radius + ' 0'
             });
         }
@@ -119,78 +119,75 @@ class TdRadioButton extends ui_abstract_1.UI {
         if (props === null || props === void 0 ? void 0 : props.disabled) {
             this.setDisabled(props === null || props === void 0 ? void 0 : props.disabled);
         }
+        this.addEvents({
+            // 点击事件 todo 会触发两次，先不管。
+            click: (evt) => {
+                var _a;
+                console.log('radio-button this.inputOriginal.dom click . ');
+                console.log('radio-button this.inputOriginal.dom.value is ', this.inputOriginal.dom.value);
+                if (this.disabled) {
+                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                    return;
+                }
+                // this.inputOriginal.dom.click();
+                if (this.parent instanceof td_radio_group_class_1.TdRadioGroup) {
+                    this.parent.setModelValue(this.inputOriginal.value); // 触发父级的事件，重置整个组。
+                }
+                this.setChecked(true);
+                (_a = this.parent) === null || _a === void 0 ? void 0 : _a.childNodes.forEach((node) => {
+                    if (node instanceof TdRadioButton &&
+                        node.inputOriginal.attr.get('name') ===
+                            this.inputOriginal.attr.get('name') &&
+                        node !== this) {
+                        node.setChecked(false);
+                    }
+                });
+            }
+        });
     }
     setDisabled(disabled) {
         this.disabled = disabled;
         if (disabled) {
-            this.ctrl.setStyleObj({
+            this.style.setObj({
                 cursor: 'notAllowed',
                 opacity: 0.5
                 //   禁用事件
                 //   pointerEvents: 'none',
             });
-            this.radioLabel.ctrl.setStyleObj({
+            this.radioLabel.style.setObj({
                 color: var_1.$colors.default.base
             });
-            this.inputOriginal.ctrl.setAttrObj({ disabled: true });
+            this.inputOriginal.attr.setObj({ disabled: true });
         }
         else {
-            this.ctrl.setStyleObj({
+            this.style.setObj({
                 cursor: 'pointer',
                 opacity: 1,
                 pointerEvents: 'auto'
             });
-            this.inputOriginal.ctrl.removeAttribute('disabled');
+            this.inputOriginal.attr.remove('disabled');
         }
     }
     setChecked(checked) {
         if (checked) {
-            this.inputOriginal.ctrl.setAttrObj({
+            this.inputOriginal.attr.setObj({
                 checked: true
             });
             //  设置选中样式
-            this.radioLabel.ctrl.setStyleObj({
+            this.radioLabel.style.setObj({
                 color: var_1.$colorWhite,
                 backgroundColor: var_1.$colors.primary.base
             });
         }
         else {
-            this.inputOriginal.ctrl.removeAttribute('checked');
+            this.inputOriginal.attr.remove('checked');
             // 设置非选中样式
-            this.radioLabel.ctrl.setStyleObj({
+            this.radioLabel.style.setObj({
                 borderColor: var_1.$borderColor.base,
                 background: var_1.$fillColor.blank,
                 color: var_1.$colors.default.base
             });
         }
     }
-    initEvents() {
-        this.addEvents({
-            // 点击事件 todo 会触发两次，先不管。
-            click: (evt) => {
-                var _a;
-                console.log('radio-button this.inputOriginal.dom click . ');
-                console.log('radio-button this.inputOriginal.dom.value is ', this.inputOriginal.dom.value);
-                if (this.disabled) {
-                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                    return;
-                }
-                // this.inputOriginal.dom.click();
-                if (this.parent instanceof td_radio_group_class_1.TdRadioGroup) {
-                    this.parent.setModelValue(this.inputOriginal.value); // 触发父级的事件，重置整个组。
-                }
-                this.setChecked(true);
-                (_a = this.parent) === null || _a === void 0 ? void 0 : _a.childNodes.forEach((node) => {
-                    var _a, _b;
-                    if (node instanceof TdRadioButton &&
-                        ((_a = node.inputOriginal.props.attrObj) === null || _a === void 0 ? void 0 : _a.name) ===
-                            ((_b = this.inputOriginal.props.attrObj) === null || _b === void 0 ? void 0 : _b.name) &&
-                        node !== this) {
-                        node.setChecked(false);
-                    }
-                });
-            }
-        });
-    }
 }
 exports.TdRadioButton = TdRadioButton;

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

@@ -9,7 +9,7 @@ class TdRadioGroup extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdRadioGroup';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             display: 'inline-flex',
             alignItems: 'center',
             flexWrap: 'wrap',
@@ -17,7 +17,7 @@ class TdRadioGroup extends ui_abstract_1.UI {
             marginRight: '12px',
         });
         this.childNodes = [];
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     get resultValue() {
         if (this.modelValue instanceof framework_1.XProxy) {
@@ -92,8 +92,7 @@ class TdRadioGroup extends ui_abstract_1.UI {
         }
         // console.error('value is ', value);
         this.childNodes.forEach((opt) => {
-            var _a;
-            if (String((_a = opt.inputOriginal.props.attrObj) === null || _a === void 0 ? void 0 : _a.value) === String(value)) {
+            if (String(opt.inputOriginal.attr.get('value')) === String(value)) {
                 // 设置选中样式
                 opt.setChecked(true);
             }

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

@@ -9,13 +9,13 @@ class TdSelectDropDown extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdSelectDropdown';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             // z-index: calc(#{getCssVar('index-top')} + 1);
             // border-radius: getCssVar('border-radius-base');
             borderRadius: var_1.$borderRadius.base,
             boxSizing: 'border-box'
         });
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     setup() {
         const props = this.props;

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

@@ -10,7 +10,7 @@ class TdSelect extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdSelect';
-        this.ctrl.addStyleObj(td_select_style_1.$select);
+        this.style.addObj(td_select_style_1.$select);
         this.addChild(new td_tooltip_class_1.TdTooltip({
             slot: [
                 new framework_1.Div({
@@ -26,7 +26,7 @@ class TdSelect extends ui_abstract_1.UI {
                 })
             ]
         }));
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdSelect = TdSelect;

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

@@ -15,7 +15,7 @@ export declare class TdSwitch extends UI implements ITdSwitch {
     get actualValue(): string | number | boolean | undefined;
     get checked(): boolean;
     mounted(): void;
-    initEvents(): void;
+    setup(): void;
     handleChange(): void;
     setDisabled(disabled: boolean): void;
     setChecked(checked: boolean): void;

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

@@ -15,7 +15,7 @@ class TdSwitch extends ui_abstract_1.UI {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         super(params);
         this.className = 'TdSwitch';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             display: 'inline-flex',
             alignItems: 'center',
             position: 'relative',
@@ -62,7 +62,7 @@ class TdSwitch extends ui_abstract_1.UI {
             this.right = new td_switch_right_1.TdSwitchRight(params);
             this.addChild(this.right);
         }
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     get actualValue() {
         return this.isControlled ? this.props.modelValue : false;
@@ -74,13 +74,13 @@ class TdSwitch extends ui_abstract_1.UI {
         const props = this.props;
         this.setChecked(this.modelValue === this.activeValue);
         if (props === null || props === void 0 ? void 0 : props.disabled) {
-            this.setDisabled(props === null || props === void 0 ? void 0 : props.disabled);
+            this.setDisabled(props.disabled);
         }
         if (props.loading) {
-            this.setLoading(props === null || props === void 0 ? void 0 : props.loading);
+            this.setLoading(props.loading);
         }
     }
-    initEvents() {
+    setup() {
         this.addEvents({
             click: (evt) => {
                 // changeValue
@@ -112,32 +112,32 @@ class TdSwitch extends ui_abstract_1.UI {
     setDisabled(disabled) {
         var _a, _b;
         if (disabled) {
-            this.ctrl.setStyleObj({
+            this.style.setObj({
                 opacity: 0.6
             });
-            this.input.ctrl.setAttrObj({
+            this.input.attr.setObj({
                 disabled: true,
                 ariaDisabled: true
             });
-            (_a = this.left) === null || _a === void 0 ? void 0 : _a.ctrl.setStyleObj({
+            (_a = this.left) === null || _a === void 0 ? void 0 : _a.style.setObj({
                 cursor: 'not-allowed'
             });
-            this.core.ctrl.setStyleObj({
+            this.core.style.setObj({
                 cursor: 'not-allowed'
             });
         }
         else {
-            this.ctrl.setStyleObj({
+            this.style.setObj({
                 opacity: 1
             });
-            this.input.ctrl.setAttrObj({
+            this.input.attr.setObj({
                 disabled: false,
                 ariaDisabled: false
             });
-            (_b = this.left) === null || _b === void 0 ? void 0 : _b.ctrl.setStyleObj({
+            (_b = this.left) === null || _b === void 0 ? void 0 : _b.style.setObj({
                 cursor: 'auto'
             });
-            this.core.ctrl.setStyleObj({
+            this.core.style.setObj({
                 cursor: 'auto'
             });
         }
@@ -146,10 +146,10 @@ class TdSwitch extends ui_abstract_1.UI {
     setChecked(checked) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         if (checked) {
-            this.core.ctrl.setStyleObj({
+            this.core.style.setObj({
                 backgroundColor: (_a = this.props.switchOnColor) !== null && _a !== void 0 ? _a : td_switch_style_1.$switchOnColor
             });
-            this.core.action.ctrl.setStyleObj({
+            this.core.action.style.setObj({
                 color: td_switch_style_1.$switchOnColor,
                 // left: calc(100% - #{map.get($switch-button-size, 'default') + 1px});
                 left: 'calc(100% - ' +
@@ -157,12 +157,12 @@ class TdSwitch extends ui_abstract_1.UI {
                     ' - 1px)'
             });
             if (this.right) {
-                this.right.ctrl.setStyleObj({
+                this.right.style.setObj({
                     color: var_1.$colors.primary.base
                 });
             }
             if (this.left) {
-                this.left.ctrl.setStyleObj({
+                this.left.style.setObj({
                     color: var_1.$colors.default.base
                 });
             }
@@ -177,20 +177,20 @@ class TdSwitch extends ui_abstract_1.UI {
             }
         }
         else {
-            this.core.ctrl.setStyleObj({
+            this.core.style.setObj({
                 backgroundColor: (_e = this.props.switchOffColor) !== null && _e !== void 0 ? _e : td_switch_style_1.$switchOffColor
             });
-            this.core.action.ctrl.setStyleObj({
+            this.core.action.style.setObj({
                 left: '1px',
                 color: td_switch_style_1.$switchOffColor
             });
             if (this.left) {
-                this.left.ctrl.setStyleObj({
+                this.left.style.setObj({
                     color: var_1.$colors.primary.base
                 });
             }
             if (this.right) {
-                this.right.ctrl.setStyleObj({
+                this.right.style.setObj({
                     color: var_1.$colors.default.base
                 });
             }