refactor(components): [steps] (#10427)

packages/components/steps/src/item.vue

@@ -66,6 +66,7 @@ import {
 import { useNamespace } from '@element-plus/hooks'
 import { ElIcon } from '@element-plus/components/icon'
 import { Check, Close } from '@element-plus/icons-vue'
+import { isNumber } from '@element-plus/utils'
 import { stepProps } from './item'
 
 import type { CSSProperties, Ref } from 'vue'
@@ -159,12 +160,11 @@ const space = computed(() => {
 
 const style = computed(() => {
   const style: CSSProperties = {
-    flexBasis:
-      typeof space.value === 'number'
-        ? `${space.value}px`
-        : space.value
-        ? space.value
-        : `${100 / (stepsCount.value - (isCenter.value ? 0 : 1))}%`,
+    flexBasis: isNumber(space.value)
+      ? `${space.value}px`
+      : space.value
+      ? space.value
+      : `${100 / (stepsCount.value - (isCenter.value ? 0 : 1))}%`,
   }
   if (isVertical.value) return style
   if (isLast.value) {
@@ -178,15 +178,12 @@ const setIndex = (val: number) => {
 }
 
 const calcProgress = (status: string) => {
-  let step = 100
-  const style: CSSProperties = {}
-  style.transitionDelay = `${150 * index.value}ms`
-  if (status === parent.props.processStatus) {
-    step = 0
-  } else if (status === 'wait') {
-    step = 0
-    style.transitionDelay = `${-150 * index.value}ms`
+  const isWait = status === 'wait'
+  const style: CSSProperties = {
+    transitionDelay: `${isWait ? '-' : ''}${150 * index.value}ms`,
   }
+  const step = status === parent.props.processStatus || isWait ? 0 : 100
+
   style.borderWidth = step && !isSimple.value ? '1px' : 0
   style[parent.props.direction === 'vertical' ? 'height' : 'width'] = `${step}%`
   lineStyle.value = style