feat: move live demo into iframes

components/OneDemo.vue

@@ -10,7 +10,9 @@
       width="calc(100% - 40px)"
       height="400px"
     >
+      <one-iframe global-style="body { margin: 0 !important; } .veui-layout { min-width: auto !important; }">
         <slot/>
+      </one-iframe>
     </browser-window>
     <slot v-else/>
   </section>
@@ -104,6 +106,7 @@ import toast from 'veui/plugins/toast'
 import { BrowserWindow } from 'vue-windows'
 import { getLocale } from '../common/i18n'
 import { play } from '../common/play'
+import OneIframe from './OneIframe'
 import OneEditLink from './OneEditLink'
 import OneRepl from './OneRepl'
 import 'veui-theme-dls-icons/copy'
@@ -119,6 +122,7 @@ export default {
     'veui-button': Button,
     'veui-icon': Icon,
     BrowserWindow,
+    OneIframe,
     OneEditLink,
     OneRepl
   },
@@ -223,12 +227,10 @@ Icon.register({
   padding 30px
 
   & >>> .style-module_body__14MV-
+    overflow hidden
     transform translate(0, 0)
     padding 0
 
-  & >>> .veui-layout
-    min-width auto
-
 .desc
   border 1px solid #eee
   padding 18px 20px

components/OneIframe.vue

@@ -0,0 +1,98 @@
+<template>
+<fragment>
+  <iframe
+    ref="iframe"
+    class="one-iframe"
+  />
+  <slot/>
+</fragment>
+</template>
+
+<script>
+import { Fragment } from 'vue-frag'
+
+export default {
+  name: 'one-iframe',
+  components: {
+    Fragment
+  },
+  props: {
+    globalStyle: String
+  },
+  watch: {
+    globalStyle (value) {
+      if (this.style) {
+        this.style.textContent = value
+      }
+    }
+  },
+  beforeDestroy () {
+    if (this.contents) {
+      this.contents.forEach(node => {
+        this.$refs.iframe.parentNode.appendChild(node)
+      })
+    }
+
+    if (this.mo) {
+      this.mo.disconnect()
+    }
+  },
+  mounted () {
+    const links = document.querySelectorAll('link[rel=stylesheet]')
+    const styles = document.querySelectorAll('style')
+    const { iframe } = this.$refs
+    const { body, head } = iframe.contentDocument
+    this.contents = this.$el.frag.filter(node => node !== iframe);
+    [...links, ...styles].forEach(node => {
+      const clone = node.cloneNode(true)
+      head.appendChild(clone)
+    })
+
+    this.contents.forEach(node => {
+      body.appendChild(node)
+    })
+
+    if (this.globalStyle) {
+      const style = document.createElement('style')
+      style.textContent = this.globalStyle
+      head.appendChild(style)
+      this.style = style
+    }
+
+    this.watchLiveStyle(head)
+  },
+  methods: {
+    watchLiveStyle (head) {
+      this.liveStyle = document.createComment('')
+      head.appendChild(this.liveStyle)
+
+      this.mo = new MutationObserver(mutations => {
+        for (const mutation of mutations) {
+          if (mutation.target === document.head) {
+            const style = (this.liveSource = [...mutation.addedNodes].find(
+              node => node.nodeName === 'STYLE' && node.dataset.cssscoper
+            ))
+            if (style) {
+              const liveStyle = style.cloneNode(true)
+              head.replaceChild(liveStyle, this.liveStyle)
+              this.liveStyle = liveStyle
+            }
+          } else if (mutation.target === this.liveSource) {
+            this.liveStyle.textContent = this.liveSource.textContent
+          }
+        }
+      })
+      this.mo.observe(document.head, { childList: true })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.one-iframe
+  display block
+  width 100%
+  height 100%
+  border none
+  overflow auto
+</style>

components/OneLive.vue

@@ -68,6 +68,7 @@
       'live-preview-browser': browser
     }"
   >
+    <one-iframe global-style="body { margin: 0 !important; } body > article { margin: 24px 36px; } .veui-layout { min-width: auto !important; }">
       <v-live-preview
         class="editor-preview"
         :code="transformedCode"
@@ -76,6 +77,7 @@
         @success="dismissError"
         @error="handleError"
       />
+    </one-iframe>
     <transition name="editor-error">
       <veui-alert
         v-if="error"
@@ -113,6 +115,7 @@ import { getLocale } from '../common/i18n'
 import { play } from '../common/play'
 import { transformLessCode } from '../common/transform'
 import { loadPref, savePref } from '../common/util'
+import OneIframe from './OneIframe'
 
 Vue.use(toast)
 
@@ -158,7 +161,8 @@ export default {
     'v-splitpanes': Splitpanes,
     'v-pane': Pane,
     'v-monaco-editor': MonacoEditor,
-    'v-live-preview': VueLivePreview
+    'v-live-preview': VueLivePreview,
+    OneIframe
   },
   directives: {
     tooltip

components/OneMenu.vue

@@ -4,12 +4,6 @@
   class="one-nav"
   :class="{ expanded }"
 >
-  <veui-menu
-    class="one-menu"
-    :items="menuItems"
-    :expanded.sync="menuExpanded"
-  >
-    <template #before>
   <header>
     <h2>VEUI</h2>
     <section class="desc">
@@ -47,7 +41,11 @@
       />
     </div>
   </header>
-    </template>
+  <veui-menu
+    class="one-menu"
+    :items="menuItems"
+    :expanded.sync="menuExpanded"
+  >
     <template #item-label="{ label, sub }">
       {{ label }}<small>{{ sub }}</small>
     </template>
@@ -147,31 +145,14 @@ export default {
   top 0
   bottom 0
   left 0
+  display flex
+  flex-direction column
   width 280px
   z-index 1
 
-.one-menu
-  width 100%
-  height 100%
-  background-color #fff
-
-  & >>> .veui-menu-tree-wrapper
-    display flex
-    flex-direction column
-    flex-grow 1
-    height 100%
-    overflow visible
-
-    .veui-menu-tree
-      overflow auto
-
-  & >>> .DocSearch
-    margin 0
-    border-radius 6px
-    font inherit
-
   header
     padding 32px 20px 20px
+    flex none
 
   h2
     display flex
@@ -191,10 +172,6 @@ export default {
       img
         display block
 
-  small
-    margin-left 8px
-    opacity 0.7
-
   .locale-swith
     display block
     margin-left 12px
@@ -215,6 +192,21 @@ export default {
     margin-right 12px
     flex-shrink 0
 
+.one-menu
+  flex 1 1 auto
+  width 100%
+  overflow auto
+  background-color #fff
+
+  & >>> .DocSearch
+    margin 0
+    border-radius 6px
+    font inherit
+
+  small
+    margin-left 8px
+    opacity 0.7
+
 .toggle
   display none
 

components/OneRepl.vue

@@ -121,9 +121,6 @@ Icon.register({
   flex 1 1 auto
   height calc(100% - 48px)
 
-  & >>> .live-preview
-    padding 24px 36px
-
   & >>> .VueLive-error
     display none
 

one/docs/demo/layout/sticky.vue

@@ -4,10 +4,7 @@
     Header
   </veui-header>
   <veui-layout>
-    <veui-sidebar
+    <veui-sidebar sticky>
-      sticky
-      style="max-height: 320px;"
-    >
       <div class="center full">
         Sidebar
       </div>

package-lock.json

@@ -82,6 +82,7 @@
         "veui-theme-dls": "^2.6.4",
         "veui-theme-dls-icons": "^2.6.4",
         "vue-awesome": "^4.5.0",
+        "vue-frag": "^1.4.0",
         "vue-i18n": "^8.16.0",
         "vue-live": "^1.17.2",
         "vue-windows": "^0.2.4"
@@ -22221,6 +22222,18 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/vue-frag": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/vue-frag/-/vue-frag-1.4.0.tgz",
+      "integrity": "sha512-S3LfATqRwSMR6O8mf92wKF3y2E/Gs/3MFJXW4CozMOLUeOopNUlkcYuhVLagw7fkNmn/Pyb1zfRY5UCwU+X6Gw==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/privatenumber/vue-frag?sponsor=1"
+      },
+      "peerDependencies": {
+        "vue": "^2.6.0"
+      }
+    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -41338,6 +41351,13 @@
         }
       }
     },
+    "vue-frag": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/vue-frag/-/vue-frag-1.4.0.tgz",
+      "integrity": "sha512-S3LfATqRwSMR6O8mf92wKF3y2E/Gs/3MFJXW4CozMOLUeOopNUlkcYuhVLagw7fkNmn/Pyb1zfRY5UCwU+X6Gw==",
+      "dev": true,
+      "requires": {}
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

package.json

@@ -91,6 +91,7 @@
     "veui-theme-dls": "^2.6.4",
     "veui-theme-dls-icons": "^2.6.4",
     "vue-awesome": "^4.5.0",
+    "vue-frag": "^1.4.0",
     "vue-i18n": "^8.16.0",
     "vue-live": "^1.17.2",
     "vue-windows": "^0.2.4"