From 0598bc7921a9e20a61086063eec9ec1a33d77097 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Fri, 27 Sep 2019 22:28:25 +0800
Subject: [PATCH] doc(popover): refactor popover doc pages

---
 demo/debugComponents/popoverDebug.vue         |   6 +
 .../components/popover/enUS/basic.md          |  11 ++
 .../components/popover/enUS/delay.md          |  11 ++
 .../components/popover/enUS/event.md          |  78 ++++++++++
 .../components/popover/enUS/index.md          |  11 ++
 .../components/popover/enUS/noArrow.md        |  11 ++
 .../components/popover/enUS/placement.md      | 139 ++++++++++++++++++
 .../components/popover/enUS/rawContent.md     |  22 +++
 .../components/popover/enUS/trigger.md        |  47 ++++++
 .../components/popover/enUS/width.md          |  11 ++
 .../components/popover/index.entry            |   0
 .../components/popover/zhCN/index.md          |   0
 .../components/tagDemo/basicUsage.demo.vue    |  70 ---------
 .../components/tagDemo/index.vue              |  32 ----
 demo/header.vue                               |   8 +-
 demo/init.js                                  |  10 +-
 package.json                                  |   2 +-
 17 files changed, 359 insertions(+), 110 deletions(-)
 create mode 100644 demo/documentation/components/popover/enUS/basic.md
 create mode 100644 demo/documentation/components/popover/enUS/delay.md
 create mode 100644 demo/documentation/components/popover/enUS/event.md
 create mode 100644 demo/documentation/components/popover/enUS/index.md
 create mode 100644 demo/documentation/components/popover/enUS/noArrow.md
 create mode 100644 demo/documentation/components/popover/enUS/placement.md
 create mode 100644 demo/documentation/components/popover/enUS/rawContent.md
 create mode 100644 demo/documentation/components/popover/enUS/trigger.md
 create mode 100644 demo/documentation/components/popover/enUS/width.md
 create mode 100644 demo/documentation/components/popover/index.entry
 create mode 100644 demo/documentation/components/popover/zhCN/index.md
 delete mode 100644 demo/documentation/components/tagDemo/basicUsage.demo.vue
 delete mode 100644 demo/documentation/components/tagDemo/index.vue

diff --git a/demo/debugComponents/popoverDebug.vue b/demo/debugComponents/popoverDebug.vue
index 2231c485f..2bcf85be6 100644
--- a/demo/debugComponents/popoverDebug.vue
+++ b/demo/debugComponents/popoverDebug.vue
@@ -20,6 +20,12 @@
         </template>
         <span>Out Out Out</span>
       </n-popover>
+      <n-tooltip arrow>
+        <template v-slot:activator>
+          <span>LongLongLongLong</span>
+        </template>
+        <span>LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong</span>
+      </n-tooltip>
     </div>
   </div>
 </template>
diff --git a/demo/documentation/components/popover/enUS/basic.md b/demo/documentation/components/popover/enUS/basic.md
new file mode 100644
index 000000000..9a4003f5b
--- /dev/null
+++ b/demo/documentation/components/popover/enUS/basic.md
@@ -0,0 +1,11 @@
+# Basic
+```html
+<n-popover>
+  <template v-slot:activator>
+    <n-button style="margin:0;">
+      hover
+    </n-button>
+  </template>
+  <span>Light My Fire</span>
+</n-popover>
+```
\ No newline at end of file
diff --git a/demo/documentation/components/popover/enUS/delay.md b/demo/documentation/components/popover/enUS/delay.md
new file mode 100644
index 000000000..7772cda77
--- /dev/null
+++ b/demo/documentation/components/popover/enUS/delay.md
@@ -0,0 +1,11 @@
+# Delay
+```html
+<n-popover :delay="500" :duration="500">
+  <template v-slot:activator>
+    <n-button style="margin:0;">
+      hover
+    </n-button>
+  </template>
+  <span>Light My Fire</span>
+</n-popover>
+```
diff --git a/demo/documentation/components/popover/enUS/event.md b/demo/documentation/components/popover/enUS/event.md
new file mode 100644
index 000000000..b9064c0b2
--- /dev/null
+++ b/demo/documentation/components/popover/enUS/event.md
@@ -0,0 +1,78 @@
+# Event
+```html
+<n-popover
+  placement="bottom"
+  :width="200"
+  trigger="hover"
+  style="margin-right: 12px;"
+  @show="handleShow"
+  @hide="handleHide"
+>
+  <template v-slot:activator>
+    <n-button>
+      California Girls(Hover)
+    </n-button>
+  </template>
+  <span>
+    I wish they all could be California girls
+  </span>
+</n-popover>
+<n-popover
+  placement="bottom"
+  :width="200"
+  trigger="click"
+  style="margin-right: 12px;"
+  @show="handleShow"
+  @hide="handleHide"
+>
+  <template v-slot:activator>
+    <n-button>
+      California Girls(Click)
+    </n-button>
+  </template>
+  <span>
+    I wish they all could be California girls
+  </span>
+</n-popover>
+<n-popover
+  v-model="showPopover"
+  placement="bottom"
+  :width="200"
+  trigger="manual"
+  @show="handleShow"
+  @hide="handleHide"
+>
+  <template v-slot:activator>
+    <n-button @click="showPopover = !showPopover">
+      California Girls(Manual)
+    </n-button>
+  </template>
+  <span>
+    I wish they all could be California girls
+  </span>
+</n-popover>
+```
+
+```js
+export default {
+  data() {
+    return {
+      showPopover: false
+    };
+  },
+  methods: {
+    handleShow() {
+      this.$NMessage.success("show popover");
+    },
+    handleHide() {
+      this.$NMessage.success("hide popover");
+    }
+  }
+};
+```
+
+```css
+.n-button {
+  margin: 0 12px 8px 0;
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/popover/enUS/index.md b/demo/documentation/components/popover/enUS/index.md
new file mode 100644
index 000000000..e4c54dac9
--- /dev/null
+++ b/demo/documentation/components/popover/enUS/index.md
@@ -0,0 +1,11 @@
+# Popover
+```demo
+basic
+delay
+no-arrow
+trigger
+event
+placement
+raw-content
+width
+```
\ No newline at end of file
diff --git a/demo/documentation/components/popover/enUS/noArrow.md b/demo/documentation/components/popover/enUS/noArrow.md
new file mode 100644
index 000000000..9815afd92
--- /dev/null
+++ b/demo/documentation/components/popover/enUS/noArrow.md
@@ -0,0 +1,11 @@
+# No Arrow
+```html
+<n-popover :arrow="false">
+  <template v-slot:activator>
+    <n-button style="margin:0;">
+      hover
+    </n-button>
+  </template>
+  <span>Light My Fire</span>
+</n-popover>
+```
\ No newline at end of file
diff --git a/demo/documentation/components/popover/enUS/placement.md b/demo/documentation/components/popover/enUS/placement.md
new file mode 100644
index 000000000..129034825
--- /dev/null
+++ b/demo/documentation/components/popover/enUS/placement.md
@@ -0,0 +1,139 @@
+# Placement
+```html
+<div class="popover-grid">
+  <n-popover placement="top-start" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 1 / 2 / 2 / 3;">
+        Top Start
+      </n-button>
+    </template>
+    <div class="large-text">
+      Oops!
+    </div>
+  </n-popover>
+  <n-popover placement="top" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 1 / 3 / 2 / 4;">
+        Top
+      </n-button>
+    </template>
+    <div class="large-text">
+      Oops!
+    </div>
+  </n-popover>
+  <n-popover placement="top-end" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 1 / 4/ 2 / 5;">
+        Top End
+      </n-button>
+    </template>
+    <div class="large-text">
+      Oops!
+    </div>
+  </n-popover>
+  <n-popover placement="left-start" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 2 / 1 / 3 / 2;">
+        Left Start
+      </n-button>
+    </template>
+    <div class="large-text">
+      Oops!
+    </div>
+  </n-popover>
+  <n-popover placement="left" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 3 / 1 / 4 / 2;">
+        Left
+      </n-button>
+    </template>
+    <div class="large-text">
+      Oops!
+    </div>
+  </n-popover>
+  <n-popover placement="left-end" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 4 / 1 / 5 / 2;">
+        Left End
+      </n-button>
+    </template>
+    <div class="large-text">
+      Oops!
+    </div>
+  </n-popover>
+  <n-popover placement="right-start" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 2 / 5 / 3 / 6;">
+        Right Start
+      </n-button>
+    </template>
+    <div class="large-text">
+      Oops!
+    </div>
+  </n-popover>
+  <n-popover placement="right" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 3 / 5 / 4 / 6;">
+        Right
+      </n-button>
+    </template>
+    <div class="large-text">
+      Oops!
+    </div>
+  </n-popover>
+  <n-popover placement="right-end" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 4 / 5 / 5 / 6;">
+        Right End
+      </n-button>
+    </template>
+    <div class="large-text">
+      Oops!
+    </div>
+  </n-popover>
+  <n-popover placement="bottom-start" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 5 / 2 / 6 / 3;">
+        Bottom Start
+      </n-button>
+    </template>
+    <div class="large-text">
+      Oops!
+    </div>
+  </n-popover>
+  <n-popover placement="bottom" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 5 / 3 / 6 / 4;">
+        Bottom
+      </n-button>
+    </template>
+    <div class="large-text">
+      Oops!
+    </div>
+  </n-popover>
+  <n-popover placement="bottom-end" trigger="click">
+    <template v-slot:activator>
+      <n-button size="small" style="grid-area: 5 / 4 / 6 / 5;">
+        Bottom End
+      </n-button>
+    </template>
+    <div class="large-text">
+      Oops!
+    </div>
+  </n-popover>
+</div>
+```
+
+```css
+.popover-grid {
+    display: grid;
+    grid-template-columns: auto auto auto auto auto;
+    grid-gap: 12px;
+    justify-content: center;
+    align-items: center;
+}
+
+.large-text {
+  font-size: 48px;
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/popover/enUS/rawContent.md b/demo/documentation/components/popover/enUS/rawContent.md
new file mode 100644
index 000000000..573d2006a
--- /dev/null
+++ b/demo/documentation/components/popover/enUS/rawContent.md
@@ -0,0 +1,22 @@
+# Raw Content
+```html
+<n-popover raw :arrow="false">
+  <template v-slot:activator>
+    <n-button style="margin:0;">
+      hover
+    </n-button>
+  </template>
+  <div
+    style="width: 100px; height: 100px; background-color: red; transform-origin: inherit;"
+  >
+    Who kicks a hole in the sky so the heaven cry over me.
+  </div>
+</n-popover>
+```
+```js
+export default {
+  data() {
+    return {}
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/popover/enUS/trigger.md b/demo/documentation/components/popover/enUS/trigger.md
new file mode 100644
index 000000000..fbc0d48fa
--- /dev/null
+++ b/demo/documentation/components/popover/enUS/trigger.md
@@ -0,0 +1,47 @@
+# Trigger
+```html
+<n-popover placement="bottom" trigger="hover" style="margin-right: 12px;">
+  <template v-slot:activator>
+    <n-button>
+      California Girls(Hover)
+    </n-button>
+  </template>
+  <span>
+    I wish they all could be California girls
+  </span>
+</n-popover>
+<n-popover v-model="showPopover" placement="bottom" trigger="manual">
+  <template v-slot:activator>
+    <n-button @click="showPopover = !showPopover">
+      California Girls(Manual)
+    </n-button>
+  </template>
+  <span>
+    I wish they all could be California girls
+  </span>
+</n-popover>
+<n-popover placement="bottom" trigger="click" style="margin-right: 12px;">
+  <template v-slot:activator>
+    <n-button>
+      California Girls(Click)
+    </n-button>
+  </template>
+  <span>
+    I wish they all could be California girls
+  </span>
+</n-popover>
+```
+```js
+export default {
+  data() {
+    return {
+      showPopover: false
+    };
+  }
+};
+```
+```css
+.n-button {
+  margin: 0 12px 8px 0;
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/popover/enUS/width.md b/demo/documentation/components/popover/enUS/width.md
new file mode 100644
index 000000000..fdb9cde4e
--- /dev/null
+++ b/demo/documentation/components/popover/enUS/width.md
@@ -0,0 +1,11 @@
+# Width
+```html
+<n-popover :width="500">
+  <template v-slot:activator>
+    <n-button style="margin:0;">
+      hover
+    </n-button>
+  </template>
+  <span>Light My Fire</span>
+</n-popover>
+```
\ No newline at end of file
diff --git a/demo/documentation/components/popover/index.entry b/demo/documentation/components/popover/index.entry
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/popover/zhCN/index.md b/demo/documentation/components/popover/zhCN/index.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/tagDemo/basicUsage.demo.vue b/demo/documentation/components/tagDemo/basicUsage.demo.vue
deleted file mode 100644
index 6c609717b..000000000
--- a/demo/documentation/components/tagDemo/basicUsage.demo.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Basic Usage
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-tag>Real Love</n-tag>
-      <n-tag
-        type="success"
-        closable
-        @close="handleClose"
-      >
-        Yes It Is
-      </n-tag>
-      <n-tag
-        type="warning"
-        closable
-        @close="handleClose"
-      >
-        I'm Down
-      </n-tag>
-      <n-tag
-        type="error"
-        closable
-        @close="handleClose"
-      >
-        Yesterday
-      </n-tag>
-      <n-tag
-        type="info"
-        closable
-        @close="handleClose"
-      >
-        I'm Looking Through You
-      </n-tag>
-      <!--EXAMPLE_END-->
-    </div>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-    }
-  },
-  methods: {
-    handleClose () {
-      this.$NMessage.info('tag close')
-    }
-  }
-}
-</script>
-
-<!--STYLE_EXAMPLE_START-->
-<style
-  scoped
->
-.n-tag {
-  margin-right: 12px;
-}
-</style>
-<!--STYLE_EXAMPLE_END-->
diff --git a/demo/documentation/components/tagDemo/index.vue b/demo/documentation/components/tagDemo/index.vue
deleted file mode 100644
index fa6c8f775..000000000
--- a/demo/documentation/components/tagDemo/index.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
-    <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        Tag / n-tag
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <basic-usage />
-    </div>
-  </div>
-</template>
-
-<script>
-import basicUsage from './basicUsage.demo.vue'
-
-export default {
-  components: {
-    basicUsage
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-  }
-}
-</script>
diff --git a/demo/header.vue b/demo/header.vue
index b886e2a77..f99d420d0 100644
--- a/demo/header.vue
+++ b/demo/header.vue
@@ -19,9 +19,10 @@
     <div />
     <div class="theme-picker">
       <n-select
-        v-model="NApp.$parent.theme"
+        v-model="theme"
         size="small"
         :options="options"
+        @change="handleThemeChange"
       />
     </div>
     <div class="lang-picker">
@@ -78,6 +79,9 @@ export default {
     }
   },
   methods: {
+    handleThemeChange (theme) {
+      this.NApp.$parent.theme = theme
+    },
     handleLangInput (lang) {
       this.$emit('lang-change', lang)
     }
@@ -88,7 +92,7 @@ export default {
 <style lang="scss" scoped>
 .nav {
   display: grid;
-  grid-template-columns: 272px 1fr 128px 160px;
+  grid-template-columns: 272px 1fr 96px 140px;
   grid-template-rows: 64px;
   align-items: center;
 }
diff --git a/demo/init.js b/demo/init.js
index b1344b88c..2ab3232d8 100644
--- a/demo/init.js
+++ b/demo/init.js
@@ -25,7 +25,7 @@ import modalDemo from './documentation/components/modalDemo'
 import nimbusFormCardDemo from './documentation/components/nimbusFormCardDemo'
 import messageDemo from './documentation/components/messageDemo'
 import tooltipDemo from './documentation/components/tooltipDemo'
-import popoverDemo from './documentation/components/popoverDemo'
+import popover from './documentation/components/popover'
 import alertDemo from './documentation/components/alertDemo'
 import datePickerDemo from './documentation/components/datePickerDemo'
 import inputNumberDemo from './documentation/components/inputNumberDemo'
@@ -46,7 +46,7 @@ import nimbusConfirmCardDemo from './documentation/components/nimbusConfirmCardD
 import paginationDemo from './documentation/components/paginationDemo'
 import startPage from './documentation/components/startPage'
 import collapseDemo from './documentation/components/collapseDemo'
-import tagDemo from './documentation/components/tag'
+import tag from './documentation/components/tag'
 import timelineDemo from './documentation/components/timelineDemo'
 import progressDemo from './documentation/components/progressDemo'
 import dividerDemo from './documentation/components/dividerDemo'
@@ -105,7 +105,7 @@ const routes = [
     component: homeDemo
   },
   {
-    path: '/n-popover-debug',
+    path: '/:lang/:theme/n-popover-debug',
     component: popoverDebug
   },
   {
@@ -138,7 +138,7 @@ const routes = [
       { path: '/n-nimbus-form-card', component: nimbusFormCardDemo },
       { path: '/n-message', component: messageDemo },
       { path: '/n-tooltip', component: tooltipDemo },
-      { path: '/n-popover', component: popoverDemo },
+      { path: '/n-popover', component: popover },
       { path: '/n-notification', component: notificationDemo },
       { path: '/n-nimbus-confirm-card', component: nimbusConfirmCardDemo },
       { path: '/n-pagination', component: paginationDemo },
@@ -158,7 +158,7 @@ const routes = [
       { path: '/n-steps', component: stepsDemo },
       { path: '/n-collapse', component: collapseDemo },
       { path: '/n-progress', component: progressDemo },
-      { path: '/n-tag', component: tagDemo },
+      { path: '/n-tag', component: tag },
       { path: '/n-timeline', component: timelineDemo },
       { path: '/n-scrollbar-debug2', component: scrollbarDebug2 },
       { path: '/n-back-top', component: backTopDemo },
diff --git a/package.json b/package.json
index 9a4ede7d4..05b966aee 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "",
   "main": "index.js",
   "scripts": {