vant 2.13.4 → 2.13.6

package/es/pagination/index.less

@@ -0,0 +1,77 @@
+@import '../style/var';
+
+.van-pagination {
+  display: flex;
+  font-size: @pagination-font-size;
+
+  &__item,
+  &__page-desc {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__item {
+    flex: 1;
+    box-sizing: border-box;
+    min-width: @pagination-item-width;
+    height: @pagination-height;
+    color: @pagination-item-default-color;
+    background-color: @pagination-background-color;
+    cursor: pointer;
+    user-select: none;
+
+    &:active {
+      color: @white;
+      background-color: @pagination-item-default-color;
+    }
+
+    &::after {
+      border-width: @border-width-base 0 @border-width-base @border-width-base;
+    }
+
+    &:last-child::after {
+      border-right-width: @border-width-base;
+    }
+
+    &--active {
+      color: @white;
+      background-color: @pagination-item-default-color;
+    }
+  }
+
+  &__prev,
+  &__next {
+    padding: 0 @padding-base;
+    cursor: pointer;
+  }
+
+  &__item--disabled {
+    &,
+    &:active {
+      color: @pagination-item-disabled-color;
+      background-color: @pagination-item-disabled-background-color;
+      cursor: not-allowed;
+      opacity: @pagination-disabled-opacity;
+    }
+  }
+
+  &__page {
+    flex-grow: 0;
+  }
+
+  &__page-desc {
+    flex: 1;
+    height: @pagination-height;
+    color: @pagination-desc-color;
+  }
+
+  &--simple {
+    .van-pagination__prev,
+    .van-pagination__next {
+      &::after {
+        border-width: @border-width-base;
+      }
+    }
+  }
+}

package/es/pagination/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/base.css';
+import '../index.css';

package/es/pagination/style/less.js

@@ -0,0 +1,2 @@
+import '../../style/base.less';
+import '../index.less';

package/es/panel/index.css

@@ -0,0 +1 @@
+.van-panel{background:#fff}.van-panel__header-value{color:#ee0a24}.van-panel__footer{padding:8px 16px}

package/es/panel/index.js

@@ -0,0 +1,46 @@
+import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
+// Utils
+import { createNamespace } from '../utils';
+import { inherit } from '../utils/functional';
+import { BORDER_TOP } from '../utils/constant'; // Components
+
+import Cell from '../cell';
+import CellGroup from '../cell-group'; // Types
+
+var _createNamespace = createNamespace('panel'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+function Panel(h, props, slots, ctx) {
+  var Content = function Content() {
+    return [slots.header ? slots.header() : h(Cell, {
+      "attrs": {
+        "icon": props.icon,
+        "label": props.desc,
+        "title": props.title,
+        "value": props.status,
+        "valueClass": bem('header-value')
+      },
+      "class": bem('header')
+    }), h("div", {
+      "class": bem('content')
+    }, [slots.default && slots.default()]), slots.footer && h("div", {
+      "class": [bem('footer'), BORDER_TOP]
+    }, [slots.footer()])];
+  };
+
+  return h(CellGroup, _mergeJSXProps([{
+    "class": bem(),
+    "scopedSlots": {
+      default: Content
+    }
+  }, inherit(ctx, true)]));
+}
+
+Panel.props = {
+  icon: String,
+  desc: String,
+  title: String,
+  status: String
+};
+export default createComponent(Panel);

package/es/panel/index.less

@@ -0,0 +1,13 @@
+@import '../style/var';
+
+.van-panel {
+  background: @panel-background-color;
+
+  &__header-value {
+    color: @panel-header-value-color;
+  }
+
+  &__footer {
+    padding: @panel-footer-padding;
+  }
+}

package/es/panel/style/index.js

@@ -0,0 +1,6 @@
+import '../../style/base.css';
+import '../../info/index.css';
+import '../../icon/index.css';
+import '../../cell/index.css';
+import '../../cell-group/index.css';
+import '../index.css';

package/es/panel/style/less.js

@@ -0,0 +1,6 @@
+import '../../style/base.less';
+import '../../info/index.less';
+import '../../icon/index.less';
+import '../../cell/index.less';
+import '../../cell-group/index.less';
+import '../index.less';

package/es/password-input/index.css

@@ -1 +1 @@
-:root,:host{--van-password-input-height: 50px;--van-password-input-margin: 0 var(--van-padding-md);--van-password-input-font-size: 20px;--van-password-input-radius: 6px;--van-password-input-background: var(--van-background-2);--van-password-input-info-color: var(--van-text-color-2);--van-password-input-info-font-size: var(--van-font-size-md);--van-password-input-error-info-color: var(--van-danger-color);--van-password-input-dot-size: 10px;--van-password-input-dot-color: var(--van-text-color);--van-password-input-text-color: var(--van-text-color);--van-password-input-cursor-color: var(--van-text-color);--van-password-input-cursor-width: 1px;--van-password-input-cursor-height: 40%;--van-password-input-cursor-duration: 1s}.van-password-input{position:relative;margin:var(--van-password-input-margin);-webkit-user-select:none;user-select:none}.van-password-input__info,.van-password-input__error-info{margin-top:var(--van-padding-md);font-size:var(--van-password-input-info-font-size);text-align:center}.van-password-input__info{color:var(--van-password-input-info-color)}.van-password-input__error-info{color:var(--van-password-input-error-info-color)}.van-password-input__security{display:flex;width:100%;height:var(--van-password-input-height);cursor:pointer}.van-password-input__security:after{border-radius:var(--van-password-input-radius)}.van-password-input__security li{position:relative;display:flex;flex:1;align-items:center;justify-content:center;height:100%;color:var(--van-password-input-text-color);font-size:var(--van-password-input-font-size);line-height:1.2;background:var(--van-password-input-background)}.van-password-input__security i{position:absolute;top:50%;left:50%;width:var(--van-password-input-dot-size);height:var(--van-password-input-dot-size);background:var(--van-password-input-dot-color);border-radius:100%;transform:translate(-50%,-50%);visibility:hidden}.van-password-input__cursor{position:absolute;top:50%;left:50%;width:var(--van-password-input-cursor-width);height:var(--van-password-input-cursor-height);background:var(--van-password-input-cursor-color);transform:translate(-50%,-50%);animation:var(--van-password-input-cursor-duration) van-cursor-flicker infinite}@keyframes van-cursor-flicker{0%{opacity:0}50%{opacity:1}to{opacity:0}}
+.van-password-input{position:relative;margin:0 16px;-webkit-user-select:none;user-select:none}.van-password-input__error-info,.van-password-input__info{margin-top:16px;font-size:14px;text-align:center}.van-password-input__info{color:#969799}.van-password-input__error-info{color:#ee0a24}.van-password-input__security{display:-webkit-box;display:-webkit-flex;display:flex;width:100%;height:50px;cursor:pointer}.van-password-input__security::after{border-radius:6px}.van-password-input__security li{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;height:100%;font-size:20px;line-height:1.2;background-color:#fff}.van-password-input__security i{position:absolute;top:50%;left:50%;width:10px;height:10px;background-color:#000;border-radius:100%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);visibility:hidden}.van-password-input__cursor{position:absolute;top:50%;left:50%;width:1px;height:40%;background-color:#323233;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-animation:1s van-cursor-flicker infinite;animation:1s van-cursor-flicker infinite}@-webkit-keyframes van-cursor-flicker{from{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes van-cursor-flicker{from{opacity:0}50%{opacity:1}100%{opacity:0}}

package/es/password-input/index.js

@@ -0,0 +1,84 @@
+import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
+// Utils
+import { createNamespace, addUnit } from '../utils';
+import { emit, inherit } from '../utils/functional';
+import { BORDER_LEFT, BORDER_SURROUND } from '../utils/constant'; // Types
+
+var _createNamespace = createNamespace('password-input'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+function PasswordInput(h, props, slots, ctx) {
+  var _ref2;
+
+  var mask = props.mask,
+      value = props.value,
+      length = props.length,
+      gutter = props.gutter,
+      focused = props.focused,
+      errorInfo = props.errorInfo;
+  var info = errorInfo || props.info;
+  var Points = [];
+
+  for (var i = 0; i < length; i++) {
+    var _ref;
+
+    var _char = value[i];
+    var showBorder = i !== 0 && !gutter;
+    var showCursor = focused && i === value.length;
+    var style = void 0;
+
+    if (i !== 0 && gutter) {
+      style = {
+        marginLeft: addUnit(gutter)
+      };
+    }
+
+    Points.push(h("li", {
+      "class": [(_ref = {}, _ref[BORDER_LEFT] = showBorder, _ref), bem('item', {
+        focus: showCursor
+      })],
+      "style": style
+    }, [mask ? h("i", {
+      "style": {
+        visibility: _char ? 'visible' : 'hidden'
+      }
+    }) : _char, showCursor && h("div", {
+      "class": bem('cursor')
+    })]));
+  }
+
+  return h("div", {
+    "class": bem()
+  }, [h("ul", _mergeJSXProps([{
+    "class": [bem('security'), (_ref2 = {}, _ref2[BORDER_SURROUND] = !gutter, _ref2)],
+    "on": {
+      "touchstart": function touchstart(event) {
+        event.stopPropagation();
+        emit(ctx, 'focus', event);
+      }
+    }
+  }, inherit(ctx, true)]), [Points]), info && h("div", {
+    "class": bem(errorInfo ? 'error-info' : 'info')
+  }, [info])]);
+}
+
+PasswordInput.props = {
+  info: String,
+  gutter: [Number, String],
+  focused: Boolean,
+  errorInfo: String,
+  mask: {
+    type: Boolean,
+    default: true
+  },
+  value: {
+    type: String,
+    default: ''
+  },
+  length: {
+    type: [Number, String],
+    default: 6
+  }
+};
+export default createComponent(PasswordInput);

package/es/password-input/index.less

@@ -0,0 +1,83 @@
+@import '../style/var';
+
+.van-password-input {
+  position: relative;
+  margin: @password-input-margin;
+  user-select: none;
+
+  &__info,
+  &__error-info {
+    margin-top: @padding-md;
+    font-size: @password-input-info-font-size;
+    text-align: center;
+  }
+
+  &__info {
+    color: @password-input-info-color;
+  }
+
+  &__error-info {
+    color: @password-input-error-info-color;
+  }
+
+  &__security {
+    display: flex;
+    width: 100%;
+    height: @password-input-height;
+    cursor: pointer;
+
+    &::after {
+      border-radius: @password-input-border-radius;
+    }
+
+    li {
+      position: relative;
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      font-size: @password-input-font-size;
+      line-height: 1.2;
+      background-color: @password-input-background-color;
+    }
+
+    i {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: @password-input-dot-size;
+      height: @password-input-dot-size;
+      background-color: @password-input-dot-color;
+      border-radius: 100%;
+      transform: translate(-50%, -50%);
+      visibility: hidden;
+    }
+  }
+
+  &__cursor {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: @number-keyboard-cursor-width;
+    height: @number-keyboard-cursor-height;
+    background-color: @number-keyboard-cursor-color;
+    transform: translate(-50%, -50%);
+    animation: @number-keyboard-cursor-animation-duration van-cursor-flicker
+      infinite;
+  }
+}
+
+@keyframes van-cursor-flicker {
+  from {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

package/es/password-input/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/base.css';
+import '../index.css';

package/es/password-input/style/less.js

@@ -0,0 +1,2 @@
+import '../../style/base.less';
+import '../index.less';

package/es/picker/PickerColumn.js

@@ -0,0 +1,348 @@
+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, inBrowser, isObject } from '../utils';
+import { range } from '../utils/format/number';
+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` 时，执行惯性滑动
+
+export var MOMENTUM_LIMIT_TIME = 300;
+export var MOMENTUM_LIMIT_DISTANCE = 15;
+
+var _createNamespace = createNamespace('picker-column'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+function getElementTranslateY(element) {
+  var style = window.getComputedStyle(element);
+  var transform = style.transform || style.webkitTransform;
+  var translateY = transform.slice(7, transform.length - 1).split(', ')[5];
+  return Number(translateY);
+}
+
+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: {
+    valueKey: String,
+    readonly: Boolean,
+    allowHtml: Boolean,
+    className: String,
+    itemHeight: Number,
+    defaultIndex: Number,
+    swipeDuration: [Number, String],
+    visibleItemCount: [Number, String],
+    initialOptions: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    }
+  },
+  data: function data() {
+    return {
+      offset: 0,
+      duration: 0,
+      options: deepClone(this.initialOptions),
+      currentIndex: this.defaultIndex
+    };
+  },
+  created: function created() {
+    if (this.$parent.children) {
+      this.$parent.children.push(this);
+    }
+
+    this.setIndex(this.currentIndex);
+  },
+  mounted: function mounted() {
+    this.bindTouchEvent(this.$el);
+
+    if (supportMousewheel) {
+      on(this.$el, 'wheel', this.onMouseWheel, false);
+    }
+  },
+  destroyed: function destroyed() {
+    var children = this.$parent.children;
+
+    if (children) {
+      children.splice(children.indexOf(this), 1);
+    }
+
+    if (supportMousewheel) {
+      off(this.$el, 'wheel');
+    }
+  },
+  watch: {
+    initialOptions: 'setOptions',
+    defaultIndex: function defaultIndex(val) {
+      this.setIndex(val);
+    }
+  },
+  computed: {
+    count: function count() {
+      return this.options.length;
+    },
+    baseOffset: function baseOffset() {
+      return this.itemHeight * (this.visibleItemCount - 1) / 2;
+    }
+  },
+  methods: {
+    setOptions: function setOptions(options) {
+      if (JSON.stringify(options) !== JSON.stringify(this.options)) {
+        this.options = deepClone(options);
+        this.setIndex(this.defaultIndex);
+      }
+    },
+    onTouchStart: function onTouchStart(event) {
+      if (this.readonly) {
+        return;
+      }
+
+      this.touchStart(event);
+
+      if (this.moving) {
+        var translateY = getElementTranslateY(this.$refs.wrapper);
+        this.offset = Math.min(0, translateY - this.baseOffset);
+        this.startOffset = this.offset;
+      } else {
+        this.startOffset = this.offset;
+      }
+
+      this.duration = 0;
+      this.transitionEndTrigger = null;
+      this.touchStartTime = Date.now();
+      this.momentumOffset = this.startOffset;
+    },
+    onTouchMove: function onTouchMove(event) {
+      if (this.readonly) {
+        return;
+      }
+
+      this.touchMove(event);
+
+      if (this.direction === 'vertical') {
+        this.moving = true;
+        preventDefault(event, true);
+      }
+
+      this.offset = range(this.startOffset + this.deltaY, -(this.count * this.itemHeight), this.itemHeight);
+      var now = Date.now();
+
+      if (now - this.touchStartTime > MOMENTUM_LIMIT_TIME) {
+        this.touchStartTime = now;
+        this.momentumOffset = this.offset;
+      }
+    },
+    onTouchEnd: function onTouchEnd() {
+      var _this = this;
+
+      if (this.readonly) {
+        return;
+      }
+
+      var distance = this.offset - this.momentumOffset;
+      var duration = Date.now() - this.touchStartTime;
+      var allowMomentum = duration < MOMENTUM_LIMIT_TIME && Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
+
+      if (allowMomentum) {
+        this.momentum(distance, duration);
+        return;
+      }
+
+      var index = this.getIndexByOffset(this.offset);
+      this.duration = DEFAULT_DURATION;
+      this.setIndex(index, true); // compatible with desktop scenario
+      // use setTimeout to skip the click event Emitted after touchstart
+
+      setTimeout(function () {
+        _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;
+      } // Calculate the offset based on itemHeight
+
+
+      var itemOffset = this.itemHeight * (deltaY > 0 ? -1 : 1);
+      this.offset = range(this.startOffset + itemOffset, -(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();
+    },
+    onClickItem: function onClickItem(index) {
+      if (this.moving || this.readonly) {
+        return;
+      }
+
+      this.transitionEndTrigger = null;
+      this.duration = DEFAULT_DURATION;
+      this.setIndex(index, true);
+    },
+    adjustIndex: function adjustIndex(index) {
+      index = range(index, 0, this.count);
+
+      for (var i = index; i < this.count; i++) {
+        if (!isOptionDisabled(this.options[i])) return i;
+      }
+
+      for (var _i = index - 1; _i >= 0; _i--) {
+        if (!isOptionDisabled(this.options[_i])) return _i;
+      }
+    },
+    getOptionText: function getOptionText(option) {
+      if (isObject(option) && this.valueKey in option) {
+        return option[this.valueKey];
+      }
+
+      return option;
+    },
+    setIndex: function setIndex(index, emitChange) {
+      var _this3 = this;
+
+      index = this.adjustIndex(index) || 0;
+      var offset = -index * this.itemHeight;
+
+      var trigger = function trigger() {
+        if (index !== _this3.currentIndex) {
+          _this3.currentIndex = index;
+
+          if (emitChange) {
+            _this3.$emit('change', index);
+          }
+        }
+      }; // trigger the change event after transitionend when moving
+
+
+      if (this.moving && offset !== this.offset) {
+        this.transitionEndTrigger = trigger;
+      } else {
+        trigger();
+      }
+
+      this.offset = offset;
+    },
+    setValue: function setValue(value) {
+      var options = this.options;
+
+      for (var i = 0; i < options.length; i++) {
+        if (this.getOptionText(options[i]) === value) {
+          return this.setIndex(i);
+        }
+      }
+    },
+    getValue: function getValue() {
+      return this.options[this.currentIndex];
+    },
+    getIndexByOffset: function getIndexByOffset(offset) {
+      return range(Math.round(-offset / this.itemHeight), 0, this.count - 1);
+    },
+    momentum: function momentum(distance, duration) {
+      var speed = Math.abs(distance / duration);
+      distance = this.offset + speed / 0.003 * (distance < 0 ? -1 : 1);
+      var index = this.getIndexByOffset(distance);
+      this.duration = +this.swipeDuration;
+      this.setIndex(index, true);
+    },
+    stopMomentum: function stopMomentum() {
+      this.moving = false;
+      this.duration = 0;
+
+      if (this.transitionEndTrigger) {
+        this.transitionEndTrigger();
+        this.transitionEndTrigger = null;
+      }
+    },
+    genOptions: function genOptions() {
+      var _this4 = this;
+
+      var h = this.$createElement;
+      var optionStyle = {
+        height: this.itemHeight + "px"
+      };
+      return this.options.map(function (option, index) {
+        var _domProps;
+
+        var text = _this4.getOptionText(option);
+
+        var disabled = isOptionDisabled(option);
+        var data = {
+          style: optionStyle,
+          attrs: {
+            role: 'button',
+            tabindex: disabled ? -1 : 0
+          },
+          class: [bem('item', {
+            disabled: disabled,
+            selected: index === _this4.currentIndex
+          })],
+          on: {
+            click: function click() {
+              _this4.onClickItem(index);
+            }
+          }
+        };
+        var childData = {
+          class: 'van-ellipsis',
+          domProps: (_domProps = {}, _domProps[_this4.allowHtml ? 'innerHTML' : 'textContent'] = text, _domProps)
+        };
+        return h("li", _mergeJSXProps([{}, data]), [_this4.slots('option', option) || h("div", _mergeJSXProps2([{}, childData]))]);
+      });
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    var wrapperStyle = {
+      transform: "translate3d(0, " + (this.offset + this.baseOffset) + "px, 0)",
+      transitionDuration: this.duration + "ms",
+      transitionProperty: this.duration ? 'all' : 'none'
+    };
+    return h("div", {
+      "class": [bem(), this.className]
+    }, [h("ul", {
+      "ref": "wrapper",
+      "style": wrapperStyle,
+      "class": bem('wrapper'),
+      "on": {
+        "transitionend": this.onTransitionEnd
+      }
+    }, [this.genOptions()])]);
+  }
+});