zartui 1.0.21 → 1.0.23

package/lib/index.js

@@ -226,6 +226,10 @@ var _radioGroup = _interopRequireDefault(require("./radio-group"));
 
 exports.RadioGroup = _radioGroup.default;
 
+var _radioPicker = _interopRequireDefault(require("./radio-picker"));
+
+exports.RadioPicker = _radioPicker.default;
+
 var _rate = _interopRequireDefault(require("./rate"));
 
 exports.Rate = _rate.default;
@@ -321,11 +325,11 @@ exports.Toast = _toast.default;
 var _uploader = _interopRequireDefault(require("./uploader"));
 
 exports.Uploader = _uploader.default;
-var version = '1.0.21';
+var version = '1.0.23';
 exports.version = version;
 
 function install(Vue) {
-  var components = [_actionSheet.default, _area.default, _avatar.default, _backTop.default, _badge.default, _button.default, _calendar.default, _cascader.default, _cell.default, _cellGroup.default, _checkbox.default, _checkboxGroup.default, _circle.default, _col.default, _collapse.default, _collapseItem.default, _countDown.default, _datetimePicker.default, _dialog.default, _divider.default, _dropdownItem.default, _dropdownMenu.default, _empty.default, _field.default, _foldDialog.default, _form.default, _grid.default, _gridItem.default, _hierarchySelect.default, _icon.default, _image.default, _imagePreview.default, _indexAnchor.default, _indexBar.default, _info.default, _lazyload.default, _list.default, _loading.default, _locale.default, _mediaPicker.default, _mediaPlayer.default, _multiplePicker.default, _navBar.default, _noticeBar.default, _numberKeyboard.default, _overlay.default, _passwordInput.default, _pdfViewer.default, _pdfViewerV.default, _picker.default, _popover.default, _popup.default, _pullRefresh.default, _radio.default, _radioGroup.default, _rate.default, _row.default, _search.default, _signature.default, _skeleton.default, _slider.default, _step.default, _stepper.default, _steps.default, _sticky.default, _swipe.default, _swipeCell.default, _swipeItem.default, _switch.default, _switchCell.default, _tab.default, _tabbar.default, _tabbarItem.default, _table.default, _tabs.default, _tag.default, _timeline.default, _toast.default, _uploader.default];
+  var components = [_actionSheet.default, _area.default, _avatar.default, _backTop.default, _badge.default, _button.default, _calendar.default, _cascader.default, _cell.default, _cellGroup.default, _checkbox.default, _checkboxGroup.default, _circle.default, _col.default, _collapse.default, _collapseItem.default, _countDown.default, _datetimePicker.default, _dialog.default, _divider.default, _dropdownItem.default, _dropdownMenu.default, _empty.default, _field.default, _foldDialog.default, _form.default, _grid.default, _gridItem.default, _hierarchySelect.default, _icon.default, _image.default, _imagePreview.default, _indexAnchor.default, _indexBar.default, _info.default, _lazyload.default, _list.default, _loading.default, _locale.default, _mediaPicker.default, _mediaPlayer.default, _multiplePicker.default, _navBar.default, _noticeBar.default, _numberKeyboard.default, _overlay.default, _passwordInput.default, _pdfViewer.default, _pdfViewerV.default, _picker.default, _popover.default, _popup.default, _pullRefresh.default, _radio.default, _radioGroup.default, _radioPicker.default, _rate.default, _row.default, _search.default, _signature.default, _skeleton.default, _slider.default, _step.default, _stepper.default, _steps.default, _sticky.default, _swipe.default, _swipeCell.default, _swipeItem.default, _switch.default, _switchCell.default, _tab.default, _tabbar.default, _tabbarItem.default, _table.default, _tabs.default, _tag.default, _timeline.default, _toast.default, _uploader.default];
   components.forEach(function (item) {
     if (item.install) {
       Vue.use(item);

package/lib/index.less

@@ -64,6 +64,7 @@
 @import "./index-bar/index.less";
 @import "./password-input/index.less";
 @import "./radio-group/index.less";
+@import "./radio-picker/index.less";
 @import "./row/index.less";
 @import "./skeleton/index.less";
 @import "./slider/index.less";

package/lib/radio-picker/PickerColumn.js

@@ -0,0 +1,441 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = exports.MOMENTUM_LIMIT_DISTANCE = exports.MOMENTUM_LIMIT_TIME = void 0;
+
+var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
+
+var _empty = _interopRequireDefault(require("../empty"));
+
+var _touch = require("../mixins/touch");
+
+var _radio = _interopRequireDefault(require("../radio"));
+
+var _radioGroup = _interopRequireDefault(require("../radio-group"));
+
+var _utils = require("../utils");
+
+var _deepClone = require("../utils/deep-clone");
+
+var _event = require("../utils/dom/event");
+
+var _number = require("../utils/format/number");
+
+var DEFAULT_DURATION = 200;
+/** 最底部的一个选项，在滚动到地图时，会有一个距离被截断，这里需要加回来 */
+
+var RADIO_COLUMN_BOTTOM_ITEM_EMPTY_LEN = 10; // 惯性滑动思路:
+// 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_LIMIT_TIME` 且 move
+// 距离大于 `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)('radio-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 (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],
+  props: {
+    columnCollector: Array,
+    valueKey: String,
+    readonly: Boolean,
+    allowHtml: Boolean,
+    className: String,
+    searchVal: String,
+    toolbarPosition: String,
+    wrapHeight: Number,
+    defaultIndex: Number,
+    swipeDuration: [Number, String],
+    initialOptions: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    searchable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function data() {
+    return {
+      // 列表滚动了距离顶部多少距离
+      offset: 0,
+      duration: 0,
+      options: (0, _deepClone.deepClone)(this.initialOptions),
+      currentIndex: this.defaultIndex,
+      confirmIndex: '',
+      isSearchEmpty: false
+    };
+  },
+  created: function created() {
+    if (this.columnCollector) {
+      this.columnCollector.push(this);
+    }
+
+    this.setIndex(this.currentIndex);
+  },
+  mounted: function mounted() {
+    this.bindTouchEvent(this.$el);
+
+    if (supportMousewheel) {
+      (0, _event.on)(this.$refs.wrapper, 'wheel', this.onMouseWheel, false);
+    }
+  },
+  destroyed: function destroyed() {
+    if (this.columnCollector) {
+      this.columnCollector.splice(this.columnCollector.indexOf(this), 1);
+    }
+
+    if (supportMousewheel) {
+      (0, _event.off)(this.$el, 'wheel');
+    }
+  },
+  watch: {
+    initialOptions: 'setOptions',
+    defaultIndex: function defaultIndex(val) {
+      this.setIndex(val);
+    },
+    searchVal: function searchVal() {
+      var _this = this;
+
+      // 查询的时候，这个需要回到顶部看数据
+      this.offset = this.baseOffset; // 判断是否搜索结果为空的
+
+      if (this.searchable) {
+        this.isSearchEmpty = !this.options.some(function (option) {
+          var text = _this.getOptionText(option); // 支持搜索处理
+
+
+          return text == null ? void 0 : text.includes(_this.searchVal);
+        });
+      }
+    }
+  },
+  computed: {
+    count: function count() {
+      return this.options.length;
+    },
+    baseOffset: function baseOffset() {
+      return 0;
+    }
+  },
+  methods: {
+    setOptions: function setOptions(options) {
+      if (JSON.stringify(options) !== JSON.stringify(this.options)) {
+        this.options = (0, _deepClone.deepClone)(options);
+        this.setIndex(this.defaultIndex);
+      }
+    },
+    onTouchStart: function onTouchStart(event) {
+      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) {
+      this.touchMove(event);
+
+      if (this.direction === 'vertical') {
+        this.moving = true;
+        (0, _event.preventDefault)(event, true);
+      } // 在这个范围里面滚动
+
+
+      this.setRangeOffset(this.startOffset + this.deltaY);
+      var now = Date.now();
+
+      if (now - this.touchStartTime > MOMENTUM_LIMIT_TIME) {
+        this.touchStartTime = now;
+        this.momentumOffset = this.offset;
+      }
+    },
+    onTouchEnd: function onTouchEnd() {
+      var _this2 = this;
+
+      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;
+      }
+
+      this.duration = DEFAULT_DURATION; // compatible with desktop scenario
+      // use setTimeout to skip the click event Emitted after touchstart
+
+      setTimeout(function () {
+        _this2.moving = false;
+      }, 0);
+    },
+    onMouseWheel: function onMouseWheel(event) {
+      var _this3 = this;
+
+      (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.setRangeOffset(this.startOffset + distance);
+
+      if (mousewheelTimer) {
+        clearTimeout(mousewheelTimer);
+      }
+
+      mousewheelTimer = setTimeout(function () {
+        _this3.onTouchEnd();
+
+        _this3.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 = (0, _number.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 ((0, _utils.isObject)(option) && this.valueKey in option) {
+        return option[this.valueKey];
+      }
+
+      return option;
+    },
+    setOptionText: function setOptionText(option, text) {
+      if ((0, _utils.isObject)(option) && this.valueKey in option) {
+        option[this.valueKey] = text;
+      }
+
+      option = text;
+      return option;
+    },
+    setIndex: function setIndex(index, emitChange) {
+      var _this4 = this;
+
+      index = this.adjustIndex(index) || 0;
+
+      var trigger = function trigger() {
+        if (index !== _this4.currentIndex) {
+          _this4.currentIndex = index;
+
+          if (emitChange) {
+            _this4.$emit('change', index);
+          }
+        }
+      }; // trigger the change event after transitionend when moving
+
+
+      if (this.moving) {
+        this.transitionEndTrigger = trigger;
+      } else {
+        trigger();
+      }
+    },
+    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];
+    },
+    setRangeOffset: function setRangeOffset(distance) {
+      var maxOffsetVal = this.$refs.wrapper.clientHeight - this.wrapHeight; // 在设置底部toolbar的时候，不需要这个间距
+
+      if (this.toolbarPosition !== 'bottom') {
+        maxOffsetVal += RADIO_COLUMN_BOTTOM_ITEM_EMPTY_LEN;
+      }
+
+      this.offset = (0, _number.range)(distance, -maxOffsetVal, 0);
+    },
+    momentum: function momentum(distance, duration) {
+      var speed = Math.abs(distance / duration);
+      distance = this.offset + speed / 0.003 * (distance < 0 ? -1 : 1);
+      this.setRangeOffset(distance);
+      this.duration = +this.swipeDuration;
+    },
+    stopMomentum: function stopMomentum() {
+      this.moving = false;
+      this.duration = 0;
+    },
+
+    /**
+     * @description: 高亮显示搜索匹配的字段
+     * @param {*} text radio label
+     */
+    transSearchedText: function transSearchedText(text) {
+      var regex = new RegExp(this.searchVal, 'gi');
+      var replaced = text.replace(regex, "<span style='color: #0091FA;'>$&</span>");
+      return replaced;
+    },
+    genOptions: function genOptions() {
+      var _this5 = this;
+
+      var h = this.$createElement;
+      return this.options.map(function (option, index) {
+        var _text, _domProps;
+
+        var text = _this5.getOptionText(option);
+
+        var disabled = isOptionDisabled(option);
+        var scopedSlots = option;
+
+        if (_this5.searchable) {
+          scopedSlots = {
+            option: option,
+            searchVal: _this5.searchVal
+          };
+        } // 支持搜索处理
+
+
+        var isSearchMatch = (_text = text) == null ? void 0 : _text.includes(_this5.searchVal);
+        var isSearchedTrans = false;
+
+        if (isSearchMatch && _this5.searchVal) {
+          text = _this5.transSearchedText(text);
+          isSearchedTrans = true;
+        }
+
+        var data = {
+          attrs: {
+            role: 'radio',
+            tabindex: disabled ? -1 : 0
+          },
+          class: [bem('item', {
+            disabled: disabled,
+            'not-match': !isSearchMatch
+          })],
+          on: {
+            click: function click(e) {
+              e.preventDefault();
+
+              _this5.onClickItem(index);
+            }
+          }
+        };
+        var childData = {
+          domProps: (_domProps = {}, _domProps[_this5.allowHtml || isSearchedTrans ? 'innerHTML' : 'textContent'] = text, _domProps)
+        };
+        return h(_radio.default, (0, _babelHelperVueJsxMergeProps.default)([{
+          "attrs": {
+            "name": index
+          }
+        }, data]), [_this5.slots('option', scopedSlots) || h("div", (0, _babelHelperVueJsxMergeProps.default)([{}, childData]))]);
+      });
+    },
+    recordConfirmIndex: function recordConfirmIndex() {
+      this.confirmIndex = this.currentIndex;
+    },
+    setConfirmIndex: function setConfirmIndex() {
+      if (this.confirmIndex || this.confirmIndex === 0) {
+        this.setIndex(this.confirmIndex, true);
+      }
+    },
+    genEmpty: function genEmpty() {
+      var h = this.$createElement;
+      return h(_empty.default, {
+        "attrs": {
+          "description": "暂无搜索结果"
+        }
+      });
+    }
+  },
+  render: function render() {
+    var _this6 = this;
+
+    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
+      }
+    }, [h(_radioGroup.default, {
+      "attrs": {
+        "value": this.currentIndex
+      },
+      "on": {
+        "change": function change(val) {
+          _this6.currentIndex = val;
+        }
+      }
+    }, [this.genOptions()]), this.isSearchEmpty ? this.genEmpty() : null])]);
+  }
+});
+
+exports.default = _default2;

package/lib/radio-picker/index.css

@@ -0,0 +1 @@
+[class*=zt-hairline]::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid rgba(0,0,0,.1);-webkit-transform:scale(.5);transform:scale(.5)}.zt-hairline,.zt-hairline--bottom,.zt-hairline--left,.zt-hairline--right,.zt-hairline--surround,.zt-hairline--top,.zt-hairline--top-bottom{position:relative}.zt-hairline--top::after{border-top-width:1px}.zt-hairline--left::after{border-left-width:1px}.zt-hairline--right::after{border-right-width:1px}.zt-hairline--bottom::after{border-bottom-width:1px}.zt-hairline--top-bottom::after,.zt-hairline-unset--top-bottom::after{border-width:1px 0}.zt-hairline--surround::after{border-width:1px}.zt-radio-picker{position:relative;background-color:#fff;-webkit-user-select:none;user-select:none}.zt-radio-picker__toolbar{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;height:44px}.zt-radio-picker__border{position:relative}.zt-radio-picker__border::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-radio-picker__cancel,.zt-radio-picker__confirm{height:100%;padding:0 16px;font-size:16px;background-color:transparent;border:none;cursor:pointer}.zt-radio-picker__cancel:active,.zt-radio-picker__confirm:active{opacity:.7}.zt-radio-picker__confirm{color:#0091fa;font-weight:700}.zt-radio-picker__cancel{color:#000;font-weight:400}.zt-radio-picker__title{max-width:50%;font-weight:400;font-size:14px;line-height:20px;text-align:center;color:rgba(0,0,0,.4)}.zt-radio-picker__header{width:100%;height:40px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;font-size:14px;font-weight:400}.zt-radio-picker__header>li{-webkit-box-flex:1;-webkit-flex:auto;flex:auto;text-align:center}.zt-radio-picker__columns{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;cursor:grab}.zt-radio-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#0091fa;background-color:rgba(255,255,255,.9)}.zt-radio-picker__frame{position:absolute;top:50%;right:16px;left:16px;z-index:2;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none}.zt-radio-picker__background{position:absolute;width:100%;height:100%;background-color:#fff}.zt-radio-picker-column{-webkit-box-flex:1;-webkit-flex:1;flex:1;overflow:hidden;font-size:16px}.zt-radio-picker-column__wrapper{-webkit-transition-timing-function:cubic-bezier(.23,1,.68,1);transition-timing-function:cubic-bezier(.23,1,.68,1)}.zt-radio-picker-column__item{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:10px 16px;color:#000}.zt-radio-picker-column__item::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;bottom:0;left:calc(16px + 24px + 8px);border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-radio-picker-column__item--disabled{cursor:not-allowed;opacity:.3}.zt-radio-picker-column__item--not-match{display:none}.zt-radio-picker-column__item--selected{font-weight:700}.zt-radio-picker-column__item .zt-radio__label{font-family:PingFangSC-Regular;font-weight:400;font-size:14px;line-height:20px}