vant 2.12.31 → 2.12.34

package/README.md

@@ -87,11 +87,12 @@ Vant 3 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).
 
 | Project | Description |
 | --- | --- |
-| [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components base on Vant |
+| [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components based on Vant |
 | [mxdi9i7/vant-react](https://github.com/mxdi9i7/vant-react) | Mobile UI Components built on React and TS, inspired by Vant |
 | [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI |
 | [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
-| [vant-theme](https://github.com/Aisen60/vant-theme) | online theme preview built on Vant UI |
+| [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
+| [@antmjs/vantui](https://github.com/antmjs/vantui) | Mobile UI Components based on Vant, supporting Taro and React |
 
 ## Links
 

package/README.zh-CN.md

@@ -96,11 +96,12 @@ Vant 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致
 
 | 项目 | 描述 |
 | --- | --- |
-| [3lang3/react-vant](https://github.com/3lang3/react-vant) | 参照 Vant 打造的 React 框架移动端组件库 |
+| [3lang3/react-vant](https://github.com/3lang3/react-vant) | 参照 Vant 打造的 React 移动端组件库 |
 | [mxdi9i7/vant-react](https://github.com/mxdi9i7/vant-react) | 基于 React 和 TS 构建的移动端组件库 |
 | [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Vant 支付宝小程序版 |
 | [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 |
 | [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |
+| [@antmjs/vantui](https://github.com/antmjs/vantui) | 基于 Vant Weapp 开发的多端组件库，同时支持 Taro 和 React |
 
 ## 链接
 

package/es/datetime-picker/TimePicker.js

@@ -114,6 +114,9 @@ export default createComponent({
       this.updateInnerValue();
       this.$nextTick(function () {
         _this2.$nextTick(function () {
+          // https://github.com/youzan/vant/issues/9775
+          _this2.updateInnerValue();
+
           _this2.$emit('change', picker);
         });
       });

package/es/field/index.js

@@ -339,13 +339,15 @@ export default createComponent({
 
       /* istanbul ignore if */
 
-      var readonly = this.getProp('readonly');
-
-      if (readonly) {
+      if (this.getProp('readonly')) {
         this.blur();
       }
     },
     onBlur: function onBlur(event) {
+      if (this.getProp('readonly')) {
+        return;
+      }
+
       this.focused = false;
       this.updateValue(this.value, 'onBlur');
       this.$emit('blur', event);

package/es/index.js

@@ -87,7 +87,7 @@ import Tag from './tag';
 import Toast from './toast';
 import TreeSelect from './tree-select';
 import Uploader from './uploader';
-var version = '2.12.31';
+var version = '2.12.34';
 
 function install(Vue) {
   var components = [ActionSheet, AddressEdit, AddressList, Area, Badge, Button, Calendar, Card, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Circle, Col, Collapse, CollapseItem, ContactCard, ContactEdit, ContactList, CountDown, Coupon, CouponCell, CouponList, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, Form, GoodsAction, GoodsActionButton, GoodsActionIcon, Grid, GridItem, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, List, Loading, Locale, NavBar, NoticeBar, Notify, NumberKeyboard, Overlay, Pagination, Panel, PasswordInput, Picker, Popover, Popup, Progress, PullRefresh, Radio, RadioGroup, Rate, Row, Search, ShareSheet, Sidebar, SidebarItem, Skeleton, Sku, Slider, Step, Stepper, Steps, Sticky, SubmitBar, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Tabs, Tag, Toast, TreeSelect, Uploader];

package/es/notice-bar/index.js

@@ -11,7 +11,7 @@ export default createComponent({
   mixins: [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: {
@@ -48,24 +48,20 @@ export 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) {
@@ -75,7 +71,7 @@ export default createComponent({
       }
     },
     onTransitionEnd: function onTransitionEnd() {
-      var _this2 = this;
+      var _this = this;
 
       this.offset = this.wrapWidth;
       this.duration = 0; // wait for Vue to render offset
@@ -84,50 +80,52 @@ export default createComponent({
       raf(function () {
         // use double raf to ensure animation can start
         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 = 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 = 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) {
           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,
@@ -202,7 +200,7 @@ export default createComponent({
       "style": barStyle,
       "on": {
         "click": function click(event) {
-          _this4.$emit('click', event);
+          _this3.$emit('click', event);
         }
       }
     }, [LeftIcon(), h("div", {

package/es/picker/PickerColumn.js

@@ -1,16 +1,16 @@
 import _mergeJSXProps2 from "@vue/babel-helper-vue-jsx-merge-props";
 import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
 import { deepClone } from '../utils/deep-clone';
-import { createNamespace, isObject } from '../utils';
+import { createNamespace, inBrowser, isObject } from '../utils';
 import { range } from '../utils/format/number';
-import { preventDefault } from '../utils/dom/event';
+import { preventDefault, on, off } from '../utils/dom/event';
 import { TouchMixin } from '../mixins/touch';
 var DEFAULT_DURATION = 200; // 惯性滑动思路:
 // 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_LIMIT_TIME` 且 move
 // 距离大于 `MOMENTUM_LIMIT_DISTANCE` 时，执行惯性滑动
 
-var MOMENTUM_LIMIT_TIME = 300;
-var MOMENTUM_LIMIT_DISTANCE = 15;
+export var MOMENTUM_LIMIT_TIME = 300;
+export var MOMENTUM_LIMIT_DISTANCE = 15;
 
 var _createNamespace = createNamespace('picker-column'),
     createComponent = _createNamespace[0],
@@ -25,8 +25,12 @@ function getElementTranslateY(element) {
 
 function isOptionDisabled(option) {
   return isObject(option) && option.disabled;
-}
+} // use standard WheelEvent:
+// https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent
+
 
+var supportMousewheel = inBrowser && 'onwheel' in window;
+var mousewheelTimer = null;
 export default createComponent({
   mixins: [TouchMixin],
   props: {
@@ -62,6 +66,10 @@ export default createComponent({
   },
   mounted: function mounted() {
     this.bindTouchEvent(this.$el);
+
+    if (supportMousewheel) {
+      on(this.$el, 'wheel', this.onMouseWheel, false);
+    }
   },
   destroyed: function destroyed() {
     var children = this.$parent.children;
@@ -69,6 +77,10 @@ export default createComponent({
     if (children) {
       children.splice(children.indexOf(this), 1);
     }
+
+    if (supportMousewheel) {
+      off(this.$el, 'wheel');
+    }
   },
   watch: {
     initialOptions: 'setOptions',
@@ -156,6 +168,43 @@ export default createComponent({
         _this.moving = false;
       }, 0);
     },
+    onMouseWheel: function onMouseWheel(event) {
+      var _this2 = this;
+
+      if (this.readonly) {
+        return;
+      }
+
+      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 = 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();
     },
@@ -187,17 +236,17 @@ export default 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
@@ -243,7 +292,7 @@ export default createComponent({
       }
     },
     genOptions: function genOptions() {
-      var _this3 = this;
+      var _this4 = this;
 
       var h = this.$createElement;
       var optionStyle = {
@@ -252,7 +301,7 @@ export default 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 = {
@@ -263,19 +312,19 @@ export default 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", _mergeJSXProps([{}, data]), [_this3.slots('option', option) || h("div", _mergeJSXProps2([{}, childData]))]);
+        return h("li", _mergeJSXProps([{}, data]), [_this4.slots('option', option) || h("div", _mergeJSXProps2([{}, childData]))]);
       });
     }
   },

package/es/swipe/index.js

@@ -181,10 +181,16 @@ export 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) {
         preventDefault(event, this.stopPropagation);
+      }
+
+      if (this.isCorrectDirection) {
         this.move({
           offset: this.delta
         });

package/es/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/es/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/es/tabbar/index.js

@@ -62,23 +62,23 @@ export 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) {
-        callInterceptor({
-          interceptor: this.beforeChange,
-          args: [active],
-          done: function done() {
-            _this2.$emit('input', active);
+      callInterceptor({
+        interceptor: this.beforeChange,
+        args: [active],
+        done: function done() {
+          _this2.$emit('input', active);
 
-            _this2.$emit('change', active);
-          }
-        });
-      }
+          _this2.$emit('change', active);
+
+          afterChange();
+        }
+      });
     },
     genTabbar: function genTabbar() {
       var _ref;

package/es/tabbar-item/index.js

@@ -25,11 +25,11 @@ export default createComponent({
   }),
   data: function data() {
     return {
-      active: false
+      nameMatched: false
     };
   },
   computed: {
-    routeActive: function routeActive() {
+    routeMatched: function routeMatched() {
       var to = this.to,
           $route = this.$route;
 
@@ -37,22 +37,33 @@ export default createComponent({
         var config = isObject(to) ? to : {
           path: to
         };
-        var pathMatched = config.path === $route.path;
-        var nameMatched = isDef(config.name) && config.name === $route.name;
-        return pathMatched || nameMatched;
+        return !!$route.matched.find(function (r) {
+          var pathMatched = config.path === r.path;
+          var nameMatched = 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 () {
+          route(_this.$router, _this);
+        });
+      }
+
       this.$emit('click', event);
-      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) {
@@ -73,7 +84,7 @@ export 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) {
@@ -92,7 +103,7 @@ export default createComponent({
       }
     }, [h("div", {
       "class": bem('icon')
-    }, [this.genIcon(active), h(Info, {
+    }, [this.genIcon(), h(Info, {
       "attrs": {
         "dot": this.dot,
         "info": (_this$badge = this.badge) != null ? _this$badge : this.info

package/lib/datetime-picker/TimePicker.js

@@ -125,6 +125,9 @@ var _default = createComponent({
       this.updateInnerValue();
       this.$nextTick(function () {
         _this2.$nextTick(function () {
+          // https://github.com/youzan/vant/issues/9775
+          _this2.updateInnerValue();
+
           _this2.$emit('change', picker);
         });
       });

package/lib/field/index.js

@@ -354,13 +354,15 @@ var _default = createComponent({
 
       /* istanbul ignore if */
 
-      var readonly = this.getProp('readonly');
-
-      if (readonly) {
+      if (this.getProp('readonly')) {
         this.blur();
       }
     },
     onBlur: function onBlur(event) {
+      if (this.getProp('readonly')) {
+        return;
+      }
+
       this.focused = false;
       this.updateValue(this.value, 'onBlur');
       this.$emit('blur', event);