rw-admin-ui 1.0.0

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

@@ -0,0 +1,193 @@
+<template>
+  <transition name="el-slide-up" @after-enter="handleEnter" @after-leave="handleLeave">
+    <div 
+      v-show="visible" 
+      class="el-picker-panel el-quarter-panel el-popper" 
+      :class="[{
+        'has-sidebar': $slots.sidebar || (shortcuts && shortcuts.length)
+    }, 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 && shortcuts.length">
+          <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-date-picker__header el-date-picker__header--bordered">
+            <button 
+              type="button" 
+              @click="handlePrevYear" 
+              :aria-label="t(`el.datepicker.prevYear`)"
+              class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left">
+            </button>
+            <span class="el-date-picker__header-label" style="margin: 0 5px">
+              <el-select 
+                v-model="currentYear" 
+                size="mini" 
+                filterable 
+                allow-create 
+                default-first-option
+                :popper-append-to-body="false" 
+                style="width: 110px;">
+                <el-option v-for="y in yearOptions" :key="y" :value="y" :label="y + ' ' + t('el.datepicker.year')" />
+              </el-select>
+            </span>
+            <button 
+              type="button" 
+              @click="handleNextYear" 
+              :aria-label="t(`el.datepicker.nextYear`)"
+              class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right">
+            </button>
+          </div>
+          <div class="el-picker-panel__content">
+            <quarter-table 
+              :date="date" 
+              :value="value" 
+              :default-value="defaultValue" 
+              :disabled-date="disabledDate"
+              :selection-mode="selectionMode" 
+              @pick="handleQuarterPick" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+import Locale from 'rowinself-ui/src/mixins/locale';
+import QuarterTable from '../basic/quarter-table';
+import ElSelect from 'rowinself-ui/packages/select';
+import ElOption from 'rowinself-ui/packages/option';
+import { prevYear, nextYear, modifyDate, isDate } from 'rowinself-ui/src/utils/date-util';
+
+export default {
+  name: 'QuarterPanel',
+
+  components: {
+    QuarterTable,
+    ElSelect,
+    ElOption
+  },
+
+  mixins: [Locale],
+
+  props: {
+    linkedDate: {
+      type: Date
+    },
+    value: [Date, Array, String],
+    defaultValue: [Date, Array],
+    disabledDate: Function,
+    selectionMode: {
+      default: 'quarter',
+      type: String
+    }
+  },
+
+  data () {
+    return {
+      date: new Date(),
+      visible: false,
+      shortcuts: '',
+      popperClass: ''
+    };
+  },
+
+  computed: {
+    year () {
+      return this.date.getFullYear();
+    },
+    currentYear: {
+      get () {
+        return this.date.getFullYear();
+      },
+      set (val) {
+        const year = Number(val);
+        if (isNaN(year)) return;
+        const date = modifyDate(this.date, year, this.date.getMonth(), this.date.getDate());
+        this.date = date;
+        this.$emit('update:date', date);
+      }
+    },
+    yearOptions () {
+      const currentYear = this.date.getFullYear();
+      const start = currentYear - 50;
+      const end = currentYear + 5;
+      const options = [];
+      for (let i = start; i <= end; i++) {
+        options.push(i);
+      }
+      return options;
+    }
+  },
+
+  watch: {
+    linkedDate(val) {
+      if (val) {
+        this.date = new Date(val);
+      }
+    },
+
+    value(val) {
+      if (isDate(val)) {
+        this.date = new Date(val);
+      } else {
+        this.date = this.defaultValue ? new Date(this.defaultValue) : new Date();
+      }
+    },
+
+    defaultValue(val) {
+      if (!isDate(this.value)) {
+        this.date = val ? new Date(val) : new Date();
+      }
+    }
+  },
+
+  methods: {
+    handleEnter () {
+      // document.body.addEventListener('keydown', this.handleKeydown);
+    },
+
+    handleLeave () {
+      this.$emit('dodestroy');
+      // document.body.removeEventListener('keydown', this.handleKeydown);
+    },
+
+    handleShortcutClick (shortcut) {
+      if (shortcut.onClick) {
+        shortcut.onClick(this);
+      }
+    },
+
+    resetView () {
+      // Quarter panel only has one view
+    },
+
+    handlePrevYear () {
+      const newDate = prevYear(this.date);
+      this.date = newDate;
+      this.$emit('update:date', newDate);
+    },
+    handleNextYear () {
+      const newDate = nextYear(this.date);
+      this.date = newDate;
+      this.$emit('update:date', newDate);
+    },
+    handleQuarterPick (quarter) {
+      if (this.selectionMode === 'quarter') {
+        const year = this.date.getFullYear();
+        const month = quarter * 3;
+        const newDate = modifyDate(this.date, year, month, 1);
+        this.$emit('pick', newDate, false);
+      }
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,246 @@
+<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"/>
+          </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"/>
+          </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 'rowinself-ui/src/utils/date-util';
+  import Locale from 'rowinself-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 {
+
+    components: { TimeSpinner },
+    mixins: [Locale],
+
+    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
+      };
+    },
+
+    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 '';
+      }
+    },
+
+    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,179 @@
+<template>
+  <transition name="el-slide-up" @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"
+          :key="item.value"
+          @click="handleClick(item)">{{ item.value }}</div>
+      </el-scrollbar>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+  import ElScrollbar from 'rowinself-ui/packages/scrollbar';
+  import scrollIntoView from 'rowinself-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 },
+
+    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;
+      }
+    },
+
+    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;
+        }
+      }
+    },
+  };
+</script>