@element-plus/nightly 0.0.20261002 → 0.0.20261004

package/es/components/form/src/hooks/use-form-common-props.d.ts

@@ -3,9 +3,9 @@ import * as _$vue from "vue";
 import { MaybeRef } from "vue";
 
 //#region ../../packages/components/form/src/hooks/use-form-common-props.d.ts
-declare const useFormSize: (fallback?: MaybeRef<ComponentSize | undefined>, ignore?: Partial<Record<"prop" | "form" | "formItem" | "global", boolean>>) => _$vue.ComputedRef<"" | "default" | "large" | "small">;
+declare const useFormSize: (fallback?: MaybeRef<ComponentSize | undefined>, ignore?: Partial<Record<"prop" | "form" | "formItem" | "global", boolean>>) => _$vue.ComputedRef<"" | "default" | "small" | "large">;
 declare const useFormDisabled: (fallback?: MaybeRef<boolean | undefined>) => _$vue.ComputedRef<boolean>;
-declare const useSize: (fallback?: MaybeRef<ComponentSize | undefined>, ignore?: Partial<Record<"prop" | "form" | "formItem" | "global", boolean>>) => _$vue.ComputedRef<"" | "default" | "large" | "small">;
+declare const useSize: (fallback?: MaybeRef<ComponentSize | undefined>, ignore?: Partial<Record<"prop" | "form" | "formItem" | "global", boolean>>) => _$vue.ComputedRef<"" | "default" | "small" | "large">;
 declare const useDisabled: (fallback?: MaybeRef<boolean | undefined>) => _$vue.ComputedRef<boolean>;
 //#endregion
 export { useDisabled, useFormDisabled, useFormSize, useSize };

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

@@ -86,7 +86,7 @@ interface ImageProps {
 declare const imageProps: {
   readonly hideOnClickModal: BooleanConstructor;
   readonly src: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
-  readonly fit: EpPropFinalized<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown, "", boolean>;
+  readonly fit: EpPropFinalized<StringConstructor, "" | "fill" | "contain" | "none" | "cover" | "scale-down", unknown, "", boolean>;
   readonly loading: {
     readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "lazy" | "eager", unknown>>;
     readonly required: false;

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

@@ -17,6 +17,9 @@ declare var __VLS_1: {}, __VLS_3: {}, __VLS_14: {}, __VLS_17: {
   }, __VLS_23: {
     activeIndex: number;
     src: string;
+  }, __VLS_26: {
+    activeIndex: number;
+    src: string;
   };
 type __VLS_Slots = {} & {
   error?: (props: typeof __VLS_1) => any;
@@ -29,29 +32,31 @@ type __VLS_Slots = {} & {
 } & {
   toolbar?: (props: typeof __VLS_20) => any;
 } & {
-  'viewer-error'?: (props: typeof __VLS_23) => any;
+  'viewer-placeholder'?: (props: typeof __VLS_23) => any;
+} & {
+  'viewer-error'?: (props: typeof __VLS_26) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<ImageProps, {
   /** @description manually open preview */showPreview: typeof clickHandler;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  show: () => void;
   close: () => void;
-  load: (evt: Event) => void;
+  show: () => void;
   error: (evt: Event) => void;
+  load: (evt: Event) => void;
   switch: (val: number) => void;
 }, string, _$vue.PublicProps, Readonly<ImageProps> & Readonly<{
-  onShow?: (() => any) | undefined;
   onClose?: (() => any) | undefined;
-  onLoad?: ((evt: Event) => any) | undefined;
+  onShow?: (() => any) | undefined;
   onError?: ((evt: Event) => any) | undefined;
+  onLoad?: ((evt: Event) => any) | undefined;
   onSwitch?: ((val: number) => any) | undefined;
 }>, {
-  infinite: boolean;
   scale: number;
-  closeOnPressEscape: boolean;
+  infinite: boolean;
   src: string;
   fit: ImageFitType;
   initialIndex: number;
+  closeOnPressEscape: boolean;
   previewSrcList: string[];
   zoomRate: number;
   minScale: number;

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

@@ -177,15 +177,23 @@ showPreview: clickHandler });
 				toolbar: withCtx((toolbar) => [renderSlot(_ctx.$slots, "toolbar", normalizeProps(guardReactiveProps(toolbar)))]),
 				default: withCtx(() => [_ctx.$slots.viewer ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "viewer")])) : createCommentVNode("v-if", true)]),
 				_: 2
-			}, [_ctx.$slots.progress ? {
-				name: "progress",
-				fn: withCtx((progress) => [renderSlot(_ctx.$slots, "progress", normalizeProps(guardReactiveProps(progress)))]),
-				key: "0"
-			} : void 0, _ctx.$slots["viewer-error"] ? {
-				name: "viewer-error",
-				fn: withCtx((viewerError) => [renderSlot(_ctx.$slots, "viewer-error", normalizeProps(guardReactiveProps(viewerError)))]),
-				key: "1"
-			} : void 0]), 1032, [
+			}, [
+				_ctx.$slots.progress ? {
+					name: "progress",
+					fn: withCtx((progress) => [renderSlot(_ctx.$slots, "progress", normalizeProps(guardReactiveProps(progress)))]),
+					key: "0"
+				} : void 0,
+				_ctx.$slots["viewer-placeholder"] ? {
+					name: "viewer-placeholder",
+					fn: withCtx((viewerPlaceholder) => [renderSlot(_ctx.$slots, "viewer-placeholder", normalizeProps(guardReactiveProps(viewerPlaceholder)))]),
+					key: "1"
+				} : void 0,
+				_ctx.$slots["viewer-error"] ? {
+					name: "viewer-error",
+					fn: withCtx((viewerError) => [renderSlot(_ctx.$slots, "viewer-error", normalizeProps(guardReactiveProps(viewerError)))]),
+					key: "2"
+				} : void 0
+			]), 1032, [
 				"z-index",
 				"initial-index",
 				"infinite",

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

@@ -1 +1 @@
-{"version":3,"file":"image.vue_vue_type_script_setup_true_lang.mjs","names":["$attrs","$slots"],"sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n  <div ref=\"container\" v-bind=\"containerAttrs\" :class=\"[ns.b(), $attrs.class]\">\n    <slot v-if=\"hasLoadError\" name=\"error\">\n      <div :class=\"ns.e('error')\">{{ t('el.image.error') }}</div>\n    </slot>\n    <template v-else>\n      <img\n        v-if=\"imageSrc !== undefined\"\n        v-bind=\"imgAttrs\"\n        :src=\"imageSrc\"\n        :loading=\"loading\"\n        :style=\"imageStyle\"\n        :class=\"imageKls\"\n        :crossorigin=\"crossorigin\"\n        @click=\"clickHandler\"\n        @load=\"handleLoad\"\n        @error=\"handleError\"\n      />\n      <div v-if=\"isLoading\" :class=\"ns.e('wrapper')\">\n        <slot name=\"placeholder\">\n          <div :class=\"ns.e('placeholder')\" />\n        </slot>\n      </div>\n    </template>\n    <template v-if=\"preview\">\n      <image-viewer\n        v-if=\"showViewer\"\n        :z-index=\"zIndex\"\n        :initial-index=\"imageIndex\"\n        :infinite=\"infinite\"\n        :zoom-rate=\"zoomRate\"\n        :min-scale=\"minScale\"\n        :max-scale=\"maxScale\"\n        :show-progress=\"showProgress\"\n        :url-list=\"previewSrcList\"\n        :scale=\"scale\"\n        :crossorigin=\"crossorigin\"\n        :hide-on-click-modal=\"hideOnClickModal\"\n        :teleported=\"previewTeleported\"\n        :close-on-press-escape=\"closeOnPressEscape\"\n        @close=\"closeViewer\"\n        @switch=\"switchViewer\"\n      >\n        <div v-if=\"$slots.viewer\">\n          <slot name=\"viewer\" />\n        </div>\n        <template v-if=\"$slots.progress\" #progress=\"progress\">\n          <slot name=\"progress\" v-bind=\"progress\" />\n        </template>\n        <template #toolbar=\"toolbar\">\n          <slot name=\"toolbar\" v-bind=\"toolbar\" />\n        </template>\n        <template v-if=\"$slots['viewer-error']\" #viewer-error=\"viewerError\">\n          <slot name=\"viewer-error\" v-bind=\"viewerError\" />\n        </template>\n      </image-viewer>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onMounted,\n  ref,\n  useAttrs as useRawAttrs,\n  watch,\n} from 'vue'\nimport { useIntersectionObserver, useThrottleFn } from '@vueuse/core'\nimport { fromPairs } from 'lodash-unified'\nimport { useAttrs, useLocale, useNamespace } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport {\n  getScrollContainer,\n  isArray,\n  isClient,\n  isElement,\n  isString,\n  isWindow,\n} from '@element-plus/utils'\nimport { imageEmits } from './image'\n\nimport type { ImageProps } from './image'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n  name: 'ElImage',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<ImageProps>(), {\n  src: '',\n  fit: '',\n  previewSrcList: () => [],\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(imageEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('image')\nconst rawAttrs = useRawAttrs()\n\nconst containerAttrs = computed(() => {\n  return fromPairs(\n    Object.entries(rawAttrs).filter(\n      ([key]) => /^(data-|on[A-Z])/i.test(key) || ['id', 'style'].includes(key)\n    )\n  )\n})\n\nconst imgAttrs = useAttrs({\n  excludeListeners: true,\n  excludeKeys: computed<string[]>(() => {\n    return Object.keys(containerAttrs.value)\n  }),\n})\n\nconst imageSrc = ref<string | undefined>()\nconst hasLoadError = ref(false)\nconst isLoading = ref(true)\nconst showViewer = ref(false)\nconst container = ref<HTMLElement>()\nconst _scrollContainer = ref<HTMLElement | undefined>()\n\nconst supportLoading = isClient && 'loading' in HTMLImageElement.prototype\nlet stopScrollListener: (() => void) | undefined\n\nconst imageKls = computed(() => [\n  ns.e('inner'),\n  preview.value && ns.e('preview'),\n  isLoading.value && ns.is('loading'),\n])\n\nconst imageStyle = computed<CSSProperties>(() => {\n  const { fit } = props\n  if (isClient && fit) {\n    return { objectFit: fit }\n  }\n  return {}\n})\n\nconst preview = computed(() => {\n  const { previewSrcList } = props\n  return isArray(previewSrcList) && previewSrcList.length > 0\n})\n\nconst imageIndex = computed(() => {\n  const { previewSrcList, initialIndex } = props\n  let previewIndex = initialIndex\n  if (initialIndex > previewSrcList.length - 1) {\n    previewIndex = 0\n  }\n  return previewIndex\n})\n\nconst isManual = computed(() => {\n  if (props.loading === 'eager') return false\n  return (!supportLoading && props.loading === 'lazy') || props.lazy\n})\n\nconst loadImage = () => {\n  if (!isClient) return\n\n  // reset status\n  isLoading.value = true\n  hasLoadError.value = false\n  imageSrc.value = props.src\n}\n\nfunction handleLoad(event: Event) {\n  isLoading.value = false\n  hasLoadError.value = false\n  emit('load', event)\n}\n\nfunction handleError(event: Event) {\n  isLoading.value = false\n  hasLoadError.value = true\n  emit('error', event)\n}\n\nfunction handleLazyLoad(isIntersecting: boolean) {\n  if (isIntersecting) {\n    loadImage()\n    removeLazyLoadListener()\n  }\n}\n\nconst lazyLoadHandler = useThrottleFn(handleLazyLoad, 200, true)\n\nasync function addLazyLoadListener() {\n  if (!isClient) return\n\n  await nextTick()\n\n  const { scrollContainer } = props\n  if (isElement(scrollContainer)) {\n    _scrollContainer.value = scrollContainer\n  } else if (isString(scrollContainer) && scrollContainer !== '') {\n    _scrollContainer.value =\n      document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n  } else if (container.value) {\n    const scrollContainer = getScrollContainer(container.value)\n    _scrollContainer.value = isWindow(scrollContainer)\n      ? undefined\n      : scrollContainer\n  }\n\n  const { stop } = useIntersectionObserver(\n    container,\n    ([entry]) => {\n      lazyLoadHandler(entry.isIntersecting)\n    },\n    { root: _scrollContainer }\n  )\n  stopScrollListener = stop\n}\n\nfunction removeLazyLoadListener() {\n  if (!isClient || !lazyLoadHandler) return\n\n  stopScrollListener?.()\n  _scrollContainer.value = undefined\n  stopScrollListener = undefined\n}\n\nfunction clickHandler() {\n  // don't show viewer when preview is false\n  if (!preview.value) return\n  showViewer.value = true\n  emit('show')\n}\n\nfunction closeViewer() {\n  showViewer.value = false\n  emit('close')\n}\n\nfunction switchViewer(val: number) {\n  emit('switch', val)\n}\n\nwatch(\n  () => props.src,\n  () => {\n    if (isManual.value) {\n      // reset status\n      isLoading.value = true\n      hasLoadError.value = false\n      removeLazyLoadListener()\n      addLazyLoadListener()\n    } else {\n      loadImage()\n    }\n  }\n)\n\nonMounted(() => {\n  if (isManual.value) {\n    addLazyLoadListener()\n  } else {\n    loadImage()\n  }\n})\n\ndefineExpose({\n  /** @description manually open preview */\n  showPreview: clickHandler,\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"image.vue_vue_type_script_setup_true_lang.mjs","names":["$attrs","$slots"],"sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n  <div ref=\"container\" v-bind=\"containerAttrs\" :class=\"[ns.b(), $attrs.class]\">\n    <slot v-if=\"hasLoadError\" name=\"error\">\n      <div :class=\"ns.e('error')\">{{ t('el.image.error') }}</div>\n    </slot>\n    <template v-else>\n      <img\n        v-if=\"imageSrc !== undefined\"\n        v-bind=\"imgAttrs\"\n        :src=\"imageSrc\"\n        :loading=\"loading\"\n        :style=\"imageStyle\"\n        :class=\"imageKls\"\n        :crossorigin=\"crossorigin\"\n        @click=\"clickHandler\"\n        @load=\"handleLoad\"\n        @error=\"handleError\"\n      />\n      <div v-if=\"isLoading\" :class=\"ns.e('wrapper')\">\n        <slot name=\"placeholder\">\n          <div :class=\"ns.e('placeholder')\" />\n        </slot>\n      </div>\n    </template>\n    <template v-if=\"preview\">\n      <image-viewer\n        v-if=\"showViewer\"\n        :z-index=\"zIndex\"\n        :initial-index=\"imageIndex\"\n        :infinite=\"infinite\"\n        :zoom-rate=\"zoomRate\"\n        :min-scale=\"minScale\"\n        :max-scale=\"maxScale\"\n        :show-progress=\"showProgress\"\n        :url-list=\"previewSrcList\"\n        :scale=\"scale\"\n        :crossorigin=\"crossorigin\"\n        :hide-on-click-modal=\"hideOnClickModal\"\n        :teleported=\"previewTeleported\"\n        :close-on-press-escape=\"closeOnPressEscape\"\n        @close=\"closeViewer\"\n        @switch=\"switchViewer\"\n      >\n        <div v-if=\"$slots.viewer\">\n          <slot name=\"viewer\" />\n        </div>\n        <template v-if=\"$slots.progress\" #progress=\"progress\">\n          <slot name=\"progress\" v-bind=\"progress\" />\n        </template>\n        <template #toolbar=\"toolbar\">\n          <slot name=\"toolbar\" v-bind=\"toolbar\" />\n        </template>\n        <template\n          v-if=\"$slots['viewer-placeholder']\"\n          #viewer-placeholder=\"viewerPlaceholder\"\n        >\n          <slot name=\"viewer-placeholder\" v-bind=\"viewerPlaceholder\" />\n        </template>\n        <template v-if=\"$slots['viewer-error']\" #viewer-error=\"viewerError\">\n          <slot name=\"viewer-error\" v-bind=\"viewerError\" />\n        </template>\n      </image-viewer>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onMounted,\n  ref,\n  useAttrs as useRawAttrs,\n  watch,\n} from 'vue'\nimport { useIntersectionObserver, useThrottleFn } from '@vueuse/core'\nimport { fromPairs } from 'lodash-unified'\nimport { useAttrs, useLocale, useNamespace } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport {\n  getScrollContainer,\n  isArray,\n  isClient,\n  isElement,\n  isString,\n  isWindow,\n} from '@element-plus/utils'\nimport { imageEmits } from './image'\n\nimport type { ImageProps } from './image'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n  name: 'ElImage',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<ImageProps>(), {\n  src: '',\n  fit: '',\n  previewSrcList: () => [],\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(imageEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('image')\nconst rawAttrs = useRawAttrs()\n\nconst containerAttrs = computed(() => {\n  return fromPairs(\n    Object.entries(rawAttrs).filter(\n      ([key]) => /^(data-|on[A-Z])/i.test(key) || ['id', 'style'].includes(key)\n    )\n  )\n})\n\nconst imgAttrs = useAttrs({\n  excludeListeners: true,\n  excludeKeys: computed<string[]>(() => {\n    return Object.keys(containerAttrs.value)\n  }),\n})\n\nconst imageSrc = ref<string | undefined>()\nconst hasLoadError = ref(false)\nconst isLoading = ref(true)\nconst showViewer = ref(false)\nconst container = ref<HTMLElement>()\nconst _scrollContainer = ref<HTMLElement | undefined>()\n\nconst supportLoading = isClient && 'loading' in HTMLImageElement.prototype\nlet stopScrollListener: (() => void) | undefined\n\nconst imageKls = computed(() => [\n  ns.e('inner'),\n  preview.value && ns.e('preview'),\n  isLoading.value && ns.is('loading'),\n])\n\nconst imageStyle = computed<CSSProperties>(() => {\n  const { fit } = props\n  if (isClient && fit) {\n    return { objectFit: fit }\n  }\n  return {}\n})\n\nconst preview = computed(() => {\n  const { previewSrcList } = props\n  return isArray(previewSrcList) && previewSrcList.length > 0\n})\n\nconst imageIndex = computed(() => {\n  const { previewSrcList, initialIndex } = props\n  let previewIndex = initialIndex\n  if (initialIndex > previewSrcList.length - 1) {\n    previewIndex = 0\n  }\n  return previewIndex\n})\n\nconst isManual = computed(() => {\n  if (props.loading === 'eager') return false\n  return (!supportLoading && props.loading === 'lazy') || props.lazy\n})\n\nconst loadImage = () => {\n  if (!isClient) return\n\n  // reset status\n  isLoading.value = true\n  hasLoadError.value = false\n  imageSrc.value = props.src\n}\n\nfunction handleLoad(event: Event) {\n  isLoading.value = false\n  hasLoadError.value = false\n  emit('load', event)\n}\n\nfunction handleError(event: Event) {\n  isLoading.value = false\n  hasLoadError.value = true\n  emit('error', event)\n}\n\nfunction handleLazyLoad(isIntersecting: boolean) {\n  if (isIntersecting) {\n    loadImage()\n    removeLazyLoadListener()\n  }\n}\n\nconst lazyLoadHandler = useThrottleFn(handleLazyLoad, 200, true)\n\nasync function addLazyLoadListener() {\n  if (!isClient) return\n\n  await nextTick()\n\n  const { scrollContainer } = props\n  if (isElement(scrollContainer)) {\n    _scrollContainer.value = scrollContainer\n  } else if (isString(scrollContainer) && scrollContainer !== '') {\n    _scrollContainer.value =\n      document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n  } else if (container.value) {\n    const scrollContainer = getScrollContainer(container.value)\n    _scrollContainer.value = isWindow(scrollContainer)\n      ? undefined\n      : scrollContainer\n  }\n\n  const { stop } = useIntersectionObserver(\n    container,\n    ([entry]) => {\n      lazyLoadHandler(entry.isIntersecting)\n    },\n    { root: _scrollContainer }\n  )\n  stopScrollListener = stop\n}\n\nfunction removeLazyLoadListener() {\n  if (!isClient || !lazyLoadHandler) return\n\n  stopScrollListener?.()\n  _scrollContainer.value = undefined\n  stopScrollListener = undefined\n}\n\nfunction clickHandler() {\n  // don't show viewer when preview is false\n  if (!preview.value) return\n  showViewer.value = true\n  emit('show')\n}\n\nfunction closeViewer() {\n  showViewer.value = false\n  emit('close')\n}\n\nfunction switchViewer(val: number) {\n  emit('switch', val)\n}\n\nwatch(\n  () => props.src,\n  () => {\n    if (isManual.value) {\n      // reset status\n      isLoading.value = true\n      hasLoadError.value = false\n      removeLazyLoadListener()\n      addLazyLoadListener()\n    } else {\n      loadImage()\n    }\n  }\n)\n\nonMounted(() => {\n  if (isManual.value) {\n    addLazyLoadListener()\n  } else {\n    loadImage()\n  }\n})\n\ndefineExpose({\n  /** @description manually open preview */\n  showPreview: clickHandler,\n})\n</script>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"image2.mjs","names":[],"sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n  <div ref=\"container\" v-bind=\"containerAttrs\" :class=\"[ns.b(), $attrs.class]\">\n    <slot v-if=\"hasLoadError\" name=\"error\">\n      <div :class=\"ns.e('error')\">{{ t('el.image.error') }}</div>\n    </slot>\n    <template v-else>\n      <img\n        v-if=\"imageSrc !== undefined\"\n        v-bind=\"imgAttrs\"\n        :src=\"imageSrc\"\n        :loading=\"loading\"\n        :style=\"imageStyle\"\n        :class=\"imageKls\"\n        :crossorigin=\"crossorigin\"\n        @click=\"clickHandler\"\n        @load=\"handleLoad\"\n        @error=\"handleError\"\n      />\n      <div v-if=\"isLoading\" :class=\"ns.e('wrapper')\">\n        <slot name=\"placeholder\">\n          <div :class=\"ns.e('placeholder')\" />\n        </slot>\n      </div>\n    </template>\n    <template v-if=\"preview\">\n      <image-viewer\n        v-if=\"showViewer\"\n        :z-index=\"zIndex\"\n        :initial-index=\"imageIndex\"\n        :infinite=\"infinite\"\n        :zoom-rate=\"zoomRate\"\n        :min-scale=\"minScale\"\n        :max-scale=\"maxScale\"\n        :show-progress=\"showProgress\"\n        :url-list=\"previewSrcList\"\n        :scale=\"scale\"\n        :crossorigin=\"crossorigin\"\n        :hide-on-click-modal=\"hideOnClickModal\"\n        :teleported=\"previewTeleported\"\n        :close-on-press-escape=\"closeOnPressEscape\"\n        @close=\"closeViewer\"\n        @switch=\"switchViewer\"\n      >\n        <div v-if=\"$slots.viewer\">\n          <slot name=\"viewer\" />\n        </div>\n        <template v-if=\"$slots.progress\" #progress=\"progress\">\n          <slot name=\"progress\" v-bind=\"progress\" />\n        </template>\n        <template #toolbar=\"toolbar\">\n          <slot name=\"toolbar\" v-bind=\"toolbar\" />\n        </template>\n        <template v-if=\"$slots['viewer-error']\" #viewer-error=\"viewerError\">\n          <slot name=\"viewer-error\" v-bind=\"viewerError\" />\n        </template>\n      </image-viewer>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onMounted,\n  ref,\n  useAttrs as useRawAttrs,\n  watch,\n} from 'vue'\nimport { useIntersectionObserver, useThrottleFn } from '@vueuse/core'\nimport { fromPairs } from 'lodash-unified'\nimport { useAttrs, useLocale, useNamespace } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport {\n  getScrollContainer,\n  isArray,\n  isClient,\n  isElement,\n  isString,\n  isWindow,\n} from '@element-plus/utils'\nimport { imageEmits } from './image'\n\nimport type { ImageProps } from './image'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n  name: 'ElImage',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<ImageProps>(), {\n  src: '',\n  fit: '',\n  previewSrcList: () => [],\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(imageEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('image')\nconst rawAttrs = useRawAttrs()\n\nconst containerAttrs = computed(() => {\n  return fromPairs(\n    Object.entries(rawAttrs).filter(\n      ([key]) => /^(data-|on[A-Z])/i.test(key) || ['id', 'style'].includes(key)\n    )\n  )\n})\n\nconst imgAttrs = useAttrs({\n  excludeListeners: true,\n  excludeKeys: computed<string[]>(() => {\n    return Object.keys(containerAttrs.value)\n  }),\n})\n\nconst imageSrc = ref<string | undefined>()\nconst hasLoadError = ref(false)\nconst isLoading = ref(true)\nconst showViewer = ref(false)\nconst container = ref<HTMLElement>()\nconst _scrollContainer = ref<HTMLElement | undefined>()\n\nconst supportLoading = isClient && 'loading' in HTMLImageElement.prototype\nlet stopScrollListener: (() => void) | undefined\n\nconst imageKls = computed(() => [\n  ns.e('inner'),\n  preview.value && ns.e('preview'),\n  isLoading.value && ns.is('loading'),\n])\n\nconst imageStyle = computed<CSSProperties>(() => {\n  const { fit } = props\n  if (isClient && fit) {\n    return { objectFit: fit }\n  }\n  return {}\n})\n\nconst preview = computed(() => {\n  const { previewSrcList } = props\n  return isArray(previewSrcList) && previewSrcList.length > 0\n})\n\nconst imageIndex = computed(() => {\n  const { previewSrcList, initialIndex } = props\n  let previewIndex = initialIndex\n  if (initialIndex > previewSrcList.length - 1) {\n    previewIndex = 0\n  }\n  return previewIndex\n})\n\nconst isManual = computed(() => {\n  if (props.loading === 'eager') return false\n  return (!supportLoading && props.loading === 'lazy') || props.lazy\n})\n\nconst loadImage = () => {\n  if (!isClient) return\n\n  // reset status\n  isLoading.value = true\n  hasLoadError.value = false\n  imageSrc.value = props.src\n}\n\nfunction handleLoad(event: Event) {\n  isLoading.value = false\n  hasLoadError.value = false\n  emit('load', event)\n}\n\nfunction handleError(event: Event) {\n  isLoading.value = false\n  hasLoadError.value = true\n  emit('error', event)\n}\n\nfunction handleLazyLoad(isIntersecting: boolean) {\n  if (isIntersecting) {\n    loadImage()\n    removeLazyLoadListener()\n  }\n}\n\nconst lazyLoadHandler = useThrottleFn(handleLazyLoad, 200, true)\n\nasync function addLazyLoadListener() {\n  if (!isClient) return\n\n  await nextTick()\n\n  const { scrollContainer } = props\n  if (isElement(scrollContainer)) {\n    _scrollContainer.value = scrollContainer\n  } else if (isString(scrollContainer) && scrollContainer !== '') {\n    _scrollContainer.value =\n      document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n  } else if (container.value) {\n    const scrollContainer = getScrollContainer(container.value)\n    _scrollContainer.value = isWindow(scrollContainer)\n      ? undefined\n      : scrollContainer\n  }\n\n  const { stop } = useIntersectionObserver(\n    container,\n    ([entry]) => {\n      lazyLoadHandler(entry.isIntersecting)\n    },\n    { root: _scrollContainer }\n  )\n  stopScrollListener = stop\n}\n\nfunction removeLazyLoadListener() {\n  if (!isClient || !lazyLoadHandler) return\n\n  stopScrollListener?.()\n  _scrollContainer.value = undefined\n  stopScrollListener = undefined\n}\n\nfunction clickHandler() {\n  // don't show viewer when preview is false\n  if (!preview.value) return\n  showViewer.value = true\n  emit('show')\n}\n\nfunction closeViewer() {\n  showViewer.value = false\n  emit('close')\n}\n\nfunction switchViewer(val: number) {\n  emit('switch', val)\n}\n\nwatch(\n  () => props.src,\n  () => {\n    if (isManual.value) {\n      // reset status\n      isLoading.value = true\n      hasLoadError.value = false\n      removeLazyLoadListener()\n      addLazyLoadListener()\n    } else {\n      loadImage()\n    }\n  }\n)\n\nonMounted(() => {\n  if (isManual.value) {\n    addLazyLoadListener()\n  } else {\n    loadImage()\n  }\n})\n\ndefineExpose({\n  /** @description manually open preview */\n  showPreview: clickHandler,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"image2.mjs","names":[],"sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n  <div ref=\"container\" v-bind=\"containerAttrs\" :class=\"[ns.b(), $attrs.class]\">\n    <slot v-if=\"hasLoadError\" name=\"error\">\n      <div :class=\"ns.e('error')\">{{ t('el.image.error') }}</div>\n    </slot>\n    <template v-else>\n      <img\n        v-if=\"imageSrc !== undefined\"\n        v-bind=\"imgAttrs\"\n        :src=\"imageSrc\"\n        :loading=\"loading\"\n        :style=\"imageStyle\"\n        :class=\"imageKls\"\n        :crossorigin=\"crossorigin\"\n        @click=\"clickHandler\"\n        @load=\"handleLoad\"\n        @error=\"handleError\"\n      />\n      <div v-if=\"isLoading\" :class=\"ns.e('wrapper')\">\n        <slot name=\"placeholder\">\n          <div :class=\"ns.e('placeholder')\" />\n        </slot>\n      </div>\n    </template>\n    <template v-if=\"preview\">\n      <image-viewer\n        v-if=\"showViewer\"\n        :z-index=\"zIndex\"\n        :initial-index=\"imageIndex\"\n        :infinite=\"infinite\"\n        :zoom-rate=\"zoomRate\"\n        :min-scale=\"minScale\"\n        :max-scale=\"maxScale\"\n        :show-progress=\"showProgress\"\n        :url-list=\"previewSrcList\"\n        :scale=\"scale\"\n        :crossorigin=\"crossorigin\"\n        :hide-on-click-modal=\"hideOnClickModal\"\n        :teleported=\"previewTeleported\"\n        :close-on-press-escape=\"closeOnPressEscape\"\n        @close=\"closeViewer\"\n        @switch=\"switchViewer\"\n      >\n        <div v-if=\"$slots.viewer\">\n          <slot name=\"viewer\" />\n        </div>\n        <template v-if=\"$slots.progress\" #progress=\"progress\">\n          <slot name=\"progress\" v-bind=\"progress\" />\n        </template>\n        <template #toolbar=\"toolbar\">\n          <slot name=\"toolbar\" v-bind=\"toolbar\" />\n        </template>\n        <template\n          v-if=\"$slots['viewer-placeholder']\"\n          #viewer-placeholder=\"viewerPlaceholder\"\n        >\n          <slot name=\"viewer-placeholder\" v-bind=\"viewerPlaceholder\" />\n        </template>\n        <template v-if=\"$slots['viewer-error']\" #viewer-error=\"viewerError\">\n          <slot name=\"viewer-error\" v-bind=\"viewerError\" />\n        </template>\n      </image-viewer>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onMounted,\n  ref,\n  useAttrs as useRawAttrs,\n  watch,\n} from 'vue'\nimport { useIntersectionObserver, useThrottleFn } from '@vueuse/core'\nimport { fromPairs } from 'lodash-unified'\nimport { useAttrs, useLocale, useNamespace } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport {\n  getScrollContainer,\n  isArray,\n  isClient,\n  isElement,\n  isString,\n  isWindow,\n} from '@element-plus/utils'\nimport { imageEmits } from './image'\n\nimport type { ImageProps } from './image'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n  name: 'ElImage',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<ImageProps>(), {\n  src: '',\n  fit: '',\n  previewSrcList: () => [],\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(imageEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('image')\nconst rawAttrs = useRawAttrs()\n\nconst containerAttrs = computed(() => {\n  return fromPairs(\n    Object.entries(rawAttrs).filter(\n      ([key]) => /^(data-|on[A-Z])/i.test(key) || ['id', 'style'].includes(key)\n    )\n  )\n})\n\nconst imgAttrs = useAttrs({\n  excludeListeners: true,\n  excludeKeys: computed<string[]>(() => {\n    return Object.keys(containerAttrs.value)\n  }),\n})\n\nconst imageSrc = ref<string | undefined>()\nconst hasLoadError = ref(false)\nconst isLoading = ref(true)\nconst showViewer = ref(false)\nconst container = ref<HTMLElement>()\nconst _scrollContainer = ref<HTMLElement | undefined>()\n\nconst supportLoading = isClient && 'loading' in HTMLImageElement.prototype\nlet stopScrollListener: (() => void) | undefined\n\nconst imageKls = computed(() => [\n  ns.e('inner'),\n  preview.value && ns.e('preview'),\n  isLoading.value && ns.is('loading'),\n])\n\nconst imageStyle = computed<CSSProperties>(() => {\n  const { fit } = props\n  if (isClient && fit) {\n    return { objectFit: fit }\n  }\n  return {}\n})\n\nconst preview = computed(() => {\n  const { previewSrcList } = props\n  return isArray(previewSrcList) && previewSrcList.length > 0\n})\n\nconst imageIndex = computed(() => {\n  const { previewSrcList, initialIndex } = props\n  let previewIndex = initialIndex\n  if (initialIndex > previewSrcList.length - 1) {\n    previewIndex = 0\n  }\n  return previewIndex\n})\n\nconst isManual = computed(() => {\n  if (props.loading === 'eager') return false\n  return (!supportLoading && props.loading === 'lazy') || props.lazy\n})\n\nconst loadImage = () => {\n  if (!isClient) return\n\n  // reset status\n  isLoading.value = true\n  hasLoadError.value = false\n  imageSrc.value = props.src\n}\n\nfunction handleLoad(event: Event) {\n  isLoading.value = false\n  hasLoadError.value = false\n  emit('load', event)\n}\n\nfunction handleError(event: Event) {\n  isLoading.value = false\n  hasLoadError.value = true\n  emit('error', event)\n}\n\nfunction handleLazyLoad(isIntersecting: boolean) {\n  if (isIntersecting) {\n    loadImage()\n    removeLazyLoadListener()\n  }\n}\n\nconst lazyLoadHandler = useThrottleFn(handleLazyLoad, 200, true)\n\nasync function addLazyLoadListener() {\n  if (!isClient) return\n\n  await nextTick()\n\n  const { scrollContainer } = props\n  if (isElement(scrollContainer)) {\n    _scrollContainer.value = scrollContainer\n  } else if (isString(scrollContainer) && scrollContainer !== '') {\n    _scrollContainer.value =\n      document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n  } else if (container.value) {\n    const scrollContainer = getScrollContainer(container.value)\n    _scrollContainer.value = isWindow(scrollContainer)\n      ? undefined\n      : scrollContainer\n  }\n\n  const { stop } = useIntersectionObserver(\n    container,\n    ([entry]) => {\n      lazyLoadHandler(entry.isIntersecting)\n    },\n    { root: _scrollContainer }\n  )\n  stopScrollListener = stop\n}\n\nfunction removeLazyLoadListener() {\n  if (!isClient || !lazyLoadHandler) return\n\n  stopScrollListener?.()\n  _scrollContainer.value = undefined\n  stopScrollListener = undefined\n}\n\nfunction clickHandler() {\n  // don't show viewer when preview is false\n  if (!preview.value) return\n  showViewer.value = true\n  emit('show')\n}\n\nfunction closeViewer() {\n  showViewer.value = false\n  emit('close')\n}\n\nfunction switchViewer(val: number) {\n  emit('switch', val)\n}\n\nwatch(\n  () => props.src,\n  () => {\n    if (isManual.value) {\n      // reset status\n      isLoading.value = true\n      hasLoadError.value = false\n      removeLazyLoadListener()\n      addLazyLoadListener()\n    } else {\n      loadImage()\n    }\n  }\n)\n\nonMounted(() => {\n  if (isManual.value) {\n    addLazyLoadListener()\n  } else {\n    loadImage()\n  }\n})\n\ndefineExpose({\n  /** @description manually open preview */\n  showPreview: clickHandler,\n})\n</script>\n"],"mappings":""}

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

@@ -20,7 +20,10 @@ declare var __VLS_55: {
   }, __VLS_124: {
     activeIndex: number;
     src: string;
-  }, __VLS_126: {};
+  }, __VLS_126: {
+    activeIndex: number;
+    src: string;
+  }, __VLS_128: {};
 type __VLS_Slots = {} & {
   progress?: (props: typeof __VLS_55) => any;
 } & {
@@ -28,7 +31,9 @@ type __VLS_Slots = {} & {
 } & {
   'viewer-error'?: (props: typeof __VLS_124) => any;
 } & {
-  default?: (props: typeof __VLS_126) => any;
+  'viewer-placeholder'?: (props: typeof __VLS_126) => any;
+} & {
+  default?: (props: typeof __VLS_128) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<ImageViewerProps, {
   /**
@@ -46,10 +51,10 @@ declare const __VLS_base: _$vue.DefineComponent<ImageViewerProps, {
   onError?: ((evt: Event) => any) | undefined;
   onSwitch?: ((index: number) => any) | undefined;
 }>, {
-  infinite: boolean;
   scale: number;
-  closeOnPressEscape: boolean;
+  infinite: boolean;
   initialIndex: number;
+  closeOnPressEscape: boolean;
   zoomRate: number;
   minScale: number;
   maxScale: number;

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

@@ -375,13 +375,19 @@ setActiveItem });
 							key: currentImg.value,
 							src: currentImg.value,
 							style: normalizeStyle(imgStyle.value),
-							class: normalizeClass(unref(ns).e("img")),
+							class: normalizeClass([unref(ns).e("img"), unref(ns).is("loading", loading.value && !!_ctx.$slots["viewer-placeholder"])]),
 							crossorigin: __props.crossorigin,
 							onLoad: handleImgLoad,
 							onError: handleImgError,
 							onMousedown: handleMouseDown,
 							onTouchstart: handleTouchStart
-						}, null, 46, _hoisted_1))], 2),
+						}, null, 46, _hoisted_1)), loading.value && _ctx.$slots["viewer-placeholder"] ? (openBlock(), createElementBlock("div", {
+							key: 2,
+							class: normalizeClass(unref(ns).e("placeholder"))
+						}, [renderSlot(_ctx.$slots, "viewer-placeholder", {
+							activeIndex: activeIndex.value,
+							src: currentImg.value
+						})], 2)) : createCommentVNode("v-if", true)], 2),
 						renderSlot(_ctx.$slots, "default")
 					]),
 					_: 3

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

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

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

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

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

@@ -155,12 +155,12 @@ interface InputProps {
  * @deprecated Removed after 3.0.0, Use `InputProps` instead.
  */
 declare const inputProps: {
-  readonly inputmode: EpPropFinalized<(new (...args: any[]) => "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal") | (() => "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined) | (((new (...args: any[]) => "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal") | (() => "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined)) | null)[], unknown, unknown, undefined, boolean>;
+  readonly inputmode: EpPropFinalized<(new (...args: any[]) => "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal") | (() => "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined) | (((new (...args: any[]) => "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal") | (() => "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined)) | null)[], unknown, unknown, undefined, boolean>;
   readonly name: StringConstructor;
   readonly ariaLabel: StringConstructor;
   readonly id: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
   readonly size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

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

@@ -33,38 +33,38 @@ declare const __VLS_base: _$vue.DefineComponent<InputProps, {
   resizeTextarea: () => void;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   clear: (evt: MouseEvent | undefined) => void;
-  "update:modelValue": (value: string) => void;
+  input: (value: string) => void;
   mouseenter: (evt: MouseEvent) => void;
   mouseleave: (evt: MouseEvent) => void;
   focus: (evt: FocusEvent) => void;
   blur: (evt: FocusEvent) => void;
+  "update:modelValue": (value: string) => void;
   change: (value: string, evt?: Event | undefined) => void;
-  input: (value: string) => void;
-  compositionend: (evt: CompositionEvent) => void;
+  keydown: (evt: Event | KeyboardEvent) => void;
   compositionstart: (evt: CompositionEvent) => void;
   compositionupdate: (evt: CompositionEvent) => void;
-  keydown: (evt: Event | KeyboardEvent) => void;
+  compositionend: (evt: CompositionEvent) => void;
 }, string, _$vue.PublicProps, Readonly<InputProps> & Readonly<{
   onClear?: ((evt: MouseEvent | undefined) => any) | undefined;
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  onInput?: ((value: string) => any) | undefined;
   onMouseenter?: ((evt: MouseEvent) => any) | undefined;
   onMouseleave?: ((evt: MouseEvent) => any) | undefined;
   onFocus?: ((evt: FocusEvent) => any) | undefined;
   onBlur?: ((evt: FocusEvent) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
   onChange?: ((value: string, evt?: Event | undefined) => any) | undefined;
-  onInput?: ((value: string) => any) | undefined;
-  onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
+  onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
   onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
   onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
-  onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+  onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
 }>, {
+  modelValue: string | number | null;
   type: InputType;
   disabled: boolean;
+  autocomplete: string;
   clearIcon: IconPropType;
-  modelValue: string | number | null;
-  tabindex: string | number;
   validateEvent: boolean;
-  autocomplete: string;
+  tabindex: string | number;
   inputStyle: string | false | _$vue.CSSProperties | StyleValue[] | null;
   modelModifiers: InputModelModifiers;
   wordLimitPosition: "inside" | "outside";

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

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

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

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