element-pe 1.0.2 → 1.0.6

package/es/components/input/index.js

@@ -1,13 +1,15 @@
-import { defineComponent, getCurrentInstance, inject, ref, shallowRef, computed, watch, nextTick, onMounted, onUpdated, openBlock, createElementBlock, normalizeClass, normalizeStyle, Fragment, createCommentVNode, renderSlot, mergeProps, createElementVNode, withModifiers, toDisplayString } from 'vue';
-import { elFormKey, elFormItemKey } from 'element-plus/es/tokens';
-import { useAttrs } from 'element-plus/es/hooks';
-import { UPDATE_MODEL_EVENT, VALIDATE_STATE_MAP } from 'element-plus/es/utils/constants';
-import { useGlobalConfig, isObject } from 'element-plus/es/utils/util';
-import isServer from 'element-plus/es/utils/isServer';
-import { isKorean } from 'element-plus/es/utils/isDef';
-import { isValidComponentSize } from 'element-plus/es/utils/validators';
+import { withInstall } from 'element-pe/es/utils/with-install';
+import { defineComponent, getCurrentInstance, inject, ref, shallowRef, computed, watch, nextTick, onMounted, onUpdated, openBlock, createElementBlock, normalizeClass, normalizeStyle, createCommentVNode, Fragment, renderSlot, createElementVNode, mergeProps, withModifiers, toDisplayString } from 'vue';
+import { elFormKey, elFormItemKey } from 'element-pe/es/tokens';
+import { useFormItemProps, useAttrs, useFormItem } from 'element-pe/es/hooks';
+import { UPDATE_MODEL_EVENT, VALIDATE_STATE_MAP } from 'element-pe/es/utils/constants';
+import { isNumber, isObject } from 'element-pe/es/utils/util';
+import isServer from 'element-pe/es/utils/isServer';
+import { isKorean } from 'element-pe/es/utils/isDef';
+import { isString } from '@vue/shared';
+import { buildProps, definePropType, mutable } from 'element-pe/es/utils/props';
 
-let hiddenTextarea;
+let hiddenTextarea = void 0;
 const HIDDEN_STYLE = `
   height:0 !important;
   visibility:hidden !important;
@@ -42,7 +44,7 @@ function calculateNodeStyling(targetElement) {
   const contextStyle = CONTEXT_STYLE.map((name) => `${name}:${style.getPropertyValue(name)}`).join(";");
   return { contextStyle, paddingSize, borderSize, boxSizing };
 }
-function calcTextareaHeight(targetElement, minRows = 1, maxRows = null) {
+function calcTextareaHeight(targetElement, minRows = 1, maxRows) {
   var _a;
   if (!hiddenTextarea) {
     hiddenTextarea = document.createElement("textarea");
@@ -60,7 +62,7 @@ function calcTextareaHeight(targetElement, minRows = 1, maxRows = null) {
   }
   hiddenTextarea.value = "";
   const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
-  if (minRows !== null) {
+  if (isNumber(minRows)) {
     let minHeight = singleRowHeight * minRows;
     if (boxSizing === "border-box") {
       minHeight = minHeight + paddingSize + borderSize;
@@ -68,7 +70,7 @@ function calcTextareaHeight(targetElement, minRows = 1, maxRows = null) {
     height = Math.max(minHeight, height);
     result.minHeight = `${minHeight}px`;
   }
-  if (maxRows !== null) {
+  if (isNumber(maxRows)) {
     let maxHeight = singleRowHeight * maxRows;
     if (boxSizing === "border-box") {
       maxHeight = maxHeight + paddingSize + borderSize;
@@ -77,13 +79,118 @@ function calcTextareaHeight(targetElement, minRows = 1, maxRows = null) {
   }
   result.height = `${height}px`;
   (_a = hiddenTextarea.parentNode) == null ? void 0 : _a.removeChild(hiddenTextarea);
-  hiddenTextarea = null;
+  hiddenTextarea = void 0;
   return result;
 }
 
-var __defProp = Object.defineProperty;
+var __defProp$1 = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const inputProps = buildProps(__spreadProps(__spreadValues$1({}, useFormItemProps), {
+  modelValue: {
+    type: definePropType(void 0),
+    default: ""
+  },
+  type: {
+    type: String,
+    default: "text"
+  },
+  resize: {
+    type: String,
+    values: ["none", "both", "horizontal", "vertical"]
+  },
+  autosize: {
+    type: definePropType([Boolean, Object]),
+    default: false
+  },
+  autocomplete: {
+    type: String,
+    default: "off"
+  },
+  placeholder: {
+    type: String
+  },
+  form: {
+    type: String,
+    default: ""
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  showPassword: {
+    type: Boolean,
+    default: false
+  },
+  showWordLimit: {
+    type: Boolean,
+    default: false
+  },
+  suffixIcon: {
+    type: String,
+    default: ""
+  },
+  prefixIcon: {
+    type: String,
+    default: ""
+  },
+  label: {
+    type: String
+  },
+  tabindex: {
+    type: [Number, String]
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true
+  },
+  inputStyle: {
+    type: definePropType([Object, Array, String]),
+    default: () => mutable({})
+  },
+  maxlength: {
+    type: [Number, String]
+  },
+  widget: {
+    type: String
+  }
+}));
+const inputEmits = {
+  [UPDATE_MODEL_EVENT]: (value) => isString(value),
+  input: (value) => isString(value),
+  change: (value) => isString(value),
+  focus: (evt) => evt instanceof FocusEvent,
+  blur: (evt) => evt instanceof FocusEvent,
+  clear: () => true,
+  mouseleave: (evt) => evt instanceof MouseEvent,
+  mouseenter: (evt) => evt instanceof MouseEvent,
+  keydown: (evt) => evt instanceof KeyboardEvent,
+  compositionstart: (evt) => evt instanceof CompositionEvent,
+  compositionupdate: (evt) => evt instanceof CompositionEvent,
+  compositionend: (evt) => evt instanceof CompositionEvent
+};
+
+var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -99,7 +206,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const PENDANT_MAP = {
   suffix: "append",
   prefix: "prepend"
@@ -107,139 +213,40 @@ const PENDANT_MAP = {
 var script = defineComponent({
   name: "ElInput",
   inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: ""
-    },
-    type: {
-      type: String,
-      default: "text"
-    },
-    size: {
-      type: String,
-      validator: isValidComponentSize
-    },
-    resize: {
-      type: String,
-      validator: (val) => ["none", "both", "horizontal", "vertical"].includes(val)
-    },
-    autosize: {
-      type: [Boolean, Object],
-      default: false
-    },
-    autocomplete: {
-      type: String,
-      default: "off"
-    },
-    placeholder: {
-      type: String
-    },
-    form: {
-      type: String,
-      default: ""
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    clearable: {
-      type: Boolean,
-      default: false
-    },
-    showPassword: {
-      type: Boolean,
-      default: false
-    },
-    showWordLimit: {
-      type: Boolean,
-      default: false
-    },
-    suffixIcon: {
-      type: String,
-      default: ""
-    },
-    prefixIcon: {
-      type: String,
-      default: ""
-    },
-    label: {
-      type: String
-    },
-    tabindex: {
-      type: [Number, String]
-    },
-    validateEvent: {
-      type: Boolean,
-      default: true
-    },
-    inputStyle: {
-      type: Object,
-      default: () => ({})
-    },
-    maxlength: {
-      type: [Number, String]
-    },
-    widget: {
-      type: String
-    }
-  },
-  emits: [
-    UPDATE_MODEL_EVENT,
-    "input",
-    "change",
-    "focus",
-    "blur",
-    "clear",
-    "mouseleave",
-    "mouseenter",
-    "keydown",
-    "compositionstart",
-    "compositionupdate",
-    "compositionend"
-  ],
-  setup(props, ctx) {
+  props: inputProps,
+  emits: inputEmits,
+  setup(props, { slots, emit, attrs: rawAttrs }) {
     const instance = getCurrentInstance();
     const attrs = useAttrs();
-    const $ELEMENT = useGlobalConfig();
-    const elForm = inject(elFormKey, {});
-    const elFormItem = inject(elFormItemKey, {});
-    const input = ref(null);
-    const textarea = ref(null);
+    const elForm = inject(elFormKey, void 0);
+    const elFormItem = inject(elFormItemKey, void 0);
+    const { size: inputSize, disabled: inputDisabled } = useFormItem({});
+    const input = ref();
+    const textarea = ref();
     const focused = ref(false);
     const hovering = ref(false);
     const isComposing = ref(false);
     const passwordVisible = ref(false);
     const _textareaCalcStyle = shallowRef(props.inputStyle);
     const inputOrTextarea = computed(() => input.value || textarea.value);
-    const inputSize = computed(() => props.size || elFormItem.size || $ELEMENT.size);
-    const needStatusIcon = computed(() => elForm.statusIcon);
-    const validateState = computed(() => elFormItem.validateState || "");
+    const needStatusIcon = computed(() => {
+      var _a;
+      return (_a = elForm == null ? void 0 : elForm.statusIcon) != null ? _a : false;
+    });
+    const validateState = computed(() => (elFormItem == null ? void 0 : elFormItem.validateState) || "");
     const validateIcon = computed(() => VALIDATE_STATE_MAP[validateState.value]);
-    const computedTextareaStyle = computed(() => __spreadProps(__spreadValues(__spreadValues({}, props.inputStyle), _textareaCalcStyle.value), {
-      resize: props.resize
-    }));
-    const inputDisabled = computed(() => props.disabled || elForm.disabled);
+    const containerStyle = computed(() => rawAttrs.style);
+    const computedTextareaStyle = computed(() => [
+      props.inputStyle,
+      _textareaCalcStyle.value,
+      { resize: props.resize }
+    ]);
     const nativeInputValue = computed(() => props.modelValue === null || props.modelValue === void 0 ? "" : String(props.modelValue));
-    const showClear = computed(() => {
-      return props.clearable && !inputDisabled.value && !props.readonly && nativeInputValue.value && (focused.value || hovering.value);
-    });
-    const showPwdVisible = computed(() => {
-      return props.showPassword && !inputDisabled.value && !props.readonly && (!!nativeInputValue.value || focused.value);
-    });
-    const isWordLimitVisible = computed(() => {
-      return props.showWordLimit && props.maxlength && (props.type === "text" || props.type === "textarea") && !inputDisabled.value && !props.readonly && !props.showPassword;
-    });
-    const textLength = computed(() => {
-      return Array.from(nativeInputValue.value).length;
-    });
-    const inputExceed = computed(() => {
-      return isWordLimitVisible.value && textLength.value > Number(props.maxlength);
-    });
+    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 || focused.value));
+    const isWordLimitVisible = computed(() => props.showWordLimit && !!props.maxlength && (props.type === "text" || props.type === "textarea") && !inputDisabled.value && !props.readonly && !props.showPassword);
+    const textLength = computed(() => Array.from(nativeInputValue.value).length);
+    const inputExceed = computed(() => !!isWordLimitVisible.value && textLength.value > Number(props.maxlength));
     const resizeTextarea = () => {
       const { type, autosize } = props;
       if (isServer || type !== "textarea")
@@ -262,12 +269,14 @@ var script = defineComponent({
     };
     const calcIconOffset = (place) => {
       const { el } = instance.vnode;
+      if (!el)
+        return;
       const elList = Array.from(el.querySelectorAll(`.el-input__${place}`));
       const target = elList.find((item) => item.parentNode === el);
       if (!target)
         return;
       const pendant = PENDANT_MAP[place];
-      if (ctx.slots[pendant]) {
+      if (slots[pendant]) {
         target.style.transform = `translateX(${place === "suffix" ? "-" : ""}${el.querySelector(`.el-input-group__${pendant}`).offsetWidth}px)`;
       } else {
         target.removeAttribute("style");
@@ -287,77 +296,76 @@ var script = defineComponent({
         const sliceIndex = inputExceed.value ? textLength.value : props.maxlength;
         value = Array.from(value).slice(0, Number(sliceIndex)).join("");
       }
-      ctx.emit(UPDATE_MODEL_EVENT, value);
-      ctx.emit("input", value);
+      emit(UPDATE_MODEL_EVENT, value);
+      emit("input", value);
       nextTick(setNativeInputValue);
     };
     const handleChange = (event) => {
-      ctx.emit("change", event.target.value);
+      emit("change", event.target.value);
     };
     const focus = () => {
       nextTick(() => {
-        inputOrTextarea.value.focus();
+        var _a;
+        (_a = inputOrTextarea.value) == null ? void 0 : _a.focus();
       });
     };
     const blur = () => {
-      inputOrTextarea.value.blur();
+      var _a;
+      (_a = inputOrTextarea.value) == null ? void 0 : _a.blur();
     };
     const handleFocus = (event) => {
       focused.value = true;
-      ctx.emit("focus", event);
+      emit("focus", event);
     };
     const handleBlur = (event) => {
       var _a;
       focused.value = false;
-      ctx.emit("blur", event);
+      emit("blur", event);
       if (props.validateEvent) {
-        (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "blur");
+        (_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "blur");
       }
     };
     const select = () => {
-      inputOrTextarea.value.select();
+      var _a;
+      (_a = inputOrTextarea.value) == null ? void 0 : _a.select();
     };
     const handleCompositionStart = (event) => {
-      ctx.emit("compositionstart", event);
+      emit("compositionstart", event);
       isComposing.value = true;
     };
     const handleCompositionUpdate = (event) => {
       var _a;
-      ctx.emit("compositionupdate", event);
+      emit("compositionupdate", event);
       const text = (_a = event.target) == null ? void 0 : _a.value;
       const lastCharacter = text[text.length - 1] || "";
       isComposing.value = !isKorean(lastCharacter);
     };
     const handleCompositionEnd = (event) => {
-      ctx.emit("compositionend", event);
+      emit("compositionend", event);
       if (isComposing.value) {
         isComposing.value = false;
         handleInput(event);
       }
     };
     const clear = () => {
-      ctx.emit(UPDATE_MODEL_EVENT, "");
-      ctx.emit("change", "");
-      ctx.emit("clear");
-      ctx.emit("input", "");
+      emit(UPDATE_MODEL_EVENT, "");
+      emit("change", "");
+      emit("clear");
+      emit("input", "");
     };
     const handlePasswordVisible = () => {
       passwordVisible.value = !passwordVisible.value;
       focus();
     };
-    const getSuffixVisible = () => {
-      return ctx.slots.suffix || props.suffixIcon || showClear.value || props.showPassword || isWordLimitVisible.value || validateState.value && needStatusIcon.value;
-    };
+    const suffixVisible = computed(() => !!slots.suffix || !!props.suffixIcon || showClear.value || props.showPassword || isWordLimitVisible.value || !!validateState.value && needStatusIcon.value);
     watch(() => props.modelValue, () => {
       var _a;
       nextTick(resizeTextarea);
       if (props.validateEvent) {
-        (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change");
+        (_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change");
       }
     });
-    watch(nativeInputValue, () => {
-      setNativeInputValue();
-    });
+    watch(nativeInputValue, () => setNativeInputValue());
     watch(() => props.type, () => {
       nextTick(() => {
         setNativeInputValue();
@@ -373,16 +381,16 @@ var script = defineComponent({
     onUpdated(() => {
       nextTick(updateIconOffset);
     });
-    const onMouseLeave = (e) => {
+    const onMouseLeave = (evt) => {
       hovering.value = false;
-      ctx.emit("mouseleave", e);
+      emit("mouseleave", evt);
     };
-    const onMouseEnter = (e) => {
+    const onMouseEnter = (evt) => {
       hovering.value = true;
-      ctx.emit("mouseenter", e);
+      emit("mouseenter", evt);
     };
-    const handleKeydown = (e) => {
-      ctx.emit("keydown", e);
+    const handleKeydown = (evt) => {
+      emit("keydown", evt);
     };
     return {
       input,
@@ -391,8 +399,8 @@ var script = defineComponent({
       inputSize,
       validateState,
       validateIcon,
+      containerStyle,
       computedTextareaStyle,
-      resizeTextarea,
       inputDisabled,
       showClear,
       showPwdVisible,
@@ -402,6 +410,8 @@ var script = defineComponent({
       inputExceed,
       passwordVisible,
       inputOrTextarea,
+      suffixVisible,
+      resizeTextarea,
       handleInput,
       handleChange,
       handleFocus,
@@ -414,7 +424,6 @@ var script = defineComponent({
       select,
       focus,
       blur,
-      getSuffixVisible,
       onMouseLeave,
       onMouseEnter,
       handleKeydown
@@ -429,11 +438,11 @@ const _hoisted_2 = {
 };
 const _hoisted_3 = ["type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder"];
 const _hoisted_4 = {
-  key: 2,
+  key: 1,
   class: "el-input__prefix"
 };
 const _hoisted_5 = {
-  key: 3,
+  key: 2,
   class: "el-input__suffix"
 };
 const _hoisted_6 = { class: "el-input__suffix-inner" };
@@ -443,12 +452,12 @@ const _hoisted_7 = {
 };
 const _hoisted_8 = { class: "el-input__count-inner" };
 const _hoisted_9 = {
-  key: 4,
+  key: 3,
   class: "el-input-group__append"
 };
 const _hoisted_10 = ["tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder"];
 const _hoisted_11 = {
-  key: 2,
+  key: 0,
   class: "el-input__count"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -468,18 +477,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       },
       _ctx.$attrs.class
     ]),
-    style: normalizeStyle(_ctx.$attrs.style),
+    style: normalizeStyle(_ctx.containerStyle),
     widget: _ctx.widget,
     onMouseenter: _cache[19] || (_cache[19] = (...args) => _ctx.onMouseEnter && _ctx.onMouseEnter(...args)),
     onMouseleave: _cache[20] || (_cache[20] = (...args) => _ctx.onMouseLeave && _ctx.onMouseLeave(...args))
   }, [
+    createCommentVNode(" input "),
     _ctx.type !== "textarea" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-      createCommentVNode(" \u524D\u7F6E\u5143\u7D20 "),
+      createCommentVNode(" prepend slot "),
       _ctx.$slots.prepend ? (openBlock(), createElementBlock("div", _hoisted_2, [
         renderSlot(_ctx.$slots, "prepend")
       ])) : createCommentVNode("v-if", true),
-      _ctx.type !== "textarea" ? (openBlock(), createElementBlock("input", mergeProps({
-        key: 1,
+      createElementVNode("input", mergeProps({
         ref: "input",
         class: "el-input__inner"
       }, _ctx.attrs, {
@@ -499,8 +508,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         onBlur: _cache[5] || (_cache[5] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
         onChange: _cache[6] || (_cache[6] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
         onKeydown: _cache[7] || (_cache[7] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args))
-      }), null, 16, _hoisted_3)) : createCommentVNode("v-if", true),
-      createCommentVNode(" \u524D\u7F6E\u5185\u5BB9 "),
+      }), null, 16, _hoisted_3),
+      createCommentVNode(" prefix slot "),
       _ctx.$slots.prefix || _ctx.prefixIcon ? (openBlock(), createElementBlock("span", _hoisted_4, [
         renderSlot(_ctx.$slots, "prefix"),
         _ctx.prefixIcon ? (openBlock(), createElementBlock("i", {
@@ -508,8 +517,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           class: normalizeClass(["el-input__icon", _ctx.prefixIcon])
         }, null, 2)) : createCommentVNode("v-if", true)
       ])) : createCommentVNode("v-if", true),
-      createCommentVNode(" \u540E\u7F6E\u5185\u5BB9 "),
-      _ctx.getSuffixVisible() ? (openBlock(), createElementBlock("span", _hoisted_5, [
+      createCommentVNode(" suffix slot "),
+      _ctx.suffixVisible ? (openBlock(), createElementBlock("span", _hoisted_5, [
         createElementVNode("span", _hoisted_6, [
           !_ctx.showClear || !_ctx.showPwdVisible || !_ctx.isWordLimitVisible ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
             renderSlot(_ctx.$slots, "suffix"),
@@ -531,7 +540,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             onClick: _cache[10] || (_cache[10] = (...args) => _ctx.handlePasswordVisible && _ctx.handlePasswordVisible(...args))
           })) : createCommentVNode("v-if", true),
           _ctx.isWordLimitVisible ? (openBlock(), createElementBlock("span", _hoisted_7, [
-            createElementVNode("span", _hoisted_8, toDisplayString(_ctx.textLength) + "/" + toDisplayString(_ctx.maxlength), 1)
+            createElementVNode("span", _hoisted_8, toDisplayString(_ctx.textLength) + " / " + toDisplayString(_ctx.maxlength), 1)
           ])) : createCommentVNode("v-if", true)
         ]),
         _ctx.validateState ? (openBlock(), createElementBlock("i", {
@@ -539,42 +548,40 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           class: normalizeClass(["el-input__icon", "el-input__validateIcon", _ctx.validateIcon])
         }, null, 2)) : createCommentVNode("v-if", true)
       ])) : createCommentVNode("v-if", true),
-      createCommentVNode(" \u540E\u7F6E\u5143\u7D20 "),
+      createCommentVNode(" append slot "),
       _ctx.$slots.append ? (openBlock(), createElementBlock("div", _hoisted_9, [
         renderSlot(_ctx.$slots, "append")
       ])) : createCommentVNode("v-if", true)
-    ], 64)) : (openBlock(), createElementBlock("textarea", mergeProps({
-      key: 1,
-      ref: "textarea",
-      class: "el-textarea__inner"
-    }, _ctx.attrs, {
-      tabindex: _ctx.tabindex,
-      disabled: _ctx.inputDisabled,
-      readonly: _ctx.readonly,
-      autocomplete: _ctx.autocomplete,
-      style: _ctx.computedTextareaStyle,
-      "aria-label": _ctx.label,
-      placeholder: _ctx.placeholder,
-      onCompositionstart: _cache[11] || (_cache[11] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)),
-      onCompositionupdate: _cache[12] || (_cache[12] = (...args) => _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate(...args)),
-      onCompositionend: _cache[13] || (_cache[13] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args)),
-      onInput: _cache[14] || (_cache[14] = (...args) => _ctx.handleInput && _ctx.handleInput(...args)),
-      onFocus: _cache[15] || (_cache[15] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
-      onBlur: _cache[16] || (_cache[16] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
-      onChange: _cache[17] || (_cache[17] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
-      onKeydown: _cache[18] || (_cache[18] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args))
-    }), "\n    ", 16, _hoisted_10)),
-    _ctx.isWordLimitVisible && _ctx.type === "textarea" ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(_ctx.textLength) + "/" + toDisplayString(_ctx.maxlength), 1)) : createCommentVNode("v-if", true)
+    ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+      createCommentVNode(" textarea "),
+      createElementVNode("textarea", mergeProps({
+        ref: "textarea",
+        class: "el-textarea__inner"
+      }, _ctx.attrs, {
+        tabindex: _ctx.tabindex,
+        disabled: _ctx.inputDisabled,
+        readonly: _ctx.readonly,
+        autocomplete: _ctx.autocomplete,
+        style: _ctx.computedTextareaStyle,
+        "aria-label": _ctx.label,
+        placeholder: _ctx.placeholder,
+        onCompositionstart: _cache[11] || (_cache[11] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)),
+        onCompositionupdate: _cache[12] || (_cache[12] = (...args) => _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate(...args)),
+        onCompositionend: _cache[13] || (_cache[13] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args)),
+        onInput: _cache[14] || (_cache[14] = (...args) => _ctx.handleInput && _ctx.handleInput(...args)),
+        onFocus: _cache[15] || (_cache[15] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
+        onBlur: _cache[16] || (_cache[16] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
+        onChange: _cache[17] || (_cache[17] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
+        onKeydown: _cache[18] || (_cache[18] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args))
+      }), null, 16, _hoisted_10),
+      _ctx.isWordLimitVisible ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(_ctx.textLength) + " / " + toDisplayString(_ctx.maxlength), 1)) : createCommentVNode("v-if", true)
+    ], 64))
   ], 46, _hoisted_1);
 }
 
 script.render = render;
-script.__file = "packages/components/input/src/index.vue";
+script.__file = "packages/components/input/src/input.vue";
 
-script.install = (app) => {
-  app.component(script.name, script);
-};
-const _Input = script;
-const ElInput = _Input;
+const ElInput = withInstall(script);
 
-export { ElInput, _Input as default };
+export { ElInput, ElInput as default, inputEmits, inputProps };

package/es/components/input/src/calc-textarea-height.d.ts

@@ -0,0 +1,6 @@
+declare type TextAreaHeight = {
+    height: string;
+    minHeight?: string;
+};
+export declare function calcTextareaHeight(targetElement: HTMLTextAreaElement, minRows?: number, maxRows?: number): TextAreaHeight;
+export {};