[improvement] Steps: jsx (#2623)

packages/steps/index.js

@@ -0,0 +1,57 @@
+import { use } from '../utils';
+import { GREEN } from '../utils/color';
+import Icon from '../icon';
+
+const [sfc, bem] = use('steps');
+
+export default sfc({
+  props: {
+    icon: String,
+    title: String,
+    active: Number,
+    iconClass: String,
+    description: String,
+    direction: {
+      type: String,
+      default: 'horizontal'
+    },
+    activeColor: {
+      type: String,
+      default: GREEN
+    }
+  },
+
+  data() {
+    return {
+      steps: []
+    };
+  },
+
+  render(h) {
+    const { icon, title, description, $slots } = this;
+
+    const StatusIcon = ($slots.icon || icon) && (
+      <div class={bem('icon')}>{$slots.icon || <Icon name={icon} class={this.iconClass} />}</div>
+    );
+
+    const StatusMessage = (
+      <div class={bem('message')}>
+        <div class={bem('title')}>{title}</div>
+        <div class={[bem('desc'), 'van-ellipsis']}>{description}</div>
+      </div>
+    );
+
+    return (
+      <div class={bem([this.direction])}>
+        {(title || description) && (
+          <div class={bem('status')}>
+            {StatusIcon}
+            {StatusMessage}
+            {$slots['message-extra']}
+          </div>
+        )}
+        <div class={bem('items', { alone: !title && !description })}>{$slots.default}</div>
+      </div>
+    );
+  }
+});