@element-plus/nightly 0.0.20220328 → 0.0.20220331

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

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

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

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

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

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

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

@@ -1,45 +1,39 @@
-import { markRaw, defineComponent, ref, effectScope, computed, watch, nextTick, onMounted, resolveComponent, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, createElementVNode, normalizeClass, normalizeStyle, withModifiers, createCommentVNode, createElementBlock, Fragment, resolveDynamicComponent, renderList, withDirectives, vShow, renderSlot } from 'vue';
+import { defineComponent, markRaw, ref, effectScope, computed, watch, nextTick, onMounted, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, createElementVNode, normalizeClass, unref, normalizeStyle, withModifiers, createCommentVNode, createElementBlock, Fragment, resolveDynamicComponent, renderList, withDirectives, vShow, renderSlot } from 'vue';
 import { isNumber, useEventListener } from '@vueuse/core';
 import { throttle } from 'lodash-unified';
-import { ElIcon } from '../../icon/index.mjs';
 import '../../../hooks/index.mjs';
 import '../../../constants/index.mjs';
 import '../../../utils/index.mjs';
+import { ElIcon } from '../../icon/index.mjs';
 import { FullScreen, ScaleToOriginal, Close, ArrowLeft, ArrowRight, ZoomOut, ZoomIn, RefreshLeft, RefreshRight } from '@element-plus/icons-vue';
 import { imageViewerProps, imageViewerEmits } from './image-viewer.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 import { isFirefox } from '../../../utils/browser.mjs';
 import { useLocale } from '../../../hooks/use-locale/index.mjs';
 import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 import { useZIndex } from '../../../hooks/use-z-index/index.mjs';
 import { EVENT_CODE } from '../../../constants/aria.mjs';
 
-const Mode = {
-  CONTAIN: {
-    name: "contain",
-    icon: markRaw(FullScreen)
-  },
-  ORIGINAL: {
-    name: "original",
-    icon: markRaw(ScaleToOriginal)
-  }
+const _hoisted_1 = ["src"];
+const __default__ = {
+  name: "ElImageViewer"
 };
-const mousewheelEventName = isFirefox() ? "DOMMouseScroll" : "mousewheel";
-const _sfc_main = defineComponent({
-  name: "ElImageViewer",
-  components: {
-    ElIcon,
-    Close,
-    ArrowLeft,
-    ArrowRight,
-    ZoomOut,
-    ZoomIn,
-    RefreshLeft,
-    RefreshRight
-  },
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
   props: imageViewerProps,
   emits: imageViewerEmits,
-  setup(props, { emit }) {
+  setup(__props, { emit }) {
+    const props = __props;
+    const Mode = {
+      CONTAIN: {
+        name: "contain",
+        icon: markRaw(FullScreen)
+      },
+      ORIGINAL: {
+        name: "original",
+        icon: markRaw(ScaleToOriginal)
+      }
+    };
+    const mousewheelEventName = isFirefox() ? "DOMMouseScroll" : "mousewheel";
     const { t } = useLocale();
     const ns = useNamespace("image-viewer");
     const { nextZIndex } = useZIndex();
@@ -256,184 +250,154 @@ const _sfc_main = defineComponent({
       registerEventListener();
       (_b = (_a = wrapper.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
     });
-    return {
-      index,
-      wrapper,
-      imgRefs,
-      isSingle,
-      isFirst,
-      isLast,
-      currentImg,
-      imgStyle,
-      mode,
-      computedZIndex,
-      handleActions,
-      prev,
-      next,
-      hide,
-      toggleMode,
-      handleImgLoad,
-      handleImgError,
-      handleMouseDown,
-      ns
-    };
-  }
-});
-const _hoisted_1 = ["src"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_close = resolveComponent("close");
-  const _component_el_icon = resolveComponent("el-icon");
-  const _component_arrow_left = resolveComponent("arrow-left");
-  const _component_arrow_right = resolveComponent("arrow-right");
-  const _component_zoom_out = resolveComponent("zoom-out");
-  const _component_zoom_in = resolveComponent("zoom-in");
-  const _component_refresh_left = resolveComponent("refresh-left");
-  const _component_refresh_right = resolveComponent("refresh-right");
-  return openBlock(), createBlock(Teleport, {
-    to: "body",
-    disabled: !_ctx.teleported
-  }, [
-    createVNode(Transition, {
-      name: "viewer-fade",
-      appear: ""
-    }, {
-      default: withCtx(() => [
-        createElementVNode("div", {
-          ref: "wrapper",
-          tabindex: -1,
-          class: normalizeClass(_ctx.ns.e("wrapper")),
-          style: normalizeStyle({ zIndex: _ctx.computedZIndex })
-        }, [
-          createElementVNode("div", {
-            class: normalizeClass(_ctx.ns.e("mask")),
-            onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.hideOnClickModal && _ctx.hide(), ["self"]))
-          }, null, 2),
-          createCommentVNode(" CLOSE "),
-          createElementVNode("span", {
-            class: normalizeClass([_ctx.ns.e("btn"), _ctx.ns.e("close")]),
-            onClick: _cache[1] || (_cache[1] = (...args) => _ctx.hide && _ctx.hide(...args))
-          }, [
-            createVNode(_component_el_icon, null, {
-              default: withCtx(() => [
-                createVNode(_component_close)
-              ]),
-              _: 1
-            })
-          ], 2),
-          createCommentVNode(" ARROW "),
-          !_ctx.isSingle ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-            createElementVNode("span", {
-              class: normalizeClass([
-                _ctx.ns.e("btn"),
-                _ctx.ns.e("prev"),
-                _ctx.ns.is("disabled", !_ctx.infinite && _ctx.isFirst)
-              ]),
-              onClick: _cache[2] || (_cache[2] = (...args) => _ctx.prev && _ctx.prev(...args))
-            }, [
-              createVNode(_component_el_icon, null, {
-                default: withCtx(() => [
-                  createVNode(_component_arrow_left)
-                ]),
-                _: 1
-              })
-            ], 2),
-            createElementVNode("span", {
-              class: normalizeClass([
-                _ctx.ns.e("btn"),
-                _ctx.ns.e("next"),
-                _ctx.ns.is("disabled", !_ctx.infinite && _ctx.isLast)
-              ]),
-              onClick: _cache[3] || (_cache[3] = (...args) => _ctx.next && _ctx.next(...args))
-            }, [
-              createVNode(_component_el_icon, null, {
-                default: withCtx(() => [
-                  createVNode(_component_arrow_right)
-                ]),
-                _: 1
-              })
-            ], 2)
-          ], 64)) : createCommentVNode("v-if", true),
-          createCommentVNode(" ACTIONS "),
-          createElementVNode("div", {
-            class: normalizeClass([_ctx.ns.e("btn"), _ctx.ns.e("actions")])
-          }, [
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, {
+        to: "body",
+        disabled: !_ctx.teleported
+      }, [
+        createVNode(Transition, {
+          name: "viewer-fade",
+          appear: ""
+        }, {
+          default: withCtx(() => [
             createElementVNode("div", {
-              class: normalizeClass(_ctx.ns.e("actions__inner"))
+              ref_key: "wrapper",
+              ref: wrapper,
+              tabindex: -1,
+              class: normalizeClass(unref(ns).e("wrapper")),
+              style: normalizeStyle({ zIndex: unref(computedZIndex) })
             }, [
-              createVNode(_component_el_icon, {
-                onClick: _cache[4] || (_cache[4] = ($event) => _ctx.handleActions("zoomOut"))
-              }, {
-                default: withCtx(() => [
-                  createVNode(_component_zoom_out)
-                ]),
-                _: 1
-              }),
-              createVNode(_component_el_icon, {
-                onClick: _cache[5] || (_cache[5] = ($event) => _ctx.handleActions("zoomIn"))
-              }, {
-                default: withCtx(() => [
-                  createVNode(_component_zoom_in)
-                ]),
-                _: 1
-              }),
-              createElementVNode("i", {
-                class: normalizeClass(_ctx.ns.e("actions__divider"))
+              createElementVNode("div", {
+                class: normalizeClass(unref(ns).e("mask")),
+                onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.hideOnClickModal && hide(), ["self"]))
               }, null, 2),
-              createVNode(_component_el_icon, { onClick: _ctx.toggleMode }, {
-                default: withCtx(() => [
-                  (openBlock(), createBlock(resolveDynamicComponent(_ctx.mode.icon)))
-                ]),
-                _: 1
-              }, 8, ["onClick"]),
-              createElementVNode("i", {
-                class: normalizeClass(_ctx.ns.e("actions__divider"))
-              }, null, 2),
-              createVNode(_component_el_icon, {
-                onClick: _cache[6] || (_cache[6] = ($event) => _ctx.handleActions("anticlockwise"))
-              }, {
-                default: withCtx(() => [
-                  createVNode(_component_refresh_left)
-                ]),
-                _: 1
-              }),
-              createVNode(_component_el_icon, {
-                onClick: _cache[7] || (_cache[7] = ($event) => _ctx.handleActions("clockwise"))
-              }, {
-                default: withCtx(() => [
-                  createVNode(_component_refresh_right)
-                ]),
-                _: 1
-              })
-            ], 2)
-          ], 2),
-          createCommentVNode(" CANVAS "),
-          createElementVNode("div", {
-            class: normalizeClass(_ctx.ns.e("canvas"))
-          }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.urlList, (url, i) => {
-              return withDirectives((openBlock(), createElementBlock("img", {
-                ref_for: true,
-                ref: (el) => _ctx.imgRefs[i] = el,
-                key: url,
-                src: url,
-                style: normalizeStyle(_ctx.imgStyle),
-                class: normalizeClass(_ctx.ns.e("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)), [
-                [vShow, i === _ctx.index]
-              ]);
-            }), 128))
-          ], 2),
-          renderSlot(_ctx.$slots, "default")
-        ], 6)
-      ]),
-      _: 3
-    })
-  ], 8, ["disabled"]);
-}
-var ImageViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+              createCommentVNode(" CLOSE "),
+              createElementVNode("span", {
+                class: normalizeClass([unref(ns).e("btn"), unref(ns).e("close")]),
+                onClick: hide
+              }, [
+                createVNode(unref(ElIcon), null, {
+                  default: withCtx(() => [
+                    createVNode(unref(Close))
+                  ]),
+                  _: 1
+                })
+              ], 2),
+              createCommentVNode(" ARROW "),
+              !unref(isSingle) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                createElementVNode("span", {
+                  class: normalizeClass([
+                    unref(ns).e("btn"),
+                    unref(ns).e("prev"),
+                    unref(ns).is("disabled", !_ctx.infinite && unref(isFirst))
+                  ]),
+                  onClick: prev
+                }, [
+                  createVNode(unref(ElIcon), null, {
+                    default: withCtx(() => [
+                      createVNode(unref(ArrowLeft))
+                    ]),
+                    _: 1
+                  })
+                ], 2),
+                createElementVNode("span", {
+                  class: normalizeClass([
+                    unref(ns).e("btn"),
+                    unref(ns).e("next"),
+                    unref(ns).is("disabled", !_ctx.infinite && unref(isLast))
+                  ]),
+                  onClick: next
+                }, [
+                  createVNode(unref(ElIcon), null, {
+                    default: withCtx(() => [
+                      createVNode(unref(ArrowRight))
+                    ]),
+                    _: 1
+                  })
+                ], 2)
+              ], 64)) : createCommentVNode("v-if", true),
+              createCommentVNode(" ACTIONS "),
+              createElementVNode("div", {
+                class: normalizeClass([unref(ns).e("btn"), unref(ns).e("actions")])
+              }, [
+                createElementVNode("div", {
+                  class: normalizeClass(unref(ns).e("actions__inner"))
+                }, [
+                  createVNode(unref(ElIcon), {
+                    onClick: _cache[1] || (_cache[1] = ($event) => handleActions("zoomOut"))
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(ZoomOut))
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(unref(ElIcon), {
+                    onClick: _cache[2] || (_cache[2] = ($event) => handleActions("zoomIn"))
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(ZoomIn))
+                    ]),
+                    _: 1
+                  }),
+                  createElementVNode("i", {
+                    class: normalizeClass(unref(ns).e("actions__divider"))
+                  }, null, 2),
+                  createVNode(unref(ElIcon), { onClick: toggleMode }, {
+                    default: withCtx(() => [
+                      (openBlock(), createBlock(resolveDynamicComponent(mode.value.icon)))
+                    ]),
+                    _: 1
+                  }),
+                  createElementVNode("i", {
+                    class: normalizeClass(unref(ns).e("actions__divider"))
+                  }, null, 2),
+                  createVNode(unref(ElIcon), {
+                    onClick: _cache[3] || (_cache[3] = ($event) => handleActions("anticlockwise"))
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(RefreshLeft))
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(unref(ElIcon), {
+                    onClick: _cache[4] || (_cache[4] = ($event) => handleActions("clockwise"))
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(RefreshRight))
+                    ]),
+                    _: 1
+                  })
+                ], 2)
+              ], 2),
+              createCommentVNode(" CANVAS "),
+              createElementVNode("div", {
+                class: normalizeClass(unref(ns).e("canvas"))
+              }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.urlList, (url, i) => {
+                  return withDirectives((openBlock(), createElementBlock("img", {
+                    ref_for: true,
+                    ref: (el) => imgRefs.value[i] = el,
+                    key: url,
+                    src: url,
+                    style: normalizeStyle(unref(imgStyle)),
+                    class: normalizeClass(unref(ns).e("img")),
+                    onLoad: handleImgLoad,
+                    onError: handleImgError,
+                    onMousedown: handleMouseDown
+                  }, null, 46, _hoisted_1)), [
+                    [vShow, i === index.value]
+                  ]);
+                }), 128))
+              ], 2),
+              renderSlot(_ctx.$slots, "default")
+            ], 6)
+          ]),
+          _: 3
+        })
+      ], 8, ["disabled"]);
+    };
+  }
+});
 
-export { ImageViewer as default };
+export { _sfc_main as default };
 //# sourceMappingURL=image-viewer2.mjs.map