fix(components): [steps] preserve the order of subcomponents (#12896)

* fix(components): [steps] preserve the order of subcomponents

* fix: remove unused type

* add test cases

packages/components/steps/__tests__/steps.test.tsx

@@ -1,4 +1,4 @@
-import { markRaw, nextTick } from 'vue'
+import { markRaw, nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
 import { Edit } from '@element-plus/icons-vue'
@@ -190,4 +190,26 @@ describe('Steps.vue', () => {
     expect(wrapper.find('.el-step__title').text()).toBe('A')
     expect(wrapper.find('.el-step__description').text()).toBe('B')
   })
+
+  test('order of step', async () => {
+    const data = ref(['first', 'second', 'thrid'])
+    const wrapper = _mount(() => (
+      <Steps active={0}>
+        {data.value.map((t) => (
+          <Step
+            key={t}
+            v-slots={{
+              title: () => t,
+            }}
+          />
+        ))}
+      </Steps>
+    ))
+    await nextTick()
+    data.value = ['a', 'b', 'c']
+    await nextTick()
+    wrapper.findAll('.el-step__icon-inner').forEach((domWrapper, index) => {
+      expect(domWrapper.element.textContent).toEqual((index + 1).toString())
+    })
+  })
 })

packages/components/steps/src/item.vue

@@ -74,7 +74,7 @@ export interface IStepsProps {
 }
 
 export interface StepItemState {
-  uid: number | undefined
+  uid: number
   currentStatus: string
   setIndex: (val: number) => void
   calcProgress: (status: string) => void
@@ -83,6 +83,8 @@ export interface StepItemState {
 export interface IStepsInject {
   props: IStepsProps
   steps: Ref<StepItemState[]>
+  addStep: (item: StepItemState) => void
+  removeStep: (uid: number) => void
 }
 
 defineOptions({
@@ -112,9 +114,7 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  parent.steps.value = parent.steps.value.filter(
-    (instance) => instance.uid !== currentInstance?.uid
-  )
+  parent.removeStep(stepItemState.uid)
 })
 
 const currentStatus = computed(() => {
@@ -203,11 +203,11 @@ const updateStatus = (activeIndex: number) => {
 }
 
 const stepItemState = reactive({
-  uid: computed(() => currentInstance?.uid),
+  uid: currentInstance!.uid,
   currentStatus,
   setIndex,
   calcProgress,
 })
 
-parent.steps.value = [...parent.steps.value, stepItemState]
+parent.addStep(stepItemState)
 </script>

packages/components/steps/src/steps.vue

@@ -5,12 +5,11 @@
 </template>
 
 <script lang="ts" setup>
-import { provide, ref, watch } from 'vue'
+import { getCurrentInstance, provide, watch } from 'vue'
 import { CHANGE_EVENT } from '@element-plus/constants'
-import { useNamespace } from '@element-plus/hooks'
+import { useNamespace, useOrderedChildren } from '@element-plus/hooks'
 import { stepsEmits, stepsProps } from './steps'
 
-import type { Ref } from 'vue'
 import type { StepItemState } from './item.vue'
 
 defineOptions({
@@ -21,16 +20,19 @@ const props = defineProps(stepsProps)
 const emit = defineEmits(stepsEmits)
 
 const ns = useNamespace('steps')
-
-const steps: Ref<StepItemState[]> = ref([])
+const {
+  children: steps,
+  addChild: addStep,
+  removeChild: removeStep,
+} = useOrderedChildren<StepItemState>(getCurrentInstance()!, 'ElStep')
 
 watch(steps, () => {
   steps.value.forEach((instance: StepItemState, index: number) => {
     instance.setIndex(index)
   })
 })
 
-provide('ElSteps', { props, steps })
+provide('ElSteps', { props, steps, addStep, removeStep })
 
 watch(
   () => props.active,