vft 0.0.374 → 0.0.375

package/es/components/input/input.vue2.js

@@ -1,21 +1,24 @@
-import { defineComponent as Oe, useAttrs as Te, useSlots as Le, computed as l, ref as S, getCurrentInstance as je, shallowRef as H, watch as U, nextTick as E, onMounted as We, withDirectives as He, createElementBlock as c, openBlock as i, mergeProps as y, Fragment as q, createCommentVNode as u, createElementVNode as x, normalizeClass as r, unref as a, renderSlot as $, createBlock as V, withKeys as Ue, withModifiers as me, toDisplayString as D, normalizeStyle as qe, vShow as Ge } from "vue";
+import { defineComponent, useAttrs, useSlots, computed, ref, getCurrentInstance, shallowRef, watch, nextTick, onMounted, withDirectives, createElementBlock, openBlock, mergeProps, Fragment, createCommentVNode, createElementVNode, normalizeClass, unref, renderSlot, createBlock, withKeys, withModifiers, toDisplayString, normalizeStyle, vShow } from "vue";
 import "../form/index.js";
-import { VftIcon as B } from "../icon/index.js";
-import { useResizeObserver as Je, isClient as Qe } from "@vueuse/core";
-import { isString as A, singleAttrToObj as G, noop as Xe, isObject as ve } from "@vft/utils";
-import { debugWarn as J } from "../../utils/error.js";
+import { VftIcon } from "../icon/index.js";
+import { useResizeObserver, isClient } from "@vueuse/core";
+import { isString, singleAttrToObj, noop, isObject } from "@vft/utils";
+import { debugWarn } from "../../utils/error.js";
 import "../config-provider/hooks/use-global-config.js";
-import { isNil as Ye } from "lodash-es";
-import { useNamespace as pe } from "../../hooks/use-namespace/index.js";
+import { isNil } from "lodash-es";
+import { useNamespace } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-import { UPDATE_MODEL_EVENT as Q } from "@vft/constants";
-import { useAttrs as Ze, useCursor as _e } from "@vft/use";
-import { calcTextareaHeight as ye } from "./utils.js";
-import { useFormSize as et, useFormDisabled as tt } from "../form/hooks/use-form-common-props.js";
-import { useFormItem as at, useFormItemInputId as ot } from "../form/hooks/use-form-item.js";
-const nt = ["role"], lt = ["id", "type", "disabled", "formatter", "parser", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form"], st = ["id", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form"], It = /* @__PURE__ */ Oe({
+import { UPDATE_MODEL_EVENT } from "@vft/constants";
+import { useAttrs as useAttrs$1, useCursor } from "@vft/use";
+import { calcTextareaHeight } from "./utils.js";
+import { useFormItem, useFormItemInputId } from "../form/hooks/use-form-item.js";
+import { useFormSize, useFormDisabled } from "../form/hooks/use-form-common-props.js";
+const _hoisted_1 = ["role"];
+const _hoisted_2 = ["id", "type", "disabled", "formatter", "parser", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form"];
+const _hoisted_3 = ["id", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "input",
   props: {
     id: {},
@@ -24,7 +27,7 @@ const nt = ["role"], lt = ["id", "type", "disabled", "formatter", "parser", "rea
     modelValue: {},
     type: { default: "text" },
     resize: {},
-    autosize: { type: [Object, Boolean], default: !1 },
+    autosize: { type: [Object, Boolean], default: false },
     autocomplete: { default: "off" },
     formatter: {},
     parser: {},
@@ -40,340 +43,464 @@ const nt = ["role"], lt = ["id", "type", "disabled", "formatter", "parser", "rea
     containerRole: {},
     label: {},
     tabindex: { default: 0 },
-    validateEvent: { type: Boolean, default: !0 },
+    validateEvent: { type: Boolean, default: true },
     inputStyle: { type: [Boolean, null, String, Object, Array] }
   },
   emits: {
-    [Q]: (e) => A(e),
-    input: (e) => A(e),
-    change: (e) => A(e),
-    suffixClick: (e) => A(e),
-    prefixClick: (e) => A(e),
-    focus: (e) => e instanceof FocusEvent,
-    blur: (e) => e instanceof FocusEvent,
-    clear: () => !0,
-    enter: () => !0,
-    mouseleave: (e) => e instanceof MouseEvent,
-    mouseenter: (e) => e instanceof MouseEvent,
+    [UPDATE_MODEL_EVENT]: (value) => isString(value),
+    input: (value) => isString(value),
+    change: (value) => isString(value),
+    suffixClick: (value) => isString(value),
+    prefixClick: (value) => isString(value),
+    focus: (evt) => evt instanceof FocusEvent,
+    blur: (evt) => evt instanceof FocusEvent,
+    clear: () => true,
+    enter: () => true,
+    mouseleave: (evt) => evt instanceof MouseEvent,
+    mouseenter: (evt) => evt instanceof MouseEvent,
     // NOTE: when autofill by browser, the keydown event is instanceof Event, not KeyboardEvent
-    keydown: (e) => e instanceof Event,
-    compositionstart: (e) => e instanceof CompositionEvent,
-    compositionupdate: (e) => e instanceof CompositionEvent,
-    compositionend: (e) => e instanceof CompositionEvent
+    keydown: (evt) => evt instanceof Event,
+    compositionstart: (evt) => evt instanceof CompositionEvent,
+    compositionupdate: (evt) => evt instanceof CompositionEvent,
+    compositionend: (evt) => evt instanceof CompositionEvent
   },
-  setup(e, { expose: he, emit: be }) {
-    const s = be, g = Te(), m = Le(), X = l(() => {
-      const t = {};
-      return e.containerRole === "combobox" && (t["aria-haspopup"] = g["aria-haspopup"], t["aria-owns"] = g["aria-owns"], t["aria-expanded"] = g["aria-expanded"]), t;
-    }), we = l(() => [
-      e.type === "textarea" ? Z.b() : o.b(),
-      o.m(ke.value),
-      o.is("disabled", h.value),
-      o.is("exceed", Ee.value),
-      o.is("focus", v.value),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emit = __emit;
+    const rawAttrs = useAttrs();
+    const slots = useSlots();
+    const containerAttrs = computed(() => {
+      const comboBoxAttrs = {};
+      if (__props.containerRole === "combobox") {
+        comboBoxAttrs["aria-haspopup"] = rawAttrs["aria-haspopup"];
+        comboBoxAttrs["aria-owns"] = rawAttrs["aria-owns"];
+        comboBoxAttrs["aria-expanded"] = rawAttrs["aria-expanded"];
+      }
+      return comboBoxAttrs;
+    });
+    const containerKls = computed(() => [
+      __props.type === "textarea" ? nsTextarea.b() : nsInput.b(),
+      nsInput.m(inputSize.value),
+      nsInput.is("disabled", inputDisabled.value),
+      nsInput.is("exceed", inputExceed.value),
+      nsInput.is("focus", focused.value),
       {
-        [o.b("group")]: m.prepend || m.append,
-        [o.bm("group", "append")]: m.append,
-        [o.bm("group", "prepend")]: m.prepend,
-        [o.m("prefix")]: m.prefix || e.prefixIcon,
-        [o.m("suffix")]: m.suffix || e.suffixIcon || e.clearable || e.showPassword,
-        [o.bm("suffix", "password-clear")]: P.value && L.value
+        [nsInput.b("group")]: slots.prepend || slots.append,
+        [nsInput.bm("group", "append")]: slots.append,
+        [nsInput.bm("group", "prepend")]: slots.prepend,
+        [nsInput.m("prefix")]: slots.prefix || __props.prefixIcon,
+        [nsInput.m("suffix")]: slots.suffix || __props.suffixIcon || __props.clearable || __props.showPassword,
+        [nsInput.bm("suffix", "password-clear")]: showClear.value && showPwdVisible.value
       },
-      g.class
-    ]), xe = je(), ge = l(() => [
-      o.e("wrapper"),
-      o.is("focus", v.value)
-    ]), d = Ze({
-      excludeKeys: l(() => Object.keys(X.value))
-    }), { form: Ce, formItem: F } = at(), { inputId: Y } = ot(xe.props, {
-      formItemContext: F
-    }), ke = et(), h = tt(), o = pe("input"), Z = pe("textarea"), M = H(), b = H(), v = S(!1), N = S(!1), C = S(!1), K = S(!1), _ = S(), O = H(e.inputStyle), k = l(() => M.value || b.value), T = l(() => G(e.prefixIcon, "icon", { size: 16 })), ee = l(() => G(e.suffixIcon, "icon", { size: 16 })), Ie = l(() => G(e.clearIcon, "icon", {
-      icon: "icon-circle-close",
-      size: 16
-    })), te = l(() => Ce?.statusIcon ?? !1), I = l(() => F?.validateState || ""), ae = l(
-      () => I.value && {
+      rawAttrs.class
+    ]);
+    const instance = getCurrentInstance();
+    const wrapperKls = computed(() => [
+      nsInput.e("wrapper"),
+      nsInput.is("focus", focused.value)
+    ]);
+    const attrs = useAttrs$1({
+      excludeKeys: computed(() => {
+        return Object.keys(containerAttrs.value);
+      })
+    });
+    const { form: _form, formItem } = useFormItem();
+    const { inputId } = useFormItemInputId(instance.props, {
+      formItemContext: formItem
+    });
+    const inputSize = useFormSize();
+    const inputDisabled = useFormDisabled();
+    const nsInput = useNamespace("input");
+    const nsTextarea = useNamespace("textarea");
+    const input = shallowRef();
+    const textarea = shallowRef();
+    const focused = ref(false);
+    const hovering = ref(false);
+    const isComposing = ref(false);
+    const passwordVisible = ref(false);
+    const countStyle = ref();
+    const textareaCalcStyle = shallowRef(__props.inputStyle);
+    const _ref = computed(() => input.value || textarea.value);
+    const _prefixIcon = computed(() => {
+      return singleAttrToObj(__props.prefixIcon, "icon", { size: 16 });
+    });
+    const _suffixIcon = computed(() => {
+      return singleAttrToObj(__props.suffixIcon, "icon", { size: 16 });
+    });
+    const _clearIcon = computed(() => {
+      return singleAttrToObj(__props.clearIcon, "icon", {
+        icon: "icon-circle-close",
+        size: 16
+      });
+    });
+    const needStatusIcon = computed(() => _form?.statusIcon ?? false);
+    const validateState = computed(() => formItem?.validateState || "");
+    const validateIcon = computed(
+      () => validateState.value && {
         validating: "icon-loading",
         success: "icon-circle-check",
         error: "icon-circle-close"
-      }[I.value]
-    ), ze = l(
-      () => K.value ? { icon: "icon-view", size: 16 } : { icon: "icon-hide", size: 16 }
-    ), Se = l(() => [
-      g.style,
-      e.inputStyle
-    ]), oe = l(() => [
-      e.inputStyle,
-      O.value,
-      { resize: e.resize }
-    ]), f = l(
-      () => Ye(e.modelValue) ? "" : String(e.modelValue)
-    ), P = l(
-      () => e.clearable && !h.value && !e.readonly && !!f.value && (v.value || N.value)
-    ), L = l(
-      () => e.showPassword && !h.value && !e.readonly && !!f.value && (!!f.value || v.value)
-    ), w = l(
-      () => e.showWordLimit && !!d.value.maxlength && (e.type === "text" || e.type === "textarea") && !h.value && !e.readonly && !e.showPassword
-    ), j = l(() => Array.from(f.value).length), Ee = l(
+      }[validateState.value]
+    );
+    const passwordIcon = computed(
+      () => passwordVisible.value ? { icon: "icon-view", size: 16 } : { icon: "icon-hide", size: 16 }
+    );
+    const containerStyle = computed(() => [
+      rawAttrs.style,
+      __props.inputStyle
+    ]);
+    const textareaStyle = computed(() => [
+      __props.inputStyle,
+      textareaCalcStyle.value,
+      { resize: __props.resize }
+    ]);
+    const nativeInputValue = computed(
+      () => isNil(__props.modelValue) ? "" : String(__props.modelValue)
+    );
+    const showClear = computed(
+      () => __props.clearable && !inputDisabled.value && !__props.readonly && !!nativeInputValue.value && (focused.value || hovering.value)
+    );
+    const showPwdVisible = computed(
+      () => __props.showPassword && !inputDisabled.value && !__props.readonly && !!nativeInputValue.value && (!!nativeInputValue.value || focused.value)
+    );
+    const isWordLimitVisible = computed(
+      () => __props.showWordLimit && !!attrs.value.maxlength && (__props.type === "text" || __props.type === "textarea") && !inputDisabled.value && !__props.readonly && !__props.showPassword
+    );
+    const textLength = computed(() => Array.from(nativeInputValue.value).length);
+    const inputExceed = computed(
       () => (
         // show exceed style if length of initial value greater then maxlength
-        !!w.value && j.value > Number(d.value.maxlength)
+        !!isWordLimitVisible.value && textLength.value > Number(attrs.value.maxlength)
       )
-    ), Ve = l(
-      () => !!m.suffix || !!e.suffixIcon || P.value || e.showPassword || w.value || !!I.value && te.value
-    ), [Be, Ae] = _e(M);
-    Je(b, (t) => {
-      if (!w.value || e.resize !== "both") return;
-      const n = t[0], { width: p } = n.contentRect;
-      _.value = {
+    );
+    const suffixVisible = computed(
+      () => !!slots.suffix || !!__props.suffixIcon || showClear.value || __props.showPassword || isWordLimitVisible.value || !!validateState.value && needStatusIcon.value
+    );
+    const [recordCursor, setCursor] = useCursor(input);
+    useResizeObserver(textarea, (entries) => {
+      if (!isWordLimitVisible.value || __props.resize !== "both") return;
+      const entry = entries[0];
+      const { width } = entry.contentRect;
+      countStyle.value = {
         /** right: 100% - width + padding(15) + right(6) */
-        right: `calc(100% - ${p + 15 + 6}px)`
+        right: `calc(100% - ${width + 15 + 6}px)`
       };
     });
-    const R = () => {
-      if (!(!Qe || e.type !== "textarea"))
-        if (e.autosize) {
-          const t = ve(e.autosize) ? e.autosize.minRows : void 0, n = ve(e.autosize) ? e.autosize.maxRows : void 0;
-          O.value = {
-            ...ye(b.value, t, n)
-          };
-        } else
-          O.value = {
-            minHeight: ye(b.value).minHeight
-          };
-    }, z = () => {
-      const t = k.value;
-      !t || t.value === f.value || (t.value = f.value);
-    }, W = async (t) => {
-      Be();
-      let { value: n } = t.target;
-      if (d.value.maxlength && n.length >= d.value.maxlength && (n = n.slice(0, Number(d.value.maxlength))), e.formatter && (n = e.parser ? e.parser(n) : n, n = e.formatter(n)), !C.value) {
-        if (n === f.value) {
-          z();
-          return;
+    const resizeTextarea = () => {
+      if (!isClient || __props.type !== "textarea") return;
+      if (__props.autosize) {
+        const minRows = isObject(__props.autosize) ? __props.autosize.minRows : void 0;
+        const maxRows = isObject(__props.autosize) ? __props.autosize.maxRows : void 0;
+        textareaCalcStyle.value = {
+          ...calcTextareaHeight(textarea.value, minRows, maxRows)
+        };
+      } else {
+        textareaCalcStyle.value = {
+          minHeight: calcTextareaHeight(textarea.value).minHeight
+        };
+      }
+    };
+    const setNativeInputValue = () => {
+      const input2 = _ref.value;
+      if (!input2 || input2.value === nativeInputValue.value) return;
+      input2.value = nativeInputValue.value;
+    };
+    const handleInput = async (event) => {
+      recordCursor();
+      let { value } = event.target;
+      if (attrs.value.maxlength && value.length >= attrs.value.maxlength) {
+        value = value.slice(0, Number(attrs.value.maxlength));
+      }
+      if (__props.formatter) {
+        value = __props.parser ? __props.parser(value) : value;
+        value = __props.formatter(value);
+      }
+      if (isComposing.value) return;
+      if (value === nativeInputValue.value) {
+        setNativeInputValue();
+        return;
+      }
+      emit(UPDATE_MODEL_EVENT, value);
+      emit("input", value);
+      await nextTick();
+      setNativeInputValue();
+      setCursor();
+    };
+    const handleChange = (event) => {
+      emit("change", event.target.value);
+    };
+    const handleSuffixClick = () => {
+      emit("suffixClick", __props.modelValue);
+    };
+    const handlePrefixClick = () => {
+      emit("prefixClick", __props.modelValue);
+    };
+    const handleCompositionStart = (event) => {
+      emit("compositionstart", event);
+      isComposing.value = true;
+    };
+    const isKorean = (text) => /([(\uAC00-\uD7AF)|\u3130-\u318F])+/.test(text);
+    const handleCompositionUpdate = (event) => {
+      emit("compositionupdate", event);
+      const text = event.target?.value;
+      const lastCharacter = text[text.length - 1] || "";
+      isComposing.value = !isKorean(lastCharacter);
+    };
+    const handleCompositionEnd = (event) => {
+      emit("compositionend", event);
+      if (isComposing.value) {
+        isComposing.value = false;
+        handleInput(event);
+      }
+    };
+    const handlePasswordVisible = () => {
+      passwordVisible.value = !passwordVisible.value;
+      focus();
+    };
+    const focus = async () => {
+      await nextTick();
+      _ref.value?.focus();
+    };
+    const blur = () => _ref.value?.blur();
+    const handleFocus = (event) => {
+      focused.value = true;
+      emit("focus", event);
+    };
+    const handleBlur = (event) => {
+      focused.value = false;
+      emit("blur", event);
+      if (__props.validateEvent) {
+        formItem?.validate?.("blur").catch((err) => debugWarn(err));
+      }
+    };
+    const handleMouseLeave = (evt) => {
+      hovering.value = false;
+      emit("mouseleave", evt);
+    };
+    const handleMouseEnter = (evt) => {
+      hovering.value = true;
+      emit("mouseenter", evt);
+    };
+    const handleKeydown = (evt) => {
+      let key = evt.key;
+      if (evt.target.type === "number") {
+        const forbidKey = ["e", "+", "-0", "E"];
+        if (forbidKey.includes(key)) {
+          evt.returnValue = false;
+          return false;
         }
-        s(Q, n), s("input", n), await E(), z(), Ae();
       }
-    }, ne = (t) => {
-      s("change", t.target.value);
-    }, Fe = () => {
-      s("suffixClick", e.modelValue);
-    }, Me = () => {
-      s("prefixClick", e.modelValue);
-    }, le = (t) => {
-      s("compositionstart", t), C.value = !0;
-    }, Ke = (t) => /([(\uAC00-\uD7AF)|\u3130-\u318F])+/.test(t), se = (t) => {
-      s("compositionupdate", t);
-      const n = t.target?.value, p = n[n.length - 1] || "";
-      C.value = !Ke(p);
-    }, ie = (t) => {
-      s("compositionend", t), C.value && (C.value = !1, W(t));
-    }, Pe = () => {
-      K.value = !K.value, ue();
-    }, ue = async () => {
-      await E(), k.value?.focus();
-    }, Re = () => k.value?.blur(), re = (t) => {
-      v.value = !0, s("focus", t);
-    }, ce = (t) => {
-      v.value = !1, s("blur", t), e.validateEvent && F?.validate?.("blur").catch((n) => J(n));
-    }, $e = (t) => {
-      N.value = !1, s("mouseleave", t);
-    }, De = (t) => {
-      N.value = !0, s("mouseenter", t);
-    }, de = (t) => {
-      let n = t.key;
-      if (t.target.type === "number" && ["e", "+", "-0", "E"].includes(n))
-        return t.returnValue = !1, !1;
-      s("keydown", t);
-    }, Ne = () => {
-      k.value?.select();
-    }, fe = () => {
-      s(Q, ""), s("change", ""), s("clear"), s("input", "");
+      emit("keydown", evt);
+    };
+    const select = () => {
+      _ref.value?.select();
     };
-    return U(
-      () => e.modelValue,
+    const clear = () => {
+      emit(UPDATE_MODEL_EVENT, "");
+      emit("change", "");
+      emit("clear");
+      emit("input", "");
+    };
+    watch(
+      () => __props.modelValue,
       () => {
-        E(() => R()), e.validateEvent && F?.validate?.("change").catch((t) => J(t));
+        nextTick(() => resizeTextarea());
+        if (__props.validateEvent) {
+          formItem?.validate?.("change").catch((err) => debugWarn(err));
+        }
       }
-    ), U(f, () => z()), U(
-      () => e.type,
+    );
+    watch(nativeInputValue, () => setNativeInputValue());
+    watch(
+      () => __props.type,
       async () => {
-        await E(), z(), R();
+        await nextTick();
+        setNativeInputValue();
+        resizeTextarea();
+      }
+    );
+    onMounted(() => {
+      if (!__props.formatter && __props.parser) {
+        debugWarn(
+          "VftInput",
+          "If you set the parser, you also need to set the formatter."
+        );
       }
-    ), We(() => {
-      !e.formatter && e.parser && J(
-        "VftInput",
-        "If you set the parser, you also need to set the formatter."
-      ), z(), E(R);
-    }), he({
+      setNativeInputValue();
+      nextTick(resizeTextarea);
+    });
+    __expose({
       /** @description HTML input element */
-      input: M,
+      input,
       /** @description HTML textarea element */
-      textarea: b,
+      textarea,
       /** @description HTML element, input or textarea */
-      ref: k,
+      ref: _ref,
       /** @description style of textarea. */
-      textareaStyle: oe,
+      textareaStyle,
       /** @description from props (used on unit test) */
-      autosize: e.autosize,
+      autosize: __props.autosize,
       /** @description HTML input element native method */
-      focus: ue,
+      focus,
       /** @description HTML input element native method */
-      blur: Re,
+      blur,
       /** @description HTML input element native method */
-      select: Ne,
+      select,
       /** @description clear input value */
-      clear: fe,
+      clear,
       /** @description resize textarea. */
-      resizeTextarea: R
-    }), (t, n) => He((i(), c("div", y(X.value, {
-      class: we.value,
-      style: Se.value,
-      role: t.containerRole,
-      onMouseenter: De,
-      onMouseleave: $e,
-      onMousewheel: n[1] || (n[1] = (p) => t.type === "number" && v.value ? p.preventDefault() : null)
-    }), [
-      t.type !== "textarea" ? (i(), c(q, { key: 0 }, [
-        t.$slots.prepend ? (i(), c("div", {
-          key: 0,
-          class: r(a(o).be("group", "prepend"))
-        }, [
-          $(t.$slots, "prepend")
-        ], 2)) : u("", !0),
-        x("div", {
-          class: r(ge.value)
-        }, [
-          t.$slots.prefix || T.value?.icon ? (i(), c("span", {
+      resizeTextarea
+    });
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock("div", mergeProps(containerAttrs.value, {
+        class: containerKls.value,
+        style: containerStyle.value,
+        role: _ctx.containerRole,
+        onMouseenter: handleMouseEnter,
+        onMouseleave: handleMouseLeave,
+        onMousewheel: _cache[1] || (_cache[1] = ($event) => _ctx.type === "number" && focused.value ? $event.preventDefault() : null)
+      }), [
+        _ctx.type !== "textarea" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          _ctx.$slots.prepend ? (openBlock(), createElementBlock("div", {
             key: 0,
-            class: r(a(o).e("prefix"))
+            class: normalizeClass(unref(nsInput).be("group", "prepend"))
           }, [
-            x("span", {
-              class: r(a(o).e("prefix-inner")),
-              onClick: Me
-            }, [
-              $(t.$slots, "prefix"),
-              T.value?.icon ? (i(), V(a(B), y({
-                key: 0,
-                pointer: ""
-              }, T.value, {
-                class: a(o).e("icon")
-              }), null, 16, ["class"])) : u("", !0)
-            ], 2)
-          ], 2)) : u("", !0),
-          x("input", y({
-            id: a(Y),
-            ref_key: "input",
-            ref: M,
-            class: a(o).e("inner")
-          }, a(d), {
-            type: t.showPassword ? K.value ? "text" : "password" : t.type,
-            disabled: a(h),
-            formatter: t.formatter,
-            parser: t.parser,
-            readonly: t.readonly,
-            autocomplete: t.autocomplete,
-            tabindex: t.tabindex,
-            "aria-label": t.label,
-            placeholder: t.placeholder,
-            style: t.inputStyle,
-            form: t.form,
-            onCompositionstart: le,
-            onCompositionupdate: se,
-            onCompositionend: ie,
-            onInput: W,
-            onFocus: re,
-            onBlur: ce,
-            onChange: ne,
-            onKeydown: de,
-            onKeyup: n[0] || (n[0] = Ue((p) => s("enter"), ["enter"]))
-          }), null, 16, lt),
-          Ve.value ? (i(), c("span", {
-            key: 1,
-            class: r(a(o).e("suffix"))
+            renderSlot(_ctx.$slots, "prepend")
+          ], 2)) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass(wrapperKls.value)
           }, [
-            x("span", {
-              class: r(a(o).e("suffix-inner")),
-              onClick: Fe
+            _ctx.$slots.prefix || _prefixIcon.value?.icon ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(unref(nsInput).e("prefix"))
             }, [
-              !P.value || !L.value || !w.value ? (i(), c(q, { key: 0 }, [
-                $(t.$slots, "suffix"),
-                ee.value?.icon ? (i(), V(a(B), y({ key: 0 }, ee.value, {
-                  class: a(o).e("icon")
-                }), null, 16, ["class"])) : u("", !0)
-              ], 64)) : u("", !0),
-              P.value ? (i(), V(a(B), y({
-                key: 1,
-                pointer: "",
-                class: [a(o).e("icon"), a(o).e("clear")]
-              }, Ie.value, {
-                onMousedown: me(a(Xe), ["prevent"]),
-                onClick: me(fe, ["stop"])
-              }), null, 16, ["class", "onMousedown"])) : u("", !0),
-              L.value ? (i(), V(a(B), y({ key: 2 }, ze.value, {
-                class: [a(o).e("icon"), a(o).e("password")],
-                onClick: Pe
-              }), null, 16, ["class"])) : u("", !0),
-              w.value ? (i(), c("span", {
-                key: 3,
-                class: r(a(o).e("count"))
+              createElementVNode("span", {
+                class: normalizeClass(unref(nsInput).e("prefix-inner")),
+                onClick: handlePrefixClick
               }, [
-                x("span", {
-                  class: r(a(o).e("count-inner"))
-                }, D(j.value) + " / " + D(a(d).maxlength), 3)
-              ], 2)) : u("", !0),
-              I.value && ae.value && te.value ? (i(), V(a(B), {
-                key: 4,
-                icon: ae.value,
-                class: r([
-                  a(o).e("icon"),
-                  a(o).e("validateIcon"),
-                  a(o).is("loading", I.value === "validating")
-                ])
-              }, null, 8, ["icon", "class"])) : u("", !0)
-            ], 2)
-          ], 2)) : u("", !0)
-        ], 2),
-        t.$slots.append ? (i(), c("div", {
-          key: 1,
-          class: r(a(o).be("group", "append"))
-        }, [
-          $(t.$slots, "append")
-        ], 2)) : u("", !0)
-      ], 64)) : (i(), c(q, { key: 1 }, [
-        x("textarea", y({
-          id: a(Y),
-          ref_key: "textarea",
-          ref: b,
-          class: a(Z).e("inner")
-        }, a(d), {
-          tabindex: t.tabindex,
-          disabled: a(h),
-          readonly: t.readonly,
-          autocomplete: t.autocomplete,
-          style: oe.value,
-          "aria-label": t.label,
-          placeholder: t.placeholder,
-          form: t.form,
-          onCompositionstart: le,
-          onCompositionupdate: se,
-          onCompositionend: ie,
-          onInput: W,
-          onFocus: re,
-          onBlur: ce,
-          onChange: ne,
-          onKeydown: de
-        }), null, 16, st),
-        w.value ? (i(), c("span", {
-          key: 0,
-          style: qe(_.value),
-          class: r(a(o).e("count"))
-        }, D(j.value) + " / " + D(a(d).maxlength), 7)) : u("", !0)
-      ], 64))
-    ], 16, nt)), [
-      [Ge, t.type !== "hidden"]
-    ]);
+                renderSlot(_ctx.$slots, "prefix"),
+                _prefixIcon.value?.icon ? (openBlock(), createBlock(unref(VftIcon), mergeProps({
+                  key: 0,
+                  pointer: ""
+                }, _prefixIcon.value, {
+                  class: unref(nsInput).e("icon")
+                }), null, 16, ["class"])) : createCommentVNode("", true)
+              ], 2)
+            ], 2)) : createCommentVNode("", true),
+            createElementVNode("input", mergeProps({
+              id: unref(inputId),
+              ref_key: "input",
+              ref: input,
+              class: unref(nsInput).e("inner")
+            }, unref(attrs), {
+              type: _ctx.showPassword ? passwordVisible.value ? "text" : "password" : _ctx.type,
+              disabled: unref(inputDisabled),
+              formatter: _ctx.formatter,
+              parser: _ctx.parser,
+              readonly: _ctx.readonly,
+              autocomplete: _ctx.autocomplete,
+              tabindex: _ctx.tabindex,
+              "aria-label": _ctx.label,
+              placeholder: _ctx.placeholder,
+              style: _ctx.inputStyle,
+              form: _ctx.form,
+              onCompositionstart: handleCompositionStart,
+              onCompositionupdate: handleCompositionUpdate,
+              onCompositionend: handleCompositionEnd,
+              onInput: handleInput,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onChange: handleChange,
+              onKeydown: handleKeydown,
+              onKeyup: _cache[0] || (_cache[0] = withKeys(($event) => emit("enter"), ["enter"]))
+            }), null, 16, _hoisted_2),
+            suffixVisible.value ? (openBlock(), createElementBlock("span", {
+              key: 1,
+              class: normalizeClass(unref(nsInput).e("suffix"))
+            }, [
+              createElementVNode("span", {
+                class: normalizeClass(unref(nsInput).e("suffix-inner")),
+                onClick: handleSuffixClick
+              }, [
+                !showClear.value || !showPwdVisible.value || !isWordLimitVisible.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                  renderSlot(_ctx.$slots, "suffix"),
+                  _suffixIcon.value?.icon ? (openBlock(), createBlock(unref(VftIcon), mergeProps({ key: 0 }, _suffixIcon.value, {
+                    class: unref(nsInput).e("icon")
+                  }), null, 16, ["class"])) : createCommentVNode("", true)
+                ], 64)) : createCommentVNode("", true),
+                showClear.value ? (openBlock(), createBlock(unref(VftIcon), mergeProps({
+                  key: 1,
+                  pointer: "",
+                  class: [unref(nsInput).e("icon"), unref(nsInput).e("clear")]
+                }, _clearIcon.value, {
+                  onMousedown: withModifiers(unref(noop), ["prevent"]),
+                  onClick: withModifiers(clear, ["stop"])
+                }), null, 16, ["class", "onMousedown"])) : createCommentVNode("", true),
+                showPwdVisible.value ? (openBlock(), createBlock(unref(VftIcon), mergeProps({ key: 2 }, passwordIcon.value, {
+                  class: [unref(nsInput).e("icon"), unref(nsInput).e("password")],
+                  onClick: handlePasswordVisible
+                }), null, 16, ["class"])) : createCommentVNode("", true),
+                isWordLimitVisible.value ? (openBlock(), createElementBlock("span", {
+                  key: 3,
+                  class: normalizeClass(unref(nsInput).e("count"))
+                }, [
+                  createElementVNode("span", {
+                    class: normalizeClass(unref(nsInput).e("count-inner"))
+                  }, toDisplayString(textLength.value) + " / " + toDisplayString(unref(attrs).maxlength), 3)
+                ], 2)) : createCommentVNode("", true),
+                validateState.value && validateIcon.value && needStatusIcon.value ? (openBlock(), createBlock(unref(VftIcon), {
+                  key: 4,
+                  icon: validateIcon.value,
+                  class: normalizeClass([
+                    unref(nsInput).e("icon"),
+                    unref(nsInput).e("validateIcon"),
+                    unref(nsInput).is("loading", validateState.value === "validating")
+                  ])
+                }, null, 8, ["icon", "class"])) : createCommentVNode("", true)
+              ], 2)
+            ], 2)) : createCommentVNode("", true)
+          ], 2),
+          _ctx.$slots.append ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass(unref(nsInput).be("group", "append"))
+          }, [
+            renderSlot(_ctx.$slots, "append")
+          ], 2)) : createCommentVNode("", true)
+        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          createElementVNode("textarea", mergeProps({
+            id: unref(inputId),
+            ref_key: "textarea",
+            ref: textarea,
+            class: unref(nsTextarea).e("inner")
+          }, unref(attrs), {
+            tabindex: _ctx.tabindex,
+            disabled: unref(inputDisabled),
+            readonly: _ctx.readonly,
+            autocomplete: _ctx.autocomplete,
+            style: textareaStyle.value,
+            "aria-label": _ctx.label,
+            placeholder: _ctx.placeholder,
+            form: _ctx.form,
+            onCompositionstart: handleCompositionStart,
+            onCompositionupdate: handleCompositionUpdate,
+            onCompositionend: handleCompositionEnd,
+            onInput: handleInput,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onChange: handleChange,
+            onKeydown: handleKeydown
+          }), null, 16, _hoisted_3),
+          isWordLimitVisible.value ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            style: normalizeStyle(countStyle.value),
+            class: normalizeClass(unref(nsInput).e("count"))
+          }, toDisplayString(textLength.value) + " / " + toDisplayString(unref(attrs).maxlength), 7)) : createCommentVNode("", true)
+        ], 64))
+      ], 16, _hoisted_1)), [
+        [vShow, _ctx.type !== "hidden"]
+      ]);
+    };
   }
 });
 export {
-  It as default
+  _sfc_main as default
 };