diff --git a/src/steps/__test__/__snapshots__/demo.test.jsx.snap b/src/steps/__test__/__snapshots__/demo.test.jsx.snap
index 614454b9b..e9d7e8fd2 100644
--- a/src/steps/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/steps/__test__/__snapshots__/demo.test.jsx.snap
@@ -18,7 +18,6 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
@@ -39,7 +38,6 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
@@ -60,13 +58,11 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
-
+
-
@@ -76,7 +72,6 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
2
-
@@ -97,13 +92,11 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
-
+
-
@@ -113,7 +106,6 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
3
-
@@ -134,13 +126,11 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
-
+
-
@@ -150,7 +140,6 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
4
-
@@ -171,8 +160,7 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
-
+
@@ -194,7 +182,6 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
@@ -218,7 +205,6 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
@@ -239,13 +225,11 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
-
+
-
@@ -269,7 +253,6 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
@@ -290,13 +273,11 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
-
+
-
@@ -320,7 +301,6 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
@@ -341,13 +321,11 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
-
+
-
@@ -371,7 +349,6 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
@@ -392,8 +369,7 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
-
+
@@ -415,7 +391,6 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
@@ -423,7 +398,6 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -444,13 +418,11 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
-
+
-
@@ -458,7 +430,6 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--process"
/>
-
@@ -479,13 +450,11 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
-
+
-
@@ -493,7 +462,6 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--default"
/>
-
@@ -514,13 +482,11 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
-
+
-
@@ -528,7 +494,6 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--default"
/>
-
@@ -549,8 +514,7 @@ exports[`Steps > Steps horizontalVue demo works fine 1`] = `
-
-
+
@@ -607,7 +571,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -628,7 +591,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -649,13 +611,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -665,7 +625,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
2
-
@@ -686,13 +645,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -702,7 +659,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
3
-
@@ -723,13 +679,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -739,7 +693,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
4
-
@@ -760,8 +713,7 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
@@ -783,7 +735,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -807,7 +758,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -828,13 +778,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -858,7 +806,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -879,13 +826,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -909,7 +854,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -930,13 +874,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -960,7 +902,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -981,8 +922,7 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
@@ -1004,7 +944,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -1012,7 +951,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -1033,13 +971,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -1047,7 +983,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--process"
/>
-
@@ -1068,13 +1003,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -1082,7 +1015,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--default"
/>
-
@@ -1103,13 +1035,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -1117,7 +1047,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--default"
/>
-
@@ -1138,8 +1067,7 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
@@ -1163,7 +1091,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -1184,7 +1111,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -1205,13 +1131,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -1221,7 +1145,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
2
-
@@ -1242,13 +1165,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -1258,7 +1179,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
3
-
@@ -1279,13 +1199,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -1295,7 +1213,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
4
-
@@ -1316,8 +1233,7 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
@@ -1339,7 +1255,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -1363,7 +1278,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -1384,13 +1298,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -1414,7 +1326,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -1435,13 +1346,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -1465,7 +1374,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -1486,13 +1394,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -1516,7 +1422,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -1537,8 +1442,7 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
@@ -1560,7 +1464,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -1568,7 +1471,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -1589,13 +1491,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -1603,7 +1503,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--process"
/>
-
@@ -1624,13 +1523,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -1638,7 +1535,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--default"
/>
-
@@ -1659,13 +1555,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -1673,7 +1567,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--default"
/>
-
@@ -1694,8 +1587,7 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
@@ -1717,7 +1609,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -1725,7 +1616,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -1746,13 +1636,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -1760,7 +1648,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--process"
/>
-
@@ -1827,13 +1714,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -1841,7 +1726,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--default"
/>
-
@@ -1862,13 +1746,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -1876,7 +1758,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--default"
/>
-
@@ -1897,8 +1778,7 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
@@ -1942,7 +1822,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -1963,7 +1842,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -1984,13 +1862,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -2011,7 +1887,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -2032,13 +1907,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -2048,7 +1921,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
3
-
@@ -2069,13 +1941,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -2085,7 +1955,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
4
-
@@ -2106,8 +1975,7 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
@@ -2124,7 +1992,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -2148,7 +2015,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -2169,13 +2035,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -2199,7 +2063,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -2220,13 +2083,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -2250,7 +2111,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -2271,13 +2131,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -2301,7 +2159,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -2322,8 +2179,7 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
@@ -2340,7 +2196,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -2348,7 +2203,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -2369,13 +2223,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -2383,7 +2235,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--error"
/>
-
@@ -2404,13 +2255,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -2418,7 +2267,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--default"
/>
-
@@ -2439,13 +2287,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -2453,7 +2299,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--default"
/>
-
@@ -2474,8 +2319,7 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
@@ -2519,7 +2363,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -2527,7 +2370,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -2563,13 +2405,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -2577,7 +2417,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -2613,13 +2452,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -2627,7 +2464,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -2663,13 +2499,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -2677,7 +2511,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--process"
/>
-
@@ -2713,8 +2546,7 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
@@ -2753,7 +2585,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
@@ -2761,7 +2592,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -2782,13 +2612,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -2796,7 +2624,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -2817,13 +2644,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -2831,7 +2656,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -2852,13 +2676,11 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
-
@@ -2866,7 +2688,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -2887,8 +2708,7 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
-
-
+
@@ -2919,7 +2739,6 @@ exports[`Steps > Steps specialVue demo works fine 1`] = `
-
@@ -2927,7 +2746,6 @@ exports[`Steps > Steps specialVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -2963,13 +2781,11 @@ exports[`Steps > Steps specialVue demo works fine 1`] = `
-
-
+
-
@@ -2977,7 +2793,6 @@ exports[`Steps > Steps specialVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -3013,13 +2828,11 @@ exports[`Steps > Steps specialVue demo works fine 1`] = `
-
-
+
-
@@ -3027,7 +2840,6 @@ exports[`Steps > Steps specialVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -3063,13 +2875,11 @@ exports[`Steps > Steps specialVue demo works fine 1`] = `
-
-
+
-
@@ -3077,7 +2887,6 @@ exports[`Steps > Steps specialVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--process"
/>
-
@@ -3113,8 +2922,7 @@ exports[`Steps > Steps specialVue demo works fine 1`] = `
-
-
+
@@ -3153,7 +2961,6 @@ exports[`Steps > Steps specialVue demo works fine 1`] = `
-
@@ -3161,7 +2968,6 @@ exports[`Steps > Steps specialVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -3182,13 +2988,11 @@ exports[`Steps > Steps specialVue demo works fine 1`] = `
-
-
+
-
@@ -3196,7 +3000,6 @@ exports[`Steps > Steps specialVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -3217,13 +3020,11 @@ exports[`Steps > Steps specialVue demo works fine 1`] = `
-
-
+
-
@@ -3231,7 +3032,6 @@ exports[`Steps > Steps specialVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -3252,13 +3052,11 @@ exports[`Steps > Steps specialVue demo works fine 1`] = `
-
-
+
-
@@ -3266,7 +3064,6 @@ exports[`Steps > Steps specialVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -3287,8 +3084,7 @@ exports[`Steps > Steps specialVue demo works fine 1`] = `
-
-
+
@@ -3315,7 +3111,6 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
@@ -3336,7 +3131,6 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
@@ -3357,13 +3151,11 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
-
+
-
@@ -3384,7 +3176,6 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
@@ -3405,13 +3196,11 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
-
+
-
@@ -3421,7 +3210,6 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
3
-
@@ -3442,13 +3230,11 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
-
+
-
@@ -3458,7 +3244,6 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
4
-
@@ -3479,8 +3264,7 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
-
+
@@ -3497,7 +3281,6 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
@@ -3521,7 +3304,6 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
@@ -3542,13 +3324,11 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
-
+
-
@@ -3572,7 +3352,6 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
@@ -3593,13 +3372,11 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
-
+
-
@@ -3623,7 +3400,6 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
@@ -3644,13 +3420,11 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
-
+
-
@@ -3674,7 +3448,6 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
@@ -3695,8 +3468,7 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
-
+
@@ -3713,7 +3485,6 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
@@ -3721,7 +3492,6 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -3742,13 +3512,11 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
-
+
-
@@ -3756,7 +3524,6 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--error"
/>
-
@@ -3777,13 +3544,11 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
-
+
-
@@ -3791,7 +3556,6 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--default"
/>
-
@@ -3812,13 +3576,11 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
-
+
-
@@ -3826,7 +3588,6 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--default"
/>
-
@@ -3847,8 +3608,7 @@ exports[`Steps > Steps statusVue demo works fine 1`] = `
-
-
+
@@ -3875,7 +3635,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
@@ -3896,7 +3655,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
@@ -3917,13 +3675,11 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
-
+
-
@@ -3933,7 +3689,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
2
-
@@ -3954,13 +3709,11 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
-
+
-
@@ -3970,7 +3723,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
3
-
@@ -3991,13 +3743,11 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
-
+
-
@@ -4007,7 +3757,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
4
-
@@ -4028,8 +3777,7 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
-
+
@@ -4051,7 +3799,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
@@ -4075,7 +3822,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
@@ -4096,13 +3842,11 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
-
+
-
@@ -4126,7 +3870,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
@@ -4147,13 +3890,11 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
-
+
-
@@ -4177,7 +3918,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
@@ -4198,13 +3938,11 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
-
+
-
@@ -4228,7 +3966,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
@@ -4249,8 +3986,7 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
-
+
@@ -4272,7 +4008,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
@@ -4280,7 +4015,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -4301,13 +4035,11 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
-
+
-
@@ -4315,7 +4047,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--process"
/>
-
@@ -4336,13 +4067,11 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
-
+
-
@@ -4350,7 +4079,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--default"
/>
-
@@ -4371,13 +4099,11 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
-
+
-
@@ -4385,7 +4111,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--default"
/>
-
@@ -4406,8 +4131,7 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
-
+
@@ -4429,7 +4153,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
@@ -4437,7 +4160,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--finish"
/>
-
@@ -4458,13 +4180,11 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
-
+
-
@@ -4472,7 +4192,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--process"
/>
-
@@ -4539,13 +4258,11 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
-
+
-
@@ -4553,7 +4270,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--default"
/>
-
@@ -4574,13 +4290,11 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
-
+
-
@@ -4588,7 +4302,6 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
class="t-step-item__dot t-step-item__dot--default"
/>
-
@@ -4609,8 +4322,7 @@ exports[`Steps > Steps verticalVue demo works fine 1`] = `
-
-
+
diff --git a/src/steps/__test__/__snapshots__/index.test.jsx.snap b/src/steps/__test__/__snapshots__/index.test.jsx.snap
index acf4cda8a..965353f03 100644
--- a/src/steps/__test__/__snapshots__/index.test.jsx.snap
+++ b/src/steps/__test__/__snapshots__/index.test.jsx.snap
@@ -9,7 +9,6 @@ exports[`steps > props > : layout 1`] = `
-
@@ -30,7 +29,6 @@ exports[`steps > props > : layout 1`] = `
-
@@ -51,13 +49,11 @@ exports[`steps > props > : layout 1`] = `
-
-
+
-
@@ -67,7 +63,6 @@ exports[`steps > props > : layout 1`] = `
2
-
@@ -88,8 +83,7 @@ exports[`steps > props > : layout 1`] = `
-
-
+
diff --git a/src/steps/index.ts b/src/steps/index.ts
index d0906e6d1..e28edeb0d 100644
--- a/src/steps/index.ts
+++ b/src/steps/index.ts
@@ -1,5 +1,5 @@
-import LocalSteps from './steps.vue';
-import LocalStepItem from './step-item.vue';
+import LocalSteps from './steps';
+import LocalStepItem from './step-item';
import { withInstall, WithInstallType } from '../shared';
import { TdStepsProps, TdStepItemProps } from './type';
diff --git a/src/steps/step-item.tsx b/src/steps/step-item.tsx
new file mode 100644
index 000000000..b854025eb
--- /dev/null
+++ b/src/steps/step-item.tsx
@@ -0,0 +1,147 @@
+import { computed, inject, defineComponent, getCurrentInstance, h, onUnmounted, ComponentInternalInstance } from 'vue';
+import { CloseIcon, CheckIcon } from 'tdesign-icons-vue-next';
+
+import props from './step-item-props';
+import config from '../config';
+import { usePrefixClass } from '@/hooks/useClass';
+import { useTNodeJSX } from '@/hooks/tnode';
+
+const { prefix } = config;
+const name = `${prefix}-step-item`;
+
+export default defineComponent({
+ name,
+ props,
+ setup(props, context) {
+ const stepItemClass = usePrefixClass('step-item');
+ const renderTNodeJSX = useTNodeJSX();
+
+ const internalInstance = getCurrentInstance();
+ const { proxy } = internalInstance as ComponentInternalInstance;
+ const stepsProvide: any = inject('stepsProvide', undefined);
+ stepsProvide.relation(proxy);
+ const iconDefault = {
+ check: h(CheckIcon),
+ close: h(CloseIcon),
+ };
+
+ const index = computed(() => stepsProvide.state.children.indexOf(proxy));
+ const isLastChild = computed(() => {
+ return index.value === (stepsProvide.sequence === 'positive' ? stepsProvide.state.children.length - 1 : 0);
+ });
+
+ const theme = computed(() => stepsProvide.theme);
+ const dot = computed(() => theme.value === 'dot');
+ const icon = computed(() => props.icon || context.slots.icon);
+
+ const current = computed(() => stepsProvide.current.value || stepsProvide.defaultCurrent || 0);
+ const stepsStatus = computed(() => stepsProvide.currentStatus);
+ const readonly = computed(() => stepsProvide.readonly);
+ const currentStatus = computed(() => {
+ const { status } = props;
+ if (status !== 'default') return status;
+ if (index.value === current.value) return stepsStatus.value;
+ if (index.value < current.value) return 'finish';
+ return status;
+ });
+
+ const rootClassName = computed(() => [
+ stepItemClass.value,
+ `${stepItemClass.value}--${stepsProvide.layout}`,
+ { [`${stepItemClass.value}--default`]: readonly.value },
+ { [`${stepItemClass.value}--${currentStatus.value}`]: currentStatus.value },
+ ]);
+ const iconWrapperClassName = computed(() => [
+ `${stepItemClass.value}__anchor`,
+ `${stepItemClass.value}__anchor--${stepsProvide.layout}`,
+ ]);
+ const dotClass = computed(() => [
+ `${stepItemClass.value}__dot`,
+ `${stepItemClass.value}__dot--${currentStatus.value}`,
+ ]);
+
+ const iconClassName = computed(() => [
+ { [`${stepItemClass.value}__icon`]: icon.value },
+ { [`${stepItemClass.value}__icon--${currentStatus.value}`]: icon.value },
+ { [`${stepItemClass.value}__circle`]: !icon.value },
+ { [`${stepItemClass.value}__circle--${currentStatus.value}`]: !icon.value },
+ ]);
+ const contentClass = computed(() => [
+ `${stepItemClass.value}__content`,
+ `${stepItemClass.value}__content--${stepsProvide.layout}`,
+ {
+ [`${stepItemClass.value}__content--${stepsProvide.layout}`]: isLastChild.value,
+ },
+ {
+ [`${stepItemClass.value}__content--last`]: isLastChild.value,
+ },
+ ]);
+ const tilteClass = computed(() => [
+ `${stepItemClass.value}__title`,
+ `${stepItemClass.value}__title--${currentStatus.value}`,
+ `${stepItemClass.value}__title--${stepsProvide.layout}`,
+ ]);
+ const descriptionClass = computed(() => [
+ `${stepItemClass.value}__description`,
+ `${stepItemClass.value}__description--${currentStatus.value}`,
+ `${stepItemClass.value}__description--${stepsProvide.layout}`,
+ ]);
+ const extraClass = computed(() => [
+ `${stepItemClass.value}__extra`,
+ `${stepItemClass.value}__extra--${currentStatus.value}`,
+ `${stepItemClass.value}__extra--${stepsProvide.layout}`,
+ ]);
+ const separatorClass = computed(() => [
+ stepItemClass.value,
+ `${stepItemClass.value}__line`,
+ `${stepItemClass.value}__line--${currentStatus.value}`,
+ `${stepItemClass.value}__line--${stepsProvide.sequence}`,
+ `${stepItemClass.value}__line--${stepsProvide.layout}`,
+ `${stepItemClass.value}__line--${stepsProvide.theme}`,
+ ]);
+ const onClickIcon = (e: MouseEvent) => {
+ if (!readonly.value) {
+ stepsProvide.onClickItem(index.value, current.value, e);
+ }
+ };
+
+ onUnmounted(() => {
+ stepsProvide.removeRelation(proxy);
+ });
+ return () => {
+ const renderIconContent = () => {
+ if (icon.value) {
+ return renderTNodeJSX('icon') || null;
+ }
+ if (currentStatus.value === 'error') {
+ return iconDefault.close;
+ }
+ if (currentStatus.value === 'finish') {
+ return iconDefault.check;
+ }
+ return index.value + 1;
+ };
+
+ return (
+
+
+ {dot.value ? (
+
+ ) : (
+
{renderIconContent()}
+ )}
+
+
+
+ {renderTNodeJSX('title')}
+ {renderTNodeJSX('titleRight')}
+
+
{renderTNodeJSX('content')}
+
+
+ {!isLastChild.value &&
}
+
+ );
+ };
+ },
+});
diff --git a/src/steps/step-item.vue b/src/steps/step-item.vue
deleted file mode 100644
index 4db5f55dc..000000000
--- a/src/steps/step-item.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-
-
-
-
-
diff --git a/src/steps/steps.vue b/src/steps/steps.tsx
similarity index 65%
rename from src/steps/steps.vue
rename to src/steps/steps.tsx
index 63eae6d12..48b8f4870 100644
--- a/src/steps/steps.vue
+++ b/src/steps/steps.tsx
@@ -1,29 +1,26 @@
-
-
-
-
-
-
-