element-plus 1.2.0-beta.5 → 1.2.0-beta.6

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  inject,\n  computed,\n  watch,\n  nextTick,\n  getCurrentInstance,\n  ref,\n  shallowRef,\n  onMounted,\n  onUpdated,\n} from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CircleClose, View as IconView } from '@element-plus/icons'\nimport { ValidateComponentsMap } from '@element-plus/utils/icon'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport { useAttrs, useFormItem } from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isObject } from '@element-plus/utils/util'\nimport isServer from '@element-plus/utils/isServer'\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 elForm = inject(elFormKey, undefined)\n    const elFormItem = inject(elFormItemKey, undefined)\n\n    const { size: inputSize, disabled: inputDisabled } = useFormItem({})\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(() => elForm?.statusIcon ?? false)\n    const validateState = computed(() => elFormItem?.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 (isServer || 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        elFormItem?.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          elFormItem?.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","CircleClose","IconView","inputProps","inputEmits","getCurrentInstance","useAttrs","inject","elFormKey","elFormItemKey","useFormItem","ref","shallowRef","computed","ValidateComponentsMap","isServer","isObject","calcTextareaHeight","UPDATE_MODEL_EVENT","isKorean"],"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\"\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 { 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 isServer from '@element-plus/utils/isServer'\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 (isServer || 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","CircleClose","IconView","inputProps","inputEmits","getCurrentInstance","useAttrs","useFormItem","useSize","useDisabled","ref","shallowRef","computed","ValidateComponentsMap","isServer","isObject","calcTextareaHeight","UPDATE_MODEL_EVENT","isKorean"],"mappings":"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"}

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  inject,\n  computed,\n  watch,\n  nextTick,\n  getCurrentInstance,\n  ref,\n  shallowRef,\n  onMounted,\n  onUpdated,\n} from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CircleClose, View as IconView } from '@element-plus/icons'\nimport { ValidateComponentsMap } from '@element-plus/utils/icon'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport { useAttrs, useFormItem } from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isObject } from '@element-plus/utils/util'\nimport isServer from '@element-plus/utils/isServer'\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 elForm = inject(elFormKey, undefined)\n    const elFormItem = inject(elFormItemKey, undefined)\n\n    const { size: inputSize, disabled: inputDisabled } = useFormItem({})\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(() => elForm?.statusIcon ?? false)\n    const validateState = computed(() => elFormItem?.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 (isServer || 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        elFormItem?.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          elFormItem?.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":["_createElementBlock","_createCommentVNode","_renderSlot","_createElementVNode","_mergeProps","_createBlock","_createVNode"],"mappings":";;;;;;;;EA0BiC,OAAM;AAAA;;;;EA2BQ,OAAM;AAAA;qBACvC,OAAM;;;EASa,OAAM;AAAA;qBACzB,OAAM;;;EAsBsB,OAAM;AAAA;qBAC9B,OAAM;;;EAcQ,OAAM;AAAA;;;;EA2BA,OAAM;AAAA;;;;;8CA/H1CA;IAEG;;;;;;;;;;;;;;;IAgBA,0BAAO;IACP,uDAAY;IACZ,uDAAY;;IAEbC;IACgB,6CAAhBD;MACEC;MACW,YAAO,4BAAlBD,8BAAA;QACEE;;MAGFC,gCAAAC;QACE,KAAI;AAAA,QACJ,OAAM;AAAA,SACE;QACP,MAAM,oBAAgB,6CAAyC;QAC/D,UAAU;QACV,UAAU;QACV,cAAc;QACd,UAAU;QACV,cAAY;QACZ,aAAa;QACb,OAAO;QACP,2DAAkB;QAClB,4DAAmB;QACnB,yDAAgB;QAChB,gDAAO;QACP,gDAAO;QACP,+CAAM;QACN,iDAAQ;QACR,kDAAS;;MAGZH;MACY,YAAO,UAAU,oCAA7BD,+BAAA;QACEG,+BAAA;UACED;UACe,oCAAfG;;YAA2B,OAAM;AAAA;iCAC/B;gCAAAA,4CAAgB;;;;;;MAKtBJ;MACY,uCAAZD,+BAAA;QACEG,+BAAA;WACmB,mBAAc,wBAAmB,4CAAlDH;YACEE;YACe,oCAAfG;;cAA2B,OAAM;AAAA;mCAC/B;kCAAAA,4CAAgB;;;;;UAIZ,mCADRA;;YAEE,OAAM;AAAA,YACL,yDAAD;;YACC,SAAO;;iCAER;cAAAC;;;;UAGM,wCADRD;;YAEE,OAAM;AAAA,YACL,SAAO;;iCAER;cAAAC;;;;UAEU,4CAAZN,+BAAA;YACEG,+BAAA,gCACK,+CAAmB,WAAM;;;QAK1B,sBAAiB,sCADzBE;;UAEE,OAAM;AAAA;+BAEN;8BAAAA,4CAAgB;;;;;MAIpBJ;MACW,YAAO,2BAAlBD,8BAAA;QACEE;;gCAKJF;MADAC;MAEEE,mCAAAC;QACE,KAAI;AAAA,QACJ,OAAM;AAAA,SACE;QACP,UAAU;QACV,UAAU;QACV,UAAU;QACV,cAAc;QACd,OAAO;QACP,cAAY;QACZ,aAAa;QACb,2DAAkB;QAClB,8DAAmB;QACnB,2DAAgB;QAChB,kDAAO;QACP,kDAAO;QACP,iDAAM;QACN,mDAAQ;QACR,oDAAS;;MAEA,4CAAZJ,+BAAA,iCACK,+CAAmB,WAAM;;;gBA/HxB;;;;;;"}
+{"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 { 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 isServer from '@element-plus/utils/isServer'\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 (isServer || 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":["_createElementBlock","_createCommentVNode","_renderSlot","_createElementVNode","_mergeProps","_createBlock","_createVNode"],"mappings":";;;;;;;;EA0BiC,OAAM;AAAA;;;;EA2BQ,OAAM;AAAA;qBACvC,OAAM;;;EASa,OAAM;AAAA;qBACzB,OAAM;;;EAsBsB,OAAM;AAAA;qBAC9B,OAAM;;;EAcQ,OAAM;AAAA;;;;EA2BA,OAAM;AAAA;;;;;8CA/H1CA;IAEG;;;;;;;;;;;;;;;IAgBA,0BAAO;IACP,uDAAY;IACZ,uDAAY;;IAEbC;IACgB,6CAAhBD;MACEC;MACW,YAAO,4BAAlBD,8BAAA;QACEE;;MAGFC,gCAAAC;QACE,KAAI;AAAA,QACJ,OAAM;AAAA,SACE;QACP,MAAM,oBAAgB,6CAAyC;QAC/D,UAAU;QACV,UAAU;QACV,cAAc;QACd,UAAU;QACV,cAAY;QACZ,aAAa;QACb,OAAO;QACP,2DAAkB;QAClB,4DAAmB;QACnB,yDAAgB;QAChB,gDAAO;QACP,gDAAO;QACP,+CAAM;QACN,iDAAQ;QACR,kDAAS;;MAGZH;MACY,YAAO,UAAU,oCAA7BD,+BAAA;QACEG,+BAAA;UACED;UACe,oCAAfG;;YAA2B,OAAM;AAAA;iCAC/B;gCAAAA,4CAAgB;;;;;;MAKtBJ;MACY,uCAAZD,+BAAA;QACEG,+BAAA;WACmB,mBAAc,wBAAmB,4CAAlDH;YACEE;YACe,oCAAfG;;cAA2B,OAAM;AAAA;mCAC/B;kCAAAA,4CAAgB;;;;;UAIZ,mCADRA;;YAEE,OAAM;AAAA,YACL,yDAAD;;YACC,SAAO;;iCAER;cAAAC;;;;UAGM,wCADRD;;YAEE,OAAM;AAAA,YACL,SAAO;;iCAER;cAAAC;;;;UAEU,4CAAZN,+BAAA;YACEG,+BAAA,gCACK,+CAAmB,WAAM;;;QAK1B,sBAAiB,sCADzBE;;UAEE,OAAM;AAAA;+BAEN;8BAAAA,4CAAgB;;;;;MAIpBJ;MACW,YAAO,2BAAlBD,8BAAA;QACEE;;gCAKJF;MADAC;MAEEE,mCAAAC;QACE,KAAI;AAAA,QACJ,OAAM;AAAA,SACE;QACP,UAAU;QACV,UAAU;QACV,UAAU;QACV,cAAc;QACd,OAAO;QACP,cAAY;QACZ,aAAa;QACb,2DAAkB;QAClB,8DAAmB;QACnB,2DAAgB;QAChB,kDAAO;QACP,kDAAO;QACP,iDAAM;QACN,mDAAQ;QACR,oDAAS;;MAEA,4CAAZJ,+BAAA,iCACK,+CAAmB,WAAM;;;gBA/HxB;;;;;;"}

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

@@ -14,6 +14,8 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
     readonly precision: import("../../utils/props").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
 }, {
     input: import("vue").Ref<import("vue").ComponentPublicInstance<import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
+        readonly size: import("../../utils/props").BuildPropReturn<StringConstructor, "", false, "" | "small" | "large" | "medium" | "mini", never>;
+        readonly disabled: BooleanConstructor;
         readonly modelValue: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | number | null | undefined>, "", unknown, unknown, unknown>;
         readonly type: import("../../utils/props").BuildPropReturn<StringConstructor, "text", unknown, unknown, unknown>;
         readonly resize: import("../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, "none" | "both" | "horizontal" | "vertical", unknown>;
@@ -34,13 +36,11 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
         readonly tabindex: import("../../utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, unknown, unknown, unknown>;
         readonly validateEvent: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
         readonly inputStyle: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("../../utils/types").StyleValue>, () => import("../../utils/types").Mutable<{}>, unknown, unknown, unknown>;
-        readonly size: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "small" | "large" | "medium" | "mini", unknown>;
-        readonly disabled: BooleanConstructor;
     }, {
         input: import("vue").Ref<HTMLInputElement | undefined>;
         textarea: import("vue").Ref<HTMLTextAreaElement | undefined>;
         attrs: import("vue").ComputedRef<Record<string, unknown>>;
-        inputSize: import("vue").ComputedRef<any>;
+        inputSize: import("vue").ComputedRef<"" | import("../../utils/types").ComponentSize>;
         validateState: import("vue").ComputedRef<string>;
         validateIcon: import("vue").ComputedRef<any>;
         containerStyle: import("vue").ComputedRef<import("../../utils/types").StyleValue>;
@@ -85,6 +85,8 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
         compositionupdate: (evt: CompositionEvent) => boolean;
         compositionend: (evt: CompositionEvent) => boolean;
     }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+        readonly size?: unknown;
+        readonly disabled?: unknown;
         readonly modelValue?: unknown;
         readonly type?: unknown;
         readonly resize?: unknown;
@@ -102,11 +104,9 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
         readonly tabindex?: unknown;
         readonly validateEvent?: unknown;
         readonly inputStyle?: unknown;
-        readonly size?: unknown;
-        readonly disabled?: unknown;
     } & {
         type: string;
-        size: import("../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", unknown>;
+        size: import("../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", never>;
         disabled: boolean;
         modelValue: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | number | null | undefined>, unknown, unknown>;
         form: string;
@@ -124,13 +124,12 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
         validateEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         inputStyle: import("../../utils/types").StyleValue;
     } & {
-        placeholder?: string | undefined;
         label?: string | undefined;
         resize?: import("../../utils/props").BuildPropType<StringConstructor, "none" | "both" | "horizontal" | "vertical", unknown> | undefined;
+        placeholder?: string | undefined;
         tabindex?: import("../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown> | undefined;
     }> & {
         onChange?: ((value: string) => any) | undefined;
-        onClear?: (() => any) | undefined;
         onInput?: ((value: string) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
         onBlur?: ((evt: FocusEvent) => any) | undefined;
@@ -141,10 +140,10 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
         onKeydown?: ((evt: KeyboardEvent) => any) | undefined;
         onMouseenter?: ((evt: MouseEvent) => any) | undefined;
         onMouseleave?: ((evt: MouseEvent) => any) | undefined;
+        onClear?: (() => any) | undefined;
     }, {
-        placeholder: string;
         type: string;
-        size: import("../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", unknown>;
+        size: import("../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", never>;
         disabled: boolean;
         modelValue: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | number | null | undefined>, unknown, unknown>;
         label: string;
@@ -155,6 +154,7 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
             maxRows?: number | undefined;
         };
         autocomplete: string;
+        placeholder: string;
         readonly: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         clearable: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         showPassword: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -165,6 +165,8 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
         validateEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         inputStyle: import("../../utils/types").StyleValue;
     }>> & Record<string, any>, {}, {}, {}, {}, {}, import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
+        readonly size: import("../../utils/props").BuildPropReturn<StringConstructor, "", false, "" | "small" | "large" | "medium" | "mini", never>;
+        readonly disabled: BooleanConstructor;
         readonly modelValue: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | number | null | undefined>, "", unknown, unknown, unknown>;
         readonly type: import("../../utils/props").BuildPropReturn<StringConstructor, "text", unknown, unknown, unknown>;
         readonly resize: import("../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, "none" | "both" | "horizontal" | "vertical", unknown>;
@@ -185,13 +187,11 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
         readonly tabindex: import("../../utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, unknown, unknown, unknown>;
         readonly validateEvent: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
         readonly inputStyle: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("../../utils/types").StyleValue>, () => import("../../utils/types").Mutable<{}>, unknown, unknown, unknown>;
-        readonly size: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "small" | "large" | "medium" | "mini", unknown>;
-        readonly disabled: BooleanConstructor;
     }, {
         input: import("vue").Ref<HTMLInputElement | undefined>;
         textarea: import("vue").Ref<HTMLTextAreaElement | undefined>;
         attrs: import("vue").ComputedRef<Record<string, unknown>>;
-        inputSize: import("vue").ComputedRef<any>;
+        inputSize: import("vue").ComputedRef<"" | import("../../utils/types").ComponentSize>;
         validateState: import("vue").ComputedRef<string>;
         validateIcon: import("vue").ComputedRef<any>;
         containerStyle: import("vue").ComputedRef<import("../../utils/types").StyleValue>;
@@ -236,6 +236,8 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
         compositionupdate: (evt: CompositionEvent) => boolean;
         compositionend: (evt: CompositionEvent) => boolean;
     }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+        readonly size?: unknown;
+        readonly disabled?: unknown;
         readonly modelValue?: unknown;
         readonly type?: unknown;
         readonly resize?: unknown;
@@ -253,11 +255,9 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
         readonly tabindex?: unknown;
         readonly validateEvent?: unknown;
         readonly inputStyle?: unknown;
-        readonly size?: unknown;
-        readonly disabled?: unknown;
     } & {
         type: string;
-        size: import("../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", unknown>;
+        size: import("../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", never>;
         disabled: boolean;
         modelValue: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | number | null | undefined>, unknown, unknown>;
         form: string;
@@ -275,13 +275,12 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
         validateEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         inputStyle: import("../../utils/types").StyleValue;
     } & {
-        placeholder?: string | undefined;
         label?: string | undefined;
         resize?: import("../../utils/props").BuildPropType<StringConstructor, "none" | "both" | "horizontal" | "vertical", unknown> | undefined;
+        placeholder?: string | undefined;
         tabindex?: import("../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown> | undefined;
     }> & {
         onChange?: ((value: string) => any) | undefined;
-        onClear?: (() => any) | undefined;
         onInput?: ((value: string) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
         onBlur?: ((evt: FocusEvent) => any) | undefined;
@@ -292,10 +291,10 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
         onKeydown?: ((evt: KeyboardEvent) => any) | undefined;
         onMouseenter?: ((evt: MouseEvent) => any) | undefined;
         onMouseleave?: ((evt: MouseEvent) => any) | undefined;
+        onClear?: (() => any) | undefined;
     }, {
-        placeholder: string;
         type: string;
-        size: import("../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", unknown>;
+        size: import("../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", never>;
         disabled: boolean;
         modelValue: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | number | null | undefined>, unknown, unknown>;
         label: string;
@@ -306,6 +305,7 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
             maxRows?: number | undefined;
         };
         autocomplete: string;
+        placeholder: string;
         readonly: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         clearable: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         showPassword: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -322,7 +322,7 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
     controlsAtRight: import("vue").ComputedRef<boolean>;
     decrease: () => void;
     increase: () => void;
-    inputNumberSize: import("vue").ComputedRef<any>;
+    inputNumberSize: import("vue").ComputedRef<"" | import("../../utils/types").ComponentSize>;
     inputNumberDisabled: import("vue").ComputedRef<boolean>;
     maxDisabled: import("vue").ComputedRef<boolean>;
     minDisabled: import("vue").ComputedRef<boolean>;
@@ -358,10 +358,10 @@ export declare const ElInputNumber: import("../../utils/types").SFCWithInstall<i
     stepStrictly: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     controlsPosition: import("../../utils/props").BuildPropType<StringConstructor, "" | "right", unknown>;
 } & {
-    placeholder?: string | undefined;
     size?: import("../../utils/props").BuildPropType<StringConstructor, "small" | "large" | "medium" | "mini", unknown> | undefined;
-    label?: string | undefined;
     name?: string | undefined;
+    label?: string | undefined;
+    placeholder?: string | undefined;
     precision?: number | undefined;
 }> & {
     onChange?: ((prev: number, cur: number) => any) | undefined;

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

@@ -15,6 +15,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly precision: import("../../../utils/props").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
 }, {
     input: import("vue").Ref<ComponentPublicInstance<import("../../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
+        readonly size: import("../../../utils/props").BuildPropReturn<StringConstructor, "", false, "" | "small" | "large" | "medium" | "mini", never>;
+        readonly disabled: BooleanConstructor;
         readonly modelValue: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | number | null | undefined>, "", unknown, unknown, unknown>;
         readonly type: import("../../../utils/props").BuildPropReturn<StringConstructor, "text", unknown, unknown, unknown>;
         readonly resize: import("../../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, "none" | "both" | "horizontal" | "vertical", unknown>;
@@ -35,13 +37,11 @@ declare const _default: import("vue").DefineComponent<{
         readonly tabindex: import("../../../utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, unknown, unknown, unknown>;
         readonly validateEvent: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
         readonly inputStyle: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<import("../../../utils/types").StyleValue>, () => import("../../../utils/types").Mutable<{}>, unknown, unknown, unknown>;
-        readonly size: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "small" | "large" | "medium" | "mini", unknown>;
-        readonly disabled: BooleanConstructor;
     }, {
         input: import("vue").Ref<HTMLInputElement | undefined>;
         textarea: import("vue").Ref<HTMLTextAreaElement | undefined>;
         attrs: import("vue").ComputedRef<Record<string, unknown>>;
-        inputSize: import("vue").ComputedRef<any>;
+        inputSize: import("vue").ComputedRef<"" | import("../../../utils/types").ComponentSize>;
         validateState: import("vue").ComputedRef<string>;
         validateIcon: import("vue").ComputedRef<any>;
         containerStyle: import("vue").ComputedRef<import("../../../utils/types").StyleValue>;
@@ -86,6 +86,8 @@ declare const _default: import("vue").DefineComponent<{
         compositionupdate: (evt: CompositionEvent) => boolean;
         compositionend: (evt: CompositionEvent) => boolean;
     }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+        readonly size?: unknown;
+        readonly disabled?: unknown;
         readonly modelValue?: unknown;
         readonly type?: unknown;
         readonly resize?: unknown;
@@ -103,11 +105,9 @@ declare const _default: import("vue").DefineComponent<{
         readonly tabindex?: unknown;
         readonly validateEvent?: unknown;
         readonly inputStyle?: unknown;
-        readonly size?: unknown;
-        readonly disabled?: unknown;
     } & {
         type: string;
-        size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", unknown>;
+        size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", never>;
         disabled: boolean;
         modelValue: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | number | null | undefined>, unknown, unknown>;
         form: string;
@@ -125,13 +125,12 @@ declare const _default: import("vue").DefineComponent<{
         validateEvent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         inputStyle: import("../../../utils/types").StyleValue;
     } & {
-        placeholder?: string | undefined;
         label?: string | undefined;
         resize?: import("../../../utils/props").BuildPropType<StringConstructor, "none" | "both" | "horizontal" | "vertical", unknown> | undefined;
+        placeholder?: string | undefined;
         tabindex?: import("../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown> | undefined;
     }> & {
         onChange?: ((value: string) => any) | undefined;
-        onClear?: (() => any) | undefined;
         onInput?: ((value: string) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
         onBlur?: ((evt: FocusEvent) => any) | undefined;
@@ -142,10 +141,10 @@ declare const _default: import("vue").DefineComponent<{
         onKeydown?: ((evt: KeyboardEvent) => any) | undefined;
         onMouseenter?: ((evt: MouseEvent) => any) | undefined;
         onMouseleave?: ((evt: MouseEvent) => any) | undefined;
+        onClear?: (() => any) | undefined;
     }, {
-        placeholder: string;
         type: string;
-        size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", unknown>;
+        size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", never>;
         disabled: boolean;
         modelValue: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | number | null | undefined>, unknown, unknown>;
         label: string;
@@ -156,6 +155,7 @@ declare const _default: import("vue").DefineComponent<{
             maxRows?: number | undefined;
         };
         autocomplete: string;
+        placeholder: string;
         readonly: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         clearable: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         showPassword: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -166,6 +166,8 @@ declare const _default: import("vue").DefineComponent<{
         validateEvent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         inputStyle: import("../../../utils/types").StyleValue;
     }>> & Record<string, any>, {}, {}, {}, {}, {}, import("../../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
+        readonly size: import("../../../utils/props").BuildPropReturn<StringConstructor, "", false, "" | "small" | "large" | "medium" | "mini", never>;
+        readonly disabled: BooleanConstructor;
         readonly modelValue: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | number | null | undefined>, "", unknown, unknown, unknown>;
         readonly type: import("../../../utils/props").BuildPropReturn<StringConstructor, "text", unknown, unknown, unknown>;
         readonly resize: import("../../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, "none" | "both" | "horizontal" | "vertical", unknown>;
@@ -186,13 +188,11 @@ declare const _default: import("vue").DefineComponent<{
         readonly tabindex: import("../../../utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, unknown, unknown, unknown>;
         readonly validateEvent: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
         readonly inputStyle: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<import("../../../utils/types").StyleValue>, () => import("../../../utils/types").Mutable<{}>, unknown, unknown, unknown>;
-        readonly size: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "small" | "large" | "medium" | "mini", unknown>;
-        readonly disabled: BooleanConstructor;
     }, {
         input: import("vue").Ref<HTMLInputElement | undefined>;
         textarea: import("vue").Ref<HTMLTextAreaElement | undefined>;
         attrs: import("vue").ComputedRef<Record<string, unknown>>;
-        inputSize: import("vue").ComputedRef<any>;
+        inputSize: import("vue").ComputedRef<"" | import("../../../utils/types").ComponentSize>;
         validateState: import("vue").ComputedRef<string>;
         validateIcon: import("vue").ComputedRef<any>;
         containerStyle: import("vue").ComputedRef<import("../../../utils/types").StyleValue>;
@@ -237,6 +237,8 @@ declare const _default: import("vue").DefineComponent<{
         compositionupdate: (evt: CompositionEvent) => boolean;
         compositionend: (evt: CompositionEvent) => boolean;
     }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+        readonly size?: unknown;
+        readonly disabled?: unknown;
         readonly modelValue?: unknown;
         readonly type?: unknown;
         readonly resize?: unknown;
@@ -254,11 +256,9 @@ declare const _default: import("vue").DefineComponent<{
         readonly tabindex?: unknown;
         readonly validateEvent?: unknown;
         readonly inputStyle?: unknown;
-        readonly size?: unknown;
-        readonly disabled?: unknown;
     } & {
         type: string;
-        size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", unknown>;
+        size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", never>;
         disabled: boolean;
         modelValue: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | number | null | undefined>, unknown, unknown>;
         form: string;
@@ -276,13 +276,12 @@ declare const _default: import("vue").DefineComponent<{
         validateEvent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         inputStyle: import("../../../utils/types").StyleValue;
     } & {
-        placeholder?: string | undefined;
         label?: string | undefined;
         resize?: import("../../../utils/props").BuildPropType<StringConstructor, "none" | "both" | "horizontal" | "vertical", unknown> | undefined;
+        placeholder?: string | undefined;
         tabindex?: import("../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown> | undefined;
     }> & {
         onChange?: ((value: string) => any) | undefined;
-        onClear?: (() => any) | undefined;
         onInput?: ((value: string) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
         onBlur?: ((evt: FocusEvent) => any) | undefined;
@@ -293,10 +292,10 @@ declare const _default: import("vue").DefineComponent<{
         onKeydown?: ((evt: KeyboardEvent) => any) | undefined;
         onMouseenter?: ((evt: MouseEvent) => any) | undefined;
         onMouseleave?: ((evt: MouseEvent) => any) | undefined;
+        onClear?: (() => any) | undefined;
     }, {
-        placeholder: string;
         type: string;
-        size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", unknown>;
+        size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", never>;
         disabled: boolean;
         modelValue: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | number | null | undefined>, unknown, unknown>;
         label: string;
@@ -307,6 +306,7 @@ declare const _default: import("vue").DefineComponent<{
             maxRows?: number | undefined;
         };
         autocomplete: string;
+        placeholder: string;
         readonly: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         clearable: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         showPassword: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -323,7 +323,7 @@ declare const _default: import("vue").DefineComponent<{
     controlsAtRight: import("vue").ComputedRef<boolean>;
     decrease: () => void;
     increase: () => void;
-    inputNumberSize: import("vue").ComputedRef<any>;
+    inputNumberSize: import("vue").ComputedRef<"" | import("../../../utils/types").ComponentSize>;
     inputNumberDisabled: import("vue").ComputedRef<boolean>;
     maxDisabled: import("vue").ComputedRef<boolean>;
     minDisabled: import("vue").ComputedRef<boolean>;
@@ -359,10 +359,10 @@ declare const _default: import("vue").DefineComponent<{
     stepStrictly: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     controlsPosition: import("../../../utils/props").BuildPropType<StringConstructor, "" | "right", unknown>;
 } & {
-    placeholder?: string | undefined;
     size?: import("../../../utils/props").BuildPropType<StringConstructor, "small" | "large" | "medium" | "mini", unknown> | undefined;
-    label?: string | undefined;
     name?: string | undefined;
+    label?: string | undefined;
+    placeholder?: string | undefined;
     precision?: number | undefined;
 }> & {
     onChange?: ((prev: number, cur: number) => any) | undefined;

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

@@ -9,20 +9,20 @@ require('../../../hooks/index.js');
 var index = require('../../input/index.js');
 var util = require('../../../utils/util.js');
 var error = require('../../../utils/error.js');
-var icons = require('@element-plus/icons');
+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-form-item/index.js');
+var index$3 = require('../../../hooks/use-common-props/index.js');
 
 var script = vue.defineComponent({
   name: "ElInputNumber",
   components: {
     ElInput: index.ElInput,
     ElIcon: index$1.ElIcon,
-    ArrowUp: icons.ArrowUp,
-    ArrowDown: icons.ArrowDown,
-    Plus: icons.Plus,
-    Minus: icons.Minus
+    ArrowUp: iconsVue.ArrowUp,
+    ArrowDown: iconsVue.ArrowDown,
+    Plus: iconsVue.Plus,
+    Minus: iconsVue.Minus
   },
   directives: {
     RepeatClick: index$2["default"]
@@ -51,7 +51,8 @@ var script = vue.defineComponent({
     const controlsAtRight = vue.computed(() => {
       return props.controls && props.controlsPosition === "right";
     });
-    const { size: inputNumberSize, disabled: inputNumberDisabled } = index$3.useFormItem({});
+    const inputNumberSize = index$3.useSize();
+    const inputNumberDisabled = index$3.useDisabled();
     const displayValue = vue.computed(() => {
       if (data.userInput !== null) {
         return data.userInput;
@@ -162,11 +163,11 @@ var script = vue.defineComponent({
           newVal = toPrecision(newVal, props.precision);
         }
       }
-      if (newVal !== void 0 && newVal >= props.max) {
+      if (newVal !== void 0 && newVal > props.max) {
         newVal = props.max;
         emit("update:modelValue", newVal);
       }
-      if (newVal !== void 0 && newVal <= props.min) {
+      if (newVal !== void 0 && newVal < props.min) {
         newVal = props.min;
         emit("update:modelValue", newVal);
       }