From 28262b5ee956f21568ee741385e10caa33f56467 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sat, 12 Oct 2019 15:46:02 +0800
Subject: [PATCH] doc(app): refactor app demo

---
 .../components/app/enUS/index.md              |   7 +
 .../components/app/enUS/namespace.md          | 118 +++++++++++++++
 .../components/app/enUS/theme.md              |  22 +++
 demo/documentation/components/app/index.entry |   0
 .../components/app/zhCN/index.md              |   0
 .../components/appDemo/index.vue              |  32 -----
 .../components/appDemo/scaffold.demo.vue      | 136 ------------------
 demo/init.js                                  |   4 +-
 packages/common/Modal/src/Modal.vue           |   2 +
 9 files changed, 151 insertions(+), 170 deletions(-)
 create mode 100644 demo/documentation/components/app/enUS/index.md
 create mode 100644 demo/documentation/components/app/enUS/namespace.md
 create mode 100644 demo/documentation/components/app/enUS/theme.md
 create mode 100644 demo/documentation/components/app/index.entry
 create mode 100644 demo/documentation/components/app/zhCN/index.md
 delete mode 100644 demo/documentation/components/appDemo/index.vue
 delete mode 100644 demo/documentation/components/appDemo/scaffold.demo.vue

diff --git a/demo/documentation/components/app/enUS/index.md b/demo/documentation/components/app/enUS/index.md
new file mode 100644
index 000000000..c5ad68064
--- /dev/null
+++ b/demo/documentation/components/app/enUS/index.md
@@ -0,0 +1,7 @@
+# App
+App is using to set global theme and set namespace for components (detached parts).
+## Demos
+```demo
+theme
+namespace
+```
\ No newline at end of file
diff --git a/demo/documentation/components/app/enUS/namespace.md b/demo/documentation/components/app/enUS/namespace.md
new file mode 100644
index 000000000..e2c79ef4e
--- /dev/null
+++ b/demo/documentation/components/app/enUS/namespace.md
@@ -0,0 +1,118 @@
+# Namespace
+Some parts of component are detached to `document.body`. If you want to add a class to those detached elements, use `namespace` prop of app. Open devtools to see detached content.
+```html
+<n-app :namespace="ns">
+  <n-button
+    @click="isActive = true"
+  >
+    Activate Component with Detached Content
+  </n-button>
+  <n-modal v-model="isActive">
+    <n-nimbus-form-card
+      width="1032"
+      title="Parklife"
+      :deactivate="() => isActive = false"
+    >
+      <template v-slot:header>
+        v-slot:header
+      </template>
+      <template v-slot:footer>
+        v-slot:footer
+      </template>
+      <template v-slot:content>
+        <n-date-picker
+          v-model="time"
+          type="datetime"
+        />
+        <n-select
+          v-model="selectedValue"
+          size="small"
+          placeholder="Please Select Type"
+          :items="items"
+          style="flex-grow: 1;"
+        />
+        <n-tooltip
+          placement="bottom"
+          trigger="click"
+          style="margin-right: 12px;"
+        >
+          <template v-slot:activator>
+            <n-button style="margin: 0;">
+              California Girls(Click)
+            </n-button>
+          </template>
+          <span>
+            I wish they all could be California girls
+          </span>
+        </n-tooltip>
+      </template>
+    </n-nimbus-form-card>
+  </n-modal>
+</n-app>
+```
+```js
+export default {
+  data () {
+    return {
+      ns: 'custom-app-namespace1',
+      isActive: false,
+      time: null,
+      selectedValue: null,
+      items: [
+        {
+          label: "Everybody's Got Something to Hide Except Me and My Monkey",
+          value: 'song0'
+        },
+        {
+          label: 'Drive My Car',
+          value: 'song1'
+        },
+        {
+          label: 'Norwegian Wood',
+          value: 'song2'
+        },
+        {
+          label: "You Won't See",
+          value: 'song3'
+        },
+        {
+          label: 'Nowhere Man',
+          value: 'song4'
+        },
+        {
+          label: 'Think For Yourseld',
+          value: 'song5'
+        },
+        {
+          label: 'The Word',
+          value: 'song6'
+        },
+        {
+          label: 'Michelle',
+          value: 'song7'
+        },
+        {
+          label: 'What goes on',
+          value: 'song8'
+        },
+        {
+          label: 'Girl',
+          value: 'song9'
+        },
+        {
+          label: "I'm looking through you",
+          value: 'song10'
+        },
+        {
+          label: 'In My Life',
+          value: 'song11'
+        },
+        {
+          label: 'Wait',
+          value: 'song12'
+        }
+      ]
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/app/enUS/theme.md b/demo/documentation/components/app/enUS/theme.md
new file mode 100644
index 000000000..f5d52ad8d
--- /dev/null
+++ b/demo/documentation/components/app/enUS/theme.md
@@ -0,0 +1,22 @@
+# Theme
+Set theme of inner components of app.
+```html
+<n-app :theme="theme">
+  <n-button @click="theme = 'dark'">Dark</n-button>
+  <n-button @click="theme = 'light'">Light</n-button>
+</n-app>
+```
+```js
+export default {
+  data () {
+    return {
+      theme: 'dark'
+    }
+  }
+}
+```
+```css
+.n-button {
+  margin: 0 12px 8px 0;
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/app/index.entry b/demo/documentation/components/app/index.entry
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/app/zhCN/index.md b/demo/documentation/components/app/zhCN/index.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/appDemo/index.vue b/demo/documentation/components/appDemo/index.vue
deleted file mode 100644
index 6a8482475..000000000
--- a/demo/documentation/components/appDemo/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">
-        scaffold
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <scaffold />
-    </div>
-  </div>
-</template>
-
-<script>
-import scaffold from './scaffold.demo.vue'
-
-export default {
-  components: {
-    scaffold
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-  }
-}
-</script>
diff --git a/demo/documentation/components/appDemo/scaffold.demo.vue b/demo/documentation/components/appDemo/scaffold.demo.vue
deleted file mode 100644
index 71869672e..000000000
--- a/demo/documentation/components/appDemo/scaffold.demo.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Scaffold
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-app :namespace="ns">
-        <n-modal v-model="isActive">
-          <template v-slot:activator>
-            <n-button
-              size="small"
-              @click="isActive = true"
-            >
-              Parklife
-            </n-button>
-          </template>
-          <n-nimbus-form-card
-            width="1032"
-            title="Parklife"
-            :deactivate="() => isActive = false"
-          >
-            <template v-slot:header>
-              v-slot:header
-            </template>
-            <template v-slot:footer>
-              v-slot:footer
-            </template>
-            <template v-slot:content>
-              <n-date-picker
-                v-model="time"
-                type="datetime"
-              />
-              <n-select
-                v-model="selectedValue"
-                size="small"
-                placeholder="Please Select Type"
-                :items="items"
-                style="flex-grow: 1;"
-              />
-              <n-tooltip
-                placement="bottom"
-                trigger="click"
-                style="margin-right: 12px;"
-              >
-                <template v-slot:activator>
-                  <n-button style="margin: 0;">
-                    California Girls(Click)
-                  </n-button>
-                </template>
-                <span>
-                  I wish they all could be California girls
-                </span>
-              </n-tooltip>
-            </template>
-          </n-nimbus-form-card>
-        </n-modal>
-      </n-app>
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect"><n-button @click="ns='custom-app-namespace1'">custom-app-namespace1</n-button><n-button @click="ns='custom-app-namespace2'">custom-app-namespace2</n-button></pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      ns: 'custom-app-namespace1',
-      isActive: false,
-      time: null,
-      selectedValue: null,
-      items: [
-        {
-          label: "Everybody's Got Something to Hide Except Me and My Monkey",
-          value: 'song0'
-        },
-        {
-          label: 'Drive My Car',
-          value: 'song1'
-        },
-        {
-          label: 'Norwegian Wood',
-          value: 'song2'
-        },
-        {
-          label: "You Won't See",
-          value: 'song3'
-        },
-        {
-          label: 'Nowhere Man',
-          value: 'song4'
-        },
-        {
-          label: 'Think For Yourseld',
-          value: 'song5'
-        },
-        {
-          label: 'The Word',
-          value: 'song6'
-        },
-        {
-          label: 'Michelle',
-          value: 'song7'
-        },
-        {
-          label: 'What goes on',
-          value: 'song8'
-        },
-        {
-          label: 'Girl',
-          value: 'song9'
-        },
-        {
-          label: "I'm looking through you",
-          value: 'song10'
-        },
-        {
-          label: 'In My Life',
-          value: 'song11'
-        },
-        {
-          label: 'Wait',
-          value: 'song12'
-        }
-      ]
-    }
-  }
-}
-</script>
diff --git a/demo/init.js b/demo/init.js
index 104cdf6a8..c5fffd786 100644
--- a/demo/init.js
+++ b/demo/init.js
@@ -58,7 +58,7 @@ import dividerDemo from './documentation/components/dividerDemo'
 import popconfirmDemo from './documentation/components/popconfirmDemo'
 import anchorDemo from './documentation/components/anchorDemo'
 import popselectDemo from './documentation/components/popselectDemo'
-import appDemo from './documentation/components/appDemo'
+import app from './documentation/components/app'
 import advanceTableDemos from './documentation/components/advanceTableDemos'
 import transferDemo from './documentation/components/transferDemo'
 import spinDemo from './documentation/components/spinDemo'
@@ -177,7 +177,7 @@ const routes = [
       { path: '/n-anchor', component: anchorDemo },
       { path: '/n-dropdown', component: dropdownDemo },
       { path: '/n-popselect', component: popselectDemo },
-      { path: '/n-app', component: appDemo },
+      { path: '/n-app', component: app },
       { path: '/n-cancel-mark-debug', component: cancelMarkDebug },
       { path: '/n-transfer', component: transferDemo },
       { path: '/n-spin', component: spinDemo },
diff --git a/packages/common/Modal/src/Modal.vue b/packages/common/Modal/src/Modal.vue
index 028880cc3..4ba669933 100644
--- a/packages/common/Modal/src/Modal.vue
+++ b/packages/common/Modal/src/Modal.vue
@@ -3,10 +3,12 @@ import NModalOverlay from './Overlay'
 import NModalContent from './ModalContent'
 import NBasePortal from '../../../base/Protal'
 import zindexable from '../../../mixins/zindexable'
+import withapp from '../../../mixins/withapp'
 
 export default {
   name: 'NModal',
   mixins: [
+    withapp,
     zindexable
   ],
   props: {