element-plus 2.0.2 → 2.0.5

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

@@ -1 +1 @@
-{"version":3,"file":"form.mjs","sources":["../../../../../../packages/components/form/src/form.vue"],"sourcesContent":["<template>\n  <form :class=\"formKls\">\n    <slot></slot>\n  </form>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue'\nimport { elFormKey } from '@element-plus/tokens'\nimport { debugWarn } from '@element-plus/utils'\nimport { useSize } from '@element-plus/hooks'\nimport type { ValidateFieldsError } from 'async-validator'\n\nimport type { PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { FormRulesMap } from './form.type'\nimport type {\n  ElFormItemContext as FormItemCtx,\n  ValidateFieldCallback,\n} from '@element-plus/tokens'\n\nfunction useFormLabelWidth() {\n  const potentialLabelWidthArr = ref([])\n  const autoLabelWidth = computed(() => {\n    if (!potentialLabelWidthArr.value.length) return '0'\n    const max = Math.max(...potentialLabelWidthArr.value)\n    return max ? `${max}px` : ''\n  })\n\n  function getLabelWidthIndex(width: number) {\n    const index = potentialLabelWidthArr.value.indexOf(width)\n    if (index === -1) {\n      debugWarn('Form', `unexpected width ${width}`)\n    }\n    return index\n  }\n\n  function registerLabelWidth(val: number, oldVal: number) {\n    if (val && oldVal) {\n      const index = getLabelWidthIndex(oldVal)\n      potentialLabelWidthArr.value.splice(index, 1, val)\n    } else if (val) {\n      potentialLabelWidthArr.value.push(val)\n    }\n  }\n\n  function deregisterLabelWidth(val: number) {\n    const index = getLabelWidthIndex(val)\n    index > -1 && potentialLabelWidthArr.value.splice(index, 1)\n  }\n\n  return {\n    autoLabelWidth,\n    registerLabelWidth,\n    deregisterLabelWidth,\n  }\n}\n\nexport interface Callback {\n  (isValid?: boolean, invalidFields?: ValidateFieldsError): void\n}\n\nexport default defineComponent({\n  name: 'ElForm',\n  props: {\n    model: Object,\n    rules: Object as PropType<FormRulesMap>,\n    labelPosition: String,\n    labelWidth: {\n      type: [String, Number],\n      default: '',\n    },\n    labelSuffix: {\n      type: String,\n      default: '',\n    },\n    inline: Boolean,\n    inlineMessage: Boolean,\n    statusIcon: Boolean,\n    showMessage: {\n      type: Boolean,\n      default: true,\n    },\n    size: String as PropType<ComponentSize>,\n    disabled: Boolean,\n    validateOnRuleChange: {\n      type: Boolean,\n      default: true,\n    },\n    hideRequiredAsterisk: {\n      type: Boolean,\n      default: false,\n    },\n    scrollToError: Boolean,\n  },\n  emits: ['validate'],\n  setup(props, { emit }) {\n    const fields: FormItemCtx[] = []\n\n    watch(\n      () => props.rules,\n      () => {\n        fields.forEach((field) => {\n          field.evaluateValidationEnabled()\n        })\n\n        if (props.validateOnRuleChange) {\n          validate(() => ({}))\n        }\n      }\n    )\n\n    const formSize = useSize()\n    const prefix = 'el-form'\n    const formKls = computed(() => {\n      const { labelPosition, inline } = props\n      return [\n        prefix,\n        `${prefix}--${formSize.value}`,\n        labelPosition ? `${prefix}--label-${labelPosition}` : '',\n        inline ? `${prefix}--inline` : '',\n      ]\n    })\n\n    const addField = (field: FormItemCtx) => {\n      if (field) {\n        fields.push(field)\n      }\n    }\n\n    const removeField = (field: FormItemCtx) => {\n      if (field.prop) {\n        fields.splice(fields.indexOf(field), 1)\n      }\n    }\n\n    const resetFields = () => {\n      if (!props.model) {\n        debugWarn('Form', 'model is required for resetFields to work.')\n        return\n      }\n      fields.forEach((field) => {\n        field.resetField()\n      })\n    }\n\n    const clearValidate = (props: string | string[] = []) => {\n      const fds = props.length\n        ? typeof props === 'string'\n          ? fields.filter((field) => props === field.prop)\n          : fields.filter((field) => props.indexOf(field.prop) > -1)\n        : fields\n      fds.forEach((field) => {\n        field.clearValidate()\n      })\n    }\n\n    const validate = (callback?: Callback) => {\n      if (!props.model) {\n        debugWarn('Form', 'model is required for validate to work!')\n        return\n      }\n\n      let promise: Promise<boolean> | undefined\n      // if no callback, return promise\n      if (typeof callback !== 'function') {\n        promise = new Promise((resolve, reject) => {\n          callback = function (valid, invalidFields) {\n            if (valid) {\n              resolve(true)\n            } else {\n              reject(invalidFields)\n            }\n          }\n        })\n      }\n\n      if (fields.length === 0) {\n        callback(true)\n      }\n      let valid = true\n      let count = 0\n      let invalidFields = {}\n      let firstInvalidFields\n      for (const field of fields) {\n        field.validate('', (message, field) => {\n          if (message) {\n            valid = false\n            firstInvalidFields || (firstInvalidFields = field)\n          }\n          invalidFields = { ...invalidFields, ...field }\n          if (++count === fields.length) {\n            callback(valid, invalidFields)\n          }\n        })\n      }\n      if (!valid && props.scrollToError) {\n        scrollToField(Object.keys(firstInvalidFields)[0])\n      }\n      return promise\n    }\n\n    const validateField = (\n      props: string | string[],\n      cb: ValidateFieldCallback\n    ) => {\n      props = [].concat(props)\n      const fds = fields.filter((field) => props.indexOf(field.prop) !== -1)\n      if (!fields.length) {\n        debugWarn('Form', 'please pass correct props!')\n        return\n      }\n\n      fds.forEach((field) => {\n        field.validate('', cb)\n      })\n    }\n\n    const scrollToField = (prop: string) => {\n      fields.forEach((item) => {\n        if (item.prop === prop) {\n          item.$el.scrollIntoView?.()\n        }\n      })\n    }\n\n    const elForm = reactive({\n      ...toRefs(props),\n      resetFields,\n      clearValidate,\n      validateField,\n      emit,\n      addField,\n      removeField,\n      ...useFormLabelWidth(),\n    })\n\n    provide(elFormKey, elForm)\n\n    return {\n      formKls,\n      validate, // export\n      resetFields,\n      clearValidate,\n      validateField,\n      scrollToField,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"form.mjs","sources":["../../../../../../packages/components/form/src/form.vue"],"sourcesContent":["<template>\n  <form :class=\"formKls\">\n    <slot></slot>\n  </form>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue'\nimport { elFormKey } from '@element-plus/tokens'\nimport { debugWarn } from '@element-plus/utils'\nimport { useSize } from '@element-plus/hooks'\nimport type { ValidateFieldsError } from 'async-validator'\n\nimport type { PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { FormRulesMap } from './form.type'\nimport type {\n  ElFormItemContext as FormItemCtx,\n  ValidateFieldCallback,\n} from '@element-plus/tokens'\n\nfunction useFormLabelWidth() {\n  const potentialLabelWidthArr = ref([])\n  const autoLabelWidth = computed(() => {\n    if (!potentialLabelWidthArr.value.length) return '0'\n    const max = Math.max(...potentialLabelWidthArr.value)\n    return max ? `${max}px` : ''\n  })\n\n  function getLabelWidthIndex(width: number) {\n    const index = potentialLabelWidthArr.value.indexOf(width)\n    if (index === -1) {\n      debugWarn('Form', `unexpected width ${width}`)\n    }\n    return index\n  }\n\n  function registerLabelWidth(val: number, oldVal: number) {\n    if (val && oldVal) {\n      const index = getLabelWidthIndex(oldVal)\n      potentialLabelWidthArr.value.splice(index, 1, val)\n    } else if (val) {\n      potentialLabelWidthArr.value.push(val)\n    }\n  }\n\n  function deregisterLabelWidth(val: number) {\n    const index = getLabelWidthIndex(val)\n    index > -1 && potentialLabelWidthArr.value.splice(index, 1)\n  }\n\n  return {\n    autoLabelWidth,\n    registerLabelWidth,\n    deregisterLabelWidth,\n  }\n}\n\nexport interface Callback {\n  (isValid?: boolean, invalidFields?: ValidateFieldsError): void\n}\n\nexport default defineComponent({\n  name: 'ElForm',\n  props: {\n    model: Object,\n    rules: Object as PropType<FormRulesMap>,\n    labelPosition: String,\n    labelWidth: {\n      type: [String, Number],\n      default: '',\n    },\n    labelSuffix: {\n      type: String,\n      default: '',\n    },\n    inline: Boolean,\n    inlineMessage: Boolean,\n    statusIcon: Boolean,\n    showMessage: {\n      type: Boolean,\n      default: true,\n    },\n    size: String as PropType<ComponentSize>,\n    disabled: Boolean,\n    validateOnRuleChange: {\n      type: Boolean,\n      default: true,\n    },\n    hideRequiredAsterisk: {\n      type: Boolean,\n      default: false,\n    },\n    scrollToError: Boolean,\n  },\n  emits: ['validate'],\n  setup(props, { emit }) {\n    const fields: FormItemCtx[] = []\n\n    watch(\n      () => props.rules,\n      () => {\n        fields.forEach((field) => {\n          field.evaluateValidationEnabled()\n        })\n\n        if (props.validateOnRuleChange) {\n          validate(() => ({}))\n        }\n      }\n    )\n\n    const formSize = useSize()\n    const prefix = 'el-form'\n    const formKls = computed(() => {\n      const { labelPosition, inline } = props\n      return [\n        prefix,\n        `${prefix}--${formSize.value}`,\n        labelPosition ? `${prefix}--label-${labelPosition}` : '',\n        inline ? `${prefix}--inline` : '',\n      ]\n    })\n\n    const addField = (field: FormItemCtx) => {\n      if (field) {\n        fields.push(field)\n      }\n    }\n\n    const removeField = (field: FormItemCtx) => {\n      if (field.prop) {\n        fields.splice(fields.indexOf(field), 1)\n      }\n    }\n\n    const resetFields = () => {\n      if (!props.model) {\n        debugWarn('Form', 'model is required for resetFields to work.')\n        return\n      }\n      fields.forEach((field) => {\n        field.resetField()\n      })\n    }\n\n    const clearValidate = (props: string | string[] = []) => {\n      const fds = props.length\n        ? typeof props === 'string'\n          ? fields.filter((field) => props === field.prop)\n          : fields.filter((field) => props.indexOf(field.prop) > -1)\n        : fields\n      fds.forEach((field) => {\n        field.clearValidate()\n      })\n    }\n\n    const validate = (callback?: Callback) => {\n      if (!props.model) {\n        debugWarn('Form', 'model is required for validate to work!')\n        return\n      }\n\n      let promise: Promise<boolean> | undefined\n      // if no callback, return promise\n      if (typeof callback !== 'function') {\n        promise = new Promise((resolve, reject) => {\n          callback = function (valid, invalidFields) {\n            if (valid) {\n              resolve(true)\n            } else {\n              reject(invalidFields)\n            }\n          }\n        })\n      }\n\n      if (fields.length === 0) {\n        callback(true)\n      }\n      let valid = true\n      let count = 0\n      let invalidFields = {}\n      let firstInvalidFields\n      for (const field of fields) {\n        field.validate('', (message, field) => {\n          if (message) {\n            valid = false\n            firstInvalidFields || (firstInvalidFields = field)\n          }\n          invalidFields = { ...invalidFields, ...field }\n          if (++count === fields.length) {\n            callback(valid, invalidFields)\n          }\n        })\n      }\n      if (!valid && props.scrollToError) {\n        scrollToField(Object.keys(firstInvalidFields)[0])\n      }\n      return promise\n    }\n\n    const validateField = (\n      props: string | string[],\n      cb: ValidateFieldCallback\n    ) => {\n      props = [].concat(props)\n      const fds = fields.filter((field) => props.indexOf(field.prop) !== -1)\n      if (!fields.length) {\n        debugWarn('Form', 'please pass correct props!')\n        return\n      }\n\n      fds.forEach((field) => {\n        field.validate('', cb)\n      })\n    }\n\n    const scrollToField = (prop: string) => {\n      fields.forEach((item) => {\n        if (item.prop === prop) {\n          item.$el.scrollIntoView?.()\n        }\n      })\n    }\n\n    const elForm = reactive({\n      ...toRefs(props),\n      resetFields,\n      clearValidate,\n      validateField,\n      emit,\n      addField,\n      removeField,\n      ...useFormLabelWidth(),\n    })\n\n    provide(elFormKey, elForm)\n\n    return {\n      formKls,\n      validate, // export\n      resetFields,\n      clearValidate,\n      validateField,\n      scrollToField,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/components/form/src/form.type.d.ts

@@ -1,5 +1,5 @@
 import type { RuleItem } from 'async-validator';
 export interface FormItemRule extends RuleItem {
-    trigger?: string;
+    trigger?: string | string[];
 }
 export declare type FormRulesMap<T extends string = string> = Partial<Record<T, FormItemRule | FormItemRule[]>>;

package/es/components/image/src/image2.mjs

@@ -11,9 +11,9 @@ import { useLocale } from '../../../hooks/use-locale/index.mjs';
 import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 import { useAttrs } from '../../../hooks/use-attrs/index.mjs';
 import { isInContainer } from '../../../utils/dom/position.mjs';
+import { isElement } from '../../../utils/types.mjs';
 import { getScrollContainer } from '../../../utils/dom/scroll.mjs';
 
-const isHtmlElement = (e) => e && e.nodeType === Node.ELEMENT_NODE;
 let prevOverflow = "";
 const _sfc_main = defineComponent({
   name: "ElImage",
@@ -116,7 +116,7 @@ const _sfc_main = defineComponent({
         return;
       await nextTick();
       const { scrollContainer } = props;
-      if (isHtmlElement(scrollContainer)) {
+      if (isElement(scrollContainer)) {
         _scrollContainer.value = scrollContainer;
       } else if (isString(scrollContainer) && scrollContainer !== "") {
         _scrollContainer.value = (_a = document.querySelector(scrollContainer)) != null ? _a : void 0;

package/es/components/image/src/image2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"image2.mjs","sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n  <div ref=\"container\" :class=\"[ns.b(), $attrs.class]\" :style=\"containerStyle\">\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <div :class=\"ns.e('placeholder')\"></div>\n    </slot>\n    <slot v-else-if=\"hasLoadError\" name=\"error\">\n      <div :class=\"ns.e('error')\">{{ t('el.image.error') }}</div>\n    </slot>\n    <img\n      v-else\n      v-bind=\"attrs\"\n      :src=\"src\"\n      :style=\"imageStyle\"\n      :class=\"[ns.e('inner'), preview ? ns.e('preview') : '']\"\n      @click=\"clickHandler\"\n    />\n    <template v-if=\"preview\">\n      <image-viewer\n        v-if=\"showViewer\"\n        :z-index=\"zIndex\"\n        :initial-index=\"imageIndex\"\n        :url-list=\"previewSrcList\"\n        :hide-on-click-modal=\"hideOnClickModal\"\n        :teleported=\"teleported\"\n        @close=\"closeViewer\"\n        @switch=\"switchViewer\"\n      >\n        <div v-if=\"$slots.viewer\">\n          <slot name=\"viewer\" />\n        </div>\n      </image-viewer>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport {\n  useEventListener,\n  useThrottleFn,\n  isClient,\n  isBoolean,\n} from '@vueuse/core'\nimport {\n  useAttrs,\n  useLocale,\n  useNamespace,\n  useDeprecated,\n} from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport { getScrollContainer, isInContainer } from '@element-plus/utils'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst isHtmlElement = (e: any): e is Element =>\n  e && e.nodeType === Node.ELEMENT_NODE\n\nlet prevOverflow = ''\n\nexport default defineComponent({\n  name: 'ElImage',\n  components: {\n    ImageViewer,\n  },\n  inheritAttrs: false,\n\n  props: imageProps,\n  emits: imageEmits,\n\n  setup(props, { emit, attrs: rawAttrs }) {\n    useDeprecated(\n      {\n        scope: 'el-image',\n        from: 'append-to-body',\n        replacement: 'preview-teleported',\n        version: '2.2.0',\n        ref: 'https://element-plus.org/en-US/component/image.html#image-attributess',\n      },\n      computed(() => isBoolean(props.appendToBody))\n    )\n\n    const { t } = useLocale()\n    const ns = useNamespace('image')\n\n    const attrs = useAttrs()\n    const hasLoadError = ref(false)\n    const loading = ref(true)\n    const imgWidth = ref(0)\n    const imgHeight = ref(0)\n    const showViewer = ref(false)\n    const container = ref<HTMLElement>()\n\n    const _scrollContainer = ref<HTMLElement | Window>()\n    let stopScrollListener: () => void\n    let stopWheelListener: () => void\n\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n\n    const imageStyle = computed<CSSProperties>(() => {\n      const { fit } = props\n      if (isClient && fit) {\n        return { objectFit: fit }\n      }\n      return {}\n    })\n\n    const preview = computed(() => {\n      const { previewSrcList } = props\n      return Array.isArray(previewSrcList) && previewSrcList.length > 0\n    })\n\n    const teleported = computed(() => {\n      return props.appendToBody || props.previewTeleported\n    })\n\n    const imageIndex = computed(() => {\n      const { previewSrcList, initialIndex } = props\n      let previewIndex = initialIndex\n      if (initialIndex > previewSrcList.length - 1) {\n        previewIndex = 0\n      }\n      return previewIndex\n    })\n\n    const loadImage = () => {\n      if (!isClient) return\n\n      // reset status\n      loading.value = true\n      hasLoadError.value = false\n\n      const img = new Image()\n      const currentImageSrc = props.src\n\n      // load & error callbacks are only responsible for currentImageSrc\n      img.addEventListener('load', (e) => {\n        if (currentImageSrc !== props.src) {\n          return\n        }\n        handleLoad(e, img)\n      })\n      img.addEventListener('error', (e) => {\n        if (currentImageSrc !== props.src) {\n          return\n        }\n        handleError(e)\n      })\n\n      // bind html attrs\n      // so it can behave consistently\n      Object.entries(attrs.value).forEach(([key, value]) => {\n        // avoid onload to be overwritten\n        if (key.toLowerCase() === 'onload') return\n        img.setAttribute(key, value as string)\n      })\n      img.src = currentImageSrc\n    }\n\n    function handleLoad(e: Event, img: HTMLImageElement) {\n      imgWidth.value = img.width\n      imgHeight.value = img.height\n      loading.value = false\n      hasLoadError.value = false\n    }\n\n    function handleError(event: Event) {\n      loading.value = false\n      hasLoadError.value = true\n      emit('error', event)\n    }\n\n    function handleLazyLoad() {\n      if (isInContainer(container.value, _scrollContainer.value)) {\n        loadImage()\n        removeLazyLoadListener()\n      }\n    }\n\n    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)\n\n    async function addLazyLoadListener() {\n      if (!isClient) return\n\n      await nextTick()\n\n      const { scrollContainer } = props\n      if (isHtmlElement(scrollContainer)) {\n        _scrollContainer.value = scrollContainer\n      } else if (isString(scrollContainer) && scrollContainer !== '') {\n        _scrollContainer.value =\n          document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n      } else if (container.value) {\n        _scrollContainer.value = getScrollContainer(container.value)\n      }\n\n      if (_scrollContainer.value) {\n        stopScrollListener = useEventListener(\n          _scrollContainer,\n          'scroll',\n          lazyLoadHandler\n        )\n        setTimeout(() => handleLazyLoad(), 100)\n      }\n    }\n\n    function removeLazyLoadListener() {\n      if (!isClient || !_scrollContainer.value || !lazyLoadHandler) return\n\n      stopScrollListener()\n      _scrollContainer.value = undefined\n    }\n\n    function wheelHandler(e: WheelEvent) {\n      if (!e.ctrlKey) return\n\n      if (e.deltaY < 0) {\n        e.preventDefault()\n        return false\n      } else if (e.deltaY > 0) {\n        e.preventDefault()\n        return false\n      }\n    }\n\n    function clickHandler() {\n      // don't show viewer when preview is false\n      if (!preview.value) return\n\n      stopWheelListener = useEventListener('wheel', wheelHandler, {\n        passive: false,\n      })\n\n      // prevent body scroll\n      prevOverflow = document.body.style.overflow\n      document.body.style.overflow = 'hidden'\n      showViewer.value = true\n    }\n\n    function closeViewer() {\n      stopWheelListener?.()\n      document.body.style.overflow = prevOverflow\n      showViewer.value = false\n      emit('close')\n    }\n\n    function switchViewer(val: number) {\n      emit('switch', val)\n    }\n\n    watch(\n      () => props.src,\n      () => {\n        if (props.lazy) {\n          // reset status\n          loading.value = true\n          hasLoadError.value = false\n          removeLazyLoadListener()\n          addLazyLoadListener()\n        } else {\n          loadImage()\n        }\n      }\n    )\n\n    onMounted(() => {\n      if (props.lazy) {\n        addLazyLoadListener()\n      } else {\n        loadImage()\n      }\n    })\n\n    return {\n      attrs,\n      loading,\n      hasLoadError,\n      showViewer,\n      containerStyle,\n      imageStyle,\n      preview,\n      imageIndex,\n      container,\n      ns,\n      teleported,\n\n      clickHandler,\n      closeViewer,\n      switchViewer,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["ImageViewer","_openBlock"],"mappings":"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"}
+{"version":3,"file":"image2.mjs","sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n  <div ref=\"container\" :class=\"[ns.b(), $attrs.class]\" :style=\"containerStyle\">\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <div :class=\"ns.e('placeholder')\"></div>\n    </slot>\n    <slot v-else-if=\"hasLoadError\" name=\"error\">\n      <div :class=\"ns.e('error')\">{{ t('el.image.error') }}</div>\n    </slot>\n    <img\n      v-else\n      v-bind=\"attrs\"\n      :src=\"src\"\n      :style=\"imageStyle\"\n      :class=\"[ns.e('inner'), preview ? ns.e('preview') : '']\"\n      @click=\"clickHandler\"\n    />\n    <template v-if=\"preview\">\n      <image-viewer\n        v-if=\"showViewer\"\n        :z-index=\"zIndex\"\n        :initial-index=\"imageIndex\"\n        :url-list=\"previewSrcList\"\n        :hide-on-click-modal=\"hideOnClickModal\"\n        :teleported=\"teleported\"\n        @close=\"closeViewer\"\n        @switch=\"switchViewer\"\n      >\n        <div v-if=\"$slots.viewer\">\n          <slot name=\"viewer\" />\n        </div>\n      </image-viewer>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport {\n  useEventListener,\n  useThrottleFn,\n  isClient,\n  isBoolean,\n} from '@vueuse/core'\nimport {\n  useAttrs,\n  useLocale,\n  useNamespace,\n  useDeprecated,\n} from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport {\n  getScrollContainer,\n  isInContainer,\n  isElement,\n} from '@element-plus/utils'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\nlet prevOverflow = ''\n\nexport default defineComponent({\n  name: 'ElImage',\n  components: {\n    ImageViewer,\n  },\n  inheritAttrs: false,\n\n  props: imageProps,\n  emits: imageEmits,\n\n  setup(props, { emit, attrs: rawAttrs }) {\n    useDeprecated(\n      {\n        scope: 'el-image',\n        from: 'append-to-body',\n        replacement: 'preview-teleported',\n        version: '2.2.0',\n        ref: 'https://element-plus.org/en-US/component/image.html#image-attributess',\n      },\n      computed(() => isBoolean(props.appendToBody))\n    )\n\n    const { t } = useLocale()\n    const ns = useNamespace('image')\n\n    const attrs = useAttrs()\n    const hasLoadError = ref(false)\n    const loading = ref(true)\n    const imgWidth = ref(0)\n    const imgHeight = ref(0)\n    const showViewer = ref(false)\n    const container = ref<HTMLElement>()\n\n    const _scrollContainer = ref<HTMLElement | Window>()\n    let stopScrollListener: () => void\n    let stopWheelListener: () => void\n\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n\n    const imageStyle = computed<CSSProperties>(() => {\n      const { fit } = props\n      if (isClient && fit) {\n        return { objectFit: fit }\n      }\n      return {}\n    })\n\n    const preview = computed(() => {\n      const { previewSrcList } = props\n      return Array.isArray(previewSrcList) && previewSrcList.length > 0\n    })\n\n    const teleported = computed(() => {\n      return props.appendToBody || props.previewTeleported\n    })\n\n    const imageIndex = computed(() => {\n      const { previewSrcList, initialIndex } = props\n      let previewIndex = initialIndex\n      if (initialIndex > previewSrcList.length - 1) {\n        previewIndex = 0\n      }\n      return previewIndex\n    })\n\n    const loadImage = () => {\n      if (!isClient) return\n\n      // reset status\n      loading.value = true\n      hasLoadError.value = false\n\n      const img = new Image()\n      const currentImageSrc = props.src\n\n      // load & error callbacks are only responsible for currentImageSrc\n      img.addEventListener('load', (e) => {\n        if (currentImageSrc !== props.src) {\n          return\n        }\n        handleLoad(e, img)\n      })\n      img.addEventListener('error', (e) => {\n        if (currentImageSrc !== props.src) {\n          return\n        }\n        handleError(e)\n      })\n\n      // bind html attrs\n      // so it can behave consistently\n      Object.entries(attrs.value).forEach(([key, value]) => {\n        // avoid onload to be overwritten\n        if (key.toLowerCase() === 'onload') return\n        img.setAttribute(key, value as string)\n      })\n      img.src = currentImageSrc\n    }\n\n    function handleLoad(e: Event, img: HTMLImageElement) {\n      imgWidth.value = img.width\n      imgHeight.value = img.height\n      loading.value = false\n      hasLoadError.value = false\n    }\n\n    function handleError(event: Event) {\n      loading.value = false\n      hasLoadError.value = true\n      emit('error', event)\n    }\n\n    function handleLazyLoad() {\n      if (isInContainer(container.value, _scrollContainer.value)) {\n        loadImage()\n        removeLazyLoadListener()\n      }\n    }\n\n    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)\n\n    async function addLazyLoadListener() {\n      if (!isClient) return\n\n      await nextTick()\n\n      const { scrollContainer } = props\n      if (isElement(scrollContainer)) {\n        _scrollContainer.value = scrollContainer\n      } else if (isString(scrollContainer) && scrollContainer !== '') {\n        _scrollContainer.value =\n          document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n      } else if (container.value) {\n        _scrollContainer.value = getScrollContainer(container.value)\n      }\n\n      if (_scrollContainer.value) {\n        stopScrollListener = useEventListener(\n          _scrollContainer,\n          'scroll',\n          lazyLoadHandler\n        )\n        setTimeout(() => handleLazyLoad(), 100)\n      }\n    }\n\n    function removeLazyLoadListener() {\n      if (!isClient || !_scrollContainer.value || !lazyLoadHandler) return\n\n      stopScrollListener()\n      _scrollContainer.value = undefined\n    }\n\n    function wheelHandler(e: WheelEvent) {\n      if (!e.ctrlKey) return\n\n      if (e.deltaY < 0) {\n        e.preventDefault()\n        return false\n      } else if (e.deltaY > 0) {\n        e.preventDefault()\n        return false\n      }\n    }\n\n    function clickHandler() {\n      // don't show viewer when preview is false\n      if (!preview.value) return\n\n      stopWheelListener = useEventListener('wheel', wheelHandler, {\n        passive: false,\n      })\n\n      // prevent body scroll\n      prevOverflow = document.body.style.overflow\n      document.body.style.overflow = 'hidden'\n      showViewer.value = true\n    }\n\n    function closeViewer() {\n      stopWheelListener?.()\n      document.body.style.overflow = prevOverflow\n      showViewer.value = false\n      emit('close')\n    }\n\n    function switchViewer(val: number) {\n      emit('switch', val)\n    }\n\n    watch(\n      () => props.src,\n      () => {\n        if (props.lazy) {\n          // reset status\n          loading.value = true\n          hasLoadError.value = false\n          removeLazyLoadListener()\n          addLazyLoadListener()\n        } else {\n          loadImage()\n        }\n      }\n    )\n\n    onMounted(() => {\n      if (props.lazy) {\n        addLazyLoadListener()\n      } else {\n        loadImage()\n      }\n    })\n\n    return {\n      attrs,\n      loading,\n      hasLoadError,\n      showViewer,\n      containerStyle,\n      imageStyle,\n      preview,\n      imageIndex,\n      container,\n      ns,\n      teleported,\n\n      clickHandler,\n      closeViewer,\n      switchViewer,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["ImageViewer","_openBlock","_normalizeClass"],"mappings":"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"}

package/es/components/image-viewer/index.d.ts

@@ -56,8 +56,8 @@ export declare const ElImageViewer: import("element-plus/es/utils").SFCWithInsta
     onSwitch?: ((index: number) => any) | undefined;
 }, {
     zIndex: number;
-    infinite: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     teleported: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
+    infinite: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     initialIndex: number;
     urlList: string[];
     hideOnClickModal: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;

package/es/components/image-viewer/src/image-viewer.vue.d.ts

@@ -58,8 +58,8 @@ declare const _default: import("vue").DefineComponent<{
     onSwitch?: ((index: number) => any) | undefined;
 }, {
     zIndex: number;
-    infinite: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     teleported: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
+    infinite: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     initialIndex: number;
     urlList: string[];
     hideOnClickModal: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;

package/es/components/image-viewer/src/image-viewer2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer2.mjs","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n  <teleport to=\"body\" :disabled=\"!teleported\">\n    <transition name=\"viewer-fade\" appear>\n      <div\n        ref=\"wrapper\"\n        :tabindex=\"-1\"\n        :class=\"ns.e('wrapper')\"\n        :style=\"{ zIndex: computedZIndex }\"\n      >\n        <div :class=\"ns.e('mask')\" @click.self=\"hideOnClickModal && hide()\" />\n\n        <!-- CLOSE -->\n        <span :class=\"[ns.e('btn'), ns.e('close')]\" @click=\"hide\">\n          <el-icon><close /></el-icon>\n        </span>\n\n        <!-- ARROW -->\n        <template v-if=\"!isSingle\">\n          <span\n            :class=\"[\n              ns.e('btn'),\n              ns.e('prev'),\n              ns.is('disabled', !infinite && isFirst),\n            ]\"\n            @click=\"prev\"\n          >\n            <el-icon><arrow-left /></el-icon>\n          </span>\n          <span\n            :class=\"[\n              ns.e('btn'),\n              ns.e('next'),\n              ns.is('disabled', !infinite && isLast),\n            ]\"\n            @click=\"next\"\n          >\n            <el-icon><arrow-right /></el-icon>\n          </span>\n        </template>\n        <!-- ACTIONS -->\n        <div :class=\"[ns.e('btn'), ns.e('actions')]\">\n          <div :class=\"ns.e('actions__inner')\">\n            <el-icon @click=\"handleActions('zoomOut')\">\n              <zoom-out />\n            </el-icon>\n            <el-icon @click=\"handleActions('zoomIn')\">\n              <zoom-in />\n            </el-icon>\n            <i :class=\"ns.e('actions__divider')\"></i>\n            <el-icon @click=\"toggleMode\">\n              <component :is=\"mode.icon\" />\n            </el-icon>\n            <i :class=\"ns.e('actions__divider')\"></i>\n            <el-icon @click=\"handleActions('anticlockwise')\">\n              <refresh-left />\n            </el-icon>\n            <el-icon @click=\"handleActions('clockwise')\">\n              <refresh-right />\n            </el-icon>\n          </div>\n        </div>\n        <!-- CANVAS -->\n        <div :class=\"ns.e('canvas')\">\n          <img\n            v-for=\"(url, i) in urlList\"\n            v-show=\"i === index\"\n            :ref=\"(el) => (imgRefs[i] = el)\"\n            :key=\"url\"\n            :src=\"url\"\n            :style=\"imgStyle\"\n            :class=\"ns.e('img')\"\n            @load=\"handleImgLoad\"\n            @error=\"handleImgError\"\n            @mousedown=\"handleMouseDown\"\n          />\n        </div>\n        <slot />\n      </div>\n    </transition>\n  </teleport>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  ref,\n  onMounted,\n  watch,\n  nextTick,\n  effectScope,\n  markRaw,\n} from 'vue'\nimport { useEventListener, isNumber } from '@vueuse/core'\nimport { throttle } from 'lodash-unified'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale, useNamespace, useZIndex } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { isFirefox } from '@element-plus/utils'\nimport {\n  Close,\n  ArrowLeft,\n  ArrowRight,\n  ZoomOut,\n  ZoomIn,\n  RefreshLeft,\n  RefreshRight,\n  FullScreen,\n  ScaleToOriginal,\n} from '@element-plus/icons-vue'\nimport { imageViewerProps, imageViewerEmits } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\n\nconst Mode = {\n  CONTAIN: {\n    name: 'contain',\n    icon: markRaw(FullScreen),\n  },\n  ORIGINAL: {\n    name: 'original',\n    icon: markRaw(ScaleToOriginal),\n  },\n}\n\nconst mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'\nexport type ImageViewerAction =\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'clockwise'\n  | 'anticlockwise'\n\nexport default defineComponent({\n  name: 'ElImageViewer',\n  components: {\n    ElIcon,\n    Close,\n    ArrowLeft,\n    ArrowRight,\n    ZoomOut,\n    ZoomIn,\n    RefreshLeft,\n    RefreshRight,\n  },\n  props: imageViewerProps,\n  emits: imageViewerEmits,\n\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const ns = useNamespace('image-viewer')\n    const { nextZIndex } = useZIndex()\n    const wrapper = ref<HTMLDivElement>()\n    const imgRefs = ref<any[]>([])\n\n    const scopeEventListener = effectScope()\n\n    const loading = ref(true)\n    const index = ref(props.initialIndex)\n    const mode = ref(Mode.CONTAIN)\n    const transform = ref({\n      scale: 1,\n      deg: 0,\n      offsetX: 0,\n      offsetY: 0,\n      enableTransition: false,\n    })\n\n    const isSingle = computed(() => {\n      const { urlList } = props\n      return urlList.length <= 1\n    })\n\n    const isFirst = computed(() => {\n      return index.value === 0\n    })\n\n    const isLast = computed(() => {\n      return index.value === props.urlList.length - 1\n    })\n\n    const currentImg = computed(() => {\n      return props.urlList[index.value]\n    })\n\n    const imgStyle = computed(() => {\n      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n      let translateX = offsetX / scale\n      let translateY = offsetY / scale\n\n      switch (deg % 360) {\n        case 90:\n        case -270:\n          ;[translateX, translateY] = [translateY, -translateX]\n          break\n        case 180:\n        case -180:\n          ;[translateX, translateY] = [-translateX, -translateY]\n          break\n        case 270:\n        case -90:\n          ;[translateX, translateY] = [-translateY, translateX]\n          break\n      }\n\n      const style: CSSProperties = {\n        transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,\n        transition: enableTransition ? 'transform .3s' : '',\n      }\n      if (mode.value.name === Mode.CONTAIN.name) {\n        style.maxWidth = style.maxHeight = '100%'\n      }\n      return style\n    })\n\n    const computedZIndex = computed(() => {\n      return isNumber(props.zIndex) ? props.zIndex : nextZIndex()\n    })\n\n    function hide() {\n      unregisterEventListener()\n      emit('close')\n    }\n\n    function registerEventListener() {\n      const keydownHandler = throttle((e: KeyboardEvent) => {\n        switch (e.code) {\n          // ESC\n          case EVENT_CODE.esc:\n            hide()\n            break\n          // SPACE\n          case EVENT_CODE.space:\n            toggleMode()\n            break\n          // LEFT_ARROW\n          case EVENT_CODE.left:\n            prev()\n            break\n          // UP_ARROW\n          case EVENT_CODE.up:\n            handleActions('zoomIn')\n            break\n          // RIGHT_ARROW\n          case EVENT_CODE.right:\n            next()\n            break\n          // DOWN_ARROW\n          case EVENT_CODE.down:\n            handleActions('zoomOut')\n            break\n        }\n      })\n      const mousewheelHandler = throttle(\n        (e: WheelEvent | any /* TODO: wheelDelta is deprecated */) => {\n          const delta = e.wheelDelta ? e.wheelDelta : -e.detail\n          if (delta > 0) {\n            handleActions('zoomIn', {\n              zoomRate: 1.2,\n              enableTransition: false,\n            })\n          } else {\n            handleActions('zoomOut', {\n              zoomRate: 1.2,\n              enableTransition: false,\n            })\n          }\n        }\n      )\n\n      scopeEventListener.run(() => {\n        useEventListener(document, 'keydown', keydownHandler)\n        useEventListener(document, mousewheelEventName, mousewheelHandler)\n      })\n    }\n\n    function unregisterEventListener() {\n      scopeEventListener.stop()\n    }\n\n    function handleImgLoad() {\n      loading.value = false\n    }\n\n    function handleImgError(e: Event) {\n      loading.value = false\n      ;(e.target as HTMLImageElement).alt = t('el.image.error')\n    }\n\n    function handleMouseDown(e: MouseEvent) {\n      if (loading.value || e.button !== 0 || !wrapper.value) return\n      transform.value.enableTransition = false\n\n      const { offsetX, offsetY } = transform.value\n      const startX = e.pageX\n      const startY = e.pageY\n\n      const dragHandler = throttle((ev: MouseEvent) => {\n        transform.value = {\n          ...transform.value,\n          offsetX: offsetX + ev.pageX - startX,\n          offsetY: offsetY + ev.pageY - startY,\n        }\n      })\n      const removeMousemove = useEventListener(\n        document,\n        'mousemove',\n        dragHandler\n      )\n      useEventListener(document, 'mouseup', () => {\n        removeMousemove()\n      })\n\n      e.preventDefault()\n    }\n\n    function reset() {\n      transform.value = {\n        scale: 1,\n        deg: 0,\n        offsetX: 0,\n        offsetY: 0,\n        enableTransition: false,\n      }\n    }\n\n    function toggleMode() {\n      if (loading.value) return\n\n      const modeNames = Object.keys(Mode)\n      const modeValues = Object.values(Mode)\n      const currentMode = mode.value.name\n      const index = modeValues.findIndex((i) => i.name === currentMode)\n      const nextIndex = (index + 1) % modeNames.length\n      mode.value = Mode[modeNames[nextIndex]]\n      reset()\n    }\n\n    function prev() {\n      if (isFirst.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value - 1 + len) % len\n    }\n\n    function next() {\n      if (isLast.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value + 1) % len\n    }\n\n    function handleActions(action: ImageViewerAction, options = {}) {\n      if (loading.value) return\n      const { zoomRate, rotateDeg, enableTransition } = {\n        zoomRate: 1.4,\n        rotateDeg: 90,\n        enableTransition: true,\n        ...options,\n      }\n      switch (action) {\n        case 'zoomOut':\n          if (transform.value.scale > 0.2) {\n            transform.value.scale = parseFloat(\n              (transform.value.scale / zoomRate).toFixed(3)\n            )\n          }\n          break\n        case 'zoomIn':\n          if (transform.value.scale < 7) {\n            transform.value.scale = parseFloat(\n              (transform.value.scale * zoomRate).toFixed(3)\n            )\n          }\n          break\n        case 'clockwise':\n          transform.value.deg += rotateDeg\n          break\n        case 'anticlockwise':\n          transform.value.deg -= rotateDeg\n          break\n      }\n      transform.value.enableTransition = enableTransition\n    }\n\n    watch(currentImg, () => {\n      nextTick(() => {\n        const $img = imgRefs.value[0]\n        if (!$img?.complete) {\n          loading.value = true\n        }\n      })\n    })\n\n    watch(index, (val) => {\n      reset()\n      emit('switch', val)\n    })\n\n    onMounted(() => {\n      registerEventListener()\n      // add tabindex then wrapper can be focusable via Javascript\n      // focus wrapper so arrow key can't cause inner scroll behavior underneath\n      wrapper.value?.focus?.()\n    })\n\n    return {\n      index,\n      wrapper,\n      imgRefs,\n      isSingle,\n      isFirst,\n      isLast,\n      currentImg,\n      imgStyle,\n      mode,\n      computedZIndex,\n      handleActions,\n      prev,\n      next,\n      hide,\n      toggleMode,\n      handleImgLoad,\n      handleImgError,\n      handleMouseDown,\n      ns,\n    }\n  },\n})\n</script>\n"],"names":["_normalizeStyle"],"mappings":"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"}
+{"version":3,"file":"image-viewer2.mjs","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n  <teleport to=\"body\" :disabled=\"!teleported\">\n    <transition name=\"viewer-fade\" appear>\n      <div\n        ref=\"wrapper\"\n        :tabindex=\"-1\"\n        :class=\"ns.e('wrapper')\"\n        :style=\"{ zIndex: computedZIndex }\"\n      >\n        <div :class=\"ns.e('mask')\" @click.self=\"hideOnClickModal && hide()\" />\n\n        <!-- CLOSE -->\n        <span :class=\"[ns.e('btn'), ns.e('close')]\" @click=\"hide\">\n          <el-icon><close /></el-icon>\n        </span>\n\n        <!-- ARROW -->\n        <template v-if=\"!isSingle\">\n          <span\n            :class=\"[\n              ns.e('btn'),\n              ns.e('prev'),\n              ns.is('disabled', !infinite && isFirst),\n            ]\"\n            @click=\"prev\"\n          >\n            <el-icon><arrow-left /></el-icon>\n          </span>\n          <span\n            :class=\"[\n              ns.e('btn'),\n              ns.e('next'),\n              ns.is('disabled', !infinite && isLast),\n            ]\"\n            @click=\"next\"\n          >\n            <el-icon><arrow-right /></el-icon>\n          </span>\n        </template>\n        <!-- ACTIONS -->\n        <div :class=\"[ns.e('btn'), ns.e('actions')]\">\n          <div :class=\"ns.e('actions__inner')\">\n            <el-icon @click=\"handleActions('zoomOut')\">\n              <zoom-out />\n            </el-icon>\n            <el-icon @click=\"handleActions('zoomIn')\">\n              <zoom-in />\n            </el-icon>\n            <i :class=\"ns.e('actions__divider')\"></i>\n            <el-icon @click=\"toggleMode\">\n              <component :is=\"mode.icon\" />\n            </el-icon>\n            <i :class=\"ns.e('actions__divider')\"></i>\n            <el-icon @click=\"handleActions('anticlockwise')\">\n              <refresh-left />\n            </el-icon>\n            <el-icon @click=\"handleActions('clockwise')\">\n              <refresh-right />\n            </el-icon>\n          </div>\n        </div>\n        <!-- CANVAS -->\n        <div :class=\"ns.e('canvas')\">\n          <img\n            v-for=\"(url, i) in urlList\"\n            v-show=\"i === index\"\n            :ref=\"(el) => (imgRefs[i] = el)\"\n            :key=\"url\"\n            :src=\"url\"\n            :style=\"imgStyle\"\n            :class=\"ns.e('img')\"\n            @load=\"handleImgLoad\"\n            @error=\"handleImgError\"\n            @mousedown=\"handleMouseDown\"\n          />\n        </div>\n        <slot />\n      </div>\n    </transition>\n  </teleport>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  ref,\n  onMounted,\n  watch,\n  nextTick,\n  effectScope,\n  markRaw,\n} from 'vue'\nimport { useEventListener, isNumber } from '@vueuse/core'\nimport { throttle } from 'lodash-unified'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale, useNamespace, useZIndex } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { isFirefox } from '@element-plus/utils'\nimport {\n  Close,\n  ArrowLeft,\n  ArrowRight,\n  ZoomOut,\n  ZoomIn,\n  RefreshLeft,\n  RefreshRight,\n  FullScreen,\n  ScaleToOriginal,\n} from '@element-plus/icons-vue'\nimport { imageViewerProps, imageViewerEmits } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\n\nconst Mode = {\n  CONTAIN: {\n    name: 'contain',\n    icon: markRaw(FullScreen),\n  },\n  ORIGINAL: {\n    name: 'original',\n    icon: markRaw(ScaleToOriginal),\n  },\n}\n\nconst mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'\nexport type ImageViewerAction =\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'clockwise'\n  | 'anticlockwise'\n\nexport default defineComponent({\n  name: 'ElImageViewer',\n  components: {\n    ElIcon,\n    Close,\n    ArrowLeft,\n    ArrowRight,\n    ZoomOut,\n    ZoomIn,\n    RefreshLeft,\n    RefreshRight,\n  },\n  props: imageViewerProps,\n  emits: imageViewerEmits,\n\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const ns = useNamespace('image-viewer')\n    const { nextZIndex } = useZIndex()\n    const wrapper = ref<HTMLDivElement>()\n    const imgRefs = ref<any[]>([])\n\n    const scopeEventListener = effectScope()\n\n    const loading = ref(true)\n    const index = ref(props.initialIndex)\n    const mode = ref(Mode.CONTAIN)\n    const transform = ref({\n      scale: 1,\n      deg: 0,\n      offsetX: 0,\n      offsetY: 0,\n      enableTransition: false,\n    })\n\n    const isSingle = computed(() => {\n      const { urlList } = props\n      return urlList.length <= 1\n    })\n\n    const isFirst = computed(() => {\n      return index.value === 0\n    })\n\n    const isLast = computed(() => {\n      return index.value === props.urlList.length - 1\n    })\n\n    const currentImg = computed(() => {\n      return props.urlList[index.value]\n    })\n\n    const imgStyle = computed(() => {\n      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n      let translateX = offsetX / scale\n      let translateY = offsetY / scale\n\n      switch (deg % 360) {\n        case 90:\n        case -270:\n          ;[translateX, translateY] = [translateY, -translateX]\n          break\n        case 180:\n        case -180:\n          ;[translateX, translateY] = [-translateX, -translateY]\n          break\n        case 270:\n        case -90:\n          ;[translateX, translateY] = [-translateY, translateX]\n          break\n      }\n\n      const style: CSSProperties = {\n        transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,\n        transition: enableTransition ? 'transform .3s' : '',\n      }\n      if (mode.value.name === Mode.CONTAIN.name) {\n        style.maxWidth = style.maxHeight = '100%'\n      }\n      return style\n    })\n\n    const computedZIndex = computed(() => {\n      return isNumber(props.zIndex) ? props.zIndex : nextZIndex()\n    })\n\n    function hide() {\n      unregisterEventListener()\n      emit('close')\n    }\n\n    function registerEventListener() {\n      const keydownHandler = throttle((e: KeyboardEvent) => {\n        switch (e.code) {\n          // ESC\n          case EVENT_CODE.esc:\n            hide()\n            break\n          // SPACE\n          case EVENT_CODE.space:\n            toggleMode()\n            break\n          // LEFT_ARROW\n          case EVENT_CODE.left:\n            prev()\n            break\n          // UP_ARROW\n          case EVENT_CODE.up:\n            handleActions('zoomIn')\n            break\n          // RIGHT_ARROW\n          case EVENT_CODE.right:\n            next()\n            break\n          // DOWN_ARROW\n          case EVENT_CODE.down:\n            handleActions('zoomOut')\n            break\n        }\n      })\n      const mousewheelHandler = throttle(\n        (e: WheelEvent | any /* TODO: wheelDelta is deprecated */) => {\n          const delta = e.wheelDelta ? e.wheelDelta : -e.detail\n          if (delta > 0) {\n            handleActions('zoomIn', {\n              zoomRate: 1.2,\n              enableTransition: false,\n            })\n          } else {\n            handleActions('zoomOut', {\n              zoomRate: 1.2,\n              enableTransition: false,\n            })\n          }\n        }\n      )\n\n      scopeEventListener.run(() => {\n        useEventListener(document, 'keydown', keydownHandler)\n        useEventListener(document, mousewheelEventName, mousewheelHandler)\n      })\n    }\n\n    function unregisterEventListener() {\n      scopeEventListener.stop()\n    }\n\n    function handleImgLoad() {\n      loading.value = false\n    }\n\n    function handleImgError(e: Event) {\n      loading.value = false\n      ;(e.target as HTMLImageElement).alt = t('el.image.error')\n    }\n\n    function handleMouseDown(e: MouseEvent) {\n      if (loading.value || e.button !== 0 || !wrapper.value) return\n      transform.value.enableTransition = false\n\n      const { offsetX, offsetY } = transform.value\n      const startX = e.pageX\n      const startY = e.pageY\n\n      const dragHandler = throttle((ev: MouseEvent) => {\n        transform.value = {\n          ...transform.value,\n          offsetX: offsetX + ev.pageX - startX,\n          offsetY: offsetY + ev.pageY - startY,\n        }\n      })\n      const removeMousemove = useEventListener(\n        document,\n        'mousemove',\n        dragHandler\n      )\n      useEventListener(document, 'mouseup', () => {\n        removeMousemove()\n      })\n\n      e.preventDefault()\n    }\n\n    function reset() {\n      transform.value = {\n        scale: 1,\n        deg: 0,\n        offsetX: 0,\n        offsetY: 0,\n        enableTransition: false,\n      }\n    }\n\n    function toggleMode() {\n      if (loading.value) return\n\n      const modeNames = Object.keys(Mode)\n      const modeValues = Object.values(Mode)\n      const currentMode = mode.value.name\n      const index = modeValues.findIndex((i) => i.name === currentMode)\n      const nextIndex = (index + 1) % modeNames.length\n      mode.value = Mode[modeNames[nextIndex]]\n      reset()\n    }\n\n    function prev() {\n      if (isFirst.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value - 1 + len) % len\n    }\n\n    function next() {\n      if (isLast.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value + 1) % len\n    }\n\n    function handleActions(action: ImageViewerAction, options = {}) {\n      if (loading.value) return\n      const { zoomRate, rotateDeg, enableTransition } = {\n        zoomRate: 1.4,\n        rotateDeg: 90,\n        enableTransition: true,\n        ...options,\n      }\n      switch (action) {\n        case 'zoomOut':\n          if (transform.value.scale > 0.2) {\n            transform.value.scale = parseFloat(\n              (transform.value.scale / zoomRate).toFixed(3)\n            )\n          }\n          break\n        case 'zoomIn':\n          if (transform.value.scale < 7) {\n            transform.value.scale = parseFloat(\n              (transform.value.scale * zoomRate).toFixed(3)\n            )\n          }\n          break\n        case 'clockwise':\n          transform.value.deg += rotateDeg\n          break\n        case 'anticlockwise':\n          transform.value.deg -= rotateDeg\n          break\n      }\n      transform.value.enableTransition = enableTransition\n    }\n\n    watch(currentImg, () => {\n      nextTick(() => {\n        const $img = imgRefs.value[0]\n        if (!$img?.complete) {\n          loading.value = true\n        }\n      })\n    })\n\n    watch(index, (val) => {\n      reset()\n      emit('switch', val)\n    })\n\n    onMounted(() => {\n      registerEventListener()\n      // add tabindex then wrapper can be focusable via Javascript\n      // focus wrapper so arrow key can't cause inner scroll behavior underneath\n      wrapper.value?.focus?.()\n    })\n\n    return {\n      index,\n      wrapper,\n      imgRefs,\n      isSingle,\n      isFirst,\n      isLast,\n      currentImg,\n      imgStyle,\n      mode,\n      computedZIndex,\n      handleActions,\n      prev,\n      next,\n      hide,\n      toggleMode,\n      handleImgLoad,\n      handleImgError,\n      handleMouseDown,\n      ns,\n    }\n  },\n})\n</script>\n"],"names":["_normalizeClass","_createCommentVNode","_normalizeStyle"],"mappings":"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"}

package/es/components/index.mjs

@@ -72,6 +72,7 @@ export { ElNotification } from './notification/index.mjs';
 export { ElPopover, ElPopoverDirective } from './popover/index.mjs';
 export { affixEmits, affixProps } from './affix/src/affix.mjs';
 export { alertEffects, alertEmits, alertProps } from './alert/src/alert.mjs';
+export { autocompleteEmits, autocompleteProps } from './autocomplete/src/autocomplete.mjs';
 export { avatarEmits, avatarProps } from './avatar/src/avatar.mjs';
 export { backtopEmits, backtopProps } from './backtop/src/backtop.mjs';
 export { badgeProps } from './badge/src/badge.mjs';
@@ -84,6 +85,8 @@ export { CASCADER_PANEL_INJECTION_KEY, ExpandTrigger } from './cascader-panel/sr
 export { CommonProps, DefaultProps, useCascaderConfig } from './cascader-panel/src/config.mjs';
 export { checkTagEmits, checkTagProps } from './check-tag/src/check-tag.mjs';
 export { colProps } from './col/src/col.mjs';
+export { collapseEmits, collapseProps, emitChangeFn } from './collapse/src/collapse.mjs';
+export { collapseItemProps } from './collapse/src/collapse-item.mjs';
 export { configProviderProps, messageConfig } from './config-provider/src/config-provider.mjs';
 export { useDialog } from './dialog/src/use-dialog.mjs';
 export { dialogEmits, dialogProps } from './dialog/src/dialog.mjs';
@@ -143,6 +146,10 @@ export { timelineItemProps } from './timeline/src/timeline-item.mjs';
 export { useTooltipContentProps, useTooltipProps, useTooltipTriggerProps } from './tooltip/src/tooltip.mjs';
 export { TOOLTIP_INJECTION_KEY } from './tooltip/src/tokens.mjs';
 export { CHANGE_EVENT } from '../constants/event.mjs';
+export { genFileId, uploadBaseProps, uploadListTypes, uploadProps } from './upload/src/upload.mjs';
+export { uploadContentProps } from './upload/src/upload-content.mjs';
+export { uploadListEmits, uploadListProps } from './upload/src/upload-list.mjs';
+export { uploadDraggerEmits, uploadDraggerProps } from './upload/src/upload-dragger.mjs';
 export { default as FixedSizeList } from './virtual-list/src/components/fixed-size-list.mjs';
 export { default as DynamicSizeList } from './virtual-list/src/components/dynamic-size-list.mjs';
 export { default as FixedSizeGrid } from './virtual-list/src/components/fixed-size-grid.mjs';

package/es/components/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -123,14 +123,14 @@ export declare const ElInput: import("element-plus/es/utils").SFCWithInstall<imp
     readonly inputStyle: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("vue").StyleValue>, () => import("element-plus/es/utils").Mutable<{}>, unknown, unknown, unknown>;
 }>> & {
     onChange?: ((value: string) => any) | undefined;
-    onMouseenter?: ((evt: MouseEvent) => any) | undefined;
-    onMouseleave?: ((evt: MouseEvent) => any) | undefined;
-    onKeydown?: ((evt: KeyboardEvent) => any) | undefined;
-    onFocus?: ((evt: FocusEvent) => any) | undefined;
-    onBlur?: ((evt: FocusEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     onInput?: ((value: string) => any) | undefined;
     onClear?: (() => any) | undefined;
+    onBlur?: ((evt: FocusEvent) => any) | undefined;
+    onFocus?: ((evt: FocusEvent) => any) | undefined;
+    onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+    onMouseleave?: ((evt: MouseEvent) => any) | undefined;
+    onKeydown?: ((evt: KeyboardEvent) => any) | undefined;
     onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
     onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
     onCompositionend?: ((evt: CompositionEvent) => any) | undefined;

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

@@ -124,14 +124,14 @@ declare const _default: import("vue").DefineComponent<{
     readonly inputStyle: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<StyleValue>, () => import("element-plus/es/utils").Mutable<{}>, unknown, unknown, unknown>;
 }>> & {
     onChange?: ((value: string) => any) | undefined;
-    onMouseenter?: ((evt: MouseEvent) => any) | undefined;
-    onMouseleave?: ((evt: MouseEvent) => any) | undefined;
-    onKeydown?: ((evt: KeyboardEvent) => any) | undefined;
-    onFocus?: ((evt: FocusEvent) => any) | undefined;
-    onBlur?: ((evt: FocusEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     onInput?: ((value: string) => any) | undefined;
     onClear?: (() => any) | undefined;
+    onBlur?: ((evt: FocusEvent) => any) | undefined;
+    onFocus?: ((evt: FocusEvent) => any) | undefined;
+    onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+    onMouseleave?: ((evt: MouseEvent) => any) | undefined;
+    onKeydown?: ((evt: KeyboardEvent) => any) | undefined;
     onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
     onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
     onCompositionend?: ((evt: CompositionEvent) => any) | undefined;

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

@@ -263,7 +263,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         [_ctx.nsInput.bm("group", "prepend")]: _ctx.$slots.prepend,
         [_ctx.nsInput.m("prefix")]: _ctx.$slots.prefix || _ctx.prefixIcon,
         [_ctx.nsInput.m("suffix")]: _ctx.$slots.suffix || _ctx.suffixIcon || _ctx.clearable || _ctx.showPassword,
-        [_ctx.nsInput.m("suffix--password-clear")]: _ctx.clearable && _ctx.showPassword
+        [_ctx.nsInput.m("suffix--password-clear")]: _ctx.showClear && _ctx.showPwdVisible
       },
       _ctx.$attrs.class
     ]),

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')]: clearable && showPassword,\n      },\n      $attrs.class,\n    ]\"\n    :style=\"containerStyle\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <!-- input -->\n    <template v-if=\"type !== 'textarea'\">\n      <!-- prepend slot -->\n      <div v-if=\"$slots.prepend\" :class=\"nsInput.be('group', 'prepend')\">\n        <slot name=\"prepend\" />\n      </div>\n\n      <input\n        ref=\"input\"\n        :class=\"nsInput.e('inner')\"\n        v-bind=\"attrs\"\n        :type=\"showPassword ? (passwordVisible ? 'text' : 'password') : type\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :tabindex=\"tabindex\"\n        :aria-label=\"label\"\n        :placeholder=\"placeholder\"\n        :style=\"inputStyle\"\n        @compositionstart=\"handleCompositionStart\"\n        @compositionupdate=\"handleCompositionUpdate\"\n        @compositionend=\"handleCompositionEnd\"\n        @input=\"handleInput\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @change=\"handleChange\"\n        @keydown=\"handleKeydown\"\n      />\n\n      <!-- prefix slot -->\n      <span v-if=\"$slots.prefix || prefixIcon\" :class=\"nsInput.e('prefix')\">\n        <span :class=\"nsInput.e('prefix-inner')\">\n          <slot name=\"prefix\"></slot>\n          <el-icon v-if=\"prefixIcon\" :class=\"nsInput.e('icon')\">\n            <component :is=\"prefixIcon\" />\n          </el-icon>\n        </span>\n      </span>\n\n      <!-- suffix slot -->\n      <span v-if=\"suffixVisible\" :class=\"nsInput.e('suffix')\">\n        <span :class=\"nsInput.e('suffix-inner')\">\n          <template v-if=\"!showClear || !showPwdVisible || !isWordLimitVisible\">\n            <slot name=\"suffix\"></slot>\n            <el-icon v-if=\"suffixIcon\" :class=\"nsInput.e('icon')\">\n              <component :is=\"suffixIcon\" />\n            </el-icon>\n          </template>\n          <el-icon\n            v-if=\"showClear\"\n            :class=\"[nsInput.e('icon'), nsInput.e('clear')]\"\n            @mousedown.prevent\n            @click=\"clear\"\n          >\n            <circle-close />\n          </el-icon>\n          <el-icon\n            v-if=\"showPwdVisible\"\n            :class=\"[nsInput.e('icon'), nsInput.e('clear')]\"\n            @click=\"handlePasswordVisible\"\n          >\n            <icon-view />\n          </el-icon>\n          <span v-if=\"isWordLimitVisible\" :class=\"nsInput.e('count')\">\n            <span :class=\"nsInput.e('count-inner')\">\n              {{ textLength }} / {{ attrs.maxlength }}\n            </span>\n          </span>\n        </span>\n        <el-icon\n          v-if=\"validateState && validateIcon && needStatusIcon\"\n          :class=\"[nsInput.e('icon'), nsInput.e('validateIcon')]\"\n        >\n          <component :is=\"validateIcon\" />\n        </el-icon>\n      </span>\n\n      <!-- append slot -->\n      <div v-if=\"$slots.append\" :class=\"nsInput.be('group', 'append')\">\n        <slot name=\"append\" />\n      </div>\n    </template>\n\n    <!-- textarea -->\n    <template v-else>\n      <textarea\n        ref=\"textarea\"\n        :class=\"nsTextarea.e('inner')\"\n        v-bind=\"attrs\"\n        :tabindex=\"tabindex\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :style=\"computedTextareaStyle\"\n        :aria-label=\"label\"\n        :placeholder=\"placeholder\"\n        @compositionstart=\"handleCompositionStart\"\n        @compositionupdate=\"handleCompositionUpdate\"\n        @compositionend=\"handleCompositionEnd\"\n        @input=\"handleInput\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @change=\"handleChange\"\n        @keydown=\"handleKeydown\"\n      />\n      <span v-if=\"isWordLimitVisible\" :class=\"nsInput.e('count')\">\n        {{ textLength }} / {{ attrs.maxlength }}\n      </span>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  watch,\n  nextTick,\n  getCurrentInstance,\n  ref,\n  shallowRef,\n  onMounted,\n  onUpdated,\n} from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CircleClose, View as IconView } from '@element-plus/icons-vue'\nimport { ValidateComponentsMap, 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","_createElementBlock"],"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 { 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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"}

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

@@ -138,14 +138,14 @@ export declare const ElInputNumber: import("element-plus/es/utils").SFCWithInsta
         readonly inputStyle: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("vue").StyleValue>, () => import("element-plus/es/utils").Mutable<{}>, unknown, unknown, unknown>;
     }>> & {
         onChange?: ((value: string) => any) | undefined;
-        onMouseenter?: ((evt: MouseEvent) => any) | undefined;
-        onMouseleave?: ((evt: MouseEvent) => any) | undefined;
-        onKeydown?: ((evt: KeyboardEvent) => any) | undefined;
-        onFocus?: ((evt: FocusEvent) => any) | undefined;
-        onBlur?: ((evt: FocusEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
         onInput?: ((value: string) => any) | undefined;
         onClear?: (() => any) | undefined;
+        onBlur?: ((evt: FocusEvent) => any) | undefined;
+        onFocus?: ((evt: FocusEvent) => any) | undefined;
+        onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+        onMouseleave?: ((evt: MouseEvent) => any) | undefined;
+        onKeydown?: ((evt: KeyboardEvent) => any) | undefined;
         onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
         onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
         onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
@@ -297,14 +297,14 @@ export declare const ElInputNumber: import("element-plus/es/utils").SFCWithInsta
         readonly inputStyle: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("vue").StyleValue>, () => import("element-plus/es/utils").Mutable<{}>, unknown, unknown, unknown>;
     }>> & {
         onChange?: ((value: string) => any) | undefined;
-        onMouseenter?: ((evt: MouseEvent) => any) | undefined;
-        onMouseleave?: ((evt: MouseEvent) => any) | undefined;
-        onKeydown?: ((evt: KeyboardEvent) => any) | undefined;
-        onFocus?: ((evt: FocusEvent) => any) | undefined;
-        onBlur?: ((evt: FocusEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
         onInput?: ((value: string) => any) | undefined;
         onClear?: (() => any) | undefined;
+        onBlur?: ((evt: FocusEvent) => any) | undefined;
+        onFocus?: ((evt: FocusEvent) => any) | undefined;
+        onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+        onMouseleave?: ((evt: MouseEvent) => any) | undefined;
+        onKeydown?: ((evt: KeyboardEvent) => any) | undefined;
         onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
         onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
         onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
@@ -382,10 +382,10 @@ export declare const ElInputNumber: import("element-plus/es/utils").SFCWithInsta
     readonly precision: import("element-plus/es/utils").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
 }>> & {
     onChange?: ((prev: number, cur: number) => any) | undefined;
-    onFocus?: ((e: FocusEvent) => any) | undefined;
-    onBlur?: ((e: FocusEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((val: number | undefined) => any) | undefined;
     onInput?: ((val: number) => any) | undefined;
+    onBlur?: ((e: FocusEvent) => any) | undefined;
+    onFocus?: ((e: FocusEvent) => any) | undefined;
 }, {
     size: import("element-plus/es/utils").BuildPropType<StringConstructor, "default" | "small" | "large", unknown>;
     disabled: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;

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

@@ -139,14 +139,14 @@ declare const _default: import("vue").DefineComponent<{
         readonly inputStyle: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("vue").StyleValue>, () => import("element-plus/es/utils").Mutable<{}>, unknown, unknown, unknown>;
     }>> & {
         onChange?: ((value: string) => any) | undefined;
-        onMouseenter?: ((evt: MouseEvent) => any) | undefined;
-        onMouseleave?: ((evt: MouseEvent) => any) | undefined;
-        onKeydown?: ((evt: KeyboardEvent) => any) | undefined;
-        onFocus?: ((evt: FocusEvent) => any) | undefined;
-        onBlur?: ((evt: FocusEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
         onInput?: ((value: string) => any) | undefined;
         onClear?: (() => any) | undefined;
+        onBlur?: ((evt: FocusEvent) => any) | undefined;
+        onFocus?: ((evt: FocusEvent) => any) | undefined;
+        onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+        onMouseleave?: ((evt: MouseEvent) => any) | undefined;
+        onKeydown?: ((evt: KeyboardEvent) => any) | undefined;
         onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
         onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
         onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
@@ -298,14 +298,14 @@ declare const _default: import("vue").DefineComponent<{
         readonly inputStyle: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("vue").StyleValue>, () => import("element-plus/es/utils").Mutable<{}>, unknown, unknown, unknown>;
     }>> & {
         onChange?: ((value: string) => any) | undefined;
-        onMouseenter?: ((evt: MouseEvent) => any) | undefined;
-        onMouseleave?: ((evt: MouseEvent) => any) | undefined;
-        onKeydown?: ((evt: KeyboardEvent) => any) | undefined;
-        onFocus?: ((evt: FocusEvent) => any) | undefined;
-        onBlur?: ((evt: FocusEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
         onInput?: ((value: string) => any) | undefined;
         onClear?: (() => any) | undefined;
+        onBlur?: ((evt: FocusEvent) => any) | undefined;
+        onFocus?: ((evt: FocusEvent) => any) | undefined;
+        onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+        onMouseleave?: ((evt: MouseEvent) => any) | undefined;
+        onKeydown?: ((evt: KeyboardEvent) => any) | undefined;
         onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
         onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
         onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
@@ -383,10 +383,10 @@ declare const _default: import("vue").DefineComponent<{
     readonly precision: import("element-plus/es/utils").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
 }>> & {
     onChange?: ((prev: number, cur: number) => any) | undefined;
-    onFocus?: ((e: FocusEvent) => any) | undefined;
-    onBlur?: ((e: FocusEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((val: number | undefined) => any) | undefined;
     onInput?: ((val: number) => any) | undefined;
+    onBlur?: ((e: FocusEvent) => any) | undefined;
+    onFocus?: ((e: FocusEvent) => any) | undefined;
 }, {
     size: import("element-plus/es/utils").BuildPropType<StringConstructor, "default" | "small" | "large", unknown>;
     disabled: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;