types(Steps): use tsx (#8123)

src/steps/index.tsx

@@ -1,3 +1,4 @@
+import { PropType } from 'vue';
 import { createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 
@@ -5,6 +6,21 @@ const [createComponent, bem] = createNamespace('steps');
 
 export const STEPS_KEY = 'vanSteps';
 
+export type StepsDirection = 'horizontal' | 'vertical';
+
+export type StepsProvide = {
+  props: {
+    active: number | string;
+    direction: StepsDirection;
+    activeIcon: string;
+    finishIcon?: string;
+    activeColor?: string;
+    inactiveIcon?: string;
+    inactiveColor?: string;
+  };
+  onClickStep: (index: number) => void;
+};
+
 export default createComponent({
   props: {
     finishIcon: String,
@@ -16,7 +32,7 @@ export default createComponent({
       default: 0,
     },
     direction: {
-      type: String,
+      type: String as PropType<StepsDirection>,
       default: 'horizontal',
     },
     activeIcon: {
@@ -30,7 +46,14 @@ export default createComponent({
   setup(props, { emit, slots }) {
     const { linkChildren } = useChildren(STEPS_KEY);
 
-    linkChildren({ emit, props });
+    const onClickStep = (index: number) => {
+      emit('click-step', index);
+    };
+
+    linkChildren({
+      props,
+      onClickStep,
+    });
 
     return () => (
       <div class={bem([props.direction])}>

src/steps/test/__snapshots__/demo.spec.js.snap

@@ -26,7 +26,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-step__line">
         </div>
       </div>
-      <div class="van-hairline van-step van-step--horizontal">
+      <div class="van-hairline van-step van-step--horizontal van-step--waiting">
         <div class="van-step__title">
           Step3
         </div>
@@ -37,7 +37,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-step__line">
         </div>
       </div>
-      <div class="van-hairline van-step van-step--horizontal">
+      <div class="van-hairline van-step van-step--horizontal van-step--waiting">
         <div class="van-step__title">
           Step4
         </div>
@@ -91,7 +91,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-step__line">
         </div>
       </div>
-      <div class="van-hairline van-step van-step--horizontal">
+      <div class="van-hairline van-step van-step--horizontal van-step--waiting">
         <div class="van-step__title">
           Step3
         </div>
@@ -102,7 +102,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-step__line">
         </div>
       </div>
-      <div class="van-hairline van-step van-step--horizontal">
+      <div class="van-hairline van-step van-step--horizontal van-step--waiting">
         <div class="van-step__title">
           Step4
         </div>
@@ -135,7 +135,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-step__line">
         </div>
       </div>
-      <div class="van-hairline van-step van-step--vertical">
+      <div class="van-hairline van-step van-step--vertical van-step--waiting">
         <div class="van-step__title">
           <h3>
             【City】Status2
@@ -151,7 +151,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-step__line">
         </div>
       </div>
-      <div class="van-hairline van-step van-step--vertical">
+      <div class="van-hairline van-step van-step--vertical van-step--waiting">
         <div class="van-step__title">
           <h3>
             【City】Status3

src/steps/test/__snapshots__/index.spec.js.snap

@@ -30,10 +30,8 @@ exports[`should change inactive color when using inactive-color prop 1`] = `
       >
       </div>
     </div>
-    <div class="van-hairline van-step van-step--horizontal">
-      <div class="van-step__title"
-           style="color: red;"
-      >
+    <div class="van-hairline van-step van-step--horizontal van-step--waiting">
+      <div class="van-step__title">
         B
       </div>
       <div class="van-step__circle-container">
@@ -52,7 +50,7 @@ exports[`should change inactive color when using inactive-color prop 1`] = `
 `;
 
 exports[`should change inactive icon when using inactive-icon prop 1`] = `
-<div class="van-hairline van-step van-step--horizontal">
+<div class="van-hairline van-step van-step--horizontal van-step--waiting">
   <div class="van-step__title">
     B
   </div>
@@ -78,7 +76,7 @@ exports[`should render icon slot correctly 1`] = `
       <div class="van-step__line">
       </div>
     </div>
-    <div class="van-hairline van-step van-step--horizontal">
+    <div class="van-hairline van-step van-step--horizontal van-step--waiting">
       <div class="van-step__title">
         A
       </div>