TimePicker: add chalk theme (#7102)

* TimePicker: add chalk theme * minor style fixes

TimePicker: add chalk theme (#7102)
* TimePicker: add chalk theme * minor style fixes
ad88dd2e · 杨奕 · GitHub · 2a0a4bc6 · ad88dd2e · ad88dd2e
Commit ad88dd2e authored Sep 19, 2017 by 杨奕 Committed by GitHub Sep 19, 2017
31 changed files
--- a/examples/docs/en-US/form.md
+++ b/examples/docs/en-US/form.md
@@ -512,11 +512,11 @@ Form component allows you to verify your data, helping you find and correct erro
 ### Custom validation rules
-This example shows how to customize your own validation rules to finish a two-factor password verification. And you can you `status-feedback` to add validate status icon。
+This example shows how to customize your own validation rules to finish a two-factor password verification.
-:::demo
+:::demo Here we use `status-icon` to reflect validation result as an icon.
 ```html
-<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
+<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
  <el-form-item label="Password" prop="pass">
    <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
  </el-form-item>
@@ -750,6 +750,8 @@ When an `el-form-item` is nested in another `el-form-item`, its label width will
 | label-width | width of label, and all its direct child form items will inherit this value | string | — | — |
 | label-suffix | suffix of the label | string | — | — |
 | show-message  | whether to show the error message | boolean | — | true |
+| inline-message  | whether to display the error message inline with the form item | boolean | — | false |
+| status-icon  | whether to display an icon indicating the validation result | boolean | — | false |
 ### Form Methods
@@ -772,9 +774,8 @@ When an `el-form-item` is nested in another `el-form-item`, its label width will
 | show-message  | whether to show the error message | boolean | — | true |
 | inline-message  | inline style validate message | boolean | — | false |
 ### Form-Item Slot
-| name | Description |
+| Name | Description |
 |------|--------|
 | — | content of Form Item |
 | label | content of label |
--- a/examples/docs/en-US/input.md
+++ b/examples/docs/en-US/input.md
@@ -193,30 +193,30 @@ export default {
 Add an icon to indicate input type.
-::: demo 可以通过 `suffix-icon` 和 `prefix-icon` 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
+::: demo To add icons in Input, you can simply use `prefix-icon` and `suffix-icon` attributes. Also, the `prefix` and `suffix` named slots works as well.
 ```html
 <div class="demo-input-suffix">
-  属性方式：
+  Using attributes
  <el-input
-    placeholder="请选择日期"
+    placeholder="Pick a date"
-    suffix-icon="date"
+    suffix-icon="el-icon-date"
    v-model="input2">
  </el-input>
  <el-input
-    placeholder="请输入内容"
+    placeholder="Type something"
-    prefix-icon="search"
+    prefix-icon="el-icon-search"
    v-model="input21">
  </el-input>
 </div>
 <div class="demo-input-suffix">
-  slot 方式：
+  Using slots
  <el-input
-    placeholder="请选择日期"
+    placeholder="Pick a date"
    v-model="input22">
    <i slot="suffix" class="el-input__icon el-icon-date"></i>
  </el-input>
  <el-input
-    placeholder="请输入内容"
+    placeholder="Type something"
    v-model="input23">
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
  </el-input>
@@ -351,11 +351,11 @@ export default {
 ```html
 <div class="demo-input-size">
  <el-input
-    size="large"
    placeholder="Please Input"
    v-model="input6">
  </el-input>
  <el-input
+    size="medium"
    placeholder="Please Input"
    v-model="input7">
  </el-input>
@@ -623,7 +623,8 @@ Search data from server-side.
 |placeholder| placeholder of Input| string | — | — |
 |disabled | whether Input is disabled | boolean | — | false |
 |size | size of Input, works when `type` is not 'textarea' | string | large/small/mini | — |
-|icon | icon name | string | — | — |
+| prefix-icon   | prefix icon class  | string          | — | — |
+| suffix-icon   | suffix icon class  | string          | — | — |
 |rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 |
 |autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }  | boolean/object | — | false |
 |auto-complete | same as `auto-complete` in native input | string | on/off | off |
@@ -637,11 +638,19 @@ Search data from server-side.
 |form | same as `form` in native input | string | — | — |
 | on-icon-click | hook function when clicking on the input icon | function | — | — |
+### Input slot
+| Name | Description |
+|------|--------|
+| prefix | content as Input prefix |
+| suffix | content as Input suffix |
+| prepend | content to prepend before Input |
+| append | content to append after Input |
 ### Input Events
 | Event Name | Description | Parameters |
 |----| ----| ----|
-|click | triggers when the icon inside Input is clicked | (event: Event) |
 | blur | triggers when Input blurs | (event: Event) |
 | focus | triggers when Input focuses | (event: Event) |
 | change | triggers when the icon inside Input value change | (value: string \| number) |

--- a/examples/docs/en-US/time-picker.md
+++ b/examples/docs/en-US/time-picker.md
@@ -155,10 +155,10 @@ Can pick an arbitrary time range.
 | disabled | whether DatePicker is disabled | boolean | — | false |
 | editable | whether the input is editable | boolean | — | true |
 | clearable | Whether to show clear button | boolean | — | true |
-| size | size of Input | string | large/small/mini | — |
+| size | size of Input | string | medium / small / mini | — |
 | placeholder | placeholder | string | — | — |
 | 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 |
+| align | alignment | left / center / right | left |
 | popper-class | custom class name for TimePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |
 |name | same as `name` in native input | string | — | — |
@@ -175,7 +175,7 @@ Can pick an arbitrary time range.
 ### Time Picker Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| selectableRange | available time range, e.g.`'18:30:00 - 20:30:00'`or`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
+| selectableRange | available time range, e.g.`'18:30:00 - 20:30:00'`or`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
 | format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |

--- a/examples/docs/zh-CN/form.md
+++ b/examples/docs/zh-CN/form.md
@@ -393,7 +393,7 @@
 ::: demo Form 组件提供了表单验证的功能，只需要通过 `rule` 属性传入约定的验证规则，并 Form-Item 的 `prop` 属性设置为需校验的字段名即可。校验规则参见 [async-validator](https://github.com/yiminghe/async-validator)
 ```html
-<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" message-position="right">
+<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
@@ -503,18 +503,18 @@
 ### 自定义校验规则
-这个例子中展示了如何使用自定义验证规则来完成密码的二次验证，并且你可以通过 `status-feedback` 来给输入框添加反馈图标。
+这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。
-::: demo
+::: demo 本例还使用`status-icon`属性为输入框添加了表示校验结果的反馈图标。
 ```html
-<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
+<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
-  <el-form-item status-feedback label="密码" prop="pass">
+  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
  </el-form-item>
-  <el-form-item status-feedback label="确认密码" prop="checkPass">
+  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
  </el-form-item>
-  <el-form-item status-feedback label="年龄" prop="age">
+  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="ruleForm2.age"></el-input>
  </el-form-item>
  <el-form-item>
@@ -739,6 +739,8 @@
 | label-width | 表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值 | string | — | — |
 | label-suffix | 表单域标签的后缀 | string | — | — |
 | show-message  | 是否显示校验错误信息 | boolean | — | true |
+| inline-message  | 是否以行内形式展示校验信息 | boolean | — | false |
+| status-icon  | 是否在输入框中显示校验结果反馈图标 | boolean | — | false |
 ### Form Methods

--- a/examples/docs/zh-CN/input.md
+++ b/examples/docs/zh-CN/input.md
@@ -239,18 +239,18 @@ export default {
 带有图标标记输入类型
-::: demo 可以通过 `suffix-icon` 和 `prefix-icon` 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
+::: demo 可以通过 `prefix-icon` 和 `suffix-icon` 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
 ```html
 <div class="demo-input-suffix">
  属性方式：
  <el-input
    placeholder="请选择日期"
-    suffix-icon="date"
+    suffix-icon="el-icon-date"
    v-model="input2">
  </el-input>
  <el-input
    placeholder="请输入内容"
-    prefix-icon="search"
+    prefix-icon="el-icon-search"
    v-model="input21">
  </el-input>
 </div>
@@ -393,22 +393,26 @@ export default {
 ```html
 <div class="demo-input-size">
  <el-input
-    size="large"
    placeholder="请输入内容"
+    suffix-icon="el-icon-date"
    v-model="input6">
  </el-input>
  <el-input
+    size="medium"
    placeholder="请输入内容"
+    suffix-icon="el-icon-date"
    v-model="input7">
  </el-input>
  <el-input
    size="small"
    placeholder="请输入内容"
+    suffix-icon="el-icon-date"
    v-model="input8">
  </el-input>
  <el-input
    size="mini"
    placeholder="请输入内容"
+    suffix-icon="el-icon-date"
    v-model="input9">
  </el-input>
 </div>
@@ -792,7 +796,8 @@ export default {
 | placeholder   | 输入框占位文本    | string          | — | — |
 | disabled      | 禁用            | boolean         | — | false   |
 | size          | 输入框尺寸，只在 `type!="textarea"` 时有效      | string          | large, small, mini  | — |
-| icon          | 输入框尾部图标    | string          | — | — |
+| prefix-icon   | 输入框头部图标    | string          | — | — |
+| suffix-icon   | 输入框尾部图标    | string          | — | — |
 | rows          | 输入框行数，只对 `type="textarea"` 有效  |  number | — |  2   |
 | autosize      | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }  |  boolean/object | — |  false   |
 | auto-complete | 原生属性，自动补全 | string | on, off | off |
@@ -804,12 +809,18 @@ export default {
 | resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | — |
 | autofocus | 原生属性，自动获取焦点 | boolean | true, false | false |
 | form | 原生属性 | string | — | — |
-| on-icon-click | 点击 Input 内的图标的钩子函数 | function | — | — |
+### Input slot
+| name | 说明 |
+|------|--------|
+| prefix | 输入框头部内容 |
+| suffix | 输入框尾部内容 |
+| prepend | 输入框前置内容 |
+| append | 输入框后置内容 |
 ### Input Events
 | 事件名称 | 说明 | 回调参数 |
 |---------|--------|---------|
-| click | 点击 Input 内的图标时触发 | (event: Event) |
 | blur | 在 Input 失去焦点时触发 | (event: Event) |
 | focus | 在 Input 获得焦点时触发 | (event: Event) |
 | change | 在 Input 值改变时触发 | (value: string \| number) |

--- a/examples/docs/zh-CN/time-picker.md
+++ b/examples/docs/zh-CN/time-picker.md
@@ -154,10 +154,10 @@
 | disabled | 禁用 | boolean | — | false |
 | editable | 文本框可输入 | boolean | — | true |
 | clearable | 是否显示清除按钮 | boolean | — | true |
-| size          | 输入框尺寸     | string          | large, small, mini  | — |
+| size          | 输入框尺寸     | string          | medium / small / mini  | — |
 | placeholder | 占位内容 | string | — | — |
-| value | 绑定值 | TimePicker: DateTimeSelect: String | — | — |
+| value | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
-| align | 对齐方式 | string | left, center, right | left |
+| align | 对齐方式 | string | left / center / right | left |
 | popper-class | TimePicker 下拉框的类名 | string | — | — |
 | picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
 | name | 原生属性 | string | — | — |
@@ -174,11 +174,11 @@
 ### Time Picker Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| selectableRange | 可选时间段，例如`'18:30:00 - 20:30:00'`或者传入数组`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
+| selectableRange | 可选时间段，例如`'18:30:00 - 20:30:00'`或者传入数组`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
 | format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss` | 'HH:mm:ss' |
 ### Events
-| Event Name | Description | Parameters |
+| 事件名 | 说明 | 参数 |
 |---------|--------|---------|
 | change | 当 input 的值改变时触发，返回值和文本框一致 | formatted value |
 | blur | 当 input 失去焦点时触发 | (event: Event) |

--- a/packages/color-picker/src/main.vue
+++ b/packages/color-picker/src/main.vue
@@ -15,7 +15,7 @@
          }"></span>
        <span class="el-color-picker__empty el-icon-close" v-if="!value && !showPanelColor"></span>
      </span>
-      <span class="el-color-picker__icon el-icon-caret-bottom" v-show="value || showPanelColor"></span>
+      <span class="el-color-picker__icon el-icon-arrow-down" v-show="value || showPanelColor"></span>
    </div>
    <picker-dropdown
       ref="dropdown"

--- a/packages/date-picker/src/basic/time-spinner.vue
+++ b/packages/date-picker/src/basic/time-spinner.vue
@@ -13,8 +13,7 @@
        v-for="(disabled, hour) in hoursList"
        track-by="hour"
        class="el-time-spinner__item"
-        :class="{ 'active': hour === hours, 'disabled': disabled }"
+        :class="{ 'active': hour === hours, 'disabled': disabled }">{{ ('0' + hour).slice(-2) }}</li>
-        v-text="hour"></li>
    </el-scrollbar>
    <el-scrollbar
      @mouseenter.native="emitSelectRange('minutes')"
@@ -28,8 +27,7 @@
        @click="handleClick('minutes', key, true)"
        v-for="(minute, key) in 60"
        class="el-time-spinner__item"
-        :class="{ 'active': key === minutes }"
+        :class="{ 'active': key === minutes }">{{ ('0' + key).slice(-2) }}</li>
-        v-text="key"></li>
    </el-scrollbar>
    <el-scrollbar
      v-show="showSeconds"
@@ -44,8 +42,7 @@
        @click="handleClick('seconds', key, true)"
        v-for="(second, key) in 60"
        class="el-time-spinner__item"
-        :class="{ 'active': key === seconds }"
+        :class="{ 'active': key === seconds }">{{ ('0' + key).slice(-2) }}</li>
-        v-text="key"></li>
    </el-scrollbar>
  </div>
 </template>
@@ -85,7 +82,7 @@
        if (!(newVal >= 0 && newVal <= 23)) {
          this.hoursPrivate = oldVal;
        }
-        this.ajustElTop('hour', newVal);
+        this.adjustElTop('hour', newVal);
        this.$emit('change', { hours: newVal });
      },
@@ -93,7 +90,7 @@
        if (!(newVal >= 0 && newVal <= 59)) {
          this.minutesPrivate = oldVal;
        }
-        this.ajustElTop('minute', newVal);
+        this.adjustElTop('minute', newVal);
        this.$emit('change', { minutes: newVal });
      },
@@ -101,7 +98,7 @@
        if (!(newVal >= 0 && newVal <= 59)) {
          this.secondsPrivate = oldVal;
        }
-        this.ajustElTop('second', newVal);
+        this.adjustElTop('second', newVal);
        this.$emit('change', { seconds: newVal });
      }
    },
@@ -135,7 +132,7 @@
    },
    created() {
-      this.debounceAjustElTop = debounce(100, type => this.ajustElTop(type, this[`${type}s`]));
+      this.debounceAdjustElTop = debounce(200, type => this.adjustElTop(type, this[`${type}s`]));
    },
    mounted() {
@@ -168,7 +165,9 @@
      bindScrollEvent() {
        const bindFuntion = (type) => {
-          this[`${type}El`].onscroll = (e) => this.handleScroll(type, e);
+          this[`${type}El`].onscroll = (e) => {
+            this.handleScroll(type, e);
+          };
        };
        bindFuntion('hour');
        bindFuntion('minute');
@@ -176,19 +175,19 @@
      },
      handleScroll(type) {
-        const ajust = {};
+        const adjust = {};
-        ajust[`${type}s`] = Math.min(Math.floor((this[`${type}El`].scrollTop - 80) / 32 + 3), (`${type}` === 'hour' ? 23 : 59));
+        adjust[`${type}s`] = Math.min(Math.floor((this[`${type}El`].scrollTop - 80) / 32 + 3), (`${type}` === 'hour' ? 23 : 59));
-        this.debounceAjustElTop(type);
+        this.debounceAdjustElTop(type);
-        this.$emit('change', ajust);
+        this.$emit('change', adjust);
      },
-      ajustScrollTop() {
+      adjustScrollTop() {
-        this.ajustElTop('hour', this.hours);
+        this.adjustElTop('hour', this.hours);
-        this.ajustElTop('minute', this.minutes);
+        this.adjustElTop('minute', this.minutes);
-        this.ajustElTop('second', this.seconds);
+        this.adjustElTop('second', this.seconds);
      },
-      ajustElTop(type, value) {
+      adjustElTop(type, value) {
        this[`${type}El`].scrollTop = Math.max(0, (value - 2.5) * 32 + 80);
      },
@@ -218,7 +217,7 @@
        }
        this.$emit('change', { [label]: now });
-        this.ajustElTop(label.slice(0, -1), now);
+        this.adjustElTop(label.slice(0, -1), now);
      }
    }
  };

--- a/packages/date-picker/src/panel/date-range.vue
+++ b/packages/date-picker/src/panel/date-range.vue
@@ -3,7 +3,7 @@
    <div
      v-show="visible"
      :style="{ width: width + 'px' }"
-      class="el-picker-panel el-date-range-picker"
+      class="el-picker-panel el-date-range-picker el-popper"
      :class="[{
        'has-sidebar': $slots.sidebar || shortcuts,
        'has-time': showTime
@@ -285,11 +285,11 @@
      },
      minTimePickerVisible(val) {
-        if (val) this.$nextTick(() => this.$refs.minTimePicker.ajustScrollTop());
+        if (val) this.$nextTick(() => this.$refs.minTimePicker.adjustScrollTop());
      },
      maxTimePickerVisible(val) {
-        if (val) this.$nextTick(() => this.$refs.maxTimePicker.ajustScrollTop());
+        if (val) this.$nextTick(() => this.$refs.maxTimePicker.adjustScrollTop());
      },
      value(newVal) {

--- a/packages/date-picker/src/panel/date.vue
+++ b/packages/date-picker/src/panel/date.vue
@@ -5,7 +5,7 @@
      :style="{
        width: width + 'px'
      }"
-      class="el-picker-panel el-date-picker"
+      class="el-picker-panel el-date-picker el-popper"
      :class="[{
        'has-sidebar': $slots.sidebar || shortcuts,
        'has-time': showTime
@@ -166,7 +166,7 @@
      },
      timePickerVisible(val) {
-        if (val) this.$nextTick(() => this.$refs.timepicker.ajustScrollTop());
+        if (val) this.$nextTick(() => this.$refs.timepicker.adjustScrollTop());
      },
      selectionMode(newVal) {

--- a/packages/date-picker/src/panel/time-range.vue
+++ b/packages/date-picker/src/panel/time-range.vue
@@ -6,7 +6,7 @@
    <div
      v-show="visible"
      :style="{ width: width + 'px' }"
-      class="el-time-range-picker el-picker-panel"
+      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">
@@ -126,7 +126,7 @@
    watch: {
      value(newVal) {
        this.panelCreated();
-        this.$nextTick(_ => this.ajustScrollTop());
+        this.$nextTick(_ => this.adjustScrollTop());
      },
      visible(val) {
@@ -228,9 +228,9 @@
        this.$emit('pick', [this.minTime, this.maxTime], visible, first);
      },
-      ajustScrollTop() {
+      adjustScrollTop() {
-        this.$refs.minSpinner.ajustScrollTop();
+        this.$refs.minSpinner.adjustScrollTop();
-        this.$refs.maxSpinner.ajustScrollTop();
+        this.$refs.maxSpinner.adjustScrollTop();
      },
      scrollDown(step) {

--- a/packages/date-picker/src/panel/time-select.vue
+++ b/packages/date-picker/src/panel/time-select.vue
@@ -5,7 +5,7 @@
      v-show="visible"
      :style="{ width: width + 'px' }"
      :class="popperClass"
-      class="el-picker-panel time-select">
+      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"

--- a/packages/date-picker/src/panel/time.vue
+++ b/packages/date-picker/src/panel/time.vue
@@ -3,7 +3,7 @@
    <div
      v-show="currentVisible"
      :style="{width: width + 'px'}"
-      class="el-time-panel"
+      class="el-time-panel el-popper"
      :class="popperClass">
      <div class="el-time-panel__content" :class="{ 'has-seconds': showSeconds }">
        <time-spinner
@@ -80,7 +80,7 @@
          minutes: date.getMinutes(),
          seconds: date.getSeconds()
        });
-        this.$nextTick(_ => this.ajustScrollTop());
+        this.$nextTick(_ => this.adjustScrollTop());
      },
      selectableRange(val) {
@@ -163,8 +163,8 @@
        this.$emit('pick', date, visible, first);
      },
-      ajustScrollTop() {
+      adjustScrollTop() {
-        return this.$refs.spinner.ajustScrollTop();
+        return this.$refs.spinner.adjustScrollTop();
      },
      scrollDown(step) {

--- a/packages/date-picker/src/picker.vue
+++ b/packages/date-picker/src/picker.vue
@@ -12,15 +12,16 @@
    @blur="handleBlur"
    @keydown.native="handleKeydown"
    :value="displayValue"
+    @mouseenter.native="handleMouseEnter"
+    @mouseleave.native="showClose = false"
    @change.native="displayValue = $event.target.value"
    :validateEvent="false"
+    :prefix-icon="triggerClass"
    ref="reference">
    <i slot="suffix"
      class="el-input__icon"
      @click="handleClickIcon"
-      :class="[showClose ? 'el-icon-close' : triggerClass]"
+      :class="{ 'el-icon-circle-close': showClose }"
-      @mouseenter="handleMouseEnterIcon"
-      @mouseleave="showClose = false"
      v-if="haveTrigger">
    </i>
  </el-input>
@@ -43,7 +44,9 @@ const NewPopper = {
    boundariesPadding: Popper.props.boundariesPadding
  },
  methods: Popper.methods,
-  data: Popper.data,
+  data() {
+    return merge({ visibleArrow: true }, Popper.data);
+  },
  beforeDestroy: Popper.beforeDestroy
 };
@@ -362,7 +365,7 @@ export default {
  },
  methods: {
-    handleMouseEnterIcon() {
+    handleMouseEnter() {
      if (this.readonly || this.disabled) return;
      if (!this.valueIsEmpty && this.clearable) {
        this.showClose = true;
@@ -445,7 +448,7 @@ export default {
      this.picker.resetView && this.picker.resetView();
      this.$nextTick(() => {
-        this.picker.ajustScrollTop && this.picker.ajustScrollTop();
+        this.picker.adjustScrollTop && this.picker.adjustScrollTop();
      });
    },

--- a/packages/form/src/form-item.vue
+++ b/packages/form/src/form-item.vue
 <template>
  <div class="el-form-item" :class="{
-    'el-form-item--feedback': statusFeedback,
+    'el-form-item--feedback': elForm && elForm.statusIcon,
    'is-error': validateState === 'error',
    'is-validating': validateState === 'validating',
    'is-success': validateState === 'success',
@@ -15,7 +15,11 @@
        <div
          v-if="validateState === 'error' && showMessage && form.showMessage"
          class="el-form-item__error"
-          :class="{'el-form-item__error--inline': inlineMessage}"
+          :class="{
+            'el-form-item__error--inline': typeof inlineMessage === 'boolean'
+              ? inlineMessage
+              : (elForm && elForm.inlineMessage || false)
+          }"
        >
          {{validateMessage}}
        </div>
@@ -72,11 +76,13 @@
      labelWidth: String,
      prop: String,
      required: Boolean,
-      statusFeedback: Boolean,
      rules: [Object, Array],
      error: String,
      validateStatus: String,
-      inlineMessage: Boolean,
+      inlineMessage: {
+        type: [String, Boolean],
+        default: ''
+      },
      showMessage: {
        type: Boolean,
        default: true

--- a/packages/form/src/form.vue
+++ b/packages/form/src/form.vue
@@ -28,6 +28,8 @@
        default: ''
      },
      inline: Boolean,
+      inlineMessage: Boolean,
+      statusIcon: Boolean,
      showMessage: {
        type: Boolean,
        default: true

--- a/packages/input/src/input.vue
+++ b/packages/input/src/input.vue
@@ -21,7 +21,7 @@
        <slot name="prefix"></slot>
        <i class="el-input__icon"
          v-if="prefixIcon"
-          :class="['el-icon-' + prefixIcon]">
+          :class="prefixIcon">
        </i>
      </span>
      <input
@@ -41,7 +41,7 @@
          <slot name="suffix"></slot>
          <i class="el-input__icon"
            v-if="suffixIcon"
-            :class="['el-icon-' + suffixIcon]">
+            :class="suffixIcon">
          </i>
        </span>
        <i class="el-input__icon"
@@ -132,7 +132,7 @@
    computed: {
      validateState() {
-        return this.formItem ? this.formItem.validateState : '';
+        return this.elFormItem ? this.elFormItem.validateState : '';
      },
      validateIcon() {
        return {

--- a/packages/theme-chalk/src/card.scss
+++ b/packages/theme-chalk/src/card.scss
@@ -3,9 +3,10 @@
 @include b(card) {
  border-radius: $--card-border-radius;
+  border: 1px solid $--card-border-color;
  background-color: $--color-white;
  overflow: hidden;
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
+  box-shadow: $--box-shadow-light;
  color: $--color-text-primary;
  @include e(header) {

--- a/packages/theme-chalk/src/cascader.scss
+++ b/packages/theme-chalk/src/cascader.scss
@@ -53,11 +53,11 @@
    }
  }
-  @include m(large) {
+  @include m(medium) {
-    font-size: $--input-large-font-size;
+    font-size: $--input-medium-font-size;
    .el-cascader__label {
-      line-height: #{$--input-large-height - 2};
+      line-height: #{$--input-medium-height - 2};
    }
  }
  @include m(small) {

--- a/packages/theme-chalk/src/checkbox.scss
+++ b/packages/theme-chalk/src/checkbox.scss
@@ -6,7 +6,6 @@
 @include b(checkbox) {
  color: $--checkbox-color;
  font-weight: $--checkbox-font-weight;
-  line-height: 1;
  position: relative;
  cursor: pointer;
  display: inline-block;

--- a/packages/theme-chalk/src/color-picker.scss
+++ b/packages/theme-chalk/src/color-picker.scss
@@ -61,7 +61,7 @@
  width: 280px;
  height: 180px;
-  @include e((white, black)) {
+  @include e(('white', 'black')) {
    position: absolute;
    top: 0;
    left: 0;
@@ -69,11 +69,11 @@
    bottom: 0;
  }
-  @include e(white) {
+  @include e('white') {
    background: linear-gradient(to right, #fff, rgba(255,255,255,0));
  }
-  @include e(black) {
+  @include e('black') {
    background: linear-gradient(to top, #000, rgba(0,0,0,0));
  }

--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -70,7 +70,8 @@ $--border-radius-circle: 100%;
 -------------------------- */
 $--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
 $--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
-$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 /* Fill
 -------------------------- */
 $--fill-base: $--color-white;
@@ -308,7 +309,7 @@ $--notification-danger-color: $--color-danger;
 $--input-font-size: $--font-size-base;
 $--input-color: $--font-color-base;
 $--input-width: 140px;
-$--input-height: 36px;
+$--input-height: 40px;
 $--input-border: $--border-base;
 $--input-border-color: $--border-color-base;
 $--input-border-radius: $--border-radius-base;
@@ -330,14 +331,14 @@ $--input-disabled-border: $--disabled-border-base;
 $--input-disabled-color: $--disabled-color-base;
 $--input-disabled-placeholder-color: $--color-text-placeholder;
-$--input-large-font-size: 16px;
+$--input-medium-font-size: 14px;
-$--input-large-height: 42px;
+$--input-medium-height: 36px;
 $--input-small-font-size: 13px;
-$--input-small-height: 30px;
+$--input-small-height: 32px;
 $--input-mini-font-size: 12px;
-$--input-mini-height: 22px;
+$--input-mini-height: 28px;
 /* Cascader
 -------------------------- */

--- a/packages/theme-chalk/src/date-picker/picker-panel.scss
+++ b/packages/theme-chalk/src/date-picker/picker-panel.scss
 @import "../common/var";
 @include b(picker-panel) {
-  color: $--datepicker-color;
+  color: $--color-text-regular;
  border: 1px solid $--datepicker-border-color;
-  box-shadow: 0 2px 6px #ccc;
+  box-shadow: $--box-shadow-light;
  background: $--color-white;
-  border-radius: 2px;
+  border-radius: $--border-radius-base;
  line-height: 20px;
  margin: 5px 0;
@@ -91,6 +91,10 @@
    padding: 15px;
    font-size: 12px;
  }
+  .popper__arrow {
+    transform: translateX(-400%);
+  }
 }
 .el-picker-panel *[slot=sidebar],

--- a/packages/theme-chalk/src/date-picker/time-picker.scss
+++ b/packages/theme-chalk/src/date-picker/time-picker.scss
@@ -4,7 +4,7 @@
  margin: 5px 0;
  border: solid 1px $--datepicker-border-color;
  background-color: $--color-white;
-  box-shadow: $--box-shadow-base;
+  box-shadow: $--box-shadow-light;
  border-radius: 2px;
  position: absolute;
  width: 180px;
@@ -18,14 +18,10 @@
    overflow: hidden;
    &::after, &::before {
-      content: ":";
+      content: "";
      top: 50%;
-      color: $--color-white;
      position: absolute;
-      font-size: 14px;
      margin-top: -15px;
-      line-height: 16px;
-      background-color: $--datepicker-active-color;
      height: 32px;
      z-index: -1;
      left: 0;
@@ -33,16 +29,20 @@
      box-sizing: border-box;
      padding-top: 6px;
      text-align: left;
+      border-top: 1px solid $--border-color-light;
+      border-bottom: 1px solid $--border-color-light;
    }
    &::after {
      left: 50%;
-      margin-left: -2px;
+      margin-left: 12%;
+      margin-right: 12%;
    }
    &::before {
      padding-left: 50%;
-      margin-right: -2px;
+      margin-right: 12%;
+      margin-left: 12%;
    }
    &.has-seconds {
@@ -74,11 +74,15 @@
    background-color: transparent;
    outline: none;
    font-size: 12px;
-    color: $--color-black;
+    color: $--color-text-primary;
    &.confirm {
      font-weight: 800;
      color: $--datepicker-active-color;
    }
  }
+  .popper__arrow {
+    transform: translateX(-400%);
+  }
 }
--- a/packages/theme-chalk/src/date-picker/time-spinner.scss
+++ b/packages/theme-chalk/src/date-picker/time-spinner.scss
@@ -43,18 +43,20 @@
    height: 32px;
    line-height: 32px;
    font-size: 12px;
+    color: $--font-color-base;
    &:hover:not(.disabled):not(.active) {
-      background: $--datepicker-cell-hover-color;
+      background: $--background-color-base;
      cursor: pointer;
    }
    &.active:not(.disabled) {
-      color: $--color-white;
+      color: $--color-text-primary;
+      font-weight: bold;
    }
    &.disabled {
-      color: $--datepicker-border-color;
+      color: $--color-text-placeholder;
      cursor: not-allowed;
    }
  }

--- a/packages/theme-chalk/src/input-number.scss
+++ b/packages/theme-chalk/src/input-number.scss
@@ -58,19 +58,19 @@
      }
    }
  }
-  @include m(large) {
+  @include m(medium) {
    width: 200px;
    & .el-input-number__increase, .el-input-number__decrease {
-      line-height: #{$--input-large-height - 2};
+      line-height: #{$--input-medium-height - 2};
-      width: $--input-large-height;
+      width: $--input-medium-height;
-      font-size: $--input-large-font-size;
+      font-size: $--input-medium-font-size;
    }
    & .el-input-number__decrease {
-      right: #{$--input-large-height + 1};
+      right: #{$--input-medium-height + 1};
    }
    & .el-input__inner {
-      padding-right: #{$--input-large-height * 2 + 10};
+      padding-right: #{$--input-medium-height * 2 + 10};
    }
  }
  @include m(small) {

--- a/packages/theme-chalk/src/input.scss
+++ b/packages/theme-chalk/src/input.scss
@@ -106,19 +106,19 @@
  }
  @include m(suffix) {
    .el-input__inner {
-      padding-right: 25px;
+      padding-right: 30px;
    }
  }
  @include m(prefix) {
    .el-input__inner {
-      padding-left: 25px;
+      padding-left: 30px;
    }
  }
-  @include m(large) {
+  @include m(medium) {
-    font-size: $--input-large-font-size;
+    font-size: $--input-medium-font-size;
    & .el-input__inner {
-      height: $--input-large-height;
+      height: $--input-medium-height;
    }
  }
  @include m(small) {

--- a/packages/theme-chalk/src/menu.scss
+++ b/packages/theme-chalk/src/menu.scss
@@ -65,6 +65,7 @@
        z-index: 100;
        min-width: 100%;
        box-shadow: $--box-shadow-light;
+        border-radius: $--border-radius-small;
      }
      & .el-submenu__title {
@@ -138,6 +139,8 @@
        top: 0;
        left: 100%;
        z-index: 10;
+        border: 1px solid $--border-color-light;
+        border-radius: $--border-radius-small;
        box-shadow: $--box-shadow-light;
      }

--- a/packages/theme-chalk/src/slider.scss
+++ b/packages/theme-chalk/src/slider.scss
@@ -153,7 +153,7 @@
      transform: translateY(50%);
    }
    &.el-slider--with-input {
-      padding-bottom: #{$--input-large-height + 22px};
+      padding-bottom: #{$--input-medium-height + 22px};
      .el-slider__input {
        overflow: visible;
        float: none;

--- a/packages/theme-chalk/src/time-select.scss
+++ b/packages/theme-chalk/src/time-select.scss
@@ -19,12 +19,8 @@
 }
 .time-select-item.selected:not(.disabled) {
-  background-color: $--datepicker-active-color;
+  color: $--color-primary;
-  color: $--color-white;
+  font-weight: bold;
-  &:hover {
-    background-color: $--color-primary;
-  }
 }
 .time-select-item.disabled {
@@ -33,6 +29,7 @@
 }
 .time-select-item:hover {
-  background-color: $--datepicker-cell-hover-color;
+  background-color: $--background-color-base;
+  font-weight: bold;
  cursor: pointer;
 }
--- a/test/unit/specs/time-picker.spec.js
+++ b/test/unit/specs/time-picker.spec.js
@@ -38,15 +38,15 @@ describe('TimePicker', () => {
    input.focus();
    input.blur();
-    Vue.nextTick(_ => {
+    setTimeout(_ => {
      const times = vm.picker.$el.querySelectorAll('.active');
      expect(times[0].textContent).to.equal('18');
      expect(times[1].textContent).to.equal('40');
-      expect(times[2].textContent).to.equal('0');
+      expect(times[2].textContent).to.equal('00');
      destroyVM(vm);
      done();
-    });
+    }, 100);
  });
  it('select time', done => {