element-plus 2.1.7 → 2.1.8

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

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

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

@@ -6,27 +6,30 @@ export declare const ElImageViewer: import("element-plus/es/utils").SFCWithInsta
     readonly hideOnClickModal: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly teleported: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
 }, {
-    index: import("vue").Ref<number>;
-    wrapper: import("vue").Ref<HTMLDivElement | undefined>;
-    imgRefs: import("vue").Ref<any[]>;
-    isSingle: import("vue").ComputedRef<boolean>;
-    isFirst: import("vue").ComputedRef<boolean>;
-    isLast: import("vue").ComputedRef<boolean>;
-    currentImg: import("vue").ComputedRef<string>;
-    imgStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
-    mode: import("vue").Ref<{
-        name: string;
-        icon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-    }>;
-    computedZIndex: import("vue").ComputedRef<number>;
-    handleActions: (action: import("./src/image-viewer.vue").ImageViewerAction, options?: {}) => void;
-    prev: () => void;
-    next: () => void;
-    hide: () => void;
-    toggleMode: () => void;
-    handleImgLoad: () => void;
-    handleImgError: (e: Event) => void;
-    handleMouseDown: (e: MouseEvent) => void;
+    Mode: {
+        CONTAIN: {
+            name: string;
+            icon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+        };
+        ORIGINAL: {
+            name: string;
+            icon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+        };
+    };
+    mousewheelEventName: string;
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        readonly urlList: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string[]>, () => [], unknown, unknown, unknown>;
+        readonly zIndex: import("element-plus/es/utils").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
+        readonly initialIndex: import("element-plus/es/utils").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
+        readonly infinite: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+        readonly hideOnClickModal: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+        readonly teleported: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    }>> & {
+        onClose?: (() => any) | undefined;
+        onSwitch?: ((index: number) => any) | undefined;
+    }>>;
+    emit: ((event: "close") => void) & ((event: "switch", index: number) => void);
+    t: import("../..").Translator;
     ns: {
         namespace: import("vue").ComputedRef<string>;
         b: (blockSuffix?: string) => string;
@@ -41,6 +44,79 @@ export declare const ElImageViewer: import("element-plus/es/utils").SFCWithInsta
             (name: string): string;
         };
     };
+    nextZIndex: () => number;
+    wrapper: import("vue").Ref<HTMLDivElement | undefined>;
+    imgRefs: import("vue").Ref<any[]>;
+    scopeEventListener: import("vue").EffectScope;
+    loading: import("vue").Ref<boolean>;
+    index: import("vue").Ref<number>;
+    mode: import("vue").Ref<{
+        name: string;
+        icon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    }>;
+    transform: import("vue").Ref<{
+        scale: number;
+        deg: number;
+        offsetX: number;
+        offsetY: number;
+        enableTransition: boolean;
+    }>;
+    isSingle: import("vue").ComputedRef<boolean>;
+    isFirst: import("vue").ComputedRef<boolean>;
+    isLast: import("vue").ComputedRef<boolean>;
+    currentImg: import("vue").ComputedRef<string>;
+    imgStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+    computedZIndex: import("vue").ComputedRef<number>;
+    hide: () => void;
+    registerEventListener: () => void;
+    unregisterEventListener: () => void;
+    handleImgLoad: () => void;
+    handleImgError: (e: Event) => void;
+    handleMouseDown: (e: MouseEvent) => void;
+    reset: () => void;
+    toggleMode: () => void;
+    prev: () => void;
+    next: () => void;
+    handleActions: (action: import("./src/image-viewer").ImageViewerAction, options?: {}) => void;
+    ElIcon: import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{
+        readonly size: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+        readonly color: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+    }, {
+        props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+            readonly size: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+            readonly color: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+        }>> & {
+            [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
+        }>>;
+        ns: {
+            namespace: import("vue").ComputedRef<string>;
+            b: (blockSuffix?: string) => string;
+            e: (element?: string | undefined) => string;
+            m: (modifier?: string | undefined) => string;
+            be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+            em: (element?: string | undefined, modifier?: string | undefined) => string;
+            bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+            bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+            is: {
+                (name: string, state: boolean | undefined): string;
+                (name: string): string;
+            };
+        };
+        style: import("vue").ComputedRef<import("vue").CSSProperties>;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        readonly size: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+        readonly color: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+    }>>, {
+        size: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown>;
+        color: string;
+    }>> & Record<string, any>;
+    ArrowLeft: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    ArrowRight: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    Close: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    RefreshLeft: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    RefreshRight: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    ZoomIn: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    ZoomOut: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => boolean;
     switch: (index: number) => boolean;
@@ -59,8 +135,8 @@ export declare const ElImageViewer: import("element-plus/es/utils").SFCWithInsta
     teleported: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     infinite: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     initialIndex: number;
-    urlList: string[];
     hideOnClickModal: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
+    urlList: string[];
 }>> & Record<string, any>;
 export default ElImageViewer;
 export * from './src/image-viewer';

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

@@ -1,4 +1,5 @@
 import type { ExtractPropTypes } from 'vue';
+export declare type ImageViewerAction = 'zoomIn' | 'zoomOut' | 'clockwise' | 'anticlockwise';
 export declare const imageViewerProps: {
     readonly urlList: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string[]>, () => [], unknown, unknown, unknown>;
     readonly zIndex: import("element-plus/es/utils").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;

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

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.mjs","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.ts"],"sourcesContent":["import { buildProps, definePropType, mutable } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const imageViewerProps = buildProps({\n  urlList: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  zIndex: {\n    type: Number,\n  },\n  initialIndex: {\n    type: Number,\n    default: 0,\n  },\n  infinite: {\n    type: Boolean,\n    default: true,\n  },\n  hideOnClickModal: {\n    type: Boolean,\n    default: false,\n  },\n  teleported: {\n    type: Boolean,\n    default: false,\n  },\n} as const)\nexport type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>\n\nexport const imageViewerEmits = {\n  close: () => true,\n  switch: (index: number) => typeof index === 'number',\n}\nexport type ImageViewerEmits = typeof imageViewerEmits\n"],"names":[],"mappings":";;;;AACY,MAAC,gBAAgB,GAAG,UAAU,CAAC;AAC3C,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,gBAAgB,EAAE;AACpB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,gBAAgB,GAAG;AAChC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ;AAC9C;;;;"}
+{"version":3,"file":"image-viewer.mjs","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.ts"],"sourcesContent":["import { buildProps, definePropType, mutable } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\n\nexport type ImageViewerAction =\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'clockwise'\n  | 'anticlockwise'\n\nexport const imageViewerProps = buildProps({\n  urlList: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  zIndex: {\n    type: Number,\n  },\n  initialIndex: {\n    type: Number,\n    default: 0,\n  },\n  infinite: {\n    type: Boolean,\n    default: true,\n  },\n  hideOnClickModal: {\n    type: Boolean,\n    default: false,\n  },\n  teleported: {\n    type: Boolean,\n    default: false,\n  },\n} as const)\nexport type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>\n\nexport const imageViewerEmits = {\n  close: () => true,\n  switch: (index: number) => typeof index === 'number',\n}\nexport type ImageViewerEmits = typeof imageViewerEmits\n"],"names":[],"mappings":";;;;AACY,MAAC,gBAAgB,GAAG,UAAU,CAAC;AAC3C,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,gBAAgB,EAAE;AACpB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,gBAAgB,GAAG;AAChC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ;AAC9C;;;;"}

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

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'vue';
-export declare type ImageViewerAction = 'zoomIn' | 'zoomOut' | 'clockwise' | 'anticlockwise';
+import type { ImageViewerAction } from './image-viewer';
 declare const _default: import("vue").DefineComponent<{
     readonly urlList: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string[]>, () => [], unknown, unknown, unknown>;
     readonly zIndex: import("element-plus/es/utils").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
@@ -8,27 +8,30 @@ declare const _default: import("vue").DefineComponent<{
     readonly hideOnClickModal: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly teleported: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
 }, {
-    index: import("vue").Ref<number>;
-    wrapper: import("vue").Ref<HTMLDivElement | undefined>;
-    imgRefs: import("vue").Ref<any[]>;
-    isSingle: import("vue").ComputedRef<boolean>;
-    isFirst: import("vue").ComputedRef<boolean>;
-    isLast: import("vue").ComputedRef<boolean>;
-    currentImg: import("vue").ComputedRef<string>;
-    imgStyle: import("vue").ComputedRef<CSSProperties>;
-    mode: import("vue").Ref<{
-        name: string;
-        icon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-    }>;
-    computedZIndex: import("vue").ComputedRef<number>;
-    handleActions: (action: ImageViewerAction, options?: {}) => void;
-    prev: () => void;
-    next: () => void;
-    hide: () => void;
-    toggleMode: () => void;
-    handleImgLoad: () => void;
-    handleImgError: (e: Event) => void;
-    handleMouseDown: (e: MouseEvent) => void;
+    Mode: {
+        CONTAIN: {
+            name: string;
+            icon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+        };
+        ORIGINAL: {
+            name: string;
+            icon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+        };
+    };
+    mousewheelEventName: string;
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        readonly urlList: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string[]>, () => [], unknown, unknown, unknown>;
+        readonly zIndex: import("element-plus/es/utils").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
+        readonly initialIndex: import("element-plus/es/utils").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
+        readonly infinite: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+        readonly hideOnClickModal: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+        readonly teleported: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    }>> & {
+        onClose?: (() => any) | undefined;
+        onSwitch?: ((index: number) => any) | undefined;
+    }>>;
+    emit: ((event: "close") => void) & ((event: "switch", index: number) => void);
+    t: import("element-plus/es/hooks").Translator;
     ns: {
         namespace: import("vue").ComputedRef<string>;
         b: (blockSuffix?: string) => string;
@@ -43,6 +46,79 @@ declare const _default: import("vue").DefineComponent<{
             (name: string): string;
         };
     };
+    nextZIndex: () => number;
+    wrapper: import("vue").Ref<HTMLDivElement | undefined>;
+    imgRefs: import("vue").Ref<any[]>;
+    scopeEventListener: import("vue").EffectScope;
+    loading: import("vue").Ref<boolean>;
+    index: import("vue").Ref<number>;
+    mode: import("vue").Ref<{
+        name: string;
+        icon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    }>;
+    transform: import("vue").Ref<{
+        scale: number;
+        deg: number;
+        offsetX: number;
+        offsetY: number;
+        enableTransition: boolean;
+    }>;
+    isSingle: import("vue").ComputedRef<boolean>;
+    isFirst: import("vue").ComputedRef<boolean>;
+    isLast: import("vue").ComputedRef<boolean>;
+    currentImg: import("vue").ComputedRef<string>;
+    imgStyle: import("vue").ComputedRef<CSSProperties>;
+    computedZIndex: import("vue").ComputedRef<number>;
+    hide: () => void;
+    registerEventListener: () => void;
+    unregisterEventListener: () => void;
+    handleImgLoad: () => void;
+    handleImgError: (e: Event) => void;
+    handleMouseDown: (e: MouseEvent) => void;
+    reset: () => void;
+    toggleMode: () => void;
+    prev: () => void;
+    next: () => void;
+    handleActions: (action: ImageViewerAction, options?: {}) => void;
+    ElIcon: import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{
+        readonly size: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+        readonly color: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+    }, {
+        props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+            readonly size: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+            readonly color: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+        }>> & {
+            [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
+        }>>;
+        ns: {
+            namespace: import("vue").ComputedRef<string>;
+            b: (blockSuffix?: string) => string;
+            e: (element?: string | undefined) => string;
+            m: (modifier?: string | undefined) => string;
+            be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+            em: (element?: string | undefined, modifier?: string | undefined) => string;
+            bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+            bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+            is: {
+                (name: string, state: boolean | undefined): string;
+                (name: string): string;
+            };
+        };
+        style: import("vue").ComputedRef<CSSProperties>;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        readonly size: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+        readonly color: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+    }>>, {
+        size: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown>;
+        color: string;
+    }>> & Record<string, any>;
+    ArrowLeft: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    ArrowRight: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    Close: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    RefreshLeft: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    RefreshRight: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    ZoomIn: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    ZoomOut: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => boolean;
     switch: (index: number) => boolean;
@@ -61,7 +137,7 @@ declare const _default: import("vue").DefineComponent<{
     teleported: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     infinite: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     initialIndex: number;
-    urlList: string[];
     hideOnClickModal: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
+    urlList: string[];
 }>;
 export default _default;