[new feature] Step: add inactive-icon slot

docs/markdown/v2-progress-tracking.md

@@ -75,6 +75,7 @@
 ### Steps
 
 - 新增`inactive-icon`属性
+- 新增`inactive-icon`插槽
 
 ### SwitchCell
 

packages/step/index.js

@@ -43,8 +43,9 @@ export default sfc({
         );
       }
 
-      if (inactiveIcon) {
-        return <Icon class={bem('icon')} name={inactiveIcon} />;
+      const inactiveIconSlot = slots('inactive-icon');
+      if (inactiveIcon || inactiveIconSlot) {
+        return inactiveIconSlot || <Icon class={bem('icon')} name={inactiveIcon} />;
       }
 
       return <i class={bem('circle')} />;

packages/steps/en-US.md

@@ -79,4 +79,5 @@ export default {
 
 | Name | Description |
 |------|------|
-| icon | Custom icon |
+| active-icon | Custom active icon |
+| inactive-icon | Custom inactive icon |

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

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`icon slot 1`] = `
+<div class="van-steps van-steps--horizontal">
+  <div class="van-steps__items">
+    <div class="van-hairline van-step van-step--horizontal van-step--finish">
+      <div class="van-step__title">
+        A
+      </div>
+      <div class="van-step__circle-container">Custim Inactive Icon</div>
+      <div class="van-step__line"></div>
+    </div>
+    <div class="van-hairline van-step van-step--horizontal van-step--process">
+      <div class="van-step__title" style="color: rgb(7, 193, 96);">
+        B
+      </div>
+      <div class="van-step__circle-container">Custim Active Icon</div>
+      <div class="van-step__line"></div>
+    </div>
+    <div class="van-hairline van-step van-step--horizontal">
+      <div class="van-step__title">
+        C
+      </div>
+      <div class="van-step__circle-container">Custim Inactive Icon</div>
+      <div class="van-step__line"></div>
+    </div>
+  </div>
+</div>
+`;

packages/steps/test/index.spec.js

@@ -0,0 +1,29 @@
+import { mount } from '../../../test/utils';
+import Steps from '..';
+import Step from '../../step';
+
+test('icon slot', () => {
+  const wrapper = mount({
+    template: `
+    <steps :active="1">
+      <step>
+        <template v-slot:inactive-icon>Custim Inactive Icon</template>
+        A
+      </step>
+      <step>
+        <template v-slot:active-icon>Custim Active Icon</template>
+        B
+      </step>
+      <step>
+        <template v-slot:inactive-icon>Custim Inactive Icon</template>
+        C
+      </step>
+    </steps>
+    `,
+    components: {
+      Steps,
+      Step
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});

packages/steps/zh-CN.md

@@ -83,3 +83,4 @@ export default {
 | 名称 | 说明 |
 |------|------|
 | active-icon | 自定义激活状态图标 |
+| inactive-icon | 自定义未激活状态图标 |