github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

cr cxxx- exxx

pull/1225/head
tanjinzhou 2019-09-10 18:57:08 +08:00
parent c31aab0685
commit 927a0a6c81
26 changed files with 149 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/calendar/index.jsx
View File

@ -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 = {
</div>
);
},
getDefaultLocale() {
const result = {
...enUS,
...this.$props.locale,
};
result.lang = {
...result.lang,
...(this.$props.locale || {}).lang,
};
return result;
},
},
render() {

2
components/card/Grid.jsx
View File

@ -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: () => ({}) },

2
components/card/Meta.jsx
View File

@ -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,
},

22
components/checkbox/Group.jsx
View File

@ -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 {

3
components/collapse/Collapse.jsx
View File

@ -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 || (
<Icon type="right" rotate={panelProps.isActive ? 90 : undefined} />
);
return isValidElement(expandIcon ? icon[0] : icon)
return isValidElement(Array.isArray(expandIcon) ? icon[0] : icon)
? cloneElement(icon, {
class: `${prefixCls}-arrow`,
})

11
components/date-picker/RangePicker.jsx
View File

@ -111,24 +111,19 @@ 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() {
sOpen(val, oldVal) {
this.$nextTick(() => {
if (!hasProp(this, 'open') && this.prevState.sOpen && !this.sOpen) {
if (!hasProp(this, 'open') && oldVal && !val) {
this.focus();
}
});
},
},
methods: {
clearSelection(e) {
e.preventDefault();

7
components/date-picker/WeekPicker.jsx
View File

@ -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 };

8
components/date-picker/__tests__/__snapshots__/other.test.js.snap
View File

@ -230,3 +230,11 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
</div>
</div>
`;
exports[`Picker format by locale date 1`] = `<span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="请选择日期" class="ant-calendar-picker-input ant-input"><i aria-label="图标: calendar" class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span>`;
exports[`Picker format by locale dateTime 1`] = `<span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="请选择日期" class="ant-calendar-picker-input ant-input"><i aria-label="图标: calendar" class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span>`;
exports[`Picker format by locale month 1`] = `<span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="请选择日期" class="ant-calendar-picker-input ant-input"><i aria-label="图标: calendar" class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span>`;
exports[`Picker format by locale week 1`] = `<span class="ant-calendar-picker"><span class="" style="display: inline-block; width: 100%;"><input readonly="true" placeholder="请选择日期" class="ant-calendar-picker-input ant-input"><i aria-label="图标: calendar" class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></span></span>`;

41
components/date-picker/__tests__/other.test.js
View File

@ -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 (
<LocaleProvider locale={myLocale}>
<Picker {...{ value: date, ...props }} />
</LocaleProvider>
);
},
},
{ 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');

14
components/date-picker/createPicker.js
View File

@ -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() {
_open(val, oldVal) {
this.$nextTick(() => {
if (!hasProp(this, 'open') && this.prevState._open && !this._open) {
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 ? (

6
components/date-picker/locale/example.json
View File

@ -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"
}

1
components/drawer/index.en-US.md
View File

@ -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 |

9
components/drawer/index.jsx
View File

@ -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)}
<div key="body" class={`${prefixCls}-body`}>
<div key="body" class={`${prefixCls}-body`} style={bodyStyle}>
{this.$slots.default}
</div>
</div>

1
components/drawer/index.zh-CN.md
View File

@ -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 |

2
components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DropdownButton should support href like Button 1`] = `
<div class="ant-btn-group ant-dropdown-button"><button type="button" class="ant-btn ant-btn-default"></button><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<div class="ant-btn-group ant-dropdown-button"><a href="https://ant.design" class="ant-btn ant-btn-default"></a><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path>
</svg></i></button></div>
`;

8
components/dropdown/dropdown-button.jsx
View File

@ -89,7 +89,13 @@ export default {
return (
<ButtonGroup {...buttonGroupProps}>
<Button type={type} disabled={disabled} onClick={this.onClick} htmlType={htmlType}>
<Button
type={type}
disabled={disabled}
onClick={this.onClick}
htmlType={htmlType}
href={href}
>
{this.$slots.default}
</Button>
<Dropdown {...dropdownProps}>

14
components/dropdown/dropdown.jsx
View File

@ -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 = (
<span class={`${prefixCls}-menu-submenu-arrow`}>
@ -57,8 +57,8 @@ const Dropdown = {
);
const fixedModeOverlay =
overlay && overlay.componentOptions
? cloneElement(overlay, {
overlayNode && overlayNode.componentOptions
? cloneElement(overlayNode, {
props: {
mode: 'vertical',
selectable,

4
components/dropdown/index.en-US.md
View File

@ -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&lt;`click`\|`hover`\|`contextmenu`> | `['hover']` |

4
components/dropdown/index.zh-CN.md
View File

@ -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&lt;`click`\|`hover`\|`contextmenu`> | `['hover']` |

7
components/empty/index.jsx
View File

@ -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 (
<div class={prefixCls} {...restProps}>
<div class={prefixCls} {...{ on: this.$listeners }}>
<div class={`${prefixCls}-image`}>{imageNode}</div>
<p class={`${prefixCls}-description`}>{des}</p>
{this.$slots.default && <div class={`${prefixCls}-footer`}>{this.$slots.default}</div>}
</div>
);
@ -60,6 +58,7 @@ const Empty = {
/* istanbul ignore next */
Empty.install = function(Vue) {
Vue.use(Base);
Vue.component(Empty.name, Empty);
};

8
types/card.d.ts vendored
View File

@ -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;
}

6
types/collapse/collapse.d.ts vendored
View File

@ -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;
}

6
types/drawer.d.ts vendored
View File

@ -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

4
types/dropdown/dropdown-button.d.ts vendored
View File

@ -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

4
types/dropdown/dropdown.d.ts vendored
View File

@ -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