From ad88dd2ec72e8d300b00597c83d4c7f694c4dd30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?= Date: Tue, 19 Sep 2017 09:35:57 -0500 Subject: [PATCH] TimePicker: add chalk theme (#7102) * TimePicker: add chalk theme * minor style fixes --- examples/docs/en-US/form.md | 11 ++--- examples/docs/en-US/input.md | 33 +++++++++------ examples/docs/en-US/time-picker.md | 6 +-- examples/docs/zh-CN/form.md | 16 ++++---- examples/docs/zh-CN/input.md | 25 +++++++---- examples/docs/zh-CN/time-picker.md | 10 ++--- packages/color-picker/src/main.vue | 2 +- .../date-picker/src/basic/time-spinner.vue | 41 +++++++++---------- packages/date-picker/src/panel/date-range.vue | 6 +-- packages/date-picker/src/panel/date.vue | 4 +- packages/date-picker/src/panel/time-range.vue | 10 ++--- .../date-picker/src/panel/time-select.vue | 2 +- packages/date-picker/src/panel/time.vue | 8 ++-- packages/date-picker/src/picker.vue | 15 ++++--- packages/form/src/form-item.vue | 14 +++++-- packages/form/src/form.vue | 2 + packages/input/src/input.vue | 6 +-- packages/theme-chalk/src/card.scss | 3 +- packages/theme-chalk/src/cascader.scss | 6 +-- packages/theme-chalk/src/checkbox.scss | 1 - packages/theme-chalk/src/color-picker.scss | 6 +-- packages/theme-chalk/src/common/var.scss | 13 +++--- .../src/date-picker/picker-panel.scss | 10 +++-- .../src/date-picker/time-picker.scss | 22 ++++++---- .../src/date-picker/time-spinner.scss | 8 ++-- packages/theme-chalk/src/input-number.scss | 12 +++--- packages/theme-chalk/src/input.scss | 10 ++--- packages/theme-chalk/src/menu.scss | 3 ++ packages/theme-chalk/src/slider.scss | 2 +- packages/theme-chalk/src/time-select.scss | 11 ++--- test/unit/specs/time-picker.spec.js | 6 +-- 31 files changed, 184 insertions(+), 140 deletions(-) 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 - + @@ -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
- 属性方式： + Using attributes
- slot 方式： + Using slots @@ -351,11 +351,11 @@ export default { ```html
@@ -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 - + @@ -503,18 +503,18 @@ ### 自定义校验规则 -这个例子中展示了如何使用自定义验证规则来完成密码的二次验证，并且你可以通过 `status-feedback` 来给输入框添加反馈图标。 +这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。 -::: demo +::: demo 本例还使用`status-icon`属性为输入框添加了表示校验结果的反馈图标。 ```html - - + + - + - + @@ -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
属性方式：
@@ -393,22 +393,26 @@ export default { ```html
@@ -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 @@ }"> - +
@@ -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 @@
@@ -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">
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"> @@ -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 @@