@type-dom/ui 0.0.4 → 0.0.5

package/src/components/form/td-input/widget/td-textarea-wrapper.d.ts

@@ -3,11 +3,11 @@ import { ITdInputConfig } from '../td-input.interface';
 import { TdInput } from '../td-input.class';
 export declare class TdTextareaWrapper extends TypeDiv {
     className: 'TextareaWrapper';
+    props: ITdInputConfig;
     inner: Textarea;
     countSpan: Span;
-    config?: ITdInputConfig;
     parent?: TdInput;
     private isComposing?;
-    constructor(config?: ITdInputConfig);
+    constructor(params?: ITdInputConfig);
     handleInput(event?: Event, element?: TypeElement): void;
 }

package/src/components/form/td-input/widget/td-textarea-wrapper.js

@@ -5,10 +5,10 @@ const framework_1 = require("@type-dom/framework");
 const var_1 = require("../../../../styles/var");
 const td_input_style_1 = require("../td-input.style");
 class TdTextareaWrapper extends framework_1.TypeDiv {
-    constructor(config) {
+    constructor(params) {
         super();
         this.className = 'TextareaWrapper';
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             position: 'relative',
             display: 'inline-block',
             width: '100%',
@@ -19,14 +19,14 @@ class TdTextareaWrapper extends framework_1.TypeDiv {
         });
         this.inner = new framework_1.Textarea({
             attrObj: {
-                type: (config === null || config === void 0 ? void 0 : config.type) || 'text'
+                type: (params === null || params === void 0 ? void 0 : params.type) || 'text'
             },
             styleObj: {
                 position: 'relative',
                 display: 'block',
                 resize: 'vertical',
                 // padding: 5px map.get($input-padding-horizontal, 'default')-$border-width,
-                padding: '5px ' + td_input_style_1.$inputPaddingHorizontal[(config === null || config === void 0 ? void 0 : config.size) || 'default'] + 'px',
+                padding: '5px ' + td_input_style_1.$inputPaddingHorizontal[(params === null || params === void 0 ? void 0 : params.size) || 'default'] + 'px',
                 lineHeight: '1.5',
                 boxSizing: 'border-box',
                 width: '100%',
@@ -43,7 +43,7 @@ class TdTextareaWrapper extends framework_1.TypeDiv {
                 // );
                 backgroundColor: td_input_style_1.$input.bgColor,
                 backgroundImage: 'none',
-                '-webkit-appearance': 'none',
+                WebkitAppearance: 'none',
                 // @include inset-input-border(
                 //   var(
                 //     #{getCssVarName('input-border-color')},
@@ -100,18 +100,17 @@ class TdTextareaWrapper extends framework_1.TypeDiv {
         });
         this.addChildren(this.inner, this.countSpan);
         // this.childNodes = [this.inner, this.countSpan];
-        this.setConfig(config);
+        this.props = this.setParams(params);
     }
     // todo
     handleInput(event, element) {
-        var _a;
         console.log('input . this is ', this);
         // should not emit input during composition
         // see: https://github.com/ElemeFE/element/issues/10516
         if (this.isComposing)
             return;
-        if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.autosize) {
-            this.inner.setStyleObj({
+        if (this.props.autosize) {
+            this.inner.ctrl.setStyleObj({
                 // height: 'auto',
                 height: this.inner.dom.scrollHeight + 'px'
             });

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

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.calcTextareaHeight = void 0;
 const utils_1 = require("@type-dom/utils");
 let hiddenTextarea = undefined;
-const HIDDEN_STYLE = `
-  height:0 !important;
-  visibility:hidden !important;
-  ${utils_1.isFireFox ? '' : 'overflow:hidden !important;'}
-  position:absolute !important;
-  z-index:-1000 !important;
-  top:0 !important;
-  right:0 !important;
+const HIDDEN_STYLE = `
+  height:0 !important;
+  visibility:hidden !important;
+  ${utils_1.isFireFox ? '' : 'overflow:hidden !important;'}
+  position:absolute !important;
+  z-index:-1000 !important;
+  top:0 !important;
+  right:0 !important;
 `;
 const CONTEXT_STYLE = [
     'letter-spacing',

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

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

package/src/components/form/td-input-number/td-input-number.interface.js

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

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

@@ -0,0 +1,7 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdOption, ITdOptionConfig } from './td-option.interface';
+export declare class TdOption extends UI implements ITdOption {
+    className: 'TdOption';
+    props: ITdOptionConfig;
+    constructor(params?: ITdOptionConfig);
+}

package/src/components/form/{td-select/option/option.class.js → td-option/td-option.class.js}

@@ -1,18 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdOption = void 0;
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
-const td_select_style_1 = require("../td-select.style");
-const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_select_style_1 = require("../td-select/td-select.style");
 class TdOption extends ui_abstract_1.UI {
-    constructor(config) {
-        super({ tag: 'li' });
+    constructor(params) {
+        super(params, 'li');
         this.className = 'TdOption';
-        this.addAttrObj({
+        this.ctrl.addAttrObj({
             name: 'td-option',
-            role: 'option',
+            role: 'option'
         });
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             // font-size: map.get($select, 'font-size'),
             fontSize: td_select_style_1.$select.fontSize, // $fontSizes.base,
             // 20 as the padding of option item, 12 as the size of ✓ icon size
@@ -28,9 +27,9 @@ class TdOption extends ui_abstract_1.UI {
             // line-height: map.get($select-option, 'height'),
             lineHeight: td_select_style_1.$selectOption.height,
             boxSizing: 'border-box',
-            cursor: framework_1.StyleCursor.pointer,
+            cursor: 'pointer'
         });
-        this.setConfig(config);
+        this.props = this.setParams(params);
     }
 }
 exports.TdOption = TdOption;

package/src/components/form/{td-select/option/option.interface.d.ts → td-option/td-option.interface.d.ts}

@@ -1,4 +1,4 @@
-import { IUI, IUIConfig } from '../../../../ui/ui.interface';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
 export interface ITdOption extends IUI {
     className: 'TdOption';
 }

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,7 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdOptionGroup, ITdOptionGroupConfig } from './td-option-group.interface';
+export declare class TdOptionGroup extends UI implements ITdOptionGroup {
+    className: 'TdOptionGroup';
+    props: ITdOptionGroupConfig;
+    constructor(params?: ITdOptionGroupConfig);
+}

package/src/components/form/{td-select/option-group/option-group.class.js → td-option-group/td-option-group.class.js}

@@ -2,24 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdOptionGroup = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
-const td_select_style_1 = require("../td-select.style");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_select_style_1 = require("../td-select/td-select.style");
 class TdOptionGroup extends ui_abstract_1.UI {
-    constructor(config) {
-        super({ tag: 'ul' });
+    constructor(params) {
+        super(params, 'ul');
         this.className = 'TdOptionGroup';
-        this.addAttrObj({
+        this.ctrl.addAttrObj({
             name: 'option-group-wrap'
         });
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             margin: '0',
             padding: '0',
             position: 'relative',
-            listStyle: 'none',
+            listStyle: 'none'
         });
         const $gap = '20px';
         this.addChildren(new framework_1.LI({
-            text: (config === null || config === void 0 ? void 0 : config.label) || '选项组',
+            text: (params === null || params === void 0 ? void 0 : params.label) || '选项组',
             attrObj: {
                 name: 'option-group-title'
             },
@@ -30,7 +30,7 @@ class TdOptionGroup extends ui_abstract_1.UI {
                 // color: map.get($select-group, 'text-color'),
                 color: td_select_style_1.$selectGroup.textColor,
                 // line-height: map.get($select-group, 'height'),
-                lineHeight: td_select_style_1.$selectGroup.height,
+                lineHeight: td_select_style_1.$selectGroup.height
             }
         }), new framework_1.LI({
             childNodes: [
@@ -39,12 +39,12 @@ class TdOptionGroup extends ui_abstract_1.UI {
                         margin: '0',
                         padding: '0',
                         position: 'relative',
-                        listStyle: 'none',
+                        listStyle: 'none'
                     }
                 })
             ]
         }));
-        this.setConfig(config);
+        this.props = this.setParams(params);
     }
 }
 exports.TdOptionGroup = TdOptionGroup;

package/src/components/form/{td-select/option-group/option-group.interface.d.ts → td-option-group/td-option-group.interface.d.ts}

@@ -1,4 +1,4 @@
-import { IUI, IUIConfig } from '../../../../ui/ui.interface';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
 export interface ITdOptionGroup extends IUI {
     className: 'TdOptionGroup';
 }

package/src/components/form/td-option-group/td-option-group.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -3,14 +3,14 @@ import { UI } from '../../../ui/ui.abstract';
 import { ITdRadio, ITdRadioConfig } from './td-radio.interface';
 export declare class TdRadio extends UI implements ITdRadio {
     className: 'TdRadio';
+    props: ITdRadioConfig;
     inputOriginal: Input;
     inputInner: Span;
     radioInput: Span;
     radioLabel: Span;
-    config?: ITdRadioConfig;
     private disabled?;
-    constructor(config?: ITdRadioConfig);
-    setConfig(config?: ITdRadioConfig): void;
+    constructor(params?: ITdRadioConfig);
+    setup(): void;
     setDisabled(disabled?: boolean): void;
     setChecked(checked: boolean): void;
     initEvents(): void;

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

@@ -6,14 +6,14 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const var_1 = require("../../../styles/var");
 const td_radio_group_class_1 = require("../td-radio-group/td-radio-group.class");
 class TdRadio extends ui_abstract_1.UI {
-    constructor(config) {
-        super({ tag: 'label' });
+    constructor(params) {
+        super(params, 'label');
         this.className = 'TdRadio';
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             color: var_1.$textColor.regular,
             fontWeight: var_1.$fontWeightPrimary,
             position: 'relative',
-            cursor: framework_1.StyleCursor.pointer,
+            cursor: 'pointer',
             display: 'inline-flex',
             alignItems: 'center',
             whiteSpace: 'nowrap',
@@ -24,9 +24,9 @@ class TdRadio extends ui_abstract_1.UI {
             height: var_1.$commonComponentSize.default
         });
         this.inputOriginal = new framework_1.Input({
+            name: 'radio-name',
             attrObj: {
                 type: 'radio',
-                name: 'radio-name',
                 value: 'radio-value'
             },
             styleObj: {
@@ -42,6 +42,7 @@ class TdRadio extends ui_abstract_1.UI {
             }
         });
         this.inputInner = new framework_1.Span({
+            name: 'inner',
             styleObj: {
                 // radio-inner 样式
                 position: 'relative',
@@ -57,7 +58,7 @@ class TdRadio extends ui_abstract_1.UI {
                 height: '14px',
                 // background-color: var(--el-radio-input-bg-color),
                 backgroundColor: '#ffffff',
-                cursor: framework_1.StyleCursor.pointer,
+                cursor: 'pointer',
                 display: 'inline-block',
                 boxSizing: 'border-box',
                 transition: 'transform .15s ease-in'
@@ -66,7 +67,7 @@ class TdRadio extends ui_abstract_1.UI {
         this.radioInput = new framework_1.Span({
             styleObj: {
                 whiteSpace: 'nowrap',
-                cursor: framework_1.StyleCursor.pointer,
+                cursor: 'pointer',
                 outline: 'none',
                 display: 'inline-flex',
                 position: 'relative',
@@ -76,46 +77,46 @@ class TdRadio 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: {
                 // 下面这些是变量，要动态复制的。
                 // font-size: var(--el-radio-font-size),
                 color: var_1.$colors.default.base,
-                fontSize: var_1.$fontSizes[(config === null || config === void 0 ? void 0 : config.size) || 'base'],
+                fontSize: var_1.$fontSizes[(params === null || params === void 0 ? void 0 : params.size) || 'base'],
                 paddingLeft: '8px'
             }
         });
         this.addChildren(this.radioInput, 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 === 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);
         }
-        if (config === null || config === void 0 ? void 0 : config.value) {
-            this.inputOriginal.addAttrObj({ value: config.value });
+        if (props === null || props === void 0 ? void 0 : 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 === null || props === void 0 ? void 0 : 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 样式
         }
-        if (config === null || config === void 0 ? void 0 : config.size) {
-            this.addStyleObj({
-                height: var_1.$commonComponentSize[config.size],
-                fontSize: var_1.$fontSizes[config.size]
+        if (props === null || props === void 0 ? void 0 : props.size) {
+            this.ctrl.addStyleObj({
+                height: var_1.$commonComponentSize[props.size],
+                fontSize: var_1.$fontSizes[props.size]
             });
         }
-        if (config === null || config === void 0 ? void 0 : config.border) {
-            this.addStyleObj({
+        if (props === null || props === void 0 ? void 0 : props.border) {
+            this.ctrl.addStyleObj({
                 borderWidth: var_1.$borderWidth,
                 borderStyle: var_1.$borderStyle,
                 borderColor: var_1.$borderColor.base,
@@ -123,28 +124,28 @@ class TdRadio extends ui_abstract_1.UI {
                 padding: '0 19px 0 11px'
             });
         }
-        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.inputInner.setStyleObj({
-                cursor: framework_1.StyleCursor.notAllowed,
+            this.inputOriginal.ctrl.setAttrObj({ disabled: true });
+            this.inputInner.ctrl.setStyleObj({
+                cursor: 'notAllowed',
                 // color: $colors.default.base,
                 // borderWidth: '1px',
                 // borderStyle: 'solid',
@@ -154,30 +155,30 @@ class TdRadio extends ui_abstract_1.UI {
             });
         }
         else {
-            this.setStyleObj({
-                cursor: framework_1.StyleCursor.pointer,
+            this.ctrl.setStyleObj({
+                cursor: 'pointer',
                 opacity: 1,
                 pointerEvents: 'auto'
             });
-            this.inputOriginal.removeAttribute('disabled');
-            this.inputInner.setStyleObj({
-                cursor: framework_1.StyleCursor.auto
+            this.inputOriginal.ctrl.removeAttribute('disabled');
+            this.inputInner.ctrl.setStyleObj({
+                cursor: 'auto'
             });
         }
     }
     setChecked(checked) {
         if (checked) {
-            this.setStyleObj({
+            this.ctrl.setStyleObj({
                 borderColor: var_1.$colors.primary.base
             });
-            this.inputOriginal.setAttrObj({
+            this.inputOriginal.ctrl.setAttrObj({
                 checked: true
             });
             //  设置选中样式
-            this.radioLabel.setStyleObj({
+            this.radioLabel.ctrl.setStyleObj({
                 color: var_1.$colors.primary.base
             });
-            this.inputInner.setStyleObj({
+            this.inputInner.ctrl.setStyleObj({
                 color: var_1.$colors.primary.base,
                 borderWidth: '5px',
                 borderStyle: 'solid',
@@ -186,18 +187,18 @@ class TdRadio extends ui_abstract_1.UI {
         }
         else {
             // 设置非选中样式
-            this.setStyleObj({
+            this.ctrl.setStyleObj({
                 borderColor: var_1.$borderColor.base
             });
-            this.inputOriginal.removeAttribute('checked');
-            this.radioLabel.setStyleObj({
+            this.inputOriginal.ctrl.removeAttribute('checked');
+            this.radioLabel.ctrl.setStyleObj({
                 color: var_1.$colors.default.base
             });
-            this.inputInner.setStyleObj({
-                color: var_1.$colors.default.base,
+            this.inputInner.ctrl.setStyleObj({
                 borderWidth: '1px',
                 borderStyle: 'solid',
-                borderColor: var_1.$borderColor.base
+                borderColor: var_1.$borderColor.base,
+                color: var_1.$colors.default.base
             });
         }
     }
@@ -219,8 +220,10 @@ class TdRadio 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 TdRadio &&
-                        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-button/td-radio-button.class.d.ts

@@ -5,10 +5,10 @@ export declare class TdRadioButton extends UI implements ITdRadioButton {
     className: 'TdRadioButton';
     inputOriginal: Input;
     radioLabel: Span;
-    config?: ITdRadioButtonConfig;
+    props: ITdRadioButtonConfig;
     private disabled?;
-    constructor(config?: ITdRadioButtonConfig);
-    setConfig(config?: ITdRadioButtonConfig): void;
+    constructor(params?: ITdRadioButtonConfig);
+    setup(): void;
     setDisabled(disabled?: boolean): void;
     setChecked(checked: boolean): void;
     initEvents(): void;