@fesjs/fes-design
Version:
fes-design for PC
92 lines (91 loc) • 3.07 kB
TypeScript
import type { CSSProperties, PropType, SlotsType, VNodeChild } from 'vue';
import type { ComponentSlots } from '../_util/interface';
import type { ComponentInnerProps, ComponentProps } from './utilTypes';
/** 严格版本的 Extract */
type StrictExtract<Type, Union extends Type> = Extract<Type, Union>;
/** 时间轴的正方向，值同 flex 布局的 direction */
type TimelineDirection = 'column' | 'row' | 'row-reverse';
/**
* 时间轴结点中，「标题」相对「轴」的位置
*
* 视时间轴为 flex 布局中的主轴
* - start：表示交叉轴方向的 start 一侧
* - end：表示交叉轴方向的 end 一侧
* - alternate: 表示交替排列
*/
type TimelineTitlePosition = 'start' | 'end' | 'alternate';
/**
* 时间轴结点中，「辅助描述」相对「标题」的位置
*
* - under：在标题下方
* - inline：与标题同行
* - opposite：在标题对面（跨过时间轴）
*/
type TimelineDescPosition = 'under' | 'inline' | 'opposite';
/**
* 时间轴结点颜色
*
* - info: primary-color
* - success: success-color
* - warning: warning-color
* - error: danger-color
*
* ref: _theme/base.ts
*/
export type TimelineIconType = 'info' | 'success' | 'warning' | 'error';
type Color = CSSProperties['color'];
/**
* 时间轴结点插槽或渲染函数的共同参数
*
* - #desc
* - #icon
*/
export interface TimelineNodeSlotCommonParams {
index: number;
item: TimelineNode;
}
/** 时间轴结点的参数 */
export interface TimelineNode {
title: string | ((params: TimelineNodeSlotCommonParams) => VNodeChild);
titlePosition?: StrictExtract<TimelineTitlePosition, 'start' | 'end'>;
desc?: string | ((params: TimelineNodeSlotCommonParams) => VNodeChild);
icon?: TimelineIconType | Color | string | ((params: TimelineNodeSlotCommonParams) => VNodeChild);
}
export declare const timelineProps: {
readonly direction: {
readonly type: PropType<TimelineDirection>;
readonly default: "column";
};
readonly titlePosition: {
readonly type: PropType<TimelineTitlePosition>;
readonly default: "end";
};
readonly descPosition: {
readonly type: PropType<TimelineDescPosition>;
readonly default: "under";
};
readonly data: {
readonly type: PropType<TimelineNode[]>;
readonly required: true;
};
readonly titleClass: {
readonly type: StringConstructor;
};
readonly descClass: {
readonly type: StringConstructor;
};
readonly titleWidth: {
readonly type: StringConstructor;
readonly default: "50%";
};
};
export type TimelineProps = ComponentProps<typeof timelineProps>;
export type TimelineInnerProps = ComponentInnerProps<typeof timelineProps>;
export type TimelineSlotsParams = {
desc: TimelineNodeSlotCommonParams;
icon: TimelineNodeSlotCommonParams;
title: TimelineNodeSlotCommonParams;
};
export type TimelineSlots = SlotsType<TimelineSlotsParams>;
export type TimelineUnboxSlots = ComponentSlots<TimelineSlotsParams>;
export {};