2023-03-01 12:46:37 +00:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* Timeline visualizes a series of chained events.
|
|
|
|
*
|
2023-03-02 09:22:22 +00:00
|
|
|
* - [Live Demo](https://primevue.org/timeline)
|
2023-03-01 12:46:37 +00:00
|
|
|
*
|
|
|
|
* @module timeline
|
|
|
|
*/
|
2022-09-06 12:03:37 +00:00
|
|
|
import { VNode } from 'vue';
|
|
|
|
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
|
|
|
|
2023-03-01 12:46:37 +00:00
|
|
|
/**
|
|
|
|
* Defines valid properties in Timeline component.
|
|
|
|
*/
|
2022-09-06 12:03:37 +00:00
|
|
|
export interface TimelineProps {
|
|
|
|
/**
|
|
|
|
* An array of events to display.
|
|
|
|
*/
|
|
|
|
value?: any[] | undefined;
|
|
|
|
/**
|
|
|
|
* Position of the timeline bar relative to the content.
|
2023-03-03 08:18:55 +00:00
|
|
|
* @defaultValue 'left'
|
2022-09-06 12:03:37 +00:00
|
|
|
*/
|
2023-03-01 12:46:37 +00:00
|
|
|
align?: 'left' | 'right' | 'alternate' | 'top' | 'bottom' | undefined;
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Orientation of the timeline.
|
2023-03-03 08:18:55 +00:00
|
|
|
* @defaultValue 'horizontal'
|
2022-09-06 12:03:37 +00:00
|
|
|
*/
|
2023-03-01 12:46:37 +00:00
|
|
|
layout?: 'vertical' | 'horizontal' | undefined;
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Name of the field that uniquely identifies the a record in the data.
|
|
|
|
*/
|
|
|
|
dataKey?: string | undefined;
|
|
|
|
}
|
|
|
|
|
2023-03-01 12:46:37 +00:00
|
|
|
/**
|
|
|
|
* Defines valid slots in Timeline component.
|
|
|
|
*/
|
2022-09-06 12:03:37 +00:00
|
|
|
export interface TimelineSlots {
|
|
|
|
/**
|
|
|
|
* Custom content template
|
|
|
|
* @param {Object} scope - content slot's params.
|
|
|
|
*/
|
2023-03-01 12:46:37 +00:00
|
|
|
content(scope: {
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Item data
|
|
|
|
*/
|
|
|
|
item: any;
|
|
|
|
/**
|
|
|
|
* Index of item
|
|
|
|
*/
|
|
|
|
index: number;
|
2023-03-01 12:46:37 +00:00
|
|
|
}): VNode[];
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Custom opposite template.
|
|
|
|
* @param {Object} scope - opposite slot's params.
|
|
|
|
*/
|
2023-03-01 12:46:37 +00:00
|
|
|
opposite(scope: {
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Item data
|
|
|
|
*/
|
|
|
|
item: any;
|
|
|
|
/**
|
|
|
|
* Index of item
|
|
|
|
*/
|
|
|
|
index: number;
|
2023-03-01 12:46:37 +00:00
|
|
|
}): VNode[];
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Custom marker template.
|
|
|
|
* @param {Object} scope - marker slot's params.
|
|
|
|
*/
|
2023-03-01 12:46:37 +00:00
|
|
|
marker(scope: {
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Item data
|
|
|
|
*/
|
|
|
|
item: any;
|
|
|
|
/**
|
|
|
|
* Index of item
|
|
|
|
*/
|
|
|
|
index: number;
|
2023-03-01 12:46:37 +00:00
|
|
|
}): VNode[];
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Custom connector template.
|
|
|
|
*/
|
2023-03-01 12:46:37 +00:00
|
|
|
connector(scope: {
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Item data
|
|
|
|
*/
|
|
|
|
item: any;
|
|
|
|
/**
|
|
|
|
* Index of item
|
|
|
|
*/
|
|
|
|
index: number;
|
2023-03-01 12:46:37 +00:00
|
|
|
}): VNode[];
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
|
2023-03-01 12:46:37 +00:00
|
|
|
/**
|
|
|
|
* Defines valid emits in Timeline component.
|
|
|
|
*/
|
|
|
|
export interface TimelineEmits {}
|
2022-09-06 12:03:37 +00:00
|
|
|
|
2023-03-01 12:46:37 +00:00
|
|
|
/**
|
|
|
|
* **PrimeVue - Timeline**
|
|
|
|
*
|
|
|
|
* _Timeline visualizes a series of chained events._
|
|
|
|
*
|
|
|
|
* [Live Demo](https://www.primevue.org/timeline/)
|
|
|
|
* --- ---
|
|
|
|
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
|
|
|
|
*
|
|
|
|
* @group Component
|
|
|
|
*/
|
2022-09-14 11:26:01 +00:00
|
|
|
declare class Timeline extends ClassComponent<TimelineProps, TimelineSlots, TimelineEmits> {}
|
2022-09-06 12:03:37 +00:00
|
|
|
|
|
|
|
declare module '@vue/runtime-core' {
|
|
|
|
interface GlobalComponents {
|
2022-09-14 11:26:01 +00:00
|
|
|
Timeline: GlobalComponentConstructor<Timeline>;
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Timeline;
|