From 1a481f5c5591e29e16e78f90037cfb4f805e54e5 Mon Sep 17 00:00:00 2001
From: "cinwell.li" <cinwell.li@gmail.com>
Date: Tue, 28 Mar 2017 15:09:22 +0800
Subject: [PATCH] Steps: add status prop, close #3722 (#3724)

---
 examples/docs/en-US/steps.md |  1 +
 examples/docs/zh-CN/steps.md |  1 +
 packages/steps/src/step.vue  | 22 +++++++++++++---------
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/examples/docs/en-US/steps.md b/examples/docs/en-US/steps.md
index dfd494533..d5de169d6 100644
--- a/examples/docs/en-US/steps.md
+++ b/examples/docs/en-US/steps.md
@@ -128,6 +128,7 @@ Vertical step bars.
 | title | step title | string | — | — |
 | description | step description | string | — | — |
 | icon | step icon | icons provided by Element Icon. Can be overwritten by a named slot if you want to use  custom icons | string | — |
+| status | current status. It will be automatically set by Steps if not configured. | wait/process/finish/error/success | - |
 
 ### Step Slot
 | Name | Description |
diff --git a/examples/docs/zh-CN/steps.md b/examples/docs/zh-CN/steps.md
index 5eac5beb2..a8e9630c4 100644
--- a/examples/docs/zh-CN/steps.md
+++ b/examples/docs/zh-CN/steps.md
@@ -122,6 +122,7 @@
 | title | 标题 | string | — | — |
 | description | 描述性文字 | string | — | — |
 | icon | 图标 | Element Icon 提供的图标,如果要使用自定义图标可以通过 slot 方式写入 | string | — |
+| status | 设置当前步骤的状态,不设置则根据 steps 确定状态 | wait/process/finish/error/success | - |
 
 ### Step Slot
 | name | 说明  |
diff --git a/packages/steps/src/step.vue b/packages/steps/src/step.vue
index d633eecfa..2cfcb6e85 100644
--- a/packages/steps/src/step.vue
+++ b/packages/steps/src/step.vue
@@ -52,10 +52,7 @@ export default {
     title: String,
     icon: String,
     description: String,
-    status: {
-      type: String,
-      default: 'wait'
-    }
+    status: String
   },
 
   data() {
@@ -65,7 +62,7 @@ export default {
       lineStyle: {},
       mainOffset: 0,
       isLast: false,
-      currentStatus: this.status
+      internalStatus: ''
     };
   },
 
@@ -73,19 +70,25 @@ export default {
     this.$parent.steps.push(this);
   },
 
+  computed: {
+    currentStatus() {
+      return this.status || this.internalStatus;
+    }
+  },
+
   methods: {
     updateStatus(val) {
       const prevChild = this.$parent.$children[this.index - 1];
 
       if (val > this.index) {
-        this.currentStatus = this.$parent.finishStatus;
+        this.internalStatus = this.$parent.finishStatus;
       } else if (val === this.index) {
-        this.currentStatus = this.$parent.processStatus;
+        this.internalStatus = this.$parent.processStatus;
       } else {
-        this.currentStatus = 'wait';
+        this.internalStatus = 'wait';
       }
 
-      if (prevChild) prevChild.calcProgress(this.currentStatus);
+      if (prevChild) prevChild.calcProgress(this.internalStatus);
     },
 
     calcProgress(status) {
@@ -100,6 +103,7 @@ export default {
         style.transitionDelay = (-150 * this.index) + 'ms';
       }
 
+      style.borderWidth = step ? '1px' : 0;
       this.$parent.direction === 'vertical'
         ? style.height = step + '%'
         : style.width = step + '%';