element-pe 2.3.3 → 2.3.4

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       :widget=\"widget\"\n  >\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=\"attrs\"\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        :url-list=\"previewSrcList\"\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      </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} from 'vue'\nimport { watch } from '../../config-provider'\nimport { useEventListener, useThrottleFn } from '@vueuse/core'\nimport { useAttrs, useLocale, useNamespace } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport {\n  getScrollContainer,\n  isClient,\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  inheritAttrs: false,\n})\n\nconst props = defineProps(imageProps)\nconst emit = defineEmits(imageEmits)\n\nlet prevOverflow = ''\n\nconst { t } = useLocale()\nconst ns = useNamespace('image')\nconst rawAttrs = useRawAttrs()\nconst attrs = useAttrs()\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 | Window>()\n\nconst supportLoading = isClient && 'loading' in HTMLImageElement.prototype\nlet stopScrollListener: (() => void) | undefined\nlet stopWheelListener: (() => 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 containerStyle = computed(() => rawAttrs.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 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() {\n  if (isInContainer(container.value, _scrollContainer.value)) {\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    _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  emit('show')\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 (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</script>\n"],"names":["useRawAttrs","useAttrs"],"mappings":"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"}
+{"version":3,"file":"image2.mjs","sources":["../../../../../../packages/components/image/src/image.ts"],"sourcesContent":["import {\n  buildProps,\n  definePropType,\n  isNumber,\n  mutable,\n} from '@element-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\n\nexport const imageProps = buildProps({\n  /**\n   * @description when enabling preview, use this flag to control whether clicking on backdrop can exit preview mode.\n   */\n  hideOnClickModal: Boolean,\n  /**\n   * @description image source, same as native.\n   */\n  src: {\n    type: String,\n    default: '',\n  },\n  /**\n   * @description indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).\n   */\n  fit: {\n    type: String,\n    values: ['', 'contain', 'cover', 'fill', 'none', 'scale-down'],\n    default: '',\n  },\n  /**\n   * @description Indicates how the browser should load the image, same as [native](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading)\n   */\n  loading: {\n    type: String,\n    values: ['eager', 'lazy'],\n  },\n  /**\n   * @description whether to use lazy load.\n   */\n  lazy: Boolean,\n  /**\n   * @description the container to add scroll listener when using lazy load.\n   */\n  scrollContainer: {\n    type: definePropType<string | HTMLElement | undefined>([String, Object]),\n  },\n  /**\n   * @description allow big image preview.\n   */\n  previewSrcList: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  /**\n   * @description whether to append image-viewer to body. A nested parent element attribute transform should have this attribute set to `true`.\n   */\n  previewTeleported: Boolean,\n  /**\n   * @description set image preview z-index.\n   */\n  zIndex: {\n    type: Number,\n  },\n  /**\n   * @description initial preview image index, less than the length of `url-list`.\n   */\n  initialIndex: {\n    type: Number,\n    default: 0,\n  },\n  /**\n   * @description whether the viewer preview is infinite.\n   */\n  infinite: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether the image-viewer can be closed by pressing ESC.\n   */\n  closeOnPressEscape: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description the zoom rate of the image viewer zoom event\n   */\n  zoomRate: {\n    type: Number,\n    default: 1.2,\n  },\n  /**\n   * @description widget\n   */\n  widget: {\n    type: String,\n  },\n  /**\n   * @description the min scale of the image viewer zoom event.\n   */\n  minScale: {\n    type: Number,\n    default: 0.2,\n  },\n  /**\n   * @description the max scale of the image viewer zoom event.\n   */\n  maxScale: {\n    type: Number,\n    default: 7,\n  },\n  /**\n   * @description set HTML attribute: crossorigin.\n   */\n  crossorigin: {\n    type: definePropType<'anonymous' | 'use-credentials' | ''>(String),\n  },\n} as const)\nexport type ImageProps = ExtractPropTypes<typeof imageProps>\n\nexport const imageEmits = {\n  load: (evt: Event) => evt instanceof Event,\n  error: (evt: Event) => evt instanceof Event,\n  switch: (val: number) => isNumber(val),\n  close: () => true,\n  show: () => true,\n}\nexport type ImageEmits = typeof imageEmits\n"],"names":[],"mappings":";;;;;AAMY,MAAC,UAAU,GAAG,UAAU,CAAC;AACrC,EAAE,gBAAgB,EAAE,OAAO;AAC3B,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC;AAClE,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;AAC7B,GAAG;AACH,EAAE,IAAI,EAAE,OAAO;AACf,EAAE,eAAe,EAAE;AACnB,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,GAAG;AACH,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,iBAAiB,EAAE,OAAO;AAC5B,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,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,CAAC,EAAE;AACS,MAAC,UAAU,GAAG;AAC1B,EAAE,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,KAAK;AACrC,EAAE,KAAK,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,KAAK;AACtC,EAAE,MAAM,EAAE,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC;AAChC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB,EAAE,IAAI,EAAE,MAAM,IAAI;AAClB;;;;"}

package/es/components/image-viewer/index.mjs

@@ -1,6 +1,6 @@
 import '../../utils/index.mjs';
-import ImageViewer from './src/image-viewer2.mjs';
-export { imageViewerEmits, imageViewerProps } from './src/image-viewer.mjs';
+import ImageViewer from './src/image-viewer.mjs';
+export { imageViewerEmits, imageViewerProps } from './src/image-viewer2.mjs';
 import { withInstall } from '../../utils/vue/install.mjs';
 
 const ElImageViewer = withInstall(ImageViewer);

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

@@ -1,51 +1,412 @@
+import { defineComponent, markRaw, ref, effectScope, shallowRef, computed, nextTick, onMounted, openBlock, createBlock, Teleport, createVNode, Transition, unref, withCtx, createElementVNode, normalizeClass, normalizeStyle, withModifiers, createCommentVNode, createElementBlock, Fragment, resolveDynamicComponent, renderList, withDirectives, vShow, renderSlot } from 'vue';
+import '../../config-provider/index.mjs';
+import { useEventListener } from '@vueuse/core';
+import { throttle } from 'lodash-unified';
+import '../../../hooks/index.mjs';
+import '../../../constants/index.mjs';
 import '../../../utils/index.mjs';
-import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
-import { mutable } from '../../../utils/typescript.mjs';
-import { isNumber } from '../../../utils/types.mjs';
+import { ElIcon } from '../../icon/index.mjs';
+import { FullScreen, ScaleToOriginal, Close, ArrowLeft, ArrowRight, ZoomOut, ZoomIn, RefreshLeft, RefreshRight } from '@element-plus/icons-vue';
+import { imageViewerProps, imageViewerEmits } from './image-viewer2.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useGlobalConfig } from '../../config-provider/src/hooks/use-global-config.mjs';
+import { useLocale } from '../../../hooks/use-locale/index.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { useZIndex } from '../../../hooks/use-z-index/index.mjs';
+import { EVENT_CODE } from '../../../constants/aria.mjs';
+import { keysOf } from '../../../utils/objects.mjs';
+import { watch } from '../../config-provider/src/for-editor.mjs';
 
-const imageViewerProps = buildProps({
-  urlList: {
-    type: definePropType(Array),
-    default: () => mutable([])
-  },
-  zIndex: {
-    type: Number
-  },
-  initialIndex: {
-    type: Number,
-    default: 0
-  },
-  infinite: {
-    type: Boolean,
-    default: true
-  },
-  hideOnClickModal: Boolean,
-  teleported: Boolean,
-  closeOnPressEscape: {
-    type: Boolean,
-    default: true
-  },
-  zoomRate: {
-    type: Number,
-    default: 1.2
-  },
-  minScale: {
-    type: Number,
-    default: 0.2
-  },
-  maxScale: {
-    type: Number,
-    default: 7
-  },
-  crossorigin: {
-    type: definePropType(String)
+const _hoisted_1 = ["src", "crossorigin"];
+const __default__ = defineComponent({
+  name: "ElImageViewer"
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: imageViewerProps,
+  emits: imageViewerEmits,
+  setup(__props, { expose, emit }) {
+    var _a;
+    const props = __props;
+    const forEditor = useGlobalConfig("forEditor");
+    const modes = {
+      CONTAIN: {
+        name: "contain",
+        icon: markRaw(FullScreen)
+      },
+      ORIGINAL: {
+        name: "original",
+        icon: markRaw(ScaleToOriginal)
+      }
+    };
+    const { t } = useLocale();
+    const ns = useNamespace("image-viewer");
+    const { nextZIndex } = useZIndex();
+    const wrapper = ref();
+    const imgRefs = ref([]);
+    const scopeEventListener = effectScope();
+    const loading = ref(true);
+    const activeIndex = ref(props.initialIndex);
+    const mode = shallowRef(modes.CONTAIN);
+    const transform = ref({
+      scale: 1,
+      deg: 0,
+      offsetX: 0,
+      offsetY: 0,
+      enableTransition: false
+    });
+    const zIndex = ref((_a = props.zIndex) != null ? _a : nextZIndex());
+    const isSingle = computed(() => {
+      const { urlList } = props;
+      return urlList.length <= 1;
+    });
+    const isFirst = computed(() => {
+      return activeIndex.value === 0;
+    });
+    const isLast = computed(() => {
+      return activeIndex.value === props.urlList.length - 1;
+    });
+    const currentImg = computed(() => {
+      return props.urlList[activeIndex.value];
+    });
+    const arrowPrevKls = computed(() => [
+      ns.e("btn"),
+      ns.e("prev"),
+      ns.is("disabled", !props.infinite && isFirst.value)
+    ]);
+    const arrowNextKls = computed(() => [
+      ns.e("btn"),
+      ns.e("next"),
+      ns.is("disabled", !props.infinite && isLast.value)
+    ]);
+    const imgStyle = computed(() => {
+      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value;
+      let translateX = offsetX / scale;
+      let translateY = offsetY / scale;
+      switch (deg % 360) {
+        case 90:
+        case -270:
+          ;
+          [translateX, translateY] = [translateY, -translateX];
+          break;
+        case 180:
+        case -180:
+          ;
+          [translateX, translateY] = [-translateX, -translateY];
+          break;
+        case 270:
+        case -90:
+          ;
+          [translateX, translateY] = [-translateY, translateX];
+          break;
+      }
+      const style = {
+        transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,
+        transition: enableTransition ? "transform .3s" : ""
+      };
+      if (mode.value.name === modes.CONTAIN.name) {
+        style.maxWidth = style.maxHeight = "100%";
+      }
+      return style;
+    });
+    function hide() {
+      unregisterEventListener();
+      emit("close");
+    }
+    function registerEventListener() {
+      const keydownHandler = throttle((e) => {
+        switch (e.code) {
+          case EVENT_CODE.esc:
+            props.closeOnPressEscape && hide();
+            break;
+          case EVENT_CODE.space:
+            toggleMode();
+            break;
+          case EVENT_CODE.left:
+            prev();
+            break;
+          case EVENT_CODE.up:
+            handleActions("zoomIn");
+            break;
+          case EVENT_CODE.right:
+            next();
+            break;
+          case EVENT_CODE.down:
+            handleActions("zoomOut");
+            break;
+        }
+      });
+      const mousewheelHandler = throttle((e) => {
+        const delta = e.deltaY || e.deltaX;
+        handleActions(delta < 0 ? "zoomIn" : "zoomOut", {
+          zoomRate: props.zoomRate,
+          enableTransition: false
+        });
+      });
+      scopeEventListener.run(() => {
+        useEventListener(document, "keydown", keydownHandler);
+        useEventListener(document, "wheel", mousewheelHandler);
+      });
+    }
+    function unregisterEventListener() {
+      scopeEventListener.stop();
+    }
+    function handleImgLoad() {
+      loading.value = false;
+    }
+    function handleImgError(e) {
+      loading.value = false;
+      e.target.alt = t("el.image.error");
+    }
+    function handleMouseDown(e) {
+      if (loading.value || e.button !== 0 || !wrapper.value)
+        return;
+      transform.value.enableTransition = false;
+      const { offsetX, offsetY } = transform.value;
+      const startX = e.pageX;
+      const startY = e.pageY;
+      const dragHandler = throttle((ev) => {
+        transform.value = {
+          ...transform.value,
+          offsetX: offsetX + ev.pageX - startX,
+          offsetY: offsetY + ev.pageY - startY
+        };
+      });
+      const removeMousemove = useEventListener(document, "mousemove", dragHandler);
+      useEventListener(document, "mouseup", () => {
+        removeMousemove();
+      });
+      e.preventDefault();
+    }
+    function reset() {
+      transform.value = {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      };
+    }
+    function toggleMode() {
+      if (loading.value)
+        return;
+      const modeNames = keysOf(modes);
+      const modeValues = Object.values(modes);
+      const currentMode = mode.value.name;
+      const index = modeValues.findIndex((i) => i.name === currentMode);
+      const nextIndex = (index + 1) % modeNames.length;
+      mode.value = modes[modeNames[nextIndex]];
+      reset();
+    }
+    function setActiveItem(index) {
+      const len = props.urlList.length;
+      activeIndex.value = (index + len) % len;
+    }
+    function prev() {
+      if (isFirst.value && !props.infinite)
+        return;
+      setActiveItem(activeIndex.value - 1);
+    }
+    function next() {
+      if (isLast.value && !props.infinite)
+        return;
+      setActiveItem(activeIndex.value + 1);
+    }
+    function handleActions(action, options = {}) {
+      if (loading.value)
+        return;
+      const { minScale, maxScale } = props;
+      const { zoomRate, rotateDeg, enableTransition } = {
+        zoomRate: props.zoomRate,
+        rotateDeg: 90,
+        enableTransition: true,
+        ...options
+      };
+      switch (action) {
+        case "zoomOut":
+          if (transform.value.scale > minScale) {
+            transform.value.scale = Number.parseFloat((transform.value.scale / zoomRate).toFixed(3));
+          }
+          break;
+        case "zoomIn":
+          if (transform.value.scale < maxScale) {
+            transform.value.scale = Number.parseFloat((transform.value.scale * zoomRate).toFixed(3));
+          }
+          break;
+        case "clockwise":
+          transform.value.deg += rotateDeg;
+          emit("rotate", transform.value.deg);
+          break;
+        case "anticlockwise":
+          transform.value.deg -= rotateDeg;
+          emit("rotate", transform.value.deg);
+          break;
+      }
+      transform.value.enableTransition = enableTransition;
+    }
+    watch(currentImg, () => {
+      nextTick(() => {
+        const $img = imgRefs.value[0];
+        if (!($img == null ? void 0 : $img.complete)) {
+          loading.value = true;
+        }
+      });
+    });
+    watch(activeIndex, (val) => {
+      reset();
+      emit("switch", val);
+    });
+    onMounted(() => {
+      var _a2, _b;
+      registerEventListener();
+      (_b = (_a2 = wrapper.value) == null ? void 0 : _a2.focus) == null ? void 0 : _b.call(_a2);
+    });
+    expose({
+      setActiveItem
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, {
+        to: "body",
+        disabled: !_ctx.teleported
+      }, [
+        createVNode(Transition, {
+          duration: unref(forEditor) ? -1 : 0,
+          name: "viewer-fade",
+          appear: ""
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              ref_key: "wrapper",
+              ref: wrapper,
+              tabindex: -1,
+              class: normalizeClass(unref(ns).e("wrapper")),
+              style: normalizeStyle({ zIndex: zIndex.value })
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass(unref(ns).e("mask")),
+                onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.hideOnClickModal && hide(), ["self"]))
+              }, null, 2),
+              createCommentVNode(" CLOSE "),
+              createElementVNode("span", {
+                class: normalizeClass([unref(ns).e("btn"), unref(ns).e("close")]),
+                onClick: hide
+              }, [
+                createVNode(unref(ElIcon), null, {
+                  default: withCtx(() => [
+                    createVNode(unref(Close))
+                  ]),
+                  _: 1
+                })
+              ], 2),
+              createCommentVNode(" ARROW "),
+              !unref(isSingle) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                createElementVNode("span", {
+                  class: normalizeClass(unref(arrowPrevKls)),
+                  onClick: prev
+                }, [
+                  createVNode(unref(ElIcon), null, {
+                    default: withCtx(() => [
+                      createVNode(unref(ArrowLeft))
+                    ]),
+                    _: 1
+                  })
+                ], 2),
+                createElementVNode("span", {
+                  class: normalizeClass(unref(arrowNextKls)),
+                  onClick: next
+                }, [
+                  createVNode(unref(ElIcon), null, {
+                    default: withCtx(() => [
+                      createVNode(unref(ArrowRight))
+                    ]),
+                    _: 1
+                  })
+                ], 2)
+              ], 64)) : createCommentVNode("v-if", true),
+              createCommentVNode(" ACTIONS "),
+              createElementVNode("div", {
+                class: normalizeClass([unref(ns).e("btn"), unref(ns).e("actions")])
+              }, [
+                createElementVNode("div", {
+                  class: normalizeClass(unref(ns).e("actions__inner"))
+                }, [
+                  createVNode(unref(ElIcon), {
+                    onClick: _cache[1] || (_cache[1] = ($event) => handleActions("zoomOut"))
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(ZoomOut))
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(unref(ElIcon), {
+                    onClick: _cache[2] || (_cache[2] = ($event) => handleActions("zoomIn"))
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(ZoomIn))
+                    ]),
+                    _: 1
+                  }),
+                  createElementVNode("i", {
+                    class: normalizeClass(unref(ns).e("actions__divider"))
+                  }, null, 2),
+                  createVNode(unref(ElIcon), { onClick: toggleMode }, {
+                    default: withCtx(() => [
+                      (openBlock(), createBlock(resolveDynamicComponent(unref(mode).icon)))
+                    ]),
+                    _: 1
+                  }),
+                  createElementVNode("i", {
+                    class: normalizeClass(unref(ns).e("actions__divider"))
+                  }, null, 2),
+                  createVNode(unref(ElIcon), {
+                    onClick: _cache[3] || (_cache[3] = ($event) => handleActions("anticlockwise"))
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(RefreshLeft))
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(unref(ElIcon), {
+                    onClick: _cache[4] || (_cache[4] = ($event) => handleActions("clockwise"))
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(RefreshRight))
+                    ]),
+                    _: 1
+                  })
+                ], 2)
+              ], 2),
+              createCommentVNode(" CANVAS "),
+              createElementVNode("div", {
+                class: normalizeClass(unref(ns).e("canvas"))
+              }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.urlList, (url, i) => {
+                  return withDirectives((openBlock(), createElementBlock("img", {
+                    ref_for: true,
+                    ref: (el) => imgRefs.value[i] = el,
+                    key: url,
+                    src: url,
+                    style: normalizeStyle(unref(imgStyle)),
+                    class: normalizeClass(unref(ns).e("img")),
+                    crossorigin: _ctx.crossorigin,
+                    onLoad: handleImgLoad,
+                    onError: handleImgError,
+                    onMousedown: handleMouseDown
+                  }, null, 46, _hoisted_1)), [
+                    [vShow, i === activeIndex.value]
+                  ]);
+                }), 128))
+              ], 2),
+              renderSlot(_ctx.$slots, "default")
+            ], 6)
+          ]),
+          _: 3
+        }, 8, ["duration"])
+      ], 8, ["disabled"]);
+    };
   }
 });
-const imageViewerEmits = {
-  close: () => true,
-  switch: (index) => isNumber(index),
-  rotate: (deg) => isNumber(deg)
-};
+var ImageViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "image-viewer.vue"]]);
 
-export { imageViewerEmits, imageViewerProps };
+export { ImageViewer as default };
 //# sourceMappingURL=image-viewer.mjs.map

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 {\n  buildProps,\n  definePropType,\n  isNumber,\n  mutable,\n} from '@element-plus/utils'\n\nimport type { Component, ExtractPropTypes } from 'vue'\nimport type ImageViewer from './image-viewer.vue'\n\nexport type ImageViewerAction =\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'clockwise'\n  | 'anticlockwise'\n\nexport const imageViewerProps = buildProps({\n  /**\n   * @description preview link list.\n   */\n  urlList: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  /**\n   * @description preview backdrop z-index.\n   */\n  zIndex: {\n    type: Number,\n  },\n  /**\n   * @description the initial preview image index, less than or equal to the length of `url-list`.\n   */\n  initialIndex: {\n    type: Number,\n    default: 0,\n  },\n  /**\n   * @description whether preview is infinite.\n   */\n  infinite: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether user can emit close event when clicking backdrop.\n   */\n  hideOnClickModal: Boolean,\n  /**\n   * @description whether to append image itself to body. A nested parent element attribute transform should have this attribute set to `true`.\n   */\n  teleported: Boolean,\n  /**\n   * @description whether the image-viewer can be closed by pressing ESC.\n   */\n  closeOnPressEscape: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description the zoom rate of the image viewer zoom event.\n   */\n  zoomRate: {\n    type: Number,\n    default: 1.2,\n  },\n  /**\n   * @description the min scale of the image viewer zoom event.\n   */\n  minScale: {\n    type: Number,\n    default: 0.2,\n  },\n  /**\n   * @description the max scale of the image viewer zoom event.\n   */\n  maxScale: {\n    type: Number,\n    default: 7,\n  },\n  /**\n   * @description set HTML attribute: crossorigin.\n   */\n  crossorigin: {\n    type: definePropType<'anonymous' | 'use-credentials' | ''>(String),\n  },\n} as const)\nexport type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>\n\nexport const imageViewerEmits = {\n  close: () => true,\n  switch: (index: number) => isNumber(index),\n  rotate: (deg: number) => isNumber(deg),\n}\nexport type ImageViewerEmits = typeof imageViewerEmits\n\nexport interface ImageViewerMode {\n  name: string\n  icon: Component\n}\n\nexport type ImageViewerInstance = InstanceType<typeof ImageViewer>\n"],"names":[],"mappings":";;;;;AAMY,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,OAAO;AAC3B,EAAE,UAAU,EAAE,OAAO;AACrB,EAAE,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,CAAC,EAAE;AACS,MAAC,gBAAgB,GAAG;AAChC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC;AACpC,EAAE,MAAM,EAAE,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC;AAChC;;;;"}
+{"version":3,"file":"image-viewer.mjs","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n  <teleport to=\"body\" :disabled=\"!teleported\">\n    <transition :duration=\"forEditor ? -1 : 0\" name=\"viewer-fade\" appear>\n      <div\n        ref=\"wrapper\"\n        :tabindex=\"-1\"\n        :class=\"ns.e('wrapper')\"\n        :style=\"{ zIndex }\"\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><Close /></el-icon>\n        </span>\n\n        <!-- ARROW -->\n        <template v-if=\"!isSingle\">\n          <span :class=\"arrowPrevKls\" @click=\"prev\">\n            <el-icon><ArrowLeft /></el-icon>\n          </span>\n          <span :class=\"arrowNextKls\" @click=\"next\">\n            <el-icon><ArrowRight /></el-icon>\n          </span>\n        </template>\n        <!-- ACTIONS -->\n        <div :class=\"[ns.e('btn'), ns.e('actions')]\">\n          <div :class=\"ns.e('actions__inner')\">\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          </div>\n        </div>\n        <!-- CANVAS -->\n        <div :class=\"ns.e('canvas')\">\n          <img\n            v-for=\"(url, i) in urlList\"\n            v-show=\"i === activeIndex\"\n            :ref=\"(el) => (imgRefs[i] = el as HTMLImageElement)\"\n            :key=\"url\"\n            :src=\"url\"\n            :style=\"imgStyle\"\n            :class=\"ns.e('img')\"\n            :crossorigin=\"crossorigin\"\n            @load=\"handleImgLoad\"\n            @error=\"handleImgError\"\n            @mousedown=\"handleMouseDown\"\n          />\n        </div>\n        <slot />\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} from 'vue'\nimport { useGlobalConfig, watch } from '../../config-provider'\nimport { useEventListener } from '@vueuse/core'\nimport { throttle } from 'lodash-unified'\nimport { useLocale, useNamespace, useZIndex } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { keysOf } from '@element-plus/utils'\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, imageViewerProps } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\nimport type { ImageViewerAction, ImageViewerMode } from './image-viewer'\n\nconst forEditor = useGlobalConfig('forEditor')\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 = defineProps(imageViewerProps)\nconst emit = defineEmits(imageViewerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('image-viewer')\nconst { nextZIndex } = useZIndex()\nconst wrapper = ref<HTMLDivElement>()\nconst imgRefs = ref<HTMLImageElement[]>([])\n\nconst scopeEventListener = effectScope()\n\nconst loading = ref(true)\nconst activeIndex = ref(props.initialIndex)\nconst mode = shallowRef<ImageViewerMode>(modes.CONTAIN)\nconst transform = ref({\n  scale: 1,\n  deg: 0,\n  offsetX: 0,\n  offsetY: 0,\n  enableTransition: false,\n})\nconst zIndex = ref(props.zIndex ?? nextZIndex())\n\nconst isSingle = computed(() => {\n  const { urlList } = props\n  return urlList.length <= 1\n})\n\nconst isFirst = computed(() => {\n  return activeIndex.value === 0\n})\n\nconst isLast = computed(() => {\n  return activeIndex.value === props.urlList.length - 1\n})\n\nconst currentImg = computed(() => {\n  return props.urlList[activeIndex.value]\n})\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  switch (deg % 360) {\n    case 90:\n    case -270:\n      ;[translateX, translateY] = [translateY, -translateX]\n      break\n    case 180:\n    case -180:\n      ;[translateX, translateY] = [-translateX, -translateY]\n      break\n    case 270:\n    case -90:\n      ;[translateX, translateY] = [-translateY, translateX]\n      break\n  }\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\nfunction hide() {\n  unregisterEventListener()\n  emit('close')\n}\n\nfunction registerEventListener() {\n  const keydownHandler = throttle((e: KeyboardEvent) => {\n    switch (e.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(document, '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  loading.value = false\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  useEventListener(document, 'mouseup', () => {\n    removeMousemove()\n  })\n\n  e.preventDefault()\n}\n\nfunction reset() {\n  transform.value = {\n    scale: 1,\n    deg: 0,\n    offsetX: 0,\n    offsetY: 0,\n    enableTransition: false,\n  }\n}\n\nfunction toggleMode() {\n  if (loading.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  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) 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\nwatch(currentImg, () => {\n  nextTick(() => {\n    const $img = imgRefs.value[0]\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  registerEventListener()\n  // add tabindex then wrapper can be focusable via Javascript\n  // focus wrapper so arrow key can't cause inner scroll behavior underneath\n  wrapper.value?.focus?.()\n})\n\ndefineExpose({\n  /**\n   * @description manually switch image\n   */\n  setActiveItem,\n})\n</script>\n"],"names":[],"mappings":"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"}