From b5ee51c7cf2a18f19be2e53d28ce0b8560c2c5bf Mon Sep 17 00:00:00 2001
From: pangxie1991 <chenyao1102@gmail.com>
Date: Wed, 4 Jan 2017 11:46:36 +0800
Subject: [PATCH 1/5] steps merge

---
 app.json                                      |   1 -
 dist/index.wxss                               |   1 -
 dist/steps/index.wxml                         |  14 +++
 dist/steps/index.wxss                         | 119 +-----------------
 dist/steps/wxss/step.wxss                     | 115 +++++++++++++++++
 .../index.wxss => steps/wxss/vstep.wxss}      |  41 +++---
 example/dashboard/index.js                    |   3 -
 example/steps/index.js                        |  17 +++
 example/steps/index.wxml                      |  59 +--------
 example/vsteps/index.js                       |  13 --
 example/vsteps/index.wxml                     |  25 ----
 11 files changed, 173 insertions(+), 235 deletions(-)
 create mode 100644 dist/steps/index.wxml
 create mode 100644 dist/steps/wxss/step.wxss
 rename dist/{vsteps/index.wxss => steps/wxss/vstep.wxss} (50%)
 delete mode 100644 example/vsteps/index.js
 delete mode 100644 example/vsteps/index.wxml

diff --git a/app.json b/app.json
index e9b7179f..740192e5 100644
--- a/app.json
+++ b/app.json
@@ -15,7 +15,6 @@
     "example/steps/index",
     "example/card/index",
     "example/toast/index",
-    "example/vsteps/index",
     "example/icon/index",
     "example/dialog/index"
   ],
diff --git a/dist/index.wxss b/dist/index.wxss
index a93c9cca..8cea86dd 100644
--- a/dist/index.wxss
+++ b/dist/index.wxss
@@ -14,5 +14,4 @@
 @import "steps/index.wxss";
 @import "toast/index.wxss";
 @import "toptips/index.wxss";
-@import "vsteps/index.wxss";
 @import "icon/index.wxss";
diff --git a/dist/steps/index.wxml b/dist/steps/index.wxml
new file mode 100644
index 00000000..81376657
--- /dev/null
+++ b/dist/steps/index.wxml
@@ -0,0 +1,14 @@
+<template name="steps">
+  <view class="zui-steps zui-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zui-steps--{{ steps.length }}">
+    <view
+      wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index"
+      class="zui-steps__step {{ index == 0 ? 'zui-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'zui-steps__step--last-child' : '' }} {{ step.done ? 'zui-steps__step--done' : '' }} {{ step.current ? 'zui-steps__step--cur' : '' }}"
+    >
+      <view class="zui-steps__title">{{ step.text }}</view>
+      <view class="zui-steps__icons">
+        <view class="zui-steps__circle"></view>
+      </view>
+      <view class="zui-steps__line"></view>
+    </view>
+  </view>
+</template>
diff --git a/dist/steps/index.wxss b/dist/steps/index.wxss
index 2f785ffe..06f71e31 100644
--- a/dist/steps/index.wxss
+++ b/dist/steps/index.wxss
@@ -1,119 +1,6 @@
+@import "wxss/step.wxss";
+@import "wxss/vstep.wxss";
+
 .zui-steps {
   position: relative;
 }
-
-.zui-steps-5 .zui-steps__step {
-  width: 25%;
-}
-
-.zui-steps-4 .zui-steps__step {
-  width: 33%;
-}
-
-.zui-steps-3 .zui-steps__step {
-  width: 50%;
-}
-
-.zui-steps__step {
-  position: relative;
-  float: left;
-  padding-bottom: 20px;
-  color: #b1b1b1;
-}
-
-.zui-steps__title {
-  display: inline-block;
-  transform: translateX(-50%);
-  margin-left: 2px;
-  font-size: 10px;
-}
-
-.zui-steps__icon {
-  position: absolute;
-  top: 28px;
-  left: -8px;
-  padding: 0 8px;
-  background-color: #fff;
-  z-index: 10;
-}
-
-.zui-steps__circle {
-  display: block;
-  position: relative;
-  width: 5px;
-  height: 5px;
-  background-color: #e5e5e5;
-  border-radius: 50%;
-}
-
-.zui-steps__line {
-  position: absolute;
-  left: 0px;
-  top: 30px;
-  width: 100%;
-  height: 1px;
-  background-color: #e5e5e5;
-}
-
-
-/* 已完成的steps */
-.zui-steps__step--done {
-  color: #333;
-}
-
-.zui-steps__step--done .zui-steps__line {
-  background-color: #06bf04;
-}
-
-.zui-steps__step--done .zui-steps__circle {
-  width: 5px;
-  height: 5px;
-  background-color: #09bb07;
-}
-
-/* 正在进行中的steps */
-.zui-steps__step--cur .zui-steps__icon {
-  top: 24px;
-}
-
-.zui-steps__step--cur .zui-steps__circle {
-  width: 13px;
-  height: 13px;
-  background-image: url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png");
-  background-size: 13px 13px;
-}
-
-.zui-steps__step--cur .zui-steps__title {
-  margin-left: 6px;
-}
-
-.zui-steps__step--cur .zui-steps__line {
-  background-color: #e5e5e5;
-}
-
-/* 各种不同位置的 */
-.zui-steps__step--first-child .zui-steps__title {
-  margin-left: 0;
-  transform: none;
-}
-
-.zui-steps__step--last-child {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  text-align: right;
-}
-
-.zui-steps__step--last-child .zui-steps__title {
-  transform: none;
-}
-
-.zui-steps__step--last-child .zui-steps__icon {
-  left: auto;
-  right: -6px;
-}
-
-.zui-steps__step--last-child .zui-steps__line {
-  display: none;
-}
diff --git a/dist/steps/wxss/step.wxss b/dist/steps/wxss/step.wxss
new file mode 100644
index 00000000..e6d79ed0
--- /dev/null
+++ b/dist/steps/wxss/step.wxss
@@ -0,0 +1,115 @@
+.zui-steps--steps.zui-steps--5 .zui-steps__step {
+  width: 25%;
+}
+
+.zui-steps--steps.zui-steps--4 .zui-steps__step {
+  width: 33%;
+}
+
+.zui-steps--steps.zui-steps--3 .zui-steps__step {
+  width: 50%;
+}
+
+.zui-steps--steps .zui-steps__step {
+  position: relative;
+  float: left;
+  padding-bottom: 20px;
+  color: #b1b1b1;
+}
+
+.zui-steps--steps .zui-steps__title {
+  display: inline-block;
+  transform: translateX(-50%);
+  margin-left: 2px;
+  font-size: 10px;
+}
+
+.zui-steps--steps .zui-steps__icons {
+  position: absolute;
+  top: 28px;
+  left: -8px;
+  padding: 0 8px;
+  background-color: #fff;
+  z-index: 10;
+}
+
+.zui-steps--steps .zui-steps__circle {
+  display: block;
+  position: relative;
+  width: 5px;
+  height: 5px;
+  background-color: #e5e5e5;
+  border-radius: 50%;
+}
+
+.zui-steps--steps .zui-steps__line {
+  position: absolute;
+  left: 0px;
+  top: 30px;
+  width: 100%;
+  height: 1px;
+  background-color: #e5e5e5;
+}
+
+
+/* 已完成的steps */
+.zui-steps--steps .zui-steps__step--done {
+  color: #333;
+}
+
+.zui-steps--steps .zui-steps__step--done .zui-steps__line {
+  background-color: #06bf04;
+}
+
+.zui-steps--steps .zui-steps__step--done .zui-steps__circle {
+  width: 5px;
+  height: 5px;
+  background-color: #09bb07;
+}
+
+/* 正在进行中的steps */
+.zui-steps--steps .zui-steps__step--cur .zui-steps__icons {
+  top: 24px;
+}
+
+.zui-steps--steps .zui-steps__step--cur .zui-steps__circle {
+  width: 13px;
+  height: 13px;
+  background-image: url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png");
+  background-size: 13px 13px;
+}
+
+.zui-steps--steps .zui-steps__step--cur .zui-steps__title {
+  margin-left: 6px;
+}
+
+.zui-steps--steps .zui-steps__step--cur .zui-steps__line {
+  background-color: #e5e5e5;
+}
+
+/* 各种不同位置的 */
+.zui-steps--steps .zui-steps__step--first-child .zui-steps__title {
+  margin-left: 0;
+  transform: none;
+}
+
+.zui-steps--steps .zui-steps__step--last-child {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  text-align: right;
+}
+
+.zui-steps--steps .zui-steps__step--last-child .zui-steps__title {
+  transform: none;
+}
+
+.zui-steps--steps .zui-steps__step--last-child .zui-steps__icons {
+  left: auto;
+  right: -6px;
+}
+
+.zui-steps--steps .zui-steps__step--last-child .zui-steps__line {
+  display: none;
+}
diff --git a/dist/vsteps/index.wxss b/dist/steps/wxss/vstep.wxss
similarity index 50%
rename from dist/vsteps/index.wxss
rename to dist/steps/wxss/vstep.wxss
index cb964d29..06f4104d 100644
--- a/dist/vsteps/index.wxss
+++ b/dist/steps/wxss/vstep.wxss
@@ -1,35 +1,34 @@
-
-.zui-vsteps {
-  position: relative;
-  padding: 15px;
+.zui-steps--vsteps {
   color: #999;
   font-size: 14px;
 }
 
-.zui-vsteps::after {
-  left: 42px;
+.zui-steps--vsteps .zui-steps__step {
+  position: relative;
+  padding: 15px 0;
 }
 
-.zui-vsteps__step--done {
+.zui-steps--vsteps .zui-steps__step--done {
   color: #44BB00;
 }
 
-.zui-vsteps__line {
+.zui-steps--vsteps .zui-steps__line {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 22px;
+  left: 7px;
   width: 1px;
   background-color: #e5e5e5;
 }
 
-.zui-vsteps__title {
+.zui-steps--vsteps .zui-steps__title {
+  line-height: 20px;
   padding-left: 27px;
 }
 
-.zui-vsteps__icons {
+.zui-steps--vsteps .zui-steps__icons {
   position: absolute;
-  left: 22px;
+  left: 7px;
   top: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
@@ -37,43 +36,43 @@
   background-color: #fff;
 }
 
-.zui-vsteps__circle {
+.zui-steps--vsteps .zui-steps__circle {
   width: 5px;
   height: 5px;
   background-color: #cacaca;
   border-radius: 10px;
 }
 
-.zui-vsteps__step--done .zui-vsteps__circle {
+.zui-steps--vsteps .zui-steps__step--done .zui-steps__circle {
   width: 13px;
   height: 13px;
-  color: #09bb07;
-  background-color: transparent;
+  background: transparent url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png");
+  background-size: 13px 13px;
   border-radius:0;
 }
 
-.zui-vsteps__icon--active {
+.zui-steps--vsteps .zui-steps__icon--active {
   width: 13px;
   height: 13px;
 }
 
-.zui-vsteps--first-child .zui-vsteps__title::before {
+.zui-steps--vsteps .zui-steps__step--first-child .zui-steps__title::before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 50%;
-  left: 22px;
+  left: 7px;
   width: 1px;
   background-color: #fff;
   z-index: 1;
 }
 
-.zui-vsteps--last-child .zui-vsteps__title::before {
+.zui-steps--vsteps .zui-steps__step--last-child .zui-steps__title::before {
   content: '';
   position: absolute;
   top: 50%;
   bottom: 0%;
-  left: 22px;
+  left: 7px;
   width: 1px;
   background-color: #fff;
   z-index: 1;
diff --git a/example/dashboard/index.js b/example/dashboard/index.js
index 186ba851..920627f1 100644
--- a/example/dashboard/index.js
+++ b/example/dashboard/index.js
@@ -42,9 +42,6 @@ Page({
       }, {
         name: 'Steps',
         path: '/example/steps/index'
-      }, {
-        name: 'Vsteps',
-        path: '/example/vsteps/index'
       }, {
         name: 'Tab',
         path: '/example/tab/index'
diff --git a/example/steps/index.js b/example/steps/index.js
index 99e7458d..789e2d02 100644
--- a/example/steps/index.js
+++ b/example/steps/index.js
@@ -2,6 +2,23 @@ var app = getApp()
 
 Page({
   data: {
+    steps: [
+      {
+        current: false,
+        done: true,
+        text: '步骤一'
+      },
+      {
+        done: true,
+        current: true,
+        text: '步骤二'
+      },
+      {
+        done: false,
+        current: false,
+        text: '步骤三'
+      }
+    ]
   },
 
   onLoad: function () {
diff --git a/example/steps/index.wxml b/example/steps/index.wxml
index 58e5b6de..be67b688 100644
--- a/example/steps/index.wxml
+++ b/example/steps/index.wxml
@@ -1,67 +1,16 @@
+<import src="/dist/steps/index.wxml" />
+
 <view class="container">
   <view class="zui-panel">
     <view class="zui-cell">
       <view class="zui-cell__bd">
-        <view class="top-info__steps zui-steps zui-steps-3">
-          <view
-            class="zui-steps__step zui-steps__step--first-child zui-steps__step--done">
-            <text class="zui-steps__title">步骤一</text>
-            <view class="zui-steps__icon">
-              <view class="zui-steps__circle"></view>
-            </view>
-            <view class="zui-steps__line"></view>
-          </view>
-          <view class="zui-steps__step zui-steps__step--done zui-steps__step--cur">
-            <text class="zui-steps__title">步骤二</text>
-            <view class="zui-steps__icon">
-              <view class="zui-steps__circle"></view>
-            </view>
-            <view class="zui-steps__line"></view>
-          </view>
-          <view class="zui-steps__step zui-steps__step--last-child">
-            <text class="zui-steps__title">步骤三</text>
-            <view class="zui-steps__icon">
-              <view class="zui-steps__circle"></view>
-            </view>
-            <view class="zui-steps__line"></view>
-          </view>
-        </view>
+        <template is="steps" data="{{ type: 'horizon', steps }}"></template>
       </view>
     </view>
 
     <view class="zui-cell zui-cell--last-child">
       <view class="zui-cell__bd">
-        <view class="top-info__steps zui-steps zui-steps-4">
-          <view
-            class="zui-steps__step zui-steps__step--first-child zui-steps__step--done">
-            <text class="zui-steps__title">步骤一</text>
-            <view class="zui-steps__icon">
-              <view class="zui-steps__circle"></view>
-            </view>
-            <view class="zui-steps__line"></view>
-          </view>
-          <view class="zui-steps__step zui-steps__step--done">
-            <text class="zui-steps__title">步骤二</text>
-            <view class="zui-steps__icon">
-              <view class="zui-steps__circle"></view>
-            </view>
-            <view class="zui-steps__line"></view>
-          </view>
-          <view class="zui-steps__step zui-steps__step--done zui-steps__step--cur">
-            <text class="zui-steps__title">步骤三</text>
-            <view class="zui-steps__icon">
-              <view class="zui-steps__circle"></view>
-            </view>
-            <view class="zui-steps__line"></view>
-          </view>
-          <view class="zui-steps__step zui-steps__step--last-child">
-            <text class="zui-steps__title">步骤四</text>
-            <view class="zui-steps__icon">
-              <view class="zui-steps__circle"></view>
-            </view>
-            <view class="zui-steps__line"></view>
-          </view>
-        </view>
+        <template is="steps" data="{{ type: 'vertical', steps }}"></template>
       </view>
     </view>
   </view>
diff --git a/example/vsteps/index.js b/example/vsteps/index.js
deleted file mode 100644
index 99e7458d..00000000
--- a/example/vsteps/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-var app = getApp()
-
-Page({
-  data: {
-  },
-
-  onLoad: function () {
-
-  },
-
-  onShow: function() {
-  },
-})
diff --git a/example/vsteps/index.wxml b/example/vsteps/index.wxml
deleted file mode 100644
index 946d3445..00000000
--- a/example/vsteps/index.wxml
+++ /dev/null
@@ -1,25 +0,0 @@
-<view class="container">
-  <view class="zui-panel">
-    <view class="zui-vsteps zui-vsteps__step--done zui-vsteps--first-child">
-      <view class="zui-vsteps__title">买家退款 (2016-03-21  19:20:20)</view>
-      <view class="zui-vsteps__icons">
-        <view class="zui-vsteps__circle zui-icon zui-icon-checked"></view>
-      </view>
-      <view class="zui-vsteps__line"></view>
-    </view>
-    <view class="zui-vsteps zui-vsteps__step--done zui-vsteps__step--cur">
-      <view class="zui-vsteps__title">卖家同意 (2016-03-22  21:20:20)</view>
-      <view class="zui-vsteps__icons">
-        <view class="zui-vsteps__circle zui-icon zui-icon-checked"></view>
-      </view>
-      <view class="zui-vsteps__line"></view>
-    </view>
-    <view class="zui-vsteps zui-vsteps--last-child">
-      <view class="zui-vsteps__title">卖家退款 (2016-03-23  20:20:20)</view>
-      <view class="zui-vsteps__icons">
-        <view class="zui-vsteps__circle"></view>
-      </view>
-      <view class="zui-vsteps__line"></view>
-    </view>
-  </view>
-</view>

From 4a3650e8e7a9a2e30062ead34310465bc19825e6 Mon Sep 17 00:00:00 2001
From: pangxie1991 <chenyao1102@gmail.com>
Date: Wed, 4 Jan 2017 11:53:12 +0800
Subject: [PATCH 2/5] zui steps

---
 dist/steps/index.wxml    | 2 +-
 example/steps/index.wxml | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/dist/steps/index.wxml b/dist/steps/index.wxml
index 81376657..b2221195 100644
--- a/dist/steps/index.wxml
+++ b/dist/steps/index.wxml
@@ -1,4 +1,4 @@
-<template name="steps">
+<template name="zui-steps">
   <view class="zui-steps zui-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zui-steps--{{ steps.length }}">
     <view
       wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index"
diff --git a/example/steps/index.wxml b/example/steps/index.wxml
index be67b688..112bc8f9 100644
--- a/example/steps/index.wxml
+++ b/example/steps/index.wxml
@@ -4,13 +4,13 @@
   <view class="zui-panel">
     <view class="zui-cell">
       <view class="zui-cell__bd">
-        <template is="steps" data="{{ type: 'horizon', steps }}"></template>
+        <template is="zui-steps" data="{{ type: 'horizon', steps }}"></template>
       </view>
     </view>
 
     <view class="zui-cell zui-cell--last-child">
       <view class="zui-cell__bd">
-        <template is="steps" data="{{ type: 'vertical', steps }}"></template>
+        <template is="zui-steps" data="{{ type: 'vertical', steps }}"></template>
       </view>
     </view>
   </view>

From 2323611d5561a181e5090b155b0b8fa65f8426bf Mon Sep 17 00:00:00 2001
From: pangxie1991 <chenyao1102@gmail.com>
Date: Wed, 4 Jan 2017 11:55:12 +0800
Subject: [PATCH 3/5] steps

---
 dist/steps/index.wxml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dist/steps/index.wxml b/dist/steps/index.wxml
index b2221195..8438c603 100644
--- a/dist/steps/index.wxml
+++ b/dist/steps/index.wxml
@@ -1,5 +1,5 @@
 <template name="zui-steps">
-  <view class="zui-steps zui-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zui-steps--{{ steps.length }}">
+  <view class="zui-steps zui-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zui-steps--{{ steps.length }} {{ className }}">
     <view
       wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index"
       class="zui-steps__step {{ index == 0 ? 'zui-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'zui-steps__step--last-child' : '' }} {{ step.done ? 'zui-steps__step--done' : '' }} {{ step.current ? 'zui-steps__step--cur' : '' }}"

From 096239ed5159345c164d3bde4c54c9d76e209873 Mon Sep 17 00:00:00 2001
From: pangxie1991 <chenyao1102@gmail.com>
Date: Wed, 4 Jan 2017 16:38:00 +0800
Subject: [PATCH 4/5] steps

---
 example/steps/index.wxml | 6 ++++++
 example/steps/index.wxss | 2 ++
 2 files changed, 8 insertions(+)
 create mode 100644 example/steps/index.wxss

diff --git a/example/steps/index.wxml b/example/steps/index.wxml
index 112bc8f9..1bc643d3 100644
--- a/example/steps/index.wxml
+++ b/example/steps/index.wxml
@@ -8,6 +8,12 @@
       </view>
     </view>
 
+    <view class="zui-cell zui-cell">
+      <view class="zui-cell__bd">
+        <template is="zui-steps" data="{{ type: 'vertical', steps, className: 'my-class' }}"></template>
+      </view>
+    </view>
+
     <view class="zui-cell zui-cell--last-child">
       <view class="zui-cell__bd">
         <template is="zui-steps" data="{{ type: 'vertical', steps }}"></template>
diff --git a/example/steps/index.wxss b/example/steps/index.wxss
new file mode 100644
index 00000000..6e691835
--- /dev/null
+++ b/example/steps/index.wxss
@@ -0,0 +1,2 @@
+.my-class {
+}

From 5bedadf671ded5a9cbceb176a9c5942a29cfb67e Mon Sep 17 00:00:00 2001
From: pangxie1991 <chenyao1102@gmail.com>
Date: Wed, 4 Jan 2017 16:59:28 +0800
Subject: [PATCH 5/5] steps example

---
 example/steps/index.wxml | 13 +++++++------
 example/steps/index.wxss |  1 +
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/example/steps/index.wxml b/example/steps/index.wxml
index 1bc643d3..b047bff8 100644
--- a/example/steps/index.wxml
+++ b/example/steps/index.wxml
@@ -8,12 +8,6 @@
       </view>
     </view>
 
-    <view class="zui-cell zui-cell">
-      <view class="zui-cell__bd">
-        <template is="zui-steps" data="{{ type: 'vertical', steps, className: 'my-class' }}"></template>
-      </view>
-    </view>
-
     <view class="zui-cell zui-cell--last-child">
       <view class="zui-cell__bd">
         <template is="zui-steps" data="{{ type: 'vertical', steps }}"></template>
@@ -21,4 +15,11 @@
     </view>
   </view>
 
+  <view class="zui-panel">
+    <view class="zui-cell">
+      <view class="zui-cell__bd">可自定义class</view>
+    </view>
+    <template is="zui-steps" data="{{ type: 'vertical', steps, className: 'my-class' }}"></template>
+  </view>
+
 </view>
diff --git a/example/steps/index.wxss b/example/steps/index.wxss
index 6e691835..cff4db6e 100644
--- a/example/steps/index.wxss
+++ b/example/steps/index.wxss
@@ -1,2 +1,3 @@
 .my-class {
+  padding: 5px 15px;
 }