vft 0.0.373 → 0.0.375

package/lib/components/input/index.cjs

@@ -1 +1,12 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("@vueuse/core");require("@vft/utils");require("../config-provider/hooks/use-global-config.cjs");require("vue");const t=require("../../utils/vue/install.cjs");require("lodash-es");const u=require("./input.vue2.cjs"),e=t.withInstall(u.default);exports.VftInput=e;exports.default=e;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+require("@vueuse/core");
+require("@vft/utils");
+require("../config-provider/hooks/use-global-config.cjs");
+require("vue");
+const install = require("../../utils/vue/install.cjs");
+require("lodash-es");
+const input_vue_vue_type_script_setup_true_lang = require("./input.vue2.cjs");
+const VftInput = install.withInstall(input_vue_vue_type_script_setup_true_lang.default);
+exports.VftInput = VftInput;
+exports.default = VftInput;

package/lib/components/input/input.vue.cjs

@@ -1 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./input.vue2.cjs");exports.default=e.default;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const input_vue_vue_type_script_setup_true_lang = require("./input.vue2.cjs");
+exports.default = input_vue_vue_type_script_setup_true_lang.default;

package/lib/components/input/input.vue2.cjs

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

package/lib/components/input/style/css.cjs

@@ -1 +1,3 @@
-"use strict";require("vft/theme-style/base.css");require("vft/theme-style/vft-input.css");
+"use strict";
+require("vft/theme-style/base.css");
+require("vft/theme-style/vft-input.css");

package/lib/components/input/style/index.cjs

@@ -1 +1,3 @@
-"use strict";require("vft/theme-style/src/base.scss");require("vft/theme-style/src/input.scss");
+"use strict";
+require("vft/theme-style/src/base.scss");
+require("vft/theme-style/src/input.scss");

package/lib/components/input/utils.cjs

@@ -1,4 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@vft/utils");let t;const b=`
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils = require("@vft/utils");
+let hiddenTextarea = void 0;
+const HIDDEN_STYLE = `
   height:0 !important;
   visibility:hidden !important;
   overflow:hidden !important;
@@ -6,4 +10,69 @@
   z-index:-1000 !important;
   top:0 !important;
   right:0 !important;
-`,h=["letter-spacing","line-height","padding-top","padding-bottom","font-family","font-weight","font-size","text-rendering","text-transform","width","text-indent","padding-left","padding-right","border-width","box-sizing"];function u(n){const e=window.getComputedStyle(n),l=e.getPropertyValue("box-sizing"),r=Number.parseFloat(e.getPropertyValue("padding-bottom"))+Number.parseFloat(e.getPropertyValue("padding-top")),a=Number.parseFloat(e.getPropertyValue("border-bottom-width"))+Number.parseFloat(e.getPropertyValue("border-top-width"));return{contextStyle:h.map(p=>`${p}:${e.getPropertyValue(p)}`).join(";"),paddingSize:r,borderSize:a,boxSizing:l}}function m(n,e=1,l){t||(t=document.createElement("textarea"),document.body.appendChild(t));const{paddingSize:r,borderSize:a,boxSizing:d,contextStyle:p}=u(n);t.setAttribute("style",`${p};${b}`),t.value=n.value||n.placeholder||"";let i=t.scrollHeight;const g={};d==="border-box"?i=i+a:d==="content-box"&&(i=i-r),t.value="";const s=t.scrollHeight-r;if(c.isNumber(e)){let o=s*e;d==="border-box"&&(o=o+r+a),i=Math.max(o,i),g.minHeight=`${o}px`}if(c.isNumber(l)){let o=s*l;d==="border-box"&&(o=o+r+a),i=Math.min(o,i)}return g.height=`${i}px`,t.parentNode?.removeChild(t),t=void 0,g}exports.calcTextareaHeight=m;
+`;
+const CONTEXT_STYLE = [
+  "letter-spacing",
+  "line-height",
+  "padding-top",
+  "padding-bottom",
+  "font-family",
+  "font-weight",
+  "font-size",
+  "text-rendering",
+  "text-transform",
+  "width",
+  "text-indent",
+  "padding-left",
+  "padding-right",
+  "border-width",
+  "box-sizing"
+];
+function calculateNodeStyling(targetElement) {
+  const style = window.getComputedStyle(targetElement);
+  const boxSizing = style.getPropertyValue("box-sizing");
+  const paddingSize = Number.parseFloat(style.getPropertyValue("padding-bottom")) + Number.parseFloat(style.getPropertyValue("padding-top"));
+  const borderSize = Number.parseFloat(style.getPropertyValue("border-bottom-width")) + Number.parseFloat(style.getPropertyValue("border-top-width"));
+  const contextStyle = CONTEXT_STYLE.map(
+    (name) => `${name}:${style.getPropertyValue(name)}`
+  ).join(";");
+  return { contextStyle, paddingSize, borderSize, boxSizing };
+}
+function calcTextareaHeight(targetElement, minRows = 1, maxRows) {
+  if (!hiddenTextarea) {
+    hiddenTextarea = document.createElement("textarea");
+    document.body.appendChild(hiddenTextarea);
+  }
+  const { paddingSize, borderSize, boxSizing, contextStyle } = calculateNodeStyling(targetElement);
+  hiddenTextarea.setAttribute("style", `${contextStyle};${HIDDEN_STYLE}`);
+  hiddenTextarea.value = targetElement.value || targetElement.placeholder || "";
+  let height = hiddenTextarea.scrollHeight;
+  const result = {};
+  if (boxSizing === "border-box") {
+    height = height + borderSize;
+  } else if (boxSizing === "content-box") {
+    height = height - paddingSize;
+  }
+  hiddenTextarea.value = "";
+  const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
+  if (utils.isNumber(minRows)) {
+    let minHeight = singleRowHeight * minRows;
+    if (boxSizing === "border-box") {
+      minHeight = minHeight + paddingSize + borderSize;
+    }
+    height = Math.max(minHeight, height);
+    result.minHeight = `${minHeight}px`;
+  }
+  if (utils.isNumber(maxRows)) {
+    let maxHeight = singleRowHeight * maxRows;
+    if (boxSizing === "border-box") {
+      maxHeight = maxHeight + paddingSize + borderSize;
+    }
+    height = Math.min(maxHeight, height);
+  }
+  result.height = `${height}px`;
+  hiddenTextarea.parentNode?.removeChild(hiddenTextarea);
+  hiddenTextarea = void 0;
+  return result;
+}
+exports.calcTextareaHeight = calcTextareaHeight;