ant-design-vue/components/descriptions/Col.jsx
言肆 e5924d5ded
feat: update descriptions (#2385)
* feat: update descriptions

* fix: merge Col props
2020-06-11 22:35:09 +08:00

83 lines
2.1 KiB
Vue

import PropTypes from '../_util/vue-types';
import { getOptionProps } from '../_util/props-util';
const ColProps = {
child: PropTypes.any,
bordered: PropTypes.bool,
colon: PropTypes.bool,
type: PropTypes.oneOf(['label', 'content']),
layout: PropTypes.oneOf(['horizontal', 'vertical']),
};
const Col = (_, { attrs }) => {
// props: {
// child: PropTypes.any,
// bordered: PropTypes.bool,
// colon: PropTypes.bool,
// type: PropTypes.oneOf(['label', 'content']),
// layout: PropTypes.oneOf(['horizontal', 'vertical']),
// }
const { child, bordered, colon, type, layout } = attrs;
const { prefixCls, span = 1 } = getOptionProps(child);
const { key, children = {} } = child || {};
const label = children.label && children.label();
const defaultSlot = children.default && children.default();
const someLabelProps = {
class: [
`${prefixCls}-item-label`,
{
[`${prefixCls}-item-colon`]: colon,
[`${prefixCls}-item-no-label`]: !label,
},
],
key: `${key}-label`,
};
if (layout === 'vertical') {
someLabelProps.colSpan = span * 2 - 1;
}
if (bordered) {
if (type === 'label') {
return <th {...someLabelProps}>{label}</th>;
}
return (
<td class={`${prefixCls}-item-content`} key={`${key}-content`} colSpan={span * 2 - 1}>
{defaultSlot}
</td>
);
}
if (layout === 'vertical') {
if (type === 'content') {
return (
<td colSpan={span} class={`${prefixCls}-item`}>
<span class={`${prefixCls}-item-content`} key={`${key}-content`}>
{defaultSlot}
</span>
</td>
);
}
return (
<td colSpan={span} class={`${prefixCls}-item`}>
<span
class={[`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon }]}
key={`${key}-label`}
>
{label}
</span>
</td>
);
}
return (
<td colSpan={span} class={`${prefixCls}-item`}>
<span {...someLabelProps}>{label}</span>
<span class={`${prefixCls}-item-content`} key={`${key}-content`}>
{defaultSlot}
</span>
</td>
);
};
export default Col;