element-sim 1.0.0 → 1.0.2

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

@@ -1,186 +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 '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>
+<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-sim/src/utils/date-util';
+  import Locale from 'element-sim/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

@@ -1,43 +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: '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);
-  }
-};
+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: '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

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

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