@type-dom/ui 0.0.3 → 0.0.5

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

@@ -9,12 +9,15 @@ const td_input_wrapper_class_1 = require("./widget/td-input-wrapper.class");
 const td_input_style_1 = require("./td-input.style");
 const td_textarea_wrapper_1 = require("./widget/td-textarea-wrapper");
 class TdInput extends ui_abstract_1.UI {
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params);
         console.log('TdInput constructor . ');
         this.className = 'TdInput';
-        this.addAttrName('td-input');
-        this.addStyleObj({
+        this.ctrl.addAttrName('td-input');
+        this.ctrl.addAttrObj({
+            tabIndex: 0
+        });
+        this.ctrl.addStyleObj({
             position: 'relative',
             display: 'inline-flex',
             width: '100%',
@@ -23,47 +26,49 @@ class TdInput extends ui_abstract_1.UI {
             // fontSize: var(--el-font-size-base),
             fontSize: var_1.$fontSizes.base,
             // lineHeight: var(--el-input-height),
-            lineHeight: td_input_style_1.$inputHeight[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
-            userSelect: 'none',
+            lineHeight: td_input_style_1.$inputHeight[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
+            userSelect: 'none'
         });
-        console.log('config.modelValue is ', config === null || config === void 0 ? void 0 : config.modelValue);
-        if (config === null || config === void 0 ? void 0 : config.modelValue) {
-            this.modelValue = config.modelValue;
+        console.log('params.modelValue is ', params === null || params === void 0 ? void 0 : params.modelValue);
+        if (params === null || params === void 0 ? void 0 : params.modelValue) {
+            this.modelValue = params.modelValue;
         }
-        this.setConfig(config);
+        this.props = this.setParams(params);
+    }
+    get value() {
+        return this.panel.inner.value;
     }
-    setConfig(config) {
-        super.setConfig(config);
-        if (config === null || config === void 0 ? void 0 : config.width) {
-            this.addWidth(config.width);
+    setup() {
+        const props = this.props;
+        if (props === null || props === void 0 ? void 0 : props.width) {
+            this.ctrl.addWidth(props.width);
         }
         //   todo
-        if ((config === null || config === void 0 ? void 0 : config.type) === 'textarea') {
-            config.parent = this;
-            this.panel = new td_textarea_wrapper_1.TdTextareaWrapper(config);
-            // this.textareaWrapper = new TdTextareaWrapper(config);
+        if ((props === null || props === void 0 ? void 0 : props.type) === 'textarea') {
+            props.parent = this;
+            this.panel = new td_textarea_wrapper_1.TdTextareaWrapper(props);
+            // this.textareaWrapper = new TdTextareaWrapper(props);
         }
         else {
-            this.panel = new td_input_wrapper_class_1.TdInputWrapper(config);
+            this.panel = new td_input_wrapper_class_1.TdInputWrapper(props);
         }
-        if (config === null || config === void 0 ? void 0 : config.placeholder) {
-            this.placeholder = config.placeholder;
+        if (props === null || props === void 0 ? void 0 : props.placeholder) {
+            this.placeholder = props.placeholder;
         }
         this.panel.setParent(this);
         this.addChild(this.panel);
-        if (!(config === null || config === void 0 ? void 0 : config.formatter) && (config === null || config === void 0 ? void 0 : config.parser)) {
+        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() {
-        var _a, _b;
-        if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.disabled) {
+        if (this.props.disabled) {
             return;
         }
         this.addEvents({
             mouseleave: (evt) => {
-                var _a;
-                if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.disabled) { // 会动态设置的。所以要在监听中判断拦截；
+                if (this.props.disabled) {
+                    // 会动态设置的。所以要在监听中判断拦截；
                     evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
                     evt === null || evt === void 0 ? void 0 : evt.preventDefault();
                     return;
@@ -71,8 +76,8 @@ class TdInput extends ui_abstract_1.UI {
                 this.setHovering(false);
             },
             mouseenter: (evt, element) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h;
-                if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.disabled) {
+                var _a, _b, _c, _d, _e;
+                if (this.props.disabled) {
                     evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
                     evt === null || evt === void 0 ? void 0 : evt.preventDefault();
                     return;
@@ -80,19 +85,31 @@ class TdInput extends ui_abstract_1.UI {
                 this.setHovering(true);
                 console.log('mouseenter then showClear . ');
                 if (this.panel instanceof td_input_wrapper_class_1.TdInputWrapper) {
-                    if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.clearable) {
-                        console.log('this.panel?.showClear is ', (_c = this.panel) === null || _c === void 0 ? void 0 : _c.showClear);
-                        (_d = this.panel) === null || _d === void 0 ? void 0 : _d.setShowClear((_e = this.panel) === null || _e === void 0 ? void 0 : _e.showClear);
+                    if (this.props.clearable) {
+                        console.log('this.panel?.showClear is ', (_a = this.panel) === null || _a === void 0 ? void 0 : _a.showClear);
+                        (_b = this.panel) === null || _b === void 0 ? void 0 : _b.setShowClear((_c = this.panel) === null || _c === void 0 ? void 0 : _c.showClear);
                     }
-                    if ((_f = this.config) === null || _f === void 0 ? void 0 : _f.showPassword) {
-                        (_g = this.panel) === null || _g === void 0 ? void 0 : _g.setShowPassword((_h = this.panel) === null || _h === void 0 ? void 0 : _h.showPwdVisible);
+                    if (this.props.showPassword) {
+                        (_d = this.panel) === null || _d === void 0 ? void 0 : _d.setShowPassword((_e = this.panel) === null || _e === void 0 ? void 0 : _e.showPwdVisible);
                     }
                 }
             }
         });
+        // 传递组件的监听事件到input框上；
         this.panel.inner.addEvents({
+            focus: (evt, element) => {
+                console.log('td-input focus . ');
+                // if (this.props.emits?.focus) {
+                //   this.props.emits?.focus?.(evt, element);
+                // }
+                this.emit('focus', evt, element);
+            },
             change: (evt, element) => {
                 console.log('td-input change', evt, element);
+                // if (this.props.emits?.change) {
+                //   this.props.emits.change(evt, element);
+                // }
+                this.emit('change', evt, element);
             },
             input: (evt, element) => {
                 var _a, _b, _c;
@@ -103,23 +120,41 @@ class TdInput extends ui_abstract_1.UI {
                 else {
                     this.modelValue = (_c = element === null || element === void 0 ? void 0 : element.dom) === null || _c === void 0 ? void 0 : _c.value;
                 }
+                // if (this.props.emits?.input) {
+                //   this.props.emits.input(evt, element);
+                // }
+                this.emit('input', evt, element);
+            },
+            blur: (evt, element) => {
+                console.log('td-input blur . ');
+                // if (this.props.emits?.blur) {
+                //   this.props.emits?.blur?.(evt, element);
+                // }
+                this.emit('blur', evt, element);
+            },
+            keydown: (evt, element) => {
+                console.log('td-input keydown', evt, element);
+                // if (this.props.emits?.keydown) {
+                //   this.props.emits.keydown(evt, element);
+                // }
+                this.emit('keydown', evt, element);
             }
         });
-        if (((_b = this.config) === null || _b === void 0 ? void 0 : _b.type) === 'textarea') {
+        if (this.props.type === 'textarea') {
             return; // ????
         }
     }
     setModelValue(value) {
         console.log('setModelValue . value is ', value);
+        this.modelValue = value;
         if ((0, utils_1.isString)(value)) {
             if ((0, utils_1.isMustache)(value)) {
-                if (this.itemData) {
-                    const originalValue = (0, utils_1.mustache)(value, this.itemData);
-                    this.panel.inner.setValue(originalValue);
-                }
-                else {
-                    this.panel.inner.setValue(value);
-                }
+                // if (this.itemData) {
+                //   const originalValue = mustache(value, this.itemData);
+                //   this.panel.inner.setValue(originalValue);
+                // } else {
+                this.panel.inner.setValue(value);
+                // }
             }
             else {
                 this.panel.inner.setValue(value);
@@ -137,14 +172,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.setStyleObj({
+                (_a = this.panel) === null || _a === void 0 ? void 0 : _a.ctrl.setStyleObj({
                     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.setStyleObj({
+                (_b = this.panel) === null || _b === void 0 ? void 0 : _b.ctrl.setStyleObj({
                     boxShadow: '0 0 0 1px ' + td_input_style_1.$input.borderColor + ' inset'
                 });
             }
@@ -154,23 +189,22 @@ 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.setStyleObj({
+            (_a = this.panel) === null || _a === void 0 ? void 0 : _a.ctrl.setStyleObj({
                 boxShadow: '0 0 0 1px ' + td_input_style_1.$input.focusBorderColor + ' inset'
             });
         }
         else {
-            (_b = this.panel) === null || _b === void 0 ? void 0 : _b.setStyleObj({
+            (_b = this.panel) === null || _b === void 0 ? void 0 : _b.ctrl.setStyleObj({
                 boxShadow: '0 0 0 1px ' + td_input_style_1.$input.borderColor + ' inset'
             });
         }
     }
     created() {
-        var _a;
         // 注： 绑定变量要渲染前处理，而不是创建对象时处理
-        if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.modelValue) {
+        if (this.props.modelValue) {
             console.log('td-input created . ');
-            console.log('setModelValue ', this.config.modelValue);
-            this.setModelValue(this.config.modelValue);
+            console.log('setModelValue ', this.props.modelValue);
+            this.setModelValue(this.props.modelValue);
         }
     }
 }

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

@@ -129,5 +129,18 @@ export interface ITdInputConfig extends IUIConfig {
     passwordVisible?: boolean;
     width?: number;
     suffix?: Span;
+    emits?: {
+        input?: (value: string) => void;
+        change?: (value: string) => void;
+        focus?: (evt: FocusEvent) => void;
+        blur?: (evt: FocusEvent) => void;
+        clear?: () => true;
+        mouseleave?: (evt: MouseEvent) => void;
+        mouseenter?: (evt: MouseEvent) => void;
+        keydown?: (evt: KeyboardEvent | Event) => void;
+        compositionstart?: (evt: CompositionEvent) => void;
+        compositionupdate?: (evt: CompositionEvent) => void;
+        compositionend?: (evt: CompositionEvent) => void;
+    };
 }
 export type TargetElement = HTMLInputElement | HTMLTextAreaElement;

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.addStyleObj({
+        this.ctrl.addStyleObj({
             display: (config === null || config === void 0 ? void 0 : config.prefixIcon) ? 'inline-flex' : 'none',
             whiteSpace: 'nowrap',
             flexShrink: 0,
@@ -47,7 +47,7 @@ class TdInputPrefix extends framework_1.TypeSpan {
                 styleObj: {
                     display: 'inline-flex',
                     fontSize: td_input_style_1.$inputFontSize[(config === null || config === void 0 ? void 0 : config.size) || 'default']
-                    // cursor: StyleCursor.pointer,
+                    // cursor: 'pointer',
                 },
                 events: {
                     click: (evt, icon) => {

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

@@ -1,6 +1,6 @@
 import { TypeSpan } from '@type-dom/framework';
+import { TdIcon } from '../../../basic/td-icon/td-icon.class';
 import { ITdInputConfig } from '../td-input.interface';
-import { TdIcon } from '@type-dom/ui';
 import { TdInputWrapper } from './td-input-wrapper.class';
 export declare class TdInputSuffix extends TypeSpan {
     className: 'TdInputSuffix';

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

@@ -2,15 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdInputSuffix = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_1 = require("@type-dom/ui");
 const svgs_1 = require("@type-dom/svgs");
+const td_icon_class_1 = require("../../../basic/td-icon/td-icon.class");
 const td_input_style_1 = require("../td-input.style");
 class TdInputSuffix extends framework_1.TypeSpan {
     constructor(parent, config) {
         super();
         this.parent = parent;
         this.className = 'TdInputSuffix';
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             display: this.parent.suffixVisible ? 'inline-flex' : 'none',
             whiteSpace: 'nowrap',
             flexShrink: 0,
@@ -40,7 +40,7 @@ class TdInputSuffix extends framework_1.TypeSpan {
         });
         this.addChild(this.suffixInner);
         if (config === null || config === void 0 ? void 0 : config.clearable) {
-            this.clearIcon = new ui_1.TdIcon({
+            this.clearIcon = new td_icon_class_1.TdIcon({
                 svgObj: new svgs_1.ElCircleCloseSvg(),
                 attrObj: {
                     name: 'suffix-icon'
@@ -48,7 +48,7 @@ class TdInputSuffix extends framework_1.TypeSpan {
                 styleObj: {
                     display: 'none',
                     fontSize: td_input_style_1.$inputFontSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
-                    cursor: framework_1.StyleCursor.pointer
+                    cursor: 'pointer'
                 },
                 events: {
                     click: (evt, icon) => {
@@ -66,12 +66,12 @@ class TdInputSuffix extends framework_1.TypeSpan {
             this.suffixInner.addChild(this.clearIcon);
         }
         if (config === null || config === void 0 ? void 0 : config.showPassword) {
-            this.passwordIcon = new ui_1.TdIcon({
+            this.passwordIcon = new td_icon_class_1.TdIcon({
                 svgObj: new svgs_1.ElHideSvg(),
                 styleObj: {
                     display: this.parent.showPwdVisible ? 'inline-flex' : 'none',
                     fontSize: td_input_style_1.$inputFontSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
-                    cursor: framework_1.StyleCursor.pointer
+                    cursor: 'pointer'
                 },
                 events: {
                     click: () => {
@@ -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.setAttrObj({
+                            this.parent.inner.ctrl.setAttrObj({
                                 type: 'text'
                             });
                         }
                         else {
-                            this.parent.inner.setAttrObj({
+                            this.parent.inner.ctrl.setAttrObj({
                                 type: 'password'
                             });
                         }
@@ -96,7 +96,7 @@ class TdInputSuffix extends framework_1.TypeSpan {
             this.suffixInner.addChild(this.passwordIcon);
         }
         if (config === null || config === void 0 ? void 0 : config.suffixIcon) {
-            this.suffixIcon = new ui_1.TdIcon({
+            this.suffixIcon = new td_icon_class_1.TdIcon({
                 svgObj: config.suffixIcon,
                 attrObj: {
                     name: 'suffix-icon'
@@ -104,7 +104,7 @@ class TdInputSuffix extends framework_1.TypeSpan {
                 styleObj: {
                     display: 'inline-flex',
                     fontSize: td_input_style_1.$inputFontSize[(config === null || config === void 0 ? void 0 : config.size) || 'default']
-                    // cursor: StyleCursor.pointer,
+                    // cursor: 'pointer',
                 },
                 events: {
                     click: (evt, icon) => {

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

@@ -6,8 +6,8 @@ import { TdInputSuffix } from './suffix';
 import { TdInputPrefix } from './prefix';
 export declare class TdInputWrapper extends TypeDiv implements ITdInputWrapper {
     className: 'TdInputWrapper';
+    props: ITdInputConfig;
     parent?: TdInput;
-    config?: ITdInputConfig;
     prepend?: Div;
     append?: Div;
     prefix?: TdInputPrefix;
@@ -18,8 +18,8 @@ export declare class TdInputWrapper extends TypeDiv implements ITdInputWrapper {
     private isWordLimitVisible?;
     private validateState?;
     private needStatusIcon?;
-    constructor(config?: ITdInputConfig);
-    setConfig(config?: ITdInputConfig): void;
+    constructor(params?: ITdInputConfig);
+    setup(): void;
     get suffixVisible(): boolean;
     get showClear(): boolean | undefined;
     get showPwdVisible(): boolean | undefined;

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

@@ -7,21 +7,20 @@ const td_input_style_1 = require("../td-input.style");
 const suffix_1 = require("./suffix");
 const prefix_1 = require("./prefix");
 class TdInputWrapper extends framework_1.TypeDiv {
-    constructor(config) {
+    constructor(params) {
         super();
         this.className = 'TdInputWrapper';
-        this.config = config;
-        this.parent = config === null || config === void 0 ? void 0 : config.parent;
-        this.addStyleObj({
+        this.parent = params === null || params === void 0 ? void 0 : params.parent;
+        this.ctrl.addStyleObj({
             display: 'inline-flex',
             flexGrow: 1,
             alignItems: 'center',
             justifyContent: 'center',
-            cursor: framework_1.StyleCursor.text,
+            cursor: 'text',
             transform: 'translate3d(0, 0, 0)',
             // transform: 'translateZ(0)',
             // padding: $border-width map.get($input-padding-horizontal, 'default')-$border-width,
-            padding: td_input_style_1.$wrapperPadding[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
+            padding: td_input_style_1.$wrapperPadding[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
             //   background-color: var(
             //     #{getCssVarName('input-bg-color')},
             //     map.get($input, 'bg-color')
@@ -37,23 +36,23 @@ class TdInputWrapper extends framework_1.TypeDiv {
             //       transition: var(--el-transition-box-shadow),
             boxShadow: '0 0 0 1px ' + td_input_style_1.$input.borderColor + ' inset'
         });
-        this.prefix = new prefix_1.TdInputPrefix(this, config);
+        this.prefix = new prefix_1.TdInputPrefix(this, params);
         this.unshiftChild(this.prefix);
         let placeholder = '';
-        if ((config === null || config === void 0 ? void 0 : config.placeholder) instanceof framework_1.XProxy) {
-            placeholder = config.placeholder.value;
+        if ((params === null || params === void 0 ? void 0 : params.placeholder) instanceof framework_1.XProxy) {
+            placeholder = params.placeholder.value;
         }
-        else if (config === null || config === void 0 ? void 0 : config.placeholder) {
-            placeholder = config.placeholder;
+        else if (params === null || params === void 0 ? void 0 : params.placeholder) {
+            placeholder = params.placeholder;
         }
         this.inner = new framework_1.Input({
             attrObj: {
-                type: (config === null || config === void 0 ? void 0 : config.showPassword)
-                    ? (config === null || config === void 0 ? void 0 : config.passwordVisible)
+                type: (params === null || params === void 0 ? void 0 : params.showPassword)
+                    ? (params === null || params === void 0 ? void 0 : params.passwordVisible)
                         ? 'text'
                         : 'password'
-                    : config === null || config === void 0 ? void 0 : config.type,
-                placeholder: placeholder ? placeholder : 'Please input'
+                    : params === null || params === void 0 ? void 0 : params.type,
+                placeholder: placeholder
             },
             styleObj: {
                 width: '100%',
@@ -64,7 +63,7 @@ class TdInputWrapper extends framework_1.TypeDiv {
                 border: 'none',
                 background: 'none',
                 boxSizing: 'border-box',
-                '-webkit-appearance': 'none',
+                WebkitAppearance: 'none',
                 //   color: var(
                 //     #{getCssVarName('input-text-color')},
                 //     map.get($input, 'text-color')
@@ -98,13 +97,13 @@ class TdInputWrapper extends framework_1.TypeDiv {
                     (_a = this.parent) === null || _a === void 0 ? void 0 : _a.setFocus(true);
                 },
                 blur: () => {
-                    var _a, _b, _c;
+                    var _a;
                     console.log('blur . ');
                     (_a = this.parent) === null || _a === void 0 ? void 0 : _a.setFocus(false);
-                    if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.clearable) {
+                    if (this.props.clearable) {
                         this.setShowClear(this.showClear);
                     }
-                    if ((_c = this.config) === null || _c === void 0 ? void 0 : _c.showPassword) {
+                    if (this.props.showPassword) {
                         this.setShowPassword(this.showPwdVisible);
                     }
                 },
@@ -117,56 +116,56 @@ class TdInputWrapper extends framework_1.TypeDiv {
             }
         });
         this.addChild(this.inner);
-        this.suffix = new suffix_1.TdInputSuffix(this, config);
+        this.suffix = new suffix_1.TdInputSuffix(this, params);
         this.addChild(this.suffix);
-        this.setConfig(config);
+        this.props = this.setParams(params);
     }
-    setConfig(config) {
-        if (config === null || config === void 0 ? void 0 : config.prefix) {
+    setup() {
+        const props = this.props;
+        if (props === null || props === void 0 ? void 0 : props.prefix) {
             //   todo
         }
-        if (config === null || config === void 0 ? void 0 : config.size) {
-            this.addStyleObj({
-                padding: td_input_style_1.$wrapperPadding[config.size || 'default'],
-                fontSize: td_input_style_1.$inputFontSize[config.size || 'default'],
-                height: td_input_style_1.$inputHeight[config.size || 'default']
+        if (props === null || props === void 0 ? void 0 : props.size) {
+            this.ctrl.addStyleObj({
+                padding: td_input_style_1.$wrapperPadding[props.size || 'default'],
+                fontSize: td_input_style_1.$inputFontSize[props.size || 'default'],
+                height: td_input_style_1.$inputHeight[props.size || 'default']
             });
         }
-        if (config === null || config === void 0 ? void 0 : config.disabled) {
-            this.setDisabled(config.disabled);
+        if (props === null || props === void 0 ? void 0 : props.disabled) {
+            this.setDisabled(props.disabled);
         }
         this.setNativeInputValue();
     }
     get suffixVisible() {
-        var _a, _b;
-        return !!this.suffix ||
-            !!((_a = this.config) === null || _a === void 0 ? void 0 : _a.suffixIcon) ||
+        return (!!this.suffix ||
+            !!this.props.suffixIcon ||
             this.showClear ||
-            ((_b = this.config) === null || _b === void 0 ? void 0 : _b.showPassword) ||
+            this.props.showPassword ||
             this.isWordLimitVisible ||
-            (!!this.validateState && this.needStatusIcon);
+            (!!this.validateState && this.needStatusIcon));
     }
     get showClear() {
-        var _a, _b, _c, _d, _e;
-        // console.error('compute showClear . this.config is ', this.config);
-        // console.log('!this.config?.disabled is ', !this.config?.disabled);
-        // console.log('!this.config?.readonly is ', !this.config?.readonly);
+        var _a, _b;
+        // console.error('compute showClear . this.props is ', this.props);
+        // console.log('!this.props.disabled is ', !this.props.disabled);
+        // console.log('!this.props.readonly is ', !this.props.readonly);
         // console.log('this.nativeInputValue is ', this.nativeInputValue);
         // console.log('this.parent?.isFocused is ', this.parent?.isFocused);
         // console.log('this.parent?.hovering is ', this.parent?.hovering);
-        return (((_a = this.config) === null || _a === void 0 ? void 0 : _a.clearable) &&
-            !((_b = this.config) === null || _b === void 0 ? void 0 : _b.disabled) &&
-            !((_c = this.config) === null || _c === void 0 ? void 0 : _c.readonly) &&
+        return (this.props.clearable &&
+            !this.props.disabled &&
+            !this.props.readonly &&
             !!this.nativeInputValue &&
-            (((_d = this.parent) === null || _d === void 0 ? void 0 : _d.isFocused) || ((_e = this.parent) === null || _e === void 0 ? void 0 : _e.hovering)));
+            (((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isFocused) || ((_b = this.parent) === null || _b === void 0 ? void 0 : _b.hovering)));
     }
     get showPwdVisible() {
-        var _a, _b, _c, _d;
-        return (((_a = this.config) === null || _a === void 0 ? void 0 : _a.showPassword) &&
-            !((_b = this.config) === null || _b === void 0 ? void 0 : _b.disabled) &&
-            !((_c = this.config) === null || _c === void 0 ? void 0 : _c.readonly) &&
+        var _a;
+        return (this.props.showPassword &&
+            !this.props.disabled &&
+            !this.props.readonly &&
             !!this.nativeInputValue &&
-            (!!this.nativeInputValue || ((_d = this.parent) === null || _d === void 0 ? void 0 : _d.isFocused)));
+            (!!this.nativeInputValue || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isFocused)));
     }
     get nativeInputValue() {
         return this.inner.dom.value || '';
@@ -176,23 +175,23 @@ class TdInputWrapper extends framework_1.TypeDiv {
     }
     setDisabled(disabled) {
         if (disabled) {
-            this.inner.setAttrObj({ disabled: 'disabled' });
-            this.inner.setStyleObj({
+            this.inner.ctrl.setAttrObj({ disabled: 'disabled' });
+            this.inner.ctrl.setStyleObj({
                 // color: var(--el-disabled-text-color),
                 color: var_1.$textColor.disabled,
                 // -webkit-text-fill-color: var(--el-disabled-text-color),
-                '-webkit-text-fill-color': var_1.$textColor.disabled,
-                cursor: framework_1.StyleCursor.notAllowed
+                WebkitTextFillColor: var_1.$textColor.disabled,
+                cursor: 'notAllowed'
             });
         }
         else {
-            this.inner.removeAttribute('disabled');
-            this.inner.setStyleObj({
+            this.inner.ctrl.removeAttribute('disabled');
+            this.inner.ctrl.setStyleObj({
                 // color: var(--el-text-color),
                 color: var_1.$textColor.regular,
                 // -webkit-text-fill-color: var(--el-text-color),
-                '-webkit-text-fill-color': var_1.$textColor.regular,
-                cursor: framework_1.StyleCursor.text
+                WebkitTextFillColor: var_1.$textColor.regular,
+                cursor: 'text'
             });
         }
     }
@@ -228,32 +227,30 @@ class TdInputWrapper extends framework_1.TypeDiv {
     setShowClear(showClear) {
         var _a;
         console.log('setShowClear . showClear is ', showClear);
-        this.suffix.show(this.suffixVisible ? framework_1.StyleDisplay.inlineFlex : framework_1.StyleDisplay.none);
-        (_a = this.suffix.clearIcon) === null || _a === void 0 ? void 0 : _a.show(showClear ? framework_1.StyleDisplay.inlineFlex : framework_1.StyleDisplay.none);
+        this.suffix.ctrl.show(this.suffixVisible ? 'inline-flex' : 'none');
+        (_a = this.suffix.clearIcon) === null || _a === void 0 ? void 0 : _a.ctrl.show(showClear ? 'inline-flex' : 'none');
     }
     setShowPassword(showPassword) {
         var _a;
-        (_a = this.suffix.passwordIcon) === null || _a === void 0 ? void 0 : _a.show(showPassword ? framework_1.StyleDisplay.inlineFlex : framework_1.StyleDisplay.none);
+        (_a = this.suffix.passwordIcon) === null || _a === void 0 ? void 0 : _a.ctrl.show(showPassword ? 'inline-flex' : 'none');
     }
     setNativeInputValue() {
-        var _a;
         console.log('setNativeInputValue . ');
         const input = this.inner;
-        const formatterValue = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.formatter)
-            ? this.config.formatter(this.nativeInputValue)
+        const formatterValue = this.props.formatter
+            ? this.props.formatter(this.nativeInputValue)
             : this.nativeInputValue;
         if (!input || input.value === formatterValue)
             return;
         input.setValue(formatterValue);
     }
     handleInput(event, element) {
-        var _a, _b, _c, _d;
         console.log('input . this is ', this);
         const [recordCursor, setCursor] = (0, framework_1.useCursor)(element === null || element === void 0 ? void 0 : element.dom);
         recordCursor();
         let { value } = event === null || event === void 0 ? void 0 : event.target;
-        if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.formatter) {
-            value = ((_b = this.config) === null || _b === void 0 ? void 0 : _b.parser) ? this.config.parser(value) : value;
+        if (this.props.formatter) {
+            value = this.props.parser ? this.props.parser(value) : value;
             console.log('parser value is ', value);
         }
         // should not emit input during composition
@@ -275,10 +272,10 @@ class TdInputWrapper extends framework_1.TypeDiv {
         this.setNativeInputValue();
         setCursor();
         console.log('handleInput then setShowClear . ');
-        if ((_c = this.config) === null || _c === void 0 ? void 0 : _c.clearable) {
+        if (this.props.clearable) {
             this.setShowClear(this.showClear);
         }
-        if ((_d = this.config) === null || _d === void 0 ? void 0 : _d.showPassword) {
+        if (this.props.showPassword) {
             this.setShowPassword(this.showPwdVisible);
         }
     }