@element-plus/nightly 0.0.20241208 → 0.0.20241210

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

@@ -1,417 +1,50 @@
-import { defineComponent, markRaw, ref, effectScope, shallowRef, computed, watch, nextTick, onMounted, openBlock, createBlock, unref, withCtx, createVNode, Transition, createElementVNode, normalizeClass, normalizeStyle, withModifiers, createCommentVNode, createElementBlock, Fragment, resolveDynamicComponent, renderList, withDirectives, vShow, renderSlot } from 'vue';
-import { 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-viewer.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 { 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 __default__ = defineComponent({
-  name: "ElImageViewer"
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: imageViewerProps,
-  emits: imageViewerEmits,
-  setup(__props, { expose, emit }) {
-    var _a;
-    const props = __props;
-    const modes = {
-      CONTAIN: {
-        name: "contain",
-        icon: markRaw(FullScreen)
-      },
-      ORIGINAL: {
-        name: "original",
-        icon: markRaw(ScaleToOriginal)
-      }
-    };
-    const { t } = useLocale();
-    const ns = useNamespace("image-viewer");
-    const { nextZIndex } = useZIndex();
-    const wrapper = ref();
-    const imgRefs = ref([]);
-    const scopeEventListener = effectScope();
-    const loading = ref(true);
-    const activeIndex = ref(props.initialIndex);
-    const mode = shallowRef(modes.CONTAIN);
-    const transform = ref({
-      scale: 1,
-      deg: 0,
-      offsetX: 0,
-      offsetY: 0,
-      enableTransition: false
-    });
-    const zIndex = ref((_a = props.zIndex) != null ? _a : nextZIndex());
-    const isSingle = computed(() => {
-      const { urlList } = props;
-      return urlList.length <= 1;
-    });
-    const isFirst = computed(() => {
-      return activeIndex.value === 0;
-    });
-    const isLast = computed(() => {
-      return activeIndex.value === props.urlList.length - 1;
-    });
-    const currentImg = computed(() => {
-      return 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;
-    });
-    function hide() {
-      unregisterEventListener();
-      emit("close");
-    }
-    function registerEventListener() {
-      const keydownHandler = throttle((e) => {
-        switch (e.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(document, "wheel", mousewheelHandler);
-      });
-    }
-    function unregisterEventListener() {
-      scopeEventListener.stop();
-    }
-    function handleImgLoad() {
-      loading.value = false;
-    }
-    function handleImgError(e) {
-      loading.value = false;
-      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);
-      useEventListener(document, "mouseup", () => {
-        removeMousemove();
-      });
-      e.preventDefault();
-    }
-    function reset() {
-      transform.value = {
-        scale: 1,
-        deg: 0,
-        offsetX: 0,
-        offsetY: 0,
-        enableTransition: false
-      };
-    }
-    function toggleMode() {
-      if (loading.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) {
-      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)
-        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();
-      }
-    }
-    watch(currentImg, () => {
-      nextTick(() => {
-        const $img = imgRefs.value[0];
-        if (!($img == null ? void 0 : $img.complete)) {
-          loading.value = true;
-        }
-      });
-    });
-    watch(activeIndex, (val) => {
-      reset();
-      emit("switch", val);
-    });
-    onMounted(() => {
-      registerEventListener();
-    });
-    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: 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),
-                    createCommentVNode(" ACTIONS "),
-                    createElementVNode("div", {
-                      class: normalizeClass([unref(ns).e("btn"), unref(ns).e("actions")])
-                    }, [
-                      createElementVNode("div", {
-                        class: normalizeClass(unref(ns).e("actions__inner"))
-                      }, [
-                        createVNode(unref(ElIcon), {
-                          onClick: ($event) => handleActions("zoomOut")
-                        }, {
-                          default: withCtx(() => [
-                            createVNode(unref(ZoomOut))
-                          ]),
-                          _: 1
-                        }, 8, ["onClick"]),
-                        createVNode(unref(ElIcon), {
-                          onClick: ($event) => handleActions("zoomIn")
-                        }, {
-                          default: withCtx(() => [
-                            createVNode(unref(ZoomIn))
-                          ]),
-                          _: 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"))
-                    }, [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.urlList, (url, i) => {
-                        return withDirectives((openBlock(), createElementBlock("img", {
-                          ref_for: true,
-                          ref: (el) => imgRefs.value[i] = el,
-                          key: url,
-                          src: url,
-                          style: normalizeStyle(unref(imgStyle)),
-                          class: normalizeClass(unref(ns).e("img")),
-                          crossorigin: _ctx.crossorigin,
-                          onLoad: handleImgLoad,
-                          onError: handleImgError,
-                          onMousedown: handleMouseDown
-                        }, null, 46, ["src", "crossorigin"])), [
-                          [vShow, i === activeIndex.value]
-                        ]);
-                      }), 128))
-                    ], 2),
-                    renderSlot(_ctx.$slots, "default")
-                  ]),
-                  _: 3
-                }, 8, ["focus-trap-el"])
-              ], 6)
-            ]),
-            _: 3
-          })
-        ]),
-        _: 3
-      }, 8, ["disabled"]);
-    };
+const imageViewerProps = buildProps({
+  urlList: {
+    type: definePropType(Array),
+    default: () => mutable([])
+  },
+  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
+  },
+  minScale: {
+    type: Number,
+    default: 0.2
+  },
+  maxScale: {
+    type: Number,
+    default: 7
+  },
+  crossorigin: {
+    type: definePropType(String)
   }
 });
-var ImageViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "image-viewer.vue"]]);
+const imageViewerEmits = {
+  close: () => true,
+  switch: (index) => isNumber(index),
+  rotate: (deg) => isNumber(deg)
+};
 
-export { ImageViewer as default };
+export { imageViewerEmits, imageViewerProps };
 //# sourceMappingURL=image-viewer2.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"image-viewer2.mjs","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n  <el-teleport to=\"body\" :disabled=\"!teleported\">\n    <transition name=\"viewer-fade\" appear>\n      <div\n        ref=\"wrapper\"\n        :tabindex=\"-1\"\n        :class=\"ns.e('wrapper')\"\n        :style=\"{ zIndex }\"\n      >\n        <el-focus-trap\n          loop\n          trapped\n          :focus-trap-el=\"wrapper\"\n          focus-start-el=\"container\"\n          @focusout-prevented=\"onFocusoutPrevented\"\n          @release-requested=\"onCloseRequested\"\n        >\n          <div :class=\"ns.e('mask')\" @click.self=\"hideOnClickModal && hide()\" />\n\n          <!-- CLOSE -->\n          <span :class=\"[ns.e('btn'), ns.e('close')]\" @click=\"hide\">\n            <el-icon>\n              <Close />\n            </el-icon>\n          </span>\n\n          <!-- ARROW -->\n          <template v-if=\"!isSingle\">\n            <span :class=\"arrowPrevKls\" @click=\"prev\">\n              <el-icon>\n                <ArrowLeft />\n              </el-icon>\n            </span>\n            <span :class=\"arrowNextKls\" @click=\"next\">\n              <el-icon>\n                <ArrowRight />\n              </el-icon>\n            </span>\n          </template>\n          <!-- ACTIONS -->\n          <div :class=\"[ns.e('btn'), ns.e('actions')]\">\n            <div :class=\"ns.e('actions__inner')\">\n              <el-icon @click=\"handleActions('zoomOut')\">\n                <ZoomOut />\n              </el-icon>\n              <el-icon @click=\"handleActions('zoomIn')\">\n                <ZoomIn />\n              </el-icon>\n              <i :class=\"ns.e('actions__divider')\" />\n              <el-icon @click=\"toggleMode\">\n                <component :is=\"mode.icon\" />\n              </el-icon>\n              <i :class=\"ns.e('actions__divider')\" />\n              <el-icon @click=\"handleActions('anticlockwise')\">\n                <RefreshLeft />\n              </el-icon>\n              <el-icon @click=\"handleActions('clockwise')\">\n                <RefreshRight />\n              </el-icon>\n            </div>\n          </div>\n          <!-- CANVAS -->\n          <div :class=\"ns.e('canvas')\">\n            <img\n              v-for=\"(url, i) in urlList\"\n              v-show=\"i === activeIndex\"\n              :ref=\"(el) => (imgRefs[i] = el as HTMLImageElement)\"\n              :key=\"url\"\n              :src=\"url\"\n              :style=\"imgStyle\"\n              :class=\"ns.e('img')\"\n              :crossorigin=\"crossorigin\"\n              @load=\"handleImgLoad\"\n              @error=\"handleImgError\"\n              @mousedown=\"handleMouseDown\"\n            />\n          </div>\n          <slot />\n        </el-focus-trap>\n      </div>\n    </transition>\n  </el-teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  effectScope,\n  markRaw,\n  nextTick,\n  onMounted,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { throttle } from 'lodash-unified'\nimport { useLocale, useNamespace, useZIndex } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { keysOf } from '@element-plus/utils'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElTeleport from '@element-plus/components/teleport'\nimport ElIcon from '@element-plus/components/icon'\nimport {\n  ArrowLeft,\n  ArrowRight,\n  Close,\n  FullScreen,\n  RefreshLeft,\n  RefreshRight,\n  ScaleToOriginal,\n  ZoomIn,\n  ZoomOut,\n} from '@element-plus/icons-vue'\nimport { imageViewerEmits, imageViewerProps } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\nimport type { ImageViewerAction, ImageViewerMode } from './image-viewer'\n\nconst modes: Record<'CONTAIN' | 'ORIGINAL', ImageViewerMode> = {\n  CONTAIN: {\n    name: 'contain',\n    icon: markRaw(FullScreen),\n  },\n  ORIGINAL: {\n    name: 'original',\n    icon: markRaw(ScaleToOriginal),\n  },\n}\n\ndefineOptions({\n  name: 'ElImageViewer',\n})\n\nconst props = defineProps(imageViewerProps)\nconst emit = defineEmits(imageViewerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('image-viewer')\nconst { nextZIndex } = useZIndex()\nconst wrapper = ref<HTMLDivElement>()\nconst imgRefs = ref<HTMLImageElement[]>([])\n\nconst scopeEventListener = effectScope()\n\nconst loading = ref(true)\nconst activeIndex = ref(props.initialIndex)\nconst mode = shallowRef<ImageViewerMode>(modes.CONTAIN)\nconst transform = ref({\n  scale: 1,\n  deg: 0,\n  offsetX: 0,\n  offsetY: 0,\n  enableTransition: false,\n})\nconst zIndex = ref(props.zIndex ?? nextZIndex())\n\nconst isSingle = computed(() => {\n  const { urlList } = props\n  return urlList.length <= 1\n})\n\nconst isFirst = computed(() => {\n  return activeIndex.value === 0\n})\n\nconst isLast = computed(() => {\n  return activeIndex.value === props.urlList.length - 1\n})\n\nconst currentImg = computed(() => {\n  return props.urlList[activeIndex.value]\n})\n\nconst arrowPrevKls = computed(() => [\n  ns.e('btn'),\n  ns.e('prev'),\n  ns.is('disabled', !props.infinite && isFirst.value),\n])\n\nconst arrowNextKls = computed(() => [\n  ns.e('btn'),\n  ns.e('next'),\n  ns.is('disabled', !props.infinite && isLast.value),\n])\n\nconst imgStyle = computed(() => {\n  const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n  let translateX = offsetX / scale\n  let translateY = offsetY / scale\n\n  const radian = (deg * Math.PI) / 180\n  const cosRadian = Math.cos(radian)\n  const sinRadian = Math.sin(radian)\n  translateX = translateX * cosRadian + translateY * sinRadian\n  translateY = translateY * cosRadian - (offsetX / scale) * sinRadian\n\n  const style: CSSProperties = {\n    transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,\n    transition: enableTransition ? 'transform .3s' : '',\n  }\n  if (mode.value.name === modes.CONTAIN.name) {\n    style.maxWidth = style.maxHeight = '100%'\n  }\n  return style\n})\n\nfunction hide() {\n  unregisterEventListener()\n  emit('close')\n}\n\nfunction registerEventListener() {\n  const keydownHandler = throttle((e: KeyboardEvent) => {\n    switch (e.code) {\n      // ESC\n      case EVENT_CODE.esc:\n        props.closeOnPressEscape && hide()\n        break\n      // SPACE\n      case EVENT_CODE.space:\n        toggleMode()\n        break\n      // LEFT_ARROW\n      case EVENT_CODE.left:\n        prev()\n        break\n      // UP_ARROW\n      case EVENT_CODE.up:\n        handleActions('zoomIn')\n        break\n      // RIGHT_ARROW\n      case EVENT_CODE.right:\n        next()\n        break\n      // DOWN_ARROW\n      case EVENT_CODE.down:\n        handleActions('zoomOut')\n        break\n    }\n  })\n  const mousewheelHandler = throttle((e: WheelEvent) => {\n    const delta = e.deltaY || e.deltaX\n    handleActions(delta < 0 ? 'zoomIn' : 'zoomOut', {\n      zoomRate: props.zoomRate,\n      enableTransition: false,\n    })\n  })\n\n  scopeEventListener.run(() => {\n    useEventListener(document, 'keydown', keydownHandler)\n    useEventListener(document, 'wheel', mousewheelHandler)\n  })\n}\n\nfunction unregisterEventListener() {\n  scopeEventListener.stop()\n}\n\nfunction handleImgLoad() {\n  loading.value = false\n}\n\nfunction handleImgError(e: Event) {\n  loading.value = false\n  ;(e.target as HTMLImageElement).alt = t('el.image.error')\n}\n\nfunction handleMouseDown(e: MouseEvent) {\n  if (loading.value || e.button !== 0 || !wrapper.value) return\n  transform.value.enableTransition = false\n\n  const { offsetX, offsetY } = transform.value\n  const startX = e.pageX\n  const startY = e.pageY\n\n  const dragHandler = throttle((ev: MouseEvent) => {\n    transform.value = {\n      ...transform.value,\n      offsetX: offsetX + ev.pageX - startX,\n      offsetY: offsetY + ev.pageY - startY,\n    }\n  })\n  const removeMousemove = useEventListener(document, 'mousemove', dragHandler)\n  useEventListener(document, 'mouseup', () => {\n    removeMousemove()\n  })\n\n  e.preventDefault()\n}\n\nfunction reset() {\n  transform.value = {\n    scale: 1,\n    deg: 0,\n    offsetX: 0,\n    offsetY: 0,\n    enableTransition: false,\n  }\n}\n\nfunction toggleMode() {\n  if (loading.value) return\n\n  const modeNames = keysOf(modes)\n  const modeValues = Object.values(modes)\n  const currentMode = mode.value.name\n  const index = modeValues.findIndex((i) => i.name === currentMode)\n  const nextIndex = (index + 1) % modeNames.length\n  mode.value = modes[modeNames[nextIndex]]\n  reset()\n}\n\nfunction setActiveItem(index: number) {\n  const len = props.urlList.length\n  activeIndex.value = (index + len) % len\n}\n\nfunction prev() {\n  if (isFirst.value && !props.infinite) return\n  setActiveItem(activeIndex.value - 1)\n}\n\nfunction next() {\n  if (isLast.value && !props.infinite) return\n  setActiveItem(activeIndex.value + 1)\n}\n\nfunction handleActions(action: ImageViewerAction, options = {}) {\n  if (loading.value) return\n  const { minScale, maxScale } = props\n  const { zoomRate, rotateDeg, enableTransition } = {\n    zoomRate: props.zoomRate,\n    rotateDeg: 90,\n    enableTransition: true,\n    ...options,\n  }\n  switch (action) {\n    case 'zoomOut':\n      if (transform.value.scale > minScale) {\n        transform.value.scale = Number.parseFloat(\n          (transform.value.scale / zoomRate).toFixed(3)\n        )\n      }\n      break\n    case 'zoomIn':\n      if (transform.value.scale < maxScale) {\n        transform.value.scale = Number.parseFloat(\n          (transform.value.scale * zoomRate).toFixed(3)\n        )\n      }\n      break\n    case 'clockwise':\n      transform.value.deg += rotateDeg\n      emit('rotate', transform.value.deg)\n      break\n    case 'anticlockwise':\n      transform.value.deg -= rotateDeg\n      emit('rotate', transform.value.deg)\n      break\n  }\n  transform.value.enableTransition = enableTransition\n}\n\nfunction onFocusoutPrevented(event: CustomEvent) {\n  if (event.detail?.focusReason === 'pointer') {\n    event.preventDefault()\n  }\n}\n\nfunction onCloseRequested() {\n  if (props.closeOnPressEscape) {\n    hide()\n  }\n}\n\nwatch(currentImg, () => {\n  nextTick(() => {\n    const $img = imgRefs.value[0]\n    if (!$img?.complete) {\n      loading.value = true\n    }\n  })\n})\n\nwatch(activeIndex, (val) => {\n  reset()\n  emit('switch', val)\n})\n\nonMounted(() => {\n  registerEventListener()\n})\n\ndefineExpose({\n  /**\n   * @description manually switch image\n   */\n  setActiveItem,\n})\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"image-viewer2.mjs","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.ts"],"sourcesContent":["import {\n  buildProps,\n  definePropType,\n  isNumber,\n  mutable,\n} from '@element-plus/utils'\n\nimport type { Component, ExtractPropTypes } from 'vue'\nimport type ImageViewer from './image-viewer.vue'\n\nexport type ImageViewerAction =\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'clockwise'\n  | 'anticlockwise'\n\nexport const imageViewerProps = buildProps({\n  /**\n   * @description preview link list.\n   */\n  urlList: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  /**\n   * @description preview backdrop z-index.\n   */\n  zIndex: {\n    type: Number,\n  },\n  /**\n   * @description the initial preview image index, less than or equal to the length of `url-list`.\n   */\n  initialIndex: {\n    type: Number,\n    default: 0,\n  },\n  /**\n   * @description whether preview is infinite.\n   */\n  infinite: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether user can emit close event when clicking backdrop.\n   */\n  hideOnClickModal: Boolean,\n  /**\n   * @description whether to append image itself to body. A nested parent element attribute transform should have this attribute set to `true`.\n   */\n  teleported: Boolean,\n  /**\n   * @description whether the image-viewer can be closed by pressing ESC.\n   */\n  closeOnPressEscape: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description the zoom rate of the image viewer zoom event.\n   */\n  zoomRate: {\n    type: Number,\n    default: 1.2,\n  },\n  /**\n   * @description the min scale of the image viewer zoom event.\n   */\n  minScale: {\n    type: Number,\n    default: 0.2,\n  },\n  /**\n   * @description the max scale of the image viewer zoom event.\n   */\n  maxScale: {\n    type: Number,\n    default: 7,\n  },\n  /**\n   * @description set HTML attribute: crossorigin.\n   */\n  crossorigin: {\n    type: definePropType<'anonymous' | 'use-credentials' | ''>(String),\n  },\n} as const)\nexport type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>\n\nexport const imageViewerEmits = {\n  close: () => true,\n  switch: (index: number) => isNumber(index),\n  rotate: (deg: number) => isNumber(deg),\n}\nexport type ImageViewerEmits = typeof imageViewerEmits\n\nexport interface ImageViewerMode {\n  name: string\n  icon: Component\n}\n\nexport type ImageViewerInstance = InstanceType<typeof ImageViewer>\n"],"names":[],"mappings":";;;;AAMY,MAAC,gBAAgB,GAAG,UAAU,CAAC;AAC3C,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,gBAAgB,EAAE,OAAO;AAC3B,EAAE,UAAU,EAAE,OAAO;AACrB,EAAE,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,CAAC,EAAE;AACS,MAAC,gBAAgB,GAAG;AAChC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC;AACpC,EAAE,MAAM,EAAE,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC;AAChC;;;;"}

package/es/components/index.mjs

@@ -101,15 +101,15 @@ export { CAROUSEL_ITEM_NAME, carouselContextKey } from './carousel/src/constants
 export { cascaderEmits, cascaderProps } from './cascader/src/cascader.mjs';
 export { CASCADER_PANEL_INJECTION_KEY } from './cascader-panel/src/types.mjs';
 export { CommonProps, DefaultProps, useCascaderConfig } from './cascader-panel/src/config.mjs';
-export { checkTagEmits, checkTagProps } from './check-tag/src/check-tag.mjs';
+export { checkTagEmits, checkTagProps } from './check-tag/src/check-tag2.mjs';
 export { checkboxGroupEmits, checkboxGroupProps } from './checkbox/src/checkbox-group.mjs';
 export { checkboxEmits, checkboxProps } from './checkbox/src/checkbox.mjs';
 export { checkboxGroupContextKey } from './checkbox/src/constants.mjs';
-export { colProps } from './col/src/col.mjs';
+export { colProps } from './col/src/col2.mjs';
 export { collapseEmits, collapseProps, emitChangeFn } from './collapse/src/collapse.mjs';
-export { collapseItemProps } from './collapse/src/collapse-item.mjs';
+export { collapseItemProps } from './collapse/src/collapse-item2.mjs';
 export { collapseContextKey } from './collapse/src/constants.mjs';
-export { colorPickerContextKey, colorPickerEmits, colorPickerProps } from './color-picker/src/color-picker.mjs';
+export { colorPickerContextKey, colorPickerEmits, colorPickerProps } from './color-picker/src/color-picker2.mjs';
 export { messageConfig } from './config-provider/src/config-provider.mjs';
 export { configProviderProps } from './config-provider/src/config-provider-props.mjs';
 export { configProviderContextKey } from './config-provider/src/constants.mjs';
@@ -126,7 +126,7 @@ export { dividerProps } from './divider/src/divider.mjs';
 export { drawerEmits, drawerProps } from './drawer/src/drawer.mjs';
 export { DROPDOWN_COLLECTION_INJECTION_KEY, DROPDOWN_COLLECTION_ITEM_INJECTION_KEY, ElCollection, ElCollectionItem, FIRST_KEYS, FIRST_LAST_KEYS, LAST_KEYS, dropdownItemProps, dropdownMenuProps, dropdownProps } from './dropdown/src/dropdown.mjs';
 export { DROPDOWN_INJECTION_KEY } from './dropdown/src/tokens.mjs';
-export { emptyProps } from './empty/src/empty.mjs';
+export { emptyProps } from './empty/src/empty2.mjs';
 export { formEmits, formMetaProps, formProps } from './form/src/form.mjs';
 export { formItemProps, formItemValidateStates } from './form/src/form-item.mjs';
 export { formContextKey, formItemContextKey } from './form/src/constants.mjs';
@@ -134,7 +134,7 @@ export { useDisabled, useFormDisabled, useFormSize, useSize } from './form/src/h
 export { useFormItem, useFormItemInputId } from './form/src/hooks/use-form-item.mjs';
 export { iconProps } from './icon/src/icon.mjs';
 export { imageEmits, imageProps } from './image/src/image.mjs';
-export { imageViewerEmits, imageViewerProps } from './image-viewer/src/image-viewer.mjs';
+export { imageViewerEmits, imageViewerProps } from './image-viewer/src/image-viewer2.mjs';
 export { inputEmits, inputProps } from './input/src/input.mjs';
 export { inputNumberEmits, inputNumberProps } from './input-number/src/input-number.mjs';
 export { inputTagEmits, inputTagProps } from './input-tag/src/input-tag.mjs';
@@ -151,13 +151,13 @@ export { popconfirmEmits, popconfirmProps } from './popconfirm/src/popconfirm.mj
 export { Effect, popperProps, roleTypes, usePopperProps } from './popper/src/popper.mjs';
 export { popperTriggerProps, usePopperTriggerProps } from './popper/src/trigger.mjs';
 export { popperContentEmits, popperContentProps, popperCoreConfigProps, usePopperContentEmits, usePopperContentProps, usePopperCoreConfigProps } from './popper/src/content.mjs';
-export { popperArrowProps, usePopperArrowProps } from './popper/src/arrow.mjs';
+export { popperArrowProps, usePopperArrowProps } from './popper/src/arrow2.mjs';
 export { POPPER_CONTENT_INJECTION_KEY, POPPER_INJECTION_KEY } from './popper/src/constants.mjs';
-export { default as ElPopperArrow } from './popper/src/arrow2.mjs';
+export { default as ElPopperArrow } from './popper/src/arrow.mjs';
 export { default as ElPopperTrigger } from './popper/src/trigger2.mjs';
 export { default as ElPopperContent } from './popper/src/content2.mjs';
 export { progressProps } from './progress/src/progress.mjs';
-export { radioEmits, radioProps, radioPropsBase } from './radio/src/radio.mjs';
+export { radioEmits, radioProps, radioPropsBase } from './radio/src/radio2.mjs';
 export { radioGroupEmits, radioGroupProps } from './radio/src/radio-group.mjs';
 export { radioButtonProps } from './radio/src/radio-button.mjs';
 export { radioGroupKey } from './radio/src/constants.mjs';

package/es/components/popper/index.mjs

@@ -1,11 +1,11 @@
 import Popper from './src/popper2.mjs';
-export { default as ElPopperArrow } from './src/arrow2.mjs';
+export { default as ElPopperArrow } from './src/arrow.mjs';
 export { default as ElPopperTrigger } from './src/trigger2.mjs';
 export { default as ElPopperContent } from './src/content2.mjs';
 export { Effect, popperProps, roleTypes, usePopperProps } from './src/popper.mjs';
 export { popperTriggerProps, usePopperTriggerProps } from './src/trigger.mjs';
 export { popperContentEmits, popperContentProps, popperCoreConfigProps, usePopperContentEmits, usePopperContentProps, usePopperCoreConfigProps } from './src/content.mjs';
-export { popperArrowProps, usePopperArrowProps } from './src/arrow.mjs';
+export { popperArrowProps, usePopperArrowProps } from './src/arrow2.mjs';
 export { POPPER_CONTENT_INJECTION_KEY, POPPER_INJECTION_KEY } from './src/constants.mjs';
 import { withInstall } from '../../utils/vue/install.mjs';
 

package/es/components/popper/src/arrow.mjs

@@ -1,12 +1,41 @@
-import { buildProps } from '../../../utils/vue/props/runtime.mjs';
+import { defineComponent, inject, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle } from 'vue';
+import { POPPER_CONTENT_INJECTION_KEY } from './constants.mjs';
+import { popperArrowProps } from './arrow2.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
-const popperArrowProps = buildProps({
-  arrowOffset: {
-    type: Number,
-    default: 5
+const __default__ = defineComponent({
+  name: "ElPopperArrow",
+  inheritAttrs: false
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: popperArrowProps,
+  setup(__props, { expose }) {
+    const props = __props;
+    const ns = useNamespace("popper");
+    const { arrowOffset, arrowRef, arrowStyle } = inject(POPPER_CONTENT_INJECTION_KEY, void 0);
+    watch(() => props.arrowOffset, (val) => {
+      arrowOffset.value = val;
+    });
+    onBeforeUnmount(() => {
+      arrowRef.value = void 0;
+    });
+    expose({
+      arrowRef
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        ref_key: "arrowRef",
+        ref: arrowRef,
+        class: normalizeClass(unref(ns).e("arrow")),
+        style: normalizeStyle(unref(arrowStyle)),
+        "data-popper-arrow": ""
+      }, null, 6);
+    };
   }
 });
-const usePopperArrowProps = popperArrowProps;
+var ElPopperArrow = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "arrow.vue"]]);
 
-export { popperArrowProps, usePopperArrowProps };
+export { ElPopperArrow as default };
 //# sourceMappingURL=arrow.mjs.map

package/es/components/popper/src/arrow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"arrow.mjs","sources":["../../../../../../packages/components/popper/src/arrow.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type Arrow from './arrow.vue'\n\nexport const popperArrowProps = buildProps({\n  arrowOffset: {\n    type: Number,\n    default: 5,\n  },\n} as const)\nexport type PopperArrowProps = ExtractPropTypes<typeof popperArrowProps>\n\nexport type PopperArrowInstance = InstanceType<typeof Arrow>\n\n/** @deprecated use `popperArrowProps` instead, and it will be deprecated in the next major version */\nexport const usePopperArrowProps = popperArrowProps\n\n/** @deprecated use `PopperArrowProps` instead, and it will be deprecated in the next major version */\nexport type UsePopperArrowProps = PopperArrowProps\n\n/** @deprecated use `PopperArrowInstance` instead, and it will be deprecated in the next major version */\nexport type ElPopperArrowInstance = PopperArrowInstance\n"],"names":[],"mappings":";;AACY,MAAC,gBAAgB,GAAG,UAAU,CAAC;AAC3C,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,CAAC,EAAE;AACS,MAAC,mBAAmB,GAAG;;;;"}
+{"version":3,"file":"arrow.mjs","sources":["../../../../../../packages/components/popper/src/arrow.vue"],"sourcesContent":["<template>\n  <span\n    ref=\"arrowRef\"\n    :class=\"ns.e('arrow')\"\n    :style=\"arrowStyle\"\n    data-popper-arrow\n  />\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject, onBeforeUnmount, watch } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { POPPER_CONTENT_INJECTION_KEY } from './constants'\nimport { popperArrowProps } from './arrow'\n\ndefineOptions({\n  name: 'ElPopperArrow',\n  inheritAttrs: false,\n})\n\nconst props = defineProps(popperArrowProps)\n\nconst ns = useNamespace('popper')\nconst { arrowOffset, arrowRef, arrowStyle } = inject(\n  POPPER_CONTENT_INJECTION_KEY,\n  undefined\n)!\n\nwatch(\n  () => props.arrowOffset,\n  (val) => {\n    arrowOffset.value = val\n  }\n)\nonBeforeUnmount(() => {\n  arrowRef.value = undefined\n})\n\ndefineExpose({\n  /**\n   * @description Arrow element\n   */\n  arrowRef,\n})\n</script>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle"],"mappings":";;;;;;mCAec,CAAA;AAAA,EACZ,IAAM,EAAA,eAAA;AAAA,EACN,YAAc,EAAA,KAAA;AAChB,CAAA,CAAA,CAAA;;;;;;AAIA,IAAM,MAAA,EAAA,GAAK,aAAa,QAAQ,CAAA,CAAA;AAChC,IAAA,MAAM,EAAE,WAAA,EAAa,QAAU,EAAA,UAAA,EAAe,GAAA,MAAA,CAAA,4BAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAAA,IAC5C,KAAA,CAAA,MAAA,KAAA,CAAA,WAAA,EAAA,CAAA,GAAA,KAAA;AAAA,MACA,WAAA,CAAA,KAAA,GAAA,GAAA,CAAA;AAAA,KACF,CAAA,CAAA;AAEA,IAAA,eAAA,CAAA,MAAA;AAAA,MACE,QAAY,CAAA,KAAA,GAAA,KAAA,CAAA,CAAA;AAAA,KAAA,CACZ,CAAC;AACC,IAAA,MAAA,CAAA;AAAoB,MACtB,QAAA;AAAA,KACF,CAAA,CAAA;AACA,IAAA,OAAA,CAAA,IAAA,EAAA,MAAsB,KAAA;AACpB,MAAA,OAAAA,SAAiB,EAAA,EAAAC,kBAAA,CAAA,MAAA,EAAA;AAAA,QAClB,OAAA,EAAA,UAAA;AAED,QAAa,GAAA,EAAA,QAAA;AAAA,QAAA,KAAA,EAAAC,cAAA,CAAAC,KAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA;AAAA,QAAA,KAAA,EAAAC,cAAA,CAAAD,KAAA,CAAA,UAAA,CAAA,CAAA;AAAA,QAAA,mBAAA,EAAA,EAAA;AAAA,OAIX,EAAA,IAAA,EAAA,CAAA,CAAA,CAAA;AAAA,KACD,CAAA;;;;;;;"}