github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

TimePicker: add chalk theme (#7102) 

* TimePicker: add chalk theme

* minor style fixes
pull/6214/head^2
杨奕 2017-09-19 09:35:57 -05:00 committed by GitHub
parent 2a0a4bc651
commit ad88dd2ec7
31 changed files with 184 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
examples/docs/en-US/form.md
View File

@ -512,11 +512,11 @@ Form component allows you to verify your data, helping you find and correct erro
### Custom validation rules ### 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 ```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-form-item label="Password" prop="pass">
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input> <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
</el-form-item> </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-width | width of label, and all its direct child form items will inherit this value | string | — | — |
| label-suffix | suffix of the label | string | — | — | | label-suffix | suffix of the label | string | — | — |
| show-message | whether to show the error message | boolean | — | true | | 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 ### 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 | | show-message | whether to show the error message | boolean | — | true |
| inline-message | inline style validate message | boolean | — | false | | inline-message | inline style validate message | boolean | — | false |
### Form-Item Slot ### Form-Item Slot
| name | Description | | Name | Description |
|------|--------| |------|--------|
| — | content of Form Item | | — | content of Form Item |
| label | content of label | | label | content of label |

33
examples/docs/en-US/input.md
View File

@ -193,30 +193,30 @@ export default {
Add an icon to indicate input type. 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 ```html
<div class="demo-input-suffix"> <div class="demo-input-suffix">
属性方式： Using attributes
<el-input <el-input
placeholder="请选择日期" placeholder="Pick a date"
suffix-icon="date" suffix-icon="el-icon-date"
v-model="input2"> v-model="input2">
</el-input> </el-input>
<el-input <el-input
placeholder="请输入内容" placeholder="Type something"
prefix-icon="search" prefix-icon="el-icon-search"
v-model="input21"> v-model="input21">
</el-input> </el-input>
</div> </div>
<div class="demo-input-suffix"> <div class="demo-input-suffix">
slot 方式： Using slots
<el-input <el-input
placeholder="请选择日期" placeholder="Pick a date"
v-model="input22"> v-model="input22">
<i slot="suffix" class="el-input__icon el-icon-date"></i> <i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input> </el-input>
<el-input <el-input
placeholder="请输入内容" placeholder="Type something"
v-model="input23"> v-model="input23">
<i slot="prefix" class="el-input__icon el-icon-search"></i> <i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input> </el-input>
@ -351,11 +351,11 @@ export default {
```html ```html
<div class="demo-input-size"> <div class="demo-input-size">
<el-input <el-input
size="large"
placeholder="Please Input" placeholder="Please Input"
v-model="input6"> v-model="input6">
</el-input> </el-input>
<el-input <el-input
size="medium"
placeholder="Please Input" placeholder="Please Input"
v-model="input7"> v-model="input7">
</el-input> </el-input>
@ -623,7 +623,8 @@ Search data from server-side.
|placeholder| placeholder of Input| string | — | — | |placeholder| placeholder of Input| string | — | — |
|disabled | whether Input is disabled | boolean | — | false | |disabled | whether Input is disabled | boolean | — | false |
|size | size of Input, works when `type` is not 'textarea' | string | large/small/mini | — | |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 | |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 | |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 | |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 | — | — | |form | same as `form` in native input | string | — | — |
| on-icon-click | hook function when clicking on the input icon | function | — | — | | 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 ### Input Events
| Event Name | Description | Parameters | | Event Name | Description | Parameters |
|----| ----| ----| |----| ----| ----|
|click | triggers when the icon inside Input is clicked | (event: Event) |
| blur | triggers when Input blurs | (event: Event) | | blur | triggers when Input blurs | (event: Event) |
| focus | triggers when Input focuses | (event: Event) | | focus | triggers when Input focuses | (event: Event) |
| change | triggers when the icon inside Input value change | (value: string \| number) | | change | triggers when the icon inside Input value change | (value: string \| number) |

6
examples/docs/en-US/time-picker.md
View File

@ -155,10 +155,10 @@ Can pick an arbitrary time range.
| disabled | whether DatePicker is disabled | boolean | — | false | | disabled | whether DatePicker is disabled | boolean | — | false |
| editable | whether the input is editable | boolean | — | true | | 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 | large/small/mini | — | | size | size of Input | string | medium / small / mini | — |
| placeholder | placeholder | string | — | — | | 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 | | 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 | — | — | | popper-class | custom class name for TimePicker's dropdown | string | — | — |
| picker-options | additional options, check the table below | object | — | {} | | picker-options | additional options, check the table below | object | — | {} |
|name | same as `name` in native input | string | — | — | |name | same as `name` in native input | string | — | — |
@ -175,7 +175,7 @@ Can pick an arbitrary time range.
### Time Picker Options ### Time Picker Options
| Attribute | Description | Type | Accepted Values | Default | | 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 | | format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |

16
examples/docs/zh-CN/form.md
View File

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

25
examples/docs/zh-CN/input.md
View File

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

10
examples/docs/zh-CN/time-picker.md
View File

@ -154,10 +154,10 @@
| disabled | 禁用 | boolean | — | false | | disabled | 禁用 | boolean | — | false |
| editable | 文本框可输入 | boolean | — | true | | editable | 文本框可输入 | boolean | — | true |
| clearable | 是否显示清除按钮 | boolean | — | true | | clearable | 是否显示清除按钮 | boolean | — | true |
| size | 输入框尺寸 | string | large, small, mini | — | | size | 输入框尺寸 | string | medium / small / mini | — |
| placeholder | 占位内容 | string | — | — | | 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 | — | — | | popper-class | TimePicker 下拉框的类名 | string | — | — |
| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} | | picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
| name | 原生属性 | string | — | — | | name | 原生属性 | string | — | — |
@ -174,11 +174,11 @@
### Time Picker Options ### 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' | | format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss` | 'HH:mm:ss' |
### Events ### Events
| Event Name | Description | Parameters | | 事件名 | 说明 | 参数 |
|---------|--------|---------| |---------|--------|---------|
| change | 当 input 的值改变时触发，返回值和文本框一致 | formatted value | | change | 当 input 的值改变时触发，返回值和文本框一致 | formatted value |
| blur | 当 input 失去焦点时触发 | (event: Event) | | blur | 当 input 失去焦点时触发 | (event: Event) |

2
packages/color-picker/src/main.vue
View File

@ -15,7 +15,7 @@
}"></span> }"></span>
<span class="el-color-picker__empty el-icon-close" v-if="!value && !showPanelColor"></span> <span class="el-color-picker__empty el-icon-close" v-if="!value && !showPanelColor"></span>
</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> </div>
<picker-dropdown <picker-dropdown
ref="dropdown" ref="dropdown"

41
packages/date-picker/src/basic/time-spinner.vue
View File

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

6
packages/date-picker/src/panel/date-range.vue
View File

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

4
packages/date-picker/src/panel/date.vue
View File

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

10
packages/date-picker/src/panel/time-range.vue
View File

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

2
packages/date-picker/src/panel/time-select.vue
View File

@ -5,7 +5,7 @@
v-show="visible" v-show="visible"
:style="{ width: width + 'px' }" :style="{ width: width + 'px' }"
:class="popperClass" :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"> <el-scrollbar noresize wrap-class="el-picker-panel__content">
<div class="time-select-item" <div class="time-select-item"
v-for="item in items" v-for="item in items"

8
packages/date-picker/src/panel/time.vue
View File

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

15
packages/date-picker/src/picker.vue
View File

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

14
packages/form/src/form-item.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="el-form-item" :class="{ <div class="el-form-item" :class="{
'el-form-item--feedback': statusFeedback, 'el-form-item--feedback': elForm && elForm.statusIcon,
'is-error': validateState === 'error', 'is-error': validateState === 'error',
'is-validating': validateState === 'validating', 'is-validating': validateState === 'validating',
'is-success': validateState === 'success', 'is-success': validateState === 'success',
@ -15,7 +15,11 @@
<div <div
v-if="validateState === 'error' && showMessage && form.showMessage" v-if="validateState === 'error' && showMessage && form.showMessage"
class="el-form-item__error" 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}} {{validateMessage}}
</div> </div>
@ -72,11 +76,13 @@
labelWidth: String, labelWidth: String,
prop: String, prop: String,
required: Boolean, required: Boolean,
statusFeedback: Boolean,
rules: [Object, Array], rules: [Object, Array],
error: String, error: String,
validateStatus: String, validateStatus: String,
inlineMessage: Boolean, inlineMessage: {
type: [String, Boolean],
default: ''
},
showMessage: { showMessage: {
type: Boolean, type: Boolean,
default: true default: true

2
packages/form/src/form.vue
View File

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

6
packages/input/src/input.vue
View File

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

3
packages/theme-chalk/src/card.scss
View File

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

6
packages/theme-chalk/src/cascader.scss
View File

@ -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 { .el-cascader__label {
line-height: #{$--input-large-height - 2}; line-height: #{$--input-medium-height - 2};
} }
} }
@include m(small) { @include m(small) {

1
packages/theme-chalk/src/checkbox.scss
View File

@ -6,7 +6,6 @@
@include b(checkbox) { @include b(checkbox) {
color: $--checkbox-color; color: $--checkbox-color;
font-weight: $--checkbox-font-weight; font-weight: $--checkbox-font-weight;
line-height: 1;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;

6
packages/theme-chalk/src/color-picker.scss
View File

@ -61,7 +61,7 @@
width: 280px; width: 280px;
height: 180px; height: 180px;
@include e((white, black)) { @include e(('white', 'black')) {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -69,11 +69,11 @@
bottom: 0; bottom: 0;
} }
@include e(white) { @include e('white') {
background: linear-gradient(to right, #fff, rgba(255,255,255,0)); 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)); background: linear-gradient(to top, #000, rgba(0,0,0,0));
} }

13
packages/theme-chalk/src/common/var.scss
View File

@ -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-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-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
-------------------------- */ -------------------------- */
$--fill-base: $--color-white; $--fill-base: $--color-white;
@ -308,7 +309,7 @@ $--notification-danger-color: $--color-danger;
$--input-font-size: $--font-size-base; $--input-font-size: $--font-size-base;
$--input-color: $--font-color-base; $--input-color: $--font-color-base;
$--input-width: 140px; $--input-width: 140px;
$--input-height: 36px; $--input-height: 40px;
$--input-border: $--border-base; $--input-border: $--border-base;
$--input-border-color: $--border-color-base; $--input-border-color: $--border-color-base;
$--input-border-radius: $--border-radius-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-color: $--disabled-color-base;
$--input-disabled-placeholder-color: $--color-text-placeholder; $--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-font-size: 13px;
$--input-small-height: 30px; $--input-small-height: 32px;
$--input-mini-font-size: 12px; $--input-mini-font-size: 12px;
$--input-mini-height: 22px; $--input-mini-height: 28px;
/* Cascader /* Cascader
-------------------------- */ -------------------------- */

10
packages/theme-chalk/src/date-picker/picker-panel.scss
View File

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

22
packages/theme-chalk/src/date-picker/time-picker.scss
View File

@ -4,7 +4,7 @@
margin: 5px 0; margin: 5px 0;
border: solid 1px $--datepicker-border-color; border: solid 1px $--datepicker-border-color;
background-color: $--color-white; background-color: $--color-white;
box-shadow: $--box-shadow-base; box-shadow: $--box-shadow-light;
border-radius: 2px; border-radius: 2px;
position: absolute; position: absolute;
width: 180px; width: 180px;
@ -18,14 +18,10 @@
overflow: hidden; overflow: hidden;
&::after, &::before { &::after, &::before {
content: ":"; content: "";
top: 50%; top: 50%;
color: $--color-white;
position: absolute; position: absolute;
font-size: 14px;
margin-top: -15px; margin-top: -15px;
line-height: 16px;
background-color: $--datepicker-active-color;
height: 32px; height: 32px;
z-index: -1; z-index: -1;
left: 0; left: 0;
@ -33,16 +29,20 @@
box-sizing: border-box; box-sizing: border-box;
padding-top: 6px; padding-top: 6px;
text-align: left; text-align: left;
border-top: 1px solid $--border-color-light;
border-bottom: 1px solid $--border-color-light;
} }
&::after { &::after {
left: 50%; left: 50%;
margin-left: -2px; margin-left: 12%;
margin-right: 12%;
} }
&::before { &::before {
padding-left: 50%; padding-left: 50%;
margin-right: -2px; margin-right: 12%;
margin-left: 12%;
} }
&.has-seconds { &.has-seconds {
@ -74,11 +74,15 @@
background-color: transparent; background-color: transparent;
outline: none; outline: none;
font-size: 12px; font-size: 12px;
color: $--color-black; color: $--color-text-primary;
&.confirm { &.confirm {
font-weight: 800; font-weight: 800;
color: $--datepicker-active-color; color: $--datepicker-active-color;
} }
} }
.popper__arrow {
transform: translateX(-400%);
}
} }

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

@ -43,18 +43,20 @@
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
font-size: 12px; font-size: 12px;
color: $--font-color-base;
&:hover:not(.disabled):not(.active) { &:hover:not(.disabled):not(.active) {
background: $--datepicker-cell-hover-color; background: $--background-color-base;
cursor: pointer; cursor: pointer;
} }
&.active:not(.disabled) { &.active:not(.disabled) {
color: $--color-white; color: $--color-text-primary;
font-weight: bold;
} }
&.disabled { &.disabled {
color: $--datepicker-border-color; color: $--color-text-placeholder;
cursor: not-allowed; cursor: not-allowed;
} }
} }

12
packages/theme-chalk/src/input-number.scss
View File

@ -58,19 +58,19 @@
} }
} }
} }
@include m(large) { @include m(medium) {
width: 200px; width: 200px;
& .el-input-number__increase, .el-input-number__decrease { & .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 { & .el-input-number__decrease {
right: #{$--input-large-height + 1}; right: #{$--input-medium-height + 1};
} }
& .el-input__inner { & .el-input__inner {
padding-right: #{$--input-large-height * 2 + 10}; padding-right: #{$--input-medium-height * 2 + 10};
} }
} }
@include m(small) { @include m(small) {

10
packages/theme-chalk/src/input.scss
View File

@ -106,19 +106,19 @@
} }
@include m(suffix) { @include m(suffix) {
.el-input__inner { .el-input__inner {
padding-right: 25px; padding-right: 30px;
} }
} }
@include m(prefix) { @include m(prefix) {
.el-input__inner { .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 { & .el-input__inner {
height: $--input-large-height; height: $--input-medium-height;
} }
} }
@include m(small) { @include m(small) {

3
packages/theme-chalk/src/menu.scss
View File

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

2
packages/theme-chalk/src/slider.scss
View File

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

11
packages/theme-chalk/src/time-select.scss
View File

@ -19,12 +19,8 @@
} }
.time-select-item.selected:not(.disabled) { .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 { .time-select-item.disabled {
@ -33,6 +29,7 @@
} }
.time-select-item:hover { .time-select-item:hover {
background-color: $--datepicker-cell-hover-color; background-color: $--background-color-base;
font-weight: bold;
cursor: pointer; cursor: pointer;
} }

6
test/unit/specs/time-picker.spec.js
View File

@ -38,15 +38,15 @@ describe('TimePicker', () => {
input.focus(); input.focus();
input.blur(); input.blur();
Vue.nextTick(_ => { setTimeout(_ => {
const times = vm.picker.$el.querySelectorAll('.active'); const times = vm.picker.$el.querySelectorAll('.active');
expect(times[0].textContent).to.equal('18'); expect(times[0].textContent).to.equal('18');
expect(times[1].textContent).to.equal('40'); expect(times[1].textContent).to.equal('40');
expect(times[2].textContent).to.equal('0'); expect(times[2].textContent).to.equal('00');
destroyVM(vm); destroyVM(vm);
done(); done();
}); }, 100);
}); });
it('select time', done => { it('select time', done => {