From 9acdc8e4c3ee2d0b783377da74576869b5b32faa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?= <Leopoldthecoder@users.noreply.github.com> Date: Fri, 22 Sep 2017 23:46:37 -0500 Subject: [PATCH] DatePicker/TimePicker: add chalk theme (#7169) * DatePicker/TimePicker: add chalk theme * minor updates --- examples/docs/en-US/date-picker.md | 14 +- examples/docs/en-US/datetime-picker.md | 14 +- examples/docs/en-US/i18n.md | 2 +- examples/docs/en-US/input-number.md | 2 +- examples/docs/en-US/time-picker.md | 9 +- examples/docs/zh-CN/date-picker.md | 18 ++- examples/docs/zh-CN/datetime-picker.md | 14 +- examples/docs/zh-CN/i18n.md | 2 +- examples/docs/zh-CN/time-picker.md | 8 +- examples/play/index.vue | 4 - packages/date-picker/src/basic/date-table.vue | 32 +++- packages/date-picker/src/panel/date-range.vue | 28 +--- packages/date-picker/src/panel/date.vue | 25 +-- packages/date-picker/src/panel/time-range.vue | 6 +- packages/date-picker/src/panel/time.vue | 10 +- packages/date-picker/src/picker.vue | 109 +++++++++++-- .../date-picker/src/picker/date-picker.js | 14 +- .../date-picker/src/picker/time-picker.js | 10 +- packages/popover/src/main.vue | 6 + .../src/date-picker/date-picker.scss | 23 ++- .../src/date-picker/date-range-picker.scss | 12 +- .../src/date-picker/date-table.scss | 96 +++++++++--- .../src/date-picker/month-table.scss | 14 +- .../src/date-picker/picker-panel.scss | 8 +- .../theme-chalk/src/date-picker/picker.scss | 144 ++++++++++++++++-- .../src/date-picker/time-range-picker.scss | 2 +- .../src/date-picker/year-table.scss | 14 +- packages/theme-chalk/src/input.scss | 13 ++ packages/theme-chalk/src/table.scss | 2 +- packages/theme-chalk/src/time-select.scss | 1 + test/unit/specs/date-picker.spec.js | 60 +------- test/unit/specs/dropdown.spec.js | 4 - test/unit/specs/time-picker.spec.js | 8 +- 33 files changed, 478 insertions(+), 250 deletions(-) diff --git a/examples/docs/en-US/date-picker.md b/examples/docs/en-US/date-picker.md index 1419f4843..d930911cd 100644 --- a/examples/docs/en-US/date-picker.md +++ b/examples/docs/en-US/date-picker.md @@ -215,7 +215,9 @@ Picking a date range is supported. <el-date-picker v-model="value6" type="daterange" - placeholder="Pick a range"> + range-separator="To" + start-placeholder="Start date" + end-placeholder="End date"> </el-date-picker> </div> <div class="block"> @@ -224,7 +226,9 @@ Picking a date range is supported. v-model="value7" type="daterange" align="right" - placeholder="Pick a range" + range-separator="To" + start-placeholder="Start date" + end-placeholder="End date" :picker-options="pickerOptions2"> </el-date-picker> </div> @@ -279,13 +283,15 @@ Picking a date range is supported. |size | size of Input | string | large/small/mini | — | | editable | whether the input is editable | boolean | — | true | | clearable | Whether to show clear button | boolean | — | true | -| placeholder | placeholder | string | — | — | +| placeholder | placeholder in non-range mode | string | — | — | +| start-placeholder | placeholder for the start date in range mode | string | — | — | +| end-placeholder | placeholder for the end date in range mode | string | — | — | | type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date | | format | format of the picker | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd | | align | alignment | left/center/right | left | | popper-class | custom class name for DatePicker's dropdown | string | — | — | | picker-options | additional options, check the table below | object | — | {} | -| range-separator | range separator | string | - | ' - ' | +| range-separator | range separator | string | - | '-' | | default-value | optional default time of the picker | Date | anything accepted by `new Date()` | - | |name | same as `name` in native input | string | — | — | diff --git a/examples/docs/en-US/datetime-picker.md b/examples/docs/en-US/datetime-picker.md index 27381fba5..71f726546 100644 --- a/examples/docs/en-US/datetime-picker.md +++ b/examples/docs/en-US/datetime-picker.md @@ -175,7 +175,9 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex <el-date-picker v-model="value3" type="datetimerange" - placeholder="Select time range"> + range-separator="To" + start-placeholder="Start date" + end-placeholder="End date"> </el-date-picker> </div> <div class="block"> @@ -184,7 +186,9 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex v-model="value4" type="datetimerange" :picker-options="pickerOptions2" - placeholder="Select time range" + range-separator="To" + start-placeholder="Start date" + end-placeholder="End date" align="right"> </el-date-picker> </div> @@ -238,13 +242,15 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex | editable | whether the input is editable | boolean | — | true | | clearable | Whether to show clear button | boolean | — | true | |size | size of Input | string | large/small/mini | — | -| placeholder | placeholder | string | — | — | +| placeholder | placeholder in non-range mode | string | — | — | +| start-placeholder | placeholder for the start date in range mode | string | — | — | +| end-placeholder | placeholder for the end date in range mode | string | — | — | | type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date | | format | format of the picker | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd | | align | alignment | left/center/right | left | | popper-class | custom class name for DateTimePicker's dropdown | string | — | — | | picker-options | additional options, check the table below | object | — | {} | -| range-separator | range separator | string | - | ' - ' | +| range-separator | range separator | string | - | '-' | |name | same as `name` in native input | string | — | — | ### Picker Options diff --git a/examples/docs/en-US/i18n.md b/examples/docs/en-US/i18n.md index a59044db0..6b98f0b4b 100644 --- a/examples/docs/en-US/i18n.md +++ b/examples/docs/en-US/i18n.md @@ -102,7 +102,7 @@ const i18n = new VueI18n({ }) Vue.use(Element, { - i18n: (key, value) => i18n.t(key. value) + i18n: (key, value) => i18n.t(key, value) }) new Vue({ i18n }).$mount('#app') diff --git a/examples/docs/en-US/input-number.md b/examples/docs/en-US/input-number.md index 136bf58b6..90c1cccbf 100644 --- a/examples/docs/en-US/input-number.md +++ b/examples/docs/en-US/input-number.md @@ -127,7 +127,7 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`. ### Controls Position -:::demo Set `controls-position` to decide controls position +:::demo Set `controls-position` to decide the position of control buttons. ```html <template> <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number> diff --git a/examples/docs/en-US/time-picker.md b/examples/docs/en-US/time-picker.md index 76a10278f..e9aaab6cb 100644 --- a/examples/docs/en-US/time-picker.md +++ b/examples/docs/en-US/time-picker.md @@ -118,7 +118,9 @@ Can pick an arbitrary time range. <el-time-picker is-range v-model="value3" - placeholder="Pick a time range"> + range-separator="To" + start-placeholder="Start time" + end-placeholder="End time"> </el-time-picker> </template> @@ -156,11 +158,14 @@ Can pick an arbitrary time range. | editable | whether the input is editable | boolean | — | true | | clearable | Whether to show clear button | boolean | — | true | | size | size of Input | string | medium / small / mini | — | -| placeholder | placeholder | string | — | — | +| placeholder | placeholder in non-range mode | string | — | — | +| start-placeholder | placeholder for the start time in range mode | string | — | — | +| end-placeholder | placeholder for the end time in range mode | string | — | — | | value | value of the picker | date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss | | align | alignment | left / center / right | left | | popper-class | custom class name for TimePicker's dropdown | string | — | — | | picker-options | additional options, check the table below | object | — | {} | +| range-separator | range separator | string | - | '-' | |name | same as `name` in native input | string | — | — | ### Time Select Options diff --git a/examples/docs/zh-CN/date-picker.md b/examples/docs/zh-CN/date-picker.md index 7ed483a8a..cccd98e09 100644 --- a/examples/docs/zh-CN/date-picker.md +++ b/examples/docs/zh-CN/date-picker.md @@ -4,7 +4,7 @@ return { pickerOptions0: { disabledDate(time) { - return time.getTime() < Date.now() - 8.64e7; + return time.getTime() > Date.now(); } }, pickerOptions1: { @@ -133,7 +133,7 @@ return { pickerOptions0: { disabledDate(time) { - return time.getTime() < Date.now() - 8.64e7; + return time.getTime() > Date.now(); } }, pickerOptions1: { @@ -226,7 +226,9 @@ <el-date-picker v-model="value6" type="daterange" - placeholder="选择日期范围"> + range-separator="至" + start-placeholder="开始日期" + end-placeholder="结束日期"> </el-date-picker> </div> <div class="block"> @@ -235,7 +237,9 @@ v-model="value7" type="daterange" align="right" - placeholder="选择日期范围" + range-separator="至" + start-placeholder="开始日期" + end-placeholder="结束日期" :picker-options="pickerOptions2"> </el-date-picker> </div> @@ -289,13 +293,15 @@ | editable | 文本框可输入 | boolean | — | true | | clearable | 是否显示清除按钮 | boolean | — | true | | size | 输入框尺寸 | string | large, small, mini | — | -| placeholder | 占位内容 | string | — | — | +| placeholder | 非范围选择时的占位内容 | string | — | — | +| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — | +| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — | | type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date | | format | 时间日期格式化 | string | 年 `yyyy`,月 `MM`,日 `dd`,小时 `HH`,分 `mm`,秒 `ss` | yyyy-MM-dd | | align | 对齐方式 | string | left, center, right | left | | popper-class | DatePicker 下拉框的类名 | string | — | — | |picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} | -| range-separator | 选择范围时的分隔符 | string | - | ' - ' | +| range-separator | 选择范围时的分隔符 | string | - | '-' | | default-value | 可选,DatePicker打开时默认显示的时间 | Date | 可被new Date()解析 | - | | name | 原生属性 | string | — | — | diff --git a/examples/docs/zh-CN/datetime-picker.md b/examples/docs/zh-CN/datetime-picker.md index 8b54cb1cb..dd4bdb50c 100644 --- a/examples/docs/zh-CN/datetime-picker.md +++ b/examples/docs/zh-CN/datetime-picker.md @@ -174,7 +174,9 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生,`Picker Options` 或者其 <el-date-picker v-model="value3" type="datetimerange" - placeholder="选择时间范围"> + range-separator="至" + start-placeholder="开始日期" + end-placeholder="结束日期"> </el-date-picker> </div> <div class="block"> @@ -183,7 +185,9 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生,`Picker Options` 或者其 v-model="value4" type="datetimerange" :picker-options="pickerOptions2" - placeholder="选择时间范围" + range-separator="至" + start-placeholder="开始日期" + end-placeholder="结束日期" align="right"> </el-date-picker> </div> @@ -237,13 +241,15 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生,`Picker Options` 或者其 | editable | 文本框可输入 | boolean | — | true | | clearable | 是否显示清除按钮 | boolean | — | true | | size | 输入框尺寸 | string | large, small, mini | — | -| placeholder | 占位内容 | string | — | — | +| placeholder | 非范围选择时的占位内容 | string | — | — | +| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — | +| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — | | type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date | | format | 时间日期格式化 | string | 年 `yyyy`,月 `MM`,日 `dd`,小时 `HH`,分 `mm`,秒 `ss` | yyyy-MM-dd | | align | 对齐方式 | string | left, center, right | left | | popper-class | DateTimePicker 下拉框的类名 | string | — | — | | picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} | -| range-separator | 选择范围时的分隔符 | string | - | ' - ' | +| range-separator | 选择范围时的分隔符 | string | - | '-' | | name | 原生属性 | string | — | — | ### Picker Options diff --git a/examples/docs/zh-CN/i18n.md b/examples/docs/zh-CN/i18n.md index 27945dfe4..78a1eae4a 100644 --- a/examples/docs/zh-CN/i18n.md +++ b/examples/docs/zh-CN/i18n.md @@ -114,7 +114,7 @@ const i18n = new VueI18n({ }) Vue.use(Element, { - i18n: (key, value) => i18n.vm._t(key, value) + i18n: (key, value) => i18n._t(key, value) }) new Vue({ i18n }).$mount('#app') diff --git a/examples/docs/zh-CN/time-picker.md b/examples/docs/zh-CN/time-picker.md index 7177ee5c9..6b4dc2eb1 100644 --- a/examples/docs/zh-CN/time-picker.md +++ b/examples/docs/zh-CN/time-picker.md @@ -117,6 +117,9 @@ <el-time-picker is-range v-model="value3" + range-separator="至" + start-placeholder="开始时间" + end-placeholder="结束时间" placeholder="选择时间范围"> </el-time-picker> </template> @@ -155,11 +158,14 @@ | editable | 文本框可输入 | boolean | — | true | | clearable | 是否显示清除按钮 | boolean | — | true | | size | 输入框尺寸 | string | medium / small / mini | — | -| placeholder | 占位内容 | string | — | — | +| placeholder | 非范围选择时的占位内容 | string | — | — | +| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — | +| end-placeholder | 范围选择时开始日期的占位内容 | string | — | — | | value | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — | | align | 对齐方式 | string | left / center / right | left | | popper-class | TimePicker 下拉框的类名 | string | — | — | | picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} | +| range-separator | 选择范围时的分隔符 | string | - | '-' | | name | 原生属性 | string | — | — | ### Time Select Options diff --git a/examples/play/index.vue b/examples/play/index.vue index 51031f081..a1b8e0c85 100644 --- a/examples/play/index.vue +++ b/examples/play/index.vue @@ -1,9 +1,5 @@ <template> <div style="margin: 20px;"> - <el-pagination - layout="prev, pager, next, jumper" - :total="50"> - </el-pagination> </div> </template> <script> diff --git a/packages/date-picker/src/basic/date-table.vue b/packages/date-picker/src/basic/date-table.vue index 17216acc7..3752148ca 100644 --- a/packages/date-picker/src/basic/date-table.vue +++ b/packages/date-picker/src/basic/date-table.vue @@ -17,8 +17,13 @@ :class="{ current: isWeekActive(row[1]) }"> <td v-for="cell in row" - :class="getCellClasses(cell)" - v-text="cell.type === 'today' ? t('el.datepicker.today') : cell.text"></td> + :class="getCellClasses(cell)"> + <div> + <span> + {{ cell.text }} + </span> + </div> + </td> </tr> </tbody> </table> @@ -313,9 +318,9 @@ const rows = this.rows; const minDate = this.minDate; - for (var i = 0, k = rows.length; i < k; i++) { + for (let i = 0, k = rows.length; i < k; i++) { const row = rows[i]; - for (var j = 0, l = row.length; j < l; j++) { + for (let j = 0, l = row.length; j < l; j++) { if (this.showWeekNumber && j === 0) continue; const cell = row[j]; @@ -338,7 +343,13 @@ rangeState: this.rangeState }); - const target = event.target; + let target = event.target; + if (target.tagName === 'SPAN') { + target = target.parentNode.parentNode; + } + if (target.tagName === 'DIV') { + target = target.parentNode; + } if (target.tagName !== 'TD') return; const column = target.cellIndex; @@ -355,11 +366,17 @@ handleClick(event) { let target = event.target; + if (target.tagName === 'SPAN') { + target = target.parentNode.parentNode; + } + if (target.tagName === 'DIV') { + target = target.parentNode; + } if (target.tagName !== 'TD') return; if (hasClass(target, 'disabled') || hasClass(target, 'week')) return; - var selectionMode = this.selectionMode; + const selectionMode = this.selectionMode; if (selectionMode === 'week') { target = target.parentNode.cells[1]; @@ -407,6 +424,9 @@ this.$emit('pick', { minDate, maxDate }, false); this.rangeState.selecting = true; this.markRange(this.minDate); + this.$nextTick(() => { + this.handleMouseMove(event); + }); } else if (this.minDate && !this.maxDate) { if (newDate >= this.minDate) { const maxDate = new Date(newDate.getTime()); diff --git a/packages/date-picker/src/panel/date-range.vue b/packages/date-picker/src/panel/date-range.vue index 60406d360..c2cb142e2 100644 --- a/packages/date-picker/src/panel/date-range.vue +++ b/packages/date-picker/src/panel/date-range.vue @@ -2,7 +2,6 @@ <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')"> <div v-show="visible" - :style="{ width: width + 'px' }" class="el-picker-panel el-date-range-picker el-popper" :class="[{ 'has-sidebar': $slots.sidebar || shortcuts, @@ -39,7 +38,6 @@ @focus="minTimePickerVisible = !minTimePickerVisible" @change.native="handleTimeChange($event, 'min')" /> <time-picker - :picker-width="minPickerWidth" ref="minTimePicker" :date="minDate" @pick="handleMinTimePick" @@ -71,7 +69,6 @@ :readonly="!minDate" @change.native="handleTimeChange($event, 'max')" /> <time-picker - :picker-width="maxPickerWidth" ref="maxTimePicker" :date="maxDate" @pick="handleMaxTimePick" @@ -238,8 +235,6 @@ data() { return { popperClass: '', - minPickerWidth: 0, - maxPickerWidth: 0, date: this.$options.defaultValue ? calcDefaultValue(this.$options.defaultValue) : new Date(), minDate: '', maxDate: '', @@ -257,26 +252,11 @@ firstDayOfWeek: 7, minTimePickerVisible: false, maxTimePickerVisible: false, - width: 0, format: '' }; }, watch: { - showTime(val) { - if (!val) return; - this.$nextTick(_ => { - const minInputElm = this.$refs.minInput.$el; - const maxInputElm = this.$refs.maxInput.$el; - if (minInputElm) { - this.minPickerWidth = minInputElm.getBoundingClientRect().width + 10; - } - if (maxInputElm) { - this.maxPickerWidth = maxInputElm.getBoundingClientRect().width + 10; - } - }); - }, - minDate() { this.$nextTick(() => { if (this.maxDate && this.maxDate < this.minDate) { @@ -429,7 +409,7 @@ return new Date(oldDate.getTime()); }, - handleMinTimePick(value, visible, first) { + handleMinTimePick(value, visible, user, first) { this.minDate = this.minDate || new Date(); if (value) { this.minDate = this.setTime(this.minDate, value); @@ -440,7 +420,7 @@ } }, - handleMaxTimePick(value, visible, first) { + handleMaxTimePick(value, visible, user, first) { if (!this.maxDate) { const now = new Date(); if (now >= this.minDate) { @@ -478,9 +458,7 @@ }, handleConfirm(visible = false, user = true) { - if (this.minDate && this.maxDate) { - this.$emit('pick', [this.minDate, this.maxDate], visible, user); - } + this.$emit('pick', [this.minDate, this.maxDate], visible, user); }, resetDate() { diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue index 1aa2237f3..d40689c2b 100644 --- a/packages/date-picker/src/panel/date.vue +++ b/packages/date-picker/src/panel/date.vue @@ -2,9 +2,6 @@ <transition name="el-zoom-in-top" @after-enter="handleEnter" @after-leave="handleLeave"> <div v-show="visible" - :style="{ - width: width + 'px' - }" class="el-picker-panel el-date-picker el-popper" :class="[{ 'has-sidebar': $slots.sidebar || shortcuts, @@ -39,14 +36,16 @@ <time-picker ref="timepicker" :date="date" - :picker-width="pickerWidth" @pick="handleTimePick" :visible="timePickerVisible" @mounted="$refs.timepicker.format=timeFormat"> </time-picker> </span> </div> - <div class="el-date-picker__header" v-show="currentView !== 'time'"> + <div + class="el-date-picker__header" + :class="{ 'el-date-picker__header--bordered': currentView === 'year' || currentView === 'month' }" + v-show="currentView !== 'time'"> <button type="button" @click="prevYear" @@ -139,17 +138,6 @@ mixins: [Locale], watch: { - showTime(val) { - /* istanbul ignore if */ - if (!val) return; - this.$nextTick(_ => { - const inputElm = this.$refs.input.$el; - if (inputElm) { - this.pickerWidth = inputElm.getBoundingClientRect().width + 10; - } - }); - }, - value(newVal) { if (!newVal) return; newVal = new Date(newVal); @@ -190,7 +178,7 @@ methods: { handleClear() { this.date = this.$options.defaultValue ? new Date(this.$options.defaultValue) : new Date(); - this.$emit('pick', this.date); + this.$emit('pick'); }, resetDate() { @@ -328,7 +316,6 @@ }, confirm() { - console.log(111); this.date.setMilliseconds(0); this.$emit('pick', this.date); }, @@ -421,7 +408,6 @@ data() { return { popperClass: '', - pickerWidth: 0, date: this.$options.defaultValue ? new Date(this.$options.defaultValue) : new Date(), value: '', showTime: false, @@ -436,7 +422,6 @@ week: null, showWeekNumber: false, timePickerVisible: false, - width: 0, format: '' }; }, diff --git a/packages/date-picker/src/panel/time-range.vue b/packages/date-picker/src/panel/time-range.vue index f8f15d021..e61fd2057 100644 --- a/packages/date-picker/src/panel/time-range.vue +++ b/packages/date-picker/src/panel/time-range.vue @@ -5,7 +5,6 @@ @after-leave="$emit('dodestroy')"> <div v-show="visible" - :style="{ width: width + 'px' }" class="el-time-range-picker el-picker-panel el-popper" :class="popperClass"> <div class="el-time-range-picker__content"> @@ -118,7 +117,6 @@ minSeconds: time.minTime.getSeconds(), format: 'HH:mm:ss', visible: false, - width: 0, selectionRange: [0, 2] }; }, @@ -208,12 +206,12 @@ }, setMinSelectionRange(start, end) { - this.$emit('select-range', start, end); + this.$emit('select-range', start, end, 'min'); this.selectionRange = [start, end]; }, setMaxSelectionRange(start, end) { - this.$emit('select-range', start + this.offset, end + this.offset); + this.$emit('select-range', start, end, 'max'); this.selectionRange = [start + this.offset, end + this.offset]; }, diff --git a/packages/date-picker/src/panel/time.vue b/packages/date-picker/src/panel/time.vue index 89a4c8109..447cfcad4 100644 --- a/packages/date-picker/src/panel/time.vue +++ b/packages/date-picker/src/panel/time.vue @@ -2,7 +2,6 @@ <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')"> <div v-show="currentVisible" - :style="{width: width + 'px'}" class="el-time-panel el-popper" :class="popperClass"> <div class="el-time-panel__content" :class="{ 'has-seconds': showSeconds }"> @@ -43,7 +42,6 @@ }, props: { - pickerWidth: {}, date: { default() { return new Date(); @@ -63,10 +61,6 @@ } }, - pickerWidth(val) { - this.width = val; - }, - value(newVal) { let date; if (newVal instanceof Date) { @@ -88,6 +82,7 @@ }, date(val) { + if (!val) return; this.currentDate = val; this.reinitDate(); } @@ -107,7 +102,6 @@ selectableRange: [], currentDate: this.$options.defaultValue || this.date || new Date(), currentVisible: this.visible || false, - width: this.pickerWidth || 0, selectionRange: [0, 2], disabled: false }; @@ -159,7 +153,7 @@ handleConfirm(visible = false, first, notUser = false) { if (first) return; const date = new Date(limitRange(this.currentDate, this.selectableRange, 'HH:mm:ss')); - this.$emit('pick', date, visible, !notUser); + this.$emit('pick', date, visible, !notUser, false); }, adjustScrollTop() { diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue index bdec2e2ce..81bf1db0d 100644 --- a/packages/date-picker/src/picker.vue +++ b/packages/date-picker/src/picker.vue @@ -6,6 +6,7 @@ :disabled="disabled" :size="size" :name="name" + v-if="!ranged" v-clickoutside="handleClose" :placeholder="placeholder" @focus="handleFocus" @@ -25,6 +26,40 @@ v-if="haveTrigger"> </i> </el-input> + <div + class="el-date-editor el-range-editor el-input__inner" + :class="[ + 'el-date-editor--' + type, + 'el-range-editor--' + size, + pickerVisible ? 'is-active' : '' + ]" + @click="handleRangeClick" + @mouseenter="handleMouseEnter" + @mouseleave="showClose = false" + ref="reference" + v-clickoutside="handleClose" + v-else> + <i :class="['el-input__icon', 'el-range__icon', triggerClass]"></i> + <input + :placeholder="startPlaceholder" + :value="displayValue && displayValue[0]" + @keydown="handleKeydown" + @change="handleStartChange" + class="el-range-input"> + <span class="el-range-separator">{{ rangeSeparator }}</span> + <input + :placeholder="endPlaceholder" + :value="displayValue && displayValue[1]" + @keydown="handleKeydown" + @change="handleEndChange" + class="el-range-input"> + <i + @click="handleClickIcon" + v-if="haveTrigger" + :class="{ 'el-icon-circle-close': showClose }" + class="el-input__icon el-range__close-icon"> + </i> + </div> </template> <script> @@ -79,19 +114,21 @@ const DATE_FORMATTER = function(value, format) { const DATE_PARSER = function(text, format) { return parseDate(text, format); }; -const RANGE_FORMATTER = function(value, format, separator) { +const RANGE_FORMATTER = function(value, format) { if (Array.isArray(value) && value.length === 2) { const start = value[0]; const end = value[1]; if (start && end) { - return formatDate(start, format) + separator + formatDate(end, format); + return [formatDate(start, format), formatDate(end, format)]; } } return ''; }; -const RANGE_PARSER = function(text, format, separator) { - const array = text.split(separator); +const RANGE_PARSER = function(array, format, separator) { + if (!Array.isArray(array)) { + array = array.split(separator); + } if (array.length === 2) { const range1 = array[0]; const range2 = array[1]; @@ -210,6 +247,8 @@ export default { format: String, readonly: Boolean, placeholder: String, + startPlaceholder: String, + endPlaceholder: String, name: String, disabled: Boolean, clearable: { @@ -228,7 +267,7 @@ export default { value: {}, defaultValue: {}, rangeSeparator: { - default: ' - ' + default: '-' }, pickerOptions: {} }, @@ -272,13 +311,20 @@ export default { }, computed: { + ranged() { + return this.type.indexOf('range') > -1; + }, + reference() { - return this.$refs.reference.$el; + const reference = this.$refs.reference; + return reference.$el || reference; }, refInput() { - if (this.reference) return this.reference.querySelector('input'); - return {}; + if (this.reference) { + return [].slice.call(this.reference.querySelectorAll('input')); + } + return []; }, valueIsEmpty() { @@ -330,7 +376,7 @@ export default { ).formatter; const format = DEFAULT_FORMATS[this.type]; - return formatter(value, this.format || format, this.rangeSeparator); + return formatter(value, this.format || format); }, set(value) { @@ -340,7 +386,7 @@ export default { TYPE_VALUE_RESOLVER_MAP[type] || TYPE_VALUE_RESOLVER_MAP['default'] ).parser; - const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type], this.rangeSeparator); + const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]); if (parsedValue && this.picker) { this.picker.value = parsedValue; @@ -371,11 +417,28 @@ export default { } }, - handleClickIcon() { + handleStartChange(event) { + if (this.displayValue && this.displayValue[1]) { + this.displayValue = [event.target.value, this.displayValue[1]]; + } else { + this.displayValue = [event.target.value, event.target.value]; + } + }, + + handleEndChange(event) { + if (this.displayValue && this.displayValue[0]) { + this.displayValue = [this.displayValue[0], event.target.value]; + } else { + this.displayValue = [event.target.value, event.target.value]; + } + }, + + handleClickIcon(event) { if (this.readonly || this.disabled) return; if (this.showClose) { this.currentValue = this.$options.defaultValue || ''; this.showClose = false; + event.stopPropagation(); } else { this.pickerVisible = !this.pickerVisible; } @@ -397,6 +460,9 @@ export default { handleClose() { this.pickerVisible = false; + if (this.ranged) { + this.$emit('blur', this); + } }, handleFocus() { @@ -422,6 +488,15 @@ export default { } }, + handleRangeClick() { + const type = this.type; + + if (HAVE_TRIGGER_TYPES.indexOf(type) !== -1 && !this.pickerVisible) { + this.pickerVisible = true; + } + this.$emit('focus', this); + }, + hidePicker() { if (this.picker) { this.picker.resetView && this.picker.resetView(); @@ -503,9 +578,15 @@ export default { this.picker.resetView && this.picker.resetView(); }); - this.picker.$on('select-range', (start, end) => { - this.refInput.setSelectionRange(start, end); - this.refInput.focus(); + this.picker.$on('select-range', (start, end, pos) => { + if (this.refInput.length === 0) return; + if (!pos || pos === 'min') { + this.refInput[0].setSelectionRange(start, end); + this.refInput[0].focus(); + } else if (pos === 'max') { + this.refInput[1].setSelectionRange(start, end); + this.refInput[1].focus(); + } }); }, diff --git a/packages/date-picker/src/picker/date-picker.js b/packages/date-picker/src/picker/date-picker.js index 836d9016b..aa03ffa07 100644 --- a/packages/date-picker/src/picker/date-picker.js +++ b/packages/date-picker/src/picker/date-picker.js @@ -43,11 +43,17 @@ export default { // TAB or ESC or Enter if (keyCode === 9 || keyCode === 27 || keyCode === 13) { - this.pickerVisible = false; + !this.ranged && (this.pickerVisible = false); event.stopPropagation(); - this.picker.confirm(); - this.currentValue = this.picker.date; - this.$refs.reference.$refs.input.blur(); + this.picker.confirm && this.picker.confirm(); + !this.ranged && (this.currentValue = this.picker.date); + if (this.$refs.reference.$refs) { + this.$refs.reference.$refs.input.blur(); + } else { + [].slice.call(this.$refs.reference.querySelectorAll('input')).forEach(input => { + input.blur(); + }); + } return; } diff --git a/packages/date-picker/src/picker/time-picker.js b/packages/date-picker/src/picker/time-picker.js index 467621d30..bae7adb8f 100644 --- a/packages/date-picker/src/picker/time-picker.js +++ b/packages/date-picker/src/picker/time-picker.js @@ -66,8 +66,14 @@ export default { } if (keyCode === 13) { - this.picker.handleConfirm(); - this.$refs.reference.$refs.input.blur(); + !this.isRange && this.picker.handleConfirm(); + if (this.$refs.reference.$refs) { + this.$refs.reference.$refs.input.blur(); + } else { + [].slice.call(this.$refs.reference.querySelectorAll('input')).forEach(input => { + input.blur(); + }); + } event.preventDefault(); return; } diff --git a/packages/popover/src/main.vue b/packages/popover/src/main.vue index 1b34a49ec..88ff571a3 100644 --- a/packages/popover/src/main.vue +++ b/packages/popover/src/main.vue @@ -52,6 +52,12 @@ export default { watch: { showPopper(newVal, oldVal) { newVal ? this.$emit('show') : this.$emit('hide'); + }, + '$refs.reference': { + deep: true, + handler(val) { + console.log(val); + } } }, diff --git a/packages/theme-chalk/src/date-picker/date-picker.scss b/packages/theme-chalk/src/date-picker/date-picker.scss index 75a5beaab..404e149ac 100644 --- a/packages/theme-chalk/src/date-picker/date-picker.scss +++ b/packages/theme-chalk/src/date-picker/date-picker.scss @@ -3,22 +3,18 @@ @import "./picker-panel.scss"; @include b(date-picker) { - min-width: 254px; + width: 322px; &.has-sidebar.has-time { - min-width: 434px; + width: 434px; } &.has-sidebar { - min-width: 370px; - } - - &.has-time { - min-width: 324px; + width: 438px; } .el-picker-panel__content { - min-width: 224px; + width: 292px; } table { @@ -45,6 +41,16 @@ @include e(header) { margin: 12px; text-align: center; + + @include m(bordered) { + margin-bottom: 0; + padding-bottom: 12px; + border-bottom: solid 1px $--border-color-lighter; + + & + .el-picker-panel__content { + margin-top: 0; + } + } } @include e(header-label) { @@ -53,6 +59,7 @@ line-height: 22px; text-align: center; cursor: pointer; + color: $--color-text-regular; &:hover { color: $--datepicker-text-hover-color; diff --git a/packages/theme-chalk/src/date-picker/date-range-picker.scss b/packages/theme-chalk/src/date-picker/date-range-picker.scss index d62124123..6dc282faf 100644 --- a/packages/theme-chalk/src/date-picker/date-range-picker.scss +++ b/packages/theme-chalk/src/date-picker/date-range-picker.scss @@ -1,18 +1,10 @@ @import "../common/var"; @include b(date-range-picker) { - min-width: 520px; - - &.has-sidebar.has-time { - min-width: 766px; - } + width: 646px; &.has-sidebar { - min-width: 620px; - } - - &.has-time { - min-width: 660px; + width: 756px; } table { diff --git a/packages/theme-chalk/src/date-picker/date-table.scss b/packages/theme-chalk/src/date-picker/date-table.scss index e4aef74ca..2d0050d89 100644 --- a/packages/theme-chalk/src/date-picker/date-table.scss +++ b/packages/theme-chalk/src/date-picker/date-table.scss @@ -3,16 +3,30 @@ @include b(date-table) { font-size: 12px; - min-width: 224px; user-select: none; @include when(week-mode) { .el-date-table__row { &:hover { - background-color: $--datepicker-cell-hover-color; + div { + background-color: $--datepicker-inrange-color; + } + td.available:hover { + color: $--datepicker-color; + } + td:first-child div { + margin-left: 5px; + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; + } + td:last-child div { + margin-right: 5px; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; + } } - &.current { + &.current div { background-color: $--datepicker-inrange-color; } } @@ -20,10 +34,30 @@ td { width: 32px; - height: 32px; + height: 30px; + padding: 4px 0; box-sizing: border-box; text-align: center; cursor: pointer; + position: relative; + + & div { + height: 30px; + padding: 3px 0; + box-sizing: border-box; + } + + & span { + width: 24px; + height: 24px; + display: block; + margin: 0 auto; + line-height: 24px; + position: absolute; + left: 50%; + transform: translateX(-50%); + border-radius: 50%; + } &.next-month, &.prev-month { @@ -31,43 +65,58 @@ } &.today { - color: $--datepicker-text-hover-color; position: relative; - &:before { - content: " "; - position: absolute; - top: 0; - right: 0; - width: 0; - height: 0; - border-top: 0.5em solid $--datepicker-active-color; - border-left: .5em solid transparent; + span { + color: $--color-primary; + } + &.start-date span, + &.end-date span { + color: $--color-white; } } &.available:hover { - background-color: $--datepicker-cell-hover-color; + color: $--datepicker-text-hover-color; } - &.in-range { + &.in-range div { background-color: $--datepicker-inrange-color; &:hover { background-color: $--datepicker-inrange-hover-color; } } - &.current:not(.disabled), - &.start-date, - &.end-date { - background-color: $--datepicker-active-color !important; + &.current:not(.disabled) span { + color: $--color-white; + background-color: $--datepicker-active-color; + } + &.start-date div, + &.end-date div { color: $--color-white; } - &.disabled { - background-color: #f4f4f4; + &.start-date span, + &.end-date span { + background-color: $--datepicker-active-color; + } + + &.start-date div { + margin-left: 5px; + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; + } + + &.end-date div { + margin-right: 5px; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; + } + + &.disabled div { + background-color: $--background-color-base; opacity: 1; cursor: not-allowed; - color: #ccc; + color: $--color-text-placeholder; } &.week { @@ -80,5 +129,6 @@ padding: 5px; color: $--datepicker-header-color; font-weight: 400; + border-bottom: solid 1px $--border-color-lighter; } } diff --git a/packages/theme-chalk/src/date-picker/month-table.scss b/packages/theme-chalk/src/date-picker/month-table.scss index 8e2f88734..37b7c1ecb 100644 --- a/packages/theme-chalk/src/date-picker/month-table.scss +++ b/packages/theme-chalk/src/date-picker/month-table.scss @@ -11,9 +11,13 @@ cursor: pointer; &.disabled .cell { - background-color: #f4f4f4; + background-color: $--background-color-base; cursor: not-allowed; - color: #ccc; + color: $--color-text-placeholder; + + &:hover { + color: $--color-text-placeholder; + } } .cell { @@ -22,15 +26,15 @@ display: block; line-height: 32px; color: $--datepicker-color; + margin: 0 auto; &:hover { - background-color: $--datepicker-cell-hover-color; + color: $--datepicker-text-hover-color; } } &.current:not(.disabled) .cell { - background-color: $--datepicker-active-color !important; - color: $--color-white; + color: $--datepicker-active-color; } } } diff --git a/packages/theme-chalk/src/date-picker/picker-panel.scss b/packages/theme-chalk/src/date-picker/picker-panel.scss index f7dd5dc8e..bd62f76ee 100644 --- a/packages/theme-chalk/src/date-picker/picker-panel.scss +++ b/packages/theme-chalk/src/date-picker/picker-panel.scss @@ -6,7 +6,7 @@ box-shadow: $--box-shadow-light; background: $--color-white; border-radius: $--border-radius-base; - line-height: 20px; + line-height: 30px; margin: 5px 0; @include e((body, body-wrapper)) { @@ -44,7 +44,7 @@ cursor: pointer; &:hover { - background-color: $--datepicker-cell-hover-color; + color: $--datepicker-text-hover-color; } &.active { @@ -77,7 +77,7 @@ background: transparent; cursor: pointer; outline: none; - margin-top: 3px; + margin-top: 8px; &:hover { color: $--datepicker-text-hover-color; @@ -106,7 +106,7 @@ border-right: 1px solid $--datepicker-inner-border-color; box-sizing: border-box; padding-top: 6px; - background-color: $--color-black; + background-color: $--color-white; overflow: auto; } diff --git a/packages/theme-chalk/src/date-picker/picker.scss b/packages/theme-chalk/src/date-picker/picker.scss index 9937d352b..96aa6d64a 100644 --- a/packages/theme-chalk/src/date-picker/picker.scss +++ b/packages/theme-chalk/src/date-picker/picker.scss @@ -5,30 +5,144 @@ @include b(date-editor) { position: relative; display: inline-block; + text-align: left; - &.el-input { - width: 193px; + &.el-input, + &.el-input__inner { + width: 220px; } - @include m(daterange) { - &.el-input { - width: 220px; + @include m((daterange, timerange)) { + &.el-input, + &.el-input__inner { + width: 320px; } } @include m(datetimerange) { - &.el-input { - width: 350px; + &.el-input, + &.el-input__inner { + width: 370px; } } - .el-picker-panel { - position: absolute; - min-width: 180px; - box-sizing: border-box; - box-shadow: 0 2px 6px #ccc; - background: $--color-white; - z-index: 10; - top: 41px; + .el-range__icon { + font-size: 14px; + margin-left: -5px; + color: $--color-text-placeholder; + float: left; + line-height: 32px; + } + + .el-range-input { + appearance: none; + border: none; + outline: none; + display: inline-block; + height: 100%; + margin: 0; + padding: 0; + width: 38%; + text-align: center; + font-size: $--font-size-base; + color: $--color-text-regular; + + &::placeholder { + color: $--color-text-placeholder; + } + } + + .el-range-separator { + display: inline-block; + height: 100%; + padding: 0 5px; + margin: 0; + line-height: 32px; + color: $--color-text-primary; + font-size: 14px; + width: 5%; + } + + .el-range__close-icon { + font-size: 14px; + color: $--color-text-placeholder; + width: 25px; + display: inline-block; + float: right; + line-height: 32px; + } +} + +@include b(range-editor) { + &.el-input__inner { + padding: 3px 10px; + } + + @include when(active) { + border-color: $--color-primary; + + &:hover { + border-color: $--color-primary; + } + } + + @include m(medium) { + &.el-input__inner { + height: $--input-medium-height; + } + + .el-range-separator { + line-height: 28px; + font-size: $--input-medium-font-size; + } + + .el-range-input { + font-size: $--input-medium-font-size; + } + + .el-range__icon, + .el-range__close-icon { + line-height: 28px; + } + } + + @include m(small) { + &.el-input__inner { + height: $--input-small-height; + } + + .el-range-separator { + line-height: 24px; + font-size: $--input-small-font-size; + } + + .el-range-input { + font-size: $--input-small-font-size; + } + + .el-range__icon, + .el-range__close-icon { + line-height: 24px; + } + } + + @include m(mini) { + &.el-input__inner { + height: $--input-mini-height; + } + + .el-range-separator { + line-height: 20px; + font-size: $--input-mini-font-size; + } + + .el-range-input { + font-size: $--input-mini-font-size; + } + + .el-range__icon, + .el-range__close-icon { + line-height: 20px; + } } } diff --git a/packages/theme-chalk/src/date-picker/time-range-picker.scss b/packages/theme-chalk/src/date-picker/time-range-picker.scss index 4ee9c0401..a2bf6293d 100644 --- a/packages/theme-chalk/src/date-picker/time-range-picker.scss +++ b/packages/theme-chalk/src/date-picker/time-range-picker.scss @@ -1,7 +1,7 @@ @import "../common/var"; @include b(time-range-picker) { - min-width: 354px; + width: 354px; overflow: visible; @include e(content) { diff --git a/packages/theme-chalk/src/date-picker/year-table.scss b/packages/theme-chalk/src/date-picker/year-table.scss index 09a2b925e..9e2d60c95 100644 --- a/packages/theme-chalk/src/date-picker/year-table.scss +++ b/packages/theme-chalk/src/date-picker/year-table.scss @@ -15,9 +15,13 @@ cursor: pointer; &.disabled .cell { - background-color: #f4f4f4; + background-color: $--background-color-base; cursor: not-allowed; - color: #ccc; + color: $--color-text-placeholder; + + &:hover { + color: $--color-text-placeholder; + } } .cell { @@ -26,15 +30,15 @@ display: block; line-height: 32px; color: $--datepicker-color; + margin: 0 auto; &:hover { - background-color: $--datepicker-cell-hover-color; + color: $--datepicker-text-hover-color; } } &.current:not(.disabled) .cell { - background-color: $--datepicker-active-color !important; - color: $--color-white; + color: $--datepicker-active-color; } } } diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss index 9ded1c804..93d967933 100644 --- a/packages/theme-chalk/src/input.scss +++ b/packages/theme-chalk/src/input.scss @@ -69,6 +69,7 @@ width: 25px; text-align: center; transition: all .3s; + line-height: $--input-height; &:after { content: ''; @@ -125,6 +126,10 @@ @include e(inner) { height: $--input-medium-height; } + + .el-input__icon { + line-height: $--input-medium-height; + } } @include m(small) { font-size: $--input-small-font-size; @@ -132,6 +137,10 @@ @include e(inner) { height: $--input-small-height; } + + .el-input__icon { + line-height: $--input-small-height; + } } @include m(mini) { font-size: $--input-mini-font-size; @@ -139,6 +148,10 @@ @include e(inner) { height: $--input-mini-height; } + + .el-input__icon { + line-height: $--input-mini-height; + } } } diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss index 83d2c261f..64c5b8493 100644 --- a/packages/theme-chalk/src/table.scss +++ b/packages/theme-chalk/src/table.scss @@ -44,7 +44,7 @@ color: #666; font-size: 12px; transition: transform 0.2s ease-in-out; - height: 40px; + height: 20px; @include m(expanded) { transform: rotate(90deg); diff --git a/packages/theme-chalk/src/time-select.scss b/packages/theme-chalk/src/time-select.scss index 5359d717b..53ca52f9a 100644 --- a/packages/theme-chalk/src/time-select.scss +++ b/packages/theme-chalk/src/time-select.scss @@ -16,6 +16,7 @@ .time-select-item { padding: 8px 10px; font-size: 14px; + line-height: 20px; } .time-select-item.selected:not(.disabled) { diff --git a/test/unit/specs/date-picker.spec.js b/test/unit/specs/date-picker.spec.js index ba5935569..b921ea116 100644 --- a/test/unit/specs/date-picker.spec.js +++ b/test/unit/specs/date-picker.spec.js @@ -302,8 +302,7 @@ describe('DatePicker', () => { const input = vm.$el.querySelector('input'); - input.blur(); - input.focus(); + input.click(); setTimeout(_ => { const picker = vm.$refs.compo.picker; @@ -628,8 +627,7 @@ describe('DatePicker', () => { }, true); const input = vm.$el.querySelector('input'); - input.blur(); - input.focus(); + input.click(); setTimeout(_ => { const panels = vm.picker.$el.querySelectorAll('.el-date-range-picker__content'); @@ -659,10 +657,8 @@ describe('DatePicker', () => { type: 'datetimerange', value: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)] }, true); - const input = vm.$el.querySelector('input'); - input.blur(); - input.focus(); + vm.$el.click(); setTimeout(done, DELAY); }); @@ -673,56 +669,6 @@ describe('DatePicker', () => { expect(Array.prototype.slice.call(vm.picker.$el.querySelectorAll('.el-time-panel'))).to.length(2); }); - it('click timepicker', done => { - const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[1]; - input.blur(); - input.focus(); - input.blur(); - - setTimeout(_ => { - expect(vm.picker.$el.querySelector('.el-date-range-picker__time-picker-wrap .el-time-panel')).to.have.deep.property('style.display').to.equal(''); - done(); - }, DELAY); - }); - - it('click timepicker in right', done => { - const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[3]; - input.blur(); - input.focus(); - input.blur(); - - setTimeout(_ => { - expect(vm.picker.$el.querySelectorAll('.el-date-range-picker__time-picker-wrap .el-time-panel')[1]).to.have.deep.property('style.display').to.equal(''); - done(); - }, DELAY); - }); - - it('input timepicker', done => { - const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[1]; - - input.value = '10:22:14'; - triggerEvent(input, 'change', true); - setTimeout(_ => { - expect(vm.picker.minDate.getHours()).to.equal(10); - expect(vm.picker.minDate.getMinutes()).to.equal(22); - expect(vm.picker.minDate.getSeconds()).to.equal(14); - done(); - }, DELAY); - }); - - it('input timepicker in right', done => { - const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[3]; - - input.value = '10:22:14'; - triggerEvent(input, 'change', true); - setTimeout(_ => { - expect(vm.picker.maxDate.getHours()).to.equal(10); - expect(vm.picker.maxDate.getMinutes()).to.equal(22); - expect(vm.picker.maxDate.getSeconds()).to.equal(14); - done(); - }, DELAY); - }); - it('select daterange', done => { const pickers = vm.picker.$el.querySelectorAll('.el-date-range-picker__content'); const leftCell = pickers[0].querySelector('td.available'); diff --git a/test/unit/specs/dropdown.spec.js b/test/unit/specs/dropdown.spec.js index 4aa19ccbc..a2e31bf53 100644 --- a/test/unit/specs/dropdown.spec.js +++ b/test/unit/specs/dropdown.spec.js @@ -34,7 +34,6 @@ describe('Dropdown', () => { triggerEvent(triggerElm, 'mouseleave'); setTimeout(_ => { expect(dropdown.visible).to.not.true; - destroyVM(vm); done(); }, 300); }, 400); @@ -75,7 +74,6 @@ describe('Dropdown', () => { setTimeout(_ => { expect(dropdown.visible).to.not.true; expect(callback.calledWith(myCommandObject)).to.be.true; - destroyVM(vm); done(); }, 300); }, 300); @@ -108,7 +106,6 @@ describe('Dropdown', () => { triggerElm.click(); dropdown.$nextTick(_ => { expect(dropdown.visible).to.be.true; - destroyVM(vm); done(); }); }); @@ -148,7 +145,6 @@ describe('Dropdown', () => { triggerEvent(triggerElm, 'mouseleave'); setTimeout(_ => { expect(dropdown.visible).to.not.true; - destroyVM(vm); done(); }, 300); }, 300); diff --git a/test/unit/specs/time-picker.spec.js b/test/unit/specs/time-picker.spec.js index ae5b421f0..909f3bd71 100644 --- a/test/unit/specs/time-picker.spec.js +++ b/test/unit/specs/time-picker.spec.js @@ -236,9 +236,7 @@ describe('TimePicker(range)', () => { }, true); const input = vm.$el.querySelector('input'); - input.blur(); - input.focus(); - input.blur(); + input.click(); setTimeout(done, 20); }); @@ -260,9 +258,7 @@ describe('TimePicker(range)', () => { }, true); const input = vm2.$el.querySelector('input'); - input.blur(); - input.focus(); - input.blur(); + input.click(); setTimeout(() => { expect(vm2.picker.maxTime >= vm2.picker.minTime).to.true; destroyVM(vm2);