@element-plus/nightly 0.0.20220115 → 0.0.20220119

package/lib/components/input/src/input.vue_vue_type_template_id_3290dcb6_lang.js

@@ -4,52 +4,25 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 
-const _hoisted_1 = {
-  key: 0,
-  class: "el-input-group__prepend"
-};
-const _hoisted_2 = ["type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder"];
-const _hoisted_3 = {
-  key: 1,
-  class: "el-input__prefix"
-};
-const _hoisted_4 = { class: "el-input__prefix-inner" };
-const _hoisted_5 = {
-  key: 2,
-  class: "el-input__suffix"
-};
-const _hoisted_6 = { class: "el-input__suffix-inner" };
-const _hoisted_7 = {
-  key: 3,
-  class: "el-input__count"
-};
-const _hoisted_8 = { class: "el-input__count-inner" };
-const _hoisted_9 = {
-  key: 3,
-  class: "el-input-group__append"
-};
-const _hoisted_10 = ["tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder"];
-const _hoisted_11 = {
-  key: 0,
-  class: "el-input__count"
-};
+const _hoisted_1 = ["type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder"];
+const _hoisted_2 = ["tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_icon = vue.resolveComponent("el-icon");
   const _component_circle_close = vue.resolveComponent("circle-close");
   const _component_icon_view = vue.resolveComponent("icon-view");
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass([
-      _ctx.type === "textarea" ? "el-textarea" : "el-input",
-      _ctx.inputSize ? "el-input--" + _ctx.inputSize : "",
+      _ctx.type === "textarea" ? _ctx.nsTextarea.b() : _ctx.nsInput.b(),
+      _ctx.nsInput.m(_ctx.inputSize),
+      _ctx.nsInput.is("disabled", _ctx.inputDisabled),
+      _ctx.nsInput.is("exceed", _ctx.inputExceed),
       {
-        "is-disabled": _ctx.inputDisabled,
-        "is-exceed": _ctx.inputExceed,
-        "el-input-group": _ctx.$slots.prepend || _ctx.$slots.append,
-        "el-input-group--append": _ctx.$slots.append,
-        "el-input-group--prepend": _ctx.$slots.prepend,
-        "el-input--prefix": _ctx.$slots.prefix || _ctx.prefixIcon,
-        "el-input--suffix": _ctx.$slots.suffix || _ctx.suffixIcon || _ctx.clearable || _ctx.showPassword,
-        "el-input--suffix--password-clear": _ctx.clearable && _ctx.showPassword
+        [_ctx.nsInput.b("group")]: _ctx.$slots.prepend || _ctx.$slots.append,
+        [_ctx.nsInput.bm("group", "append")]: _ctx.$slots.append,
+        [_ctx.nsInput.bm("group", "prepend")]: _ctx.$slots.prepend,
+        [_ctx.nsInput.m("prefix")]: _ctx.$slots.prefix || _ctx.prefixIcon,
+        [_ctx.nsInput.m("suffix")]: _ctx.$slots.suffix || _ctx.suffixIcon || _ctx.clearable || _ctx.showPassword,
+        [_ctx.nsInput.m("suffix--password-clear")]: _ctx.clearable && _ctx.showPassword
       },
       _ctx.$attrs.class
     ]),
@@ -60,12 +33,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     vue.createCommentVNode(" input "),
     _ctx.type !== "textarea" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
       vue.createCommentVNode(" prepend slot "),
-      _ctx.$slots.prepend ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+      _ctx.$slots.prepend ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        class: vue.normalizeClass(_ctx.nsInput.be("group", "prepend"))
+      }, [
         vue.renderSlot(_ctx.$slots, "prepend")
-      ])) : vue.createCommentVNode("v-if", true),
+      ], 2)) : vue.createCommentVNode("v-if", true),
       vue.createElementVNode("input", vue.mergeProps({
         ref: "input",
-        class: "el-input__inner"
+        class: _ctx.nsInput.e("inner")
       }, _ctx.attrs, {
         type: _ctx.showPassword ? _ctx.passwordVisible ? "text" : "password" : _ctx.type,
         disabled: _ctx.inputDisabled,
@@ -83,40 +59,50 @@ 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_2),
+      }), null, 16, _hoisted_1),
       vue.createCommentVNode(" prefix slot "),
-      _ctx.$slots.prefix || _ctx.prefixIcon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, [
-        vue.createElementVNode("span", _hoisted_4, [
+      _ctx.$slots.prefix || _ctx.prefixIcon ? (vue.openBlock(), vue.createElementBlock("span", {
+        key: 1,
+        class: vue.normalizeClass(_ctx.nsInput.e("prefix"))
+      }, [
+        vue.createElementVNode("span", {
+          class: vue.normalizeClass(_ctx.nsInput.e("prefix-inner"))
+        }, [
           vue.renderSlot(_ctx.$slots, "prefix"),
           _ctx.prefixIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
             key: 0,
-            class: "el-input__icon"
+            class: vue.normalizeClass(_ctx.nsInput.e("icon"))
           }, {
             default: vue.withCtx(() => [
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.prefixIcon)))
             ]),
             _: 1
-          })) : vue.createCommentVNode("v-if", true)
-        ])
-      ])) : vue.createCommentVNode("v-if", true),
+          }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
+        ], 2)
+      ], 2)) : vue.createCommentVNode("v-if", true),
       vue.createCommentVNode(" suffix slot "),
-      _ctx.suffixVisible ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5, [
-        vue.createElementVNode("span", _hoisted_6, [
+      _ctx.suffixVisible ? (vue.openBlock(), vue.createElementBlock("span", {
+        key: 2,
+        class: vue.normalizeClass(_ctx.nsInput.e("suffix"))
+      }, [
+        vue.createElementVNode("span", {
+          class: vue.normalizeClass(_ctx.nsInput.e("suffix-inner"))
+        }, [
           !_ctx.showClear || !_ctx.showPwdVisible || !_ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.renderSlot(_ctx.$slots, "suffix"),
             _ctx.suffixIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
               key: 0,
-              class: "el-input__icon"
+              class: vue.normalizeClass(_ctx.nsInput.e("icon"))
             }, {
               default: vue.withCtx(() => [
                 (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.suffixIcon)))
               ]),
               _: 1
-            })) : vue.createCommentVNode("v-if", true)
+            }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
           ], 64)) : vue.createCommentVNode("v-if", true),
           _ctx.showClear ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
             key: 1,
-            class: "el-input__icon el-input__clear",
+            class: vue.normalizeClass([_ctx.nsInput.e("icon"), _ctx.nsInput.e("clear")]),
             onMousedown: _cache[8] || (_cache[8] = vue.withModifiers(() => {
             }, ["prevent"])),
             onClick: _ctx.clear
@@ -125,40 +111,48 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               vue.createVNode(_component_circle_close)
             ]),
             _: 1
-          }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true),
+          }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true),
           _ctx.showPwdVisible ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
             key: 2,
-            class: "el-input__icon el-input__clear",
+            class: vue.normalizeClass([_ctx.nsInput.e("icon"), _ctx.nsInput.e("clear")]),
             onClick: _ctx.handlePasswordVisible
           }, {
             default: vue.withCtx(() => [
               vue.createVNode(_component_icon_view)
             ]),
             _: 1
-          }, 8, ["onClick"])) : 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.attrs.maxlength), 1)
-          ])) : vue.createCommentVNode("v-if", true)
-        ]),
+          }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true),
+          _ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock("span", {
+            key: 3,
+            class: vue.normalizeClass(_ctx.nsInput.e("count"))
+          }, [
+            vue.createElementVNode("span", {
+              class: vue.normalizeClass(_ctx.nsInput.e("count-inner"))
+            }, vue.toDisplayString(_ctx.textLength) + " / " + vue.toDisplayString(_ctx.attrs.maxlength), 3)
+          ], 2)) : vue.createCommentVNode("v-if", true)
+        ], 2),
         _ctx.validateState && _ctx.validateIcon && _ctx.needStatusIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
           key: 0,
-          class: "el-input__icon el-input__validateIcon"
+          class: vue.normalizeClass([_ctx.nsInput.e("icon"), _ctx.nsInput.e("validateIcon")])
         }, {
           default: vue.withCtx(() => [
             (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.validateIcon)))
           ]),
           _: 1
-        })) : vue.createCommentVNode("v-if", true)
-      ])) : vue.createCommentVNode("v-if", true),
+        }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
+      ], 2)) : vue.createCommentVNode("v-if", true),
       vue.createCommentVNode(" append slot "),
-      _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
+      _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 3,
+        class: vue.normalizeClass(_ctx.nsInput.be("group", "append"))
+      }, [
         vue.renderSlot(_ctx.$slots, "append")
-      ])) : vue.createCommentVNode("v-if", true)
+      ], 2)) : 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"
+        class: _ctx.nsTextarea.e("inner")
       }, _ctx.attrs, {
         tabindex: _ctx.tabindex,
         disabled: _ctx.inputDisabled,
@@ -175,8 +169,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         onBlur: _cache[14] || (_cache[14] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
         onChange: _cache[15] || (_cache[15] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
         onKeydown: _cache[16] || (_cache[16] = (...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.attrs.maxlength), 1)) : vue.createCommentVNode("v-if", true)
+      }), null, 16, _hoisted_2),
+      _ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock("span", {
+        key: 0,
+        class: vue.normalizeClass(_ctx.nsInput.e("count"))
+      }, vue.toDisplayString(_ctx.textLength) + " / " + vue.toDisplayString(_ctx.attrs.maxlength), 3)) : vue.createCommentVNode("v-if", true)
     ], 64))
   ], 38)), [
     [vue.vShow, _ctx.type !== "hidden"]

package/lib/components/input/src/input.vue_vue_type_template_id_3290dcb6_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.vue_vue_type_template_id_3290dcb6_lang.js","sources":["../../../../../../packages/components/input/src/input.vue?vue&type=template&id=3290dcb6&lang.js"],"sourcesContent":["<template>\n  <div\n    v-show=\"type !== 'hidden'\"\n    :class=\"[\n      type === 'textarea' ? 'el-textarea' : 'el-input',\n      inputSize ? 'el-input--' + inputSize : '',\n      {\n        'is-disabled': inputDisabled,\n        'is-exceed': inputExceed,\n        'el-input-group': $slots.prepend || $slots.append,\n        'el-input-group--append': $slots.append,\n        'el-input-group--prepend': $slots.prepend,\n        'el-input--prefix': $slots.prefix || prefixIcon,\n        'el-input--suffix':\n          $slots.suffix || suffixIcon || clearable || showPassword,\n        'el-input--suffix--password-clear': clearable && showPassword,\n      },\n      $attrs.class,\n    ]\"\n    :style=\"containerStyle\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <!-- input -->\n    <template v-if=\"type !== 'textarea'\">\n      <!-- prepend slot -->\n      <div v-if=\"$slots.prepend\" class=\"el-input-group__prepend\">\n        <slot name=\"prepend\" />\n      </div>\n\n      <input\n        ref=\"input\"\n        class=\"el-input__inner\"\n        v-bind=\"attrs\"\n        :type=\"showPassword ? (passwordVisible ? 'text' : 'password') : type\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :tabindex=\"tabindex\"\n        :aria-label=\"label\"\n        :placeholder=\"placeholder\"\n        :style=\"inputStyle\"\n        @compositionstart=\"handleCompositionStart\"\n        @compositionupdate=\"handleCompositionUpdate\"\n        @compositionend=\"handleCompositionEnd\"\n        @input=\"handleInput\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @change=\"handleChange\"\n        @keydown=\"handleKeydown\"\n      />\n\n      <!-- prefix slot -->\n      <span v-if=\"$slots.prefix || prefixIcon\" class=\"el-input__prefix\">\n        <span class=\"el-input__prefix-inner\">\n          <slot name=\"prefix\"></slot>\n          <el-icon v-if=\"prefixIcon\" class=\"el-input__icon\">\n            <component :is=\"prefixIcon\" />\n          </el-icon>\n        </span>\n      </span>\n\n      <!-- suffix slot -->\n      <span v-if=\"suffixVisible\" class=\"el-input__suffix\">\n        <span class=\"el-input__suffix-inner\">\n          <template v-if=\"!showClear || !showPwdVisible || !isWordLimitVisible\">\n            <slot name=\"suffix\"></slot>\n            <el-icon v-if=\"suffixIcon\" class=\"el-input__icon\">\n              <component :is=\"suffixIcon\" />\n            </el-icon>\n          </template>\n          <el-icon\n            v-if=\"showClear\"\n            class=\"el-input__icon el-input__clear\"\n            @mousedown.prevent\n            @click=\"clear\"\n          >\n            <circle-close />\n          </el-icon>\n          <el-icon\n            v-if=\"showPwdVisible\"\n            class=\"el-input__icon el-input__clear\"\n            @click=\"handlePasswordVisible\"\n          >\n            <icon-view />\n          </el-icon>\n          <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n            <span class=\"el-input__count-inner\">\n              {{ textLength }} / {{ attrs.maxlength }}\n            </span>\n          </span>\n        </span>\n        <el-icon\n          v-if=\"validateState && validateIcon && needStatusIcon\"\n          class=\"el-input__icon el-input__validateIcon\"\n        >\n          <component :is=\"validateIcon\" />\n        </el-icon>\n      </span>\n\n      <!-- append slot -->\n      <div v-if=\"$slots.append\" class=\"el-input-group__append\">\n        <slot name=\"append\" />\n      </div>\n    </template>\n\n    <!-- textarea -->\n    <template v-else>\n      <textarea\n        ref=\"textarea\"\n        class=\"el-textarea__inner\"\n        v-bind=\"attrs\"\n        :tabindex=\"tabindex\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :style=\"computedTextareaStyle\"\n        :aria-label=\"label\"\n        :placeholder=\"placeholder\"\n        @compositionstart=\"handleCompositionStart\"\n        @compositionupdate=\"handleCompositionUpdate\"\n        @compositionend=\"handleCompositionEnd\"\n        @input=\"handleInput\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @change=\"handleChange\"\n        @keydown=\"handleKeydown\"\n      />\n      <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n        {{ textLength }} / {{ attrs.maxlength }}\n      </span>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  watch,\n  nextTick,\n  getCurrentInstance,\n  ref,\n  shallowRef,\n  onMounted,\n  onUpdated,\n} from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CircleClose, View as IconView } from '@element-plus/icons-vue'\nimport { ValidateComponentsMap } from '@element-plus/utils/icon'\nimport {\n  useAttrs,\n  useDisabled,\n  useFormItem,\n  useSize,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isObject } from '@element-plus/utils/util'\nimport { isKorean } from '@element-plus/utils/isDef'\nimport { calcTextareaHeight } from './calc-textarea-height'\nimport { inputProps, inputEmits } from './input'\n\nimport type { StyleValue } from '@element-plus/utils/types'\n\ntype TargetElement = HTMLInputElement | HTMLTextAreaElement\n\nconst PENDANT_MAP = {\n  suffix: 'append',\n  prefix: 'prepend',\n} as const\n\nexport default defineComponent({\n  name: 'ElInput',\n\n  components: { ElIcon, CircleClose, IconView },\n\n  inheritAttrs: false,\n\n  props: inputProps,\n  emits: inputEmits,\n\n  setup(props, { slots, emit, attrs: rawAttrs }) {\n    const instance = getCurrentInstance()!\n    const attrs = useAttrs()\n\n    const { form, formItem } = useFormItem()\n    const inputSize = useSize()\n    const inputDisabled = useDisabled()\n\n    const input = ref<HTMLInputElement>()\n    const textarea = ref<HTMLTextAreaElement>()\n    const focused = ref(false)\n    const hovering = ref(false)\n    const isComposing = ref(false)\n    const passwordVisible = ref(false)\n    const _textareaCalcStyle = shallowRef(props.inputStyle)\n\n    const inputOrTextarea = computed(() => input.value || textarea.value)\n\n    const needStatusIcon = computed(() => form?.statusIcon ?? false)\n    const validateState = computed(() => formItem?.validateState || '')\n    const validateIcon = computed(\n      () => ValidateComponentsMap[validateState.value]\n    )\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n    const computedTextareaStyle = computed<StyleValue>(() => [\n      props.inputStyle,\n      _textareaCalcStyle.value,\n      { resize: props.resize },\n    ])\n    const nativeInputValue = computed(() =>\n      props.modelValue === null || props.modelValue === undefined\n        ? ''\n        : String(props.modelValue)\n    )\n    const showClear = computed(\n      () =>\n        props.clearable &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        !!nativeInputValue.value &&\n        (focused.value || hovering.value)\n    )\n    const showPwdVisible = computed(\n      () =>\n        props.showPassword &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        (!!nativeInputValue.value || focused.value)\n    )\n    const isWordLimitVisible = computed(\n      () =>\n        props.showWordLimit &&\n        !!attrs.value.maxlength &&\n        (props.type === 'text' || props.type === 'textarea') &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        !props.showPassword\n    )\n    const textLength = computed(() => Array.from(nativeInputValue.value).length)\n    const inputExceed = computed(\n      () =>\n        // show exceed style if length of initial value greater then maxlength\n        !!isWordLimitVisible.value &&\n        textLength.value > Number(attrs.value.maxlength)\n    )\n\n    const resizeTextarea = () => {\n      const { type, autosize } = props\n\n      if (!isClient || type !== 'textarea') return\n\n      if (autosize) {\n        const minRows = isObject(autosize) ? autosize.minRows : undefined\n        const maxRows = isObject(autosize) ? autosize.maxRows : undefined\n        _textareaCalcStyle.value = {\n          ...calcTextareaHeight(textarea.value!, minRows, maxRows),\n        }\n      } else {\n        _textareaCalcStyle.value = {\n          minHeight: calcTextareaHeight(textarea.value!).minHeight,\n        }\n      }\n    }\n\n    const setNativeInputValue = () => {\n      const input = inputOrTextarea.value\n      if (!input || input.value === nativeInputValue.value) return\n      input.value = nativeInputValue.value\n    }\n\n    const calcIconOffset = (place: 'prefix' | 'suffix') => {\n      const { el } = instance.vnode\n      if (!el) return\n      const elList: HTMLSpanElement[] = Array.from(\n        el.querySelectorAll(`.el-input__${place}`)\n      )\n      const target = elList.find((item) => item.parentNode === el)\n\n      if (!target) return\n\n      const pendant = PENDANT_MAP[place]\n\n      if (slots[pendant]) {\n        target.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${\n          el.querySelector(`.el-input-group__${pendant}`).offsetWidth\n        }px)`\n      } else {\n        target.removeAttribute('style')\n      }\n    }\n\n    const updateIconOffset = () => {\n      calcIconOffset('prefix')\n      calcIconOffset('suffix')\n    }\n\n    const handleInput = (event: Event) => {\n      const { value } = event.target as TargetElement\n\n      // should not emit input during composition\n      // see: https://github.com/ElemeFE/element/issues/10516\n      if (isComposing.value) return\n\n      // hack for https://github.com/ElemeFE/element/issues/8548\n      // should remove the following line when we don't support IE\n      if (value === nativeInputValue.value) return\n\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('input', value)\n\n      // ensure native input value is controlled\n      // see: https://github.com/ElemeFE/element/issues/12850\n      nextTick(setNativeInputValue)\n    }\n\n    const handleChange = (event: Event) => {\n      emit('change', (event.target as TargetElement).value)\n    }\n\n    const focus = () => {\n      // see: https://github.com/ElemeFE/element/issues/18573\n      nextTick(() => {\n        inputOrTextarea.value?.focus()\n      })\n    }\n\n    const blur = () => {\n      inputOrTextarea.value?.blur()\n    }\n\n    const handleFocus = (event: FocusEvent) => {\n      focused.value = true\n      emit('focus', event)\n    }\n\n    const handleBlur = (event: FocusEvent) => {\n      focused.value = false\n      emit('blur', event)\n      if (props.validateEvent) {\n        formItem?.validate?.('blur')\n      }\n    }\n\n    const select = () => {\n      inputOrTextarea.value?.select()\n    }\n\n    const handleCompositionStart = (event: CompositionEvent) => {\n      emit('compositionstart', event)\n      isComposing.value = true\n    }\n\n    const handleCompositionUpdate = (event: CompositionEvent) => {\n      emit('compositionupdate', event)\n      const text = (event.target as HTMLInputElement)?.value\n      const lastCharacter = text[text.length - 1] || ''\n      isComposing.value = !isKorean(lastCharacter)\n    }\n\n    const handleCompositionEnd = (event: CompositionEvent) => {\n      emit('compositionend', event)\n      if (isComposing.value) {\n        isComposing.value = false\n        handleInput(event)\n      }\n    }\n\n    const clear = () => {\n      emit(UPDATE_MODEL_EVENT, '')\n      emit('change', '')\n      emit('clear')\n      emit('input', '')\n    }\n\n    const handlePasswordVisible = () => {\n      passwordVisible.value = !passwordVisible.value\n      focus()\n    }\n\n    const suffixVisible = computed(\n      () =>\n        !!slots.suffix ||\n        !!props.suffixIcon ||\n        showClear.value ||\n        props.showPassword ||\n        isWordLimitVisible.value ||\n        (!!validateState.value && needStatusIcon.value)\n    )\n\n    watch(\n      () => props.modelValue,\n      () => {\n        nextTick(resizeTextarea)\n        if (props.validateEvent) {\n          formItem?.validate?.('change')\n        }\n      }\n    )\n\n    // native input value is set explicitly\n    // do not use v-model / :value in template\n    // see: https://github.com/ElemeFE/element/issues/14521\n    watch(nativeInputValue, () => setNativeInputValue())\n\n    // when change between <input> and <textarea>,\n    // update DOM dependent value and styles\n    // https://github.com/ElemeFE/element/issues/14857\n    watch(\n      () => props.type,\n      () => {\n        nextTick(() => {\n          setNativeInputValue()\n          resizeTextarea()\n          updateIconOffset()\n        })\n      }\n    )\n\n    onMounted(() => {\n      setNativeInputValue()\n      updateIconOffset()\n      nextTick(resizeTextarea)\n    })\n\n    onUpdated(() => {\n      nextTick(updateIconOffset)\n    })\n\n    const onMouseLeave = (evt: MouseEvent) => {\n      hovering.value = false\n      emit('mouseleave', evt)\n    }\n\n    const onMouseEnter = (evt: MouseEvent) => {\n      hovering.value = true\n      emit('mouseenter', evt)\n    }\n\n    const handleKeydown = (evt: KeyboardEvent) => {\n      emit('keydown', evt)\n    }\n\n    return {\n      input,\n      textarea,\n      attrs,\n      inputSize,\n      validateState,\n      validateIcon,\n      containerStyle,\n      computedTextareaStyle,\n      inputDisabled,\n      showClear,\n      showPwdVisible,\n      isWordLimitVisible,\n      textLength,\n      hovering,\n      inputExceed,\n      passwordVisible,\n      inputOrTextarea,\n      suffixVisible,\n      needStatusIcon,\n\n      resizeTextarea,\n      handleInput,\n      handleChange,\n      handleFocus,\n      handleBlur,\n      handleCompositionStart,\n      handleCompositionUpdate,\n      handleCompositionEnd,\n      handlePasswordVisible,\n      clear,\n      select,\n      focus,\n      blur,\n      onMouseLeave,\n      onMouseEnter,\n      handleKeydown,\n    }\n  },\n})\n</script>\n"],"names":["_createCommentVNode","_createElementBlock","_createBlock"],"mappings":";;;;;;;;;EA0BiC;;;;;EA2Bc;;;;;EAUd;;;;;EAuBS;;;;;EAeV;;;;;EA2BM;;;;;;;;;;;;;;;;;;;;;;;;;IA7GjCA;IACA;;;;;;;;;;;;uCAUC;;;;;;mCAMqB;wBACN,EAAE;;wBAEJ,EAAE;uBACD,EAAE;;;+BAGI;;gEAEVC;;;;YAIP;;;;gCAIHC;;;;;;;;;;;;;;;;;;;;gBAWE;;;;yBAGmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BAiBf;;;;;;;;;;;;;;;;;8FAY0B;;;;;;;;;6BAKhC;;;;;;;;;"}
+{"version":3,"file":"input.vue_vue_type_template_id_3290dcb6_lang.js","sources":["../../../../../../packages/components/input/src/input.vue?vue&type=template&id=3290dcb6&lang.js"],"sourcesContent":["<template>\n  <div\n    v-show=\"type !== 'hidden'\"\n    :class=\"[\n      type === 'textarea' ? nsTextarea.b() : nsInput.b(),\n      nsInput.m(inputSize),\n      nsInput.is('disabled', inputDisabled),\n      nsInput.is('exceed', inputExceed),\n      {\n        [nsInput.b('group')]: $slots.prepend || $slots.append,\n        [nsInput.bm('group', 'append')]: $slots.append,\n        [nsInput.bm('group', 'prepend')]: $slots.prepend,\n        [nsInput.m('prefix')]: $slots.prefix || prefixIcon,\n        [nsInput.m('suffix')]:\n          $slots.suffix || suffixIcon || clearable || showPassword,\n        [nsInput.m('suffix--password-clear')]: clearable && showPassword,\n      },\n      $attrs.class,\n    ]\"\n    :style=\"containerStyle\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <!-- input -->\n    <template v-if=\"type !== 'textarea'\">\n      <!-- prepend slot -->\n      <div v-if=\"$slots.prepend\" :class=\"nsInput.be('group', 'prepend')\">\n        <slot name=\"prepend\" />\n      </div>\n\n      <input\n        ref=\"input\"\n        :class=\"nsInput.e('inner')\"\n        v-bind=\"attrs\"\n        :type=\"showPassword ? (passwordVisible ? 'text' : 'password') : type\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :tabindex=\"tabindex\"\n        :aria-label=\"label\"\n        :placeholder=\"placeholder\"\n        :style=\"inputStyle\"\n        @compositionstart=\"handleCompositionStart\"\n        @compositionupdate=\"handleCompositionUpdate\"\n        @compositionend=\"handleCompositionEnd\"\n        @input=\"handleInput\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @change=\"handleChange\"\n        @keydown=\"handleKeydown\"\n      />\n\n      <!-- prefix slot -->\n      <span v-if=\"$slots.prefix || prefixIcon\" :class=\"nsInput.e('prefix')\">\n        <span :class=\"nsInput.e('prefix-inner')\">\n          <slot name=\"prefix\"></slot>\n          <el-icon v-if=\"prefixIcon\" :class=\"nsInput.e('icon')\">\n            <component :is=\"prefixIcon\" />\n          </el-icon>\n        </span>\n      </span>\n\n      <!-- suffix slot -->\n      <span v-if=\"suffixVisible\" :class=\"nsInput.e('suffix')\">\n        <span :class=\"nsInput.e('suffix-inner')\">\n          <template v-if=\"!showClear || !showPwdVisible || !isWordLimitVisible\">\n            <slot name=\"suffix\"></slot>\n            <el-icon v-if=\"suffixIcon\" :class=\"nsInput.e('icon')\">\n              <component :is=\"suffixIcon\" />\n            </el-icon>\n          </template>\n          <el-icon\n            v-if=\"showClear\"\n            :class=\"[nsInput.e('icon'), nsInput.e('clear')]\"\n            @mousedown.prevent\n            @click=\"clear\"\n          >\n            <circle-close />\n          </el-icon>\n          <el-icon\n            v-if=\"showPwdVisible\"\n            :class=\"[nsInput.e('icon'), nsInput.e('clear')]\"\n            @click=\"handlePasswordVisible\"\n          >\n            <icon-view />\n          </el-icon>\n          <span v-if=\"isWordLimitVisible\" :class=\"nsInput.e('count')\">\n            <span :class=\"nsInput.e('count-inner')\">\n              {{ textLength }} / {{ attrs.maxlength }}\n            </span>\n          </span>\n        </span>\n        <el-icon\n          v-if=\"validateState && validateIcon && needStatusIcon\"\n          :class=\"[nsInput.e('icon'), nsInput.e('validateIcon')]\"\n        >\n          <component :is=\"validateIcon\" />\n        </el-icon>\n      </span>\n\n      <!-- append slot -->\n      <div v-if=\"$slots.append\" :class=\"nsInput.be('group', 'append')\">\n        <slot name=\"append\" />\n      </div>\n    </template>\n\n    <!-- textarea -->\n    <template v-else>\n      <textarea\n        ref=\"textarea\"\n        :class=\"nsTextarea.e('inner')\"\n        v-bind=\"attrs\"\n        :tabindex=\"tabindex\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :style=\"computedTextareaStyle\"\n        :aria-label=\"label\"\n        :placeholder=\"placeholder\"\n        @compositionstart=\"handleCompositionStart\"\n        @compositionupdate=\"handleCompositionUpdate\"\n        @compositionend=\"handleCompositionEnd\"\n        @input=\"handleInput\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @change=\"handleChange\"\n        @keydown=\"handleKeydown\"\n      />\n      <span v-if=\"isWordLimitVisible\" :class=\"nsInput.e('count')\">\n        {{ textLength }} / {{ attrs.maxlength }}\n      </span>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  watch,\n  nextTick,\n  getCurrentInstance,\n  ref,\n  shallowRef,\n  onMounted,\n  onUpdated,\n} from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CircleClose, View as IconView } from '@element-plus/icons-vue'\nimport { ValidateComponentsMap } from '@element-plus/utils/icon'\nimport {\n  useAttrs,\n  useDisabled,\n  useFormItem,\n  useSize,\n  useNamespace,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isObject } from '@element-plus/utils/util'\nimport { isKorean } from '@element-plus/utils/isDef'\nimport { calcTextareaHeight } from './calc-textarea-height'\nimport { inputProps, inputEmits } from './input'\n\nimport type { StyleValue } from '@element-plus/utils/types'\n\ntype TargetElement = HTMLInputElement | HTMLTextAreaElement\n\nconst PENDANT_MAP = {\n  suffix: 'append',\n  prefix: 'prepend',\n} as const\n\nexport default defineComponent({\n  name: 'ElInput',\n\n  components: { ElIcon, CircleClose, IconView },\n\n  inheritAttrs: false,\n\n  props: inputProps,\n  emits: inputEmits,\n\n  setup(props, { slots, emit, attrs: rawAttrs }) {\n    const instance = getCurrentInstance()!\n    const attrs = useAttrs()\n\n    const { form, formItem } = useFormItem()\n    const inputSize = useSize()\n    const inputDisabled = useDisabled()\n    const nsInput = useNamespace('input')\n    const nsTextarea = useNamespace('textarea')\n\n    const input = ref<HTMLInputElement>()\n    const textarea = ref<HTMLTextAreaElement>()\n    const focused = ref(false)\n    const hovering = ref(false)\n    const isComposing = ref(false)\n    const passwordVisible = ref(false)\n    const _textareaCalcStyle = shallowRef(props.inputStyle)\n\n    const inputOrTextarea = computed(() => input.value || textarea.value)\n\n    const needStatusIcon = computed(() => form?.statusIcon ?? false)\n    const validateState = computed(() => formItem?.validateState || '')\n    const validateIcon = computed(\n      () => ValidateComponentsMap[validateState.value]\n    )\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n    const computedTextareaStyle = computed<StyleValue>(() => [\n      props.inputStyle,\n      _textareaCalcStyle.value,\n      { resize: props.resize },\n    ])\n    const nativeInputValue = computed(() =>\n      props.modelValue === null || props.modelValue === undefined\n        ? ''\n        : String(props.modelValue)\n    )\n    const showClear = computed(\n      () =>\n        props.clearable &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        !!nativeInputValue.value &&\n        (focused.value || hovering.value)\n    )\n    const showPwdVisible = computed(\n      () =>\n        props.showPassword &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        (!!nativeInputValue.value || focused.value)\n    )\n    const isWordLimitVisible = computed(\n      () =>\n        props.showWordLimit &&\n        !!attrs.value.maxlength &&\n        (props.type === 'text' || props.type === 'textarea') &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        !props.showPassword\n    )\n    const textLength = computed(() => Array.from(nativeInputValue.value).length)\n    const inputExceed = computed(\n      () =>\n        // show exceed style if length of initial value greater then maxlength\n        !!isWordLimitVisible.value &&\n        textLength.value > Number(attrs.value.maxlength)\n    )\n\n    const resizeTextarea = () => {\n      const { type, autosize } = props\n\n      if (!isClient || type !== 'textarea') return\n\n      if (autosize) {\n        const minRows = isObject(autosize) ? autosize.minRows : undefined\n        const maxRows = isObject(autosize) ? autosize.maxRows : undefined\n        _textareaCalcStyle.value = {\n          ...calcTextareaHeight(textarea.value!, minRows, maxRows),\n        }\n      } else {\n        _textareaCalcStyle.value = {\n          minHeight: calcTextareaHeight(textarea.value!).minHeight,\n        }\n      }\n    }\n\n    const setNativeInputValue = () => {\n      const input = inputOrTextarea.value\n      if (!input || input.value === nativeInputValue.value) return\n      input.value = nativeInputValue.value\n    }\n\n    const calcIconOffset = (place: 'prefix' | 'suffix') => {\n      const { el } = instance.vnode\n      if (!el) return\n      const elList: HTMLSpanElement[] = Array.from(\n        el.querySelectorAll(`.${nsInput.e(place)}`)\n      )\n      const target = elList.find((item) => item.parentNode === el)\n\n      if (!target) return\n\n      const pendant = PENDANT_MAP[place]\n\n      if (slots[pendant]) {\n        target.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${\n          el.querySelector(`.${nsInput.be('group', pendant)}`).offsetWidth\n        }px)`\n      } else {\n        target.removeAttribute('style')\n      }\n    }\n\n    const updateIconOffset = () => {\n      calcIconOffset('prefix')\n      calcIconOffset('suffix')\n    }\n\n    const handleInput = (event: Event) => {\n      const { value } = event.target as TargetElement\n\n      // should not emit input during composition\n      // see: https://github.com/ElemeFE/element/issues/10516\n      if (isComposing.value) return\n\n      // hack for https://github.com/ElemeFE/element/issues/8548\n      // should remove the following line when we don't support IE\n      if (value === nativeInputValue.value) return\n\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('input', value)\n\n      // ensure native input value is controlled\n      // see: https://github.com/ElemeFE/element/issues/12850\n      nextTick(setNativeInputValue)\n    }\n\n    const handleChange = (event: Event) => {\n      emit('change', (event.target as TargetElement).value)\n    }\n\n    const focus = () => {\n      // see: https://github.com/ElemeFE/element/issues/18573\n      nextTick(() => {\n        inputOrTextarea.value?.focus()\n      })\n    }\n\n    const blur = () => {\n      inputOrTextarea.value?.blur()\n    }\n\n    const handleFocus = (event: FocusEvent) => {\n      focused.value = true\n      emit('focus', event)\n    }\n\n    const handleBlur = (event: FocusEvent) => {\n      focused.value = false\n      emit('blur', event)\n      if (props.validateEvent) {\n        formItem?.validate?.('blur')\n      }\n    }\n\n    const select = () => {\n      inputOrTextarea.value?.select()\n    }\n\n    const handleCompositionStart = (event: CompositionEvent) => {\n      emit('compositionstart', event)\n      isComposing.value = true\n    }\n\n    const handleCompositionUpdate = (event: CompositionEvent) => {\n      emit('compositionupdate', event)\n      const text = (event.target as HTMLInputElement)?.value\n      const lastCharacter = text[text.length - 1] || ''\n      isComposing.value = !isKorean(lastCharacter)\n    }\n\n    const handleCompositionEnd = (event: CompositionEvent) => {\n      emit('compositionend', event)\n      if (isComposing.value) {\n        isComposing.value = false\n        handleInput(event)\n      }\n    }\n\n    const clear = () => {\n      emit(UPDATE_MODEL_EVENT, '')\n      emit('change', '')\n      emit('clear')\n      emit('input', '')\n    }\n\n    const handlePasswordVisible = () => {\n      passwordVisible.value = !passwordVisible.value\n      focus()\n    }\n\n    const suffixVisible = computed(\n      () =>\n        !!slots.suffix ||\n        !!props.suffixIcon ||\n        showClear.value ||\n        props.showPassword ||\n        isWordLimitVisible.value ||\n        (!!validateState.value && needStatusIcon.value)\n    )\n\n    watch(\n      () => props.modelValue,\n      () => {\n        nextTick(resizeTextarea)\n        if (props.validateEvent) {\n          formItem?.validate?.('change')\n        }\n      }\n    )\n\n    // native input value is set explicitly\n    // do not use v-model / :value in template\n    // see: https://github.com/ElemeFE/element/issues/14521\n    watch(nativeInputValue, () => setNativeInputValue())\n\n    // when change between <input> and <textarea>,\n    // update DOM dependent value and styles\n    // https://github.com/ElemeFE/element/issues/14857\n    watch(\n      () => props.type,\n      () => {\n        nextTick(() => {\n          setNativeInputValue()\n          resizeTextarea()\n          updateIconOffset()\n        })\n      }\n    )\n\n    onMounted(() => {\n      setNativeInputValue()\n      updateIconOffset()\n      nextTick(resizeTextarea)\n    })\n\n    onUpdated(() => {\n      nextTick(updateIconOffset)\n    })\n\n    const onMouseLeave = (evt: MouseEvent) => {\n      hovering.value = false\n      emit('mouseleave', evt)\n    }\n\n    const onMouseEnter = (evt: MouseEvent) => {\n      hovering.value = true\n      emit('mouseenter', evt)\n    }\n\n    const handleKeydown = (evt: KeyboardEvent) => {\n      emit('keydown', evt)\n    }\n\n    return {\n      input,\n      textarea,\n      attrs,\n      inputSize,\n      validateState,\n      validateIcon,\n      containerStyle,\n      computedTextareaStyle,\n      inputDisabled,\n      showClear,\n      showPwdVisible,\n      isWordLimitVisible,\n      textLength,\n      hovering,\n      inputExceed,\n      passwordVisible,\n      inputOrTextarea,\n      suffixVisible,\n      needStatusIcon,\n\n      resizeTextarea,\n      handleInput,\n      handleChange,\n      handleFocus,\n      handleBlur,\n      handleCompositionStart,\n      handleCompositionUpdate,\n      handleCompositionEnd,\n      handlePasswordVisible,\n      clear,\n      select,\n      focus,\n      blur,\n      onMouseLeave,\n      onMouseEnter,\n      handleKeydown,\n\n      nsInput,\n      nsTextarea,\n    }\n  },\n})\n</script>\n"],"names":["_createCommentVNode","_createElementBlock","_openBlock"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmBKA;IACA;;;;;;;WAMY;;;;;;;;uCAIX;;gCAEkB;;;;mCAIG;wBACN,EAAE;;wBAEJ,EAAE;uBACD,EAAE;;;+BAGI;;gEAEVC;;;;;;;yBAQQ,WAAW;6BAA7BC;;0CAAiD;;;+CACjC;;;;;;;;;;;;;;;;;;;;;;;;kBAUP;;;;;yBAGY;;;;;;;;;;;;;;;;;;wBAQd;;;;;;;;mBAKKF,sBAAc;;;;oCAEZ;;;;;;;;6CAIoB;;;kDAAU;;2BACtC;;6EACqB;;;;;;;sBAMtB;;;;;;;;;;;sBAOY,CAAC;;;gBAAS;;;;;;;;;;;;;"}