meixioacomponent 1.1.49 → 2.0.1

package/packages/components/base/elDatePicker/panel/time-select.vue

@@ -1,178 +0,0 @@
-<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"
-          :key="item.value"
-          @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/components/base/elDatePicker/panel/time.vue

@@ -1,186 +0,0 @@
-<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 'element-ui/src/utils/date-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/components/base/elDatePicker/picker/date-picker.js

@@ -1,55 +0,0 @@
-
-
-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 {
-
-    data(){
-        return{
-            mxType:'date'
-        }
-    },
-    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() {
-        if(this.type==='date'){
-            this.mxType = 'datetime'
-        }else if(this.type==='daterange'){
-            this.mxType ='datetimerange'
-        }
-        this.panel = getPanel(this.mxType);
-    }
-};

package/packages/components/base/elDatePicker/picker/time-picker.js

@@ -1,39 +0,0 @@
-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/components/base/elDatePicker/picker/time-select.js

@@ -1,21 +0,0 @@
-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;
-  }
-};