refactor(components): [progress] use type-based definitions (#23451)

packages/components/progress/src/progress.ts

@@ -1,15 +1,73 @@
 import { buildProps, definePropType } from '@element-plus/utils'
 
-import type {
-  ExtractPropTypes,
-  ExtractPublicPropTypes,
-  SVGAttributes,
-} from 'vue'
+import type { ExtractPublicPropTypes, SVGAttributes } from 'vue'
 import type Progress from './progress.vue'
 
 export type ProgressColor = { color: string; percentage: number }
 export type ProgressFn = (percentage: number) => string
 
+export interface ProgressProps {
+  /**
+   * @description type of progress bar
+   */
+  type?: 'line' | 'circle' | 'dashboard'
+  /**
+   * @description percentage, required
+   */
+  percentage?: number
+  /**
+   * @description the current status of progress bar
+   */
+  status?: '' | 'success' | 'exception' | 'warning'
+  /**
+   * @description set indeterminate progress
+   */
+  indeterminate?: boolean
+  /**
+   * @description control the animation duration of indeterminate progress or striped flow progress
+   */
+  duration?: number
+  /**
+   * @description the width of progress bar
+   */
+  strokeWidth?: number
+  /**
+   * @description butt/circle/dashboard type shape at the end path
+   */
+  strokeLinecap?: NonNullable<SVGAttributes['stroke-linecap']>
+  /**
+   * @description whether to place the percentage inside progress bar, only works when `type` is 'line'
+   */
+  textInside?: boolean
+  /**
+   * @description the canvas width of circle progress bar
+   */
+  width?: number
+  /**
+   * @description whether to show percentage
+   */
+  showText?: boolean
+  /**
+   * @description background color of progress bar. Overrides `status` prop
+   */
+  color?: string | ProgressColor[] | ProgressFn
+  /**
+   * @description stripe over the progress bar's color
+   */
+  striped?: boolean
+  /**
+   * @description get the stripes to flow
+   */
+  stripedFlow?: boolean
+  /**
+   * @description custom text format
+   */
+  format?: ProgressFn
+}
+
+/**
+ * @deprecated Removed after 3.0.0, Use `ProgressProps` instead.
+ */
 export const progressProps = buildProps({
   /**
    * @description type of progress bar
@@ -106,6 +164,8 @@ export const progressProps = buildProps({
   },
 } as const)
 
-export type ProgressProps = ExtractPropTypes<typeof progressProps>
+/**
+ * @deprecated Removed after 3.0.0, Use `ProgressProps` instead.
+ */
 export type ProgressPropsPublic = ExtractPublicPropTypes<typeof progressProps>
 export type ProgressInstance = InstanceType<typeof Progress> & unknown

packages/components/progress/src/progress.vue

@@ -93,10 +93,9 @@ import {
 } from '@element-plus/icons-vue'
 import { useNamespace } from '@element-plus/hooks'
 import { isFunction, isString } from '@element-plus/utils'
-import { progressProps } from './progress'
 
 import type { CSSProperties } from 'vue'
-import type { ProgressColor } from './progress'
+import type { ProgressColor, ProgressProps } from './progress'
 
 defineOptions({
   name: 'ElProgress',
@@ -109,7 +108,18 @@ const STATUS_COLOR_MAP: Record<string, string> = {
   default: '#20a0ff',
 }
 
-const props = defineProps(progressProps)
+const props = withDefaults(defineProps<ProgressProps>(), {
+  type: 'line',
+  percentage: 0,
+  status: '',
+  duration: 3,
+  strokeWidth: 6,
+  strokeLinecap: 'round',
+  width: 126,
+  showText: true,
+  color: '',
+  format: (percentage: number): string => `${percentage}%`,
+})
 
 const ns = useNamespace('progress')