vant 3.3.6 → 3.4.2

package/lib/swipe/Swipe.js

@@ -1,52 +1,63 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = exports.SWIPE_KEY = void 0;
-
-var _vue = require("vue");
-
-var _utils = require("../utils");
-
-var _use = require("@vant/use");
-
-var _useTouch = require("../composables/use-touch");
-
-var _useExpose = require("../composables/use-expose");
-
-var _onPopupReopen = require("../composables/on-popup-reopen");
-
-// Utils
-// Composables
-var [name, bem] = (0, _utils.createNamespace)('swipe');
-var swipeProps = {
-  loop: _utils.truthProp,
-  width: _utils.numericProp,
-  height: _utils.numericProp,
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  SWIPE_KEY: () => SWIPE_KEY,
+  default: () => stdin_default
+});
+var import_vue = __toModule(require("vue"));
+var import_vue2 = __toModule(require("vue"));
+var import_utils = __toModule(require("../utils"));
+var import_use = __toModule(require("@vant/use"));
+var import_use_touch = __toModule(require("../composables/use-touch"));
+var import_use_expose = __toModule(require("../composables/use-expose"));
+var import_on_popup_reopen = __toModule(require("../composables/on-popup-reopen"));
+const [name, bem] = (0, import_utils.createNamespace)("swipe");
+const swipeProps = {
+  loop: import_utils.truthProp,
+  width: import_utils.numericProp,
+  height: import_utils.numericProp,
   vertical: Boolean,
-  autoplay: (0, _utils.makeNumericProp)(0),
-  duration: (0, _utils.makeNumericProp)(500),
-  touchable: _utils.truthProp,
+  autoplay: (0, import_utils.makeNumericProp)(0),
+  duration: (0, import_utils.makeNumericProp)(500),
+  touchable: import_utils.truthProp,
   lazyRender: Boolean,
-  initialSwipe: (0, _utils.makeNumericProp)(0),
+  initialSwipe: (0, import_utils.makeNumericProp)(0),
   indicatorColor: String,
-  showIndicators: _utils.truthProp,
-  stopPropagation: _utils.truthProp
+  showIndicators: import_utils.truthProp,
+  stopPropagation: import_utils.truthProp
 };
-var SWIPE_KEY = Symbol(name);
-exports.SWIPE_KEY = SWIPE_KEY;
-
-var _default = (0, _vue.defineComponent)({
+const SWIPE_KEY = Symbol(name);
+var stdin_default = (0, import_vue2.defineComponent)({
   name,
   props: swipeProps,
-  emits: ['change'],
-
-  setup(props, _ref) {
-    var {
-      emit,
-      slots
-    } = _ref;
-    var root = (0, _vue.ref)();
-    var state = (0, _vue.reactive)({
+  emits: ["change"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const root = (0, import_vue2.ref)();
+    const state = (0, import_vue2.reactive)({
       rect: null,
       width: 0,
       height: 0,
@@ -54,121 +65,95 @@ var _default = (0, _vue.defineComponent)({
       active: 0,
       swiping: false
     });
-    var touch = (0, _useTouch.useTouch)();
-    var {
+    const touch = (0, import_use_touch.useTouch)();
+    const {
       children,
       linkChildren
-    } = (0, _use.useChildren)(SWIPE_KEY);
-    var count = (0, _vue.computed)(() => children.length);
-    var size = (0, _vue.computed)(() => state[props.vertical ? 'height' : 'width']);
-    var delta = (0, _vue.computed)(() => props.vertical ? touch.deltaY.value : touch.deltaX.value);
-    var minOffset = (0, _vue.computed)(() => {
+    } = (0, import_use.useChildren)(SWIPE_KEY);
+    const count = (0, import_vue2.computed)(() => children.length);
+    const size = (0, import_vue2.computed)(() => state[props.vertical ? "height" : "width"]);
+    const delta = (0, import_vue2.computed)(() => props.vertical ? touch.deltaY.value : touch.deltaX.value);
+    const minOffset = (0, import_vue2.computed)(() => {
       if (state.rect) {
-        var base = props.vertical ? state.rect.height : state.rect.width;
+        const base = props.vertical ? state.rect.height : state.rect.width;
         return base - size.value * count.value;
       }
-
       return 0;
     });
-    var maxCount = (0, _vue.computed)(() => Math.ceil(Math.abs(minOffset.value) / size.value));
-    var trackSize = (0, _vue.computed)(() => count.value * size.value);
-    var activeIndicator = (0, _vue.computed)(() => (state.active + count.value) % count.value);
-    var isCorrectDirection = (0, _vue.computed)(() => {
-      var expect = props.vertical ? 'vertical' : 'horizontal';
+    const maxCount = (0, import_vue2.computed)(() => Math.ceil(Math.abs(minOffset.value) / size.value));
+    const trackSize = (0, import_vue2.computed)(() => count.value * size.value);
+    const activeIndicator = (0, import_vue2.computed)(() => (state.active + count.value) % count.value);
+    const isCorrectDirection = (0, import_vue2.computed)(() => {
+      const expect = props.vertical ? "vertical" : "horizontal";
       return touch.direction.value === expect;
     });
-    var trackStyle = (0, _vue.computed)(() => {
-      var style = {
-        transitionDuration: (state.swiping ? 0 : props.duration) + "ms",
-        transform: "translate" + (props.vertical ? 'Y' : 'X') + "(" + state.offset + "px)"
+    const trackStyle = (0, import_vue2.computed)(() => {
+      const style = {
+        transitionDuration: `${state.swiping ? 0 : props.duration}ms`,
+        transform: `translate${props.vertical ? "Y" : "X"}(${state.offset}px)`
       };
-
       if (size.value) {
-        var mainAxis = props.vertical ? 'height' : 'width';
-        var crossAxis = props.vertical ? 'width' : 'height';
-        style[mainAxis] = trackSize.value + "px";
-        style[crossAxis] = props[crossAxis] ? props[crossAxis] + "px" : '';
+        const mainAxis = props.vertical ? "height" : "width";
+        const crossAxis = props.vertical ? "width" : "height";
+        style[mainAxis] = `${trackSize.value}px`;
+        style[crossAxis] = props[crossAxis] ? `${props[crossAxis]}px` : "";
       }
-
       return style;
     });
-
-    var getTargetActive = pace => {
-      var {
+    const getTargetActive = (pace) => {
+      const {
         active
       } = state;
-
       if (pace) {
         if (props.loop) {
-          return (0, _utils.clamp)(active + pace, -1, count.value);
+          return (0, import_utils.clamp)(active + pace, -1, count.value);
         }
-
-        return (0, _utils.clamp)(active + pace, 0, maxCount.value);
+        return (0, import_utils.clamp)(active + pace, 0, maxCount.value);
       }
-
       return active;
     };
-
-    var getTargetOffset = function (targetActive, offset) {
-      if (offset === void 0) {
-        offset = 0;
-      }
-
-      var currentPosition = targetActive * size.value;
-
+    const getTargetOffset = (targetActive, offset = 0) => {
+      let currentPosition = targetActive * size.value;
       if (!props.loop) {
         currentPosition = Math.min(currentPosition, -minOffset.value);
       }
-
-      var targetOffset = offset - currentPosition;
-
+      let targetOffset = offset - currentPosition;
       if (!props.loop) {
-        targetOffset = (0, _utils.clamp)(targetOffset, minOffset.value, 0);
+        targetOffset = (0, import_utils.clamp)(targetOffset, minOffset.value, 0);
       }
-
       return targetOffset;
     };
-
-    var move = _ref2 => {
-      var {
-        pace = 0,
-        offset = 0,
-        emitChange
-      } = _ref2;
-
+    const move = ({
+      pace = 0,
+      offset = 0,
+      emitChange
+    }) => {
       if (count.value <= 1) {
         return;
       }
-
-      var {
+      const {
         active
       } = state;
-      var targetActive = getTargetActive(pace);
-      var targetOffset = getTargetOffset(targetActive, offset); // auto move first and last swipe in loop mode
-
+      const targetActive = getTargetActive(pace);
+      const targetOffset = getTargetOffset(targetActive, offset);
       if (props.loop) {
         if (children[0] && targetOffset !== minOffset.value) {
-          var outRightBound = targetOffset < minOffset.value;
+          const outRightBound = targetOffset < minOffset.value;
           children[0].setOffset(outRightBound ? trackSize.value : 0);
         }
-
         if (children[count.value - 1] && targetOffset !== 0) {
-          var outLeftBound = targetOffset > 0;
+          const outLeftBound = targetOffset > 0;
           children[count.value - 1].setOffset(outLeftBound ? -trackSize.value : 0);
         }
       }
-
       state.active = targetActive;
       state.offset = targetOffset;
-
       if (emitChange && targetActive !== active) {
-        emit('change', activeIndicator.value);
+        emit("change", activeIndicator.value);
       }
     };
-
-    var correctPosition = () => {
+    const correctPosition = () => {
       state.swiping = true;
-
       if (state.active <= -1) {
         move({
           pace: count.value
@@ -178,26 +163,22 @@ var _default = (0, _vue.defineComponent)({
           pace: -count.value
         });
       }
-    }; // swipe to prev item
-
-
-    var prev = () => {
+    };
+    const prev = () => {
       correctPosition();
       touch.reset();
-      (0, _use.doubleRaf)(() => {
+      (0, import_use.doubleRaf)(() => {
         state.swiping = false;
         move({
           pace: -1,
           emitChange: true
         });
       });
-    }; // swipe to next item
-
-
-    var next = () => {
+    };
+    const next = () => {
       correctPosition();
       touch.reset();
-      (0, _use.doubleRaf)(() => {
+      (0, import_use.doubleRaf)(() => {
         state.swiping = false;
         move({
           pace: 1,
@@ -205,107 +186,85 @@ var _default = (0, _vue.defineComponent)({
         });
       });
     };
-
-    var autoplayTimer;
-
-    var stopAutoplay = () => clearTimeout(autoplayTimer);
-
-    var autoplay = () => {
+    let autoplayTimer;
+    const stopAutoplay = () => clearTimeout(autoplayTimer);
+    const autoplay = () => {
       stopAutoplay();
-
       if (props.autoplay > 0 && count.value > 1) {
         autoplayTimer = setTimeout(() => {
           next();
           autoplay();
         }, +props.autoplay);
       }
-    }; // initialize swipe position
-
-
-    var initialize = function (active) {
-      if (active === void 0) {
-        active = +props.initialSwipe;
-      }
-
+    };
+    const initialize = (active = +props.initialSwipe) => {
       if (!root.value) {
         return;
       }
-
-      if (!(0, _utils.isHidden)(root)) {
-        var _props$width, _props$height;
-
-        var rect = {
-          width: root.value.offsetWidth,
-          height: root.value.offsetHeight
-        };
-        state.rect = rect;
-        state.width = +((_props$width = props.width) != null ? _props$width : rect.width);
-        state.height = +((_props$height = props.height) != null ? _props$height : rect.height);
-      }
-
-      if (count.value) {
-        active = Math.min(count.value - 1, active);
+      const cb = () => {
+        var _a, _b;
+        if (!(0, import_utils.isHidden)(root)) {
+          const rect = {
+            width: root.value.offsetWidth,
+            height: root.value.offsetHeight
+          };
+          state.rect = rect;
+          state.width = +((_a = props.width) != null ? _a : rect.width);
+          state.height = +((_b = props.height) != null ? _b : rect.height);
+        }
+        if (count.value) {
+          active = Math.min(count.value - 1, active);
+        }
+        state.active = active;
+        state.swiping = true;
+        state.offset = getTargetOffset(active);
+        children.forEach((swipe) => {
+          swipe.setOffset(0);
+        });
+        autoplay();
+      };
+      if ((0, import_utils.isHidden)(root)) {
+        (0, import_vue2.nextTick)().then(cb);
+      } else {
+        cb();
       }
-
-      state.active = active;
-      state.swiping = true;
-      state.offset = getTargetOffset(active);
-      children.forEach(swipe => {
-        swipe.setOffset(0);
-      });
-      autoplay();
     };
-
-    var resize = () => initialize(state.active);
-
-    var touchStartTime;
-
-    var onTouchStart = event => {
-      if (!props.touchable) return;
+    const resize = () => initialize(state.active);
+    let touchStartTime;
+    const onTouchStart = (event) => {
+      if (!props.touchable)
+        return;
       touch.start(event);
       touchStartTime = Date.now();
       stopAutoplay();
       correctPosition();
     };
-
-    var onTouchMove = event => {
+    const onTouchMove = (event) => {
       if (props.touchable && state.swiping) {
-        touch.move(event); // if user starting to touchmove, prevent the event bubbling to
-        // avoid affecting the parent components
-
-        var shouldPrevent = isCorrectDirection.value || touch.offsetY.value > touch.offsetX.value === props.vertical;
-
-        if (shouldPrevent) {
-          (0, _utils.preventDefault)(event, props.stopPropagation);
-        }
-
+        touch.move(event);
         if (isCorrectDirection.value) {
+          (0, import_utils.preventDefault)(event, props.stopPropagation);
           move({
             offset: delta.value
           });
         }
       }
     };
-
-    var onTouchEnd = () => {
+    const onTouchEnd = () => {
       if (!props.touchable || !state.swiping) {
         return;
       }
-
-      var duration = Date.now() - touchStartTime;
-      var speed = delta.value / duration;
-      var shouldSwipe = Math.abs(speed) > 0.25 || Math.abs(delta.value) > size.value / 2;
-
+      const duration = Date.now() - touchStartTime;
+      const speed = delta.value / duration;
+      const shouldSwipe = Math.abs(speed) > 0.25 || Math.abs(delta.value) > size.value / 2;
       if (shouldSwipe && isCorrectDirection.value) {
-        var offset = props.vertical ? touch.offsetY.value : touch.offsetX.value;
-        var pace = 0;
-
+        const offset = props.vertical ? touch.offsetY.value : touch.offsetX.value;
+        let pace = 0;
         if (props.loop) {
           pace = offset > 0 ? delta.value > 0 ? -1 : 1 : 0;
         } else {
-          pace = -Math[delta.value > 0 ? 'ceil' : 'floor'](delta.value / size.value);
+          pace = -Math[delta.value > 0 ? "ceil" : "floor"](delta.value / size.value);
         }
-
         move({
           pace,
           emitChange: true
@@ -315,72 +274,60 @@ var _default = (0, _vue.defineComponent)({
           pace: 0
         });
       }
-
       state.swiping = false;
       autoplay();
     };
-
-    var swipeTo = function (index, options) {
-      if (options === void 0) {
-        options = {};
-      }
-
+    const swipeTo = (index, options = {}) => {
       correctPosition();
       touch.reset();
-      (0, _use.doubleRaf)(() => {
-        var targetIndex;
-
+      (0, import_use.doubleRaf)(() => {
+        let targetIndex;
         if (props.loop && index === count.value) {
           targetIndex = state.active === 0 ? 0 : index;
         } else {
           targetIndex = index % count.value;
         }
-
         if (options.immediate) {
-          (0, _use.doubleRaf)(() => {
+          (0, import_use.doubleRaf)(() => {
             state.swiping = false;
           });
         } else {
           state.swiping = false;
         }
-
         move({
           pace: targetIndex - state.active,
           emitChange: true
         });
       });
     };
-
-    var renderDot = (_, index) => {
-      var active = index === activeIndicator.value;
-      var style = active ? {
+    const renderDot = (_, index) => {
+      const active = index === activeIndicator.value;
+      const style = active ? {
         backgroundColor: props.indicatorColor
-      } : undefined;
-      return (0, _vue.createVNode)("i", {
+      } : void 0;
+      return (0, import_vue.createVNode)("i", {
         "style": style,
-        "class": bem('indicator', {
+        "class": bem("indicator", {
           active
         })
       }, null);
     };
-
-    var renderIndicator = () => {
+    const renderIndicator = () => {
       if (slots.indicator) {
         return slots.indicator({
-          active: activeIndicator.value
+          active: activeIndicator.value,
+          total: count.value
         });
       }
-
       if (props.showIndicators && count.value > 1) {
-        return (0, _vue.createVNode)("div", {
-          "class": bem('indicators', {
+        return (0, import_vue.createVNode)("div", {
+          "class": bem("indicators", {
             vertical: props.vertical
           })
-        }, [Array(count.value).fill('').map(renderDot)]);
+        }, [Array(count.value).fill("").map(renderDot)]);
       }
     };
-
-    (0, _useExpose.useExpose)({
+    (0, import_use_expose.useExpose)({
       prev,
       next,
       state,
@@ -393,37 +340,37 @@ var _default = (0, _vue.defineComponent)({
       count,
       activeIndicator
     });
-    (0, _vue.watch)(() => props.initialSwipe, value => initialize(+value));
-    (0, _vue.watch)(count, () => initialize(state.active));
-    (0, _vue.watch)(() => props.autoplay, autoplay);
-    (0, _vue.watch)([_utils.windowWidth, _utils.windowHeight], resize);
-    (0, _vue.watch)((0, _use.usePageVisibility)(), visible => {
-      if (visible === 'visible') {
+    (0, import_vue2.watch)(() => props.initialSwipe, (value) => initialize(+value));
+    (0, import_vue2.watch)(count, () => initialize(state.active));
+    (0, import_vue2.watch)(() => props.autoplay, autoplay);
+    (0, import_vue2.watch)([import_utils.windowWidth, import_utils.windowHeight], resize);
+    (0, import_vue2.watch)((0, import_use.usePageVisibility)(), (visible) => {
+      if (visible === "visible") {
         autoplay();
       } else {
         stopAutoplay();
       }
     });
-    (0, _vue.onMounted)(initialize);
-    (0, _vue.onActivated)(() => initialize(state.active));
-    (0, _onPopupReopen.onPopupReopen)(() => initialize(state.active));
-    (0, _vue.onDeactivated)(stopAutoplay);
-    (0, _vue.onBeforeUnmount)(stopAutoplay);
-    return () => (0, _vue.createVNode)("div", {
-      "ref": root,
-      "class": bem()
-    }, [(0, _vue.createVNode)("div", {
-      "style": trackStyle.value,
-      "class": bem('track', {
-        vertical: props.vertical
-      }),
-      "onTouchstart": onTouchStart,
-      "onTouchmove": onTouchMove,
-      "onTouchend": onTouchEnd,
-      "onTouchcancel": onTouchEnd
-    }, [slots.default == null ? void 0 : slots.default()]), renderIndicator()]);
+    (0, import_vue2.onMounted)(initialize);
+    (0, import_vue2.onActivated)(() => initialize(state.active));
+    (0, import_on_popup_reopen.onPopupReopen)(() => initialize(state.active));
+    (0, import_vue2.onDeactivated)(stopAutoplay);
+    (0, import_vue2.onBeforeUnmount)(stopAutoplay);
+    return () => {
+      var _a;
+      return (0, import_vue.createVNode)("div", {
+        "ref": root,
+        "class": bem()
+      }, [(0, import_vue.createVNode)("div", {
+        "style": trackStyle.value,
+        "class": bem("track", {
+          vertical: props.vertical
+        }),
+        "onTouchstart": onTouchStart,
+        "onTouchmove": onTouchMove,
+        "onTouchend": onTouchEnd,
+        "onTouchcancel": onTouchEnd
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), renderIndicator()]);
+    };
   }
-
 });
-
-exports.default = _default;

package/lib/swipe/index.css

@@ -1 +1 @@
-:root{--van-swipe-indicator-size:6px;--van-swipe-indicator-margin:var(--van-padding-sm);--van-swipe-indicator-active-opacity:1;--van-swipe-indicator-inactive-opacity:0.3;--van-swipe-indicator-active-background-color:var(--van-primary-color);--van-swipe-indicator-inactive-background-color:var(--van-border-color)}.van-swipe{position:relative;overflow:hidden;transform:translateZ(0);cursor:-webkit-grab;cursor:grab;-webkit-user-select:none;user-select:none}.van-swipe__track{display:flex;height:100%}.van-swipe__track--vertical{flex-direction:column}.van-swipe__indicators{position:absolute;bottom:var(--van-swipe-indicator-margin);left:50%;display:flex;transform:translateX(-50%)}.van-swipe__indicators--vertical{top:50%;bottom:auto;left:var(--van-swipe-indicator-margin);flex-direction:column;transform:translateY(-50%)}.van-swipe__indicators--vertical .van-swipe__indicator:not(:last-child){margin-bottom:var(--van-swipe-indicator-size)}.van-swipe__indicator{width:var(--van-swipe-indicator-size);height:var(--van-swipe-indicator-size);background-color:var(--van-swipe-indicator-inactive-background-color);border-radius:100%;opacity:var(--van-swipe-indicator-inactive-opacity);transition:opacity var(--van-animation-duration-fast),background-color var(--van-animation-duration-fast)}.van-swipe__indicator:not(:last-child){margin-right:var(--van-swipe-indicator-size)}.van-swipe__indicator--active{background-color:var(--van-swipe-indicator-active-background-color);opacity:var(--van-swipe-indicator-active-opacity)}
+:root{--van-swipe-indicator-size: 6px;--van-swipe-indicator-margin: var(--van-padding-sm);--van-swipe-indicator-active-opacity: 1;--van-swipe-indicator-inactive-opacity: .3;--van-swipe-indicator-active-background-color: var(--van-primary-color);--van-swipe-indicator-inactive-background-color: var(--van-border-color)}.van-swipe{position:relative;overflow:hidden;transform:translateZ(0);cursor:-webkit-grab;cursor:grab;-webkit-user-select:none;user-select:none}.van-swipe__track{display:flex;height:100%}.van-swipe__track--vertical{flex-direction:column}.van-swipe__indicators{position:absolute;bottom:var(--van-swipe-indicator-margin);left:50%;display:flex;transform:translate(-50%)}.van-swipe__indicators--vertical{top:50%;bottom:auto;left:var(--van-swipe-indicator-margin);flex-direction:column;transform:translateY(-50%)}.van-swipe__indicators--vertical .van-swipe__indicator:not(:last-child){margin-bottom:var(--van-swipe-indicator-size)}.van-swipe__indicator{width:var(--van-swipe-indicator-size);height:var(--van-swipe-indicator-size);background-color:var(--van-swipe-indicator-inactive-background-color);border-radius:100%;opacity:var(--van-swipe-indicator-inactive-opacity);transition:opacity var(--van-animation-duration-fast),background-color var(--van-animation-duration-fast)}.van-swipe__indicator:not(:last-child){margin-right:var(--van-swipe-indicator-size)}.van-swipe__indicator--active{background-color:var(--van-swipe-indicator-active-background-color);opacity:var(--van-swipe-indicator-active-opacity)}