@nutui/nutui 3.2.5-beta.1 → 3.2.6-beta.1

package/dist/packages/_es/ImagePreview.js

@@ -1,294 +1,22 @@
 /*!
-* @nutui/nutui v3.2.5-beta.1 Tue Oct 25 2022 11:38:42 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.2.6-beta.1 Mon Oct 31 2022 19:38:22 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { reactive, computed, watch, toRefs, resolveComponent, openBlock, createBlock, withCtx, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, createVNode, ref, onMounted, Fragment, renderList, toDisplayString, mergeProps, render, h } from "vue";
+import { reactive, computed, watch, onMounted, toRefs, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, Fragment, renderList, createCommentVNode, createTextVNode, toDisplayString, normalizeStyle, createVNode, mergeProps } from "vue";
 import { c as createComponent, i as isPromise } from "./component.js";
 import Popup from "./Popup.js";
-import Video from "./Video.js";
 import Swiper from "./Swiper.js";
 import SwiperItem from "./SwiperItem.js";
-import _sfc_main$2 from "./Icon.js";
-import { u as useTouch } from "./index4.js";
+import _sfc_main$1 from "./Icon.js";
 import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
+import "./use-lock-scroll.js";
 import "./OverLay.js";
 import "./pxCheck.js";
-import "./index3.js";
-const { create: create$1 } = createComponent("imagepreviewitem");
-const _sfc_main$1 = create$1({
-  props: {
-    show: {
-      type: Boolean,
-      default: false
-    },
-    initNo: Number,
-    image: {
-      type: Object,
-      default: () => ({})
-    },
-    video: {
-      type: Object,
-      default: () => ({})
-    },
-    showIndex: {
-      type: Boolean,
-      default: true
-    },
-    rootWidth: {
-      type: Number,
-      default: 0
-    },
-    rootHeight: {
-      type: Number,
-      default: 0
-    },
-    minZoom: {
-      type: Number,
-      default: 1 / 3
-    },
-    maxZoom: {
-      type: Number,
-      default: 3
-    }
-  },
-  emits: ["close", "scale"],
-  components: {
-    [Popup.name]: Popup,
-    [Video.name]: Video,
-    [Swiper.name]: Swiper,
-    [SwiperItem.name]: SwiperItem,
-    [_sfc_main$2.name]: _sfc_main$2
-  },
-  setup(props, { emit }) {
-    const state = reactive({
-      scale: 1,
-      moveX: 0,
-      moveY: 0,
-      moving: false,
-      zooming: false,
-      imageRatio: 0,
-      displayWidth: 0,
-      displayHeight: 0
-    });
-    const touch = useTouch();
-    const vertical = computed(() => {
-      const { rootWidth, rootHeight } = props;
-      const rootRatio = rootHeight / rootWidth;
-      return state.imageRatio > rootRatio;
-    });
-    const imageStyle = computed(() => {
-      const { scale, moveX, moveY, moving, zooming } = state;
-      const style = {
-        transitionDuration: zooming || moving ? "0s" : ".3s"
-      };
-      if (scale !== 1) {
-        const offsetX = moveX / scale;
-        const offsetY = moveY / scale;
-        style.transform = `scale(${scale}, ${scale}) translate(${offsetX}px, ${offsetY}px)`;
-      }
-      return style;
-    });
-    const maxMoveX = computed(() => {
-      if (state.imageRatio) {
-        const { rootWidth, rootHeight } = props;
-        const displayWidth = vertical.value ? rootHeight / state.imageRatio : rootWidth;
-        return Math.max(0, (state.scale * displayWidth - rootWidth) / 2);
-      }
-      return 0;
-    });
-    const maxMoveY = computed(() => {
-      if (state.imageRatio) {
-        const { rootWidth, rootHeight } = props;
-        const displayHeight = vertical.value ? rootHeight : rootWidth * state.imageRatio;
-        return Math.max(0, (state.scale * displayHeight - rootHeight) / 2);
-      }
-      return 0;
-    });
-    const imageLoad = (event) => {
-      const { naturalWidth, naturalHeight } = event.target;
-      state.imageRatio = naturalHeight / naturalWidth;
-    };
-    const resetScale = () => {
-      setScale(1);
-      state.moveX = 0;
-      state.moveY = 0;
-    };
-    const setScale = (scale) => {
-      scale = clamp(scale, +props.minZoom, +props.maxZoom + 1);
-      if (scale !== state.scale) {
-        state.scale = scale;
-        emit("scale", {
-          scale,
-          index: props.initNo
-        });
-      }
-    };
-    const toggleScale = () => {
-      const scale = state.scale > 1 ? 1 : 2;
-      setScale(scale);
-      state.moveX = 0;
-      state.moveY = 0;
-    };
-    const getDistance = (touches) => Math.sqrt((touches[0].clientX - touches[1].clientX) ** 2 + (touches[0].clientY - touches[1].clientY) ** 2);
-    let startMoveX;
-    let startMoveY;
-    let startScale;
-    let startDistance;
-    let doubleTapTimer;
-    let touchStartTime;
-    let fingerNum;
-    const onTouchStart = (event) => {
-      const { touches } = event;
-      const { offsetX } = touch;
-      touch.start(event);
-      fingerNum = touches.length;
-      startMoveX = state.moveX;
-      startMoveY = state.moveY;
-      touchStartTime = Date.now();
-      state.moving = fingerNum === 1 && state.scale !== 1;
-      state.zooming = fingerNum === 2 && !offsetX.value;
-      if (state.zooming) {
-        startScale = state.scale;
-        startDistance = getDistance(event.touches);
-      }
-    };
-    const onTouchMove = (event) => {
-      const { touches } = event;
-      touch.move(event);
-      if (state.moving || state.zooming) {
-        preventDefault(event, true);
-      }
-      if (state.moving) {
-        const { deltaX, deltaY } = touch;
-        const moveX = deltaX.value + startMoveX;
-        const moveY = deltaY.value + startMoveY;
-        state.moveX = clamp(moveX, -maxMoveX.value, maxMoveX.value);
-        state.moveY = clamp(moveY, -maxMoveY.value, maxMoveY.value);
-      }
-      if (state.zooming && touches.length === 2) {
-        const distance = getDistance(touches);
-        const scale = startScale * distance / startDistance;
-        setScale(scale);
-      }
-    };
-    const checkTap = () => {
-      if (fingerNum > 1) {
-        return;
-      }
-      const { offsetX, offsetY } = touch;
-      const deltaTime = Date.now() - touchStartTime;
-      const TAP_TIME = 250;
-      const TAP_OFFSET = 5;
-      if (offsetX.value < TAP_OFFSET && offsetY.value < TAP_OFFSET && deltaTime < TAP_TIME) {
-        if (doubleTapTimer) {
-          clearTimeout(doubleTapTimer);
-          doubleTapTimer = null;
-          toggleScale();
-        } else {
-          doubleTapTimer = setTimeout(() => {
-            emit("close");
-            doubleTapTimer = null;
-          }, TAP_TIME);
-        }
-      }
-    };
-    const onTouchEnd = (event) => {
-      let stopPropagation = false;
-      if (state.moving || state.zooming) {
-        stopPropagation = true;
-        if (state.moving && startMoveX === state.moveX && startMoveY === state.moveY) {
-          stopPropagation = false;
-        }
-        if (!event.touches.length) {
-          if (state.zooming) {
-            state.moveX = clamp(state.moveX, -maxMoveX.value, maxMoveX.value);
-            state.moveY = clamp(state.moveY, -maxMoveY.value, maxMoveY.value);
-            state.zooming = false;
-          }
-          state.moving = false;
-          startMoveX = 0;
-          startMoveY = 0;
-          startScale = 1;
-          if (state.scale < 1) {
-            resetScale();
-          }
-          if (state.scale > props.maxZoom) {
-            state.scale = +props.maxZoom;
-          }
-        }
-      }
-      preventDefault(event, stopPropagation);
-      checkTap();
-      touch.reset();
-    };
-    const preventDefault = (event, isStopPropagation) => {
-      if (typeof event.cancelable !== "boolean" || event.cancelable) {
-        event.preventDefault();
-      }
-      if (isStopPropagation) {
-        event.stopPropagation();
-      }
-    };
-    const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
-    watch(() => props.initNo, resetScale);
-    watch(
-      () => props.show,
-      (value) => {
-        if (!value) {
-          resetScale();
-        }
-      }
-    );
-    return {
-      ...toRefs(state),
-      onTouchStart,
-      onTouchMove,
-      onTouchEnd,
-      getDistance,
-      imageStyle,
-      imageLoad
-    };
-  }
-});
-const _hoisted_1$1 = ["src"];
-const _hoisted_2$1 = {
-  key: 1,
-  class: "nut-imagepreview-box"
-};
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_nut_video = resolveComponent("nut-video");
-  const _component_nut_swiper_item = resolveComponent("nut-swiper-item");
-  return openBlock(), createBlock(_component_nut_swiper_item, {
-    onTouchstart: _ctx.onTouchStart,
-    onTouchmove: _ctx.onTouchMove,
-    onTouchend: _ctx.onTouchEnd,
-    onTouchcancel: _ctx.onTouchEnd
-  }, {
-    default: withCtx(() => [
-      _ctx.image && _ctx.image.src ? (openBlock(), createElementBlock("view", {
-        key: 0,
-        style: normalizeStyle(_ctx.imageStyle),
-        class: "nut-imagepreview-box"
-      }, [
-        createElementVNode("img", {
-          src: _ctx.image.src,
-          class: "nut-imagepreview-img",
-          onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.imageLoad && _ctx.imageLoad(...args))
-        }, null, 40, _hoisted_1$1)
-      ], 4)) : createCommentVNode("", true),
-      _ctx.video && _ctx.video.source ? (openBlock(), createElementBlock("view", _hoisted_2$1, [
-        createVNode(_component_nut_video, {
-          source: _ctx.video.source,
-          options: _ctx.video.options
-        }, null, 8, ["source", "options"])
-      ])) : createCommentVNode("", true)
-    ]),
-    _: 1
-  }, 8, ["onTouchstart", "onTouchmove", "onTouchend", "onTouchcancel"]);
-}
-var ImagePreviewItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+import "./index.js";
+import "./index2.js";
+import "@tarojs/taro";
 const { create } = createComponent("imagepreview");
 const _sfc_main = create({
   props: {
@@ -300,13 +28,9 @@ const _sfc_main = create({
       type: Array,
       default: () => []
     },
-    videos: {
-      type: Array,
-      default: () => []
-    },
     contentClose: {
       type: Boolean,
-      default: true
+      default: false
     },
     initNo: {
       type: Number,
@@ -322,11 +46,7 @@ const _sfc_main = create({
     },
     autoplay: {
       type: [Number, String],
-      default: 0
-    },
-    isWrapTeleport: {
-      type: Boolean,
-      default: false
+      default: 3e3
     },
     showIndex: {
       type: Boolean,
@@ -345,32 +65,39 @@ const _sfc_main = create({
       default: "top-right"
     },
     beforeClose: Function,
-    minZoom: {
-      type: Number,
-      default: 1 / 3
-    },
-    maxZoom: {
-      type: Number,
-      default: 3
+    isLoop: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ["close", "change"],
   components: {
     [Popup.name]: Popup,
-    [Video.name]: Video,
     [Swiper.name]: Swiper,
     [SwiperItem.name]: SwiperItem,
-    [_sfc_main$2.name]: _sfc_main$2,
-    ImagePreviewItem
+    [_sfc_main$1.name]: _sfc_main$1
   },
   setup(props, { emit }) {
-    const swipeRef = ref();
     const state = reactive({
       showPop: false,
       active: 1,
       maxNo: 1,
-      rootWidth: 0,
-      rootHeight: 0
+      source: {
+        src: "https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D",
+        type: "video/mp4"
+      },
+      options: {
+        muted: true,
+        controls: true
+      },
+      eleImg: null,
+      store: {
+        scale: 1,
+        moveable: false,
+        originScale: 1,
+        oriDistance: 1
+      },
+      lastTouchEndTime: 0
     });
     const styles = computed(() => {
       let style = {};
@@ -385,6 +112,11 @@ const _sfc_main = create({
       state.active = page + 1;
       emit("change", state.active);
     };
+    const closeOnImg = () => {
+      if (props.contentClose) {
+        onClose();
+      }
+    };
     const onClose = () => {
       if (props.beforeClose) {
         const returnVal = props.beforeClose.apply(null, state.active);
@@ -403,17 +135,90 @@ const _sfc_main = create({
     };
     const closeDone = () => {
       state.showPop = false;
+      state.store.scale = 1;
+      scaleNow();
       state.active = 1;
       emit("close");
     };
-    const handleCloseIcon = () => {
-      onClose();
+    const getDistance = (first, second) => {
+      return Math.hypot(Math.abs(second.x - first.x), Math.abs(second.y - first.y));
+    };
+    const scaleNow = () => {
+      if (state.eleImg != null) {
+        state.eleImg.style.transform = "scale(" + state.store.scale + ")";
+      }
+    };
+    const onTouchStart = (event) => {
+      const curTouchTime = new Date().getTime();
+      if (curTouchTime - state.lastTouchEndTime < 300) {
+        const store2 = state.store;
+        if (store2.scale > 1) {
+          store2.scale = 1;
+        } else if (store2.scale == 1) {
+          store2.scale = 2;
+        }
+        scaleNow();
+      }
+      var touches = event.touches;
+      var events = touches[0];
+      var events2 = touches[1];
+      const store = state.store;
+      store.moveable = true;
+      if (events2) {
+        store.oriDistance = getDistance(
+          {
+            x: events.pageX,
+            y: events.pageY
+          },
+          {
+            x: events2.pageX,
+            y: events2.pageY
+          }
+        );
+      }
+      store.originScale = store.scale || 1;
+    };
+    const onTouchMove = (event) => {
+      if (!state.store.moveable) {
+        return;
+      }
+      const store = state.store;
+      var touches = event.touches;
+      var events = touches[0];
+      var events2 = touches[1];
+      if (events2) {
+        const curDistance = getDistance(
+          {
+            x: events.pageX,
+            y: events.pageY
+          },
+          {
+            x: events2.pageX,
+            y: events2.pageY
+          }
+        );
+        const curScale = curDistance / store.oriDistance;
+        store.scale = store.originScale * curScale;
+        if (store.scale > 3) {
+          store.scale = 3;
+        }
+        scaleNow();
+      }
+    };
+    const onTouchEnd = () => {
+      state.lastTouchEndTime = new Date().getTime();
+      const store = state.store;
+      store.moveable = false;
+      if (store.scale < 1.1 && store.scale > 1 || store.scale < 1) {
+        store.scale = 1;
+        scaleNow();
+      }
     };
     const init = () => {
-      setTimeout(() => {
-        state.rootHeight = swipeRef.value.offsetHeight;
-        state.rootWidth = swipeRef.value.offsetWidth;
-      }, 100);
+      state.eleImg = document.querySelector(".nut-imagepreview");
+      document.addEventListener("touchmove", onTouchMove);
+      document.addEventListener("touchend", onTouchEnd);
+      document.addEventListener("touchcancel", onTouchEnd);
     };
     watch(
       () => props.show,
@@ -422,50 +227,56 @@ const _sfc_main = create({
         init();
       }
     );
+    const handleCloseIcon = () => {
+      onClose();
+    };
     onMounted(() => {
       state.active = props.initNo;
       state.showPop = props.show;
-      state.maxNo = props.images.length + props.videos.length;
+      state.maxNo = props.images.length;
     });
     return {
-      swipeRef,
       ...toRefs(state),
       slideChangeEnd,
       onClose,
-      handleCloseIcon,
-      styles
+      closeOnImg,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      getDistance,
+      scaleNow,
+      styles,
+      handleCloseIcon
     };
   }
 });
-const _hoisted_1 = {
-  class: "nut-imagepreview",
-  ref: "swipeRef"
-};
+const _hoisted_1 = ["src"];
 const _hoisted_2 = {
   key: 0,
   class: "nut-imagepreview-index"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_image_preview_item = resolveComponent("image-preview-item");
+  const _component_nut_swiper_item = resolveComponent("nut-swiper-item");
   const _component_nut_swiper = resolveComponent("nut-swiper");
   const _component_nut_icon = resolveComponent("nut-icon");
   const _component_nut_popup = resolveComponent("nut-popup");
   return openBlock(), createBlock(_component_nut_popup, {
     "pop-class": "custom-pop",
     visible: _ctx.showPop,
-    "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => _ctx.showPop = $event),
-    isWrapTeleport: _ctx.isWrapTeleport,
-    onClosed: _ctx.onClose,
-    style: { "width": "100%" },
-    "lock-scroll": ""
+    "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => _ctx.showPop = $event),
+    onClick: _ctx.onClose,
+    style: { "width": "100%" }
   }, {
     default: withCtx(() => [
-      createElementVNode("view", _hoisted_1, [
+      createElementVNode("view", {
+        class: "nut-imagepreview",
+        onTouchstartCapture: _cache[0] || (_cache[0] = (...args) => _ctx.onTouchStart && _ctx.onTouchStart(...args))
+      }, [
         _ctx.showPop ? (openBlock(), createBlock(_component_nut_swiper, {
           key: 0,
           "auto-play": _ctx.autoplay,
           class: "nut-imagepreview-swiper",
-          loop: true,
+          loop: _ctx.isLoop,
           "is-preventDefault": false,
           direction: "horizontal",
           onChange: _ctx.slideChangeEnd,
@@ -474,93 +285,36 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           "pagination-color": _ctx.paginationColor
         }, {
           default: withCtx(() => [
-            _ctx.videos.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.videos, (item, index) => {
-              return openBlock(), createBlock(_component_image_preview_item, {
-                key: index,
-                video: item,
-                rootHeight: _ctx.rootHeight,
-                rootWidth: _ctx.rootWidth,
-                show: _ctx.showPop,
-                "init-no": _ctx.active,
-                onClose: _ctx.onClose,
-                maxZoom: _ctx.maxZoom,
-                minZoom: _ctx.minZoom
-              }, null, 8, ["video", "rootHeight", "rootWidth", "show", "init-no", "onClose", "maxZoom", "minZoom"]);
-            }), 128)) : createCommentVNode("", true),
             (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.images, (item, index) => {
-              return openBlock(), createBlock(_component_image_preview_item, {
-                key: index,
-                image: item,
-                rootHeight: _ctx.rootHeight,
-                rootWidth: _ctx.rootWidth,
-                show: _ctx.showPop,
-                "init-no": _ctx.active,
-                onClose: _ctx.onClose
-              }, null, 8, ["image", "rootHeight", "rootWidth", "show", "init-no", "onClose"]);
+              return openBlock(), createBlock(_component_nut_swiper_item, { key: index }, {
+                default: withCtx(() => [
+                  createElementVNode("img", {
+                    src: item.src,
+                    mode: "aspectFit",
+                    class: "nut-imagepreview-img"
+                  }, null, 8, _hoisted_1)
+                ]),
+                _: 2
+              }, 1024);
             }), 128))
           ]),
           _: 1
-        }, 8, ["auto-play", "onChange", "init-page", "pagination-visible", "pagination-color"])) : createCommentVNode("", true)
-      ], 512),
-      _ctx.showIndex ? (openBlock(), createElementBlock("view", _hoisted_2, toDisplayString(_ctx.active) + " / " + toDisplayString(_ctx.images.length + _ctx.videos.length), 1)) : createCommentVNode("", true),
+        }, 8, ["auto-play", "loop", "onChange", "init-page", "pagination-visible", "pagination-color"])) : createCommentVNode("", true)
+      ], 32),
+      createTextVNode(),
+      _ctx.showIndex ? (openBlock(), createElementBlock("view", _hoisted_2, toDisplayString(_ctx.active) + " / " + toDisplayString(_ctx.images.length), 1)) : createCommentVNode("", true),
+      createTextVNode(),
       _ctx.closeable ? (openBlock(), createElementBlock("view", {
         key: 1,
         class: "nut-imagepreview-close-icon",
-        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleCloseIcon && _ctx.handleCloseIcon(...args)),
+        onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleCloseIcon && _ctx.handleCloseIcon(...args)),
         style: normalizeStyle(_ctx.styles)
       }, [
         createVNode(_component_nut_icon, mergeProps({ name: _ctx.closeIcon }, _ctx.$attrs, { color: "#ffffff" }), null, 16, ["name"])
       ], 4)) : createCommentVNode("", true)
     ]),
     _: 1
-  }, 8, ["visible", "isWrapTeleport", "onClosed"]);
+  }, 8, ["visible", "onClick"]);
 }
-var ImagePreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-class ImagePreviewOptions {
-  constructor() {
-    this.show = false;
-    this.images = [];
-    this.initNo = 1;
-    this.paginationVisible = false;
-    this.paginationColor = "";
-    this.teleport = "body";
-    this.onClose = () => {
-    };
-  }
-}
-class ImagePreviewFunction {
-  constructor(_options) {
-    this.options = new ImagePreviewOptions();
-    const options = Object.assign(this.options, _options);
-    let elWarp = document.body;
-    const teleport = options.teleport;
-    if (teleport != "body") {
-      if (typeof teleport == "string") {
-        elWarp = document.querySelector(teleport);
-      } else {
-        elWarp = options.teleport;
-      }
-    }
-    const root = document.createElement("view");
-    root.id = "imagepreview-" + new Date().getTime();
-    const Wrapper = {
-      setup() {
-        options.teleport = `#${root.id}`;
-        return () => {
-          return h(ImagePreview, options);
-        };
-      }
-    };
-    const instance = createVNode(Wrapper);
-    elWarp.appendChild(root);
-    render(instance, root);
-  }
-}
-const _ImagePreview = (options) => {
-  return new ImagePreviewFunction(options);
-};
-_ImagePreview.install = (app) => {
-  app.use(ImagePreview);
-  app.config.globalProperties.$imagepreview = _ImagePreview;
-};
-export { ImagePreview, ImagePreviewOptions, _ImagePreview as default };
+var index_taro = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index_taro as default };

package/dist/packages/_es/Indicator.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.2.5-beta.1 Tue Oct 25 2022 11:38:42 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.2.6-beta.1 Mon Oct 31 2022 19:38:22 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
@@ -63,5 +63,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128))
   ], 2);
 }
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };
+var index_taro = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index_taro as default };