@wfrog/vc-ui 1.1.0 → 1.2.0

package/dist/es/chunk/{09Ec85_u.mjs → DdmNdV7I.mjs}

@@ -1,20 +1,20 @@
 import { defineComponent, markRaw, ref, effectScope, computed, shallowRef, watch, nextTick, onMounted, createBlock, openBlock, unref, withCtx, createVNode, Transition, createElementVNode, normalizeStyle, normalizeClass, createCommentVNode, createElementBlock, renderSlot, withModifiers, Fragment, createTextVNode, toDisplayString, resolveDynamicComponent, useAttrs, mergeProps, createSlots, normalizeProps, guardReactiveProps } from 'vue';
 import { clamp, useEventListener, isClient, useThrottleFn, useIntersectionObserver } from '@vueuse/core';
-import { b as ElTeleport, d as ElFocusTrap } from './CLMc8GzD.mjs';
-import { E as ElIcon } from './cPBw23yt.mjs';
+import { b as ElTeleport, d as ElFocusTrap } from './DMYHOxhk.mjs';
+import { E as ElIcon } from './DEPZhJ0Z.mjs';
 import { ScaleToOriginal, FullScreen, Close, ArrowLeft, ArrowRight, ZoomOut, ZoomIn, RefreshLeft, RefreshRight } from '@element-plus/icons-vue';
-import { f as isNumber, c as buildProps, d as definePropType, u as useNamespace, m as fromPairs, i as isArray, n as isElement, h as isString, o as isWindow } from './DRoyW749.mjs';
+import { f as isNumber, c as buildProps, d as definePropType, u as useNamespace, m as fromPairs, i as isArray, n as isElement, h as isString, o as isWindow } from './CcKUdl3e.mjs';
 import { m as mutable } from './B-rxnVJv.mjs';
-import { _ as _export_sfc, w as withInstall } from './DTLPXrjb.mjs';
-import { u as useLocale } from './Dk6Bx0KT.mjs';
-import { u as useZIndex } from './BI0vrXwX.mjs';
-import { u as useLockscreen } from './CLbj8G-F.mjs';
+import { _ as _export_sfc, w as withInstall } from './BTsEMnf_.mjs';
+import { u as useLocale } from './plK2vnjp.mjs';
+import { u as useZIndex } from './BI-fNJhk.mjs';
+import { u as useLockscreen } from './Bnot0Gwc.mjs';
 import { g as getEventCode, E as EVENT_CODE } from './BTpNRPQW.mjs';
 import { k as keysOf } from './DVNTpOBR.mjs';
-import { d as debounce } from './Bp9jXKX0.mjs';
-import { i as isObject } from './NQBKROII.mjs';
-import { u as useAttrs$1 } from './BUEEWLrd.mjs';
-import { g as getScrollContainer } from './Bl2KlMdP.mjs';
+import { d as debounce } from './BambM7zX.mjs';
+import { i as isObject } from './DWcIzeMM.mjs';
+import { u as useAttrs$1 } from './ezK_XQQd.mjs';
+import { g as getScrollContainer } from './oW98L-44.mjs';
 
 /** Error message constants. */
 var FUNC_ERROR_TEXT = 'Expected a function';
@@ -131,16 +131,16 @@ const imageViewerEmits = {
   rotate: (deg) => isNumber(deg)
 };
 
-const __default__$1 = defineComponent({
-  name: "ElImageViewer"
-});
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
+const _hoisted_1$1 = ["src", "crossorigin"];
+const _sfc_main$1 = defineComponent({
+  ...{
+    name: "ElImageViewer"
+  },
+  __name: "image-viewer",
   props: imageViewerProps,
   emits: imageViewerEmits,
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     var _a;
-    const props = __props;
     const modes = {
       CONTAIN: {
         name: "contain",
@@ -151,6 +151,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         icon: markRaw(ScaleToOriginal)
       }
     };
+    const props = __props;
+    const emit = __emit;
     let stopWheelListener;
     const { t } = useLocale();
     const ns = useNamespace("image-viewer");
@@ -211,7 +213,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
       return style;
     });
-    const progress = computed(() => `${activeIndex.value + 1} / ${props.urlList.length}`);
+    const progress = computed(
+      () => `${activeIndex.value + 1} / ${props.urlList.length}`
+    );
     function hide() {
       unregisterEventListener();
       stopWheelListener == null ? void 0 : stopWheelListener();
@@ -356,12 +360,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       switch (action) {
         case "zoomOut":
           if (transform.value.scale > minScale) {
-            transform.value.scale = Number.parseFloat((transform.value.scale / zoomRate).toFixed(3));
+            transform.value.scale = Number.parseFloat(
+              (transform.value.scale / zoomRate).toFixed(3)
+            );
           }
           break;
         case "zoomIn":
           if (transform.value.scale < maxScale) {
-            transform.value.scale = Number.parseFloat((transform.value.scale * zoomRate).toFixed(3));
+            transform.value.scale = Number.parseFloat(
+              (transform.value.scale * zoomRate).toFixed(3)
+            );
           }
           break;
         case "clockwise":
@@ -397,9 +405,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         return false;
       }
     }
-    watch(() => scaleClamped.value, (val) => {
-      transform.value.scale = val;
-    });
+    watch(
+      () => scaleClamped.value,
+      (val) => {
+        transform.value.scale = val;
+      }
+    );
     watch(currentImg, () => {
       nextTick(() => {
         const $img = imgRef.value;
@@ -419,7 +430,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         passive: false
       });
     });
-    expose({
+    __expose({
       setActiveItem
     });
     return (_ctx, _cache) => {
@@ -433,163 +444,226 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             appear: ""
           }, {
             default: withCtx(() => [
-              createElementVNode("div", {
-                ref_key: "wrapper",
-                ref: wrapper,
-                tabindex: -1,
-                class: normalizeClass(unref(ns).e("wrapper")),
-                style: normalizeStyle({ zIndex: zIndex.value })
-              }, [
-                createVNode(unref(ElFocusTrap), {
-                  loop: "",
-                  trapped: "",
-                  "focus-trap-el": wrapper.value,
-                  "focus-start-el": "container",
-                  onFocusoutPrevented,
-                  onReleaseRequested: onCloseRequested
-                }, {
-                  default: withCtx(() => [
-                    createElementVNode("div", {
-                      class: normalizeClass(unref(ns).e("mask")),
-                      onClick: withModifiers(($event) => _ctx.hideOnClickModal && hide(), ["self"])
-                    }, null, 10, ["onClick"]),
-                    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(arrowPrevKls)),
-                        onClick: prev
-                      }, [
-                        createVNode(unref(ElIcon), null, {
-                          default: withCtx(() => [
-                            createVNode(unref(ArrowLeft))
-                          ]),
-                          _: 1
-                        })
-                      ], 2),
-                      createElementVNode("span", {
-                        class: normalizeClass(unref(arrowNextKls)),
-                        onClick: next
-                      }, [
-                        createVNode(unref(ElIcon), null, {
-                          default: withCtx(() => [
-                            createVNode(unref(ArrowRight))
-                          ]),
-                          _: 1
-                        })
-                      ], 2)
-                    ], 64)) : createCommentVNode("v-if", true),
-                    _ctx.$slots.progress || _ctx.showProgress ? (openBlock(), createElementBlock("div", {
-                      key: 1,
-                      class: normalizeClass([unref(ns).e("btn"), unref(ns).e("progress")])
-                    }, [
-                      renderSlot(_ctx.$slots, "progress", {
-                        activeIndex: activeIndex.value,
-                        total: _ctx.urlList.length
-                      }, () => [
-                        createTextVNode(toDisplayString(unref(progress)), 1)
-                      ])
-                    ], 2)) : 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"))
-                      }, [
-                        renderSlot(_ctx.$slots, "toolbar", {
-                          actions: handleActions,
-                          prev,
-                          next,
-                          reset: toggleMode,
-                          activeIndex: activeIndex.value,
-                          setActiveItem
-                        }, () => [
-                          createVNode(unref(ElIcon), {
-                            onClick: ($event) => handleActions("zoomOut")
-                          }, {
-                            default: withCtx(() => [
-                              createVNode(unref(ZoomOut))
-                            ]),
-                            _: 1
-                          }, 8, ["onClick"]),
-                          createVNode(unref(ElIcon), {
-                            onClick: ($event) => handleActions("zoomIn")
-                          }, {
+              createElementVNode(
+                "div",
+                {
+                  ref_key: "wrapper",
+                  ref: wrapper,
+                  tabindex: -1,
+                  class: normalizeClass(unref(ns).e("wrapper")),
+                  style: normalizeStyle({ zIndex: zIndex.value })
+                },
+                [
+                  createVNode(unref(ElFocusTrap), {
+                    loop: "",
+                    trapped: "",
+                    "focus-trap-el": wrapper.value,
+                    "focus-start-el": "container",
+                    onFocusoutPrevented,
+                    onReleaseRequested: onCloseRequested
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode(
+                        "div",
+                        {
+                          class: normalizeClass(unref(ns).e("mask")),
+                          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.hideOnClickModal && hide(), ["self"]))
+                        },
+                        null,
+                        2
+                      ),
+                      createCommentVNode(" CLOSE "),
+                      createElementVNode(
+                        "span",
+                        {
+                          class: normalizeClass([unref(ns).e("btn"), unref(ns).e("close")]),
+                          onClick: hide
+                        },
+                        [
+                          createVNode(unref(ElIcon), null, {
                             default: withCtx(() => [
-                              createVNode(unref(ZoomIn))
+                              createVNode(unref(Close))
                             ]),
                             _: 1
-                          }, 8, ["onClick"]),
-                          createElementVNode("i", {
-                            class: normalizeClass(unref(ns).e("actions__divider"))
-                          }, null, 2),
-                          createVNode(unref(ElIcon), { onClick: toggleMode }, {
-                            default: withCtx(() => [
-                              (openBlock(), createBlock(resolveDynamicComponent(unref(mode).icon)))
-                            ]),
-                            _: 1
-                          }),
-                          createElementVNode("i", {
-                            class: normalizeClass(unref(ns).e("actions__divider"))
-                          }, null, 2),
-                          createVNode(unref(ElIcon), {
-                            onClick: ($event) => handleActions("anticlockwise")
-                          }, {
-                            default: withCtx(() => [
-                              createVNode(unref(RefreshLeft))
-                            ]),
-                            _: 1
-                          }, 8, ["onClick"]),
-                          createVNode(unref(ElIcon), {
-                            onClick: ($event) => handleActions("clockwise")
-                          }, {
-                            default: withCtx(() => [
-                              createVNode(unref(RefreshRight))
-                            ]),
-                            _: 1
-                          }, 8, ["onClick"])
-                        ])
-                      ], 2)
-                    ], 2),
-                    createCommentVNode(" CANVAS "),
-                    createElementVNode("div", {
-                      class: normalizeClass(unref(ns).e("canvas"))
-                    }, [
-                      loadError.value && _ctx.$slots["viewer-error"] ? renderSlot(_ctx.$slots, "viewer-error", {
-                        key: 0,
-                        activeIndex: activeIndex.value,
-                        src: unref(currentImg)
-                      }) : (openBlock(), createElementBlock("img", {
-                        ref_key: "imgRef",
-                        ref: imgRef,
-                        key: unref(currentImg),
-                        src: unref(currentImg),
-                        style: normalizeStyle(unref(imgStyle)),
-                        class: normalizeClass(unref(ns).e("img")),
-                        crossorigin: _ctx.crossorigin,
-                        onLoad: handleImgLoad,
-                        onError: handleImgError,
-                        onMousedown: handleMouseDown,
-                        onTouchstart: handleTouchStart
-                      }, null, 46, ["src", "crossorigin"]))
-                    ], 2),
-                    renderSlot(_ctx.$slots, "default")
-                  ]),
-                  _: 3
-                }, 8, ["focus-trap-el"])
-              ], 6)
+                          })
+                        ],
+                        2
+                      ),
+                      createCommentVNode(" ARROW "),
+                      !isSingle.value ? (openBlock(), createElementBlock(
+                        Fragment,
+                        { key: 0 },
+                        [
+                          createElementVNode(
+                            "span",
+                            {
+                              class: normalizeClass(arrowPrevKls.value),
+                              onClick: prev
+                            },
+                            [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(ArrowLeft))
+                                ]),
+                                _: 1
+                              })
+                            ],
+                            2
+                          ),
+                          createElementVNode(
+                            "span",
+                            {
+                              class: normalizeClass(arrowNextKls.value),
+                              onClick: next
+                            },
+                            [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(ArrowRight))
+                                ]),
+                                _: 1
+                              })
+                            ],
+                            2
+                          )
+                        ],
+                        64
+                      )) : createCommentVNode("v-if", true),
+                      _ctx.$slots.progress || _ctx.showProgress ? (openBlock(), createElementBlock(
+                        "div",
+                        {
+                          key: 1,
+                          class: normalizeClass([unref(ns).e("btn"), unref(ns).e("progress")])
+                        },
+                        [
+                          renderSlot(_ctx.$slots, "progress", {
+                            activeIndex: activeIndex.value,
+                            total: _ctx.urlList.length
+                          }, () => [
+                            createTextVNode(
+                              toDisplayString(progress.value),
+                              1
+                            )
+                          ])
+                        ],
+                        2
+                      )) : 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"))
+                            },
+                            [
+                              renderSlot(_ctx.$slots, "toolbar", {
+                                actions: handleActions,
+                                prev,
+                                next,
+                                reset: toggleMode,
+                                activeIndex: activeIndex.value,
+                                setActiveItem
+                              }, () => [
+                                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"))
+                        },
+                        [
+                          loadError.value && _ctx.$slots["viewer-error"] ? renderSlot(_ctx.$slots, "viewer-error", {
+                            key: 0,
+                            activeIndex: activeIndex.value,
+                            src: currentImg.value
+                          }) : (openBlock(), createElementBlock("img", {
+                            ref_key: "imgRef",
+                            ref: imgRef,
+                            key: currentImg.value,
+                            src: currentImg.value,
+                            style: normalizeStyle(imgStyle.value),
+                            class: normalizeClass(unref(ns).e("img")),
+                            crossorigin: _ctx.crossorigin,
+                            onLoad: handleImgLoad,
+                            onError: handleImgError,
+                            onMousedown: handleMouseDown,
+                            onTouchstart: handleTouchStart
+                          }, null, 46, _hoisted_1$1))
+                        ],
+                        2
+                      ),
+                      renderSlot(_ctx.$slots, "default")
+                    ]),
+                    _: 3
+                  }, 8, ["focus-trap-el"])
+                ],
+                6
+              )
             ]),
             _: 3
           })
@@ -599,7 +673,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ImageViewer = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "image-viewer.vue"]]);
+var ImageViewer = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/image-viewer/src/image-viewer.vue"]]);
 
 const ElImageViewer = withInstall(ImageViewer);
 
@@ -671,21 +745,28 @@ const imageEmits = {
   show: () => true
 };
 
-const __default__ = defineComponent({
-  name: "ElImage",
-  inheritAttrs: false
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
+const _hoisted_1 = ["src", "loading", "crossorigin"];
+const _hoisted_2 = { key: 0 };
+const _sfc_main = defineComponent({
+  ...{
+    name: "ElImage",
+    inheritAttrs: false
+  },
+  __name: "image",
   props: imageProps,
   emits: imageEmits,
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const { t } = useLocale();
     const ns = useNamespace("image");
     const rawAttrs = useAttrs();
     const containerAttrs = computed(() => {
-      return fromPairs(Object.entries(rawAttrs).filter(([key]) => /^(data-|on[A-Z])/i.test(key) || ["id", "style"].includes(key)));
+      return fromPairs(
+        Object.entries(rawAttrs).filter(
+          ([key]) => /^(data-|on[A-Z])/i.test(key) || ["id", "style"].includes(key)
+        )
+      );
     });
     const imgAttrs = useAttrs$1({
       excludeListeners: true,
@@ -768,9 +849,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         const scrollContainer2 = getScrollContainer(container.value);
         _scrollContainer.value = isWindow(scrollContainer2) ? void 0 : scrollContainer2;
       }
-      const { stop } = useIntersectionObserver(container, ([entry]) => {
-        lazyLoadHandler(entry.isIntersecting);
-      }, { root: _scrollContainer });
+      const { stop } = useIntersectionObserver(
+        container,
+        ([entry]) => {
+          lazyLoadHandler(entry.isIntersecting);
+        },
+        { root: _scrollContainer }
+      );
       stopScrollListener = stop;
     }
     function removeLazyLoadListener() {
@@ -793,16 +878,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function switchViewer(val) {
       emit("switch", val);
     }
-    watch(() => props.src, () => {
-      if (isManual.value) {
-        isLoading.value = true;
-        hasLoadError.value = false;
-        removeLazyLoadListener();
-        addLazyLoadListener();
-      } else {
-        loadImage();
+    watch(
+      () => props.src,
+      () => {
+        if (isManual.value) {
+          isLoading.value = true;
+          hasLoadError.value = false;
+          removeLazyLoadListener();
+          addLazyLoadListener();
+        } else {
+          loadImage();
+        }
       }
-    });
+    );
     onMounted(() => {
       if (isManual.value) {
         addLazyLoadListener();
@@ -810,90 +898,122 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         loadImage();
       }
     });
-    expose({
+    __expose({
       showPreview: clickHandler
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", mergeProps({
-        ref_key: "container",
-        ref: container
-      }, unref(containerAttrs), {
-        class: [unref(ns).b(), _ctx.$attrs.class]
-      }), [
-        hasLoadError.value ? renderSlot(_ctx.$slots, "error", { key: 0 }, () => [
-          createElementVNode("div", {
-            class: normalizeClass(unref(ns).e("error"))
-          }, toDisplayString(unref(t)("el.image.error")), 3)
-        ]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          imageSrc.value !== void 0 ? (openBlock(), createElementBlock("img", mergeProps({ key: 0 }, unref(imgAttrs), {
-            src: imageSrc.value,
-            loading: _ctx.loading,
-            style: unref(imageStyle),
-            class: unref(imageKls),
-            crossorigin: _ctx.crossorigin,
-            onClick: clickHandler,
-            onLoad: handleLoad,
-            onError: handleError
-          }), null, 16, ["src", "loading", "crossorigin"])) : createCommentVNode("v-if", true),
-          isLoading.value ? (openBlock(), createElementBlock("div", {
-            key: 1,
-            class: normalizeClass(unref(ns).e("wrapper"))
-          }, [
-            renderSlot(_ctx.$slots, "placeholder", {}, () => [
-              createElementVNode("div", {
-                class: normalizeClass(unref(ns).e("placeholder"))
-              }, null, 2)
-            ])
-          ], 2)) : createCommentVNode("v-if", true)
-        ], 64)),
-        unref(preview) ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          showViewer.value ? (openBlock(), createBlock(unref(ElImageViewer), {
-            key: 0,
-            "z-index": _ctx.zIndex,
-            "initial-index": unref(imageIndex),
-            infinite: _ctx.infinite,
-            "zoom-rate": _ctx.zoomRate,
-            "min-scale": _ctx.minScale,
-            "max-scale": _ctx.maxScale,
-            "show-progress": _ctx.showProgress,
-            "url-list": _ctx.previewSrcList,
-            scale: _ctx.scale,
-            crossorigin: _ctx.crossorigin,
-            "hide-on-click-modal": _ctx.hideOnClickModal,
-            teleported: _ctx.previewTeleported,
-            "close-on-press-escape": _ctx.closeOnPressEscape,
-            onClose: closeViewer,
-            onSwitch: switchViewer
-          }, createSlots({
-            toolbar: withCtx((toolbar) => [
-              renderSlot(_ctx.$slots, "toolbar", normalizeProps(guardReactiveProps(toolbar)))
-            ]),
-            default: withCtx(() => [
-              _ctx.$slots.viewer ? (openBlock(), createElementBlock("div", { key: 0 }, [
-                renderSlot(_ctx.$slots, "viewer")
-              ])) : createCommentVNode("v-if", true)
-            ]),
-            _: 2
-          }, [
-            _ctx.$slots.progress ? {
-              name: "progress",
-              fn: withCtx((progress) => [
-                renderSlot(_ctx.$slots, "progress", normalizeProps(guardReactiveProps(progress)))
-              ])
-            } : void 0,
-            _ctx.$slots["viewer-error"] ? {
-              name: "viewer-error",
-              fn: withCtx((viewerError) => [
-                renderSlot(_ctx.$slots, "viewer-error", normalizeProps(guardReactiveProps(viewerError)))
-              ])
-            } : void 0
-          ]), 1032, ["z-index", "initial-index", "infinite", "zoom-rate", "min-scale", "max-scale", "show-progress", "url-list", "scale", "crossorigin", "hide-on-click-modal", "teleported", "close-on-press-escape"])) : createCommentVNode("v-if", true)
-        ], 64)) : createCommentVNode("v-if", true)
-      ], 16);
+      return openBlock(), createElementBlock(
+        "div",
+        mergeProps({
+          ref_key: "container",
+          ref: container
+        }, containerAttrs.value, {
+          class: [unref(ns).b(), _ctx.$attrs.class]
+        }),
+        [
+          hasLoadError.value ? renderSlot(_ctx.$slots, "error", { key: 0 }, () => [
+            createElementVNode(
+              "div",
+              {
+                class: normalizeClass(unref(ns).e("error"))
+              },
+              toDisplayString(unref(t)("el.image.error")),
+              3
+            )
+          ]) : (openBlock(), createElementBlock(
+            Fragment,
+            { key: 1 },
+            [
+              imageSrc.value !== void 0 ? (openBlock(), createElementBlock("img", mergeProps({ key: 0 }, unref(imgAttrs), {
+                src: imageSrc.value,
+                loading: _ctx.loading,
+                style: imageStyle.value,
+                class: imageKls.value,
+                crossorigin: _ctx.crossorigin,
+                onClick: clickHandler,
+                onLoad: handleLoad,
+                onError: handleError
+              }), null, 16, _hoisted_1)) : createCommentVNode("v-if", true),
+              isLoading.value ? (openBlock(), createElementBlock(
+                "div",
+                {
+                  key: 1,
+                  class: normalizeClass(unref(ns).e("wrapper"))
+                },
+                [
+                  renderSlot(_ctx.$slots, "placeholder", {}, () => [
+                    createElementVNode(
+                      "div",
+                      {
+                        class: normalizeClass(unref(ns).e("placeholder"))
+                      },
+                      null,
+                      2
+                    )
+                  ])
+                ],
+                2
+              )) : createCommentVNode("v-if", true)
+            ],
+            64
+          )),
+          preview.value ? (openBlock(), createElementBlock(
+            Fragment,
+            { key: 2 },
+            [
+              showViewer.value ? (openBlock(), createBlock(unref(ElImageViewer), {
+                key: 0,
+                "z-index": _ctx.zIndex,
+                "initial-index": imageIndex.value,
+                infinite: _ctx.infinite,
+                "zoom-rate": _ctx.zoomRate,
+                "min-scale": _ctx.minScale,
+                "max-scale": _ctx.maxScale,
+                "show-progress": _ctx.showProgress,
+                "url-list": _ctx.previewSrcList,
+                scale: _ctx.scale,
+                crossorigin: _ctx.crossorigin,
+                "hide-on-click-modal": _ctx.hideOnClickModal,
+                teleported: _ctx.previewTeleported,
+                "close-on-press-escape": _ctx.closeOnPressEscape,
+                onClose: closeViewer,
+                onSwitch: switchViewer
+              }, createSlots({
+                toolbar: withCtx((toolbar) => [
+                  renderSlot(_ctx.$slots, "toolbar", normalizeProps(guardReactiveProps(toolbar)))
+                ]),
+                default: withCtx(() => [
+                  _ctx.$slots.viewer ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                    renderSlot(_ctx.$slots, "viewer")
+                  ])) : createCommentVNode("v-if", true)
+                ]),
+                _: 2
+              }, [
+                _ctx.$slots.progress ? {
+                  name: "progress",
+                  fn: withCtx((progress) => [
+                    renderSlot(_ctx.$slots, "progress", normalizeProps(guardReactiveProps(progress)))
+                  ]),
+                  key: "0"
+                } : void 0,
+                _ctx.$slots["viewer-error"] ? {
+                  name: "viewer-error",
+                  fn: withCtx((viewerError) => [
+                    renderSlot(_ctx.$slots, "viewer-error", normalizeProps(guardReactiveProps(viewerError)))
+                  ]),
+                  key: "1"
+                } : void 0
+              ]), 1032, ["z-index", "initial-index", "infinite", "zoom-rate", "min-scale", "max-scale", "show-progress", "url-list", "scale", "crossorigin", "hide-on-click-modal", "teleported", "close-on-press-escape"])) : createCommentVNode("v-if", true)
+            ],
+            64
+          )) : createCommentVNode("v-if", true)
+        ],
+        16
+      );
     };
   }
 });
-var Image = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "image.vue"]]);
+var Image = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/image/src/image.vue"]]);
 
 const ElImage = withInstall(Image);