ant-design-vue/components/descriptions/Col.tsx
2020-10-19 16:43:10 +08:00

83 lines
2.0 KiB
TypeScript

import { SetupContext, VNode } from 'vue';
import { getOptionProps } from '../_util/props-util';
interface ColProps {
child: VNode;
bordered: boolean;
colon: boolean;
type?: 'label' | 'content';
layout?: 'horizontal' | 'vertical';
colKey?: string;
}
const Col = (_props: ColProps, { attrs }: SetupContext) => {
const {
child = {} as VNode,
bordered,
colon,
type,
layout,
colKey: key,
} = (attrs as unknown) as ColProps;
const { prefixCls, span = 1 } = getOptionProps(child);
const { children = {} as any, props = {} } = child;
const label = props.label || (children.label && children.label());
const defaultSlot = children.default && children.default();
const labelProps: any = {
class: [
`${prefixCls}-item-label`,
{
[`${prefixCls}-item-colon`]: colon,
[`${prefixCls}-item-no-label`]: !label,
},
],
key: `${key}-label`,
};
if (layout === 'vertical') {
labelProps.colspan = span * 2 - 1;
}
if (bordered) {
if (type === 'label') {
return <th {...labelProps}>{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 {...labelProps}>{label}</span>
<span class={`${prefixCls}-item-content`} key={`${key}-content`}>
{defaultSlot}
</span>
</td>
);
};
export default Col;