From 29833209a9d9d38199583a92d6a89b171d52a136 Mon Sep 17 00:00:00 2001
From: olivewind <olive@olivewind.com>
Date: Tue, 9 Oct 2018 16:52:29 +0800
Subject: [PATCH] docs(steps): add docs for dao-steps

---
 docs/dao-steps.md                             |  67 -------
 examples/view/demos/steps/demo-1.vue          |  60 ++++++
 examples/view/page/components/steps/index.vue | 172 +++++++++++-------
 examples/view/router.js                       |   2 +-
 src/components/dao-steps/dao-steps.scss       |  11 +-
 5 files changed, 172 insertions(+), 140 deletions(-)
 delete mode 100644 docs/dao-steps.md
 create mode 100644 examples/view/demos/steps/demo-1.vue

diff --git a/docs/dao-steps.md b/docs/dao-steps.md
deleted file mode 100644
index ba442de02..000000000
--- a/docs/dao-steps.md
+++ /dev/null
@@ -1,67 +0,0 @@
-# steps
-
-steps 是一个多步骤视图组件。代码请参照目录：[src/components/dao-steps](../src/components/dao-steps)。
-
-## 使用方法
-### HTML
-```HTML
-<dao-steps v-model="">
-  <!-- 一级步骤 -->
-  <dao-step
-     slot="step"
-     index="1"
-     title=""
-     [:no-click]=""
-     [:no-active]=""
-     [:active]="">
-    <!-- 二级步骤 -->
-    <dao-substep
-       index=""
-       [:no-click]=""
-       [:no-active]=""
-       [:active]="">
-    </dao-substep>
-  </dao-step>
-  <!-- 内容块 -->
-  <dao-step-content
-     slot="content"
-     index="">
-    [内容块]
-  </dao-step-content>
-</dao-steps>
-```
-
-## 参数
-### \<dao-steps> 接受的属性
-
-| 参数名     | 类型     | 说明                                       | 默认值  | 是否必填 |
-| ------- | ------ | ---------------------------------------- | ---- | ---- |
-| v-model | string | 当前激活步骤的 index。该值是父子组件联动的（即父子组件中对其做的修改都会被反馈到相应的子／父组件）。在组件外部可通过修改该 object 的 index，实现指定步骤跳转，也可以在组件外部监听该变量做特定操作。 | -    | 是    |
-
-### \<dao-step> 接受的属性 
-
-| 参数名         | 类型       | 说明                          | 默认值   | 是否必填 |
-| :---------- | -------- | --------------------------- | ----- | ---- |
-| slot="step" | -        | 表示这是一个步骤节点，和内容块区分开          | -     | 是    |
-| index       | string   | 步骤唯一 ID，按照顺序应定为 1、2、3… 以此类推 | -     | 是    |
-| title       | string   | 一级步骤标题                      | -     | 是    |
-| no-click    | boolean  | 一级步骤以下的子步骤是否不可点击跳转          | false | 否    |
-| no-active   | boolean  | 一级步骤以下的子步骤是否不可访问            | false | 否    |
-| active      | function | 步骤激活回调函数                    | -     | 否    |
-
-### \<dao-substep> 接受的属性
-
-| 参数名       | 类型       | 说明                                    | 默认值   | 是否必填 |
-| --------- | -------- | ------------------------------------- | ----- | ---- |
-| index     | string   | 步骤唯一 ID，按照顺序应定为 1-1、1-2、2-1、2-2… 以此类推 | -     | 是    |
-| title     | string   | 二级步骤标题                                | -     | 是    |
-| no-click  | boolean  | 该步骤是否不可点击跳转                           | false | 否    |
-| no-active | boolean  | 该步骤是否不可访问                             | false | 否    |
-| active    | function | 步骤激活回调函数                              | -     | 否    |
-
-### \<dao-step-content> 接受的属性
-
-| 参数名            | 类型     | 说明                         | 默认值  | 是否必填 |
-| -------------- | ------ | -------------------------- | ---- | ---- |
-| slot="content" | -      | 表示这是一个内容节点，和步骤节点区分开        | -    | 是    |
-| index          | string | 内容唯一 ID，必须与某个二级步骤的 ID 对应起来 | -    | 是    |
\ No newline at end of file
diff --git a/examples/view/demos/steps/demo-1.vue b/examples/view/demos/steps/demo-1.vue
new file mode 100644
index 000000000..5d356b554
--- /dev/null
+++ b/examples/view/demos/steps/demo-1.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <div class="dao-btn ghost" @click="lastStep">上一步</div>
+    <div class="dao-btn blue" @click="nextStep">下一步</div>
+    <dao-steps v-model="currentStep">
+      <dao-step slot="step" index="1" title="步骤一">
+        <dao-substep index="1-1">1-1</dao-substep>
+        <dao-substep index="1-2" :no-click="true">1-2(不可点击)</dao-substep>
+        <dao-substep index="1-3">1-3</dao-substep>
+      </dao-step>
+      <dao-step slot="step" index="2" title="步骤二" :active="activeStepFun">
+        <dao-substep index="2-1"  :no-active="true">2-1(不可访问)</dao-substep>
+        <dao-substep index="2-2" :active="activeSubstepFun">2-2</dao-substep>
+      </dao-step>
+      <dao-step-content
+        v-for="s in steps"
+        :key="s"
+        slot="content"
+        :index="s">
+        步骤 {{s}} 的内容
+      </dao-step-content>
+      </dao-steps>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      currentStep: '1-1',
+      steps: ['1-1', '1-2', '1-3', '2-1', '2-2'],
+    };
+  },
+  methods: {
+    lastStep() {
+      const index = this.steps.indexOf(this.currentStep);
+      if (index === -1 || index === 0) return;
+      this.currentStep = this.steps[index - 1];
+    },
+    nextStep() {
+      const index = this.steps.indexOf(this.currentStep);
+      if (index === -1 || index === this.steps.length - 1) return;
+      this.currentStep = this.steps[index + 1];
+    },
+    activeStepFun() {
+      console.log('这是到步骤 二 的回调函数');
+    },
+    activeSubstepFun() {
+      console.log('这是到步骤 2-1 的回调函数');
+    },
+  },
+  watch: {
+    currentStep: {
+      handler(newV) {
+        console.log('当前步骤是：', newV);
+      },
+      deep: true,
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/examples/view/page/components/steps/index.vue b/examples/view/page/components/steps/index.vue
index 89de2d492..8739b728e 100644
--- a/examples/view/page/components/steps/index.vue
+++ b/examples/view/page/components/steps/index.vue
@@ -1,78 +1,118 @@
 <template>
-  <div>
-    <div class="dao-btn ghost" @click="lastStep">上一步</div>
-    <div class="dao-btn blue" @click="nextStep">下一步</div>
-    <dao-steps v-model="currentStep">
-      <dao-step slot="step" index="1" title="步骤一">
-        <dao-substep index="1-1">1-1</dao-substep>
-        <dao-substep index="1-2" :no-click="noClick">1-2(不可点击)</dao-substep>
-        <dao-substep index="1-3" :no-active="noActive">1-3(不可访问)</dao-substep>
-      </dao-step>
-      <dao-step slot="step" index="2" title="步骤二" :active="activeStepFun">
-        <dao-substep index="2-1" :active="activeSubstepFun">2-1</dao-substep>
-        <dao-substep index="2-2">2-2</dao-substep>
-        <dao-substep index="2-3">2-3</dao-substep>
-      </dao-step>
-      <dao-step slot="step" index="3" title="步骤三">
-        <dao-substep index="3-1">3-1</dao-substep>
-        <dao-substep index="3-2">3-2</dao-substep>
-        <dao-substep index="3-3">3-3</dao-substep>
-      </dao-step>
-      <dao-step slot="step" index="4" title="步骤四">
-        <dao-substep index="4-1">4-1</dao-substep>
-        <dao-substep index="4-2">4-2</dao-substep>
-        <dao-substep index="4-3">4-3</dao-substep>
-      </dao-step>
-      <dao-step-content slot="content" index="1-1">步骤 1-1 的内容</dao-step-content>
-      <dao-step-content slot="content" index="1-2">步骤 1-2 的内容</dao-step-content>
-      <dao-step-content slot="content" index="1-3">步骤 1-3 的内容</dao-step-content>
-      <dao-step-content slot="content" index="2-1">步骤 2-1 的内容</dao-step-content>
-      <dao-step-content slot="content" index="2-2">步骤 2-2 的内容</dao-step-content>
-      <dao-step-content slot="content" index="2-3">步骤 2-3 的内容</dao-step-content>
-      <dao-step-content slot="content" index="3-1">步骤 3-1 的内容</dao-step-content>
-      <dao-step-content slot="content" index="3-2">步骤 3-2 的内容</dao-step-content>
-      <dao-step-content slot="content" index="3-3">步骤 3-3 的内容</dao-step-content>
-      <dao-step-content slot="content" index="4-1">步骤 4-1 的内容</dao-step-content>
-      <dao-step-content slot="content" index="4-2">步骤 4-2 的内容</dao-step-content>
-      <dao-step-content slot="content" index="4-3">步骤 4-3 的内容</dao-step-content>
-    </dao-steps>
+  <div class="docs-spin">
+    <docs-title :name="$t('steps')" desc="dao-steps 是一个多步骤视图组件"></docs-title>
+    <docs-section>
+      <template slot="title">默认用法</template>
+      <template slot="content">
+        <demo-code>
+          <demo1 slot="demo"></demo1>
+          <code-reader slot="code" file="steps/demo-1.vue"></code-reader>
+          <md-reader slot="desc">
+          该多步骤视图组件由 `dao-steps` `dao-step` `dao-substep`  `dao-step-content` 四个组件组合而成。
+          其中 `dao-steps` 的 `v-model` 允许通过编程的方式调整当前激活的 step
+          </md-reader>
+        </demo-code>
+      </template>
+    </docs-section>
+    <docs-section>
+      <template slot="title">
+        <docs-title
+          size="sm"
+          name="<dao-step/> 属性"
+          desc="需要 `step` 作为插槽名">
+        </docs-title>
+      </template>
+      <template slot="content">
+        <docs-table :rows="stepAttrs" type="attr"></docs-table>
+      </template>
+    </docs-section>
+    <docs-section>
+      <template slot="title">
+        <docs-title
+          size="sm"
+          name="<dao-substep/> 属性">
+        </docs-title>
+      </template>
+      <template slot="content">
+        <docs-table :rows="substepAttrs" type="attr"></docs-table>
+      </template>
+    </docs-section>
+    <docs-section>
+      <template slot="title">
+        <docs-title
+          size="sm"
+          name="<dao-step-content/> 属性"
+          desc="需要 `content` 作为插槽名">
+        </docs-title>
+      </template>
+      <template slot="content">
+        <docs-table :rows="stepContentAttrs" type="attr"></docs-table>
+      </template>
+    </docs-section>
   </div>
 </template>
 <script>
+import Demo1 from '@demos/steps/demo-1';
+
 export default {
+  name: 'DocsSteps',
   data() {
     return {
-      noClick: true,
-      noActive: true,
-      currentStep: '1-1',
-      steps: ['1-1', '1-2', '1-3', '2-1', '2-2', '2-3', '3-1', '3-2', '3-3', '4-1', '4-2', '4-3'],
+      stepAttrs: [{
+        name: 'index',
+        type: 'String',
+        desc: 'step 的唯一标志',
+      }, {
+        name: 'title',
+        type: 'String',
+        desc: 'step 的 title',
+      }, {
+        name: 'no-click',
+        type: 'Boolean',
+        desc: '是否可点击',
+        options: [true, false],
+        default: true,
+      }, {
+        name: 'no-active',
+        type: 'Boolean',
+        desc: '是否可激活',
+        options: [true, false],
+        default: true,
+      }, {
+        name: 'active',
+        type: 'Function',
+        desc: '激活的回调',
+      }],
+      substepAttrs: [{
+        name: 'index',
+        type: 'String',
+        desc: 'substep 的唯一标志',
+      }, {
+        name: 'no-click',
+        type: 'Boolean',
+        desc: '是否可点击',
+        options: [true, false],
+        default: true,
+      }, {
+        name: 'no-active',
+        type: 'Boolean',
+        desc: '是否可激活',
+        options: [true, false],
+        default: true,
+      }, {
+        name: 'active',
+        type: 'Function',
+        desc: '激活的回调',
+      }],
+      stepContentAttrs: [{
+        name: 'index',
+        type: 'String',
+        desc: 'step-content 的唯一标志',
+      }],
     };
   },
-  methods: {
-    lastStep() {
-      const index = this.steps.indexOf(this.currentStep);
-      if (index === -1 || index === 0) return;
-      this.currentStep = this.steps[index - 1];
-    },
-    nextStep() {
-      const index = this.steps.indexOf(this.currentStep);
-      if (index === -1 || index === this.steps.length - 1) return;
-      this.currentStep = this.steps[index + 1];
-    },
-    activeStepFun() {
-      console.log('这是到步骤 二 的回调函数哦～');
-    },
-    activeSubstepFun() {
-      console.log('这是到步骤 2-1 的回调函数哦～');
-    },
-  },
-  watch: {
-    currentStep: {
-      handler(newV) {
-        console.log('当前步骤是：', newV);
-      },
-      deep: true,
-    },
+  components: {
+    Demo1,
   },
 };
 </script>
diff --git a/examples/view/router.js b/examples/view/router.js
index 4c67ea7c6..1bd134db5 100644
--- a/examples/view/router.js
+++ b/examples/view/router.js
@@ -230,7 +230,7 @@ const components = [
     path: 'steps',
     meta: {
       available: true,
-      docs: false,
+      docs: true,
       test: false,
     },
   }, {
diff --git a/src/components/dao-steps/dao-steps.scss b/src/components/dao-steps/dao-steps.scss
index fe96645a1..5b2d8ecff 100644
--- a/src/components/dao-steps/dao-steps.scss
+++ b/src/components/dao-steps/dao-steps.scss
@@ -1,14 +1,13 @@
 @import '../dao-color.scss';
-
 .dao-steps {
+  display: flex;
   &-sidebar {
-    float: left;
+    flex-shrink: 0;
     width: 200px;
     margin-right: 20px;
   }
   &-content {
-    float: left;
-    width: calc(100% - 220px);
+    width: 100%;
   }
   .dao-step {
     &:last-child .dao-substep:last-child:after {
@@ -121,7 +120,7 @@
       &:after {
         top: 64%;
       }
-      .dot{
+      .dot {
         visibility: visible;
         &:before {
           background-color: $blue;
@@ -135,4 +134,4 @@
     color: $grey-light;
     cursor: not-allowed;
   }
-}
+}
\ No newline at end of file