refactor(components): [steps] validate values ​​and export values (#7947)

packages/components/steps/index.ts

@@ -8,3 +8,6 @@ export const ElSteps = withInstall(Steps, {
 })
 export default ElSteps
 export const ElStep = withNoopInstall(Step)
+
+export * from './src/item'
+export * from './src/steps'

packages/components/steps/src/item.ts

@@ -1,5 +1,5 @@
 import { buildProps, iconPropType } from '@element-plus/utils'
-
+import type Step from './item.vue'
 import type { ExtractPropTypes } from 'vue'
 
 export const stepProps = buildProps({
@@ -16,8 +16,11 @@ export const stepProps = buildProps({
   },
   status: {
     type: String,
-    default: '',
     values: ['', 'wait', 'process', 'finish', 'error', 'success'] as const,
+    default: '',
   },
 } as const)
+
 export type StepProps = ExtractPropTypes<typeof stepProps>
+
+export type StepInstance = InstanceType<typeof Step>

packages/components/steps/src/item.vue

@@ -166,11 +166,11 @@ const style = computed(() => {
   return style
 })
 
-const setIndex = (val) => {
+const setIndex = (val: number) => {
   index.value = val
 }
 
-const calcProgress = (status) => {
+const calcProgress = (status: string) => {
   let step = 100
   const style: Record<string, unknown> = {}
   style.transitionDelay = `${150 * index.value}ms`
@@ -185,7 +185,7 @@ const calcProgress = (status) => {
   lineStyle.value = style
 }
 
-const updateStatus = (activeIndex) => {
+const updateStatus = (activeIndex: number) => {
   if (activeIndex > index.value) {
     internalStatus.value = parent.props.finishStatus
   } else if (activeIndex === index.value && prevStatus.value !== 'error') {

packages/components/steps/src/steps.ts

@@ -1,6 +1,6 @@
 import { CHANGE_EVENT } from '@element-plus/constants'
 import { buildProps, isNumber } from '@element-plus/utils'
-
+import type Steps from './steps.vue'
 import type { ExtractPropTypes } from 'vue'
 
 export const stepsProps = buildProps({
@@ -25,19 +25,21 @@ export const stepsProps = buildProps({
   },
   finishStatus: {
     type: String,
-    default: 'finish',
     values: ['wait', 'process', 'finish', 'error', 'success'] as const,
+    default: 'finish',
   },
   processStatus: {
     type: String,
-    default: 'process',
     values: ['wait', 'process', 'finish', 'error', 'success'] as const,
+    default: 'process',
   },
 } as const)
 export type StepsProps = ExtractPropTypes<typeof stepsProps>
 
 export const stepsEmits = {
   [CHANGE_EVENT]: (newVal: number, oldVal: number) =>
-    isNumber(newVal) && isNumber(oldVal),
+    [newVal, oldVal].every(isNumber),
 }
 export type StepsEmits = typeof stepsEmits
+
+export type StepsInstance = InstanceType<typeof Steps>