@element-plus/nightly 0.0.20261001 → 0.0.20261003

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

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.vue_vue_type_script_setup_true_lang.mjs","names":["$slots"],"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 }\"\n      >\n        <el-focus-trap\n          loop\n          trapped\n          :focus-trap-el=\"wrapper\"\n          focus-start-el=\"container\"\n          @focusout-prevented=\"onFocusoutPrevented\"\n          @release-requested=\"onCloseRequested\"\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>\n              <Close />\n            </el-icon>\n          </span>\n\n          <!-- ARROW -->\n          <template v-if=\"!isSingle\">\n            <span :class=\"arrowPrevKls\" @click=\"prev\">\n              <el-icon>\n                <ArrowLeft />\n              </el-icon>\n            </span>\n            <span :class=\"arrowNextKls\" @click=\"next\">\n              <el-icon>\n                <ArrowRight />\n              </el-icon>\n            </span>\n          </template>\n          <div\n            v-if=\"$slots.progress || showProgress\"\n            :class=\"[ns.e('btn'), ns.e('progress')]\"\n          >\n            <slot\n              name=\"progress\"\n              :active-index=\"activeIndex\"\n              :total=\"urlList.length\"\n            >\n              {{ progress }}\n            </slot>\n          </div>\n          <!-- ACTIONS -->\n          <div :class=\"[ns.e('btn'), ns.e('actions')]\">\n            <div :class=\"ns.e('actions__inner')\">\n              <slot\n                name=\"toolbar\"\n                :actions=\"handleActions\"\n                :prev=\"prev\"\n                :next=\"next\"\n                :reset=\"toggleMode\"\n                :active-index=\"activeIndex\"\n                :set-active-item=\"setActiveItem\"\n              >\n                <el-icon @click=\"handleActions('zoomOut')\">\n                  <ZoomOut />\n                </el-icon>\n                <el-icon @click=\"handleActions('zoomIn')\">\n                  <ZoomIn />\n                </el-icon>\n                <i :class=\"ns.e('actions__divider')\" />\n                <el-icon @click=\"toggleMode\">\n                  <component :is=\"mode.icon\" />\n                </el-icon>\n                <i :class=\"ns.e('actions__divider')\" />\n                <el-icon @click=\"handleActions('anticlockwise')\">\n                  <RefreshLeft />\n                </el-icon>\n                <el-icon @click=\"handleActions('clockwise')\">\n                  <RefreshRight />\n                </el-icon>\n              </slot>\n            </div>\n          </div>\n          <!-- CANVAS -->\n          <div :class=\"ns.e('canvas')\">\n            <slot\n              v-if=\"loadError && $slots['viewer-error']\"\n              name=\"viewer-error\"\n              :active-index=\"activeIndex\"\n              :src=\"currentImg\"\n            />\n            <img\n              v-else\n              ref=\"imgRef\"\n              :key=\"currentImg\"\n              :src=\"currentImg\"\n              :style=\"imgStyle\"\n              :class=\"ns.e('img')\"\n              :crossorigin=\"crossorigin\"\n              @load=\"handleImgLoad\"\n              @error=\"handleImgError\"\n              @mousedown=\"handleMouseDown\"\n              @touchstart=\"handleTouchStart\"\n            />\n          </div>\n          <slot />\n        </el-focus-trap>\n      </div>\n    </transition>\n  </teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  effectScope,\n  markRaw,\n  nextTick,\n  onMounted,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { clamp, useEventListener } from '@vueuse/core'\nimport { throttle } from 'lodash-unified'\nimport {\n  useLocale,\n  useLockscreen,\n  useNamespace,\n  useZIndex,\n} from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { getEventCode, keysOf } from '@element-plus/utils'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElIcon from '@element-plus/components/icon'\nimport {\n  ArrowLeft,\n  ArrowRight,\n  Close,\n  FullScreen,\n  RefreshLeft,\n  RefreshRight,\n  ScaleToOriginal,\n  ZoomIn,\n  ZoomOut,\n} from '@element-plus/icons-vue'\nimport { imageViewerEmits } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\nimport type {\n  ImageViewerAction,\n  ImageViewerMode,\n  ImageViewerProps,\n} from './image-viewer'\n\nconst modes: Record<'CONTAIN' | 'ORIGINAL', ImageViewerMode> = {\n  CONTAIN: {\n    name: 'contain',\n    icon: markRaw(FullScreen),\n  },\n  ORIGINAL: {\n    name: 'original',\n    icon: markRaw(ScaleToOriginal),\n  },\n}\n\ndefineOptions({\n  name: 'ElImageViewer',\n})\n\nconst props = withDefaults(defineProps<ImageViewerProps>(), {\n  urlList: () => [],\n  initialIndex: 0,\n  infinite: true,\n  closeOnPressEscape: true,\n  zoomRate: 1.2,\n  scale: 1,\n  minScale: 0.2,\n  maxScale: 7,\n})\nconst emit = defineEmits(imageViewerEmits)\n\nlet stopWheelListener: (() => void) | undefined\n\nconst { t } = useLocale()\nconst ns = useNamespace('image-viewer')\nconst { nextZIndex } = useZIndex()\nconst wrapper = ref<HTMLDivElement>()\nconst imgRef = ref<HTMLImageElement>()\n\nconst scopeEventListener = effectScope()\n\nconst scaleClamped = computed(() => {\n  const { scale, minScale, maxScale } = props\n  return clamp(scale, minScale, maxScale)\n})\n\nconst loading = ref(true)\nconst loadError = ref(false)\nconst visible = ref(false)\nconst activeIndex = ref(props.initialIndex)\nconst mode = shallowRef<ImageViewerMode>(modes.CONTAIN)\nconst transform = ref({\n  scale: scaleClamped.value,\n  deg: 0,\n  offsetX: 0,\n  offsetY: 0,\n  enableTransition: false,\n})\nconst zIndex = ref(props.zIndex ?? nextZIndex())\n\nuseLockscreen(visible, { ns })\n\nconst isSingle = computed(() => {\n  const { urlList } = props\n  return urlList.length <= 1\n})\n\nconst isFirst = computed(() => activeIndex.value === 0)\n\nconst isLast = computed(() => activeIndex.value === props.urlList.length - 1)\n\nconst currentImg = computed(() => props.urlList[activeIndex.value])\n\nconst arrowPrevKls = computed(() => [\n  ns.e('btn'),\n  ns.e('prev'),\n  ns.is('disabled', !props.infinite && isFirst.value),\n])\n\nconst arrowNextKls = computed(() => [\n  ns.e('btn'),\n  ns.e('next'),\n  ns.is('disabled', !props.infinite && isLast.value),\n])\n\nconst imgStyle = computed(() => {\n  const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n  let translateX = offsetX / scale\n  let translateY = offsetY / scale\n\n  const radian = (deg * Math.PI) / 180\n  const cosRadian = Math.cos(radian)\n  const sinRadian = Math.sin(radian)\n  translateX = translateX * cosRadian + translateY * sinRadian\n  translateY = translateY * cosRadian - (offsetX / scale) * sinRadian\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 === modes.CONTAIN.name) {\n    style.maxWidth = style.maxHeight = '100%'\n  }\n  return style\n})\n\nconst progress = computed(\n  () => `${activeIndex.value + 1} / ${props.urlList.length}`\n)\n\nfunction hide() {\n  unregisterEventListener()\n  stopWheelListener?.()\n  visible.value = false\n  emit('close')\n}\n\nfunction registerEventListener() {\n  const keydownHandler = throttle((e: KeyboardEvent) => {\n    const code = getEventCode(e)\n\n    switch (code) {\n      // ESC\n      case EVENT_CODE.esc:\n        props.closeOnPressEscape && 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((e: WheelEvent) => {\n    const delta = e.deltaY || e.deltaX\n    handleActions(delta < 0 ? 'zoomIn' : 'zoomOut', {\n      zoomRate: props.zoomRate,\n      enableTransition: false,\n    })\n  })\n\n  scopeEventListener.run(() => {\n    useEventListener(document, 'keydown', keydownHandler)\n    useEventListener(wrapper, 'wheel', mousewheelHandler)\n  })\n}\n\nfunction unregisterEventListener() {\n  scopeEventListener.stop()\n}\n\nfunction handleImgLoad() {\n  loading.value = false\n}\n\nfunction handleImgError(e: Event) {\n  loadError.value = true\n  loading.value = false\n  emit('error', e)\n  ;(e.target as HTMLImageElement).alt = t('el.image.error')\n}\n\nfunction 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(document, 'mousemove', dragHandler)\n  const removeMouseup = useEventListener(document, 'mouseup', () => {\n    removeMousemove()\n    removeMouseup()\n  })\n\n  e.preventDefault()\n}\n\nfunction handleTouchStart(e: TouchEvent) {\n  if (loading.value || !wrapper.value || e.touches.length !== 1) return\n  transform.value.enableTransition = false\n\n  const { offsetX, offsetY } = transform.value\n  const { pageX: startX, pageY: startY } = e.touches[0]\n\n  const dragHandler = throttle((ev: TouchEvent) => {\n    const targetTouch = ev.touches[0]\n    transform.value = {\n      ...transform.value,\n      offsetX: offsetX + targetTouch.pageX - startX,\n      offsetY: offsetY + targetTouch.pageY - startY,\n    }\n  })\n  const removeTouchmove = useEventListener(document, 'touchmove', dragHandler)\n  const removeTouchend = useEventListener(document, 'touchend', () => {\n    removeTouchmove()\n    removeTouchend()\n  })\n\n  e.preventDefault()\n}\n\nfunction reset() {\n  transform.value = {\n    scale: scaleClamped.value,\n    deg: 0,\n    offsetX: 0,\n    offsetY: 0,\n    enableTransition: false,\n  }\n}\n\nfunction toggleMode() {\n  if (loading.value || loadError.value) return\n\n  const modeNames = keysOf(modes)\n  const modeValues = Object.values(modes)\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 = modes[modeNames[nextIndex]]\n  reset()\n}\n\nfunction setActiveItem(index: number) {\n  loadError.value = false\n  const len = props.urlList.length\n  activeIndex.value = (index + len) % len\n}\n\nfunction prev() {\n  if (isFirst.value && !props.infinite) return\n  setActiveItem(activeIndex.value - 1)\n}\n\nfunction next() {\n  if (isLast.value && !props.infinite) return\n  setActiveItem(activeIndex.value + 1)\n}\n\nfunction handleActions(action: ImageViewerAction, options = {}) {\n  if (loading.value || loadError.value) return\n  const { minScale, maxScale } = props\n  const { zoomRate, rotateDeg, enableTransition } = {\n    zoomRate: props.zoomRate,\n    rotateDeg: 90,\n    enableTransition: true,\n    ...options,\n  }\n  switch (action) {\n    case 'zoomOut':\n      if (transform.value.scale > minScale) {\n        transform.value.scale = Number.parseFloat(\n          (transform.value.scale / zoomRate).toFixed(3)\n        )\n      }\n      break\n    case 'zoomIn':\n      if (transform.value.scale < maxScale) {\n        transform.value.scale = Number.parseFloat(\n          (transform.value.scale * zoomRate).toFixed(3)\n        )\n      }\n      break\n    case 'clockwise':\n      transform.value.deg += rotateDeg\n      emit('rotate', transform.value.deg)\n      break\n    case 'anticlockwise':\n      transform.value.deg -= rotateDeg\n      emit('rotate', transform.value.deg)\n      break\n  }\n  transform.value.enableTransition = enableTransition\n}\n\nfunction onFocusoutPrevented(event: CustomEvent) {\n  if (event.detail?.focusReason === 'pointer') {\n    event.preventDefault()\n  }\n}\n\nfunction onCloseRequested() {\n  if (props.closeOnPressEscape) {\n    hide()\n  }\n}\n\nfunction 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\nwatch(\n  () => scaleClamped.value,\n  (val) => {\n    transform.value.scale = val\n  }\n)\n\nwatch(currentImg, () => {\n  nextTick(() => {\n    const $img = imgRef.value\n    if (!$img?.complete) {\n      loading.value = true\n    }\n  })\n})\n\nwatch(activeIndex, (val) => {\n  reset()\n  emit('switch', val)\n})\n\nonMounted(() => {\n  visible.value = true\n  registerEventListener()\n\n  stopWheelListener = useEventListener('wheel', wheelHandler, {\n    passive: false,\n  })\n})\n\ndefineExpose({\n  /**\n   * @description manually switch image\n   */\n  setActiveItem,\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"image-viewer.vue_vue_type_script_setup_true_lang.mjs","names":["$slots"],"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 }\"\n      >\n        <el-focus-trap\n          loop\n          trapped\n          :focus-trap-el=\"wrapper\"\n          focus-start-el=\"container\"\n          @focusout-prevented=\"onFocusoutPrevented\"\n          @release-requested=\"onCloseRequested\"\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>\n              <Close />\n            </el-icon>\n          </span>\n\n          <!-- ARROW -->\n          <template v-if=\"!isSingle\">\n            <span :class=\"arrowPrevKls\" @click=\"prev\">\n              <el-icon>\n                <ArrowLeft />\n              </el-icon>\n            </span>\n            <span :class=\"arrowNextKls\" @click=\"next\">\n              <el-icon>\n                <ArrowRight />\n              </el-icon>\n            </span>\n          </template>\n          <div\n            v-if=\"$slots.progress || showProgress\"\n            :class=\"[ns.e('btn'), ns.e('progress')]\"\n          >\n            <slot\n              name=\"progress\"\n              :active-index=\"activeIndex\"\n              :total=\"urlList.length\"\n            >\n              {{ progress }}\n            </slot>\n          </div>\n          <!-- ACTIONS -->\n          <div :class=\"[ns.e('btn'), ns.e('actions')]\">\n            <div :class=\"ns.e('actions__inner')\">\n              <slot\n                name=\"toolbar\"\n                :actions=\"handleActions\"\n                :prev=\"prev\"\n                :next=\"next\"\n                :reset=\"toggleMode\"\n                :active-index=\"activeIndex\"\n                :set-active-item=\"setActiveItem\"\n              >\n                <el-icon @click=\"handleActions('zoomOut')\">\n                  <ZoomOut />\n                </el-icon>\n                <el-icon @click=\"handleActions('zoomIn')\">\n                  <ZoomIn />\n                </el-icon>\n                <i :class=\"ns.e('actions__divider')\" />\n                <el-icon @click=\"toggleMode\">\n                  <component :is=\"mode.icon\" />\n                </el-icon>\n                <i :class=\"ns.e('actions__divider')\" />\n                <el-icon @click=\"handleActions('anticlockwise')\">\n                  <RefreshLeft />\n                </el-icon>\n                <el-icon @click=\"handleActions('clockwise')\">\n                  <RefreshRight />\n                </el-icon>\n              </slot>\n            </div>\n          </div>\n          <!-- CANVAS -->\n          <div :class=\"ns.e('canvas')\">\n            <slot\n              v-if=\"loadError && $slots['viewer-error']\"\n              name=\"viewer-error\"\n              :active-index=\"activeIndex\"\n              :src=\"currentImg\"\n            />\n            <img\n              v-else\n              ref=\"imgRef\"\n              :key=\"currentImg\"\n              :src=\"currentImg\"\n              :style=\"imgStyle\"\n              :class=\"[\n                ns.e('img'),\n                ns.is('loading', loading && !!$slots['viewer-placeholder']),\n              ]\"\n              :crossorigin=\"crossorigin\"\n              @load=\"handleImgLoad\"\n              @error=\"handleImgError\"\n              @mousedown=\"handleMouseDown\"\n              @touchstart=\"handleTouchStart\"\n            />\n            <div\n              v-if=\"loading && $slots['viewer-placeholder']\"\n              :class=\"ns.e('placeholder')\"\n            >\n              <slot\n                name=\"viewer-placeholder\"\n                :active-index=\"activeIndex\"\n                :src=\"currentImg\"\n              />\n            </div>\n          </div>\n          <slot />\n        </el-focus-trap>\n      </div>\n    </transition>\n  </teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  effectScope,\n  markRaw,\n  nextTick,\n  onMounted,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { clamp, useEventListener } from '@vueuse/core'\nimport { throttle } from 'lodash-unified'\nimport {\n  useLocale,\n  useLockscreen,\n  useNamespace,\n  useZIndex,\n} from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { getEventCode, keysOf } from '@element-plus/utils'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElIcon from '@element-plus/components/icon'\nimport {\n  ArrowLeft,\n  ArrowRight,\n  Close,\n  FullScreen,\n  RefreshLeft,\n  RefreshRight,\n  ScaleToOriginal,\n  ZoomIn,\n  ZoomOut,\n} from '@element-plus/icons-vue'\nimport { imageViewerEmits } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\nimport type {\n  ImageViewerAction,\n  ImageViewerMode,\n  ImageViewerProps,\n} from './image-viewer'\n\nconst modes: Record<'CONTAIN' | 'ORIGINAL', ImageViewerMode> = {\n  CONTAIN: {\n    name: 'contain',\n    icon: markRaw(FullScreen),\n  },\n  ORIGINAL: {\n    name: 'original',\n    icon: markRaw(ScaleToOriginal),\n  },\n}\n\ndefineOptions({\n  name: 'ElImageViewer',\n})\n\nconst props = withDefaults(defineProps<ImageViewerProps>(), {\n  urlList: () => [],\n  initialIndex: 0,\n  infinite: true,\n  closeOnPressEscape: true,\n  zoomRate: 1.2,\n  scale: 1,\n  minScale: 0.2,\n  maxScale: 7,\n})\nconst emit = defineEmits(imageViewerEmits)\n\nlet stopWheelListener: (() => void) | undefined\n\nconst { t } = useLocale()\nconst ns = useNamespace('image-viewer')\nconst { nextZIndex } = useZIndex()\nconst wrapper = ref<HTMLDivElement>()\nconst imgRef = ref<HTMLImageElement>()\n\nconst scopeEventListener = effectScope()\n\nconst scaleClamped = computed(() => {\n  const { scale, minScale, maxScale } = props\n  return clamp(scale, minScale, maxScale)\n})\n\nconst loading = ref(true)\nconst loadError = ref(false)\nconst visible = ref(false)\nconst activeIndex = ref(props.initialIndex)\nconst mode = shallowRef<ImageViewerMode>(modes.CONTAIN)\nconst transform = ref({\n  scale: scaleClamped.value,\n  deg: 0,\n  offsetX: 0,\n  offsetY: 0,\n  enableTransition: false,\n})\nconst zIndex = ref(props.zIndex ?? nextZIndex())\n\nuseLockscreen(visible, { ns })\n\nconst isSingle = computed(() => {\n  const { urlList } = props\n  return urlList.length <= 1\n})\n\nconst isFirst = computed(() => activeIndex.value === 0)\n\nconst isLast = computed(() => activeIndex.value === props.urlList.length - 1)\n\nconst currentImg = computed(() => props.urlList[activeIndex.value])\n\nconst arrowPrevKls = computed(() => [\n  ns.e('btn'),\n  ns.e('prev'),\n  ns.is('disabled', !props.infinite && isFirst.value),\n])\n\nconst arrowNextKls = computed(() => [\n  ns.e('btn'),\n  ns.e('next'),\n  ns.is('disabled', !props.infinite && isLast.value),\n])\n\nconst imgStyle = computed(() => {\n  const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n  let translateX = offsetX / scale\n  let translateY = offsetY / scale\n\n  const radian = (deg * Math.PI) / 180\n  const cosRadian = Math.cos(radian)\n  const sinRadian = Math.sin(radian)\n  translateX = translateX * cosRadian + translateY * sinRadian\n  translateY = translateY * cosRadian - (offsetX / scale) * sinRadian\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 === modes.CONTAIN.name) {\n    style.maxWidth = style.maxHeight = '100%'\n  }\n  return style\n})\n\nconst progress = computed(\n  () => `${activeIndex.value + 1} / ${props.urlList.length}`\n)\n\nfunction hide() {\n  unregisterEventListener()\n  stopWheelListener?.()\n  visible.value = false\n  emit('close')\n}\n\nfunction registerEventListener() {\n  const keydownHandler = throttle((e: KeyboardEvent) => {\n    const code = getEventCode(e)\n\n    switch (code) {\n      // ESC\n      case EVENT_CODE.esc:\n        props.closeOnPressEscape && 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((e: WheelEvent) => {\n    const delta = e.deltaY || e.deltaX\n    handleActions(delta < 0 ? 'zoomIn' : 'zoomOut', {\n      zoomRate: props.zoomRate,\n      enableTransition: false,\n    })\n  })\n\n  scopeEventListener.run(() => {\n    useEventListener(document, 'keydown', keydownHandler)\n    useEventListener(wrapper, 'wheel', mousewheelHandler)\n  })\n}\n\nfunction unregisterEventListener() {\n  scopeEventListener.stop()\n}\n\nfunction handleImgLoad() {\n  loading.value = false\n}\n\nfunction handleImgError(e: Event) {\n  loadError.value = true\n  loading.value = false\n  emit('error', e)\n  ;(e.target as HTMLImageElement).alt = t('el.image.error')\n}\n\nfunction 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(document, 'mousemove', dragHandler)\n  const removeMouseup = useEventListener(document, 'mouseup', () => {\n    removeMousemove()\n    removeMouseup()\n  })\n\n  e.preventDefault()\n}\n\nfunction handleTouchStart(e: TouchEvent) {\n  if (loading.value || !wrapper.value || e.touches.length !== 1) return\n  transform.value.enableTransition = false\n\n  const { offsetX, offsetY } = transform.value\n  const { pageX: startX, pageY: startY } = e.touches[0]\n\n  const dragHandler = throttle((ev: TouchEvent) => {\n    const targetTouch = ev.touches[0]\n    transform.value = {\n      ...transform.value,\n      offsetX: offsetX + targetTouch.pageX - startX,\n      offsetY: offsetY + targetTouch.pageY - startY,\n    }\n  })\n  const removeTouchmove = useEventListener(document, 'touchmove', dragHandler)\n  const removeTouchend = useEventListener(document, 'touchend', () => {\n    removeTouchmove()\n    removeTouchend()\n  })\n\n  e.preventDefault()\n}\n\nfunction reset() {\n  transform.value = {\n    scale: scaleClamped.value,\n    deg: 0,\n    offsetX: 0,\n    offsetY: 0,\n    enableTransition: false,\n  }\n}\n\nfunction toggleMode() {\n  if (loading.value || loadError.value) return\n\n  const modeNames = keysOf(modes)\n  const modeValues = Object.values(modes)\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 = modes[modeNames[nextIndex]]\n  reset()\n}\n\nfunction setActiveItem(index: number) {\n  loadError.value = false\n  const len = props.urlList.length\n  activeIndex.value = (index + len) % len\n}\n\nfunction prev() {\n  if (isFirst.value && !props.infinite) return\n  setActiveItem(activeIndex.value - 1)\n}\n\nfunction next() {\n  if (isLast.value && !props.infinite) return\n  setActiveItem(activeIndex.value + 1)\n}\n\nfunction handleActions(action: ImageViewerAction, options = {}) {\n  if (loading.value || loadError.value) return\n  const { minScale, maxScale } = props\n  const { zoomRate, rotateDeg, enableTransition } = {\n    zoomRate: props.zoomRate,\n    rotateDeg: 90,\n    enableTransition: true,\n    ...options,\n  }\n  switch (action) {\n    case 'zoomOut':\n      if (transform.value.scale > minScale) {\n        transform.value.scale = Number.parseFloat(\n          (transform.value.scale / zoomRate).toFixed(3)\n        )\n      }\n      break\n    case 'zoomIn':\n      if (transform.value.scale < maxScale) {\n        transform.value.scale = Number.parseFloat(\n          (transform.value.scale * zoomRate).toFixed(3)\n        )\n      }\n      break\n    case 'clockwise':\n      transform.value.deg += rotateDeg\n      emit('rotate', transform.value.deg)\n      break\n    case 'anticlockwise':\n      transform.value.deg -= rotateDeg\n      emit('rotate', transform.value.deg)\n      break\n  }\n  transform.value.enableTransition = enableTransition\n}\n\nfunction onFocusoutPrevented(event: CustomEvent) {\n  if (event.detail?.focusReason === 'pointer') {\n    event.preventDefault()\n  }\n}\n\nfunction onCloseRequested() {\n  if (props.closeOnPressEscape) {\n    hide()\n  }\n}\n\nfunction 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\nwatch(\n  () => scaleClamped.value,\n  (val) => {\n    transform.value.scale = val\n  }\n)\n\nwatch(currentImg, () => {\n  nextTick(() => {\n    const $img = imgRef.value\n    if (!$img?.complete) {\n      loading.value = true\n    }\n  })\n})\n\nwatch(activeIndex, (val) => {\n  reset()\n  emit('switch', val)\n})\n\nonMounted(() => {\n  visible.value = true\n  registerEventListener()\n\n  stopWheelListener = useEventListener('wheel', wheelHandler, {\n    passive: false,\n  })\n})\n\ndefineExpose({\n  /**\n   * @description manually switch image\n   */\n  setActiveItem,\n})\n</script>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"image-viewer2.mjs","names":[],"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 }\"\n      >\n        <el-focus-trap\n          loop\n          trapped\n          :focus-trap-el=\"wrapper\"\n          focus-start-el=\"container\"\n          @focusout-prevented=\"onFocusoutPrevented\"\n          @release-requested=\"onCloseRequested\"\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>\n              <Close />\n            </el-icon>\n          </span>\n\n          <!-- ARROW -->\n          <template v-if=\"!isSingle\">\n            <span :class=\"arrowPrevKls\" @click=\"prev\">\n              <el-icon>\n                <ArrowLeft />\n              </el-icon>\n            </span>\n            <span :class=\"arrowNextKls\" @click=\"next\">\n              <el-icon>\n                <ArrowRight />\n              </el-icon>\n            </span>\n          </template>\n          <div\n            v-if=\"$slots.progress || showProgress\"\n            :class=\"[ns.e('btn'), ns.e('progress')]\"\n          >\n            <slot\n              name=\"progress\"\n              :active-index=\"activeIndex\"\n              :total=\"urlList.length\"\n            >\n              {{ progress }}\n            </slot>\n          </div>\n          <!-- ACTIONS -->\n          <div :class=\"[ns.e('btn'), ns.e('actions')]\">\n            <div :class=\"ns.e('actions__inner')\">\n              <slot\n                name=\"toolbar\"\n                :actions=\"handleActions\"\n                :prev=\"prev\"\n                :next=\"next\"\n                :reset=\"toggleMode\"\n                :active-index=\"activeIndex\"\n                :set-active-item=\"setActiveItem\"\n              >\n                <el-icon @click=\"handleActions('zoomOut')\">\n                  <ZoomOut />\n                </el-icon>\n                <el-icon @click=\"handleActions('zoomIn')\">\n                  <ZoomIn />\n                </el-icon>\n                <i :class=\"ns.e('actions__divider')\" />\n                <el-icon @click=\"toggleMode\">\n                  <component :is=\"mode.icon\" />\n                </el-icon>\n                <i :class=\"ns.e('actions__divider')\" />\n                <el-icon @click=\"handleActions('anticlockwise')\">\n                  <RefreshLeft />\n                </el-icon>\n                <el-icon @click=\"handleActions('clockwise')\">\n                  <RefreshRight />\n                </el-icon>\n              </slot>\n            </div>\n          </div>\n          <!-- CANVAS -->\n          <div :class=\"ns.e('canvas')\">\n            <slot\n              v-if=\"loadError && $slots['viewer-error']\"\n              name=\"viewer-error\"\n              :active-index=\"activeIndex\"\n              :src=\"currentImg\"\n            />\n            <img\n              v-else\n              ref=\"imgRef\"\n              :key=\"currentImg\"\n              :src=\"currentImg\"\n              :style=\"imgStyle\"\n              :class=\"ns.e('img')\"\n              :crossorigin=\"crossorigin\"\n              @load=\"handleImgLoad\"\n              @error=\"handleImgError\"\n              @mousedown=\"handleMouseDown\"\n              @touchstart=\"handleTouchStart\"\n            />\n          </div>\n          <slot />\n        </el-focus-trap>\n      </div>\n    </transition>\n  </teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  effectScope,\n  markRaw,\n  nextTick,\n  onMounted,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { clamp, useEventListener } from '@vueuse/core'\nimport { throttle } from 'lodash-unified'\nimport {\n  useLocale,\n  useLockscreen,\n  useNamespace,\n  useZIndex,\n} from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { getEventCode, keysOf } from '@element-plus/utils'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElIcon from '@element-plus/components/icon'\nimport {\n  ArrowLeft,\n  ArrowRight,\n  Close,\n  FullScreen,\n  RefreshLeft,\n  RefreshRight,\n  ScaleToOriginal,\n  ZoomIn,\n  ZoomOut,\n} from '@element-plus/icons-vue'\nimport { imageViewerEmits } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\nimport type {\n  ImageViewerAction,\n  ImageViewerMode,\n  ImageViewerProps,\n} from './image-viewer'\n\nconst modes: Record<'CONTAIN' | 'ORIGINAL', ImageViewerMode> = {\n  CONTAIN: {\n    name: 'contain',\n    icon: markRaw(FullScreen),\n  },\n  ORIGINAL: {\n    name: 'original',\n    icon: markRaw(ScaleToOriginal),\n  },\n}\n\ndefineOptions({\n  name: 'ElImageViewer',\n})\n\nconst props = withDefaults(defineProps<ImageViewerProps>(), {\n  urlList: () => [],\n  initialIndex: 0,\n  infinite: true,\n  closeOnPressEscape: true,\n  zoomRate: 1.2,\n  scale: 1,\n  minScale: 0.2,\n  maxScale: 7,\n})\nconst emit = defineEmits(imageViewerEmits)\n\nlet stopWheelListener: (() => void) | undefined\n\nconst { t } = useLocale()\nconst ns = useNamespace('image-viewer')\nconst { nextZIndex } = useZIndex()\nconst wrapper = ref<HTMLDivElement>()\nconst imgRef = ref<HTMLImageElement>()\n\nconst scopeEventListener = effectScope()\n\nconst scaleClamped = computed(() => {\n  const { scale, minScale, maxScale } = props\n  return clamp(scale, minScale, maxScale)\n})\n\nconst loading = ref(true)\nconst loadError = ref(false)\nconst visible = ref(false)\nconst activeIndex = ref(props.initialIndex)\nconst mode = shallowRef<ImageViewerMode>(modes.CONTAIN)\nconst transform = ref({\n  scale: scaleClamped.value,\n  deg: 0,\n  offsetX: 0,\n  offsetY: 0,\n  enableTransition: false,\n})\nconst zIndex = ref(props.zIndex ?? nextZIndex())\n\nuseLockscreen(visible, { ns })\n\nconst isSingle = computed(() => {\n  const { urlList } = props\n  return urlList.length <= 1\n})\n\nconst isFirst = computed(() => activeIndex.value === 0)\n\nconst isLast = computed(() => activeIndex.value === props.urlList.length - 1)\n\nconst currentImg = computed(() => props.urlList[activeIndex.value])\n\nconst arrowPrevKls = computed(() => [\n  ns.e('btn'),\n  ns.e('prev'),\n  ns.is('disabled', !props.infinite && isFirst.value),\n])\n\nconst arrowNextKls = computed(() => [\n  ns.e('btn'),\n  ns.e('next'),\n  ns.is('disabled', !props.infinite && isLast.value),\n])\n\nconst imgStyle = computed(() => {\n  const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n  let translateX = offsetX / scale\n  let translateY = offsetY / scale\n\n  const radian = (deg * Math.PI) / 180\n  const cosRadian = Math.cos(radian)\n  const sinRadian = Math.sin(radian)\n  translateX = translateX * cosRadian + translateY * sinRadian\n  translateY = translateY * cosRadian - (offsetX / scale) * sinRadian\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 === modes.CONTAIN.name) {\n    style.maxWidth = style.maxHeight = '100%'\n  }\n  return style\n})\n\nconst progress = computed(\n  () => `${activeIndex.value + 1} / ${props.urlList.length}`\n)\n\nfunction hide() {\n  unregisterEventListener()\n  stopWheelListener?.()\n  visible.value = false\n  emit('close')\n}\n\nfunction registerEventListener() {\n  const keydownHandler = throttle((e: KeyboardEvent) => {\n    const code = getEventCode(e)\n\n    switch (code) {\n      // ESC\n      case EVENT_CODE.esc:\n        props.closeOnPressEscape && 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((e: WheelEvent) => {\n    const delta = e.deltaY || e.deltaX\n    handleActions(delta < 0 ? 'zoomIn' : 'zoomOut', {\n      zoomRate: props.zoomRate,\n      enableTransition: false,\n    })\n  })\n\n  scopeEventListener.run(() => {\n    useEventListener(document, 'keydown', keydownHandler)\n    useEventListener(wrapper, 'wheel', mousewheelHandler)\n  })\n}\n\nfunction unregisterEventListener() {\n  scopeEventListener.stop()\n}\n\nfunction handleImgLoad() {\n  loading.value = false\n}\n\nfunction handleImgError(e: Event) {\n  loadError.value = true\n  loading.value = false\n  emit('error', e)\n  ;(e.target as HTMLImageElement).alt = t('el.image.error')\n}\n\nfunction 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(document, 'mousemove', dragHandler)\n  const removeMouseup = useEventListener(document, 'mouseup', () => {\n    removeMousemove()\n    removeMouseup()\n  })\n\n  e.preventDefault()\n}\n\nfunction handleTouchStart(e: TouchEvent) {\n  if (loading.value || !wrapper.value || e.touches.length !== 1) return\n  transform.value.enableTransition = false\n\n  const { offsetX, offsetY } = transform.value\n  const { pageX: startX, pageY: startY } = e.touches[0]\n\n  const dragHandler = throttle((ev: TouchEvent) => {\n    const targetTouch = ev.touches[0]\n    transform.value = {\n      ...transform.value,\n      offsetX: offsetX + targetTouch.pageX - startX,\n      offsetY: offsetY + targetTouch.pageY - startY,\n    }\n  })\n  const removeTouchmove = useEventListener(document, 'touchmove', dragHandler)\n  const removeTouchend = useEventListener(document, 'touchend', () => {\n    removeTouchmove()\n    removeTouchend()\n  })\n\n  e.preventDefault()\n}\n\nfunction reset() {\n  transform.value = {\n    scale: scaleClamped.value,\n    deg: 0,\n    offsetX: 0,\n    offsetY: 0,\n    enableTransition: false,\n  }\n}\n\nfunction toggleMode() {\n  if (loading.value || loadError.value) return\n\n  const modeNames = keysOf(modes)\n  const modeValues = Object.values(modes)\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 = modes[modeNames[nextIndex]]\n  reset()\n}\n\nfunction setActiveItem(index: number) {\n  loadError.value = false\n  const len = props.urlList.length\n  activeIndex.value = (index + len) % len\n}\n\nfunction prev() {\n  if (isFirst.value && !props.infinite) return\n  setActiveItem(activeIndex.value - 1)\n}\n\nfunction next() {\n  if (isLast.value && !props.infinite) return\n  setActiveItem(activeIndex.value + 1)\n}\n\nfunction handleActions(action: ImageViewerAction, options = {}) {\n  if (loading.value || loadError.value) return\n  const { minScale, maxScale } = props\n  const { zoomRate, rotateDeg, enableTransition } = {\n    zoomRate: props.zoomRate,\n    rotateDeg: 90,\n    enableTransition: true,\n    ...options,\n  }\n  switch (action) {\n    case 'zoomOut':\n      if (transform.value.scale > minScale) {\n        transform.value.scale = Number.parseFloat(\n          (transform.value.scale / zoomRate).toFixed(3)\n        )\n      }\n      break\n    case 'zoomIn':\n      if (transform.value.scale < maxScale) {\n        transform.value.scale = Number.parseFloat(\n          (transform.value.scale * zoomRate).toFixed(3)\n        )\n      }\n      break\n    case 'clockwise':\n      transform.value.deg += rotateDeg\n      emit('rotate', transform.value.deg)\n      break\n    case 'anticlockwise':\n      transform.value.deg -= rotateDeg\n      emit('rotate', transform.value.deg)\n      break\n  }\n  transform.value.enableTransition = enableTransition\n}\n\nfunction onFocusoutPrevented(event: CustomEvent) {\n  if (event.detail?.focusReason === 'pointer') {\n    event.preventDefault()\n  }\n}\n\nfunction onCloseRequested() {\n  if (props.closeOnPressEscape) {\n    hide()\n  }\n}\n\nfunction 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\nwatch(\n  () => scaleClamped.value,\n  (val) => {\n    transform.value.scale = val\n  }\n)\n\nwatch(currentImg, () => {\n  nextTick(() => {\n    const $img = imgRef.value\n    if (!$img?.complete) {\n      loading.value = true\n    }\n  })\n})\n\nwatch(activeIndex, (val) => {\n  reset()\n  emit('switch', val)\n})\n\nonMounted(() => {\n  visible.value = true\n  registerEventListener()\n\n  stopWheelListener = useEventListener('wheel', wheelHandler, {\n    passive: false,\n  })\n})\n\ndefineExpose({\n  /**\n   * @description manually switch image\n   */\n  setActiveItem,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"image-viewer2.mjs","names":[],"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 }\"\n      >\n        <el-focus-trap\n          loop\n          trapped\n          :focus-trap-el=\"wrapper\"\n          focus-start-el=\"container\"\n          @focusout-prevented=\"onFocusoutPrevented\"\n          @release-requested=\"onCloseRequested\"\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>\n              <Close />\n            </el-icon>\n          </span>\n\n          <!-- ARROW -->\n          <template v-if=\"!isSingle\">\n            <span :class=\"arrowPrevKls\" @click=\"prev\">\n              <el-icon>\n                <ArrowLeft />\n              </el-icon>\n            </span>\n            <span :class=\"arrowNextKls\" @click=\"next\">\n              <el-icon>\n                <ArrowRight />\n              </el-icon>\n            </span>\n          </template>\n          <div\n            v-if=\"$slots.progress || showProgress\"\n            :class=\"[ns.e('btn'), ns.e('progress')]\"\n          >\n            <slot\n              name=\"progress\"\n              :active-index=\"activeIndex\"\n              :total=\"urlList.length\"\n            >\n              {{ progress }}\n            </slot>\n          </div>\n          <!-- ACTIONS -->\n          <div :class=\"[ns.e('btn'), ns.e('actions')]\">\n            <div :class=\"ns.e('actions__inner')\">\n              <slot\n                name=\"toolbar\"\n                :actions=\"handleActions\"\n                :prev=\"prev\"\n                :next=\"next\"\n                :reset=\"toggleMode\"\n                :active-index=\"activeIndex\"\n                :set-active-item=\"setActiveItem\"\n              >\n                <el-icon @click=\"handleActions('zoomOut')\">\n                  <ZoomOut />\n                </el-icon>\n                <el-icon @click=\"handleActions('zoomIn')\">\n                  <ZoomIn />\n                </el-icon>\n                <i :class=\"ns.e('actions__divider')\" />\n                <el-icon @click=\"toggleMode\">\n                  <component :is=\"mode.icon\" />\n                </el-icon>\n                <i :class=\"ns.e('actions__divider')\" />\n                <el-icon @click=\"handleActions('anticlockwise')\">\n                  <RefreshLeft />\n                </el-icon>\n                <el-icon @click=\"handleActions('clockwise')\">\n                  <RefreshRight />\n                </el-icon>\n              </slot>\n            </div>\n          </div>\n          <!-- CANVAS -->\n          <div :class=\"ns.e('canvas')\">\n            <slot\n              v-if=\"loadError && $slots['viewer-error']\"\n              name=\"viewer-error\"\n              :active-index=\"activeIndex\"\n              :src=\"currentImg\"\n            />\n            <img\n              v-else\n              ref=\"imgRef\"\n              :key=\"currentImg\"\n              :src=\"currentImg\"\n              :style=\"imgStyle\"\n              :class=\"[\n                ns.e('img'),\n                ns.is('loading', loading && !!$slots['viewer-placeholder']),\n              ]\"\n              :crossorigin=\"crossorigin\"\n              @load=\"handleImgLoad\"\n              @error=\"handleImgError\"\n              @mousedown=\"handleMouseDown\"\n              @touchstart=\"handleTouchStart\"\n            />\n            <div\n              v-if=\"loading && $slots['viewer-placeholder']\"\n              :class=\"ns.e('placeholder')\"\n            >\n              <slot\n                name=\"viewer-placeholder\"\n                :active-index=\"activeIndex\"\n                :src=\"currentImg\"\n              />\n            </div>\n          </div>\n          <slot />\n        </el-focus-trap>\n      </div>\n    </transition>\n  </teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  effectScope,\n  markRaw,\n  nextTick,\n  onMounted,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { clamp, useEventListener } from '@vueuse/core'\nimport { throttle } from 'lodash-unified'\nimport {\n  useLocale,\n  useLockscreen,\n  useNamespace,\n  useZIndex,\n} from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { getEventCode, keysOf } from '@element-plus/utils'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElIcon from '@element-plus/components/icon'\nimport {\n  ArrowLeft,\n  ArrowRight,\n  Close,\n  FullScreen,\n  RefreshLeft,\n  RefreshRight,\n  ScaleToOriginal,\n  ZoomIn,\n  ZoomOut,\n} from '@element-plus/icons-vue'\nimport { imageViewerEmits } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\nimport type {\n  ImageViewerAction,\n  ImageViewerMode,\n  ImageViewerProps,\n} from './image-viewer'\n\nconst modes: Record<'CONTAIN' | 'ORIGINAL', ImageViewerMode> = {\n  CONTAIN: {\n    name: 'contain',\n    icon: markRaw(FullScreen),\n  },\n  ORIGINAL: {\n    name: 'original',\n    icon: markRaw(ScaleToOriginal),\n  },\n}\n\ndefineOptions({\n  name: 'ElImageViewer',\n})\n\nconst props = withDefaults(defineProps<ImageViewerProps>(), {\n  urlList: () => [],\n  initialIndex: 0,\n  infinite: true,\n  closeOnPressEscape: true,\n  zoomRate: 1.2,\n  scale: 1,\n  minScale: 0.2,\n  maxScale: 7,\n})\nconst emit = defineEmits(imageViewerEmits)\n\nlet stopWheelListener: (() => void) | undefined\n\nconst { t } = useLocale()\nconst ns = useNamespace('image-viewer')\nconst { nextZIndex } = useZIndex()\nconst wrapper = ref<HTMLDivElement>()\nconst imgRef = ref<HTMLImageElement>()\n\nconst scopeEventListener = effectScope()\n\nconst scaleClamped = computed(() => {\n  const { scale, minScale, maxScale } = props\n  return clamp(scale, minScale, maxScale)\n})\n\nconst loading = ref(true)\nconst loadError = ref(false)\nconst visible = ref(false)\nconst activeIndex = ref(props.initialIndex)\nconst mode = shallowRef<ImageViewerMode>(modes.CONTAIN)\nconst transform = ref({\n  scale: scaleClamped.value,\n  deg: 0,\n  offsetX: 0,\n  offsetY: 0,\n  enableTransition: false,\n})\nconst zIndex = ref(props.zIndex ?? nextZIndex())\n\nuseLockscreen(visible, { ns })\n\nconst isSingle = computed(() => {\n  const { urlList } = props\n  return urlList.length <= 1\n})\n\nconst isFirst = computed(() => activeIndex.value === 0)\n\nconst isLast = computed(() => activeIndex.value === props.urlList.length - 1)\n\nconst currentImg = computed(() => props.urlList[activeIndex.value])\n\nconst arrowPrevKls = computed(() => [\n  ns.e('btn'),\n  ns.e('prev'),\n  ns.is('disabled', !props.infinite && isFirst.value),\n])\n\nconst arrowNextKls = computed(() => [\n  ns.e('btn'),\n  ns.e('next'),\n  ns.is('disabled', !props.infinite && isLast.value),\n])\n\nconst imgStyle = computed(() => {\n  const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n  let translateX = offsetX / scale\n  let translateY = offsetY / scale\n\n  const radian = (deg * Math.PI) / 180\n  const cosRadian = Math.cos(radian)\n  const sinRadian = Math.sin(radian)\n  translateX = translateX * cosRadian + translateY * sinRadian\n  translateY = translateY * cosRadian - (offsetX / scale) * sinRadian\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 === modes.CONTAIN.name) {\n    style.maxWidth = style.maxHeight = '100%'\n  }\n  return style\n})\n\nconst progress = computed(\n  () => `${activeIndex.value + 1} / ${props.urlList.length}`\n)\n\nfunction hide() {\n  unregisterEventListener()\n  stopWheelListener?.()\n  visible.value = false\n  emit('close')\n}\n\nfunction registerEventListener() {\n  const keydownHandler = throttle((e: KeyboardEvent) => {\n    const code = getEventCode(e)\n\n    switch (code) {\n      // ESC\n      case EVENT_CODE.esc:\n        props.closeOnPressEscape && 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((e: WheelEvent) => {\n    const delta = e.deltaY || e.deltaX\n    handleActions(delta < 0 ? 'zoomIn' : 'zoomOut', {\n      zoomRate: props.zoomRate,\n      enableTransition: false,\n    })\n  })\n\n  scopeEventListener.run(() => {\n    useEventListener(document, 'keydown', keydownHandler)\n    useEventListener(wrapper, 'wheel', mousewheelHandler)\n  })\n}\n\nfunction unregisterEventListener() {\n  scopeEventListener.stop()\n}\n\nfunction handleImgLoad() {\n  loading.value = false\n}\n\nfunction handleImgError(e: Event) {\n  loadError.value = true\n  loading.value = false\n  emit('error', e)\n  ;(e.target as HTMLImageElement).alt = t('el.image.error')\n}\n\nfunction 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(document, 'mousemove', dragHandler)\n  const removeMouseup = useEventListener(document, 'mouseup', () => {\n    removeMousemove()\n    removeMouseup()\n  })\n\n  e.preventDefault()\n}\n\nfunction handleTouchStart(e: TouchEvent) {\n  if (loading.value || !wrapper.value || e.touches.length !== 1) return\n  transform.value.enableTransition = false\n\n  const { offsetX, offsetY } = transform.value\n  const { pageX: startX, pageY: startY } = e.touches[0]\n\n  const dragHandler = throttle((ev: TouchEvent) => {\n    const targetTouch = ev.touches[0]\n    transform.value = {\n      ...transform.value,\n      offsetX: offsetX + targetTouch.pageX - startX,\n      offsetY: offsetY + targetTouch.pageY - startY,\n    }\n  })\n  const removeTouchmove = useEventListener(document, 'touchmove', dragHandler)\n  const removeTouchend = useEventListener(document, 'touchend', () => {\n    removeTouchmove()\n    removeTouchend()\n  })\n\n  e.preventDefault()\n}\n\nfunction reset() {\n  transform.value = {\n    scale: scaleClamped.value,\n    deg: 0,\n    offsetX: 0,\n    offsetY: 0,\n    enableTransition: false,\n  }\n}\n\nfunction toggleMode() {\n  if (loading.value || loadError.value) return\n\n  const modeNames = keysOf(modes)\n  const modeValues = Object.values(modes)\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 = modes[modeNames[nextIndex]]\n  reset()\n}\n\nfunction setActiveItem(index: number) {\n  loadError.value = false\n  const len = props.urlList.length\n  activeIndex.value = (index + len) % len\n}\n\nfunction prev() {\n  if (isFirst.value && !props.infinite) return\n  setActiveItem(activeIndex.value - 1)\n}\n\nfunction next() {\n  if (isLast.value && !props.infinite) return\n  setActiveItem(activeIndex.value + 1)\n}\n\nfunction handleActions(action: ImageViewerAction, options = {}) {\n  if (loading.value || loadError.value) return\n  const { minScale, maxScale } = props\n  const { zoomRate, rotateDeg, enableTransition } = {\n    zoomRate: props.zoomRate,\n    rotateDeg: 90,\n    enableTransition: true,\n    ...options,\n  }\n  switch (action) {\n    case 'zoomOut':\n      if (transform.value.scale > minScale) {\n        transform.value.scale = Number.parseFloat(\n          (transform.value.scale / zoomRate).toFixed(3)\n        )\n      }\n      break\n    case 'zoomIn':\n      if (transform.value.scale < maxScale) {\n        transform.value.scale = Number.parseFloat(\n          (transform.value.scale * zoomRate).toFixed(3)\n        )\n      }\n      break\n    case 'clockwise':\n      transform.value.deg += rotateDeg\n      emit('rotate', transform.value.deg)\n      break\n    case 'anticlockwise':\n      transform.value.deg -= rotateDeg\n      emit('rotate', transform.value.deg)\n      break\n  }\n  transform.value.enableTransition = enableTransition\n}\n\nfunction onFocusoutPrevented(event: CustomEvent) {\n  if (event.detail?.focusReason === 'pointer') {\n    event.preventDefault()\n  }\n}\n\nfunction onCloseRequested() {\n  if (props.closeOnPressEscape) {\n    hide()\n  }\n}\n\nfunction 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\nwatch(\n  () => scaleClamped.value,\n  (val) => {\n    transform.value.scale = val\n  }\n)\n\nwatch(currentImg, () => {\n  nextTick(() => {\n    const $img = imgRef.value\n    if (!$img?.complete) {\n      loading.value = true\n    }\n  })\n})\n\nwatch(activeIndex, (val) => {\n  reset()\n  emit('switch', val)\n})\n\nonMounted(() => {\n  visible.value = true\n  registerEventListener()\n\n  stopWheelListener = useEventListener('wheel', wheelHandler, {\n    passive: false,\n  })\n})\n\ndefineExpose({\n  /**\n   * @description manually switch image\n   */\n  setActiveItem,\n})\n</script>\n"],"mappings":""}

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

@@ -155,7 +155,7 @@ interface InputProps {
  * @deprecated Removed after 3.0.0, Use `InputProps` instead.
  */
 declare const inputProps: {
-  readonly inputmode: EpPropFinalized<(new (...args: any[]) => "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal") | (() => "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined) | (((new (...args: any[]) => "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal") | (() => "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined)) | null)[], unknown, unknown, undefined, boolean>;
+  readonly inputmode: EpPropFinalized<(new (...args: any[]) => "text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal") | (() => "text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined) | (((new (...args: any[]) => "text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal") | (() => "text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined)) | null)[], unknown, unknown, undefined, boolean>;
   readonly name: StringConstructor;
   readonly ariaLabel: StringConstructor;
   readonly id: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;

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

@@ -106,7 +106,7 @@ interface InputNumberProps {
  * @deprecated Removed after 3.0.0, Use `InputNumberProps` instead.
  */
 declare const inputNumberProps: {
-  readonly inputmode: EpPropFinalized<(new (...args: any[]) => "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal") | (() => "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined) | (((new (...args: any[]) => "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal") | (() => "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined)) | null)[], unknown, unknown, undefined, boolean>;
+  readonly inputmode: EpPropFinalized<(new (...args: any[]) => "text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal") | (() => "text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined) | (((new (...args: any[]) => "text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal") | (() => "text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined)) | null)[], unknown, unknown, undefined, boolean>;
   readonly align: EpPropFinalized<(new (...args: any[]) => "left" | "center" | "right") | (() => "left" | "center" | "right") | (((new (...args: any[]) => "left" | "center" | "right") | (() => "left" | "center" | "right")) | null)[], unknown, unknown, "center", boolean>;
   readonly disabledScientific: BooleanConstructor;
   readonly formatter: {

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

@@ -34,7 +34,7 @@ declare const __VLS_base: _$vue.DefineComponent<InputNumberProps, {
   readonly: boolean;
   tabindex: string | number;
   validateEvent: boolean;
-  inputmode: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal";
+  inputmode: "text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal";
   max: number;
   min: number;
   align: "left" | "right" | "center";

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

@@ -97,7 +97,7 @@ declare const mentionProps: {
   popperStyle: EpPropFinalized<(new (...args: any[]) => string | false | _$vue.CSSProperties | _$vue.StyleValue[]) | (() => _$vue.StyleValue) | (((new (...args: any[]) => string | false | _$vue.CSSProperties | _$vue.StyleValue[]) | (() => _$vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => Partial<Options>, boolean>;
   props: EpPropFinalized<(new (...args: any[]) => MentionOptionProps) | (() => MentionOptionProps) | (((new (...args: any[]) => MentionOptionProps) | (() => MentionOptionProps)) | null)[], unknown, unknown, () => Required<MentionOptionProps>, boolean>;
-  inputmode: EpPropFinalized<(new (...args: any[]) => "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal") | (() => "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined) | (((new (...args: any[]) => "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal") | (() => "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined)) | null)[], unknown, unknown, undefined, boolean>;
+  inputmode: EpPropFinalized<(new (...args: any[]) => "text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal") | (() => "text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined) | (((new (...args: any[]) => "text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal") | (() => "text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined)) | null)[], unknown, unknown, undefined, boolean>;
   name: StringConstructor;
   ariaLabel: StringConstructor;
   id: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;

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

@@ -9,10 +9,10 @@ declare const __VLS_export: <T extends MentionOption = MentionOption>(__VLS_prop
   props: _$vue.PublicProps & __VLS_PrettifyLocal<MentionProps<T> & {
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     onInput?: ((value: string) => any) | undefined;
-    onSearch?: ((pattern: string, prefix: string) => any) | undefined;
     onFocus?: ((evt: FocusEvent) => any) | undefined;
     onBlur?: ((evt: FocusEvent) => any) | undefined;
     onSelect?: ((option: MentionOption, prefix: string) => any) | undefined;
+    onSearch?: ((pattern: string, prefix: string) => any) | undefined;
     "onWhole-remove"?: ((pattern: string, prefix: string) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
@@ -46,7 +46,7 @@ declare const __VLS_export: <T extends MentionOption = MentionOption>(__VLS_prop
       index: number;
     }) => any;
   };
-  emit: ((event: "update:modelValue", value: string) => void) & ((event: "input", value: string) => void) & ((event: "search", pattern: string, prefix: string) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "select", option: MentionOption, prefix: string) => void) & ((event: "whole-remove", pattern: string, prefix: string) => void);
+  emit: ((event: "update:modelValue", value: string) => void) & ((event: "input", value: string) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "select", option: MentionOption, prefix: string) => void) & ((event: "search", pattern: string, prefix: string) => void) & ((event: "whole-remove", pattern: string, prefix: string) => void);
 }>) => _$vue.VNode & {
   __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

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

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

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

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

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

@@ -124,7 +124,7 @@ declare const notificationProps: {
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  readonly position: EpPropFinalized<StringConstructor, "top-left" | "top-right" | "bottom-left" | "bottom-right", unknown, "top-right", boolean>;
+  readonly position: EpPropFinalized<StringConstructor, "top-right" | "top-left" | "bottom-right" | "bottom-left", unknown, "top-right", boolean>;
   readonly showClose: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly title: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
   readonly type: EpPropFinalized<StringConstructor, "" | "info" | "primary" | "success" | "warning" | "error", unknown, "", boolean>;

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

@@ -18,10 +18,10 @@ declare const __VLS_base: _$vue.DefineComponent<NotificationProps, {
   onDestroy?: (() => any) | undefined;
 }>, {
   type: NotificationType;
-  title: string;
   message: string | _$vue.VNode | (() => _$vue.VNode);
   offset: number;
   position: NotificationPosition;
+  title: string;
   id: string;
   onClick: () => void;
   progress: boolean | NotificationProgress;

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

@@ -33,9 +33,9 @@ declare const __VLS_base: _$vue.DefineComponent<PopoverProps, {
   showAfter: number;
   hideAfter: number;
   autoClose: number;
-  title: string;
   offset: number;
   teleported: boolean;
+  title: string;
   effect: PopperEffect;
   tabindex: string | number;
   visible: boolean | null;

package/es/components/radio/src/radio-button.vue.d.ts

@@ -7,10 +7,10 @@ type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<RadioButtonProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<RadioButtonProps> & Readonly<{}>, {
-  value: string | number | boolean;
   disabled: boolean;
   modelValue: string | number | boolean;
   name: string;
+  value: string | number | boolean;
   label: string | number | boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/es/components/radio/src/radio-group.vue.d.ts

@@ -14,8 +14,8 @@ declare const __VLS_base: _$vue.DefineComponent<RadioGroupProps, {}, {}, {}, {},
   onChange?: ((val: string | number | boolean | undefined) => any) | undefined;
 }>, {
   type: "radio" | "button";
-  props: radioOptionProp;
   fill: string;
+  props: radioOptionProp;
   id: string;
   disabled: boolean;
   modelValue: string | number | boolean;

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

@@ -13,10 +13,10 @@ declare const __VLS_base: _$vue.DefineComponent<RadioProps, {}, {}, {}, {}, _$vu
   "onUpdate:modelValue"?: ((val: string | number | boolean | undefined) => any) | undefined;
   onChange?: ((val: string | number | boolean | undefined) => any) | undefined;
 }>, {
-  value: string | number | boolean;
   disabled: boolean;
   modelValue: string | number | boolean;
   name: string;
+  value: string | number | boolean;
   border: boolean;
   label: string | number | boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;

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

@@ -403,10 +403,10 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     scrollLeft: number;
   }) => any) | undefined;
 }>, {
-  props: Props;
   valueOnClear: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown>;
   offset: number;
   teleported: EpPropMergeType<BooleanConstructor, unknown, unknown>;
+  props: Props;
   effect: EpPropMergeType<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown>;
   disabled: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   modelValue: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown> | EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown>[] | null) | (((new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown> | EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown>[] | null)) | null)[], unknown, unknown>;

package/es/components/select-v2/src/select.vue.d.ts

@@ -377,10 +377,10 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   "onVisible-change"?: ((visible: boolean) => any) | undefined;
   "onRemove-tag"?: ((val: unknown) => any) | undefined;
 }>, {
-  readonly props: Props;
   readonly valueOnClear: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown>;
   readonly offset: number;
   readonly teleported: EpPropMergeType<BooleanConstructor, unknown, unknown>;
+  readonly props: Props;
   readonly effect: EpPropMergeType<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown>;
   readonly disabled: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly modelValue: any;

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

@@ -17,10 +17,10 @@ declare const __VLS_base: _$vue.DefineComponent<StatisticProps, {
    */
   displayValue: _$vue.ComputedRef<string | number | _$dayjs.Dayjs>;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<StatisticProps> & Readonly<{}>, {
+  value: number | _$dayjs.Dayjs;
+  precision: number;
   decimalSeparator: string;
   groupSeparator: string;
-  precision: number;
-  value: number | _$dayjs.Dayjs;
   valueStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/es/components/table/src/filter-panel.vue.d.ts

@@ -112,12 +112,12 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       "update:modelValue": (val: CheckboxValueType) => void;
       change: (val: CheckboxValueType) => void;
     }, _$vue.PublicProps, {
-      value: string | boolean | number | object;
       id: string;
       disabled: boolean;
       modelValue: number | string | boolean;
       validateEvent: boolean;
       name: string;
+      value: string | boolean | number | object;
       label: string | boolean | number | object;
       trueValue: string | number;
       falseValue: string | number;
@@ -134,12 +134,12 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
       onChange?: ((val: CheckboxValueType) => any) | undefined;
     }>, {}, {}, {}, {}, {
-      value: string | boolean | number | object;
       id: string;
       disabled: boolean;
       modelValue: number | string | boolean;
       validateEvent: boolean;
       name: string;
+      value: string | boolean | number | object;
       label: string | boolean | number | object;
       trueValue: string | number;
       falseValue: string | number;
@@ -156,12 +156,12 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     "update:modelValue": (val: CheckboxValueType) => void;
     change: (val: CheckboxValueType) => void;
   }, string, {
-    value: string | boolean | number | object;
     id: string;
     disabled: boolean;
     modelValue: number | string | boolean;
     validateEvent: boolean;
     name: string;
+    value: string | boolean | number | object;
     label: string | boolean | number | object;
     trueValue: string | number;
     falseValue: string | number;

package/es/components/table/src/table-header/index.d.ts

@@ -125,12 +125,12 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       "update:modelValue": (val: CheckboxValueType) => void;
       change: (val: CheckboxValueType) => void;
     }, _$vue.PublicProps, {
-      value: string | boolean | number | object;
       id: string;
       disabled: boolean;
       modelValue: number | string | boolean;
       validateEvent: boolean;
       name: string;
+      value: string | boolean | number | object;
       label: string | boolean | number | object;
       trueValue: string | number;
       falseValue: string | number;
@@ -147,12 +147,12 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
       onChange?: ((val: CheckboxValueType) => any) | undefined;
     }>, {}, {}, {}, {}, {
-      value: string | boolean | number | object;
       id: string;
       disabled: boolean;
       modelValue: number | string | boolean;
       validateEvent: boolean;
       name: string;
+      value: string | boolean | number | object;
       label: string | boolean | number | object;
       trueValue: string | number;
       falseValue: string | number;
@@ -169,12 +169,12 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     "update:modelValue": (val: CheckboxValueType) => void;
     change: (val: CheckboxValueType) => void;
   }, string, {
-    value: string | boolean | number | object;
     id: string;
     disabled: boolean;
     modelValue: number | string | boolean;
     validateEvent: boolean;
     name: string;
+    value: string | boolean | number | object;
     label: string | boolean | number | object;
     trueValue: string | number;
     falseValue: string | number;

package/es/components/tour/src/mask.vue.d.ts

@@ -3,8 +3,8 @@ import * as _$vue from "vue";
 
 //#region ../../packages/components/tour/src/mask.vue.d.ts
 declare const __VLS_export: _$vue.DefineComponent<MaskProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<MaskProps> & Readonly<{}>, {
-  fill: string;
   zIndex: number;
+  fill: string;
   targetAreaClickable: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/es/components/tree/src/tree-node.vue.d.ts

@@ -110,12 +110,12 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       "update:modelValue": (val: CheckboxValueType) => void;
       change: (val: CheckboxValueType) => void;
     }, _$vue.PublicProps, {
-      value: string | boolean | number | object;
       id: string;
       disabled: boolean;
       modelValue: number | string | boolean;
       validateEvent: boolean;
       name: string;
+      value: string | boolean | number | object;
       label: string | boolean | number | object;
       trueValue: string | number;
       falseValue: string | number;
@@ -132,12 +132,12 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
       onChange?: ((val: CheckboxValueType) => any) | undefined;
     }>, {}, {}, {}, {}, {
-      value: string | boolean | number | object;
       id: string;
       disabled: boolean;
       modelValue: number | string | boolean;
       validateEvent: boolean;
       name: string;
+      value: string | boolean | number | object;
       label: string | boolean | number | object;
       trueValue: string | number;
       falseValue: string | number;
@@ -154,12 +154,12 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     "update:modelValue": (val: CheckboxValueType) => void;
     change: (val: CheckboxValueType) => void;
   }, string, {
-    value: string | boolean | number | object;
     id: string;
     disabled: boolean;
     modelValue: number | string | boolean;
     validateEvent: boolean;
     name: string;
+    value: string | boolean | number | object;
     label: string | boolean | number | object;
     trueValue: string | number;
     falseValue: string | number;

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

@@ -1481,12 +1481,12 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
         "update:modelValue": (val: CheckboxValueType) => void;
         change: (val: CheckboxValueType) => void;
       }, _$vue.PublicProps, {
-        value: string | boolean | number | object;
         id: string;
         disabled: boolean;
         modelValue: number | string | boolean;
         validateEvent: boolean;
         name: string;
+        value: string | boolean | number | object;
         label: string | boolean | number | object;
         trueValue: string | number;
         falseValue: string | number;
@@ -1503,12 +1503,12 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
         "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
         onChange?: ((val: CheckboxValueType) => any) | undefined;
       }>, {}, {}, {}, {}, {
-        value: string | boolean | number | object;
         id: string;
         disabled: boolean;
         modelValue: number | string | boolean;
         validateEvent: boolean;
         name: string;
+        value: string | boolean | number | object;
         label: string | boolean | number | object;
         trueValue: string | number;
         falseValue: string | number;
@@ -1525,12 +1525,12 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       "update:modelValue": (val: CheckboxValueType) => void;
       change: (val: CheckboxValueType) => void;
     }, string, {
-      value: string | boolean | number | object;
       id: string;
       disabled: boolean;
       modelValue: number | string | boolean;
       validateEvent: boolean;
       name: string;
+      value: string | boolean | number | object;
       label: string | boolean | number | object;
       trueValue: string | number;
       falseValue: string | number;

package/es/components/tree-select/src/tree-select.vue.d.ts

@@ -375,10 +375,10 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     __epPropKey: true;
   };
 }>> & Readonly<{}>, {
-  props: TreeOptionProps;
   valueOnClear: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown>;
   offset: number;
   teleported: EpPropMergeType<BooleanConstructor, unknown, unknown>;
+  props: TreeOptionProps;
   effect: EpPropMergeType<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown>;
   disabled: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   modelValue: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown> | EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown>[] | null) | (((new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown> | EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown>[] | null)) | null)[], unknown, unknown>;

package/es/version.d.ts

@@ -1,4 +1,4 @@
 //#region ../../packages/element-plus/version.d.ts
-declare const version = "0.0.20261001";
+declare const version = "0.0.20261003";
 //#endregion
 export { version };

package/es/version.mjs

@@ -1,5 +1,5 @@
 //#region ../../packages/element-plus/version.ts
-const version = "0.0.20261001";
+const version = "0.0.20261003";
 //#endregion
 export { version };