@element-plus/nightly 0.0.20251203 → 0.0.20251205

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

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.js","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, __ExtractPublicPropTypes } 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 preview image scale.\n   */\n  scale: {\n    type: Number,\n    default: 1,\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 show preview image progress content.\n   */\n  showProgress: Boolean,\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>\nexport type ImageViewerPropsPublic = __ExtractPublicPropTypes<\n  typeof imageViewerProps\n>\n\nexport const imageViewerEmits = {\n  close: () => true,\n  error: (evt: Event) => evt instanceof Event,\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> & unknown\n"],"names":["buildProps","definePropType","mutable","isNumber"],"mappings":";;;;;;;;AAMY,MAAC,gBAAgB,GAAGA,kBAAU,CAAC;AAC3C,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAEC,sBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAMC,kBAAO,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,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,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,YAAY,EAAE,OAAO;AACvB,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAED,sBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,CAAC,EAAE;AACS,MAAC,gBAAgB,GAAG;AAChC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB,EAAE,KAAK,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,KAAK;AACtC,EAAE,MAAM,EAAE,CAAC,KAAK,KAAKE,cAAQ,CAAC,KAAK,CAAC;AACpC,EAAE,MAAM,EAAE,CAAC,GAAG,KAAKA,cAAQ,CAAC,GAAG,CAAC;AAChC;;;;;"}
+{"version":3,"file":"image-viewer.js","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n  <el-teleport to=\"body\" :disabled=\"!teleported\">\n    <transition name=\"viewer-fade\" appear>\n      <div\n        ref=\"wrapper\"\n        :tabindex=\"-1\"\n        :class=\"ns.e('wrapper')\"\n        :style=\"{ zIndex }\"\n      >\n        <el-focus-trap\n          loop\n          trapped\n          :focus-trap-el=\"wrapper\"\n          focus-start-el=\"container\"\n          @focusout-prevented=\"onFocusoutPrevented\"\n          @release-requested=\"onCloseRequested\"\n        >\n          <div :class=\"ns.e('mask')\" @click.self=\"hideOnClickModal && hide()\" />\n\n          <!-- CLOSE -->\n          <span :class=\"[ns.e('btn'), ns.e('close')]\" @click=\"hide\">\n            <el-icon>\n              <Close />\n            </el-icon>\n          </span>\n\n          <!-- ARROW -->\n          <template v-if=\"!isSingle\">\n            <span :class=\"arrowPrevKls\" @click=\"prev\">\n              <el-icon>\n                <ArrowLeft />\n              </el-icon>\n            </span>\n            <span :class=\"arrowNextKls\" @click=\"next\">\n              <el-icon>\n                <ArrowRight />\n              </el-icon>\n            </span>\n          </template>\n          <div\n            v-if=\"$slots.progress || showProgress\"\n            :class=\"[ns.e('btn'), ns.e('progress')]\"\n          >\n            <slot\n              name=\"progress\"\n              :active-index=\"activeIndex\"\n              :total=\"urlList.length\"\n            >\n              {{ progress }}\n            </slot>\n          </div>\n          <!-- ACTIONS -->\n          <div :class=\"[ns.e('btn'), ns.e('actions')]\">\n            <div :class=\"ns.e('actions__inner')\">\n              <slot\n                name=\"toolbar\"\n                :actions=\"handleActions\"\n                :prev=\"prev\"\n                :next=\"next\"\n                :reset=\"toggleMode\"\n                :active-index=\"activeIndex\"\n                :set-active-item=\"setActiveItem\"\n              >\n                <el-icon @click=\"handleActions('zoomOut')\">\n                  <ZoomOut />\n                </el-icon>\n                <el-icon @click=\"handleActions('zoomIn')\">\n                  <ZoomIn />\n                </el-icon>\n                <i :class=\"ns.e('actions__divider')\" />\n                <el-icon @click=\"toggleMode\">\n                  <component :is=\"mode.icon\" />\n                </el-icon>\n                <i :class=\"ns.e('actions__divider')\" />\n                <el-icon @click=\"handleActions('anticlockwise')\">\n                  <RefreshLeft />\n                </el-icon>\n                <el-icon @click=\"handleActions('clockwise')\">\n                  <RefreshRight />\n                </el-icon>\n              </slot>\n            </div>\n          </div>\n          <!-- CANVAS -->\n          <div :class=\"ns.e('canvas')\">\n            <slot\n              v-if=\"loadError && $slots['viewer-error']\"\n              name=\"viewer-error\"\n              :active-index=\"activeIndex\"\n              :src=\"currentImg\"\n            />\n            <img\n              v-else\n              ref=\"imgRef\"\n              :key=\"currentImg\"\n              :src=\"currentImg\"\n              :style=\"imgStyle\"\n              :class=\"ns.e('img')\"\n              :crossorigin=\"crossorigin\"\n              @load=\"handleImgLoad\"\n              @error=\"handleImgError\"\n              @mousedown=\"handleMouseDown\"\n              @touchstart=\"handleTouchStart\"\n            />\n          </div>\n          <slot />\n        </el-focus-trap>\n      </div>\n    </transition>\n  </el-teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  effectScope,\n  markRaw,\n  nextTick,\n  onMounted,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { clamp, useEventListener } from '@vueuse/core'\nimport { throttle } from 'lodash-unified'\nimport {\n  useLocale,\n  useLockscreen,\n  useNamespace,\n  useZIndex,\n} from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { getEventCode, keysOf } from '@element-plus/utils'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElTeleport from '@element-plus/components/teleport'\nimport ElIcon from '@element-plus/components/icon'\nimport {\n  ArrowLeft,\n  ArrowRight,\n  Close,\n  FullScreen,\n  RefreshLeft,\n  RefreshRight,\n  ScaleToOriginal,\n  ZoomIn,\n  ZoomOut,\n} from '@element-plus/icons-vue'\nimport { imageViewerEmits, imageViewerProps } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\nimport type { ImageViewerAction, ImageViewerMode } 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 = defineProps(imageViewerProps)\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"],"names":["markRaw","FullScreen","ScaleToOriginal","useNamespace","useZIndex","ref","computed","clamp","useLockscreen","throttle","getEventCode","EVENT_CODE","useEventListener","keysOf","watch","nextTick","onMounted","_openBlock","_createBlock","_unref","ElTeleport"],"mappings":"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"}

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

@@ -2,492 +2,60 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
-var core = require('@vueuse/core');
-var lodashUnified = require('lodash-unified');
-var focusTrap = require('../../focus-trap/src/focus-trap.js');
-var index$4 = require('../../teleport/index.js');
-var index$5 = require('../../icon/index.js');
-var iconsVue = require('@element-plus/icons-vue');
-var imageViewer = require('./image-viewer.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
-var index = require('../../../hooks/use-locale/index.js');
-var index$1 = require('../../../hooks/use-namespace/index.js');
-var index$2 = require('../../../hooks/use-z-index/index.js');
-var index$3 = require('../../../hooks/use-lockscreen/index.js');
-var event = require('../../../utils/dom/event.js');
-var aria = require('../../../constants/aria.js');
-var objects = require('../../../utils/objects.js');
+var runtime = require('../../../utils/vue/props/runtime.js');
+var typescript = require('../../../utils/typescript.js');
+var types = require('../../../utils/types.js');
 
-const __default__ = vue.defineComponent({
-  name: "ElImageViewer"
-});
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: imageViewer.imageViewerProps,
-  emits: imageViewer.imageViewerEmits,
-  setup(__props, { expose, emit }) {
-    var _a;
-    const props = __props;
-    const modes = {
-      CONTAIN: {
-        name: "contain",
-        icon: vue.markRaw(iconsVue.FullScreen)
-      },
-      ORIGINAL: {
-        name: "original",
-        icon: vue.markRaw(iconsVue.ScaleToOriginal)
-      }
-    };
-    let stopWheelListener;
-    const { t } = index.useLocale();
-    const ns = index$1.useNamespace("image-viewer");
-    const { nextZIndex } = index$2.useZIndex();
-    const wrapper = vue.ref();
-    const imgRef = vue.ref();
-    const scopeEventListener = vue.effectScope();
-    const scaleClamped = vue.computed(() => {
-      const { scale, minScale, maxScale } = props;
-      return core.clamp(scale, minScale, maxScale);
-    });
-    const loading = vue.ref(true);
-    const loadError = vue.ref(false);
-    const visible = vue.ref(false);
-    const activeIndex = vue.ref(props.initialIndex);
-    const mode = vue.shallowRef(modes.CONTAIN);
-    const transform = vue.ref({
-      scale: scaleClamped.value,
-      deg: 0,
-      offsetX: 0,
-      offsetY: 0,
-      enableTransition: false
-    });
-    const zIndex = vue.ref((_a = props.zIndex) != null ? _a : nextZIndex());
-    index$3.useLockscreen(visible, { ns });
-    const isSingle = vue.computed(() => {
-      const { urlList } = props;
-      return urlList.length <= 1;
-    });
-    const isFirst = vue.computed(() => activeIndex.value === 0);
-    const isLast = vue.computed(() => activeIndex.value === props.urlList.length - 1);
-    const currentImg = vue.computed(() => props.urlList[activeIndex.value]);
-    const arrowPrevKls = vue.computed(() => [
-      ns.e("btn"),
-      ns.e("prev"),
-      ns.is("disabled", !props.infinite && isFirst.value)
-    ]);
-    const arrowNextKls = vue.computed(() => [
-      ns.e("btn"),
-      ns.e("next"),
-      ns.is("disabled", !props.infinite && isLast.value)
-    ]);
-    const imgStyle = vue.computed(() => {
-      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value;
-      let translateX = offsetX / scale;
-      let translateY = offsetY / scale;
-      const radian = deg * Math.PI / 180;
-      const cosRadian = Math.cos(radian);
-      const sinRadian = Math.sin(radian);
-      translateX = translateX * cosRadian + translateY * sinRadian;
-      translateY = translateY * cosRadian - offsetX / scale * sinRadian;
-      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;
-    });
-    const progress = vue.computed(() => `${activeIndex.value + 1} / ${props.urlList.length}`);
-    function hide() {
-      unregisterEventListener();
-      stopWheelListener == null ? void 0 : stopWheelListener();
-      visible.value = false;
-      emit("close");
-    }
-    function registerEventListener() {
-      const keydownHandler = lodashUnified.throttle((e) => {
-        const code = event.getEventCode(e);
-        switch (code) {
-          case aria.EVENT_CODE.esc:
-            props.closeOnPressEscape && hide();
-            break;
-          case aria.EVENT_CODE.space:
-            toggleMode();
-            break;
-          case aria.EVENT_CODE.left:
-            prev();
-            break;
-          case aria.EVENT_CODE.up:
-            handleActions("zoomIn");
-            break;
-          case aria.EVENT_CODE.right:
-            next();
-            break;
-          case aria.EVENT_CODE.down:
-            handleActions("zoomOut");
-            break;
-        }
-      });
-      const mousewheelHandler = lodashUnified.throttle((e) => {
-        const delta = e.deltaY || e.deltaX;
-        handleActions(delta < 0 ? "zoomIn" : "zoomOut", {
-          zoomRate: props.zoomRate,
-          enableTransition: false
-        });
-      });
-      scopeEventListener.run(() => {
-        core.useEventListener(document, "keydown", keydownHandler);
-        core.useEventListener(wrapper, "wheel", mousewheelHandler);
-      });
-    }
-    function unregisterEventListener() {
-      scopeEventListener.stop();
-    }
-    function handleImgLoad() {
-      loading.value = false;
-    }
-    function handleImgError(e) {
-      loadError.value = true;
-      loading.value = false;
-      emit("error", e);
-      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 = lodashUnified.throttle((ev) => {
-        transform.value = {
-          ...transform.value,
-          offsetX: offsetX + ev.pageX - startX,
-          offsetY: offsetY + ev.pageY - startY
-        };
-      });
-      const removeMousemove = core.useEventListener(document, "mousemove", dragHandler);
-      const removeMouseup = core.useEventListener(document, "mouseup", () => {
-        removeMousemove();
-        removeMouseup();
-      });
-      e.preventDefault();
-    }
-    function handleTouchStart(e) {
-      if (loading.value || !wrapper.value || e.touches.length !== 1)
-        return;
-      transform.value.enableTransition = false;
-      const { offsetX, offsetY } = transform.value;
-      const { pageX: startX, pageY: startY } = e.touches[0];
-      const dragHandler = lodashUnified.throttle((ev) => {
-        const targetTouch = ev.touches[0];
-        transform.value = {
-          ...transform.value,
-          offsetX: offsetX + targetTouch.pageX - startX,
-          offsetY: offsetY + targetTouch.pageY - startY
-        };
-      });
-      const removeTouchmove = core.useEventListener(document, "touchmove", dragHandler);
-      const removeTouchend = core.useEventListener(document, "touchend", () => {
-        removeTouchmove();
-        removeTouchend();
-      });
-      e.preventDefault();
-    }
-    function reset() {
-      transform.value = {
-        scale: scaleClamped.value,
-        deg: 0,
-        offsetX: 0,
-        offsetY: 0,
-        enableTransition: false
-      };
-    }
-    function toggleMode() {
-      if (loading.value || loadError.value)
-        return;
-      const modeNames = objects.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) {
-      loadError.value = false;
-      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 || loadError.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;
-    }
-    function onFocusoutPrevented(event) {
-      var _a2;
-      if (((_a2 = event.detail) == null ? void 0 : _a2.focusReason) === "pointer") {
-        event.preventDefault();
-      }
-    }
-    function onCloseRequested() {
-      if (props.closeOnPressEscape) {
-        hide();
-      }
-    }
-    function wheelHandler(e) {
-      if (!e.ctrlKey)
-        return;
-      if (e.deltaY < 0) {
-        e.preventDefault();
-        return false;
-      } else if (e.deltaY > 0) {
-        e.preventDefault();
-        return false;
-      }
-    }
-    vue.watch(() => scaleClamped.value, (val) => {
-      transform.value.scale = val;
-    });
-    vue.watch(currentImg, () => {
-      vue.nextTick(() => {
-        const $img = imgRef.value;
-        if (!($img == null ? void 0 : $img.complete)) {
-          loading.value = true;
-        }
-      });
-    });
-    vue.watch(activeIndex, (val) => {
-      reset();
-      emit("switch", val);
-    });
-    vue.onMounted(() => {
-      visible.value = true;
-      registerEventListener();
-      stopWheelListener = core.useEventListener("wheel", wheelHandler, {
-        passive: false
-      });
-    });
-    expose({
-      setActiveItem
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(index$4.ElTeleport), {
-        to: "body",
-        disabled: !_ctx.teleported
-      }, {
-        default: vue.withCtx(() => [
-          vue.createVNode(vue.Transition, {
-            name: "viewer-fade",
-            appear: ""
-          }, {
-            default: vue.withCtx(() => [
-              vue.createElementVNode("div", {
-                ref_key: "wrapper",
-                ref: wrapper,
-                tabindex: -1,
-                class: vue.normalizeClass(vue.unref(ns).e("wrapper")),
-                style: vue.normalizeStyle({ zIndex: zIndex.value })
-              }, [
-                vue.createVNode(vue.unref(focusTrap["default"]), {
-                  loop: "",
-                  trapped: "",
-                  "focus-trap-el": wrapper.value,
-                  "focus-start-el": "container",
-                  onFocusoutPrevented,
-                  onReleaseRequested: onCloseRequested
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createElementVNode("div", {
-                      class: vue.normalizeClass(vue.unref(ns).e("mask")),
-                      onClick: vue.withModifiers(($event) => _ctx.hideOnClickModal && hide(), ["self"])
-                    }, null, 10, ["onClick"]),
-                    vue.createCommentVNode(" CLOSE "),
-                    vue.createElementVNode("span", {
-                      class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("close")]),
-                      onClick: hide
-                    }, [
-                      vue.createVNode(vue.unref(index$5.ElIcon), null, {
-                        default: vue.withCtx(() => [
-                          vue.createVNode(vue.unref(iconsVue.Close))
-                        ]),
-                        _: 1
-                      })
-                    ], 2),
-                    vue.createCommentVNode(" ARROW "),
-                    !vue.unref(isSingle) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                      vue.createElementVNode("span", {
-                        class: vue.normalizeClass(vue.unref(arrowPrevKls)),
-                        onClick: prev
-                      }, [
-                        vue.createVNode(vue.unref(index$5.ElIcon), null, {
-                          default: vue.withCtx(() => [
-                            vue.createVNode(vue.unref(iconsVue.ArrowLeft))
-                          ]),
-                          _: 1
-                        })
-                      ], 2),
-                      vue.createElementVNode("span", {
-                        class: vue.normalizeClass(vue.unref(arrowNextKls)),
-                        onClick: next
-                      }, [
-                        vue.createVNode(vue.unref(index$5.ElIcon), null, {
-                          default: vue.withCtx(() => [
-                            vue.createVNode(vue.unref(iconsVue.ArrowRight))
-                          ]),
-                          _: 1
-                        })
-                      ], 2)
-                    ], 64)) : vue.createCommentVNode("v-if", true),
-                    _ctx.$slots.progress || _ctx.showProgress ? (vue.openBlock(), vue.createElementBlock("div", {
-                      key: 1,
-                      class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("progress")])
-                    }, [
-                      vue.renderSlot(_ctx.$slots, "progress", {
-                        activeIndex: activeIndex.value,
-                        total: _ctx.urlList.length
-                      }, () => [
-                        vue.createTextVNode(vue.toDisplayString(vue.unref(progress)), 1)
-                      ])
-                    ], 2)) : vue.createCommentVNode("v-if", true),
-                    vue.createCommentVNode(" ACTIONS "),
-                    vue.createElementVNode("div", {
-                      class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("actions")])
-                    }, [
-                      vue.createElementVNode("div", {
-                        class: vue.normalizeClass(vue.unref(ns).e("actions__inner"))
-                      }, [
-                        vue.renderSlot(_ctx.$slots, "toolbar", {
-                          actions: handleActions,
-                          prev,
-                          next,
-                          reset: toggleMode,
-                          activeIndex: activeIndex.value,
-                          setActiveItem
-                        }, () => [
-                          vue.createVNode(vue.unref(index$5.ElIcon), {
-                            onClick: ($event) => handleActions("zoomOut")
-                          }, {
-                            default: vue.withCtx(() => [
-                              vue.createVNode(vue.unref(iconsVue.ZoomOut))
-                            ]),
-                            _: 1
-                          }, 8, ["onClick"]),
-                          vue.createVNode(vue.unref(index$5.ElIcon), {
-                            onClick: ($event) => handleActions("zoomIn")
-                          }, {
-                            default: vue.withCtx(() => [
-                              vue.createVNode(vue.unref(iconsVue.ZoomIn))
-                            ]),
-                            _: 1
-                          }, 8, ["onClick"]),
-                          vue.createElementVNode("i", {
-                            class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
-                          }, null, 2),
-                          vue.createVNode(vue.unref(index$5.ElIcon), { onClick: toggleMode }, {
-                            default: vue.withCtx(() => [
-                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(mode).icon)))
-                            ]),
-                            _: 1
-                          }),
-                          vue.createElementVNode("i", {
-                            class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
-                          }, null, 2),
-                          vue.createVNode(vue.unref(index$5.ElIcon), {
-                            onClick: ($event) => handleActions("anticlockwise")
-                          }, {
-                            default: vue.withCtx(() => [
-                              vue.createVNode(vue.unref(iconsVue.RefreshLeft))
-                            ]),
-                            _: 1
-                          }, 8, ["onClick"]),
-                          vue.createVNode(vue.unref(index$5.ElIcon), {
-                            onClick: ($event) => handleActions("clockwise")
-                          }, {
-                            default: vue.withCtx(() => [
-                              vue.createVNode(vue.unref(iconsVue.RefreshRight))
-                            ]),
-                            _: 1
-                          }, 8, ["onClick"])
-                        ])
-                      ], 2)
-                    ], 2),
-                    vue.createCommentVNode(" CANVAS "),
-                    vue.createElementVNode("div", {
-                      class: vue.normalizeClass(vue.unref(ns).e("canvas"))
-                    }, [
-                      loadError.value && _ctx.$slots["viewer-error"] ? vue.renderSlot(_ctx.$slots, "viewer-error", {
-                        key: 0,
-                        activeIndex: activeIndex.value,
-                        src: vue.unref(currentImg)
-                      }) : (vue.openBlock(), vue.createElementBlock("img", {
-                        ref_key: "imgRef",
-                        ref: imgRef,
-                        key: vue.unref(currentImg),
-                        src: vue.unref(currentImg),
-                        style: vue.normalizeStyle(vue.unref(imgStyle)),
-                        class: vue.normalizeClass(vue.unref(ns).e("img")),
-                        crossorigin: _ctx.crossorigin,
-                        onLoad: handleImgLoad,
-                        onError: handleImgError,
-                        onMousedown: handleMouseDown,
-                        onTouchstart: handleTouchStart
-                      }, null, 46, ["src", "crossorigin"]))
-                    ], 2),
-                    vue.renderSlot(_ctx.$slots, "default")
-                  ]),
-                  _: 3
-                }, 8, ["focus-trap-el"])
-              ], 6)
-            ]),
-            _: 3
-          })
-        ]),
-        _: 3
-      }, 8, ["disabled"]);
-    };
+const imageViewerProps = runtime.buildProps({
+  urlList: {
+    type: runtime.definePropType(Array),
+    default: () => typescript.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
+  },
+  scale: {
+    type: Number,
+    default: 1
+  },
+  minScale: {
+    type: Number,
+    default: 0.2
+  },
+  maxScale: {
+    type: Number,
+    default: 7
+  },
+  showProgress: Boolean,
+  crossorigin: {
+    type: runtime.definePropType(String)
   }
 });
-var ImageViewer = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "image-viewer.vue"]]);
+const imageViewerEmits = {
+  close: () => true,
+  error: (evt) => evt instanceof Event,
+  switch: (index) => types.isNumber(index),
+  rotate: (deg) => types.isNumber(deg)
+};
 
-exports["default"] = ImageViewer;
+exports.imageViewerEmits = imageViewerEmits;
+exports.imageViewerProps = imageViewerProps;
 //# sourceMappingURL=image-viewer2.js.map