@element-plus/nightly 0.0.20220121 → 0.0.20220122

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

@@ -1,264 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-var core = require('@vueuse/core');
-var index = require('../../icon/index.js');
-require('../../../hooks/index.js');
-var aria = require('../../../utils/aria.js');
-var util = require('../../../utils/util.js');
-var iconsVue = require('@element-plus/icons-vue');
-var imageViewer = require('./image-viewer.js');
-var index$1 = require('../../../hooks/use-locale/index.js');
-
-const Mode = {
-  CONTAIN: {
-    name: "contain",
-    icon: vue.markRaw(iconsVue.FullScreen)
-  },
-  ORIGINAL: {
-    name: "original",
-    icon: vue.markRaw(iconsVue.ScaleToOriginal)
-  }
-};
-const mousewheelEventName = util.isFirefox() ? "DOMMouseScroll" : "mousewheel";
-var script = vue.defineComponent({
-  name: "ElImageViewer",
-  components: {
-    ElIcon: index.ElIcon,
-    Close: iconsVue.Close,
-    ArrowLeft: iconsVue.ArrowLeft,
-    ArrowRight: iconsVue.ArrowRight,
-    ZoomOut: iconsVue.ZoomOut,
-    ZoomIn: iconsVue.ZoomIn,
-    RefreshLeft: iconsVue.RefreshLeft,
-    RefreshRight: iconsVue.RefreshRight
-  },
-  props: imageViewer.imageViewerProps,
-  emits: imageViewer.imageViewerEmits,
-  setup(props, { emit }) {
-    const { t } = index$1.useLocale();
-    const wrapper = vue.ref();
-    const img = vue.ref();
-    const scopeEventListener = vue.effectScope();
-    const loading = vue.ref(true);
-    const index = vue.ref(props.initialIndex);
-    const mode = vue.ref(Mode.CONTAIN);
-    const transform = vue.ref({
-      scale: 1,
-      deg: 0,
-      offsetX: 0,
-      offsetY: 0,
-      enableTransition: false
-    });
-    const isSingle = vue.computed(() => {
-      const { urlList } = props;
-      return urlList.length <= 1;
-    });
-    const isFirst = vue.computed(() => {
-      return index.value === 0;
-    });
-    const isLast = vue.computed(() => {
-      return index.value === props.urlList.length - 1;
-    });
-    const currentImg = vue.computed(() => {
-      return props.urlList[index.value];
-    });
-    const imgStyle = vue.computed(() => {
-      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value;
-      const style = {
-        transform: `scale(${scale}) rotate(${deg}deg)`,
-        transition: enableTransition ? "transform .3s" : "",
-        marginLeft: `${offsetX}px`,
-        marginTop: `${offsetY}px`
-      };
-      if (mode.value.name === Mode.CONTAIN.name) {
-        style.maxWidth = style.maxHeight = "100%";
-      }
-      return style;
-    });
-    function hide() {
-      unregisterEventListener();
-      emit("close");
-    }
-    function registerEventListener() {
-      const keydownHandler = util.rafThrottle((e) => {
-        switch (e.code) {
-          case aria.EVENT_CODE.esc:
-            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 = util.rafThrottle((e) => {
-        const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
-        if (delta > 0) {
-          handleActions("zoomIn", {
-            zoomRate: 0.015,
-            enableTransition: false
-          });
-        } else {
-          handleActions("zoomOut", {
-            zoomRate: 0.015,
-            enableTransition: false
-          });
-        }
-      });
-      scopeEventListener.run(() => {
-        core.useEventListener(document, "keydown", keydownHandler);
-        core.useEventListener(document, mousewheelEventName, 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;
-      const { offsetX, offsetY } = transform.value;
-      const startX = e.pageX;
-      const startY = e.pageY;
-      const divLeft = wrapper.value.clientLeft;
-      const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth;
-      const divTop = wrapper.value.clientTop;
-      const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight;
-      const dragHandler = util.rafThrottle((ev) => {
-        transform.value = {
-          ...transform.value,
-          offsetX: offsetX + ev.pageX - startX,
-          offsetY: offsetY + ev.pageY - startY
-        };
-      });
-      const removeMousemove = core.useEventListener(document, "mousemove", dragHandler);
-      core.useEventListener(document, "mouseup", (evt) => {
-        const mouseX = evt.pageX;
-        const mouseY = evt.pageY;
-        if (mouseX < divLeft || mouseX > divRight || mouseY < divTop || mouseY > divBottom) {
-          reset();
-        }
-        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 = Object.keys(Mode);
-      const modeValues = Object.values(Mode);
-      const currentMode = mode.value.name;
-      const index2 = modeValues.findIndex((i) => i.name === currentMode);
-      const nextIndex = (index2 + 1) % modeNames.length;
-      mode.value = Mode[modeNames[nextIndex]];
-      reset();
-    }
-    function prev() {
-      if (isFirst.value && !props.infinite)
-        return;
-      const len = props.urlList.length;
-      index.value = (index.value - 1 + len) % len;
-    }
-    function next() {
-      if (isLast.value && !props.infinite)
-        return;
-      const len = props.urlList.length;
-      index.value = (index.value + 1) % len;
-    }
-    function handleActions(action, options = {}) {
-      if (loading.value)
-        return;
-      const { zoomRate, rotateDeg, enableTransition } = {
-        zoomRate: 0.2,
-        rotateDeg: 90,
-        enableTransition: true,
-        ...options
-      };
-      switch (action) {
-        case "zoomOut":
-          if (transform.value.scale > 0.2) {
-            transform.value.scale = parseFloat((transform.value.scale - zoomRate).toFixed(3));
-          }
-          break;
-        case "zoomIn":
-          transform.value.scale = parseFloat((transform.value.scale + zoomRate).toFixed(3));
-          break;
-        case "clockwise":
-          transform.value.deg += rotateDeg;
-          break;
-        case "anticlockwise":
-          transform.value.deg -= rotateDeg;
-          break;
-      }
-      transform.value.enableTransition = enableTransition;
-    }
-    vue.watch(currentImg, () => {
-      vue.nextTick(() => {
-        const $img = img.value;
-        if (!($img == null ? void 0 : $img.complete)) {
-          loading.value = true;
-        }
-      });
-    });
-    vue.watch(index, (val) => {
-      reset();
-      emit("switch", val);
-    });
-    vue.onMounted(() => {
-      var _a, _b;
-      registerEventListener();
-      (_b = (_a = wrapper.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
-    });
-    return {
-      index,
-      wrapper,
-      img,
-      isSingle,
-      isFirst,
-      isLast,
-      currentImg,
-      imgStyle,
-      mode,
-      handleActions,
-      prev,
-      next,
-      hide,
-      toggleMode,
-      handleImgLoad,
-      handleImgError,
-      handleMouseDown
-    };
-  }
-});
-
-exports["default"] = script;
-//# sourceMappingURL=image-viewer.vue_vue_type_script_lang.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"image-viewer.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n  <transition name=\"viewer-fade\">\n    <div\n      ref=\"wrapper\"\n      :tabindex=\"-1\"\n      class=\"el-image-viewer__wrapper\"\n      :style=\"{ zIndex }\"\n    >\n      <div\n        class=\"el-image-viewer__mask\"\n        @click.self=\"hideOnClickModal && hide()\"\n      />\n\n      <!-- CLOSE -->\n      <span class=\"el-image-viewer__btn el-image-viewer__close\" @click=\"hide\">\n        <el-icon><close /></el-icon>\n      </span>\n\n      <!-- ARROW -->\n      <template v-if=\"!isSingle\">\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__prev\"\n          :class=\"{ 'is-disabled': !infinite && isFirst }\"\n          @click=\"prev\"\n        >\n          <el-icon><arrow-left /></el-icon>\n        </span>\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__next\"\n          :class=\"{ 'is-disabled': !infinite && isLast }\"\n          @click=\"next\"\n        >\n          <el-icon><arrow-right /></el-icon>\n        </span>\n      </template>\n      <!-- ACTIONS -->\n      <div class=\"el-image-viewer__btn el-image-viewer__actions\">\n        <div class=\"el-image-viewer__actions__inner\">\n          <el-icon @click=\"handleActions('zoomOut')\">\n            <zoom-out />\n          </el-icon>\n          <el-icon @click=\"handleActions('zoomIn')\">\n            <zoom-in />\n          </el-icon>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <el-icon @click=\"toggleMode\">\n            <component :is=\"mode.icon\" />\n          </el-icon>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <el-icon @click=\"handleActions('anticlockwise')\">\n            <refresh-left />\n          </el-icon>\n          <el-icon @click=\"handleActions('clockwise')\">\n            <refresh-right />\n          </el-icon>\n        </div>\n      </div>\n      <!-- CANVAS -->\n      <div class=\"el-image-viewer__canvas\">\n        <img\n          v-for=\"(url, i) in urlList\"\n          v-show=\"i === index\"\n          ref=\"img\"\n          :key=\"url\"\n          :src=\"url\"\n          :style=\"imgStyle\"\n          class=\"el-image-viewer__img\"\n          @load=\"handleImgLoad\"\n          @error=\"handleImgError\"\n          @mousedown=\"handleMouseDown\"\n        />\n      </div>\n      <slot />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  ref,\n  onMounted,\n  watch,\n  nextTick,\n  effectScope,\n  markRaw,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { rafThrottle, isFirefox } from '@element-plus/utils/util'\nimport {\n  Close,\n  ArrowLeft,\n  ArrowRight,\n  ZoomOut,\n  ZoomIn,\n  RefreshLeft,\n  RefreshRight,\n  FullScreen,\n  ScaleToOriginal,\n} from '@element-plus/icons-vue'\nimport { imageViewerProps, imageViewerEmits } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\n\nconst Mode = {\n  CONTAIN: {\n    name: 'contain',\n    icon: markRaw(FullScreen),\n  },\n  ORIGINAL: {\n    name: 'original',\n    icon: markRaw(ScaleToOriginal),\n  },\n}\n\nconst mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'\nexport type ImageViewerAction =\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'clockwise'\n  | 'anticlockwise'\n\nexport default defineComponent({\n  name: 'ElImageViewer',\n  components: {\n    ElIcon,\n    Close,\n    ArrowLeft,\n    ArrowRight,\n    ZoomOut,\n    ZoomIn,\n    RefreshLeft,\n    RefreshRight,\n  },\n  props: imageViewerProps,\n  emits: imageViewerEmits,\n\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const wrapper = ref<HTMLDivElement>()\n    const img = ref<HTMLImageElement>()\n\n    const scopeEventListener = effectScope()\n\n    const loading = ref(true)\n    const index = ref(props.initialIndex)\n    const mode = ref(Mode.CONTAIN)\n    const transform = ref({\n      scale: 1,\n      deg: 0,\n      offsetX: 0,\n      offsetY: 0,\n      enableTransition: false,\n    })\n\n    const isSingle = computed(() => {\n      const { urlList } = props\n      return urlList.length <= 1\n    })\n\n    const isFirst = computed(() => {\n      return index.value === 0\n    })\n\n    const isLast = computed(() => {\n      return index.value === props.urlList.length - 1\n    })\n\n    const currentImg = computed(() => {\n      return props.urlList[index.value]\n    })\n\n    const imgStyle = computed(() => {\n      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n      const style: CSSProperties = {\n        transform: `scale(${scale}) rotate(${deg}deg)`,\n        transition: enableTransition ? 'transform .3s' : '',\n        marginLeft: `${offsetX}px`,\n        marginTop: `${offsetY}px`,\n      }\n      if (mode.value.name === Mode.CONTAIN.name) {\n        style.maxWidth = style.maxHeight = '100%'\n      }\n      return style\n    })\n\n    function hide() {\n      unregisterEventListener()\n      emit('close')\n    }\n\n    function registerEventListener() {\n      const keydownHandler = rafThrottle((e: KeyboardEvent) => {\n        switch (e.code) {\n          // ESC\n          case EVENT_CODE.esc:\n            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 = rafThrottle(\n        (e: WheelEvent | any /* TODO: wheelDelta is deprecated */) => {\n          const delta = e.wheelDelta ? e.wheelDelta : -e.detail\n          if (delta > 0) {\n            handleActions('zoomIn', {\n              zoomRate: 0.015,\n              enableTransition: false,\n            })\n          } else {\n            handleActions('zoomOut', {\n              zoomRate: 0.015,\n              enableTransition: false,\n            })\n          }\n        }\n      )\n\n      scopeEventListener.run(() => {\n        useEventListener(document, 'keydown', keydownHandler)\n        useEventListener(document, mousewheelEventName, mousewheelHandler)\n      })\n    }\n\n    function unregisterEventListener() {\n      scopeEventListener.stop()\n    }\n\n    function handleImgLoad() {\n      loading.value = false\n    }\n\n    function handleImgError(e: Event) {\n      loading.value = false\n      ;(e.target as HTMLImageElement).alt = t('el.image.error')\n    }\n\n    function handleMouseDown(e: MouseEvent) {\n      if (loading.value || e.button !== 0 || !wrapper.value) return\n\n      const { offsetX, offsetY } = transform.value\n      const startX = e.pageX\n      const startY = e.pageY\n\n      const divLeft = wrapper.value.clientLeft\n      const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth\n      const divTop = wrapper.value.clientTop\n      const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight\n\n      const dragHandler = rafThrottle((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(\n        document,\n        'mousemove',\n        dragHandler\n      )\n      useEventListener(document, 'mouseup', (evt) => {\n        const mouseX = evt.pageX\n        const mouseY = evt.pageY\n        if (\n          mouseX < divLeft ||\n          mouseX > divRight ||\n          mouseY < divTop ||\n          mouseY > divBottom\n        ) {\n          reset()\n        }\n        removeMousemove()\n      })\n\n      e.preventDefault()\n    }\n\n    function reset() {\n      transform.value = {\n        scale: 1,\n        deg: 0,\n        offsetX: 0,\n        offsetY: 0,\n        enableTransition: false,\n      }\n    }\n\n    function toggleMode() {\n      if (loading.value) return\n\n      const modeNames = Object.keys(Mode)\n      const modeValues = Object.values(Mode)\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 = Mode[modeNames[nextIndex]]\n      reset()\n    }\n\n    function prev() {\n      if (isFirst.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value - 1 + len) % len\n    }\n\n    function next() {\n      if (isLast.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value + 1) % len\n    }\n\n    function handleActions(action: ImageViewerAction, options = {}) {\n      if (loading.value) return\n      const { zoomRate, rotateDeg, enableTransition } = {\n        zoomRate: 0.2,\n        rotateDeg: 90,\n        enableTransition: true,\n        ...options,\n      }\n      switch (action) {\n        case 'zoomOut':\n          if (transform.value.scale > 0.2) {\n            transform.value.scale = parseFloat(\n              (transform.value.scale - zoomRate).toFixed(3)\n            )\n          }\n          break\n        case 'zoomIn':\n          transform.value.scale = parseFloat(\n            (transform.value.scale + zoomRate).toFixed(3)\n          )\n          break\n        case 'clockwise':\n          transform.value.deg += rotateDeg\n          break\n        case 'anticlockwise':\n          transform.value.deg -= rotateDeg\n          break\n      }\n      transform.value.enableTransition = enableTransition\n    }\n\n    watch(currentImg, () => {\n      nextTick(() => {\n        const $img = img.value\n        if (!$img?.complete) {\n          loading.value = true\n        }\n      })\n    })\n\n    watch(index, (val) => {\n      reset()\n      emit('switch', val)\n    })\n\n    onMounted(() => {\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\n    return {\n      index,\n      wrapper,\n      img,\n      isSingle,\n      isFirst,\n      isLast,\n      currentImg,\n      imgStyle,\n      mode,\n      handleActions,\n      prev,\n      next,\n      hide,\n      toggleMode,\n      handleImgLoad,\n      handleImgError,\n      handleMouseDown,\n    }\n  },\n})\n</script>\n"],"names":["markRaw","ScaleToOriginal","defineComponent","Close","ArrowLeft","ArrowRight","ZoomOut","ZoomIn","RefreshLeft","imageViewerProps","imageViewerEmits","computed","EVENT_CODE","useEventListener","nextTick","watch"],"mappings":"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"}

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

@@ -1,142 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-
-const _hoisted_1 = { class: "el-image-viewer__btn el-image-viewer__actions" };
-const _hoisted_2 = { class: "el-image-viewer__actions__inner" };
-const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-image-viewer__actions__divider" }, null, -1);
-const _hoisted_4 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-image-viewer__actions__divider" }, null, -1);
-const _hoisted_5 = { class: "el-image-viewer__canvas" };
-const _hoisted_6 = ["src"];
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_close = vue.resolveComponent("close");
-  const _component_el_icon = vue.resolveComponent("el-icon");
-  const _component_arrow_left = vue.resolveComponent("arrow-left");
-  const _component_arrow_right = vue.resolveComponent("arrow-right");
-  const _component_zoom_out = vue.resolveComponent("zoom-out");
-  const _component_zoom_in = vue.resolveComponent("zoom-in");
-  const _component_refresh_left = vue.resolveComponent("refresh-left");
-  const _component_refresh_right = vue.resolveComponent("refresh-right");
-  return vue.openBlock(), vue.createBlock(vue.Transition, { name: "viewer-fade" }, {
-    default: vue.withCtx(() => [
-      vue.createElementVNode("div", {
-        ref: "wrapper",
-        tabindex: -1,
-        class: "el-image-viewer__wrapper",
-        style: vue.normalizeStyle({ zIndex: _ctx.zIndex })
-      }, [
-        vue.createElementVNode("div", {
-          class: "el-image-viewer__mask",
-          onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => _ctx.hideOnClickModal && _ctx.hide(), ["self"]))
-        }),
-        vue.createCommentVNode(" CLOSE "),
-        vue.createElementVNode("span", {
-          class: "el-image-viewer__btn el-image-viewer__close",
-          onClick: _cache[1] || (_cache[1] = (...args) => _ctx.hide && _ctx.hide(...args))
-        }, [
-          vue.createVNode(_component_el_icon, null, {
-            default: vue.withCtx(() => [
-              vue.createVNode(_component_close)
-            ]),
-            _: 1
-          })
-        ]),
-        vue.createCommentVNode(" ARROW "),
-        !_ctx.isSingle ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          vue.createElementVNode("span", {
-            class: vue.normalizeClass(["el-image-viewer__btn el-image-viewer__prev", { "is-disabled": !_ctx.infinite && _ctx.isFirst }]),
-            onClick: _cache[2] || (_cache[2] = (...args) => _ctx.prev && _ctx.prev(...args))
-          }, [
-            vue.createVNode(_component_el_icon, null, {
-              default: vue.withCtx(() => [
-                vue.createVNode(_component_arrow_left)
-              ]),
-              _: 1
-            })
-          ], 2),
-          vue.createElementVNode("span", {
-            class: vue.normalizeClass(["el-image-viewer__btn el-image-viewer__next", { "is-disabled": !_ctx.infinite && _ctx.isLast }]),
-            onClick: _cache[3] || (_cache[3] = (...args) => _ctx.next && _ctx.next(...args))
-          }, [
-            vue.createVNode(_component_el_icon, null, {
-              default: vue.withCtx(() => [
-                vue.createVNode(_component_arrow_right)
-              ]),
-              _: 1
-            })
-          ], 2)
-        ], 64)) : vue.createCommentVNode("v-if", true),
-        vue.createCommentVNode(" ACTIONS "),
-        vue.createElementVNode("div", _hoisted_1, [
-          vue.createElementVNode("div", _hoisted_2, [
-            vue.createVNode(_component_el_icon, {
-              onClick: _cache[4] || (_cache[4] = ($event) => _ctx.handleActions("zoomOut"))
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(_component_zoom_out)
-              ]),
-              _: 1
-            }),
-            vue.createVNode(_component_el_icon, {
-              onClick: _cache[5] || (_cache[5] = ($event) => _ctx.handleActions("zoomIn"))
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(_component_zoom_in)
-              ]),
-              _: 1
-            }),
-            _hoisted_3,
-            vue.createVNode(_component_el_icon, { onClick: _ctx.toggleMode }, {
-              default: vue.withCtx(() => [
-                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.mode.icon)))
-              ]),
-              _: 1
-            }, 8, ["onClick"]),
-            _hoisted_4,
-            vue.createVNode(_component_el_icon, {
-              onClick: _cache[6] || (_cache[6] = ($event) => _ctx.handleActions("anticlockwise"))
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(_component_refresh_left)
-              ]),
-              _: 1
-            }),
-            vue.createVNode(_component_el_icon, {
-              onClick: _cache[7] || (_cache[7] = ($event) => _ctx.handleActions("clockwise"))
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(_component_refresh_right)
-              ]),
-              _: 1
-            })
-          ])
-        ]),
-        vue.createCommentVNode(" CANVAS "),
-        vue.createElementVNode("div", _hoisted_5, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.urlList, (url, i) => {
-            return vue.withDirectives((vue.openBlock(), vue.createElementBlock("img", {
-              ref_for: true,
-              ref: "img",
-              key: url,
-              src: url,
-              style: vue.normalizeStyle(_ctx.imgStyle),
-              class: "el-image-viewer__img",
-              onLoad: _cache[8] || (_cache[8] = (...args) => _ctx.handleImgLoad && _ctx.handleImgLoad(...args)),
-              onError: _cache[9] || (_cache[9] = (...args) => _ctx.handleImgError && _ctx.handleImgError(...args)),
-              onMousedown: _cache[10] || (_cache[10] = (...args) => _ctx.handleMouseDown && _ctx.handleMouseDown(...args))
-            }, null, 44, _hoisted_6)), [
-              [vue.vShow, i === _ctx.index]
-            ]);
-          }), 128))
-        ]),
-        vue.renderSlot(_ctx.$slots, "default")
-      ], 4)
-    ]),
-    _: 3
-  });
-}
-
-exports.render = render;
-//# sourceMappingURL=image-viewer.vue_vue_type_template_id_4b22ad85_lang.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"image-viewer.vue_vue_type_template_id_4b22ad85_lang.js","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue?vue&type=template&id=4b22ad85&lang.js"],"sourcesContent":["<template>\n  <transition name=\"viewer-fade\">\n    <div\n      ref=\"wrapper\"\n      :tabindex=\"-1\"\n      class=\"el-image-viewer__wrapper\"\n      :style=\"{ zIndex }\"\n    >\n      <div\n        class=\"el-image-viewer__mask\"\n        @click.self=\"hideOnClickModal && hide()\"\n      />\n\n      <!-- CLOSE -->\n      <span class=\"el-image-viewer__btn el-image-viewer__close\" @click=\"hide\">\n        <el-icon><close /></el-icon>\n      </span>\n\n      <!-- ARROW -->\n      <template v-if=\"!isSingle\">\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__prev\"\n          :class=\"{ 'is-disabled': !infinite && isFirst }\"\n          @click=\"prev\"\n        >\n          <el-icon><arrow-left /></el-icon>\n        </span>\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__next\"\n          :class=\"{ 'is-disabled': !infinite && isLast }\"\n          @click=\"next\"\n        >\n          <el-icon><arrow-right /></el-icon>\n        </span>\n      </template>\n      <!-- ACTIONS -->\n      <div class=\"el-image-viewer__btn el-image-viewer__actions\">\n        <div class=\"el-image-viewer__actions__inner\">\n          <el-icon @click=\"handleActions('zoomOut')\">\n            <zoom-out />\n          </el-icon>\n          <el-icon @click=\"handleActions('zoomIn')\">\n            <zoom-in />\n          </el-icon>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <el-icon @click=\"toggleMode\">\n            <component :is=\"mode.icon\" />\n          </el-icon>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <el-icon @click=\"handleActions('anticlockwise')\">\n            <refresh-left />\n          </el-icon>\n          <el-icon @click=\"handleActions('clockwise')\">\n            <refresh-right />\n          </el-icon>\n        </div>\n      </div>\n      <!-- CANVAS -->\n      <div class=\"el-image-viewer__canvas\">\n        <img\n          v-for=\"(url, i) in urlList\"\n          v-show=\"i === index\"\n          ref=\"img\"\n          :key=\"url\"\n          :src=\"url\"\n          :style=\"imgStyle\"\n          class=\"el-image-viewer__img\"\n          @load=\"handleImgLoad\"\n          @error=\"handleImgError\"\n          @mousedown=\"handleMouseDown\"\n        />\n      </div>\n      <slot />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  ref,\n  onMounted,\n  watch,\n  nextTick,\n  effectScope,\n  markRaw,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { rafThrottle, isFirefox } from '@element-plus/utils/util'\nimport {\n  Close,\n  ArrowLeft,\n  ArrowRight,\n  ZoomOut,\n  ZoomIn,\n  RefreshLeft,\n  RefreshRight,\n  FullScreen,\n  ScaleToOriginal,\n} from '@element-plus/icons-vue'\nimport { imageViewerProps, imageViewerEmits } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\n\nconst Mode = {\n  CONTAIN: {\n    name: 'contain',\n    icon: markRaw(FullScreen),\n  },\n  ORIGINAL: {\n    name: 'original',\n    icon: markRaw(ScaleToOriginal),\n  },\n}\n\nconst mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'\nexport type ImageViewerAction =\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'clockwise'\n  | 'anticlockwise'\n\nexport default defineComponent({\n  name: 'ElImageViewer',\n  components: {\n    ElIcon,\n    Close,\n    ArrowLeft,\n    ArrowRight,\n    ZoomOut,\n    ZoomIn,\n    RefreshLeft,\n    RefreshRight,\n  },\n  props: imageViewerProps,\n  emits: imageViewerEmits,\n\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const wrapper = ref<HTMLDivElement>()\n    const img = ref<HTMLImageElement>()\n\n    const scopeEventListener = effectScope()\n\n    const loading = ref(true)\n    const index = ref(props.initialIndex)\n    const mode = ref(Mode.CONTAIN)\n    const transform = ref({\n      scale: 1,\n      deg: 0,\n      offsetX: 0,\n      offsetY: 0,\n      enableTransition: false,\n    })\n\n    const isSingle = computed(() => {\n      const { urlList } = props\n      return urlList.length <= 1\n    })\n\n    const isFirst = computed(() => {\n      return index.value === 0\n    })\n\n    const isLast = computed(() => {\n      return index.value === props.urlList.length - 1\n    })\n\n    const currentImg = computed(() => {\n      return props.urlList[index.value]\n    })\n\n    const imgStyle = computed(() => {\n      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n      const style: CSSProperties = {\n        transform: `scale(${scale}) rotate(${deg}deg)`,\n        transition: enableTransition ? 'transform .3s' : '',\n        marginLeft: `${offsetX}px`,\n        marginTop: `${offsetY}px`,\n      }\n      if (mode.value.name === Mode.CONTAIN.name) {\n        style.maxWidth = style.maxHeight = '100%'\n      }\n      return style\n    })\n\n    function hide() {\n      unregisterEventListener()\n      emit('close')\n    }\n\n    function registerEventListener() {\n      const keydownHandler = rafThrottle((e: KeyboardEvent) => {\n        switch (e.code) {\n          // ESC\n          case EVENT_CODE.esc:\n            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 = rafThrottle(\n        (e: WheelEvent | any /* TODO: wheelDelta is deprecated */) => {\n          const delta = e.wheelDelta ? e.wheelDelta : -e.detail\n          if (delta > 0) {\n            handleActions('zoomIn', {\n              zoomRate: 0.015,\n              enableTransition: false,\n            })\n          } else {\n            handleActions('zoomOut', {\n              zoomRate: 0.015,\n              enableTransition: false,\n            })\n          }\n        }\n      )\n\n      scopeEventListener.run(() => {\n        useEventListener(document, 'keydown', keydownHandler)\n        useEventListener(document, mousewheelEventName, mousewheelHandler)\n      })\n    }\n\n    function unregisterEventListener() {\n      scopeEventListener.stop()\n    }\n\n    function handleImgLoad() {\n      loading.value = false\n    }\n\n    function handleImgError(e: Event) {\n      loading.value = false\n      ;(e.target as HTMLImageElement).alt = t('el.image.error')\n    }\n\n    function handleMouseDown(e: MouseEvent) {\n      if (loading.value || e.button !== 0 || !wrapper.value) return\n\n      const { offsetX, offsetY } = transform.value\n      const startX = e.pageX\n      const startY = e.pageY\n\n      const divLeft = wrapper.value.clientLeft\n      const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth\n      const divTop = wrapper.value.clientTop\n      const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight\n\n      const dragHandler = rafThrottle((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(\n        document,\n        'mousemove',\n        dragHandler\n      )\n      useEventListener(document, 'mouseup', (evt) => {\n        const mouseX = evt.pageX\n        const mouseY = evt.pageY\n        if (\n          mouseX < divLeft ||\n          mouseX > divRight ||\n          mouseY < divTop ||\n          mouseY > divBottom\n        ) {\n          reset()\n        }\n        removeMousemove()\n      })\n\n      e.preventDefault()\n    }\n\n    function reset() {\n      transform.value = {\n        scale: 1,\n        deg: 0,\n        offsetX: 0,\n        offsetY: 0,\n        enableTransition: false,\n      }\n    }\n\n    function toggleMode() {\n      if (loading.value) return\n\n      const modeNames = Object.keys(Mode)\n      const modeValues = Object.values(Mode)\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 = Mode[modeNames[nextIndex]]\n      reset()\n    }\n\n    function prev() {\n      if (isFirst.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value - 1 + len) % len\n    }\n\n    function next() {\n      if (isLast.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value + 1) % len\n    }\n\n    function handleActions(action: ImageViewerAction, options = {}) {\n      if (loading.value) return\n      const { zoomRate, rotateDeg, enableTransition } = {\n        zoomRate: 0.2,\n        rotateDeg: 90,\n        enableTransition: true,\n        ...options,\n      }\n      switch (action) {\n        case 'zoomOut':\n          if (transform.value.scale > 0.2) {\n            transform.value.scale = parseFloat(\n              (transform.value.scale - zoomRate).toFixed(3)\n            )\n          }\n          break\n        case 'zoomIn':\n          transform.value.scale = parseFloat(\n            (transform.value.scale + zoomRate).toFixed(3)\n          )\n          break\n        case 'clockwise':\n          transform.value.deg += rotateDeg\n          break\n        case 'anticlockwise':\n          transform.value.deg -= rotateDeg\n          break\n      }\n      transform.value.enableTransition = enableTransition\n    }\n\n    watch(currentImg, () => {\n      nextTick(() => {\n        const $img = img.value\n        if (!$img?.complete) {\n          loading.value = true\n        }\n      })\n    })\n\n    watch(index, (val) => {\n      reset()\n      emit('switch', val)\n    })\n\n    onMounted(() => {\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\n    return {\n      index,\n      wrapper,\n      img,\n      isSingle,\n      isFirst,\n      isLast,\n      currentImg,\n      imgStyle,\n      mode,\n      handleActions,\n      prev,\n      next,\n      hide,\n      toggleMode,\n      handleImgLoad,\n      handleImgError,\n      handleMouseDown,\n    }\n  },\n})\n</script>\n"],"names":["_createElementVNode","_createVNode"],"mappings":";;;;;;;qBAoCW,KAAK,EAAC;;;;0BAsBD;;;;;;;;;;;;;;;;QAvDV,KAAI;;QAEJA;;;;;;;;;UASMC;;;;;;;;;;;;;;qBAOG;gBAEJA;;;;;;;;;;qBAKI;gBAEJA;;;;;;;;;;;;;;;cAQS;;;;;;;;cAGA;;;;;;;;;;;;;;;;cAQA;;;;;;;;cAGA;;;;;;;;;;;;qDAOZ;;cAGE;cACC;cACA;mBACK;cACN,UAAM;cACL;cACA;;;;;;;;;;;"}