@element-plus/nightly 0.0.20220303 → 0.0.20220306

package/es/components/input/src/input2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"input2.mjs","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')]: showClear && showPwdVisible,\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, isObject, isKorean } from '@element-plus/utils'\nimport {\n  useAttrs,\n  useDisabled,\n  useFormItem,\n  useSize,\n  useNamespace,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { calcTextareaHeight } from './calc-textarea-height'\nimport { inputProps, inputEmits } from './input'\n\nimport type { StyleValue } from 'vue'\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":["IconView","_withDirectives","_renderSlot","_openBlock","_createVNode","_createElementBlock","_createCommentVNode"],"mappings":"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"}
+{"version":3,"file":"input2.mjs","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')]: showClear && showPwdVisible,\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 {\n  ValidateComponentsMap,\n  isObject,\n  isKorean,\n  debugWarn,\n} from '@element-plus/utils'\nimport {\n  useAttrs,\n  useDisabled,\n  useFormItem,\n  useSize,\n  useNamespace,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { calcTextareaHeight } from './calc-textarea-height'\nimport { inputProps, inputEmits } from './input'\n\nimport type { StyleValue } from 'vue'\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').catch((err) => debugWarn(err))\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').catch((err) => debugWarn(err))\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":["IconView","_withDirectives","_renderSlot","_openBlock","_createVNode","_createElementBlock","_createCommentVNode"],"mappings":"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"}

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

@@ -153,8 +153,8 @@ export declare const ElInputNumber: import("element-plus/es/utils").SFCWithInsta
         type: string;
         size: import("element-plus/es/utils").BuildPropType<StringConstructor, "default" | "small" | "large", never>;
         disabled: boolean;
-        modelValue: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<string | number | null | undefined>, unknown, unknown>;
         label: string;
+        modelValue: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<string | number | null | undefined>, unknown, unknown>;
         resize: import("element-plus/es/utils").BuildPropType<StringConstructor, "none" | "both" | "horizontal" | "vertical", unknown>;
         autosize: boolean | {
             minRows?: number | undefined;
@@ -312,8 +312,8 @@ export declare const ElInputNumber: import("element-plus/es/utils").SFCWithInsta
         type: string;
         size: import("element-plus/es/utils").BuildPropType<StringConstructor, "default" | "small" | "large", never>;
         disabled: boolean;
-        modelValue: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<string | number | null | undefined>, unknown, unknown>;
         label: string;
+        modelValue: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<string | number | null | undefined>, unknown, unknown>;
         resize: import("element-plus/es/utils").BuildPropType<StringConstructor, "none" | "both" | "horizontal" | "vertical", unknown>;
         autosize: boolean | {
             minRows?: number | undefined;

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

@@ -154,8 +154,8 @@ declare const _default: import("vue").DefineComponent<{
         type: string;
         size: import("element-plus/es/utils").BuildPropType<StringConstructor, "default" | "small" | "large", never>;
         disabled: boolean;
-        modelValue: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<string | number | null | undefined>, unknown, unknown>;
         label: string;
+        modelValue: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<string | number | null | undefined>, unknown, unknown>;
         resize: import("element-plus/es/utils").BuildPropType<StringConstructor, "none" | "both" | "horizontal" | "vertical", unknown>;
         autosize: boolean | {
             minRows?: number | undefined;
@@ -313,8 +313,8 @@ declare const _default: import("vue").DefineComponent<{
         type: string;
         size: import("element-plus/es/utils").BuildPropType<StringConstructor, "default" | "small" | "large", never>;
         disabled: boolean;
-        modelValue: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<string | number | null | undefined>, unknown, unknown>;
         label: string;
+        modelValue: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<string | number | null | undefined>, unknown, unknown>;
         resize: import("element-plus/es/utils").BuildPropType<StringConstructor, "none" | "both" | "horizontal" | "vertical", unknown>;
         autosize: boolean | {
             minRows?: number | undefined;

package/es/components/input-number/src/input-number2.mjs

@@ -132,7 +132,7 @@ const _sfc_main = defineComponent({
       emit("update:modelValue", newVal);
       emit("input", newVal);
       emit("change", newVal, oldVal);
-      (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
+      (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn(err));
       data.currentValue = newVal;
     };
     const handleInput = (value) => {
@@ -159,7 +159,7 @@ const _sfc_main = defineComponent({
     const handleBlur = (event) => {
       var _a;
       emit("blur", event);
-      (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur");
+      (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => debugWarn(err));
     };
     watch(() => props.modelValue, (value) => {
       let newVal = Number(value);

package/es/components/input-number/src/input-number2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"input-number2.mjs","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, debugWarn } from '@element-plus/utils'\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":[],"mappings":";;;;;;;;;;;;;;;;AAwFA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,YAAY;AAAA,IACV;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,QAAQ;AACd,UAAM,OAAO,SAAgB;AAAA,MAC3B,cAAc,MAAM;AAAA,MACpB,WAAW;AAAA;AAEb,UAAM,EAAE,aAAa;AACrB,UAAM,KAAK,aAAa;AAExB,UAAM,cAAc,SAAS,MAAM,UAAU,MAAM,cAAc,MAAM;AACvE,UAAM,cAAc,SAAS,MAAM,UAAU,MAAM,cAAc,MAAM;AAEvE,UAAM,eAAe,SAAS,MAAM;AAClC,YAAM,gBAAgB,aAAa,MAAM;AACzC,UAAI,MAAM,cAAc,QAAW;AACjC,YAAI,gBAAgB,MAAM,WAAW;AACnC,oBACE,eACA;AAAA;AAGJ,eAAO,MAAM;AAAA,aACR;AACL,eAAO,KAAK,IAAI,aAAa,MAAM,aAAa;AAAA;AAAA;AAGpD,UAAM,kBAAkB,SAAS,MAAM;AACrC,aAAO,MAAM,YAAY,MAAM,qBAAqB;AAAA;AAGtD,UAAM,kBAAkB;AACxB,UAAM,sBAAsB;AAE5B,UAAM,eAAe,SAAS,MAAM;AAClC,UAAI,KAAK,cAAc,MAAM;AAC3B,eAAO,KAAK;AAAA;AAEd,UAAI,eAA4C,KAAK;AACrD,UAAI,SAAS,eAAe;AAC1B,YAAI,OAAO,MAAM;AAAe,iBAAO;AACvC,YAAI,MAAM,cAAc,QAAW;AACjC,yBAAe,aAAa,QAAQ,MAAM;AAAA;AAAA;AAG9C,aAAO;AAAA;AAET,UAAM,cAAc,CAAC,KAAa,QAAiB;AACjD,UAAI,QAAQ;AAAW,cAAM,aAAa;AAC1C,aAAO,WACL,GAAG,KAAK,MAAM,MAAM,KAAK,IAAI,IAAI,QAAQ,KAAK,IAAI,IAAI;AAAA;AAG1D,UAAM,eAAe,CAAC,UAA8B;AAClD,UAAI,UAAU;AAAW,eAAO;AAChC,YAAM,cAAc,MAAM;AAC1B,YAAM,cAAc,YAAY,QAAQ;AACxC,UAAI,YAAY;AAChB,UAAI,gBAAgB,IAAI;AACtB,oBAAY,YAAY,SAAS,cAAc;AAAA;AAEjD,aAAO;AAAA;AAET,UAAM,YAAY,CAAC,QAAgB;AACjC,UAAI,CAAC,SAAS;AAAM,eAAO,KAAK;AAChC,YAAM,kBAAkB,KAAK,IAAI,IAAI,aAAa;AAElD,YAAM,SAAS,OAAO,MAAM;AAC5B,aAAO,YACJ,mBAAkB,MAAM,kBAAkB,MAAM,QAAQ;AAAA;AAG7D,UAAM,YAAY,CAAC,QAAgB;AACjC,UAAI,CAAC,SAAS;AAAM,eAAO,KAAK;AAChC,YAAM,kBAAkB,KAAK,IAAI,IAAI,aAAa;AAElD,YAAM,SAAS,OAAO,MAAM;AAC5B,aAAO,YACJ,mBAAkB,MAAM,kBAAkB,MAAM,QAAQ;AAAA;AAG7D,UAAM,WAAW,MAAM;AACrB,UAAI,oBAAoB,SAAS,YAAY;AAAO;AACpD,YAAM,QAAQ,MAAM,cAAc;AAClC,YAAM,SAAS,UAAU;AACzB,sBAAgB;AAAA;AAElB,UAAM,WAAW,MAAM;AACrB,UAAI,oBAAoB,SAAS,YAAY;AAAO;AACpD,YAAM,QAAQ,MAAM,cAAc;AAClC,YAAM,SAAS,UAAU;AACzB,sBAAgB;AAAA;AAElB,UAAM,kBAAkB,CAAC,WAA4B;AACnD,YAAM;AACN;AACE,iBAAS;AAA0B;AAErC;AAAiD;AACjD;AAAiD;AACjD;AAAuB;AACvB;AACE;AAAS;AAEX;AACA,WAAK;AACL,WAAK;AACL,WAAK;AACL,2BAAqB;AACrB;AAAoB;AAEtB;AACE,8BAAyB;AAAA;AAE3B;AACE,+BAAyB,KAAK;AAC9B,+BAA0B,wBAAyB;AACjD;AAAgB;AAElB;AAAiB;AAGnB;AACE;AAAa;AAGf,uBAAmB;AACjB;AAAa;AAGf,UAAM;AACJ;AAAc;AAGhB,UAAM,cAAc;AAClB,WAAK;AACL;AAAqB;AAGvB,UACE;AAEE,UAAI,SAAS,OAAO;AACpB,oBAAc;AACZ;AAAgB;AAElB,UAAI,gBAAgB;AAClB;AACE;AACA;AACA,wBACQ;AACN;AAEJ,gCAAwB;AACtB,+BAAqB,QAAQ,MAAM;AAAA;AAGrC;AACE;AACA;AAA0B;AAE5B,YAAI,SAAS,MAAM,KAAK;AACtB,mBAAS,MAAM;AACf,eAAK,qBAAqB;AAAA;AAAA;AAG9B;AACA;AAAiB,SAEjB;AAEJ;AACE;AACA;AACA;AACA;AACA;AACA,+CAEE,OAAO;AAET;AACE;AACA;AACE,gBAAM;AAAA;AAER;AAA0B;AAAA;AAG9B;AACE;AACA;AAA+C;AAEjD;AAAO;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AACA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA;AAAA;;;;;;;;;;AAlQE;AArDE;AAAa;AAAgB;AAA0C;AAAuD;AAAyC;AAAA,iBAOnK;AAAV;AAAkB;mDAElB;AAWO;MARL;AAAK,sCACO,EAAC,uBAAmB;AAAa,iBACrC;AAAgB;;AAKd;AAF6B,UAAnB;AACF;AAAA;;;+BAPF;AAAA;;AAqBX;;AARA,aACC;AAAuC,MAC5C;AAAuB;;AAKd;AAF2B,UAAnB;AACD;AAAA;;;+BAPD;AAAA;;AA6BhB,WAlBI;AAAA;AACC;AACE,MACN;AAAa,MACb;AAAa,eACH;AAAA,MACV;AAAM,MACN;AAAK,MACL;AAAK,MACL;AAAM,MACN;AAAO,MACP;AAAgB,MAChB,WAAO;AAAA;AAAqB;AACE;AAAA,MAC9B;AAAM,MACN;AAAO,MACP,SAAO;AAAA;AACC;;;;;;;;;;;;;"}
+{"version":3,"file":"input-number2.mjs","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, debugWarn } from '@element-plus/utils'\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').catch((err) => debugWarn(err))\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').catch((err) => debugWarn(err))\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":[],"mappings":"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"}

package/es/components/message-box/index.mjs

@@ -3,6 +3,7 @@ import './src/message-box.type.mjs';
 
 const _MessageBox = MessageBox;
 _MessageBox.install = (app) => {
+  _MessageBox._context = app._context;
   app.config.globalProperties.$msgbox = _MessageBox;
   app.config.globalProperties.$messageBox = _MessageBox;
   app.config.globalProperties.$alert = _MessageBox.alert;

package/es/components/message-box/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/message-box/index.ts"],"sourcesContent":["import MessageBox from './src/messageBox'\n\nimport type { App } from 'vue'\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nconst _MessageBox = MessageBox as SFCWithInstall<typeof MessageBox>\n\n_MessageBox.install = (app: App) => {\n  app.config.globalProperties.$msgbox = _MessageBox\n  app.config.globalProperties.$messageBox = _MessageBox\n  app.config.globalProperties.$alert = _MessageBox.alert\n  app.config.globalProperties.$confirm = _MessageBox.confirm\n  app.config.globalProperties.$prompt = _MessageBox.prompt\n}\n\nexport default _MessageBox\nexport const ElMessageBox = _MessageBox\n\nexport * from './src/message-box.type'\n"],"names":[],"mappings":";;;AACK,MAAC,WAAW,GAAG,WAAW;AAC/B,WAAW,CAAC,OAAO,GAAG,CAAC,GAAG,KAAK;AAC/B,EAAE,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,GAAG,WAAW,CAAC;AACpD,EAAE,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC,WAAW,GAAG,WAAW,CAAC;AACxD,EAAE,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC,MAAM,GAAG,WAAW,CAAC,KAAK,CAAC;AACzD,EAAE,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,GAAG,WAAW,CAAC,OAAO,CAAC;AAC7D,EAAE,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,GAAG,WAAW,CAAC,MAAM,CAAC;AAC3D,CAAC,CAAC;AAEU,MAAC,YAAY,GAAG;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/message-box/index.ts"],"sourcesContent":["import MessageBox from './src/messageBox'\n\nimport type { App } from 'vue'\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nconst _MessageBox = MessageBox as SFCWithInstall<typeof MessageBox>\n\n_MessageBox.install = (app: App) => {\n  _MessageBox._context = app._context\n  app.config.globalProperties.$msgbox = _MessageBox\n  app.config.globalProperties.$messageBox = _MessageBox\n  app.config.globalProperties.$alert = _MessageBox.alert\n  app.config.globalProperties.$confirm = _MessageBox.confirm\n  app.config.globalProperties.$prompt = _MessageBox.prompt\n}\n\nexport default _MessageBox\nexport const ElMessageBox = _MessageBox\n\nexport * from './src/message-box.type'\n"],"names":[],"mappings":";;;AACK,MAAC,WAAW,GAAG,WAAW;AAC/B,WAAW,CAAC,OAAO,GAAG,CAAC,GAAG,KAAK;AAC/B,EAAE,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AACtC,EAAE,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,GAAG,WAAW,CAAC;AACpD,EAAE,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC,WAAW,GAAG,WAAW,CAAC;AACxD,EAAE,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC,MAAM,GAAG,WAAW,CAAC,KAAK,CAAC;AACzD,EAAE,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,GAAG,WAAW,CAAC,OAAO,CAAC;AAC7D,EAAE,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,GAAG,WAAW,CAAC,MAAM,CAAC;AAC3D,CAAC,CAAC;AAEU,MAAC,YAAY,GAAG;;;;"}

package/es/components/message-box/src/index.vue.d.ts

@@ -1858,8 +1858,8 @@ declare const _default: import("vue").DefineComponent<{
     lockScroll: boolean;
     modal: boolean;
     container: string;
-    closeOnHashChange: boolean;
-    roundButton: boolean;
     boxType: MessageBoxType;
+    roundButton: boolean;
+    closeOnHashChange: boolean;
 }>;
 export default _default;

package/es/components/message-box/src/message-box.type.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, VNode, Component } from 'vue';
+import type { AppContext, CSSProperties, VNode, Component } from 'vue';
 import type { ComponentSize } from 'element-plus/es/constants';
 declare type MessageType = '' | 'success' | 'warning' | 'info' | 'error';
 export declare type Action = 'confirm' | 'close' | 'cancel';
@@ -115,11 +115,12 @@ export interface ElMessageBoxOptions {
     /** Custom size of confirm and cancel buttons */
     buttonSize?: ComponentSize;
 }
-export declare type ElMessageBoxShortcutMethod = ((message: ElMessageBoxOptions['message'], title: ElMessageBoxOptions['title'], options?: ElMessageBoxOptions) => Promise<MessageBoxData>) & ((message: ElMessageBoxOptions['message'], options?: ElMessageBoxOptions) => Promise<MessageBoxData>);
+export declare type ElMessageBoxShortcutMethod = ((message: ElMessageBoxOptions['message'], title: ElMessageBoxOptions['title'], options?: ElMessageBoxOptions, appContext?: AppContext | null) => Promise<MessageBoxData>) & ((message: ElMessageBoxOptions['message'], options?: ElMessageBoxOptions, appContext?: AppContext | null) => Promise<MessageBoxData>);
 export interface IElMessageBox {
+    _context: AppContext | null;
     /** Show a message box */
     /** Show a message box */
-    (options: ElMessageBoxOptions): Promise<MessageBoxData>;
+    (options: ElMessageBoxOptions, appContext?: AppContext | null): Promise<MessageBoxData>;
     /** Show an alert message box */
     alert: ElMessageBoxShortcutMethod;
     /** Show a confirm message box */

package/es/components/message-box/src/messageBox.mjs

@@ -2,11 +2,13 @@ import { h, render, watch, isVNode } from 'vue';
 import { isClient } from '@vueuse/core';
 import '../../../utils/index.mjs';
 import MessageBoxConstructor from './index.mjs';
-import { hasOwn, isString } from '@vue/shared';
+import { hasOwn, isString, isObject } from '@vue/shared';
+import { isUndefined } from '../../../utils/types.mjs';
 
 const messageInstance = /* @__PURE__ */ new Map();
-const initInstance = (props, container) => {
+const initInstance = (props, container, appContext = null) => {
   const vnode = h(MessageBoxConstructor, props);
+  vnode.appContext = appContext;
   render(vnode, container);
   document.body.appendChild(container.firstElementChild);
   return vnode.component;
@@ -14,7 +16,7 @@ const initInstance = (props, container) => {
 const genContainer = () => {
   return document.createElement("div");
 };
-const showMessage = (options) => {
+const showMessage = (options, appContext) => {
   const container = genContainer();
   options.onVanish = () => {
     render(null, container);
@@ -42,7 +44,7 @@ const showMessage = (options) => {
       }
     }
   };
-  const instance = initInstance(options, container);
+  const instance = initInstance(options, container, appContext);
   const vm = instance.proxy;
   for (const prop in options) {
     if (hasOwn(options, prop) && !hasOwn(vm.$props, prop)) {
@@ -61,9 +63,9 @@ const showMessage = (options) => {
   vm.visible = true;
   return vm;
 };
-function MessageBox(options) {
+function MessageBox(options, appContext = null) {
   if (!isClient)
-    return;
+    return Promise.reject();
   let callback;
   if (isString(options) || isVNode(options)) {
     options = {
@@ -73,7 +75,7 @@ function MessageBox(options) {
     callback = options.callback;
   }
   return new Promise((resolve, reject) => {
-    const vm = showMessage(options);
+    const vm = showMessage(options, appContext != null ? appContext : MessageBox._context);
     messageInstance.set(vm, {
       options,
       callback,
@@ -82,62 +84,43 @@ function MessageBox(options) {
     });
   });
 }
-MessageBox.alert = (message, title, options) => {
-  if (typeof title === "object") {
-    options = title;
-    title = "";
-  } else if (title === void 0) {
-    title = "";
-  }
-  return MessageBox(Object.assign({
-    title,
-    message,
-    type: "",
-    closeOnPressEscape: false,
-    closeOnClickModal: false
-  }, options, {
-    boxType: "alert"
-  }));
-};
-MessageBox.confirm = (message, title, options) => {
-  if (typeof title === "object") {
-    options = title;
-    title = "";
-  } else if (title === void 0) {
-    title = "";
-  }
-  return MessageBox(Object.assign({
-    title,
-    message,
-    type: "",
-    showCancelButton: true
-  }, options, {
-    boxType: "confirm"
-  }));
-};
-MessageBox.prompt = (message, title, options) => {
-  if (typeof title === "object") {
-    options = title;
-    title = "";
-  } else if (title === void 0) {
-    title = "";
-  }
-  return MessageBox(Object.assign({
-    title,
-    message,
-    showCancelButton: true,
-    showInput: true,
-    type: ""
-  }, options, {
-    boxType: "prompt"
-  }));
+const MESSAGE_BOX_VARIANTS = ["alert", "confirm", "prompt"];
+const MESSAGE_BOX_DEFAULT_OPTS = {
+  alert: { closeOnPressEscape: false, closeOnClickModal: false },
+  confirm: { showCancelButton: true },
+  prompt: { showCancelButton: true, showInput: true }
 };
+MESSAGE_BOX_VARIANTS.forEach((boxType) => {
+  MessageBox[boxType] = messageBoxFactory(boxType);
+});
+function messageBoxFactory(boxType) {
+  return (message, titleOrOpts, options, appContext) => {
+    let title;
+    if (isObject(titleOrOpts)) {
+      options = titleOrOpts;
+      title = "";
+    } else if (isUndefined(titleOrOpts)) {
+      title = "";
+    } else {
+      title = titleOrOpts;
+    }
+    return MessageBox(Object.assign({
+      title,
+      message,
+      type: "",
+      ...MESSAGE_BOX_DEFAULT_OPTS[boxType]
+    }, options, {
+      boxType
+    }), appContext);
+  };
+}
 MessageBox.close = () => {
   messageInstance.forEach((_, vm) => {
     vm.doClose();
   });
   messageInstance.clear();
 };
+MessageBox._context = null;
 
 export { MessageBox as default };
 //# sourceMappingURL=messageBox.mjs.map

package/es/components/message-box/src/messageBox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"messageBox.mjs","sources":["../../../../../../packages/components/message-box/src/messageBox.ts"],"sourcesContent":["import { h, watch, render } from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { isVNode, isString, hasOwn } from '@element-plus/utils'\nimport MessageBoxConstructor from './index.vue'\n\nimport type { ComponentPublicInstance, VNode } from 'vue'\nimport type {\n  Action,\n  Callback,\n  MessageBoxState,\n  IElMessageBox,\n  ElMessageBoxOptions,\n  MessageBoxData,\n} from './message-box.type'\n\n// component default merge props & data\n\nconst messageInstance = new Map<\n  ComponentPublicInstance<{ doClose: () => void }>, // marking doClose as function\n  {\n    options: any\n    callback: Callback\n    resolve: (res: any) => void\n    reject: (reason?: any) => void\n  }\n>()\n\nconst initInstance = (props: any, container: HTMLElement) => {\n  const vnode = h(MessageBoxConstructor, props)\n  render(vnode, container)\n  document.body.appendChild(container.firstElementChild)\n  return vnode.component\n}\n\nconst genContainer = () => {\n  return document.createElement('div')\n}\n\nconst showMessage = (options: any) => {\n  const container = genContainer()\n  // Adding destruct method.\n  // when transition leaves emitting `vanish` evt. so that we can do the clean job.\n  options.onVanish = () => {\n    // not sure if this causes mem leak, need proof to verify that.\n    // maybe calling out like 1000 msg-box then close them all.\n    render(null, container)\n    messageInstance.delete(vm) // Remove vm to avoid mem leak.\n    // here we were suppose to call document.body.removeChild(container.firstElementChild)\n    // but render(null, container) did that job for us. so that we do not call that directly\n  }\n\n  options.onAction = (action: Action) => {\n    const currentMsg = messageInstance.get(vm)\n    let resolve: Action | { value: string; action: Action }\n    if (options.showInput) {\n      resolve = { value: vm.inputValue, action }\n    } else {\n      resolve = action\n    }\n    if (options.callback) {\n      options.callback(resolve, instance.proxy)\n    } else {\n      if (action === 'cancel' || action === 'close') {\n        if (options.distinguishCancelAndClose && action !== 'cancel') {\n          currentMsg.reject('close')\n        } else {\n          currentMsg.reject('cancel')\n        }\n      } else {\n        currentMsg.resolve(resolve)\n      }\n    }\n  }\n\n  const instance = initInstance(options, container)\n\n  // This is how we use message box programmably.\n  // Maybe consider releasing a template version?\n  // get component instance like v2.\n  const vm = instance.proxy as ComponentPublicInstance<\n    {\n      visible: boolean\n      doClose: () => void\n    } & MessageBoxState\n  >\n\n  for (const prop in options) {\n    if (hasOwn(options, prop) && !hasOwn(vm.$props, prop)) {\n      vm[prop as string] = options[prop]\n    }\n  }\n\n  watch(\n    () => vm.message,\n    (newVal, oldVal) => {\n      if (isVNode(newVal)) {\n        // Override slots since message is vnode type.\n        instance.slots.default = () => [newVal]\n      } else if (isVNode(oldVal) && !isVNode(newVal)) {\n        delete instance.slots.default\n      }\n    },\n    {\n      immediate: true,\n    }\n  )\n\n  // change visibility after everything is settled\n  vm.visible = true\n  return vm\n}\n\nasync function MessageBox(options: ElMessageBoxOptions): Promise<MessageBoxData>\nfunction MessageBox(\n  options: ElMessageBoxOptions | string | VNode\n): Promise<{ value: string; action: Action } | Action> {\n  if (!isClient) return\n  let callback\n  if (isString(options) || isVNode(options)) {\n    options = {\n      message: options,\n    }\n  } else {\n    callback = options.callback\n  }\n\n  return new Promise((resolve, reject) => {\n    const vm = showMessage(options)\n    // collect this vm in order to handle upcoming events.\n    messageInstance.set(vm, {\n      options,\n      callback,\n      resolve,\n      reject,\n    })\n  })\n}\n\nMessageBox.alert = (\n  message: string,\n  title: string,\n  options?: ElMessageBoxOptions\n) => {\n  if (typeof title === 'object') {\n    options = title\n    title = ''\n  } else if (title === undefined) {\n    title = ''\n  }\n\n  return MessageBox(\n    Object.assign(\n      {\n        title,\n        message,\n        type: '',\n        closeOnPressEscape: false,\n        closeOnClickModal: false,\n      },\n      options,\n      {\n        boxType: 'alert',\n      }\n    )\n  )\n}\n\nMessageBox.confirm = (\n  message: string,\n  title: string,\n  options?: ElMessageBoxOptions\n) => {\n  if (typeof title === 'object') {\n    options = title\n    title = ''\n  } else if (title === undefined) {\n    title = ''\n  }\n  return MessageBox(\n    Object.assign(\n      {\n        title,\n        message,\n        type: '',\n        showCancelButton: true,\n      },\n      options,\n      {\n        boxType: 'confirm',\n      }\n    )\n  )\n}\n\nMessageBox.prompt = (\n  message: string,\n  title: string,\n  options?: ElMessageBoxOptions\n) => {\n  if (typeof title === 'object') {\n    options = title\n    title = ''\n  } else if (title === undefined) {\n    title = ''\n  }\n  return MessageBox(\n    Object.assign(\n      {\n        title,\n        message,\n        showCancelButton: true,\n        showInput: true,\n        type: '',\n      },\n      options,\n      {\n        boxType: 'prompt',\n      }\n    )\n  )\n}\n\nMessageBox.close = () => {\n  // instance.setupInstall.doClose()\n  // instance.setupInstall.state.visible = false\n\n  messageInstance.forEach((_, vm) => {\n    vm.doClose()\n  })\n\n  messageInstance.clear()\n}\n\nexport default MessageBox as IElMessageBox\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"messageBox.mjs","sources":["../../../../../../packages/components/message-box/src/messageBox.ts"],"sourcesContent":["import { h, watch, render } from 'vue'\nimport { isClient } from '@vueuse/core'\nimport {\n  isVNode,\n  isString,\n  hasOwn,\n  isObject,\n  isUndefined,\n} from '@element-plus/utils'\nimport MessageBoxConstructor from './index.vue'\n\nimport type { AppContext, ComponentPublicInstance, VNode } from 'vue'\nimport type {\n  Action,\n  Callback,\n  MessageBoxState,\n  IElMessageBox,\n  ElMessageBoxOptions,\n  MessageBoxData,\n} from './message-box.type'\n\n// component default merge props & data\n\nconst messageInstance = new Map<\n  ComponentPublicInstance<{ doClose: () => void }>, // marking doClose as function\n  {\n    options: any\n    callback: Callback\n    resolve: (res: any) => void\n    reject: (reason?: any) => void\n  }\n>()\n\nconst initInstance = (\n  props: any,\n  container: HTMLElement,\n  appContext: AppContext | null = null\n) => {\n  const vnode = h(MessageBoxConstructor, props)\n  vnode.appContext = appContext\n  render(vnode, container)\n  document.body.appendChild(container.firstElementChild!)\n  return vnode.component\n}\n\nconst genContainer = () => {\n  return document.createElement('div')\n}\n\nconst showMessage = (options: any, appContext?: AppContext | null) => {\n  const container = genContainer()\n  // Adding destruct method.\n  // when transition leaves emitting `vanish` evt. so that we can do the clean job.\n  options.onVanish = () => {\n    // not sure if this causes mem leak, need proof to verify that.\n    // maybe calling out like 1000 msg-box then close them all.\n    render(null, container)\n    messageInstance.delete(vm) // Remove vm to avoid mem leak.\n    // here we were suppose to call document.body.removeChild(container.firstElementChild)\n    // but render(null, container) did that job for us. so that we do not call that directly\n  }\n\n  options.onAction = (action: Action) => {\n    const currentMsg = messageInstance.get(vm)!\n    let resolve: Action | { value: string; action: Action }\n    if (options.showInput) {\n      resolve = { value: vm.inputValue, action }\n    } else {\n      resolve = action\n    }\n    if (options.callback) {\n      options.callback(resolve, instance.proxy)\n    } else {\n      if (action === 'cancel' || action === 'close') {\n        if (options.distinguishCancelAndClose && action !== 'cancel') {\n          currentMsg.reject('close')\n        } else {\n          currentMsg.reject('cancel')\n        }\n      } else {\n        currentMsg.resolve(resolve)\n      }\n    }\n  }\n\n  const instance = initInstance(options, container, appContext)!\n\n  // This is how we use message box programmably.\n  // Maybe consider releasing a template version?\n  // get component instance like v2.\n  const vm = instance.proxy as ComponentPublicInstance<\n    {\n      visible: boolean\n      doClose: () => void\n    } & MessageBoxState\n  >\n\n  for (const prop in options) {\n    if (hasOwn(options, prop) && !hasOwn(vm.$props, prop)) {\n      vm[prop as string] = options[prop]\n    }\n  }\n\n  watch(\n    () => vm.message,\n    (newVal, oldVal) => {\n      if (isVNode(newVal)) {\n        // Override slots since message is vnode type.\n        instance.slots.default = () => [newVal]\n      } else if (isVNode(oldVal) && !isVNode(newVal)) {\n        delete instance.slots.default\n      }\n    },\n    {\n      immediate: true,\n    }\n  )\n\n  // change visibility after everything is settled\n  vm.visible = true\n  return vm\n}\n\nasync function MessageBox(\n  options: ElMessageBoxOptions,\n  appContext?: AppContext | null\n): Promise<MessageBoxData>\nfunction MessageBox(\n  options: ElMessageBoxOptions | string | VNode,\n  appContext: AppContext | null = null\n): Promise<{ value: string; action: Action } | Action> {\n  if (!isClient) return Promise.reject()\n  let callback\n  if (isString(options) || isVNode(options)) {\n    options = {\n      message: options,\n    }\n  } else {\n    callback = options.callback\n  }\n\n  return new Promise((resolve, reject) => {\n    const vm = showMessage(options, appContext ?? MessageBox._context)\n    // collect this vm in order to handle upcoming events.\n    messageInstance.set(vm, {\n      options,\n      callback,\n      resolve,\n      reject,\n    })\n  })\n}\n\nconst MESSAGE_BOX_VARIANTS = ['alert', 'confirm', 'prompt'] as const\nconst MESSAGE_BOX_DEFAULT_OPTS: Record<\n  typeof MESSAGE_BOX_VARIANTS[number],\n  Partial<ElMessageBoxOptions>\n> = {\n  alert: { closeOnPressEscape: false, closeOnClickModal: false },\n  confirm: { showCancelButton: true },\n  prompt: { showCancelButton: true, showInput: true },\n}\n\nMESSAGE_BOX_VARIANTS.forEach((boxType) => {\n  MessageBox[boxType] = messageBoxFactory(boxType)\n})\n\nfunction messageBoxFactory(boxType: typeof MESSAGE_BOX_VARIANTS[number]) {\n  return (\n    message: string,\n    titleOrOpts: string | ElMessageBoxOptions,\n    options?: ElMessageBoxOptions,\n    appContext?: AppContext | null\n  ) => {\n    let title: string\n    if (isObject(titleOrOpts)) {\n      options = titleOrOpts\n      title = ''\n    } else if (isUndefined(titleOrOpts)) {\n      title = ''\n    } else {\n      title = titleOrOpts\n    }\n\n    return MessageBox(\n      Object.assign(\n        {\n          title,\n          message,\n          type: '',\n          ...MESSAGE_BOX_DEFAULT_OPTS[boxType],\n        },\n        options,\n        {\n          boxType,\n        }\n      ),\n      appContext\n    )\n  }\n}\n\nMessageBox.close = () => {\n  // instance.setupInstall.doClose()\n  // instance.setupInstall.state.visible = false\n\n  messageInstance.forEach((_, vm) => {\n    vm.doClose()\n  })\n\n  messageInstance.clear()\n}\n\nMessageBox._context = null\n\nexport default MessageBox as IElMessageBox\n"],"names":[],"mappings":"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"}

package/es/components/popover/index.d.ts

@@ -78,6 +78,7 @@ declare const _Popover: SFCWithInstall<import("vue").DefineComponent<{
     kls: import("vue").ComputedRef<(string | {
         [x: string]: any;
     } | undefined)[]>;
+    gpuAcceleration: import("vue").ComputedRef<boolean>;
     style: import("vue").ComputedRef<import("vue").StyleValue>;
     tooltipRef: import("vue").Ref<({
         $: import("vue").ComponentInternalInstance;
@@ -868,6 +869,7 @@ export declare const ElPopover: SFCWithInstall<import("vue").DefineComponent<{
     kls: import("vue").ComputedRef<(string | {
         [x: string]: any;
     } | undefined)[]>;
+    gpuAcceleration: import("vue").ComputedRef<boolean>;
     style: import("vue").ComputedRef<import("vue").StyleValue>;
     tooltipRef: import("vue").Ref<({
         $: import("vue").ComponentInternalInstance;

package/es/components/popover/src/index.mjs

@@ -48,6 +48,9 @@ const _sfc_main = defineComponent({
     const kls = computed(() => {
       return [ns.b(), props.popperClass, { [ns.m("plain")]: !!props.content }];
     });
+    const gpuAcceleration = computed(() => {
+      return props.transition === "el-fade-in-linear";
+    });
     const { compatTeleported } = useDeprecateAppendToBody(COMPONENT_NAME, "appendToBody");
     const hide = () => {
       var _a;
@@ -69,6 +72,7 @@ const _sfc_main = defineComponent({
       compatTeleported,
       ns,
       kls,
+      gpuAcceleration,
       style,
       tooltipRef,
       popperRef,
@@ -104,6 +108,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "popper-style": _ctx.style,
     teleported: _ctx.compatTeleported,
     persistent: _ctx.persistent,
+    "gpu-acceleration": _ctx.gpuAcceleration,
     onBeforeShow: _ctx.beforeEnter,
     onBeforeHide: _ctx.beforeLeave,
     onShow: _ctx.afterEnter,
@@ -123,7 +128,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       _ctx.$slots.reference ? renderSlot(_ctx.$slots, "reference", { key: 0 }) : createCommentVNode("v-if", true)
     ]),
     _: 3
-  }, 16, ["trigger", "placement", "disabled", "visible", "transition", "popper-options", "tabindex", "append-to-body", "content", "offset", "show-after", "hide-after", "auto-close", "show-arrow", "aria-label", "effect", "enterable", "popper-class", "popper-style", "teleported", "persistent", "onBeforeShow", "onBeforeHide", "onShow", "onHide"]);
+  }, 16, ["trigger", "placement", "disabled", "visible", "transition", "popper-options", "tabindex", "append-to-body", "content", "offset", "show-after", "hide-after", "auto-close", "show-arrow", "aria-label", "effect", "enterable", "popper-class", "popper-style", "teleported", "persistent", "gpu-acceleration", "onBeforeShow", "onBeforeHide", "onShow", "onHide"]);
 }
 var Popover = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

package/es/components/popover/src/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/popover/src/index.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"tooltipRef\"\n    v-bind=\"$attrs\"\n    :trigger=\"trigger\"\n    :placement=\"placement\"\n    :disabled=\"disabled\"\n    :visible=\"visible\"\n    :transition=\"transition\"\n    :popper-options=\"popperOptions\"\n    :tabindex=\"tabindex\"\n    :append-to-body=\"appendToBody\"\n    :content=\"content\"\n    :offset=\"offset\"\n    :show-after=\"showAfter\"\n    :hide-after=\"hideAfter\"\n    :auto-close=\"autoClose\"\n    :show-arrow=\"showArrow\"\n    :aria-label=\"title\"\n    :effect=\"effect\"\n    :enterable=\"enterable\"\n    :popper-class=\"kls\"\n    :popper-style=\"style\"\n    :teleported=\"compatTeleported\"\n    :persistent=\"persistent\"\n    @before-show=\"beforeEnter\"\n    @before-hide=\"beforeLeave\"\n    @show=\"afterEnter\"\n    @hide=\"afterLeave\"\n  >\n    <template v-if=\"$slots.reference\">\n      <slot name=\"reference\" />\n    </template>\n\n    <template #content>\n      <div v-if=\"title\" :class=\"ns.e('title')\" role=\"title\">\n        {{ title }}\n      </div>\n      <slot>\n        {{ content }}\n      </slot>\n    </template>\n  </el-tooltip>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, unref } from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { useDeprecateAppendToBody } from '@element-plus/components/popper'\nimport { isString } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { usePopoverProps } from './popover'\n\nimport type { StyleValue } from 'vue'\n\nconst emits = [\n  'update:visible',\n  'before-enter',\n  'before-leave',\n  'after-enter',\n  'after-leave',\n]\n\nconst COMPONENT_NAME = 'ElPopover'\n\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  components: {\n    ElTooltip,\n  },\n  props: usePopoverProps,\n  emits,\n  setup(props, { emit }) {\n    const ns = useNamespace('popover')\n    const tooltipRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n    const popperRef = computed(() => {\n      return unref(tooltipRef)?.popperRef\n    })\n    const width = computed(() => {\n      if (isString(props.width)) {\n        return props.width as string\n      }\n      return `${props.width}px`\n    })\n\n    const style = computed(() => {\n      return [\n        {\n          width: width.value,\n        },\n        props.popperStyle,\n      ] as StyleValue\n    })\n\n    const kls = computed(() => {\n      return [ns.b(), props.popperClass, { [ns.m('plain')]: !!props.content }]\n    })\n\n    const { compatTeleported } = useDeprecateAppendToBody(\n      COMPONENT_NAME,\n      'appendToBody'\n    )\n\n    const hide = () => {\n      tooltipRef.value?.hide()\n    }\n\n    const beforeEnter = () => {\n      emit('before-enter')\n    }\n    const beforeLeave = () => {\n      emit('before-leave')\n    }\n\n    const afterEnter = () => {\n      emit('after-enter')\n    }\n\n    const afterLeave = () => {\n      emit('after-leave')\n    }\n\n    return {\n      compatTeleported,\n      ns,\n      kls,\n      style,\n      tooltipRef,\n      popperRef,\n      hide,\n      beforeEnter,\n      beforeLeave,\n      afterEnter,\n      afterLeave,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;AAsDA,MAAM,QAAQ;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAGF,MAAM,iBAAiB;AAEvB,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA;AAAA,EAEF,OAAO;AAAA,EACP;AAAA,EACA,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,KAAK,aAAa;AACxB,UAAM,aAAa,IAA2C;AAC9D,UAAM,YAAY,SAAS,MAAM;AAC/B,aAAO;AAAmB;AAE5B;AACE,UAAI,uBAAuB;AACzB;AAAa;AAEf;AAAgB;AAGlB;AACE;AAAO;AACL;AACe;AAAA;AAET;AAAA;AAIV;AACE,aAAO;AAAuD;AAGhE;AAKA,UAAM;AACJ,iBAAW;AAAO;AAGpB;AACE;AAAK;AAEP,UAAM;AACJ;AAAK;AAGP,UAAM;AACJ;AAAK;AAGP,UAAM;AACJ;AAAK;AAGP,WAAO;AAAA,MACL;AAAA;AACA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;AAjIY;AACJ;AACE,IACX;AAAU,IACV,SAAS;AAAA,IACT;AAAY,IACZ;AAAgB,IAChB,UAAU;AAAA,IACV,kBAAgB;AAAA,IAChB;AAAS,IACT;AAAQ,IACR,cAAY;AAAA,IACZ;AAAY,IACZ,cAAY;AAAA,IACZ,cAAY;AAAA,IACZ,cAAY;AAAA,IACZ;AAAQ,IACR;AAAW,IACX;AAAc,IACd,gBAAc;AAAA,IACd;AAAY,IACZ;AAAY,IACZ;AAAa,IACb;AAAa,IACb;AAAM,IACN;AAAM;IAMI;AAGH,MAFK;AAEL;;AAFwB,QAAW,MAAK;AAAA,sCACpC;;AAIH;AADK;AAAA;AAAA;AAPH,MAFK;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/popover/src/index.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"tooltipRef\"\n    v-bind=\"$attrs\"\n    :trigger=\"trigger\"\n    :placement=\"placement\"\n    :disabled=\"disabled\"\n    :visible=\"visible\"\n    :transition=\"transition\"\n    :popper-options=\"popperOptions\"\n    :tabindex=\"tabindex\"\n    :append-to-body=\"appendToBody\"\n    :content=\"content\"\n    :offset=\"offset\"\n    :show-after=\"showAfter\"\n    :hide-after=\"hideAfter\"\n    :auto-close=\"autoClose\"\n    :show-arrow=\"showArrow\"\n    :aria-label=\"title\"\n    :effect=\"effect\"\n    :enterable=\"enterable\"\n    :popper-class=\"kls\"\n    :popper-style=\"style\"\n    :teleported=\"compatTeleported\"\n    :persistent=\"persistent\"\n    :gpu-acceleration=\"gpuAcceleration\"\n    @before-show=\"beforeEnter\"\n    @before-hide=\"beforeLeave\"\n    @show=\"afterEnter\"\n    @hide=\"afterLeave\"\n  >\n    <template v-if=\"$slots.reference\">\n      <slot name=\"reference\" />\n    </template>\n\n    <template #content>\n      <div v-if=\"title\" :class=\"ns.e('title')\" role=\"title\">\n        {{ title }}\n      </div>\n      <slot>\n        {{ content }}\n      </slot>\n    </template>\n  </el-tooltip>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, unref } from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { useDeprecateAppendToBody } from '@element-plus/components/popper'\nimport { isString } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { usePopoverProps } from './popover'\n\nimport type { StyleValue } from 'vue'\n\nconst emits = [\n  'update:visible',\n  'before-enter',\n  'before-leave',\n  'after-enter',\n  'after-leave',\n]\n\nconst COMPONENT_NAME = 'ElPopover'\n\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  components: {\n    ElTooltip,\n  },\n  props: usePopoverProps,\n  emits,\n  setup(props, { emit }) {\n    const ns = useNamespace('popover')\n    const tooltipRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n    const popperRef = computed(() => {\n      return unref(tooltipRef)?.popperRef\n    })\n    const width = computed(() => {\n      if (isString(props.width)) {\n        return props.width as string\n      }\n      return `${props.width}px`\n    })\n\n    const style = computed(() => {\n      return [\n        {\n          width: width.value,\n        },\n        props.popperStyle,\n      ] as StyleValue\n    })\n\n    const kls = computed(() => {\n      return [ns.b(), props.popperClass, { [ns.m('plain')]: !!props.content }]\n    })\n\n    const gpuAcceleration = computed(() => {\n      return props.transition === 'el-fade-in-linear'\n    })\n\n    const { compatTeleported } = useDeprecateAppendToBody(\n      COMPONENT_NAME,\n      'appendToBody'\n    )\n\n    const hide = () => {\n      tooltipRef.value?.hide()\n    }\n\n    const beforeEnter = () => {\n      emit('before-enter')\n    }\n    const beforeLeave = () => {\n      emit('before-leave')\n    }\n\n    const afterEnter = () => {\n      emit('after-enter')\n    }\n\n    const afterLeave = () => {\n      emit('after-leave')\n    }\n\n    return {\n      compatTeleported,\n      ns,\n      kls,\n      gpuAcceleration,\n      style,\n      tooltipRef,\n      popperRef,\n      hide,\n      beforeEnter,\n      beforeLeave,\n      afterEnter,\n      afterLeave,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;AAuDA,MAAM,QAAQ;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAGF,MAAM,iBAAiB;AAEvB,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA;AAAA,EAEF,OAAO;AAAA,EACP;AAAA,EACA,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,KAAK,aAAa;AACxB,UAAM,aAAa,IAA2C;AAC9D,UAAM,YAAY,SAAS,MAAM;AAC/B,aAAO;AAAmB;AAE5B;AACE,UAAI,uBAAuB;AACzB;AAAa;AAEf;AAAgB;AAGlB;AACE;AAAO;AACL;AACe;AAAA;AAET;AAAA;AAIV;AACE,aAAO;AAAuD;AAGhE;AACE;AAA4B;AAG9B;AAKA,UAAM;AACJ,iBAAW;AAAO;AAGpB;AACE;AAAK;AAEP,UAAM;AACJ;AAAK;AAGP,UAAM;AACJ;AAAK;AAGP,UAAM;AACJ;AAAK;AAGP,WAAO;AAAA,MACL;AAAA;AACA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;AAvIY;AACJ;AACE,IACX;AAAU,IACV,SAAS;AAAA,IACT;AAAY,IACZ;AAAgB,IAChB,UAAU;AAAA,IACV,kBAAgB;AAAA,IAChB;AAAS,IACT;AAAQ,IACR,cAAY;AAAA,IACZ;AAAY,IACZ,cAAY;AAAA,IACZ,cAAY;AAAA,IACZ,cAAY;AAAA,IACZ;AAAQ,IACR;AAAW,IACX;AAAc,IACd,gBAAc;AAAA,IACd;AAAY,IACZ;AAAY,IACZ;AAAkB,IAClB;AAAa,IACb;AAAa,IACb;AAAM,IACN;AAAM;IAMI;AAGH,MAFK;AAEL;;AAFwB,QAAW,MAAK;AAAA,sCACpC;;AAIH;AADK;AAAA;AAAA;AAPH,MAFK;;;;;;;;;;;"}

package/es/components/popover/src/index.vue.d.ts

@@ -77,6 +77,7 @@ declare const _default: import("vue").DefineComponent<{
     kls: import("vue").ComputedRef<(string | {
         [x: string]: any;
     } | undefined)[]>;
+    gpuAcceleration: import("vue").ComputedRef<boolean>;
     style: import("vue").ComputedRef<StyleValue>;
     tooltipRef: import("vue").Ref<({
         $: import("vue").ComponentInternalInstance;

package/es/components/radio/index.d.ts

@@ -45,8 +45,8 @@ export declare const ElRadio: import("element-plus/es/utils").SFCWithInstall<imp
     size: import("element-plus/es/utils").BuildPropType<StringConstructor, "default" | "small" | "large", never>;
     disabled: boolean;
     name: string;
-    modelValue: import("element-plus/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor, BooleanConstructor], unknown, unknown>;
     label: import("element-plus/es/utils").BuildPropType<(BooleanConstructor | StringConstructor | NumberConstructor)[], unknown, unknown>;
+    modelValue: import("element-plus/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor, BooleanConstructor], unknown, unknown>;
     border: boolean;
 }>> & {
     RadioButton: import("vue").DefineComponent<{