2020-11-02 08:53:56 +00:00
|
|
|
import {
|
|
|
|
inject,
|
|
|
|
ref,
|
|
|
|
App,
|
|
|
|
defineComponent,
|
|
|
|
PropType,
|
|
|
|
VNode,
|
|
|
|
HTMLAttributes,
|
|
|
|
ExtractPropTypes,
|
|
|
|
onMounted,
|
|
|
|
onBeforeUnmount,
|
2020-11-07 07:08:42 +00:00
|
|
|
Plugin,
|
2020-11-02 08:53:56 +00:00
|
|
|
} from 'vue';
|
2020-03-07 11:45:13 +00:00
|
|
|
import warning from '../_util/warning';
|
2020-11-02 08:53:56 +00:00
|
|
|
import ResponsiveObserve, {
|
|
|
|
Breakpoint,
|
|
|
|
responsiveArray,
|
|
|
|
ScreenMap,
|
|
|
|
} from '../_util/responsiveObserve';
|
2020-09-30 02:47:18 +00:00
|
|
|
import { defaultConfigProvider } from '../config-provider';
|
2020-11-02 08:53:56 +00:00
|
|
|
import Row from './Row';
|
2020-03-07 11:45:13 +00:00
|
|
|
import PropTypes from '../_util/vue-types';
|
2020-11-02 08:53:56 +00:00
|
|
|
import { tuple } from '../_util/type';
|
|
|
|
import { cloneElement } from '../_util/vnode';
|
|
|
|
import { filterEmpty } from '../_util/props-util';
|
2020-03-07 11:45:13 +00:00
|
|
|
|
|
|
|
export const DescriptionsItemProps = {
|
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
label: PropTypes.any,
|
|
|
|
span: PropTypes.number,
|
|
|
|
};
|
|
|
|
|
2020-11-12 02:06:11 +00:00
|
|
|
export const DescriptionsItem = defineComponent({
|
2020-03-07 11:45:13 +00:00
|
|
|
name: 'ADescriptionsItem',
|
2020-10-14 09:57:38 +00:00
|
|
|
props: {
|
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
label: PropTypes.VNodeChild,
|
|
|
|
span: PropTypes.number.def(1),
|
|
|
|
},
|
2020-07-29 09:05:59 +00:00
|
|
|
render() {
|
|
|
|
return null;
|
|
|
|
},
|
2020-11-12 02:06:11 +00:00
|
|
|
});
|
2020-03-07 11:45:13 +00:00
|
|
|
|
2021-04-21 07:11:23 +00:00
|
|
|
const DEFAULT_COLUMN_MAP: Partial<Record<Breakpoint, number>> = {
|
2020-10-14 09:57:38 +00:00
|
|
|
xxl: 3,
|
|
|
|
xl: 3,
|
|
|
|
lg: 3,
|
|
|
|
md: 3,
|
|
|
|
sm: 2,
|
|
|
|
xs: 1,
|
|
|
|
};
|
|
|
|
|
2020-11-02 08:53:56 +00:00
|
|
|
function getColumn(column: DescriptionsProps['column'], screens: ScreenMap): number {
|
|
|
|
if (typeof column === 'number') {
|
|
|
|
return column;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (typeof column === 'object') {
|
|
|
|
for (let i = 0; i < responsiveArray.length; i++) {
|
|
|
|
const breakpoint: Breakpoint = responsiveArray[i];
|
|
|
|
if (screens[breakpoint] && column[breakpoint] !== undefined) {
|
|
|
|
return column[breakpoint] || DEFAULT_COLUMN_MAP[breakpoint];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-03-07 11:45:13 +00:00
|
|
|
|
2020-11-02 08:53:56 +00:00
|
|
|
return 3;
|
|
|
|
}
|
2020-03-07 11:45:13 +00:00
|
|
|
|
2020-11-02 08:53:56 +00:00
|
|
|
function getFilledItem(node: VNode, span: number | undefined, rowRestCol: number): VNode {
|
|
|
|
let clone = node;
|
2020-03-07 11:45:13 +00:00
|
|
|
|
2020-11-02 08:53:56 +00:00
|
|
|
if (span === undefined || span > rowRestCol) {
|
|
|
|
clone = cloneElement(node, {
|
|
|
|
span: rowRestCol,
|
|
|
|
});
|
2020-03-07 11:45:13 +00:00
|
|
|
|
2020-11-02 08:53:56 +00:00
|
|
|
warning(
|
|
|
|
span === undefined,
|
|
|
|
'Descriptions',
|
|
|
|
'Sum of column `span` in a line not match `column` of Descriptions.',
|
|
|
|
);
|
|
|
|
}
|
2020-03-07 11:45:13 +00:00
|
|
|
|
2020-11-02 08:53:56 +00:00
|
|
|
return clone;
|
|
|
|
}
|
2020-03-07 11:45:13 +00:00
|
|
|
|
2020-11-02 08:53:56 +00:00
|
|
|
function getRows(children: VNode[], column: number) {
|
|
|
|
const childNodes = filterEmpty(children);
|
|
|
|
const rows: VNode[][] = [];
|
2020-03-07 11:45:13 +00:00
|
|
|
|
2020-11-02 08:53:56 +00:00
|
|
|
let tmpRow: VNode[] = [];
|
|
|
|
let rowRestCol = column;
|
|
|
|
|
|
|
|
childNodes.forEach((node, index) => {
|
|
|
|
const span: number | undefined = node.props?.span;
|
|
|
|
const mergedSpan = span || 1;
|
|
|
|
|
|
|
|
// Additional handle last one
|
|
|
|
if (index === childNodes.length - 1) {
|
|
|
|
tmpRow.push(getFilledItem(node, span, rowRestCol));
|
|
|
|
rows.push(tmpRow);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (mergedSpan < rowRestCol) {
|
|
|
|
rowRestCol -= mergedSpan;
|
|
|
|
tmpRow.push(node);
|
|
|
|
} else {
|
|
|
|
tmpRow.push(getFilledItem(node, mergedSpan, rowRestCol));
|
|
|
|
rows.push(tmpRow);
|
|
|
|
rowRestCol = column;
|
|
|
|
tmpRow = [];
|
2020-03-07 11:45:13 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
return rows;
|
2020-11-02 08:53:56 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
const descriptionsProps = {
|
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
bordered: PropTypes.looseBool,
|
|
|
|
size: PropTypes.oneOf(tuple('default', 'middle', 'small')).def('default'),
|
|
|
|
title: PropTypes.VNodeChild,
|
|
|
|
extra: PropTypes.VNodeChild,
|
|
|
|
column: {
|
|
|
|
type: [Number, Object] as PropType<number | Partial<Record<Breakpoint, number>>>,
|
|
|
|
default: () => DEFAULT_COLUMN_MAP,
|
|
|
|
},
|
|
|
|
layout: PropTypes.oneOf(tuple('horizontal', 'vertical')),
|
|
|
|
colon: PropTypes.looseBool,
|
2020-03-07 11:45:13 +00:00
|
|
|
};
|
|
|
|
|
2020-11-02 08:53:56 +00:00
|
|
|
export type DescriptionsProps = HTMLAttributes &
|
|
|
|
Partial<ExtractPropTypes<typeof descriptionsProps>>;
|
|
|
|
|
|
|
|
const Descriptions = defineComponent<DescriptionsProps>({
|
2020-03-07 11:45:13 +00:00
|
|
|
name: 'ADescriptions',
|
|
|
|
Item: DescriptionsItem,
|
2020-11-02 08:53:56 +00:00
|
|
|
setup(props, { slots }) {
|
|
|
|
const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
|
2020-03-07 11:45:13 +00:00
|
|
|
|
2020-11-02 08:53:56 +00:00
|
|
|
let token: number;
|
2020-03-07 11:45:13 +00:00
|
|
|
|
2020-11-02 08:53:56 +00:00
|
|
|
const screens = ref<ScreenMap>({});
|
2020-03-07 11:45:13 +00:00
|
|
|
|
2020-11-02 08:53:56 +00:00
|
|
|
onMounted(() => {
|
|
|
|
token = ResponsiveObserve.subscribe(screen => {
|
|
|
|
if (typeof props.column !== 'object') {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
screens.value = screen;
|
2020-03-07 11:45:13 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-11-02 08:53:56 +00:00
|
|
|
onBeforeUnmount(() => {
|
|
|
|
ResponsiveObserve.unsubscribe(token);
|
|
|
|
});
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
const {
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
column,
|
|
|
|
size,
|
|
|
|
bordered = false,
|
|
|
|
layout = 'horizontal',
|
|
|
|
colon = true,
|
|
|
|
title = slots.title?.(),
|
|
|
|
extra = slots.extra?.(),
|
|
|
|
} = props;
|
|
|
|
|
|
|
|
const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
|
|
|
|
const mergeColumn = getColumn(column, screens.value);
|
|
|
|
const children = slots.default?.();
|
|
|
|
const rows = getRows(children, mergeColumn);
|
2020-03-07 11:45:13 +00:00
|
|
|
|
2020-11-02 08:53:56 +00:00
|
|
|
return (
|
|
|
|
<div
|
|
|
|
class={[
|
|
|
|
prefixCls,
|
|
|
|
{
|
|
|
|
[`${prefixCls}-${size}`]: size !== 'default',
|
|
|
|
[`${prefixCls}-bordered`]: !!bordered,
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
>
|
|
|
|
{(title || extra) && (
|
|
|
|
<div class={`${prefixCls}-header`}>
|
|
|
|
<div class={`${prefixCls}-title`}>{title}</div>
|
|
|
|
<div class={`${prefixCls}-extra`}>{extra}</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
<div class={`${prefixCls}-view`}>
|
|
|
|
<table>
|
|
|
|
<tbody>
|
|
|
|
{rows.map((row, index) => (
|
|
|
|
<Row
|
|
|
|
key={index}
|
|
|
|
index={index}
|
|
|
|
colon={colon}
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
vertical={layout === 'vertical'}
|
|
|
|
bordered={bordered}
|
|
|
|
row={row}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
2020-03-07 11:45:13 +00:00
|
|
|
</div>
|
2020-11-02 08:53:56 +00:00
|
|
|
);
|
|
|
|
};
|
2020-03-07 11:45:13 +00:00
|
|
|
},
|
2020-10-14 09:57:38 +00:00
|
|
|
});
|
2020-03-07 11:45:13 +00:00
|
|
|
|
2020-11-02 08:53:56 +00:00
|
|
|
Descriptions.props = descriptionsProps;
|
|
|
|
|
2020-10-14 09:57:38 +00:00
|
|
|
Descriptions.install = function(app: App) {
|
2020-06-11 14:35:09 +00:00
|
|
|
app.component(Descriptions.name, Descriptions);
|
|
|
|
app.component(Descriptions.Item.name, Descriptions.Item);
|
2020-10-13 11:14:56 +00:00
|
|
|
return app;
|
2020-03-07 11:45:13 +00:00
|
|
|
};
|
|
|
|
|
2020-11-01 07:03:33 +00:00
|
|
|
export default Descriptions as typeof Descriptions &
|
|
|
|
Plugin & {
|
|
|
|
readonly Item: typeof DescriptionsItem;
|
|
|
|
};
|