zartui 2.0.89 → 2.0.91-beta.1

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}

package/lib/datetime-picker/index.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.default = exports.RANGE_END_PICKER = exports.RANGE_START_PICKER = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -13,21 +13,325 @@ var _TimePicker = _interopRequireDefault(require("./TimePicker"));
 
 var _DatePicker = _interopRequireDefault(require("./DatePicker"));
 
+var _date = require("../utils/validate/date");
+
+var _popup = _interopRequireDefault(require("../popup"));
+
+var _button = _interopRequireDefault(require("../button"));
+
+var _toast = _interopRequireDefault(require("../toast"));
+
+var _dayjs = _interopRequireDefault(require("dayjs"));
+
 var _createNamespace = (0, _utils.createNamespace)('datetime-picker'),
     createComponent = _createNamespace[0],
     bem = _createNamespace[1];
 
-var _default = createComponent({
-  props: (0, _extends2.default)({}, _TimePicker.default.props, _DatePicker.default.props),
+var RANGE_START_PICKER = 0;
+exports.RANGE_START_PICKER = RANGE_START_PICKER;
+var RANGE_END_PICKER = 1;
+exports.RANGE_END_PICKER = RANGE_END_PICKER;
+
+var _default2 = createComponent({
+  props: (0, _extends2.default)({}, _TimePicker.default.props, _DatePicker.default.props, {
+    // 是否开启时间范围选择
+    range: {
+      type: Boolean,
+      default: false
+    },
+    startValue: {
+      type: Date,
+      default: function _default() {
+        return new Date();
+      },
+      validator: _date.isDate
+    },
+    endValue: {
+      type: Date,
+      default: function _default() {
+        return new Date();
+      },
+      validator: _date.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 = (0, _dayjs.default)(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.default, {
+        "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.default, {
+        "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 (0, _dayjs.default)(this.innerEndValue).isAfter(this.innerStartValue);
+    },
+    onConfirm: function onConfirm() {
+      if (!this.checkRangeValid()) {
+        (0, _toast.default)('结束日期不能早于开始日期');
+        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.default : _DatePicker.default;
+
+    if (this.range) {
+      var props = (0, _extends2.default)({}, this.$props, {
+        bem: bem,
+        showRange: true
+      });
+      var startRangeProps = (0, _extends2.default)({}, props, {
+        value: this.startValue
+      });
+      var startListener = (0, _extends2.default)({}, this.$listeners, {
+        input: function input(val) {
+          _this4.innerStartValue = val;
+        },
+        change: function change(pickerRef) {
+          _this4.$emit('startChange', pickerRef);
+        }
+      });
+      var endRangeProps = (0, _extends2.default)({}, props, {
+        value: this.endValue
+      });
+      var endListener = (0, _extends2.default)({}, this.$listeners, {
+        input: function input(val) {
+          _this4.innerEndValue = val;
+        },
+        change: function change(pickerRef) {
+          _this4.$emit('endChange', pickerRef);
+        }
+      });
+      return h(_popup.default, {
+        "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": (0, _extends2.default)({}, startRangeProps),
+        "on": (0, _extends2.default)({}, startListener)
+      }), h(Component, {
+        "ref": "rangeEnd",
+        "directives": [{
+          name: "show",
+          value: this.rangeSelectedIndex === RANGE_END_PICKER
+        }],
+        "class": bem(),
+        "scopedSlots": this.$scopedSlots,
+        "props": (0, _extends2.default)({}, endRangeProps),
+        "on": (0, _extends2.default)({}, endListener)
+      })]), this.genToolbar()]);
+    }
+
     return h(Component, {
       "ref": "root",
       "class": bem(),
@@ -38,4 +342,4 @@ var _default = createComponent({
   }
 });
 
-exports.default = _default;
+exports.default = _default2;

package/lib/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/lib/datetime-picker/shared.js

@@ -32,6 +32,10 @@ var sharedProps = (0, _extends2.default)({}, _shared.pickerProps, {
     default: function _default(type, value) {
       return value;
     }
+  },
+  showRange: {
+    type: Boolean,
+    default: false
   }
 });
 exports.sharedProps = sharedProps;
@@ -87,12 +91,12 @@ 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] || [];
@@ -180,6 +184,15 @@ var TimePickerMixin = {
     Object.keys(_shared.pickerProps).forEach(function (key) {
       props[key] = _this6[key];
     });
+
+    if (this.showRange) {
+      (0, _extends2.default)(props, {
+        popup: false,
+        showToolbar: false,
+        title: ''
+      });
+    }
+
     return h(_picker.default, {
       "attrs": {
         "show-picker": this.showPicker,

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

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

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

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