@element-plus/nightly 0.0.20260414 → 0.0.20260415

package/lib/components/image-viewer/src/image-viewer.vue_vue_type_script_setup_true_lang.js

@@ -2,13 +2,12 @@ const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
 const require_aria = require('../../../constants/aria.js');
 const require_event = require('../../../utils/dom/event.js');
 const require_objects = require('../../../utils/objects.js');
-const require_index = require('../../teleport/index.js');
-const require_index$1 = require('../../../hooks/use-locale/index.js');
-const require_index$2 = require('../../../hooks/use-namespace/index.js');
-const require_index$3 = require('../../../hooks/use-lockscreen/index.js');
-const require_index$4 = require('../../../hooks/use-z-index/index.js');
-const require_index$5 = require('../../icon/index.js');
-const require_index$6 = require('../../focus-trap/index.js');
+const require_index = require('../../../hooks/use-locale/index.js');
+const require_index$1 = require('../../../hooks/use-namespace/index.js');
+const require_index$2 = require('../../../hooks/use-lockscreen/index.js');
+const require_index$3 = require('../../../hooks/use-z-index/index.js');
+const require_index$4 = require('../../icon/index.js');
+const require_index$5 = require('../../focus-trap/index.js');
 const require_image_viewer = require('./image-viewer.js');
 let _vueuse_core = require("@vueuse/core");
 let lodash_unified = require("lodash-unified");
@@ -36,9 +35,9 @@ var image_viewer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
 		const props = __props;
 		const emit = __emit;
 		let stopWheelListener;
-		const { t } = require_index$1.useLocale();
-		const ns = require_index$2.useNamespace("image-viewer");
-		const { nextZIndex } = require_index$4.useZIndex();
+		const { t } = require_index.useLocale();
+		const ns = require_index$1.useNamespace("image-viewer");
+		const { nextZIndex } = require_index$3.useZIndex();
 		const wrapper = (0, vue.ref)();
 		const imgRef = (0, vue.ref)();
 		const scopeEventListener = (0, vue.effectScope)();
@@ -59,7 +58,7 @@ var image_viewer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
 			enableTransition: false
 		});
 		const zIndex = (0, vue.ref)(props.zIndex ?? nextZIndex());
-		require_index$3.useLockscreen(visible, { ns });
+		require_index$2.useLockscreen(visible, { ns });
 		const isSingle = (0, vue.computed)(() => {
 			const { urlList } = props;
 			return urlList.length <= 1;
@@ -278,120 +277,117 @@ var image_viewer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
 		});
 		__expose({ setActiveItem });
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index.ElTeleport), {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, {
 				to: "body",
 				disabled: !__props.teleported
+			}, [(0, vue.createVNode)(vue.Transition, {
+				name: "viewer-fade",
+				appear: ""
 			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.createVNode)(vue.Transition, {
-					name: "viewer-fade",
-					appear: ""
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
+					ref_key: "wrapper",
+					ref: wrapper,
+					tabindex: -1,
+					class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("wrapper")),
+					style: (0, vue.normalizeStyle)({ zIndex: zIndex.value })
+				}, [(0, vue.createVNode)((0, vue.unref)(require_index$5.default), {
+					loop: "",
+					trapped: "",
+					"focus-trap-el": wrapper.value,
+					"focus-start-el": "container",
+					onFocusoutPrevented,
+					onReleaseRequested: onCloseRequested
 				}, {
-					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
-						ref_key: "wrapper",
-						ref: wrapper,
-						tabindex: -1,
-						class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("wrapper")),
-						style: (0, vue.normalizeStyle)({ zIndex: zIndex.value })
-					}, [(0, vue.createVNode)((0, vue.unref)(require_index$6.default), {
-						loop: "",
-						trapped: "",
-						"focus-trap-el": wrapper.value,
-						"focus-start-el": "container",
-						onFocusoutPrevented,
-						onReleaseRequested: onCloseRequested
-					}, {
-						default: (0, vue.withCtx)(() => [
-							(0, vue.createElementVNode)("div", {
-								class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("mask")),
-								onClick: _cache[0] || (_cache[0] = (0, vue.withModifiers)(($event) => __props.hideOnClickModal && hide(), ["self"]))
-							}, null, 2),
-							(0, vue.createCommentVNode)(" CLOSE "),
-							(0, vue.createElementVNode)("span", {
-								class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("btn"), (0, vue.unref)(ns).e("close")]),
-								onClick: hide
-							}, [(0, vue.createVNode)((0, vue.unref)(require_index$5.ElIcon), null, {
-								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.Close))]),
+					default: (0, vue.withCtx)(() => [
+						(0, vue.createElementVNode)("div", {
+							class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("mask")),
+							onClick: _cache[0] || (_cache[0] = (0, vue.withModifiers)(($event) => __props.hideOnClickModal && hide(), ["self"]))
+						}, null, 2),
+						(0, vue.createCommentVNode)(" CLOSE "),
+						(0, vue.createElementVNode)("span", {
+							class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("btn"), (0, vue.unref)(ns).e("close")]),
+							onClick: hide
+						}, [(0, vue.createVNode)((0, vue.unref)(require_index$4.ElIcon), null, {
+							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.Close))]),
+							_: 1
+						})], 2),
+						(0, vue.createCommentVNode)(" ARROW "),
+						!isSingle.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createElementVNode)("span", {
+							class: (0, vue.normalizeClass)(arrowPrevKls.value),
+							onClick: prev
+						}, [(0, vue.createVNode)((0, vue.unref)(require_index$4.ElIcon), null, {
+							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ArrowLeft))]),
+							_: 1
+						})], 2), (0, vue.createElementVNode)("span", {
+							class: (0, vue.normalizeClass)(arrowNextKls.value),
+							onClick: next
+						}, [(0, vue.createVNode)((0, vue.unref)(require_index$4.ElIcon), null, {
+							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ArrowRight))]),
+							_: 1
+						})], 2)], 64)) : (0, vue.createCommentVNode)("v-if", true),
+						_ctx.$slots.progress || __props.showProgress ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+							key: 1,
+							class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("btn"), (0, vue.unref)(ns).e("progress")])
+						}, [(0, vue.renderSlot)(_ctx.$slots, "progress", {
+							activeIndex: activeIndex.value,
+							total: __props.urlList.length
+						}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(progress.value), 1)])], 2)) : (0, vue.createCommentVNode)("v-if", true),
+						(0, vue.createCommentVNode)(" ACTIONS "),
+						(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("btn"), (0, vue.unref)(ns).e("actions")]) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("actions__inner")) }, [(0, vue.renderSlot)(_ctx.$slots, "toolbar", {
+							actions: handleActions,
+							prev,
+							next,
+							reset: toggleMode,
+							activeIndex: activeIndex.value,
+							setActiveItem
+						}, () => [
+							(0, vue.createVNode)((0, vue.unref)(require_index$4.ElIcon), { onClick: _cache[1] || (_cache[1] = ($event) => handleActions("zoomOut")) }, {
+								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ZoomOut))]),
 								_: 1
-							})], 2),
-							(0, vue.createCommentVNode)(" ARROW "),
-							!isSingle.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createElementVNode)("span", {
-								class: (0, vue.normalizeClass)(arrowPrevKls.value),
-								onClick: prev
-							}, [(0, vue.createVNode)((0, vue.unref)(require_index$5.ElIcon), null, {
-								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ArrowLeft))]),
+							}),
+							(0, vue.createVNode)((0, vue.unref)(require_index$4.ElIcon), { onClick: _cache[2] || (_cache[2] = ($event) => handleActions("zoomIn")) }, {
+								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ZoomIn))]),
 								_: 1
-							})], 2), (0, vue.createElementVNode)("span", {
-								class: (0, vue.normalizeClass)(arrowNextKls.value),
-								onClick: next
-							}, [(0, vue.createVNode)((0, vue.unref)(require_index$5.ElIcon), null, {
-								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ArrowRight))]),
+							}),
+							(0, vue.createElementVNode)("i", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("actions__divider")) }, null, 2),
+							(0, vue.createVNode)((0, vue.unref)(require_index$4.ElIcon), { onClick: toggleMode }, {
+								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(mode.value.icon)))]),
 								_: 1
-							})], 2)], 64)) : (0, vue.createCommentVNode)("v-if", true),
-							_ctx.$slots.progress || __props.showProgress ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-								key: 1,
-								class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("btn"), (0, vue.unref)(ns).e("progress")])
-							}, [(0, vue.renderSlot)(_ctx.$slots, "progress", {
-								activeIndex: activeIndex.value,
-								total: __props.urlList.length
-							}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(progress.value), 1)])], 2)) : (0, vue.createCommentVNode)("v-if", true),
-							(0, vue.createCommentVNode)(" ACTIONS "),
-							(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("btn"), (0, vue.unref)(ns).e("actions")]) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("actions__inner")) }, [(0, vue.renderSlot)(_ctx.$slots, "toolbar", {
-								actions: handleActions,
-								prev,
-								next,
-								reset: toggleMode,
-								activeIndex: activeIndex.value,
-								setActiveItem
-							}, () => [
-								(0, vue.createVNode)((0, vue.unref)(require_index$5.ElIcon), { onClick: _cache[1] || (_cache[1] = ($event) => handleActions("zoomOut")) }, {
-									default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ZoomOut))]),
-									_: 1
-								}),
-								(0, vue.createVNode)((0, vue.unref)(require_index$5.ElIcon), { onClick: _cache[2] || (_cache[2] = ($event) => handleActions("zoomIn")) }, {
-									default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ZoomIn))]),
-									_: 1
-								}),
-								(0, vue.createElementVNode)("i", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("actions__divider")) }, null, 2),
-								(0, vue.createVNode)((0, vue.unref)(require_index$5.ElIcon), { onClick: toggleMode }, {
-									default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(mode.value.icon)))]),
-									_: 1
-								}),
-								(0, vue.createElementVNode)("i", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("actions__divider")) }, null, 2),
-								(0, vue.createVNode)((0, vue.unref)(require_index$5.ElIcon), { onClick: _cache[3] || (_cache[3] = ($event) => handleActions("anticlockwise")) }, {
-									default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.RefreshLeft))]),
-									_: 1
-								}),
-								(0, vue.createVNode)((0, vue.unref)(require_index$5.ElIcon), { onClick: _cache[4] || (_cache[4] = ($event) => handleActions("clockwise")) }, {
-									default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.RefreshRight))]),
-									_: 1
-								})
-							])], 2)], 2),
-							(0, vue.createCommentVNode)(" CANVAS "),
-							(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("canvas")) }, [loadError.value && _ctx.$slots["viewer-error"] ? (0, vue.renderSlot)(_ctx.$slots, "viewer-error", {
-								key: 0,
-								activeIndex: activeIndex.value,
-								src: currentImg.value
-							}) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("img", {
-								ref_key: "imgRef",
-								ref: imgRef,
-								key: currentImg.value,
-								src: currentImg.value,
-								style: (0, vue.normalizeStyle)(imgStyle.value),
-								class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("img")),
-								crossorigin: __props.crossorigin,
-								onLoad: handleImgLoad,
-								onError: handleImgError,
-								onMousedown: handleMouseDown,
-								onTouchstart: handleTouchStart
-							}, null, 46, _hoisted_1))], 2),
-							(0, vue.renderSlot)(_ctx.$slots, "default")
-						]),
-						_: 3
-					}, 8, ["focus-trap-el"])], 6)]),
+							}),
+							(0, vue.createElementVNode)("i", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("actions__divider")) }, null, 2),
+							(0, vue.createVNode)((0, vue.unref)(require_index$4.ElIcon), { onClick: _cache[3] || (_cache[3] = ($event) => handleActions("anticlockwise")) }, {
+								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.RefreshLeft))]),
+								_: 1
+							}),
+							(0, vue.createVNode)((0, vue.unref)(require_index$4.ElIcon), { onClick: _cache[4] || (_cache[4] = ($event) => handleActions("clockwise")) }, {
+								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.RefreshRight))]),
+								_: 1
+							})
+						])], 2)], 2),
+						(0, vue.createCommentVNode)(" CANVAS "),
+						(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("canvas")) }, [loadError.value && _ctx.$slots["viewer-error"] ? (0, vue.renderSlot)(_ctx.$slots, "viewer-error", {
+							key: 0,
+							activeIndex: activeIndex.value,
+							src: currentImg.value
+						}) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("img", {
+							ref_key: "imgRef",
+							ref: imgRef,
+							key: currentImg.value,
+							src: currentImg.value,
+							style: (0, vue.normalizeStyle)(imgStyle.value),
+							class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("img")),
+							crossorigin: __props.crossorigin,
+							onLoad: handleImgLoad,
+							onError: handleImgError,
+							onMousedown: handleMouseDown,
+							onTouchstart: handleTouchStart
+						}, null, 46, _hoisted_1))], 2),
+						(0, vue.renderSlot)(_ctx.$slots, "default")
+					]),
 					_: 3
-				})]),
+				}, 8, ["focus-trap-el"])], 6)]),
 				_: 3
-			}, 8, ["disabled"]);
+			})], 8, ["disabled"]);
 		};
 	}
 });

package/lib/components/image-viewer/src/image-viewer.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n  <el-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  </el-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 ElTeleport from '@element-plus/components/teleport'\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.js","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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"}

package/lib/components/image-viewer/src/image-viewer2.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer2.js","names":[],"sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n  <el-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  </el-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 ElTeleport from '@element-plus/components/teleport'\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.js","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":""}

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

@@ -156,7 +156,7 @@ interface InputProps {
  * @deprecated Removed after 3.0.0, Use `InputProps` instead.
  */
 declare const inputProps: {
-  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 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 name: StringConstructor;
   readonly ariaLabel: StringConstructor;
   readonly id: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
@@ -183,7 +183,7 @@ declare const inputProps: {
   };
   readonly type: EpPropFinalized<(new (...args: any[]) => string) | (() => InputType) | (((new (...args: any[]) => string) | (() => InputType)) | null)[], unknown, unknown, "text", boolean>;
   readonly resize: {
-    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "vertical" | "horizontal" | "none" | "both", unknown>>;
+    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "none" | "both" | "horizontal" | "vertical", unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

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

@@ -6,7 +6,7 @@ import * as vue from "vue";
 import { StyleValue } from "vue";
 
 //#region ../../packages/components/input/src/input.vue.d.ts
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_16: {}, __VLS_53: {
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_30: {}, __VLS_53: {
     visible: boolean;
   }, __VLS_71: {};
 type __VLS_Slots = {} & {
@@ -14,7 +14,7 @@ type __VLS_Slots = {} & {
 } & {
   prefix?: (props: typeof __VLS_3) => any;
 } & {
-  suffix?: (props: typeof __VLS_16) => any;
+  suffix?: (props: typeof __VLS_30) => any;
 } & {
   'password-icon'?: (props: typeof __VLS_53) => any;
 } & {
@@ -34,36 +34,36 @@ declare const __VLS_base: vue.DefineComponent<InputProps, {
   clear: (evt?: MouseEvent) => void; /** @description resize textarea. */
   resizeTextarea: () => void;
 }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-  change: (value: string, evt?: Event | undefined) => void;
+  "update:modelValue": (value: string) => void;
+  input: (value: string) => void;
+  focus: (evt: FocusEvent) => void;
   blur: (evt: FocusEvent) => void;
-  compositionend: (evt: CompositionEvent) => void;
+  change: (value: string, evt?: Event | undefined) => void;
+  clear: (evt: MouseEvent | undefined) => void;
+  mouseleave: (evt: MouseEvent) => void;
+  mouseenter: (evt: MouseEvent) => void;
+  keydown: (evt: Event | KeyboardEvent) => void;
   compositionstart: (evt: CompositionEvent) => void;
   compositionupdate: (evt: CompositionEvent) => void;
-  focus: (evt: FocusEvent) => void;
-  input: (value: string) => void;
-  keydown: (evt: Event | KeyboardEvent) => void;
-  mouseenter: (evt: MouseEvent) => void;
-  mouseleave: (evt: MouseEvent) => void;
-  "update:modelValue": (value: string) => void;
-  clear: (evt: MouseEvent | undefined) => void;
+  compositionend: (evt: CompositionEvent) => void;
 }, string, vue.PublicProps, Readonly<InputProps> & Readonly<{
-  onChange?: ((value: string, evt?: Event | undefined) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  onInput?: ((value: string) => any) | undefined;
+  onFocus?: ((evt: FocusEvent) => any) | undefined;
   onBlur?: ((evt: FocusEvent) => any) | undefined;
-  onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
+  onChange?: ((value: string, evt?: Event | undefined) => any) | undefined;
+  onClear?: ((evt: MouseEvent | undefined) => any) | undefined;
+  onMouseleave?: ((evt: MouseEvent) => any) | undefined;
+  onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+  onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
   onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
   onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
-  onFocus?: ((evt: FocusEvent) => any) | undefined;
-  onInput?: ((value: string) => any) | undefined;
-  onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
-  onMouseenter?: ((evt: MouseEvent) => any) | undefined;
-  onMouseleave?: ((evt: MouseEvent) => any) | undefined;
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onClear?: ((evt: MouseEvent | undefined) => any) | undefined;
+  onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
 }>, {
-  type: InputType;
   disabled: boolean;
   modelValue: string | number | null;
   modelModifiers: InputModelModifiers;
+  type: InputType;
   autocomplete: string;
   clearIcon: IconPropType;
   wordLimitPosition: "inside" | "outside";

package/lib/components/input/src/input.vue_vue_type_script_setup_true_lang.js

@@ -113,7 +113,8 @@ var input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.
 			{ resize: props.resize }
 		]);
 		const nativeInputValue = (0, vue.computed)(() => (0, lodash_unified.isNil)(props.modelValue) ? "" : String(props.modelValue));
-		const showClear = (0, vue.computed)(() => props.clearable && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (isFocused.value || hovering.value));
+		const renderClear = (0, vue.computed)(() => props.clearable && !inputDisabled.value && !props.readonly);
+		const showClear = (0, vue.computed)(() => renderClear.value && !!nativeInputValue.value && (isFocused.value || hovering.value));
 		const showPwdVisible = (0, vue.computed)(() => props.showPassword && !inputDisabled.value && !!nativeInputValue.value);
 		const isWordLimitVisible = (0, vue.computed)(() => props.showWordLimit && !!maxlength.value && (props.type === "text" || props.type === "textarea") && !inputDisabled.value && !props.readonly && !props.showPassword);
 		const textLength = (0, vue.computed)(() => {
@@ -121,7 +122,7 @@ var input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.
 			return nativeInputValue.value.length;
 		});
 		const inputExceed = (0, vue.computed)(() => !!isWordLimitVisible.value && textLength.value > Number(maxlength.value));
-		const suffixVisible = (0, vue.computed)(() => !!slots.suffix || !!props.suffixIcon || showClear.value || props.showPassword || isWordLimitVisible.value || !!validateState.value && needStatusIcon.value);
+		const suffixVisible = (0, vue.computed)(() => !!slots.suffix || !!props.suffixIcon || props.clearable || props.showPassword || isWordLimitVisible.value || !!validateState.value && needStatusIcon.value);
 		const hasModelModifiers = (0, vue.computed)(() => !!Object.keys(props.modelModifiers).length);
 		const [recordCursor, setCursor] = require_index$2.useCursor(input);
 		(0, _vueuse_core.useResizeObserver)(textarea, (entries) => {
@@ -390,22 +391,27 @@ var input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.
 						key: 1,
 						class: (0, vue.normalizeClass)((0, vue.unref)(nsInput).e("suffix"))
 					}, [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(nsInput).e("suffix-inner")) }, [
-						!showClear.value || !showPwdVisible.value || !isWordLimitVisible.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.renderSlot)(_ctx.$slots, "suffix"), __props.suffixIcon ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$5.ElIcon), {
+						renderClear.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$5.ElIcon), {
 							key: 0,
-							class: (0, vue.normalizeClass)((0, vue.unref)(nsInput).e("icon"))
-						}, {
-							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(__props.suffixIcon)))]),
-							_: 1
-						}, 8, ["class"])) : (0, vue.createCommentVNode)("v-if", true)], 64)) : (0, vue.createCommentVNode)("v-if", true),
-						showClear.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$5.ElIcon), {
-							key: 1,
 							class: (0, vue.normalizeClass)([(0, vue.unref)(nsInput).e("icon"), (0, vue.unref)(nsInput).e("clear")]),
+							style: (0, vue.normalizeStyle)({ visibility: showClear.value ? "visible" : "hidden" }),
 							onMousedown: (0, vue.withModifiers)((0, vue.unref)(_vue_shared.NOOP), ["prevent"]),
 							onClick: clear
 						}, {
 							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(__props.clearIcon)))]),
 							_: 1
-						}, 8, ["class", "onMousedown"])) : (0, vue.createCommentVNode)("v-if", true),
+						}, 8, [
+							"class",
+							"style",
+							"onMousedown"
+						])) : (0, vue.createCommentVNode)("v-if", true),
+						!showClear.value || !showPwdVisible.value || !isWordLimitVisible.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.renderSlot)(_ctx.$slots, "suffix"), __props.suffixIcon ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$5.ElIcon), {
+							key: 0,
+							class: (0, vue.normalizeClass)((0, vue.unref)(nsInput).e("icon"))
+						}, {
+							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(__props.suffixIcon)))]),
+							_: 1
+						}, 8, ["class"])) : (0, vue.createCommentVNode)("v-if", true)], 64)) : (0, vue.createCommentVNode)("v-if", true),
 						showPwdVisible.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$5.ElIcon), {
 							key: 2,
 							class: (0, vue.normalizeClass)([(0, vue.unref)(nsInput).e("icon"), (0, vue.unref)(nsInput).e("password")]),