bi-eleme 2.2.1 → 2.4.1

package/packages/super-date/src/panel/month-range.vue

@@ -0,0 +1,289 @@
+<template>
+  <transition
+    name="el-zoom-in-top"
+    @after-leave="$emit('dodestroy')"
+  >
+    <div
+      v-show="visible"
+      class="el-picker-panel el-date-range-picker el-popper"
+      :class="[{
+        'has-sidebar': $slots.sidebar || shortcuts
+      }, popperClass]"
+    >
+      <div class="el-picker-panel__body-wrapper">
+        <slot
+          name="sidebar"
+          class="el-picker-panel__sidebar"
+        ></slot>
+        <div
+          class="el-picker-panel__sidebar"
+          v-if="shortcuts"
+        >
+          <button
+            type="button"
+            class="el-picker-panel__shortcut"
+            v-for="(shortcut, key) in shortcuts"
+            :key="key"
+            @click="handleShortcutClick(shortcut)"
+          >{{shortcut.text}}</button>
+        </div>
+        <div class="el-picker-panel__body">
+          <div class="el-picker-panel__content el-date-range-picker__content is-left">
+            <div class="el-date-range-picker__header">
+              <button
+                type="button"
+                @click="leftPrevYear"
+                class="el-picker-panel__icon-btn el-icon-left1"
+              ></button>
+              <button
+                type="button"
+                v-if="unlinkPanels"
+                @click="leftNextYear"
+                :disabled="!enableYearArrow"
+                :class="{ 'is-disabled': !enableYearArrow }"
+                class="el-picker-panel__icon-btn el-icon-right1-2"
+              ></button>
+              <div>{{ leftLabel }}</div>
+            </div>
+            <month-table
+              selection-mode="range"
+              :date="leftDate"
+              :default-value="defaultValue"
+              :min-date="minDate"
+              :max-date="maxDate"
+              :range-state="rangeState"
+              :disabled-date="disabledDate"
+              @changerange="handleChangeRange"
+              @pick="handleRangePick"
+            >
+            </month-table>
+          </div>
+          <div class="el-picker-panel__content el-date-range-picker__content is-right">
+            <div class="el-date-range-picker__header">
+              <button
+                type="button"
+                v-if="unlinkPanels"
+                @click="rightPrevYear"
+                :disabled="!enableYearArrow"
+                :class="{ 'is-disabled': !enableYearArrow }"
+                class="el-picker-panel__icon-btn el-icon-left1"
+              ></button>
+              <button
+                type="button"
+                @click="rightNextYear"
+                class="el-picker-panel__icon-btn el-icon-right1-2"
+              ></button>
+              <div>{{ rightLabel }}</div>
+            </div>
+            <month-table
+              selection-mode="range"
+              :date="rightDate"
+              :default-value="defaultValue"
+              :min-date="minDate"
+              :max-date="maxDate"
+              :range-state="rangeState"
+              :disabled-date="disabledDate"
+              @changerange="handleChangeRange"
+              @pick="handleRangePick"
+            >
+            </month-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+import { isDate, modifyWithTimeString, prevYear, nextYear, nextMonth } from 'bi-eleme/src/utils/date-util'
+import Clickoutside from 'bi-eleme/src/utils/clickoutside'
+import Locale from 'bi-eleme/src/mixins/locale'
+import MonthTable from '../basic/month-table'
+import ElInput from 'bi-eleme/packages/input'
+import ElButton from 'bi-eleme/packages/button'
+
+const calcDefaultValue = (defaultValue) => {
+  if (Array.isArray(defaultValue)) {
+    return [new Date(defaultValue[0]), new Date(defaultValue[1])]
+  } else if (defaultValue) {
+    return [new Date(defaultValue), nextMonth(new Date(defaultValue))]
+  } else {
+    return [new Date(), nextMonth(new Date())]
+  }
+}
+export default {
+  mixins: [Locale],
+
+  directives: { Clickoutside },
+
+  computed: {
+    btnDisabled() {
+      return !(this.minDate && this.maxDate && !this.selecting && this.isValidValue([this.minDate, this.maxDate]))
+    },
+
+    leftLabel() {
+      return this.leftDate.getFullYear() + ' ' + this.t('el.datepicker.year')
+    },
+
+    rightLabel() {
+      return this.rightDate.getFullYear() + ' ' + this.t('el.datepicker.year')
+    },
+
+    leftYear() {
+      return this.leftDate.getFullYear()
+    },
+
+    rightYear() {
+      return this.rightDate.getFullYear() === this.leftDate.getFullYear() ? this.leftDate.getFullYear() + 1 : this.rightDate.getFullYear()
+    },
+
+    enableYearArrow() {
+      return this.unlinkPanels && this.rightYear > this.leftYear + 1
+    }
+  },
+
+  data() {
+    return {
+      popperClass: '',
+      value: [],
+      defaultValue: null,
+      defaultTime: null,
+      minDate: '',
+      maxDate: '',
+      leftDate: new Date(),
+      rightDate: nextYear(new Date()),
+      rangeState: {
+        endDate: null,
+        selecting: false,
+        row: null,
+        column: null
+      },
+      shortcuts: '',
+      visible: '',
+      disabledDate: '',
+      format: '',
+      arrowControl: false,
+      unlinkPanels: false
+    }
+  },
+
+  watch: {
+    value(newVal) {
+      if (!newVal) {
+        this.minDate = null
+        this.maxDate = null
+      } else if (Array.isArray(newVal)) {
+        this.minDate = isDate(newVal[0]) ? new Date(newVal[0]) : null
+        this.maxDate = isDate(newVal[1]) ? new Date(newVal[1]) : null
+        if (this.minDate) {
+          this.leftDate = this.minDate
+          if (this.unlinkPanels && this.maxDate) {
+            const minDateYear = this.minDate.getFullYear()
+            const maxDateYear = this.maxDate.getFullYear()
+            this.rightDate = minDateYear === maxDateYear ? nextYear(this.maxDate) : this.maxDate
+          } else {
+            this.rightDate = nextYear(this.leftDate)
+          }
+        } else {
+          this.leftDate = calcDefaultValue(this.defaultValue)[0]
+          this.rightDate = nextYear(this.leftDate)
+        }
+      }
+    },
+
+    defaultValue(val) {
+      if (!Array.isArray(this.value)) {
+        const [left, right] = calcDefaultValue(val)
+        this.leftDate = left
+        this.rightDate = val && val[1] && left.getFullYear() !== right.getFullYear() && this.unlinkPanels ? right : nextYear(this.leftDate)
+      }
+    }
+  },
+
+  methods: {
+    handleClear() {
+      this.minDate = null
+      this.maxDate = null
+      this.leftDate = calcDefaultValue(this.defaultValue)[0]
+      this.rightDate = nextYear(this.leftDate)
+      this.$emit('pick', null)
+    },
+
+    handleChangeRange(val) {
+      this.minDate = val.minDate
+      this.maxDate = val.maxDate
+      this.rangeState = val.rangeState
+    },
+
+    handleRangePick(val, close = true) {
+      const defaultTime = this.defaultTime || []
+      const minDate = modifyWithTimeString(val.minDate, defaultTime[0])
+      const maxDate = modifyWithTimeString(val.maxDate, defaultTime[1])
+      if (this.maxDate === maxDate && this.minDate === minDate) {
+        return
+      }
+      this.onPick && this.onPick(val)
+      this.maxDate = maxDate
+      this.minDate = minDate
+
+      // workaround for https://github.com/ElemeFE/element/issues/7539, should remove this block when we don't have to care about Chromium 55 - 57
+      setTimeout(() => {
+        this.maxDate = maxDate
+        this.minDate = minDate
+      }, 10)
+      if (!close) return
+      this.handleConfirm()
+    },
+
+    handleShortcutClick(shortcut) {
+      if (shortcut.onClick) {
+        shortcut.onClick(this)
+      }
+    },
+
+    // leftPrev*, rightNext* need to take care of `unlinkPanels`
+    leftPrevYear() {
+      this.leftDate = prevYear(this.leftDate)
+      if (!this.unlinkPanels) {
+        this.rightDate = prevYear(this.rightDate)
+      }
+    },
+
+    rightNextYear() {
+      if (!this.unlinkPanels) {
+        this.leftDate = nextYear(this.leftDate)
+      }
+      this.rightDate = nextYear(this.rightDate)
+    },
+
+    // leftNext*, rightPrev* are called when `unlinkPanels` is true
+    leftNextYear() {
+      this.leftDate = nextYear(this.leftDate)
+    },
+
+    rightPrevYear() {
+      this.rightDate = prevYear(this.rightDate)
+    },
+
+    handleConfirm(visible = false) {
+      if (this.isValidValue([this.minDate, this.maxDate])) {
+        this.$emit('pick', [this.minDate, this.maxDate], visible)
+      }
+    },
+
+    isValidValue(value) {
+      return Array.isArray(value) && value && value[0] && value[1] && isDate(value[0]) && isDate(value[1]) && value[0].getTime() <= value[1].getTime() && (typeof this.disabledDate === 'function' ? !this.disabledDate(value[0]) && !this.disabledDate(value[1]) : true)
+    },
+
+    resetView() {
+      // NOTE: this is a hack to reset {min, max}Date on picker open.
+      // TODO: correct way of doing so is to refactor {min, max}Date to be dependent on value and internal selection state
+      //       an alternative would be resetView whenever picker becomes visible, should also investigate date-panel's resetView
+      this.minDate = this.value && isDate(this.value[0]) ? new Date(this.value[0]) : null
+      this.maxDate = this.value && isDate(this.value[0]) ? new Date(this.value[1]) : null
+    }
+  },
+
+  components: { MonthTable, ElInput, ElButton }
+}
+</script>

package/packages/super-date/src/panel/time-range.vue

@@ -0,0 +1,250 @@
+<template>
+  <transition
+    name="el-zoom-in-top"
+    @after-leave="$emit('dodestroy')"
+  >
+    <div
+      v-show="visible"
+      class="el-time-range-picker el-picker-panel el-popper"
+      :class="popperClass"
+    >
+      <div class="el-time-range-picker__content">
+        <div class="el-time-range-picker__cell">
+          <div class="el-time-range-picker__header">{{ t('el.datepicker.startTime') }}</div>
+          <div
+            :class="{ 'has-seconds': showSeconds, 'is-arrow': arrowControl }"
+            class="el-time-range-picker__body el-time-panel__content"
+          >
+            <time-spinner
+              ref="minSpinner"
+              :show-seconds="showSeconds"
+              :am-pm-mode="amPmMode"
+              @change="handleMinChange"
+              :arrow-control="arrowControl"
+              @select-range="setMinSelectionRange"
+              :date="minDate"
+            >
+            </time-spinner>
+          </div>
+        </div>
+        <div class="el-time-range-picker__cell">
+          <div class="el-time-range-picker__header">{{ t('el.datepicker.endTime') }}</div>
+          <div
+            :class="{ 'has-seconds': showSeconds, 'is-arrow': arrowControl }"
+            class="el-time-range-picker__body el-time-panel__content"
+          >
+            <time-spinner
+              ref="maxSpinner"
+              :show-seconds="showSeconds"
+              :am-pm-mode="amPmMode"
+              @change="handleMaxChange"
+              :arrow-control="arrowControl"
+              @select-range="setMaxSelectionRange"
+              :date="maxDate"
+            >
+            </time-spinner>
+          </div>
+        </div>
+      </div>
+      <div class="el-time-panel__footer">
+        <el-button
+          type="text"
+          size="mini"
+          class="el-time-panel__btn cancel"
+          @click="handleCancel()"
+        >{{ t('el.datepicker.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          class="el-time-panel__btn confirm"
+          @click="handleConfirm()"
+          :disabled="btnDisabled"
+        >{{ t('el.datepicker.confirm') }}</el-button>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+import { parseDate, limitTimeRange, modifyDate, clearMilliseconds, timeWithinRange } from 'bi-eleme/src/utils/date-util'
+import Locale from 'bi-eleme/src/mixins/locale'
+import TimeSpinner from '../basic/time-spinner'
+
+const MIN_TIME = parseDate('00:00:00', 'HH:mm:ss')
+const MAX_TIME = parseDate('23:59:59', 'HH:mm:ss')
+
+const minTimeOfDay = function (date) {
+  return modifyDate(MIN_TIME, date.getFullYear(), date.getMonth(), date.getDate())
+}
+
+const maxTimeOfDay = function (date) {
+  return modifyDate(MAX_TIME, date.getFullYear(), date.getMonth(), date.getDate())
+}
+
+// increase time by amount of milliseconds, but within the range of day
+const advanceTime = function (date, amount) {
+  return new Date(Math.min(date.getTime() + amount, maxTimeOfDay(date).getTime()))
+}
+
+export default {
+  mixins: [Locale],
+
+  components: { TimeSpinner },
+
+  computed: {
+    showSeconds() {
+      return (this.format || '').indexOf('ss') !== -1
+    },
+
+    offset() {
+      return this.showSeconds ? 11 : 8
+    },
+
+    spinner() {
+      return this.selectionRange[0] < this.offset ? this.$refs.minSpinner : this.$refs.maxSpinner
+    },
+
+    btnDisabled() {
+      return this.minDate.getTime() > this.maxDate.getTime()
+    },
+    amPmMode() {
+      if ((this.format || '').indexOf('A') !== -1) return 'A'
+      if ((this.format || '').indexOf('a') !== -1) return 'a'
+      return ''
+    }
+  },
+
+  data() {
+    return {
+      popperClass: '',
+      minDate: new Date(),
+      maxDate: new Date(),
+      value: [],
+      oldValue: [new Date(), new Date()],
+      defaultValue: null,
+      format: 'HH:mm:ss',
+      visible: false,
+      selectionRange: [0, 2],
+      arrowControl: false
+    }
+  },
+
+  watch: {
+    value(value) {
+      if (Array.isArray(value)) {
+        this.minDate = new Date(value[0])
+        this.maxDate = new Date(value[1])
+      } else {
+        if (Array.isArray(this.defaultValue)) {
+          this.minDate = new Date(this.defaultValue[0])
+          this.maxDate = new Date(this.defaultValue[1])
+        } else if (this.defaultValue) {
+          this.minDate = new Date(this.defaultValue)
+          this.maxDate = advanceTime(new Date(this.defaultValue), 60 * 60 * 1000)
+        } else {
+          this.minDate = new Date()
+          this.maxDate = advanceTime(new Date(), 60 * 60 * 1000)
+        }
+      }
+    },
+
+    visible(val) {
+      if (val) {
+        this.oldValue = this.value
+        this.$nextTick(() => this.$refs.minSpinner.emitSelectRange('hours'))
+      }
+    }
+  },
+
+  methods: {
+    handleClear() {
+      this.$emit('pick', null)
+    },
+
+    handleCancel() {
+      this.$emit('pick', this.oldValue)
+    },
+
+    handleMinChange(date) {
+      this.minDate = clearMilliseconds(date)
+      this.handleChange()
+    },
+
+    handleMaxChange(date) {
+      this.maxDate = clearMilliseconds(date)
+      this.handleChange()
+    },
+
+    handleChange() {
+      if (this.isValidValue([this.minDate, this.maxDate])) {
+        this.$refs.minSpinner.selectableRange = [[minTimeOfDay(this.minDate), this.maxDate]]
+        this.$refs.maxSpinner.selectableRange = [[this.minDate, maxTimeOfDay(this.maxDate)]]
+        this.$emit('pick', [this.minDate, this.maxDate], true)
+      }
+    },
+
+    setMinSelectionRange(start, end) {
+      this.$emit('select-range', start, end, 'min')
+      this.selectionRange = [start, end]
+    },
+
+    setMaxSelectionRange(start, end) {
+      this.$emit('select-range', start, end, 'max')
+      this.selectionRange = [start + this.offset, end + this.offset]
+    },
+
+    handleConfirm(visible = false) {
+      const minSelectableRange = this.$refs.minSpinner.selectableRange
+      const maxSelectableRange = this.$refs.maxSpinner.selectableRange
+
+      this.minDate = limitTimeRange(this.minDate, minSelectableRange, this.format)
+      this.maxDate = limitTimeRange(this.maxDate, maxSelectableRange, this.format)
+
+      this.$emit('pick', [this.minDate, this.maxDate], visible)
+    },
+
+    adjustSpinners() {
+      this.$refs.minSpinner.adjustSpinners()
+      this.$refs.maxSpinner.adjustSpinners()
+    },
+
+    changeSelectionRange(step) {
+      const list = this.showSeconds ? [0, 3, 6, 11, 14, 17] : [0, 3, 8, 11]
+      const mapping = ['hours', 'minutes'].concat(this.showSeconds ? ['seconds'] : [])
+      const index = list.indexOf(this.selectionRange[0])
+      const next = (index + step + list.length) % list.length
+      const half = list.length / 2
+      if (next < half) {
+        this.$refs.minSpinner.emitSelectRange(mapping[next])
+      } else {
+        this.$refs.maxSpinner.emitSelectRange(mapping[next - half])
+      }
+    },
+
+    isValidValue(date) {
+      return Array.isArray(date) && timeWithinRange(this.minDate, this.$refs.minSpinner.selectableRange) && timeWithinRange(this.maxDate, this.$refs.maxSpinner.selectableRange)
+    },
+
+    handleKeydown(event) {
+      const keyCode = event.keyCode
+      const mapping = { 38: -1, 40: 1, 37: -1, 39: 1 }
+
+      // Left or Right
+      if (keyCode === 37 || keyCode === 39) {
+        const step = mapping[keyCode]
+        this.changeSelectionRange(step)
+        event.preventDefault()
+        return
+      }
+
+      // Up or Down
+      if (keyCode === 38 || keyCode === 40) {
+        const step = mapping[keyCode]
+        this.spinner.scrollDown(step)
+        event.preventDefault()
+        return
+      }
+    }
+  }
+}
+</script>