@element-plus/nightly 0.0.20260104 → 0.0.20260105

package/es/components/drawer/src/drawer2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"drawer2.mjs","sources":["../../../../../../packages/components/drawer/src/drawer.vue"],"sourcesContent":["<template>\n  <el-teleport\n    :to=\"appendTo\"\n    :disabled=\"appendTo !== 'body' ? false : !appendToBody\"\n  >\n    <transition\n      :name=\"ns.b('fade')\"\n      @after-enter=\"afterEnter\"\n      @after-leave=\"afterLeave\"\n      @before-leave=\"beforeLeave\"\n    >\n      <el-overlay\n        v-show=\"visible\"\n        :mask=\"modal\"\n        :overlay-class=\"[\n          ns.is('drawer'),\n          modalClass ?? '',\n          `${ns.namespace.value}-modal-drawer`,\n          ns.is('penetrable', penetrable),\n        ]\"\n        :z-index=\"zIndex\"\n        @click=\"onModalClick\"\n      >\n        <el-focus-trap\n          loop\n          :trapped=\"visible\"\n          :focus-trap-el=\"drawerRef\"\n          :focus-start-el=\"focusStartRef\"\n          @focus-after-trapped=\"onOpenAutoFocus\"\n          @focus-after-released=\"onCloseAutoFocus\"\n          @focusout-prevented=\"onFocusoutPrevented\"\n          @release-requested=\"onCloseRequested\"\n        >\n          <div\n            ref=\"drawerRef\"\n            aria-modal=\"true\"\n            :aria-label=\"title || undefined\"\n            :aria-labelledby=\"!title ? titleId : undefined\"\n            :aria-describedby=\"bodyId\"\n            v-bind=\"$attrs\"\n            :class=\"[\n              ns.b(),\n              direction,\n              visible && 'open',\n              ns.is('dragging', isResizing),\n            ]\"\n            :style=\"{ [isHorizontal ? 'width' : 'height']: size }\"\n            role=\"dialog\"\n            @click.stop\n          >\n            <span ref=\"focusStartRef\" :class=\"ns.e('sr-focus')\" tabindex=\"-1\" />\n            <header v-if=\"withHeader\" :class=\"[ns.e('header'), headerClass]\">\n              <template v-if=\"!$slots.title\">\n                <slot\n                  name=\"header\"\n                  :close=\"handleClose\"\n                  :title-id=\"titleId\"\n                  :title-class=\"ns.e('title')\"\n                >\n                  <span\n                    :id=\"titleId\"\n                    role=\"heading\"\n                    :aria-level=\"headerAriaLevel\"\n                    :class=\"ns.e('title')\"\n                  >\n                    {{ title }}\n                  </span>\n                </slot>\n              </template>\n              <template v-else>\n                <slot name=\"title\">\n                  <!-- DEPRECATED SLOT -->\n                </slot>\n              </template>\n              <button\n                v-if=\"showClose\"\n                :aria-label=\"t('el.drawer.close')\"\n                :class=\"ns.e('close-btn')\"\n                type=\"button\"\n                @click=\"handleClose\"\n              >\n                <el-icon :class=\"ns.e('close')\">\n                  <close />\n                </el-icon>\n              </button>\n            </header>\n            <template v-if=\"rendered\">\n              <div :id=\"bodyId\" :class=\"[ns.e('body'), bodyClass]\">\n                <slot />\n              </div>\n            </template>\n            <div v-if=\"$slots.footer\" :class=\"[ns.e('footer'), footerClass]\">\n              <slot name=\"footer\" />\n            </div>\n            <div\n              v-if=\"resizable\"\n              ref=\"draggerRef\"\n              :style=\"{ zIndex }\"\n              :class=\"ns.e('dragger')\"\n            />\n          </div>\n        </el-focus-trap>\n      </el-overlay>\n    </transition>\n  </el-teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref, useSlots } from 'vue'\nimport { Close } from '@element-plus/icons-vue'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElTeleport from '@element-plus/components/teleport'\nimport { useDialog } from '@element-plus/components/dialog'\nimport ElIcon from '@element-plus/components/icon'\nimport { useDeprecated, useLocale, useNamespace } from '@element-plus/hooks'\nimport { drawerEmits, drawerProps } from './drawer'\nimport { useResizable } from './composables/useResizable'\n\ndefineOptions({\n  name: 'ElDrawer',\n  inheritAttrs: false,\n})\n\nconst props = defineProps(drawerProps)\nconst emit = defineEmits(drawerEmits)\nconst slots = useSlots()\n\nuseDeprecated(\n  {\n    scope: 'el-drawer',\n    from: 'the title slot',\n    replacement: 'the header slot',\n    version: '3.0.0',\n    ref: 'https://element-plus.org/en-US/component/drawer.html#slots',\n  },\n  computed(() => !!slots.title)\n)\n\nconst drawerRef = ref<HTMLElement>()\nconst focusStartRef = ref<HTMLElement>()\nconst draggerRef = ref<HTMLElement>()\nconst ns = useNamespace('drawer')\nconst { t } = useLocale()\n\nconst {\n  afterEnter,\n  afterLeave,\n  beforeLeave,\n  visible,\n  rendered,\n  titleId,\n  bodyId,\n  zIndex,\n  onModalClick,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onFocusoutPrevented,\n  onCloseRequested,\n  handleClose,\n} = useDialog(props, drawerRef)\n\nconst { isHorizontal, size, isResizing } = useResizable(props, draggerRef, emit)\n\nconst penetrable = computed(() => props.modalPenetrable && !props.modal)\n\ndefineExpose({\n  handleClose,\n  afterEnter,\n  afterLeave,\n})\n</script>\n"],"names":["_createBlock","_unref","appendTo","appendToBody","_createVNode","_Transition","_withDirectives","modal","modalClass","_createElementVNode","_mergeProps","title","$attrs","direction","_withModifiers","_normalizeClass","withHeader","_openBlock","_createElementBlock","headerClass","$slots","_renderSlot","headerAriaLevel","_toDisplayString","_createCommentVNode","showClose","bodyClass","footerClass","resizable","_normalizeStyle"],"mappings":"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"}
+{"version":3,"file":"drawer2.mjs","sources":["../../../../../../packages/components/drawer/src/drawer.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport { dialogEmits, dialogProps } from '@element-plus/components/dialog'\n\nimport type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'\n\nexport const drawerProps = buildProps({\n  ...dialogProps,\n  direction: {\n    type: String,\n    default: 'rtl',\n    values: ['ltr', 'rtl', 'ttb', 'btt'],\n  },\n  resizable: Boolean,\n  size: {\n    type: [String, Number],\n    default: '30%',\n  },\n  withHeader: {\n    type: Boolean,\n    default: true,\n  },\n  modalFade: {\n    type: Boolean,\n    default: true,\n  },\n  headerAriaLevel: {\n    type: String,\n    default: '2',\n  },\n} as const)\n\nexport type DrawerProps = ExtractPropTypes<typeof drawerProps>\nexport type DrawerPropsPublic = ExtractPublicPropTypes<typeof drawerProps>\n\nexport const drawerEmits = {\n  ...dialogEmits,\n  'resize-start': (evt: MouseEvent, size: number) =>\n    evt instanceof MouseEvent && typeof size === 'number',\n  resize: (evt: MouseEvent, size: number) =>\n    evt instanceof MouseEvent && typeof size === 'number',\n  'resize-end': (evt: MouseEvent, size: number) =>\n    evt instanceof MouseEvent && typeof size === 'number',\n}\n\nexport type DrawerEmits = typeof drawerEmits\n"],"names":[],"mappings":";;;AAKO,MAAM,cAAc,UAAW,CAAA;AAAA,EACpC,GAAG,WAAA;AAAA,EACH,SAAW,EAAA;AAAA,IACT,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,KAAA;AAAA,IACT,MAAQ,EAAA,CAAC,KAAO,EAAA,KAAA,EAAO,OAAO,KAAK,CAAA;AAAA,GACrC;AAAA,EACA,SAAW,EAAA,OAAA;AAAA,EACX,IAAM,EAAA;AAAA,IACJ,IAAA,EAAM,CAAC,MAAA,EAAQ,MAAM,CAAA;AAAA,IACrB,OAAS,EAAA,KAAA;AAAA,GACX;AAAA,EACA,UAAY,EAAA;AAAA,IACV,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA,IAAA;AAAA,GACX;AAAA,EACA,SAAW,EAAA;AAAA,IACT,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA,IAAA;AAAA,GACX;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,GAAA;AAAA,GACX;AACF,CAAU,EAAA;AAKH,MAAM,WAAc,GAAA;AAAA,EACzB,GAAG,WAAA;AAAA,EACH,gBAAgB,CAAC,GAAA,EAAiB,SAChC,GAAe,YAAA,UAAA,IAAc,OAAO,IAAS,KAAA,QAAA;AAAA,EAC/C,QAAQ,CAAC,GAAA,EAAiB,SACxB,GAAe,YAAA,UAAA,IAAc,OAAO,IAAS,KAAA,QAAA;AAAA,EAC/C,cAAc,CAAC,GAAA,EAAiB,SAC9B,GAAe,YAAA,UAAA,IAAc,OAAO,IAAS,KAAA,QAAA;AACjD;;;;"}

package/es/components/image-viewer/index.mjs

@@ -1,5 +1,5 @@
-import ImageViewer from './src/image-viewer.mjs';
-export { imageViewerEmits, imageViewerProps } from './src/image-viewer2.mjs';
+import ImageViewer from './src/image-viewer2.mjs';
+export { imageViewerEmits, imageViewerProps } from './src/image-viewer.mjs';
 import { withInstall } from '../../utils/vue/install.mjs';
 
 const ElImageViewer = withInstall(ImageViewer);

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

@@ -1,563 +1,56 @@
-import { defineComponent, markRaw, ref, effectScope, computed, shallowRef, watch, nextTick, onMounted, openBlock, createBlock, unref, withCtx, createVNode, Transition, createElementVNode, normalizeClass, normalizeStyle, withModifiers, createCommentVNode, createElementBlock, Fragment, renderSlot, createTextVNode, toDisplayString, resolveDynamicComponent } from 'vue';
-import { clamp, useEventListener } from '@vueuse/core';
-import { throttle } from 'lodash-unified';
-import ElFocusTrap from '../../focus-trap/src/focus-trap.mjs';
-import { ElTeleport } from '../../teleport/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-viewer2.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.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 { useLockscreen } from '../../../hooks/use-lockscreen/index.mjs';
-import { getEventCode } from '../../../utils/dom/event.mjs';
-import { EVENT_CODE } from '../../../constants/aria.mjs';
-import { keysOf } from '../../../utils/objects.mjs';
+import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
+import { mutable } from '../../../utils/typescript.mjs';
+import { isNumber } from '../../../utils/types.mjs';
 
-const _hoisted_1 = ["src", "crossorigin"];
-const _sfc_main = defineComponent({
-  ...{
-    name: "ElImageViewer"
+const imageViewerProps = buildProps({
+  urlList: {
+    type: definePropType(Array),
+    default: () => mutable([])
   },
-  __name: "image-viewer",
-  props: imageViewerProps,
-  emits: imageViewerEmits,
-  setup(__props, { expose: __expose, emit: __emit }) {
-    var _a;
-    const modes = {
-      CONTAIN: {
-        name: "contain",
-        icon: markRaw(FullScreen)
-      },
-      ORIGINAL: {
-        name: "original",
-        icon: markRaw(ScaleToOriginal)
-      }
-    };
-    const props = __props;
-    const emit = __emit;
-    let stopWheelListener;
-    const { t } = useLocale();
-    const ns = useNamespace("image-viewer");
-    const { nextZIndex } = useZIndex();
-    const wrapper = ref();
-    const imgRef = ref();
-    const scopeEventListener = effectScope();
-    const scaleClamped = computed(() => {
-      const { scale, minScale, maxScale } = props;
-      return clamp(scale, minScale, maxScale);
-    });
-    const loading = ref(true);
-    const loadError = ref(false);
-    const visible = ref(false);
-    const activeIndex = ref(props.initialIndex);
-    const mode = shallowRef(modes.CONTAIN);
-    const transform = ref({
-      scale: scaleClamped.value,
-      deg: 0,
-      offsetX: 0,
-      offsetY: 0,
-      enableTransition: false
-    });
-    const zIndex = ref((_a = props.zIndex) != null ? _a : nextZIndex());
-    useLockscreen(visible, { ns });
-    const isSingle = computed(() => {
-      const { urlList } = props;
-      return urlList.length <= 1;
-    });
-    const isFirst = computed(() => activeIndex.value === 0);
-    const isLast = computed(() => activeIndex.value === props.urlList.length - 1);
-    const currentImg = computed(() => props.urlList[activeIndex.value]);
-    const arrowPrevKls = computed(() => [
-      ns.e("btn"),
-      ns.e("prev"),
-      ns.is("disabled", !props.infinite && isFirst.value)
-    ]);
-    const arrowNextKls = computed(() => [
-      ns.e("btn"),
-      ns.e("next"),
-      ns.is("disabled", !props.infinite && isLast.value)
-    ]);
-    const imgStyle = computed(() => {
-      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value;
-      let translateX = offsetX / scale;
-      let translateY = offsetY / scale;
-      const radian = deg * Math.PI / 180;
-      const cosRadian = Math.cos(radian);
-      const sinRadian = Math.sin(radian);
-      translateX = translateX * cosRadian + translateY * sinRadian;
-      translateY = translateY * cosRadian - offsetX / scale * sinRadian;
-      const style = {
-        transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,
-        transition: enableTransition ? "transform .3s" : ""
-      };
-      if (mode.value.name === modes.CONTAIN.name) {
-        style.maxWidth = style.maxHeight = "100%";
-      }
-      return style;
-    });
-    const progress = computed(
-      () => `${activeIndex.value + 1} / ${props.urlList.length}`
-    );
-    function hide() {
-      unregisterEventListener();
-      stopWheelListener == null ? void 0 : stopWheelListener();
-      visible.value = false;
-      emit("close");
-    }
-    function registerEventListener() {
-      const keydownHandler = throttle((e) => {
-        const code = getEventCode(e);
-        switch (code) {
-          case EVENT_CODE.esc:
-            props.closeOnPressEscape && hide();
-            break;
-          case EVENT_CODE.space:
-            toggleMode();
-            break;
-          case EVENT_CODE.left:
-            prev();
-            break;
-          case EVENT_CODE.up:
-            handleActions("zoomIn");
-            break;
-          case EVENT_CODE.right:
-            next();
-            break;
-          case EVENT_CODE.down:
-            handleActions("zoomOut");
-            break;
-        }
-      });
-      const mousewheelHandler = throttle((e) => {
-        const delta = e.deltaY || e.deltaX;
-        handleActions(delta < 0 ? "zoomIn" : "zoomOut", {
-          zoomRate: props.zoomRate,
-          enableTransition: false
-        });
-      });
-      scopeEventListener.run(() => {
-        useEventListener(document, "keydown", keydownHandler);
-        useEventListener(wrapper, "wheel", mousewheelHandler);
-      });
-    }
-    function unregisterEventListener() {
-      scopeEventListener.stop();
-    }
-    function handleImgLoad() {
-      loading.value = false;
-    }
-    function handleImgError(e) {
-      loadError.value = true;
-      loading.value = false;
-      emit("error", e);
-      e.target.alt = t("el.image.error");
-    }
-    function handleMouseDown(e) {
-      if (loading.value || e.button !== 0 || !wrapper.value)
-        return;
-      transform.value.enableTransition = false;
-      const { offsetX, offsetY } = transform.value;
-      const startX = e.pageX;
-      const startY = e.pageY;
-      const dragHandler = throttle((ev) => {
-        transform.value = {
-          ...transform.value,
-          offsetX: offsetX + ev.pageX - startX,
-          offsetY: offsetY + ev.pageY - startY
-        };
-      });
-      const removeMousemove = useEventListener(document, "mousemove", dragHandler);
-      const removeMouseup = useEventListener(document, "mouseup", () => {
-        removeMousemove();
-        removeMouseup();
-      });
-      e.preventDefault();
-    }
-    function handleTouchStart(e) {
-      if (loading.value || !wrapper.value || e.touches.length !== 1)
-        return;
-      transform.value.enableTransition = false;
-      const { offsetX, offsetY } = transform.value;
-      const { pageX: startX, pageY: startY } = e.touches[0];
-      const dragHandler = throttle((ev) => {
-        const targetTouch = ev.touches[0];
-        transform.value = {
-          ...transform.value,
-          offsetX: offsetX + targetTouch.pageX - startX,
-          offsetY: offsetY + targetTouch.pageY - startY
-        };
-      });
-      const removeTouchmove = useEventListener(document, "touchmove", dragHandler);
-      const removeTouchend = useEventListener(document, "touchend", () => {
-        removeTouchmove();
-        removeTouchend();
-      });
-      e.preventDefault();
-    }
-    function reset() {
-      transform.value = {
-        scale: scaleClamped.value,
-        deg: 0,
-        offsetX: 0,
-        offsetY: 0,
-        enableTransition: false
-      };
-    }
-    function toggleMode() {
-      if (loading.value || loadError.value)
-        return;
-      const modeNames = keysOf(modes);
-      const modeValues = Object.values(modes);
-      const currentMode = mode.value.name;
-      const index = modeValues.findIndex((i) => i.name === currentMode);
-      const nextIndex = (index + 1) % modeNames.length;
-      mode.value = modes[modeNames[nextIndex]];
-      reset();
-    }
-    function setActiveItem(index) {
-      loadError.value = false;
-      const len = props.urlList.length;
-      activeIndex.value = (index + len) % len;
-    }
-    function prev() {
-      if (isFirst.value && !props.infinite)
-        return;
-      setActiveItem(activeIndex.value - 1);
-    }
-    function next() {
-      if (isLast.value && !props.infinite)
-        return;
-      setActiveItem(activeIndex.value + 1);
-    }
-    function handleActions(action, options = {}) {
-      if (loading.value || loadError.value)
-        return;
-      const { minScale, maxScale } = props;
-      const { zoomRate, rotateDeg, enableTransition } = {
-        zoomRate: props.zoomRate,
-        rotateDeg: 90,
-        enableTransition: true,
-        ...options
-      };
-      switch (action) {
-        case "zoomOut":
-          if (transform.value.scale > minScale) {
-            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)
-            );
-          }
-          break;
-        case "clockwise":
-          transform.value.deg += rotateDeg;
-          emit("rotate", transform.value.deg);
-          break;
-        case "anticlockwise":
-          transform.value.deg -= rotateDeg;
-          emit("rotate", transform.value.deg);
-          break;
-      }
-      transform.value.enableTransition = enableTransition;
-    }
-    function onFocusoutPrevented(event) {
-      var _a2;
-      if (((_a2 = event.detail) == null ? void 0 : _a2.focusReason) === "pointer") {
-        event.preventDefault();
-      }
-    }
-    function onCloseRequested() {
-      if (props.closeOnPressEscape) {
-        hide();
-      }
-    }
-    function wheelHandler(e) {
-      if (!e.ctrlKey)
-        return;
-      if (e.deltaY < 0) {
-        e.preventDefault();
-        return false;
-      } else if (e.deltaY > 0) {
-        e.preventDefault();
-        return false;
-      }
-    }
-    watch(
-      () => scaleClamped.value,
-      (val) => {
-        transform.value.scale = val;
-      }
-    );
-    watch(currentImg, () => {
-      nextTick(() => {
-        const $img = imgRef.value;
-        if (!($img == null ? void 0 : $img.complete)) {
-          loading.value = true;
-        }
-      });
-    });
-    watch(activeIndex, (val) => {
-      reset();
-      emit("switch", val);
-    });
-    onMounted(() => {
-      visible.value = true;
-      registerEventListener();
-      stopWheelListener = useEventListener("wheel", wheelHandler, {
-        passive: false
-      });
-    });
-    __expose({
-      setActiveItem
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ElTeleport), {
-        to: "body",
-        disabled: !_ctx.teleported
-      }, {
-        default: withCtx(() => [
-          createVNode(Transition, {
-            name: "viewer-fade",
-            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: _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(Close))
-                            ]),
-                            _: 1
-                          })
-                        ],
-                        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))
-                        ],
-                        2
-                      ),
-                      renderSlot(_ctx.$slots, "default")
-                    ]),
-                    _: 3
-                  }, 8, ["focus-trap-el"])
-                ],
-                6
-              )
-            ]),
-            _: 3
-          })
-        ]),
-        _: 3
-      }, 8, ["disabled"]);
-    };
+  zIndex: {
+    type: Number
+  },
+  initialIndex: {
+    type: Number,
+    default: 0
+  },
+  infinite: {
+    type: Boolean,
+    default: true
+  },
+  hideOnClickModal: Boolean,
+  teleported: Boolean,
+  closeOnPressEscape: {
+    type: Boolean,
+    default: true
+  },
+  zoomRate: {
+    type: Number,
+    default: 1.2
+  },
+  scale: {
+    type: Number,
+    default: 1
+  },
+  minScale: {
+    type: Number,
+    default: 0.2
+  },
+  maxScale: {
+    type: Number,
+    default: 7
+  },
+  showProgress: Boolean,
+  crossorigin: {
+    type: definePropType(String)
   }
 });
-var ImageViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/image-viewer/src/image-viewer.vue"]]);
+const imageViewerEmits = {
+  close: () => true,
+  error: (evt) => evt instanceof Event,
+  switch: (index) => isNumber(index),
+  rotate: (deg) => isNumber(deg)
+};
 
-export { ImageViewer as default };
+export { imageViewerEmits, imageViewerProps };
 //# sourceMappingURL=image-viewer.mjs.map