@type-dom/ui 0.1.0 → 0.1.1

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

@@ -1,212 +1,502 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdInput = void 0;
+const tslib_1 = require("tslib");
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
-const var_1 = require("../../../styles/var");
-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");
+const signals_1 = require("@type-dom/signals");
+const svgs_1 = require("@type-dom/svgs");
+const event_1 = require("../../../constants/event");
+const use_attrs_1 = require("../../../hooks/use-attrs");
+const index_1 = require("../../../hooks/use-focus-controller/index");
+const use_composition_1 = require("../../../hooks/use-composition");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const use_cursor_1 = require("../../../hooks/use-cursor");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+const use_form_item_1 = require("../td-form/hooks/use-form-item");
+const use_form_common_props_1 = require("../td-form/hooks/use-form-common-props");
+const utils_2 = require("./widget/utils");
+const td_input_const_1 = require("./td-input.const");
+require("./style/index");
 class TdInput extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
-        console.log('TdInput constructor . ');
+        // console.log('TdInput constructor . ');
         this.className = 'TdInput';
         this.attr.addObj({
             name: 'td-input',
-            tabIndex: 0
         });
-        this.style.addObj({
-            position: 'relative',
-            display: 'inline-flex',
-            width: '100%',
-            // width: '95%',
-            boxSizing: 'border-box',
-            verticalAlign: 'middle',
-            // fontSize: var(--el-font-size-base),
-            fontSize: var_1.$fontSizes.base,
-            // lineHeight: var(--el-input-height),
-            lineHeight: td_input_style_1.$inputHeight[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
-            userSelect: 'none'
+        this.assignProps(td_input_const_1.inputProps);
+        this.addEmits(td_input_const_1.inputEmits);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        const props = this.props;
+        const emit = this.emit;
+        // const rawAttrs = useRawAttrs()
+        const attrs = (0, use_attrs_1.useAttrs)();
+        const slots = (0, framework_1.useSlots)();
+        const containerKls = (0, signals_1.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) ||
+                    props.suffixIcon ||
+                    props.clearable ||
+                    props.showPassword,
+                [nsInput.bm('suffix', 'password-clear')]: showClear.get() && showPwdVisible.get(),
+                [nsInput.b('hidden')]: props.type === 'hidden',
+            },
+            // rawAttrs.class,
+        ]);
+        const wrapperKls = (0, signals_1.computed)(() => [
+            nsInput.e('wrapper'),
+            nsInput.is('focus', isFocused.get()),
+        ]);
+        const { form: elForm, formItem: elFormItem } = (0, use_form_item_1.useFormItem)();
+        const { inputId } = (0, use_form_item_1.useFormItemInputId)(props, {
+            formItemContext: elFormItem,
         });
-        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;
-        }
-        //   todo
-        if ((params === null || params === void 0 ? void 0 : params.type) === 'textarea') {
-            params.parent = this;
-            this.panel = new td_textarea_wrapper_1.TdTextareaWrapper(params);
-            // this.textareaWrapper = new TdTextareaWrapper(props);
-        }
-        else {
-            this.panel = new td_input_wrapper_class_1.TdInputWrapper(params);
-        }
-        if (params === null || params === void 0 ? void 0 : params.placeholder) {
-            this.placeholder = params.placeholder;
-        }
-        this.addChild(this.panel);
-        if (params === null || params === void 0 ? void 0 : params.width) {
-            this.style.addWidth(params.width);
-        }
-        if (!(params === null || params === void 0 ? void 0 : params.formatter) && (params === null || params === void 0 ? void 0 : params.parser)) {
-            throw new Error('If you set the parser, you also need to set the formatter');
-        }
-        if (params.disabled) {
-            // this.panel.setDisabled(true);
-        }
-        this.addEvents({
-            mouseleave: (evt) => {
-                if (this.props.disabled) {
-                    // 会动态设置的。所以要在监听中判断拦截；
-                    evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
-                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                    return;
+        const inputSize = (0, use_form_common_props_1.useFormSize)();
+        const inputDisabled = (0, use_form_common_props_1.useFormDisabled)();
+        const nsInput = (0, use_namespace_1.useNamespace)('input');
+        const nsTextarea = (0, use_namespace_1.useNamespace)('textarea');
+        const input = (0, signals_1.signal)();
+        const textarea = (0, signals_1.signal)();
+        const hovering = (0, signals_1.signal)(false);
+        const passwordVisible = (0, signals_1.signal)(false);
+        const countStyle = (0, signals_1.signal)();
+        const textareaCalcStyle = (0, signals_1.signal)(props.inputStyle);
+        const _ref = (0, signals_1.computed)(() => input.get() || textarea.get());
+        // wrapperRef for type="text", handleFocus and handleBlur for type="textarea"
+        const { wrapperRef, isFocused, handleFocus, handleBlur } = (0, index_1.useFocusController)(_ref, {
+            beforeFocus() {
+                return inputDisabled.get();
+            },
+            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) => (0, utils_1.debugWarn)(err));
                 }
-                this.setHovering(false);
             },
-            mouseenter: (evt, element) => {
-                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();
+        });
+        // console.warn('wrapperRef is ', wrapperRef);
+        const needStatusIcon = (0, signals_1.computed)(() => { var _a; return (_a = elForm === null || elForm === void 0 ? void 0 : elForm.statusIcon) !== null && _a !== void 0 ? _a : false; });
+        const validateState = (0, signals_1.computed)(() => (0, signals_1.unref)(elFormItem === null || elFormItem === void 0 ? void 0 : elFormItem.validateState) || '');
+        const validateIcon = (0, signals_1.computed)(() => validateState.get() &&
+            svgs_1.ValidateComponentsMap[validateState.get()]);
+        const passwordIcon = (0, signals_1.computed)(() => passwordVisible.get() ? new svgs_1.ElViewSvg() : new svgs_1.ElHideSvg());
+        // const containerStyle = computed(() => [
+        //   // rawAttrs.style,
+        // ])
+        const textareaStyle = (0, signals_1.computed)(() => Object.assign({}, props.inputStyle, textareaCalcStyle.get(), {
+            resize: props.resize,
+        }));
+        const nativeInputValue = (0, signals_1.computed)(() => { var _a, _b; return (0, utils_1.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 showClear = (0, signals_1.computed)(() => props.clearable &&
+            !inputDisabled.get() &&
+            !props.readonly &&
+            !!nativeInputValue.get() &&
+            (isFocused.get() || hovering.get()));
+        const showPwdVisible = (0, signals_1.computed)(() => props.showPassword &&
+            !inputDisabled.get() &&
+            !!nativeInputValue.get() &&
+            (!!nativeInputValue.get() || isFocused.get()));
+        const isWordLimitVisible = (0, signals_1.computed)(() => props.showWordLimit &&
+            !!props.maxlength &&
+            (props.type === 'text' || props.type === 'textarea') &&
+            !inputDisabled.get() &&
+            !props.readonly &&
+            !props.showPassword);
+        const textLength = (0, signals_1.computed)(() => nativeInputValue.get().length);
+        const inputExceed = (0, signals_1.computed)(() => 
+        // show exceed style if length of initial value greater then maxlength
+        !!isWordLimitVisible.get() && textLength.get() > Number(props.maxlength));
+        const suffixVisible = (0, signals_1.computed)(() => !!(slots === null || slots === void 0 ? void 0 : slots.suffix) ||
+            !!props.suffixIcon ||
+            showClear.get() ||
+            props.showPassword ||
+            isWordLimitVisible.get() ||
+            (!!validateState.get() && needStatusIcon.get()));
+        // console.log('suffixVisible is ', suffixVisible);
+        const [recordCursor, setCursor] = (0, use_cursor_1.useCursor)(input);
+        (0, framework_1.useResizeObserver)(textarea, (entries) => {
+            onceInitSizeTextarea();
+            if (!isWordLimitVisible.get() || props.resize !== 'both') {
+                return;
+            }
+            const entry = entries[0];
+            const { width } = entry.contentRect;
+            countStyle.set({
+                /** right: 100% - width + padding(15) + right(6) */
+                right: `calc(100% - ${width + 15 + 6}px)`,
+            });
+        });
+        const resizeTextarea = () => {
+            const { type, autosize } = props;
+            if (!utils_1.isClient || type !== 'textarea' || !textarea.get()) {
+                return;
+            }
+            if (autosize) {
+                const minRows = (0, utils_1.isObject)(autosize)
+                    ? autosize.minRows
+                    : undefined;
+                const maxRows = (0, utils_1.isObject)(autosize)
+                    ? autosize.maxRows
+                    : undefined;
+                const textareaStyle = (0, utils_2.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 next tick.
+                // see https://github.com/element-plus/element-plus/issues/8825
+                textareaCalcStyle.set(Object.assign({ overflowY: 'hidden' }, textareaStyle));
+                (0, framework_1.nextTick)(() => {
+                    // NOTE: Force repaint to make sure the style set above is applied.
+                    textarea.get().offsetHeight;
+                    textareaCalcStyle.set(textareaStyle);
+                });
+            }
+            else {
+                textareaCalcStyle.set({
+                    minHeight: (0, utils_2.calcTextareaHeight)(textarea.get()).minHeight,
+                });
+            }
+        };
+        const createOnceInitResize = (resizeTextarea) => {
+            let isInit = false;
+            return () => {
+                var _a;
+                if (isInit || !props.autosize) {
                     return;
                 }
-                this.setHovering(true);
-                console.log('mouseenter then showClear . ');
-                if (this.panel instanceof td_input_wrapper_class_1.TdInputWrapper) {
-                    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 (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);
-                    }
+                const isElHidden = ((_a = textarea.get()) === null || _a === void 0 ? void 0 : _a.offsetParent) === null;
+                if (!isElHidden) {
+                    resizeTextarea();
+                    isInit = true;
                 }
+            };
+        };
+        // fix: https://github.com/element-plus/element-plus/issues/12074
+        const onceInitSizeTextarea = createOnceInitResize(resizeTextarea);
+        const setNativeInputValue = () => {
+            const input = _ref.get();
+            const formatterValue = props.formatter
+                ? props.formatter(nativeInputValue.get())
+                : nativeInputValue.get();
+            if (!input || input.value === formatterValue) {
+                return;
             }
+            input.value = formatterValue;
+        };
+        const handleInput = (event) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            recordCursor();
+            let { value } = event === null || event === void 0 ? void 0 : event.target;
+            if (props.formatter) {
+                value = props.parser ? props.parser(value) : value;
+            }
+            // should not emit input during composition
+            // see: https://github.com/ElemeFE/element/issues/10516
+            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()) {
+                setNativeInputValue();
+                return;
+            }
+            emit(event_1.UPDATE_MODEL_EVENT, value);
+            emit('input', value);
+            // ensure native input value is controlled
+            // see: https://github.com/ElemeFE/element/issues/12850
+            yield (0, framework_1.nextTick)();
+            setNativeInputValue();
+            setCursor();
         });
-        // 传递组件的监听事件到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;
-                console.log('td-input input', evt, element);
-                if (this.modelValue instanceof framework_1.XProxy) {
-                    (_a = this.modelValue) === null || _a === void 0 ? void 0 : _a.setValue((_b = element === null || element === void 0 ? void 0 : element.dom) === null || _b === void 0 ? void 0 : _b.value);
-                }
-                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);
+        const handleChange = (event) => {
+            emit('change', (event === null || event === void 0 ? void 0 : event.target).value);
+        };
+        const { isComposing, handleCompositionStart, handleCompositionUpdate, handleCompositionEnd, } = (0, use_composition_1.useComposition)({ emit: this.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 handleMouseLeave = (evt) => {
+            hovering.set(false);
+            // this.emit('mouseleave', evt); // todo 循环调用了
+        };
+        const handleMouseEnter = (evt) => {
+            hovering.set(true);
+            // this.emit('mouseenter', evt); // todo 循环调用了
+        };
+        const handleKeydown = (evt) => {
+            // this.emit('keydown', evt); // todo 循环调用了
+        };
+        const select = () => {
+            var _a;
+            (_a = _ref.get()) === null || _a === void 0 ? void 0 : _a.select();
+        };
+        const clear = () => {
+            emit(event_1.UPDATE_MODEL_EVENT, '');
+            emit('change', '');
+            emit('clear');
+            emit('input', '');
+        };
+        (0, signals_1.watch)(() => { var _a; return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get(); }, () => {
+            var _a;
+            (0, framework_1.nextTick)(() => { var _a; return (_a = this.resizeTextarea) === null || _a === void 0 ? void 0 : _a.call(this); });
+            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) => (0, utils_1.debugWarn)(err));
             }
         });
-        if (params.type === 'textarea') {
-            // ????
-        }
-        this.props = this.useParams(params);
-    }
-    get value() {
-        return this.panel.inner.value;
-    }
-    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 = mustache(value, this.itemData);
-                //   this.panel.inner.setValue(originalValue);
-                // } else {
-                this.panel.inner.setValue(value);
-                // }
+        // native input value is set explicitly
+        // do not use v-model / :value in template
+        // see: https://github.com/ElemeFE/element/issues/14521
+        (0, signals_1.watch)(nativeInputValue, () => setNativeInputValue());
+        // when change between <input> and <textarea>,
+        // update DOM dependent value and styles
+        // https://github.com/ElemeFE/element/issues/14857
+        (0, signals_1.watch)(() => (0, signals_1.unref)(props.type), () => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            var _a;
+            yield (0, framework_1.nextTick)();
+            setNativeInputValue();
+            (_a = this.resizeTextarea) === null || _a === void 0 ? void 0 : _a.call(this);
+        }));
+        (0, framework_1.onMounted)(() => {
+            if (!props.formatter && props.parser) {
+                (0, utils_1.debugWarn)('TdInput', 'If you set the parser, you also need to set the formatter.');
             }
-            else {
-                this.panel.inner.setValue(value);
+            setNativeInputValue();
+            (0, framework_1.nextTick)(this.resizeTextarea);
+        });
+        (0, framework_1.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) */
+            autosize: (0, signals_1.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((0, signals_1.computed)(() => {
+            const cls = containerKls.get();
+            // console.log('cls is ', cls);
+            if (slots === null || slots === void 0 ? void 0 : slots.append) {
+                cls.push(nsInput.bm('group', 'append'));
             }
-        }
-        else if (value instanceof framework_1.XProxy) {
-            this.panel.inner.setValue(value.value);
-        }
-        else {
-            //   todo
-        }
-    }
-    setHovering(hovering) {
-        var _a, _b;
-        this.hovering = hovering;
-        if (hovering) {
-            if (!this.isFocused) {
-                (_a = this.panel) === null || _a === void 0 ? void 0 : _a.style.setObj({
-                    boxShadow: '0 0 0 1px ' + td_input_style_1.$input.hoverBorderColor + ' inset'
-                });
+            if (slots === null || slots === void 0 ? void 0 : slots.prepend) {
+                cls.push(nsInput.bm('group', 'prepend'));
             }
-        }
-        else {
-            if (!this.isFocused) {
-                (_b = this.panel) === null || _b === void 0 ? void 0 : _b.style.setObj({
-                    boxShadow: '0 0 0 1px ' + td_input_style_1.$input.borderColor + ' inset'
-                });
+            // console.warn('cls is ', cls);
+            return cls;
+        }));
+        // this.style.addObj(containerStyle);
+        this.addEvents({
+            mouseenter: handleMouseEnter,
+            mouseleave: handleMouseLeave,
+        });
+        // input
+        if (props.type !== 'textarea') {
+            if (slots === null || slots === void 0 ? void 0 : slots.prepend) {
+                this.addChild(new framework_1.Span({
+                    class: nsInput.be('group', 'prepend'),
+                    slot: slots.prepend,
+                }));
+            }
+            this.addChild(new framework_1.Div({
+                refDom: wrapperRef,
+                class: wrapperKls,
+                slot: [
+                    //  prefix slot
+                    new framework_1.Span({
+                        vIf: (slots === null || slots === void 0 ? void 0 : slots.prefix) || props.prefixIcon,
+                        class: nsInput.e('prefix'),
+                        slot: [
+                            new framework_1.Span({
+                                class: nsInput.e('prefix-inner'),
+                                slot: [
+                                    ...(0, framework_1.arraySlot)(slots === null || slots === void 0 ? void 0 : slots.prefix),
+                                    new td_icon_class_1.TdIcon({
+                                        vIf: props.prefixIcon,
+                                        slot: props.prefixIcon,
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                    new framework_1.Input({
+                        id: inputId.get(),
+                        refDom: input,
+                        class: nsInput.e('inner'),
+                        attrObj: {
+                            // v-bind="attrs" todo attr 到底对应什么 父组件的所有属性
+                            minlength: props.minlength,
+                            maxlength: props.maxlength,
+                            disabled: inputDisabled,
+                            type: (0, signals_1.computed)(() => props.showPassword
+                                ? passwordVisible.get()
+                                    ? 'text'
+                                    : 'password'
+                                : props.type),
+                            readonly: props.readonly,
+                            autocomplete: props.autocomplete,
+                            tabindex: props.tabindex,
+                            ariaLabel: props.ariaLabel,
+                            placeholder: props.placeholder,
+                            form: props.form,
+                            autofocus: props.autofocus,
+                            role: props.containerRole,
+                        },
+                        styleObj: props.inputStyle,
+                        events: {
+                            compositionstart: handleCompositionStart,
+                            compositionupdate: handleCompositionUpdate,
+                            compositionend: handleCompositionEnd,
+                            input: handleInput,
+                            change: handleChange,
+                            keydown: handleKeydown,
+                        },
+                    }),
+                    // suffix slot
+                    new framework_1.Span({
+                        vIf: suffixVisible,
+                        class: nsInput.e('suffix'),
+                        slot: new framework_1.Span({
+                            class: nsInput.e('suffix-inner'),
+                            slot: [
+                                new framework_1.Fragment({
+                                    vIf: (0, signals_1.computed)(() => !showClear.get() ||
+                                        !showPwdVisible.get() ||
+                                        !isWordLimitVisible.get()),
+                                    slot: [
+                                        ...(0, framework_1.arraySlot)(slots === null || slots === void 0 ? void 0 : slots.suffix),
+                                        new td_icon_class_1.TdIcon({
+                                            vIf: props.suffixIcon,
+                                            class: nsInput.e('icon'),
+                                            slot: props.suffixIcon,
+                                        }),
+                                    ],
+                                }),
+                                new td_icon_class_1.TdIcon({
+                                    vIf: showClear,
+                                    class: [nsInput.e('icon'), nsInput.e('clear')],
+                                    slot: new svgs_1.ElCircleCloseSvg(),
+                                    events: {
+                                        click: this.clear,
+                                        mousedown: (evt) => {
+                                            (0, utils_1.NOOP)();
+                                            evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                                        },
+                                    },
+                                }),
+                                new td_icon_class_1.TdIcon({
+                                    vIf: showPwdVisible,
+                                    class: [nsInput.e('icon'), nsInput.e('password')],
+                                    // ToDo svg要变化的
+                                    slot: passwordIcon,
+                                    events: {
+                                        click: handlePasswordVisible,
+                                    },
+                                }),
+                                new framework_1.Span({
+                                    vIf: isWordLimitVisible,
+                                    class: nsInput.e('count'),
+                                    slot: new framework_1.Span({
+                                        class: nsInput.e('count-inner'),
+                                        slot: (0, signals_1.computed)(() => (textLength.get() + ' / ' + props.maxlength)), // todo 动态
+                                    }),
+                                }),
+                                new td_icon_class_1.TdIcon({
+                                    vIf: validateState && validateIcon && needStatusIcon,
+                                    class: [
+                                        nsInput.e('icon'),
+                                        nsInput.e('validateIcon'),
+                                        nsInput.is('loading', validateState.get() === 'validating'),
+                                    ],
+                                    slot: validateIcon.get()
+                                        ? new (validateIcon.get())()
+                                        : undefined,
+                                }),
+                            ],
+                        }),
+                    }),
+                ],
+            }));
+            // append slot
+            if (slots === null || slots === void 0 ? void 0 : slots.append) {
+                this.addChild(new framework_1.Div({
+                    vIf: slots === null || slots === void 0 ? void 0 : slots.append,
+                    class: nsInput.be('group', 'append'),
+                    slot: slots.append,
+                }));
             }
-        }
-    }
-    setFocus(isFocused) {
-        var _a, _b;
-        this.isFocused = isFocused;
-        if (isFocused) {
-            (_a = this.panel) === null || _a === void 0 ? void 0 : _a.style.setObj({
-                boxShadow: '0 0 0 1px ' + td_input_style_1.$input.focusBorderColor + ' inset'
-            });
         }
         else {
-            (_b = this.panel) === null || _b === void 0 ? void 0 : _b.style.setObj({
-                boxShadow: '0 0 0 1px ' + td_input_style_1.$input.borderColor + ' inset'
-            });
-        }
-    }
-    setShow(show, display = 'inline-flex') {
-        this.style.setObj({
-            display: show ? display : 'none'
-        });
-        this.panel.style.setObj({
-            display: show ? display : 'none'
-        });
-    }
-    created() {
-        // 注： 绑定变量要渲染前处理，而不是创建对象时处理
-        if (this.props.modelValue) {
-            console.log('td-input created . ');
-            console.log('setModelValue ', this.props.modelValue);
-            this.setModelValue(this.props.modelValue);
+            // textarea
+            this.addChildren(new framework_1.Textarea({
+                refDom: textarea,
+                styleObj: textareaStyle,
+                attrObj: {
+                    id: inputId.get(),
+                    class: (0, signals_1.computed)(() => [
+                        nsTextarea.e('inner'),
+                        nsInput.is('focus', isFocused.get()),
+                    ]),
+                    // v-bind="attrs" todo attr 到底对应什么 父组件的所有属性
+                    minlength: props.minlength,
+                    maxlength: props.maxlength,
+                    tabindex: props.tabindex,
+                    disabled: inputDisabled,
+                    readonly: props.readonly,
+                    autocomplete: props.autocomplete,
+                    // style: textareaStyle,
+                    ariaLabel: props.ariaLabel,
+                    placeholder: props.placeholder,
+                    form: props.form,
+                    autofocus: props.autofocus,
+                    rows: props.rows,
+                    role: props.containerRole,
+                },
+                events: {
+                    compositionstart: handleCompositionStart,
+                    compositionupdate: handleCompositionUpdate,
+                    compositionend: handleCompositionEnd,
+                    input: handleInput,
+                    focus: handleFocus,
+                    blur: handleBlur,
+                    change: handleChange,
+                    keydown: handleKeydown,
+                },
+            }), new framework_1.Span({
+                vIf: isWordLimitVisible,
+                styleObj: countStyle,
+                class: nsInput.e('count'),
+                slot: (0, signals_1.computed)(() => (textLength.get() + ' / ' + props.maxlength)),
+            }));
         }
     }
 }