refactor(components): refactor progress

packages/components/progress/__tests__/progress.spec.ts

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils'
 import { CircleClose } from '@element-plus/icons-vue'
-import Progress from '../src/index.vue'
+import Progress from '../src/progress.vue'
 describe('Progress.vue', () => {
   test('percent', () => {
     const wrapper = mount(Progress, {

packages/components/progress/index.ts

@@ -1,13 +1,7 @@
-import Progress from './src/index.vue'
+import { withInstall } from '@element-plus/utils/with-install'
+import Progress from './src/progress.vue'
 
-import type { App } from 'vue'
+export const ElProgress = withInstall(Progress)
-import type { SFCWithInstall } from '@element-plus/utils/types'
+export default ElProgress
 
-Progress.install = (app: App): void => {
+export * from './src/progress'
-  app.component(Progress.name, Progress)
-}
-
-const _Progress = Progress as SFCWithInstall<typeof Progress>
-
-export default _Progress
-export const ElProgress = _Progress

packages/components/progress/src/progress.ts

@@ -0,0 +1,62 @@
+import { buildProps, definePropType } from '@element-plus/utils/props'
+import type { SVGAttributes, ExtractPropTypes } from 'vue'
+
+type ProgressFn = (percentage: number) => string
+
+export const progressProps = buildProps({
+  type: {
+    type: String,
+    default: 'line',
+    values: ['line', 'circle', 'dashboard'],
+  },
+  percentage: {
+    type: Number,
+    default: 0,
+    validator: (val: number): boolean => val >= 0 && val <= 100,
+  },
+  status: {
+    type: String,
+    default: '',
+    values: ['', 'success', 'exception', 'warning'],
+  },
+  indeterminate: {
+    type: Boolean,
+    default: false,
+  },
+  duration: {
+    type: Number,
+    default: 3,
+  },
+  strokeWidth: {
+    type: Number,
+    default: 6,
+  },
+  strokeLinecap: {
+    type: definePropType<NonNullable<SVGAttributes['stroke-linecap']>>(String),
+    default: 'round',
+  },
+  textInside: {
+    type: Boolean,
+    default: false,
+  },
+  width: {
+    type: Number,
+    default: 126,
+  },
+  showText: {
+    type: Boolean,
+    default: true,
+  },
+  color: {
+    type: definePropType<
+      string | { color: string; percentage: number } | ProgressFn
+    >([String, Array, Function]),
+    default: '',
+  },
+  format: {
+    type: definePropType<ProgressFn>(Function),
+    default: (percentage: number): string => `${percentage}%`,
+  },
+} as const)
+
+export type ProgressProps = ExtractPropTypes<typeof progressProps>

packages/components/progress/src/progress.vue

@@ -85,28 +85,7 @@ import {
   Check,
   Close,
 } from '@element-plus/icons-vue'
-
+import { progressProps } from './progress'
-import type { PropType, SVGAttributes } from 'vue'
-
-type ProgressFuncType = (percentage: number) => string
-
-interface IProgressProps {
-  type: string
-  percentage: number
-  status: string
-  indeterminate: boolean
-  duration: number
-  strokeWidth: number
-  strokeLinecap: NonNullable<SVGAttributes['stroke-linecap']>
-  textInside: boolean
-  width: number
-  showText: boolean
-  color:
-    | string
-    | Array<string | { color: string; percentage: number }>
-    | ProgressFuncType
-  format: ProgressFuncType
-}
 
 export default defineComponent({
   name: 'ElProgress',
@@ -118,62 +97,8 @@ export default defineComponent({
     Close,
     WarningFilled,
   },
-  props: {
+  props: progressProps,
-    type: {
+  setup(props) {
-      type: String,
-      default: 'line',
-      validator: (val: string): boolean =>
-        ['line', 'circle', 'dashboard'].indexOf(val) > -1,
-    },
-    percentage: {
-      type: Number,
-      default: 0,
-      validator: (val: number): boolean => val >= 0 && val <= 100,
-    },
-    status: {
-      type: String,
-      default: '',
-      validator: (val: string): boolean =>
-        ['', 'success', 'exception', 'warning'].indexOf(val) > -1,
-    },
-    indeterminate: {
-      type: Boolean,
-      default: false,
-    },
-    duration: {
-      type: Number,
-      default: 3,
-    },
-    strokeWidth: {
-      type: Number,
-      default: 6,
-    },
-    strokeLinecap: {
-      type: String as PropType<IProgressProps['strokeLinecap']>,
-      default: 'round' as IProgressProps['strokeLinecap'],
-    },
-    textInside: {
-      type: Boolean,
-      default: false,
-    },
-    width: {
-      type: Number,
-      default: 126,
-    },
-    showText: {
-      type: Boolean,
-      default: true,
-    },
-    color: {
-      type: [String, Array, Function],
-      default: '',
-    },
-    format: {
-      type: Function,
-      default: (percentage: number): string => `${percentage}%`,
-    },
-  },
-  setup(props: IProgressProps) {
     const barStyle = computed(() => {
       return {
         width: `${props.percentage}%`,