@type-dom/ui 0.6.0 → 0.9.0

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

@@ -1,74 +1,83 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { isClient, debugWarn, isNil, isObject, NOOP } from '@type-dom/utils';
-import { Div, Fragment, Input, Span, Textarea, TypeDiv, useAttrs as useRawAttrs, defineExpose, nextTick, onMounted, useResizeObserver, useSlots, } from '@type-dom/framework';
-import { computed, signal, toRef, unref, watch, } from '@type-dom/signals';
-import { ElCircleCloseSvg, ElHideSvg, ElViewSvg, ValidateComponentsMap, } from '@type-dom/svgs';
+import { Div, Fragment, Input, Span, Textarea, CommentNode, useAttrs as useRawAttrs, nextTick, onMounted, useSlots, toRef, unref, watch, addEmits, addEvents, addAttrClass, addAttrObj, addStyleObj, defaultProps, } from '@type-dom/framework';
+import { useResizeObserver } from '@type-dom/use';
+import { isNil, NOOP, looseToNumber } from '@type-dom/utils';
+import { computed, signal } from '@type-dom/signals';
+import { ElCircleCloseSvg, ElHideSvg, ElViewSvg, } from '@type-dom/svgs';
+import { isClient, debugWarn, isObject } from '@type-dom/utils';
 import { CHANGE_EVENT, INPUT_EVENT, UPDATE_MODEL_EVENT } from '../../../constants/event';
-// import { useAttrs } from '../../../hooks/use-attrs';
+import { ValidateComponentsMap } from '../../../utils/icon';
 import { useFocusController } from '../../../hooks/use-focus-controller/index';
 import { useComposition } from '../../../hooks/use-composition';
 import { useNamespace } from '../../../hooks/use-namespace';
 import { useCursor } from '../../../hooks/use-cursor';
+// import { useAttrs } from '../../../hooks/use-attrs';
 import { TdIcon } from '../../basic/td-icon/td-icon.class';
-import { useFormItem, useFormItemInputId, } from '../td-form/hooks/use-form-item';
-import { useFormDisabled, useFormSize, } from '../td-form/hooks/use-form-common-props';
+import { useFormItem, useFormItemInputId } from '../td-form/hooks/use-form-item';
+import { useFormDisabled, useFormSize } from '../td-form/hooks/use-form-common-props';
 import { calcTextareaHeight } from './utils';
 import { inputEmits, inputProps } from './td-input.const';
 import './style/index';
-export class TdInput extends TypeDiv {
+export class TdInput extends Div {
+    input;
+    textarea;
+    ref;
+    textareaStyle;
+    autosize;
+    isComposing;
+    focus;
+    blur;
+    select;
+    clear;
+    resizeTextarea;
     constructor(params = {}) {
-        super();
         // console.log('TdInput constructor . ');
-        this.className = 'TdInput';
-        this.attr.addObj({
-            name: 'td-input',
-        });
-        this.addEmits(inputEmits);
-        this.assignProps(inputProps);
-        this.props = this.useParams(params);
+        super(params);
+        defaultProps(this, inputProps);
+        addEmits(this, inputEmits);
+        if (!params.vModel) {
+            params.vModel = signal(inputProps.modelValue);
+        }
     }
     setup() {
-        var _a, _b;
+        // const COMPONENT_NAME = 'TdInput'
         const props = this.props;
         const emit = this.emit;
         const rawAttrs = useRawAttrs();
         // const attrs = useAttrs();
+        // console.warn('attrs is ', attrs);
         const slots = useSlots();
         const containerKls = computed(() => [
             props.type === 'textarea' ? nsTextarea.b() : nsInput.b(),
             nsInput.m(inputSize.get()),
             nsInput.is('disabled', inputDisabled.get()),
             nsInput.is('exceed', inputExceed.get()),
-            // todo object type
             {
-                [nsInput.b('group')]: (slots === null || slots === void 0 ? void 0 : slots.prepend) || (slots === null || slots === void 0 ? void 0 : slots.append),
-                [nsInput.m('prefix')]: (slots === null || slots === void 0 ? void 0 : slots.prefix) || props.prefixIcon,
-                [nsInput.m('suffix')]: (slots === null || slots === void 0 ? void 0 : slots.suffix) ||
+                [nsInput.b('group')]: slots?.prepend || slots?.append,
+                [nsInput.m('prefix')]: slots?.prefix || props.prefixIcon,
+                // 对齐 Element Plus input.vue 的 containerKls：根元素的 --suffix 仅由
+                // suffix 插槽 / suffixIcon / clearable / showPassword 决定，
+                // 不含 isWordLimitVisible。word-limit 通过 suffixVisible 驱动插槽内容，
+                // 但不会给根元素（含 textarea 根）加类——多加了会在 showWordLimit 时
+                // 比 EP 多出 td-input--suffix。
+                [nsInput.m('suffix')]: slots?.suffix ||
                     props.suffixIcon ||
                     props.clearable ||
                     props.showPassword,
                 [nsInput.bm('suffix', 'password-clear')]: showClear.get() && showPwdVisible.get(),
                 [nsInput.b('hidden')]: props.type === 'hidden',
             },
-            rawAttrs === null || rawAttrs === void 0 ? void 0 : rawAttrs.class,
-        ]);
-        const wrapperKls = computed(() => [
-            nsInput.e('wrapper'),
-            nsInput.is('focus', isFocused.get()),
+            rawAttrs?.class,
         ]);
-        const { form: elForm, formItem: elFormItem } = useFormItem();
+        const wrapperKls = computed(() => [nsInput.e('wrapper'), nsInput.is('focus', isFocused.get())]);
+        const { form: tdForm, formItem: tdFormItem } = useFormItem();
         const { inputId } = useFormItemInputId(props, {
-            formItemContext: elFormItem,
+            formItemContext: tdFormItem,
         });
-        const inputSize = useFormSize();
+        // Reflect the input id on the TdInput root element so the form-item label
+        // `for` (which references this id) and the accessible element resolved via
+        // a `data-test-ref` on the root stay in sync.
+        addAttrObj(this, { id: inputId });
+        const inputSize = useFormSize(props.size);
         const inputDisabled = useFormDisabled();
         const nsInput = useNamespace('input');
         const nsTextarea = useNamespace('textarea');
@@ -81,53 +90,51 @@ export class TdInput extends TypeDiv {
         const _ref = computed(() => input.get() || textarea.get());
         // wrapperRef for type="text", handleFocus and handleBlur for type="textarea"
         const { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(_ref, {
-            beforeFocus() {
-                return inputDisabled.get();
-            },
+            disabled: inputDisabled,
             afterBlur() {
-                var _a;
                 if (props.validateEvent) {
-                    (_a = elFormItem === null || elFormItem === void 0 ? void 0 : elFormItem.validate) === null || _a === void 0 ? void 0 : _a.call(elFormItem, 'blur').catch((err) => debugWarn(err));
+                    tdFormItem?.validate?.('blur').catch((err) => debugWarn(err));
                 }
             },
         });
         // console.warn('wrapperRef is ', wrapperRef);
-        const needStatusIcon = computed(() => { var _a; return (_a = elForm === null || elForm === void 0 ? void 0 : elForm.statusIcon) !== null && _a !== void 0 ? _a : false; });
-        const validateState = computed(() => unref(elFormItem === null || elFormItem === void 0 ? void 0 : elFormItem.validateState) || '');
+        const needStatusIcon = computed(() => tdForm?.statusIcon ?? false);
+        const validateState = computed(() => tdFormItem?.validateState.get());
         const validateIcon = computed(() => validateState.get() &&
             ValidateComponentsMap[validateState.get()]);
-        const passwordIcon = computed(() => passwordVisible.get() ? new ElViewSvg() : new ElHideSvg());
-        const containerStyle = computed(() => [
-            rawAttrs === null || rawAttrs === void 0 ? void 0 : rawAttrs.style,
-        ]);
+        const passwordIcon = () => (passwordVisible.get() ? new ElViewSvg() : new ElHideSvg());
+        const containerStyle = computed(() => [rawAttrs?.style]);
         const textareaStyle = computed(() => [
             props.inputStyle,
             textareaCalcStyle.get(),
             {
                 resize: props.resize,
-            }
+            },
         ]);
-        const nativeInputValue = computed(() => { var _a, _b; return isNil((_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get()) ? '' : String((_b = props.vModel) === null || _b === void 0 ? void 0 : _b.get()); });
+        const nativeInputValue = computed(() => isNil(props.vModel?.get()) ? '' : String(props.vModel?.get()));
         const showClear = computed(() => props.clearable &&
             !inputDisabled.get() &&
             !props.readonly &&
             !!nativeInputValue.get() &&
             (isFocused.get() || hovering.get()));
-        const showPwdVisible = computed(() => props.showPassword &&
-            !inputDisabled.get() &&
-            !!nativeInputValue.get() &&
-            (!!nativeInputValue.get() || isFocused.get()));
-        const isWordLimitVisible = computed(() => props.showWordLimit &&
-            !!props.maxlength &&
-            (props.type === 'text' || props.type === 'textarea') &&
-            !inputDisabled.get() &&
-            !props.readonly &&
-            !props.showPassword);
-        const textLength = computed(() => nativeInputValue.get().length);
+        const showPwdVisible = computed(() => {
+            // console.warn('showPwdVisible is ', props.showPassword);
+            return props.showPassword && !inputDisabled.get() && !!nativeInputValue.get();
+        });
+        const isWordLimitVisible = computed(() => {
+            // console.warn('isWordLimitVisible is ', props.showWordLimit);
+            return (props.showWordLimit &&
+                !!props.maxlength &&
+                (props.type === 'text' || props.type === 'textarea') &&
+                !inputDisabled.get() &&
+                !props.readonly &&
+                !props.showPassword);
+        });
+        const textLength = computed(() => nativeInputValue.get()?.length);
         const inputExceed = computed(() => 
         // show exceed style if length of initial value greater then maxlength
         !!isWordLimitVisible.get() && textLength.get() > Number(props.maxlength));
-        const suffixVisible = computed(() => !!(slots === null || slots === void 0 ? void 0 : slots.suffix) ||
+        const suffixVisible = computed(() => !!slots?.suffix ||
             !!props.suffixIcon ||
             showClear.get() ||
             props.showPassword ||
@@ -137,9 +144,8 @@ export class TdInput extends TypeDiv {
         const [recordCursor, setCursor] = useCursor(input);
         useResizeObserver(textarea, (entries) => {
             onceInitSizeTextarea();
-            if (!isWordLimitVisible.get() || props.resize !== 'both') {
+            if (!isWordLimitVisible.get() || props.resize !== 'both')
                 return;
-            }
             const entry = entries[0];
             const { width } = entry.contentRect;
             countStyle.set({
@@ -149,27 +155,24 @@ export class TdInput extends TypeDiv {
         });
         const resizeTextarea = () => {
             const { type, autosize } = props;
-            if (!isClient || type !== 'textarea' || !textarea.get()) {
+            if (!isClient || type !== 'textarea' || !textarea.get())
                 return;
-            }
             if (autosize) {
-                const minRows = isObject(autosize)
-                    ? autosize.minRows
-                    : undefined;
-                const maxRows = isObject(autosize)
-                    ? autosize.maxRows
-                    : undefined;
+                const minRows = isObject(autosize) ? autosize.minRows : undefined;
+                const maxRows = isObject(autosize) ? autosize.maxRows : undefined;
                 const textareaStyle = calcTextareaHeight(textarea.get(), minRows, maxRows);
                 // If the scrollbar is displayed, the height of the textarea needs more space than the calculated height.
                 // If set textarea height in this case, the scrollbar will not hide.
                 // So we need to hide scrollbar first, and reset it in preview tick.
                 // see https://github.com/element-plus/element-plus/issues/8825
-                textareaCalcStyle.set(Object.assign({ overflowY: 'hidden' }, textareaStyle));
+                textareaCalcStyle.set({
+                    overflowY: 'hidden',
+                    ...textareaStyle,
+                });
                 nextTick(() => {
-                    var _a;
                     // NOTE: Force repaint to make sure the style set above is applied.
                     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                    (_a = textarea.get()) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+                    textarea.get()?.offsetHeight;
                     textareaCalcStyle.set(textareaStyle);
                 });
             }
@@ -182,11 +185,9 @@ export class TdInput extends TypeDiv {
         const createOnceInitResize = (resizeTextarea) => {
             let isInit = false;
             return () => {
-                var _a;
-                if (isInit || !props.autosize) {
+                if (isInit || !props.autosize)
                     return;
-                }
-                const isElHidden = ((_a = textarea.get()) === null || _a === void 0 ? void 0 : _a.offsetParent) === null;
+                const isElHidden = textarea.get()?.offsetParent === null;
                 if (!isElHidden) {
                     resizeTextarea();
                     isInit = true;
@@ -197,28 +198,47 @@ export class TdInput extends TypeDiv {
         const onceInitSizeTextarea = createOnceInitResize(resizeTextarea);
         const setNativeInputValue = () => {
             // console.warn('setNativeInputValue . ');
-            const input = _ref.get();
-            const formatterValue = props.formatter
+            const inputEl = _ref.get(); // 不能 用 input
+            const modifiers = props.modelModifiers ?? {};
+            let formatterValue = props.formatter
                 ? props.formatter(nativeInputValue.get())
                 : nativeInputValue.get();
+            // number modifier / type=number: display the parsed number, same as element-plus
+            if (modifiers.number || props.type === 'number') {
+                formatterValue = `${looseToNumber(formatterValue)}`;
+            }
             // console.warn('formatterValue is ', formatterValue);
-            if (!input || input.value === formatterValue) {
+            // console.warn('inputEl is ', inputEl);
+            // todo nextTick时， input 的值会改变，导致 input.value === formatterValue 判断不成立。
+            // td-form.test.tsx 'should preserve form input after submit',  1597
+            if (!inputEl || inputEl.value === formatterValue) {
                 return;
             }
-            input.value = formatterValue;
+            inputEl.value = formatterValue;
         };
-        const handleInput = (event) => __awaiter(this, void 0, void 0, function* () {
+        const formatValue = (value) => {
+            // .trim / .number modifiers are applied by the framework when writing
+            // back `update:modelValue` (see componentEmits), matching Vue's behavior.
+            if (props.formatter && props.parser) {
+                return props.parser(value);
+            }
+            return value;
+        };
+        const handleInput = async (event) => {
             // console.warn('handleInput . event is ', event);
             recordCursor();
-            let { value } = event === null || event === void 0 ? void 0 : event.target;
-            if (props.formatter && props.parser) {
-                value = props.parser(value);
+            let { value } = event?.target;
+            // lazy modifier: only emit input event, defer model update to change
+            // reference: element-plus modelModifiers handling
+            if (props.modelModifiers?.lazy) {
+                emit(INPUT_EVENT, value);
+                return;
             }
+            value = formatValue(value);
             // should not emit input during composition
             // see: https://github.com/ElemeFE/element/issues/10516
-            if (isComposing.get()) {
+            if (isComposing.get())
                 return;
-            }
             // hack for https://github.com/ElemeFE/element/issues/8548
             // should remove the following line when we don't support IE
             if (value === nativeInputValue.get()) {
@@ -226,44 +246,49 @@ export class TdInput extends TypeDiv {
                 return;
             }
             emit(UPDATE_MODEL_EVENT, value);
-            // console.warn('then emit(INPUT_EVENT) , value is ', value);
+            // console.warn('then emit(this, INPUT_EVENT) , value is ', value);
             emit(INPUT_EVENT, value);
             // ensure native input value is controlled
             // see: https://github.com/ElemeFE/element/issues/12850
-            yield nextTick();
+            await nextTick();
             setNativeInputValue();
             setCursor();
-        });
+        };
         const handleChange = (event) => {
-            let { value } = event === null || event === void 0 ? void 0 : event.target;
-            if (props.formatter && props.parser) {
-                value = props.parser(value);
+            let { value } = event?.target;
+            value = formatValue(value);
+            // lazy modifier: model value is updated on change instead of input
+            // reference: element-plus modelModifiers handling
+            if (props.modelModifiers?.lazy) {
+                emit(UPDATE_MODEL_EVENT, value);
             }
             emit(CHANGE_EVENT, value);
         };
-        const { isComposing, handleCompositionStart, handleCompositionUpdate, handleCompositionEnd, } = useComposition({ emit: this.emit, afterComposition: handleInput });
+        const { isComposing, handleCompositionStart, handleCompositionUpdate, handleCompositionEnd } = useComposition({ emit: emit, afterComposition: handleInput });
         const handlePasswordVisible = () => {
             recordCursor();
             passwordVisible.set(!passwordVisible.get());
             // The native input needs a little time to regain focus
             setTimeout(setCursor);
         };
-        const focus = () => { var _a; return (_a = _ref.get()) === null || _a === void 0 ? void 0 : _a.focus(); };
-        const blur = () => { var _a; return (_a = _ref.get()) === null || _a === void 0 ? void 0 : _a.blur(); };
+        const focus = () => _ref.get()?.focus();
+        const blur = () => _ref.get()?.blur();
         const handleMouseLeave = (evt) => {
+            // console.warn('handleMouseLeave . ');
             hovering.set(false);
-            emit('mouseleave', evt); // todo 循环调用了
+            emit('mouseleave', evt);
         };
         const handleMouseEnter = (evt) => {
+            // console.warn('handleMouseEnter . evt is ', evt);
             hovering.set(true);
-            emit('mouseenter', evt); // todo 循环调用了
+            emit('mouseenter', evt);
         };
         const handleKeydown = (evt) => {
-            emit('keydown', evt); // todo 循环调用了
+            // console.warn('handleKeydown . evt is ', evt);
+            emit('keydown', evt);
         };
         const select = () => {
-            var _a;
-            (_a = _ref.get()) === null || _a === void 0 ? void 0 : _a.select();
+            _ref.get()?.select();
         };
         const clear = () => {
             // console.warn('clear . ');
@@ -272,25 +297,27 @@ export class TdInput extends TypeDiv {
             emit('clear');
             emit(INPUT_EVENT, '');
         };
-        watch(() => { var _a; return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get(); }, () => {
-            var _a;
+        watch(() => props.vModel?.get(), () => {
             nextTick(() => resizeTextarea());
             if (props.validateEvent) {
-                (_a = elFormItem === null || elFormItem === void 0 ? void 0 : elFormItem.validate) === null || _a === void 0 ? void 0 : _a.call(elFormItem, 'change').catch((err) => debugWarn(err));
+                tdFormItem?.validate?.('change').catch((err) => debugWarn(err));
             }
         });
         // native input value is set explicitly
         // do not use v-model / :value in template
         // see: https://github.com/ElemeFE/element/issues/14521
-        watch(() => nativeInputValue.get(), () => setNativeInputValue());
+        watch(nativeInputValue, () => {
+            // console.warn('watch nativeInputValue . ');
+            setNativeInputValue();
+        });
         // when change between <input> and <textarea>,
         // update DOM dependent value and styles
         // https://github.com/ElemeFE/element/issues/14857
-        watch(() => unref(props.type), () => __awaiter(this, void 0, void 0, function* () {
-            yield nextTick();
+        watch(() => unref(props.type), async () => {
+            await nextTick();
             setNativeInputValue();
             resizeTextarea();
-        }));
+        });
         onMounted(() => {
             if (!props.formatter && props.parser) {
                 debugWarn('TdInput', 'If you set the parser, you also need to set the formatter.');
@@ -298,64 +325,67 @@ export class TdInput extends TypeDiv {
             setNativeInputValue();
             nextTick(resizeTextarea);
         });
-        defineExpose({
-            /** @description HTML input element */
-            input,
-            /** @description HTML textarea element */
-            textarea,
-            /** @description HTML element, input or textarea */
-            ref: _ref,
-            /** @description style of textarea. */
-            textareaStyle,
-            /** @description from props (used on unit test-dts) */
-            autosize: toRef(props, 'autosize'),
-            /** @description is input composing */
-            isComposing,
-            /** @description HTML input element native method */
-            focus,
-            /** @description HTML input element native method */
-            blur,
-            /** @description HTML input element native method */
-            select,
-            /** @description clear input value */
-            clear,
-            /** @description resize textarea. */
-            resizeTextarea,
-        });
-        this.attr.addClass([
+        /** @description HTML input element */
+        this.input = input;
+        /** @description HTML textarea element */
+        this.textarea = textarea;
+        /** @description HTML element, input or textarea */
+        this.ref = _ref;
+        /** @description style of textarea. */
+        this.textareaStyle = textareaStyle;
+        /** @description from props (used on unit test-dts) */
+        this.autosize = toRef(props, 'autosize');
+        /** @description is input composing */
+        this.isComposing = isComposing;
+        /** @description HTML input element native method */
+        this.focus = focus;
+        /** @description HTML input element native method */
+        this.blur = blur;
+        /** @description HTML input element native method */
+        this.select = select;
+        /** @description clear input value */
+        this.clear = clear;
+        /** @description resize textarea. */
+        this.resizeTextarea = resizeTextarea;
+        addAttrClass(this, [
             containerKls,
             {
-                [nsInput.bm('group', 'append')]: (_a = props.slots) === null || _a === void 0 ? void 0 : _a.append,
-                [nsInput.bm('group', 'prepend')]: (_b = props.slots) === null || _b === void 0 ? void 0 : _b.prepend,
+                [nsInput.bm('group', 'append')]: props.slots?.append,
+                [nsInput.bm('group', 'prepend')]: props.slots?.prepend,
             },
         ]);
-        this.style.addObj(containerStyle);
-        this.addEvents({
+        addStyleObj(this, containerStyle);
+        addEvents(this, {
             mouseenter: handleMouseEnter,
             mouseleave: handleMouseLeave,
         });
-        // input
+        this.addChild(new CommentNode('input'));
+        // const attrObj = {}
+        // for (const key in props) {
+        //   if (key.startsWith('data-')) {
+        //     // 将以 data- 开头的属性添加到 attrObj 中
+        //     (attrObj as any)[key] = (props as any)[key];
+        //   }
+        // }
         if (props.type !== 'textarea') {
-            if (slots === null || slots === void 0 ? void 0 : slots.prepend) {
-                this.addChild(new Span({
-                    class: nsInput.be('group', 'prepend'),
-                    slot: slots.prepend,
-                }));
-            }
-            this.addChild(new Div({
+            this.addChildren(new CommentNode('prepend slot'), new Div({
+                vIf: slots?.prepend,
+                class: nsInput.be('group', 'prepend'),
+                slot: slots?.prepend,
+            }), new Div({
                 refDom: wrapperRef,
                 class: wrapperKls,
                 slot: [
-                    //  prefix slot
+                    new CommentNode('prefix slot'),
                     new Span({
-                        vIf: (slots === null || slots === void 0 ? void 0 : slots.prefix) || props.prefixIcon,
+                        vIf: slots?.prefix || props.prefixIcon,
                         class: nsInput.e('prefix'),
                         slot: [
                             new Span({
                                 class: nsInput.e('prefix-inner'),
                                 slot: [
                                     new Fragment({
-                                        slot: slots === null || slots === void 0 ? void 0 : slots.prefix
+                                        slot: slots?.prefix,
                                     }),
                                     new TdIcon({
                                         vIf: props.prefixIcon,
@@ -371,9 +401,15 @@ export class TdInput extends TypeDiv {
                         class: nsInput.e('inner'),
                         // v-bind="attrs" todo attr 到底对应什么 父组件的所有属性
                         attrObj: {
-                            id: inputId.get(),
+                            // ...attrs.get(),
+                            ...props.attrObj,
+                            name: props.name,
+                            id: inputId,
                             minlength: props.minlength,
                             maxlength: props.maxlength,
+                            min: props.min,
+                            max: props.max,
+                            step: props.step,
                             type: computed(() => props.showPassword
                                 ? passwordVisible.get()
                                     ? 'text'
@@ -388,18 +424,17 @@ export class TdInput extends TypeDiv {
                             form: props.form,
                             autofocus: props.autofocus,
                             role: props.containerRole,
+                            inputmode: props.inputmode,
                         },
                         styleObj: props.inputStyle,
-                        events: {
-                            compositionstart: handleCompositionStart,
-                            compositionupdate: handleCompositionUpdate,
-                            compositionend: handleCompositionEnd,
-                            input: handleInput,
-                            change: handleChange,
-                            keydown: handleKeydown,
-                        },
+                        onCompositionstart: handleCompositionStart,
+                        onCompositionupdate: handleCompositionUpdate,
+                        onCompositionend: handleCompositionEnd,
+                        onInput: handleInput,
+                        onChange: handleChange,
+                        onKeydown: handleKeydown,
                     }),
-                    // suffix slot
+                    new CommentNode('suffix slot'),
                     new Span({
                         vIf: suffixVisible,
                         class: nsInput.e('suffix'),
@@ -407,12 +442,10 @@ export class TdInput extends TypeDiv {
                             class: nsInput.e('suffix-inner'),
                             slot: [
                                 new Fragment({
-                                    vIf: computed(() => !showClear.get() ||
-                                        !showPwdVisible.get() ||
-                                        !isWordLimitVisible.get()),
+                                    vIf: computed(() => !showClear.get() || !showPwdVisible.get() || !isWordLimitVisible.get()),
                                     slot: [
                                         new Fragment({
-                                            slot: slots === null || slots === void 0 ? void 0 : slots.suffix,
+                                            slot: slots?.suffix,
                                         }),
                                         new TdIcon({
                                             vIf: props.suffixIcon,
@@ -422,31 +455,27 @@ export class TdInput extends TypeDiv {
                                     ],
                                 }),
                                 new TdIcon({
-                                    vIf: showClear,
+                                    vIf: computed(() => showClear.get() && !isComposing.get()),
                                     class: [nsInput.e('icon'), nsInput.e('clear')],
-                                    events: {
-                                        mousedown: (evt) => {
-                                            NOOP();
-                                            evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                                        },
-                                        click: clear,
+                                    onMousedown: (evt) => {
+                                        NOOP();
+                                        evt?.preventDefault();
                                     },
-                                    slot: new ElCircleCloseSvg(),
+                                    onClick: clear,
+                                    slot: props.clearIcon ?? new ElCircleCloseSvg(),
                                 }),
                                 new TdIcon({
                                     vIf: showPwdVisible,
                                     class: [nsInput.e('icon'), nsInput.e('password')],
-                                    events: {
-                                        click: handlePasswordVisible,
-                                    },
+                                    onClick: handlePasswordVisible,
                                     slot: passwordIcon,
                                 }),
                                 new Span({
-                                    vIf: isWordLimitVisible,
+                                    vIf: computed(() => isWordLimitVisible.get() && props.wordLimitPosition !== 'outside'),
                                     class: nsInput.e('count'),
                                     slot: new Span({
                                         class: nsInput.e('count-inner'),
-                                        slot: computed(() => (textLength.get() + ' / ' + props.maxlength)),
+                                        slot: computed(() => textLength.get() + ' / ' + props.maxlength),
                                     }),
                                 }),
                                 new TdIcon({
@@ -456,34 +485,32 @@ export class TdInput extends TypeDiv {
                                         nsInput.e('validateIcon'),
                                         nsInput.is('loading', validateState.get() === 'validating'),
                                     ],
-                                    slot: validateIcon.get() && new (validateIcon.get())()
+                                    slot: validateIcon.get() &&
+                                        new (validateIcon.get())(),
                                 }),
                             ],
                         }),
                     }),
                 ],
+            }), new CommentNode('append slot'), new Div({
+                vIf: slots?.append,
+                class: nsInput.be('group', 'append'),
+                slot: slots?.append,
+            }), new Span({
+                vIf: computed(() => isWordLimitVisible.get() && props.wordLimitPosition === 'outside'),
+                class: [nsInput.e('count'), nsInput.e('count-outer')],
+                slot: computed(() => (textLength.get() + ' / ' + (props.maxlength ?? 0))),
             }));
-            // append slot
-            if (slots === null || slots === void 0 ? void 0 : slots.append) {
-                this.addChild(new Div({
-                    vIf: slots === null || slots === void 0 ? void 0 : slots.append,
-                    class: nsInput.be('group', 'append'),
-                    slot: slots.append,
-                }));
-            }
         }
         else {
-            // textarea
-            this.addChildren(new Textarea({
+            this.addChildren(new CommentNode('textarea'), new Textarea({
                 refDom: textarea,
                 styleObj: textareaStyle,
                 attrObj: {
-                    id: inputId.get(),
-                    class: computed(() => [
-                        nsTextarea.e('inner'),
-                        nsInput.is('focus', isFocused.get()),
-                    ]),
+                    id: inputId, // 预加载时是没有值的
+                    class: computed(() => [nsTextarea.e('inner'), nsInput.is('focus', isFocused.get())]),
                     // v-bind="attrs" todo attr 到底对应什么 父组件的所有属性
+                    // ...attrs.get(),
                     minlength: props.minlength,
                     maxlength: props.maxlength,
                     tabindex: props.tabindex,
@@ -497,21 +524,20 @@ export class TdInput extends TypeDiv {
                     rows: props.rows,
                     role: props.containerRole,
                 },
-                events: {
-                    compositionstart: handleCompositionStart,
-                    compositionupdate: handleCompositionUpdate,
-                    compositionend: handleCompositionEnd,
-                    input: handleInput,
-                    focus: handleFocus,
-                    blur: handleBlur,
-                    change: handleChange,
-                    keydown: handleKeydown,
-                },
+                onCompositionstart: handleCompositionStart,
+                onCompositionupdate: handleCompositionUpdate,
+                onCompositionend: handleCompositionEnd,
+                onInput: handleInput,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                onChange: handleChange,
+                onKeydown: handleKeydown,
             }), new Span({
-                vIf: isWordLimitVisible,
+                vIf: computed(() => isWordLimitVisible.get() &&
+                    (props.type === 'textarea' || props.wordLimitPosition === 'outside')),
                 styleObj: countStyle,
                 class: nsInput.e('count'),
-                slot: computed(() => (textLength.get() + ' / ' + props.maxlength)),
+                slot: computed(() => (textLength.get() + ' / ' + (props.maxlength ?? 0))),
             }));
         }
     }