diff --git a/components/_util/raf.js b/components/_util/raf.js new file mode 100644 index 000000000..ef632d25b --- /dev/null +++ b/components/_util/raf.js @@ -0,0 +1,30 @@ +import raf from 'raf' + +let id = 0 +const ids = {} + +// Support call raf with delay specified frame +export default function wrapperRaf (callback, delayFrames = 1) { + const myId = id++ + let restFrames = delayFrames + + function internalCallback () { + restFrames -= 1 + + if (restFrames <= 0) { + callback() + delete ids[id] + } else { + ids[id] = raf(internalCallback) + } + } + + ids[id] = raf(internalCallback) + + return myId +} + +wrapperRaf.cancel = function (id) { + raf.cancel(ids[id]) + delete ids[id] +} diff --git a/components/_util/wave.jsx b/components/_util/wave.jsx index c625d42ec..ac262e156 100644 --- a/components/_util/wave.jsx +++ b/components/_util/wave.jsx @@ -1,10 +1,13 @@ import TransitionEvents from './css-animation/Event' - +import raf from '../_util/raf' let styleForPesudo // Where el is the DOM element you'd like to test for visibility function isHidden (element) { + if (process.env.NODE_ENV === 'test') { + return false + } return !element || element.offsetParent === null } @@ -25,6 +28,10 @@ export default { if (this.instance) { this.instance.cancel() } + if (this.clickWaveTimeoutId) { + clearTimeout(this.clickWaveTimeoutId) + } + this.destroy = true }, methods: { isNotGrey (color) { @@ -66,6 +73,7 @@ export default { if (insertExtraNode) { node.appendChild(extraNode) } + TransitionEvents.addStartEventListener(node, this.onTransitionStart) TransitionEvents.addEndEventListener(node, this.onTransitionEnd) }, @@ -88,6 +96,13 @@ export default { getComputedStyle(node).getPropertyValue('border-color') || getComputedStyle(node).getPropertyValue('background-color') this.clickWaveTimeoutId = window.setTimeout(() => this.onClick(node, waveColor), 0) + raf.cancel(this.animationStartId) + this.animationStart = true + + // Render to trigger transition event cost 3 frames. Let's delay 10 frames to reset this. + this.animationStartId = raf(() => { + this.animationStart = false + }, 10) } node.addEventListener('click', onClick, true) return { @@ -112,9 +127,21 @@ export default { if (insertExtraNode && this.extraNode && node.contains(this.extraNode)) { node.removeChild(this.extraNode) } + TransitionEvents.removeStartEventListener(node, this.onTransitionStart) TransitionEvents.removeEndEventListener(node, this.onTransitionEnd) }, + onTransitionStart (e) { + if (this.destroy) return + const node = this.$el + if (!e || e.target !== node) { + return + } + + if (!this.animationStart) { + this.resetEffect(node) + } + }, onTransitionEnd (e) { if (!e || e.animationName !== 'fadeEffect') { return diff --git a/components/alert/__tests__/__snapshots__/demo.test.js.snap b/components/alert/__tests__/__snapshots__/demo.test.js.snap index b42763a71..594c03b70 100644 --- a/components/alert/__tests__/__snapshots__/demo.test.js.snap +++ b/components/alert/__tests__/__snapshots__/demo.test.js.snap @@ -49,7 +49,7 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = ` exports[`renders ./components/alert/demo/description.md correctly 1`] = `
Success Text

- Success Description Success Description Success Description + Success Description Success Description Success Description

Info TextInfo Description Info Description Info Description Info Description
Warning TextWarning Description Warning Description Warning Description Warning Description
diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md index de1e0ab0e..8eb8d3a54 100644 --- a/components/auto-complete/index.en-US.md +++ b/components/auto-complete/index.en-US.md @@ -12,7 +12,7 @@ | slot="default" (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement | `` | | dataSource | Data source for autocomplete | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | | | defaultActiveFirstOption | Whether active first option by default | boolean | true | -| defaultValue | Initial selected option. | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array<{ key: string, label: string\|vNodes }> | - | +| defaultValue | Initial selected option. | string\|string\[]\| - | | disabled | Whether disabled select | boolean | false | | filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true | | optionLabelProp | Which prop value of option will render as content of select. | string | `children` | diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md index 24422c125..7cdc64771 100644 --- a/components/auto-complete/index.zh-CN.md +++ b/components/auto-complete/index.zh-CN.md @@ -12,7 +12,7 @@ | slot="default" (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement | `` | | dataSource | 自动完成的数据源 | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | | | defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | -| defaultValue | 指定默认选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array<{ key: string, label: string\|vNodes}> | 无 | +| defaultValue | 指定默认选中的条目 | string\|string\[]\| 无 | | disabled | 是否禁用 | boolean | false | | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true | | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` | diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap index 3f3031211..403892dfd 100644 --- a/components/card/__tests__/__snapshots__/demo.test.js.snap +++ b/components/card/__tests__/__snapshots__/demo.test.js.snap @@ -269,7 +269,7 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
+
diff --git a/components/cascader/__tests__/__snapshots__/demo.test.js.snap b/components/cascader/__tests__/__snapshots__/demo.test.js.snap index 6f6d5e017..2aa529171 100644 --- a/components/cascader/__tests__/__snapshots__/demo.test.js.snap +++ b/components/cascader/__tests__/__snapshots__/demo.test.js.snap @@ -14,12 +14,12 @@ exports[`renders ./components/cascader/demo/change-on-select.md correctly 1`] = exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = ` - Zhejiang / - - Hangzhou / - - West Lake (752100) - + Hangzhou / + + West Lake (752100) + - Unselect -   - Change city + Unselect +   + Change city `; exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = ` diff --git a/components/checkbox/Checkbox.jsx b/components/checkbox/Checkbox.jsx index 29d4c39ff..ba69b9616 100644 --- a/components/checkbox/Checkbox.jsx +++ b/components/checkbox/Checkbox.jsx @@ -66,6 +66,8 @@ export default { } const classString = classNames({ [`${prefixCls}-wrapper`]: true, + [`${prefixCls}-wrapper-checked`]: checkboxProps.props.checked, + [`${prefixCls}-wrapper-disabled`]: checkboxProps.props.disabled, }) const checkboxClass = classNames({ [`${prefixCls}-indeterminate`]: indeterminate, @@ -81,7 +83,7 @@ export default { class={checkboxClass} ref='vcCheckbox' /> - {children !== undefined ? {children} : null} + {children !== undefined && {children}} ) }, diff --git a/components/checkbox/__tests__/__snapshots__/demo.test.js.snap b/components/checkbox/__tests__/__snapshots__/demo.test.js.snap index e1b7c71a6..442c66d8b 100644 --- a/components/checkbox/__tests__/__snapshots__/demo.test.js.snap +++ b/components/checkbox/__tests__/__snapshots__/demo.test.js.snap @@ -5,29 +5,29 @@ exports[`renders ./components/checkbox/demo/basic.md correctly 1`] = `

+
`; exports[`renders ./components/checkbox/demo/controller.md correctly 1`] = `
-

+

`; -exports[`renders ./components/checkbox/demo/disabled.md correctly 1`] = `

`; +exports[`renders ./components/checkbox/demo/disabled.md correctly 1`] = `

`; exports[`renders ./components/checkbox/demo/group.md correctly 1`] = `

-

-

-
+

+

+
`; diff --git a/components/date-picker/createPicker.js b/components/date-picker/createPicker.js index 3ed0218c3..d74f49fd2 100644 --- a/components/date-picker/createPicker.js +++ b/components/date-picker/createPicker.js @@ -218,6 +218,7 @@ export default function createPicker (TheCalendar, props) { value={(inputValue && inputValue.format(props.format)) || ''} placeholder={placeholder} class={props.pickerInputClass} + tabIndex={props.tabIndex} /> {clearIcon} {inputIcon} diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index 05303450c..093879d03 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -11,7 +11,7 @@ There are four kinds of picker: **Note:** Part of locale of DatePicker, MonthPicker, RangePicker, WeekPicker is read from value. So, please set the locale of moment correctly. ````html -// The default locale is en-US, if you want to use other locale, just set locale in entry file globaly. +// The default locale is en-US, if you want to use other locale, just set locale in entry file globally. // import moment from 'moment'; // import 'moment/locale/zh-cn'; // moment.locale('zh-cn'); @@ -58,6 +58,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | defaultValue | to set default date | [moment](http://momentjs.com/) | - | +| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | | disabledTime | to specify the time that cannot be selected | function(date) | - | | format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" | | renderExtraFooter | render extra footer in panel by setting a scoped slot | slot="renderExtraFooter" | - | @@ -78,6 +79,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | defaultValue | to set default date | [moment](http://momentjs.com/) | - | +| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | | format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM" | | monthCellContentRender | Custom month cell content render method by setting a scoped slot | slot="monthCellContentRender" slot-scope="date, locale" | - | | renderExtraFooter | render extra footer in panel by setting a scoped slot | slot="renderExtraFooter" | - | @@ -93,6 +95,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | defaultValue | to set default date | [moment](http://momentjs.com/) | - | +| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | | format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-wo" | | value(v-model) | to set date | [moment](http://momentjs.com/) | - | @@ -106,6 +109,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | defaultValue | to set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | +| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | | disabledTime | to specify the time that cannot be selected | function(dates: [moment, moment], partial: `'start'|'end'`) | - | | format | to set the date format | string | "YYYY-MM-DD HH:mm:ss" | | ranges | preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 9ff933b2a..b5d9269de 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -58,6 +58,7 @@ moment.locale('zh-cn'); | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 | +| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | | disabledTime | 不可选择的时间 | function(date) | 无 | | format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" | | renderExtraFooter | 在面板中添加额外的页脚 | slot="renderExtraFooter" | - | @@ -78,6 +79,7 @@ moment.locale('zh-cn'); | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 | +| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | | format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM" | | monthCellContentRender | 自定义的月份内容渲染方法 | slot="monthCellContentRender" slot-scope="date, locale" | - | | renderExtraFooter | 在面板中添加额外的页脚 | slot="renderExtraFooter" | - | @@ -94,6 +96,7 @@ moment.locale('zh-cn'); | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | +| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | | format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-wo" | | value(v-model) | 日期 | [moment](http://momentjs.com/) | - | @@ -108,6 +111,7 @@ moment.locale('zh-cn'); | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | 无 | +| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | | disabledTime | 不可选择的时间 | function(dates: [moment, moment], partial: `'start'|'end'`) | 无 | | format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" | | ranges       | 预设时间范围快捷选择 | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | 无 | diff --git a/components/date-picker/interface.js b/components/date-picker/interface.js index 9a4321341..42b1a37c2 100644 --- a/components/date-picker/interface.js +++ b/components/date-picker/interface.js @@ -34,6 +34,7 @@ export const PickerProps = () => ({ timePicker: PropTypes.any, autoFocus: PropTypes.bool, tagPrefixCls: PropTypes.string, + tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), }) export const SinglePickerProps = () => ({ diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap index 2812bb1c3..7ff5869e4 100644 --- a/components/form/__tests__/__snapshots__/demo.test.js.snap +++ b/components/form/__tests__/__snapshots__/demo.test.js.snap @@ -206,8 +206,8 @@ exports[`renders ./components/form/demo/dynamic-rule.vue correctly 1`] = `
+ Nickname is required +
@@ -230,12 +230,12 @@ exports[`renders ./components/form/demo/form-in-modal.vue correctly 1`] = ` exports[`renders ./components/form/demo/global-state.vue correctly 1`] = `
- 
    {
+   
      {
   "username": {
     "value": "benjycui"
   }
 }
-  

+
`; @@ -321,9 +321,9 @@ exports[`renders ./components/form/demo/normal-login.vue correctly 1`] = `
-
+
Or register now!
@@ -702,8 +702,8 @@ exports[`renders ./components/form/demo/validate-static.vue correctly 1`] = `
- - -
+ - +
diff --git a/components/form/demo/dynamic-form-item.vue b/components/form/demo/dynamic-form-item.vue index 7a14a434b..8cf531a43 100644 --- a/components/form/demo/dynamic-form-item.vue +++ b/components/form/demo/dynamic-form-item.vue @@ -53,6 +53,7 @@ Add or remove form items dynamically. - ``` diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md index 949a35bec..fd6e68613 100644 --- a/components/upload/index.en-US.md +++ b/components/upload/index.en-US.md @@ -5,7 +5,7 @@ | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept) | string | - | -| action | Required. Uploading URL | string\|(file) => `Promise` | - | +| action | Uploading URL | string\|(file) => `Promise` | - | | directory | support upload whole directory ([caniuse](https://caniuse.com/#feat=input-file-directory)) | boolean | false | | beforeUpload | Hook function which will be executed before uploading. Uploading will be stopped with `false` or a rejected Promise returned. **Warning：this function is not supported in IE9**。 | (file, fileList) => `boolean | Promise` | - | | customRequest | override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest | Function | - | diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md index 3e18f2b60..41c1f6683 100644 --- a/components/upload/index.zh-CN.md +++ b/components/upload/index.zh-CN.md @@ -5,7 +5,7 @@ | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept) | string | 无 | -| action | 必选参数, 上传的地址 | string\|(file) => `Promise` | 无 | +| action | 上传的地址 | string\|(file) => `Promise` | 无 | | directory | 支持上传文件夹（[caniuse](https://caniuse.com/#feat=input-file-directory)）| boolean | false | | beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传。**注意：IE9 不支持该方法**。 | (file, fileList) => `boolean | Promise` | 无 | | customRequest | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | Function | 无 | diff --git a/site/index.html b/site/index.html index ca672aa9b..f2629a1df 100644 --- a/site/index.html +++ b/site/index.html @@ -34,22 +34,22 @@
- + \ No newline at end of file