diff --git a/components/calendar/index.jsx b/components/calendar/index.jsx index 2ca4e9ca3..2f71432e5 100644 --- a/components/calendar/index.jsx +++ b/components/calendar/index.jsx @@ -159,7 +159,17 @@ const Calendar = { return inRange; }; }, - + getDefaultLocale() { + const result = { + ...enUS, + ...this.$props.locale, + }; + result.lang = { + ...result.lang, + ...(this.$props.locale || {}).lang, + }; + return result; + }, renderCalendar(locale, localeCode) { const props = getOptionProps(this); const { sValue: value, sMode: mode, $listeners, $scopedSlots } = this; @@ -230,17 +240,6 @@ const Calendar = { ); }, - getDefaultLocale() { - const result = { - ...enUS, - ...this.$props.locale, - }; - result.lang = { - ...result.lang, - ...(this.$props.locale || {}).lang, - }; - return result; - }, }, render() { diff --git a/components/card/Grid.jsx b/components/card/Grid.jsx index 23b05f5cc..d71e11c02 100644 --- a/components/card/Grid.jsx +++ b/components/card/Grid.jsx @@ -5,7 +5,7 @@ export default { name: 'ACardGrid', __ANT_CARD_GRID: true, props: { - prefixCls: PropTypes.string.def('ant-card'), + prefixCls: PropTypes.string, }, inject: { configProvider: { default: () => ({}) }, diff --git a/components/card/Meta.jsx b/components/card/Meta.jsx index d75c28b3b..c0371f556 100644 --- a/components/card/Meta.jsx +++ b/components/card/Meta.jsx @@ -5,7 +5,7 @@ import { ConfigConsumerProps } from '../config-provider'; export default { name: 'ACardMeta', props: { - prefixCls: PropTypes.string.def('ant-card'), + prefixCls: PropTypes.string, title: PropTypes.any, description: PropTypes.any, }, diff --git a/components/checkbox/Group.jsx b/components/checkbox/Group.jsx index 8cc4c1c6d..3e28ff908 100644 --- a/components/checkbox/Group.jsx +++ b/components/checkbox/Group.jsx @@ -1,3 +1,4 @@ +import PropTypes from '../_util/vue-types'; import Checkbox from './Checkbox'; import hasProp from '../_util/props-util'; import { ConfigConsumerProps } from '../config-provider'; @@ -9,22 +10,11 @@ export default { prop: 'value', }, props: { - prefixCls: { - type: String, - }, - defaultValue: { - default: undefined, - type: Array, - }, - value: { - default: undefined, - type: Array, - }, - options: { - default: () => [], - type: Array, - }, - disabled: Boolean, + prefixCls: PropTypes.string, + defaultValue: PropTypes.array, + value: PropTypes.array, + options: PropTypes.array.def([]), + disabled: PropTypes.bool, }, provide() { return { diff --git a/components/collapse/Collapse.jsx b/components/collapse/Collapse.jsx index b47579413..29309d14d 100644 --- a/components/collapse/Collapse.jsx +++ b/components/collapse/Collapse.jsx @@ -17,7 +17,6 @@ export default { event: 'change', }, props: initDefaultProps(collapseProps(), { - prefixCls: 'ant-collapse', bordered: true, openAnimation: animation, }), @@ -30,7 +29,7 @@ export default { const icon = expandIcon || ( ); - return isValidElement(expandIcon ? icon[0] : icon) + return isValidElement(Array.isArray(expandIcon) ? icon[0] : icon) ? cloneElement(icon, { class: `${prefixCls}-arrow`, }) diff --git a/components/date-picker/RangePicker.jsx b/components/date-picker/RangePicker.jsx index 62662a142..fdc26cf33 100644 --- a/components/date-picker/RangePicker.jsx +++ b/components/date-picker/RangePicker.jsx @@ -111,23 +111,18 @@ export default { }; } this.setState(state); - this.prevState = { ...this.$data, ...state }; }, open(val) { const state = { sOpen: val }; this.setState(state); - this.prevState = { ...this.$data, ...state }; }, - }, - mounted() { - this.prevState = { ...this.$data }; - }, - updated() { - this.$nextTick(() => { - if (!hasProp(this, 'open') && this.prevState.sOpen && !this.sOpen) { - this.focus(); - } - }); + sOpen(val, oldVal) { + this.$nextTick(() => { + if (!hasProp(this, 'open') && oldVal && !val) { + this.focus(); + } + }); + }, }, methods: { clearSelection(e) { diff --git a/components/date-picker/WeekPicker.jsx b/components/date-picker/WeekPicker.jsx index 280c79db3..77c773e0e 100644 --- a/components/date-picker/WeekPicker.jsx +++ b/components/date-picker/WeekPicker.jsx @@ -63,6 +63,13 @@ export default { this.setState(state); this.prevState = { ...this.$data, ...state }; }, + _open(val, oldVal) { + this.$nextTick(() => { + if (!hasProp(this, 'open') && oldVal && !val) { + this.focus(); + } + }); + }, }, mounted() { this.prevState = { ...this.$data }; diff --git a/components/date-picker/__tests__/__snapshots__/other.test.js.snap b/components/date-picker/__tests__/__snapshots__/other.test.js.snap index 0865167ef..72967e867 100644 --- a/components/date-picker/__tests__/__snapshots__/other.test.js.snap +++ b/components/date-picker/__tests__/__snapshots__/other.test.js.snap @@ -230,3 +230,11 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = ` `; + +exports[`Picker format by locale date 1`] = `
`; + +exports[`Picker format by locale dateTime 1`] = `
`; + +exports[`Picker format by locale month 1`] = `
`; + +exports[`Picker format by locale week 1`] = ``; diff --git a/components/date-picker/__tests__/other.test.js b/components/date-picker/__tests__/other.test.js index eecfc632b..e40ee2db1 100644 --- a/components/date-picker/__tests__/other.test.js +++ b/components/date-picker/__tests__/other.test.js @@ -2,9 +2,50 @@ import { mount } from '@vue/test-utils'; import { asyncExpect } from '@/tests/utils'; import moment from 'moment'; import DatePicker from '../'; +import LocaleProvider from '../../locale-provider'; +import locale from '../../locale-provider/zh_CN'; const { MonthPicker, WeekPicker } = DatePicker; +describe('Picker format by locale', () => { + const myLocale = { + ...locale, + DatePicker: { + ...locale.DatePicker, + dateFormat: 'YYYY 年 M 月 D 日', + dateTimeFormat: 'YYYY 年 M 月 D 日 H 时 m 分 s 秒', + weekFormat: 'YYYY 年 W 周', + monthFormat: 'YYYY 年 M 月', + }, + }; + + const date = moment('2000-01-01', 'YYYY-MM-DD'); + function matchPicker(name, Picker, props) { + it(name, async () => { + const wrapper = mount( + { + render() { + return ( + + + + ); + }, + }, + { sync: false }, + ); + await asyncExpect(() => { + expect(wrapper.html()).toMatchSnapshot(); + }); + }); + } + + matchPicker('date', DatePicker); + matchPicker('dateTime', DatePicker, { showTime: true }); + matchPicker('week', WeekPicker); + matchPicker('month', MonthPicker); +}); + describe('MonthPicker and WeekPicker', () => { it('render MonthPicker', async () => { const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn'); diff --git a/components/date-picker/createPicker.js b/components/date-picker/createPicker.js index 7e48dcf47..94563db2e 100644 --- a/components/date-picker/createPicker.js +++ b/components/date-picker/createPicker.js @@ -58,7 +58,6 @@ export default function createPicker(TheCalendar, props) { state.showDate = props.value; } this.setState(state); - this.prevState = { ...this.$data, ...state }; }, value(val) { const state = {}; @@ -67,23 +66,18 @@ export default function createPicker(TheCalendar, props) { state.showDate = val; } this.setState(state); - this.prevState = { ...this.$data, ...state }; }, - }, - mounted() { - this.prevState = { ...this.$data }; - }, - updated() { - this.$nextTick(() => { - if (!hasProp(this, 'open') && this.prevState._open && !this._open) { - this.focus(); - } - }); + _open(val, oldVal) { + this.$nextTick(() => { + if (!hasProp(this, 'open') && oldVal && !val) { + this.focus(); + } + }); + }, }, methods: { renderFooter(...args) { - const { $scopedSlots, $slots } = this; - const { _prefixCls: prefixCls } = this; + const { $scopedSlots, $slots, _prefixCls: prefixCls } = this; const renderExtraFooter = this.renderExtraFooter || $scopedSlots.renderExtraFooter || $slots.renderExtraFooter; return renderExtraFooter ? ( diff --git a/components/date-picker/locale/example.json b/components/date-picker/locale/example.json index b7b0aa3a7..4c260f922 100644 --- a/components/date-picker/locale/example.json +++ b/components/date-picker/locale/example.json @@ -31,5 +31,9 @@ }, "timePickerLocale": { "placeholder": "Select time" - } + }, + "dateFormat": "YYYY-MM-DD", + "dateTimeFormat": "YYYY-MM-DD HH:mm:ss", + "weekFormat": "YYYY-wo", + "monthFormat": "YYYY-MM" } diff --git a/components/drawer/index.en-US.md b/components/drawer/index.en-US.md index 87ba67625..9a41e70e6 100644 --- a/components/drawer/index.en-US.md +++ b/components/drawer/index.en-US.md @@ -12,6 +12,7 @@ | visible | Whether the Drawer dialog is visible or not. | boolean | false | | wrapClassName | The class name of the container of the Drawer dialog. | string | - | | wrapStyle | The style of the container of the Drawer dialog. | object | - | +| bodyStyle | Style of floating layer, typically used for adjusting its position. | object | - | | width | Width of the Drawer dialog. | string\|number | 256 | | height | placement is `top` or `bottom`, height of the Drawer dialog. | string\|number | - | | zIndex | The `z-index` of the Drawer. | Number | 1000 | diff --git a/components/drawer/index.jsx b/components/drawer/index.jsx index b40648fc8..eb8bb3024 100644 --- a/components/drawer/index.jsx +++ b/components/drawer/index.jsx @@ -17,6 +17,7 @@ const Drawer = { mask: PropTypes.bool.def(true), maskStyle: PropTypes.object, wrapStyle: PropTypes.object, + bodyStyle: PropTypes.object, title: PropTypes.any, visible: PropTypes.bool, width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def(256), @@ -106,13 +107,11 @@ const Drawer = { } }, getRcDrawerStyle() { - const { zIndex, placement, maskStyle, wrapStyle } = this.$props; + const { zIndex, placement } = this.$props; const { _push: push } = this.$data; return { - ...maskStyle, zIndex, transform: push ? this.getPushTransform(placement) : undefined, - ...wrapStyle, }; }, renderHeader(prefixCls) { @@ -143,7 +142,7 @@ const Drawer = { return null; } this.destroyClose = false; - const { placement } = this.$props; + const { placement, bodyStyle } = this.$props; const containerStyle = placement === 'left' || placement === 'right' @@ -167,7 +166,7 @@ const Drawer = { onTransitionend={this.onDestroyTransitionEnd} > {this.renderHeader(prefixCls)} -
+
{this.$slots.default}
diff --git a/components/drawer/index.zh-CN.md b/components/drawer/index.zh-CN.md index 1d01962ea..d4977e9e9 100644 --- a/components/drawer/index.zh-CN.md +++ b/components/drawer/index.zh-CN.md @@ -12,6 +12,7 @@ | visible | Drawer 是否可见 | boolean | - | | wrapClassName | 对话框外层容器的类名 | string | - | | wrapStyle | 对话框外层容器的`style` | object | - | +| bodyStyle | 可用于设置 Drawer 的样式，调整浮层位置等 | object | - | | width | 宽度 | string \| number | 256 | | height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 256 | | zIndex | 设置 Drawer 的 `z-index` | Number | 1000 | diff --git a/components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap b/components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap index eadae95a5..9f4c160b0 100644 --- a/components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap +++ b/components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DropdownButton should support href like Button 1`] = ` -
`; diff --git a/components/dropdown/dropdown-button.jsx b/components/dropdown/dropdown-button.jsx index 1574014a8..144403589 100644 --- a/components/dropdown/dropdown-button.jsx +++ b/components/dropdown/dropdown-button.jsx @@ -89,7 +89,13 @@ export default { return ( - diff --git a/components/dropdown/dropdown.jsx b/components/dropdown/dropdown.jsx index 8add49e4f..85c1fee13 100644 --- a/components/dropdown/dropdown.jsx +++ b/components/dropdown/dropdown.jsx @@ -2,7 +2,7 @@ import RcDropdown from '../vc-dropdown/src/index'; import DropdownButton from './dropdown-button'; import PropTypes from '../_util/vue-types'; import { cloneElement } from '../_util/vnode'; -import { getOptionProps, getPropsData } from '../_util/props-util'; +import { getOptionProps, getPropsData, getComponentFromProp } from '../_util/props-util'; import getDropdownProps from './getDropdownProps'; import { ConfigConsumerProps } from '../config-provider'; import Icon from '../icon'; @@ -12,7 +12,7 @@ const Dropdown = { name: 'ADropdown', props: { ...DropdownProps, - prefixCls: PropTypes.string.def('ant-dropdown'), + prefixCls: PropTypes.string, mouseEnterDelay: PropTypes.number.def(0.15), mouseLeaveDelay: PropTypes.number.def(0.1), placement: DropdownProps.placement.def('bottomLeft'), @@ -44,11 +44,11 @@ const Dropdown = { return 'slide-up'; }, renderOverlay(prefixCls) { - const { $slots } = this; - const overlay = this.overlay || ($slots.overlay && $slots.overlay[0]); + const overlay = getComponentFromProp(this, 'overlay'); + const overlayNode = Array.isArray(overlay) ? overlay[0] : overlay; // menu cannot be selectable in dropdown defaultly // menu should be focusable in dropdown defaultly - const overlayProps = overlay && getPropsData(overlay); + const overlayProps = overlayNode && getPropsData(overlayNode); const { selectable = false, focusable = true } = overlayProps || {}; const expandIcon = ( @@ -57,8 +57,8 @@ const Dropdown = { ); const fixedModeOverlay = - overlay && overlay.componentOptions - ? cloneElement(overlay, { + overlayNode && overlayNode.componentOptions + ? cloneElement(overlayNode, { props: { mode: 'vertical', selectable, diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md index 90ed3b6a5..45da540a6 100644 --- a/components/dropdown/index.en-US.md +++ b/components/dropdown/index.en-US.md @@ -6,7 +6,7 @@ | -------- | ----------- | ---- | ------- | | disabled | whether the dropdown menu is disabled | boolean | - | | getPopupContainer | to set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` | -| overlay(slot) | the dropdown menu | [Menu](/components/menu) | - | +| overlay(slot-scope) | the dropdown menu | [Menu](/components/menu) | - | | overlayClassName | Class name of the dropdown root element | string | - | | overlayStyle | Style of the dropdown root element | object | - | | placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | @@ -29,7 +29,7 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | disabled | whether the dropdown menu is disabled | boolean | - | -| overlay(slot) | the dropdown menu | [Menu](/components/menu) | - | +| overlay(slot-scope) | the dropdown menu | [Menu](/components/menu) | - | | placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | | size | size of the button, the same as [Button](/components/button) | string | `default` | | trigger | the trigger mode which executes the drop-down action | Array<`click`\|`hover`\|`contextmenu`> | `['hover']` | diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md index f4f6e0653..f98aac468 100644 --- a/components/dropdown/index.zh-CN.md +++ b/components/dropdown/index.zh-CN.md @@ -6,7 +6,7 @@ | --- | --- | --- | --- | | disabled | 菜单是否禁用 | boolean | - | | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | `() => document.body` | -| overlay(slot) | 菜单 | [Menu](/components/menu-cn) | - | +| overlay(slot-scope) | 菜单 | [Menu](/components/menu-cn) | - | | overlayClassName | 下拉根元素的类名称 | string | - | | overlayStyle | 下拉根元素的样式 | object | - | | placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | @@ -30,7 +30,7 @@ | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | disabled | 菜单是否禁用 | boolean | - | -| overlay(slot) | 菜单 | [Menu](/components/menu-cn/) | - | +| overlay(slot-scope) | 菜单 | [Menu](/components/menu-cn/) | - | | placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | | size | 按钮大小，和 [Button](/components/button-cn/) 一致 | string | 'default' | | trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextmenu`> | `['hover']` | diff --git a/components/empty/index.jsx b/components/empty/index.jsx index efe63b777..5b1022cd6 100644 --- a/components/empty/index.jsx +++ b/components/empty/index.jsx @@ -3,6 +3,7 @@ import { ConfigConsumerProps } from '../config-provider'; import { getComponentFromProp } from '../_util/props-util'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; import emptyImg from './empty.svg'; +import Base from '../base'; export const TransferLocale = () => { return { @@ -41,13 +42,10 @@ const Empty = { } else { imageNode = image; } - return ( -
+
{imageNode}
-

{des}

- {this.$slots.default &&
{this.$slots.default}
}
); @@ -60,6 +58,7 @@ const Empty = { /* istanbul ignore next */ Empty.install = function(Vue) { + Vue.use(Base); Vue.component(Empty.name, Empty); }; diff --git a/package.json b/package.json index 6ae7b29aa..b9df42400 100644 --- a/package.json +++ b/package.json @@ -215,4 +215,4 @@ "lib/**/style/*", "*.less" ] -} \ No newline at end of file +} diff --git a/types/card.d.ts b/types/card.d.ts index 94f11247e..8ba93d078 100644 --- a/types/card.d.ts +++ b/types/card.d.ts @@ -5,6 +5,8 @@ import { AntdComponent } from './component'; import { Meta } from './meta'; +export type CardSize = 'default' | 'small'; + export declare class Card extends AntdComponent { static Grid: any; static Meta: typeof Meta; @@ -89,4 +91,10 @@ export declare class Card extends AntdComponent { * @type string */ type: string; + + /** + * Size of card + * @type string + */ + size: CardSize; } diff --git a/types/collapse/collapse.d.ts b/types/collapse/collapse.d.ts index adf3e2938..3c4fe4424 100644 --- a/types/collapse/collapse.d.ts +++ b/types/collapse/collapse.d.ts @@ -41,4 +41,10 @@ export declare class Collapse extends AntdComponent { * @type boolean */ destroyInactivePanel: boolean; + + /** + * allow to customize collapse icon. + * @type any (function | slot-scope) + */ + expandIcon: any; } diff --git a/types/drawer.d.ts b/types/drawer.d.ts index f87d070af..567abbc44 100644 --- a/types/drawer.d.ts +++ b/types/drawer.d.ts @@ -72,6 +72,12 @@ export declare class Drawer extends AntdComponent { */ wrapStyle: object; + /** + * Style of floating layer, typically used for adjusting its position. + * @type object + */ + bodyStyle: object; + /** * Width of the Drawer dialog. * @default 256 diff --git a/types/dropdown/dropdown-button.d.ts b/types/dropdown/dropdown-button.d.ts index 58997e360..d2f294a28 100644 --- a/types/dropdown/dropdown-button.d.ts +++ b/types/dropdown/dropdown-button.d.ts @@ -14,9 +14,9 @@ export declare class DropdownButton extends AntdComponent { /** * the dropdown menu - * @type Menu + * @type () => Menu */ - overlay: Menu; + overlay: any; /** * placement of pop menu: bottomLeft bottomCenter bottomRight topLeft topCenter topRight diff --git a/types/dropdown/dropdown.d.ts b/types/dropdown/dropdown.d.ts index f711876cf..a0f12149c 100644 --- a/types/dropdown/dropdown.d.ts +++ b/types/dropdown/dropdown.d.ts @@ -18,9 +18,9 @@ export declare class Dropdown extends AntdComponent { /** * the dropdown menu - * @type Menu + * @type () => Menu */ - overlay: Menu; + overlay: any; /** * Class name of the dropdown root element