@opentiny/vue-renderless 3.10.7 → 3.11.0

package/image/index.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { on, off, getScrollContainer, isInContainer } from "../common/deps/dom";
 import { typeOf } from "../common/type";
 import "../common/deps/requestAnimationFrame";
@@ -26,7 +26,7 @@ const loadImage = ({ state, api, attrs, props }) => () => {
       img.setAttribute(key, value);
     }
   });
-  img.src = props.src;
+  img.src = props.src || "";
 };
 const handleLoad = ({ state, emit }) => (event, img) => {
   state.imageWidth = img.width;
@@ -96,7 +96,10 @@ const getImageStyle = ({ state, vm, constants }) => (fit) => {
   }
   return {};
 };
-const clickHandler = (state) => () => state.showViewer = true;
+const clickHandler = (state) => () => {
+  state.showViewer = true;
+  state.mfPreviewVisible = true;
+};
 const closeViewer = (state) => () => state.showViewer = false;
 const mounted = ({ props, api }) => () => {
   if (props.lazy) {

package/image/vue.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import {
   computedGetImageStyle,
   computedGetAlignCenter,
@@ -27,9 +27,16 @@ const api = [
   "handleError",
   "deleteHander"
 ];
-const initState = ({ reactive, computed, api: api2, props, images }) => {
+const initState = ({
+  reactive,
+  computed,
+  api: api2,
+  props,
+  images
+}) => {
   const state = reactive({
     mfPreviewVisible: props.previewVisible,
+    /** mobile-first传入的一张image-error的图片 */
     images,
     error: false,
     loading: true,
@@ -43,7 +50,16 @@ const initState = ({ reactive, computed, api: api2, props, images }) => {
   });
   return state;
 };
-const initApi = ({ api: api2, state, emit, props, vm, constants, nextTick, attrs }) => {
+const initApi = ({
+  api: api2,
+  state,
+  emit,
+  props,
+  vm,
+  constants,
+  nextTick,
+  attrs
+}) => {
   Object.assign(api2, {
     state,
     closeViewer: closeViewer(state),

package/image-viewer/index.js

@@ -1,9 +1,10 @@
 import {
   __spreadValues
-} from "../chunk-PKUHTIDK.js";
+} from "../chunk-G2ADBYYC.js";
 import { on, off } from "../common/deps/dom";
 import { KEY_CODE } from "../common";
 import PopupManager from "../common/deps/popup-manager";
+import { xss } from "../common/xss";
 const isFirefox = () => !!window.navigator.userAgent.match(/firefox/i);
 const mousewheelEventName = isFirefox() ? "DOMMouseScroll" : "mousewheel";
 const rafThrottle = (fn) => {
@@ -19,11 +20,41 @@ const rafThrottle = (fn) => {
     });
   };
 };
-const hide = ({ props, api }) => () => {
+const hide = ({ props, api, state }) => () => {
   api.deviceSupportUninstall();
   props.onClose();
+  state.showImageViewer = false;
 };
-const deviceSupportInstall = ({ state, api }) => () => {
+const deviceSupportInstall = ({ state, api, mode }) => () => {
+  on(window, "resize", api.initPage);
+  state.urlList = state.urlList.map((subItem) => {
+    return xss.filterUrl(subItem);
+  });
+  state.urlList = state.urlList.map((subItem) => {
+    let subItemObj = {};
+    let lastSlashIndex = "";
+    if (typeof subItem === "string") {
+      subItem = xss.filterUrl(subItem);
+      if (state.isThumbnail || state.isMenuView) {
+        lastSlashIndex = subItem.lastIndexOf("/");
+        state.fileName = subItem.substring(lastSlashIndex + 1);
+        subItemObj.url = subItem;
+        subItemObj.name = state.fileName;
+        return subItemObj;
+      } else {
+        lastSlashIndex = subItem.lastIndexOf("/");
+        state.fileName = subItem.substring(lastSlashIndex + 1);
+        return { url: subItem, name: state.fileName };
+      }
+    } else if (typeof subItem === "object" && subItem !== null) {
+      if (!subItem.name) {
+        lastSlashIndex = subItem.url.lastIndexOf("/");
+        state.fileName = subItem.url.substring(lastSlashIndex + 1);
+        subItem.name = state.fileName;
+      }
+      return subItem;
+    }
+  });
   state._keyDownHandler = rafThrottle((event) => {
     const keyCode = event.keyCode;
     switch (keyCode) {
@@ -64,11 +95,11 @@ const deviceSupportInstall = ({ state, api }) => () => {
     }
   });
   on(document, "keydown", state._keyDownHandler);
-  on(document, mousewheelEventName, state._mouseWheelHandler);
+  mode !== "mobile-first" && on(document, mousewheelEventName, state._mouseWheelHandler);
 };
-const deviceSupportUninstall = (state) => () => {
+const deviceSupportUninstall = ({ state, mode }) => () => {
   off(document, "keydown", state._keyDownHandler);
-  off(document, mousewheelEventName, state._mouseWheelHandler);
+  mode !== "mobile-first" && off(document, mousewheelEventName, state._mouseWheelHandler);
   state._keyDownHandler = null;
   state._mouseWheelHandler = null;
 };
@@ -89,7 +120,17 @@ const handleMouseDown = (state) => (event) => {
     state.transform.offsetY = offsetY + event2.pageY - startY;
   });
   on(document, "mousemove", state._dragHandler);
-  on(document, "mouseup", () => off(document, "mousemove", state._dragHandler));
+  state._removeDrag = () => off(document, "mousemove", state._dragHandler);
+  if (state._clearMouse) {
+    state._clearMouse();
+    state._clearMouse = void 0;
+  }
+  on(document, "mouseup", state._removeDrag);
+  on(document, "mouseleave", state._removeDrag);
+  state._clearMouse = () => {
+    off(document, "mouseup", state._removeDrag);
+    off(document, "mouseleave", state._removeDrag);
+  };
   event.preventDefault();
 };
 const reset = (state) => () => state.transform = {
@@ -119,30 +160,125 @@ const toggleMode = ({ state, constants, api }) => () => {
   state.mode = MODE[modeNames[nextIndex]];
   api.reset();
 };
-const prev = ({ state, props }) => () => {
+const prev = ({ state, api, vm }) => () => {
   if (state.isFirst && !state.infinite) {
     return;
   }
-  const len = props.urlList.length;
+  const len = state.urlList.length;
+  let prevElement = "";
   state.index = (state.index - 1 + len) % len;
+  api.activeItems(state.index);
+  if (state.isThumbnail) {
+    prevElement = vm.$refs[`isThumbnail_${state.index}`][0] || vm.$refs[`isThumbnail_${state.index}`];
+  } else if (state.isMenuView) {
+    prevElement = vm.$refs[`isMenuView_${state.index}`][0] || vm.$refs[`isMenuView_${state.index}`];
+  }
+  switch (state.index) {
+    case 1:
+      state.isThumbnail && vm.$refs.isThumbnailContent && (vm.$refs.isThumbnailContent.scrollTop = 0);
+      state.isMenuView && vm.$refs.isMenuViewContent && (vm.$refs.isMenuViewContent.scrollTop = 0);
+      state.scrollTop = 0;
+      break;
+    case state.urlList.length - 1:
+      api.getLastPrev(prevElement);
+      break;
+    case state.urlList.length - 2:
+      break;
+    case state.urlList.length - 3:
+      state.scrollTop = prevElement.offsetHeight;
+      break;
+    default:
+      api.getDefaultPrev(prevElement);
+      break;
+  }
 };
-const next = ({ state, props }) => () => {
+const getLastPrev = ({ state, vm }) => (prevElement) => {
+  state.isThumbnail && vm.$refs.isThumbnailContent && (vm.$refs.isThumbnailContent.scrollTop = prevElement.offsetTop);
+  state.isMenuView && vm.$refs.isMenuViewContent && (vm.$refs.isMenuViewContent.scrollTop = prevElement.offsetTop);
+  state.scrollTop = prevElement.offsetTop;
+};
+const getDefaultPrev = ({ state, vm }) => (prevElement) => {
+  if (state.scrollTop <= prevElement.offsetHeight) {
+    state.scrollTop = prevElement.offsetTop - state.scrollTop - (state.isThumbnail ? state.thumbnailTop : state.menuTop);
+  } else {
+    state.scrollTop = state.scrollTop - prevElement.offsetHeight - (state.isThumbnail ? state.thumbnailTop : state.menuTop);
+  }
+  state.isThumbnail && vm.$refs.isThumbnailContent && (vm.$refs.isThumbnailContent.scrollTop = state.scrollTop);
+  state.isMenuView && vm.$refs.isMenuViewContent.scrollTop && (vm.$refs.isMenuViewContent.scrollTop = state.scrollTop);
+};
+const next = ({ state, api, vm }) => () => {
   if (state.isLast && !state.infinite) {
     return;
   }
-  const len = props.urlList.length;
+  const len = state.urlList.length;
+  let element = "";
   state.index = (state.index + 1) % len;
-};
-const handleActions = (state) => (action, options = {}) => {
-  if (state.loading) {
-    return;
+  api.activeItems(state.index);
+  if (state.isThumbnail) {
+    element = vm.$refs[`isThumbnail_${state.index}`][0] || vm.$refs[`isThumbnail_${state.index}`];
+  } else if (state.isMenuView) {
+    element = vm.$refs[`isMenuView_${state.index}`][0] || vm.$refs[`isMenuView_${state.index}`];
   }
+  const rect = element && element.getBoundingClientRect();
+  const top = rect.height;
+  switch (state.index) {
+    case 0:
+      state.isThumbnail && vm.$refs.isThumbnailContent && (vm.$refs.isThumbnailContent.scrollTop = 0);
+      state.isMenuView && vm.$refs.isMenuViewContent && (vm.$refs.isMenuViewContent.scrollTop = 0);
+      state.scrollTop = 0;
+      break;
+    case 1:
+      break;
+    case 2:
+      break;
+    case 3:
+      state.scrollTop = top;
+      break;
+    default:
+      if (state.isThumbnail) {
+        vm.$refs.isThumbnailContent && (vm.$refs.isThumbnailContent.scrollTop = state.scrollTop);
+        state.scrollTop = state.scrollTop + element.offsetHeight + state.thumbnailTop;
+      } else if (state.isMenuView) {
+        vm.$refs.isMenuViewContent && (vm.$refs.isMenuViewContent.scrollTop = state.scrollTop);
+        state.scrollTop = state.scrollTop + element.offsetHeight + state.menuTop;
+      }
+      break;
+  }
+};
+const handleActions = (state, props, emit) => (action, options = {}) => {
   const { zoomRate, rotateDeg, enableTransition } = __spreadValues({
     zoomRate: 0.2,
     rotateDeg: 90,
     enableTransition: true
   }, options);
   const { transform } = state;
+  let lastSlashIndex = "";
+  let imageUrl = [];
+  lastSlashIndex = state.currentImg.lastIndexOf("/");
+  let cutName = state.currentImg.substring(lastSlashIndex + 1);
+  if (action === "delImage") {
+    if (typeof state.urlList[0] === "string") {
+      imageUrl = state.urlList;
+    } else if (typeof state.urlList[0] === "object" && state.urlList[0] !== null) {
+      cutName = state.urlList[state.index].name;
+      state.urlList.forEach((item) => {
+        imageUrl.push(item.url);
+      });
+    }
+    if (imageUrl.includes(state.currentImg)) {
+      if (state.index === state.urlList.length - 1) {
+        state.urlList.splice(state.index, 1);
+        state.index = state.urlList.length - 1;
+      } else {
+        state.urlList.splice(state.index, 1);
+      }
+    }
+    state.imageName = cutName;
+    emit("delete", state.imageName);
+  }
+  if (state.loading) {
+    return;
+  }
   if (action === "zoomOut") {
     if (transform.scale > 0.2) {
       transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));
@@ -159,7 +295,13 @@ const handleActions = (state) => (action, options = {}) => {
 const computedIsSingle = (props) => () => props.urlList.length <= 1;
 const computedIsFirst = (state) => () => state.index === 0;
 const computedIsLast = ({ state, props }) => () => state.index === props.urlList.length - 1;
-const computedCurrentImg = ({ state, props }) => () => props.urlList[state.index];
+const computedCurrentImg = (state) => () => {
+  if (typeof state.urlList[0] === "string") {
+    return state.urlList[state.index];
+  } else if (typeof state.urlList[0] === "object" && state.urlList[0] !== null) {
+    return state.urlList[state.index].url;
+  }
+};
 const computedImgStyle = ({ state, constants }) => () => {
   const { offsetX, offsetY, scale, deg, enableTransition } = state.transform;
   const transition = enableTransition ? "transform .3s" : "";
@@ -192,25 +334,36 @@ const handleVisible = ({ state, emit, props }) => () => {
   emit("update:preview-visible", false);
   emit("close", state.index, state.urlList[state.index]);
 };
-const getImageWidth = ({ state, parent, props }) => () => {
+const getImageWidth = ({ state, parent, props, vm, mode }) => () => {
   let imageW = 0;
   const len = state.urlList.length;
-  imageW = parent.$el.querySelector(".tiny-mobile-image-viewer__canvas").offsetWidth;
-  state.imageList = parent.$el.querySelectorAll(".tiny-mobile-image-viewer__item");
+  if (mode === "mobile-first") {
+    if (state.isThumbnail && state.isImagePreview) {
+      imageW = vm.$refs.thumbnailCanvasBox.offsetWidth;
+    } else {
+      imageW = vm.$refs.canvasBox && vm.$refs.canvasBox.offsetWidth;
+    }
+    state.imageList = vm.$refs.viewerItem;
+  } else {
+    imageW = parent.$el.querySelector(".aui-mobile-image-viewer__canvas").offsetWidth;
+    state.imageList = parent.$el.querySelectorAll(".aui-mobile-image-viewer__item");
+  }
   state.imageItemWidth = imageW;
-  state.iamgeAllWidth = state.urlList.length * imageW;
-  if (props.startPosition !== 0) {
-    state.index = props.startPosition;
-    state.imageTransition = 0;
-    const transformX = state.index * state.imageItemWidth;
-    state.imageTransform = transformX;
-    state.imageTransformSize = -transformX;
-  }
-  if (state.index === 0 && props.deleteButton && state.delete) {
-    state.imageTransition = 0;
-    const transformX = state.index * state.imageItemWidth;
-    state.imageTransform = transformX;
-    state.imageTransformSize = -transformX;
+  state.imageAllWidth = state.urlList.length * imageW;
+  if (mode !== "mobile-first") {
+    if (props.startPosition !== 0) {
+      state.index = props.startPosition;
+      state.imageTransition = 0;
+      const transformX = state.index * state.imageItemWidth;
+      state.imageTransform = transformX;
+      state.imageTransformSize = -transformX;
+    }
+    if (state.index === 0 && props.deleteButton && state.delete) {
+      state.imageTransition = 0;
+      const transformX = state.index * state.imageItemWidth;
+      state.imageTransform = transformX;
+      state.imageTransformSize = -transformX;
+    }
   }
   setTimeout(() => {
     state.imageTransition = 300;
@@ -232,12 +385,12 @@ const swipeLeft = ({ state, emit }) => () => {
   } else {
     state.arrowStyle = null;
   }
-  if (state.imageTransform === state.iamgeAllWidth) {
+  if (state.imageTransform === state.imageAllWidth) {
     state.imageTransformSize = state.imageTransform = 0;
     state.imageList[0].style.transform = null;
     return;
   }
-  if (state.imageTransform == state.iamgeAllWidth - state.imageItemWidth && state.index == state.urlList.length - 1) {
+  if (state.imageTransform === state.imageAllWidth - state.imageItemWidth && state.index === state.urlList.length - 1) {
     return;
   }
   state.index = (state.index + 1) % len;
@@ -279,15 +432,34 @@ const handleDelete = ({ api, emit, state }) => () => {
   api.getImageWidth();
   emit("newImageList", state.urlList, currenIndex);
 };
-const preventDefault = (event, isStopPropagation) => {
-  if (typeof event.cancelable !== "boolean" || event.cancelable) {
-    event.preventDefault();
-  }
-  if (isStopPropagation) {
-    event.stopPropagation();
+const langClick = (state) => () => {
+  if (window.navigator.msSaveOrOpenBlob) {
+    let bstr = atob(state.currentImg.split(",")[1]);
+    let n = bstr.length;
+    let u8arr = new Uint8Array(n);
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n);
+    }
+    let blob = new Blob([u8arr]);
+    window.navigator.msSaveOrOpenBlob(blob, "img.png");
+  } else {
+    const a = document.createElement("a");
+    a.href = state.currentImg;
+    a.setAttribute("download", "img");
+    a.click();
   }
 };
-const touchstart = (state) => (e) => {
+const touchstart = ({ state, mode, api }) => (e) => {
+  state.firstX = e.targetTouches[0].clientX;
+  if (mode === "mobile-first") {
+    state.time = setTimeout(() => {
+      if (!state.isImagePreview) {
+        api.langClick();
+      } else {
+        state.boxVisibility = true;
+      }
+    }, 1e3);
+  }
   const touches = e.touches;
   const events = touches[0];
   const events2 = touches[1];
@@ -301,6 +473,14 @@ const touchstart = (state) => (e) => {
   }
   state.originScale = state.scale || 1;
 };
+const preventDefault = (event, isStopPropagation) => {
+  if (typeof event.cancelable !== "boolean" || event.cancelable) {
+    event.preventDefault();
+  }
+  if (isStopPropagation) {
+    event.stopPropagation();
+  }
+};
 const touchmove = (state) => (event) => {
   if (!state.moveable) {
     return;
@@ -343,14 +523,112 @@ const touchmove = (state) => (event) => {
     state.scale = newScale;
     state.transform.scale = newScale;
   }
+  clearTimeout(state.time);
 };
-const touchend = (state) => () => {
+const touchend = (state) => (e) => {
+  var moveX = 0;
+  state.endX = e.changedTouches[0].clientX;
+  moveX = state.endX - state.firstX;
+  if (!state.boxVisibility) {
+    if (moveX === 0) {
+      state.isImagePreview = false;
+      state.hiddenThumbnail = false;
+    }
+  }
   state.moveable = false;
   state.pageX2 = 0;
   state.pageY2 = 0;
+  clearTimeout(state.time);
 };
 const computeZIndex = ({ constants, props }) => () => props.zIndex === constants.DEFAULT_POPPER_ZINDEX || props.zIndex < 1 ? PopupManager.nextZIndex() : props.zIndex;
+const activeItems = (state) => (i) => {
+  state.index = i;
+  state.currentIndex = i;
+};
+const imagePreview = (state) => (i) => {
+  state.index = i;
+  state.mobileCurrentIndex && (state.isImagePreview = true);
+};
+const initPage = ({ state, nextTick, api }) => () => {
+  state.isImagePreview = false;
+  state.hiddenThumbnail = false;
+  nextTick(() => {
+    api.getImageWidth();
+  });
+};
+const beforeDestroy = ({ api, state }) => () => {
+  off(window, "resize", api.initPage);
+  if (state._clearMouse) {
+    state._clearMouse();
+    state._clearMouse = void 0;
+  }
+  if (state._dragHandler) {
+    state._dragHandler = void 0;
+  }
+  if (state._removeDrag) {
+    state._removeDrag = void 0;
+  }
+};
+const itemClick = ({ state, vm, nextTick }) => (itemData) => {
+  if (state.isThumbnail) {
+    state.showFlag = 1;
+  } else if (state.isMenuView) {
+    state.showFlag = 2;
+  }
+  switch (itemData) {
+    case "1":
+      state.isThumbnail = false;
+      state.isMenuView = false;
+      break;
+    case "2":
+      state.isThumbnail = true;
+      state.isMenuView = false;
+      nextTick(() => {
+        state.currentIndex = 0;
+        state.index = 0;
+        vm.$refs.isThumbnailContent.scrollTop = 0;
+      });
+      break;
+    case "3":
+      state.isThumbnail = false;
+      state.isMenuView = true;
+      nextTick(() => {
+        state.currentIndex = 0;
+        state.index = 0;
+        vm.$refs.isMenuViewContent.scrollTop = 0;
+      });
+      break;
+    case "4":
+      if (state.showFlag === 1) {
+        state.isThumbnail = true;
+      } else if (state.showFlag === 2) {
+        state.isMenuView = true;
+      }
+      break;
+    default:
+      break;
+  }
+};
+const selectOption = ({ state, api }) => (item, index) => {
+  switch (index) {
+    case 0:
+      api.langClick();
+      break;
+    case 1:
+      state.isThumbnail = true;
+      state.isImagePreview = false;
+      break;
+    case 2:
+      api.handleActions("delImage");
+      api.getImageWidth();
+      break;
+    default:
+      break;
+  }
+};
 export {
+  activeItems,
+  beforeDestroy,
   computeZIndex,
   computedCurrentImg,
   computedImgStyle,
@@ -359,7 +637,9 @@ export {
   computedIsSingle,
   deviceSupportInstall,
   deviceSupportUninstall,
+  getDefaultPrev,
   getImageWidth,
+  getLastPrev,
   handleActions,
   handleDelete,
   handleImgError,
@@ -367,10 +647,15 @@ export {
   handleMouseDown,
   handleVisible,
   hide,
+  imagePreview,
+  initPage,
+  itemClick,
+  langClick,
   next,
   prev,
   rafThrottle,
   reset,
+  selectOption,
   swipeLeft,
   swipeRight,
   toggleMode,