types(Steps): use tsx (#8123)

src/step/index.tsx

@@ -1,15 +1,29 @@
 import { computed } from 'vue';
+
+// Utils
 import { createNamespace } from '../utils';
 import { BORDER } from '../utils/constant';
-import { STEPS_KEY } from '../steps';
+import { STEPS_KEY, StepsProvide } from '../steps';
+
+// Composition
 import { useParent } from '@vant/use';
+
+// Components
 import Icon from '../icon';
 
 const [createComponent, bem] = createNamespace('step');
 
 export default createComponent({
   setup(props, { slots }) {
-    const { parent, index } = useParent(STEPS_KEY);
+    const { parent, index } = useParent<StepsProvide>(STEPS_KEY);
+
+    if (!parent) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.error('[Vant] Step must be a child component of Steps.');
+      }
+      return;
+    }
+
     const parentProps = parent.props;
 
     const getStatus = () => {
@@ -17,9 +31,7 @@ export default createComponent({
       if (index.value < active) {
         return 'finish';
       }
-      if (index.value === active) {
-        return 'process';
-      }
+      return index.value === active ? 'process' : 'waiting';
     };
 
     const isActive = () => getStatus() === 'process';
@@ -41,7 +53,7 @@ export default createComponent({
     });
 
     const onClickStep = () => {
-      parent.emit('click-step', index.value);
+      parent.onClickStep(index.value);
     };
 
     const renderCircle = () => {

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>