TimePicker: add arrow-control

examples/components/search.vue

@@ -49,6 +49,10 @@
         border-bottom-right-radius: 4px;
         box-sizing: border-box;
         text-align: right;
+       
+        &:hover {
+          background-color: #dfe4ed;
+        }
         
         img {
           display: inline-block;
@@ -77,6 +81,9 @@
       font-size: 12px;
       margin: 6px 0;
       line-height: 2.4;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 </style>
@@ -126,12 +133,9 @@
               let content = hit._highlightResult.content.value.replace(/\s+/g, ' ');
               const highlightStart = content.indexOf('<span class="algolia-highlight">');
               if (highlightStart > -1) {
-                const highlightEnd = content.lastIndexOf('</span>');
                 const startEllipsis = highlightStart - 15 > 0;
-                const endEllipsis = highlightEnd + 22 < content.length;
                 content = (startEllipsis ? '...' : '') +
-                  content.slice(Math.max(0, highlightStart - 15), Math.min(highlightEnd + 22, content.length)) +
+                  content.slice(Math.max(0, highlightStart - 15), content.length);
-                  (endEllipsis ? '...' : '');
               } else if (content.indexOf('|') > -1) {
                 content = '';
               }

examples/docs/en-US/datetime-picker.md

@@ -245,6 +245,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
 | placeholder | placeholder in non-range mode | string | — | — |
 | start-placeholder | placeholder for the start date in range mode | string | — | — |
 | end-placeholder | placeholder for the end date in range mode | string | — | — |
+| time-arrow-control | whether to pick time using arrow buttons | boolean | — | false |
 | type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
 | format | format of the displayed value in the input box | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
 | align | alignment | left/center/right | left |

examples/docs/en-US/time-picker.md

@@ -42,7 +42,7 @@ Provide a list of fixed time for users to choose.
 
 Can pick an arbitrary time.
 
-:::demo Use `el-time-picker` label, and you can limit the time range by using `selectableRange`.
+:::demo Use `el-time-picker` label, and you can limit the time range by specifying `selectableRange`. By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the `arrow-control` attribute is set.
 
 ```html
 <template>
@@ -53,13 +53,22 @@ Can pick an arbitrary time.
     }"
     placeholder="Arbitrary time">
   </el-time-picker>
+  <el-time-picker
+    arrow-control
+    v-model="value3"
+    :picker-options="{
+      selectableRange: '18:30:00 - 20:30:00'
+    }"
+    placeholder="Arbitrary time">
+  </el-time-picker>
 </template>
 
 <script>
   export default {
     data() {
       return {
-        value2: new Date(2016, 9, 10, 18, 40)
+        value2: new Date(2016, 9, 10, 18, 40),
+        value3: new Date(2016, 9, 10, 18, 40)
       };
     }
   }
@@ -112,12 +121,20 @@ If start time is picked at first, then the end time will change accordingly.
 
 Can pick an arbitrary time range.
 
-:::demo We can pick a time range by adding an `is-range` attribute.
+:::demo We can pick a time range by adding an `is-range` attribute. Also, `arrow-control` is supported in range mode.
 ```html
 <template>
   <el-time-picker
     is-range
-    v-model="value3"
+    v-model="value4"
+    range-separator="To"
+    start-placeholder="Start time"
+    end-placeholder="End time">
+  </el-time-picker>
+  <el-time-picker
+    is-range
+    arrow-control
+    v-model="value5"
     range-separator="To"
     start-placeholder="Start time"
     end-placeholder="End time">
@@ -128,7 +145,8 @@ Can pick an arbitrary time range.
   export default {
     data() {
       return {
-        value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
+        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
       };
     }
   }
@@ -142,7 +160,9 @@ Can pick an arbitrary time range.
       return {
         value1: '',
         value2: new Date(2016, 9, 10, 18, 40),
-        value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value3: new Date(2016, 9, 10, 18, 40),
+        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
         startTime: '',
         endTime: ''
       };
@@ -156,11 +176,13 @@ Can pick an arbitrary time range.
 | readonly | whether DatePicker is read only | boolean | — | false |
 | disabled | whether DatePicker is disabled | boolean | — | false |
 | editable | whether the input is editable | boolean | — | true |
-| clearable | Whether to show clear button | boolean | — | true |
+| clearable | whether to show clear button | boolean | — | true |
 | size | size of Input | string | medium / small / mini | — |
 | placeholder | placeholder in non-range mode | string | — | — |
 | start-placeholder | placeholder for the start time in range mode | string | — | — |
 | end-placeholder | placeholder for the end time in range mode | string | — | — |
+| is-range | whether to pick a time range, only works with `<el-time-picker>` | boolean | — | false |
+| arrow-control | whether to pick time using arrow buttons, only works with `<el-time-picker>` | boolean | — | false |
 | value | value of the picker | Date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
 | align | alignment | left / center / right | left |
 | popper-class | custom class name for TimePicker's dropdown | string | — | — |

examples/docs/zh-CN/datetime-picker.md

@@ -244,6 +244,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
 | placeholder | 非范围选择时的占位内容 | string | — | — |
 | start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
 | end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
+| time-arrow-control | 是否使用箭头进行时间选择 | boolean | — | false |
 | type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
 | format | 显示在输入框中的格式 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
 | align | 对齐方式 | string | left, center, right | left |

examples/docs/zh-CN/time-picker.md

@@ -42,7 +42,7 @@
 
 可以选择任意时间
 
-:::demo 使用 el-time-picker 标签，通过`selectableRange`限制可选时间范围
+:::demo 使用 el-time-picker 标签，通过`selectableRange`限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开`arrow-control`属性则通过界面上的箭头进行选择。
 ```html
 <template>
   <el-time-picker
@@ -52,13 +52,22 @@
     }"
     placeholder="任意时间点">
   </el-time-picker>
+  <el-time-picker
+    arrow-control
+    v-model="value3"
+    :picker-options="{
+      selectableRange: '18:30:00 - 20:30:00'
+    }"
+    placeholder="任意时间点">
+  </el-time-picker>
 </template>
 
 <script>
   export default {
     data() {
       return {
-        value2: new Date(2016, 9, 10, 18, 40)
+        value2: new Date(2016, 9, 10, 18, 40),
+        value3: new Date(2016, 9, 10, 18, 40)
       };
     }
   }
@@ -111,12 +120,21 @@
 
 可选择任意的时间范围
 
-:::demo 添加`is-range`属性即可选择时间范围
+:::demo 添加`is-range`属性即可选择时间范围，同样支持`arrow-control`属性。
 ```html
 <template>
   <el-time-picker
     is-range
-    v-model="value3"
+    v-model="value4"
+    range-separator="至"
+    start-placeholder="开始时间"
+    end-placeholder="结束时间"
+    placeholder="选择时间范围">
+  </el-time-picker>
+  <el-time-picker
+    is-range
+    arrow-control
+    v-model="value5"
     range-separator="至"
     start-placeholder="开始时间"
     end-placeholder="结束时间"
@@ -128,7 +146,8 @@
   export default {
     data() {
       return {
-        value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
+        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
       };
     }
   }
@@ -142,7 +161,9 @@
       return {
         value1: '',
         value2: new Date(2016, 9, 10, 18, 40),
-        value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value3: new Date(2016, 9, 10, 18, 40),
+        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
         startTime: '',
         endTime: ''
       };
@@ -161,6 +182,8 @@
 | placeholder | 非范围选择时的占位内容 | string | — | — |
 | start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
 | end-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
+| is-range | 是否为时间范围选择，仅对`<el-time-picker>`有效 | boolean | — | false |
+| arrow-control | 是否使用箭头进行时间选择，仅对`<el-time-picker>`有效 | boolean | — | false |
 | value | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
 | align | 对齐方式 | string | left / center / right | left |
 | popper-class | TimePicker 下拉框的类名 | string | — | — |

packages/color-picker/src/components/picker-dropdown.vue

@@ -17,8 +17,20 @@
             size="mini">
           </el-input>
         </span>
-        <a href="JavaScript:" class="el-color-dropdown__link-btn" @click="$emit('clear')">{{ t('el.colorpicker.clear') }}</a>
+        <el-button
-        <button class="el-color-dropdown__btn" @click="confirmValue">{{ t('el.colorpicker.confirm') }}</button>
+          size="mini"
+          type="text"
+          class="el-color-dropdown__link-btn"
+          @click="$emit('clear')">
+          {{ t('el.colorpicker.clear') }}
+        </el-button>
+        <el-button
+          plain
+          size="mini"
+          class="el-color-dropdown__btn"
+          @click="confirmValue">
+          {{ t('el.colorpicker.confirm') }}
+        </el-button>
       </div>
     </div>
   </transition>

packages/date-picker/src/basic/time-spinner.vue

@@ -1,66 +1,119 @@
 <template>
   <div class="el-time-spinner" :class="{ 'has-seconds': showSeconds }">
-    <el-scrollbar
+    <template v-if="!arrowControl">
-      @mouseenter.native="emitSelectRange('hours')"
+      <el-scrollbar
-      class="el-time-spinner__wrapper"
+        @mouseenter.native="emitSelectRange('hours')"
-      wrap-style="max-height: inherit;"
+        class="el-time-spinner__wrapper"
-      view-class="el-time-spinner__list"
+        wrap-style="max-height: inherit;"
-      noresize
+        view-class="el-time-spinner__list"
-      tag="ul"
+        noresize
-      ref="hours">
+        tag="ul"
-      <li
+        ref="hours">
-        @click="handleClick('hours', { value: hour, disabled: disabled })"
+        <li
-        v-for="(disabled, hour) in hoursList"
+          @click="handleClick('hours', { value: hour, disabled: disabled })"
-        track-by="hour"
+          v-for="(disabled, hour) in hoursList"
-        class="el-time-spinner__item"
+          track-by="hour"
-        :class="{ 'active': hour === hours, 'disabled': disabled }">{{ ('0' + hour).slice(-2) }}</li>
+          class="el-time-spinner__item"
-    </el-scrollbar>
+          :class="{ 'active': hour === hours, 'disabled': disabled }">{{ ('0' + hour).slice(-2) }}</li>
-    <el-scrollbar
+      </el-scrollbar>
-      @mouseenter.native="emitSelectRange('minutes')"
+      <el-scrollbar
-      class="el-time-spinner__wrapper"
+        @mouseenter.native="emitSelectRange('minutes')"
-      wrap-style="max-height: inherit;"
+        class="el-time-spinner__wrapper"
-      view-class="el-time-spinner__list"
+        wrap-style="max-height: inherit;"
-      noresize
+        view-class="el-time-spinner__list"
-      tag="ul"
+        noresize
-      ref="minutes">
+        tag="ul"
-      <li
+        ref="minutes">
-        @click="handleClick('minutes', { value: key, disabled: false })"
+        <li
-        v-for="(minute, key) in 60"
+          @click="handleClick('minutes', { value: key, disabled: false })"
-        class="el-time-spinner__item"
+          v-for="(minute, key) in 60"
-        :class="{ 'active': key === minutes }">{{ ('0' + key).slice(-2) }}</li>
+          class="el-time-spinner__item"
-    </el-scrollbar>
+          :class="{ 'active': key === minutes }">{{ ('0' + key).slice(-2) }}</li>
-    <el-scrollbar
+      </el-scrollbar>
-      v-show="showSeconds"
+      <el-scrollbar
-      @mouseenter.native="emitSelectRange('seconds')"
+        v-show="showSeconds"
-      class="el-time-spinner__wrapper"
+        @mouseenter.native="emitSelectRange('seconds')"
-      wrap-style="max-height: inherit;"
+        class="el-time-spinner__wrapper"
-      view-class="el-time-spinner__list"
+        wrap-style="max-height: inherit;"
-      noresize
+        view-class="el-time-spinner__list"
-      tag="ul"
+        noresize
-      ref="seconds">
+        tag="ul"
-      <li
+        ref="seconds">
-        @click="handleClick('seconds', { value: key, disabled: false })"
+        <li
-        v-for="(second, key) in 60"
+          @click="handleClick('seconds', { value: key, disabled: false })"
-        class="el-time-spinner__item"
+          v-for="(second, key) in 60"
-        :class="{ 'active': key === seconds }">{{ ('0' + key).slice(-2) }}</li>
+          class="el-time-spinner__item"
-    </el-scrollbar>
+          :class="{ 'active': key === seconds }">{{ ('0' + key).slice(-2) }}</li>
+      </el-scrollbar>
+    </template>
+    <template v-if="arrowControl">
+      <div
+        @mouseenter="emitSelectRange('hours')"
+        class="el-time-spinner__wrapper is-arrow">
+        <i v-repeat-click="decrease" class="el-time-spinner__arrow el-icon-arrow-up"></i>
+        <i v-repeat-click="increase" class="el-time-spinner__arrow el-icon-arrow-down"></i>
+        <ul class="el-time-spinner__list" ref="hours">
+          <li
+            class="el-time-spinner__item"
+            :class="{ 'active': hour === hours, 'disabled': hoursList[hour] }"
+            v-for="hour in arrowHourList">
+            {{ hour === undefined ? '' : ('0' + hour).slice(-2) }}
+          </li>
+        </ul>
+      </div>
+      <div
+        @mouseenter="emitSelectRange('minutes')"
+        class="el-time-spinner__wrapper is-arrow">
+        <i v-repeat-click="decrease" class="el-time-spinner__arrow el-icon-arrow-up"></i>
+        <i v-repeat-click="increase" class="el-time-spinner__arrow el-icon-arrow-down"></i>
+        <ul class="el-time-spinner__list" ref="minutes">
+          <li
+            class="el-time-spinner__item"
+            :class="{ 'active': minute === minutes }"
+            v-for="minute in arrowMinuteList">
+            {{ minute === undefined ? '' : ('0' + minute).slice(-2) }}
+          </li>
+        </ul>
+      </div>
+      <div
+        @mouseenter="emitSelectRange('seconds')"
+        class="el-time-spinner__wrapper is-arrow"
+        v-if="showSeconds">
+        <i v-repeat-click="decrease" class="el-time-spinner__arrow el-icon-arrow-up"></i>
+        <i v-repeat-click="increase" class="el-time-spinner__arrow el-icon-arrow-down"></i>
+        <ul class="el-time-spinner__list" ref="seconds">
+          <li
+            class="el-time-spinner__item"
+            :class="{ 'active': second === seconds }"
+            v-for="second in arrowSecondList">
+            {{ second === undefined ? '' : ('0' + second).slice(-2) }}
+          </li>
+        </ul>
+      </div>
+    </template>
   </div>
 </template>
 
 <script type="text/babel">
   import { getRangeHours, modifyTime } from '../util';
   import ElScrollbar from 'element-ui/packages/scrollbar';
+  import RepeatClick from 'element-ui/src/directives/repeat-click';
 
   export default {
     components: { ElScrollbar },
 
+    directives: {
+      repeatClick: RepeatClick
+    },
+
     props: {
       date: {},
       defaultValue: {},  // reserved for future use
       showSeconds: {
         type: Boolean,
         default: true
-      }
+      },
+      arrowControl: Boolean
     },
 
     computed: {
@@ -75,6 +128,30 @@
       },
       hoursList() {
         return getRangeHours(this.selectableRange);
+      },
+      arrowHourList() {
+        const hours = this.hours;
+        return [
+          hours > 0 ? hours - 1 : undefined,
+          hours,
+          hours < 23 ? hours + 1 : undefined
+        ];
+      },
+      arrowMinuteList() {
+        const minutes = this.minutes;
+        return [
+          minutes > 0 ? minutes - 1 : undefined,
+          minutes,
+          minutes < 59 ? minutes + 1 : undefined
+        ];
+      },
+      arrowSecondList() {
+        const seconds = this.seconds;
+        return [
+          seconds > 0 ? seconds - 1 : undefined,
+          seconds,
+          seconds < 59 ? seconds + 1 : undefined
+        ];
       }
     },
 
@@ -87,11 +164,19 @@
 
     mounted() {
       this.$nextTick(() => {
-        this.bindScrollEvent();
+        !this.arrowControl && this.bindScrollEvent();
       });
     },
 
     methods: {
+      increase() {
+        this.scrollDown(1);
+      },
+
+      decrease() {
+        this.scrollDown(-1);
+      },
+
       modifyDateField(type, value) {
         switch (type) {
           case 'hours': this.$emit('change', modifyTime(this.date, value, this.minutes, this.seconds)); break;
@@ -153,6 +238,7 @@
       },
 
       adjustSpinner(type, value) {
+        if (this.arrowControl) return;
         const el = this.$refs[type].wrap;
         if (el) {
           el.scrollTop = Math.max(0, (value - 2.5) * 32 + 80);

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

@@ -40,6 +40,7 @@
                 <time-picker
                   ref="minTimePicker"
                   @pick="handleMinTimePick"
+                  :time-arrow-control="arrowControl"
                   :visible="minTimePickerVisible"
                   @mounted="$refs.minTimePicker.format=timeFormat">
                 </time-picker>
@@ -70,6 +71,7 @@
                 <time-picker
                   ref="maxTimePicker"
                   @pick="handleMaxTimePick"
+                  :time-arrow-control="arrowControl"
                   :visible="maxTimePickerVisible"
                   @mounted="$refs.maxTimePicker.format=timeFormat">
                 </time-picker>
@@ -273,7 +275,8 @@
         firstDayOfWeek: 7,
         minTimePickerVisible: false,
         maxTimePickerVisible: false,
-        format: ''
+        format: '',
+        arrowControl: false
       };
     },
 

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

@@ -36,6 +36,7 @@
               <time-picker
                 ref="timepicker"
                 :date="date"
+                :time-arrow-control="arrowControl"
                 @pick="handleTimePick"
                 :visible="timePickerVisible"
                 @mounted="$refs.timepicker.format=timeFormat">
@@ -439,7 +440,8 @@
         firstDayOfWeek: 7,
         showWeekNumber: false,
         timePickerVisible: false,
-        format: ''
+        format: '',
+        arrowControl: false
       };
     },
 

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

@@ -10,12 +10,13 @@
         <div class="el-time-range-picker__cell">
           <div class="el-time-range-picker__header">{{ t('el.datepicker.startTime') }}</div>
           <div
-            :class="{ 'has-seconds': showSeconds }"
+            :class="{ 'has-seconds': showSeconds, 'is-arrow': arrowControl }"
             class="el-time-range-picker__body el-time-panel__content">
             <time-spinner
               ref="minSpinner"
               :show-seconds="showSeconds"
               @change="handleMinChange"
+              :arrow-control="arrowControl"
               @select-range="setMinSelectionRange"
               :date="minDate">
             </time-spinner>
@@ -24,12 +25,13 @@
         <div class="el-time-range-picker__cell">
           <div class="el-time-range-picker__header">{{ t('el.datepicker.endTime') }}</div>
           <div
-            :class="{ 'has-seconds': showSeconds }"
+            :class="{ 'has-seconds': showSeconds, 'is-arrow': arrowControl }"
             class="el-time-range-picker__body el-time-panel__content">
             <time-spinner
               ref="maxSpinner"
               :show-seconds="showSeconds"
               @change="handleMaxChange"
+              :arrow-control="arrowControl"
               @select-range="setMaxSelectionRange"
               :date="maxDate">
             </time-spinner>
@@ -111,7 +113,8 @@
         defaultValue: null,
         format: 'HH:mm:ss',
         visible: false,
-        selectionRange: [0, 2]
+        selectionRange: [0, 2],
+        arrowControl: false
       };
     },
 

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

@@ -8,6 +8,7 @@
         <time-spinner
           ref="spinner"
           @change="handleChange"
+          :arrow-control="useArrow"
           :show-seconds="showSeconds"
           @select-range="setSelectionRange"
           :date="date">
@@ -31,16 +32,18 @@
 <script type="text/babel">
   import { limitTimeRange, isDate, clearMilliseconds, timeWithinRange } from '../util';
   import Locale from 'element-ui/src/mixins/locale';
+  import TimeSpinner from '../basic/time-spinner';
 
   export default {
     mixins: [Locale],
 
     components: {
-      TimeSpinner: require('../basic/time-spinner')
+      TimeSpinner
     },
 
     props: {
-      visible: Boolean
+      visible: Boolean,
+      timeArrowControl: Boolean
     },
 
     watch: {
@@ -86,13 +89,17 @@
         oldValue: new Date(),
         selectableRange: [],
         selectionRange: [0, 2],
-        disabled: false
+        disabled: false,
+        arrowControl: false
       };
     },
 
     computed: {
       showSeconds() {
         return (this.format || '').indexOf('ss') !== -1;
+      },
+      useArrow() {
+        return this.arrowControl || this.timeArrowControl || false;
       }
     },
 

packages/date-picker/src/picker.vue

@@ -662,6 +662,7 @@ export default {
       this.picker.width = this.reference.getBoundingClientRect().width;
       this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';
       this.picker.selectionMode = this.selectionMode;
+      this.picker.arrowControl = this.arrowControl || this.timeArrowControl || false;
       if (this.format) {
         this.picker.format = this.format;
       }

packages/date-picker/src/picker/date-picker.js

@@ -18,7 +18,8 @@ export default {
     type: {
       type: String,
       default: 'date'
-    }
+    },
+    timeArrowControl: Boolean
   },
 
   watch: {

packages/date-picker/src/picker/time-picker.js

@@ -8,7 +8,8 @@ export default {
   name: 'ElTimePicker',
 
   props: {
-    isRange: Boolean
+    isRange: Boolean,
+    arrowControl: Boolean
   },
 
   data() {

packages/input-number/src/input-number.vue

@@ -53,35 +53,15 @@
 </template>
 <script>
   import ElInput from 'element-ui/packages/input';
-  import { once, on } from 'element-ui/src/utils/dom';
   import debounce from 'throttle-debounce/debounce';
   import Focus from 'element-ui/src/mixins/focus';
+  import RepeatClick from 'element-ui/src/directives/repeat-click';
 
   export default {
     name: 'ElInputNumber',
     mixins: [Focus('input')],
     directives: {
-      repeatClick: {
+      repeatClick: RepeatClick
-        bind(el, binding, vnode) {
-          let interval = null;
-          let startTime;
-          const handler = () => vnode.context[binding.expression].apply();
-          const clear = () => {
-            if (new Date() - startTime < 100) {
-              handler();
-            }
-            clearInterval(interval);
-            interval = null;
-          };
-
-          on(el, 'mousedown', () => {
-            startTime = new Date();
-            once(document, 'mouseup', clear);
-            clearInterval(interval);
-            interval = setInterval(handler, 100);
-          });
-        }
-      }
     },
     components: {
       ElInput

packages/loading/src/directive.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
+import Loading from './loading.vue';
 import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
-const Mask = Vue.extend(require('./loading.vue'));
+const Mask = Vue.extend(Loading);
 
 exports.install = Vue => {
   if (Vue.prototype.$isServer) return;

packages/message/src/main.js

@@ -1,7 +1,8 @@
 import Vue from 'vue';
+import Main from './main.vue';
 import { PopupManager } from 'element-ui/src/utils/popup';
 import { isVNode } from 'element-ui/src/utils/vdom';
-let MessageConstructor = Vue.extend(require('./main.vue'));
+let MessageConstructor = Vue.extend(Main);
 
 let instance;
 let instances = [];

packages/notification/src/main.js

@@ -1,7 +1,8 @@
 import Vue from 'vue';
+import Main from './main.vue';
 import { PopupManager } from 'element-ui/src/utils/popup';
 import { isVNode } from 'element-ui/src/utils/vdom';
-const NotificationConstructor = Vue.extend(require('./main.vue'));
+const NotificationConstructor = Vue.extend(Main);
 
 let instance;
 let instances = [];

packages/theme-chalk/src/breadcrumb.scss

@@ -40,7 +40,7 @@
       .el-breadcrumb__inner a {
         &, &:hover {
           font-weight: normal;
-          color: $--font-color-base;
+          color: $--color-text-regular;
           cursor: text;
         }
       }

packages/theme-chalk/src/common/var.scss

@@ -83,7 +83,6 @@ $--fill-base: $--color-white;
 $--font-size-base: 14px;
 $--font-size-small: 13px;
 $--font-size-large: 18px;
-$--font-color-base: #5a5e66;
 $--font-color-disabled-base: #bbb;
 $--font-weight-primary: 500;
 $--font-line-height-primary: 24px;
@@ -216,7 +215,7 @@ $--select-tag-height: 24px;
 $--select-tag-color: $--color-white;
 $--select-tag-background: $--color-primary;
 
-$--select-option-color: $--font-color-base;
+$--select-option-color: $--color-text-regular;
 $--select-option-disabled-color: $--color-text-placeholder;
 $--select-option-disabled-background: $--color-white;
 $--select-option-height: 34px;
@@ -309,7 +308,7 @@ $--notification-danger-color: $--color-danger;
 /* Input
 -------------------------- */
 $--input-font-size: $--font-size-base;
-$--input-color: $--font-color-base;
+$--input-color: $--color-text-regular;
 $--input-width: 140px;
 $--input-height: 40px;
 $--input-border: $--border-base;
@@ -350,10 +349,10 @@ $--cascader-menu-radius: $--border-radius-base;
 $--cascader-menu-border: $--border-base;
 $--cascader-menu-border-color: $--border-color-base;
 $--cascader-menu-border-width: $--border-width-base;
-$--cascader-menu-color: $--font-color-base;
+$--cascader-menu-color: $--color-text-regular;
 $--cascader-menu-option-color-active: $--color-text-secondary;
 $--cascader-menu-option-fill-active: rgba($--color-text-secondary, 0.12);
-$--cascader-menu-option-color-hover: $--font-color-base;
+$--cascader-menu-option-color-hover: $--color-text-regular;
 $--cascader-menu-option-fill-hover: rgba($--color-text-primary, 0.06);
 $--cascader-menu-option-color-disabled: #999;
 $--cascader-menu-option-fill-disabled: rgba($--color-black, 0.06);
@@ -377,8 +376,8 @@ $--group-title-width: 66px;
 $--tab-font-size: $--font-size-base;
 $--tab-border-line: 1px solid #e4e4e4;
 $--tab-header-color-active: $--color-text-secondary;
-$--tab-header-color-hover: $--font-color-base;
+$--tab-header-color-hover: $--color-text-regular;
-$--tab-header-color: $--font-color-base;
+$--tab-header-color: $--color-text-regular;
 $--tab-header-fill-active: rgba($--color-black, 0.06);
 $--tab-header-fill-hover: rgba($--color-black, 0.06);
 $--tab-vertical-header-width: 90px;

packages/theme-chalk/src/date-picker/time-spinner.scss

@@ -22,6 +22,57 @@
     & .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
       padding-bottom: 15px;
     }
+
+    @include when(arrow) {
+      box-sizing: border-box;
+      text-align: center;
+      overflow: hidden;
+
+      .el-time-spinner__list {
+        transform: translateY(-32px);
+      }
+
+      .el-time-spinner__item:hover:not(.disabled):not(.active) {
+        background: $--color-white;
+        cursor: default;
+      }
+    }
+  }
+
+  @include e(arrow) {
+    font-size: 12px;
+    color: $--color-text-secondary;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    z-index: $--index-normal;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    cursor: pointer;
+
+    &:hover {
+      color: $--color-primary;
+    }
+
+    &.el-icon-arrow-up {
+      top: 10px;
+    }
+
+    &.el-icon-arrow-down {
+      bottom: 10px;
+    }
+  }
+
+  @include e(input) {
+    &.el-input {
+      width: 70%;
+
+      .el-input__inner {
+        padding: 0;
+        text-align: center;
+      }
+    }
   }
 
   @include e(list) {
@@ -43,7 +94,7 @@
     height: 32px;
     line-height: 32px;
     font-size: 12px;
-    color: $--font-color-base;
+    color: $--color-text-regular;
 
     &:hover:not(.disabled):not(.active) {
       background: $--background-color-base;

packages/theme-chalk/src/dropdown.scss

@@ -64,7 +64,7 @@
     padding: 0 20px;
     margin: 0;
     font-size: $--font-size-base;
-    color: $--font-color-base;
+    color: $--color-text-regular;
     cursor: pointer;
 
     &:not(.is-disabled):hover {

packages/theme-chalk/src/reset.scss

@@ -23,7 +23,7 @@ a {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  color: $--font-color-base;
+  color: $--color-text-regular;
   font-weight: inherit;
 
   &:first-child {

packages/tree/src/tree.vue

@@ -16,6 +16,7 @@
 
 <script>
   import TreeStore from './model/tree-store';
+  import ElTreeNode from './tree-node.vue';
   import {t} from 'element-ui/src/locale';
   import emitter from 'element-ui/src/mixins/emitter';
 
@@ -25,7 +26,7 @@
     mixins: [emitter],
 
     components: {
-      ElTreeNode: require('./tree-node.vue')
+      ElTreeNode
     },
 
     data() {

src/directives/repeat-click.js

@@ -0,0 +1,23 @@
+import { once, on } from 'element-ui/src/utils/dom';
+
+export default {
+  bind(el, binding, vnode) {
+    let interval = null;
+    let startTime;
+    const handler = () => vnode.context[binding.expression].apply();
+    const clear = () => {
+      if (new Date() - startTime < 100) {
+        handler();
+      }
+      clearInterval(interval);
+      interval = null;
+    };
+
+    on(el, 'mousedown', () => {
+      startTime = new Date();
+      once(document, 'mouseup', clear);
+      clearInterval(interval);
+      interval = setInterval(handler, 100);
+    });
+  }
+};