zartui 1.0.21 → 1.0.23

package/es/calendar/components/Header.js

@@ -11,6 +11,7 @@ export default createComponent({
     subtitle: String,
     showTitle: Boolean,
     showSubtitle: Boolean,
+    showWeekDays: Boolean,
     firstDayOfWeek: Number
   },
   methods: {
@@ -40,6 +41,11 @@ export default createComponent({
     },
     genWeekDays: function genWeekDays() {
       var h = this.$createElement;
+
+      if (!this.showWeekDays) {
+        return null;
+      }
+
       var weekdays = t('weekdays'); // console.log(" weekdays " + JSON.stringify(weekdays));
 
       var firstDayOfWeek = this.firstDayOfWeek;

package/es/calendar/index.js

@@ -63,6 +63,10 @@ export default createComponent({
       type: Boolean,
       default: true
     },
+    showWeekDays: {
+      type: Boolean,
+      default: true
+    },
     closeOnPopstate: {
       type: Boolean,
       default: true
@@ -432,6 +436,7 @@ export default createComponent({
           "lazyRender": this.lazyRender,
           "currentDate": this.currentDate,
           "showSubtitle": this.showSubtitle,
+          "showWeekDays": this.showWeekDays,
           "allowSameDay": this.allowSameDay,
           "showMonthTitle": showMonthTitle,
           "firstDayOfWeek": this.dayOffset

package/es/index.js

@@ -53,6 +53,7 @@ import Popup from './popup';
 import PullRefresh from './pull-refresh';
 import Radio from './radio';
 import RadioGroup from './radio-group';
+import RadioPicker from './radio-picker';
 import Rate from './rate';
 import Row from './row';
 import Search from './search';
@@ -77,10 +78,10 @@ import Tag from './tag';
 import Timeline from './timeline';
 import Toast from './toast';
 import Uploader from './uploader';
-var version = '1.0.21';
+var version = '1.0.23';
 
 function install(Vue) {
-  var components = [ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Circle, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, PdfViewerV2, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, Timeline, Toast, Uploader];
+  var components = [ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Circle, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, PdfViewerV2, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, RadioPicker, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, Timeline, Toast, Uploader];
   components.forEach(function (item) {
     if (item.install) {
       Vue.use(item);
@@ -94,7 +95,7 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
 
-export { install, version, ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Circle, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, PdfViewerV2, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, Timeline, Toast, Uploader };
+export { install, version, ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Circle, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, PdfViewerV2, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, RadioPicker, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, Timeline, Toast, Uploader };
 export default {
   install: install,
   version: version

package/es/radio-picker/PickerColumn.js

@@ -0,0 +1,421 @@
+import _mergeJSXProps2 from "@vue/babel-helper-vue-jsx-merge-props";
+import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
+import Empty from '../empty';
+import { TouchMixin } from '../mixins/touch';
+import Radio from '../radio';
+import RadioGroup from '../radio-group';
+import { createNamespace, inBrowser, isObject } from '../utils';
+import { deepClone } from '../utils/deep-clone';
+import { off, on, preventDefault } from '../utils/dom/event';
+import { range } from '../utils/format/number';
+var DEFAULT_DURATION = 200;
+/** 最底部的一个选项，在滚动到地图时，会有一个距离被截断，这里需要加回来 */
+
+var RADIO_COLUMN_BOTTOM_ITEM_EMPTY_LEN = 10; // 惯性滑动思路:
+// 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_LIMIT_TIME` 且 move
+// 距离大于 `MOMENTUM_LIMIT_DISTANCE` 时，执行惯性滑动
+
+export var MOMENTUM_LIMIT_TIME = 300;
+export var MOMENTUM_LIMIT_DISTANCE = 15;
+
+var _createNamespace = 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 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: {
+    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: 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) {
+      on(this.$refs.wrapper, 'wheel', this.onMouseWheel, false);
+    }
+  },
+  destroyed: function destroyed() {
+    if (this.columnCollector) {
+      this.columnCollector.splice(this.columnCollector.indexOf(this), 1);
+    }
+
+    if (supportMousewheel) {
+      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 = 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;
+        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;
+
+      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 = 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;
+    },
+    setOptionText: function setOptionText(option, text) {
+      if (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 = 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, _mergeJSXProps2([{
+          "attrs": {
+            "name": index
+          }
+        }, data]), [_this5.slots('option', scopedSlots) || h("div", _mergeJSXProps([{}, 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, {
+        "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, {
+      "attrs": {
+        "value": this.currentIndex
+      },
+      "on": {
+        "change": function change(val) {
+          _this6.currentIndex = val;
+        }
+      }
+    }, [this.genOptions()]), this.isSearchEmpty ? this.genEmpty() : null])]);
+  }
+});

package/es/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}