refactor(components): [timelineItem] use type-based definitions (#23479)

* refactor(components): [timelineItem] use type-based definitions

* Update packages/components/timeline/src/timeline-item.vue

* fix: type error

---------

Co-authored-by: rzzf <cszhjh@gmail.com>

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<typeof timelineItemProps>
+
+/**
+ * @deprecated Removed after 3.0.0, Use `TimelineItemProps` instead.
+ */
 export type TimelineItemPropsPublic = ExtractPublicPropTypes<
   typeof timelineItemProps
 >

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<TimelineItemProps>(), {
+  timestamp: '',
+  placement: 'bottom',
+  type: '',
+  color: '',
+  size: 'normal',
+})
 const { props: timelineProps } = inject<TimelineProvider>(
   TIMELINE_INJECTION_KEY
 )!