@type-dom/ui 0.0.4 → 0.0.5

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

@@ -6,11 +6,11 @@ const var_1 = require("../../../styles/var");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_radio_group_class_1 = require("../td-radio-group/td-radio-group.class");
 class TdRadioButton extends ui_abstract_1.UI {
-    constructor(config) {
-        super({ tag: 'label' });
+    constructor(params) {
+        super(params, 'label');
         this.className = 'TdRadioButton';
-        this.addAttrName('radio-button');
-        this.addStyleObj({
+        this.ctrl.addAttrName('radio-button');
+        this.ctrl.addStyleObj({
             position: 'relative',
             display: 'inline-block',
             outline: 'none'
@@ -36,20 +36,20 @@ class TdRadioButton extends ui_abstract_1.UI {
         });
         this.radioLabel = new framework_1.Span({
             name: 'radio-label',
-            text: (config === null || config === void 0 ? void 0 : config.label) || 'option',
+            text: (params === null || params === void 0 ? void 0 : params.label) || 'option',
             styleObj: {
                 display: 'inline-block',
                 lineHeight: '1',
                 whiteSpace: 'nowrap',
                 verticalAlign: 'middle',
                 // borderLeft: '0',
-                '-webkit-appearance': 'none',
+                WebkitAppearance: 'none',
                 textAlign: 'center',
                 boxSizing: 'border-box',
                 outline: 'none',
                 margin: '0',
                 position: 'relative',
-                cursor: framework_1.StyleCursor.pointer,
+                cursor: 'pointer',
                 userSelect: 'none',
                 // 下面是会变化的样式；
                 color: var_1.$textColor.regular,
@@ -65,99 +65,99 @@ class TdRadioButton extends ui_abstract_1.UI {
             }
         });
         this.addChildren(this.inputOriginal, this.radioLabel);
-        this.setConfig(config);
+        this.props = this.setParams(params);
     }
-    setConfig(config) {
+    setup() {
         var _a;
-        super.setConfig(config);
-        if (config === null || config === void 0 ? void 0 : config.name) {
-            console.log('setConfig config?.name', config === null || config === void 0 ? void 0 : config.name);
-            this.inputOriginal.addAttrName(config.name);
+        const props = this.props;
+        if (props.name) {
+            console.log('setConfig props.name', props.name);
+            this.inputOriginal.ctrl.addAttrName(props.name);
         }
-        if (config === null || config === void 0 ? void 0 : config.value) {
-            this.inputOriginal.addAttrObj({ value: config.value });
+        if (props.value) {
+            this.inputOriginal.ctrl.addAttrObj({ value: props.value });
         }
-        if (config === null || config === void 0 ? void 0 : config.checked) {
-            this.inputOriginal.addAttrObj({ checked: config.checked || false });
+        if (props.checked) {
+            this.inputOriginal.ctrl.addAttrObj({ checked: props.checked || false });
         }
-        if (config === null || config === void 0 ? void 0 : config.label) {
-            (_a = this.radioLabel.textNode) === null || _a === void 0 ? void 0 : _a.setText(config.label);
+        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 (config === null || config === void 0 ? void 0 : config.disabled) {
-            this.inputOriginal.addAttrObj({ disabled: config.disabled });
+        if (props === null || props === void 0 ? void 0 : props.disabled) {
+            this.inputOriginal.ctrl.addAttrObj({ disabled: props.disabled });
             //   todo 样式
         }
         // size 默认值是 default
-        const size = (config === null || config === void 0 ? void 0 : config.size) || 'default';
-        this.addStyleObj({
+        const size = (props === null || props === void 0 ? void 0 : props.size) || 'default';
+        this.ctrl.addStyleObj({
             height: var_1.$commonComponentSize[size]
         });
-        this.radioLabel.addStyleObj({
+        this.radioLabel.ctrl.addStyleObj({
             padding: var_1.$paddingVerticalMap[size] + ' ' + var_1.$paddingHorizontalMap[size],
             fontSize: var_1.$fontSizes[size]
         });
-        if (config === null || config === void 0 ? void 0 : config.isFirst) {
+        if (props === null || props === void 0 ? void 0 : props.isFirst) {
             const radius = var_1.$borderRadiusMap[size];
-            this.radioLabel.addStyleObj({
+            this.radioLabel.ctrl.addStyleObj({
                 borderRadius: radius + ' 0 0 ' + radius
             });
         }
         else {
-            this.radioLabel.addStyleObj({
+            this.radioLabel.ctrl.addStyleObj({
                 borderLeft: '0'
             });
         }
-        if (config === null || config === void 0 ? void 0 : config.isLast) {
+        if (props === null || props === void 0 ? void 0 : props.isLast) {
             const radius = var_1.$borderRadiusMap[size];
-            this.radioLabel.addStyleObj({
+            this.radioLabel.ctrl.addStyleObj({
                 borderRadius: '0 ' + radius + ' ' + radius + ' 0'
             });
         }
-        if (config === null || config === void 0 ? void 0 : config.checked) {
-            this.setChecked(config === null || config === void 0 ? void 0 : config.checked);
+        if (props === null || props === void 0 ? void 0 : props.checked) {
+            this.setChecked(props === null || props === void 0 ? void 0 : props.checked);
         }
-        if (config === null || config === void 0 ? void 0 : config.disabled) {
-            this.setDisabled(config === null || config === void 0 ? void 0 : config.disabled);
+        if (props === null || props === void 0 ? void 0 : props.disabled) {
+            this.setDisabled(props === null || props === void 0 ? void 0 : props.disabled);
         }
     }
     setDisabled(disabled) {
         this.disabled = disabled;
         if (disabled) {
-            this.setStyleObj({
-                cursor: framework_1.StyleCursor.notAllowed,
+            this.ctrl.setStyleObj({
+                cursor: 'notAllowed',
                 opacity: 0.5
                 //   禁用事件
                 //   pointerEvents: 'none',
             });
-            this.radioLabel.setStyleObj({
+            this.radioLabel.ctrl.setStyleObj({
                 color: var_1.$colors.default.base
             });
-            this.inputOriginal.setAttrObj({ disabled: true });
+            this.inputOriginal.ctrl.setAttrObj({ disabled: true });
         }
         else {
-            this.setStyleObj({
-                cursor: framework_1.StyleCursor.pointer,
+            this.ctrl.setStyleObj({
+                cursor: 'pointer',
                 opacity: 1,
                 pointerEvents: 'auto'
             });
-            this.inputOriginal.removeAttribute('disabled');
+            this.inputOriginal.ctrl.removeAttribute('disabled');
         }
     }
     setChecked(checked) {
         if (checked) {
-            this.inputOriginal.setAttrObj({
+            this.inputOriginal.ctrl.setAttrObj({
                 checked: true
             });
             //  设置选中样式
-            this.radioLabel.setStyleObj({
+            this.radioLabel.ctrl.setStyleObj({
                 color: var_1.$colorWhite,
                 backgroundColor: var_1.$colors.primary.base
             });
         }
         else {
-            this.inputOriginal.removeAttribute('checked');
+            this.inputOriginal.ctrl.removeAttribute('checked');
             // 设置非选中样式
-            this.radioLabel.setStyleObj({
+            this.radioLabel.ctrl.setStyleObj({
                 borderColor: var_1.$borderColor.base,
                 background: var_1.$fillColor.blank,
                 color: var_1.$colors.default.base
@@ -182,8 +182,10 @@ class TdRadioButton extends ui_abstract_1.UI {
                 }
                 this.setChecked(true);
                 (_a = this.parent) === null || _a === void 0 ? void 0 : _a.childNodes.forEach((node) => {
+                    var _a, _b;
                     if (node instanceof TdRadioButton &&
-                        node.inputOriginal.attrObj.name === this.inputOriginal.attrObj.name &&
+                        ((_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);
                     }

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

@@ -7,10 +7,10 @@ export declare class TdRadioGroup extends UI implements ITdRadioGroup {
     className: 'TdRadioGroup';
     disabled?: boolean;
     childNodes: TdRadio[];
-    config?: ITdRadioGroupConfig;
-    constructor(config?: ITdRadioGroupConfig);
+    props: ITdRadioGroupConfig;
+    constructor(params?: ITdRadioGroupConfig);
     get resultValue(): IPrimitive | IJsonData | IJsonDataProp[];
-    setConfig(config?: ITdRadioGroupConfig): void;
+    setup(): void;
     setRadios(options: ITdRadioConfig[]): void;
     setModelValue(value: IPrimitive): void;
 }

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

@@ -6,18 +6,18 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_radio_class_1 = require("../td-radio/td-radio.class");
 const td_radio_button_class_1 = require("../td-radio-button/td-radio-button.class");
 class TdRadioGroup extends ui_abstract_1.UI {
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params);
         this.className = 'TdRadioGroup';
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             display: 'inline-flex',
             alignItems: 'center',
             flexWrap: 'wrap',
             fontSize: '0',
-            marginRight: '12px'
+            marginRight: '12px',
         });
         this.childNodes = [];
-        this.setConfig(config);
+        this.props = this.setParams(params);
     }
     get resultValue() {
         if (this.modelValue instanceof framework_1.XProxy) {
@@ -27,22 +27,21 @@ class TdRadioGroup extends ui_abstract_1.UI {
             return this.modelValue;
         }
     }
-    setConfig(config) {
-        super.setConfig(config);
-        this.config = config;
-        if (config === null || config === void 0 ? void 0 : config.modelValue) {
-            this.modelValue = config.modelValue;
+    setup() {
+        const props = this.props;
+        if (props === null || props === void 0 ? void 0 : props.modelValue) {
+            this.modelValue = props.modelValue;
             console.log('this.modelValue is is ', this.modelValue);
         }
-        if (config === null || config === void 0 ? void 0 : config.options) {
-            this.setRadios(config.options);
+        if (props === null || props === void 0 ? void 0 : props.options) {
+            this.setRadios(props.options);
         }
     }
     setRadios(options) {
         this.clearChildren();
         const random = Math.random();
         options.forEach((opt, index) => {
-            var _a, _b;
+            var _a;
             opt.parent = this; // 父级
             if (index === 0) {
                 opt.isFirst = true;
@@ -50,7 +49,8 @@ class TdRadioGroup extends ui_abstract_1.UI {
             else if (index === options.length - 1) {
                 opt.isLast = true;
             }
-            if (opt.name) { /* empty */
+            if (opt.name) {
+                /* empty */
             }
             else {
                 opt.name = 'radio-name' + random;
@@ -60,13 +60,14 @@ class TdRadioGroup extends ui_abstract_1.UI {
                 delete opt.checked;
             }
             let radioObj;
-            if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.isButton) {
+            if (this.props.isButton) {
                 radioObj = new td_radio_button_class_1.TdRadioButton(opt);
             }
             else {
                 radioObj = new td_radio_class_1.TdRadio(opt);
             }
-            if (this.resultValue === opt.value) { // 反显
+            if (this.resultValue === opt.value) {
+                // 反显
                 radioObj.setChecked(true);
             }
             else if (opt.checked) {
@@ -75,8 +76,8 @@ class TdRadioGroup extends ui_abstract_1.UI {
                 // 设置选中样式
                 radioObj.setChecked(true);
             }
-            if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.disabled) {
-                radioObj.setDisabled(this.config.disabled);
+            if ((_a = this.props) === null || _a === void 0 ? void 0 : _a.disabled) {
+                radioObj.setDisabled(this.props.disabled);
             }
             this.addChild(radioObj);
         });
@@ -91,7 +92,8 @@ class TdRadioGroup extends ui_abstract_1.UI {
         }
         // console.error('value is ', value);
         this.childNodes.forEach((opt) => {
-            if (String(opt.inputOriginal.attrObj.value) === String(value)) {
+            var _a;
+            if (String((_a = opt.inputOriginal.props.attrObj) === null || _a === void 0 ? void 0 : _a.value) === String(value)) {
                 // 设置选中样式
                 opt.setChecked(true);
             }

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

@@ -0,0 +1 @@
+"use strict";

package/src/components/form/td-rate/td-rate.interface.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/form/td-select/dropdown/dropdown.class.d.ts

@@ -2,8 +2,9 @@ import { UI } from '../../../../ui/ui.abstract';
 import { ITdSelectDropdown, ITdSelectDropdownConfig } from './dropdown.interface';
 export declare class TdSelectDropDown extends UI implements ITdSelectDropdown {
     className: 'TdSelectDropdown';
+    props: ITdSelectDropdownConfig;
     private header?;
     private footer?;
-    constructor(config?: ITdSelectDropdownConfig);
-    setConfig(config?: Partial<ITdSelectDropdownConfig>): void;
+    constructor(params?: ITdSelectDropdownConfig);
+    setup(): void;
 }

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

@@ -1,46 +1,46 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdSelectDropDown = void 0;
-const ui_1 = require("@type-dom/ui");
+const var_1 = require("../../../../styles/var");
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 const framework_1 = require("@type-dom/framework");
 const td_select_style_1 = require("../td-select.style");
 class TdSelectDropDown extends ui_abstract_1.UI {
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params);
         this.className = 'TdSelectDropdown';
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             // z-index: calc(#{getCssVar('index-top')} + 1);
             // border-radius: getCssVar('border-radius-base');
-            borderRadius: ui_1.$borderRadius.base,
-            boxSizing: 'border-box',
+            borderRadius: var_1.$borderRadius.base,
+            boxSizing: 'border-box'
         });
-        this.setConfig(config);
+        this.props = this.setParams(params);
     }
-    setConfig(config) {
-        super.setConfig(config);
-        if (config === null || config === void 0 ? void 0 : config.header) {
+    setup() {
+        const props = this.props;
+        if (props === null || props === void 0 ? void 0 : props.header) {
             this.header = new framework_1.Div({
                 styleObj: {
                     // padding: map.get($select-dropdown, 'header-padding');
                     padding: td_select_style_1.$selectDropdown.headerPadding,
                     // border-bottom: map.get($select-dropdown, 'border');
-                    borderBottom: td_select_style_1.$selectDropdown.border,
+                    borderBottom: td_select_style_1.$selectDropdown.border
                 }
             });
-            this.header.addChild(config.header);
+            this.header.addChild(props.header);
             this.unshiftChild(this.header);
         }
-        if (config === null || config === void 0 ? void 0 : config.footer) {
+        if (props === null || props === void 0 ? void 0 : props.footer) {
             this.footer = new framework_1.Div({
                 styleObj: {
                     // padding: map.get($select-dropdown, 'footer-padding');
                     padding: td_select_style_1.$selectDropdown.footerPadding,
                     // border-top: map.get($select-dropdown, 'border');
-                    borderTop: td_select_style_1.$selectDropdown.border,
+                    borderTop: td_select_style_1.$selectDropdown.border
                 }
             });
-            this.footer.addChild(config.footer);
+            this.footer.addChild(props.footer);
             this.addChild(this.footer);
         }
     }

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

@@ -1,6 +1,8 @@
 import { UI } from '../../../ui/ui.abstract';
+import { IUIConfig } from '../../../ui/ui.interface';
 import { ITdSelect } from './td-select.interface';
 export declare class TdSelect extends UI implements ITdSelect {
     className: 'TdSelect';
-    constructor();
+    props: IUIConfig;
+    constructor(params?: IUIConfig);
 }

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

@@ -7,12 +7,12 @@ const td_tooltip_class_1 = require("../../feedback/td-tooltip/td-tooltip.class")
 const dropdown_class_1 = require("./dropdown/dropdown.class");
 const td_select_style_1 = require("./td-select.style");
 class TdSelect extends ui_abstract_1.UI {
-    constructor() {
-        super();
+    constructor(params) {
+        super(params);
         this.className = 'TdSelect';
-        this.addStyleObj(td_select_style_1.$select);
+        this.ctrl.addStyleObj(td_select_style_1.$select);
         this.addChild(new td_tooltip_class_1.TdTooltip({
-            childNodes: [
+            slot: [
                 new framework_1.Div({
                     name: 'wrapper'
                 }),
@@ -21,12 +21,12 @@ class TdSelect extends ui_abstract_1.UI {
                     childNodes: [
                         new dropdown_class_1.TdSelectDropDown({
                             name: 'content-inner',
-                            childNodes: []
-                        }),
+                        })
                     ]
                 })
             ]
         }));
+        this.props = this.setParams(params);
     }
 }
 exports.TdSelect = TdSelect;

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

@@ -19,7 +19,7 @@ exports.$select = {
     // multipleInputColor: getCssVar('text-color-regular'),
     // inputFocusBorderColor: getCssVar('color-primary'),
     inputFontSize: '14px',
-    width: '100%',
+    width: '100%'
 };
 exports.$selectOption = {
     // textColor: getCssVar('text-color-regular'),
@@ -30,13 +30,13 @@ exports.$selectOption = {
     // hoverBackground: getCssVar('fill-color', 'light'),
     hoverBackground: var_1.$fillColor.light,
     // selectedTextColor': getCssVar('color-primary'),
-    selectedTextColor: var_1.$colorPrimary,
+    selectedTextColor: var_1.$colorPrimary
 };
 exports.$selectGroup = {
     // 'text-color': getCssVar('color-info'),
     textColor: var_1.$colors.info.base,
     height: '30px',
-    fontSize: '12px',
+    fontSize: '12px'
 };
 exports.$selectDropdown = {
     // bgColor: getCssVar('bg-color', 'overlay'),
@@ -51,26 +51,26 @@ exports.$selectDropdown = {
     headerPadding: '10px',
     footerPadding: '10px',
     // border: 1px solid getCssVar('border-color-light'),
-    border: '1px solid ' + var_1.$borderColor.light,
+    border: '1px solid ' + var_1.$borderColor.light
 };
 exports.$selectWrapperPadding = {
     large: '8px 16px',
     default: '4px 12px',
-    small: '2px 8px',
+    small: '2px 8px'
 };
 exports.$selectNearMarginLeft = {
     large: '-8px',
     default: '-8px',
-    small: '-6px',
+    small: '-6px'
 };
 exports.$selectItemGap = {
     large: '6px',
     default: '6px',
-    small: '4px',
+    small: '4px'
 };
 // the same height of el-tag
 exports.$selectItemHeight = {
     large: '24px',
     default: '24px',
-    small: '20px',
+    small: '20px'
 };

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

@@ -0,0 +1 @@
+"use strict";

package/src/components/form/td-slider/td-slider.interface.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -3,18 +3,22 @@ import { UI } from '../../../ui/ui.abstract';
 import { ITdSwitch, ITdSwitchConfig } from './td-switch.interface';
 export declare class TdSwitch extends UI implements ITdSwitch {
     className: 'TdSwitch';
+    props: ITdSwitchConfig;
     input: Input;
     private left?;
     private core;
     private right?;
-    config?: ITdSwitchConfig;
-    private activeValue;
+    private activeValue?;
     private inactiveValue;
-    constructor(config?: ITdSwitchConfig);
-    setConfig(config?: ITdSwitchConfig): void;
+    private isControlled;
+    constructor(params?: ITdSwitchConfig);
+    get actualValue(): string | number | boolean | undefined;
+    get checked(): boolean;
+    mounted(): void;
     initEvents(): void;
     handleChange(): void;
     setDisabled(disabled: boolean): void;
     setChecked(checked: boolean): void;
+    setLoading(loading: boolean): void;
     switchValue(): void;
 }