@aplus-frontend/ui/lib/src/ap-pro-card/interface.d.ts

import { BadgeProps, StatisticProps } from '@aplus-frontend/antdv';
import { CSSProperties, VNode, VNodeChild } from 'vue';
export type ApProCardBreakpoint = 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
export type ApProCardGutter = number | Partial<Record<ApProCardBreakpoint, number>>;
export type ApProCardColSpanType = number | string;
export interface ApProCardProps {
    /** 标题样式 */
    headStyle?: CSSProperties;
    /** 内容样式 */
    bodyStyle?: CSSProperties;
    /** 操作区样式 */
    actionsStyle?: CSSProperties;
    /** 页头是否有分割线 */
    headerBordered?: boolean;
    /** 卡片标题 */
    title?: VNodeChild;
    /** 标题说明 */
    tooltip?: VNodeChild;
    /** 右上角自定义区域 */
    extra?: VNodeChild;
    /** 布局，center 代表垂直居中 */
    layout?: 'default' | 'center';
    /** 卡片类型 */
    type?: 'default' | 'inner';
    /** 指定 Flex 方向，仅在嵌套子卡片时有效 */
    direction?: 'column' | 'row';
    /** 是否自动换行，仅在嵌套子卡片时有效 */
    wrap?: boolean;
    /** 加载中 */
    loading?: boolean | VNodeChild;
    /** 栅格布局宽度，24 栅格，支持指定宽度或百分，需要支持响应式 colSpan={{ xs: 12, sm: 6 }} */
    colSpan?: ApProCardColSpanType | Partial<Record<ApProCardBreakpoint, ApProCardColSpanType>>;
    colStyle?: CSSProperties;
    /** 栅格间距 */
    gutter?: ApProCardGutter | ApProCardGutter[];
    /** 操作区 */
    actions?: VNodeChild;
    /** 拆分卡片方式 */
    split?: 'vertical' | 'horizontal';
    /** 是否有边框 */
    bordered?: boolean;
    /**
     * 鼠标移过时可浮起
     *
     * @default false
     */
    hoverable?: boolean;
    /** 幽灵模式，即是否取消卡片内容区域的 padding 和 背景颜色。 */
    ghost?: boolean;
    /** 是否可折叠 */
    collapsible?: boolean;
    /** 配置默认是否折叠 */
    defaultCollapsed?: boolean;
    /** 受控 collapsed 属性 */
    collapsed?: boolean;
    /** 折叠按钮自定义节点 */
    collapsibleIconRender?: ({ collapsed }: {
        collapsed: boolean;
    }) => VNodeChild;
    /** card的阴影 */
    boxShadow?: boolean;
}
export type ApProCardSolts = {
    /** 内容区 */
    default?: () => VNode[];
    /** 标题 */
    title?: () => VNodeChild;
    /** 右上角自定义区域 */
    extra?: () => VNodeChild;
    /** 卡片操作组，位置在卡片底部 */
    actions?: () => VNodeChild;
};
export type ApProCardStatisticProps = StatisticProps & {
    /** 描述性标签 */
    description?: VNodeChild;
    /** 标题提示 */
    tip?: VNodeChild;
    status?: BadgeProps['status'];
    /** Icon 图标 */
    icon?: VNodeChild;
    /** Layout 布局 */
    layout?: 'horizontal' | 'vertical' | 'vertical-center' | 'inline';
    /** 趋势 */
    trend?: 'up' | 'down';
    /** 尺寸 */
    size?: 'default' | 'small';
};
export type ApProCardStatisticSolts = {
    /**
     * 数值的标题
     */
    title?: () => VNode[];
    /**
     * 设置数值的前缀
     */
    prefix?: () => VNode[];
    /**
     * 设置数值的后缀
     */
    suffix?: () => VNode[];
    /**
     * 图标
     */
    icon?: () => VNode[];
    /**
     * 标题提示
     */
    tip?: () => VNode[];
    /**
     * 描述性标签
     */
    description?: () => VNode[];
};
export type ApStatisticCardProps = ApProCardProps & {
    /** 图表配置 */
    chart?: VNodeChild;
    /** 数值统计配置 */
    statistic?: ApProCardStatisticProps;
    /** Chart 相对于 statistic 的位置 */
    chartPlacement?: 'right' | 'bottom' | 'left';
    /** 底部额外展示区域 */
    footer?: VNodeChild;
};
export type ApStatisticCardSolts = ApProCardSolts & {
    /**
     * 图表配置
     */
    chart?: () => VNodeChild;
    /**
     * 额外指标展示
     */
    footer?: () => VNodeChild;
    /**
     * 数值的标题
     */
    statisticTitle?: () => VNode[];
    /**
     * 设置数值的前缀
     */
    prefix?: () => VNode[];
    /**
     * 设置数值的后缀
     */
    suffix?: () => VNode[];
    /**
     * 图标
     */
    icon?: () => VNode[];
    /**
     * 标题提示
     */
    tip?: () => VNode[];
    /**
     * 描述性标签
     */
    description?: () => VNodeChild;
};