@element-plus/nightly 0.0.20220329 → 0.0.20220401

package/lib/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/lib/components/image-viewer/src/image-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.js","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.ts"],"sourcesContent":["import { 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":["buildProps","definePropType","mutable"],"mappings":";;;;;;;;AACY,MAAC,gBAAgB,GAAGA,gBAAU,CAAC;AAC3C,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAEC,oBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAMC,kBAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,gBAAgB,EAAE;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.js","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":["buildProps","definePropType","mutable"],"mappings":";;;;;;;;AACY,MAAC,gBAAgB,GAAGA,gBAAU,CAAC;AAC3C,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAEC,oBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAMC,kBAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,gBAAgB,EAAE;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/lib/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/lib/components/image-viewer/src/image-viewer2.js

@@ -5,53 +5,48 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 var core = require('@vueuse/core');
 var lodashUnified = require('lodash-unified');
-var index = require('../../icon/index.js');
 require('../../../hooks/index.js');
 require('../../../constants/index.js');
 require('../../../utils/index.js');
+var index$3 = require('../../icon/index.js');
 var iconsVue = require('@element-plus/icons-vue');
 var imageViewer = require('./image-viewer.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
 var browser = require('../../../utils/browser.js');
-var index$1 = require('../../../hooks/use-locale/index.js');
-var index$2 = require('../../../hooks/use-namespace/index.js');
-var index$3 = require('../../../hooks/use-z-index/index.js');
+var index = require('../../../hooks/use-locale/index.js');
+var index$1 = require('../../../hooks/use-namespace/index.js');
+var index$2 = require('../../../hooks/use-z-index/index.js');
 var aria = require('../../../constants/aria.js');
 
-const Mode = {
-  CONTAIN: {
-    name: "contain",
-    icon: vue.markRaw(iconsVue.FullScreen)
-  },
-  ORIGINAL: {
-    name: "original",
-    icon: vue.markRaw(iconsVue.ScaleToOriginal)
-  }
+const _hoisted_1 = ["src"];
+const __default__ = {
+  name: "ElImageViewer"
 };
-const mousewheelEventName = browser.isFirefox() ? "DOMMouseScroll" : "mousewheel";
-const _sfc_main = 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
-  },
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
   props: imageViewer.imageViewerProps,
   emits: imageViewer.imageViewerEmits,
-  setup(props, { emit }) {
-    const { t } = index$1.useLocale();
-    const ns = index$2.useNamespace("image-viewer");
-    const { nextZIndex } = index$3.useZIndex();
+  setup(__props, { emit }) {
+    const props = __props;
+    const Mode = {
+      CONTAIN: {
+        name: "contain",
+        icon: vue.markRaw(iconsVue.FullScreen)
+      },
+      ORIGINAL: {
+        name: "original",
+        icon: vue.markRaw(iconsVue.ScaleToOriginal)
+      }
+    };
+    const mousewheelEventName = browser.isFirefox() ? "DOMMouseScroll" : "mousewheel";
+    const { t } = index.useLocale();
+    const ns = index$1.useNamespace("image-viewer");
+    const { nextZIndex } = index$2.useZIndex();
     const wrapper = vue.ref();
     const imgRefs = vue.ref([]);
     const scopeEventListener = vue.effectScope();
     const loading = vue.ref(true);
-    const index = vue.ref(props.initialIndex);
+    const index$4 = vue.ref(props.initialIndex);
     const mode = vue.ref(Mode.CONTAIN);
     const transform = vue.ref({
       scale: 1,
@@ -65,13 +60,13 @@ const _sfc_main = vue.defineComponent({
       return urlList.length <= 1;
     });
     const isFirst = vue.computed(() => {
-      return index.value === 0;
+      return index$4.value === 0;
     });
     const isLast = vue.computed(() => {
-      return index.value === props.urlList.length - 1;
+      return index$4.value === props.urlList.length - 1;
     });
     const currentImg = vue.computed(() => {
-      return props.urlList[index.value];
+      return props.urlList[index$4.value];
     });
     const imgStyle = vue.computed(() => {
       const { scale, deg, offsetX, offsetY, enableTransition } = transform.value;
@@ -206,13 +201,13 @@ const _sfc_main = vue.defineComponent({
       if (isFirst.value && !props.infinite)
         return;
       const len = props.urlList.length;
-      index.value = (index.value - 1 + len) % len;
+      index$4.value = (index$4.value - 1 + len) % len;
     }
     function next() {
       if (isLast.value && !props.infinite)
         return;
       const len = props.urlList.length;
-      index.value = (index.value + 1) % len;
+      index$4.value = (index$4.value + 1) % len;
     }
     function handleActions(action, options = {}) {
       if (loading.value)
@@ -251,7 +246,7 @@ const _sfc_main = vue.defineComponent({
         }
       });
     });
-    vue.watch(index, (val) => {
+    vue.watch(index$4, (val) => {
       reset();
       emit("switch", val);
     });
@@ -260,184 +255,155 @@ const _sfc_main = vue.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 = 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.Teleport, {
-    to: "body",
-    disabled: !_ctx.teleported
-  }, [
-    vue.createVNode(vue.Transition, {
-      name: "viewer-fade",
-      appear: ""
-    }, {
-      default: vue.withCtx(() => [
-        vue.createElementVNode("div", {
-          ref: "wrapper",
-          tabindex: -1,
-          class: vue.normalizeClass(_ctx.ns.e("wrapper")),
-          style: vue.normalizeStyle({ zIndex: _ctx.computedZIndex })
-        }, [
-          vue.createElementVNode("div", {
-            class: vue.normalizeClass(_ctx.ns.e("mask")),
-            onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => _ctx.hideOnClickModal && _ctx.hide(), ["self"]))
-          }, null, 2),
-          vue.createCommentVNode(" CLOSE "),
-          vue.createElementVNode("span", {
-            class: vue.normalizeClass([_ctx.ns.e("btn"), _ctx.ns.e("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
-            })
-          ], 2),
-          vue.createCommentVNode(" ARROW "),
-          !_ctx.isSingle ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-            vue.createElementVNode("span", {
-              class: vue.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))
-            }, [
-              vue.createVNode(_component_el_icon, null, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(_component_arrow_left)
-                ]),
-                _: 1
-              })
-            ], 2),
-            vue.createElementVNode("span", {
-              class: vue.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))
-            }, [
-              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", {
-            class: vue.normalizeClass([_ctx.ns.e("btn"), _ctx.ns.e("actions")])
-          }, [
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.Teleport, {
+        to: "body",
+        disabled: !_ctx.teleported
+      }, [
+        vue.createVNode(vue.Transition, {
+          name: "viewer-fade",
+          appear: ""
+        }, {
+          default: vue.withCtx(() => [
             vue.createElementVNode("div", {
-              class: vue.normalizeClass(_ctx.ns.e("actions__inner"))
+              ref_key: "wrapper",
+              ref: wrapper,
+              tabindex: -1,
+              class: vue.normalizeClass(vue.unref(ns).e("wrapper")),
+              style: vue.normalizeStyle({ zIndex: vue.unref(computedZIndex) })
             }, [
-              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
-              }),
-              vue.createElementVNode("i", {
-                class: vue.normalizeClass(_ctx.ns.e("actions__divider"))
-              }, null, 2),
-              vue.createVNode(_component_el_icon, { onClick: _ctx.toggleMode }, {
-                default: vue.withCtx(() => [
-                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.mode.icon)))
-                ]),
-                _: 1
-              }, 8, ["onClick"]),
-              vue.createElementVNode("i", {
-                class: vue.normalizeClass(_ctx.ns.e("actions__divider"))
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(vue.unref(ns).e("mask")),
+                onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => _ctx.hideOnClickModal && hide(), ["self"]))
               }, null, 2),
-              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
-              })
-            ], 2)
-          ], 2),
-          vue.createCommentVNode(" CANVAS "),
-          vue.createElementVNode("div", {
-            class: vue.normalizeClass(_ctx.ns.e("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: (el) => _ctx.imgRefs[i] = el,
-                key: url,
-                src: url,
-                style: vue.normalizeStyle(_ctx.imgStyle),
-                class: vue.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)), [
-                [vue.vShow, i === _ctx.index]
-              ]);
-            }), 128))
-          ], 2),
-          vue.renderSlot(_ctx.$slots, "default")
-        ], 6)
-      ]),
-      _: 3
-    })
-  ], 8, ["disabled"]);
-}
-var ImageViewer = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
+              vue.createCommentVNode(" CLOSE "),
+              vue.createElementVNode("span", {
+                class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("close")]),
+                onClick: hide
+              }, [
+                vue.createVNode(vue.unref(index$3.ElIcon), null, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(iconsVue.Close))
+                  ]),
+                  _: 1
+                })
+              ], 2),
+              vue.createCommentVNode(" ARROW "),
+              !vue.unref(isSingle) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass([
+                    vue.unref(ns).e("btn"),
+                    vue.unref(ns).e("prev"),
+                    vue.unref(ns).is("disabled", !_ctx.infinite && vue.unref(isFirst))
+                  ]),
+                  onClick: prev
+                }, [
+                  vue.createVNode(vue.unref(index$3.ElIcon), null, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.ArrowLeft))
+                    ]),
+                    _: 1
+                  })
+                ], 2),
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass([
+                    vue.unref(ns).e("btn"),
+                    vue.unref(ns).e("next"),
+                    vue.unref(ns).is("disabled", !_ctx.infinite && vue.unref(isLast))
+                  ]),
+                  onClick: next
+                }, [
+                  vue.createVNode(vue.unref(index$3.ElIcon), null, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.ArrowRight))
+                    ]),
+                    _: 1
+                  })
+                ], 2)
+              ], 64)) : vue.createCommentVNode("v-if", true),
+              vue.createCommentVNode(" ACTIONS "),
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("actions")])
+              }, [
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass(vue.unref(ns).e("actions__inner"))
+                }, [
+                  vue.createVNode(vue.unref(index$3.ElIcon), {
+                    onClick: _cache[1] || (_cache[1] = ($event) => handleActions("zoomOut"))
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.ZoomOut))
+                    ]),
+                    _: 1
+                  }),
+                  vue.createVNode(vue.unref(index$3.ElIcon), {
+                    onClick: _cache[2] || (_cache[2] = ($event) => handleActions("zoomIn"))
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.ZoomIn))
+                    ]),
+                    _: 1
+                  }),
+                  vue.createElementVNode("i", {
+                    class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
+                  }, null, 2),
+                  vue.createVNode(vue.unref(index$3.ElIcon), { onClick: toggleMode }, {
+                    default: vue.withCtx(() => [
+                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(mode.value.icon)))
+                    ]),
+                    _: 1
+                  }),
+                  vue.createElementVNode("i", {
+                    class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
+                  }, null, 2),
+                  vue.createVNode(vue.unref(index$3.ElIcon), {
+                    onClick: _cache[3] || (_cache[3] = ($event) => handleActions("anticlockwise"))
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.RefreshLeft))
+                    ]),
+                    _: 1
+                  }),
+                  vue.createVNode(vue.unref(index$3.ElIcon), {
+                    onClick: _cache[4] || (_cache[4] = ($event) => handleActions("clockwise"))
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.RefreshRight))
+                    ]),
+                    _: 1
+                  })
+                ], 2)
+              ], 2),
+              vue.createCommentVNode(" CANVAS "),
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(vue.unref(ns).e("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: (el) => imgRefs.value[i] = el,
+                    key: url,
+                    src: url,
+                    style: vue.normalizeStyle(vue.unref(imgStyle)),
+                    class: vue.normalizeClass(vue.unref(ns).e("img")),
+                    onLoad: handleImgLoad,
+                    onError: handleImgError,
+                    onMousedown: handleMouseDown
+                  }, null, 46, _hoisted_1)), [
+                    [vue.vShow, i === index$4.value]
+                  ]);
+                }), 128))
+              ], 2),
+              vue.renderSlot(_ctx.$slots, "default")
+            ], 6)
+          ]),
+          _: 3
+        })
+      ], 8, ["disabled"]);
+    };
+  }
+});
+var ImageViewer = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/image-viewer/src/image-viewer.vue"]]);
 
 exports["default"] = ImageViewer;
 //# sourceMappingURL=image-viewer2.js.map