kh-one-ui 2.0.0

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

@@ -0,0 +1,288 @@
+<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-d-arrow-left"></button>
+              <button
+                type="button"
+                v-if="unlinkPanels"
+                @click="leftNextYear"
+                :disabled="!enableYearArrow"
+                :class="{ 'is-disabled': !enableYearArrow }"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-right"></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-d-arrow-left"></button>
+              <button
+                type="button"
+                @click="rightNextYear"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-right"></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 'one-ui/src/utils/date-util';
+  import Clickoutside from 'one-ui/src/utils/clickoutside';
+  import Locale from 'one-ui/src/mixins/locale';
+  import MonthTable from '../basic/month-table';
+  import ElInput from 'one-ui/packages/input';
+  import ElButton from 'one-ui/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;
+
+        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/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 'one-ui/src/utils/date-util';
+  import Locale from 'one-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>