@zkwq/business 0.0.1

package/src/components/base/ui/date-picker/panel/time-select.vue

@@ -0,0 +1,178 @@
+<template>
+  <transition name="base-zoom-in-top" @before-enter="handleMenuEnter" @after-leave="$emit('dodestroy')">
+    <div
+      ref="popper"
+      v-show="visible"
+      :style="{ width: width + 'px' }"
+      :class="popperClass"
+      class="base-picker-panel time-select base-popper">
+      <base-scrollbar noresize wrap-class="base-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>
+      </base-scrollbar>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+  import BaseScrollbar from '../../scrollbar';
+  import scrollIntoView from '../../util/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: { BaseScrollbar },
+
+    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('.base-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/src/components/base/ui/date-picker/panel/time.vue

@@ -0,0 +1,186 @@
+<template>
+  <transition name="base-zoom-in-top" @after-leave="$emit('dodestroy')">
+    <div
+      v-show="visible"
+      class="base-time-panel base-popper"
+      :class="popperClass">
+      <div class="base-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="base-time-panel__footer">
+        <button
+          type="button"
+          class="base-time-panel__btn cancel"
+          @click="handleCancel">{{ t('base.datepicker.cancel') }}</button>
+        <button
+          type="button"
+          class="base-time-panel__btn"
+          :class="{confirm: !disabled}"
+          @click="handleConfirm()">{{ t('base.datepicker.confirm') }}</button>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+  import { limitTimeRange, isDate, clearMilliseconds, timeWithinRange } from '../../util/date-util';
+  import Locale from '../../mixin/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/src/components/base/ui/date-picker/picker/date-picker.js

@@ -0,0 +1,43 @@
+import Picker from '../picker';
+import DatePanel from '../panel/date';
+import DateRangePanel from '../panel/date-range';
+import MonthRangePanel from '../panel/month-range';
+
+const getPanel = function(type) {
+  if (type === 'daterange' || type === 'datetimerange') {
+    return DateRangePanel;
+  } else if (type === 'monthrange') {
+    return MonthRangePanel;
+  }
+  return DatePanel;
+};
+
+export default {
+  mixins: [Picker],
+
+  name: 'BaseDatePicker',
+
+  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/src/components/base/ui/date-picker/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/src/components/base/ui/date-picker/picker/time-select.js

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