bi-eleme 2.2.1 → 2.4.2

package/packages/super-date/src/basic/month-table.vue

@@ -0,0 +1,278 @@
+<template>
+  <table
+    @click="handleMonthTableClick"
+    @mousemove="handleMouseMove"
+    class="el-month-table"
+  >
+    <tbody>
+      <tr
+        v-for="(row, key) in rows"
+        :key="key"
+      >
+        <td
+          :class="getCellStyle(cell)"
+          v-for="(cell, key) in row"
+          :key="key"
+        >
+          <div>
+            <a class="cell">{{ t('el.datepicker.months.' + months[cell.text]) }}</a>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script type="text/babel">
+import Locale from 'bi-eleme/src/mixins/locale'
+import { isDate, range, getDayCountOfMonth, nextDate, getTimestampInTimezone } from 'bi-eleme/src/utils/date-util'
+import { hasClass } from 'bi-eleme/src/utils/dom'
+import { arrayFindIndex, coerceTruthyValueToArray, arrayFind } from 'bi-eleme/src/utils/util'
+
+const datesInMonth = (year, month) => {
+  const numOfDays = getDayCountOfMonth(year, month)
+  const firstDay = new Date(year, month, 1)
+  return range(numOfDays).map((n) => nextDate(firstDay, n))
+}
+
+const clearDate = (date) => {
+  return new Date(date.getFullYear(), date.getMonth())
+}
+
+const getMonthTimestamp = function (time, utc = 8) {
+  if (typeof time === 'number' || typeof time === 'string') {
+    return clearDate(getTimestampInTimezone(new Date(time), utc)).getTime()
+  } else if (time instanceof Date) {
+    return clearDate(getTimestampInTimezone(time, utc)).getTime()
+  } else {
+    return NaN
+  }
+}
+
+// remove the first element that satisfies `pred` from arr
+// return a new array if modification occurs
+// return the original array otherwise
+const removeFromArray = function (arr, pred) {
+  const idx = typeof pred === 'function' ? arrayFindIndex(arr, pred) : arr.indexOf(pred)
+  return idx >= 0 ? [...arr.slice(0, idx), ...arr.slice(idx + 1)] : arr
+}
+export default {
+  props: {
+    disabledDate: {},
+    value: {},
+    selectionMode: {
+      default: 'month'
+    },
+    minDate: {},
+    utc: {
+      default: 8,
+      type: Number
+    },
+    maxDate: {},
+    defaultValue: {
+      validator(val) {
+        // null or valid Date Object
+        return val === null || isDate(val) || (Array.isArray(val) && val.every(isDate))
+      }
+    },
+    date: {},
+    rangeState: {
+      default() {
+        return {
+          endDate: null,
+          selecting: false
+        }
+      }
+    }
+  },
+
+  mixins: [Locale],
+
+  watch: {
+    'rangeState.endDate'(newVal) {
+      this.markRange(this.minDate, newVal)
+    },
+
+    minDate(newVal, oldVal) {
+      if (getMonthTimestamp(newVal) !== getMonthTimestamp(oldVal)) {
+        this.markRange(this.minDate, this.maxDate)
+      }
+    },
+
+    maxDate(newVal, oldVal) {
+      if (getMonthTimestamp(newVal) !== getMonthTimestamp(oldVal)) {
+        this.markRange(this.minDate, this.maxDate)
+      }
+    }
+  },
+
+  data() {
+    return {
+      months: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'],
+      tableRows: [[], [], []],
+      lastRow: null,
+      lastColumn: null
+    }
+  },
+
+  methods: {
+    cellMatchesDate(cell, date) {
+      const value = new Date(date)
+      return this.date.getFullYear() === value.getFullYear() && Number(cell.text) === value.getMonth()
+    },
+    getCellStyle(cell) {
+      const style = {}
+      const year = this.date.getFullYear()
+      const today = new Date()
+      const month = cell.text
+      const defaultValue = this.defaultValue ? (Array.isArray(this.defaultValue) ? this.defaultValue : [this.defaultValue]) : []
+      style.disabled = typeof this.disabledDate === 'function' ? datesInMonth(year, month).every(this.disabledDate) : false
+      style.current = arrayFindIndex(coerceTruthyValueToArray(this.value), (date) => date.getFullYear() === year && date.getMonth() === month) >= 0
+      style.today = today.getFullYear() === year && today.getMonth() === month
+      style.default = defaultValue.some((date) => this.cellMatchesDate(cell, date))
+
+      if (cell.inRange) {
+        style['in-range'] = true
+
+        if (cell.start) {
+          style['start-date'] = true
+        }
+
+        if (cell.end) {
+          style['end-date'] = true
+        }
+      }
+      return style
+    },
+    getMonthOfCell(month) {
+      const year = this.date.getFullYear()
+      return new Date(year, month, 1)
+    },
+    markRange(minDate, maxDate) {
+      minDate = getMonthTimestamp(minDate)
+      maxDate = getMonthTimestamp(maxDate) || minDate
+      ;[minDate, maxDate] = [Math.min(minDate, maxDate), Math.max(minDate, maxDate)]
+      const rows = this.rows
+      for (let i = 0, k = rows.length; i < k; i++) {
+        const row = rows[i]
+        for (let j = 0, l = row.length; j < l; j++) {
+          const cell = row[j]
+          const index = i * 4 + j
+          const time = new Date(this.date.getFullYear(), index).getTime()
+
+          cell.inRange = minDate && time >= minDate && time <= maxDate
+          cell.start = minDate && time === minDate
+          cell.end = maxDate && time === maxDate
+        }
+      }
+    },
+    handleMouseMove(event) {
+      if (!this.rangeState.selecting) return
+
+      let target = event.target
+      if (target.tagName === 'A') {
+        target = target.parentNode.parentNode
+      }
+      if (target.tagName === 'DIV') {
+        target = target.parentNode
+      }
+      if (target.tagName !== 'TD') return
+
+      const row = target.parentNode.rowIndex
+      const column = target.cellIndex
+      // can not select disabled date
+      if (this.rows[row][column].disabled) return
+
+      // only update rangeState when mouse moves to a new cell
+      // this avoids frequent Date object creation and improves performance
+      if (row !== this.lastRow || column !== this.lastColumn) {
+        this.lastRow = row
+        this.lastColumn = column
+        this.$emit('changerange', {
+          minDate: this.minDate,
+          maxDate: this.maxDate,
+          rangeState: {
+            selecting: true,
+            endDate: this.getMonthOfCell(row * 4 + column)
+          }
+        })
+      }
+    },
+    handleMonthTableClick(event) {
+      let target = event.target
+      if (target.tagName === 'A') {
+        target = target.parentNode.parentNode
+      }
+      if (target.tagName === 'DIV') {
+        target = target.parentNode
+      }
+      if (target.tagName !== 'TD') return
+      if (hasClass(target, 'disabled')) return
+      const column = target.cellIndex
+      const row = target.parentNode.rowIndex
+      const month = row * 4 + column
+      const newDate = this.getMonthOfCell(month)
+      if (this.selectionMode === 'range') {
+        if (!this.rangeState.selecting) {
+          this.$emit('pick', { minDate: newDate, maxDate: null })
+          this.rangeState.selecting = true
+        } else {
+          if (newDate >= this.minDate) {
+            this.$emit('pick', { minDate: this.minDate, maxDate: newDate })
+          } else {
+            this.$emit('pick', { minDate: newDate, maxDate: this.minDate })
+          }
+          this.rangeState.selecting = false
+        }
+      } else if (this.selectionMode === 'months') {
+        const value = this.value || []
+        const year = this.date.getFullYear()
+        const newValue = arrayFindIndex(value, (date) => date.getFullYear() === year && date.getMonth() === month) >= 0 ? removeFromArray(value, (date) => date.getTime() === newDate.getTime()) : [...value, newDate]
+        this.$emit('pick', newValue)
+      } else {
+        this.$emit('pick', month)
+      }
+    }
+  },
+
+  computed: {
+    rows() {
+      // TODO: refactory rows / getCellClasses
+      const rows = this.tableRows
+      const disabledDate = this.disabledDate
+      const selectedDate = []
+      const now = getMonthTimestamp(new Date(), this.utc)
+
+      for (let i = 0; i < 3; i++) {
+        const row = rows[i]
+        for (let j = 0; j < 4; j++) {
+          let cell = row[j]
+          if (!cell) {
+            cell = { row: i, column: j, type: 'normal', inRange: false, start: false, end: false }
+          }
+
+          cell.type = 'normal'
+
+          const index = i * 4 + j
+          const time = new Date(this.date.getFullYear(), index).getTime()
+          cell.inRange = time >= getMonthTimestamp(this.minDate) && time <= getMonthTimestamp(this.maxDate)
+          cell.start = this.minDate && time === getMonthTimestamp(this.minDate)
+          cell.end = this.maxDate && time === getMonthTimestamp(this.maxDate)
+          const isToday = time === now
+
+          if (isToday) {
+            cell.type = 'today'
+          }
+          cell.text = index
+          let cellDate = new Date(time)
+          cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate)
+          cell.selected = arrayFind(selectedDate, (date) => date.getTime() === cellDate.getTime())
+
+          this.$set(row, j, cell)
+        }
+      }
+      return rows
+    }
+  }
+}
+</script>

package/packages/super-date/src/basic/time-spinner.vue

@@ -0,0 +1,340 @@
+<template>
+  <div
+    class="el-time-spinner"
+    :class="{ 'has-seconds': showSeconds }"
+  >
+    <template v-if="!arrowControl">
+      <el-scrollbar
+        @mouseenter.native="emitSelectRange('hours')"
+        @mousemove.native="adjustCurrentSpinner('hours')"
+        class="el-time-spinner__wrapper"
+        wrap-style="max-height: inherit;"
+        view-class="el-time-spinner__list"
+        noresize
+        tag="ul"
+        ref="hours"
+      >
+        <li
+          @click="handleClick('hours', { value: hour, disabled: disabled })"
+          v-for="(disabled, hour) in hoursList"
+          class="el-time-spinner__item"
+          :key="hour"
+          :class="{ 'active': hour === hours, 'disabled': disabled }"
+        >{{ ('0' + (amPmMode ? (hour % 12 || 12) : hour )).slice(-2) }}{{ amPm(hour) }}</li>
+      </el-scrollbar>
+      <el-scrollbar
+        @mouseenter.native="emitSelectRange('minutes')"
+        @mousemove.native="adjustCurrentSpinner('minutes')"
+        class="el-time-spinner__wrapper"
+        wrap-style="max-height: inherit;"
+        view-class="el-time-spinner__list"
+        noresize
+        tag="ul"
+        ref="minutes"
+      >
+        <li
+          @click="handleClick('minutes', { value: key, disabled: false })"
+          v-for="(enabled, key) in minutesList"
+          :key="key"
+          class="el-time-spinner__item"
+          :class="{ 'active': key === minutes, disabled: !enabled }"
+        >{{ ('0' + key).slice(-2) }}</li>
+      </el-scrollbar>
+      <el-scrollbar
+        v-show="showSeconds"
+        @mouseenter.native="emitSelectRange('seconds')"
+        @mousemove.native="adjustCurrentSpinner('seconds')"
+        class="el-time-spinner__wrapper"
+        wrap-style="max-height: inherit;"
+        view-class="el-time-spinner__list"
+        noresize
+        tag="ul"
+        ref="seconds"
+      >
+        <li
+          @click="handleClick('seconds', { value: key, disabled: false })"
+          v-for="(second, key) in 60"
+          class="el-time-spinner__item"
+          :class="{ 'active': key === seconds }"
+          :key="key"
+        >{{ ('0' + key).slice(-2) }}</li>
+      </el-scrollbar>
+    </template>
+    <template v-if="arrowControl">
+      <div
+        @mouseenter="emitSelectRange('hours')"
+        class="el-time-spinner__wrapper is-arrow"
+      >
+        <i
+          v-repeat-click="decrease"
+          class="el-time-spinner__arrow el-icon-arrow-up"
+        ></i>
+        <i
+          v-repeat-click="increase"
+          class="el-time-spinner__arrow el-icon-arrow-down"
+        ></i>
+        <ul
+          class="el-time-spinner__list"
+          ref="hours"
+        >
+          <li
+            class="el-time-spinner__item"
+            :class="{ 'active': hour === hours, 'disabled': hoursList[hour] }"
+            v-for="(hour, key) in arrowHourList"
+            :key="key"
+          >{{ hour === undefined ? '' : ('0' + (amPmMode ? (hour % 12 || 12) : hour )).slice(-2) + amPm(hour) }}</li>
+        </ul>
+      </div>
+      <div
+        @mouseenter="emitSelectRange('minutes')"
+        class="el-time-spinner__wrapper is-arrow"
+      >
+        <i
+          v-repeat-click="decrease"
+          class="el-time-spinner__arrow el-icon-arrow-up"
+        ></i>
+        <i
+          v-repeat-click="increase"
+          class="el-time-spinner__arrow el-icon-arrow-down"
+        ></i>
+        <ul
+          class="el-time-spinner__list"
+          ref="minutes"
+        >
+          <li
+            class="el-time-spinner__item"
+            :class="{ 'active': minute === minutes }"
+            v-for="(minute, key) in arrowMinuteList"
+            :key="key"
+          >
+            {{ minute === undefined ? '' : ('0' + minute).slice(-2) }}
+          </li>
+        </ul>
+      </div>
+      <div
+        @mouseenter="emitSelectRange('seconds')"
+        class="el-time-spinner__wrapper is-arrow"
+        v-if="showSeconds"
+      >
+        <i
+          v-repeat-click="decrease"
+          class="el-time-spinner__arrow el-icon-arrow-up"
+        ></i>
+        <i
+          v-repeat-click="increase"
+          class="el-time-spinner__arrow el-icon-arrow-down"
+        ></i>
+        <ul
+          class="el-time-spinner__list"
+          ref="seconds"
+        >
+          <li
+            v-for="(second, key) in arrowSecondList"
+            class="el-time-spinner__item"
+            :class="{ 'active': second === seconds }"
+            :key="key"
+          >
+            {{ second === undefined ? '' : ('0' + second).slice(-2) }}
+          </li>
+        </ul>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script type="text/babel">
+import { getRangeHours, getRangeMinutes, modifyTime } from 'bi-eleme/src/utils/date-util'
+import ElScrollbar from 'bi-eleme/packages/scrollbar'
+import RepeatClick from 'bi-eleme/src/directives/repeat-click'
+
+export default {
+  components: { ElScrollbar },
+
+  directives: {
+    repeatClick: RepeatClick
+  },
+
+  props: {
+    date: {},
+    defaultValue: {}, // reserved for future use
+    showSeconds: {
+      type: Boolean,
+      default: true
+    },
+    arrowControl: Boolean,
+    amPmMode: {
+      type: String,
+      default: '' // 'a': am/pm; 'A': AM/PM
+    }
+  },
+
+  computed: {
+    hours() {
+      return this.date.getHours()
+    },
+    minutes() {
+      return this.date.getMinutes()
+    },
+    seconds() {
+      return this.date.getSeconds()
+    },
+    hoursList() {
+      return getRangeHours(this.selectableRange)
+    },
+    minutesList() {
+      return getRangeMinutes(this.selectableRange, this.hours)
+    },
+    arrowHourList() {
+      const hours = this.hours
+      return [hours > 0 ? hours - 1 : undefined, hours, hours < 23 ? hours + 1 : undefined]
+    },
+    arrowMinuteList() {
+      const minutes = this.minutes
+      return [minutes > 0 ? minutes - 1 : undefined, minutes, minutes < 59 ? minutes + 1 : undefined]
+    },
+    arrowSecondList() {
+      const seconds = this.seconds
+      return [seconds > 0 ? seconds - 1 : undefined, seconds, seconds < 59 ? seconds + 1 : undefined]
+    }
+  },
+
+  data() {
+    return {
+      selectableRange: [],
+      currentScrollbar: null
+    }
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      !this.arrowControl && this.bindScrollEvent()
+    })
+  },
+
+  methods: {
+    increase() {
+      this.scrollDown(1)
+    },
+
+    decrease() {
+      this.scrollDown(-1)
+    },
+
+    modifyDateField(type, value) {
+      switch (type) {
+        case 'hours':
+          this.$emit('change', modifyTime(this.date, value, this.minutes, this.seconds))
+          break
+        case 'minutes':
+          this.$emit('change', modifyTime(this.date, this.hours, value, this.seconds))
+          break
+        case 'seconds':
+          this.$emit('change', modifyTime(this.date, this.hours, this.minutes, value))
+          break
+      }
+    },
+
+    handleClick(type, { value, disabled }) {
+      if (!disabled) {
+        this.modifyDateField(type, value)
+        this.emitSelectRange(type)
+        this.adjustSpinner(type, value)
+      }
+    },
+
+    emitSelectRange(type) {
+      if (type === 'hours') {
+        this.$emit('select-range', 0, 2)
+      } else if (type === 'minutes') {
+        this.$emit('select-range', 3, 5)
+      } else if (type === 'seconds') {
+        this.$emit('select-range', 6, 8)
+      }
+      this.currentScrollbar = type
+    },
+
+    bindScrollEvent() {
+      const bindFunction = (type) => {
+        this.$refs[type].wrap.onscroll = (e) => {
+          // TODO: scroll is emitted when set scrollTop programatically
+          // should find better solutions in the future!
+          this.handleScroll(type, e)
+        }
+      }
+      bindFunction('hours')
+      bindFunction('minutes')
+      bindFunction('seconds')
+    },
+
+    handleScroll(type) {
+      const value = Math.min(Math.round((this.$refs[type].wrap.scrollTop - (this.scrollBarHeight(type) * 0.5 - 10) / this.typeItemHeight(type) + 3) / this.typeItemHeight(type)), type === 'hours' ? 23 : 59)
+      this.modifyDateField(type, value)
+    },
+
+    // NOTE: used by datetime / date-range panel
+    //       renamed from adjustScrollTop
+    //       should try to refactory it
+    adjustSpinners() {
+      this.adjustSpinner('hours', this.hours)
+      this.adjustSpinner('minutes', this.minutes)
+      this.adjustSpinner('seconds', this.seconds)
+    },
+
+    adjustCurrentSpinner(type) {
+      this.adjustSpinner(type, this[type])
+    },
+
+    adjustSpinner(type, value) {
+      if (this.arrowControl) return
+      const el = this.$refs[type].wrap
+      if (el) {
+        el.scrollTop = Math.max(0, value * this.typeItemHeight(type))
+      }
+    },
+
+    scrollDown(step) {
+      if (!this.currentScrollbar) {
+        this.emitSelectRange('hours')
+      }
+
+      const label = this.currentScrollbar
+      const hoursList = this.hoursList
+      let now = this[label]
+
+      if (this.currentScrollbar === 'hours') {
+        let total = Math.abs(step)
+        step = step > 0 ? 1 : -1
+        let length = hoursList.length
+        while (length-- && total) {
+          now = (now + step + hoursList.length) % hoursList.length
+          if (hoursList[now]) {
+            continue
+          }
+          total--
+        }
+        if (hoursList[now]) return
+      } else {
+        now = (now + step + 60) % 60
+      }
+
+      this.modifyDateField(label, now)
+      this.adjustSpinner(label, now)
+      this.$nextTick(() => this.emitSelectRange(this.currentScrollbar))
+    },
+    amPm(hour) {
+      let shouldShowAmPm = this.amPmMode.toLowerCase() === 'a'
+      if (!shouldShowAmPm) return ''
+      let isCapital = this.amPmMode === 'A'
+      let content = hour < 12 ? ' am' : ' pm'
+      if (isCapital) content = content.toUpperCase()
+      return content
+    },
+    typeItemHeight(type) {
+      return this.$refs[type].$el.querySelector('li').offsetHeight
+    },
+    scrollBarHeight(type) {
+      return this.$refs[type].$el.offsetHeight
+    }
+  }
+}
+</script>