@element-plus/nightly 0.0.20220127 → 0.0.20220128

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20220127 */
+/*! Element Plus v0.0.20220128 */
 
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -4544,7 +4544,7 @@
 	  });
 	}
 
-	const version$1 = "0.0.20220127";
+	const version$1 = "0.0.20220128";
 
 	const INSTALLED_KEY = Symbol("INSTALLED_KEY");
 	const makeInstaller = (components = []) => {
@@ -10447,9 +10447,9 @@
 	    });
 	    const sizeStyle = vue.computed(() => {
 	      const { size } = props;
-	      return {
-	        "--el-avatar-size": isNumber(size) ? addUnit(size) : void 0
-	      };
+	      return isNumber(size) ? {
+	        "--el-avatar-size": addUnit(size)
+	      } : void 0;
 	    });
 	    const fitStyle = vue.computed(() => ({
 	      objectFit: props.fit
@@ -26296,7 +26296,7 @@
 	    const { t } = useLocale();
 	    const ns = useNamespace("image-viewer");
 	    const wrapper = vue.ref();
-	    const img = vue.ref();
+	    const imgRefs = vue.ref([]);
 	    const scopeEventListener = vue.effectScope();
 	    const loading = vue.ref(true);
 	    const index = vue.ref(props.initialIndex);
@@ -26323,11 +26323,25 @@
 	    });
 	    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)`,
-	        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%";
@@ -26365,12 +26379,12 @@
 	        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
 	          });
 	        }
@@ -26393,13 +26407,10 @@
 	    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,
@@ -26408,12 +26419,7 @@
 	        };
 	      });
 	      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();
@@ -26454,7 +26460,7 @@
 	      if (loading.value)
 	        return;
 	      const { zoomRate, rotateDeg, enableTransition } = {
-	        zoomRate: 0.2,
+	        zoomRate: 1.4,
 	        rotateDeg: 90,
 	        enableTransition: true,
 	        ...options
@@ -26462,11 +26468,13 @@
 	      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;
@@ -26479,7 +26487,7 @@
 	    }
 	    vue.watch(currentImg, () => {
 	      vue.nextTick(() => {
-	        const $img = img.value;
+	        const $img = imgRefs.value[0];
 	        if (!($img == null ? void 0 : $img.complete)) {
 	          loading.value = true;
 	        }
@@ -26497,7 +26505,7 @@
 	    return {
 	      index,
 	      wrapper,
-	      img,
+	      imgRefs,
 	      isSingle,
 	      isFirst,
 	      isLast,
@@ -26643,7 +26651,7 @@
 	          (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: "img",
+	              ref: (el) => _ctx.imgRefs[i] = el,
 	              key: url,
 	              src: url,
 	              style: vue.normalizeStyle(_ctx.imgStyle),
@@ -26746,11 +26754,10 @@
 	      return Array.isArray(previewSrcList) && previewSrcList.length > 0;
 	    });
 	    const imageIndex = vue.computed(() => {
-	      const { src, previewSrcList, initialIndex } = props;
+	      const { previewSrcList, initialIndex } = props;
 	      let previewIndex = initialIndex;
-	      const srcIndex = previewSrcList.indexOf(src);
-	      if (srcIndex >= 0) {
-	        previewIndex = srcIndex;
+	      if (initialIndex > previewSrcList.length - 1) {
+	        previewIndex = 0;
 	      }
 	      return previewIndex;
 	    });