diff --git a/packages/components/timeline/src/timeline-item.ts b/packages/components/timeline/src/timeline-item.ts index fdbd6a1835..4b2d334453 100644 --- a/packages/components/timeline/src/timeline-item.ts +++ b/packages/components/timeline/src/timeline-item.ts @@ -1,8 +1,50 @@ import { buildProps, iconPropType } from '@element-plus/utils' -import type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue' +import type { Component, ExtractPublicPropTypes } from 'vue' import type TimelineItem from './timeline-item.vue' +export interface TimelineItemProps { + /** + * @description timestamp content + */ + timestamp?: string + /** + * @description whether to show timestamp + */ + hideTimestamp?: boolean + /** + * @description whether vertically centered + */ + center?: boolean + /** + * @description position of timestamp + */ + placement?: 'top' | 'bottom' + /** + * @description node type + */ + type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | '' + /** + * @description background color of node + */ + color?: string + /** + * @description node size + */ + size?: 'normal' | 'large' + /** + * @description icon component + */ + icon?: string | Component + /** + * @description icon is hollow + */ + hollow?: boolean +} + +/** + * @deprecated Removed after 3.0.0, Use `TimelineItemProps` instead. + */ export const timelineItemProps = buildProps({ /** * @description timestamp content @@ -61,7 +103,10 @@ export const timelineItemProps = buildProps({ */ hollow: Boolean, } as const) -export type TimelineItemProps = ExtractPropTypes + +/** + * @deprecated Removed after 3.0.0, Use `TimelineItemProps` instead. + */ export type TimelineItemPropsPublic = ExtractPublicPropTypes< typeof timelineItemProps > diff --git a/packages/components/timeline/src/timeline-item.vue b/packages/components/timeline/src/timeline-item.vue index da3d97deab..323c61b59c 100644 --- a/packages/components/timeline/src/timeline-item.vue +++ b/packages/components/timeline/src/timeline-item.vue @@ -42,17 +42,22 @@ import { computed, inject } from 'vue' import { ElIcon } from '@element-plus/components/icon' import { useNamespace } from '@element-plus/hooks' -import { timelineItemProps } from './timeline-item' import { TIMELINE_INJECTION_KEY } from './tokens' import type { TimelineProvider } from './tokens' +import type { TimelineItemProps } from './timeline-item' defineOptions({ name: 'ElTimelineItem', }) -const props = defineProps(timelineItemProps) - +const props = withDefaults(defineProps(), { + timestamp: '', + placement: 'bottom', + type: '', + color: '', + size: 'normal', +}) const { props: timelineProps } = inject( TIMELINE_INJECTION_KEY )!