@type-dom/ui 0.0.10 → 0.1.1

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

@@ -0,0 +1,21 @@
+import { TdInputProps } from './td-input.interface';
+export type InputAutoSize = {
+    minRows?: number;
+    maxRows?: number;
+} | boolean;
+export declare const inputProps: TdInputProps;
+export declare const inputEmits: {
+    "update:modelValue": (value: string) => boolean;
+    input: (value: string) => boolean;
+    change: (value: string) => boolean;
+    focus: (evt: FocusEvent) => boolean;
+    blur: (evt: FocusEvent) => boolean;
+    clear: () => boolean;
+    mouseleave: (evt: MouseEvent) => boolean;
+    mouseenter: (evt: MouseEvent) => boolean;
+    keydown: (evt: KeyboardEvent | Event) => boolean;
+    compositionstart: (evt: CompositionEvent) => boolean;
+    compositionupdate: (evt: CompositionEvent) => boolean;
+    compositionend: (evt: CompositionEvent) => boolean;
+};
+export type InputEmits = typeof inputEmits;

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputEmits = exports.inputProps = void 0;
+const utils_1 = require("@type-dom/utils");
+const event_1 = require("../../../constants/event");
+exports.inputProps = {
+    modelValue: '',
+    type: 'text',
+    autosize: false,
+    autocomplete: 'off',
+    tabindex: 0,
+    validateEvent: true,
+    rows: 2,
+    // ...useAriaProps(['ariaLabel']),
+};
+exports.inputEmits = {
+    [event_1.UPDATE_MODEL_EVENT]: (value) => (0, utils_1.isString)(value),
+    input: (value) => (0, utils_1.isString)(value),
+    change: (value) => (0, utils_1.isString)(value),
+    focus: (evt) => evt instanceof FocusEvent,
+    blur: (evt) => evt instanceof FocusEvent,
+    clear: () => true,
+    mouseleave: (evt) => evt instanceof MouseEvent,
+    mouseenter: (evt) => evt instanceof MouseEvent,
+    // NOTE: when autofill by browser, the keydown event is instanceof Event, not KeyboardEvent
+    // relative bug report https://github.com/element-plus/element-plus/issues/6665
+    keydown: (evt) => evt instanceof Event,
+    compositionstart: (evt) => evt instanceof CompositionEvent,
+    compositionupdate: (evt) => evt instanceof CompositionEvent,
+    compositionend: (evt) => evt instanceof CompositionEvent,
+};

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

@@ -1,11 +1,16 @@
-import { IJsonDataProp, InputEnum, IObDataProp, Span, TypeSvgSvg } from '@type-dom/framework';
-import { ISize } from '../../../styles/size';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { InputEnum, ITypeDiv, TypeDivProps, Span, TypeSvgSvg } from '@type-dom/framework';
+import { Computed, MaybeRef, Signal } from '@type-dom/signals';
+import { IStyle } from '@type-dom/css-type';
+import { ComponentSize } from '../../../constants/size';
 import { TdInput } from './td-input.class';
-export interface ITdInput extends IUI {
+export interface ITdInput extends ITypeDiv {
     className: 'TdInput';
 }
-export interface ITdInputConfig extends IUIConfig {
+export type InputAutoSize = {
+    minRows?: number;
+    maxRows?: number;
+} | boolean;
+export interface TdInputProps extends TypeDivProps {
     parent?: TdInput;
     /**
      * @description native input id
@@ -14,15 +19,15 @@ export interface ITdInputConfig extends IUIConfig {
     /**
      * @description input box size
      */
-    size?: ISize;
+    size?: ComponentSize;
     /**
      * @description whether to disable
      */
-    disabled?: boolean;
+    disabled?: MaybeRef<boolean>;
     /**
      * @description binding value
      */
-    modelValue?: IJsonDataProp;
+    modelValue?: string | number;
     /**
      * @description same as `maxlength` in native input
      */
@@ -44,7 +49,7 @@ export interface ITdInputConfig extends IUIConfig {
      * @description whether textarea has an adaptive height
      *     default: false,
      */
-    autosize?: boolean;
+    autosize?: InputAutoSize;
     /**
      * @description native input autocomplete
      *     default: 'off',
@@ -61,7 +66,7 @@ export interface ITdInputConfig extends IUIConfig {
     /**
      * @description placeholder
      */
-    placeholder?: IObDataProp;
+    placeholder?: string | Signal<string> | Computed<string>;
     /**
      * @description native input form
      */
@@ -117,11 +122,14 @@ export interface ITdInputConfig extends IUIConfig {
     /**
      * @description input or textarea element style
      */
+    inputStyle?: IStyle;
     /**
      * @description native input autofocus
      *     default: false,
      */
     autofocus?: boolean;
+    rows?: number;
+    vModel?: Signal<string> | Computed<string>;
     prepend?: boolean;
     append?: boolean;
     prefix?: Span;
@@ -129,18 +137,5 @@ 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/td-input.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.$inputInnerHeight = exports.$inputTextColor = exports.$wrapperPadding = exports.$inputPaddingHorizontal = exports.$inputNumberWidth = exports.$inputLineHeight = exports.$inputHeight = exports.$inputFontSize = exports.$inputDisabled = exports.$input = void 0;
 const var_1 = require("../../../styles/var");
 // Input
-// css3 var in packages/theme-chalk/src/input.scss
+// css3 var in packages/theme-chalk/input.scss
 exports.$input = {
     textColor: var_1.$textColor.regular,
     // 'border': $border, // getCssVar('border'),
@@ -18,30 +18,30 @@ exports.$input = {
     hoverBorderColor: var_1.$borderColorHover, // getCssVar('border-color-hover'),
     clearHoverColor: var_1.$textColor.secondary, // getCssVar('text-color-secondary'),
     focusBorderColor: var_1.$colors.primary.base, // getCssVar('color-primary'),
-    width: '100%'
+    width: '100%',
 };
 exports.$inputDisabled = {
     fill: var_1.$disabled.bgColor,
     border: var_1.$disabled.borderColor,
     textColor: var_1.$disabled.textColor,
-    placeholderColor: var_1.$textColor.placeholder
+    placeholderColor: var_1.$textColor.placeholder,
 };
 exports.$inputFontSize = {
     large: '14px',
     default: '14px',
-    small: '12px'
+    small: '12px',
 };
 exports.$inputHeight = var_1.$commonComponentSize;
 exports.$inputLineHeight = var_1.$commonComponentSize;
 exports.$inputNumberWidth = {
     large: '180px',
     default: '150px',
-    small: '120px'
+    small: '120px',
 };
 exports.$inputPaddingHorizontal = {
     large: '16px',
     default: '12px',
-    small: '8px'
+    small: '8px',
 };
 exports.$wrapperPadding = {
     large: var_1.$borderWidth +
@@ -58,7 +58,7 @@ exports.$wrapperPadding = {
         ' ' +
         (parseFloat(exports.$inputPaddingHorizontal.small.slice(0, -2)) -
             parseFloat(var_1.$borderWidth.slice(0, -2))) +
-        'px'
+        'px',
 };
 exports.$inputTextColor = var_1.$textColor.primary;
 exports.$inputInnerHeight = parseFloat(var_1.$commonComponentSize.default.slice(0, -2)) -

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

@@ -1,10 +1,10 @@
 import { TypeSpan } from '@type-dom/framework';
-import { ITdInputConfig } from '../td-input.interface';
+import { TdInputProps } from '../td-input.interface';
 import { TdInputWrapper } from './td-input-wrapper.class';
 export declare class TdInputPrefix extends TypeSpan {
     className: 'TdInputPrefix';
     parent: TdInputWrapper;
     private prefixInner;
     private prefixIcon?;
-    constructor(parent: TdInputWrapper, config?: ITdInputConfig);
+    constructor(parent: TdInputWrapper, config?: TdInputProps);
 }

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

@@ -23,38 +23,38 @@ class TdInputPrefix extends framework_1.TypeSpan {
             color: td_input_style_1.$input.iconColor,
             // transition: all getCssVar('transition-duration'),
             transition: 'all 0.3s',
-            pointerEvents: 'none'
+            pointerEvents: 'none',
         });
         this.prefixInner = new framework_1.Span({
             attrObj: {
-                name: 'prefix-inner'
+                name: 'prefix-inner',
             },
             styleObj: {
                 pointerEvents: 'all',
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-                marginRight: '8px'
-            }
+                marginRight: '8px',
+            },
         });
         this.addChild(this.prefixInner);
         if (config === null || config === void 0 ? void 0 : config.prefixIcon) {
             this.prefixIcon = new td_icon_class_1.TdIcon({
-                svgObj: config.prefixIcon,
+                slot: config.prefixIcon,
                 attrObj: {
-                    name: 'prefix-icon'
+                    name: 'prefix-icon',
                 },
                 styleObj: {
                     display: 'inline-flex',
-                    fontSize: td_input_style_1.$inputFontSize[(config === null || config === void 0 ? void 0 : config.size) || 'default']
+                    fontSize: td_input_style_1.$inputFontSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
                     // cursor: 'pointer',
                 },
                 events: {
                     click: (evt, icon) => {
                         console.log('prefixIcon click . ');
                         this.parent.inner.focus();
-                    }
-                }
+                    },
+                },
             });
             this.prefixInner.addChild(this.prefixIcon);
         }

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 { TdInputProps } from '../td-input.interface';
 import { TdInputWrapper } from './td-input-wrapper.class';
 export declare class TdInputSuffix extends TypeSpan {
     className: 'TdInputSuffix';
@@ -9,5 +9,6 @@ export declare class TdInputSuffix extends TypeSpan {
     private suffixIcon?;
     clearIcon?: TdIcon;
     passwordIcon?: TdIcon;
-    constructor(parent: TdInputWrapper, config?: ITdInputConfig);
+    constructor(parent: TdInputWrapper, config?: TdInputProps);
+    setup(): void;
 }

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

@@ -11,7 +11,7 @@ class TdInputSuffix extends framework_1.TypeSpan {
         this.parent = parent;
         this.className = 'TdInputSuffix';
         this.style.addObj({
-            display: this.parent.suffixVisible ? 'inline-flex' : 'none',
+            display: 'inline-flex',
             whiteSpace: 'nowrap',
             flexShrink: 0,
             flexWrap: 'nowrap',
@@ -24,31 +24,31 @@ class TdInputSuffix extends framework_1.TypeSpan {
             color: td_input_style_1.$input.iconColor,
             // transition: all getCssVar('transition-duration'),
             transition: 'all 0.3s',
-            pointerEvents: 'none'
+            pointerEvents: 'none',
         });
         this.suffixInner = new framework_1.Span({
             attrObj: {
-                name: 'suffix-inner'
+                name: 'suffix-inner',
             },
             styleObj: {
                 pointerEvents: 'all',
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-                marginLeft: '8px'
-            }
+                marginLeft: '8px',
+            },
         });
         this.addChild(this.suffixInner);
         if (config === null || config === void 0 ? void 0 : config.clearable) {
             this.clearIcon = new td_icon_class_1.TdIcon({
-                svgObj: new svgs_1.ElCircleCloseSvg(),
+                slot: new svgs_1.ElCircleCloseSvg(),
                 attrObj: {
-                    name: 'suffix-icon'
+                    name: 'suffix-icon',
                 },
                 styleObj: {
                     display: 'none',
                     fontSize: td_input_style_1.$inputFontSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
-                    cursor: 'pointer'
+                    cursor: 'pointer',
                 },
                 events: {
                     click: (evt, icon) => {
@@ -60,18 +60,18 @@ class TdInputSuffix extends framework_1.TypeSpan {
                     mousedown: (evt, icon) => {
                         console.log('mousedown, icon is ', icon);
                         evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                    }
-                }
+                    },
+                },
             });
             this.suffixInner.addChild(this.clearIcon);
         }
         if (config === null || config === void 0 ? void 0 : config.showPassword) {
             this.passwordIcon = new td_icon_class_1.TdIcon({
-                svgObj: new svgs_1.ElHideSvg(),
+                slot: 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: 'pointer'
+                    cursor: 'pointer',
                 },
                 events: {
                     click: () => {
@@ -81,40 +81,45 @@ class TdInputSuffix extends framework_1.TypeSpan {
                         (_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.attr.setObj({
-                                type: 'text'
+                                type: 'text',
                             });
                         }
                         else {
                             this.parent.inner.attr.setObj({
-                                type: 'password'
+                                type: 'password',
                             });
                         }
                         this.parent.inner.focus();
-                    }
-                }
+                    },
+                },
             });
             this.suffixInner.addChild(this.passwordIcon);
         }
         if (config === null || config === void 0 ? void 0 : config.suffixIcon) {
             this.suffixIcon = new td_icon_class_1.TdIcon({
-                svgObj: config.suffixIcon,
+                slot: config.suffixIcon,
                 attrObj: {
-                    name: 'suffix-icon'
+                    name: 'suffix-icon',
                 },
                 styleObj: {
                     display: 'inline-flex',
-                    fontSize: td_input_style_1.$inputFontSize[(config === null || config === void 0 ? void 0 : config.size) || 'default']
+                    fontSize: td_input_style_1.$inputFontSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
                     // cursor: 'pointer',
                 },
                 events: {
                     click: (evt, icon) => {
                         console.log('suffixIcon click . ');
                         this.parent.inner.focus();
-                    }
-                }
+                    },
+                },
             });
             this.suffixInner.addChild(this.suffixIcon);
         }
     }
+    setup() {
+        this.style.addObj({
+            display: this.parent.suffixVisible ? 'inline-flex' : 'none', // constructor 中this.parent.suffixVisible是undefined
+        });
+    }
 }
 exports.TdInputSuffix = TdInputSuffix;

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

@@ -1,12 +1,12 @@
 import { Div, Input, TypeDiv, TypeElement } from '@type-dom/framework';
 import { TdInput } from '../td-input.class';
-import { ITdInputConfig } from '../td-input.interface';
+import { TdInputProps } from '../td-input.interface';
 import { ITdInputWrapper } from './td-input-wrapper.interface';
 import { TdInputSuffix } from './suffix';
 import { TdInputPrefix } from './prefix';
 export declare class TdInputWrapper extends TypeDiv implements ITdInputWrapper {
     className: 'TdInputWrapper';
-    props: ITdInputConfig;
+    props: TdInputProps;
     parent?: TdInput;
     prepend?: Div;
     append?: Div;
@@ -18,7 +18,7 @@ export declare class TdInputWrapper extends TypeDiv implements ITdInputWrapper {
     private isWordLimitVisible?;
     private validateState?;
     private needStatusIcon?;
-    constructor(params?: ITdInputConfig);
+    constructor(params?: TdInputProps);
     setup(): void;
     get suffixVisible(): boolean;
     get showClear(): boolean | undefined;

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

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdInputWrapper = void 0;
 const framework_1 = require("@type-dom/framework");
-const use_cursor_1 = require("../../../../hooks/use-cursor");
 const var_1 = require("../../../../styles/var");
 const td_input_style_1 = require("../td-input.style");
 const suffix_1 = require("./suffix");
 const prefix_1 = require("./prefix");
+const signals_1 = require("@type-dom/signals");
 class TdInputWrapper extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
@@ -35,13 +35,14 @@ class TdInputWrapper extends framework_1.TypeDiv {
             borderRadius: td_input_style_1.$input.borderRadius,
             //   transition: getCssVar('transition-box-shadow'),
             //       transition: var(--el-transition-box-shadow),
-            boxShadow: '0 0 0 1px ' + td_input_style_1.$input.borderColor + ' inset'
+            boxShadow: '0 0 0 1px ' + td_input_style_1.$input.borderColor + ' inset',
         });
         this.prefix = new prefix_1.TdInputPrefix(this, params);
         this.unshiftChild(this.prefix);
         let placeholder = '';
-        if ((params === null || params === void 0 ? void 0 : params.placeholder) instanceof framework_1.XProxy) {
-            placeholder = params.placeholder.value;
+        if ((params === null || params === void 0 ? void 0 : params.placeholder) instanceof signals_1.Signal ||
+            (params === null || params === void 0 ? void 0 : params.placeholder) instanceof signals_1.Computed) {
+            placeholder = params.placeholder.get();
         }
         else if (params === null || params === void 0 ? void 0 : params.placeholder) {
             placeholder = params.placeholder;
@@ -53,7 +54,7 @@ class TdInputWrapper extends framework_1.TypeDiv {
                         ? 'text'
                         : 'password'
                     : params === null || params === void 0 ? void 0 : params.type,
-                placeholder: placeholder
+                placeholder: placeholder,
             },
             styleObj: {
                 width: '100%',
@@ -73,7 +74,7 @@ class TdInputWrapper extends framework_1.TypeDiv {
                 //   height: getCssVar('input-inner-height');
                 height: td_input_style_1.$inputInnerHeight,
                 //   line-height: getCssVar('input-inner-height');
-                lineHeight: td_input_style_1.$inputInnerHeight
+                lineHeight: td_input_style_1.$inputInnerHeight,
             },
             events: {
                 compositionstart: () => {
@@ -93,14 +94,12 @@ class TdInputWrapper extends framework_1.TypeDiv {
                 },
                 input: (event, element) => this.handleInput(event, element),
                 focus: (i) => {
-                    var _a;
                     console.log('td-input focus . this.parent is ', this.parent);
-                    (_a = this.parent) === null || _a === void 0 ? void 0 : _a.setFocus(true);
+                    // this.parent?.setFocus(true);
                 },
                 blur: () => {
-                    var _a;
                     console.log('blur . ');
-                    (_a = this.parent) === null || _a === void 0 ? void 0 : _a.setFocus(false);
+                    // this.parent?.setFocus(false);
                     if (this.props.clearable) {
                         this.setShowClear(this.showClear);
                     }
@@ -113,8 +112,8 @@ class TdInputWrapper extends framework_1.TypeDiv {
                 },
                 keydown: () => {
                     console.log('keydown . ');
-                }
-            }
+                },
+            },
         });
         this.addChild(this.inner);
         this.suffix = new suffix_1.TdInputSuffix(this, params);
@@ -130,11 +129,11 @@ class TdInputWrapper extends framework_1.TypeDiv {
             this.style.addObj({
                 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']
+                height: td_input_style_1.$inputHeight[props.size || 'default'],
             });
         }
         if (props === null || props === void 0 ? void 0 : props.disabled) {
-            this.setDisabled(props.disabled);
+            this.setDisabled((0, signals_1.unref)(props.disabled));
         }
         this.setNativeInputValue();
     }
@@ -147,7 +146,6 @@ class TdInputWrapper extends framework_1.TypeDiv {
             (!!this.validateState && this.needStatusIcon));
     }
     get showClear() {
-        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);
@@ -157,22 +155,27 @@ class TdInputWrapper extends framework_1.TypeDiv {
         return (this.props.clearable &&
             !this.props.disabled &&
             !this.props.readonly &&
-            !!this.nativeInputValue &&
-            (((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isFocused) || ((_b = this.parent) === null || _b === void 0 ? void 0 : _b.hovering)));
+            !!this.nativeInputValue // &&
+        // (this.parent?.isFocused || this.parent?.hovering)
+        );
     }
     get showPwdVisible() {
-        var _a;
         return (this.props.showPassword &&
             !this.props.disabled &&
             !this.props.readonly &&
-            !!this.nativeInputValue &&
-            (!!this.nativeInputValue || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isFocused)));
+            !!this.nativeInputValue
+        // &&
+        // (!!this.nativeInputValue || this.parent?.isFocused)
+        );
     }
     get nativeInputValue() {
-        return this.inner.dom.value || '';
+        var _a;
+        return ((_a = this.inner.dom) === null || _a === void 0 ? void 0 : _a.value) || '';
     }
     set nativeInputValue(value) {
-        this.inner.dom.value = value;
+        if (this.inner.dom) {
+            this.inner.dom.value = value;
+        }
     }
     setDisabled(disabled) {
         if (disabled) {
@@ -182,7 +185,7 @@ class TdInputWrapper extends framework_1.TypeDiv {
                 color: var_1.$textColor.disabled,
                 // -webkit-text-fill-color: var(--el-disabled-text-color),
                 WebkitTextFillColor: var_1.$textColor.disabled,
-                cursor: 'notAllowed'
+                cursor: 'not-allowed',
             });
         }
         else {
@@ -192,7 +195,7 @@ class TdInputWrapper extends framework_1.TypeDiv {
                 color: var_1.$textColor.regular,
                 // -webkit-text-fill-color: var(--el-text-color),
                 WebkitTextFillColor: var_1.$textColor.regular,
-                cursor: 'text'
+                cursor: 'text',
             });
         }
     }
@@ -226,14 +229,14 @@ class TdInputWrapper extends framework_1.TypeDiv {
     //   }
     // }
     setShowClear(showClear) {
-        var _a;
+        var _a, _b, _c;
         console.log('setShowClear . showClear is ', showClear);
         this.suffix.style.show(this.suffixVisible ? 'inline-flex' : 'none');
-        (_a = this.suffix.clearIcon) === null || _a === void 0 ? void 0 : _a.style.show(showClear ? 'inline-flex' : 'none');
+        (_c = (_b = (_a = this.suffix) === null || _a === void 0 ? void 0 : _a.clearIcon) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.show(showClear ? 'inline-flex' : 'none');
     }
     setShowPassword(showPassword) {
-        var _a;
-        (_a = this.suffix.passwordIcon) === null || _a === void 0 ? void 0 : _a.style.show(showPassword ? 'inline-flex' : 'none');
+        var _a, _b;
+        (_b = (_a = this.suffix.passwordIcon) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.show(showPassword ? 'inline-flex' : 'none');
     }
     setNativeInputValue() {
         console.log('setNativeInputValue . ');
@@ -247,8 +250,8 @@ class TdInputWrapper extends framework_1.TypeDiv {
     }
     handleInput(event, element) {
         console.log('input . this is ', this);
-        const [recordCursor, setCursor] = (0, use_cursor_1.useCursor)(element === null || element === void 0 ? void 0 : element.dom);
-        recordCursor();
+        // const [recordCursor, setCursor] = useCursor(element?.dom);
+        // recordCursor();
         let { value } = event === null || event === void 0 ? void 0 : event.target;
         if (this.props.formatter) {
             value = this.props.parser ? this.props.parser(value) : value;
@@ -271,7 +274,7 @@ class TdInputWrapper extends framework_1.TypeDiv {
         // await nextTick()
         this.nativeInputValue = value;
         this.setNativeInputValue();
-        setCursor();
+        // setCursor();
         console.log('handleInput then setShowClear . ');
         if (this.props.clearable) {
             this.setShowClear(this.showClear);

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

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