Skip to content

Commit 948727a

Browse files
tangjinzhoutangjinzhou
committed
Merge branches 'next' and 'next' of https://github.com/vueComponent/ant-design-vue into next
2 parents aca5301 + 0e78488 commit 948727a

File tree

12 files changed

+555
-379
lines changed

12 files changed

+555
-379
lines changed

‎components/descriptions/Cell.tsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { VNodeTypes, HTMLAttributes, FunctionalComponent } from 'vue';
2+
3+
function notEmpty(val: any) {
4+
return val !== undefined && val !== null;
5+
}
6+
7+
interface CellProps extends HTMLAttributes {
8+
itemPrefixCls: string;
9+
span: number;
10+
component: string;
11+
bordered?: boolean;
12+
label?: VNodeTypes;
13+
content?: VNodeTypes;
14+
colon?: boolean;
15+
}
16+
17+
const Cell: FunctionalComponent<CellProps> = props => {
18+
const { itemPrefixCls, component, span, bordered, label, content, colon } = props;
19+
const Component = component as any;
20+
if (bordered) {
21+
return (
22+
<Component
23+
class={[
24+
{
25+
[`${itemPrefixCls}-item-label`]: notEmpty(label),
26+
[`${itemPrefixCls}-item-content`]: notEmpty(content),
27+
},
28+
]}
29+
colSpan={span}
30+
>
31+
{notEmpty(label) ? label : content}
32+
</Component>
33+
);
34+
}
35+
36+
return (
37+
<Component class={[`${itemPrefixCls}-item`]} colSpan={span}>
38+
{label && (
39+
<span
40+
class={[
41+
`${itemPrefixCls}-item-label`,
42+
{
43+
[`${itemPrefixCls}-item-no-colon`]: !colon,
44+
},
45+
]}
46+
>
47+
{label}
48+
</span>
49+
)}
50+
{content && <span class={`${itemPrefixCls}-item-content`}>{content}</span>}
51+
</Component>
52+
);
53+
};
54+
55+
export default Cell;

‎components/descriptions/Col.tsx

-82
This file was deleted.

‎components/descriptions/Row.tsx

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import Cell from './Cell';
2+
import { getOptionProps, getSlot, getClass, getStyle, getComponent } from '../_util/props-util';
3+
import { FunctionalComponent } from 'vue';
4+
5+
interface CellConfig {
6+
component: string | [string, string];
7+
type: string;
8+
showLabel?: boolean;
9+
showContent?: boolean;
10+
}
11+
12+
export interface RowProps {
13+
prefixCls: string;
14+
vertical: boolean;
15+
row: any[];
16+
bordered: boolean;
17+
colon: boolean;
18+
index: number;
19+
}
20+
21+
const Row: FunctionalComponent<RowProps> = props => {
22+
const renderCells = (
23+
items,
24+
{ colon, prefixCls, bordered },
25+
{ component, type, showLabel, showContent }: CellConfig,
26+
) => {
27+
return items.map((item, index) => {
28+
const { prefixCls: itemPrefixCls = prefixCls, span = 1 } = getOptionProps(item);
29+
const label = getComponent(item, 'label');
30+
31+
const children = getSlot(item);
32+
const className = getClass(item);
33+
const style = getStyle(item);
34+
const { key } = item;
35+
36+
if (typeof component === 'string') {
37+
return (
38+
<Cell
39+
key={`${type}-${key || index}`}
40+
class={className}
41+
style={style}
42+
span={span}
43+
colon={colon}
44+
component={component}
45+
itemPrefixCls={itemPrefixCls}
46+
bordered={bordered}
47+
label={showLabel ? label : null}
48+
content={showContent ? children : null}
49+
/>
50+
);
51+
}
52+
53+
return [
54+
<Cell
55+
key={`label-${key || index}`}
56+
class={className}
57+
style={style}
58+
span={1}
59+
colon={colon}
60+
component={component[0]}
61+
itemPrefixCls={itemPrefixCls}
62+
bordered={bordered}
63+
label={label}
64+
/>,
65+
<Cell
66+
key={`content-${key || index}`}
67+
class={className}
68+
style={style}
69+
span={span * 2 - 1}
70+
component={component[1]}
71+
itemPrefixCls={itemPrefixCls}
72+
bordered={bordered}
73+
content={children}
74+
/>,
75+
];
76+
});
77+
};
78+
79+
const { prefixCls, vertical, row, index, bordered } = props;
80+
if (vertical) {
81+
return (
82+
<>
83+
<tr key={`label-${index}`} class={`${prefixCls}-row`}>
84+
{renderCells(row, props, { component: 'th', type: 'label', showLabel: true })}
85+
</tr>
86+
<tr key={`content-${index}`} class={`${prefixCls}-row`}>
87+
{renderCells(row, props, {
88+
component: 'td',
89+
type: 'content',
90+
showContent: true,
91+
})}
92+
</tr>
93+
</>
94+
);
95+
}
96+
97+
return (
98+
<tr key={index} class={`${prefixCls}-row`}>
99+
{renderCells(row, props, {
100+
component: bordered ? ['th', 'td'] : 'td',
101+
type: 'item',
102+
showLabel: true,
103+
showContent: true,
104+
})}
105+
</tr>
106+
);
107+
};
108+
109+
export default Row;

‎components/descriptions/__tests__/__snapshots__/index.test.js.snap

+37-19
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ exports[`Descriptions Descriptions support colon 1`] = `
77
<table>
88
<tbody>
99
<tr class="ant-descriptions-row">
10-
<td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
10+
<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>
1111
</tr>
1212
</tbody>
1313
</table>
@@ -22,7 +22,9 @@ exports[`Descriptions Descriptions support style 1`] = `
2222
<table>
2323
<tbody>
2424
<tr class="ant-descriptions-row">
25-
<td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon ant-descriptions-item-no-label"><!----></span><span class="ant-descriptions-item-content">Cloud Database</span></td>
25+
<td class="ant-descriptions-item" colspan="3">
26+
<!----><span class="ant-descriptions-item-content">Cloud Database</span>
27+
</td>
2628
</tr>
2729
</tbody>
2830
</table>
@@ -37,7 +39,7 @@ exports[`Descriptions Descriptions.Item support className 1`] = `
3739
<table>
3840
<tbody>
3941
<tr class="ant-descriptions-row">
40-
<td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
42+
<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>
4143
</tr>
4244
</tbody>
4345
</table>
@@ -52,12 +54,12 @@ exports[`Descriptions column is number 1`] = `
5254
<table>
5355
<tbody>
5456
<tr class="ant-descriptions-row">
55-
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
56-
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></td>
57-
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">time</span><span class="ant-descriptions-item-content">18:00:00</span></td>
57+
<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>
58+
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></td>
59+
<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>
5860
</tr>
5961
<tr class="ant-descriptions-row">
60-
<td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Amount</span><span class="ant-descriptions-item-content">$80.00</span></td>
62+
<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>
6163
</tr>
6264
</tbody>
6365
</table>
@@ -72,20 +74,36 @@ exports[`Descriptions vertical layout 1`] = `
7274
<table>
7375
<tbody>
7476
<tr class="ant-descriptions-row">
75-
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Product</span></td>
76-
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Billing</span></td>
77-
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">time</span></td>
77+
<th class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Product</span>
78+
<!---->
79+
</th>
80+
<th class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Billing</span>
81+
<!---->
82+
</th>
83+
<th class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">time</span>
84+
<!---->
85+
</th>
7886
</tr>
7987
<tr class="ant-descriptions-row">
80-
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-content">Cloud Database</span></td>
81-
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-content">Prepaid</span></td>
82-
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-content">18:00:00</span></td>
88+
<td class="ant-descriptions-item" colspan="1">
89+
<!----><span class="ant-descriptions-item-content">Cloud Database</span>
90+
</td>
91+
<td class="ant-descriptions-item" colspan="1">
92+
<!----><span class="ant-descriptions-item-content">Prepaid</span>
93+
</td>
94+
<td class="ant-descriptions-item" colspan="1">
95+
<!----><span class="ant-descriptions-item-content">18:00:00</span>
96+
</td>
8397
</tr>
8498
<tr class="ant-descriptions-row">
85-
<td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Amount</span></td>
99+
<th class="ant-descriptions-item" colspan="3"><span class="ant-descriptions-item-label">Amount</span>
100+
<!---->
101+
</th>
86102
</tr>
87103
<tr class="ant-descriptions-row">
88-
<td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-content">$80.00</span></td>
104+
<td class="ant-descriptions-item" colspan="3">
105+
<!----><span class="ant-descriptions-item-content">$80.00</span>
106+
</td>
89107
</tr>
90108
</tbody>
91109
</table>
@@ -100,12 +118,12 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
100118
<table>
101119
<tbody>
102120
<tr class="ant-descriptions-row">
103-
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
104-
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></td>
105-
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">time</span><span class="ant-descriptions-item-content">18:00:00</span></td>
121+
<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>
122+
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></td>
123+
<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>
106124
</tr>
107125
<tr class="ant-descriptions-row">
108-
<td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Amount</span><span class="ant-descriptions-item-content">$80.00</span></td>
126+
<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>
109127
</tr>
110128
</tbody>
111129
</table>

0 commit comments

Comments
 (0)