feat(steps): provide click-step event, slot for title and content

src/packages/__VUE/step/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes">
+  <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') : '']">
@@ -14,9 +14,13 @@
     </view>
     <view class="nut-step-main">
       <view class="nut-step-title">
-        {{ title }}
+        <span v-if="!$slots.title">{{ title }}</span>
+        <slot name="title"></slot>
+      </view>
+      <view class="nut-step-content" v-if="content || $slots.content">
+        <span v-if="!$slots.content" v-html="content"></span>
+        <slot name="content"></slot>
       </view>
-      <view class="nut-step-content" v-html="content" v-if="content"> </view>
     </view>
   </view>
 </template>
@@ -49,6 +53,7 @@ export default create({
       default: '12px'
     }
   },
+  emits: ['click-step'],
 
   setup(props, { emit, slots }) {
     const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -79,10 +84,15 @@ export default create({
       };
     });
 
+    const handleClickStep = () => {
+      parent['onEmit'](index.value);
+    };
+
     return {
       ...toRefs(state),
       index,
-      classes
+      classes,
+      handleClickStep
     };
   }
 });

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

@@ -76,11 +76,11 @@ test('step props', async () => {
 
   const stepItemTitle = wrapper.findAll('.nut-step-title')[0];
 
-  expect(stepItemTitle.element.innerHTML).toEqual('已完成');
+  expect(stepItemTitle.element.innerHTML).toEqual('<span>已完成</span>');
 
   const stepItemContent = wrapper.findAll('.nut-step-content')[1];
 
-  expect(stepItemContent.element.innerHTML).toEqual('您的订单正在配送途中');
+  expect(stepItemContent.element.innerHTML).toEqual('<span>您的订单正在配送途中</span>');
 
   const stepItemIcon = wrapper.findAll('.nutui-iconfont')[2];
   expect(stepItemIcon.classes()).toContain('nut-icon-location2');
@@ -132,3 +132,61 @@ test('should props current changes when trigger click', async () => {
   await nextTick();
   expect(wrapper.vm.current).toBe(3);
 });
+
+test('should emited click when step trigger', async () => {
+  const wrapper = mount({
+    components: {
+      'nut-steps': Steps,
+      'nut-step': Step
+    },
+    template: `
+      <nut-steps :current="current">
+        <nut-step title="已完成" content="您的订单已经打包完成，商品已发出">1</nut-step>
+        <nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
+        <nut-step title="未开始" content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦">3</nut-step>
+      </nut-steps>
+    `,
+    setup() {
+      const state = reactive({
+        current: 1
+      });
+
+      return { ...toRefs(state) };
+    }
+  });
+
+  await nextTick();
+  await wrapper.vm.$emit('click-step');
+  expect(wrapper.emitted('click-step')).toBeTruthy();
+});
+
+test('render step slot', async () => {
+  const wrapper = mount({
+    components: {
+      'nut-steps': Steps,
+      'nut-step': Step
+    },
+    template: `
+      <nut-steps :current="current">
+        <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>
+            <p>收货地址为：</p>
+            <p>北京市经济技术开发区科创十一街18号院京东大厦</p>
+          </template>
+        </nut-step>
+      </nut-steps>
+    `,
+    setup() {
+      const state = reactive({
+        current: 1
+      });
+
+      return { ...toRefs(state) };
+    }
+  });
+
+  expect(wrapper.html()).toContain('步骤一');
+  expect(wrapper.html()).toContain('北京市经济技术开发区科创十一街18号院京东大厦');
+});

src/packages/__VUE/steps/demo.vue

@@ -2,8 +2,11 @@
   <div class="demo padding">
     <h2>基本用法</h2>
     <div class="steps-wrapper">
-      <nut-steps :current="current1">
-        <nut-step title="步骤一">1</nut-step>
+      <nut-steps :current="current1" @click-step="handleClickStep">
+        <nut-step title="步骤一">
+          1
+          <template v-slot:title>步骤一</template>
+        </nut-step>
         <nut-step title="步骤二">2</nut-step>
         <nut-step title="步骤三">3</nut-step>
       </nut-steps>
@@ -43,9 +46,13 @@
       <nut-steps direction="vertical" progress-dot current="2">
         <nut-step title="已完成" content="您的订单已经打包完成，商品已发出">1</nut-step>
         <nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
-        <nut-step title="未开始" content="<p>收货地址为：</p><p>北京市经济技术开发区科创十一街18号院京东大厦</p>"
-          >3</nut-step
-        >
+        <nut-step title="未开始"
+          >3
+          <template v-slot:content>
+            <p>收货地址为：</p>
+            <p>北京市经济技术开发区科创十一街18号院京东大厦</p>
+          </template>
+        </nut-step>
       </nut-steps>
     </div>
   </div>
@@ -74,9 +81,14 @@ export default createDemo({
       }
     };
 
+    const handleClickStep = (index: number) => {
+      console.log(index);
+    };
+
     return {
       ...toRefs(state),
-      handleStep
+      handleStep,
+      handleClickStep
     };
   }
 });

src/packages/__VUE/steps/doc.md

@@ -25,8 +25,11 @@ app.use(Steps).use(Step);
 
 ```html
 <template>
-  <nut-steps :current="current1">
-    <nut-step title="进行中">1</nut-step>
+  <nut-steps :current="current1" @click-step="handleClickStep">
+    <nut-step title="步骤一">
+      1
+      <template v-slot:title>步骤一</template>
+    </nut-step>
     <nut-step title="未开始">2</nut-step>
     <nut-step title="未开始">3</nut-step>
     <nut-step title="未开始">4</nut-step>
@@ -39,7 +42,10 @@ app.use(Steps).use(Step);
       const state = reactive({
         current1: 1,
       });
-      return { ...toRefs(state) };
+      const handleClickStep = (index: number) => {
+        console.log(index)
+      };
+      return { ...toRefs(state), handleClickStep };
     }
   };
 </script>
@@ -114,9 +120,13 @@ app.use(Steps).use(Step);
   <nut-steps direction="vertical" progress-dot current="2">
     <nut-step title="已完成" content="您的订单已经打包完成，商品已发出">1</nut-step>
     <nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
-    <nut-step title="未开始" content="<p>收货地址为：</p><p>北京市经济技术开发区科创十一街18号院京东大厦</p>"
-      >3</nut-step
-    >
+    <nut-step title="未开始">
+      3
+      <template v-slot:content>
+        <p>收货地址为：</p>
+        <p>北京市经济技术开发区科创十一街18号院京东大厦</p>
+      </template>
+    </nut-step>
   </nut-steps>
 </template>
 ```
@@ -136,7 +146,11 @@ app.use(Steps).use(Step);
 | current	               | 	当前所在的步骤           | Number、String        | '0'      |
 | progress-dot            |  点状步骤条     | Boolean | false         |
 
+#### nut-steps events
 
+| 事件名 | 说明           | 回调参数     |
+|--------|----------------|--------------|
+| click-step  | 点击步骤的标题或图标时触发 | index: number |
 
 #### nut-step
 
@@ -145,4 +159,11 @@ app.use(Steps).use(Step);
 | title            | 流程步骤的标题         | String | 步骤 |
 | content          | 流程步骤的描述性文字(支持 html 结构)       | String | 步骤描述 |
 | icon          | 图标       | String | null |
-| icon-color          | 图标颜色       | String | null |
+| icon-color          | 图标颜色       | String | null |
+
+#### nut-step slots
+
+| 参数           | 说明                   |
+| ---------------- | ---------------------- |
+| title            | 步骤标题         |
+| content          | 步骤内容       |

src/packages/__VUE/steps/index.taro.vue

@@ -18,6 +18,7 @@ export default create({
       default: false
     }
   },
+  emits: ['click-step'],
   setup(props, { emit, slots }) {
     const state = reactive({
       children: [] as ComponentInternalInstance[]
@@ -36,10 +37,15 @@ export default create({
       child && state.children.push(child);
     };
 
+    const onEmit = (index: number) => {
+      emit('click-step', index);
+    };
+
     provide('parent', {
       relation,
       state,
-      props
+      props,
+      onEmit
     });
 
     return () => {

src/packages/__VUE/steps/index.vue

@@ -18,6 +18,7 @@ export default create({
       default: false
     }
   },
+  emits: ['click-step'],
   setup(props, { emit, slots }) {
     const state = reactive({
       children: [] as ComponentInternalInstance[]
@@ -36,10 +37,15 @@ export default create({
       child && state.children.push(child);
     };
 
+    const onEmit = (index: number) => {
+      emit('click-step', index);
+    };
+
     provide('parent', {
       relation,
       state,
-      props
+      props,
+      onEmit
     });
 
     return () => {

src/sites/mobile-taro/vue/src/feedback/pages/steps/index.vue

@@ -3,7 +3,10 @@
     <h2>基本用法</h2>
     <div class="steps-wrapper">
       <nut-steps :current="current1">
-        <nut-step title="步骤一">1</nut-step>
+        <nut-step title="步骤一">
+          1
+          <template v-slot:title>步骤一</template>
+        </nut-step>
         <nut-step title="步骤二">2</nut-step>
         <nut-step title="步骤三">3</nut-step>
       </nut-steps>
@@ -43,9 +46,13 @@
       <nut-steps direction="vertical" progress-dot current="2">
         <nut-step title="已完成" content="您的订单已经打包完成，商品已发出">1</nut-step>
         <nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
-        <nut-step title="未开始" content="<p>收货地址为：</p><p>北京市经济技术开发区科创十一街18号院京东大厦</p>"
-          >3</nut-step
-        >
+        <nut-step title="未开始"
+          >3
+          <template v-slot:content>
+            <p>收货地址为：</p>
+            <p>北京市经济技术开发区科创十一街18号院京东大厦</p>
+          </template>
+        </nut-step>
       </nut-steps>
     </div>
   </div>