ant-design-vue/components/descriptions/Cell.tsx
2021-06-26 09:35:40 +08:00

76 lines
1.7 KiB
Vue

import type { VNodeTypes, HTMLAttributes, FunctionalComponent, CSSProperties } from 'vue';
function notEmpty(val: any) {
return val !== undefined && val !== null;
}
interface CellProps extends HTMLAttributes {
itemPrefixCls: string;
span: number;
component: string;
labelStyle?: CSSProperties;
contentStyle?: CSSProperties;
bordered?: boolean;
label?: VNodeTypes;
content?: VNodeTypes;
colon?: boolean;
}
const Cell: FunctionalComponent<CellProps> = props => {
const {
itemPrefixCls,
component,
span,
labelStyle,
contentStyle,
bordered,
label,
content,
colon,
} = props;
const Component = component as any;
if (bordered) {
return (
<Component
class={[
{
[`${itemPrefixCls}-item-label`]: notEmpty(label),
[`${itemPrefixCls}-item-content`]: notEmpty(content),
},
]}
colSpan={span}
>
{notEmpty(label) && <span style={labelStyle}>{label}</span>}
{notEmpty(content) && <span style={contentStyle}>{content}</span>}
</Component>
);
}
return (
<Component class={[`${itemPrefixCls}-item`]} colSpan={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>
);
};
export default Cell;