zartui 2.0.90 → 2.0.91-beta.1

package/es/calendar/style/index.js

@@ -6,4 +6,5 @@ import '../../popup/index.css';
 import '../../loading/index.css';
 import '../../toast/index.css';
 import '../../button/index.css';
+import '../../datetime-picker/index.css';
 import '../index.css';

package/es/calendar/style/less.js

@@ -6,4 +6,5 @@ import '../../popup/index.less';
 import '../../loading/index.less';
 import '../../toast/index.less';
 import '../../button/index.less';
+import '../../datetime-picker/index.less';
 import '../index.less';

package/es/datetime-picker/index.css

@@ -0,0 +1 @@
+[class*=zt2-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)}.zt2-hairline,.zt2-hairline--bottom,.zt2-hairline--left,.zt2-hairline--right,.zt2-hairline--surround,.zt2-hairline--top,.zt2-hairline--top-bottom{position:relative}.zt2-hairline--top::after{border-top-width:1px}.zt2-hairline--left::after{border-left-width:1px}.zt2-hairline--right::after{border-right-width:1px}.zt2-hairline--bottom::after{border-bottom-width:1px}.zt2-hairline--top-bottom::after,.zt2-hairline-unset--top-bottom::after{border-width:1px 0}.zt2-hairline--surround::after{border-width:1px}.zt2-datetime-picker__title-tab-bar{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt2-datetime-picker__title-bar{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center;padding:12px;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#2d4b73}.zt2-datetime-picker__title-bar--unselected{color:rgba(45,75,115,.4)}.zt2-datetime-picker__title{font-weight:700;font-size:14px;line-height:20px;height:20px}.zt2-datetime-picker__title--selected{color:#0091fa}.zt2-datetime-picker__title--unselected{font-weight:400}.zt2-datetime-picker__value{font-size:14px;line-height:20px;height:20px;margin-top:4px}.zt2-datetime-picker__toolbar{box-sizing:content-box;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;padding:8px 16px 8px 16px;border-top:1px solid rgba(45,75,115,.1);position:relative}.zt2-datetime-picker__cancel,.zt2-datetime-picker__confirm{height:100%;padding:0 16px;font-size:14px;background-color:transparent;border:none;cursor:pointer}.zt2-datetime-picker__cancel:active,.zt2-datetime-picker__confirm:active{opacity:.7}.zt2-datetime-picker__confirm{color:#0091fa;font-weight:700}.zt2-datetime-picker__cancel{color:#000;font-weight:400}

package/es/datetime-picker/index.js

@@ -2,22 +2,323 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { createNamespace } from '../utils';
 import TimePicker from './TimePicker';
 import DatePicker from './DatePicker';
+import { isDate } from '../utils/validate/date';
+import Popup from '../popup';
+import Button from '../button';
+import Toast from '../toast';
+import dayjs from 'dayjs';
 
 var _createNamespace = createNamespace('datetime-picker'),
     createComponent = _createNamespace[0],
     bem = _createNamespace[1];
 
+export var RANGE_START_PICKER = 0;
+export var RANGE_END_PICKER = 1;
 export default createComponent({
-  props: _extends({}, TimePicker.props, DatePicker.props),
+  props: _extends({}, TimePicker.props, DatePicker.props, {
+    // 是否开启时间范围选择
+    range: {
+      type: Boolean,
+      default: false
+    },
+    startValue: {
+      type: Date,
+      default: function _default() {
+        return new Date();
+      },
+      validator: isDate
+    },
+    endValue: {
+      type: Date,
+      default: function _default() {
+        return new Date();
+      },
+      validator: isDate
+    },
+    rangeHeaderStartText: {
+      type: String,
+      default: '开始时间'
+    },
+    rangeHeaderEndText: {
+      type: String,
+      default: '结束时间'
+    }
+  }),
+  data: function data() {
+    return {
+      rangeSelectedIndex: RANGE_START_PICKER,
+      refreshComputedKey: new Date().getTime(),
+      innerStartValue: this.startValue,
+      innerEndValue: this.endValue,
+      confirmedPopupPickerIndex: false
+    };
+  },
+  computed: {
+    currentStartText: function currentStartText() {
+      return this.genOriginValueText(this.innerStartValue);
+    },
+    currentEndText: function currentEndText() {
+      return this.genOriginValueText(this.innerEndValue);
+    }
+  },
+  watch: {
+    showPicker: function showPicker(val) {
+      var _this = this;
+
+      // 在第一次打开popup时，需要初始化内部picker存储的时间列index，避免初次打开直接关闭，导致picker内部index丢失
+      if (val && !this.confirmedPopupPickerIndex) {
+        // 注意这里实际上是双层nextTick,为了解决picker组件setConfirmIndex也在nextTick中执行，导致无法正确设置index的问题
+        this.$nextTick(function () {
+          _this.updatePickerConfirm();
+
+          _this.confirmedPopupPickerIndex = true;
+        });
+      }
+    }
+  },
   methods: {
     // @exposed-api
     getPicker: function getPicker() {
+      if (this.range) {
+        return [this.$refs.rangeStart.getProxiedPicker(), this.$refs.rangeEnd.getProxiedPicker()];
+      }
+
       return this.$refs.root.getProxiedPicker();
+    },
+    genValueText: function genValueText(dateValue, timeValue) {
+      var text = '';
+
+      if (dateValue.length > 0) {
+        text += dateValue.join('/');
+      }
+
+      if (timeValue.length > 0) {
+        text = text + ' ' + timeValue.join(':');
+      }
+
+      return text;
+    },
+    genOriginValueText: function genOriginValueText(values) {
+      if (!values) return '-';
+      var dateTime = dayjs(values).format('YYYY-MM-DDTHH:mm:ss');
+      var dateTimeArr = dateTime.split(/[-T:]/);
+      var dateValues = [];
+      var timeValues = [];
+
+      if (this.$refs.rangeStart && this.$refs.rangeStart.originColumns) {
+        this.$refs.rangeStart.originColumns.forEach(function (_ref, index) {
+          var type = _ref.type;
+
+          if (index < dateTimeArr.length) {
+            if (['year', 'month', 'day'].includes(type)) {
+              dateValues.push(dateTimeArr[index]);
+            } else if (['hour', 'minute', 'second'].includes(type)) {
+              timeValues.push(dateTimeArr[index]);
+            }
+          }
+        });
+        return this.genValueText(dateValues, timeValues);
+      }
+    },
+    genRangeHeader: function genRangeHeader() {
+      var _this2 = this;
+
+      var h = this.$createElement;
+      return h("div", {
+        "class": bem('title-tab-bar')
+      }, [h("div", {
+        "class": [bem('title-bar', {
+          selected: this.rangeSelectedIndex === RANGE_START_PICKER,
+          unselected: this.rangeSelectedIndex === RANGE_END_PICKER
+        })],
+        "on": {
+          "click": function click() {
+            _this2.rangeSelectedIndex = RANGE_START_PICKER;
+          }
+        }
+      }, [h("div", {
+        "class": ['zt2-ellipsis', bem('title', {
+          selected: this.rangeSelectedIndex === RANGE_START_PICKER,
+          unselected: this.rangeSelectedIndex === RANGE_END_PICKER
+        })]
+      }, [this.rangeHeaderStartText]), h("div", {
+        "class": ['zt2-ellipsis', bem('value')]
+      }, [this.currentStartText])]), h("span", {
+        "class": bem('title-separator')
+      }), h("div", {
+        "class": [bem('title-bar', {
+          selected: this.rangeSelectedIndex === RANGE_END_PICKER,
+          unselected: this.rangeSelectedIndex === RANGE_START_PICKER
+        })],
+        "on": {
+          "click": function click() {
+            _this2.rangeSelectedIndex = RANGE_END_PICKER;
+          }
+        }
+      }, [h("div", {
+        "class": ['zt2-ellipsis', bem('title', {
+          selected: this.rangeSelectedIndex === RANGE_END_PICKER,
+          unselected: this.rangeSelectedIndex === RANGE_START_PICKER
+        })]
+      }, [this.rangeHeaderEndText]), h("div", {
+        "class": ['zt2-ellipsis', bem('value')]
+      }, [this.currentEndText])])]);
+    },
+    genCancel: function genCancel() {
+      var h = this.$createElement;
+      return h(Button, {
+        "attrs": {
+          "size": "normal",
+          "block": true
+        },
+        "style": {
+          marginRigth: '4px',
+          backgroundColor: 'white'
+        },
+        "on": {
+          "click": this.onCancel
+        }
+      }, [this.cancelButtonText || '取消']);
+    },
+    genConfirm: function genConfirm() {
+      var h = this.$createElement;
+      return h(Button, {
+        "attrs": {
+          "type": "primary",
+          "size": "normal",
+          "block": true
+        },
+        "style": {
+          marginLeft: '8px'
+        },
+        "on": {
+          "click": this.onConfirm
+        }
+      }, [this.confirmButtonText || '确认']);
+    },
+    genToolbar: function genToolbar() {
+      var h = this.$createElement;
+
+      if (this.showToolbar) {
+        return h("div", {
+          "class": bem('toolbar')
+        }, [[this.genCancel(), this.genConfirm()]]);
+      }
+    },
+
+    /**
+     * 这里必须手动调用一次picker组件内部pureRecordConfirmIndex，保证picker组件内部confirmIndex是当前选中的时间项index
+     */
+    updatePickerConfirm: function updatePickerConfirm() {
+      var _this3 = this;
+
+      this.$nextTick(function () {
+        var pickers = _this3.getPicker();
+
+        if (Array.isArray(pickers)) {
+          pickers.forEach(function (p) {
+            return p.pureRecordConfirmIndex();
+          });
+        }
+      });
+    },
+    checkRangeValid: function checkRangeValid() {
+      return dayjs(this.innerEndValue).isAfter(this.innerStartValue);
+    },
+    onConfirm: function onConfirm() {
+      if (!this.checkRangeValid()) {
+        Toast('结束日期不能早于开始日期');
+        return;
+      }
+
+      this.updatePickerConfirm();
+      this.$emit('update:startValue', this.innerStartValue);
+      this.$emit('update:endValue', this.innerEndValue);
+      this.$emit('confirm', [this.innerStartValue, this.innerEndValue]);
+    },
+    onCancel: function onCancel() {
+      this.$emit('update:showPicker', false);
+      this.$emit('cancel');
     }
   },
   render: function render() {
+    var _this4 = this;
+
     var h = arguments[0];
     var Component = this.type === 'time' ? TimePicker : DatePicker;
+
+    if (this.range) {
+      var props = _extends({}, this.$props, {
+        bem: bem,
+        showRange: true
+      });
+
+      var startRangeProps = _extends({}, props, {
+        value: this.startValue
+      });
+
+      var startListener = _extends({}, this.$listeners, {
+        input: function input(val) {
+          _this4.innerStartValue = val;
+        },
+        change: function change(pickerRef) {
+          _this4.$emit('startChange', pickerRef);
+        }
+      });
+
+      var endRangeProps = _extends({}, props, {
+        value: this.endValue
+      });
+
+      var endListener = _extends({}, this.$listeners, {
+        input: function input(val) {
+          _this4.innerEndValue = val;
+        },
+        change: function change(pickerRef) {
+          _this4.$emit('endChange', pickerRef);
+        }
+      });
+
+      return h(Popup, {
+        "attrs": {
+          "value": this.showPicker,
+          "round": true,
+          "position": "bottom"
+        },
+        "on": {
+          "input": function input(val) {
+            if (val) {
+              _this4.$emit('update:showPicker', true);
+            } else {
+              _this4.$emit('update:showPicker', false);
+            }
+          }
+        }
+      }, [this.genRangeHeader(), h("div", {
+        "class": bem('range')
+      }, [h(Component, {
+        "ref": "rangeStart",
+        "directives": [{
+          name: "show",
+          value: this.rangeSelectedIndex === RANGE_START_PICKER
+        }],
+        "class": bem(),
+        "scopedSlots": this.$scopedSlots,
+        "props": _extends({}, startRangeProps),
+        "on": _extends({}, startListener)
+      }), h(Component, {
+        "ref": "rangeEnd",
+        "directives": [{
+          name: "show",
+          value: this.rangeSelectedIndex === RANGE_END_PICKER
+        }],
+        "class": bem(),
+        "scopedSlots": this.$scopedSlots,
+        "props": _extends({}, endRangeProps),
+        "on": _extends({}, endListener)
+      })]), this.genToolbar()]);
+    }
+
     return h(Component, {
       "ref": "root",
       "class": bem(),

package/es/datetime-picker/index.less

@@ -0,0 +1,81 @@
+@import '../style/var';
+@import '../style/hairline';
+
+.@{base-prefix}-datetime-picker {
+  @date-time-picker-title-bar-selected-color: @blue;
+
+  &__title-tab-bar {
+    display: flex;
+    align-items: center;
+  }
+
+  &__title-bar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px;
+    flex: 1;
+    color: @text-color-default;
+
+    &--unselected {
+      color: @text-color-4;
+    }
+  }
+
+  &__title {
+    font-weight: bold;
+    font-size: @font-size-md;
+    line-height: @line-height-md;
+    height: @line-height-md;
+
+    &--selected {
+      color: @date-time-picker-title-bar-selected-color;
+    }
+
+    &--unselected {
+      font-weight: normal;
+    }
+  }
+
+  &__value {
+    font-size: @font-size-md;
+    line-height: @line-height-md;
+    height: @line-height-md;
+    margin-top: 4px;
+  }
+
+  &__toolbar {
+    box-sizing: content-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: @picker-toolbar-height;
+    padding: 8px 16px 8px 16px;
+    border-top: 1px solid rgba(45, 75, 115, 0.1);
+    position: relative;
+  }
+
+  &__cancel,
+  &__confirm {
+    height: 100%;
+    padding: @picker-action-padding;
+    font-size: @picker-action-font-size;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+
+    &:active {
+      opacity: @active-opacity;
+    }
+  }
+
+  &__confirm {
+    color: @picker-confirm-action-color;
+    font-weight: @picker-confirm-action-font-weight;
+  }
+
+  &__cancel {
+    color: @picker-cancel-action-color;
+    font-weight: @picker-cancel-action-font-weight;
+  }
+}

package/es/datetime-picker/shared.js

@@ -3,7 +3,7 @@ import { times } from './utils';
 import { padZero } from '../utils/format/string';
 import { pickerProps } from '../picker/shared';
 import Picker from '../picker';
-import { createNamespace } from "../utils";
+import { createNamespace } from '../utils';
 var componentFunctions = createNamespace('dateTimePicker');
 var t = componentFunctions[2];
 export var sharedProps = _extends({}, pickerProps, {
@@ -19,6 +19,10 @@ export var sharedProps = _extends({}, pickerProps, {
     default: function _default(type, value) {
       return value;
     }
+  },
+  showRange: {
+    type: Boolean,
+    default: false
   }
 });
 export var TimePickerMixin = {
@@ -73,12 +77,12 @@ export var TimePickerMixin = {
       var hour = t('hour');
       var minute = t('minute');
       var presetHeaders = {
-        'date': [year, month, day],
+        date: [year, month, day],
         'year-month': [year, month],
         'month-day': [month, day],
-        'time': [hour, minute],
-        'datetime': [year, month, day, hour, minute],
-        'datehour': [year, month, day, hour]
+        time: [hour, minute],
+        datetime: [year, month, day, hour, minute],
+        datehour: [year, month, day, hour]
       }; // console.log('type ' + this.type + ' ' + JSON.stringify(presetHeaders[this.type]))
 
       return presetHeaders[this.type] || [];
@@ -166,6 +170,15 @@ export var TimePickerMixin = {
     Object.keys(pickerProps).forEach(function (key) {
       props[key] = _this6[key];
     });
+
+    if (this.showRange) {
+      _extends(props, {
+        popup: false,
+        showToolbar: false,
+        title: ''
+      });
+    }
+
     return h(Picker, {
       "attrs": {
         "show-picker": this.showPicker,

package/es/datetime-picker/style/index.js

@@ -4,5 +4,7 @@ import '../../info/index.css';
 import '../../icon/index.css';
 import '../../popup/index.css';
 import '../../loading/index.css';
+import '../../toast/index.css';
 import '../../button/index.css';
-import '../../picker/index.css';
+import '../../picker/index.css';
+import '../index.css';

package/es/datetime-picker/style/less.js

@@ -4,5 +4,7 @@ import '../../info/index.less';
 import '../../icon/index.less';
 import '../../popup/index.less';
 import '../../loading/index.less';
+import '../../toast/index.less';
 import '../../button/index.less';
-import '../../picker/index.less';
+import '../../picker/index.less';
+import '../index.less';

package/es/picker/index.js

@@ -48,6 +48,10 @@ export default createComponent({
     valueKey: {
       type: String,
       default: 'text'
+    },
+    popup: {
+      type: Boolean,
+      default: true
     }
   }),
   data: function data() {
@@ -310,6 +314,15 @@ export default createComponent({
       });
       this.emit('confirm');
     },
+    // @exposed-api
+    pureRecordConfirmIndex: function pureRecordConfirmIndex() {
+      this.children.forEach(function (child) {
+        return child.stopMomentum();
+      });
+      this.children.forEach(function (child) {
+        return child.recordConfirmIndex();
+      });
+    },
     cancel: function cancel() {
       this.$emit('update:showPicker', false);
       this.emit('cancel');
@@ -443,25 +456,35 @@ export default createComponent({
     }
   },
   render: function render(h) {
-    return h(Popup, {
-      "attrs": {
-        "value": this.showPicker,
-        "round": true,
-        "position": "bottom",
-        "closeOnPopstate": this.closeOnPopstate,
-        "closeOnClickOverlay": this.closeOnClickOverlay,
-        "customOnClickOverlay": this.onClickOverlay,
-        "getContainer": this.getContainer
-      }
-    }, [h("div", {
-      "class": bem(),
-      "ref": 'columnParent'
-    }, [this.toolbarPosition === 'top' ? this.genToolbar() : h(), this.toolbarPosition === 'top' ? h() : this.genTitle(), this.toolbarPosition === 'top' ? h("div", {
-      "class": bem('border')
-    }) : h(), this.loading ? h(Loading, {
-      "class": bem('loading')
-    }) : h(), this.slots('columns-top'), this.headers && this.headers.length > 0 ? this.genHeaders() : h(), this.headers && this.headers.length > 0 ? h("div", {
-      "class": bem('border')
-    }) : h(), this.genColumns(), this.slots('columns-bottom'), this.toolbarPosition === 'bottom' ? this.genToolbar() : h()])]);
+    var _this7 = this;
+
+    var renderPicker = function renderPicker() {
+      return h("div", {
+        "class": bem(),
+        "ref": "columnParent"
+      }, [_this7.toolbarPosition === 'top' ? _this7.genToolbar() : h(), _this7.toolbarPosition === 'top' ? h() : _this7.genTitle(), _this7.toolbarPosition === 'top' ? h("div", {
+        "class": bem('border')
+      }) : h(), _this7.loading ? h(Loading, {
+        "class": bem('loading')
+      }) : h(), _this7.slots('columns-top'), _this7.headers && _this7.headers.length > 0 ? _this7.genHeaders() : h(), _this7.headers && _this7.headers.length > 0 ? h("div", {
+        "class": bem('border')
+      }) : h(), _this7.genColumns(), _this7.slots('columns-bottom'), _this7.toolbarPosition === 'bottom' ? _this7.genToolbar() : h()]);
+    };
+
+    if (this.popup) {
+      return h(Popup, {
+        "attrs": {
+          "value": this.showPicker,
+          "round": true,
+          "position": "bottom",
+          "closeOnPopstate": this.closeOnPopstate,
+          "closeOnClickOverlay": this.closeOnClickOverlay,
+          "customOnClickOverlay": this.onClickOverlay,
+          "getContainer": this.getContainer
+        }
+      }, [renderPicker()]);
+    }
+
+    return renderPicker();
   }
 });

package/lib/calendar/style/index.js

@@ -6,4 +6,5 @@ require('../../popup/index.css');
 require('../../loading/index.css');
 require('../../toast/index.css');
 require('../../button/index.css');
+require('../../datetime-picker/index.css');
 require('../index.css');

package/lib/calendar/style/less.js

@@ -6,4 +6,5 @@ require('../../popup/index.less');
 require('../../loading/index.less');
 require('../../toast/index.less');
 require('../../button/index.less');
+require('../../datetime-picker/index.less');
 require('../index.less');

package/lib/datetime-picker/index.css

@@ -0,0 +1 @@
+[class*=zt2-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)}.zt2-hairline,.zt2-hairline--bottom,.zt2-hairline--left,.zt2-hairline--right,.zt2-hairline--surround,.zt2-hairline--top,.zt2-hairline--top-bottom{position:relative}.zt2-hairline--top::after{border-top-width:1px}.zt2-hairline--left::after{border-left-width:1px}.zt2-hairline--right::after{border-right-width:1px}.zt2-hairline--bottom::after{border-bottom-width:1px}.zt2-hairline--top-bottom::after,.zt2-hairline-unset--top-bottom::after{border-width:1px 0}.zt2-hairline--surround::after{border-width:1px}.zt2-datetime-picker__title-tab-bar{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt2-datetime-picker__title-bar{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center;padding:12px;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#2d4b73}.zt2-datetime-picker__title-bar--unselected{color:rgba(45,75,115,.4)}.zt2-datetime-picker__title{font-weight:700;font-size:14px;line-height:20px;height:20px}.zt2-datetime-picker__title--selected{color:#0091fa}.zt2-datetime-picker__title--unselected{font-weight:400}.zt2-datetime-picker__value{font-size:14px;line-height:20px;height:20px;margin-top:4px}.zt2-datetime-picker__toolbar{box-sizing:content-box;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;padding:8px 16px 8px 16px;border-top:1px solid rgba(45,75,115,.1);position:relative}.zt2-datetime-picker__cancel,.zt2-datetime-picker__confirm{height:100%;padding:0 16px;font-size:14px;background-color:transparent;border:none;cursor:pointer}.zt2-datetime-picker__cancel:active,.zt2-datetime-picker__confirm:active{opacity:.7}.zt2-datetime-picker__confirm{color:#0091fa;font-weight:700}.zt2-datetime-picker__cancel{color:#000;font-weight:400}