element-pe 1.0.2 → 1.0.6

package/lib/components/input/index.js

@@ -2,20 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var withInstall = require('element-pe/lib/utils/with-install');
 var vue = require('vue');
-var tokens = require('element-plus/lib/tokens');
-var hooks = require('element-plus/lib/hooks');
-var constants = require('element-plus/lib/utils/constants');
-var util = require('element-plus/lib/utils/util');
-var isServer = require('element-plus/lib/utils/isServer');
-var isDef = require('element-plus/lib/utils/isDef');
-var validators = require('element-plus/lib/utils/validators');
+var tokens = require('element-pe/lib/tokens');
+var hooks = require('element-pe/lib/hooks');
+var constants = require('element-pe/lib/utils/constants');
+var util = require('element-pe/lib/utils/util');
+var isServer = require('element-pe/lib/utils/isServer');
+var isDef = require('element-pe/lib/utils/isDef');
+var shared = require('@vue/shared');
+var props = require('element-pe/lib/utils/props');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var isServer__default = /*#__PURE__*/_interopDefaultLegacy(isServer);
 
-let hiddenTextarea;
+let hiddenTextarea = void 0;
 const HIDDEN_STYLE = `
   height:0 !important;
   visibility:hidden !important;
@@ -50,7 +52,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");
@@ -68,7 +70,7 @@ function calcTextareaHeight(targetElement, minRows = 1, maxRows = null) {
   }
   hiddenTextarea.value = "";
   const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
-  if (minRows !== null) {
+  if (util.isNumber(minRows)) {
     let minHeight = singleRowHeight * minRows;
     if (boxSizing === "border-box") {
       minHeight = minHeight + paddingSize + borderSize;
@@ -76,7 +78,7 @@ function calcTextareaHeight(targetElement, minRows = 1, maxRows = null) {
     height = Math.max(minHeight, height);
     result.minHeight = `${minHeight}px`;
   }
-  if (maxRows !== null) {
+  if (util.isNumber(maxRows)) {
     let maxHeight = singleRowHeight * maxRows;
     if (boxSizing === "border-box") {
       maxHeight = maxHeight + paddingSize + borderSize;
@@ -85,13 +87,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 = props.buildProps(__spreadProps(__spreadValues$1({}, hooks.useFormItemProps), {
+  modelValue: {
+    type: props.definePropType(void 0),
+    default: ""
+  },
+  type: {
+    type: String,
+    default: "text"
+  },
+  resize: {
+    type: String,
+    values: ["none", "both", "horizontal", "vertical"]
+  },
+  autosize: {
+    type: props.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: props.definePropType([Object, Array, String]),
+    default: () => props.mutable({})
+  },
+  maxlength: {
+    type: [Number, String]
+  },
+  widget: {
+    type: String
+  }
+}));
+const inputEmits = {
+  [constants.UPDATE_MODEL_EVENT]: (value) => shared.isString(value),
+  input: (value) => shared.isString(value),
+  change: (value) => shared.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;
@@ -107,7 +214,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const PENDANT_MAP = {
   suffix: "append",
   prefix: "prepend"
@@ -115,139 +221,40 @@ const PENDANT_MAP = {
 var script = vue.defineComponent({
   name: "ElInput",
   inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: ""
-    },
-    type: {
-      type: String,
-      default: "text"
-    },
-    size: {
-      type: String,
-      validator: validators.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: [
-    constants.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 = vue.getCurrentInstance();
     const attrs = hooks.useAttrs();
-    const $ELEMENT = util.useGlobalConfig();
-    const elForm = vue.inject(tokens.elFormKey, {});
-    const elFormItem = vue.inject(tokens.elFormItemKey, {});
-    const input = vue.ref(null);
-    const textarea = vue.ref(null);
+    const elForm = vue.inject(tokens.elFormKey, void 0);
+    const elFormItem = vue.inject(tokens.elFormItemKey, void 0);
+    const { size: inputSize, disabled: inputDisabled } = hooks.useFormItem({});
+    const input = vue.ref();
+    const textarea = vue.ref();
     const focused = vue.ref(false);
     const hovering = vue.ref(false);
     const isComposing = vue.ref(false);
     const passwordVisible = vue.ref(false);
     const _textareaCalcStyle = vue.shallowRef(props.inputStyle);
     const inputOrTextarea = vue.computed(() => input.value || textarea.value);
-    const inputSize = vue.computed(() => props.size || elFormItem.size || $ELEMENT.size);
-    const needStatusIcon = vue.computed(() => elForm.statusIcon);
-    const validateState = vue.computed(() => elFormItem.validateState || "");
+    const needStatusIcon = vue.computed(() => {
+      var _a;
+      return (_a = elForm == null ? void 0 : elForm.statusIcon) != null ? _a : false;
+    });
+    const validateState = vue.computed(() => (elFormItem == null ? void 0 : elFormItem.validateState) || "");
     const validateIcon = vue.computed(() => constants.VALIDATE_STATE_MAP[validateState.value]);
-    const computedTextareaStyle = vue.computed(() => __spreadProps(__spreadValues(__spreadValues({}, props.inputStyle), _textareaCalcStyle.value), {
-      resize: props.resize
-    }));
-    const inputDisabled = vue.computed(() => props.disabled || elForm.disabled);
+    const containerStyle = vue.computed(() => rawAttrs.style);
+    const computedTextareaStyle = vue.computed(() => [
+      props.inputStyle,
+      _textareaCalcStyle.value,
+      { resize: props.resize }
+    ]);
     const nativeInputValue = vue.computed(() => props.modelValue === null || props.modelValue === void 0 ? "" : String(props.modelValue));
-    const showClear = vue.computed(() => {
-      return props.clearable && !inputDisabled.value && !props.readonly && nativeInputValue.value && (focused.value || hovering.value);
-    });
-    const showPwdVisible = vue.computed(() => {
-      return props.showPassword && !inputDisabled.value && !props.readonly && (!!nativeInputValue.value || focused.value);
-    });
-    const isWordLimitVisible = vue.computed(() => {
-      return props.showWordLimit && props.maxlength && (props.type === "text" || props.type === "textarea") && !inputDisabled.value && !props.readonly && !props.showPassword;
-    });
-    const textLength = vue.computed(() => {
-      return Array.from(nativeInputValue.value).length;
-    });
-    const inputExceed = vue.computed(() => {
-      return isWordLimitVisible.value && textLength.value > Number(props.maxlength);
-    });
+    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 || focused.value));
+    const isWordLimitVisible = vue.computed(() => props.showWordLimit && !!props.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(() => !!isWordLimitVisible.value && textLength.value > Number(props.maxlength));
     const resizeTextarea = () => {
       const { type, autosize } = props;
       if (isServer__default["default"] || type !== "textarea")
@@ -270,12 +277,14 @@ var script = vue.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");
@@ -295,77 +304,76 @@ var script = vue.defineComponent({
         const sliceIndex = inputExceed.value ? textLength.value : props.maxlength;
         value = Array.from(value).slice(0, Number(sliceIndex)).join("");
       }
-      ctx.emit(constants.UPDATE_MODEL_EVENT, value);
-      ctx.emit("input", value);
+      emit(constants.UPDATE_MODEL_EVENT, value);
+      emit("input", value);
       vue.nextTick(setNativeInputValue);
     };
     const handleChange = (event) => {
-      ctx.emit("change", event.target.value);
+      emit("change", event.target.value);
     };
     const focus = () => {
       vue.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 = !isDef.isKorean(lastCharacter);
     };
     const handleCompositionEnd = (event) => {
-      ctx.emit("compositionend", event);
+      emit("compositionend", event);
       if (isComposing.value) {
         isComposing.value = false;
         handleInput(event);
       }
     };
     const clear = () => {
-      ctx.emit(constants.UPDATE_MODEL_EVENT, "");
-      ctx.emit("change", "");
-      ctx.emit("clear");
-      ctx.emit("input", "");
+      emit(constants.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 = vue.computed(() => !!slots.suffix || !!props.suffixIcon || showClear.value || props.showPassword || isWordLimitVisible.value || !!validateState.value && needStatusIcon.value);
     vue.watch(() => props.modelValue, () => {
       var _a;
       vue.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");
       }
     });
-    vue.watch(nativeInputValue, () => {
-      setNativeInputValue();
-    });
+    vue.watch(nativeInputValue, () => setNativeInputValue());
     vue.watch(() => props.type, () => {
       vue.nextTick(() => {
         setNativeInputValue();
@@ -381,16 +389,16 @@ var script = vue.defineComponent({
     vue.onUpdated(() => {
       vue.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,
@@ -399,8 +407,8 @@ var script = vue.defineComponent({
       inputSize,
       validateState,
       validateIcon,
+      containerStyle,
       computedTextareaStyle,
-      resizeTextarea,
       inputDisabled,
       showClear,
       showPwdVisible,
@@ -410,6 +418,8 @@ var script = vue.defineComponent({
       inputExceed,
       passwordVisible,
       inputOrTextarea,
+      suffixVisible,
+      resizeTextarea,
       handleInput,
       handleChange,
       handleFocus,
@@ -422,7 +432,6 @@ var script = vue.defineComponent({
       select,
       focus,
       blur,
-      getSuffixVisible,
       onMouseLeave,
       onMouseEnter,
       handleKeydown
@@ -437,11 +446,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" };
@@ -451,12 +460,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) {
@@ -476,18 +485,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       },
       _ctx.$attrs.class
     ]),
-    style: vue.normalizeStyle(_ctx.$attrs.style),
+    style: vue.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))
   }, [
+    vue.createCommentVNode(" input "),
     _ctx.type !== "textarea" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-      vue.createCommentVNode(" \u524D\u7F6E\u5143\u7D20 "),
+      vue.createCommentVNode(" prepend slot "),
       _ctx.$slots.prepend ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
         vue.renderSlot(_ctx.$slots, "prepend")
       ])) : vue.createCommentVNode("v-if", true),
-      _ctx.type !== "textarea" ? (vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
-        key: 1,
+      vue.createElementVNode("input", vue.mergeProps({
         ref: "input",
         class: "el-input__inner"
       }, _ctx.attrs, {
@@ -507,8 +516,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)) : vue.createCommentVNode("v-if", true),
-      vue.createCommentVNode(" \u524D\u7F6E\u5185\u5BB9 "),
+      }), null, 16, _hoisted_3),
+      vue.createCommentVNode(" prefix slot "),
       _ctx.$slots.prefix || _ctx.prefixIcon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, [
         vue.renderSlot(_ctx.$slots, "prefix"),
         _ctx.prefixIcon ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -516,8 +525,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           class: vue.normalizeClass(["el-input__icon", _ctx.prefixIcon])
         }, null, 2)) : vue.createCommentVNode("v-if", true)
       ])) : vue.createCommentVNode("v-if", true),
-      vue.createCommentVNode(" \u540E\u7F6E\u5185\u5BB9 "),
-      _ctx.getSuffixVisible() ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5, [
+      vue.createCommentVNode(" suffix slot "),
+      _ctx.suffixVisible ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5, [
         vue.createElementVNode("span", _hoisted_6, [
           !_ctx.showClear || !_ctx.showPwdVisible || !_ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.renderSlot(_ctx.$slots, "suffix"),
@@ -539,7 +548,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             onClick: _cache[10] || (_cache[10] = (...args) => _ctx.handlePasswordVisible && _ctx.handlePasswordVisible(...args))
           })) : vue.createCommentVNode("v-if", true),
           _ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7, [
-            vue.createElementVNode("span", _hoisted_8, vue.toDisplayString(_ctx.textLength) + "/" + vue.toDisplayString(_ctx.maxlength), 1)
+            vue.createElementVNode("span", _hoisted_8, vue.toDisplayString(_ctx.textLength) + " / " + vue.toDisplayString(_ctx.maxlength), 1)
           ])) : vue.createCommentVNode("v-if", true)
         ]),
         _ctx.validateState ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -547,43 +556,43 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           class: vue.normalizeClass(["el-input__icon", "el-input__validateIcon", _ctx.validateIcon])
         }, null, 2)) : vue.createCommentVNode("v-if", true)
       ])) : vue.createCommentVNode("v-if", true),
-      vue.createCommentVNode(" \u540E\u7F6E\u5143\u7D20 "),
+      vue.createCommentVNode(" append slot "),
       _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
         vue.renderSlot(_ctx.$slots, "append")
       ])) : vue.createCommentVNode("v-if", true)
-    ], 64)) : (vue.openBlock(), vue.createElementBlock("textarea", vue.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" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11, vue.toDisplayString(_ctx.textLength) + "/" + vue.toDisplayString(_ctx.maxlength), 1)) : vue.createCommentVNode("v-if", true)
+    ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+      vue.createCommentVNode(" textarea "),
+      vue.createElementVNode("textarea", vue.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 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11, vue.toDisplayString(_ctx.textLength) + " / " + vue.toDisplayString(_ctx.maxlength), 1)) : vue.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.withInstall(script);
 
 exports.ElInput = ElInput;
-exports["default"] = _Input;
+exports["default"] = ElInput;
+exports.inputEmits = inputEmits;
+exports.inputProps = inputProps;

package/lib/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 {};