import type { VNode } from 'vue';
|
|
import type {
|
DescriptionsBreakpoint,
|
DescriptionsColumn,
|
DescriptionsItemType,
|
InternalDescriptionsItem,
|
ScreenMap,
|
} from './types';
|
|
import { Comment, computed, Fragment } from 'vue';
|
|
import { useBreakpoints } from '@vueuse/core';
|
|
/** 默认列数映射 */
|
export const DEFAULT_COLUMN_MAP: Record<DescriptionsBreakpoint, number> = {
|
lg: 3,
|
md: 3,
|
sm: 2,
|
xl: 3,
|
xs: 1,
|
xxl: 3,
|
xxxl: 4,
|
};
|
|
/** 由大到小的断点顺序，matchScreen 按此顺序取第一个命中的值 */
|
const RESPONSIVE_ARRAY: DescriptionsBreakpoint[] = [
|
'xxxl',
|
'xxl',
|
'xl',
|
'lg',
|
'md',
|
'sm',
|
'xs',
|
];
|
|
/** 断点像素值 */
|
const BREAKPOINT_PX = {
|
sm: 576,
|
md: 768,
|
lg: 992,
|
xl: 1200,
|
xxl: 1600,
|
xxxl: 2000,
|
};
|
|
/**
|
* 在给定的断点配置中，按由大到小的顺序取第一个命中的值
|
*/
|
export function matchScreen(
|
screens: ScreenMap,
|
screenSizes?: Partial<Record<DescriptionsBreakpoint, number>>,
|
): number | undefined {
|
if (!screenSizes) return undefined;
|
for (const breakpoint of RESPONSIVE_ARRAY) {
|
if (screens[breakpoint] && screenSizes[breakpoint] !== undefined) {
|
return screenSizes[breakpoint];
|
}
|
}
|
return undefined;
|
}
|
|
/**
|
* 监听视口宽度，返回当前命中的断点集合
|
*/
|
export function useScreens() {
|
const breakpoints = useBreakpoints(BREAKPOINT_PX);
|
return computed<ScreenMap>(() => ({
|
lg: breakpoints.lg.value,
|
md: breakpoints.md.value,
|
sm: breakpoints.sm.value,
|
xl: breakpoints.xl.value,
|
xs: !breakpoints.sm.value,
|
xxl: breakpoints.xxl.value,
|
xxxl: breakpoints.xxxl.value,
|
}));
|
}
|
|
/**
|
* 计算最终列数：固定数字直接返回，否则按断点解析
|
*/
|
export function resolveColumn(
|
column: DescriptionsColumn | undefined,
|
screens: ScreenMap,
|
): number {
|
if (typeof column === 'number') return column;
|
return matchScreen(screens, { ...DEFAULT_COLUMN_MAP, ...column }) ?? 3;
|
}
|
|
/**
|
* 归一化列表项：将 span 解析为数字，'filled' 标记为 filled
|
*/
|
export function normalizeItems(
|
items: DescriptionsItemType[],
|
screens: ScreenMap,
|
): InternalDescriptionsItem[] {
|
return items.map((item, index) => {
|
const { span, ...rest } = item;
|
if (span === 'filled') {
|
return { ...rest, _index: index, filled: true };
|
}
|
return {
|
...rest,
|
_index: index,
|
span: typeof span === 'number' ? span : matchScreen(screens, span),
|
};
|
});
|
}
|
|
/**
|
* 行装箱算法：根据列数与各项 span 将列表项拆分为多行，
|
* 并补齐每行最后一项以占满列数。移植自 antdv-next useRow。
|
*/
|
export function calcRows(
|
items: InternalDescriptionsItem[],
|
column: number,
|
): InternalDescriptionsItem[][] {
|
let rows: InternalDescriptionsItem[][] = [];
|
let tmpRow: InternalDescriptionsItem[] = [];
|
let count = 0;
|
|
items.filter(Boolean).forEach((item) => {
|
const { filled, ...rest } = item;
|
// filled：占满当前行剩余，并立即换行
|
if (filled) {
|
tmpRow.push(rest);
|
rows.push(tmpRow);
|
tmpRow = [];
|
count = 0;
|
return;
|
}
|
|
const restSpan = column - count;
|
count += item.span || 1;
|
|
if (count >= column) {
|
// 超出列数时，将当前项 span 收敛为剩余列数，避免溢出
|
tmpRow.push(count > column ? { ...rest, span: restSpan } : rest);
|
rows.push(tmpRow);
|
tmpRow = [];
|
count = 0;
|
} else {
|
tmpRow.push(rest);
|
}
|
});
|
|
if (tmpRow.length > 0) rows.push(tmpRow);
|
|
// 补齐：若一行总 span 不足列数，扩展最后一项
|
rows = rows.map((row) => {
|
const total = row.reduce((acc, item) => acc + (item.span || 1), 0);
|
if (total < column) {
|
const last = row[row.length - 1];
|
if (last) {
|
last.span = column - (total - (last.span || 1));
|
}
|
}
|
return row;
|
});
|
|
return rows;
|
}
|
|
/** 标记组件类型为 DescriptionsItem，便于从插槽 vnode 中识别 */
|
export const DESCRIPTIONS_ITEM_NAME = 'VbenDescriptionsItem';
|
|
function isItemVNode(node: VNode): boolean {
|
const type = node.type as any;
|
return (
|
!!type &&
|
(type.__isDescriptionsItem === true || type.name === DESCRIPTIONS_ITEM_NAME)
|
);
|
}
|
|
function flattenVNodes(nodes: VNode[]): VNode[] {
|
const result: VNode[] = [];
|
for (const node of nodes) {
|
if (node.type === Fragment && Array.isArray(node.children)) {
|
result.push(...flattenVNodes(node.children as VNode[]));
|
} else if (node.type !== Comment) {
|
result.push(node);
|
}
|
}
|
return result;
|
}
|
|
/**
|
* 从默认插槽的 vnode 中解析出列表项，支持
|
* <VbenDescriptionsItem label="..." :span="2">content</VbenDescriptionsItem> 写法
|
*/
|
export function parseItemsFromSlot(nodes: VNode[]): DescriptionsItemType[] {
|
return flattenVNodes(nodes)
|
.filter((node) => isItemVNode(node))
|
.map((node) => {
|
const props = (node.props ?? {}) as Record<string, any>;
|
const children = (node.children ?? {}) as Record<string, any>;
|
const labelSlot =
|
typeof children.label === 'function' ? children.label : undefined;
|
const contentDefaultSlot =
|
typeof children.default === 'function' ? children.default : undefined;
|
const contentSlot =
|
typeof children.content === 'function'
|
? children.content
|
: contentDefaultSlot;
|
return {
|
class: props.class,
|
content: contentSlot ?? props.content,
|
contentStyle: props.contentStyle ?? props['content-style'],
|
key: node.key ?? undefined,
|
label: labelSlot ?? props.label,
|
labelStyle: props.labelStyle ?? props['label-style'],
|
span: props.span,
|
style: props.style,
|
} as DescriptionsItemType;
|
});
|
}
|
