element-plus 1.3.0-beta.6 → 2.0.0

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

@@ -1,19 +1,14 @@
-import { markRaw, defineComponent, ref, effectScope, computed, watch, nextTick, onMounted, resolveComponent, openBlock, createBlock, Transition, withCtx, createElementVNode, normalizeStyle, withModifiers, createCommentVNode, createVNode, createElementBlock, Fragment, normalizeClass, resolveDynamicComponent, renderList, withDirectives, vShow, renderSlot } from 'vue';
+import { markRaw, defineComponent, ref, effectScope, computed, watch, nextTick, onMounted, resolveComponent, openBlock, createBlock, Transition, withCtx, createElementVNode, normalizeClass, normalizeStyle, withModifiers, createCommentVNode, createVNode, createElementBlock, Fragment, resolveDynamicComponent, renderList, withDirectives, vShow, renderSlot } from 'vue';
 import { useEventListener } from '@vueuse/core';
 import { ElIcon } from '../../icon/index.mjs';
-import 'lodash/fromPairs';
-import '../../../hooks/use-common-props/index.mjs';
-import '../../../hooks/use-global-config/index.mjs';
-import { useLocale } from '../../../hooks/use-locale/index.mjs';
-import { isFirefox, rafThrottle } from '../../../utils/util.mjs';
-import '../../../hooks/use-modal/index.mjs';
-import '../../../hooks/use-model-toggle/index.mjs';
-import '@vue/shared';
+import '../../../hooks/index.mjs';
 import { EVENT_CODE } from '../../../utils/aria.mjs';
-import '../../../hooks/use-delayed-toggle/index.mjs';
+import { isFirefox, rafThrottle } from '../../../utils/util.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';
 
 const Mode = {
   CONTAIN: {
@@ -42,8 +37,9 @@ const _sfc_main = defineComponent({
   emits: imageViewerEmits,
   setup(props, { emit }) {
     const { t } = useLocale();
+    const ns = useNamespace("image-viewer");
     const wrapper = ref();
-    const img = ref();
+    const imgRefs = ref([]);
     const scopeEventListener = effectScope();
     const loading = ref(true);
     const index = ref(props.initialIndex);
@@ -70,11 +66,28 @@ const _sfc_main = defineComponent({
     });
     const imgStyle = computed(() => {
       const { scale, deg, offsetX, offsetY, enableTransition } = transform.value;
+      let translateX = offsetX / scale;
+      let translateY = offsetY / scale;
+      switch (deg % 360) {
+        case 90:
+        case -270:
+          ;
+          [translateX, translateY] = [translateY, -translateX];
+          break;
+        case 180:
+        case -180:
+          ;
+          [translateX, translateY] = [-translateX, -translateY];
+          break;
+        case 270:
+        case -90:
+          ;
+          [translateX, translateY] = [-translateY, translateX];
+          break;
+      }
       const style = {
-        transform: `scale(${scale}) rotate(${deg}deg)`,
-        transition: enableTransition ? "transform .3s" : "",
-        marginLeft: `${offsetX}px`,
-        marginTop: `${offsetY}px`
+        transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,
+        transition: enableTransition ? "transform .3s" : ""
       };
       if (mode.value.name === Mode.CONTAIN.name) {
         style.maxWidth = style.maxHeight = "100%";
@@ -112,12 +125,12 @@ const _sfc_main = defineComponent({
         const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
         if (delta > 0) {
           handleActions("zoomIn", {
-            zoomRate: 0.015,
+            zoomRate: 1.2,
             enableTransition: false
           });
         } else {
           handleActions("zoomOut", {
-            zoomRate: 0.015,
+            zoomRate: 1.2,
             enableTransition: false
           });
         }
@@ -140,13 +153,10 @@ const _sfc_main = defineComponent({
     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 divLeft = wrapper.value.clientLeft;
-      const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth;
-      const divTop = wrapper.value.clientTop;
-      const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight;
       const dragHandler = rafThrottle((ev) => {
         transform.value = {
           ...transform.value,
@@ -155,12 +165,7 @@ const _sfc_main = defineComponent({
         };
       });
       const removeMousemove = useEventListener(document, "mousemove", dragHandler);
-      useEventListener(document, "mouseup", (evt) => {
-        const mouseX = evt.pageX;
-        const mouseY = evt.pageY;
-        if (mouseX < divLeft || mouseX > divRight || mouseY < divTop || mouseY > divBottom) {
-          reset();
-        }
+      useEventListener(document, "mouseup", () => {
         removeMousemove();
       });
       e.preventDefault();
@@ -201,7 +206,7 @@ const _sfc_main = defineComponent({
       if (loading.value)
         return;
       const { zoomRate, rotateDeg, enableTransition } = {
-        zoomRate: 0.2,
+        zoomRate: 1.4,
         rotateDeg: 90,
         enableTransition: true,
         ...options
@@ -209,11 +214,13 @@ const _sfc_main = defineComponent({
       switch (action) {
         case "zoomOut":
           if (transform.value.scale > 0.2) {
-            transform.value.scale = parseFloat((transform.value.scale - zoomRate).toFixed(3));
+            transform.value.scale = parseFloat((transform.value.scale / zoomRate).toFixed(3));
           }
           break;
         case "zoomIn":
-          transform.value.scale = parseFloat((transform.value.scale + zoomRate).toFixed(3));
+          if (transform.value.scale < 7) {
+            transform.value.scale = parseFloat((transform.value.scale * zoomRate).toFixed(3));
+          }
           break;
         case "clockwise":
           transform.value.deg += rotateDeg;
@@ -226,8 +233,8 @@ const _sfc_main = defineComponent({
     }
     watch(currentImg, () => {
       nextTick(() => {
-        const $img = img.value;
-        if (!$img?.complete) {
+        const $img = imgRefs.value[0];
+        if (!($img == null ? void 0 : $img.complete)) {
           loading.value = true;
         }
       });
@@ -237,13 +244,14 @@ const _sfc_main = defineComponent({
       emit("switch", val);
     });
     onMounted(() => {
+      var _a, _b;
       registerEventListener();
-      wrapper.value?.focus?.();
+      (_b = (_a = wrapper.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
     });
     return {
       index,
       wrapper,
-      img,
+      imgRefs,
       isSingle,
       isFirst,
       isLast,
@@ -257,16 +265,12 @@ const _sfc_main = defineComponent({
       toggleMode,
       handleImgLoad,
       handleImgError,
-      handleMouseDown
+      handleMouseDown,
+      ns
     };
   }
 });
-const _hoisted_1 = { class: "el-image-viewer__btn el-image-viewer__actions" };
-const _hoisted_2 = { class: "el-image-viewer__actions__inner" };
-const _hoisted_3 = /* @__PURE__ */ createElementVNode("i", { class: "el-image-viewer__actions__divider" }, null, -1);
-const _hoisted_4 = /* @__PURE__ */ createElementVNode("i", { class: "el-image-viewer__actions__divider" }, null, -1);
-const _hoisted_5 = { class: "el-image-viewer__canvas" };
-const _hoisted_6 = ["src"];
+const _hoisted_1 = ["src"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_close = resolveComponent("close");
   const _component_el_icon = resolveComponent("el-icon");
@@ -281,16 +285,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createElementVNode("div", {
         ref: "wrapper",
         tabindex: -1,
-        class: "el-image-viewer__wrapper",
+        class: normalizeClass(_ctx.ns.e("wrapper")),
         style: normalizeStyle({ zIndex: _ctx.zIndex })
       }, [
         createElementVNode("div", {
-          class: "el-image-viewer__mask",
+          class: normalizeClass(_ctx.ns.e("mask")),
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.hideOnClickModal && _ctx.hide(), ["self"]))
-        }),
+        }, null, 2),
         createCommentVNode(" CLOSE "),
         createElementVNode("span", {
-          class: "el-image-viewer__btn el-image-viewer__close",
+          class: normalizeClass([_ctx.ns.e("btn"), _ctx.ns.e("close")]),
           onClick: _cache[1] || (_cache[1] = (...args) => _ctx.hide && _ctx.hide(...args))
         }, [
           createVNode(_component_el_icon, null, {
@@ -299,11 +303,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             ]),
             _: 1
           })
-        ]),
+        ], 2),
         createCommentVNode(" ARROW "),
         !_ctx.isSingle ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createElementVNode("span", {
-            class: normalizeClass(["el-image-viewer__btn el-image-viewer__prev", { "is-disabled": !_ctx.infinite && _ctx.isFirst }]),
+            class: normalizeClass([
+              _ctx.ns.e("btn"),
+              _ctx.ns.e("prev"),
+              _ctx.ns.is("disabled", !_ctx.infinite && _ctx.isFirst)
+            ]),
             onClick: _cache[2] || (_cache[2] = (...args) => _ctx.prev && _ctx.prev(...args))
           }, [
             createVNode(_component_el_icon, null, {
@@ -314,7 +322,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             })
           ], 2),
           createElementVNode("span", {
-            class: normalizeClass(["el-image-viewer__btn el-image-viewer__next", { "is-disabled": !_ctx.infinite && _ctx.isLast }]),
+            class: normalizeClass([
+              _ctx.ns.e("btn"),
+              _ctx.ns.e("next"),
+              _ctx.ns.is("disabled", !_ctx.infinite && _ctx.isLast)
+            ]),
             onClick: _cache[3] || (_cache[3] = (...args) => _ctx.next && _ctx.next(...args))
           }, [
             createVNode(_component_el_icon, null, {
@@ -326,8 +338,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ], 2)
         ], 64)) : createCommentVNode("v-if", true),
         createCommentVNode(" ACTIONS "),
-        createElementVNode("div", _hoisted_1, [
-          createElementVNode("div", _hoisted_2, [
+        createElementVNode("div", {
+          class: normalizeClass([_ctx.ns.e("btn"), _ctx.ns.e("actions")])
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.ns.e("actions__inner"))
+          }, [
             createVNode(_component_el_icon, {
               onClick: _cache[4] || (_cache[4] = ($event) => _ctx.handleActions("zoomOut"))
             }, {
@@ -344,14 +360,18 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               ]),
               _: 1
             }),
-            _hoisted_3,
+            createElementVNode("i", {
+              class: normalizeClass(_ctx.ns.e("actions__divider"))
+            }, null, 2),
             createVNode(_component_el_icon, { onClick: _ctx.toggleMode }, {
               default: withCtx(() => [
                 (openBlock(), createBlock(resolveDynamicComponent(_ctx.mode.icon)))
               ]),
               _: 1
             }, 8, ["onClick"]),
-            _hoisted_4,
+            createElementVNode("i", {
+              class: normalizeClass(_ctx.ns.e("actions__divider"))
+            }, null, 2),
             createVNode(_component_el_icon, {
               onClick: _cache[6] || (_cache[6] = ($event) => _ctx.handleActions("anticlockwise"))
             }, {
@@ -368,28 +388,30 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               ]),
               _: 1
             })
-          ])
-        ]),
+          ], 2)
+        ], 2),
         createCommentVNode(" CANVAS "),
-        createElementVNode("div", _hoisted_5, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.ns.e("canvas"))
+        }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.urlList, (url, i) => {
             return withDirectives((openBlock(), createElementBlock("img", {
               ref_for: true,
-              ref: "img",
+              ref: (el) => _ctx.imgRefs[i] = el,
               key: url,
               src: url,
               style: normalizeStyle(_ctx.imgStyle),
-              class: "el-image-viewer__img",
+              class: normalizeClass(_ctx.ns.e("img")),
               onLoad: _cache[8] || (_cache[8] = (...args) => _ctx.handleImgLoad && _ctx.handleImgLoad(...args)),
               onError: _cache[9] || (_cache[9] = (...args) => _ctx.handleImgError && _ctx.handleImgError(...args)),
               onMousedown: _cache[10] || (_cache[10] = (...args) => _ctx.handleMouseDown && _ctx.handleMouseDown(...args))
-            }, null, 44, _hoisted_6)), [
+            }, null, 46, _hoisted_1)), [
               [vShow, i === _ctx.index]
             ]);
           }), 128))
-        ]),
+        ], 2),
         renderSlot(_ctx.$slots, "default")
-      ], 4)
+      ], 6)
     ]),
     _: 3
   });

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  <transition name=\"viewer-fade\">\n    <div\n      ref=\"wrapper\"\n      :tabindex=\"-1\"\n      class=\"el-image-viewer__wrapper\"\n      :style=\"{ zIndex }\"\n    >\n      <div\n        class=\"el-image-viewer__mask\"\n        @click.self=\"hideOnClickModal && hide()\"\n      />\n\n      <!-- CLOSE -->\n      <span class=\"el-image-viewer__btn el-image-viewer__close\" @click=\"hide\">\n        <el-icon><close /></el-icon>\n      </span>\n\n      <!-- ARROW -->\n      <template v-if=\"!isSingle\">\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__prev\"\n          :class=\"{ 'is-disabled': !infinite && isFirst }\"\n          @click=\"prev\"\n        >\n          <el-icon><arrow-left /></el-icon>\n        </span>\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__next\"\n          :class=\"{ 'is-disabled': !infinite && isLast }\"\n          @click=\"next\"\n        >\n          <el-icon><arrow-right /></el-icon>\n        </span>\n      </template>\n      <!-- ACTIONS -->\n      <div class=\"el-image-viewer__btn el-image-viewer__actions\">\n        <div class=\"el-image-viewer__actions__inner\">\n          <el-icon @click=\"handleActions('zoomOut')\">\n            <zoom-out />\n          </el-icon>\n          <el-icon @click=\"handleActions('zoomIn')\">\n            <zoom-in />\n          </el-icon>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <el-icon @click=\"toggleMode\">\n            <component :is=\"mode.icon\" />\n          </el-icon>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <el-icon @click=\"handleActions('anticlockwise')\">\n            <refresh-left />\n          </el-icon>\n          <el-icon @click=\"handleActions('clockwise')\">\n            <refresh-right />\n          </el-icon>\n        </div>\n      </div>\n      <!-- CANVAS -->\n      <div class=\"el-image-viewer__canvas\">\n        <img\n          v-for=\"(url, i) in urlList\"\n          v-show=\"i === index\"\n          ref=\"img\"\n          :key=\"url\"\n          :src=\"url\"\n          :style=\"imgStyle\"\n          class=\"el-image-viewer__img\"\n          @load=\"handleImgLoad\"\n          @error=\"handleImgError\"\n          @mousedown=\"handleMouseDown\"\n        />\n      </div>\n      <slot />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  ref,\n  onMounted,\n  watch,\n  nextTick,\n  effectScope,\n  markRaw,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { rafThrottle, isFirefox } from '@element-plus/utils/util'\nimport {\n  Close,\n  ArrowLeft,\n  ArrowRight,\n  ZoomOut,\n  ZoomIn,\n  RefreshLeft,\n  RefreshRight,\n  FullScreen,\n  ScaleToOriginal,\n} from '@element-plus/icons-vue'\nimport { imageViewerProps, imageViewerEmits } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\n\nconst Mode = {\n  CONTAIN: {\n    name: 'contain',\n    icon: markRaw(FullScreen),\n  },\n  ORIGINAL: {\n    name: 'original',\n    icon: markRaw(ScaleToOriginal),\n  },\n}\n\nconst mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'\nexport type ImageViewerAction =\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'clockwise'\n  | 'anticlockwise'\n\nexport default defineComponent({\n  name: 'ElImageViewer',\n  components: {\n    ElIcon,\n    Close,\n    ArrowLeft,\n    ArrowRight,\n    ZoomOut,\n    ZoomIn,\n    RefreshLeft,\n    RefreshRight,\n  },\n  props: imageViewerProps,\n  emits: imageViewerEmits,\n\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const wrapper = ref<HTMLDivElement>()\n    const img = ref<HTMLImageElement>()\n\n    const scopeEventListener = effectScope()\n\n    const loading = ref(true)\n    const index = ref(props.initialIndex)\n    const mode = ref(Mode.CONTAIN)\n    const transform = ref({\n      scale: 1,\n      deg: 0,\n      offsetX: 0,\n      offsetY: 0,\n      enableTransition: false,\n    })\n\n    const isSingle = computed(() => {\n      const { urlList } = props\n      return urlList.length <= 1\n    })\n\n    const isFirst = computed(() => {\n      return index.value === 0\n    })\n\n    const isLast = computed(() => {\n      return index.value === props.urlList.length - 1\n    })\n\n    const currentImg = computed(() => {\n      return props.urlList[index.value]\n    })\n\n    const imgStyle = computed(() => {\n      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n      const style: CSSProperties = {\n        transform: `scale(${scale}) rotate(${deg}deg)`,\n        transition: enableTransition ? 'transform .3s' : '',\n        marginLeft: `${offsetX}px`,\n        marginTop: `${offsetY}px`,\n      }\n      if (mode.value.name === Mode.CONTAIN.name) {\n        style.maxWidth = style.maxHeight = '100%'\n      }\n      return style\n    })\n\n    function hide() {\n      unregisterEventListener()\n      emit('close')\n    }\n\n    function registerEventListener() {\n      const keydownHandler = rafThrottle((e: KeyboardEvent) => {\n        switch (e.code) {\n          // ESC\n          case EVENT_CODE.esc:\n            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 = rafThrottle(\n        (e: WheelEvent | any /* TODO: wheelDelta is deprecated */) => {\n          const delta = e.wheelDelta ? e.wheelDelta : -e.detail\n          if (delta > 0) {\n            handleActions('zoomIn', {\n              zoomRate: 0.015,\n              enableTransition: false,\n            })\n          } else {\n            handleActions('zoomOut', {\n              zoomRate: 0.015,\n              enableTransition: false,\n            })\n          }\n        }\n      )\n\n      scopeEventListener.run(() => {\n        useEventListener(document, 'keydown', keydownHandler)\n        useEventListener(document, mousewheelEventName, mousewheelHandler)\n      })\n    }\n\n    function unregisterEventListener() {\n      scopeEventListener.stop()\n    }\n\n    function handleImgLoad() {\n      loading.value = false\n    }\n\n    function handleImgError(e: Event) {\n      loading.value = false\n      ;(e.target as HTMLImageElement).alt = t('el.image.error')\n    }\n\n    function handleMouseDown(e: MouseEvent) {\n      if (loading.value || e.button !== 0 || !wrapper.value) return\n\n      const { offsetX, offsetY } = transform.value\n      const startX = e.pageX\n      const startY = e.pageY\n\n      const divLeft = wrapper.value.clientLeft\n      const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth\n      const divTop = wrapper.value.clientTop\n      const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight\n\n      const dragHandler = rafThrottle((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(\n        document,\n        'mousemove',\n        dragHandler\n      )\n      useEventListener(document, 'mouseup', (evt) => {\n        const mouseX = evt.pageX\n        const mouseY = evt.pageY\n        if (\n          mouseX < divLeft ||\n          mouseX > divRight ||\n          mouseY < divTop ||\n          mouseY > divBottom\n        ) {\n          reset()\n        }\n        removeMousemove()\n      })\n\n      e.preventDefault()\n    }\n\n    function reset() {\n      transform.value = {\n        scale: 1,\n        deg: 0,\n        offsetX: 0,\n        offsetY: 0,\n        enableTransition: false,\n      }\n    }\n\n    function toggleMode() {\n      if (loading.value) return\n\n      const modeNames = Object.keys(Mode)\n      const modeValues = Object.values(Mode)\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 = Mode[modeNames[nextIndex]]\n      reset()\n    }\n\n    function prev() {\n      if (isFirst.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value - 1 + len) % len\n    }\n\n    function next() {\n      if (isLast.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value + 1) % len\n    }\n\n    function handleActions(action: ImageViewerAction, options = {}) {\n      if (loading.value) return\n      const { zoomRate, rotateDeg, enableTransition } = {\n        zoomRate: 0.2,\n        rotateDeg: 90,\n        enableTransition: true,\n        ...options,\n      }\n      switch (action) {\n        case 'zoomOut':\n          if (transform.value.scale > 0.2) {\n            transform.value.scale = parseFloat(\n              (transform.value.scale - zoomRate).toFixed(3)\n            )\n          }\n          break\n        case 'zoomIn':\n          transform.value.scale = parseFloat(\n            (transform.value.scale + zoomRate).toFixed(3)\n          )\n          break\n        case 'clockwise':\n          transform.value.deg += rotateDeg\n          break\n        case 'anticlockwise':\n          transform.value.deg -= rotateDeg\n          break\n      }\n      transform.value.enableTransition = enableTransition\n    }\n\n    watch(currentImg, () => {\n      nextTick(() => {\n        const $img = img.value\n        if (!$img?.complete) {\n          loading.value = true\n        }\n      })\n    })\n\n    watch(index, (val) => {\n      reset()\n      emit('switch', val)\n    })\n\n    onMounted(() => {\n      registerEventListener()\n      // add tabindex then wrapper can be focusable via Javascript\n      // focus wrapper so arrow key can't cause inner scroll behavior underneath\n      wrapper.value?.focus?.()\n    })\n\n    return {\n      index,\n      wrapper,\n      img,\n      isSingle,\n      isFirst,\n      isLast,\n      currentImg,\n      imgStyle,\n      mode,\n      handleActions,\n      prev,\n      next,\n      hide,\n      toggleMode,\n      handleImgLoad,\n      handleImgError,\n      handleMouseDown,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_withCtx","_createCommentVNode","_createElementBlock","_Fragment","_normalizeClass","_normalizeStyle"],"mappings":"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"}
+{"version":3,"file":"image-viewer2.mjs","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n  <transition name=\"viewer-fade\">\n    <div\n      ref=\"wrapper\"\n      :tabindex=\"-1\"\n      :class=\"ns.e('wrapper')\"\n      :style=\"{ zIndex }\"\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><close /></el-icon>\n      </span>\n\n      <!-- ARROW -->\n      <template v-if=\"!isSingle\">\n        <span\n          :class=\"[\n            ns.e('btn'),\n            ns.e('prev'),\n            ns.is('disabled', !infinite && isFirst),\n          ]\"\n          @click=\"prev\"\n        >\n          <el-icon><arrow-left /></el-icon>\n        </span>\n        <span\n          :class=\"[\n            ns.e('btn'),\n            ns.e('next'),\n            ns.is('disabled', !infinite && isLast),\n          ]\"\n          @click=\"next\"\n        >\n          <el-icon><arrow-right /></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            <zoom-out />\n          </el-icon>\n          <el-icon @click=\"handleActions('zoomIn')\">\n            <zoom-in />\n          </el-icon>\n          <i :class=\"ns.e('actions__divider')\"></i>\n          <el-icon @click=\"toggleMode\">\n            <component :is=\"mode.icon\" />\n          </el-icon>\n          <i :class=\"ns.e('actions__divider')\"></i>\n          <el-icon @click=\"handleActions('anticlockwise')\">\n            <refresh-left />\n          </el-icon>\n          <el-icon @click=\"handleActions('clockwise')\">\n            <refresh-right />\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 === index\"\n          :ref=\"(el) => (imgRefs[i] = el)\"\n          :key=\"url\"\n          :src=\"url\"\n          :style=\"imgStyle\"\n          :class=\"ns.e('img')\"\n          @load=\"handleImgLoad\"\n          @error=\"handleImgError\"\n          @mousedown=\"handleMouseDown\"\n        />\n      </div>\n      <slot />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  ref,\n  onMounted,\n  watch,\n  nextTick,\n  effectScope,\n  markRaw,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { rafThrottle, isFirefox } from '@element-plus/utils/util'\nimport {\n  Close,\n  ArrowLeft,\n  ArrowRight,\n  ZoomOut,\n  ZoomIn,\n  RefreshLeft,\n  RefreshRight,\n  FullScreen,\n  ScaleToOriginal,\n} from '@element-plus/icons-vue'\nimport { imageViewerProps, imageViewerEmits } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\n\nconst Mode = {\n  CONTAIN: {\n    name: 'contain',\n    icon: markRaw(FullScreen),\n  },\n  ORIGINAL: {\n    name: 'original',\n    icon: markRaw(ScaleToOriginal),\n  },\n}\n\nconst mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'\nexport type ImageViewerAction =\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'clockwise'\n  | 'anticlockwise'\n\nexport default defineComponent({\n  name: 'ElImageViewer',\n  components: {\n    ElIcon,\n    Close,\n    ArrowLeft,\n    ArrowRight,\n    ZoomOut,\n    ZoomIn,\n    RefreshLeft,\n    RefreshRight,\n  },\n  props: imageViewerProps,\n  emits: imageViewerEmits,\n\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const ns = useNamespace('image-viewer')\n    const wrapper = ref<HTMLDivElement>()\n    const imgRefs = ref<any[]>([])\n\n    const scopeEventListener = effectScope()\n\n    const loading = ref(true)\n    const index = ref(props.initialIndex)\n    const mode = ref(Mode.CONTAIN)\n    const transform = ref({\n      scale: 1,\n      deg: 0,\n      offsetX: 0,\n      offsetY: 0,\n      enableTransition: false,\n    })\n\n    const isSingle = computed(() => {\n      const { urlList } = props\n      return urlList.length <= 1\n    })\n\n    const isFirst = computed(() => {\n      return index.value === 0\n    })\n\n    const isLast = computed(() => {\n      return index.value === props.urlList.length - 1\n    })\n\n    const currentImg = computed(() => {\n      return props.urlList[index.value]\n    })\n\n    const imgStyle = computed(() => {\n      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n      let translateX = offsetX / scale\n      let translateY = offsetY / scale\n\n      switch (deg % 360) {\n        case 90:\n        case -270:\n          ;[translateX, translateY] = [translateY, -translateX]\n          break\n        case 180:\n        case -180:\n          ;[translateX, translateY] = [-translateX, -translateY]\n          break\n        case 270:\n        case -90:\n          ;[translateX, translateY] = [-translateY, translateX]\n          break\n      }\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 === Mode.CONTAIN.name) {\n        style.maxWidth = style.maxHeight = '100%'\n      }\n      return style\n    })\n\n    function hide() {\n      unregisterEventListener()\n      emit('close')\n    }\n\n    function registerEventListener() {\n      const keydownHandler = rafThrottle((e: KeyboardEvent) => {\n        switch (e.code) {\n          // ESC\n          case EVENT_CODE.esc:\n            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 = rafThrottle(\n        (e: WheelEvent | any /* TODO: wheelDelta is deprecated */) => {\n          const delta = e.wheelDelta ? e.wheelDelta : -e.detail\n          if (delta > 0) {\n            handleActions('zoomIn', {\n              zoomRate: 1.2,\n              enableTransition: false,\n            })\n          } else {\n            handleActions('zoomOut', {\n              zoomRate: 1.2,\n              enableTransition: false,\n            })\n          }\n        }\n      )\n\n      scopeEventListener.run(() => {\n        useEventListener(document, 'keydown', keydownHandler)\n        useEventListener(document, mousewheelEventName, mousewheelHandler)\n      })\n    }\n\n    function unregisterEventListener() {\n      scopeEventListener.stop()\n    }\n\n    function handleImgLoad() {\n      loading.value = false\n    }\n\n    function handleImgError(e: Event) {\n      loading.value = false\n      ;(e.target as HTMLImageElement).alt = t('el.image.error')\n    }\n\n    function 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 = rafThrottle((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(\n        document,\n        'mousemove',\n        dragHandler\n      )\n      useEventListener(document, 'mouseup', () => {\n        removeMousemove()\n      })\n\n      e.preventDefault()\n    }\n\n    function reset() {\n      transform.value = {\n        scale: 1,\n        deg: 0,\n        offsetX: 0,\n        offsetY: 0,\n        enableTransition: false,\n      }\n    }\n\n    function toggleMode() {\n      if (loading.value) return\n\n      const modeNames = Object.keys(Mode)\n      const modeValues = Object.values(Mode)\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 = Mode[modeNames[nextIndex]]\n      reset()\n    }\n\n    function prev() {\n      if (isFirst.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value - 1 + len) % len\n    }\n\n    function next() {\n      if (isLast.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value + 1) % len\n    }\n\n    function handleActions(action: ImageViewerAction, options = {}) {\n      if (loading.value) return\n      const { zoomRate, rotateDeg, enableTransition } = {\n        zoomRate: 1.4,\n        rotateDeg: 90,\n        enableTransition: true,\n        ...options,\n      }\n      switch (action) {\n        case 'zoomOut':\n          if (transform.value.scale > 0.2) {\n            transform.value.scale = parseFloat(\n              (transform.value.scale / zoomRate).toFixed(3)\n            )\n          }\n          break\n        case 'zoomIn':\n          if (transform.value.scale < 7) {\n            transform.value.scale = parseFloat(\n              (transform.value.scale * zoomRate).toFixed(3)\n            )\n          }\n          break\n        case 'clockwise':\n          transform.value.deg += rotateDeg\n          break\n        case 'anticlockwise':\n          transform.value.deg -= rotateDeg\n          break\n      }\n      transform.value.enableTransition = enableTransition\n    }\n\n    watch(currentImg, () => {\n      nextTick(() => {\n        const $img = imgRefs.value[0]\n        if (!$img?.complete) {\n          loading.value = true\n        }\n      })\n    })\n\n    watch(index, (val) => {\n      reset()\n      emit('switch', val)\n    })\n\n    onMounted(() => {\n      registerEventListener()\n      // add tabindex then wrapper can be focusable via Javascript\n      // focus wrapper so arrow key can't cause inner scroll behavior underneath\n      wrapper.value?.focus?.()\n    })\n\n    return {\n      index,\n      wrapper,\n      imgRefs,\n      isSingle,\n      isFirst,\n      isLast,\n      currentImg,\n      imgStyle,\n      mode,\n      handleActions,\n      prev,\n      next,\n      hide,\n      toggleMode,\n      handleImgLoad,\n      handleImgError,\n      handleMouseDown,\n      ns,\n    }\n  },\n})\n</script>\n"],"names":["_normalizeStyle"],"mappings":";;;;;;;;;;;;AA+GA,MAAM,OAAO;AAAA,EACX,SAAS;AAAA,IACP,MAAM;AAAA,IACN,MAAM,QAAQ;AAAA;AAAA,EAEhB,UAAU;AAAA,IACR,MAAM;AAAA,IACN,MAAM,QAAQ;AAAA;AAAA;AAIlB,MAAM,sBAAsB,cAAc,mBAAmB;AAO7D,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,EAAE,MAAM;AACd,UAAM,KAAK,aAAa;AACxB,UAAM,UAAU;AAChB,UAAM,UAAU,IAAW;AAE3B,UAAM,qBAAqB;AAE3B,UAAM,UAAU,IAAI;AACpB,UAAM,QAAQ,IAAI,MAAM;AACxB,UAAM,OAAO,IAAI,KAAK;AACtB,UAAM,YAAY,IAAI;AAAA,MACpB,OAAO;AAAA,MACP,KAAK;AAAA,MACL,SAAS;AAAA,MACT,SAAS;AAAA,MACT,kBAAkB;AAAA;AAGpB,UAAM,WAAW,SAAS,MAAM;AAC9B,YAAM,EAAE,YAAY;AACpB,aAAO,QAAQ,UAAU;AAAA;AAG3B,UAAM,UAAU,SAAS,MAAM;AAC7B,aAAO,MAAM,UAAU;AAAA;AAGzB,UAAM,SAAS,SAAS,MAAM;AAC5B,aAAO,MAAM,UAAU,MAAM,QAAQ,SAAS;AAAA;AAGhD,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,MAAM,QAAQ,MAAM;AAAA;AAG7B,UAAM,WAAW,SAAS,MAAM;AAC9B,YAAM,EAAE,OAAO,KAAK,SAAS,SAAS,qBAAqB,UAAU;AACrE,UAAI,aAAa,UAAU;AAC3B,UAAI,aAAa,UAAU;AAE3B,cAAQ,MAAM;AAAA,aACP;AAAA,aACA;AACH;AAAC,WAAC,YAAY,cAAc,CAAC,YAAY,CAAC;AAC1C;AAAA,aACG;AAAA,aACA;AACH;AAAC,WAAC,YAAY,cAAc,CAAC,CAAC,YAAY,CAAC;AAC3C;AAAA,aACG;AAAA,aACA;AACH;AAAC,WAAC,YAAY,cAAc,CAAC,CAAC,YAAY;AAC1C;AAAA;AAGJ,YAAM,QAAuB;AAAA,QAC3B,WAAW,SAAS,iBAAiB,qBAAqB,iBAAiB;AAAA,QAC3E,YAAY,mBAAmB,kBAAkB;AAAA;AAEnD,UAAI,KAAK,MAAM,SAAS,KAAK,QAAQ,MAAM;AACzC,cAAM,WAAW,MAAM,YAAY;AAAA;AAErC,aAAO;AAAA;AAGT,oBAAgB;AACd;AACA,WAAK;AAAA;AAGP,qCAAiC;AAC/B,YAAM,iBAAiB,YAAY,CAAC,MAAqB;AACvD,gBAAQ,EAAE;AAAA,eAEH,WAAW;AACd;AACA;AAAA,eAEG,WAAW;AACd;AACA;AAAA,eAEG,WAAW;AACd;AACA;AAAA,eAEG,WAAW;AACd,0BAAc;AACd;AAAA,eAEG,WAAW;AACd;AACA;AAAA,eAEG,WAAW;AACd,0BAAc;AACd;AAAA;AAAA;AAGN,YAAM,oBAAoB,YACxB,CAAC,MAA6D;AAC5D,cAAM,QAAQ,EAAE,aAAa,EAAE,aAAa,CAAC,EAAE;AAC/C,YAAI,QAAQ,GAAG;AACb,wBAAc,UAAU;AAAA,YACtB,UAAU;AAAA,YACV,kBAAkB;AAAA;AAAA,eAEf;AACL,wBAAc,WAAW;AAAA,YACvB,UAAU;AAAA,YACV,kBAAkB;AAAA;AAAA;AAAA;AAM1B,yBAAmB,IAAI,MAAM;AAC3B,yBAAiB,UAAU,WAAW;AACtC,yBAAiB,UAAU,qBAAqB;AAAA;AAAA;AAIpD,uCAAmC;AACjC,yBAAmB;AAAA;AAGrB,6BAAyB;AACvB,cAAQ,QAAQ;AAAA;AAGlB,4BAAwB,GAAU;AAChC,cAAQ,QAAQ;AACf,MAAC,EAAE,OAA4B,MAAM,EAAE;AAAA;AAG1C,6BAAyB,GAAe;AACtC,UAAI,QAAQ,SAAS,EAAE,WAAW,KAAK,CAAC,QAAQ;AAAO;AACvD,gBAAU,MAAM,mBAAmB;AAEnC,YAAM,EAAE,SAAS,YAAY,UAAU;AACvC,YAAM,SAAS,EAAE;AACjB,YAAM,SAAS,EAAE;AAEjB,YAAM,cAAc,YAAY,CAAC,OAAmB;AAClD,kBAAU,QAAQ;AAAA,aACb,UAAU;AAAA,UACb,SAAS,UAAU,GAAG,QAAQ;AAAA,UAC9B,SAAS,UAAU,GAAG,QAAQ;AAAA;AAAA;AAGlC,YAAM,kBAAkB,iBACtB,UACA,aACA;AAEF,uBAAiB,UAAU,WAAW,MAAM;AAC1C;AAAA;AAGF,QAAE;AAAA;AAGJ,qBAAiB;AACf,gBAAU,QAAQ;AAAA,QAChB,OAAO;AAAA,QACP,KAAK;AAAA,QACL,SAAS;AAAA,QACT,SAAS;AAAA,QACT,kBAAkB;AAAA;AAAA;AAItB,0BAAsB;AACpB,UAAI,QAAQ;AAAO;AAEnB,YAAM,YAAY,OAAO,KAAK;AAC9B,YAAM,aAAa,OAAO,OAAO;AACjC,YAAM,cAAc,KAAK,MAAM;AAC/B,YAAM,SAAQ,WAAW,UAAU,CAAC,MAAM,EAAE,SAAS;AACrD,YAAM,YAAa,UAAQ,KAAK,UAAU;AAC1C,WAAK,QAAQ,KAAK,UAAU;AAC5B;AAAA;AAGF,oBAAgB;AACd,UAAI,QAAQ,SAAS,CAAC,MAAM;AAAU;AACtC,YAAM,MAAM,MAAM,QAAQ;AAC1B,YAAM,QAAS,OAAM,QAAQ,IAAI,OAAO;AAAA;AAG1C,oBAAgB;AACd,UAAI,OAAO,SAAS,CAAC,MAAM;AAAU;AACrC,YAAM,MAAM,MAAM,QAAQ;AAC1B,YAAM,QAAS,OAAM,QAAQ,KAAK;AAAA;AAGpC,2BAAuB,QAA2B,UAAU,IAAI;AAC9D,UAAI,QAAQ;AAAO;AACnB,YAAM,EAAE,UAAU,WAAW,qBAAqB;AAAA,QAChD,UAAU;AAAA,QACV,WAAW;AAAA,QACX,kBAAkB;AAAA,WACf;AAAA;AAEL,cAAQ;AAAA,aACD;AACH,cAAI,UAAU,MAAM,QAAQ,KAAK;AAC/B,sBAAU,MAAM,QAAQ,WACrB,WAAU,MAAM,QAAQ,UAAU,QAAQ;AAAA;AAG/C;AAAA,aACG;AACH,cAAI,UAAU,MAAM,QAAQ,GAAG;AAC7B,sBAAU,MAAM,QAAQ,WACrB,WAAU,MAAM,QAAQ,UAAU,QAAQ;AAAA;AAG/C;AAAA,aACG;AACH,oBAAU,MAAM,OAAO;AACvB;AAAA,aACG;AACH,oBAAU,MAAM,OAAO;AACvB;AAAA;AAEJ,gBAAU,MAAM,mBAAmB;AAAA;AAGrC,UAAM,YAAY,MAAM;AACtB,eAAS,MAAM;AACb,cAAM,OAAO,QAAQ,MAAM;AAC3B,YAAI,iBAAiB;AACnB,kBAAQ,QAAQ;AAAA;AAAA;AAAA;AAKtB,UAAM,OAAO,CAAC,QAAQ;AACpB;AACA,WAAK,UAAU;AAAA;AAGjB,cAAU,MAAM;AACd;AAGA;AAAe;AAGjB;AAAO;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;;;;;;AAjVI;AAAA;AAzES;AACZ,QACA;AAAK,QACL;AAAS;;AAEV;AAAa;AAAoB;;AAEjC;AAGO,2BAFK;AAAG;AAAqC;;AAClD;AAAkB;AAAA;;;;WAGpB;AAAA;AACyB;AAUhB;AARC;AAAoB;AAAyB,cAAsB,QAAG,EAAE;AAAA;;;;AAO9E;AAAuB;AAAA;;;;aAEzB;AAAA;AACQ;AAAoB;AAAyB,cAAsB,QAAG,EAAE;AAAA;;;;AAO9E;AAAwB;AAAA;;;;;;AAGZ;AAqBV,2BApBK;AAAG;;AACZ;AAAa;;AACX;AAAe;;;AACD;;;;;AAEC;;;AACF;;;;;AAEF;;AACX;AAC+B;AAA7B;;;eAEF;AAAA;AAAW;;AACX;AAAe;;;AACG;;;;;AAEH;;;AACI;;;;;WAIvB;AAAA;AAcM,2BAbK;AAAE;;;;;AAIA,cACR,aAAQ;AAAA,cACR,KAAK;AAAA,cACL,KAAK;AAAA,cACL;AAAO,cACP,OAAIA;AAAA,cACJ;AAAO,cACP,gBAAS;AAAE;yBARO;AAAA;;;WAWvB;AAAA;;;;;;;;;;;"}

package/es/components/image-viewer/style/css.mjs

@@ -1,2 +1,3 @@
+import '../../base/style/css.mjs';
 import 'element-plus/theme-chalk/el-image-viewer.css';
 //# sourceMappingURL=css.mjs.map

package/es/components/image-viewer/style/css.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -1,2 +1,3 @@
+import '../../base/style/index.mjs';
 import 'element-plus/theme-chalk/src/image-viewer.scss';
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/es/components/index.mjs

@@ -63,15 +63,13 @@ export { ElTransfer } from './transfer/index.mjs';
 export { ElTree } from './tree/index.mjs';
 export { ElTreeV2 } from './tree-v2/index.mjs';
 export { ElUpload } from './upload/index.mjs';
+import './virtual-list/index.mjs';
 export { ElInfiniteScroll } from './infinite-scroll/index.mjs';
 export { ElLoading, ElLoadingDirective, ElLoadingService } from './loading/index.mjs';
 export { ElMessage } from './message/index.mjs';
 export { ElMessageBox } from './message-box/index.mjs';
 export { ElNotification } from './notification/index.mjs';
 export { ElPopover, ElPopoverDirective } from './popover/index.mjs';
-export { default as DynamicSizeList } from './virtual-list/src/components/dynamic-size-list.mjs';
-export { default as FixedSizeGrid } from './virtual-list/src/components/fixed-size-grid.mjs';
-export { default as DynamicSizeGrid } from './virtual-list/src/components/dynamic-size-grid.mjs';
 export { affixEmits, affixProps } from './affix/src/affix.mjs';
 export { alertEffects, alertEmits, alertProps } from './alert/src/alert.mjs';
 export { avatarEmits, avatarProps } from './avatar/src/avatar.mjs';
@@ -109,6 +107,7 @@ export { popconfirmProps } from './popconfirm/src/popconfirm.mjs';
 export { default as ElPopperArrow } from './popper/src/arrow.mjs';
 export { default as ElPopperTrigger } from './popper/src/trigger.mjs';
 export { default as ElPopperContent } from './popper/src/content.mjs';
+export { useDeprecateAppendToBody } from './popper/src/deprecation.mjs';
 export { Effect, usePopperArrowProps, usePopperContentProps, usePopperCoreConfigProps, usePopperProps, usePopperTriggerProps } from './popper/src/popper.mjs';
 export { POPPER_CONTENT_INJECTION_KEY, POPPER_INJECTION_KEY } from './popper/src/tokens.mjs';
 export { progressProps } from './progress/src/progress.mjs';
@@ -120,7 +119,7 @@ export { IconComponentMap, IconMap, resultProps } from './result/src/result.mjs'
 export { rowProps } from './row/src/row.mjs';
 export { BAR_MAP, renderThumbStyle } from './scrollbar/src/util.mjs';
 export { scrollbarEmits, scrollbarProps } from './scrollbar/src/scrollbar.mjs';
-export { barProps } from './scrollbar/src/bar.mjs';
+export { thumbProps } from './scrollbar/src/thumb.mjs';
 export { selectGroupKey, selectKey } from './select/src/token.mjs';
 export { selectV2InjectionKey } from './select-v2/src/token.mjs';
 export { skeletonProps } from './skeleton/src/skeleton.mjs';
@@ -143,6 +142,9 @@ export { useTooltipContentProps, useTooltipProps, useTooltipTriggerProps } from
 export { TOOLTIP_INJECTION_KEY } from './tooltip/src/tokens.mjs';
 export { CHANGE_EVENT } from '../utils/constants.mjs';
 export { default as FixedSizeList } from './virtual-list/src/components/fixed-size-list.mjs';
+export { default as DynamicSizeList } from './virtual-list/src/components/dynamic-size-list.mjs';
+export { default as FixedSizeGrid } from './virtual-list/src/components/fixed-size-grid.mjs';
+export { default as DynamicSizeGrid } from './virtual-list/src/components/dynamic-size-grid.mjs';
 export { virtualizedGridProps, virtualizedListProps, virtualizedProps, virtualizedScrollbarProps } from './virtual-list/src/props.mjs';
 export { messageEmits, messageProps, messageTypes } from './message/src/message.mjs';
 export { notificationEmits, notificationProps, notificationTypes } from './notification/src/notification.mjs';

package/es/components/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/components/infinite-scroll/src/index.mjs

@@ -1,7 +1,7 @@
 import { nextTick } from 'vue';
 import { isFunction } from '@vue/shared';
 import throttle from 'lodash/throttle';
-import { getScrollContainer, getOffsetTopDistance } from '../../../utils/dom.mjs';
+import { getOffsetTopDistance, getScrollContainer } from '../../../utils/dom.mjs';
 import { throwError } from '../../../utils/error.mjs';
 
 const SCOPE = "ElInfiniteScroll";

package/es/components/infinite-scroll/style/css.mjs

@@ -1,2 +1,3 @@
+import '../../base/style/css.mjs';
 import 'element-plus/theme-chalk/el-infinite-scroll.css';
 //# sourceMappingURL=css.mjs.map

package/es/components/infinite-scroll/style/css.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/es/components/infinite-scroll/style/index.mjs

@@ -1,2 +1,3 @@
+import '../../base/style/index.mjs';
 import 'element-plus/theme-chalk/src/infinite-scroll.scss';
 //# sourceMappingURL=index.mjs.map

package/es/components/infinite-scroll/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/es/components/input/src/input.mjs

@@ -1,16 +1,8 @@
 import { isString } from '@vue/shared';
 import { buildProps, definePropType, mutable } from '../../../utils/props.mjs';
 import { UPDATE_MODEL_EVENT } from '../../../utils/constants.mjs';
-import 'vue';
-import 'lodash/fromPairs';
+import '../../../hooks/index.mjs';
 import { useSizeProp } from '../../../hooks/use-common-props/index.mjs';
-import '../../../hooks/use-global-config/index.mjs';
-import 'lodash/get';
-import '@vueuse/core';
-import 'lodash/isEqualWith';
-import '../../../hooks/use-modal/index.mjs';
-import '../../../hooks/use-model-toggle/index.mjs';
-import '../../../hooks/use-delayed-toggle/index.mjs';
 
 const inputProps = buildProps({
   size: useSizeProp,

package/es/components/input/src/input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"input.mjs","sources":["../../../../../../packages/components/input/src/input.ts"],"sourcesContent":["import { isString } from '@vue/shared'\nimport { buildProps, definePropType, mutable } from '@element-plus/utils/props'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { useSizeProp } from '@element-plus/hooks'\nimport type { StyleValue } from '@element-plus/utils/types'\nimport type { ExtractPropTypes, Component } from 'vue'\n\ntype AutoSize = { minRows?: number; maxRows?: number } | boolean\n\nexport const inputProps = buildProps({\n  size: useSizeProp,\n  disabled: Boolean,\n  modelValue: {\n    type: definePropType<string | number | null | undefined>(undefined),\n    default: '',\n  },\n  type: {\n    type: String,\n    default: 'text',\n  },\n  resize: {\n    type: String,\n    values: ['none', 'both', 'horizontal', 'vertical'],\n  },\n  autosize: {\n    type: definePropType<AutoSize>([Boolean, Object]),\n    default: false,\n  },\n  autocomplete: {\n    type: String,\n    default: 'off',\n  },\n  placeholder: {\n    type: String,\n  },\n  form: {\n    type: String,\n    default: '',\n  },\n  readonly: {\n    type: Boolean,\n    default: false,\n  },\n  clearable: {\n    type: Boolean,\n    default: false,\n  },\n  showPassword: {\n    type: Boolean,\n    default: false,\n  },\n  showWordLimit: {\n    type: Boolean,\n    default: false,\n  },\n  suffixIcon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: '',\n  },\n  prefixIcon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: '',\n  },\n  label: {\n    type: String,\n  },\n  tabindex: {\n    type: [Number, String],\n  },\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n  inputStyle: {\n    type: definePropType<StyleValue>([Object, Array, String]),\n    default: () => mutable({} as const),\n  },\n} as const)\nexport type InputProps = ExtractPropTypes<typeof inputProps>\n\nexport const inputEmits = {\n  [UPDATE_MODEL_EVENT]: (value: string) => isString(value),\n  input: (value: string) => isString(value),\n  change: (value: string) => isString(value),\n  focus: (evt: FocusEvent) => evt instanceof FocusEvent,\n  blur: (evt: FocusEvent) => evt instanceof FocusEvent,\n  clear: () => true,\n  mouseleave: (evt: MouseEvent) => evt instanceof MouseEvent,\n  mouseenter: (evt: MouseEvent) => evt instanceof MouseEvent,\n  keydown: (evt: KeyboardEvent) => evt instanceof KeyboardEvent,\n  compositionstart: (evt: CompositionEvent) => evt instanceof CompositionEvent,\n  compositionupdate: (evt: CompositionEvent) => evt instanceof CompositionEvent,\n  compositionend: (evt: CompositionEvent) => evt instanceof CompositionEvent,\n}\nexport type InputEmits = typeof inputEmits\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"input.mjs","sources":["../../../../../../packages/components/input/src/input.ts"],"sourcesContent":["import { isString } from '@vue/shared'\nimport { buildProps, definePropType, mutable } from '@element-plus/utils/props'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { useSizeProp } from '@element-plus/hooks'\nimport type { StyleValue } from '@element-plus/utils/types'\nimport type { ExtractPropTypes, Component } from 'vue'\n\ntype AutoSize = { minRows?: number; maxRows?: number } | boolean\n\nexport const inputProps = buildProps({\n  size: useSizeProp,\n  disabled: Boolean,\n  modelValue: {\n    type: definePropType<string | number | null | undefined>(undefined),\n    default: '',\n  },\n  type: {\n    type: String,\n    default: 'text',\n  },\n  resize: {\n    type: String,\n    values: ['none', 'both', 'horizontal', 'vertical'],\n  },\n  autosize: {\n    type: definePropType<AutoSize>([Boolean, Object]),\n    default: false,\n  },\n  autocomplete: {\n    type: String,\n    default: 'off',\n  },\n  placeholder: {\n    type: String,\n  },\n  form: {\n    type: String,\n    default: '',\n  },\n  readonly: {\n    type: Boolean,\n    default: false,\n  },\n  clearable: {\n    type: Boolean,\n    default: false,\n  },\n  showPassword: {\n    type: Boolean,\n    default: false,\n  },\n  showWordLimit: {\n    type: Boolean,\n    default: false,\n  },\n  suffixIcon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: '',\n  },\n  prefixIcon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: '',\n  },\n  label: {\n    type: String,\n  },\n  tabindex: {\n    type: [Number, String],\n  },\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n  inputStyle: {\n    type: definePropType<StyleValue>([Object, Array, String]),\n    default: () => mutable({} as const),\n  },\n} as const)\nexport type InputProps = ExtractPropTypes<typeof inputProps>\n\nexport const inputEmits = {\n  [UPDATE_MODEL_EVENT]: (value: string) => isString(value),\n  input: (value: string) => isString(value),\n  change: (value: string) => isString(value),\n  focus: (evt: FocusEvent) => evt instanceof FocusEvent,\n  blur: (evt: FocusEvent) => evt instanceof FocusEvent,\n  clear: () => true,\n  mouseleave: (evt: MouseEvent) => evt instanceof MouseEvent,\n  mouseenter: (evt: MouseEvent) => evt instanceof MouseEvent,\n  keydown: (evt: KeyboardEvent) => evt instanceof KeyboardEvent,\n  compositionstart: (evt: CompositionEvent) => evt instanceof CompositionEvent,\n  compositionupdate: (evt: CompositionEvent) => evt instanceof CompositionEvent,\n  compositionend: (evt: CompositionEvent) => evt instanceof CompositionEvent,\n}\nexport type InputEmits = typeof inputEmits\n"],"names":[],"mappings":";;;;;;AAIY,MAAC,UAAU,GAAG,UAAU,CAAC;AACrC,EAAE,IAAI,EAAE,WAAW;AACnB,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;AAChC,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC;AACtD,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAC3C,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AACjD,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,CAAC,EAAE;AACS,MAAC,UAAU,GAAG;AAC1B,EAAE,CAAC,kBAAkB,GAAG,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC;AAClD,EAAE,KAAK,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC;AACnC,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC;AACpC,EAAE,KAAK,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,UAAU;AAC3C,EAAE,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,UAAU;AAC1C,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB,EAAE,UAAU,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,UAAU;AAChD,EAAE,UAAU,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,UAAU;AAChD,EAAE,OAAO,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,aAAa;AAChD,EAAE,gBAAgB,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,gBAAgB;AAC5D,EAAE,iBAAiB,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,gBAAgB;AAC7D,EAAE,cAAc,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,gBAAgB;AAC1D;;;;"}