@element-plus/nightly 0.0.20260414 → 0.0.20260415

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

@@ -7,28 +7,28 @@ declare function setActiveItem(index: number): void;
 declare function prev(): void;
 declare function next(): void;
 declare function handleActions(action: ImageViewerAction, options?: {}): void;
-declare var __VLS_56: {
+declare var __VLS_55: {
     activeIndex: number;
     total: number;
-  }, __VLS_58: {
+  }, __VLS_57: {
     actions: typeof handleActions;
     prev: typeof prev;
     next: typeof next;
     reset: typeof toggleMode;
     activeIndex: number;
     setActiveItem: typeof setActiveItem;
-  }, __VLS_125: {
+  }, __VLS_124: {
     activeIndex: number;
     src: string;
-  }, __VLS_127: {};
+  }, __VLS_126: {};
 type __VLS_Slots = {} & {
-  progress?: (props: typeof __VLS_56) => any;
+  progress?: (props: typeof __VLS_55) => any;
 } & {
-  toolbar?: (props: typeof __VLS_58) => any;
+  toolbar?: (props: typeof __VLS_57) => any;
 } & {
-  'viewer-error'?: (props: typeof __VLS_125) => any;
+  'viewer-error'?: (props: typeof __VLS_124) => any;
 } & {
-  default?: (props: typeof __VLS_127) => any;
+  default?: (props: typeof __VLS_126) => any;
 };
 declare const __VLS_base: vue.DefineComponent<ImageViewerProps, {
   /**
@@ -37,13 +37,13 @@ declare const __VLS_base: vue.DefineComponent<ImageViewerProps, {
   setActiveItem: typeof setActiveItem;
 }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
   close: () => void;
-  error: (evt: Event) => void;
   rotate: (deg: number) => void;
+  error: (evt: Event) => void;
   switch: (index: number) => void;
 }, string, vue.PublicProps, Readonly<ImageViewerProps> & Readonly<{
   onClose?: (() => any) | undefined;
-  onError?: ((evt: Event) => any) | undefined;
   onRotate?: ((deg: number) => any) | undefined;
+  onError?: ((evt: Event) => any) | undefined;
   onSwitch?: ((index: number) => any) | undefined;
 }>, {
   infinite: boolean;

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

@@ -1,7 +1,6 @@
 import { EVENT_CODE } from "../../../constants/aria.mjs";
 import { getEventCode } from "../../../utils/dom/event.mjs";
 import { keysOf } from "../../../utils/objects.mjs";
-import { ElTeleport } from "../../teleport/index.mjs";
 import { useLocale } from "../../../hooks/use-locale/index.mjs";
 import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
 import { useLockscreen } from "../../../hooks/use-lockscreen/index.mjs";
@@ -12,7 +11,7 @@ import { imageViewerEmits, imageViewerProps } from "./image-viewer.mjs";
 import { clamp, useEventListener } from "@vueuse/core";
 import { throttle } from "lodash-unified";
 import { ArrowLeft, ArrowRight, Close, FullScreen, RefreshLeft, RefreshRight, ScaleToOriginal, ZoomIn, ZoomOut } from "@element-plus/icons-vue";
-import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, effectScope, markRaw, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, effectScope, markRaw, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
 
 //#region ../../packages/components/image-viewer/src/image-viewer.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1 = ["src", "crossorigin"];
@@ -277,120 +276,117 @@ var image_viewer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		});
 		__expose({ setActiveItem });
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(ElTeleport), {
+			return openBlock(), createBlock(Teleport, {
 				to: "body",
 				disabled: !__props.teleported
+			}, [createVNode(Transition, {
+				name: "viewer-fade",
+				appear: ""
 			}, {
-				default: withCtx(() => [createVNode(Transition, {
-					name: "viewer-fade",
-					appear: ""
+				default: withCtx(() => [createElementVNode("div", {
+					ref_key: "wrapper",
+					ref: wrapper,
+					tabindex: -1,
+					class: normalizeClass(unref(ns).e("wrapper")),
+					style: normalizeStyle({ zIndex: zIndex.value })
+				}, [createVNode(unref(focus_trap_default), {
+					loop: "",
+					trapped: "",
+					"focus-trap-el": wrapper.value,
+					"focus-start-el": "container",
+					onFocusoutPrevented,
+					onReleaseRequested: onCloseRequested
 				}, {
-					default: withCtx(() => [createElementVNode("div", {
-						ref_key: "wrapper",
-						ref: wrapper,
-						tabindex: -1,
-						class: normalizeClass(unref(ns).e("wrapper")),
-						style: normalizeStyle({ zIndex: zIndex.value })
-					}, [createVNode(unref(focus_trap_default), {
-						loop: "",
-						trapped: "",
-						"focus-trap-el": wrapper.value,
-						"focus-start-el": "container",
-						onFocusoutPrevented,
-						onReleaseRequested: onCloseRequested
-					}, {
-						default: withCtx(() => [
-							createElementVNode("div", {
-								class: normalizeClass(unref(ns).e("mask")),
-								onClick: _cache[0] || (_cache[0] = withModifiers(($event) => __props.hideOnClickModal && hide(), ["self"]))
-							}, null, 2),
-							createCommentVNode(" CLOSE "),
-							createElementVNode("span", {
-								class: normalizeClass([unref(ns).e("btn"), unref(ns).e("close")]),
-								onClick: hide
-							}, [createVNode(unref(ElIcon), null, {
-								default: withCtx(() => [createVNode(unref(Close))]),
+					default: withCtx(() => [
+						createElementVNode("div", {
+							class: normalizeClass(unref(ns).e("mask")),
+							onClick: _cache[0] || (_cache[0] = withModifiers(($event) => __props.hideOnClickModal && hide(), ["self"]))
+						}, null, 2),
+						createCommentVNode(" CLOSE "),
+						createElementVNode("span", {
+							class: normalizeClass([unref(ns).e("btn"), unref(ns).e("close")]),
+							onClick: hide
+						}, [createVNode(unref(ElIcon), null, {
+							default: withCtx(() => [createVNode(unref(Close))]),
+							_: 1
+						})], 2),
+						createCommentVNode(" ARROW "),
+						!isSingle.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", {
+							class: normalizeClass(arrowPrevKls.value),
+							onClick: prev
+						}, [createVNode(unref(ElIcon), null, {
+							default: withCtx(() => [createVNode(unref(ArrowLeft))]),
+							_: 1
+						})], 2), createElementVNode("span", {
+							class: normalizeClass(arrowNextKls.value),
+							onClick: next
+						}, [createVNode(unref(ElIcon), null, {
+							default: withCtx(() => [createVNode(unref(ArrowRight))]),
+							_: 1
+						})], 2)], 64)) : createCommentVNode("v-if", true),
+						_ctx.$slots.progress || __props.showProgress ? (openBlock(), createElementBlock("div", {
+							key: 1,
+							class: normalizeClass([unref(ns).e("btn"), unref(ns).e("progress")])
+						}, [renderSlot(_ctx.$slots, "progress", {
+							activeIndex: activeIndex.value,
+							total: __props.urlList.length
+						}, () => [createTextVNode(toDisplayString(progress.value), 1)])], 2)) : createCommentVNode("v-if", true),
+						createCommentVNode(" ACTIONS "),
+						createElementVNode("div", { class: normalizeClass([unref(ns).e("btn"), unref(ns).e("actions")]) }, [createElementVNode("div", { class: normalizeClass(unref(ns).e("actions__inner")) }, [renderSlot(_ctx.$slots, "toolbar", {
+							actions: handleActions,
+							prev,
+							next,
+							reset: toggleMode,
+							activeIndex: activeIndex.value,
+							setActiveItem
+						}, () => [
+							createVNode(unref(ElIcon), { onClick: _cache[1] || (_cache[1] = ($event) => handleActions("zoomOut")) }, {
+								default: withCtx(() => [createVNode(unref(ZoomOut))]),
 								_: 1
-							})], 2),
-							createCommentVNode(" ARROW "),
-							!isSingle.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", {
-								class: normalizeClass(arrowPrevKls.value),
-								onClick: prev
-							}, [createVNode(unref(ElIcon), null, {
-								default: withCtx(() => [createVNode(unref(ArrowLeft))]),
+							}),
+							createVNode(unref(ElIcon), { onClick: _cache[2] || (_cache[2] = ($event) => handleActions("zoomIn")) }, {
+								default: withCtx(() => [createVNode(unref(ZoomIn))]),
 								_: 1
-							})], 2), createElementVNode("span", {
-								class: normalizeClass(arrowNextKls.value),
-								onClick: next
-							}, [createVNode(unref(ElIcon), null, {
-								default: withCtx(() => [createVNode(unref(ArrowRight))]),
+							}),
+							createElementVNode("i", { class: normalizeClass(unref(ns).e("actions__divider")) }, null, 2),
+							createVNode(unref(ElIcon), { onClick: toggleMode }, {
+								default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(mode.value.icon)))]),
 								_: 1
-							})], 2)], 64)) : createCommentVNode("v-if", true),
-							_ctx.$slots.progress || __props.showProgress ? (openBlock(), createElementBlock("div", {
-								key: 1,
-								class: normalizeClass([unref(ns).e("btn"), unref(ns).e("progress")])
-							}, [renderSlot(_ctx.$slots, "progress", {
-								activeIndex: activeIndex.value,
-								total: __props.urlList.length
-							}, () => [createTextVNode(toDisplayString(progress.value), 1)])], 2)) : createCommentVNode("v-if", true),
-							createCommentVNode(" ACTIONS "),
-							createElementVNode("div", { class: normalizeClass([unref(ns).e("btn"), unref(ns).e("actions")]) }, [createElementVNode("div", { class: normalizeClass(unref(ns).e("actions__inner")) }, [renderSlot(_ctx.$slots, "toolbar", {
-								actions: handleActions,
-								prev,
-								next,
-								reset: toggleMode,
-								activeIndex: activeIndex.value,
-								setActiveItem
-							}, () => [
-								createVNode(unref(ElIcon), { onClick: _cache[1] || (_cache[1] = ($event) => handleActions("zoomOut")) }, {
-									default: withCtx(() => [createVNode(unref(ZoomOut))]),
-									_: 1
-								}),
-								createVNode(unref(ElIcon), { onClick: _cache[2] || (_cache[2] = ($event) => handleActions("zoomIn")) }, {
-									default: withCtx(() => [createVNode(unref(ZoomIn))]),
-									_: 1
-								}),
-								createElementVNode("i", { class: normalizeClass(unref(ns).e("actions__divider")) }, null, 2),
-								createVNode(unref(ElIcon), { onClick: toggleMode }, {
-									default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(mode.value.icon)))]),
-									_: 1
-								}),
-								createElementVNode("i", { class: normalizeClass(unref(ns).e("actions__divider")) }, null, 2),
-								createVNode(unref(ElIcon), { onClick: _cache[3] || (_cache[3] = ($event) => handleActions("anticlockwise")) }, {
-									default: withCtx(() => [createVNode(unref(RefreshLeft))]),
-									_: 1
-								}),
-								createVNode(unref(ElIcon), { onClick: _cache[4] || (_cache[4] = ($event) => handleActions("clockwise")) }, {
-									default: withCtx(() => [createVNode(unref(RefreshRight))]),
-									_: 1
-								})
-							])], 2)], 2),
-							createCommentVNode(" CANVAS "),
-							createElementVNode("div", { class: normalizeClass(unref(ns).e("canvas")) }, [loadError.value && _ctx.$slots["viewer-error"] ? renderSlot(_ctx.$slots, "viewer-error", {
-								key: 0,
-								activeIndex: activeIndex.value,
-								src: currentImg.value
-							}) : (openBlock(), createElementBlock("img", {
-								ref_key: "imgRef",
-								ref: imgRef,
-								key: currentImg.value,
-								src: currentImg.value,
-								style: normalizeStyle(imgStyle.value),
-								class: normalizeClass(unref(ns).e("img")),
-								crossorigin: __props.crossorigin,
-								onLoad: handleImgLoad,
-								onError: handleImgError,
-								onMousedown: handleMouseDown,
-								onTouchstart: handleTouchStart
-							}, null, 46, _hoisted_1))], 2),
-							renderSlot(_ctx.$slots, "default")
-						]),
-						_: 3
-					}, 8, ["focus-trap-el"])], 6)]),
+							}),
+							createElementVNode("i", { class: normalizeClass(unref(ns).e("actions__divider")) }, null, 2),
+							createVNode(unref(ElIcon), { onClick: _cache[3] || (_cache[3] = ($event) => handleActions("anticlockwise")) }, {
+								default: withCtx(() => [createVNode(unref(RefreshLeft))]),
+								_: 1
+							}),
+							createVNode(unref(ElIcon), { onClick: _cache[4] || (_cache[4] = ($event) => handleActions("clockwise")) }, {
+								default: withCtx(() => [createVNode(unref(RefreshRight))]),
+								_: 1
+							})
+						])], 2)], 2),
+						createCommentVNode(" CANVAS "),
+						createElementVNode("div", { class: normalizeClass(unref(ns).e("canvas")) }, [loadError.value && _ctx.$slots["viewer-error"] ? renderSlot(_ctx.$slots, "viewer-error", {
+							key: 0,
+							activeIndex: activeIndex.value,
+							src: currentImg.value
+						}) : (openBlock(), createElementBlock("img", {
+							ref_key: "imgRef",
+							ref: imgRef,
+							key: currentImg.value,
+							src: currentImg.value,
+							style: normalizeStyle(imgStyle.value),
+							class: normalizeClass(unref(ns).e("img")),
+							crossorigin: __props.crossorigin,
+							onLoad: handleImgLoad,
+							onError: handleImgError,
+							onMousedown: handleMouseDown,
+							onTouchstart: handleTouchStart
+						}, null, 46, _hoisted_1))], 2),
+						renderSlot(_ctx.$slots, "default")
+					]),
 					_: 3
-				})]),
+				}, 8, ["focus-trap-el"])], 6)]),
 				_: 3
-			}, 8, ["disabled"]);
+			})], 8, ["disabled"]);
 		};
 	}
 });

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  <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":";;;;;;;;;;;;;;;;;;;;;;;;EA4JA,MAAM,QAAyD;GAC7D,SAAS;IACP,MAAM;IACN,MAAM,QAAQ,WAAW;IAC1B;GACD,UAAU;IACR,MAAM;IACN,MAAM,QAAQ,gBAAgB;IAC/B;GACH;EAMA,MAAM,QAAQ;EAUd,MAAM,OAAO;EAEb,IAAI;EAEJ,MAAM,EAAE,MAAM,WAAU;EACxB,MAAM,KAAK,aAAa,eAAc;EACtC,MAAM,EAAE,eAAe,WAAU;EACjC,MAAM,UAAU,KAAoB;EACpC,MAAM,SAAS,KAAsB;EAErC,MAAM,qBAAqB,aAAY;EAEvC,MAAM,eAAe,eAAe;GAClC,MAAM,EAAE,OAAO,UAAU,aAAa;AACtC,UAAO,MAAM,OAAO,UAAU,SAAQ;IACvC;EAED,MAAM,UAAU,IAAI,KAAI;EACxB,MAAM,YAAY,IAAI,MAAK;EAC3B,MAAM,UAAU,IAAI,MAAK;EACzB,MAAM,cAAc,IAAI,MAAM,aAAY;EAC1C,MAAM,OAAO,WAA4B,MAAM,QAAO;EACtD,MAAM,YAAY,IAAI;GACpB,OAAO,aAAa;GACpB,KAAK;GACL,SAAS;GACT,SAAS;GACT,kBAAkB;GACnB,CAAA;EACD,MAAM,SAAS,IAAI,MAAM,UAAU,YAAY,CAAA;AAE/C,gBAAc,SAAS,EAAE,IAAI,CAAA;EAE7B,MAAM,WAAW,eAAe;GAC9B,MAAM,EAAE,YAAY;AACpB,UAAO,QAAQ,UAAU;IAC1B;EAED,MAAM,UAAU,eAAe,YAAY,UAAU,EAAC;EAEtD,MAAM,SAAS,eAAe,YAAY,UAAU,MAAM,QAAQ,SAAS,EAAC;EAE5E,MAAM,aAAa,eAAe,MAAM,QAAQ,YAAY,OAAM;EAElE,MAAM,eAAe,eAAe;GAClC,GAAG,EAAE,MAAM;GACX,GAAG,EAAE,OAAO;GACZ,GAAG,GAAG,YAAY,CAAC,MAAM,YAAY,QAAQ,MAAM;GACpD,CAAA;EAED,MAAM,eAAe,eAAe;GAClC,GAAG,EAAE,MAAM;GACX,GAAG,EAAE,OAAO;GACZ,GAAG,GAAG,YAAY,CAAC,MAAM,YAAY,OAAO,MAAM;GACnD,CAAA;EAED,MAAM,WAAW,eAAe;GAC9B,MAAM,EAAE,OAAO,KAAK,SAAS,SAAS,qBAAqB,UAAU;GACrE,IAAI,aAAa,UAAU;GAC3B,IAAI,aAAa,UAAU;GAE3B,MAAM,SAAU,MAAM,KAAK,KAAM;GACjC,MAAM,YAAY,KAAK,IAAI,OAAM;GACjC,MAAM,YAAY,KAAK,IAAI,OAAM;AACjC,gBAAa,aAAa,YAAY,aAAa;AACnD,gBAAa,aAAa,YAAa,UAAU,QAAS;GAE1D,MAAM,QAAuB;IAC3B,WAAW,SAAS,MAAM,WAAW,IAAI,iBAAiB,WAAW,MAAM,WAAW;IACtF,YAAY,mBAAmB,kBAAkB;IACnD;AACA,OAAI,KAAK,MAAM,SAAS,MAAM,QAAQ,KACpC,OAAM,WAAW,MAAM,YAAY;AAErC,UAAO;IACR;EAED,MAAM,WAAW,eACT,GAAG,YAAY,QAAQ,EAAE,KAAK,MAAM,QAAQ,SACpD;EAEA,SAAS,OAAO;AACd,4BAAwB;AACxB,wBAAoB;AACpB,WAAQ,QAAQ;AAChB,QAAK,QAAO;;EAGd,SAAS,wBAAwB;GAC/B,MAAM,iBAAiB,UAAU,MAAqB;AAGpD,YAFa,aAAa,EAAC,EAE3B;KAEE,KAAK,WAAW;AACd,YAAM,sBAAsB,MAAK;AACjC;KAEF,KAAK,WAAW;AACd,kBAAW;AACX;KAEF,KAAK,WAAW;AACd,YAAK;AACL;KAEF,KAAK,WAAW;AACd,oBAAc,SAAQ;AACtB;KAEF,KAAK,WAAW;AACd,YAAK;AACL;KAEF,KAAK,WAAW;AACd,oBAAc,UAAS;AACvB;;KAEL;GACD,MAAM,oBAAoB,UAAU,MAAkB;AAEpD,mBADc,EAAE,UAAU,EAAE,UACN,IAAI,WAAW,WAAW;KAC9C,UAAU,MAAM;KAChB,kBAAkB;KACnB,CAAA;KACF;AAED,sBAAmB,UAAU;AAC3B,qBAAiB,UAAU,WAAW,eAAc;AACpD,qBAAiB,SAAS,SAAS,kBAAiB;KACrD;;EAGH,SAAS,0BAA0B;AACjC,sBAAmB,MAAK;;EAG1B,SAAS,gBAAgB;AACvB,WAAQ,QAAQ;;EAGlB,SAAS,eAAe,GAAU;AAChC,aAAU,QAAQ;AAClB,WAAQ,QAAQ;AAChB,QAAK,SAAS,EAAC;AACd,GAAC,EAAE,OAA4B,MAAM,EAAE,iBAAgB;;EAG1D,SAAS,gBAAgB,GAAe;AACtC,OAAI,QAAQ,SAAS,EAAE,WAAW,KAAK,CAAC,QAAQ,MAAO;AACvD,aAAU,MAAM,mBAAmB;GAEnC,MAAM,EAAE,SAAS,YAAY,UAAU;GACvC,MAAM,SAAS,EAAE;GACjB,MAAM,SAAS,EAAE;GAEjB,MAAM,cAAc,UAAU,OAAmB;AAC/C,cAAU,QAAQ;KAChB,GAAG,UAAU;KACb,SAAS,UAAU,GAAG,QAAQ;KAC9B,SAAS,UAAU,GAAG,QAAQ;KAChC;KACD;GACD,MAAM,kBAAkB,iBAAiB,UAAU,aAAa,YAAW;GAC3E,MAAM,gBAAgB,iBAAiB,UAAU,iBAAiB;AAChE,qBAAgB;AAChB,mBAAc;KACf;AAED,KAAE,gBAAe;;EAGnB,SAAS,iBAAiB,GAAe;AACvC,OAAI,QAAQ,SAAS,CAAC,QAAQ,SAAS,EAAE,QAAQ,WAAW,EAAG;AAC/D,aAAU,MAAM,mBAAmB;GAEnC,MAAM,EAAE,SAAS,YAAY,UAAU;GACvC,MAAM,EAAE,OAAO,QAAQ,OAAO,WAAW,EAAE,QAAQ;GAEnD,MAAM,cAAc,UAAU,OAAmB;IAC/C,MAAM,cAAc,GAAG,QAAQ;AAC/B,cAAU,QAAQ;KAChB,GAAG,UAAU;KACb,SAAS,UAAU,YAAY,QAAQ;KACvC,SAAS,UAAU,YAAY,QAAQ;KACzC;KACD;GACD,MAAM,kBAAkB,iBAAiB,UAAU,aAAa,YAAW;GAC3E,MAAM,iBAAiB,iBAAiB,UAAU,kBAAkB;AAClE,qBAAgB;AAChB,oBAAe;KAChB;AAED,KAAE,gBAAe;;EAGnB,SAAS,QAAQ;AACf,aAAU,QAAQ;IAChB,OAAO,aAAa;IACpB,KAAK;IACL,SAAS;IACT,SAAS;IACT,kBAAkB;IACpB;;EAGF,SAAS,aAAa;AACpB,OAAI,QAAQ,SAAS,UAAU,MAAO;GAEtC,MAAM,YAAY,OAAO,MAAK;GAC9B,MAAM,aAAa,OAAO,OAAO,MAAK;GACtC,MAAM,cAAc,KAAK,MAAM;AAG/B,QAAK,QAAQ,MAAM,WAFL,WAAW,WAAW,MAAM,EAAE,SAAS,YAAW,GACrC,KAAK,UAAU;AAE1C,UAAM;;EAGR,SAAS,cAAc,OAAe;AACpC,aAAU,QAAQ;GAClB,MAAM,MAAM,MAAM,QAAQ;AAC1B,eAAY,SAAS,QAAQ,OAAO;;EAGtC,SAAS,OAAO;AACd,OAAI,QAAQ,SAAS,CAAC,MAAM,SAAU;AACtC,iBAAc,YAAY,QAAQ,EAAC;;EAGrC,SAAS,OAAO;AACd,OAAI,OAAO,SAAS,CAAC,MAAM,SAAU;AACrC,iBAAc,YAAY,QAAQ,EAAC;;EAGrC,SAAS,cAAc,QAA2B,UAAU,EAAE,EAAE;AAC9D,OAAI,QAAQ,SAAS,UAAU,MAAO;GACtC,MAAM,EAAE,UAAU,aAAa;GAC/B,MAAM,EAAE,UAAU,WAAW,qBAAqB;IAChD,UAAU,MAAM;IAChB,WAAW;IACX,kBAAkB;IAClB,GAAG;IACL;AACA,WAAQ,QAAR;IACE,KAAK;AACH,SAAI,UAAU,MAAM,QAAQ,SAC1B,WAAU,MAAM,QAAQ,OAAO,YAC5B,UAAU,MAAM,QAAQ,UAAU,QAAQ,EAAC,CAC9C;AAEF;IACF,KAAK;AACH,SAAI,UAAU,MAAM,QAAQ,SAC1B,WAAU,MAAM,QAAQ,OAAO,YAC5B,UAAU,MAAM,QAAQ,UAAU,QAAQ,EAAC,CAC9C;AAEF;IACF,KAAK;AACH,eAAU,MAAM,OAAO;AACvB,UAAK,UAAU,UAAU,MAAM,IAAG;AAClC;IACF,KAAK;AACH,eAAU,MAAM,OAAO;AACvB,UAAK,UAAU,UAAU,MAAM,IAAG;AAClC;;AAEJ,aAAU,MAAM,mBAAmB;;EAGrC,SAAS,oBAAoB,OAAoB;AAC/C,OAAI,MAAM,QAAQ,gBAAgB,UAChC,OAAM,gBAAe;;EAIzB,SAAS,mBAAmB;AAC1B,OAAI,MAAM,mBACR,OAAK;;EAIT,SAAS,aAAa,GAAe;AACnC,OAAI,CAAC,EAAE,QAAS;AAEhB,OAAI,EAAE,SAAS,GAAG;AAChB,MAAE,gBAAe;AACjB,WAAO;cACE,EAAE,SAAS,GAAG;AACvB,MAAE,gBAAe;AACjB,WAAO;;;AAIX,cACQ,aAAa,QAClB,QAAQ;AACP,aAAU,MAAM,QAAQ;IAE5B;AAEA,QAAM,kBAAkB;AACtB,kBAAe;AAEb,QAAI,CADS,OAAO,OACT,SACT,SAAQ,QAAQ;KAEnB;IACF;AAED,QAAM,cAAc,QAAQ;AAC1B,UAAM;AACN,QAAK,UAAU,IAAG;IACnB;AAED,kBAAgB;AACd,WAAQ,QAAQ;AAChB,0BAAsB;AAEtB,uBAAoB,iBAAiB,SAAS,cAAc,EAC1D,SAAS,OACV,CAAA;IACF;AAED,WAAa,EAIX,eACD,CAAA;;uBA7fC,YA4Gc,MAAA,WAAA,EAAA;IA5GD,IAAG;IAAQ,UAAQ,CAAG,QAAA;;2BA2GpB,CA1Gb,YA0Ga,YAAA;KA1GD,MAAK;KAAc,QAAA;;4BAyGvB,CAxGN,mBAwGM,OAAA;eAvGA;MAAJ,KAAI;MACH,UAAU;MACV,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,UAAA,CAAA;MACX,OAAK,eAAA,EAAA,QAAI,OAAA,OAAM,CAAA;SAEhB,YAiGgB,MAAA,mBAAA,EAAA;MAhGd,MAAA;MACA,SAAA;MACC,iBAAe,QAAA;MAChB,kBAAe;MACM;MACpB,oBAAmB;;6BAEkD;OAAtE,mBAAsE,OAAA;QAAhE,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,OAAA,CAAA;QAAW,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,QAAA,oBAAoB,MAAI,EAAA,CAAA,OAAA,CAAA;;OAEhE,mBAAA,UAAc;OACd,mBAIO,QAAA;QAJA,OAAK,eAAA,CAAG,MAAA,GAAE,CAAC,EAAC,MAAA,EAAS,MAAA,GAAE,CAAC,EAAC,QAAA,CAAA,CAAA;QAAa,SAAO;WAClD,YAEU,MAAA,OAAA,EAAA,MAAA;+BADC,CAAT,YAAS,MAAA,MAAA,CAAA;;;OAIb,mBAAA,UAAc;QACG,SAAA,sBAAjB,mBAWW,UAAA,EAAA,KAAA,GAAA,EAAA,CAVT,mBAIO,QAAA;QAJA,OAAK,eAAE,aAAA,MAAY;QAAG,SAAO;WAClC,YAEU,MAAA,OAAA,EAAA,MAAA;+BADK,CAAb,YAAa,MAAA,UAAA,CAAA;;gBAGjB,mBAIO,QAAA;QAJA,OAAK,eAAE,aAAA,MAAY;QAAG,SAAO;WAClC,YAEU,MAAA,OAAA,EAAA,MAAA;+BADM,CAAd,YAAc,MAAA,WAAA,CAAA;;;OAKZA,KAAAA,OAAO,YAAY,QAAA,6BAD3B,mBAWM,OAAA;;QATH,OAAK,eAAA,CAAG,MAAA,GAAE,CAAC,EAAC,MAAA,EAAS,MAAA,GAAE,CAAC,EAAC,WAAA,CAAA,CAAA;WAE1B,WAMO,KAAA,QAAA,YAAA;QAJJ,aAAc,YAAA;QACd,OAAO,QAAA,QAAQ;gBAGX,iCADF,SAAA,MAAQ,EAAA,EAAA;OAGf,mBAAA,YAAgB;OAChB,mBA8BM,OAAA,EA9BA,OAAK,eAAA,CAAG,MAAA,GAAE,CAAC,EAAC,MAAA,EAAS,MAAA,GAAE,CAAC,EAAC,UAAA,CAAA,CAAA,KAC7B,mBA4BM,OAAA,EA5BA,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,iBAAA,CAAA,KACf,WA0BO,KAAA,QAAA,WAAA;QAxBJ,SAAS;QACH;QACA;QACN,OAAO;QACP,aAAc,YAAA;QACG;gBAmBb;QAjBL,YAEU,MAAA,OAAA,EAAA,EAFA,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,cAAa,UAAA;gCACjB,CAAX,YAAW,MAAA,QAAA,CAAA;;;QAEb,YAEU,MAAA,OAAA,EAAA,EAFA,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,cAAa,SAAA;gCAClB,CAAV,YAAU,MAAA,OAAA,CAAA;;;QAEZ,mBAAuC,KAAA,EAAnC,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,mBAAA,CAAA;QACf,YAEU,MAAA,OAAA,EAAA,EAFA,SAAO,YAAU,EAAA;gCACI,eAA7B,YAA6B,wBAAb,KAAA,MAAK,KAAI,CAAA;;;QAE3B,mBAAuC,KAAA,EAAnC,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,mBAAA,CAAA;QACf,YAEU,MAAA,OAAA,EAAA,EAFA,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,cAAa,gBAAA;gCACb,CAAf,YAAe,MAAA,YAAA,CAAA;;;QAEjB,YAEU,MAAA,OAAA,EAAA,EAFA,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,cAAa,YAAA;gCACZ,CAAhB,YAAgB,MAAA,aAAA,CAAA;;;;OAKxB,mBAAA,WAAe;OACf,mBAoBM,OAAA,EApBA,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,SAAA,CAAA,KAEP,UAAA,SAAaA,KAAAA,OAAM,kBAD3B,WAKE,KAAA,QAAA,gBAAA;;QAFC,aAAc,YAAA;QACd,KAAK,WAAA;0BAER,mBAYE,OAAA;iBAVI;QAAJ,KAAI;QACH,KAAK,WAAA;QACL,KAAK,WAAA;QACL,OAAK,eAAE,SAAA,MAAQ;QACf,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,MAAA,CAAA;QACX,aAAa,QAAA;QACb,QAAM;QACN,SAAO;QACP,aAAW;QACX,cAAY;;OAGjB,WAAQ,KAAA,QAAA,UAAA"}
+{"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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"}

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  <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.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":""}

package/es/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/es/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";