[improvement] Steps: jsx (#2623)

packages/step/index.js

@@ -0,0 +1,46 @@
+import { use } from '../utils';
+import Icon from '../icon';
+
+const [sfc, bem] = use('step');
+
+export default sfc({
+  beforeCreate() {
+    this.$parent.steps.push(this);
+  },
+
+  computed: {
+    status() {
+      const index = this.$parent.steps.indexOf(this);
+      const { active } = this.$parent;
+
+      if (index < active) {
+        return 'finish';
+      }
+      if (index === active) {
+        return 'process';
+      }
+    }
+  },
+
+  render(h) {
+    const { status } = this;
+    const { activeColor, direction } = this.$parent;
+    const titleStyle = status === 'process' && { color: activeColor };
+
+    return (
+      <div class={['van-hairline', bem([direction, { [status]: status }])]}>
+        <div class={bem('title')} style={titleStyle}>
+          {this.$slots.default}
+        </div>
+        <div class={bem('circle-container')}>
+          {status !== 'process' ? (
+            <i class={bem('circle')} />
+          ) : (
+            <Icon name="checked" style={{ color: activeColor }} />
+          )}
+        </div>
+        <div class={bem('line')} />
+      </div>
+    );
+  }
+});

packages/step/index.vue

@@ -1,57 +0,0 @@
-<template>
-  <div
-    class="van-hairline"
-    :class="b([$parent.direction, { [status]: status }])"
-  >
-    <div
-      :class="b('title')"
-      :style="titleStyle"
-    >
-      <slot />
-    </div>
-    <div :class="b('circle-container')">
-      <i
-        v-if="status !== 'process'"
-        :class="b('circle')"
-      />
-      <icon
-        v-else
-        name="checked"
-        :style="{ color: $parent.activeColor }"
-      />
-    </div>
-    <div :class="b('line')" />
-  </div>
-</template>
-
-<script>
-import create from '../utils/create';
-
-export default create({
-  name: 'step',
-
-  beforeCreate() {
-    this.$parent.steps.push(this);
-  },
-
-  computed: {
-    status() {
-      const index = this.$parent.steps.indexOf(this);
-      const { active } = this.$parent;
-
-      if (index < active) {
-        return 'finish';
-      }
-      if (index === active) {
-        return 'process';
-      }
-    },
-
-    titleStyle() {
-      return this.status === 'process' ? {
-        color: this.$parent.activeColor
-      } : {};
-    }
-  }
-});
-</script>