chore(steps): use icons-vue component

src/packages/__VUE/step/index.scss

@@ -29,20 +29,19 @@
     align-items: center;
     justify-content: center;
     z-index: 1;
-    .nut-icon {
-      width: 100%;
-      height: 100%;
+    &-inner {
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
-    &.is-text {
-      border-radius: 50%;
-      border-width: 1px;
-      border-style: solid;
+    .nut-icon {
+      width: $steps-base-icon-font-size;
+      height: $steps-base-icon-font-size;
     }
     &.is-icon {
       border-radius: 50%;
       border-width: 1px;
       border-style: solid;
-      background-color: transparent;
     }
   }
   &-main {

src/packages/__VUE/step/index.vue

@@ -2,14 +2,15 @@
   <view :class="classes" @click="handleClickStep">
     <view class="nut-step-head">
       <view class="nut-step-line"></view>
-      <view class="nut-step-icon" :class="[!dot ? (icon ? 'is-icon' : 'is-text') : '']">
-        <template v-if="icon">
-          <nut-icon class="nut-step-icon-inner" v-bind="$attrs" :color="iconColor" :name="icon" :size="size" />
-        </template>
-        <template v-else-if="dot"></template>
-        <template v-else>
-          <view class="nut-step-inner">{{ index }}</view>
-        </template>
+      <view class="nut-step-icon" :class="[!dot ? 'is-icon' : '']">
+        <view class="nut-step-icon-inner">
+          <slot name="icon">
+            <template v-if="dot"></template>
+            <template v-else>
+              <view class="nut-step-inner">{{ index }}</view>
+            </template>
+          </slot>
+        </view>
       </view>
     </view>
     <view class="nut-step-main">
@@ -39,23 +40,11 @@ export default create({
     content: {
       type: String,
       default: ''
-    },
-    icon: {
-      type: String,
-      default: null
-    },
-    iconColor: {
-      type: String,
-      default: ''
-    },
-    size: {
-      type: [String, Number],
-      default: '12px'
     }
   },
   emits: ['click-step'],
 
-  setup(props, { emit, slots }) {
+  setup() {
     const { proxy } = getCurrentInstance() as ComponentInternalInstance;
     const parent: any = inject('parent');
     parent['relation'](proxy);

src/packages/__VUE/steps/__tests__/index.spec.ts

@@ -1,14 +1,12 @@
-import { config, DOMWrapper, mount } from '@vue/test-utils';
+import { config, mount } from '@vue/test-utils';
 import Steps from '../index.vue';
 import Step from './../../step/index.vue';
 import Button from './../../button/index.vue';
-import NutIcon from '../../icon/index.vue';
+import { Service, People, Location2 } from '@nutui/icons-vue';
 import { nextTick, toRefs, reactive } from 'vue';
 
 beforeAll(() => {
-  config.global.components = {
-    NutIcon
-  };
+  config.global.components = { Service, People, Location2 };
 });
 
 afterAll(() => {
@@ -37,8 +35,7 @@ test('should first step checked when props current is to be 1', async () => {
         <nut-step title="步骤二">2</nut-step>
         <nut-step title="步骤三">3</nut-step>
       </nut-steps>
-    `,
-    setup() {}
+    `
   });
 
   await nextTick();
@@ -57,17 +54,26 @@ test('should render dot class when props progressDot is to be true', async () =>
   expect(wrapper.classes()).toContain('nut-steps-dot');
 });
 
-test('step props', async () => {
+test('step props and icon slots', async () => {
   const wrapper = mount({
     components: {
       'nut-steps': Steps,
-      'nut-step': Step
+      'nut-step': Step,
+      Service,
+      People,
+      Location2
     },
     template: `
       <nut-steps>
-        <nut-step title="已完成" content="您的订单已经打包完成，商品已发出" icon="service" iconColor="blue" size="14px">1</nut-step>
-        <nut-step title="进行中" content="您的订单正在配送途中" icon="people" iconColor="blue" size="14px">2</nut-step>
-        <nut-step title="未开始" content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦" icon="location2" iconColor="blue" size="14px">3</nut-step>
+        <nut-step title="已完成" content="您的订单已经打包完成，商品已发出">
+          <template #icon><Service color="blue" width="14px" height="14px"/></template>
+        </nut-step>
+        <nut-step title="进行中" content="您的订单正在配送途中">
+          <template #icon><People color="blue" width="14px" height="14px"/></template>
+        </nut-step>
+        <nut-step title="未开始" content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦">
+          <template #icon><Location2 color="blue" width="14px" height="14px"/></template>
+        </nut-step>
       </nut-steps>
     `
   });
@@ -82,10 +88,12 @@ test('step props', async () => {
 
   expect(stepItemContent.element.innerHTML).toEqual('<span>您的订单正在配送途中</span>');
 
-  const stepItemIcon = wrapper.findAll('.nutui-iconfont')[2];
-  expect(stepItemIcon.classes()).toContain('nut-icon-location2');
-  expect((stepItemIcon.element as HTMLElement).style.color).toEqual('blue');
-  expect((stepItemIcon.element as HTMLElement).style.width).toEqual('14px');
+  const stepItemIcons = wrapper.findAll('.nut-icon');
+  const icon = stepItemIcons[0];
+  expect(stepItemIcons.length).toEqual(3);
+  expect((icon.element as HTMLElement).tagName).toEqual('svg');
+  expect((icon.element as HTMLElement).getAttribute('color')).toEqual('blue');
+  expect((icon.element as HTMLElement).style.width).toEqual('14px');
 });
 
 test('should props current changes when trigger click', async () => {
@@ -171,7 +179,7 @@ test('render step slot', async () => {
         <nut-step title="已完成" content="您的订单已经打包完成，商品已发出"><template v-slot:title>步骤一</template></nut-step>
         <nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
         <nut-step title="未开始">
-          <template v-slot:content>
+          <template #content>
             <p>收货地址为：</p>
             <p>北京市经济技术开发区科创十一街18号院京东大厦</p>
           </template>

src/packages/__VUE/steps/demo.vue

@@ -5,7 +5,7 @@
       <nut-steps :current="current1" @click-step="handleClickStep">
         <nut-step :title="translate('step1')">
           1
-          <template v-slot:title>{{ translate('step1') }}</template>
+          <template #title>{{ translate('step1') }}</template>
         </nut-step>
         <nut-step :title="translate('step2')">2</nut-step>
         <nut-step :title="translate('step3')">3</nut-step>
@@ -38,11 +38,20 @@
     </div>
     <h2>{{ translate('cicon') }}</h2>
     <div class="steps-wrapper">
-      <nut-steps current="1">
-        <nut-step :title="translate('complete')" icon="service">1</nut-step>
-        <nut-step :title="translate('progress')" icon="people">2</nut-step>
-        <nut-step :title="translate('start')" icon="location2">3</nut-step>
+      <nut-steps :current="current4">
+        <nut-step :title="translate('complete')">
+          <template #icon><Service /></template>
+        </nut-step>
+        <nut-step :title="translate('progress')">
+          <template #icon><People /></template>
+        </nut-step>
+        <nut-step :title="translate('start')">
+          <template #icon><Location2 /></template>
+        </nut-step>
       </nut-steps>
+      <div class="steps-button" style="margin-top: 10px">
+        <nut-button size="mini" type="primary" @click="handleStep('current4')">{{ translate('next') }}</nut-button>
+      </div>
     </div>
     <h2>{{ translate('verstep') }}</h2>
     <div class="steps-wrapper" style="height: 300px; padding: 15px 30px">
@@ -59,7 +68,7 @@
         <nut-step :content="translate('content2')" :title="translate('progress')">2</nut-step>
         <nut-step :title="translate('start')"
           >3
-          <template v-slot:content>
+          <template #content>
             <p>{{ translate('content4') }}：</p>
             <p>{{ translate('content5') }}</p>
           </template>
@@ -73,6 +82,7 @@
 import { reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { Service, People, Location2 } from '@nutui/icons-vue';
 
 const { createDemo, translate } = createComponent('steps');
 const initTranslate = () =>
@@ -120,6 +130,7 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
+  components: { Service, People, Location2 },
   props: {},
   setup() {
     initTranslate();

src/packages/__VUE/steps/doc.en-US.md

@@ -27,7 +27,7 @@ app.use(Step);
   <nut-steps :current="current1" @click-step="handleClickStep">
     <nut-step title="Step One">
       1
-      <template v-slot:title>Step One</template>
+      <template #title>Step One</template>
     </nut-step>
     <nut-step title="Not started">2</nut-step>
     <nut-step title="Not started">3</nut-step>
@@ -85,9 +85,15 @@ app.use(Step);
 ```html
 <template>
   <nut-steps current="1">
-    <nut-step title="Completed" icon="service">1</nut-step>
-    <nut-step title="In progress" icon="people">2</nut-step>
-    <nut-step title="Not started" icon="location2">3</nut-step>
+    <nut-step title="Completed">
+      <template #icon><Service /></template>
+    </nut-step>
+    <nut-step title="In progress">
+      <template #icon><People /></template>
+    </nut-step>
+    <nut-step title="Not started">
+      <template #icon><Location2 /></template>
+    </nut-step>
   </nut-steps>
 </template>
 ```
@@ -121,7 +127,7 @@ app.use(Step);
     <nut-step title="In progress" content="Your order is in transit">2</nut-step>
     <nut-step title="Not started">
       3
-      <template v-slot:content>
+      <template #content>
         <p>The receiving address is：</p>
         <p>Jingdong building, yard 18, Kechuang 11th Street, Beijing Economic and Technological Development Zone</p>
       </template>
@@ -156,9 +162,6 @@ app.use(Step);
 | ---------------- | ---------------------- | ------------ | ----------- |
 | title            | Title of the process step         | String | `Step` |
 | content          | Descriptive text of process steps (supporting HTML structure)      | String | `Step description` |
-| icon          | [Icon Name](#/en-US/component/icon)       | String | null |
-| icon-color          | [Icon Color](#/en-US/component/icon)        | String | null |
-| size          | [Icon Size](#/zh-CN/component/icon)       | string | `12px` |
 
 ### Step Slots
 
@@ -166,3 +169,4 @@ app.use(Step);
 | ---------------- | ---------------------- |
 | title            | Step title         |
 | content          | Step content       |
+| icon             | Step icon          |

src/packages/__VUE/steps/doc.md

@@ -27,7 +27,7 @@ app.use(Step);
   <nut-steps :current="current1" @click-step="handleClickStep">
     <nut-step title="步骤一">
       1
-      <template v-slot:title>步骤一</template>
+      <template #title>步骤一</template>
     </nut-step>
     <nut-step title="未开始">2</nut-step>
     <nut-step title="未开始">3</nut-step>
@@ -85,9 +85,15 @@ app.use(Step);
 ```html
 <template>
   <nut-steps current="1">
-    <nut-step title="已完成" icon="service">1</nut-step>
-    <nut-step title="进行中" icon="people">2</nut-step>
-    <nut-step title="未开始" icon="location2">3</nut-step>
+    <nut-step title="已完成">
+      <template #icon><Service /></template>
+    </nut-step>
+    <nut-step title="进行中">
+      <template #icon><People /></template>
+    </nut-step>
+    <nut-step title="未开始">
+      <template #icon><Location2 /></template>
+    </nut-step>
   </nut-steps>
 </template>
 ```
@@ -121,7 +127,7 @@ app.use(Step);
     <nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
     <nut-step title="未开始">
       3
-      <template v-slot:content>
+      <template #content>
         <p>收货地址为：</p>
         <p>北京市经济技术开发区科创十一街18号院京东大厦</p>
       </template>
@@ -157,9 +163,6 @@ app.use(Step);
 | ---------------- | ---------------------- | ------------ | ----------- |
 | title            | 流程步骤的标题         | string | `步骤` |
 | content          | 流程步骤的描述性文字(支持 html 结构)       | string | `步骤描述` |
-| icon          | [图标名称](#/zh-CN/component/icon)       | string | null |
-| icon-color          | [图标颜色](#/zh-CN/component/icon)       | string | null |
-| size          | [图标尺寸](#/zh-CN/component/icon)       | string | `12px` |
 
 ### Step Slots
 
@@ -167,3 +170,4 @@ app.use(Step);
 | ---------------- | ---------------------- |
 | title            | 步骤标题         |
 | content          | 步骤内容       |
+| icon             | 步骤图标       |