vant 2.12.30 → 2.12.34-beta.0

package/lib/index.js

@@ -361,7 +361,7 @@ exports.TreeSelect = _treeSelect.default;
 var _uploader = _interopRequireDefault(require("./uploader"));
 
 exports.Uploader = _uploader.default;
-var version = '2.12.30';
+var version = '2.12.34-beta.0';
 exports.version = version;
 
 function install(Vue) {

package/lib/notice-bar/index.js

@@ -21,7 +21,7 @@ var _default = createComponent({
   mixins: [(0, _bindEvent.BindEventMixin)(function (bind) {
     // fix cache issues with forwards and back history in safari
     // see: https://guwii.com/cache-issues-with-forwards-and-back-history-in-safari/
-    bind(window, 'pageshow', this.start);
+    bind(window, 'pageshow', this.reset);
   })],
   inject: {
     vanPopup: {
@@ -58,24 +58,20 @@ var _default = createComponent({
     };
   },
   watch: {
-    scrollable: 'start',
+    scrollable: 'reset',
     text: {
-      handler: 'start',
+      handler: 'reset',
       immediate: true
     }
   },
   created: function created() {
-    var _this = this;
-
     // https://github.com/youzan/vant/issues/8634
     if (this.vanPopup) {
-      this.vanPopup.onReopen(function () {
-        _this.start();
-      });
+      this.vanPopup.onReopen(this.reset);
     }
   },
   activated: function activated() {
-    this.start();
+    this.reset();
   },
   methods: {
     onClickIcon: function onClickIcon(event) {
@@ -85,7 +81,7 @@ var _default = createComponent({
       }
     },
     onTransitionEnd: function onTransitionEnd() {
-      var _this2 = this;
+      var _this = this;
 
       this.offset = this.wrapWidth;
       this.duration = 0; // wait for Vue to render offset
@@ -94,50 +90,52 @@ var _default = createComponent({
       (0, _raf.raf)(function () {
         // use double raf to ensure animation can start
         (0, _raf.doubleRaf)(function () {
-          _this2.offset = -_this2.contentWidth;
-          _this2.duration = (_this2.contentWidth + _this2.wrapWidth) / _this2.speed;
+          _this.offset = -_this.contentWidth;
+          _this.duration = (_this.contentWidth + _this.wrapWidth) / _this.speed;
 
-          _this2.$emit('replay');
+          _this.$emit('replay');
         });
       });
     },
+    // not an exposed-api, but may used by some users
+    start: function start() {
+      this.reset();
+    },
+    // @exposed-api
     reset: function reset() {
+      var _this2 = this;
+
+      var delay = (0, _utils.isDef)(this.delay) ? this.delay * 1000 : 0;
       this.offset = 0;
       this.duration = 0;
       this.wrapWidth = 0;
       this.contentWidth = 0;
-    },
-    start: function start() {
-      var _this3 = this;
-
-      var delay = (0, _utils.isDef)(this.delay) ? this.delay * 1000 : 0;
-      this.reset();
       clearTimeout(this.startTimer);
       this.startTimer = setTimeout(function () {
-        var _this3$$refs = _this3.$refs,
-            wrap = _this3$$refs.wrap,
-            content = _this3$$refs.content;
+        var _this2$$refs = _this2.$refs,
+            wrap = _this2$$refs.wrap,
+            content = _this2$$refs.content;
 
-        if (!wrap || !content || _this3.scrollable === false) {
+        if (!wrap || !content || _this2.scrollable === false) {
           return;
         }
 
         var wrapWidth = wrap.getBoundingClientRect().width;
         var contentWidth = content.getBoundingClientRect().width;
 
-        if (_this3.scrollable || contentWidth > wrapWidth) {
+        if (_this2.scrollable || contentWidth > wrapWidth) {
           (0, _raf.doubleRaf)(function () {
-            _this3.offset = -contentWidth;
-            _this3.duration = contentWidth / _this3.speed;
-            _this3.wrapWidth = wrapWidth;
-            _this3.contentWidth = contentWidth;
+            _this2.offset = -contentWidth;
+            _this2.duration = contentWidth / _this2.speed;
+            _this2.wrapWidth = wrapWidth;
+            _this2.contentWidth = contentWidth;
           });
         }
       }, delay);
     }
   },
   render: function render() {
-    var _this4 = this;
+    var _this3 = this;
 
     var h = arguments[0];
     var slots = this.slots,
@@ -212,7 +210,7 @@ var _default = createComponent({
       "style": barStyle,
       "on": {
         "click": function click(event) {
-          _this4.$emit('click', event);
+          _this3.$emit('click', event);
         }
       }
     }, [LeftIcon(), h("div", {

package/lib/picker/PickerColumn.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.default = exports.MOMENTUM_LIMIT_DISTANCE = exports.MOMENTUM_LIMIT_TIME = void 0;
 
 var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
 
@@ -22,7 +22,9 @@ var DEFAULT_DURATION = 200; // 惯性滑动思路:
 // 距离大于 `MOMENTUM_LIMIT_DISTANCE` 时，执行惯性滑动
 
 var MOMENTUM_LIMIT_TIME = 300;
+exports.MOMENTUM_LIMIT_TIME = MOMENTUM_LIMIT_TIME;
 var MOMENTUM_LIMIT_DISTANCE = 15;
+exports.MOMENTUM_LIMIT_DISTANCE = MOMENTUM_LIMIT_DISTANCE;
 
 var _createNamespace = (0, _utils.createNamespace)('picker-column'),
     createComponent = _createNamespace[0],
@@ -37,7 +39,12 @@ function getElementTranslateY(element) {
 
 function isOptionDisabled(option) {
   return (0, _utils.isObject)(option) && option.disabled;
-}
+} // use standard WheelEvent:
+// https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent
+
+
+var supportMousewheel = _utils.inBrowser && 'onwheel' in window;
+var mousewheelTimer = null;
 
 var _default2 = createComponent({
   mixins: [_touch.TouchMixin],
@@ -74,6 +81,10 @@ var _default2 = createComponent({
   },
   mounted: function mounted() {
     this.bindTouchEvent(this.$el);
+
+    if (supportMousewheel) {
+      (0, _event.on)(this.$el, 'wheel', this.onMouseWheel, false);
+    }
   },
   destroyed: function destroyed() {
     var children = this.$parent.children;
@@ -81,6 +92,10 @@ var _default2 = createComponent({
     if (children) {
       children.splice(children.indexOf(this), 1);
     }
+
+    if (supportMousewheel) {
+      (0, _event.off)(this.$el, 'wheel');
+    }
   },
   watch: {
     initialOptions: 'setOptions',
@@ -168,6 +183,43 @@ var _default2 = createComponent({
         _this.moving = false;
       }, 0);
     },
+    onMouseWheel: function onMouseWheel(event) {
+      var _this2 = this;
+
+      if (this.readonly) {
+        return;
+      }
+
+      (0, _event.preventDefault)(event, true); // simply combine touchstart and touchmove
+
+      var translateY = getElementTranslateY(this.$refs.wrapper);
+      this.startOffset = Math.min(0, translateY - this.baseOffset);
+      this.momentumOffset = this.startOffset;
+      this.transitionEndTrigger = null; // directly use deltaY, see https://caniuse.com/?search=deltaY
+      // use deltaY to detect direction for not special setting device
+      // https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event
+
+      var deltaY = event.deltaY;
+
+      if (this.startOffset === 0 && deltaY < 0) {
+        return;
+      } // get offset
+      // if necessary, can adjust distance value to make scrolling smoother
+
+
+      var distance = -deltaY;
+      this.offset = (0, _number.range)(this.startOffset + distance, -(this.count * this.itemHeight), this.itemHeight);
+
+      if (mousewheelTimer) {
+        clearTimeout(mousewheelTimer);
+      }
+
+      mousewheelTimer = setTimeout(function () {
+        _this2.onTouchEnd();
+
+        _this2.touchStartTime = 0;
+      }, MOMENTUM_LIMIT_TIME);
+    },
     onTransitionEnd: function onTransitionEnd() {
       this.stopMomentum();
     },
@@ -199,17 +251,17 @@ var _default2 = createComponent({
       return option;
     },
     setIndex: function setIndex(index, emitChange) {
-      var _this2 = this;
+      var _this3 = this;
 
       index = this.adjustIndex(index) || 0;
       var offset = -index * this.itemHeight;
 
       var trigger = function trigger() {
-        if (index !== _this2.currentIndex) {
-          _this2.currentIndex = index;
+        if (index !== _this3.currentIndex) {
+          _this3.currentIndex = index;
 
           if (emitChange) {
-            _this2.$emit('change', index);
+            _this3.$emit('change', index);
           }
         }
       }; // trigger the change event after transitionend when moving
@@ -255,7 +307,7 @@ var _default2 = createComponent({
       }
     },
     genOptions: function genOptions() {
-      var _this3 = this;
+      var _this4 = this;
 
       var h = this.$createElement;
       var optionStyle = {
@@ -264,7 +316,7 @@ var _default2 = createComponent({
       return this.options.map(function (option, index) {
         var _domProps;
 
-        var text = _this3.getOptionText(option);
+        var text = _this4.getOptionText(option);
 
         var disabled = isOptionDisabled(option);
         var data = {
@@ -275,19 +327,19 @@ var _default2 = createComponent({
           },
           class: [bem('item', {
             disabled: disabled,
-            selected: index === _this3.currentIndex
+            selected: index === _this4.currentIndex
           })],
           on: {
             click: function click() {
-              _this3.onClickItem(index);
+              _this4.onClickItem(index);
             }
           }
         };
         var childData = {
           class: 'van-ellipsis',
-          domProps: (_domProps = {}, _domProps[_this3.allowHtml ? 'innerHTML' : 'textContent'] = text, _domProps)
+          domProps: (_domProps = {}, _domProps[_this4.allowHtml ? 'innerHTML' : 'textContent'] = text, _domProps)
         };
-        return h("li", (0, _babelHelperVueJsxMergeProps.default)([{}, data]), [_this3.slots('option', option) || h("div", (0, _babelHelperVueJsxMergeProps.default)([{}, childData]))]);
+        return h("li", (0, _babelHelperVueJsxMergeProps.default)([{}, data]), [_this4.slots('option', option) || h("div", (0, _babelHelperVueJsxMergeProps.default)([{}, childData]))]);
       });
     }
   },

package/lib/progress/index.js

@@ -5,11 +5,17 @@ exports.default = void 0;
 
 var _utils = require("../utils");
 
+var _bindEvent = require("../mixins/bind-event");
+
 var _createNamespace = (0, _utils.createNamespace)('progress'),
     createComponent = _createNamespace[0],
     bem = _createNamespace[1];
 
 var _default = createComponent({
+  mixins: [(0, _bindEvent.BindEventMixin)(function (bind) {
+    bind(window, 'resize', this.resize, true);
+    bind(window, 'orientationchange', this.resize, true);
+  })],
   props: {
     color: String,
     inactive: Boolean,

package/lib/swipe/index.js

@@ -193,10 +193,16 @@ var _default = createComponent({
     },
     onTouchMove: function onTouchMove(event) {
       if (!this.touchable || !this.swiping) return;
-      this.touchMove(event);
+      this.touchMove(event); // if user starting to touchmove, prevent the event bubbling to
+      // avoid affecting the parent components
 
-      if (this.isCorrectDirection) {
+      var shouldPrevent = this.isCorrectDirection || this.offsetY > this.offsetX === this.vertical;
+
+      if (shouldPrevent) {
         (0, _event.preventDefault)(event, this.stopPropagation);
+      }
+
+      if (this.isCorrectDirection) {
         this.move({
           offset: this.delta
         });

package/lib/switch/index.css

@@ -1 +1 @@
-.van-switch{position:relative;display:inline-block;box-sizing:content-box;width:2em;height:1em;font-size:30px;background-color:#fff;border:1px solid rgba(0,0,0,.1);border-radius:1em;cursor:pointer;-webkit-transition:background-color .3s;transition:background-color .3s}.van-switch__node{position:absolute;top:0;left:0;width:1em;height:1em;background-color:#fff;border-radius:100%;box-shadow:0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);-webkit-transition:-webkit-transform .3s cubic-bezier(.3,1.05,.4,1.05);transition:-webkit-transform .3s cubic-bezier(.3,1.05,.4,1.05);transition:transform .3s cubic-bezier(.3,1.05,.4,1.05);transition:transform .3s cubic-bezier(.3,1.05,.4,1.05),-webkit-transform .3s cubic-bezier(.3,1.05,.4,1.05)}.van-switch__loading{top:25%;left:25%;width:50%;height:50%;line-height:1}.van-switch--on{background-color:#1989fa}.van-switch--on .van-switch__node{-webkit-transform:translateX(1em);transform:translateX(1em)}.van-switch--on .van-switch__loading{color:#1989fa}.van-switch--disabled{cursor:not-allowed;opacity:.5}.van-switch--loading{cursor:default}
+.van-switch{position:relative;display:inline-block;box-sizing:content-box;width:2em;height:1em;font-size:30px;background-color:#fff;border:1px solid rgba(0,0,0,.1);border-radius:1em;cursor:pointer;-webkit-transition:background-color .3s;transition:background-color .3s}.van-switch__node{position:absolute;top:0;left:0;width:1em;height:1em;font-size:inherit;background-color:#fff;border-radius:100%;box-shadow:0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);-webkit-transition:-webkit-transform .3s cubic-bezier(.3,1.05,.4,1.05);transition:-webkit-transform .3s cubic-bezier(.3,1.05,.4,1.05);transition:transform .3s cubic-bezier(.3,1.05,.4,1.05);transition:transform .3s cubic-bezier(.3,1.05,.4,1.05),-webkit-transform .3s cubic-bezier(.3,1.05,.4,1.05)}.van-switch__loading{top:25%;left:25%;width:50%;height:50%;line-height:1}.van-switch--on{background-color:#1989fa}.van-switch--on .van-switch__node{-webkit-transform:translateX(1em);transform:translateX(1em)}.van-switch--on .van-switch__loading{color:#1989fa}.van-switch--disabled{cursor:not-allowed;opacity:.5}.van-switch--loading{cursor:default}

package/lib/switch/index.less

@@ -19,6 +19,8 @@
     left: 0;
     width: @switch-node-size;
     height: @switch-node-size;
+    // https://github.com/youzan/vant/issues/9839
+    font-size: inherit;
     background-color: @switch-node-background-color;
     border-radius: 100%;
     box-shadow: @switch-node-box-shadow;

package/lib/tabbar/index.js

@@ -70,23 +70,23 @@ var _default = createComponent({
       var _this = this;
 
       this.children.forEach(function (item, index) {
-        item.active = (item.name || index) === _this.value;
+        item.nameMatched = (item.name || index) === _this.value;
       });
     },
-    onChange: function onChange(active) {
+    triggerChange: function triggerChange(active, afterChange) {
       var _this2 = this;
 
-      if (active !== this.value) {
-        (0, _interceptor.callInterceptor)({
-          interceptor: this.beforeChange,
-          args: [active],
-          done: function done() {
-            _this2.$emit('input', active);
-
-            _this2.$emit('change', active);
-          }
-        });
-      }
+      (0, _interceptor.callInterceptor)({
+        interceptor: this.beforeChange,
+        args: [active],
+        done: function done() {
+          _this2.$emit('input', active);
+
+          _this2.$emit('change', active);
+
+          afterChange();
+        }
+      });
     },
     genTabbar: function genTabbar() {
       var _ref;

package/lib/tabbar-item/index.js

@@ -37,11 +37,11 @@ var _default = createComponent({
   }),
   data: function data() {
     return {
-      active: false
+      nameMatched: false
     };
   },
   computed: {
-    routeActive: function routeActive() {
+    routeMatched: function routeMatched() {
       var to = this.to,
           $route = this.$route;
 
@@ -49,22 +49,33 @@ var _default = createComponent({
         var config = (0, _utils.isObject)(to) ? to : {
           path: to
         };
-        var pathMatched = config.path === $route.path;
-        var nameMatched = (0, _utils.isDef)(config.name) && config.name === $route.name;
-        return pathMatched || nameMatched;
+        return !!$route.matched.find(function (r) {
+          var pathMatched = config.path === r.path;
+          var nameMatched = (0, _utils.isDef)(config.name) && config.name === r.name;
+          return pathMatched || nameMatched;
+        });
       }
+    },
+    active: function active() {
+      return this.parent.route ? this.routeMatched : this.nameMatched;
     }
   },
   methods: {
     onClick: function onClick(event) {
-      this.parent.onChange(this.name || this.index);
+      var _this = this;
+
+      if (!this.active) {
+        this.parent.triggerChange(this.name || this.index, function () {
+          (0, _router.route)(_this.$router, _this);
+        });
+      }
+
       this.$emit('click', event);
-      (0, _router.route)(this.$router, this);
     },
-    genIcon: function genIcon(active) {
+    genIcon: function genIcon() {
       var h = this.$createElement;
       var slot = this.slots('icon', {
-        active: active
+        active: this.active
       });
 
       if (slot) {
@@ -85,7 +96,7 @@ var _default = createComponent({
     var _this$badge;
 
     var h = arguments[0];
-    var active = this.parent.route ? this.routeActive : this.active;
+    var active = this.active;
     var color = this.parent[active ? 'activeColor' : 'inactiveColor'];
 
     if (process.env.NODE_ENV === 'development' && this.info) {
@@ -104,7 +115,7 @@ var _default = createComponent({
       }
     }, [h("div", {
       "class": bem('icon')
-    }, [this.genIcon(active), h(_info.default, {
+    }, [this.genIcon(), h(_info.default, {
       "attrs": {
         "dot": this.dot,
         "info": (_this$badge = this.badge) != null ? _this$badge : this.info