import type { Component, CSSProperties } from 'vue';
|
|
/** 响应式断点，与 antdv-next 保持一致 */
|
export type DescriptionsBreakpoint =
|
| 'lg'
|
| 'md'
|
| 'sm'
|
| 'xl'
|
| 'xs'
|
| 'xxl'
|
| 'xxxl';
|
|
/** 当前命中的断点集合 */
|
export type ScreenMap = Partial<Record<DescriptionsBreakpoint, boolean>>;
|
|
export type DescriptionsLayout = 'horizontal' | 'vertical';
|
|
export type DescriptionsSize = 'large' | 'middle' | 'small';
|
|
/** 列数，可为固定数字或按断点配置 */
|
export type DescriptionsColumn =
|
| number
|
| Partial<Record<DescriptionsBreakpoint, number>>;
|
|
/** 单项跨列，支持固定数字、'filled'（占满当前行剩余）或按断点配置 */
|
export type DescriptionsItemSpan =
|
| 'filled'
|
| number
|
| Partial<Record<DescriptionsBreakpoint, number>>;
|
|
/** 可渲染内容：字符串/数字/渲染函数/组件 */
|
export type DescriptionsRenderNode = (() => any) | Component | number | string;
|
|
export interface DescriptionsItemType {
|
/** 内容 */
|
content?: DescriptionsRenderNode;
|
/** 内容样式 */
|
contentStyle?: CSSProperties;
|
/** 唯一 key */
|
key?: number | string;
|
/** 标签 */
|
label?: DescriptionsRenderNode;
|
/** 标签样式 */
|
labelStyle?: CSSProperties;
|
/** 跨列 */
|
span?: DescriptionsItemSpan;
|
}
|
|
export interface DescriptionsProps {
|
/** 是否展示边框 */
|
bordered?: boolean;
|
class?: any;
|
/** 是否显示冒号（仅非 bordered 的水平布局生效） */
|
colon?: boolean;
|
/** 一行的列数 */
|
column?: DescriptionsColumn;
|
/** 统一的内容样式 */
|
contentStyle?: CSSProperties;
|
/** 操作区域，位于标题右侧 */
|
extra?: string;
|
/** 数据驱动的列表项；不传则读取默认插槽中的 VbenDescriptionsItem */
|
items?: DescriptionsItemType[];
|
/** 统一的标签样式 */
|
labelStyle?: CSSProperties;
|
/** 布局方式 */
|
layout?: DescriptionsLayout;
|
/** 尺寸 */
|
size?: DescriptionsSize;
|
/** 标题 */
|
title?: string;
|
}
|
|
export interface DescriptionsItemProps {
|
content?: DescriptionsRenderNode;
|
contentStyle?: CSSProperties;
|
label?: DescriptionsRenderNode;
|
labelStyle?: CSSProperties;
|
span?: DescriptionsItemSpan;
|
}
|
|
/** 归一化后的内部项，span 已解析为数字 */
|
export interface InternalDescriptionsItem {
|
_index?: number;
|
class?: string;
|
content?: DescriptionsRenderNode;
|
contentStyle?: CSSProperties;
|
filled?: boolean;
|
key?: number | string;
|
label?: DescriptionsRenderNode;
|
labelStyle?: CSSProperties;
|
span?: number;
|
style?: CSSProperties;
|
}
|
