@nutui/nutui 3.2.6 → 3.2.8-beta.0

package/dist/packages/_es/ImagePreview.js

@@ -1,29 +1,36 @@
 /*!
-* @nutui/nutui v3.2.6 Fri Nov 04 2022 18:06:53 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.2.7 Fri Dec 02 2022 14:12:17 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 { c as createComponent, i as isPromise } from "./component.js";
+import { reactive, computed, watch, toRefs, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, normalizeStyle, createElementBlock, createCommentVNode, ref, onMounted, Fragment, renderList, toDisplayString, normalizeClass, createVNode, mergeProps, h } from "vue";
+import { c as createComponent, a as preventDefault, j as isArray } from "./component.js";
+import { u as useRect } from "./index2.js";
+import { u as useTouch } from "./index4.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import { f as funInterceptor } from "./interceptor.js";
+import "../locale/lang";
+import { C as CreateComponent } from "./mountComponent.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 { _ as _export_sfc } from "./plugin-vue_export-helper.js";
-import "../locale/lang";
-import "./OverLay.js";
-import "./pxCheck.js";
+import OverLay from "./OverLay.js";
+import "./props.js";
 import "./index3.js";
+import "./pxCheck.js";
+const baseProps = {
+  show: { type: Boolean, default: false },
+  initNo: { type: Number, default: 0 },
+  showIndex: { type: Boolean, default: true },
+  minZoom: { type: Number, default: 1 / 3 },
+  maxZoom: { type: Number, default: 3 }
+};
 const { create: create$1 } = createComponent("imagepreviewitem");
 const _sfc_main$1 = create$1({
   props: {
-    show: {
-      type: Boolean,
-      default: false
-    },
-    initNo: Number,
+    ...baseProps,
     image: {
       type: Object,
       default: () => ({})
@@ -32,10 +39,6 @@ const _sfc_main$1 = create$1({
       type: Object,
       default: () => ({})
     },
-    showIndex: {
-      type: Boolean,
-      default: true
-    },
     rootWidth: {
       type: Number,
       default: 0
@@ -43,24 +46,10 @@ const _sfc_main$1 = create$1({
     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
-  },
+  components: {},
   setup(props, { emit }) {
     const state = reactive({
       scale: 1,
@@ -79,16 +68,20 @@ const _sfc_main$1 = create$1({
       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)`;
+      const images = props.image;
+      if (images && images.src) {
+        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;
       }
-      return style;
+      return {};
     });
     const maxMoveX = computed(() => {
       if (state.imageRatio) {
@@ -198,7 +191,6 @@ const _sfc_main$1 = create$1({
       }
     };
     const onTouchEnd = (event) => {
-      console.log("ontauchend");
       let stopPropagation = false;
       if (state.moving || state.zooming) {
         stopPropagation = true;
@@ -227,17 +219,8 @@ const _sfc_main$1 = create$1({
       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);
-    const closeSwiper = (event) => {
-      console.log("\u5173\u95ED\u89C6\u9891");
+    const closeSwiper = () => {
       emit("close");
     };
     watch(() => props.initNo, resetScale);
@@ -267,8 +250,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_nut_swiper_item = resolveComponent("nut-swiper-item");
   return openBlock(), createBlock(_component_nut_swiper_item, { onClick: _ctx.closeSwiper }, {
     default: withCtx(() => [
-      _ctx.image && _ctx.image.src ? (openBlock(), createElementBlock("view", {
-        key: 0,
+      createElementVNode("view", {
         style: normalizeStyle(_ctx.imageStyle),
         class: "nut-imagepreview-box",
         onTouchstart: _cache[1] || (_cache[1] = (...args) => _ctx.onTouchStart && _ctx.onTouchStart(...args)),
@@ -276,26 +258,18 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         onTouchend: _cache[3] || (_cache[3] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args)),
         onTouchcancel: _cache[4] || (_cache[4] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args))
       }, [
-        createElementVNode("img", {
+        _ctx.image && _ctx.image.src ? (openBlock(), createElementBlock("img", {
+          key: 0,
           src: _ctx.image.src,
           class: "nut-imagepreview-img",
           onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.imageLoad && _ctx.imageLoad(...args))
-        }, null, 40, _hoisted_1$1)
-      ], 36)) : createCommentVNode("", true),
-      _ctx.video && _ctx.video.source ? (openBlock(), createElementBlock("view", {
-        key: 1,
-        class: "nut-imagepreview-box",
-        onClick: _cache[5] || (_cache[5] = (...args) => _ctx.videoClick && _ctx.videoClick(...args)),
-        onTouchstart: _cache[6] || (_cache[6] = (...args) => _ctx.onTouchStart && _ctx.onTouchStart(...args)),
-        onTouchmove: _cache[7] || (_cache[7] = (...args) => _ctx.onTouchMove && _ctx.onTouchMove(...args)),
-        onTouchend: _cache[8] || (_cache[8] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args)),
-        onTouchcancel: _cache[9] || (_cache[9] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args))
-      }, [
-        createVNode(_component_nut_video, {
+        }, null, 40, _hoisted_1$1)) : createCommentVNode("", true),
+        _ctx.video && _ctx.video.source ? (openBlock(), createBlock(_component_nut_video, {
+          key: 1,
           source: _ctx.video.source,
           options: _ctx.video.options
-        }, null, 8, ["source", "options"])
-      ], 32)) : createCommentVNode("", true)
+        }, null, 8, ["source", "options"])) : createCommentVNode("", true)
+      ], 36)
     ]),
     _: 1
   }, 8, ["onClick"]);
@@ -304,46 +278,15 @@ var ImagePreviewItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc
 const { create } = createComponent("imagepreview");
 const _sfc_main = create({
   props: {
-    show: {
-      type: Boolean,
-      default: false
-    },
-    images: {
-      type: Array,
-      default: () => []
-    },
-    videos: {
-      type: Array,
-      default: () => []
-    },
-    contentClose: {
-      type: Boolean,
-      default: true
-    },
-    initNo: {
-      type: Number,
-      default: 1
-    },
-    paginationVisible: {
-      type: Boolean,
-      default: false
-    },
-    paginationColor: {
-      type: String,
-      default: "#fff"
-    },
-    autoplay: {
-      type: [Number, String],
-      default: 0
-    },
-    isWrapTeleport: {
-      type: Boolean,
-      default: false
-    },
-    showIndex: {
-      type: Boolean,
-      default: true
-    },
+    ...baseProps,
+    images: { type: Array, default: () => [] },
+    videos: { type: Array, default: () => [] },
+    contentClose: { type: Boolean, default: true },
+    paginationVisible: { type: Boolean, default: false },
+    paginationColor: { type: String, default: "#fff" },
+    autoplay: { type: [Number, String], default: 0 },
+    teleport: { type: [String, Element], default: "body" },
+    teleportDisable: { ype: Boolean, default: false },
     closeable: {
       type: Boolean,
       default: false
@@ -357,14 +300,6 @@ 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
@@ -372,64 +307,49 @@ const _sfc_main = create({
   },
   emits: ["close", "change"],
   components: {
-    [Popup.name]: Popup,
-    [Video.name]: Video,
-    [Swiper.name]: Swiper,
-    [SwiperItem.name]: SwiperItem,
-    [_sfc_main$2.name]: _sfc_main$2,
     ImagePreviewItem
   },
   setup(props, { emit }) {
     const swipeRef = ref();
     const state = reactive({
-      showPop: false,
-      active: 1,
-      maxNo: 1,
+      showPop: props.show,
+      active: 0,
       rootWidth: 0,
       rootHeight: 0
     });
-    const styles = computed(() => {
-      let style = {};
-      if (props.closeIconPosition == "top-right") {
-        style.right = "10px";
-      } else {
-        style.left = "10px";
+    const iconClasses = computed(() => {
+      const pre = "nut-imagepreview-close";
+      const iconn = props.closeIconPosition == "top-right" ? `${pre}-right` : `${pre}-left`;
+      return `nut-imagepreview-close-icon ${iconn}`;
+    });
+    const mergeImages = computed(() => {
+      if (isArray(props.videos)) {
+        return [].concat(props.videos).concat(props.images);
       }
-      return style;
+      return props.images;
     });
-    const slideChangeEnd = function(page) {
-      state.active = page + 1;
-      emit("change", state.active);
+    const setActive = (active) => {
+      if (active !== state.active) {
+        state.active = active;
+        emit("change", state.active);
+      }
     };
     const onClose = () => {
-      if (props.beforeClose) {
-        const returnVal = props.beforeClose.apply(null, state.active);
-        if (isPromise(returnVal)) {
-          returnVal.then((value) => {
-            if (value) {
-              closeDone();
-            }
-          });
-        } else if (returnVal) {
-          closeDone();
-        }
-      } else {
-        closeDone();
-      }
+      funInterceptor(props.beforeClose, {
+        args: [state.active],
+        done: () => closeDone()
+      });
     };
     const closeDone = () => {
       state.showPop = false;
-      state.active = 1;
       emit("close");
     };
-    const handleCloseIcon = () => {
-      onClose();
-    };
     const init = () => {
-      setTimeout(() => {
-        state.rootHeight = swipeRef.value.offsetHeight;
-        state.rootWidth = swipeRef.value.offsetWidth;
-      }, 100);
+      if (swipeRef.value) {
+        const rect = useRect(swipeRef.value);
+        state.rootHeight = rect.height;
+        state.rootWidth = rect.width;
+      }
     };
     watch(
       () => props.show,
@@ -438,18 +358,23 @@ const _sfc_main = create({
         init();
       }
     );
+    watch(
+      () => props.initNo,
+      (val) => {
+        if (val != state.active)
+          setActive(val);
+      }
+    );
     onMounted(() => {
-      state.active = props.initNo;
-      state.showPop = props.show;
-      state.maxNo = props.images.length + props.videos.length;
+      setActive(props.initNo);
     });
     return {
       swipeRef,
       ...toRefs(state),
-      slideChangeEnd,
       onClose,
-      handleCloseIcon,
-      styles
+      mergeImages,
+      setActive,
+      iconClasses
     };
   }
 });
@@ -467,12 +392,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_nut_icon = resolveComponent("nut-icon");
   const _component_nut_popup = resolveComponent("nut-popup");
   return openBlock(), createBlock(_component_nut_popup, {
-    "pop-class": "custom-pop",
+    "pop-class": "nut-imagepreview-custom-pop",
     visible: _ctx.showPop,
     "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => _ctx.showPop = $event),
-    isWrapTeleport: _ctx.isWrapTeleport,
+    teleportDisable: _ctx.teleportDisable,
+    teleport: _ctx.teleport,
     onClosed: _ctx.onClose,
-    style: { "width": "100%" },
     "lock-scroll": ""
   }, {
     default: withCtx(() => [
@@ -484,97 +409,89 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           loop: _ctx.isLoop,
           "is-preventDefault": false,
           direction: "horizontal",
-          onChange: _ctx.slideChangeEnd,
-          "init-page": _ctx.initNo > _ctx.maxNo ? _ctx.maxNo - 1 : _ctx.initNo - 1,
+          onChange: _ctx.setActive,
+          "init-page": _ctx.initNo,
           "pagination-visible": _ctx.paginationVisible,
           "pagination-color": _ctx.paginationColor
         }, {
           default: withCtx(() => [
-            _ctx.videos.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.videos, (item, index) => {
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.mergeImages, (item, index) => {
               return openBlock(), createBlock(_component_image_preview_item, {
                 key: index,
-                video: item,
+                video: index < _ctx.videos.length ? item : {},
+                image: index >= _ctx.videos.length ? item : {},
                 rootHeight: _ctx.rootHeight,
                 rootWidth: _ctx.rootWidth,
                 show: _ctx.showPop,
-                "init-no": _ctx.active,
+                "init-no": _ctx.active + 1,
                 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"]);
+              }, null, 8, ["video", "image", "rootHeight", "rootWidth", "show", "init-no", "onClose", "maxZoom", "minZoom"]);
             }), 128))
           ]),
           _: 1
         }, 8, ["auto-play", "loop", "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),
+      _ctx.showIndex ? (openBlock(), createElementBlock("view", _hoisted_2, toDisplayString(_ctx.active + 1) + " / " + toDisplayString(_ctx.mergeImages.length), 1)) : createCommentVNode("", true),
       _ctx.closeable ? (openBlock(), createElementBlock("view", {
         key: 1,
-        class: "nut-imagepreview-close-icon",
-        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleCloseIcon && _ctx.handleCloseIcon(...args)),
-        style: normalizeStyle(_ctx.styles)
+        class: normalizeClass(_ctx.iconClasses),
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClose && _ctx.onClose(...args))
       }, [
         createVNode(_component_nut_icon, mergeProps({ name: _ctx.closeIcon }, _ctx.$attrs, { color: "#ffffff" }), null, 16, ["name"])
-      ], 4)) : createCommentVNode("", true)
+      ], 2)) : createCommentVNode("", true)
     ]),
     _: 1
-  }, 8, ["visible", "isWrapTeleport", "onClosed"]);
+  }, 8, ["visible", "teleportDisable", "teleport", "onClosed"]);
 }
 var ImagePreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 class ImagePreviewOptions {
   constructor() {
     this.show = false;
     this.images = [];
-    this.initNo = 1;
+    this.videos = [];
+    this.contentClose = true;
+    this.initNo = 0;
     this.paginationVisible = false;
     this.paginationColor = "";
-    this.teleport = "body";
+    this.autoplay = 0;
+    this.isWrapTeleport = false;
+    this.showIndex = true;
+    this.closeable = false;
+    this.closeIcon = "circle-close";
+    this.closeIconPosition = "top-right";
+    this.maxZoom = 3;
+    this.minZoom = 1 / 3;
+    this.isLoop = true;
     this.onClose = () => {
     };
+    this.teleport = "body";
   }
 }
 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, unmount } = CreateComponent(options, {
+      name: "imagepreview",
+      components: [Popup, Video, Swiper, SwiperItem, _sfc_main$2, OverLay],
+      wrapper: () => {
+        return {
+          setup() {
+            return () => {
+              options.onClose = () => {
+                unmount();
+              };
+              return h(ImagePreview, options);
+            };
+          }
         };
       }
-    };
-    const instance = createVNode(Wrapper);
-    elWarp.appendChild(root);
-    render(instance, root);
+    });
   }
 }
-const _ImagePreview = (options) => {
-  return new ImagePreviewFunction(options);
-};
+const _ImagePreview = (options) => new ImagePreviewFunction(options);
 _ImagePreview.install = (app) => {
   app.use(ImagePreview);
   app.config.globalProperties.$imagepreview = _ImagePreview;

package/dist/packages/_es/Indicator.js

@@ -1,10 +1,10 @@
 /*!
-* @nutui/nutui v3.2.6 Fri Nov 04 2022 18:06:53 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.2.7 Fri Dec 02 2022 14:12:17 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
 import { toRefs, computed, openBlock, createElementBlock, normalizeClass, Fragment, renderList, toDisplayString } from "vue";
-import { c as createComponent } from "./component.js";
+import { p as padZero, c as createComponent } from "./component.js";
 import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
 const { componentName, create } = createComponent("indicator");
@@ -43,7 +43,7 @@ const _sfc_main = create({
         [`${prefixCls}--align__${align.value}`]: block.value && align.value
       };
     });
-    return { classes, componentName };
+    return { classes, componentName, padZero };
   }
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -55,7 +55,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         item === _ctx.current ? (openBlock(), createElementBlock("view", {
           key: 0,
           class: normalizeClass(`${_ctx.componentName}--number`)
-        }, toDisplayString(_ctx.fillZero && item < 10 ? `0${item}` : item), 3)) : (openBlock(), createElementBlock("view", {
+        }, toDisplayString(_ctx.fillZero && _ctx.padZero(item) || item), 3)) : (openBlock(), createElementBlock("view", {
           key: 1,
           class: normalizeClass(`${_ctx.componentName}--dot`)
         }, null, 2))

package/dist/packages/_es/InfiniteLoading.js

@@ -1,10 +1,11 @@
 /*!
-* @nutui/nutui v3.2.6 Fri Nov 04 2022 18:06:53 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.2.7 Fri Dec 02 2022 14:12:17 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
 import { reactive, computed, onMounted, onUnmounted, ref, onActivated, onDeactivated, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, mergeProps, toDisplayString, renderSlot, Fragment, createCommentVNode } from "vue";
 import { c as createComponent } from "./component.js";
+import { u as useTouch } from "./index4.js";
 import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
 const { componentName, create, translate } = createComponent("infiniteloading");
@@ -57,6 +58,7 @@ const _sfc_main = create({
   },
   emits: ["scroll-change", "load-more", "refresh"],
   setup(props, { emit, slots }) {
+    const touch = useTouch();
     const state = reactive({
       scrollEl: window,
       scroller: null,
@@ -137,6 +139,7 @@ const _sfc_main = create({
       state.isTouching = false;
     };
     const touchStart = (event) => {
+      touch.start(event);
       if (state.beforeScrollTop == 0 && !state.isTouching && props.isOpenRefresh) {
         state.y = event.touches[0].pageY;
         state.isTouching = true;
@@ -145,8 +148,9 @@ const _sfc_main = create({
       }
     };
     const touchMove = (event) => {
+      touch.move(event);
       state.distance = event.touches[0].pageY - state.y;
-      if (state.distance > 0 && state.isTouching) {
+      if (touch.isVertical() && state.distance > 0 && state.isTouching) {
         event.preventDefault();
         if (state.distance >= state.refreshMaxH)
           state.distance = state.refreshMaxH;
@@ -163,6 +167,9 @@ const _sfc_main = create({
           emit("refresh", refreshDone);
         }
       }
+      setTimeout(() => {
+        touch.reset();
+      }, 0);
     };
     const getParentElement = (el) => {
       return !!props.containerId ? document.querySelector(`#${props.containerId}`) : el && el.parentNode;