TimePicker: add chalk theme (#7102)

* TimePicker: add chalk theme

* minor style fixes

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 |

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="请选择日期"
-    suffix-icon="date"
+    placeholder="Pick a date"
+    suffix-icon="el-icon-date"
     v-model="input2">
   </el-input>
   <el-input
-    placeholder="请输入内容"
-    prefix-icon="search"
+    placeholder="Type something"
+    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) |

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 |
 
 

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-item status-feedback label="密码" prop="pass">
+<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
+  <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
 

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) |

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 | — | — |
-| align | 对齐方式 | string | left, center, right | left |
+| value | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
+| 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) |

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"

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 }"
-        v-text="hour"></li>
+        :class="{ 'active': hour === hours, 'disabled': disabled }">{{ ('0' + hour).slice(-2) }}</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 }"
-        v-text="key"></li>
+        :class="{ 'active': key === minutes }">{{ ('0' + key).slice(-2) }}</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 }"
-        v-text="key"></li>
+        :class="{ 'active': key === seconds }">{{ ('0' + key).slice(-2) }}</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 = {};
-        ajust[`${type}s`] = Math.min(Math.floor((this[`${type}El`].scrollTop - 80) / 32 + 3), (`${type}` === 'hour' ? 23 : 59));
-        this.debounceAjustElTop(type);
-        this.$emit('change', ajust);
+        const adjust = {};
+        adjust[`${type}s`] = Math.min(Math.floor((this[`${type}El`].scrollTop - 80) / 32 + 3), (`${type}` === 'hour' ? 23 : 59));
+        this.debounceAdjustElTop(type);
+        this.$emit('change', adjust);
       },
 
-      ajustScrollTop() {
-        this.ajustElTop('hour', this.hours);
-        this.ajustElTop('minute', this.minutes);
-        this.ajustElTop('second', this.seconds);
+      adjustScrollTop() {
+        this.adjustElTop('hour', this.hours);
+        this.adjustElTop('minute', this.minutes);
+        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);
       }
     }
   };

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) {

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) {

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() {
-        this.$refs.minSpinner.ajustScrollTop();
-        this.$refs.maxSpinner.ajustScrollTop();
+      adjustScrollTop() {
+        this.$refs.minSpinner.adjustScrollTop();
+        this.$refs.maxSpinner.adjustScrollTop();
       },
 
       scrollDown(step) {

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"

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() {
-        return this.$refs.spinner.ajustScrollTop();
+      adjustScrollTop() {
+        return this.$refs.spinner.adjustScrollTop();
       },
 
       scrollDown(step) {

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]"
-      @mouseenter="handleMouseEnterIcon"
-      @mouseleave="showClose = false"
+      :class="{ 'el-icon-circle-close': showClose }"
       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();
       });
     },
 

packages/form/src/form-item.vue

@@ -1,6 +1,6 @@
 <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

packages/form/src/form.vue

@@ -28,6 +28,8 @@
         default: ''
       },
       inline: Boolean,
+      inlineMessage: Boolean,
+      statusIcon: Boolean,
       showMessage: {
         type: Boolean,
         default: true

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 {

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) {

packages/theme-chalk/src/cascader.scss

@@ -53,11 +53,11 @@
     }
   }
 
-  @include m(large) {
-    font-size: $--input-large-font-size;
+  @include m(medium) {
+    font-size: $--input-medium-font-size;
 
     .el-cascader__label {
-      line-height: #{$--input-large-height - 2};
+      line-height: #{$--input-medium-height - 2};
     }
   }
   @include m(small) {

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;

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));
   }
 

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-large-height: 42px;
+$--input-medium-font-size: 14px;
+$--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
 -------------------------- */

packages/theme-chalk/src/date-picker/picker-panel.scss

@@ -1,11 +1,11 @@
 @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],

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%);
+  }
 }

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;
     }
   }

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};
-      width: $--input-large-height;
-      font-size: $--input-large-font-size;
+      line-height: #{$--input-medium-height - 2};
+      width: $--input-medium-height;
+      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) {

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) {
-    font-size: $--input-large-font-size;
+  @include m(medium) {
+    font-size: $--input-medium-font-size;
 
     & .el-input__inner {
-      height: $--input-large-height;
+      height: $--input-medium-height;
     }
   }
   @include m(small) {

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;
       }
 

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;

packages/theme-chalk/src/time-select.scss

@@ -19,12 +19,8 @@
 }
 
 .time-select-item.selected:not(.disabled) {
-  background-color: $--datepicker-active-color;
-  color: $--color-white;
-
-  &:hover {
-    background-color: $--color-primary;
-  }
+  color: $--color-primary;
+  font-weight: bold;
 }
 
 .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;
 }

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 => {