element-plus 1.3.0-beta.7 → 2.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"input2.js","sources":["../../../../../../packages/components/input/src/input.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"type !== 'hidden'\"\n    :class=\"[\n      type === 'textarea' ? nsTextarea.b() : nsInput.b(),\n      nsInput.m(inputSize),\n      nsInput.is('disabled', inputDisabled),\n      nsInput.is('exceed', inputExceed),\n      {\n        [nsInput.b('group')]: $slots.prepend || $slots.append,\n        [nsInput.bm('group', 'append')]: $slots.append,\n        [nsInput.bm('group', 'prepend')]: $slots.prepend,\n        [nsInput.m('prefix')]: $slots.prefix || prefixIcon,\n        [nsInput.m('suffix')]:\n          $slots.suffix || suffixIcon || clearable || showPassword,\n        [nsInput.m('suffix--password-clear')]: clearable && showPassword,\n      },\n      $attrs.class,\n    ]\"\n    :style=\"containerStyle\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <!-- input -->\n    <template v-if=\"type !== 'textarea'\">\n      <!-- prepend slot -->\n      <div v-if=\"$slots.prepend\" :class=\"nsInput.be('group', 'prepend')\">\n        <slot name=\"prepend\" />\n      </div>\n\n      <input\n        ref=\"input\"\n        :class=\"nsInput.e('inner')\"\n        v-bind=\"attrs\"\n        :type=\"showPassword ? (passwordVisible ? 'text' : 'password') : type\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :tabindex=\"tabindex\"\n        :aria-label=\"label\"\n        :placeholder=\"placeholder\"\n        :style=\"inputStyle\"\n        @compositionstart=\"handleCompositionStart\"\n        @compositionupdate=\"handleCompositionUpdate\"\n        @compositionend=\"handleCompositionEnd\"\n        @input=\"handleInput\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @change=\"handleChange\"\n        @keydown=\"handleKeydown\"\n      />\n\n      <!-- prefix slot -->\n      <span v-if=\"$slots.prefix || prefixIcon\" :class=\"nsInput.e('prefix')\">\n        <span :class=\"nsInput.e('prefix-inner')\">\n          <slot name=\"prefix\"></slot>\n          <el-icon v-if=\"prefixIcon\" :class=\"nsInput.e('icon')\">\n            <component :is=\"prefixIcon\" />\n          </el-icon>\n        </span>\n      </span>\n\n      <!-- suffix slot -->\n      <span v-if=\"suffixVisible\" :class=\"nsInput.e('suffix')\">\n        <span :class=\"nsInput.e('suffix-inner')\">\n          <template v-if=\"!showClear || !showPwdVisible || !isWordLimitVisible\">\n            <slot name=\"suffix\"></slot>\n            <el-icon v-if=\"suffixIcon\" :class=\"nsInput.e('icon')\">\n              <component :is=\"suffixIcon\" />\n            </el-icon>\n          </template>\n          <el-icon\n            v-if=\"showClear\"\n            :class=\"[nsInput.e('icon'), nsInput.e('clear')]\"\n            @mousedown.prevent\n            @click=\"clear\"\n          >\n            <circle-close />\n          </el-icon>\n          <el-icon\n            v-if=\"showPwdVisible\"\n            :class=\"[nsInput.e('icon'), nsInput.e('clear')]\"\n            @click=\"handlePasswordVisible\"\n          >\n            <icon-view />\n          </el-icon>\n          <span v-if=\"isWordLimitVisible\" :class=\"nsInput.e('count')\">\n            <span :class=\"nsInput.e('count-inner')\">\n              {{ textLength }} / {{ attrs.maxlength }}\n            </span>\n          </span>\n        </span>\n        <el-icon\n          v-if=\"validateState && validateIcon && needStatusIcon\"\n          :class=\"[nsInput.e('icon'), nsInput.e('validateIcon')]\"\n        >\n          <component :is=\"validateIcon\" />\n        </el-icon>\n      </span>\n\n      <!-- append slot -->\n      <div v-if=\"$slots.append\" :class=\"nsInput.be('group', 'append')\">\n        <slot name=\"append\" />\n      </div>\n    </template>\n\n    <!-- textarea -->\n    <template v-else>\n      <textarea\n        ref=\"textarea\"\n        :class=\"nsTextarea.e('inner')\"\n        v-bind=\"attrs\"\n        :tabindex=\"tabindex\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :style=\"computedTextareaStyle\"\n        :aria-label=\"label\"\n        :placeholder=\"placeholder\"\n        @compositionstart=\"handleCompositionStart\"\n        @compositionupdate=\"handleCompositionUpdate\"\n        @compositionend=\"handleCompositionEnd\"\n        @input=\"handleInput\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @change=\"handleChange\"\n        @keydown=\"handleKeydown\"\n      />\n      <span v-if=\"isWordLimitVisible\" :class=\"nsInput.e('count')\">\n        {{ textLength }} / {{ attrs.maxlength }}\n      </span>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  watch,\n  nextTick,\n  getCurrentInstance,\n  ref,\n  shallowRef,\n  onMounted,\n  onUpdated,\n} from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CircleClose, View as IconView } from '@element-plus/icons-vue'\nimport { ValidateComponentsMap } from '@element-plus/utils/icon'\nimport {\n  useAttrs,\n  useDisabled,\n  useFormItem,\n  useSize,\n  useNamespace,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isObject } from '@element-plus/utils/util'\nimport { isKorean } from '@element-plus/utils/isDef'\nimport { calcTextareaHeight } from './calc-textarea-height'\nimport { inputProps, inputEmits } from './input'\n\nimport type { StyleValue } from '@element-plus/utils/types'\n\ntype TargetElement = HTMLInputElement | HTMLTextAreaElement\n\nconst PENDANT_MAP = {\n  suffix: 'append',\n  prefix: 'prepend',\n} as const\n\nexport default defineComponent({\n  name: 'ElInput',\n\n  components: { ElIcon, CircleClose, IconView },\n\n  inheritAttrs: false,\n\n  props: inputProps,\n  emits: inputEmits,\n\n  setup(props, { slots, emit, attrs: rawAttrs }) {\n    const instance = getCurrentInstance()!\n    const attrs = useAttrs()\n\n    const { form, formItem } = useFormItem()\n    const inputSize = useSize()\n    const inputDisabled = useDisabled()\n    const nsInput = useNamespace('input')\n    const nsTextarea = useNamespace('textarea')\n\n    const input = ref<HTMLInputElement>()\n    const textarea = ref<HTMLTextAreaElement>()\n    const focused = ref(false)\n    const hovering = ref(false)\n    const isComposing = ref(false)\n    const passwordVisible = ref(false)\n    const _textareaCalcStyle = shallowRef(props.inputStyle)\n\n    const inputOrTextarea = computed(() => input.value || textarea.value)\n\n    const needStatusIcon = computed(() => form?.statusIcon ?? false)\n    const validateState = computed(() => formItem?.validateState || '')\n    const validateIcon = computed(\n      () => ValidateComponentsMap[validateState.value]\n    )\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n    const computedTextareaStyle = computed<StyleValue>(() => [\n      props.inputStyle,\n      _textareaCalcStyle.value,\n      { resize: props.resize },\n    ])\n    const nativeInputValue = computed(() =>\n      props.modelValue === null || props.modelValue === undefined\n        ? ''\n        : String(props.modelValue)\n    )\n    const showClear = computed(\n      () =>\n        props.clearable &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        !!nativeInputValue.value &&\n        (focused.value || hovering.value)\n    )\n    const showPwdVisible = computed(\n      () =>\n        props.showPassword &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        (!!nativeInputValue.value || focused.value)\n    )\n    const isWordLimitVisible = computed(\n      () =>\n        props.showWordLimit &&\n        !!attrs.value.maxlength &&\n        (props.type === 'text' || props.type === 'textarea') &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        !props.showPassword\n    )\n    const textLength = computed(() => Array.from(nativeInputValue.value).length)\n    const inputExceed = computed(\n      () =>\n        // show exceed style if length of initial value greater then maxlength\n        !!isWordLimitVisible.value &&\n        textLength.value > Number(attrs.value.maxlength)\n    )\n\n    const resizeTextarea = () => {\n      const { type, autosize } = props\n\n      if (!isClient || type !== 'textarea') return\n\n      if (autosize) {\n        const minRows = isObject(autosize) ? autosize.minRows : undefined\n        const maxRows = isObject(autosize) ? autosize.maxRows : undefined\n        _textareaCalcStyle.value = {\n          ...calcTextareaHeight(textarea.value!, minRows, maxRows),\n        }\n      } else {\n        _textareaCalcStyle.value = {\n          minHeight: calcTextareaHeight(textarea.value!).minHeight,\n        }\n      }\n    }\n\n    const setNativeInputValue = () => {\n      const input = inputOrTextarea.value\n      if (!input || input.value === nativeInputValue.value) return\n      input.value = nativeInputValue.value\n    }\n\n    const calcIconOffset = (place: 'prefix' | 'suffix') => {\n      const { el } = instance.vnode\n      if (!el) return\n      const elList: HTMLSpanElement[] = Array.from(\n        el.querySelectorAll(`.${nsInput.e(place)}`)\n      )\n      const target = elList.find((item) => item.parentNode === el)\n\n      if (!target) return\n\n      const pendant = PENDANT_MAP[place]\n\n      if (slots[pendant]) {\n        target.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${\n          el.querySelector(`.${nsInput.be('group', pendant)}`).offsetWidth\n        }px)`\n      } else {\n        target.removeAttribute('style')\n      }\n    }\n\n    const updateIconOffset = () => {\n      calcIconOffset('prefix')\n      calcIconOffset('suffix')\n    }\n\n    const handleInput = (event: Event) => {\n      const { value } = event.target as TargetElement\n\n      // should not emit input during composition\n      // see: https://github.com/ElemeFE/element/issues/10516\n      if (isComposing.value) return\n\n      // hack for https://github.com/ElemeFE/element/issues/8548\n      // should remove the following line when we don't support IE\n      if (value === nativeInputValue.value) return\n\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('input', value)\n\n      // ensure native input value is controlled\n      // see: https://github.com/ElemeFE/element/issues/12850\n      nextTick(setNativeInputValue)\n    }\n\n    const handleChange = (event: Event) => {\n      emit('change', (event.target as TargetElement).value)\n    }\n\n    const focus = () => {\n      // see: https://github.com/ElemeFE/element/issues/18573\n      nextTick(() => {\n        inputOrTextarea.value?.focus()\n      })\n    }\n\n    const blur = () => {\n      inputOrTextarea.value?.blur()\n    }\n\n    const handleFocus = (event: FocusEvent) => {\n      focused.value = true\n      emit('focus', event)\n    }\n\n    const handleBlur = (event: FocusEvent) => {\n      focused.value = false\n      emit('blur', event)\n      if (props.validateEvent) {\n        formItem?.validate?.('blur')\n      }\n    }\n\n    const select = () => {\n      inputOrTextarea.value?.select()\n    }\n\n    const handleCompositionStart = (event: CompositionEvent) => {\n      emit('compositionstart', event)\n      isComposing.value = true\n    }\n\n    const handleCompositionUpdate = (event: CompositionEvent) => {\n      emit('compositionupdate', event)\n      const text = (event.target as HTMLInputElement)?.value\n      const lastCharacter = text[text.length - 1] || ''\n      isComposing.value = !isKorean(lastCharacter)\n    }\n\n    const handleCompositionEnd = (event: CompositionEvent) => {\n      emit('compositionend', event)\n      if (isComposing.value) {\n        isComposing.value = false\n        handleInput(event)\n      }\n    }\n\n    const clear = () => {\n      emit(UPDATE_MODEL_EVENT, '')\n      emit('change', '')\n      emit('clear')\n      emit('input', '')\n    }\n\n    const handlePasswordVisible = () => {\n      passwordVisible.value = !passwordVisible.value\n      focus()\n    }\n\n    const suffixVisible = computed(\n      () =>\n        !!slots.suffix ||\n        !!props.suffixIcon ||\n        showClear.value ||\n        props.showPassword ||\n        isWordLimitVisible.value ||\n        (!!validateState.value && needStatusIcon.value)\n    )\n\n    watch(\n      () => props.modelValue,\n      () => {\n        nextTick(resizeTextarea)\n        if (props.validateEvent) {\n          formItem?.validate?.('change')\n        }\n      }\n    )\n\n    // native input value is set explicitly\n    // do not use v-model / :value in template\n    // see: https://github.com/ElemeFE/element/issues/14521\n    watch(nativeInputValue, () => setNativeInputValue())\n\n    // when change between <input> and <textarea>,\n    // update DOM dependent value and styles\n    // https://github.com/ElemeFE/element/issues/14857\n    watch(\n      () => props.type,\n      () => {\n        nextTick(() => {\n          setNativeInputValue()\n          resizeTextarea()\n          updateIconOffset()\n        })\n      }\n    )\n\n    onMounted(() => {\n      setNativeInputValue()\n      updateIconOffset()\n      nextTick(resizeTextarea)\n    })\n\n    onUpdated(() => {\n      nextTick(updateIconOffset)\n    })\n\n    const onMouseLeave = (evt: MouseEvent) => {\n      hovering.value = false\n      emit('mouseleave', evt)\n    }\n\n    const onMouseEnter = (evt: MouseEvent) => {\n      hovering.value = true\n      emit('mouseenter', evt)\n    }\n\n    const handleKeydown = (evt: KeyboardEvent) => {\n      emit('keydown', evt)\n    }\n\n    return {\n      input,\n      textarea,\n      attrs,\n      inputSize,\n      validateState,\n      validateIcon,\n      containerStyle,\n      computedTextareaStyle,\n      inputDisabled,\n      showClear,\n      showPwdVisible,\n      isWordLimitVisible,\n      textLength,\n      hovering,\n      inputExceed,\n      passwordVisible,\n      inputOrTextarea,\n      suffixVisible,\n      needStatusIcon,\n\n      resizeTextarea,\n      handleInput,\n      handleChange,\n      handleFocus,\n      handleBlur,\n      handleCompositionStart,\n      handleCompositionUpdate,\n      handleCompositionEnd,\n      handlePasswordVisible,\n      clear,\n      select,\n      focus,\n      blur,\n      onMouseLeave,\n      onMouseEnter,\n      handleKeydown,\n\n      nsInput,\n      nsTextarea,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElIcon","CircleClose","IconView","inputProps","inputEmits","getCurrentInstance","useAttrs","useFormItem","useSize","useDisabled","useNamespace","ref","shallowRef","computed","ValidateComponentsMap","isClient","isObject","calcTextareaHeight","UPDATE_MODEL_EVENT","isKorean","_withDirectives","_normalizeClass","_createElementBlock","_createCommentVNode","_withCtx","_Fragment"],"mappings":"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"}
+{"version":3,"file":"input2.js","sources":["../../../../../../packages/components/input/src/input.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"type !== 'hidden'\"\n    :class=\"[\n      type === 'textarea' ? nsTextarea.b() : nsInput.b(),\n      nsInput.m(inputSize),\n      nsInput.is('disabled', inputDisabled),\n      nsInput.is('exceed', inputExceed),\n      {\n        [nsInput.b('group')]: $slots.prepend || $slots.append,\n        [nsInput.bm('group', 'append')]: $slots.append,\n        [nsInput.bm('group', 'prepend')]: $slots.prepend,\n        [nsInput.m('prefix')]: $slots.prefix || prefixIcon,\n        [nsInput.m('suffix')]:\n          $slots.suffix || suffixIcon || clearable || showPassword,\n        [nsInput.m('suffix--password-clear')]: clearable && showPassword,\n      },\n      $attrs.class,\n    ]\"\n    :style=\"containerStyle\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <!-- input -->\n    <template v-if=\"type !== 'textarea'\">\n      <!-- prepend slot -->\n      <div v-if=\"$slots.prepend\" :class=\"nsInput.be('group', 'prepend')\">\n        <slot name=\"prepend\" />\n      </div>\n\n      <input\n        ref=\"input\"\n        :class=\"nsInput.e('inner')\"\n        v-bind=\"attrs\"\n        :type=\"showPassword ? (passwordVisible ? 'text' : 'password') : type\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :tabindex=\"tabindex\"\n        :aria-label=\"label\"\n        :placeholder=\"placeholder\"\n        :style=\"inputStyle\"\n        @compositionstart=\"handleCompositionStart\"\n        @compositionupdate=\"handleCompositionUpdate\"\n        @compositionend=\"handleCompositionEnd\"\n        @input=\"handleInput\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @change=\"handleChange\"\n        @keydown=\"handleKeydown\"\n      />\n\n      <!-- prefix slot -->\n      <span v-if=\"$slots.prefix || prefixIcon\" :class=\"nsInput.e('prefix')\">\n        <span :class=\"nsInput.e('prefix-inner')\">\n          <slot name=\"prefix\"></slot>\n          <el-icon v-if=\"prefixIcon\" :class=\"nsInput.e('icon')\">\n            <component :is=\"prefixIcon\" />\n          </el-icon>\n        </span>\n      </span>\n\n      <!-- suffix slot -->\n      <span v-if=\"suffixVisible\" :class=\"nsInput.e('suffix')\">\n        <span :class=\"nsInput.e('suffix-inner')\">\n          <template v-if=\"!showClear || !showPwdVisible || !isWordLimitVisible\">\n            <slot name=\"suffix\"></slot>\n            <el-icon v-if=\"suffixIcon\" :class=\"nsInput.e('icon')\">\n              <component :is=\"suffixIcon\" />\n            </el-icon>\n          </template>\n          <el-icon\n            v-if=\"showClear\"\n            :class=\"[nsInput.e('icon'), nsInput.e('clear')]\"\n            @mousedown.prevent\n            @click=\"clear\"\n          >\n            <circle-close />\n          </el-icon>\n          <el-icon\n            v-if=\"showPwdVisible\"\n            :class=\"[nsInput.e('icon'), nsInput.e('clear')]\"\n            @click=\"handlePasswordVisible\"\n          >\n            <icon-view />\n          </el-icon>\n          <span v-if=\"isWordLimitVisible\" :class=\"nsInput.e('count')\">\n            <span :class=\"nsInput.e('count-inner')\">\n              {{ textLength }} / {{ attrs.maxlength }}\n            </span>\n          </span>\n        </span>\n        <el-icon\n          v-if=\"validateState && validateIcon && needStatusIcon\"\n          :class=\"[nsInput.e('icon'), nsInput.e('validateIcon')]\"\n        >\n          <component :is=\"validateIcon\" />\n        </el-icon>\n      </span>\n\n      <!-- append slot -->\n      <div v-if=\"$slots.append\" :class=\"nsInput.be('group', 'append')\">\n        <slot name=\"append\" />\n      </div>\n    </template>\n\n    <!-- textarea -->\n    <template v-else>\n      <textarea\n        ref=\"textarea\"\n        :class=\"nsTextarea.e('inner')\"\n        v-bind=\"attrs\"\n        :tabindex=\"tabindex\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :style=\"computedTextareaStyle\"\n        :aria-label=\"label\"\n        :placeholder=\"placeholder\"\n        @compositionstart=\"handleCompositionStart\"\n        @compositionupdate=\"handleCompositionUpdate\"\n        @compositionend=\"handleCompositionEnd\"\n        @input=\"handleInput\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @change=\"handleChange\"\n        @keydown=\"handleKeydown\"\n      />\n      <span v-if=\"isWordLimitVisible\" :class=\"nsInput.e('count')\">\n        {{ textLength }} / {{ attrs.maxlength }}\n      </span>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  watch,\n  nextTick,\n  getCurrentInstance,\n  ref,\n  shallowRef,\n  onMounted,\n  onUpdated,\n} from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CircleClose, View as IconView } from '@element-plus/icons-vue'\nimport { ValidateComponentsMap } from '@element-plus/utils/icon'\nimport {\n  useAttrs,\n  useDisabled,\n  useFormItem,\n  useSize,\n  useNamespace,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isObject } from '@element-plus/utils/util'\nimport { isKorean } from '@element-plus/utils/isDef'\nimport { calcTextareaHeight } from './calc-textarea-height'\nimport { inputProps, inputEmits } from './input'\n\nimport type { StyleValue } from '@element-plus/utils/types'\n\ntype TargetElement = HTMLInputElement | HTMLTextAreaElement\n\nconst PENDANT_MAP = {\n  suffix: 'append',\n  prefix: 'prepend',\n} as const\n\nexport default defineComponent({\n  name: 'ElInput',\n\n  components: { ElIcon, CircleClose, IconView },\n\n  inheritAttrs: false,\n\n  props: inputProps,\n  emits: inputEmits,\n\n  setup(props, { slots, emit, attrs: rawAttrs }) {\n    const instance = getCurrentInstance()!\n    const attrs = useAttrs()\n\n    const { form, formItem } = useFormItem()\n    const inputSize = useSize()\n    const inputDisabled = useDisabled()\n    const nsInput = useNamespace('input')\n    const nsTextarea = useNamespace('textarea')\n\n    const input = ref<HTMLInputElement>()\n    const textarea = ref<HTMLTextAreaElement>()\n    const focused = ref(false)\n    const hovering = ref(false)\n    const isComposing = ref(false)\n    const passwordVisible = ref(false)\n    const _textareaCalcStyle = shallowRef(props.inputStyle)\n\n    const inputOrTextarea = computed(() => input.value || textarea.value)\n\n    const needStatusIcon = computed(() => form?.statusIcon ?? false)\n    const validateState = computed(() => formItem?.validateState || '')\n    const validateIcon = computed(\n      () => ValidateComponentsMap[validateState.value]\n    )\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n    const computedTextareaStyle = computed<StyleValue>(() => [\n      props.inputStyle,\n      _textareaCalcStyle.value,\n      { resize: props.resize },\n    ])\n    const nativeInputValue = computed(() =>\n      props.modelValue === null || props.modelValue === undefined\n        ? ''\n        : String(props.modelValue)\n    )\n    const showClear = computed(\n      () =>\n        props.clearable &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        !!nativeInputValue.value &&\n        (focused.value || hovering.value)\n    )\n    const showPwdVisible = computed(\n      () =>\n        props.showPassword &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        (!!nativeInputValue.value || focused.value)\n    )\n    const isWordLimitVisible = computed(\n      () =>\n        props.showWordLimit &&\n        !!attrs.value.maxlength &&\n        (props.type === 'text' || props.type === 'textarea') &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        !props.showPassword\n    )\n    const textLength = computed(() => Array.from(nativeInputValue.value).length)\n    const inputExceed = computed(\n      () =>\n        // show exceed style if length of initial value greater then maxlength\n        !!isWordLimitVisible.value &&\n        textLength.value > Number(attrs.value.maxlength)\n    )\n\n    const resizeTextarea = () => {\n      const { type, autosize } = props\n\n      if (!isClient || type !== 'textarea') return\n\n      if (autosize) {\n        const minRows = isObject(autosize) ? autosize.minRows : undefined\n        const maxRows = isObject(autosize) ? autosize.maxRows : undefined\n        _textareaCalcStyle.value = {\n          ...calcTextareaHeight(textarea.value!, minRows, maxRows),\n        }\n      } else {\n        _textareaCalcStyle.value = {\n          minHeight: calcTextareaHeight(textarea.value!).minHeight,\n        }\n      }\n    }\n\n    const setNativeInputValue = () => {\n      const input = inputOrTextarea.value\n      if (!input || input.value === nativeInputValue.value) return\n      input.value = nativeInputValue.value\n    }\n\n    const calcIconOffset = (place: 'prefix' | 'suffix') => {\n      const { el } = instance.vnode\n      if (!el) return\n      const elList: HTMLSpanElement[] = Array.from(\n        el.querySelectorAll(`.${nsInput.e(place)}`)\n      )\n      const target = elList.find((item) => item.parentNode === el)\n\n      if (!target) return\n\n      const pendant = PENDANT_MAP[place]\n\n      if (slots[pendant]) {\n        target.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${\n          el.querySelector(`.${nsInput.be('group', pendant)}`).offsetWidth\n        }px)`\n      } else {\n        target.removeAttribute('style')\n      }\n    }\n\n    const updateIconOffset = () => {\n      calcIconOffset('prefix')\n      calcIconOffset('suffix')\n    }\n\n    const handleInput = (event: Event) => {\n      const { value } = event.target as TargetElement\n\n      // should not emit input during composition\n      // see: https://github.com/ElemeFE/element/issues/10516\n      if (isComposing.value) return\n\n      // hack for https://github.com/ElemeFE/element/issues/8548\n      // should remove the following line when we don't support IE\n      if (value === nativeInputValue.value) return\n\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('input', value)\n\n      // ensure native input value is controlled\n      // see: https://github.com/ElemeFE/element/issues/12850\n      nextTick(setNativeInputValue)\n    }\n\n    const handleChange = (event: Event) => {\n      emit('change', (event.target as TargetElement).value)\n    }\n\n    const focus = () => {\n      // see: https://github.com/ElemeFE/element/issues/18573\n      nextTick(() => {\n        inputOrTextarea.value?.focus()\n      })\n    }\n\n    const blur = () => {\n      inputOrTextarea.value?.blur()\n    }\n\n    const handleFocus = (event: FocusEvent) => {\n      focused.value = true\n      emit('focus', event)\n    }\n\n    const handleBlur = (event: FocusEvent) => {\n      focused.value = false\n      emit('blur', event)\n      if (props.validateEvent) {\n        formItem?.validate?.('blur')\n      }\n    }\n\n    const select = () => {\n      inputOrTextarea.value?.select()\n    }\n\n    const handleCompositionStart = (event: CompositionEvent) => {\n      emit('compositionstart', event)\n      isComposing.value = true\n    }\n\n    const handleCompositionUpdate = (event: CompositionEvent) => {\n      emit('compositionupdate', event)\n      const text = (event.target as HTMLInputElement)?.value\n      const lastCharacter = text[text.length - 1] || ''\n      isComposing.value = !isKorean(lastCharacter)\n    }\n\n    const handleCompositionEnd = (event: CompositionEvent) => {\n      emit('compositionend', event)\n      if (isComposing.value) {\n        isComposing.value = false\n        handleInput(event)\n      }\n    }\n\n    const clear = () => {\n      emit(UPDATE_MODEL_EVENT, '')\n      emit('change', '')\n      emit('clear')\n      emit('input', '')\n    }\n\n    const handlePasswordVisible = () => {\n      passwordVisible.value = !passwordVisible.value\n      focus()\n    }\n\n    const suffixVisible = computed(\n      () =>\n        !!slots.suffix ||\n        !!props.suffixIcon ||\n        showClear.value ||\n        props.showPassword ||\n        isWordLimitVisible.value ||\n        (!!validateState.value && needStatusIcon.value)\n    )\n\n    watch(\n      () => props.modelValue,\n      () => {\n        nextTick(resizeTextarea)\n        if (props.validateEvent) {\n          formItem?.validate?.('change')\n        }\n      }\n    )\n\n    // native input value is set explicitly\n    // do not use v-model / :value in template\n    // see: https://github.com/ElemeFE/element/issues/14521\n    watch(nativeInputValue, () => setNativeInputValue())\n\n    // when change between <input> and <textarea>,\n    // update DOM dependent value and styles\n    // https://github.com/ElemeFE/element/issues/14857\n    watch(\n      () => props.type,\n      () => {\n        nextTick(() => {\n          setNativeInputValue()\n          resizeTextarea()\n          updateIconOffset()\n        })\n      }\n    )\n\n    onMounted(() => {\n      setNativeInputValue()\n      updateIconOffset()\n      nextTick(resizeTextarea)\n    })\n\n    onUpdated(() => {\n      nextTick(updateIconOffset)\n    })\n\n    const onMouseLeave = (evt: MouseEvent) => {\n      hovering.value = false\n      emit('mouseleave', evt)\n    }\n\n    const onMouseEnter = (evt: MouseEvent) => {\n      hovering.value = true\n      emit('mouseenter', evt)\n    }\n\n    const handleKeydown = (evt: KeyboardEvent) => {\n      emit('keydown', evt)\n    }\n\n    return {\n      input,\n      textarea,\n      attrs,\n      inputSize,\n      validateState,\n      validateIcon,\n      containerStyle,\n      computedTextareaStyle,\n      inputDisabled,\n      showClear,\n      showPwdVisible,\n      isWordLimitVisible,\n      textLength,\n      hovering,\n      inputExceed,\n      passwordVisible,\n      inputOrTextarea,\n      suffixVisible,\n      needStatusIcon,\n\n      resizeTextarea,\n      handleInput,\n      handleChange,\n      handleFocus,\n      handleBlur,\n      handleCompositionStart,\n      handleCompositionUpdate,\n      handleCompositionEnd,\n      handlePasswordVisible,\n      clear,\n      select,\n      focus,\n      blur,\n      onMouseLeave,\n      onMouseEnter,\n      handleKeydown,\n\n      nsInput,\n      nsTextarea,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElIcon","CircleClose","IconView","inputProps","inputEmits","getCurrentInstance","useAttrs","useFormItem","useSize","useDisabled","useNamespace","ref","shallowRef","computed","_withDirectives","_renderSlot","_createElementBlock"],"mappings":"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"}

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

@@ -117,6 +117,7 @@ const _sfc_main = 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);
@@ -134,7 +135,7 @@ const _sfc_main = vue.defineComponent({
       emit("update:modelValue", newVal);
       emit("input", newVal);
       emit("change", newVal, oldVal);
-      formItem?.validate?.("change");
+      (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
       data.currentValue = newVal;
     };
     const handleInput = (value) => {
@@ -148,17 +149,20 @@ const _sfc_main = vue.defineComponent({
       data.userInput = null;
     };
     const focus = () => {
-      input.value?.focus?.();
+      var _a, _b;
+      (_b = (_a = input.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
     };
     const blur = () => {
-      input.value?.blur?.();
+      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);
-      formItem?.validate?.("blur");
+      (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur");
     };
     vue.watch(() => props.modelValue, (value) => {
       let newVal = Number(value);
@@ -187,7 +191,8 @@ const _sfc_main = vue.defineComponent({
       data.userInput = null;
     }, { immediate: true });
     vue.onMounted(() => {
-      const innerInput = input.value?.input;
+      var _a;
+      const innerInput = (_a = input.value) == null ? void 0 : _a.input;
       innerInput.setAttribute("role", "spinbutton");
       innerInput.setAttribute("aria-valuemax", String(props.max));
       innerInput.setAttribute("aria-valuemin", String(props.min));
@@ -202,7 +207,8 @@ const _sfc_main = vue.defineComponent({
       }
     });
     vue.onUpdated(() => {
-      const innerInput = input.value?.input;
+      var _a;
+      const innerInput = (_a = input.value) == null ? void 0 : _a.input;
       innerInput.setAttribute("aria-valuenow", data.currentValue);
     });
     return {

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

@@ -1 +1 @@
-{"version":3,"file":"input-number2.js","sources":["../../../../../../packages/components/input-number/src/input-number.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      ns.b(),\n      ns.m(inputNumberSize),\n      ns.is('disabled', inputNumberDisabled),\n      ns.is('without-controls', !controls),\n      ns.is('controls-right', controlsAtRight),\n    ]\"\n    @dragstart.prevent\n  >\n    <span\n      v-if=\"controls\"\n      v-repeat-click=\"decrease\"\n      role=\"button\"\n      :class=\"[ns.e('decrease'), ns.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      role=\"button\"\n      :class=\"[ns.e('increase'), ns.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 {\n  useDisabled,\n  useFormItem,\n  useSize,\n  useNamespace,\n} 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    const ns = useNamespace('input-number')\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 | string) => {\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 = undefined\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 = value !== '' ? 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 (value === null) {\n          newVal = Number.NaN\n        }\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        let val: number | undefined = Number(props.modelValue)\n        if (isNaN(val)) {\n          val = undefined\n        }\n        emit('update:modelValue', val)\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      ns,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElInput","ElIcon","ArrowUp","ArrowDown","Plus","Minus","RepeatClick","inputNumberProps","inputNumberEmits","ref","reactive","useFormItem","useNamespace","computed","useSize","useDisabled","isNumber","_openBlock","_normalizeClass","_withCtx","_createBlock","_createCommentVNode"],"mappings":"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"}
+{"version":3,"file":"input-number2.js","sources":["../../../../../../packages/components/input-number/src/input-number.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      ns.b(),\n      ns.m(inputNumberSize),\n      ns.is('disabled', inputNumberDisabled),\n      ns.is('without-controls', !controls),\n      ns.is('controls-right', controlsAtRight),\n    ]\"\n    @dragstart.prevent\n  >\n    <span\n      v-if=\"controls\"\n      v-repeat-click=\"decrease\"\n      role=\"button\"\n      :class=\"[ns.e('decrease'), ns.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      role=\"button\"\n      :class=\"[ns.e('increase'), ns.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 {\n  useDisabled,\n  useFormItem,\n  useSize,\n  useNamespace,\n} 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    const ns = useNamespace('input-number')\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 | string) => {\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 = undefined\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 = value !== '' ? 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 (value === null) {\n          newVal = Number.NaN\n        }\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        let val: number | undefined = Number(props.modelValue)\n        if (isNaN(val)) {\n          val = undefined\n        }\n        emit('update:modelValue', val)\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      ns,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElInput","ElIcon","ArrowUp","ArrowDown","Plus","Minus","RepeatClick","inputNumberProps","inputNumberEmits","ref","reactive","useFormItem","useNamespace","computed","useSize","useDisabled","isNumber"],"mappings":"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"}

package/lib/components/message/src/message2.js

@@ -45,7 +45,7 @@ const _sfc_main = vue.defineComponent({
       }
     }
     function clearTimer() {
-      stopTimer?.();
+      stopTimer == null ? void 0 : stopTimer();
     }
     function close() {
       visible.value = false;

package/lib/components/message-box/src/index.js

@@ -17,10 +17,13 @@ var icon = require('../../../utils/icon.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
 var index = require('../../../directives/trap-focus/index.js');
 var index$5 = require('../../../hooks/use-locale/index.js');
-var index$6 = require('../../../hooks/use-modal/index.js');
-var index$7 = require('../../../hooks/use-prevent-global/index.js');
-var index$8 = require('../../../hooks/use-lockscreen/index.js');
-var index$9 = require('../../../hooks/use-restore-active/index.js');
+var index$6 = require('../../../hooks/use-common-props/index.js');
+var index$7 = require('../../../hooks/use-draggable/index.js');
+var index$8 = require('../../../hooks/use-same-target/index.js');
+var index$9 = require('../../../hooks/use-modal/index.js');
+var index$a = require('../../../hooks/use-prevent-global/index.js');
+var index$b = require('../../../hooks/use-lockscreen/index.js');
+var index$c = require('../../../hooks/use-restore-active/index.js');
 
 const _sfc_main = vue.defineComponent({
   name: "ElMessageBox",
@@ -65,6 +68,7 @@ const _sfc_main = vue.defineComponent({
       default: true
     },
     center: Boolean,
+    draggable: Boolean,
     roundButton: {
       default: false,
       type: Boolean
@@ -120,10 +124,13 @@ const _sfc_main = vue.defineComponent({
       const type = state.type;
       return type && icon.TypeComponentsMap[type] ? `el-message-box-icon--${type}` : "";
     });
+    const btnSize = index$6.useSize(vue.computed(() => props.buttonSize), { prop: true, form: true, formItem: true });
     const iconComponent = vue.computed(() => state.icon || icon.TypeComponentsMap[state.type] || "");
     const hasMessage = vue.computed(() => !!state.message);
-    const inputRef = vue.ref(null);
-    const confirmRef = vue.ref(null);
+    const rootRef = vue.ref();
+    const headerRef = vue.ref();
+    const inputRef = vue.ref();
+    const confirmRef = vue.ref();
     const confirmButtonClasses = vue.computed(() => state.confirmButtonClass);
     vue.watch(() => state.inputValue, async (val) => {
       await vue.nextTick();
@@ -135,7 +142,8 @@ const _sfc_main = vue.defineComponent({
       if (val) {
         if (props.boxType === "alert" || props.boxType === "confirm") {
           vue.nextTick().then(() => {
-            confirmRef.value?.$el?.focus?.();
+            var _a, _b, _c;
+            (_c = (_b = (_a = confirmRef.value) == null ? void 0 : _a.$el) == null ? void 0 : _b.focus) == null ? void 0 : _c.call(_b);
           });
         }
         state.zIndex = popupManager.PopupManager.nextZIndex();
@@ -153,6 +161,8 @@ const _sfc_main = vue.defineComponent({
         state.validateError = false;
       }
     });
+    const draggable = vue.computed(() => props.draggable);
+    index$7.useDraggable(rootRef, headerRef, draggable);
     vue.onMounted(async () => {
       await vue.nextTick();
       if (props.closeOnHashChange) {
@@ -178,18 +188,20 @@ const _sfc_main = vue.defineComponent({
         handleAction(state.distinguishCancelAndClose ? "close" : "cancel");
       }
     };
+    const overlayEvent = index$8.useSameTarget(handleWrapperClick);
     const handleInputEnter = () => {
       if (state.inputType !== "textarea") {
         return handleAction("confirm");
       }
     };
     const handleAction = (action) => {
+      var _a;
       if (props.boxType === "prompt" && action === "confirm" && !validate()) {
         return;
       }
       state.action = action;
       if (state.beforeClose) {
-        state.beforeClose?.(action, state, doClose);
+        (_a = state.beforeClose) == null ? void 0 : _a.call(state, action, state, doClose);
       } else {
         doClose();
       }
@@ -229,23 +241,27 @@ const _sfc_main = vue.defineComponent({
       handleAction("close");
     };
     if (props.closeOnPressEscape) {
-      index$6.useModal({
+      index$9.useModal({
         handleClose
       }, visible);
     } else {
-      index$7.usePreventGlobal(visible, "keydown", (e) => e.code === aria.EVENT_CODE.esc);
+      index$a.usePreventGlobal(visible, "keydown", (e) => e.code === aria.EVENT_CODE.esc);
     }
     if (props.lockScroll) {
-      index$8.useLockscreen(visible);
+      index$b.useLockscreen(visible);
     }
-    index$9.useRestoreActive(visible);
+    index$c.useRestoreActive(visible);
     return {
       ...vue.toRefs(state),
+      overlayEvent,
       visible,
       hasMessage,
       typeClass,
+      btnSize,
       iconComponent,
       confirmButtonClasses,
+      rootRef,
+      headerRef,
       inputRef,
       confirmRef,
       doClose,
@@ -260,6 +276,7 @@ const _sfc_main = vue.defineComponent({
 const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = {
   key: 0,
+  ref: "headerRef",
   class: "el-message-box__header"
 };
 const _hoisted_3 = { class: "el-message-box__title" };
@@ -282,137 +299,145 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_trap_focus = vue.resolveDirective("trap-focus");
   return vue.openBlock(), vue.createBlock(vue.Transition, {
     name: "fade-in-linear",
-    onAfterLeave: _cache[7] || (_cache[7] = ($event) => _ctx.$emit("vanish"))
+    onAfterLeave: _cache[11] || (_cache[11] = ($event) => _ctx.$emit("vanish"))
   }, {
     default: vue.withCtx(() => [
       vue.withDirectives(vue.createVNode(_component_el_overlay, {
         "z-index": _ctx.zIndex,
         "overlay-class": ["is-message-box", _ctx.modalClass],
-        mask: _ctx.modal,
-        onClick: vue.withModifiers(_ctx.handleWrapperClick, ["self"])
+        mask: _ctx.modal
       }, {
         default: vue.withCtx(() => [
-          vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-            ref: "root",
-            role: "dialog",
-            "aria-label": _ctx.title || "dialog",
-            "aria-modal": "true",
-            class: vue.normalizeClass([
-              "el-message-box",
-              _ctx.customClass,
-              { "el-message-box--center": _ctx.center }
-            ]),
-            style: vue.normalizeStyle(_ctx.customStyle)
+          vue.createElementVNode("div", {
+            class: "el-overlay-message-box",
+            onClick: _cache[8] || (_cache[8] = (...args) => _ctx.overlayEvent.onClick && _ctx.overlayEvent.onClick(...args)),
+            onMousedown: _cache[9] || (_cache[9] = (...args) => _ctx.overlayEvent.onMousedown && _ctx.overlayEvent.onMousedown(...args)),
+            onMouseup: _cache[10] || (_cache[10] = (...args) => _ctx.overlayEvent.onMouseup && _ctx.overlayEvent.onMouseup(...args))
           }, [
-            _ctx.title !== null && _ctx.title !== void 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-              vue.createElementVNode("div", _hoisted_3, [
-                _ctx.iconComponent && _ctx.center ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+            vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+              ref: "rootRef",
+              role: "dialog",
+              "aria-label": _ctx.title || "dialog",
+              "aria-modal": "true",
+              class: vue.normalizeClass([
+                "el-message-box",
+                _ctx.customClass,
+                { "el-message-box--center": _ctx.center, "is-draggable": _ctx.draggable }
+              ]),
+              style: vue.normalizeStyle(_ctx.customStyle),
+              onClick: _cache[7] || (_cache[7] = vue.withModifiers(() => {
+              }, ["stop"]))
+            }, [
+              _ctx.title !== null && _ctx.title !== void 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                vue.createElementVNode("div", _hoisted_3, [
+                  _ctx.iconComponent && _ctx.center ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+                    key: 0,
+                    class: vue.normalizeClass(["el-message-box__status", _ctx.typeClass])
+                  }, {
+                    default: vue.withCtx(() => [
+                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
+                    ]),
+                    _: 1
+                  }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
+                  vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1)
+                ]),
+                _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
                   key: 0,
-                  class: vue.normalizeClass(["el-message-box__status", _ctx.typeClass])
-                }, {
-                  default: vue.withCtx(() => [
-                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
-                  ]),
-                  _: 1
-                }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
-                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1)
+                  type: "button",
+                  class: "el-message-box__headerbtn",
+                  "aria-label": "Close",
+                  onClick: _cache[0] || (_cache[0] = ($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel")),
+                  onKeydown: _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel"), ["prevent"]), ["enter"]))
+                }, [
+                  vue.createVNode(_component_el_icon, { class: "el-message-box__close" }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(_component_close)
+                    ]),
+                    _: 1
+                  })
+                ], 32)) : vue.createCommentVNode("v-if", true)
+              ], 512)) : vue.createCommentVNode("v-if", true),
+              vue.createElementVNode("div", _hoisted_4, [
+                vue.createElementVNode("div", _hoisted_5, [
+                  _ctx.iconComponent && !_ctx.center && _ctx.hasMessage ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+                    key: 0,
+                    class: vue.normalizeClass(["el-message-box__status", _ctx.typeClass])
+                  }, {
+                    default: vue.withCtx(() => [
+                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
+                    ]),
+                    _: 1
+                  }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
+                  _ctx.hasMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+                    vue.renderSlot(_ctx.$slots, "default", {}, () => [
+                      !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_7, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createElementBlock("p", {
+                        key: 1,
+                        innerHTML: _ctx.message
+                      }, null, 8, _hoisted_8))
+                    ])
+                  ])) : vue.createCommentVNode("v-if", true)
+                ]),
+                vue.withDirectives(vue.createElementVNode("div", _hoisted_9, [
+                  vue.createVNode(_component_el_input, {
+                    ref: "inputRef",
+                    modelValue: _ctx.inputValue,
+                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.inputValue = $event),
+                    type: _ctx.inputType,
+                    placeholder: _ctx.inputPlaceholder,
+                    class: vue.normalizeClass({ invalid: _ctx.validateError }),
+                    onKeydown: vue.withKeys(vue.withModifiers(_ctx.handleInputEnter, ["prevent"]), ["enter"])
+                  }, null, 8, ["modelValue", "type", "placeholder", "class", "onKeydown"]),
+                  vue.createElementVNode("div", {
+                    class: "el-message-box__errormsg",
+                    style: vue.normalizeStyle({
+                      visibility: !!_ctx.editorErrorMessage ? "visible" : "hidden"
+                    })
+                  }, vue.toDisplayString(_ctx.editorErrorMessage), 5)
+                ], 512), [
+                  [vue.vShow, _ctx.showInput]
+                ])
               ]),
-              _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
-                key: 0,
-                type: "button",
-                class: "el-message-box__headerbtn",
-                "aria-label": "Close",
-                onClick: _cache[0] || (_cache[0] = ($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel")),
-                onKeydown: _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel"), ["prevent"]), ["enter"]))
-              }, [
-                vue.createVNode(_component_el_icon, { class: "el-message-box__close" }, {
+              vue.createElementVNode("div", _hoisted_10, [
+                _ctx.showCancelButton ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+                  key: 0,
+                  loading: _ctx.cancelButtonLoading,
+                  class: vue.normalizeClass([_ctx.cancelButtonClass]),
+                  round: _ctx.roundButton,
+                  size: _ctx.btnSize,
+                  onClick: _cache[3] || (_cache[3] = ($event) => _ctx.handleAction("cancel")),
+                  onKeydown: _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction("cancel"), ["prevent"]), ["enter"]))
+                }, {
                   default: vue.withCtx(() => [
-                    vue.createVNode(_component_close)
+                    vue.createTextVNode(vue.toDisplayString(_ctx.cancelButtonText || _ctx.t("el.messagebox.cancel")), 1)
                   ]),
                   _: 1
-                })
-              ], 32)) : vue.createCommentVNode("v-if", true)
-            ])) : vue.createCommentVNode("v-if", true),
-            vue.createElementVNode("div", _hoisted_4, [
-              vue.createElementVNode("div", _hoisted_5, [
-                _ctx.iconComponent && !_ctx.center && _ctx.hasMessage ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
-                  key: 0,
-                  class: vue.normalizeClass(["el-message-box__status", _ctx.typeClass])
+                }, 8, ["loading", "class", "round", "size"])) : vue.createCommentVNode("v-if", true),
+                vue.withDirectives(vue.createVNode(_component_el_button, {
+                  ref: "confirmRef",
+                  type: "primary",
+                  loading: _ctx.confirmButtonLoading,
+                  class: vue.normalizeClass([_ctx.confirmButtonClasses]),
+                  round: _ctx.roundButton,
+                  disabled: _ctx.confirmButtonDisabled,
+                  size: _ctx.btnSize,
+                  onClick: _cache[5] || (_cache[5] = ($event) => _ctx.handleAction("confirm")),
+                  onKeydown: _cache[6] || (_cache[6] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction("confirm"), ["prevent"]), ["enter"]))
                 }, {
                   default: vue.withCtx(() => [
-                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
+                    vue.createTextVNode(vue.toDisplayString(_ctx.confirmButtonText || _ctx.t("el.messagebox.confirm")), 1)
                   ]),
                   _: 1
-                }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
-                _ctx.hasMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
-                  vue.renderSlot(_ctx.$slots, "default", {}, () => [
-                    !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_7, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createElementBlock("p", {
-                      key: 1,
-                      innerHTML: _ctx.message
-                    }, null, 8, _hoisted_8))
-                  ])
-                ])) : vue.createCommentVNode("v-if", true)
-              ]),
-              vue.withDirectives(vue.createElementVNode("div", _hoisted_9, [
-                vue.createVNode(_component_el_input, {
-                  ref: "inputRef",
-                  modelValue: _ctx.inputValue,
-                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.inputValue = $event),
-                  type: _ctx.inputType,
-                  placeholder: _ctx.inputPlaceholder,
-                  class: vue.normalizeClass({ invalid: _ctx.validateError }),
-                  onKeydown: vue.withKeys(vue.withModifiers(_ctx.handleInputEnter, ["prevent"]), ["enter"])
-                }, null, 8, ["modelValue", "type", "placeholder", "class", "onKeydown"]),
-                vue.createElementVNode("div", {
-                  class: "el-message-box__errormsg",
-                  style: vue.normalizeStyle({
-                    visibility: !!_ctx.editorErrorMessage ? "visible" : "hidden"
-                  })
-                }, vue.toDisplayString(_ctx.editorErrorMessage), 5)
-              ], 512), [
-                [vue.vShow, _ctx.showInput]
-              ])
-            ]),
-            vue.createElementVNode("div", _hoisted_10, [
-              _ctx.showCancelButton ? (vue.openBlock(), vue.createBlock(_component_el_button, {
-                key: 0,
-                loading: _ctx.cancelButtonLoading,
-                class: vue.normalizeClass([_ctx.cancelButtonClass]),
-                round: _ctx.roundButton,
-                size: _ctx.buttonSize || "",
-                onClick: _cache[3] || (_cache[3] = ($event) => _ctx.handleAction("cancel")),
-                onKeydown: _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction("cancel"), ["prevent"]), ["enter"]))
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createTextVNode(vue.toDisplayString(_ctx.cancelButtonText || _ctx.t("el.messagebox.cancel")), 1)
-                ]),
-                _: 1
-              }, 8, ["loading", "class", "round", "size"])) : vue.createCommentVNode("v-if", true),
-              vue.withDirectives(vue.createVNode(_component_el_button, {
-                ref: "confirmRef",
-                type: "primary",
-                loading: _ctx.confirmButtonLoading,
-                class: vue.normalizeClass([_ctx.confirmButtonClasses]),
-                round: _ctx.roundButton,
-                disabled: _ctx.confirmButtonDisabled,
-                size: _ctx.buttonSize || "",
-                onClick: _cache[5] || (_cache[5] = ($event) => _ctx.handleAction("confirm")),
-                onKeydown: _cache[6] || (_cache[6] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction("confirm"), ["prevent"]), ["enter"]))
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createTextVNode(vue.toDisplayString(_ctx.confirmButtonText || _ctx.t("el.messagebox.confirm")), 1)
-                ]),
-                _: 1
-              }, 8, ["loading", "class", "round", "disabled", "size"]), [
-                [vue.vShow, _ctx.showConfirmButton]
+                }, 8, ["loading", "class", "round", "disabled", "size"]), [
+                  [vue.vShow, _ctx.showConfirmButton]
+                ])
               ])
+            ], 14, _hoisted_1)), [
+              [_directive_trap_focus]
             ])
-          ], 14, _hoisted_1)), [
-            [_directive_trap_focus]
-          ])
+          ], 32)
         ]),
         _: 3
-      }, 8, ["z-index", "overlay-class", "mask", "onClick"]), [
+      }, 8, ["z-index", "overlay-class", "mask"]), [
         [vue.vShow, _ctx.visible]
       ])
     ]),