test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-12-02 12:07:54 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Merge branch 'v3' into next

Browse Source
This commit is contained in:
tangjinzhou 2021-06-19 21:58:52 +08:00
commit 8996db2adf
8 changed files with 247 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
components/descriptions/Cell.tsx
View File

@ -1,4 +1,4 @@
import { VNodeTypes, HTMLAttributes, FunctionalComponent } from 'vue';
import { VNodeTypes, HTMLAttributes, FunctionalComponent, CSSProperties } from 'vue';
function notEmpty(val: any) {
return val !== undefined && val !== null;
@ -8,6 +8,8 @@ interface CellProps extends HTMLAttributes {
itemPrefixCls: string;
span: number;
component: string;
labelStyle?: CSSProperties;
contentStyle?: CSSProperties;
bordered?: boolean;
label?: VNodeTypes;
content?: VNodeTypes;
@ -15,7 +17,17 @@ interface CellProps extends HTMLAttributes {
}
const Cell: FunctionalComponent<CellProps> = props => {
const { itemPrefixCls, component, span, bordered, label, content, colon } = props;
const {
itemPrefixCls,
component,
span,
labelStyle,
contentStyle,
bordered,
label,
content,
colon,
} = props;
const Component = component as any;
if (bordered) {
return (
@ -28,26 +40,34 @@ const Cell: FunctionalComponent<CellProps> = props => {
]}
colSpan={span}
>
{notEmpty(label) ? label : content}
{notEmpty(label) && <span style={labelStyle}>{label}</span>}
{notEmpty(content) && <span style={contentStyle}>{content}</span>}
</Component>
);
}
return (
<Component class={[`${itemPrefixCls}-item`]} colSpan={span}>
{label && (
<span
class={[
`${itemPrefixCls}-item-label`,
{
[`${itemPrefixCls}-item-no-colon`]: !colon,
},
]}
>
{label}
</span>
)}
{content && <span class={`${itemPrefixCls}-item-content`}>{content}</span>}
<div class={`${itemPrefixCls}-item-container`}>
{label && (
<span
class={[
`${itemPrefixCls}-item-label`,
{
[`${itemPrefixCls}-item-no-colon`]: !colon,
},
]}
style={labelStyle}
>
{label}
</span>
)}
{content && (
<span class={`${itemPrefixCls}-item-content`} style={contentStyle}>
{content}
</span>
)}
</div>
</Component>
);
};

46
components/descriptions/Row.tsx
View File

@ -1,6 +1,7 @@
import Cell from './Cell';
import { getOptionProps, getSlot, getClass, getStyle, getComponent } from '../_util/props-util';
import { FunctionalComponent, VNode } from 'vue';
import { getSlot, getClass, getStyle } from '../_util/props-util';
import { FunctionalComponent, VNode, inject, ref } from 'vue';
import { descriptionsContext, DescriptionsContextProp } from './index';
interface CellConfig {
component: string | [string, string];
@ -22,12 +23,23 @@ const Row: FunctionalComponent<RowProps> = props => {
const renderCells = (
items: VNode[],
{ colon, prefixCls, bordered },
{ component, type, showLabel, showContent }: CellConfig,
{
component,
type,
showLabel,
showContent,
labelStyle: rootLabelStyle,
contentStyle: rootContentStyle,
}: CellConfig & DescriptionsContextProp,
) => {
return items.map((item, index) => {
const { prefixCls: itemPrefixCls = prefixCls, span = 1 } = getOptionProps(item);
const label = getComponent(item, 'label');
const {
prefixCls: itemPrefixCls = prefixCls,
span = 1,
labelStyle,
contentStyle,
label = (item.children as any)?.label?.(),
} = item.props || {};
const children = getSlot(item);
const className = getClass(item);
const style = getStyle(item);
@ -39,6 +51,8 @@ const Row: FunctionalComponent<RowProps> = props => {
key={`${type}-${key || index}`}
class={className}
style={style}
labelStyle={{ ...rootLabelStyle.value, ...labelStyle }}
contentStyle={{ ...rootContentStyle.value, ...contentStyle }}
span={span}
colon={colon}
component={component}
@ -54,7 +68,7 @@ const Row: FunctionalComponent<RowProps> = props => {
<Cell
key={`label-${key || index}`}
class={className}
style={style}
style={{ ...rootLabelStyle.value, ...style, ...labelStyle }}
span={1}
colon={colon}
component={component[0]}
@ -65,7 +79,7 @@ const Row: FunctionalComponent<RowProps> = props => {
<Cell
key={`content-${key || index}`}
class={className}
style={style}
style={{ ...rootContentStyle.value, ...style, ...contentStyle }}
span={span * 2 - 1}
component={component[1]}
itemPrefixCls={itemPrefixCls}
@ -77,17 +91,29 @@ const Row: FunctionalComponent<RowProps> = props => {
};
const { prefixCls, vertical, row, index, bordered } = props;
const { labelStyle, contentStyle } = inject(descriptionsContext, {
labelStyle: ref({}),
contentStyle: ref({}),
});
if (vertical) {
return (
<>
<tr key={`label-${index}`} class={`${prefixCls}-row`}>
{renderCells(row, props, { component: 'th', type: 'label', showLabel: true })}
{renderCells(row, props, {
component: 'th',
type: 'label',
showLabel: true,
labelStyle,
contentStyle,
})}
</tr>
<tr key={`content-${index}`} class={`${prefixCls}-row`}>
{renderCells(row, props, {
component: 'td',
type: 'content',
showContent: true,
labelStyle,
contentStyle,
})}
</tr>
</>
@ -101,6 +127,8 @@ const Row: FunctionalComponent<RowProps> = props => {
type: 'item',
showLabel: true,
showContent: true,
labelStyle,
contentStyle,
})}
</tr>
);

84
components/descriptions/__tests__/__snapshots__/index.test.js.snap
View File

@ -7,7 +7,9 @@ exports[`Descriptions Descriptions support colon 1`] = `
<table>
<tbody>
<tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="3"><span class="ant-descriptions-item-label ant-descriptions-item-no-colon">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
<td class="ant-descriptions-item" colspan="3">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label ant-descriptions-item-no-colon">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div>
</td>
</tr>
</tbody>
</table>
@ -23,7 +25,9 @@ exports[`Descriptions Descriptions support style 1`] = `
<tbody>
<tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="3">
<!----><span class="ant-descriptions-item-content">Cloud Database</span>
<div class="ant-descriptions-item-container">
<!----><span class="ant-descriptions-item-content">Cloud Database</span>
</div>
</td>
</tr>
</tbody>
@ -39,7 +43,9 @@ exports[`Descriptions Descriptions.Item support className 1`] = `
<table>
<tbody>
<tr class="ant-descriptions-row">
<td class="ant-descriptions-item my-class" colspan="3"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
<td class="ant-descriptions-item my-class" colspan="3">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div>
</td>
</tr>
</tbody>
</table>
@ -54,12 +60,20 @@ exports[`Descriptions column is number 1`] = `
<table>
<tbody>
<tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></td>
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">time</span><span class="ant-descriptions-item-content">18:00:00</span></td>
<td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div>
</td>
<td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></div>
</td>
<td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">time</span><span class="ant-descriptions-item-content">18:00:00</span></div>
</td>
</tr>
<tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="3"><span class="ant-descriptions-item-label">Amount</span><span class="ant-descriptions-item-content">$80.00</span></td>
<td class="ant-descriptions-item" colspan="3">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Amount</span><span class="ant-descriptions-item-content">$80.00</span></div>
</td>
</tr>
</tbody>
</table>
@ -74,35 +88,51 @@ exports[`Descriptions vertical layout 1`] = `
<table>
<tbody>
<tr class="ant-descriptions-row">
<th class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Product</span>
<!---->
<th class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Product</span>
<!---->
</div>
</th>
<th class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Billing</span>
<!---->
<th class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Billing</span>
<!---->
</div>
</th>
<th class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">time</span>
<!---->
<th class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">time</span>
<!---->
</div>
</th>
</tr>
<tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="1">
<!----><span class="ant-descriptions-item-content">Cloud Database</span>
<div class="ant-descriptions-item-container">
<!----><span class="ant-descriptions-item-content">Cloud Database</span>
</div>
</td>
<td class="ant-descriptions-item" colspan="1">
<!----><span class="ant-descriptions-item-content">Prepaid</span>
<div class="ant-descriptions-item-container">
<!----><span class="ant-descriptions-item-content">Prepaid</span>
</div>
</td>
<td class="ant-descriptions-item" colspan="1">
<!----><span class="ant-descriptions-item-content">18:00:00</span>
<div class="ant-descriptions-item-container">
<!----><span class="ant-descriptions-item-content">18:00:00</span>
</div>
</td>
</tr>
<tr class="ant-descriptions-row">
<th class="ant-descriptions-item" colspan="3"><span class="ant-descriptions-item-label">Amount</span>
<!---->
<th class="ant-descriptions-item" colspan="3">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Amount</span>
<!---->
</div>
</th>
</tr>
<tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="3">
<!----><span class="ant-descriptions-item-content">$80.00</span>
<div class="ant-descriptions-item-container">
<!----><span class="ant-descriptions-item-content">$80.00</span>
</div>
</td>
</tr>
</tbody>
@ -118,12 +148,20 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
<table>
<tbody>
<tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></td>
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">time</span><span class="ant-descriptions-item-content">18:00:00</span></td>
<td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div>
</td>
<td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></div>
</td>
<td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">time</span><span class="ant-descriptions-item-content">18:00:00</span></div>
</td>
</tr>
<tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="3"><span class="ant-descriptions-item-label">Amount</span><span class="ant-descriptions-item-content">$80.00</span></td>
<td class="ant-descriptions-item" colspan="3">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Amount</span><span class="ant-descriptions-item-content">$80.00</span></div>
</td>
</tr>
</tbody>
</table>

23
components/descriptions/__tests__/index.test.js
View File

@ -1,4 +1,5 @@
import { mount } from '@vue/test-utils';
import { h } from 'vue';
import MockDate from 'mockdate';
import Descriptions from '..';
import { resetWarned } from '../../_util/warning';
@ -263,21 +264,27 @@ describe('Descriptions', () => {
});
it('Descriptions support extra', async () => {
const wrapper = mount({
render() {
return (
<Descriptions extra="Edit">
<Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
</Descriptions>
);
const wrapper = mount(Descriptions, {
props: {
extra: 'Edit',
},
slots: {
default: h(
Descriptions.Item,
{
label: 'UserName',
},
'Zhou Maomao',
),
},
});
await asyncExpect(() => {
expect(wrapper.find('.ant-descriptions-extra').exists()).toBe(true);
wrapper.setProps({ extra: undefined });
});
wrapper.setProps({ extra: undefined });
await asyncExpect(() => {
expect(wrapper.find('.ant-descriptions-extra').exists()).toBe(false);
});

78
components/descriptions/index.tsx
View File

@ -1,6 +1,6 @@
import {
inject,
ref,
Ref,
App,
defineComponent,
PropType,
@ -10,6 +10,11 @@ import {
onMounted,
onBeforeUnmount,
Plugin,
CSSProperties,
provide,
toRef,
InjectionKey,
computed,
} from 'vue';
import warning from '../_util/warning';
import ResponsiveObserve, {
@ -17,12 +22,12 @@ import ResponsiveObserve, {
responsiveArray,
ScreenMap,
} from '../_util/responsiveObserve';
import { defaultConfigProvider } from '../config-provider';
import Row from './Row';
import PropTypes from '../_util/vue-types';
import { tuple } from '../_util/type';
import { cloneElement } from '../_util/vnode';
import { filterEmpty } from '../_util/props-util';
import { flattenChildren } from '../_util/props-util';
import useConfigInject from '../_util/hooks/useConfigInject';
export const DescriptionsItemProps = {
prefixCls: PropTypes.string,
@ -30,15 +35,22 @@ export const DescriptionsItemProps = {
span: PropTypes.number,
};
const descriptionsItemProp = {
prefixCls: PropTypes.string,
label: PropTypes.VNodeChild,
labelStyle: PropTypes.style,
contentStyle: PropTypes.style,
span: PropTypes.number.def(1),
};
export type DescriptionsItemProp = Partial<ExtractPropTypes<typeof descriptionsItemProp>>;
export const DescriptionsItem = defineComponent({
name: 'ADescriptionsItem',
props: {
prefixCls: PropTypes.string,
label: PropTypes.VNodeChild,
span: PropTypes.number.def(1),
},
render() {
return null;
props: descriptionsItemProp,
slots: ['label'],
setup(_, { slots }) {
return () => slots.default?.();
},
});
@ -87,7 +99,7 @@ function getFilledItem(node: VNode, span: number | undefined, rowRestCol: number
}
function getRows(children: VNode[], column: number) {
const childNodes = filterEmpty(children);
const childNodes = flattenChildren(children);
const rows: VNode[][] = [];
let tmpRow: VNode[] = [];
@ -130,17 +142,29 @@ const descriptionsProps = {
},
layout: PropTypes.oneOf(tuple('horizontal', 'vertical')),
colon: PropTypes.looseBool,
labelStyle: PropTypes.style,
contentStyle: PropTypes.style,
};
export type DescriptionsProps = HTMLAttributes &
Partial<ExtractPropTypes<typeof descriptionsProps>>;
export interface DescriptionsContextProp {
labelStyle?: Ref<CSSProperties>;
contentStyle?: Ref<CSSProperties>;
}
export const descriptionsContext: InjectionKey<DescriptionsContextProp> = Symbol(
'descriptionsContext',
);
const Descriptions = defineComponent({
name: 'ADescriptions',
props: descriptionsProps,
slots: ['title', 'extra'],
Item: DescriptionsItem,
setup(props, { slots }) {
const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
const { prefixCls, direction } = useConfigInject('descriptions', props);
let token: number;
@ -160,10 +184,15 @@ const Descriptions = defineComponent({
ResponsiveObserve.unsubscribe(token);
});
provide(descriptionsContext, {
labelStyle: toRef(props, 'labelStyle'),
contentStyle: toRef(props, 'contentStyle'),
});
const mergeColumn = computed(() => getColumn(props.column, screens.value));
return () => {
const {
prefixCls: customizePrefixCls,
column,
size,
bordered = false,
layout = 'horizontal',
@ -172,28 +201,27 @@ const Descriptions = defineComponent({
extra = slots.extra?.(),
} = props;
const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
const mergeColumn = getColumn(column, screens.value);
const children = slots.default?.();
const rows = getRows(children, mergeColumn);
const rows = getRows(children, mergeColumn.value);
return (
<div
class={[
prefixCls,
prefixCls.value,
{
[`${prefixCls}-${size}`]: size !== 'default',
[`${prefixCls}-bordered`]: !!bordered,
[`${prefixCls.value}-${size}`]: size !== 'default',
[`${prefixCls.value}-bordered`]: !!bordered,
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
},
]}
>
{(title || extra) && (
<div class={`${prefixCls}-header`}>
<div class={`${prefixCls}-title`}>{title}</div>
<div class={`${prefixCls}-extra`}>{extra}</div>
<div class={`${prefixCls.value}-header`}>
{title && <div class={`${prefixCls.value}-title`}>{title}</div>}
{extra && <div class={`${prefixCls.value}-extra`}>{extra}</div>}
</div>
)}
<div class={`${prefixCls}-view`}>
<div class={`${prefixCls.value}-view`}>
<table>
<tbody>
{rows.map((row, index) => (
@ -201,7 +229,7 @@ const Descriptions = defineComponent({
key={index}
index={index}
colon={colon}
prefixCls={prefixCls}
prefixCls={prefixCls.value}
vertical={layout === 'vertical'}
bordered={bordered}
row={row}

17
components/descriptions/style/index.less
View File

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
@ -86,19 +86,22 @@
color: @text-color;
font-size: @font-size-base;
line-height: @line-height-base;
word-break: break-word;
overflow-wrap: break-word;
}
&-item {
padding-bottom: 0;
vertical-align: top;
> span {
display: inline-flex;
align-items: baseline;
}
&-container {
display: flex;
.@{descriptions-prefix-cls}-item-label,
.@{descriptions-prefix-cls}-item-content {
display: inline-flex;
align-items: baseline;
}
}
}
@ -106,7 +109,7 @@
.@{descriptions-prefix-cls}-row {
> th,
> td {
padding-bottom: 12px;
padding-bottom: @padding-sm;
}
}
}
@ -167,3 +170,5 @@
}
}
}
@import './rtl';

33
components/descriptions/style/rtl.less Normal file
View File

@ -0,0 +1,33 @@
@import '../../style/themes/default';
@import '../../style/mixins/index';
@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
.@{descriptions-prefix-cls} {
&-rtl {
direction: rtl;
}
&-item-label {
&::after {
.@{descriptions-prefix-cls}-rtl & {
margin: 0 @descriptions-item-label-colon-margin-left 0
@descriptions-item-label-colon-margin-right;
}
}
}
&-bordered {
.@{descriptions-prefix-cls}-item-label,
.@{descriptions-prefix-cls}-item-content {
.@{descriptions-prefix-cls}-rtl& {
border-right: none;
border-left: 1px solid @border-color-split;
&:last-child {
border-left: none;
}
}
}
}
}

2
v2-doc

@ -1 +1 @@
Subproject commit 082898c0188de1c83f27696487bd6d4db7f29749
Subproject commit 4c298275518d5790a58d26f2ed9b83ee5ba1dba4