From 7372d2027ea276cf9bf4a93cb8fddb058ec61853 Mon Sep 17 00:00:00 2001
From: MimoN <mimo.ouyang@daocloud.io>
Date: Tue, 16 Oct 2018 20:51:15 +0800
Subject: [PATCH] docs(popover): add the document and demo of the popover
 component

---
 examples/view/demos/popover/demo-1.vue        |   6 +
 examples/view/demos/popover/demo-2.vue        |   8 +
 examples/view/demos/popover/demo-3.vue        |   7 +
 .../view/page/components/list-group/index.vue |   2 +-
 .../view/page/components/popover/index.vue    | 176 +++++++++++-------
 examples/view/router.js                       |   2 +-
 6 files changed, 135 insertions(+), 66 deletions(-)
 create mode 100644 examples/view/demos/popover/demo-1.vue
 create mode 100644 examples/view/demos/popover/demo-2.vue
 create mode 100644 examples/view/demos/popover/demo-3.vue

diff --git a/examples/view/demos/popover/demo-1.vue b/examples/view/demos/popover/demo-1.vue
new file mode 100644
index 000000000..3f4d7ce37
--- /dev/null
+++ b/examples/view/demos/popover/demo-1.vue
@@ -0,0 +1,6 @@
+<template>
+  <dao-popover
+    content="This is the content">
+    <button class="dao-btn ghost">Click Here!</button>
+  </dao-popover>
+</template>
diff --git a/examples/view/demos/popover/demo-2.vue b/examples/view/demos/popover/demo-2.vue
new file mode 100644
index 000000000..770464232
--- /dev/null
+++ b/examples/view/demos/popover/demo-2.vue
@@ -0,0 +1,8 @@
+<template>
+  <dao-popover
+    content="This is the content"
+    placement="right"
+    :always="true">
+    <button class="dao-btn ghost">Click Here!</button>
+  </dao-popover>
+</template>
diff --git a/examples/view/demos/popover/demo-3.vue b/examples/view/demos/popover/demo-3.vue
new file mode 100644
index 000000000..6e4b17ba6
--- /dev/null
+++ b/examples/view/demos/popover/demo-3.vue
@@ -0,0 +1,7 @@
+<template>
+  <dao-popover
+    content="This is the content"
+    trigger="hover">
+    <button class="dao-btn ghost">Hover Here!</button>
+  </dao-popover>
+</template>
diff --git a/examples/view/page/components/list-group/index.vue b/examples/view/page/components/list-group/index.vue
index 4a454101e..3022ee540 100644
--- a/examples/view/page/components/list-group/index.vue
+++ b/examples/view/page/components/list-group/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="docs-spin">
+  <div>
     <docs-title :name="$t('list-group')" desc="List Group 是一个用于侧边栏导航的样式，它是纯样式组件。"></docs-title>
     <docs-section>
       <template slot="title">默认用法</template>
diff --git a/examples/view/page/components/popover/index.vue b/examples/view/page/components/popover/index.vue
index 0b9f6b3fa..96100fa67 100644
--- a/examples/view/page/components/popover/index.vue
+++ b/examples/view/page/components/popover/index.vue
@@ -1,75 +1,123 @@
 <template>
   <div>
-    <div class="demo-container">
-      <div class="top">
-        <dao-popover
-          content="a"
-          placement="top-start">
-          <button class="dao-btn ghost">上左</button>
-        </dao-popover>
-        <dao-popover content="afgnsdjfghsdfhuieshfjfhduafyaufhdjkfhdskdjhfdsfhsdjhfushgjsghsfhgfdjkghfdjkhgfdkjghfdghfdgfdjghfdkj" placement="top">
-          <button class="dao-btn ghost">上边</button>
-        </dao-popover>
-        <dao-popover content="Top Right 文字提示" placement="top-end">
-          <button class="dao-btn ghost">上右</button>
-        </dao-popover>
-      </div>
-      <div class="left">
-        <dao-popover content="Left Top 文字提示" placement="left-start">
-          <button class="dao-btn ghost">左上</button>
-        </dao-popover><br><br>
-        <dao-popover content="Left Center 文字提示" placement="left">
-          <button class="dao-btn ghost">左边</button>
-        </dao-popover><br><br>
-        <dao-popover content="Left Bottom 文字提示" placement="left-end">
-          <button class="dao-btn ghost">左下</button>
-        </dao-popover>
-      </div>
-      <div class="right">
-        <dao-popover content="dgfhfdhfchcgfhddrdgljlhkuhkhkjhkjhkjhkjhkjhkjhkjhkjh" placement="right-start">
-          <button class="dao-btn ghost">右上</button>
-        </dao-popover><br><br>
-        <dao-popover content="Right Center 文字提示" placement="right">
-          <button class="dao-btn ghost">右边</button>
-        </dao-popover><br><br>
-        <dao-popover content="Right Bottom 文字提示" placement="right-end" :append-to-body="false">
-          <button class="dao-btn ghost">右下</button>
-        </dao-popover>
-      </div>
-      <div class="bottom">
-        <dao-popover content="Bottom Left 文字提示" placement="bottom-start">
-          <button class="dao-btn ghost">下左</button>
-        </dao-popover>
-        <dao-popover content="Bottom Center 文字提示" placement="bottom">
-          <button class="dao-btn ghost">下边</button>
-        </dao-popover>
-        <dao-popover content="Bottom Right 文字提示" placement="bottom-end">
-          <button class="dao-btn ghost">下右</button>
-        </dao-popover>
-      </div>
-    </div>
-    <div class="demo-container">
-      <dao-popover
-        content="Top Left 文字提示"
-        placement="top-start">
-        <button class="dao-btn ghost">slot</button>
-        <div slot="content">slot content</div>
-      </dao-popover>
-    </div>
-    <div class="demo-container">
-      <dao-popover
-        :content="test"
-        :always="true">
-        <input type="text" v-model="test">
-      </dao-popover>
-    </div>
+    <docs-title :name="$t('popover')" desc="Popover 是一个一般用于显示更多信息的浮层组件。"></docs-title>
+    <docs-section>
+      <template slot="title">简单用法</template>
+      <template slot="content">
+        <demo-code>
+          <demo1 slot="demo"></demo1>
+          <code-reader slot="code" file="popover/demo-1.vue"></code-reader>
+          <md-reader slot="desc">
+            简单的使用 dao-popover 组件，设定好 popover 的内容之后，就能轻易的通过点击 trigger 来看到 popover
+          </md-reader>
+        </demo-code>
+      </template>
+    </docs-section>
+    <docs-section>
+      <template slot="title">一直显示的 Popover</template>
+      <template slot="content">
+        <demo-code>
+          <demo2 slot="demo"></demo2>
+          <code-reader slot="code" file="popover/demo-2.vue"></code-reader>
+          <md-reader slot="desc">
+            通过指定 **always** 属性，可以让 popover 不需要触发 trigger，而是一直显示在界面中
+          </md-reader>
+        </demo-code>
+      </template>
+    </docs-section>
+    <docs-section>
+      <template slot="title">其他触发方式的 Popover</template>
+      <template slot="content">
+        <demo-code>
+          <demo3 slot="demo"></demo3>
+          <code-reader slot="code" file="popover/demo-3.vue"></code-reader>
+          <md-reader slot="desc">
+            通过指定 **trigger** 属性值可以通过 hover 等 click 之外的其他方式触发 popover
+          </md-reader>
+        </demo-code>
+      </template>
+    </docs-section>
+    <docs-section>
+      <template slot="title">
+        <docs-title name="<dao-popover/> 属性" size="sm"></docs-title>
+      </template>
+      <template slot="content">
+        <docs-table :rows="popoverAttrs" type="attr"></docs-table>
+      </template>
+    </docs-section>
+    <docs-section>
+      <template slot="title">
+        <docs-title name="<dao-popover/> 插槽" size="sm"></docs-title>
+      </template>
+      <template slot="content">
+        <docs-table :rows="slotArgs" type="attr"></docs-table>
+      </template>
+    </docs-section>
   </div>
 </template>
 <script>
+  import Demo1 from '@demos/popover/demo-1';
+  import Demo2 from '@demos/popover/demo-2';
+  import Demo3 from '@demos/popover/demo-3';
+
   export default {
+    components: {
+      Demo1,
+      Demo2,
+      Demo3,
+    },
     data() {
       return {
-        test: 'asdf',
+        popoverAttrs: [{
+          name: 'trigger',
+          type: 'String',
+          desc: 'Popover 的触发方式',
+          options: ['click', 'focus', 'hover'],
+          default: 'click',
+        }, {
+          name: 'content',
+          type: 'String',
+          desc: 'Popover 的内容文本',
+          options: ['-'],
+          default: '-',
+        }, {
+          name: 'placement',
+          type: 'String',
+          desc: 'Popover 相对于 trigger 元素的展示位置',
+          options: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
+          default: 'bottom',
+        }, {
+          name: 'always',
+          type: 'Boolean',
+          desc: 'Popover 是否需要一直显示',
+          options: ['true', 'false'],
+          default: 'false',
+        }, {
+          name: 'disabled',
+          type: 'Boolean',
+          desc: 'Popover 是否不可用',
+          options: ['true', 'false'],
+          default: 'false',
+        }, {
+          name: 'appendToBody',
+          type: 'Boolean',
+          desc: '是否将 Popover 展示的内容父元素改成 body，而不是和 trigger 元素在同一父 DOM 节点处',
+          options: ['true', 'false'],
+          default: 'true',
+        }, {
+          name: 'popperCls',
+          type: 'Array',
+          desc: 'appendToBody 之后为 popover 的元素添加的 class 名，一般用于单独修改某些特定 popover 的样式',
+          options: ['-'],
+          default: '-',
+        }],
+        slotArgs: [{
+          name: 'content',
+          type: 'HTML',
+          desc: 'Popover 内嵌 HTML 文本，将覆盖 content 参数',
+          options: ['-'],
+          default: '-',
+        }]
       };
     },
   };
diff --git a/examples/view/router.js b/examples/view/router.js
index 91f5b1ba8..c95691492 100644
--- a/examples/view/router.js
+++ b/examples/view/router.js
@@ -222,7 +222,7 @@ const components = [
     component: PopoverPage,
     meta: {
       available: true,
-      docs: false,
+      docs: true,
       test: false,
     },
   }, {