diff --git a/examples/docs/en-US/form.md b/examples/docs/en-US/form.md index 992773e33..62adb0199 100644 --- 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 | diff --git a/examples/docs/en-US/input.md b/examples/docs/en-US/input.md index 98a7dc27c..7005d963e 100644 --- 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="请选择日期" - 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) | diff --git a/examples/docs/en-US/time-picker.md b/examples/docs/en-US/time-picker.md index e35ceef6e..76a10278f 100644 --- 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 | diff --git a/examples/docs/zh-CN/form.md b/examples/docs/zh-CN/form.md index 680c87065..3f90ea499 100644 --- 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-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 diff --git a/examples/docs/zh-CN/input.md b/examples/docs/zh-CN/input.md index 722bc1c2e..b1dea0071 100644 --- 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) | diff --git a/examples/docs/zh-CN/time-picker.md b/examples/docs/zh-CN/time-picker.md index b8f5663a7..7177ee5c9 100644 --- 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 | — | — | -| 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) | diff --git a/packages/color-picker/src/main.vue b/packages/color-picker/src/main.vue index 0b90ff796..f53d71263 100644 --- 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" diff --git a/packages/date-picker/src/basic/time-spinner.vue b/packages/date-picker/src/basic/time-spinner.vue index 059c118d0..a57554d58 100644 --- 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 }" - 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); } } }; diff --git a/packages/date-picker/src/panel/date-range.vue b/packages/date-picker/src/panel/date-range.vue index 07afa6dc7..820462cd0 100644 --- 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) { diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue index 54f00a4e0..aab42a7f5 100644 --- 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) { diff --git a/packages/date-picker/src/panel/time-range.vue b/packages/date-picker/src/panel/time-range.vue index 854731f1d..12108fcf7 100644 --- 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() { - this.$refs.minSpinner.ajustScrollTop(); - this.$refs.maxSpinner.ajustScrollTop(); + adjustScrollTop() { + this.$refs.minSpinner.adjustScrollTop(); + this.$refs.maxSpinner.adjustScrollTop(); }, scrollDown(step) { diff --git a/packages/date-picker/src/panel/time-select.vue b/packages/date-picker/src/panel/time-select.vue index 1e1cb2dec..c5bcd753f 100644 --- 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" diff --git a/packages/date-picker/src/panel/time.vue b/packages/date-picker/src/panel/time.vue index a70a434dc..6ae085f7a 100644 --- 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() { - return this.$refs.spinner.ajustScrollTop(); + adjustScrollTop() { + return this.$refs.spinner.adjustScrollTop(); }, scrollDown(step) { diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue index de1b0f1ba..6b90048c8 100644 --- 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]" - @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(); }); }, diff --git a/packages/form/src/form-item.vue b/packages/form/src/form-item.vue index 5007091cb..9126af929 100644 --- a/packages/form/src/form-item.vue +++ b/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 diff --git a/packages/form/src/form.vue b/packages/form/src/form.vue index 18bee5754..808af03d6 100644 --- 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 diff --git a/packages/input/src/input.vue b/packages/input/src/input.vue index 43217e29d..be9127ebd 100644 --- 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 { diff --git a/packages/theme-chalk/src/card.scss b/packages/theme-chalk/src/card.scss index af48265ef..77c1bfbf3 100644 --- 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) { diff --git a/packages/theme-chalk/src/cascader.scss b/packages/theme-chalk/src/cascader.scss index 97f186905..f5c1de475 100644 --- a/packages/theme-chalk/src/cascader.scss +++ b/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) { diff --git a/packages/theme-chalk/src/checkbox.scss b/packages/theme-chalk/src/checkbox.scss index ae07bdd40..25c69fbed 100644 --- 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; diff --git a/packages/theme-chalk/src/color-picker.scss b/packages/theme-chalk/src/color-picker.scss index 620b31e03..6eb3e8b88 100644 --- 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)); } diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index a83257ab4..3145ac01a 100644 --- 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-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 -------------------------- */ diff --git a/packages/theme-chalk/src/date-picker/picker-panel.scss b/packages/theme-chalk/src/date-picker/picker-panel.scss index 153ba7c8d..f7dd5dc8e 100644 --- a/packages/theme-chalk/src/date-picker/picker-panel.scss +++ b/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], diff --git a/packages/theme-chalk/src/date-picker/time-picker.scss b/packages/theme-chalk/src/date-picker/time-picker.scss index 9edef9ec6..892d12f81 100644 --- 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%); + } } diff --git a/packages/theme-chalk/src/date-picker/time-spinner.scss b/packages/theme-chalk/src/date-picker/time-spinner.scss index 8648f72df..ce3df525e 100644 --- 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; } } diff --git a/packages/theme-chalk/src/input-number.scss b/packages/theme-chalk/src/input-number.scss index affd4b478..512fcca4a 100644 --- 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}; - 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) { diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss index 3c22119e5..986ff27c5 100644 --- 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) { - 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) { diff --git a/packages/theme-chalk/src/menu.scss b/packages/theme-chalk/src/menu.scss index 4af3dc8e6..a25ad3c73 100644 --- 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; } diff --git a/packages/theme-chalk/src/slider.scss b/packages/theme-chalk/src/slider.scss index 915861b03..316a7e9fc 100644 --- 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; diff --git a/packages/theme-chalk/src/time-select.scss b/packages/theme-chalk/src/time-select.scss index ca0ac6a1e..5359d717b 100644 --- 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-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; } diff --git a/test/unit/specs/time-picker.spec.js b/test/unit/specs/time-picker.spec.js index dedbf581b..ae5b421f0 100644 --- 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 => {