@element-plus/nightly 0.0.20220105 → 0.0.20220109

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

@@ -1 +1 @@
-{"version":3,"file":"input.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/input/src/input.vue"],"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\"\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\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":["defineComponent","ElIcon","inputEmits","getCurrentInstance","useSize","ref","shallowRef","computed","ValidateComponentsMap","isClient","isObject","calcTextareaHeight","UPDATE_MODEL_EVENT","nextTick","watch","onUpdated"],"mappings":"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"}
+{"version":3,"file":"input.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/input/src/input.vue"],"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":["defineComponent","ElIcon","inputEmits","getCurrentInstance","useSize","ref","shallowRef","computed","ValidateComponentsMap","isClient","isObject","calcTextareaHeight","UPDATE_MODEL_EVENT","nextTick","watch","onUpdated"],"mappings":"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"}

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

@@ -140,7 +140,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             vue.createElementVNode("span", _hoisted_8, vue.toDisplayString(_ctx.textLength) + " / " + vue.toDisplayString(_ctx.attrs.maxlength), 1)
           ])) : vue.createCommentVNode("v-if", true)
         ]),
-        _ctx.validateState && _ctx.validateIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+        _ctx.validateState && _ctx.validateIcon && _ctx.needStatusIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
           key: 0,
           class: "el-input__icon el-input__validateIcon"
         }, {

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\"\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\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' ? '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;;;;;;;;;"}

package/lib/components/input-number/index.d.ts

@@ -55,6 +55,7 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
         passwordVisible: import("vue").Ref<boolean>;
         inputOrTextarea: import("vue").ComputedRef<HTMLInputElement | HTMLTextAreaElement | undefined>;
         suffixVisible: import("vue").ComputedRef<boolean>;
+        needStatusIcon: import("vue").ComputedRef<boolean>;
         resizeTextarea: () => void;
         handleInput: (event: Event) => void;
         handleChange: (event: Event) => void;
@@ -206,6 +207,7 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
         passwordVisible: import("vue").Ref<boolean>;
         inputOrTextarea: import("vue").ComputedRef<HTMLInputElement | HTMLTextAreaElement | undefined>;
         suffixVisible: import("vue").ComputedRef<boolean>;
+        needStatusIcon: import("vue").ComputedRef<boolean>;
         resizeTextarea: () => void;
         handleInput: (event: Event) => void;
         handleChange: (event: Event) => void;
@@ -328,6 +330,8 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
     minDisabled: import("vue").ComputedRef<boolean>;
     focus: () => void;
     blur: () => void;
+    handleFocus: (event: MouseEvent) => void;
+    handleBlur: (event: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (prev: number, cur: number) => boolean;
     blur: (e: FocusEvent) => boolean;
@@ -358,9 +362,9 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
     controlsPosition: import("../../utils/props").BuildPropType<StringConstructor, "" | "right", unknown>;
 } & {
     size?: import("../../utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", unknown> | undefined;
-    name?: string | undefined;
     modelValue?: number | undefined;
     label?: string | undefined;
+    name?: string | undefined;
     placeholder?: string | undefined;
     precision?: number | undefined;
 }> & {

package/lib/components/input-number/src/input-number.vue.d.ts

@@ -56,6 +56,7 @@ declare const _default: import("vue").DefineComponent<{
         passwordVisible: import("vue").Ref<boolean>;
         inputOrTextarea: import("vue").ComputedRef<HTMLInputElement | HTMLTextAreaElement | undefined>;
         suffixVisible: import("vue").ComputedRef<boolean>;
+        needStatusIcon: import("vue").ComputedRef<boolean>;
         resizeTextarea: () => void;
         handleInput: (event: Event) => void;
         handleChange: (event: Event) => void;
@@ -207,6 +208,7 @@ declare const _default: import("vue").DefineComponent<{
         passwordVisible: import("vue").Ref<boolean>;
         inputOrTextarea: import("vue").ComputedRef<HTMLInputElement | HTMLTextAreaElement | undefined>;
         suffixVisible: import("vue").ComputedRef<boolean>;
+        needStatusIcon: import("vue").ComputedRef<boolean>;
         resizeTextarea: () => void;
         handleInput: (event: Event) => void;
         handleChange: (event: Event) => void;
@@ -329,6 +331,8 @@ declare const _default: import("vue").DefineComponent<{
     minDisabled: import("vue").ComputedRef<boolean>;
     focus: () => void;
     blur: () => void;
+    handleFocus: (event: MouseEvent) => void;
+    handleBlur: (event: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (prev: number, cur: number) => boolean;
     blur: (e: FocusEvent) => boolean;
@@ -359,9 +363,9 @@ declare const _default: import("vue").DefineComponent<{
     controlsPosition: import("../../../utils/props").BuildPropType<StringConstructor, "" | "right", unknown>;
 } & {
     size?: import("../../../utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", unknown> | undefined;
-    name?: string | undefined;
     modelValue?: number | undefined;
     label?: string | undefined;
+    name?: string | undefined;
     placeholder?: string | undefined;
     precision?: number | undefined;
 }> & {

package/lib/components/input-number/src/input-number.vue_vue_type_script_lang.js

@@ -12,7 +12,8 @@ var error = require('../../../utils/error.js');
 var iconsVue = require('@element-plus/icons-vue');
 var inputNumber = require('./input-number.js');
 var index$2 = require('../../../directives/repeat-click/index.js');
-var index$3 = require('../../../hooks/use-common-props/index.js');
+var index$3 = require('../../../hooks/use-form-item/index.js');
+var index$4 = require('../../../hooks/use-common-props/index.js');
 
 var script = vue.defineComponent({
   name: "ElInputNumber",
@@ -35,6 +36,7 @@ var script = vue.defineComponent({
       currentValue: props.modelValue,
       userInput: null
     });
+    const { formItem } = index$3.useFormItem();
     const minDisabled = vue.computed(() => _decrease(props.modelValue) < props.min);
     const maxDisabled = vue.computed(() => _increase(props.modelValue) > props.max);
     const numPrecision = vue.computed(() => {
@@ -51,8 +53,8 @@ var script = vue.defineComponent({
     const controlsAtRight = vue.computed(() => {
       return props.controls && props.controlsPosition === "right";
     });
-    const inputNumberSize = index$3.useSize();
-    const inputNumberDisabled = index$3.useDisabled();
+    const inputNumberSize = index$4.useSize();
+    const inputNumberDisabled = index$4.useDisabled();
     const displayValue = vue.computed(() => {
       if (data.userInput !== null) {
         return data.userInput;
@@ -112,6 +114,7 @@ var script = vue.defineComponent({
       setCurrentValue(newVal);
     };
     const setCurrentValue = (newVal) => {
+      var _a;
       const oldVal = data.currentValue;
       if (typeof newVal === "number" && props.precision !== void 0) {
         newVal = toPrecision(newVal, props.precision);
@@ -129,6 +132,7 @@ var script = vue.defineComponent({
       emit("update:modelValue", newVal);
       emit("input", newVal);
       emit("change", newVal, oldVal);
+      (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
       data.currentValue = newVal;
     };
     const handleInput = (value) => {
@@ -149,6 +153,14 @@ var script = vue.defineComponent({
       var _a, _b;
       (_b = (_a = input.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
     };
+    const handleFocus = (event) => {
+      emit("focus", event);
+    };
+    const handleBlur = (event) => {
+      var _a;
+      emit("blur", event);
+      (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur");
+    };
     vue.watch(() => props.modelValue, (value) => {
       let newVal = Number(value);
       if (!isNaN(newVal)) {
@@ -202,7 +214,9 @@ var script = vue.defineComponent({
       maxDisabled,
       minDisabled,
       focus,
-      blur
+      blur,
+      handleFocus,
+      handleBlur
     };
   }
 });

package/lib/components/input-number/src/input-number.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-number.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/input-number/src/input-number.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'el-input-number',\n      inputNumberSize ? 'el-input-number--' + inputNumberSize : '',\n      { 'is-disabled': inputNumberDisabled },\n      { 'is-without-controls': !controls },\n      { 'is-controls-right': controlsAtRight },\n    ]\"\n    @dragstart.prevent\n  >\n    <span\n      v-if=\"controls\"\n      v-repeat-click=\"decrease\"\n      class=\"el-input-number__decrease\"\n      role=\"button\"\n      :class=\"{ 'is-disabled': minDisabled }\"\n      @keydown.enter=\"decrease\"\n    >\n      <el-icon>\n        <arrow-down v-if=\"controlsAtRight\" />\n        <minus v-else />\n      </el-icon>\n    </span>\n    <span\n      v-if=\"controls\"\n      v-repeat-click=\"increase\"\n      class=\"el-input-number__increase\"\n      role=\"button\"\n      :class=\"{ 'is-disabled': maxDisabled }\"\n      @keydown.enter=\"increase\"\n    >\n      <el-icon>\n        <arrow-up v-if=\"controlsAtRight\" />\n        <plus v-else />\n      </el-icon>\n    </span>\n    <el-input\n      ref=\"input\"\n      type=\"number\"\n      :step=\"step\"\n      :model-value=\"displayValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"inputNumberDisabled\"\n      :size=\"inputNumberSize\"\n      :max=\"max\"\n      :min=\"min\"\n      :name=\"name\"\n      :label=\"label\"\n      @keydown.up.prevent=\"increase\"\n      @keydown.down.prevent=\"decrease\"\n      @blur=\"(event) => $emit('blur', event)\"\n      @focus=\"(event) => $emit('focus', event)\"\n      @input=\"handleInput\"\n      @change=\"handleInputChange\"\n    />\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  reactive,\n  ref,\n  watch,\n  onMounted,\n  onUpdated,\n} from 'vue'\n\nimport { ElIcon } from '@element-plus/components/icon'\nimport { RepeatClick } from '@element-plus/directives'\nimport { useDisabled, useSize } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { isNumber } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { ArrowUp, ArrowDown, Plus, Minus } from '@element-plus/icons-vue'\nimport { inputNumberProps, inputNumberEmits } from './input-number'\n\nimport type { ComponentPublicInstance } from 'vue'\n\ninterface IData {\n  currentValue: number | undefined\n  userInput: null | number | string\n}\n\nexport default defineComponent({\n  name: 'ElInputNumber',\n  components: {\n    ElInput,\n    ElIcon,\n    ArrowUp,\n    ArrowDown,\n    Plus,\n    Minus,\n  },\n  directives: {\n    RepeatClick,\n  },\n  props: inputNumberProps,\n  emits: inputNumberEmits,\n  setup(props, { emit }) {\n    const input = ref<ComponentPublicInstance<typeof ElInput>>()\n    const data = reactive<IData>({\n      currentValue: props.modelValue,\n      userInput: null,\n    })\n\n    const minDisabled = computed(() => _decrease(props.modelValue) < props.min)\n    const maxDisabled = computed(() => _increase(props.modelValue) > props.max)\n\n    const numPrecision = computed(() => {\n      const stepPrecision = getPrecision(props.step)\n      if (props.precision !== undefined) {\n        if (stepPrecision > props.precision) {\n          debugWarn(\n            'InputNumber',\n            'precision should not be less than the decimal places of step'\n          )\n        }\n        return props.precision\n      } else {\n        return Math.max(getPrecision(props.modelValue), stepPrecision)\n      }\n    })\n    const controlsAtRight = computed(() => {\n      return props.controls && props.controlsPosition === 'right'\n    })\n\n    const inputNumberSize = useSize()\n    const inputNumberDisabled = useDisabled()\n\n    const displayValue = computed(() => {\n      if (data.userInput !== null) {\n        return data.userInput\n      }\n      let currentValue: number | string | undefined = data.currentValue\n      if (isNumber(currentValue)) {\n        if (Number.isNaN(currentValue)) return ''\n        if (props.precision !== undefined) {\n          currentValue = currentValue.toFixed(props.precision)\n        }\n      }\n      return currentValue\n    })\n    const toPrecision = (num: number, pre?: number) => {\n      if (pre === undefined) pre = numPrecision.value\n      return parseFloat(\n        `${Math.round(num * Math.pow(10, pre)) / Math.pow(10, pre)}`\n      )\n    }\n    const getPrecision = (value: number | undefined) => {\n      if (value === undefined) return 0\n      const valueString = value.toString()\n      const dotPosition = valueString.indexOf('.')\n      let precision = 0\n      if (dotPosition !== -1) {\n        precision = valueString.length - dotPosition - 1\n      }\n      return precision\n    }\n    const _increase = (val: number) => {\n      if (!isNumber(val)) return data.currentValue\n      const precisionFactor = Math.pow(10, numPrecision.value)\n      // Solve the accuracy problem of JS decimal calculation by converting the value to integer.\n      val = isNumber(val) ? val : NaN\n      return toPrecision(\n        (precisionFactor * val + precisionFactor * props.step) / precisionFactor\n      )\n    }\n    const _decrease = (val: number) => {\n      if (!isNumber(val)) return data.currentValue\n      const precisionFactor = Math.pow(10, numPrecision.value)\n      // Solve the accuracy problem of JS decimal calculation by converting the value to integer.\n      val = isNumber(val) ? val : NaN\n      return toPrecision(\n        (precisionFactor * val - precisionFactor * props.step) / precisionFactor\n      )\n    }\n    const increase = () => {\n      if (inputNumberDisabled.value || maxDisabled.value) return\n      const value = props.modelValue || 0\n      const newVal = _increase(value)\n      setCurrentValue(newVal)\n    }\n    const decrease = () => {\n      if (inputNumberDisabled.value || minDisabled.value) return\n      const value = props.modelValue || 0\n      const newVal = _decrease(value)\n      setCurrentValue(newVal)\n    }\n    const setCurrentValue = (newVal: number) => {\n      const oldVal = data.currentValue\n      if (typeof newVal === 'number' && props.precision !== undefined) {\n        newVal = toPrecision(newVal, props.precision)\n      }\n      if (newVal !== undefined && newVal >= props.max) newVal = props.max\n      if (newVal !== undefined && newVal <= props.min) newVal = props.min\n      if (oldVal === newVal) return\n      if (!isNumber(newVal)) {\n        newVal = NaN\n      }\n      data.userInput = null\n      emit('update:modelValue', newVal)\n      emit('input', newVal)\n      emit('change', newVal, oldVal)\n      data.currentValue = newVal\n    }\n    const handleInput = (value: string) => {\n      return (data.userInput = value)\n    }\n    const handleInputChange = (value: string) => {\n      const newVal = Number(value)\n      if ((isNumber(newVal) && !Number.isNaN(newVal)) || value === '') {\n        setCurrentValue(newVal)\n      }\n      data.userInput = null\n    }\n\n    const focus = () => {\n      input.value?.focus?.()\n    }\n\n    const blur = () => {\n      input.value?.blur?.()\n    }\n\n    watch(\n      () => props.modelValue,\n      (value) => {\n        let newVal = Number(value)\n        if (!isNaN(newVal)) {\n          if (props.stepStrictly) {\n            const stepPrecision = getPrecision(props.step)\n            const precisionFactor = Math.pow(10, stepPrecision)\n            newVal =\n              (Math.round(newVal / props.step) * precisionFactor * props.step) /\n              precisionFactor\n          }\n          if (props.precision !== undefined) {\n            newVal = toPrecision(newVal, props.precision)\n          }\n\n          if (newVal > props.max) {\n            newVal = props.max\n            emit('update:modelValue', newVal)\n          }\n          if (newVal < props.min) {\n            newVal = props.min\n            emit('update:modelValue', newVal)\n          }\n        }\n        data.currentValue = newVal\n        data.userInput = null\n      },\n      { immediate: true }\n    )\n    onMounted(() => {\n      const innerInput = input.value?.input as HTMLInputElement\n      innerInput.setAttribute('role', 'spinbutton')\n      innerInput.setAttribute('aria-valuemax', String(props.max))\n      innerInput.setAttribute('aria-valuemin', String(props.min))\n      innerInput.setAttribute('aria-valuenow', String(data.currentValue))\n      innerInput.setAttribute(\n        'aria-disabled',\n        String(inputNumberDisabled.value)\n      )\n      if (!isNumber(props.modelValue)) {\n        emit('update:modelValue', Number(props.modelValue))\n      }\n    })\n    onUpdated(() => {\n      const innerInput = input.value?.input\n      innerInput.setAttribute('aria-valuenow', data.currentValue)\n    })\n    return {\n      input,\n      displayValue,\n      handleInput,\n      handleInputChange,\n      controlsAtRight,\n      decrease,\n      increase,\n      inputNumberSize,\n      inputNumberDisabled,\n      maxDisabled,\n      minDisabled,\n      focus,\n      blur,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElInput","ArrowUp","ArrowDown","Plus","RepeatClick","inputNumberProps","inputNumberEmits","computed","debugWarn","useSize","useDisabled","isNumber","watch"],"mappings":"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"}
+{"version":3,"file":"input-number.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/input-number/src/input-number.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'el-input-number',\n      inputNumberSize ? 'el-input-number--' + inputNumberSize : '',\n      { 'is-disabled': inputNumberDisabled },\n      { 'is-without-controls': !controls },\n      { 'is-controls-right': controlsAtRight },\n    ]\"\n    @dragstart.prevent\n  >\n    <span\n      v-if=\"controls\"\n      v-repeat-click=\"decrease\"\n      class=\"el-input-number__decrease\"\n      role=\"button\"\n      :class=\"{ 'is-disabled': minDisabled }\"\n      @keydown.enter=\"decrease\"\n    >\n      <el-icon>\n        <arrow-down v-if=\"controlsAtRight\" />\n        <minus v-else />\n      </el-icon>\n    </span>\n    <span\n      v-if=\"controls\"\n      v-repeat-click=\"increase\"\n      class=\"el-input-number__increase\"\n      role=\"button\"\n      :class=\"{ 'is-disabled': maxDisabled }\"\n      @keydown.enter=\"increase\"\n    >\n      <el-icon>\n        <arrow-up v-if=\"controlsAtRight\" />\n        <plus v-else />\n      </el-icon>\n    </span>\n    <el-input\n      ref=\"input\"\n      type=\"number\"\n      :step=\"step\"\n      :model-value=\"displayValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"inputNumberDisabled\"\n      :size=\"inputNumberSize\"\n      :max=\"max\"\n      :min=\"min\"\n      :name=\"name\"\n      :label=\"label\"\n      :validate-event=\"false\"\n      @keydown.up.prevent=\"increase\"\n      @keydown.down.prevent=\"decrease\"\n      @blur=\"handleBlur\"\n      @focus=\"handleFocus\"\n      @input=\"handleInput\"\n      @change=\"handleInputChange\"\n    />\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  reactive,\n  ref,\n  watch,\n  onMounted,\n  onUpdated,\n} from 'vue'\n\nimport { ElIcon } from '@element-plus/components/icon'\nimport { RepeatClick } from '@element-plus/directives'\nimport { useDisabled, useFormItem, useSize } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { isNumber } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { ArrowUp, ArrowDown, Plus, Minus } from '@element-plus/icons-vue'\nimport { inputNumberProps, inputNumberEmits } from './input-number'\n\nimport type { ComponentPublicInstance } from 'vue'\n\ninterface IData {\n  currentValue: number | undefined\n  userInput: null | number | string\n}\n\nexport default defineComponent({\n  name: 'ElInputNumber',\n  components: {\n    ElInput,\n    ElIcon,\n    ArrowUp,\n    ArrowDown,\n    Plus,\n    Minus,\n  },\n  directives: {\n    RepeatClick,\n  },\n  props: inputNumberProps,\n  emits: inputNumberEmits,\n  setup(props, { emit }) {\n    const input = ref<ComponentPublicInstance<typeof ElInput>>()\n    const data = reactive<IData>({\n      currentValue: props.modelValue,\n      userInput: null,\n    })\n    const { formItem } = useFormItem()\n\n    const minDisabled = computed(() => _decrease(props.modelValue) < props.min)\n    const maxDisabled = computed(() => _increase(props.modelValue) > props.max)\n\n    const numPrecision = computed(() => {\n      const stepPrecision = getPrecision(props.step)\n      if (props.precision !== undefined) {\n        if (stepPrecision > props.precision) {\n          debugWarn(\n            'InputNumber',\n            'precision should not be less than the decimal places of step'\n          )\n        }\n        return props.precision\n      } else {\n        return Math.max(getPrecision(props.modelValue), stepPrecision)\n      }\n    })\n    const controlsAtRight = computed(() => {\n      return props.controls && props.controlsPosition === 'right'\n    })\n\n    const inputNumberSize = useSize()\n    const inputNumberDisabled = useDisabled()\n\n    const displayValue = computed(() => {\n      if (data.userInput !== null) {\n        return data.userInput\n      }\n      let currentValue: number | string | undefined = data.currentValue\n      if (isNumber(currentValue)) {\n        if (Number.isNaN(currentValue)) return ''\n        if (props.precision !== undefined) {\n          currentValue = currentValue.toFixed(props.precision)\n        }\n      }\n      return currentValue\n    })\n    const toPrecision = (num: number, pre?: number) => {\n      if (pre === undefined) pre = numPrecision.value\n      return parseFloat(\n        `${Math.round(num * Math.pow(10, pre)) / Math.pow(10, pre)}`\n      )\n    }\n    const getPrecision = (value: number | undefined) => {\n      if (value === undefined) return 0\n      const valueString = value.toString()\n      const dotPosition = valueString.indexOf('.')\n      let precision = 0\n      if (dotPosition !== -1) {\n        precision = valueString.length - dotPosition - 1\n      }\n      return precision\n    }\n    const _increase = (val: number) => {\n      if (!isNumber(val)) return data.currentValue\n      const precisionFactor = Math.pow(10, numPrecision.value)\n      // Solve the accuracy problem of JS decimal calculation by converting the value to integer.\n      val = isNumber(val) ? val : NaN\n      return toPrecision(\n        (precisionFactor * val + precisionFactor * props.step) / precisionFactor\n      )\n    }\n    const _decrease = (val: number) => {\n      if (!isNumber(val)) return data.currentValue\n      const precisionFactor = Math.pow(10, numPrecision.value)\n      // Solve the accuracy problem of JS decimal calculation by converting the value to integer.\n      val = isNumber(val) ? val : NaN\n      return toPrecision(\n        (precisionFactor * val - precisionFactor * props.step) / precisionFactor\n      )\n    }\n    const increase = () => {\n      if (inputNumberDisabled.value || maxDisabled.value) return\n      const value = props.modelValue || 0\n      const newVal = _increase(value)\n      setCurrentValue(newVal)\n    }\n    const decrease = () => {\n      if (inputNumberDisabled.value || minDisabled.value) return\n      const value = props.modelValue || 0\n      const newVal = _decrease(value)\n      setCurrentValue(newVal)\n    }\n    const setCurrentValue = (newVal: number) => {\n      const oldVal = data.currentValue\n      if (typeof newVal === 'number' && props.precision !== undefined) {\n        newVal = toPrecision(newVal, props.precision)\n      }\n      if (newVal !== undefined && newVal >= props.max) newVal = props.max\n      if (newVal !== undefined && newVal <= props.min) newVal = props.min\n      if (oldVal === newVal) return\n      if (!isNumber(newVal)) {\n        newVal = NaN\n      }\n      data.userInput = null\n      emit('update:modelValue', newVal)\n      emit('input', newVal)\n      emit('change', newVal, oldVal)\n      formItem?.validate?.('change')\n      data.currentValue = newVal\n    }\n    const handleInput = (value: string) => {\n      return (data.userInput = value)\n    }\n    const handleInputChange = (value: string) => {\n      const newVal = Number(value)\n      if ((isNumber(newVal) && !Number.isNaN(newVal)) || value === '') {\n        setCurrentValue(newVal)\n      }\n      data.userInput = null\n    }\n\n    const focus = () => {\n      input.value?.focus?.()\n    }\n\n    const blur = () => {\n      input.value?.blur?.()\n    }\n\n    const handleFocus = (event: MouseEvent) => {\n      emit('focus', event)\n    }\n\n    const handleBlur = (event: MouseEvent) => {\n      emit('blur', event)\n      formItem?.validate?.('blur')\n    }\n\n    watch(\n      () => props.modelValue,\n      (value) => {\n        let newVal = Number(value)\n        if (!isNaN(newVal)) {\n          if (props.stepStrictly) {\n            const stepPrecision = getPrecision(props.step)\n            const precisionFactor = Math.pow(10, stepPrecision)\n            newVal =\n              (Math.round(newVal / props.step) * precisionFactor * props.step) /\n              precisionFactor\n          }\n          if (props.precision !== undefined) {\n            newVal = toPrecision(newVal, props.precision)\n          }\n\n          if (newVal > props.max) {\n            newVal = props.max\n            emit('update:modelValue', newVal)\n          }\n          if (newVal < props.min) {\n            newVal = props.min\n            emit('update:modelValue', newVal)\n          }\n        }\n        data.currentValue = newVal\n        data.userInput = null\n      },\n      { immediate: true }\n    )\n    onMounted(() => {\n      const innerInput = input.value?.input as HTMLInputElement\n      innerInput.setAttribute('role', 'spinbutton')\n      innerInput.setAttribute('aria-valuemax', String(props.max))\n      innerInput.setAttribute('aria-valuemin', String(props.min))\n      innerInput.setAttribute('aria-valuenow', String(data.currentValue))\n      innerInput.setAttribute(\n        'aria-disabled',\n        String(inputNumberDisabled.value)\n      )\n      if (!isNumber(props.modelValue)) {\n        emit('update:modelValue', Number(props.modelValue))\n      }\n    })\n    onUpdated(() => {\n      const innerInput = input.value?.input\n      innerInput.setAttribute('aria-valuenow', data.currentValue)\n    })\n    return {\n      input,\n      displayValue,\n      handleInput,\n      handleInputChange,\n      controlsAtRight,\n      decrease,\n      increase,\n      inputNumberSize,\n      inputNumberDisabled,\n      maxDisabled,\n      minDisabled,\n      focus,\n      blur,\n      handleFocus,\n      handleBlur,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElInput","ArrowUp","ArrowDown","Plus","RepeatClick","inputNumberProps","inputNumberEmits","computed","debugWarn","useSize","useDisabled","isNumber"],"mappings":"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"}

package/lib/components/input-number/src/input-number.vue_vue_type_template_id_dec60af6_lang.js

@@ -20,7 +20,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       { "is-without-controls": !_ctx.controls },
       { "is-controls-right": _ctx.controlsAtRight }
     ]),
-    onDragstart: _cache[4] || (_cache[4] = vue.withModifiers(() => {
+    onDragstart: _cache[2] || (_cache[2] = vue.withModifiers(() => {
     }, ["prevent"]))
   }, [
     _ctx.controls ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
@@ -65,15 +65,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       min: _ctx.min,
       name: _ctx.name,
       label: _ctx.label,
+      "validate-event": false,
       onKeydown: [
         vue.withKeys(vue.withModifiers(_ctx.increase, ["prevent"]), ["up"]),
         vue.withKeys(vue.withModifiers(_ctx.decrease, ["prevent"]), ["down"])
       ],
-      onBlur: _cache[2] || (_cache[2] = (event) => _ctx.$emit("blur", event)),
-      onFocus: _cache[3] || (_cache[3] = (event) => _ctx.$emit("focus", event)),
+      onBlur: _ctx.handleBlur,
+      onFocus: _ctx.handleFocus,
       onInput: _ctx.handleInput,
       onChange: _ctx.handleInputChange
-    }, null, 8, ["step", "model-value", "placeholder", "disabled", "size", "max", "min", "name", "label", "onKeydown", "onInput", "onChange"])
+    }, null, 8, ["step", "model-value", "placeholder", "disabled", "size", "max", "min", "name", "label", "onKeydown", "onBlur", "onFocus", "onInput", "onChange"])
   ], 34);
 }
 

package/lib/components/input-number/src/input-number.vue_vue_type_template_id_dec60af6_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-number.vue_vue_type_template_id_dec60af6_lang.js","sources":["../../../../../../packages/components/input-number/src/input-number.vue?vue&type=template&id=dec60af6&lang.js"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'el-input-number',\n      inputNumberSize ? 'el-input-number--' + inputNumberSize : '',\n      { 'is-disabled': inputNumberDisabled },\n      { 'is-without-controls': !controls },\n      { 'is-controls-right': controlsAtRight },\n    ]\"\n    @dragstart.prevent\n  >\n    <span\n      v-if=\"controls\"\n      v-repeat-click=\"decrease\"\n      class=\"el-input-number__decrease\"\n      role=\"button\"\n      :class=\"{ 'is-disabled': minDisabled }\"\n      @keydown.enter=\"decrease\"\n    >\n      <el-icon>\n        <arrow-down v-if=\"controlsAtRight\" />\n        <minus v-else />\n      </el-icon>\n    </span>\n    <span\n      v-if=\"controls\"\n      v-repeat-click=\"increase\"\n      class=\"el-input-number__increase\"\n      role=\"button\"\n      :class=\"{ 'is-disabled': maxDisabled }\"\n      @keydown.enter=\"increase\"\n    >\n      <el-icon>\n        <arrow-up v-if=\"controlsAtRight\" />\n        <plus v-else />\n      </el-icon>\n    </span>\n    <el-input\n      ref=\"input\"\n      type=\"number\"\n      :step=\"step\"\n      :model-value=\"displayValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"inputNumberDisabled\"\n      :size=\"inputNumberSize\"\n      :max=\"max\"\n      :min=\"min\"\n      :name=\"name\"\n      :label=\"label\"\n      @keydown.up.prevent=\"increase\"\n      @keydown.down.prevent=\"decrease\"\n      @blur=\"(event) => $emit('blur', event)\"\n      @focus=\"(event) => $emit('focus', event)\"\n      @input=\"handleInput\"\n      @change=\"handleInputChange\"\n    />\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  reactive,\n  ref,\n  watch,\n  onMounted,\n  onUpdated,\n} from 'vue'\n\nimport { ElIcon } from '@element-plus/components/icon'\nimport { RepeatClick } from '@element-plus/directives'\nimport { useDisabled, useSize } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { isNumber } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { ArrowUp, ArrowDown, Plus, Minus } from '@element-plus/icons-vue'\nimport { inputNumberProps, inputNumberEmits } from './input-number'\n\nimport type { ComponentPublicInstance } from 'vue'\n\ninterface IData {\n  currentValue: number | undefined\n  userInput: null | number | string\n}\n\nexport default defineComponent({\n  name: 'ElInputNumber',\n  components: {\n    ElInput,\n    ElIcon,\n    ArrowUp,\n    ArrowDown,\n    Plus,\n    Minus,\n  },\n  directives: {\n    RepeatClick,\n  },\n  props: inputNumberProps,\n  emits: inputNumberEmits,\n  setup(props, { emit }) {\n    const input = ref<ComponentPublicInstance<typeof ElInput>>()\n    const data = reactive<IData>({\n      currentValue: props.modelValue,\n      userInput: null,\n    })\n\n    const minDisabled = computed(() => _decrease(props.modelValue) < props.min)\n    const maxDisabled = computed(() => _increase(props.modelValue) > props.max)\n\n    const numPrecision = computed(() => {\n      const stepPrecision = getPrecision(props.step)\n      if (props.precision !== undefined) {\n        if (stepPrecision > props.precision) {\n          debugWarn(\n            'InputNumber',\n            'precision should not be less than the decimal places of step'\n          )\n        }\n        return props.precision\n      } else {\n        return Math.max(getPrecision(props.modelValue), stepPrecision)\n      }\n    })\n    const controlsAtRight = computed(() => {\n      return props.controls && props.controlsPosition === 'right'\n    })\n\n    const inputNumberSize = useSize()\n    const inputNumberDisabled = useDisabled()\n\n    const displayValue = computed(() => {\n      if (data.userInput !== null) {\n        return data.userInput\n      }\n      let currentValue: number | string | undefined = data.currentValue\n      if (isNumber(currentValue)) {\n        if (Number.isNaN(currentValue)) return ''\n        if (props.precision !== undefined) {\n          currentValue = currentValue.toFixed(props.precision)\n        }\n      }\n      return currentValue\n    })\n    const toPrecision = (num: number, pre?: number) => {\n      if (pre === undefined) pre = numPrecision.value\n      return parseFloat(\n        `${Math.round(num * Math.pow(10, pre)) / Math.pow(10, pre)}`\n      )\n    }\n    const getPrecision = (value: number | undefined) => {\n      if (value === undefined) return 0\n      const valueString = value.toString()\n      const dotPosition = valueString.indexOf('.')\n      let precision = 0\n      if (dotPosition !== -1) {\n        precision = valueString.length - dotPosition - 1\n      }\n      return precision\n    }\n    const _increase = (val: number) => {\n      if (!isNumber(val)) return data.currentValue\n      const precisionFactor = Math.pow(10, numPrecision.value)\n      // Solve the accuracy problem of JS decimal calculation by converting the value to integer.\n      val = isNumber(val) ? val : NaN\n      return toPrecision(\n        (precisionFactor * val + precisionFactor * props.step) / precisionFactor\n      )\n    }\n    const _decrease = (val: number) => {\n      if (!isNumber(val)) return data.currentValue\n      const precisionFactor = Math.pow(10, numPrecision.value)\n      // Solve the accuracy problem of JS decimal calculation by converting the value to integer.\n      val = isNumber(val) ? val : NaN\n      return toPrecision(\n        (precisionFactor * val - precisionFactor * props.step) / precisionFactor\n      )\n    }\n    const increase = () => {\n      if (inputNumberDisabled.value || maxDisabled.value) return\n      const value = props.modelValue || 0\n      const newVal = _increase(value)\n      setCurrentValue(newVal)\n    }\n    const decrease = () => {\n      if (inputNumberDisabled.value || minDisabled.value) return\n      const value = props.modelValue || 0\n      const newVal = _decrease(value)\n      setCurrentValue(newVal)\n    }\n    const setCurrentValue = (newVal: number) => {\n      const oldVal = data.currentValue\n      if (typeof newVal === 'number' && props.precision !== undefined) {\n        newVal = toPrecision(newVal, props.precision)\n      }\n      if (newVal !== undefined && newVal >= props.max) newVal = props.max\n      if (newVal !== undefined && newVal <= props.min) newVal = props.min\n      if (oldVal === newVal) return\n      if (!isNumber(newVal)) {\n        newVal = NaN\n      }\n      data.userInput = null\n      emit('update:modelValue', newVal)\n      emit('input', newVal)\n      emit('change', newVal, oldVal)\n      data.currentValue = newVal\n    }\n    const handleInput = (value: string) => {\n      return (data.userInput = value)\n    }\n    const handleInputChange = (value: string) => {\n      const newVal = Number(value)\n      if ((isNumber(newVal) && !Number.isNaN(newVal)) || value === '') {\n        setCurrentValue(newVal)\n      }\n      data.userInput = null\n    }\n\n    const focus = () => {\n      input.value?.focus?.()\n    }\n\n    const blur = () => {\n      input.value?.blur?.()\n    }\n\n    watch(\n      () => props.modelValue,\n      (value) => {\n        let newVal = Number(value)\n        if (!isNaN(newVal)) {\n          if (props.stepStrictly) {\n            const stepPrecision = getPrecision(props.step)\n            const precisionFactor = Math.pow(10, stepPrecision)\n            newVal =\n              (Math.round(newVal / props.step) * precisionFactor * props.step) /\n              precisionFactor\n          }\n          if (props.precision !== undefined) {\n            newVal = toPrecision(newVal, props.precision)\n          }\n\n          if (newVal > props.max) {\n            newVal = props.max\n            emit('update:modelValue', newVal)\n          }\n          if (newVal < props.min) {\n            newVal = props.min\n            emit('update:modelValue', newVal)\n          }\n        }\n        data.currentValue = newVal\n        data.userInput = null\n      },\n      { immediate: true }\n    )\n    onMounted(() => {\n      const innerInput = input.value?.input as HTMLInputElement\n      innerInput.setAttribute('role', 'spinbutton')\n      innerInput.setAttribute('aria-valuemax', String(props.max))\n      innerInput.setAttribute('aria-valuemin', String(props.min))\n      innerInput.setAttribute('aria-valuenow', String(data.currentValue))\n      innerInput.setAttribute(\n        'aria-disabled',\n        String(inputNumberDisabled.value)\n      )\n      if (!isNumber(props.modelValue)) {\n        emit('update:modelValue', Number(props.modelValue))\n      }\n    })\n    onUpdated(() => {\n      const innerInput = input.value?.input\n      innerInput.setAttribute('aria-valuenow', data.currentValue)\n    })\n    return {\n      input,\n      displayValue,\n      handleInput,\n      handleInputChange,\n      controlsAtRight,\n      decrease,\n      increase,\n      inputNumberSize,\n      inputNumberDisabled,\n      maxDisabled,\n      minDisabled,\n      focus,\n      blur,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAcW;;sBAGG;;UAER;;;;;;;;;;;;KAMM;0CADR;;UAGE,KAAK,mBAACA,oDAEmB;UADzB;;;UAIA;8BACE;sCAA+B;;;;;;;;;;;MAKjC;MACA;MACC;4CACyB;oBACd;;MAEX,MAAM;MACN;MACA,aAAQ;MACR,eAAU;WACL,EAAE,UAAK;;;;;;"}
+{"version":3,"file":"input-number.vue_vue_type_template_id_dec60af6_lang.js","sources":["../../../../../../packages/components/input-number/src/input-number.vue?vue&type=template&id=dec60af6&lang.js"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'el-input-number',\n      inputNumberSize ? 'el-input-number--' + inputNumberSize : '',\n      { 'is-disabled': inputNumberDisabled },\n      { 'is-without-controls': !controls },\n      { 'is-controls-right': controlsAtRight },\n    ]\"\n    @dragstart.prevent\n  >\n    <span\n      v-if=\"controls\"\n      v-repeat-click=\"decrease\"\n      class=\"el-input-number__decrease\"\n      role=\"button\"\n      :class=\"{ 'is-disabled': minDisabled }\"\n      @keydown.enter=\"decrease\"\n    >\n      <el-icon>\n        <arrow-down v-if=\"controlsAtRight\" />\n        <minus v-else />\n      </el-icon>\n    </span>\n    <span\n      v-if=\"controls\"\n      v-repeat-click=\"increase\"\n      class=\"el-input-number__increase\"\n      role=\"button\"\n      :class=\"{ 'is-disabled': maxDisabled }\"\n      @keydown.enter=\"increase\"\n    >\n      <el-icon>\n        <arrow-up v-if=\"controlsAtRight\" />\n        <plus v-else />\n      </el-icon>\n    </span>\n    <el-input\n      ref=\"input\"\n      type=\"number\"\n      :step=\"step\"\n      :model-value=\"displayValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"inputNumberDisabled\"\n      :size=\"inputNumberSize\"\n      :max=\"max\"\n      :min=\"min\"\n      :name=\"name\"\n      :label=\"label\"\n      :validate-event=\"false\"\n      @keydown.up.prevent=\"increase\"\n      @keydown.down.prevent=\"decrease\"\n      @blur=\"handleBlur\"\n      @focus=\"handleFocus\"\n      @input=\"handleInput\"\n      @change=\"handleInputChange\"\n    />\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  reactive,\n  ref,\n  watch,\n  onMounted,\n  onUpdated,\n} from 'vue'\n\nimport { ElIcon } from '@element-plus/components/icon'\nimport { RepeatClick } from '@element-plus/directives'\nimport { useDisabled, useFormItem, useSize } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { isNumber } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { ArrowUp, ArrowDown, Plus, Minus } from '@element-plus/icons-vue'\nimport { inputNumberProps, inputNumberEmits } from './input-number'\n\nimport type { ComponentPublicInstance } from 'vue'\n\ninterface IData {\n  currentValue: number | undefined\n  userInput: null | number | string\n}\n\nexport default defineComponent({\n  name: 'ElInputNumber',\n  components: {\n    ElInput,\n    ElIcon,\n    ArrowUp,\n    ArrowDown,\n    Plus,\n    Minus,\n  },\n  directives: {\n    RepeatClick,\n  },\n  props: inputNumberProps,\n  emits: inputNumberEmits,\n  setup(props, { emit }) {\n    const input = ref<ComponentPublicInstance<typeof ElInput>>()\n    const data = reactive<IData>({\n      currentValue: props.modelValue,\n      userInput: null,\n    })\n    const { formItem } = useFormItem()\n\n    const minDisabled = computed(() => _decrease(props.modelValue) < props.min)\n    const maxDisabled = computed(() => _increase(props.modelValue) > props.max)\n\n    const numPrecision = computed(() => {\n      const stepPrecision = getPrecision(props.step)\n      if (props.precision !== undefined) {\n        if (stepPrecision > props.precision) {\n          debugWarn(\n            'InputNumber',\n            'precision should not be less than the decimal places of step'\n          )\n        }\n        return props.precision\n      } else {\n        return Math.max(getPrecision(props.modelValue), stepPrecision)\n      }\n    })\n    const controlsAtRight = computed(() => {\n      return props.controls && props.controlsPosition === 'right'\n    })\n\n    const inputNumberSize = useSize()\n    const inputNumberDisabled = useDisabled()\n\n    const displayValue = computed(() => {\n      if (data.userInput !== null) {\n        return data.userInput\n      }\n      let currentValue: number | string | undefined = data.currentValue\n      if (isNumber(currentValue)) {\n        if (Number.isNaN(currentValue)) return ''\n        if (props.precision !== undefined) {\n          currentValue = currentValue.toFixed(props.precision)\n        }\n      }\n      return currentValue\n    })\n    const toPrecision = (num: number, pre?: number) => {\n      if (pre === undefined) pre = numPrecision.value\n      return parseFloat(\n        `${Math.round(num * Math.pow(10, pre)) / Math.pow(10, pre)}`\n      )\n    }\n    const getPrecision = (value: number | undefined) => {\n      if (value === undefined) return 0\n      const valueString = value.toString()\n      const dotPosition = valueString.indexOf('.')\n      let precision = 0\n      if (dotPosition !== -1) {\n        precision = valueString.length - dotPosition - 1\n      }\n      return precision\n    }\n    const _increase = (val: number) => {\n      if (!isNumber(val)) return data.currentValue\n      const precisionFactor = Math.pow(10, numPrecision.value)\n      // Solve the accuracy problem of JS decimal calculation by converting the value to integer.\n      val = isNumber(val) ? val : NaN\n      return toPrecision(\n        (precisionFactor * val + precisionFactor * props.step) / precisionFactor\n      )\n    }\n    const _decrease = (val: number) => {\n      if (!isNumber(val)) return data.currentValue\n      const precisionFactor = Math.pow(10, numPrecision.value)\n      // Solve the accuracy problem of JS decimal calculation by converting the value to integer.\n      val = isNumber(val) ? val : NaN\n      return toPrecision(\n        (precisionFactor * val - precisionFactor * props.step) / precisionFactor\n      )\n    }\n    const increase = () => {\n      if (inputNumberDisabled.value || maxDisabled.value) return\n      const value = props.modelValue || 0\n      const newVal = _increase(value)\n      setCurrentValue(newVal)\n    }\n    const decrease = () => {\n      if (inputNumberDisabled.value || minDisabled.value) return\n      const value = props.modelValue || 0\n      const newVal = _decrease(value)\n      setCurrentValue(newVal)\n    }\n    const setCurrentValue = (newVal: number) => {\n      const oldVal = data.currentValue\n      if (typeof newVal === 'number' && props.precision !== undefined) {\n        newVal = toPrecision(newVal, props.precision)\n      }\n      if (newVal !== undefined && newVal >= props.max) newVal = props.max\n      if (newVal !== undefined && newVal <= props.min) newVal = props.min\n      if (oldVal === newVal) return\n      if (!isNumber(newVal)) {\n        newVal = NaN\n      }\n      data.userInput = null\n      emit('update:modelValue', newVal)\n      emit('input', newVal)\n      emit('change', newVal, oldVal)\n      formItem?.validate?.('change')\n      data.currentValue = newVal\n    }\n    const handleInput = (value: string) => {\n      return (data.userInput = value)\n    }\n    const handleInputChange = (value: string) => {\n      const newVal = Number(value)\n      if ((isNumber(newVal) && !Number.isNaN(newVal)) || value === '') {\n        setCurrentValue(newVal)\n      }\n      data.userInput = null\n    }\n\n    const focus = () => {\n      input.value?.focus?.()\n    }\n\n    const blur = () => {\n      input.value?.blur?.()\n    }\n\n    const handleFocus = (event: MouseEvent) => {\n      emit('focus', event)\n    }\n\n    const handleBlur = (event: MouseEvent) => {\n      emit('blur', event)\n      formItem?.validate?.('blur')\n    }\n\n    watch(\n      () => props.modelValue,\n      (value) => {\n        let newVal = Number(value)\n        if (!isNaN(newVal)) {\n          if (props.stepStrictly) {\n            const stepPrecision = getPrecision(props.step)\n            const precisionFactor = Math.pow(10, stepPrecision)\n            newVal =\n              (Math.round(newVal / props.step) * precisionFactor * props.step) /\n              precisionFactor\n          }\n          if (props.precision !== undefined) {\n            newVal = toPrecision(newVal, props.precision)\n          }\n\n          if (newVal > props.max) {\n            newVal = props.max\n            emit('update:modelValue', newVal)\n          }\n          if (newVal < props.min) {\n            newVal = props.min\n            emit('update:modelValue', newVal)\n          }\n        }\n        data.currentValue = newVal\n        data.userInput = null\n      },\n      { immediate: true }\n    )\n    onMounted(() => {\n      const innerInput = input.value?.input as HTMLInputElement\n      innerInput.setAttribute('role', 'spinbutton')\n      innerInput.setAttribute('aria-valuemax', String(props.max))\n      innerInput.setAttribute('aria-valuemin', String(props.min))\n      innerInput.setAttribute('aria-valuenow', String(data.currentValue))\n      innerInput.setAttribute(\n        'aria-disabled',\n        String(inputNumberDisabled.value)\n      )\n      if (!isNumber(props.modelValue)) {\n        emit('update:modelValue', Number(props.modelValue))\n      }\n    })\n    onUpdated(() => {\n      const innerInput = input.value?.input\n      innerInput.setAttribute('aria-valuenow', data.currentValue)\n    })\n    return {\n      input,\n      displayValue,\n      handleInput,\n      handleInputChange,\n      controlsAtRight,\n      decrease,\n      increase,\n      inputNumberSize,\n      inputNumberDisabled,\n      maxDisabled,\n      minDisabled,\n      focus,\n      blur,\n      handleFocus,\n      handleBlur,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAcW;;sBAGG;;UAER;;;;;;;;;;;;KAMM;0CADR;;UAGE,KAAK,mBAACA,oDAEmB;UADzB;;;UAIA;8BACE;sCAA+B;;;;;;;;;;;MAKjC;MACA;MACC;MACA;oBACW;;;MAGX,aAAQ;MACR,aAAQ;MACR;MACA;;;;;;;"}

package/lib/components/menu/src/menu-item.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/menu/src/menu-item.vue"],"sourcesContent":["<template>\n  <li\n    class=\"el-menu-item\"\n    role=\"menuitem\"\n    tabindex=\"-1\"\n    :style=\"paddingStyle\"\n    :class=\"{\n      'is-active': active,\n      'is-disabled': disabled,\n    }\"\n    @click=\"handleClick\"\n  >\n    <el-tooltip\n      v-if=\"\n        parentMenu.type.name === 'ElMenu' &&\n        rootMenu.props.collapse &&\n        $slots.title\n      \"\n      :effect=\"Effect.DARK\"\n      placement=\"right\"\n    >\n      <template #content>\n        <slot name=\"title\" />\n      </template>\n      <div\n        :style=\"{\n          position: 'absolute',\n          left: 0,\n          top: 0,\n          height: '100%',\n          width: '100%',\n          display: 'inline-block',\n          boxSizing: 'border-box',\n          padding: '0 20px',\n        }\"\n      >\n        <slot />\n      </div>\n    </el-tooltip>\n    <template v-else>\n      <slot />\n      <slot name=\"title\" />\n    </template>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  onMounted,\n  onBeforeUnmount,\n  inject,\n  getCurrentInstance,\n  toRef,\n  reactive,\n} from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { Effect } from '@element-plus/components/popper'\nimport { throwError } from '@element-plus/utils/error'\nimport useMenu from './use-menu'\nimport { menuItemEmits, menuItemProps } from './menu-item'\n\nimport type { MenuItemRegistered, MenuProvider, SubMenuProvider } from './types'\n\nconst COMPONENT_NAME = 'ElMenuItem'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  components: {\n    ElTooltip,\n  },\n\n  props: menuItemProps,\n  emits: menuItemEmits,\n\n  setup(props, { emit }) {\n    const instance = getCurrentInstance()!\n    const rootMenu = inject<MenuProvider>('rootMenu')\n    if (!rootMenu) throwError(COMPONENT_NAME, 'can not inject root menu')\n\n    const { parentMenu, paddingStyle, indexPath } = useMenu(\n      instance,\n      toRef(props, 'index')\n    )\n\n    const subMenu = inject<SubMenuProvider>(`subMenu:${parentMenu.value.uid}`)\n    if (!subMenu) throwError(COMPONENT_NAME, 'can not inject sub menu')\n\n    const active = computed(() => props.index === rootMenu.activeIndex)\n    const item: MenuItemRegistered = reactive({\n      index: props.index,\n      indexPath,\n      active,\n    })\n\n    const handleClick = () => {\n      if (!props.disabled) {\n        rootMenu.handleMenuItemClick({\n          index: props.index,\n          indexPath: indexPath.value,\n          route: props.route,\n        })\n        emit('click', item)\n      }\n    }\n\n    onMounted(() => {\n      subMenu.addSubMenu(item)\n      rootMenu.addMenuItem(item)\n    })\n\n    onBeforeUnmount(() => {\n      subMenu.removeSubMenu(item)\n      rootMenu.removeMenuItem(item)\n    })\n\n    return {\n      Effect,\n      parentMenu,\n      rootMenu,\n      paddingStyle,\n      active,\n\n      handleClick,\n    }\n  },\n})\n</script>\n"],"names":["ElTooltip","menuItemProps","menuItemEmits","throwError","inject","computed","Effect"],"mappings":";;;;;;;;;;;;AA6DA,oBAAoB,eAAe,CAAC;;AAEpC,EAAE,MAAM,cAAc;;AAEtB,eAAIA,eAAS;AACb,GAAG;EACD,OAAOC,sBAAa;EACpB,KAAK,EAAEC;OACF,CAAC,KAAK;;;IAGT,KAAK,QAAQ;MACXC,gBAAU,CAAC;;IAEb,MAAM,OAAO,GAAGC;IAChB,IAAI,QAAQ;MACVD,gBAAU,CAAC,cAAc,EAAE;IAC7B,MAAM,MAAM,GAAGE,YAAQ,CAAC,MAAM,KAAK,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;;MAElE,OAAO,KAAK,CAAC,KAAK;MAClB;MACA,MAAM;;;MAGN,IAAI,CAAC,KAAK,SAAS,EAAE;QACnB,QAAQ,oBAAoB,CAAC;;UAE3B,SAAS,EAAE,UAAU,KAAK;UAC1B,OAAO,KAAK,CAAC,KAAK;SACnB,CAAC,CAAC;QACH,IAAI,CAAC;OACN;KACF;;MAEC,OAAO,CAAC,UAAU,CAAC,KAAK;MACxB,QAAQ,CAAC,YAAY;;uBAER,CAAC,MAAM;aACb,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;cACpB,CAAC;;WAEJ;cACLC;;;MAGA,YAAY;MACZ,MAAM;MACN,WAAW;KACZ;;;;;;"}
+{"version":3,"file":"menu-item.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/menu/src/menu-item.vue"],"sourcesContent":["<template>\n  <li\n    class=\"el-menu-item\"\n    role=\"menuitem\"\n    tabindex=\"-1\"\n    :style=\"paddingStyle\"\n    :class=\"{\n      'is-active': active,\n      'is-disabled': disabled,\n    }\"\n    @click=\"handleClick\"\n  >\n    <el-tooltip\n      v-if=\"\n        parentMenu.type.name === 'ElMenu' &&\n        rootMenu.props.collapse &&\n        $slots.title\n      \"\n      :effect=\"Effect.DARK\"\n      placement=\"right\"\n      persistent\n    >\n      <template #content>\n        <slot name=\"title\" />\n      </template>\n      <div\n        :style=\"{\n          position: 'absolute',\n          left: 0,\n          top: 0,\n          height: '100%',\n          width: '100%',\n          display: 'inline-block',\n          boxSizing: 'border-box',\n          padding: '0 20px',\n        }\"\n      >\n        <slot />\n      </div>\n    </el-tooltip>\n    <template v-else>\n      <slot />\n      <slot name=\"title\" />\n    </template>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  onMounted,\n  onBeforeUnmount,\n  inject,\n  getCurrentInstance,\n  toRef,\n  reactive,\n} from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { Effect } from '@element-plus/components/popper'\nimport { throwError } from '@element-plus/utils/error'\nimport useMenu from './use-menu'\nimport { menuItemEmits, menuItemProps } from './menu-item'\n\nimport type { MenuItemRegistered, MenuProvider, SubMenuProvider } from './types'\n\nconst COMPONENT_NAME = 'ElMenuItem'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  components: {\n    ElTooltip,\n  },\n\n  props: menuItemProps,\n  emits: menuItemEmits,\n\n  setup(props, { emit }) {\n    const instance = getCurrentInstance()!\n    const rootMenu = inject<MenuProvider>('rootMenu')\n    if (!rootMenu) throwError(COMPONENT_NAME, 'can not inject root menu')\n\n    const { parentMenu, paddingStyle, indexPath } = useMenu(\n      instance,\n      toRef(props, 'index')\n    )\n\n    const subMenu = inject<SubMenuProvider>(`subMenu:${parentMenu.value.uid}`)\n    if (!subMenu) throwError(COMPONENT_NAME, 'can not inject sub menu')\n\n    const active = computed(() => props.index === rootMenu.activeIndex)\n    const item: MenuItemRegistered = reactive({\n      index: props.index,\n      indexPath,\n      active,\n    })\n\n    const handleClick = () => {\n      if (!props.disabled) {\n        rootMenu.handleMenuItemClick({\n          index: props.index,\n          indexPath: indexPath.value,\n          route: props.route,\n        })\n        emit('click', item)\n      }\n    }\n\n    onMounted(() => {\n      subMenu.addSubMenu(item)\n      rootMenu.addMenuItem(item)\n    })\n\n    onBeforeUnmount(() => {\n      subMenu.removeSubMenu(item)\n      rootMenu.removeMenuItem(item)\n    })\n\n    return {\n      Effect,\n      parentMenu,\n      rootMenu,\n      paddingStyle,\n      active,\n\n      handleClick,\n    }\n  },\n})\n</script>\n"],"names":["ElTooltip","menuItemProps","menuItemEmits","throwError","inject","computed","Effect"],"mappings":";;;;;;;;;;;;AA8DA,oBAAoB,eAAe,CAAC;;AAEpC,EAAE,MAAM,cAAc;;AAEtB,eAAIA,eAAS;AACb,GAAG;EACD,OAAOC,sBAAa;EACpB,KAAK,EAAEC;OACF,CAAC,KAAK;;;IAGT,KAAK,QAAQ;MACXC,gBAAU,CAAC;;IAEb,MAAM,OAAO,GAAGC;IAChB,IAAI,QAAQ;MACVD,gBAAU,CAAC,cAAc,EAAE;IAC7B,MAAM,MAAM,GAAGE,YAAQ,CAAC,MAAM,KAAK,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;;MAElE,OAAO,KAAK,CAAC,KAAK;MAClB;MACA,MAAM;;;MAGN,IAAI,CAAC,KAAK,SAAS,EAAE;QACnB,QAAQ,oBAAoB,CAAC;;UAE3B,SAAS,EAAE,UAAU,KAAK;UAC1B,OAAO,KAAK,CAAC,KAAK;SACnB,CAAC,CAAC;QACH,IAAI,CAAC;OACN;KACF;;MAEC,OAAO,CAAC,UAAU,CAAC,KAAK;MACxB,QAAQ,CAAC,YAAY;;uBAER,CAAC,MAAM;aACb,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;cACpB,CAAC;;WAEJ;cACLC;;;MAGA,YAAY;MACZ,MAAM;MACN,WAAW;KACZ;;;;;;"}

package/lib/components/menu/src/menu-item.vue_vue_type_template_id_aa755baa_lang.js

@@ -29,7 +29,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     _ctx.parentMenu.type.name === "ElMenu" && _ctx.rootMenu.props.collapse && _ctx.$slots.title ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
       key: 0,
       effect: _ctx.Effect.DARK,
-      placement: "right"
+      placement: "right",
+      persistent: ""
     }, {
       content: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "title")

package/lib/components/menu/src/menu-item.vue_vue_type_template_id_aa755baa_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.vue_vue_type_template_id_aa755baa_lang.js","sources":["../../../../../../packages/components/menu/src/menu-item.vue?vue&type=template&id=aa755baa&lang.js"],"sourcesContent":["<template>\n  <li\n    class=\"el-menu-item\"\n    role=\"menuitem\"\n    tabindex=\"-1\"\n    :style=\"paddingStyle\"\n    :class=\"{\n      'is-active': active,\n      'is-disabled': disabled,\n    }\"\n    @click=\"handleClick\"\n  >\n    <el-tooltip\n      v-if=\"\n        parentMenu.type.name === 'ElMenu' &&\n        rootMenu.props.collapse &&\n        $slots.title\n      \"\n      :effect=\"Effect.DARK\"\n      placement=\"right\"\n    >\n      <template #content>\n        <slot name=\"title\" />\n      </template>\n      <div\n        :style=\"{\n          position: 'absolute',\n          left: 0,\n          top: 0,\n          height: '100%',\n          width: '100%',\n          display: 'inline-block',\n          boxSizing: 'border-box',\n          padding: '0 20px',\n        }\"\n      >\n        <slot />\n      </div>\n    </el-tooltip>\n    <template v-else>\n      <slot />\n      <slot name=\"title\" />\n    </template>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  onMounted,\n  onBeforeUnmount,\n  inject,\n  getCurrentInstance,\n  toRef,\n  reactive,\n} from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { Effect } from '@element-plus/components/popper'\nimport { throwError } from '@element-plus/utils/error'\nimport useMenu from './use-menu'\nimport { menuItemEmits, menuItemProps } from './menu-item'\n\nimport type { MenuItemRegistered, MenuProvider, SubMenuProvider } from './types'\n\nconst COMPONENT_NAME = 'ElMenuItem'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  components: {\n    ElTooltip,\n  },\n\n  props: menuItemProps,\n  emits: menuItemEmits,\n\n  setup(props, { emit }) {\n    const instance = getCurrentInstance()!\n    const rootMenu = inject<MenuProvider>('rootMenu')\n    if (!rootMenu) throwError(COMPONENT_NAME, 'can not inject root menu')\n\n    const { parentMenu, paddingStyle, indexPath } = useMenu(\n      instance,\n      toRef(props, 'index')\n    )\n\n    const subMenu = inject<SubMenuProvider>(`subMenu:${parentMenu.value.uid}`)\n    if (!subMenu) throwError(COMPONENT_NAME, 'can not inject sub menu')\n\n    const active = computed(() => props.index === rootMenu.activeIndex)\n    const item: MenuItemRegistered = reactive({\n      index: props.index,\n      indexPath,\n      active,\n    })\n\n    const handleClick = () => {\n      if (!props.disabled) {\n        rootMenu.handleMenuItemClick({\n          index: props.index,\n          indexPath: indexPath.value,\n          route: props.route,\n        })\n        emit('click', item)\n      }\n    }\n\n    onMounted(() => {\n      subMenu.addSubMenu(item)\n      rootMenu.addMenuItem(item)\n    })\n\n    onBeforeUnmount(() => {\n      subMenu.removeSubMenu(item)\n      rootMenu.removeMenuItem(item)\n    })\n\n    return {\n      Effect,\n      parentMenu,\n      rootMenu,\n      paddingStyle,\n      active,\n\n      handleClick,\n    }\n  },\n})\n</script>\n"],"names":["_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;IAGI;;IAEC,KAAK;WAKA;;;;;;;0BAEN;;UAMGA;UACD;;UAEW;;;;;;;;;;"}
+{"version":3,"file":"menu-item.vue_vue_type_template_id_aa755baa_lang.js","sources":["../../../../../../packages/components/menu/src/menu-item.vue?vue&type=template&id=aa755baa&lang.js"],"sourcesContent":["<template>\n  <li\n    class=\"el-menu-item\"\n    role=\"menuitem\"\n    tabindex=\"-1\"\n    :style=\"paddingStyle\"\n    :class=\"{\n      'is-active': active,\n      'is-disabled': disabled,\n    }\"\n    @click=\"handleClick\"\n  >\n    <el-tooltip\n      v-if=\"\n        parentMenu.type.name === 'ElMenu' &&\n        rootMenu.props.collapse &&\n        $slots.title\n      \"\n      :effect=\"Effect.DARK\"\n      placement=\"right\"\n      persistent\n    >\n      <template #content>\n        <slot name=\"title\" />\n      </template>\n      <div\n        :style=\"{\n          position: 'absolute',\n          left: 0,\n          top: 0,\n          height: '100%',\n          width: '100%',\n          display: 'inline-block',\n          boxSizing: 'border-box',\n          padding: '0 20px',\n        }\"\n      >\n        <slot />\n      </div>\n    </el-tooltip>\n    <template v-else>\n      <slot />\n      <slot name=\"title\" />\n    </template>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  onMounted,\n  onBeforeUnmount,\n  inject,\n  getCurrentInstance,\n  toRef,\n  reactive,\n} from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { Effect } from '@element-plus/components/popper'\nimport { throwError } from '@element-plus/utils/error'\nimport useMenu from './use-menu'\nimport { menuItemEmits, menuItemProps } from './menu-item'\n\nimport type { MenuItemRegistered, MenuProvider, SubMenuProvider } from './types'\n\nconst COMPONENT_NAME = 'ElMenuItem'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  components: {\n    ElTooltip,\n  },\n\n  props: menuItemProps,\n  emits: menuItemEmits,\n\n  setup(props, { emit }) {\n    const instance = getCurrentInstance()!\n    const rootMenu = inject<MenuProvider>('rootMenu')\n    if (!rootMenu) throwError(COMPONENT_NAME, 'can not inject root menu')\n\n    const { parentMenu, paddingStyle, indexPath } = useMenu(\n      instance,\n      toRef(props, 'index')\n    )\n\n    const subMenu = inject<SubMenuProvider>(`subMenu:${parentMenu.value.uid}`)\n    if (!subMenu) throwError(COMPONENT_NAME, 'can not inject sub menu')\n\n    const active = computed(() => props.index === rootMenu.activeIndex)\n    const item: MenuItemRegistered = reactive({\n      index: props.index,\n      indexPath,\n      active,\n    })\n\n    const handleClick = () => {\n      if (!props.disabled) {\n        rootMenu.handleMenuItemClick({\n          index: props.index,\n          indexPath: indexPath.value,\n          route: props.route,\n        })\n        emit('click', item)\n      }\n    }\n\n    onMounted(() => {\n      subMenu.addSubMenu(item)\n      rootMenu.addMenuItem(item)\n    })\n\n    onBeforeUnmount(() => {\n      subMenu.removeSubMenu(item)\n      rootMenu.removeMenuItem(item)\n    })\n\n    return {\n      Effect,\n      parentMenu,\n      rootMenu,\n      paddingStyle,\n      active,\n\n      handleClick,\n    }\n  },\n})\n</script>\n"],"names":["_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;IAGI;;IAEC,KAAK;WAKA;;;;;;;;;;UASJA,cAAU;UACV;;UAEW;;;;;;;;;;"}

package/lib/components/message/src/message-method.js

@@ -4,9 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 var core = require('@vueuse/core');
-require('../../../utils/util.js');
+var util = require('../../../utils/util.js');
 var popupManager = require('../../../utils/popup-manager.js');
 var error = require('../../../utils/error.js');
+var configProvider = require('../../config-provider/src/config-provider.js');
 require('./message2.js');
 var message$1 = require('./message.js');
 var message_vue_vue_type_script_lang = require('./message.vue_vue_type_script_lang.js');
@@ -16,6 +17,9 @@ let seed = 1;
 const message = function(options = {}) {
   if (!core.isClient)
     return { close: () => void 0 };
+  if (util.isNumber(configProvider.messageConfig.max) && instances.length >= configProvider.messageConfig.max) {
+    return { close: () => void 0 };
+  }
   if (!vue.isVNode(options) && typeof options === "object" && options.grouping && !vue.isVNode(options.message) && instances.length) {
     const tempVm = instances.find((item) => {
       var _a, _b, _c;