@ykcl/smart-ui-oversea
Version:
A Component Library for Vue.js.
116 lines (115 loc) • 3.72 kB
JavaScript
export default {
name: 'YkDescriptionsRow',
props: {
row: {
type: Array
}
},
inject: ['YkDescriptions'],
render(h) {
const { YkDescriptions } = this;
const row = (this.row || []).map(item => {
return {
...item,
label: item.slots.label || item.props.label,
...['labelClassName', 'contentClassName', 'labelStyle', 'contentStyle'].reduce((res, key) => {
res[key] = item.props[key] || YkDescriptions[key];
return res;
}, {})
};
});
if (YkDescriptions.direction === 'vertical') {
return (
<tbody>
<tr class="yk-descriptions-row">
{
row.map(item => {
return (
<th
class={{
'yk-descriptions-item__label': true,
'has-colon': YkDescriptions.border ? false : YkDescriptions.colon,
'is-bordered-label': YkDescriptions.border,
[item.labelClassName]: true
}}
style={item.labelStyle}
colSpan={item.props.span}
>{item.label}</th>
);
})
}
</tr>
<tr class="yk-descriptions-row">
{
row.map(item =>{
return (
<td
class="yk-descriptions-item__content"
class={['yk-descriptions-item__content', item.contentClassName]}
style={item.contentStyle}
colSpan={item.props.span}
>{item.slots.default}</td>
);
})
}
</tr>
</tbody>
);
}
if (YkDescriptions.border) {
return (
<tbody>
<tr class="yk-descriptions-row">
{
row.map(item=> {
return ([
<th
class={{
'yk-descriptions-item__label': true,
'is-bordered-label': YkDescriptions.border,
[item.labelClassName]: true
}}
style={item.labelStyle}
colSpan="1"
>{item.label}</th>,
<td
class={['yk-descriptions-item__content', item.contentClassName]}
style={item.contentStyle}
colSpan={item.props.span * 2 - 1}
>{item.slots.default}</td>
]);
})
}
</tr>
</tbody>
);
}
return (
<tbody>
<tr class="yk-descriptions-row">
{
row.map(item=> {
return (
<td class="yk-descriptions-item" colSpan={item.props.span}>
<div class="yk-descriptions-item__container">
<span
class={{
'yk-descriptions-item__label': true,
'has-colon': YkDescriptions.colon,
[item.labelClassName]: true
}}
style={item.labelStyle}
>{item.props.label}</span>
<span
class={['yk-descriptions-item__content', item.contentClassName]}
style={item.contentStyle}
>{item.slots.default}</span>
</div>
</td>);
})
}
</tr>
</tbody>
);
}
};