@element-plus/nightly 0.0.20260805 → 0.0.20260807

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

@@ -1 +1 @@
-{"version":3,"file":"input2.mjs","names":[],"sources":["../../../../../../packages/components/input/src/input.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      containerKls,\n      {\n        [nsInput.bm('group', 'append')]: $slots.append,\n        [nsInput.bm('group', 'prepend')]: $slots.prepend,\n      },\n    ]\"\n    :style=\"containerStyle\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\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      <div ref=\"wrapperRef\" :class=\"wrapperKls\">\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\" />\n            <el-icon v-if=\"prefixIcon\" :class=\"nsInput.e('icon')\">\n              <component :is=\"prefixIcon\" />\n            </el-icon>\n          </span>\n        </span>\n\n        <input\n          :id=\"inputId\"\n          ref=\"input\"\n          :class=\"nsInput.e('inner')\"\n          v-bind=\"attrs\"\n          :name=\"name\"\n          :minlength=\"countGraphemes ? undefined : minlength\"\n          :maxlength=\"countGraphemes ? undefined : maxlength\"\n          :type=\"showPassword ? (passwordVisible ? 'text' : 'password') : type\"\n          :disabled=\"inputDisabled\"\n          :readonly=\"readonly\"\n          :autocomplete=\"autocomplete\"\n          :tabindex=\"tabindex\"\n          :aria-label=\"ariaLabel\"\n          :placeholder=\"placeholder\"\n          :style=\"inputStyle\"\n          :form=\"form\"\n          :autofocus=\"autofocus\"\n          :role=\"containerRole\"\n          :inputmode=\"inputmode\"\n          @compositionstart=\"handleCompositionStart\"\n          @compositionupdate=\"handleCompositionUpdate\"\n          @compositionend=\"handleCompositionEnd\"\n          @input=\"handleInput\"\n          @change=\"handleChange\"\n          @keydown=\"handleKeydown\"\n        />\n\n        <!-- suffix slot -->\n        <span v-if=\"suffixVisible\" :class=\"nsInput.e('suffix')\">\n          <span :class=\"nsInput.e('suffix-inner')\">\n            <el-icon\n              v-if=\"renderClear\"\n              :class=\"[nsInput.e('icon'), nsInput.e('clear')]\"\n              :style=\"{ visibility: showClear ? 'visible' : 'hidden' }\"\n              @mousedown.prevent=\"NOOP\"\n              @click=\"clear\"\n            >\n              <component :is=\"clearIcon\" />\n            </el-icon>\n            <template\n              v-if=\"!showClear || !showPwdVisible || !isWordLimitVisible\"\n            >\n              <slot name=\"suffix\" />\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=\"showPwdVisible\"\n              :class=\"[nsInput.e('icon'), nsInput.e('password')]\"\n              @click=\"handlePasswordVisible\"\n              @mousedown.prevent=\"NOOP\"\n              @mouseup.prevent=\"NOOP\"\n            >\n              <slot name=\"password-icon\" :visible=\"passwordVisible\">\n                <component :is=\"passwordIcon\" />\n              </slot>\n            </el-icon>\n            <span\n              v-if=\"isWordLimitVisible\"\n              :class=\"[\n                nsInput.e('count'),\n                nsInput.is('outside', wordLimitPosition === 'outside'),\n              ]\"\n            >\n              <span :class=\"nsInput.e('count-inner')\">\n                {{ textLength }} / {{ maxlength }}\n              </span>\n            </span>\n            <el-icon\n              v-if=\"validateState && validateIcon && needStatusIcon\"\n              :class=\"[\n                nsInput.e('icon'),\n                nsInput.e('validateIcon'),\n                nsInput.is('loading', validateState === 'validating'),\n              ]\"\n            >\n              <component :is=\"validateIcon\" />\n            </el-icon>\n          </span>\n        </span>\n      </div>\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        :id=\"inputId\"\n        ref=\"textarea\"\n        :class=\"[\n          nsTextarea.e('inner'),\n          nsInput.is('focus', isFocused),\n          nsTextarea.is('clearable', clearable),\n        ]\"\n        v-bind=\"attrs\"\n        :name=\"name\"\n        :minlength=\"countGraphemes ? undefined : minlength\"\n        :maxlength=\"countGraphemes ? undefined : maxlength\"\n        :tabindex=\"tabindex\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :style=\"textareaStyle\"\n        :aria-label=\"ariaLabel\"\n        :placeholder=\"placeholder\"\n        :form=\"form\"\n        :autofocus=\"autofocus\"\n        :rows=\"rows\"\n        :role=\"containerRole\"\n        :inputmode=\"inputmode\"\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      <el-icon\n        v-if=\"showClear\"\n        :class=\"[nsTextarea.e('icon'), nsTextarea.e('clear')]\"\n        :style=\"clearIconStyle\"\n        @mousedown.prevent=\"NOOP\"\n        @click=\"clear\"\n      >\n        <component :is=\"clearIcon\" />\n      </el-icon>\n      <span\n        v-if=\"isWordLimitVisible\"\n        :style=\"countStyle\"\n        :class=\"[\n          nsInput.e('count'),\n          nsInput.is('outside', wordLimitPosition === 'outside'),\n        ]\"\n      >\n        {{ textLength }} / {{ maxlength }}\n      </span>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  shallowRef,\n  toRef,\n  useAttrs as useRawAttrs,\n  useSlots,\n  watch,\n} from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { isNil } from 'lodash-unified'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { Hide, View } from '@element-plus/icons-vue'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport {\n  NOOP,\n  ValidateComponentsMap,\n  cAF,\n  debugWarn,\n  isClient,\n  isObject,\n  rAF,\n} from '@element-plus/utils'\nimport {\n  useAttrs,\n  useComposition,\n  useCursor,\n  useFocusController,\n  useNamespace,\n} from '@element-plus/hooks'\nimport {\n  CHANGE_EVENT,\n  INPUT_EVENT,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { calcTextareaHeight, looseToNumber } from './utils'\nimport { inputEmits, inputPropsDefaults } from './input'\n\nimport type { StyleValue } from 'vue'\nimport type { InputProps } from './input'\n\ntype TargetElement = HTMLInputElement | HTMLTextAreaElement\n\nconst COMPONENT_NAME = 'ElInput'\ndefineOptions({\n  name: COMPONENT_NAME,\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps<InputProps>(), inputPropsDefaults)\nconst emit = defineEmits(inputEmits)\n\nconst rawAttrs = useRawAttrs()\nconst slots = useSlots()\n\nconst containerKls = computed(() => [\n  props.type === 'textarea' ? nsTextarea.b() : nsInput.b(),\n  nsInput.m(inputSize.value),\n  nsInput.is('disabled', inputDisabled.value),\n  nsInput.is('exceed', inputExceed.value),\n  {\n    [nsInput.b('group')]: slots.prepend || slots.append,\n    [nsInput.m('prefix')]: slots.prefix || props.prefixIcon,\n    [nsInput.m('suffix')]:\n      slots.suffix || props.suffixIcon || props.clearable || props.showPassword,\n    [nsInput.bm('suffix', 'password-clear')]:\n      showClear.value && showPwdVisible.value,\n    [nsInput.b('hidden')]: props.type === 'hidden',\n  },\n  rawAttrs.class,\n])\n\nconst wrapperKls = computed(() => [\n  nsInput.e('wrapper'),\n  nsInput.is('focus', isFocused.value),\n])\n\nconst attrs = useAttrs()\nconst maxlength = computed(() => props.maxlength?.toString())\n\nconst { form: elForm, formItem: elFormItem } = useFormItem()\nconst { inputId } = useFormItemInputId(props, {\n  formItemContext: elFormItem,\n})\nconst inputSize = useFormSize()\nconst inputDisabled = useFormDisabled()\nconst nsInput = useNamespace('input')\nconst nsTextarea = useNamespace('textarea')\n\nconst input = shallowRef<HTMLInputElement>()\nconst textarea = shallowRef<HTMLTextAreaElement>()\n\nconst hovering = ref(false)\nconst passwordVisible = ref(false)\nconst countStyle = ref<StyleValue>()\nconst clearIconStyle = ref<StyleValue>()\nconst textareaCalcStyle = shallowRef(props.inputStyle)\nconst saveValue = ref('')\nconst textareaHeight = ref<string>()\n\nconst _ref = computed(() => input.value || textarea.value)\n\n// wrapperRef for type=\"text\", handleFocus and handleBlur for type=\"textarea\"\n// @ts-ignore - used in template ref binding, TS cannot detect template usage\nconst { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(\n  _ref,\n  {\n    disabled: inputDisabled,\n    afterBlur() {\n      if (props.validateEvent) {\n        elFormItem?.validate?.('blur').catch(NOOP)\n      }\n    },\n  }\n)\n\nconst needStatusIcon = computed(() => elForm?.statusIcon ?? false)\nconst validateState = computed(() => elFormItem?.validateState || '')\nconst validateIcon = computed(\n  () => validateState.value && ValidateComponentsMap[validateState.value]\n)\nconst passwordIcon = computed(() => (passwordVisible.value ? View : Hide))\nconst containerStyle = computed<StyleValue>(() => [\n  rawAttrs.style as StyleValue,\n])\nconst textareaStyle = computed<StyleValue>(() => [\n  props.inputStyle,\n  textareaCalcStyle.value,\n  { resize: props.resize },\n  textareaHeight.value ? { height: textareaHeight.value } : undefined,\n])\nconst nativeInputValue = computed(() =>\n  isNil(props.modelValue) ? '' : String(props.modelValue)\n)\nconst renderClear = computed(\n  () => props.clearable && !inputDisabled.value && !props.readonly\n)\nconst showClear = computed(\n  () =>\n    renderClear.value &&\n    !!nativeInputValue.value &&\n    (isFocused.value || hovering.value)\n)\nconst showPwdVisible = computed(\n  () => props.showPassword && !inputDisabled.value && !!nativeInputValue.value\n)\nconst isWordLimitVisible = computed(\n  () =>\n    props.showWordLimit &&\n    !!maxlength.value &&\n    (props.type === 'text' || props.type === 'textarea') &&\n    !inputDisabled.value &&\n    !props.readonly &&\n    !props.showPassword\n)\nconst textLength = computed(() => {\n  if (props.countGraphemes && props.showWordLimit) {\n    return props.countGraphemes(nativeInputValue.value)\n  }\n  return nativeInputValue.value.length\n})\nconst inputExceed = computed(\n  () =>\n    // show exceed style if length of initial value greater then maxlength\n    !!isWordLimitVisible.value && textLength.value > Number(maxlength.value)\n)\nconst suffixVisible = computed(\n  () =>\n    !!slots.suffix ||\n    !!props.suffixIcon ||\n    props.clearable ||\n    props.showPassword ||\n    isWordLimitVisible.value ||\n    (!!validateState.value && needStatusIcon.value)\n)\nconst hasModelModifiers = computed(\n  () => !!Object.keys(props.modelModifiers).length\n)\n\nconst [recordCursor, setCursor] = useCursor(input)\n\nlet rAFId: number | undefined\n\nuseResizeObserver(textarea, (entries) => {\n  onceInitSizeTextarea()\n  if (\n    (!isWordLimitVisible.value && !renderClear.value) ||\n    (props.resize !== 'both' && props.resize !== 'horizontal')\n  )\n    return\n  const entry = entries[0]\n  const { width } = entry.target.getBoundingClientRect()\n\n  const updateStyle = () => {\n    rAFId = undefined\n    countStyle.value = {\n      /** right: 100% - (width - right(10)) */\n      right: `calc(100% - ${width - 10}px)`,\n    }\n    clearIconStyle.value = {\n      /** right: 100% - (width - right(11)) */\n      right: `calc(100% - ${width - 11}px)`,\n    }\n  }\n\n  rAFId && cAF(rAFId)\n  rAFId = rAF(updateStyle)\n})\n\nconst resizeTextarea = () => {\n  const { type, autosize } = props\n\n  if (!isClient || type !== 'textarea' || !textarea.value) return\n\n  if (autosize) {\n    const minRows = isObject(autosize) ? autosize.minRows : undefined\n    const maxRows = isObject(autosize) ? autosize.maxRows : undefined\n    const textareaStyle = calcTextareaHeight(textarea.value, minRows, maxRows)\n\n    // If the scrollbar is displayed, the height of the textarea needs more space than the calculated height.\n    // If set textarea height in this case, the scrollbar will not hide.\n    // So we need to hide scrollbar first, and reset it in next tick.\n    // see https://github.com/element-plus/element-plus/issues/8825\n    textareaCalcStyle.value = {\n      overflowY: 'hidden',\n      ...textareaStyle,\n    }\n\n    nextTick(() => {\n      // NOTE: Force repaint to make sure the style set above is applied.\n      textarea.value!.offsetHeight\n      textareaCalcStyle.value = textareaStyle\n    })\n  } else {\n    textareaCalcStyle.value = {\n      minHeight: calcTextareaHeight(textarea.value).minHeight,\n    }\n  }\n}\n\nconst createOnceInitResize = (resizeTextarea: () => void) => {\n  let isInit = false\n  return () => {\n    if (isInit || !props.autosize) {\n      if (props.resize !== 'none') {\n        // The execution here may occur before `setTimeout(resizeTextarea)`,\n        // potentially causing a regression of issue #21836, so the assignment needs to be deferred.\n        setTimeout(() => {\n          textareaHeight.value = textarea.value?.style.height\n        })\n      }\n      return\n    }\n    const isElHidden = textarea.value?.offsetParent === null\n    if (!isElHidden) {\n      setTimeout(resizeTextarea)\n      isInit = true\n    }\n  }\n}\n// fix: https://github.com/element-plus/element-plus/issues/12074\nconst onceInitSizeTextarea = createOnceInitResize(resizeTextarea)\n\nconst setNativeInputValue = () => {\n  const input = _ref.value\n  const formatterValue = props.formatter\n    ? props.formatter(nativeInputValue.value)\n    : nativeInputValue.value\n  if (!input || input.value === formatterValue || props.type === 'file') return\n  input.value = formatterValue\n}\n\nconst formatValue = (value: string) => {\n  const { trim, number } = props.modelModifiers\n  if (trim) {\n    value = value.trim()\n  }\n  if (number) {\n    value = `${looseToNumber(value)}`\n  }\n  if (props.formatter && props.parser) {\n    value = props.parser(value)\n  }\n  return value\n}\n\nconst handleInput = async (event: Event) => {\n  // should not emit input during composition\n  // see: https://github.com/ElemeFE/element/issues/10516\n  if (isComposing.value) return\n\n  const { lazy } = props.modelModifiers\n  let { value } = event.target as TargetElement\n  let shouldForceNativeUpdate = false\n  if (lazy) {\n    emit(INPUT_EVENT, value)\n    return\n  }\n\n  value = formatValue(value)\n\n  if (props.countGraphemes && maxlength.value != null) {\n    const limit = Number(maxlength.value)\n    const graphemes = props.countGraphemes(value)\n    const saveGraphemes = props.countGraphemes(saveValue.value)\n    if (graphemes > limit && graphemes > saveGraphemes) {\n      // If current value already exceeds limit, block further input and keep exceed state.\n      if (saveGraphemes > limit) {\n        value = saveValue.value\n        shouldForceNativeUpdate = true\n      } else {\n        // Keep unchanged suffix like native maxlength behavior.\n        // Instead of truncating from the end of the whole string,\n        // only limit the inserted segment to available capacity.\n        const prevValue = saveValue.value\n        const nextValue = value\n        let prefixLen = 0\n\n        while (\n          prefixLen < prevValue.length &&\n          prefixLen < nextValue.length &&\n          prevValue[prefixLen] === nextValue[prefixLen]\n        ) {\n          prefixLen++\n        }\n\n        let prevSuffixIndex = prevValue.length\n        let nextSuffixIndex = nextValue.length\n        while (\n          prevSuffixIndex > prefixLen &&\n          nextSuffixIndex > prefixLen &&\n          prevValue[prevSuffixIndex - 1] === nextValue[nextSuffixIndex - 1]\n        ) {\n          prevSuffixIndex--\n          nextSuffixIndex--\n        }\n\n        const before = nextValue.slice(0, prefixLen)\n        const removed = prevValue.slice(prefixLen, prevSuffixIndex)\n        const inserted = nextValue.slice(prefixLen, nextSuffixIndex)\n        const after = nextValue.slice(nextSuffixIndex)\n\n        const removedCount = props.countGraphemes(removed)\n        const baseCount = saveGraphemes - removedCount\n        const availableInserted = Math.max(0, limit - baseCount)\n\n        let acceptedInserted = ''\n        if (availableInserted > 0) {\n          // Use Intl.Segmenter for proper grapheme cluster iteration if available.\n          if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\n            const segmenter = new Intl.Segmenter(undefined, {\n              granularity: 'grapheme',\n            })\n            for (const { segment } of segmenter.segment(inserted)) {\n              const candidate = acceptedInserted + segment\n              const newCount = props.countGraphemes(candidate)\n              if (newCount > availableInserted) break\n              acceptedInserted = candidate\n            }\n          } else {\n            // Fallback to code-point iteration for older environments.\n            for (const char of Array.from(inserted)) {\n              const candidate = acceptedInserted + char\n              const newCount = props.countGraphemes(candidate)\n              if (newCount > availableInserted) break\n              acceptedInserted = candidate\n            }\n          }\n        }\n\n        value = before + acceptedInserted + after\n        shouldForceNativeUpdate = true\n      }\n    }\n  }\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 (String(value) === nativeInputValue.value) {\n    // preserve native features while being compatible with #9501\n    if (props.formatter || shouldForceNativeUpdate) {\n      const target = event.target as TargetElement\n      const blockedValue = target.value\n      const selectionStart = target.selectionStart\n      const selectionEnd = target.selectionEnd\n      setNativeInputValue()\n      // Keep caret position stable when input is blocked and value is reset.\n      if (\n        shouldForceNativeUpdate &&\n        _ref.value &&\n        selectionStart != null &&\n        selectionEnd != null\n      ) {\n        const restoredValue = _ref.value.value\n        const afterTxt = blockedValue.slice(Math.max(0, selectionEnd))\n        let caretPos = Math.min(selectionStart, restoredValue.length)\n\n        if (afterTxt && restoredValue.endsWith(afterTxt)) {\n          caretPos = restoredValue.length - afterTxt.length\n        }\n\n        _ref.value.setSelectionRange(caretPos, caretPos)\n      }\n    }\n    return\n  }\n  saveValue.value = value\n\n  recordCursor()\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(INPUT_EVENT, value)\n\n  // ensure native input value is controlled\n  // see: https://github.com/ElemeFE/element/issues/12850\n  await nextTick()\n\n  if ((props.formatter && props.parser) || !hasModelModifiers.value) {\n    setNativeInputValue()\n  }\n  setCursor()\n}\n\nconst handleChange = async (event: Event) => {\n  let { value } = event.target as TargetElement\n\n  value = formatValue(value)\n  if (props.modelModifiers.lazy) {\n    emit(UPDATE_MODEL_EVENT, value)\n  }\n  emit(CHANGE_EVENT, value, event)\n\n  await nextTick()\n  setNativeInputValue()\n}\n\nconst {\n  isComposing,\n  handleCompositionStart,\n  handleCompositionUpdate,\n  handleCompositionEnd,\n} = useComposition({ emit, afterComposition: handleInput })\n\nconst handlePasswordVisible = () => {\n  passwordVisible.value = !passwordVisible.value\n}\n\nconst focus = () => _ref.value?.focus()\n\nconst blur = () => _ref.value?.blur()\n\nconst handleMouseLeave = (evt: MouseEvent) => {\n  hovering.value = false\n  emit('mouseleave', evt)\n}\n\nconst handleMouseEnter = (evt: MouseEvent) => {\n  hovering.value = true\n  emit('mouseenter', evt)\n}\n\nconst handleKeydown = (evt: KeyboardEvent) => {\n  emit('keydown', evt)\n}\n\nconst select = () => {\n  _ref.value?.select()\n}\n\nconst clear = (evt?: MouseEvent) => {\n  emit(UPDATE_MODEL_EVENT, '')\n  emit(CHANGE_EVENT, '')\n  emit('clear', evt)\n  emit(INPUT_EVENT, '')\n}\n\nwatch(\n  () => props.modelValue,\n  () => {\n    nextTick(() => {\n      resizeTextarea()\n      if (props.autosize) {\n        textareaHeight.value = undefined\n      }\n    })\n    if (props.validateEvent) {\n      elFormItem?.validate?.('change').catch(NOOP)\n    }\n  }\n)\n\nwatch(\n  () => nativeInputValue.value,\n  (val) => {\n    saveValue.value = val\n  },\n  { immediate: true }\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\nwatch(nativeInputValue, (newValue) => {\n  if (!_ref.value) {\n    return\n  }\n  const { trim, number } = props.modelModifiers\n  const elValue = _ref.value.value\n  const displayValue =\n    (number || props.type === 'number') && !/^0\\d/.test(elValue)\n      ? `${looseToNumber(elValue)}`\n      : elValue\n\n  if (displayValue === newValue) {\n    return\n  }\n\n  if (document.activeElement === _ref.value && _ref.value.type !== 'range') {\n    if (trim && displayValue.trim() === newValue) {\n      return\n    }\n  }\n\n  setNativeInputValue()\n})\n\n// when change between <input> and <textarea>,\n// update DOM dependent value and styles\n// https://github.com/ElemeFE/element/issues/14857\nwatch(\n  () => props.type,\n  async () => {\n    await nextTick()\n    setNativeInputValue()\n    resizeTextarea()\n  }\n)\n\nonMounted(() => {\n  if (!props.formatter && props.parser) {\n    debugWarn(\n      COMPONENT_NAME,\n      'If you set the parser, you also need to set the formatter.'\n    )\n  }\n  setNativeInputValue()\n  nextTick(resizeTextarea)\n})\n\nonBeforeUnmount(() => {\n  rAFId && cAF(rAFId)\n})\n\ndefineExpose({\n  /** @description HTML input element */\n  input,\n  /** @description HTML textarea element */\n  textarea,\n  /** @description HTML element, input or textarea */\n  ref: _ref,\n  /** @description style of textarea. */\n  textareaStyle,\n\n  /** @description from props (used on unit test) */\n  autosize: toRef(props, 'autosize'),\n\n  /** @description is input composing */\n  isComposing,\n\n  /** @description whether the password is visible */\n  passwordVisible,\n\n  /** @description HTML input element native method */\n  focus,\n  /** @description HTML input element native method */\n  blur,\n  /** @description HTML input element native method */\n  select,\n  /** @description clear input value */\n  clear,\n  /** @description resize textarea. */\n  resizeTextarea,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"input2.mjs","names":[],"sources":["../../../../../../packages/components/input/src/input.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      containerKls,\n      {\n        [nsInput.bm('group', 'append')]: $slots.append,\n        [nsInput.bm('group', 'prepend')]: $slots.prepend,\n      },\n    ]\"\n    :style=\"containerStyle\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\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      <div ref=\"wrapperRef\" :class=\"wrapperKls\">\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\" />\n            <el-icon v-if=\"prefixIcon\" :class=\"nsInput.e('icon')\">\n              <component :is=\"prefixIcon\" />\n            </el-icon>\n          </span>\n        </span>\n\n        <input\n          :id=\"inputId\"\n          ref=\"input\"\n          :class=\"nsInput.e('inner')\"\n          v-bind=\"attrs\"\n          :name=\"name\"\n          :minlength=\"countGraphemes ? undefined : minlength\"\n          :maxlength=\"countGraphemes ? undefined : maxlength\"\n          :type=\"showPassword ? (passwordVisible ? 'text' : 'password') : type\"\n          :disabled=\"inputDisabled\"\n          :readonly=\"readonly\"\n          :autocomplete=\"autocomplete\"\n          :tabindex=\"tabindex\"\n          :aria-label=\"ariaLabel\"\n          :placeholder=\"placeholder\"\n          :style=\"inputStyle\"\n          :form=\"form\"\n          :autofocus=\"autofocus\"\n          :role=\"containerRole\"\n          :inputmode=\"inputmode\"\n          @compositionstart=\"handleCompositionStart\"\n          @compositionupdate=\"handleCompositionUpdate\"\n          @compositionend=\"handleCompositionEnd\"\n          @input=\"handleInput\"\n          @change=\"handleChange\"\n          @keydown=\"handleKeydown\"\n        />\n\n        <!-- suffix slot -->\n        <span v-if=\"suffixVisible\" :class=\"nsInput.e('suffix')\">\n          <span :class=\"nsInput.e('suffix-inner')\">\n            <el-icon\n              v-if=\"renderClear\"\n              :class=\"[nsInput.e('icon'), nsInput.e('clear')]\"\n              :style=\"{ visibility: showClear ? 'visible' : 'hidden' }\"\n              @mousedown.prevent=\"NOOP\"\n              @click=\"clear\"\n            >\n              <component :is=\"clearIcon\" />\n            </el-icon>\n            <template\n              v-if=\"!showClear || !showPwdVisible || !isWordLimitVisible\"\n            >\n              <slot name=\"suffix\" />\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=\"showPwdVisible\"\n              :class=\"[nsInput.e('icon'), nsInput.e('password')]\"\n              @click=\"handlePasswordVisible\"\n              @mousedown.prevent=\"NOOP\"\n              @mouseup.prevent=\"NOOP\"\n            >\n              <slot name=\"password-icon\" :visible=\"passwordVisible\">\n                <component :is=\"passwordIcon\" />\n              </slot>\n            </el-icon>\n            <span\n              v-if=\"isWordLimitVisible\"\n              :class=\"[\n                nsInput.e('count'),\n                nsInput.is('outside', wordLimitPosition === 'outside'),\n              ]\"\n            >\n              <span :class=\"nsInput.e('count-inner')\">\n                {{ textLength }} / {{ maxlength }}\n              </span>\n            </span>\n            <el-icon\n              v-if=\"validateState && validateIcon && needStatusIcon\"\n              :class=\"[\n                nsInput.e('icon'),\n                nsInput.e('validateIcon'),\n                nsInput.is('loading', validateState === 'validating'),\n              ]\"\n            >\n              <component :is=\"validateIcon\" />\n            </el-icon>\n          </span>\n        </span>\n      </div>\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        :id=\"inputId\"\n        ref=\"textarea\"\n        :class=\"[\n          nsTextarea.e('inner'),\n          nsInput.is('focus', isFocused),\n          nsTextarea.is('clearable', clearable),\n        ]\"\n        v-bind=\"attrs\"\n        :name=\"name\"\n        :minlength=\"countGraphemes ? undefined : minlength\"\n        :maxlength=\"countGraphemes ? undefined : maxlength\"\n        :tabindex=\"tabindex\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :style=\"textareaStyle\"\n        :aria-label=\"ariaLabel\"\n        :placeholder=\"placeholder\"\n        :form=\"form\"\n        :autofocus=\"autofocus\"\n        :rows=\"rows\"\n        :role=\"containerRole\"\n        :inputmode=\"inputmode\"\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      <el-icon\n        v-if=\"showClear\"\n        :class=\"[nsTextarea.e('icon'), nsTextarea.e('clear')]\"\n        :style=\"clearIconStyle\"\n        @mousedown.prevent=\"NOOP\"\n        @click=\"clear\"\n      >\n        <component :is=\"clearIcon\" />\n      </el-icon>\n      <span\n        v-if=\"isWordLimitVisible\"\n        :style=\"countStyle\"\n        :class=\"[\n          nsInput.e('count'),\n          nsInput.is('outside', wordLimitPosition === 'outside'),\n        ]\"\n      >\n        {{ textLength }} / {{ maxlength }}\n      </span>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  shallowRef,\n  toRef,\n  useAttrs as useRawAttrs,\n  useSlots,\n  watch,\n} from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { isNil } from 'lodash-unified'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { Hide, View } from '@element-plus/icons-vue'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport {\n  NOOP,\n  ValidateComponentsMap,\n  cAF,\n  debugWarn,\n  isClient,\n  isObject,\n  rAF,\n} from '@element-plus/utils'\nimport {\n  useAttrs,\n  useComposition,\n  useCursor,\n  useFocusController,\n  useNamespace,\n} from '@element-plus/hooks'\nimport {\n  CHANGE_EVENT,\n  INPUT_EVENT,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { calcTextareaHeight, looseToNumber } from './utils'\nimport { inputEmits, inputPropsDefaults } from './input'\n\nimport type { StyleValue } from 'vue'\nimport type { InputProps } from './input'\n\ntype TargetElement = HTMLInputElement | HTMLTextAreaElement\n\nconst COMPONENT_NAME = 'ElInput'\ndefineOptions({\n  name: COMPONENT_NAME,\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps<InputProps>(), inputPropsDefaults)\nconst emit = defineEmits(inputEmits)\n\nconst rawAttrs = useRawAttrs()\nconst slots = useSlots()\n\nconst containerKls = computed(() => [\n  props.type === 'textarea' ? nsTextarea.b() : nsInput.b(),\n  nsInput.m(inputSize.value),\n  nsInput.is('disabled', inputDisabled.value),\n  nsInput.is('exceed', inputExceed.value),\n  {\n    [nsInput.b('group')]: slots.prepend || slots.append,\n    [nsInput.m('prefix')]: slots.prefix || props.prefixIcon,\n    [nsInput.m('suffix')]:\n      slots.suffix || props.suffixIcon || props.clearable || props.showPassword,\n    [nsInput.bm('suffix', 'password-clear')]:\n      showClear.value && showPwdVisible.value,\n    [nsInput.b('hidden')]: props.type === 'hidden',\n  },\n  rawAttrs.class,\n])\n\nconst wrapperKls = computed(() => [\n  nsInput.e('wrapper'),\n  nsInput.is('focus', isFocused.value),\n])\n\nconst attrs = useAttrs()\nconst maxlength = computed(() => props.maxlength?.toString())\n\nconst { form: elForm, formItem: elFormItem } = useFormItem()\nconst { inputId } = useFormItemInputId(props, {\n  formItemContext: elFormItem,\n})\nconst inputSize = useFormSize()\nconst inputDisabled = useFormDisabled()\nconst nsInput = useNamespace('input')\nconst nsTextarea = useNamespace('textarea')\n\nconst input = shallowRef<HTMLInputElement>()\nconst textarea = shallowRef<HTMLTextAreaElement>()\n\nconst hovering = ref(false)\nconst passwordVisible = ref(false)\nconst countStyle = ref<StyleValue>()\nconst clearIconStyle = ref<StyleValue>()\nconst textareaCalcStyle = shallowRef(props.inputStyle)\nconst saveValue = ref('')\nlet passwordFocusValue: string | undefined\nconst textareaHeight = ref<string>()\n\nconst _ref = computed(() => input.value || textarea.value)\n\n// wrapperRef for type=\"text\", handleFocus and handleBlur for type=\"textarea\"\n// @ts-ignore - used in template ref binding, TS cannot detect template usage\nconst { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(\n  _ref,\n  {\n    disabled: inputDisabled,\n    afterFocus() {\n      if (props.showPassword) {\n        passwordFocusValue = _ref.value?.value\n      }\n    },\n    beforeBlur(event) {\n      if (props.showPassword) {\n        const target = _ref.value\n        if (\n          event.relatedTarget &&\n          target?.parentElement?.contains(event.relatedTarget as Node)\n        ) {\n          return undefined\n        }\n        const value = target?.value\n        if (\n          !isNil(value) &&\n          !isNil(passwordFocusValue) &&\n          value !== passwordFocusValue\n        ) {\n          target?.dispatchEvent(new Event('change', { bubbles: true }))\n        }\n        passwordFocusValue = undefined\n      }\n      return undefined\n    },\n    afterBlur() {\n      if (props.validateEvent) {\n        elFormItem?.validate?.('blur').catch(NOOP)\n      }\n    },\n  }\n)\n\nconst needStatusIcon = computed(() => elForm?.statusIcon ?? false)\nconst validateState = computed(() => elFormItem?.validateState || '')\nconst validateIcon = computed(\n  () => validateState.value && ValidateComponentsMap[validateState.value]\n)\nconst passwordIcon = computed(() => (passwordVisible.value ? View : Hide))\nconst containerStyle = computed<StyleValue>(() => [\n  rawAttrs.style as StyleValue,\n])\nconst textareaStyle = computed<StyleValue>(() => [\n  props.inputStyle,\n  textareaCalcStyle.value,\n  { resize: props.resize },\n  textareaHeight.value ? { height: textareaHeight.value } : undefined,\n])\nconst nativeInputValue = computed(() =>\n  isNil(props.modelValue) ? '' : String(props.modelValue)\n)\nconst renderClear = computed(\n  () => props.clearable && !inputDisabled.value && !props.readonly\n)\nconst showClear = computed(\n  () =>\n    renderClear.value &&\n    !!nativeInputValue.value &&\n    (isFocused.value || hovering.value)\n)\nconst showPwdVisible = computed(\n  () => props.showPassword && !inputDisabled.value && !!nativeInputValue.value\n)\nconst isWordLimitVisible = computed(\n  () =>\n    props.showWordLimit &&\n    !!maxlength.value &&\n    (props.type === 'text' || props.type === 'textarea') &&\n    !inputDisabled.value &&\n    !props.readonly &&\n    !props.showPassword\n)\nconst textLength = computed(() => {\n  if (props.countGraphemes && props.showWordLimit) {\n    return props.countGraphemes(nativeInputValue.value)\n  }\n  return nativeInputValue.value.length\n})\nconst inputExceed = computed(\n  () =>\n    // show exceed style if length of initial value greater then maxlength\n    !!isWordLimitVisible.value && textLength.value > Number(maxlength.value)\n)\nconst suffixVisible = computed(\n  () =>\n    !!slots.suffix ||\n    !!props.suffixIcon ||\n    props.clearable ||\n    props.showPassword ||\n    isWordLimitVisible.value ||\n    (!!validateState.value && needStatusIcon.value)\n)\nconst hasModelModifiers = computed(\n  () => !!Object.keys(props.modelModifiers).length\n)\n\nconst [recordCursor, setCursor] = useCursor(input)\n\nlet rAFId: number | undefined\n\nuseResizeObserver(textarea, (entries) => {\n  onceInitSizeTextarea()\n  if (\n    (!isWordLimitVisible.value && !renderClear.value) ||\n    (props.resize !== 'both' && props.resize !== 'horizontal')\n  )\n    return\n  const entry = entries[0]\n  const { width } = entry.target.getBoundingClientRect()\n\n  const updateStyle = () => {\n    rAFId = undefined\n    countStyle.value = {\n      /** right: 100% - (width - right(10)) */\n      right: `calc(100% - ${width - 10}px)`,\n    }\n    clearIconStyle.value = {\n      /** right: 100% - (width - right(11)) */\n      right: `calc(100% - ${width - 11}px)`,\n    }\n  }\n\n  rAFId && cAF(rAFId)\n  rAFId = rAF(updateStyle)\n})\n\nconst resizeTextarea = () => {\n  const { type, autosize } = props\n\n  if (!isClient || type !== 'textarea' || !textarea.value) return\n\n  if (autosize) {\n    const minRows = isObject(autosize) ? autosize.minRows : undefined\n    const maxRows = isObject(autosize) ? autosize.maxRows : undefined\n    const textareaStyle = calcTextareaHeight(textarea.value, minRows, maxRows)\n\n    // If the scrollbar is displayed, the height of the textarea needs more space than the calculated height.\n    // If set textarea height in this case, the scrollbar will not hide.\n    // So we need to hide scrollbar first, and reset it in next tick.\n    // see https://github.com/element-plus/element-plus/issues/8825\n    textareaCalcStyle.value = {\n      overflowY: 'hidden',\n      ...textareaStyle,\n    }\n\n    nextTick(() => {\n      // NOTE: Force repaint to make sure the style set above is applied.\n      textarea.value!.offsetHeight\n      textareaCalcStyle.value = textareaStyle\n    })\n  } else {\n    textareaCalcStyle.value = {\n      minHeight: calcTextareaHeight(textarea.value).minHeight,\n    }\n  }\n}\n\nconst createOnceInitResize = (resizeTextarea: () => void) => {\n  let isInit = false\n  return () => {\n    if (isInit || !props.autosize) {\n      if (props.resize !== 'none') {\n        // The execution here may occur before `setTimeout(resizeTextarea)`,\n        // potentially causing a regression of issue #21836, so the assignment needs to be deferred.\n        setTimeout(() => {\n          textareaHeight.value = textarea.value?.style.height\n        })\n      }\n      return\n    }\n    const isElHidden = textarea.value?.offsetParent === null\n    if (!isElHidden) {\n      setTimeout(resizeTextarea)\n      isInit = true\n    }\n  }\n}\n// fix: https://github.com/element-plus/element-plus/issues/12074\nconst onceInitSizeTextarea = createOnceInitResize(resizeTextarea)\n\nconst setNativeInputValue = () => {\n  const input = _ref.value\n  const formatterValue = props.formatter\n    ? props.formatter(nativeInputValue.value)\n    : nativeInputValue.value\n  if (!input || input.value === formatterValue || props.type === 'file') return\n  input.value = formatterValue\n}\n\nconst formatValue = (value: string) => {\n  const { trim, number } = props.modelModifiers\n  if (trim) {\n    value = value.trim()\n  }\n  if (number) {\n    value = `${looseToNumber(value)}`\n  }\n  if (props.formatter && props.parser) {\n    value = props.parser(value)\n  }\n  return value\n}\n\nconst handleInput = async (event: Event) => {\n  // should not emit input during composition\n  // see: https://github.com/ElemeFE/element/issues/10516\n  if (isComposing.value) return\n\n  const { lazy } = props.modelModifiers\n  let { value } = event.target as TargetElement\n  let shouldForceNativeUpdate = false\n  if (lazy) {\n    emit(INPUT_EVENT, value)\n    return\n  }\n\n  value = formatValue(value)\n\n  if (props.countGraphemes && maxlength.value != null) {\n    const limit = Number(maxlength.value)\n    const graphemes = props.countGraphemes(value)\n    const saveGraphemes = props.countGraphemes(saveValue.value)\n    if (graphemes > limit && graphemes > saveGraphemes) {\n      // If current value already exceeds limit, block further input and keep exceed state.\n      if (saveGraphemes > limit) {\n        value = saveValue.value\n        shouldForceNativeUpdate = true\n      } else {\n        // Keep unchanged suffix like native maxlength behavior.\n        // Instead of truncating from the end of the whole string,\n        // only limit the inserted segment to available capacity.\n        const prevValue = saveValue.value\n        const nextValue = value\n        let prefixLen = 0\n\n        while (\n          prefixLen < prevValue.length &&\n          prefixLen < nextValue.length &&\n          prevValue[prefixLen] === nextValue[prefixLen]\n        ) {\n          prefixLen++\n        }\n\n        let prevSuffixIndex = prevValue.length\n        let nextSuffixIndex = nextValue.length\n        while (\n          prevSuffixIndex > prefixLen &&\n          nextSuffixIndex > prefixLen &&\n          prevValue[prevSuffixIndex - 1] === nextValue[nextSuffixIndex - 1]\n        ) {\n          prevSuffixIndex--\n          nextSuffixIndex--\n        }\n\n        const before = nextValue.slice(0, prefixLen)\n        const removed = prevValue.slice(prefixLen, prevSuffixIndex)\n        const inserted = nextValue.slice(prefixLen, nextSuffixIndex)\n        const after = nextValue.slice(nextSuffixIndex)\n\n        const removedCount = props.countGraphemes(removed)\n        const baseCount = saveGraphemes - removedCount\n        const availableInserted = Math.max(0, limit - baseCount)\n\n        let acceptedInserted = ''\n        if (availableInserted > 0) {\n          // Use Intl.Segmenter for proper grapheme cluster iteration if available.\n          if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\n            const segmenter = new Intl.Segmenter(undefined, {\n              granularity: 'grapheme',\n            })\n            for (const { segment } of segmenter.segment(inserted)) {\n              const candidate = acceptedInserted + segment\n              const newCount = props.countGraphemes(candidate)\n              if (newCount > availableInserted) break\n              acceptedInserted = candidate\n            }\n          } else {\n            // Fallback to code-point iteration for older environments.\n            for (const char of Array.from(inserted)) {\n              const candidate = acceptedInserted + char\n              const newCount = props.countGraphemes(candidate)\n              if (newCount > availableInserted) break\n              acceptedInserted = candidate\n            }\n          }\n        }\n\n        value = before + acceptedInserted + after\n        shouldForceNativeUpdate = true\n      }\n    }\n  }\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 (String(value) === nativeInputValue.value) {\n    // preserve native features while being compatible with #9501\n    if (props.formatter || shouldForceNativeUpdate) {\n      const target = event.target as TargetElement\n      const blockedValue = target.value\n      const selectionStart = target.selectionStart\n      const selectionEnd = target.selectionEnd\n      setNativeInputValue()\n      // Keep caret position stable when input is blocked and value is reset.\n      if (\n        shouldForceNativeUpdate &&\n        _ref.value &&\n        selectionStart != null &&\n        selectionEnd != null\n      ) {\n        const restoredValue = _ref.value.value\n        const afterTxt = blockedValue.slice(Math.max(0, selectionEnd))\n        let caretPos = Math.min(selectionStart, restoredValue.length)\n\n        if (afterTxt && restoredValue.endsWith(afterTxt)) {\n          caretPos = restoredValue.length - afterTxt.length\n        }\n\n        _ref.value.setSelectionRange(caretPos, caretPos)\n      }\n    }\n    return\n  }\n  saveValue.value = value\n\n  recordCursor()\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(INPUT_EVENT, value)\n\n  // ensure native input value is controlled\n  // see: https://github.com/ElemeFE/element/issues/12850\n  await nextTick()\n\n  if ((props.formatter && props.parser) || !hasModelModifiers.value) {\n    setNativeInputValue()\n  }\n  setCursor()\n}\n\nconst handleChange = async (event: Event) => {\n  let { value } = event.target as TargetElement\n\n  if (props.showPassword) {\n    passwordFocusValue = value\n  }\n\n  value = formatValue(value)\n  if (props.modelModifiers.lazy) {\n    emit(UPDATE_MODEL_EVENT, value)\n  }\n  emit(CHANGE_EVENT, value, event)\n\n  await nextTick()\n  setNativeInputValue()\n}\n\nconst {\n  isComposing,\n  handleCompositionStart,\n  handleCompositionUpdate,\n  handleCompositionEnd,\n} = useComposition({ emit, afterComposition: handleInput })\n\nconst handlePasswordVisible = () => {\n  passwordVisible.value = !passwordVisible.value\n}\n\nconst focus = () => _ref.value?.focus()\n\nconst blur = () => _ref.value?.blur()\n\nconst handleMouseLeave = (evt: MouseEvent) => {\n  hovering.value = false\n  emit('mouseleave', evt)\n}\n\nconst handleMouseEnter = (evt: MouseEvent) => {\n  hovering.value = true\n  emit('mouseenter', evt)\n}\n\nconst handleKeydown = (evt: KeyboardEvent) => {\n  emit('keydown', evt)\n}\n\nconst select = () => {\n  _ref.value?.select()\n}\n\nconst clear = (evt?: MouseEvent) => {\n  emit(UPDATE_MODEL_EVENT, '')\n  passwordFocusValue = ''\n  emit(CHANGE_EVENT, '')\n  emit('clear', evt)\n  emit(INPUT_EVENT, '')\n}\n\nwatch(\n  () => props.modelValue,\n  () => {\n    nextTick(() => {\n      resizeTextarea()\n      if (props.autosize) {\n        textareaHeight.value = undefined\n      }\n    })\n    if (props.validateEvent) {\n      elFormItem?.validate?.('change').catch(NOOP)\n    }\n  }\n)\n\nwatch(\n  () => nativeInputValue.value,\n  (val) => {\n    saveValue.value = val\n  },\n  { immediate: true }\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\nwatch(nativeInputValue, (newValue) => {\n  if (!_ref.value) {\n    return\n  }\n  const { trim, number } = props.modelModifiers\n  const elValue = _ref.value.value\n  const displayValue =\n    (number || props.type === 'number') && !/^0\\d/.test(elValue)\n      ? `${looseToNumber(elValue)}`\n      : elValue\n\n  if (displayValue === newValue) {\n    return\n  }\n\n  if (document.activeElement === _ref.value && _ref.value.type !== 'range') {\n    if (trim && displayValue.trim() === newValue) {\n      return\n    }\n  }\n\n  setNativeInputValue()\n})\n\n// when change between <input> and <textarea>,\n// update DOM dependent value and styles\n// https://github.com/ElemeFE/element/issues/14857\nwatch(\n  () => props.type,\n  async () => {\n    await nextTick()\n    setNativeInputValue()\n    resizeTextarea()\n  }\n)\n\nonMounted(() => {\n  if (!props.formatter && props.parser) {\n    debugWarn(\n      COMPONENT_NAME,\n      'If you set the parser, you also need to set the formatter.'\n    )\n  }\n  setNativeInputValue()\n  nextTick(resizeTextarea)\n})\n\nonBeforeUnmount(() => {\n  rAFId && cAF(rAFId)\n})\n\ndefineExpose({\n  /** @description HTML input element */\n  input,\n  /** @description HTML textarea element */\n  textarea,\n  /** @description HTML element, input or textarea */\n  ref: _ref,\n  /** @description style of textarea. */\n  textareaStyle,\n\n  /** @description from props (used on unit test) */\n  autosize: toRef(props, 'autosize'),\n\n  /** @description is input composing */\n  isComposing,\n\n  /** @description whether the password is visible */\n  passwordVisible,\n\n  /** @description HTML input element native method */\n  focus,\n  /** @description HTML input element native method */\n  blur,\n  /** @description HTML input element native method */\n  select,\n  /** @description clear input value */\n  clear,\n  /** @description resize textarea. */\n  resizeTextarea,\n})\n</script>\n"],"mappings":""}

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

@@ -106,8 +106,8 @@ interface InputNumberProps {
  * @deprecated Removed after 3.0.0, Use `InputNumberProps` instead.
  */
 declare const inputNumberProps: {
-  readonly inputmode: EpPropFinalized<(new (...args: any[]) => "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal") | (() => "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined) | (((new (...args: any[]) => "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal") | (() => "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined)) | null)[], unknown, unknown, undefined, boolean>;
-  readonly align: EpPropFinalized<(new (...args: any[]) => "left" | "right" | "center") | (() => "left" | "right" | "center") | (((new (...args: any[]) => "left" | "right" | "center") | (() => "left" | "right" | "center")) | null)[], unknown, unknown, "center", boolean>;
+  readonly inputmode: EpPropFinalized<(new (...args: any[]) => "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal") | (() => "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined) | (((new (...args: any[]) => "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal") | (() => "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined)) | null)[], unknown, unknown, undefined, boolean>;
+  readonly align: EpPropFinalized<(new (...args: any[]) => "center" | "left" | "right") | (() => "center" | "left" | "right") | (((new (...args: any[]) => "center" | "left" | "right") | (() => "center" | "left" | "right")) | null)[], unknown, unknown, "center", boolean>;
   readonly disabledScientific: BooleanConstructor;
   readonly formatter: {
     readonly type: _$vue.PropType<Function>;
@@ -137,14 +137,14 @@ declare const inputNumberProps: {
   readonly readonly: BooleanConstructor;
   readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
   readonly size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
   readonly controls: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly controlsPosition: EpPropFinalized<StringConstructor, "" | "right", unknown, "", boolean>;
-  readonly valueOnClear: EpPropFinalized<(new (...args: any[]) => number | "min" | "max") | (() => number | "min" | "max" | null) | (((new (...args: any[]) => number | "min" | "max") | (() => number | "min" | "max" | null)) | null)[], unknown, unknown, null, boolean>;
+  readonly valueOnClear: EpPropFinalized<(new (...args: any[]) => number | "max" | "min") | (() => number | "max" | "min" | null) | (((new (...args: any[]) => number | "max" | "min") | (() => number | "max" | "min" | null)) | null)[], unknown, unknown, null, boolean>;
   readonly name: StringConstructor;
   readonly placeholder: StringConstructor;
   readonly precision: {

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

@@ -16,27 +16,27 @@ declare const __VLS_base: _$vue.DefineComponent<InputNumberProps, {
   /** @description get focus the input component */focus: () => void; /** @description remove focus the input component */
   blur: () => void;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  change: (cur: number | undefined, prev: number | undefined) => void;
-  "update:modelValue": (val: number | undefined) => void;
-  input: (val: number | null | undefined) => void;
   blur: (e: FocusEvent) => void;
   focus: (e: FocusEvent) => void;
+  "update:modelValue": (val: number | undefined) => void;
+  change: (cur: number | undefined, prev: number | undefined) => void;
+  input: (val: number | null | undefined) => void;
 }, string, _$vue.PublicProps, Readonly<InputNumberProps> & Readonly<{
-  onChange?: ((cur: number | undefined, prev: number | undefined) => any) | undefined;
-  "onUpdate:modelValue"?: ((val: number | undefined) => any) | undefined;
   onInput?: ((val: number | null | undefined) => any) | undefined;
   onBlur?: ((e: FocusEvent) => any) | undefined;
+  onChange?: ((cur: number | undefined, prev: number | undefined) => any) | undefined;
   onFocus?: ((e: FocusEvent) => any) | undefined;
+  "onUpdate:modelValue"?: ((val: number | undefined) => any) | undefined;
 }>, {
   disabled: boolean;
-  valueOnClear: "min" | "max" | number | null;
   id: string;
+  valueOnClear: "min" | "max" | number | null;
+  tabindex: string | number;
+  readonly: boolean;
   validateEvent: boolean;
-  min: number;
+  inputmode: "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal";
   max: number;
-  readonly: boolean;
-  tabindex: string | number;
-  inputmode: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal";
+  min: number;
   align: "left" | "right" | "center";
   step: number;
   stepStrictly: boolean;

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

@@ -22,22 +22,22 @@ declare const __VLS_base: _$vue.DefineComponent<InputOtpProps, {
    */
   blur: () => void;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  change: (value: string) => void;
-  "update:modelValue": (value: string) => void;
-  finish: (value: string) => void;
   blur: (eve: FocusEvent) => void;
   focus: (eve: FocusEvent) => void;
+  finish: (value: string) => void;
+  "update:modelValue": (value: string) => void;
+  change: (value: string) => void;
 }, string, _$vue.PublicProps, Readonly<InputOtpProps> & Readonly<{
-  onChange?: ((value: string) => any) | undefined;
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onFinish?: ((value: string) => any) | undefined;
   onBlur?: ((eve: FocusEvent) => any) | undefined;
+  onChange?: ((value: string) => any) | undefined;
   onFocus?: ((eve: FocusEvent) => any) | undefined;
+  onFinish?: ((value: string) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
+  disabled: boolean;
   length: number;
   type: "outlined" | "filled" | "underlined";
   validator: (char: string, index: number) => boolean;
-  disabled: boolean;
   validateEvent: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/es/components/input-tag/src/composables/use-input-tag.d.ts

@@ -21,7 +21,7 @@ declare function useInputTag({
   isFocused: _$vue.Ref<boolean, boolean>;
   isComposing: _$vue.Ref<boolean, boolean>;
   inputValue: _$vue.Ref<string | undefined, string | undefined>;
-  size: _$vue.ComputedRef<"" | "default" | "small" | "large">;
+  size: _$vue.ComputedRef<"" | "default" | "large" | "small">;
   tagSize: _$vue.ComputedRef<"default" | "small">;
   placeholder: _$vue.ComputedRef<string | undefined>;
   closable: _$vue.ComputedRef<boolean>;

package/es/components/input-tag/src/input-tag.d.ts

@@ -132,13 +132,13 @@ declare const inputTagProps: {
     readonly validator: ((val: unknown) => boolean) | undefined;
     readonly __epPropKey: true;
   };
-  readonly tagEffect: EpPropFinalized<StringConstructor, "plain" | "dark" | "light", unknown, "light", boolean>;
+  readonly tagEffect: EpPropFinalized<StringConstructor, "dark" | "light" | "plain", unknown, "light", boolean>;
   readonly effect: EpPropFinalized<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown, "light", boolean>;
   readonly trigger: EpPropFinalized<(new (...args: any[]) => "Enter" | "Space") | (() => "Enter" | "Space") | (((new (...args: any[]) => "Enter" | "Space") | (() => "Enter" | "Space")) | null)[], unknown, unknown, string, boolean>;
   readonly draggable: BooleanConstructor;
   readonly delimiter: EpPropFinalized<readonly [StringConstructor, RegExpConstructor], unknown, unknown, "", boolean>;
   readonly size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

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

@@ -24,37 +24,37 @@ declare const __VLS_base: _$vue.DefineComponent<InputTagProps, {
   focus: () => void;
   blur: () => void;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  change: (value?: string[] | undefined) => void;
   clear: () => void;
-  "update:modelValue": (value?: string[] | undefined) => void;
-  input: (value: string) => void;
   blur: (evt: FocusEvent) => void;
   focus: (evt: FocusEvent) => void;
+  "update:modelValue": (value?: string[] | undefined) => void;
+  change: (value?: string[] | undefined) => void;
+  input: (value: string) => void;
   "add-tag": (value: string | string[]) => void;
   "remove-tag": (value: string, index: number) => void;
   "drag-tag": (oldIndex: number, newIndex: number, value: string) => void;
 }, string, _$vue.PublicProps, Readonly<InputTagProps> & Readonly<{
-  onChange?: ((value?: string[] | undefined) => any) | undefined;
   onClear?: (() => any) | undefined;
-  "onUpdate:modelValue"?: ((value?: string[] | undefined) => any) | undefined;
   onInput?: ((value: string) => any) | undefined;
   onBlur?: ((evt: FocusEvent) => any) | undefined;
+  onChange?: ((value?: string[] | undefined) => any) | undefined;
   onFocus?: ((evt: FocusEvent) => any) | undefined;
+  "onUpdate:modelValue"?: ((value?: string[] | undefined) => any) | undefined;
   "onAdd-tag"?: ((value: string | string[]) => any) | undefined;
   "onRemove-tag"?: ((value: string, index: number) => any) | undefined;
   "onDrag-tag"?: ((oldIndex: number, newIndex: number, value: string) => any) | undefined;
 }>, {
   disabled: boolean;
+  id: string;
+  tabindex: string | number;
+  effect: PopperEffect;
   trigger: "Enter" | "Space";
+  autocomplete: string;
   clearIcon: IconPropType;
+  validateEvent: boolean;
   maxCollapseTags: number;
-  effect: PopperEffect;
-  id: string;
   tagType: "primary" | "success" | "warning" | "info" | "danger";
-  tagEffect: "plain" | "dark" | "light";
-  validateEvent: boolean;
-  autocomplete: string;
-  tabindex: string | number;
+  tagEffect: "dark" | "light" | "plain";
   saveOnBlur: boolean;
   delimiter: string | RegExp;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;

package/es/components/link/src/link.d.ts

@@ -36,7 +36,7 @@ interface LinkProps {
  */
 declare const linkProps: {
   readonly type: EpPropFinalized<StringConstructor, "default" | "primary" | "success" | "warning" | "info" | "danger", unknown, undefined, boolean>;
-  readonly underline: EpPropFinalized<readonly [BooleanConstructor, StringConstructor], boolean | "always" | "hover" | "never", unknown, undefined, boolean>;
+  readonly underline: EpPropFinalized<readonly [BooleanConstructor, StringConstructor], boolean | "always" | "never" | "hover", unknown, undefined, boolean>;
   readonly disabled: BooleanConstructor;
   readonly href: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
   readonly target: EpPropFinalized<(new (...args: any[]) => string) | (() => string) | (((new (...args: any[]) => string) | (() => string)) | null)[], unknown, unknown, "_self", boolean>;

package/es/components/link/src/link.vue.d.ts

@@ -13,9 +13,9 @@ declare const __VLS_base: _$vue.DefineComponent<LinkProps, {}, {}, {}, {}, _$vue
 }, string, _$vue.PublicProps, Readonly<LinkProps> & Readonly<{
   onClick?: ((evt: MouseEvent) => any) | undefined;
 }>, {
-  target: "_blank" | "_parent" | "_self" | "_top" | (string & NonNullable<unknown>);
   type: "primary" | "success" | "warning" | "info" | "danger" | "default";
   underline: boolean | "always" | "never" | "hover";
+  target: "_blank" | "_parent" | "_self" | "_top" | (string & NonNullable<unknown>);
   href: string;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/es/components/loading/src/loading.mjs

@@ -61,7 +61,7 @@ function createLoadingComponent(options, appContext) {
 					class: "circular",
 					viewBox: data.svgViewBox ? data.svgViewBox : "0 0 50 50",
 					...svg ? { innerHTML: svg } : {}
-				}, [h("circle", {
+				}, svg ? void 0 : [h("circle", {
 					class: "path",
 					cx: "25",
 					cy: "25",

package/es/components/loading/src/loading.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"loading.mjs","names":[],"sources":["../../../../../../packages/components/loading/src/loading.ts"],"sourcesContent":["import {\n  Transition,\n  createApp,\n  createVNode,\n  defineComponent,\n  h,\n  reactive,\n  ref,\n  toRefs,\n  vShow,\n  withCtx,\n  withDirectives,\n} from 'vue'\nimport { removeClass } from '@element-plus/utils'\nimport { useGlobalComponentSettings } from '@element-plus/components/config-provider'\n\nimport type { AppContext, VNode } from 'vue'\nimport type { UseNamespaceReturn } from '@element-plus/hooks'\nimport type { LoadingOptionsResolved } from './types'\n\nexport function createLoadingComponent(\n  options: LoadingOptionsResolved,\n  appContext: AppContext | null\n) {\n  let afterLeaveTimer: ReturnType<typeof setTimeout>\n  // IMPORTANT NOTE: this is only a hacking way to expose the injections on an\n  // instance, DO NOT FOLLOW this pattern in your own code.\n  const afterLeaveFlag = ref(false)\n  const data = reactive({\n    ...options,\n    originalPosition: '',\n    originalOverflow: '',\n    visible: false,\n  })\n\n  function setText(text: string | VNode | VNode[]) {\n    data.text = text\n  }\n\n  function destroySelf() {\n    const target = data.parent\n    const ns = (vm as any).ns as UseNamespaceReturn\n    if (!target.vLoadingAddClassList) {\n      let loadingNumber: number | string | null =\n        target.getAttribute('loading-number')\n      loadingNumber = Number.parseInt(loadingNumber as any) - 1\n      if (!loadingNumber) {\n        removeClass(target, ns.bm('parent', 'relative'))\n        target.removeAttribute('loading-number')\n      } else {\n        target.setAttribute('loading-number', loadingNumber.toString())\n      }\n      removeClass(target, ns.bm('parent', 'hidden'))\n    }\n    removeElLoadingChild()\n    loadingInstance.unmount()\n  }\n  function removeElLoadingChild(): void {\n    vm.$el?.parentNode?.removeChild(vm.$el)\n  }\n  function close() {\n    if (options.beforeClose && !options.beforeClose()) return\n\n    afterLeaveFlag.value = true\n    clearTimeout(afterLeaveTimer)\n\n    afterLeaveTimer = setTimeout(handleAfterLeave, 400)\n    data.visible = false\n\n    options.closed?.()\n  }\n\n  function handleAfterLeave() {\n    if (!afterLeaveFlag.value) return\n    const target = data.parent\n    afterLeaveFlag.value = false\n    target.vLoadingAddClassList = undefined\n    destroySelf()\n  }\n\n  const elLoadingComponent = defineComponent({\n    name: 'ElLoading',\n    setup(_, { expose }) {\n      const { ns, zIndex } = useGlobalComponentSettings('loading')\n\n      expose({\n        ns,\n        zIndex,\n      })\n\n      return () => {\n        const svg = data.spinner || data.svg\n        const spinner = h(\n          'svg',\n          {\n            class: 'circular',\n            viewBox: data.svgViewBox ? data.svgViewBox : '0 0 50 50',\n            ...(svg ? { innerHTML: svg } : {}),\n          },\n          [\n            h('circle', {\n              class: 'path',\n              cx: '25',\n              cy: '25',\n              r: '20',\n              fill: 'none',\n            }),\n          ]\n        )\n\n        const spinnerText = data.text\n          ? h('p', { class: ns.b('text') }, [data.text])\n          : undefined\n\n        return h(\n          Transition,\n          {\n            name: ns.b('fade'),\n            onAfterLeave: handleAfterLeave,\n          },\n          {\n            default: withCtx(() => [\n              withDirectives(\n                createVNode(\n                  'div',\n                  {\n                    style: {\n                      backgroundColor: data.background || '',\n                    },\n                    class: [\n                      ns.b('mask'),\n                      data.customClass,\n                      ns.is('fullscreen', data.fullscreen),\n                    ],\n                  },\n                  [\n                    h(\n                      'div',\n                      {\n                        class: ns.b('spinner'),\n                      },\n                      [spinner, spinnerText]\n                    ),\n                  ]\n                ),\n                [[vShow, data.visible]]\n              ),\n            ]),\n          }\n        )\n      }\n    },\n  })\n\n  const loadingInstance = createApp(elLoadingComponent)\n  Object.assign(loadingInstance._context, appContext ?? {})\n  const vm = loadingInstance.mount(document.createElement('div'))\n\n  return {\n    ...toRefs(data),\n    setText,\n    removeElLoadingChild,\n    close,\n    handleAfterLeave,\n    vm,\n    get $el(): HTMLElement {\n      return vm.$el\n    },\n  }\n}\n\nexport type LoadingInstance = ReturnType<typeof createLoadingComponent>\n"],"mappings":";;;;AAoBA,SAAgB,uBACd,SACA,YACA;CACA,IAAI;CAGJ,MAAM,iBAAiB,IAAI,MAAM;CACjC,MAAM,OAAO,SAAS;EACpB,GAAG;EACH,kBAAkB;EAClB,kBAAkB;EAClB,SAAS;EACV,CAAC;CAEF,SAAS,QAAQ,MAAgC;EAC/C,KAAK,OAAO;;CAGd,SAAS,cAAc;EACrB,MAAM,SAAS,KAAK;EACpB,MAAM,KAAM,GAAW;EACvB,IAAI,CAAC,OAAO,sBAAsB;GAChC,IAAI,gBACF,OAAO,aAAa,iBAAiB;GACvC,gBAAgB,OAAO,SAAS,cAAqB,GAAG;GACxD,IAAI,CAAC,eAAe;IAClB,YAAY,QAAQ,GAAG,GAAG,UAAU,WAAW,CAAC;IAChD,OAAO,gBAAgB,iBAAiB;UAExC,OAAO,aAAa,kBAAkB,cAAc,UAAU,CAAC;GAEjE,YAAY,QAAQ,GAAG,GAAG,UAAU,SAAS,CAAC;;EAEhD,sBAAsB;EACtB,gBAAgB,SAAS;;CAE3B,SAAS,uBAA6B;EACpC,GAAG,KAAK,YAAY,YAAY,GAAG,IAAI;;CAEzC,SAAS,QAAQ;EACf,IAAI,QAAQ,eAAe,CAAC,QAAQ,aAAa,EAAE;EAEnD,eAAe,QAAQ;EACvB,aAAa,gBAAgB;EAE7B,kBAAkB,WAAW,kBAAkB,IAAI;EACnD,KAAK,UAAU;EAEf,QAAQ,UAAU;;CAGpB,SAAS,mBAAmB;EAC1B,IAAI,CAAC,eAAe,OAAO;EAC3B,MAAM,SAAS,KAAK;EACpB,eAAe,QAAQ;EACvB,OAAO,uBAAuB,KAAA;EAC9B,aAAa;;CA6Ef,MAAM,kBAAkB,UA1EG,gBAAgB;EACzC,MAAM;EACN,MAAM,GAAG,EAAE,UAAU;GACnB,MAAM,EAAE,IAAI,WAAW,2BAA2B,UAAU;GAE5D,OAAO;IACL;IACA;IACD,CAAC;GAEF,aAAa;IACX,MAAM,MAAM,KAAK,WAAW,KAAK;IACjC,MAAM,UAAU,EACd,OACA;KACE,OAAO;KACP,SAAS,KAAK,aAAa,KAAK,aAAa;KAC7C,GAAI,MAAM,EAAE,WAAW,KAAK,GAAG,EAAE;KAClC,EACD,CACE,EAAE,UAAU;KACV,OAAO;KACP,IAAI;KACJ,IAAI;KACJ,GAAG;KACH,MAAM;KACP,CAAC,CACH,CACF;IAED,MAAM,cAAc,KAAK,OACrB,EAAE,KAAK,EAAE,OAAO,GAAG,EAAE,OAAO,EAAE,EAAE,CAAC,KAAK,KAAK,CAAC,GAC5C,KAAA;IAEJ,OAAO,EACL,YACA;KACE,MAAM,GAAG,EAAE,OAAO;KAClB,cAAc;KACf,EACD,EACE,SAAS,cAAc,CACrB,eACE,YACE,OACA;KACE,OAAO,EACL,iBAAiB,KAAK,cAAc,IACrC;KACD,OAAO;MACL,GAAG,EAAE,OAAO;MACZ,KAAK;MACL,GAAG,GAAG,cAAc,KAAK,WAAW;MACrC;KACF,EACD,CACE,EACE,OACA,EACE,OAAO,GAAG,EAAE,UAAU,EACvB,EACD,CAAC,SAAS,YAAY,CACvB,CACF,CACF,EACD,CAAC,CAAC,OAAO,KAAK,QAAQ,CAAC,CACxB,CACF,CAAC,EACH,CACF;;;EAGN,CAEmD,CAAC;CACrD,OAAO,OAAO,gBAAgB,UAAU,cAAc,EAAE,CAAC;CACzD,MAAM,KAAK,gBAAgB,MAAM,SAAS,cAAc,MAAM,CAAC;CAE/D,OAAO;EACL,GAAG,OAAO,KAAK;EACf;EACA;EACA;EACA;EACA;EACA,IAAI,MAAmB;GACrB,OAAO,GAAG;;EAEb"}
+{"version":3,"file":"loading.mjs","names":[],"sources":["../../../../../../packages/components/loading/src/loading.ts"],"sourcesContent":["import {\n  Transition,\n  createApp,\n  createVNode,\n  defineComponent,\n  h,\n  reactive,\n  ref,\n  toRefs,\n  vShow,\n  withCtx,\n  withDirectives,\n} from 'vue'\nimport { removeClass } from '@element-plus/utils'\nimport { useGlobalComponentSettings } from '@element-plus/components/config-provider'\n\nimport type { AppContext, VNode } from 'vue'\nimport type { UseNamespaceReturn } from '@element-plus/hooks'\nimport type { LoadingOptionsResolved } from './types'\n\nexport function createLoadingComponent(\n  options: LoadingOptionsResolved,\n  appContext: AppContext | null\n) {\n  let afterLeaveTimer: ReturnType<typeof setTimeout>\n  // IMPORTANT NOTE: this is only a hacking way to expose the injections on an\n  // instance, DO NOT FOLLOW this pattern in your own code.\n  const afterLeaveFlag = ref(false)\n  const data = reactive({\n    ...options,\n    originalPosition: '',\n    originalOverflow: '',\n    visible: false,\n  })\n\n  function setText(text: string | VNode | VNode[]) {\n    data.text = text\n  }\n\n  function destroySelf() {\n    const target = data.parent\n    const ns = (vm as any).ns as UseNamespaceReturn\n    if (!target.vLoadingAddClassList) {\n      let loadingNumber: number | string | null =\n        target.getAttribute('loading-number')\n      loadingNumber = Number.parseInt(loadingNumber as any) - 1\n      if (!loadingNumber) {\n        removeClass(target, ns.bm('parent', 'relative'))\n        target.removeAttribute('loading-number')\n      } else {\n        target.setAttribute('loading-number', loadingNumber.toString())\n      }\n      removeClass(target, ns.bm('parent', 'hidden'))\n    }\n    removeElLoadingChild()\n    loadingInstance.unmount()\n  }\n  function removeElLoadingChild(): void {\n    vm.$el?.parentNode?.removeChild(vm.$el)\n  }\n  function close() {\n    if (options.beforeClose && !options.beforeClose()) return\n\n    afterLeaveFlag.value = true\n    clearTimeout(afterLeaveTimer)\n\n    afterLeaveTimer = setTimeout(handleAfterLeave, 400)\n    data.visible = false\n\n    options.closed?.()\n  }\n\n  function handleAfterLeave() {\n    if (!afterLeaveFlag.value) return\n    const target = data.parent\n    afterLeaveFlag.value = false\n    target.vLoadingAddClassList = undefined\n    destroySelf()\n  }\n\n  const elLoadingComponent = defineComponent({\n    name: 'ElLoading',\n    setup(_, { expose }) {\n      const { ns, zIndex } = useGlobalComponentSettings('loading')\n\n      expose({\n        ns,\n        zIndex,\n      })\n\n      return () => {\n        const svg = data.spinner || data.svg\n        const spinner = h(\n          'svg',\n          {\n            class: 'circular',\n            viewBox: data.svgViewBox ? data.svgViewBox : '0 0 50 50',\n            ...(svg ? { innerHTML: svg } : {}),\n          },\n          svg\n            ? undefined\n            : [\n                h('circle', {\n                  class: 'path',\n                  cx: '25',\n                  cy: '25',\n                  r: '20',\n                  fill: 'none',\n                }),\n              ]\n        )\n\n        const spinnerText = data.text\n          ? h('p', { class: ns.b('text') }, [data.text])\n          : undefined\n\n        return h(\n          Transition,\n          {\n            name: ns.b('fade'),\n            onAfterLeave: handleAfterLeave,\n          },\n          {\n            default: withCtx(() => [\n              withDirectives(\n                createVNode(\n                  'div',\n                  {\n                    style: {\n                      backgroundColor: data.background || '',\n                    },\n                    class: [\n                      ns.b('mask'),\n                      data.customClass,\n                      ns.is('fullscreen', data.fullscreen),\n                    ],\n                  },\n                  [\n                    h(\n                      'div',\n                      {\n                        class: ns.b('spinner'),\n                      },\n                      [spinner, spinnerText]\n                    ),\n                  ]\n                ),\n                [[vShow, data.visible]]\n              ),\n            ]),\n          }\n        )\n      }\n    },\n  })\n\n  const loadingInstance = createApp(elLoadingComponent)\n  Object.assign(loadingInstance._context, appContext ?? {})\n  const vm = loadingInstance.mount(document.createElement('div'))\n\n  return {\n    ...toRefs(data),\n    setText,\n    removeElLoadingChild,\n    close,\n    handleAfterLeave,\n    vm,\n    get $el(): HTMLElement {\n      return vm.$el\n    },\n  }\n}\n\nexport type LoadingInstance = ReturnType<typeof createLoadingComponent>\n"],"mappings":";;;;AAoBA,SAAgB,uBACd,SACA,YACA;CACA,IAAI;CAGJ,MAAM,iBAAiB,IAAI,MAAM;CACjC,MAAM,OAAO,SAAS;EACpB,GAAG;EACH,kBAAkB;EAClB,kBAAkB;EAClB,SAAS;EACV,CAAC;CAEF,SAAS,QAAQ,MAAgC;EAC/C,KAAK,OAAO;;CAGd,SAAS,cAAc;EACrB,MAAM,SAAS,KAAK;EACpB,MAAM,KAAM,GAAW;EACvB,IAAI,CAAC,OAAO,sBAAsB;GAChC,IAAI,gBACF,OAAO,aAAa,iBAAiB;GACvC,gBAAgB,OAAO,SAAS,cAAqB,GAAG;GACxD,IAAI,CAAC,eAAe;IAClB,YAAY,QAAQ,GAAG,GAAG,UAAU,WAAW,CAAC;IAChD,OAAO,gBAAgB,iBAAiB;UAExC,OAAO,aAAa,kBAAkB,cAAc,UAAU,CAAC;GAEjE,YAAY,QAAQ,GAAG,GAAG,UAAU,SAAS,CAAC;;EAEhD,sBAAsB;EACtB,gBAAgB,SAAS;;CAE3B,SAAS,uBAA6B;EACpC,GAAG,KAAK,YAAY,YAAY,GAAG,IAAI;;CAEzC,SAAS,QAAQ;EACf,IAAI,QAAQ,eAAe,CAAC,QAAQ,aAAa,EAAE;EAEnD,eAAe,QAAQ;EACvB,aAAa,gBAAgB;EAE7B,kBAAkB,WAAW,kBAAkB,IAAI;EACnD,KAAK,UAAU;EAEf,QAAQ,UAAU;;CAGpB,SAAS,mBAAmB;EAC1B,IAAI,CAAC,eAAe,OAAO;EAC3B,MAAM,SAAS,KAAK;EACpB,eAAe,QAAQ;EACvB,OAAO,uBAAuB,KAAA;EAC9B,aAAa;;CA+Ef,MAAM,kBAAkB,UA5EG,gBAAgB;EACzC,MAAM;EACN,MAAM,GAAG,EAAE,UAAU;GACnB,MAAM,EAAE,IAAI,WAAW,2BAA2B,UAAU;GAE5D,OAAO;IACL;IACA;IACD,CAAC;GAEF,aAAa;IACX,MAAM,MAAM,KAAK,WAAW,KAAK;IACjC,MAAM,UAAU,EACd,OACA;KACE,OAAO;KACP,SAAS,KAAK,aAAa,KAAK,aAAa;KAC7C,GAAI,MAAM,EAAE,WAAW,KAAK,GAAG,EAAE;KAClC,EACD,MACI,KAAA,IACA,CACE,EAAE,UAAU;KACV,OAAO;KACP,IAAI;KACJ,IAAI;KACJ,GAAG;KACH,MAAM;KACP,CAAC,CACH,CACN;IAED,MAAM,cAAc,KAAK,OACrB,EAAE,KAAK,EAAE,OAAO,GAAG,EAAE,OAAO,EAAE,EAAE,CAAC,KAAK,KAAK,CAAC,GAC5C,KAAA;IAEJ,OAAO,EACL,YACA;KACE,MAAM,GAAG,EAAE,OAAO;KAClB,cAAc;KACf,EACD,EACE,SAAS,cAAc,CACrB,eACE,YACE,OACA;KACE,OAAO,EACL,iBAAiB,KAAK,cAAc,IACrC;KACD,OAAO;MACL,GAAG,EAAE,OAAO;MACZ,KAAK;MACL,GAAG,GAAG,cAAc,KAAK,WAAW;MACrC;KACF,EACD,CACE,EACE,OACA,EACE,OAAO,GAAG,EAAE,UAAU,EACvB,EACD,CAAC,SAAS,YAAY,CACvB,CACF,CACF,EACD,CAAC,CAAC,OAAO,KAAK,QAAQ,CAAC,CACxB,CACF,CAAC,EACH,CACF;;;EAGN,CAEmD,CAAC;CACrD,OAAO,OAAO,gBAAgB,UAAU,cAAc,EAAE,CAAC;CACzD,MAAM,KAAK,gBAAgB,MAAM,SAAS,cAAc,MAAM,CAAC;CAE/D,OAAO;EACL,GAAG,OAAO,KAAK;EACf;EACA;EACA;EACA;EACA;EACA,IAAI,MAAmB;GACrB,OAAO,GAAG;;EAEb"}

package/es/components/mention/src/mention.d.ts

@@ -81,7 +81,7 @@ declare const mentionProps: {
   prefix: EpPropFinalized<(new (...args: any[]) => string | string[]) | (() => string | string[]) | (((new (...args: any[]) => string | string[]) | (() => string | string[])) | null)[], unknown, unknown, string, boolean>;
   split: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
   filterOption: EpPropFinalized<(new (...args: any[]) => false | (<T extends MentionOption = MentionOption>(pattern: string, option: T & MentionOption) => boolean)) | (() => false | (<T extends MentionOption = MentionOption>(pattern: string, option: T & MentionOption) => boolean)) | (((new (...args: any[]) => false | (<T extends MentionOption = MentionOption>(pattern: string, option: T & MentionOption) => boolean)) | (() => false | (<T extends MentionOption = MentionOption>(pattern: string, option: T & MentionOption) => boolean))) | null)[], unknown, unknown, () => <T extends MentionOption = MentionOption>(pattern: string, option: T & MentionOption) => boolean, boolean>;
-  placement: EpPropFinalized<(new (...args: any[]) => "top" | "bottom") | (() => "top" | "bottom") | (((new (...args: any[]) => "top" | "bottom") | (() => "top" | "bottom")) | null)[], unknown, unknown, string, boolean>;
+  placement: EpPropFinalized<(new (...args: any[]) => "bottom" | "top") | (() => "bottom" | "top") | (((new (...args: any[]) => "bottom" | "top") | (() => "bottom" | "top")) | null)[], unknown, unknown, string, boolean>;
   showArrow: BooleanConstructor;
   offset: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
   whole: BooleanConstructor;
@@ -97,12 +97,12 @@ declare const mentionProps: {
   popperStyle: EpPropFinalized<(new (...args: any[]) => string | false | _$vue.CSSProperties | _$vue.StyleValue[]) | (() => _$vue.StyleValue) | (((new (...args: any[]) => string | false | _$vue.CSSProperties | _$vue.StyleValue[]) | (() => _$vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => Partial<Options>, boolean>;
   props: EpPropFinalized<(new (...args: any[]) => MentionOptionProps) | (() => MentionOptionProps) | (((new (...args: any[]) => MentionOptionProps) | (() => MentionOptionProps)) | null)[], unknown, unknown, () => Required<MentionOptionProps>, boolean>;
-  inputmode: EpPropFinalized<(new (...args: any[]) => "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal") | (() => "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined) | (((new (...args: any[]) => "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal") | (() => "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined)) | null)[], unknown, unknown, undefined, boolean>;
+  inputmode: EpPropFinalized<(new (...args: any[]) => "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal") | (() => "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined) | (((new (...args: any[]) => "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal") | (() => "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined)) | null)[], unknown, unknown, undefined, boolean>;
   name: StringConstructor;
   ariaLabel: StringConstructor;
   id: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
   size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -165,7 +165,7 @@ declare const mentionProps: {
   clearIcon: EpPropFinalized<(new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component) | (((new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component)) | null)[], unknown, unknown, _$vue.DefineComponent<{}, void, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>, boolean>;
   showPassword: BooleanConstructor;
   showWordLimit: BooleanConstructor;
-  wordLimitPosition: EpPropFinalized<StringConstructor, "outside" | "inside", unknown, "inside", boolean>;
+  wordLimitPosition: EpPropFinalized<StringConstructor, "inside" | "outside", unknown, "inside", boolean>;
   suffixIcon: {
     readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component) | (((new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component)) | null)[], unknown, unknown>>;
     readonly required: false;

package/es/components/mention/src/mention.vue.d.ts

@@ -7,12 +7,12 @@ import * as _$vue from "vue";
 //#region ../../packages/components/mention/src/mention.vue.d.ts
 declare const __VLS_export: <T extends MentionOption = MentionOption>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
   props: _$vue.PublicProps & __VLS_PrettifyLocal<MentionProps<T> & {
-    onSelect?: ((option: MentionOption, prefix: string) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     onInput?: ((value: string) => any) | undefined;
     onSearch?: ((pattern: string, prefix: string) => any) | undefined;
+    onSelect?: ((option: MentionOption, prefix: string) => any) | undefined;
     onBlur?: ((evt: FocusEvent) => any) | undefined;
     onFocus?: ((evt: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     "onWhole-remove"?: ((pattern: string, prefix: string) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
@@ -46,7 +46,7 @@ declare const __VLS_export: <T extends MentionOption = MentionOption>(__VLS_prop
       index: number;
     }) => any;
   };
-  emit: ((event: "select", option: MentionOption, prefix: string) => void) & ((event: "update:modelValue", value: string) => void) & ((event: "input", value: string) => void) & ((event: "search", pattern: string, prefix: string) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "whole-remove", pattern: string, prefix: string) => void);
+  emit: ((event: "input", value: string) => void) & ((event: "search", pattern: string, prefix: string) => void) & ((event: "select", option: MentionOption, prefix: string) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "update:modelValue", value: string) => void) & ((event: "whole-remove", pattern: string, prefix: string) => void);
 }>) => _$vue.VNode & {
   __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/es/components/menu/src/menu.d.ts

@@ -89,16 +89,16 @@ declare const _default: _$vue.DefineComponent<ExtractPropTypes<{
   readonly hideTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
   readonly persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
 }>> & Readonly<{
+  onOpen?: ((index: string, indexPath: string[]) => any) | undefined;
   onSelect?: ((index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void | NavigationFailure> | undefined) => any) | undefined;
   onClose?: ((index: string, indexPath: string[]) => any) | undefined;
-  onOpen?: ((index: string, indexPath: string[]) => any) | undefined;
 }>, {
+  readonly collapse: boolean;
+  readonly ellipsis: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly mode: EpPropMergeType<StringConstructor, "horizontal" | "vertical", unknown>;
   readonly popperClass: ClassValue;
   readonly popperStyle: StyleValue;
   readonly persistent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
-  readonly collapse: boolean;
-  readonly ellipsis: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly showTimeout: number;
   readonly hideTimeout: number;
   readonly defaultActive: string;

package/es/components/menu/src/sub-menu.d.ts

@@ -124,10 +124,10 @@ declare const _default: _$vue.DefineComponent<ExtractPropTypes<{
     __epPropKey: true;
   };
 }>> & Readonly<{}>, {
-  readonly teleported: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly disabled: boolean;
   readonly popperClass: ClassValue;
   readonly popperStyle: StyleValue;
+  readonly teleported: EpPropMergeType<BooleanConstructor, unknown, unknown>;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
 //#endregion
 export { SubMenuProps, SubMenuPropsPublic, _default as default, subMenuProps };

package/es/components/message/src/instance.d.ts

@@ -11,7 +11,7 @@ type MessageContext = {
   vm: ComponentInternalInstance;
   props: Mutable<MessageProps>;
 };
-declare const placementInstances: _$vue.ShallowReactive<Record<"top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", MessageContext[]>>;
+declare const placementInstances: _$vue.ShallowReactive<Record<"bottom" | "top" | "top-right" | "top-left" | "bottom-right" | "bottom-left", MessageContext[]>>;
 declare const getOrCreatePlacementInstances: (placement: MessagePlacement) => MessageContext[];
 declare const getInstance: (id: string, placement: MessagePlacement) => {
   current: MessageContext;

package/es/components/message/src/message.d.ts

@@ -133,7 +133,7 @@ declare const messageProps: {
   readonly type: EpPropFinalized<StringConstructor, "error" | "primary" | "success" | "warning" | "info", unknown, "info", boolean>;
   readonly plain: EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
   readonly offset: EpPropFinalized<NumberConstructor, unknown, unknown, 16, boolean>;
-  readonly placement: EpPropFinalized<StringConstructor, "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", unknown, undefined, boolean>;
+  readonly placement: EpPropFinalized<StringConstructor, "bottom" | "top" | "top-right" | "top-left" | "bottom-right" | "bottom-left", unknown, undefined, boolean>;
   readonly zIndex: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
   readonly grouping: EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
   readonly repeatNum: EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;

package/es/components/message/src/message.vue.d.ts

@@ -18,15 +18,15 @@ declare const __VLS_base: _$vue.DefineComponent<MessageProps, {
 }, string, _$vue.PublicProps, Readonly<MessageProps> & Readonly<{
   onDestroy?: (() => any) | undefined;
 }>, {
-  zIndex: number;
-  offset: number;
+  id: string;
   type: MessageType;
   icon: IconPropType;
+  onClose: () => void;
   plain: boolean;
   message: string | _$vue.VNode | (() => _$vue.VNode);
-  onClose: () => void;
+  zIndex: number;
+  offset: number;
   placement: MessagePlacement;
-  id: string;
   showClose: boolean;
   duration: number;
   customClass: string | false | Record<string, any> | ClassValue[] | null;