@element-plus/nightly 0.0.20240730 → 0.0.20240731

package/lib/components/color-picker/src/composables/use-alpha-slider.js

@@ -5,20 +5,28 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 require('../../../../utils/index.js');
 require('../../../../hooks/index.js');
+require('../../../../constants/index.js');
 var draggable = require('../utils/draggable.js');
+var index = require('../../../../hooks/use-locale/index.js');
 var position = require('../../../../utils/dom/position.js');
-var index = require('../../../../hooks/use-namespace/index.js');
+var aria = require('../../../../constants/aria.js');
+var index$1 = require('../../../../hooks/use-namespace/index.js');
 var style = require('../../../../utils/dom/style.js');
 
 const useAlphaSlider = (props) => {
   const instance = vue.getCurrentInstance();
+  const { t } = index.useLocale();
   const thumb = vue.shallowRef();
   const bar = vue.shallowRef();
+  const alpha = vue.computed(() => props.color.get("alpha"));
+  const alphaLabel = vue.computed(() => t("el.colorpicker.alphaLabel"));
   function handleClick(event) {
+    var _a;
     const target = event.target;
     if (target !== thumb.value) {
       handleDrag(event);
     }
+    (_a = thumb.value) == null ? void 0 : _a.focus();
   }
   function handleDrag(event) {
     if (!bar.value || !thumb.value)
@@ -38,11 +46,37 @@ const useAlphaSlider = (props) => {
       props.color.set("alpha", Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 100));
     }
   }
+  function handleKeydown(event) {
+    const { code, shiftKey } = event;
+    const step = shiftKey ? 10 : 1;
+    switch (code) {
+      case aria.EVENT_CODE.left:
+      case aria.EVENT_CODE.down:
+        event.preventDefault();
+        event.stopPropagation();
+        incrementPosition(-step);
+        break;
+      case aria.EVENT_CODE.right:
+      case aria.EVENT_CODE.up:
+        event.preventDefault();
+        event.stopPropagation();
+        incrementPosition(step);
+        break;
+    }
+  }
+  function incrementPosition(step) {
+    let next = alpha.value + step;
+    next = next < 0 ? 0 : next > 100 ? 100 : next;
+    props.color.set("alpha", next);
+  }
   return {
     thumb,
     bar,
+    alpha,
+    alphaLabel,
     handleDrag,
-    handleClick
+    handleClick,
+    handleKeydown
   };
 };
 const useAlphaSliderDOM = (props, {
@@ -51,7 +85,7 @@ const useAlphaSliderDOM = (props, {
   handleDrag
 }) => {
   const instance = vue.getCurrentInstance();
-  const ns = index.useNamespace("color-alpha-slider");
+  const ns = index$1.useNamespace("color-alpha-slider");
   const thumbLeft = vue.ref(0);
   const thumbTop = vue.ref(0);
   const background = vue.ref();

package/lib/components/color-picker/src/composables/use-alpha-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-alpha-slider.js","sources":["../../../../../../../packages/components/color-picker/src/composables/use-alpha-slider.ts"],"sourcesContent":["import {\n  computed,\n  getCurrentInstance,\n  onMounted,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { addUnit, getClientXY } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { draggable } from '../utils/draggable'\n\nimport type { AlphaSliderProps } from '../props/alpha-slider'\n\nexport const useAlphaSlider = (props: AlphaSliderProps) => {\n  const instance = getCurrentInstance()!\n\n  const thumb = shallowRef<HTMLElement>()\n  const bar = shallowRef<HTMLElement>()\n\n  function handleClick(event: MouseEvent | TouchEvent) {\n    const target = event.target\n\n    if (target !== thumb.value) {\n      handleDrag(event)\n    }\n  }\n\n  function handleDrag(event: MouseEvent | TouchEvent) {\n    if (!bar.value || !thumb.value) return\n\n    const el = instance.vnode.el as HTMLElement\n    const rect = el.getBoundingClientRect()\n    const { clientX, clientY } = getClientXY(event)\n\n    if (!props.vertical) {\n      let left = clientX - rect.left\n      left = Math.max(thumb.value.offsetWidth / 2, left)\n      left = Math.min(left, rect.width - thumb.value.offsetWidth / 2)\n\n      props.color.set(\n        'alpha',\n        Math.round(\n          ((left - thumb.value.offsetWidth / 2) /\n            (rect.width - thumb.value.offsetWidth)) *\n            100\n        )\n      )\n    } else {\n      let top = clientY - rect.top\n      top = Math.max(thumb.value.offsetHeight / 2, top)\n      top = Math.min(top, rect.height - thumb.value.offsetHeight / 2)\n\n      props.color.set(\n        'alpha',\n        Math.round(\n          ((top - thumb.value.offsetHeight / 2) /\n            (rect.height - thumb.value.offsetHeight)) *\n            100\n        )\n      )\n    }\n  }\n\n  return {\n    thumb,\n    bar,\n    handleDrag,\n    handleClick,\n  }\n}\n\nexport const useAlphaSliderDOM = (\n  props: AlphaSliderProps,\n  {\n    bar,\n    thumb,\n    handleDrag,\n  }: Pick<ReturnType<typeof useAlphaSlider>, 'bar' | 'thumb' | 'handleDrag'>\n) => {\n  const instance = getCurrentInstance()!\n\n  const ns = useNamespace('color-alpha-slider')\n  // refs\n\n  const thumbLeft = ref(0)\n  const thumbTop = ref(0)\n  const background = ref<string>()\n\n  function getThumbLeft() {\n    if (!thumb.value) return 0\n\n    if (props.vertical) return 0\n    const el = instance.vnode.el\n    const alpha = props.color.get('alpha')\n\n    if (!el) return 0\n    return Math.round(\n      (alpha * (el.offsetWidth - thumb.value.offsetWidth / 2)) / 100\n    )\n  }\n\n  function getThumbTop() {\n    if (!thumb.value) return 0\n\n    const el = instance.vnode.el\n    if (!props.vertical) return 0\n    const alpha = props.color.get('alpha')\n\n    if (!el) return 0\n    return Math.round(\n      (alpha * (el.offsetHeight - thumb.value.offsetHeight / 2)) / 100\n    )\n  }\n\n  function getBackground() {\n    if (props.color && props.color.value) {\n      const { r, g, b } = props.color.toRgb()\n      return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`\n    }\n    return ''\n  }\n\n  function update() {\n    thumbLeft.value = getThumbLeft()\n    thumbTop.value = getThumbTop()\n    background.value = getBackground()\n  }\n\n  onMounted(() => {\n    if (!bar.value || !thumb.value) return\n\n    const dragConfig = {\n      drag: (event: MouseEvent | TouchEvent) => {\n        handleDrag(event)\n      },\n      end: (event: MouseEvent | TouchEvent) => {\n        handleDrag(event)\n      },\n    }\n\n    draggable(bar.value, dragConfig)\n    draggable(thumb.value, dragConfig)\n    update()\n  })\n\n  watch(\n    () => props.color.get('alpha'),\n    () => update()\n  )\n  watch(\n    () => props.color.value,\n    () => update()\n  )\n\n  const rootKls = computed(() => [ns.b(), ns.is('vertical', props.vertical)])\n  const barKls = computed(() => ns.e('bar'))\n  const thumbKls = computed(() => ns.e('thumb'))\n  const barStyle = computed(() => ({ background: background.value }))\n  const thumbStyle = computed(() => ({\n    left: addUnit(thumbLeft.value),\n    top: addUnit(thumbTop.value),\n  }))\n\n  return { rootKls, barKls, barStyle, thumbKls, thumbStyle, update }\n}\n"],"names":["getCurrentInstance","shallowRef","getClientXY","useNamespace","ref","onMounted","draggable","watch","computed","addUnit"],"mappings":"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"}
+{"version":3,"file":"use-alpha-slider.js","sources":["../../../../../../../packages/components/color-picker/src/composables/use-alpha-slider.ts"],"sourcesContent":["import {\n  computed,\n  getCurrentInstance,\n  onMounted,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { addUnit, getClientXY } from '@element-plus/utils'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { draggable } from '../utils/draggable'\n\nimport type { AlphaSliderProps } from '../props/alpha-slider'\n\nexport const useAlphaSlider = (props: AlphaSliderProps) => {\n  const instance = getCurrentInstance()!\n  const { t } = useLocale()\n\n  const thumb = shallowRef<HTMLElement>()\n  const bar = shallowRef<HTMLElement>()\n\n  const alpha = computed(() => props.color.get('alpha'))\n  const alphaLabel = computed(() => t('el.colorpicker.alphaLabel'))\n\n  function handleClick(event: MouseEvent | TouchEvent) {\n    const target = event.target\n\n    if (target !== thumb.value) {\n      handleDrag(event)\n    }\n    thumb.value?.focus()\n  }\n\n  function handleDrag(event: MouseEvent | TouchEvent) {\n    if (!bar.value || !thumb.value) return\n\n    const el = instance.vnode.el as HTMLElement\n    const rect = el.getBoundingClientRect()\n    const { clientX, clientY } = getClientXY(event)\n\n    if (!props.vertical) {\n      let left = clientX - rect.left\n      left = Math.max(thumb.value.offsetWidth / 2, left)\n      left = Math.min(left, rect.width - thumb.value.offsetWidth / 2)\n\n      props.color.set(\n        'alpha',\n        Math.round(\n          ((left - thumb.value.offsetWidth / 2) /\n            (rect.width - thumb.value.offsetWidth)) *\n            100\n        )\n      )\n    } else {\n      let top = clientY - rect.top\n      top = Math.max(thumb.value.offsetHeight / 2, top)\n      top = Math.min(top, rect.height - thumb.value.offsetHeight / 2)\n\n      props.color.set(\n        'alpha',\n        Math.round(\n          ((top - thumb.value.offsetHeight / 2) /\n            (rect.height - thumb.value.offsetHeight)) *\n            100\n        )\n      )\n    }\n  }\n\n  function handleKeydown(event: KeyboardEvent) {\n    const { code, shiftKey } = event\n    const step = shiftKey ? 10 : 1\n\n    switch (code) {\n      case EVENT_CODE.left:\n      case EVENT_CODE.down:\n        event.preventDefault()\n        event.stopPropagation()\n        incrementPosition(-step)\n        break\n      case EVENT_CODE.right:\n      case EVENT_CODE.up:\n        event.preventDefault()\n        event.stopPropagation()\n        incrementPosition(step)\n        break\n    }\n  }\n\n  function incrementPosition(step: number) {\n    let next = alpha.value + step\n    next = next < 0 ? 0 : next > 100 ? 100 : next\n    props.color.set('alpha', next)\n  }\n\n  return {\n    thumb,\n    bar,\n    alpha,\n    alphaLabel,\n    handleDrag,\n    handleClick,\n    handleKeydown,\n  }\n}\n\nexport const useAlphaSliderDOM = (\n  props: AlphaSliderProps,\n  {\n    bar,\n    thumb,\n    handleDrag,\n  }: Pick<ReturnType<typeof useAlphaSlider>, 'bar' | 'thumb' | 'handleDrag'>\n) => {\n  const instance = getCurrentInstance()!\n\n  const ns = useNamespace('color-alpha-slider')\n  // refs\n\n  const thumbLeft = ref(0)\n  const thumbTop = ref(0)\n  const background = ref<string>()\n\n  function getThumbLeft() {\n    if (!thumb.value) return 0\n\n    if (props.vertical) return 0\n    const el = instance.vnode.el\n    const alpha = props.color.get('alpha')\n\n    if (!el) return 0\n    return Math.round(\n      (alpha * (el.offsetWidth - thumb.value.offsetWidth / 2)) / 100\n    )\n  }\n\n  function getThumbTop() {\n    if (!thumb.value) return 0\n\n    const el = instance.vnode.el\n    if (!props.vertical) return 0\n    const alpha = props.color.get('alpha')\n\n    if (!el) return 0\n    return Math.round(\n      (alpha * (el.offsetHeight - thumb.value.offsetHeight / 2)) / 100\n    )\n  }\n\n  function getBackground() {\n    if (props.color && props.color.value) {\n      const { r, g, b } = props.color.toRgb()\n      return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`\n    }\n    return ''\n  }\n\n  function update() {\n    thumbLeft.value = getThumbLeft()\n    thumbTop.value = getThumbTop()\n    background.value = getBackground()\n  }\n\n  onMounted(() => {\n    if (!bar.value || !thumb.value) return\n\n    const dragConfig = {\n      drag: (event: MouseEvent | TouchEvent) => {\n        handleDrag(event)\n      },\n      end: (event: MouseEvent | TouchEvent) => {\n        handleDrag(event)\n      },\n    }\n\n    draggable(bar.value, dragConfig)\n    draggable(thumb.value, dragConfig)\n    update()\n  })\n\n  watch(\n    () => props.color.get('alpha'),\n    () => update()\n  )\n  watch(\n    () => props.color.value,\n    () => update()\n  )\n\n  const rootKls = computed(() => [ns.b(), ns.is('vertical', props.vertical)])\n  const barKls = computed(() => ns.e('bar'))\n  const thumbKls = computed(() => ns.e('thumb'))\n  const barStyle = computed(() => ({ background: background.value }))\n  const thumbStyle = computed(() => ({\n    left: addUnit(thumbLeft.value),\n    top: addUnit(thumbTop.value),\n  }))\n\n  return { rootKls, barKls, barStyle, thumbKls, thumbStyle, update }\n}\n"],"names":["getCurrentInstance","useLocale","shallowRef","computed","getClientXY","EVENT_CODE","useNamespace","ref","onMounted","draggable","watch","addUnit"],"mappings":"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"}

package/lib/components/image-viewer/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('../../utils/index.js');
-var imageViewer$1 = require('./src/image-viewer.js');
-var imageViewer = require('./src/image-viewer2.js');
+var imageViewer$1 = require('./src/image-viewer2.js');
+var imageViewer = require('./src/image-viewer.js');
 var install = require('../../utils/vue/install.js');
 
 const ElImageViewer = install.withInstall(imageViewer$1["default"]);

package/lib/components/image-viewer/src/image-viewer.js

@@ -2,410 +2,55 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
-var core = require('@vueuse/core');
-var lodashUnified = require('lodash-unified');
-require('../../../hooks/index.js');
-require('../../../constants/index.js');
 require('../../../utils/index.js');
-var index$3 = require('../../icon/index.js');
-var iconsVue = require('@element-plus/icons-vue');
-var imageViewer = require('./image-viewer2.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
-var index = require('../../../hooks/use-locale/index.js');
-var index$1 = require('../../../hooks/use-namespace/index.js');
-var index$2 = require('../../../hooks/use-z-index/index.js');
-var aria = require('../../../constants/aria.js');
-var objects = require('../../../utils/objects.js');
+var runtime = require('../../../utils/vue/props/runtime.js');
+var typescript = require('../../../utils/typescript.js');
+var types = require('../../../utils/types.js');
 
-const _hoisted_1 = ["src", "crossorigin"];
-const __default__ = vue.defineComponent({
-  name: "ElImageViewer"
-});
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: imageViewer.imageViewerProps,
-  emits: imageViewer.imageViewerEmits,
-  setup(__props, { expose, emit }) {
-    var _a;
-    const props = __props;
-    const modes = {
-      CONTAIN: {
-        name: "contain",
-        icon: vue.markRaw(iconsVue.FullScreen)
-      },
-      ORIGINAL: {
-        name: "original",
-        icon: vue.markRaw(iconsVue.ScaleToOriginal)
-      }
-    };
-    const { t } = index.useLocale();
-    const ns = index$1.useNamespace("image-viewer");
-    const { nextZIndex } = index$2.useZIndex();
-    const wrapper = vue.ref();
-    const imgRefs = vue.ref([]);
-    const scopeEventListener = vue.effectScope();
-    const loading = vue.ref(true);
-    const activeIndex = vue.ref(props.initialIndex);
-    const mode = vue.shallowRef(modes.CONTAIN);
-    const transform = vue.ref({
-      scale: 1,
-      deg: 0,
-      offsetX: 0,
-      offsetY: 0,
-      enableTransition: false
-    });
-    const zIndex = vue.ref((_a = props.zIndex) != null ? _a : nextZIndex());
-    const isSingle = vue.computed(() => {
-      const { urlList } = props;
-      return urlList.length <= 1;
-    });
-    const isFirst = vue.computed(() => {
-      return activeIndex.value === 0;
-    });
-    const isLast = vue.computed(() => {
-      return activeIndex.value === props.urlList.length - 1;
-    });
-    const currentImg = vue.computed(() => {
-      return props.urlList[activeIndex.value];
-    });
-    const arrowPrevKls = vue.computed(() => [
-      ns.e("btn"),
-      ns.e("prev"),
-      ns.is("disabled", !props.infinite && isFirst.value)
-    ]);
-    const arrowNextKls = vue.computed(() => [
-      ns.e("btn"),
-      ns.e("next"),
-      ns.is("disabled", !props.infinite && isLast.value)
-    ]);
-    const imgStyle = vue.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) 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 = lodashUnified.throttle((e) => {
-        switch (e.code) {
-          case aria.EVENT_CODE.esc:
-            props.closeOnPressEscape && hide();
-            break;
-          case aria.EVENT_CODE.space:
-            toggleMode();
-            break;
-          case aria.EVENT_CODE.left:
-            prev();
-            break;
-          case aria.EVENT_CODE.up:
-            handleActions("zoomIn");
-            break;
-          case aria.EVENT_CODE.right:
-            next();
-            break;
-          case aria.EVENT_CODE.down:
-            handleActions("zoomOut");
-            break;
-        }
-      });
-      const mousewheelHandler = lodashUnified.throttle((e) => {
-        const delta = e.deltaY || e.deltaX;
-        handleActions(delta < 0 ? "zoomIn" : "zoomOut", {
-          zoomRate: props.zoomRate,
-          enableTransition: false
-        });
-      });
-      scopeEventListener.run(() => {
-        core.useEventListener(document, "keydown", keydownHandler);
-        core.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 = lodashUnified.throttle((ev) => {
-        transform.value = {
-          ...transform.value,
-          offsetX: offsetX + ev.pageX - startX,
-          offsetY: offsetY + ev.pageY - startY
-        };
-      });
-      const removeMousemove = core.useEventListener(document, "mousemove", dragHandler);
-      core.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 = objects.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;
-    }
-    vue.watch(currentImg, () => {
-      vue.nextTick(() => {
-        const $img = imgRefs.value[0];
-        if (!($img == null ? void 0 : $img.complete)) {
-          loading.value = true;
-        }
-      });
-    });
-    vue.watch(activeIndex, (val) => {
-      reset();
-      emit("switch", val);
-    });
-    vue.onMounted(() => {
-      var _a2, _b;
-      registerEventListener();
-      (_b = (_a2 = wrapper.value) == null ? void 0 : _a2.focus) == null ? void 0 : _b.call(_a2);
-    });
-    expose({
-      setActiveItem
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.Teleport, {
-        to: "body",
-        disabled: !_ctx.teleported
-      }, [
-        vue.createVNode(vue.Transition, {
-          name: "viewer-fade",
-          appear: ""
-        }, {
-          default: vue.withCtx(() => [
-            vue.createElementVNode("div", {
-              ref_key: "wrapper",
-              ref: wrapper,
-              tabindex: -1,
-              class: vue.normalizeClass(vue.unref(ns).e("wrapper")),
-              style: vue.normalizeStyle({ zIndex: zIndex.value })
-            }, [
-              vue.createElementVNode("div", {
-                class: vue.normalizeClass(vue.unref(ns).e("mask")),
-                onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => _ctx.hideOnClickModal && hide(), ["self"]))
-              }, null, 2),
-              vue.createCommentVNode(" CLOSE "),
-              vue.createElementVNode("span", {
-                class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("close")]),
-                onClick: hide
-              }, [
-                vue.createVNode(vue.unref(index$3.ElIcon), null, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(vue.unref(iconsVue.Close))
-                  ]),
-                  _: 1
-                })
-              ], 2),
-              vue.createCommentVNode(" ARROW "),
-              !vue.unref(isSingle) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                vue.createElementVNode("span", {
-                  class: vue.normalizeClass(vue.unref(arrowPrevKls)),
-                  onClick: prev
-                }, [
-                  vue.createVNode(vue.unref(index$3.ElIcon), null, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(iconsVue.ArrowLeft))
-                    ]),
-                    _: 1
-                  })
-                ], 2),
-                vue.createElementVNode("span", {
-                  class: vue.normalizeClass(vue.unref(arrowNextKls)),
-                  onClick: next
-                }, [
-                  vue.createVNode(vue.unref(index$3.ElIcon), null, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(iconsVue.ArrowRight))
-                    ]),
-                    _: 1
-                  })
-                ], 2)
-              ], 64)) : vue.createCommentVNode("v-if", true),
-              vue.createCommentVNode(" ACTIONS "),
-              vue.createElementVNode("div", {
-                class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("actions")])
-              }, [
-                vue.createElementVNode("div", {
-                  class: vue.normalizeClass(vue.unref(ns).e("actions__inner"))
-                }, [
-                  vue.createVNode(vue.unref(index$3.ElIcon), {
-                    onClick: _cache[1] || (_cache[1] = ($event) => handleActions("zoomOut"))
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(iconsVue.ZoomOut))
-                    ]),
-                    _: 1
-                  }),
-                  vue.createVNode(vue.unref(index$3.ElIcon), {
-                    onClick: _cache[2] || (_cache[2] = ($event) => handleActions("zoomIn"))
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(iconsVue.ZoomIn))
-                    ]),
-                    _: 1
-                  }),
-                  vue.createElementVNode("i", {
-                    class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
-                  }, null, 2),
-                  vue.createVNode(vue.unref(index$3.ElIcon), { onClick: toggleMode }, {
-                    default: vue.withCtx(() => [
-                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(mode).icon)))
-                    ]),
-                    _: 1
-                  }),
-                  vue.createElementVNode("i", {
-                    class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
-                  }, null, 2),
-                  vue.createVNode(vue.unref(index$3.ElIcon), {
-                    onClick: _cache[3] || (_cache[3] = ($event) => handleActions("anticlockwise"))
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(iconsVue.RefreshLeft))
-                    ]),
-                    _: 1
-                  }),
-                  vue.createVNode(vue.unref(index$3.ElIcon), {
-                    onClick: _cache[4] || (_cache[4] = ($event) => handleActions("clockwise"))
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(iconsVue.RefreshRight))
-                    ]),
-                    _: 1
-                  })
-                ], 2)
-              ], 2),
-              vue.createCommentVNode(" CANVAS "),
-              vue.createElementVNode("div", {
-                class: vue.normalizeClass(vue.unref(ns).e("canvas"))
-              }, [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.urlList, (url, i) => {
-                  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("img", {
-                    ref_for: true,
-                    ref: (el) => imgRefs.value[i] = el,
-                    key: url,
-                    src: url,
-                    style: vue.normalizeStyle(vue.unref(imgStyle)),
-                    class: vue.normalizeClass(vue.unref(ns).e("img")),
-                    crossorigin: _ctx.crossorigin,
-                    onLoad: handleImgLoad,
-                    onError: handleImgError,
-                    onMousedown: handleMouseDown
-                  }, null, 46, _hoisted_1)), [
-                    [vue.vShow, i === activeIndex.value]
-                  ]);
-                }), 128))
-              ], 2),
-              vue.renderSlot(_ctx.$slots, "default")
-            ], 6)
-          ]),
-          _: 3
-        })
-      ], 8, ["disabled"]);
-    };
+const imageViewerProps = runtime.buildProps({
+  urlList: {
+    type: runtime.definePropType(Array),
+    default: () => typescript.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: runtime.definePropType(String)
   }
 });
-var ImageViewer = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "image-viewer.vue"]]);
+const imageViewerEmits = {
+  close: () => true,
+  switch: (index) => types.isNumber(index),
+  rotate: (deg) => types.isNumber(deg)
+};
 
-exports["default"] = ImageViewer;
+exports.imageViewerEmits = imageViewerEmits;
+exports.imageViewerProps = imageViewerProps;
 //# sourceMappingURL=image-viewer.js.map

package/lib/components/image-viewer/src/image-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.js","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n  <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        <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      </div>\n    </transition>\n  </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 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  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 === 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\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  // 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\ndefineExpose({\n  /**\n   * @description manually switch image\n   */\n  setActiveItem,\n})\n</script>\n"],"names":["markRaw","FullScreen","ScaleToOriginal","useZIndex","ref","effectScope","computed","throttle","EVENT_CODE","useEventListener","keysOf","watch","nextTick","onMounted"],"mappings":"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"}
+{"version":3,"file":"image-viewer.js","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":["buildProps","definePropType","mutable","isNumber"],"mappings":";;;;;;;;;AAMY,MAAC,gBAAgB,GAAGA,kBAAU,CAAC;AAC3C,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAEC,sBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAMC,kBAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,gBAAgB,EAAE,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,EAAED,sBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,CAAC,EAAE;AACS,MAAC,gBAAgB,GAAG;AAChC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB,EAAE,MAAM,EAAE,CAAC,KAAK,KAAKE,cAAQ,CAAC,KAAK,CAAC;AACpC,EAAE,MAAM,EAAE,CAAC,GAAG,KAAKA,cAAQ,CAAC,GAAG,CAAC;AAChC;;;;;"}