@penggy/element-ui 2.4.11

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

@@ -0,0 +1,248 @@
+<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">
+        <button
+          type="button"
+          class="el-time-panel__btn cancel"
+          @click="handleCancel()">{{ t('el.datepicker.cancel') }}</button>
+        <button
+          type="button"
+          class="el-time-panel__btn confirm"
+          @click="handleConfirm()"
+          :disabled="btnDisabled">{{ t('el.datepicker.confirm') }}</button>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+  import {
+    parseDate,
+    limitTimeRange,
+    modifyDate,
+    clearMilliseconds,
+    timeWithinRange
+  } from '../util';
+  import Locale from 'element-ui/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>

package/packages/date-picker/src/panel/time-select.vue

@@ -0,0 +1,177 @@
+<template>
+  <transition name="el-zoom-in-top" @before-enter="handleMenuEnter" @after-leave="$emit('dodestroy')">
+    <div
+      ref="popper"
+      v-show="visible"
+      :style="{ width: width + 'px' }"
+      :class="popperClass"
+      class="el-picker-panel time-select el-popper">
+      <el-scrollbar noresize wrap-class="el-picker-panel__content">
+        <div class="time-select-item"
+          v-for="item in items"
+          :class="{ selected: value === item.value, disabled: item.disabled, default: item.value === defaultValue }"
+          :disabled="item.disabled"
+          @click="handleClick(item)">{{ item.value }}</div>
+      </el-scrollbar>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+  import ElScrollbar from 'element-ui/packages/scrollbar';
+  import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
+
+  const parseTime = function(time) {
+    const values = (time || '').split(':');
+    if (values.length >= 2) {
+      const hours = parseInt(values[0], 10);
+      const minutes = parseInt(values[1], 10);
+
+      return {
+        hours,
+        minutes
+      };
+    }
+    /* istanbul ignore next */
+    return null;
+  };
+
+  const compareTime = function(time1, time2) {
+    const value1 = parseTime(time1);
+    const value2 = parseTime(time2);
+
+    const minutes1 = value1.minutes + value1.hours * 60;
+    const minutes2 = value2.minutes + value2.hours * 60;
+
+    if (minutes1 === minutes2) {
+      return 0;
+    }
+
+    return minutes1 > minutes2 ? 1 : -1;
+  };
+
+  const formatTime = function(time) {
+    return (time.hours < 10 ? '0' + time.hours : time.hours) + ':' + (time.minutes < 10 ? '0' + time.minutes : time.minutes);
+  };
+
+  const nextTime = function(time, step) {
+    const timeValue = parseTime(time);
+    const stepValue = parseTime(step);
+
+    const next = {
+      hours: timeValue.hours,
+      minutes: timeValue.minutes
+    };
+
+    next.minutes += stepValue.minutes;
+    next.hours += stepValue.hours;
+
+    next.hours += Math.floor(next.minutes / 60);
+    next.minutes = next.minutes % 60;
+
+    return formatTime(next);
+  };
+
+  export default {
+    components: { ElScrollbar },
+
+    watch: {
+      value(val) {
+        if (!val) return;
+        this.$nextTick(() => this.scrollToOption());
+      }
+    },
+
+    methods: {
+      handleClick(item) {
+        if (!item.disabled) {
+          this.$emit('pick', item.value);
+        }
+      },
+
+      handleClear() {
+        this.$emit('pick', null);
+      },
+
+      scrollToOption(selector = '.selected') {
+        const menu = this.$refs.popper.querySelector('.el-picker-panel__content');
+        scrollIntoView(menu, menu.querySelector(selector));
+      },
+
+      handleMenuEnter() {
+        const selected = this.items.map(item => item.value).indexOf(this.value) !== -1;
+        const hasDefault = this.items.map(item => item.value).indexOf(this.defaultValue) !== -1;
+        const option = (selected && '.selected') || (hasDefault && '.default') || '.time-select-item:not(.disabled)';
+        this.$nextTick(() => this.scrollToOption(option));
+      },
+
+      scrollDown(step) {
+        const items = this.items;
+        const length = items.length;
+        let total = items.length;
+        let index = items.map(item => item.value).indexOf(this.value);
+        while (total--) {
+          index = (index + step + length) % length;
+          if (!items[index].disabled) {
+            this.$emit('pick', items[index].value, true);
+            return;
+          }
+        }
+      },
+
+      isValidValue(date) {
+        return this.items.filter(item => !item.disabled).map(item => item.value).indexOf(date) !== -1;
+      },
+
+      handleKeydown(event) {
+        const keyCode = event.keyCode;
+        if (keyCode === 38 || keyCode === 40) {
+          const mapping = { 40: 1, 38: -1 };
+          const offset = mapping[keyCode.toString()];
+          this.scrollDown(offset);
+          event.stopPropagation();
+          return;
+        }
+      }
+    },
+
+    data() {
+      return {
+        popperClass: '',
+        start: '09:00',
+        end: '18:00',
+        step: '00:30',
+        value: '',
+        defaultValue: '',
+        visible: false,
+        minTime: '',
+        maxTime: '',
+        width: 0
+      };
+    },
+
+    computed: {
+      items() {
+        const start = this.start;
+        const end = this.end;
+        const step = this.step;
+
+        const result = [];
+
+        if (start && end && step) {
+          let current = start;
+          while (compareTime(current, end) <= 0) {
+            result.push({
+              value: current,
+              disabled: compareTime(current, this.minTime || '-1:-1') <= 0 ||
+                compareTime(current, this.maxTime || '100:100') >= 0
+            });
+            current = nextTime(current, step);
+          }
+        }
+
+        return result;
+      }
+    }
+  };
+</script>

package/packages/date-picker/src/panel/time.vue

@@ -0,0 +1,186 @@
+<template>
+  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
+    <div
+      v-show="visible"
+      class="el-time-panel el-popper"
+      :class="popperClass">
+      <div class="el-time-panel__content" :class="{ 'has-seconds': showSeconds }">
+        <time-spinner
+          ref="spinner"
+          @change="handleChange"
+          :arrow-control="useArrow"
+          :show-seconds="showSeconds"
+          :am-pm-mode="amPmMode"
+          @select-range="setSelectionRange"
+          :date="date">
+        </time-spinner>
+      </div>
+      <div class="el-time-panel__footer">
+        <button
+          type="button"
+          class="el-time-panel__btn cancel"
+          @click="handleCancel">{{ t('el.datepicker.cancel') }}</button>
+        <button
+          type="button"
+          class="el-time-panel__btn"
+          :class="{confirm: !disabled}"
+          @click="handleConfirm()">{{ t('el.datepicker.confirm') }}</button>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+  import { limitTimeRange, isDate, clearMilliseconds, timeWithinRange } from '../util';
+  import Locale from 'element-ui/src/mixins/locale';
+  import TimeSpinner from '../basic/time-spinner';
+
+  export default {
+    mixins: [Locale],
+
+    components: {
+      TimeSpinner
+    },
+
+    props: {
+      visible: Boolean,
+      timeArrowControl: Boolean
+    },
+
+    watch: {
+      visible(val) {
+        if (val) {
+          this.oldValue = this.value;
+          this.$nextTick(() => this.$refs.spinner.emitSelectRange('hours'));
+        } else {
+          this.needInitAdjust = true;
+        }
+      },
+
+      value(newVal) {
+        let date;
+        if (newVal instanceof Date) {
+          date = limitTimeRange(newVal, this.selectableRange, this.format);
+        } else if (!newVal) {
+          date = this.defaultValue ? new Date(this.defaultValue) : new Date();
+        }
+
+        this.date = date;
+        if (this.visible && this.needInitAdjust) {
+          this.$nextTick(_ => this.adjustSpinners());
+          this.needInitAdjust = false;
+        }
+      },
+
+      selectableRange(val) {
+        this.$refs.spinner.selectableRange = val;
+      },
+
+      defaultValue(val) {
+        if (!isDate(this.value)) {
+          this.date = val ? new Date(val) : new Date();
+        }
+      }
+    },
+
+    data() {
+      return {
+        popperClass: '',
+        format: 'HH:mm:ss',
+        value: '',
+        defaultValue: null,
+        date: new Date(),
+        oldValue: new Date(),
+        selectableRange: [],
+        selectionRange: [0, 2],
+        disabled: false,
+        arrowControl: false,
+        needInitAdjust: true
+      };
+    },
+
+    computed: {
+      showSeconds() {
+        return (this.format || '').indexOf('ss') !== -1;
+      },
+      useArrow() {
+        return this.arrowControl || this.timeArrowControl || false;
+      },
+      amPmMode() {
+        if ((this.format || '').indexOf('A') !== -1) return 'A';
+        if ((this.format || '').indexOf('a') !== -1) return 'a';
+        return '';
+      }
+    },
+
+    methods: {
+      handleCancel() {
+        this.$emit('pick', this.oldValue, false);
+      },
+
+      handleChange(date) {
+        // this.visible avoids edge cases, when use scrolls during panel closing animation
+        if (this.visible) {
+          this.date = clearMilliseconds(date);
+          // if date is out of range, do not emit
+          if (this.isValidValue(this.date)) {
+            this.$emit('pick', this.date, true);
+          }
+        }
+      },
+
+      setSelectionRange(start, end) {
+        this.$emit('select-range', start, end);
+        this.selectionRange = [start, end];
+      },
+
+      handleConfirm(visible = false, first) {
+        if (first) return;
+        const date = clearMilliseconds(limitTimeRange(this.date, this.selectableRange, this.format));
+        this.$emit('pick', date, visible, first);
+      },
+
+      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.$refs.spinner.scrollDown(step);
+          event.preventDefault();
+          return;
+        }
+      },
+
+      isValidValue(date) {
+        return timeWithinRange(date, this.selectableRange, this.format);
+      },
+
+      adjustSpinners() {
+        return this.$refs.spinner.adjustSpinners();
+      },
+
+      changeSelectionRange(step) {
+        const list = [0, 3].concat(this.showSeconds ? [6] : []);
+        const mapping = ['hours', 'minutes'].concat(this.showSeconds ? ['seconds'] : []);
+        const index = list.indexOf(this.selectionRange[0]);
+        const next = (index + step + list.length) % list.length;
+        this.$refs.spinner.emitSelectRange(mapping[next]);
+      }
+    },
+
+    mounted() {
+      this.$nextTick(() => this.handleConfirm(true, true));
+      this.$emit('mounted');
+    }
+  };
+</script>

package/packages/date-picker/src/picker/date-picker.js

@@ -0,0 +1,40 @@
+import Picker from '../picker';
+import DatePanel from '../panel/date';
+import DateRangePanel from '../panel/date-range';
+
+const getPanel = function(type) {
+  if (type === 'daterange' || type === 'datetimerange') {
+    return DateRangePanel;
+  }
+  return DatePanel;
+};
+
+export default {
+  mixins: [Picker],
+
+  name: 'ElDatePicker',
+
+  props: {
+    type: {
+      type: String,
+      default: 'date'
+    },
+    timeArrowControl: Boolean
+  },
+
+  watch: {
+    type(type) {
+      if (this.picker) {
+        this.unmountPicker();
+        this.panel = getPanel(type);
+        this.mountPicker();
+      } else {
+        this.panel = getPanel(type);
+      }
+    }
+  },
+
+  created() {
+    this.panel = getPanel(this.type);
+  }
+};

package/packages/date-picker/src/picker/time-picker.js

@@ -0,0 +1,39 @@
+import Picker from '../picker';
+import TimePanel from '../panel/time';
+import TimeRangePanel from '../panel/time-range';
+
+export default {
+  mixins: [Picker],
+
+  name: 'ElTimePicker',
+
+  props: {
+    isRange: Boolean,
+    arrowControl: Boolean
+  },
+
+  data() {
+    return {
+      type: ''
+    };
+  },
+
+  watch: {
+    isRange(isRange) {
+      if (this.picker) {
+        this.unmountPicker();
+        this.type = isRange ? 'timerange' : 'time';
+        this.panel = isRange ? TimeRangePanel : TimePanel;
+        this.mountPicker();
+      } else {
+        this.type = isRange ? 'timerange' : 'time';
+        this.panel = isRange ? TimeRangePanel : TimePanel;
+      }
+    }
+  },
+
+  created() {
+    this.type = this.isRange ? 'timerange' : 'time';
+    this.panel = this.isRange ? TimeRangePanel : TimePanel;
+  }
+};

package/packages/date-picker/src/picker/time-select.js

@@ -0,0 +1,21 @@
+import Picker from '../picker';
+import Panel from '../panel/time-select';
+
+export default {
+  mixins: [Picker],
+
+  name: 'ElTimeSelect',
+
+  componentName: 'ElTimeSelect',
+
+  props: {
+    type: {
+      type: String,
+      default: 'time-select'
+    }
+  },
+
+  beforeCreate() {
+    this.panel = Panel;
+  }
+};