@koi-design/uxd-ui 12.1.36-beta.0

package/lib/components/Image/Image.vue.d.ts

@@ -0,0 +1,87 @@
+import { type CSSProperties } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    alt: {
+        type: StringConstructor;
+    };
+    fit: {
+        type: StringConstructor;
+    };
+    maskClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    lazy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    preViewList: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+    src: {
+        type: StringConstructor;
+    };
+    scrollContainer: {
+        type: import("vue").PropType<string | import("../..").GetConfainerFunction>;
+    };
+    zIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    prefixCls: import("vue").ComputedRef<string>;
+    computedLocale: import("vue").ComputedRef<{
+        error: string;
+        loading: string;
+    }>;
+    containerRef: import("vue").Ref<HTMLElement, HTMLElement>;
+    loading: import("vue").Ref<boolean, boolean>;
+    showViewer: import("vue").Ref<boolean, boolean>;
+    loadError: import("vue").Ref<boolean, boolean>;
+    imgAttrs: import("vue").ComputedRef<{}>;
+    imgStyle: import("vue").ComputedRef<CSSProperties>;
+    imageIndex: import("vue").ComputedRef<number>;
+    preview: import("vue").ComputedRef<boolean>;
+    alignCenter: import("vue").ComputedRef<boolean>;
+    onClick: () => void;
+    closeViewer: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (ev: Event) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    alt: {
+        type: StringConstructor;
+    };
+    fit: {
+        type: StringConstructor;
+    };
+    maskClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    lazy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    preViewList: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+    src: {
+        type: StringConstructor;
+    };
+    scrollContainer: {
+        type: import("vue").PropType<string | import("../..").GetConfainerFunction>;
+    };
+    zIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & {
+    onError?: (ev: Event) => any;
+}, {
+    zIndex: number;
+    maskClose: boolean;
+    lazy: boolean;
+    preViewList: string[];
+}, {}>;
+export default _default;

package/lib/components/Image/ImgViewer.js

@@ -0,0 +1,373 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var uxdIcon = require('@koi-design/uxd-icon');
+var index = require('../Icon/index.js');
+var util = require('./util.js');
+var KeyCode = require('../../utils/KeyCode.js');
+var tools = require('../../utils/tools.js');
+var isFirefox = require('../../utils/isFirefox.js');
+var Image_type = require('./Image.type.js');
+var useGlobalConfig = require('../base/hooks/useGlobalConfig.js');
+var pluginVue_exportHelper = require('../../_virtual/plugin-vue_export-helper.js');
+
+const _sfc_main = vue.defineComponent({
+  name: "UImageViewer",
+  components: {
+    UIcon: index.UIcon,
+    URoundClose: uxdIcon.URoundClose,
+    ULineLeft: uxdIcon.ULineLeft,
+    ULineRight: uxdIcon.ULineRight,
+    ULineShrink: uxdIcon.ULineShrink,
+    ULineMagnify: uxdIcon.ULineMagnify,
+    ULineRefreshLeft: uxdIcon.ULineRefreshLeft,
+    ULineRefreshRight: uxdIcon.ULineRefreshRight,
+    ULineScreenOpen: uxdIcon.ULineScreenOpen,
+    ULineScaleToOriginal: uxdIcon.ULineScaleToOriginal
+  },
+  props: Image_type.imageViewerProps,
+  emits: Image_type.imageViewerEmits,
+  setup(props, { emit }) {
+    const { config: globalConfig } = useGlobalConfig["default"]("image");
+    let keyDownHandler = null;
+    let mouseWheelHandler = null;
+    let dragHandler = null;
+    const viewerWrapRef = vue.ref(null);
+    const index = vue.ref(props.initialIndex);
+    const transform = vue.ref({
+      scale: 1,
+      deg: 0,
+      offsetX: 0,
+      offsetY: 0,
+      enableTransition: false
+    });
+    const loading = vue.ref(true);
+    const imgRef = vue.ref(null);
+    const mode = vue.ref(util.modeOptions[0]);
+    const isSingle = vue.computed(() => {
+      return props.urlList.length <= 1;
+    });
+    const currentImg = vue.computed(() => {
+      return props.urlList[index.value];
+    });
+    const isFirst = vue.computed(() => {
+      return index.value === 0;
+    });
+    const isLast = vue.computed(() => {
+      return index.value === props.urlList.length - 1;
+    });
+    const imgStyle = vue.computed(() => {
+      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value;
+      const style = {
+        transform: `scale(${scale}) rotate(${deg}deg) translate3d(${offsetX}px, ${offsetY}px, 0)`,
+        transition: enableTransition ? "transform .3s" : ""
+      };
+      if (mode.value.name === util.modeOptions[0].name) {
+        style.maxWidth = "100%";
+        style.maxHeight = "100%";
+      }
+      return style;
+    });
+    const handleImgLoad = () => {
+      loading.value = false;
+    };
+    const handleImgError = (e) => {
+      loading.value = false;
+      e.target.alt = globalConfig.locale.image.error;
+    };
+    const handleMouseDown = (e) => {
+      if (loading.value || e.button !== 0)
+        return;
+      const { offsetX, offsetY } = transform.value;
+      const startX = e.pageX;
+      const startY = e.pageY;
+      dragHandler = tools.debounce((ev) => {
+        transform.value = {
+          ...transform.value,
+          offsetX: offsetX + ev.pageX - startX,
+          offsetY: offsetY + ev.pageY - startY
+        };
+      }, 5);
+      document.addEventListener("mousemove", dragHandler);
+      document.addEventListener("mouseup", () => {
+        document.removeEventListener("mousemove", dragHandler || (() => {
+        }));
+      });
+      e.preventDefault();
+    };
+    const handleActions = (action, options = {}) => {
+      const {
+        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 "clocelise":
+          transform.value.deg += rotateDeg;
+          break;
+        case "anticlocelise":
+          transform.value.deg -= rotateDeg;
+          break;
+        default:
+          break;
+      }
+      transform.value.enableTransition = enableTransition;
+    };
+    const reset = () => {
+      transform.value = {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      };
+    };
+    const handlePrev = () => {
+      if (isFirst.value && !props.infinite)
+        return;
+      const len = props.urlList.length;
+      index.value = (index.value - 1 + len) % len;
+    };
+    const handleNext = () => {
+      if (isLast.value && !props.infinite)
+        return;
+      const len = props.urlList.length;
+      index.value = (index.value + 1) % len;
+    };
+    const toggleMode = () => {
+      if (loading.value)
+        return;
+      const idx = util.modeOptions.findIndex((i) => i.name === mode.value.name);
+      const nextIndex = (idx + 1) % util.modeOptions.length;
+      mode.value = util.modeOptions[nextIndex];
+      reset();
+    };
+    const removeEvent = () => {
+      const mousewheelEventName = isFirefox["default"] ? "DOMMouseScroll" : "mousewheel";
+      if (keyDownHandler && mouseWheelHandler) {
+        document.removeEventListener("keydown", keyDownHandler);
+        document.removeEventListener(mousewheelEventName, mouseWheelHandler);
+      }
+      keyDownHandler = null;
+      mouseWheelHandler = null;
+    };
+    const hide = (type) => {
+      if (type === "mask" && props.hideOnClickModal === false)
+        return;
+      removeEvent();
+      emit("close");
+    };
+    const addEvent = () => {
+      keyDownHandler = tools.debounce((e) => {
+        switch (e.keyCode) {
+          case KeyCode["default"].ESC:
+            hide();
+            break;
+          case KeyCode["default"].SPACE:
+            toggleMode();
+            break;
+          case KeyCode["default"].LEFT:
+            handlePrev();
+            break;
+          case KeyCode["default"].UP:
+            handleActions("zoomIn");
+            break;
+          case KeyCode["default"].RIGHT:
+            handleNext();
+            break;
+          case KeyCode["default"].DOWN:
+            handleActions("zoomOut");
+            break;
+          default:
+            break;
+        }
+      }, 5);
+      mouseWheelHandler = tools.debounce((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
+          });
+        }
+      }, 5);
+      const mousewheelEventName = isFirefox["default"] ? "DOMMouseScroll" : "mousewheel";
+      document.addEventListener("keydown", keyDownHandler);
+      document.addEventListener(mousewheelEventName, mouseWheelHandler);
+    };
+    vue.watch(index, (val) => {
+      reset();
+      emit("switch", val);
+    });
+    vue.watch(currentImg, () => {
+      vue.nextTick(() => {
+        if (imgRef.value && !imgRef.value.complete) {
+          loading.value = true;
+        }
+      });
+    });
+    vue.onMounted(() => {
+      addEvent();
+    });
+    return {
+      viewerWrapRef,
+      imgRef,
+      index,
+      isSingle,
+      currentImg,
+      imgStyle,
+      mode,
+      hide,
+      handleImgLoad,
+      handleImgError,
+      handleMouseDown,
+      handlePrev,
+      handleNext,
+      toggleMode,
+      handleActions
+    };
+  }
+});
+const _hoisted_1 = ["src"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_URoundClose = vue.resolveComponent("URoundClose");
+  const _component_UIcon = vue.resolveComponent("UIcon");
+  const _component_ULineLeft = vue.resolveComponent("ULineLeft");
+  const _component_ULineRight = vue.resolveComponent("ULineRight");
+  const _component_ULineShrink = vue.resolveComponent("ULineShrink");
+  const _component_ULineMagnify = vue.resolveComponent("ULineMagnify");
+  const _component_ULineRefreshLeft = vue.resolveComponent("ULineRefreshLeft");
+  const _component_ULineRefreshRight = vue.resolveComponent("ULineRefreshRight");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    ref: "viewerWrapRef",
+    tabindex: 0,
+    class: vue.normalizeClass(`${_ctx.prefixCls}-viewer-wrap`),
+    style: vue.normalizeStyle({ zIndex: _ctx.zIndex })
+  }, [
+    vue.createElementVNode("div", {
+      class: vue.normalizeClass(`${_ctx.prefixCls}-viewer-mask`),
+      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.hide("mask"))
+    }, null, 2),
+    vue.createElementVNode("span", {
+      class: vue.normalizeClass([`${_ctx.prefixCls}-viewer-btn`, `${_ctx.prefixCls}-viewer-close`]),
+      onClick: _cache[1] || (_cache[1] = ($event) => _ctx.hide())
+    }, [
+      vue.createVNode(_component_UIcon, null, {
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_URoundClose)
+        ]),
+        _: 1
+      })
+    ], 2),
+    !_ctx.isSingle ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+      vue.createElementVNode("span", {
+        class: vue.normalizeClass([`${_ctx.prefixCls}-viewer-btn`, `${_ctx.prefixCls}-viewer-prev`]),
+        onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handlePrev && _ctx.handlePrev(...args))
+      }, [
+        vue.createVNode(_component_UIcon, null, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_ULineLeft)
+          ]),
+          _: 1
+        })
+      ], 2),
+      vue.createElementVNode("span", {
+        class: vue.normalizeClass([`${_ctx.prefixCls}-viewer-btn`, `${_ctx.prefixCls}-viewer-next`]),
+        onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleNext && _ctx.handleNext(...args))
+      }, [
+        vue.createVNode(_component_UIcon, null, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_ULineRight)
+          ]),
+          _: 1
+        })
+      ], 2)
+    ], 64)) : vue.createCommentVNode("v-if", true),
+    vue.createElementVNode("div", {
+      class: vue.normalizeClass([`${_ctx.prefixCls}-viewer-btn`, `${_ctx.prefixCls}-viewer-actions`])
+    }, [
+      vue.createElementVNode("div", {
+        class: vue.normalizeClass(`${_ctx.prefixCls}-viewer-actions-inner`)
+      }, [
+        vue.createVNode(_component_UIcon, {
+          onClick: _cache[4] || (_cache[4] = () => _ctx.handleActions("zoomOut"))
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_ULineShrink)
+          ]),
+          _: 1
+        }),
+        vue.createVNode(_component_UIcon, {
+          onClick: _cache[5] || (_cache[5] = () => _ctx.handleActions("zoomIn"))
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_ULineMagnify)
+          ]),
+          _: 1
+        }),
+        vue.createVNode(_component_UIcon, { onClick: _ctx.toggleMode }, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.mode.icon)))
+          ]),
+          _: 1
+        }, 8, ["onClick"]),
+        vue.createVNode(_component_UIcon, {
+          onClick: _cache[6] || (_cache[6] = () => _ctx.handleActions("anticlocelise"))
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_ULineRefreshLeft)
+          ]),
+          _: 1
+        }),
+        vue.createVNode(_component_UIcon, {
+          onClick: _cache[7] || (_cache[7] = () => _ctx.handleActions("clocelise"))
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_ULineRefreshRight)
+          ]),
+          _: 1
+        })
+      ], 2)
+    ], 2),
+    vue.createElementVNode("div", {
+      class: vue.normalizeClass(`${_ctx.prefixCls}-viewer-canvas`)
+    }, [
+      (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: "imgRef",
+          key: url,
+          src: _ctx.currentImg,
+          style: vue.normalizeStyle(_ctx.imgStyle),
+          class: vue.normalizeClass(`${_ctx.prefixCls}-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, 46, _hoisted_1)), [
+          [vue.vShow, i === _ctx.index]
+        ]);
+      }), 128))
+    ], 2)
+  ], 6);
+}
+var ImageViewer = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "E:\\br-fe\\uxd-ui\\src\\components\\Image\\ImgViewer.vue"]]);
+
+exports["default"] = ImageViewer;
+//# sourceMappingURL=ImgViewer.js.map

package/lib/components/Image/ImgViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImgViewer.js","sources":["../../../../src/components/Image/ImgViewer.vue"],"sourcesContent":["<template>\n  <div ref=\"viewerWrapRef\" :tabindex=\"0\" :class=\"`${prefixCls}-viewer-wrap`\" :style=\"{ zIndex }\">\n    <div :class=\"`${prefixCls}-viewer-mask`\" @click=\"hide('mask')\" />\n    <span :class=\"[`${prefixCls}-viewer-btn`, `${prefixCls}-viewer-close`]\" @click=\"hide()\">\n      <UIcon>\n        <URoundClose />\n      </UIcon>\n    </span>\n    <template v-if=\"!isSingle\">\n      <span :class=\"[`${prefixCls}-viewer-btn`, `${prefixCls}-viewer-prev`]\" @click=\"handlePrev\">\n        <UIcon>\n          <ULineLeft />\n        </UIcon>\n      </span>\n      <span :class=\"[`${prefixCls}-viewer-btn`, `${prefixCls}-viewer-next`]\" @click=\"handleNext\">\n        <UIcon>\n          <ULineRight />\n        </UIcon>\n      </span>\n    </template>\n    <div :class=\"[`${prefixCls}-viewer-btn`, `${prefixCls}-viewer-actions`]\">\n      <div :class=\"`${prefixCls}-viewer-actions-inner`\">\n        <UIcon @click=\"() => handleActions('zoomOut')\">\n          <ULineShrink />\n        </UIcon>\n        <UIcon @click=\"() => handleActions('zoomIn')\">\n          <ULineMagnify />\n        </UIcon>\n        <UIcon @click=\"toggleMode\">\n          <component :is=\"mode.icon\" />\n        </UIcon>\n        <UIcon @click=\"() => handleActions('anticlocelise')\">\n          <ULineRefreshLeft />\n        </UIcon>\n        <UIcon @click=\"() => handleActions('clocelise')\">\n          <ULineRefreshRight />\n        </UIcon>\n      </div>\n    </div>\n    <div :class=\"`${prefixCls}-viewer-canvas`\">\n      <img\n        v-for=\"(url, i) in urlList\"\n        v-show=\"i === index\"\n        ref=\"imgRef\"\n        :key=\"url\"\n        :src=\"currentImg\"\n        :style=\"imgStyle\"\n        :class=\"`${prefixCls}-viewer-img`\"\n        @load=\"handleImgLoad\"\n        @error=\"handleImgError\"\n        @mousedown=\"handleMouseDown\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, onMounted, ref, watch, nextTick } from 'vue';\nimport type { CSSProperties } from 'vue';\nimport {\n  URoundClose,\n  ULineLeft,\n  ULineRight,\n  ULineShrink,\n  ULineMagnify,\n  ULineRefreshLeft,\n  ULineRefreshRight,\n  ULineScreenOpen,\n  ULineScaleToOriginal\n} from '@koi-design/uxd-icon';\nimport UIcon from '@uxd-ui/components/Icon';\nimport { modeOptions } from './util';\nimport KeyCode from '../../utils/KeyCode';\nimport { debounce } from '../../utils/tools';\nimport type { DebounceReturn } from '../../utils/tools';\nimport isFF from '../../utils/isFirefox';\nimport { imageViewerProps, imageViewerEmits } from './Image.type';\nimport useGlobalConfig from '../base/hooks/useGlobalConfig';\n\nexport default defineComponent({\n  name: 'UImageViewer',\n  components: {\n    UIcon,\n    URoundClose,\n    ULineLeft,\n    ULineRight,\n    ULineShrink,\n    ULineMagnify,\n    ULineRefreshLeft,\n    ULineRefreshRight,\n    ULineScreenOpen,\n    ULineScaleToOriginal\n  },\n  props: imageViewerProps,\n  emits: imageViewerEmits,\n  setup(props, { emit }) {\n    const { config: globalConfig } = useGlobalConfig('image');\n\n    let keyDownHandler: DebounceReturn | null = null;\n    let mouseWheelHandler: DebounceReturn | null = null;\n    let dragHandler: DebounceReturn | null = null;\n    const viewerWrapRef = ref(null);\n    const index = ref(props.initialIndex);\n    const transform = ref({\n      scale: 1,\n      deg: 0,\n      offsetX: 0,\n      offsetY: 0,\n      enableTransition: false\n    });\n    const loading = ref(true);\n    const imgRef = ref<HTMLImageElement | null>(null);\n    const mode = ref(modeOptions[0]);\n    // ************* computed *************\n    const isSingle = computed(() => {\n      return props.urlList.length <= 1;\n    });\n    const currentImg = computed(() => {\n      return props.urlList[index.value];\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    const imgStyle = computed(() => {\n      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value;\n      const style = {\n        transform: `scale(${scale}) rotate(${deg}deg) translate3d(${offsetX}px, ${offsetY}px, 0)`,\n        transition: enableTransition ? 'transform .3s' : ''\n      } as CSSProperties;\n      if (mode.value.name === modeOptions[0].name) {\n        style.maxWidth = '100%';\n        style.maxHeight = '100%';\n      }\n      return style;\n    });\n\n    // ************* methods *************\n\n    const handleImgLoad = () => {\n      loading.value = false;\n    };\n    const handleImgError = (e: any) => {\n      loading.value = false;\n      e.target.alt = globalConfig.locale.image.error;\n    };\n    const handleMouseDown = (e: any) => {\n      if (loading.value || e.button !== 0) return;\n\n      const { offsetX, offsetY } = transform.value;\n      const startX = e.pageX;\n      const startY = e.pageY;\n      dragHandler = debounce((ev) => {\n        transform.value = {\n          ...transform.value,\n          offsetX: offsetX + ev.pageX - startX,\n          offsetY: offsetY + ev.pageY - startY\n        };\n      }, 5);\n      document.addEventListener('mousemove', dragHandler);\n      document.addEventListener('mouseup', () => {\n        document.removeEventListener('mousemove', dragHandler || (() => {}));\n      });\n\n      e.preventDefault();\n    };\n    const handleActions = (action: string, options = {}) => {\n      const {\n        zoomRate = 0.2,\n        rotateDeg = 90,\n        enableTransition = true\n      } = {\n        ...options\n      };\n      switch (action) {\n        case 'zoomOut':\n          if (transform.value.scale > 0.2) {\n            transform.value.scale = parseFloat((transform.value.scale - zoomRate).toFixed(3));\n          }\n          break;\n        case 'zoomIn':\n          transform.value.scale = parseFloat((transform.value.scale + zoomRate).toFixed(3));\n          break;\n        case 'clocelise':\n          transform.value.deg += rotateDeg;\n          break;\n        case 'anticlocelise':\n          transform.value.deg -= rotateDeg;\n          break;\n\n        default:\n          break;\n      }\n      transform.value.enableTransition = enableTransition;\n    };\n    const reset = () => {\n      transform.value = {\n        scale: 1,\n        deg: 0,\n        offsetX: 0,\n        offsetY: 0,\n        enableTransition: false\n      };\n    };\n    const handlePrev = () => {\n      if (isFirst.value && !props.infinite) return;\n      const len = props.urlList.length;\n      index.value = (index.value - 1 + len) % len;\n    };\n    const handleNext = () => {\n      if (isLast.value && !props.infinite) return;\n      const len = props.urlList.length;\n      index.value = (index.value + 1) % len;\n    };\n    const toggleMode = () => {\n      if (loading.value) return;\n      const idx = modeOptions.findIndex((i) => i.name === mode.value.name);\n      const nextIndex = (idx + 1) % modeOptions.length;\n      mode.value = modeOptions[nextIndex];\n      reset();\n    };\n\n    const removeEvent = () => {\n      const mousewheelEventName = isFF ? 'DOMMouseScroll' : 'mousewheel';\n      if (keyDownHandler && mouseWheelHandler) {\n        document.removeEventListener('keydown', keyDownHandler);\n        document.removeEventListener(mousewheelEventName, mouseWheelHandler);\n      }\n\n      keyDownHandler = null;\n      mouseWheelHandler = null;\n    };\n\n    const hide = (type?: string) => {\n      if (type === 'mask' && props.hideOnClickModal === false) return;\n      removeEvent();\n      emit('close');\n    };\n\n    const addEvent = () => {\n      keyDownHandler = debounce((e) => {\n        switch (e.keyCode) {\n          case KeyCode.ESC:\n            hide();\n            break;\n          case KeyCode.SPACE:\n            toggleMode();\n            break;\n          case KeyCode.LEFT:\n            handlePrev();\n            break;\n          case KeyCode.UP:\n            handleActions('zoomIn');\n            break;\n          case KeyCode.RIGHT:\n            handleNext();\n            break;\n          case KeyCode.DOWN:\n            handleActions('zoomOut');\n            break;\n          default:\n            break;\n        }\n      }, 5);\n      mouseWheelHandler = debounce((e) => {\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      }, 5);\n      const mousewheelEventName = isFF ? 'DOMMouseScroll' : 'mousewheel';\n      document.addEventListener('keydown', keyDownHandler);\n      document.addEventListener(mousewheelEventName, mouseWheelHandler);\n    };\n\n    // ************* watch *************\n    watch(index, (val) => {\n      reset();\n      emit('switch', val);\n    });\n    watch(currentImg, () => {\n      nextTick(() => {\n        if (imgRef.value && !imgRef.value.complete) {\n          loading.value = true;\n        }\n      });\n    });\n\n    onMounted(() => {\n      addEvent();\n    });\n    return {\n      viewerWrapRef,\n      imgRef,\n      index,\n      isSingle,\n      currentImg,\n      imgStyle,\n      mode,\n      hide,\n      handleImgLoad,\n      handleImgError,\n      handleMouseDown,\n      handlePrev,\n      handleNext,\n      toggleMode,\n      handleActions\n    };\n  }\n});\n</script>\n"],"names":["defineComponent","UIcon","URoundClose","ULineLeft","ULineRight","ULineShrink","ULineMagnify","ULineRefreshLeft","ULineRefreshRight","ULineScreenOpen","ULineScaleToOriginal","imageViewerProps","imageViewerEmits","useGlobalConfig","ref","modeOptions","computed","debounce","isFF","KeyCode","_createElementBlock","_normalizeClass","_normalizeStyle","_createElementVNode","_createVNode","_Fragment","_createBlock","_resolveDynamicComponent"],"mappings":"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"}

package/lib/components/Image/ImgViewer.vue.d.ts

@@ -0,0 +1,88 @@
+import type { CSSProperties } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    prefixCls: {
+        type: StringConstructor;
+    };
+    urlList: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+    zIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    initialIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    infinite: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideOnClickModal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    viewerWrapRef: import("vue").Ref<any, any>;
+    imgRef: import("vue").Ref<HTMLImageElement, HTMLImageElement>;
+    index: import("vue").Ref<number, number>;
+    isSingle: import("vue").ComputedRef<boolean>;
+    currentImg: import("vue").ComputedRef<string>;
+    imgStyle: import("vue").ComputedRef<CSSProperties>;
+    mode: import("vue").Ref<{
+        name: string;
+        icon: string;
+    }, {
+        name: string;
+        icon: string;
+    } | {
+        name: string;
+        icon: string;
+    }>;
+    hide: (type?: string) => void;
+    handleImgLoad: () => void;
+    handleImgError: (e: any) => void;
+    handleMouseDown: (e: any) => void;
+    handlePrev: () => void;
+    handleNext: () => void;
+    toggleMode: () => void;
+    handleActions: (action: string, options?: {}) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    switch: (n: number) => boolean;
+    close: () => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    prefixCls: {
+        type: StringConstructor;
+    };
+    urlList: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+    zIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    initialIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    infinite: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideOnClickModal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onClose?: () => any;
+    onSwitch?: (n: number) => any;
+}, {
+    initialIndex: number;
+    infinite: boolean;
+    zIndex: number;
+    urlList: string[];
+    hideOnClickModal: boolean;
+}, {}>;
+export default _default;