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

feat: space support vue3

pull/2682/head
tangjinzhou 2020-08-12 22:08:06 +08:00
parent 21d95e7ef9
commit 2b5d587a00
6 changed files with 470 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
antdv-demo

@ -1 +1 @@
Subproject commit 747488ec6b7df7cb3f7fd2a3c15c16e4368a79ec
Subproject commit c0e98550d636c6b056ad1df07f4cdc446675d22e

414
components/calendar/__tests__/__snapshots__/demo.test.js.snap
View File

@ -612,6 +612,420 @@ exports[`renders ./antdv-demo/docs/calendar/demo/card.md correctly 1`] = `
</div>
`;
exports[`renders ./antdv-demo/docs/calendar/demo/customize-header.md correctly 1`] = `
<div style="width: 300px; border: 1px solid #d9d9d9; border-radius: 4px;">
<div class="">
<div style="padding: 10px;">
<div style="margin-bottom: 10px;">Custom header</div>
<div class="ant-row-flex ant-row-flex-space-between">
<div class="ant-col">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-small"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div>
</div>
<div class="ant-col">
<!---->
<div class="my-year-select ant-select-sm my-year-select ant-select ant-select-enabled" tabindex="0">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<!---->
<div class="ant-select-selection-selected-value" title="2016" style="display: block; opacity: 1;">2016</div>
</div>
<!----><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div>
</div>
</div>
<div class="ant-col">
<!---->
<div class="ant-select-sm ant-select ant-select-enabled" tabindex="0">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<!---->
<div class="ant-select-selection-selected-value" title="Nov" style="display: block; opacity: 1;">Nov</div>
</div>
<!----><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div>
</div>
</div>
</div>
</div>
<div class="ant-fullcalendar ant-fullcalendar-full" tabindex="0">
<!---->
<div class="ant-fullcalendar-calendar-body">
<table class="ant-fullcalendar-table" cellspacing="0" role="grid">
<thead>
<tr role="row">
<!---->
<th role="columnheader" title="Sun" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Su</span></th>
<th role="columnheader" title="Mon" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Mo</span></th>
<th role="columnheader" title="Tue" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Tu</span></th>
<th role="columnheader" title="Wed" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">We</span></th>
<th role="columnheader" title="Thu" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Th</span></th>
<th role="columnheader" title="Fri" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Fr</span></th>
<th role="columnheader" title="Sat" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Sa</span></th>
</tr>
</thead>
<tbody class="ant-fullcalendar-tbody">
<tr role="row" class="">
<!---->
<td role="gridcell" title="October 30, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">30</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="October 31, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell ant-fullcalendar-last-day-of-month">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">31</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 1, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">01</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 2, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">02</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 3, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">03</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 4, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">04</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 5, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">05</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
</tr>
<tr role="row" class="">
<!---->
<td role="gridcell" title="November 6, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">06</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 7, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">07</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 8, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">08</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 9, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">09</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 10, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">10</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 11, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">11</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 12, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">12</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
</tr>
<tr role="row" class="">
<!---->
<td role="gridcell" title="November 13, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">13</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 14, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">14</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 15, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">15</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 16, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">16</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 17, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">17</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 18, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">18</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 19, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">19</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
</tr>
<tr role="row" class="ant-fullcalendar-current-week ant-fullcalendar-active-week">
<!---->
<td role="gridcell" title="November 20, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">20</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 21, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">21</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 22, 2016" class="ant-fullcalendar-cell ant-fullcalendar-today ant-fullcalendar-selected-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">22</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 23, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">23</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 24, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">24</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 25, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">25</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 26, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">26</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
</tr>
<tr role="row" class="">
<!---->
<td role="gridcell" title="November 27, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">27</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 28, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">28</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 29, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">29</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="November 30, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-day-of-month">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">30</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="December 1, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">01</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="December 2, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">02</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="December 3, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">03</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
</tr>
<tr role="row" class="">
<!---->
<td role="gridcell" title="December 4, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">04</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="December 5, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">05</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="December 6, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">06</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="December 7, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">07</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="December 8, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">08</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="December 9, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">09</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
<td role="gridcell" title="December 10, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">10</div>
<div class="ant-fullcalendar-content">
<!---->
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
`;
exports[`renders ./antdv-demo/docs/calendar/demo/notice-calendar.md correctly 1`] = `
<div class=" ant-fullcalendar-fullscreen">
<div class="ant-fullcalendar-header">

2
components/space/__tests__/__snapshots__/index.test.js.snap
View File

@ -7,3 +7,5 @@ exports[`Space should render correct with children 1`] = `
<div class="ant-space-item">text3</div>
</div>
`;
exports[`Space should render width empty children 1`] = `<!---->`;

10
components/space/__tests__/index.test.js
View File

@ -11,7 +11,7 @@ describe('Space', () => {
return <Space />;
},
});
expect(wrapper.html()).toBeUndefined();
expect(wrapper.html()).toMatchSnapshot();
});
it('should render width customize size', () => {
@ -25,8 +25,8 @@ describe('Space', () => {
);
},
});
expect(wrapper.findAll('.ant-space-item').at(0).element.style.marginRight).toBe('10px');
expect(wrapper.findAll('.ant-space-item').at(1).element.style.marginRight).toBeFalsy();
expect(wrapper.findAll('.ant-space-item')[0].element.style.marginRight).toBe('10px');
expect(wrapper.findAll('.ant-space-item')[1].element.style.marginRight).toBeFalsy();
});
it('should render vertical space width customize size', () => {
@ -41,8 +41,8 @@ describe('Space', () => {
},
});
expect(wrapper.findAll('.ant-space-item').at(0).element.style.marginBottom).toBe('10px');
expect(wrapper.findAll('.ant-space-item').at(1).element.style.marginBottom).toBeFalsy();
expect(wrapper.findAll('.ant-space-item')[0].element.style.marginBottom).toBe('10px');
expect(wrapper.findAll('.ant-space-item')[1].element.style.marginBottom).toBeFalsy();
});
it('should render correct with children', () => {

104
components/space/index.jsx
View File

@ -1,3 +1,4 @@
import { inject } from 'vue';
import PropTypes from '../_util/vue-types';
import { filterEmpty, initDefaultProps } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider';
@ -20,70 +21,59 @@ export const SpaceProps = {
align: PropTypes.oneOf(['start', 'end', 'center', 'baseline']),
};
const Space = {
functional: true,
name: 'ASpace',
props: initDefaultProps(SpaceProps, {
size: 'small',
direction: 'horizontal',
}),
inject: {
configProvider: { default: () => ConfigConsumerProps },
},
render(h, content) {
const {
prefixCls: customizePrefixCls,
injections: { configProvider },
children,
} = content;
const { align, size, direction } = content.props;
const ASpace = (props, { slots }) => {
const configProvider = inject('configProvider', ConfigConsumerProps);
const { align, size, direction, prefixCls: customizePrefixCls } = props;
const getPrefixCls = configProvider.getPrefixCls;
const prefixCls = getPrefixCls('space', customizePrefixCls);
const items = filterEmpty(children);
const len = items.length;
const getPrefixCls = configProvider.getPrefixCls;
const prefixCls = getPrefixCls('space', customizePrefixCls);
const items = filterEmpty(slots.default && slots.default());
const len = items.length;
if (len === 0) {
return null;
}
if (len === 0) {
return null;
}
const mergedAlign = align === undefined && direction === 'horizontal' ? 'center' : align;
const mergedAlign = align === undefined && direction === 'horizontal' ? 'center' : align;
const someSpaceClass = {
[prefixCls]: true,
[`${prefixCls}-${direction}`]: true,
// [`${prefixCls}-rtl`]: directionConfig === 'rtl',
[`${prefixCls}-align-${mergedAlign}`]: mergedAlign,
};
const someSpaceClass = {
[prefixCls]: true,
[`${prefixCls}-${direction}`]: true,
// [`${prefixCls}-rtl`]: directionConfig === 'rtl',
[`${prefixCls}-align-${mergedAlign}`]: mergedAlign,
};
const itemClassName = `${prefixCls}-item`;
const marginDirection = 'marginRight'; // directionConfig === 'rtl' ? 'marginLeft' : 'marginRight';
const itemClassName = `${prefixCls}-item`;
const marginDirection = 'marginRight'; // directionConfig === 'rtl' ? 'marginLeft' : 'marginRight';
return (
<div class={someSpaceClass}>
{items.map((child, i) => (
<div
class={itemClassName}
key={`${itemClassName}-${i}`}
style={
i === len - 1
? {}
: {
[direction === 'vertical' ? 'marginBottom' : marginDirection]:
typeof size === 'string' ? `${spaceSize[size]}px` : `${size}px`,
}
}
>
{child}
</div>
))}
</div>
);
},
return (
<div class={someSpaceClass}>
{items.map((child, i) => (
<div
class={itemClassName}
key={`${itemClassName}-${i}`}
style={
i === len - 1
? {}
: {
[direction === 'vertical' ? 'marginBottom' : marginDirection]:
typeof size === 'string' ? `${spaceSize[size]}px` : `${size}px`,
}
}
>
{child}
</div>
))}
</div>
);
};
ASpace.props = initDefaultProps(SpaceProps, {
size: 'small',
direction: 'horizontal',
});
/* istanbul ignore next */
Space.install = function(Vue) {
Vue.component(Space.name, Space);
ASpace.install = function(app) {
app.component(ASpace.name, ASpace);
};
export default Space;
export default ASpace;

2
examples/App.vue
View File

@ -4,7 +4,7 @@
</div>
</template>
<script>
import demo from '../antdv-demo/docs/tree-select/demo/index';
import demo from '../antdv-demo/docs/space/demo/index';
export default {
components: {