improve demo iframes

docs/src/components/DemoFrame/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="demo-frame">
+    <div v-show="isLoading" class="demo-frame__loader">
+      …
+    </div>
+    <iframe
+      v-show="!isLoading"
+      v-resize
+      :src="`demos/${name}?${query}`"
+      style="background-color: transparent;"
+      width="100%"
+      height="0"
+      frameborder="0"
+      @load="onLoad"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+
+    mode: {
+      type: String,
+      default: 'vue',
+    },
+
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+
+    highlight: {
+      type: String,
+      default: null,
+    },
+
+    showSource: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  data() {
+    return {
+      isLoading: true,
+    }
+  },
+
+  computed: {
+    query() {
+      return `mode=${this.mode}&inline=${this.inline}&highlight=${this.highlight}&showSource=${this.showSource}`
+    },
+  },
+
+  methods: {
+    onLoad() {
+      this.isLoading = false
+      console.log('onLoad')
+    },
+  },
+
+  mounted() {
+    console.log('load')
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.demo-frame {
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  background-color: rgba($colorBlack, 0.05);
+
+  &__loader {
+    padding: 1rem;
+    text-align: center;
+  }
+}
+</style>

docs/src/main.js

@@ -5,6 +5,7 @@ import 'prismjs/components/prism-scss.js'
 import PortalVue from 'portal-vue'
 import iframeResize from 'iframe-resizer/js/iframeResizer'
 import App from '~/layouts/App'
+import DemoFrame from '~/components/DemoFrame'
 
 Prism.manual = true
 
@@ -33,5 +34,6 @@ export default function (Vue, { head }) {
 
   Vue.component('Layout', App)
   Vue.component('Demo', () => import(/* webpackChunkName: "demo" */ '~/components/Demo'))
+  Vue.component('DemoFrame', DemoFrame)
   Vue.component('LiveDemo', () => import(/* webpackChunkName: "live-demo" */ '~/components/LiveDemo'))
 }

docs/src/pages/index.vue

@@ -13,15 +13,7 @@
     </app-section>
 
     <app-section>
-      <iframe
+      <demo-frame name="Examples/CollaborativeEditing" inline />
-        v-resize
-        src="demos/Examples/CollaborativeEditing"
-        style="background-color: white; border-radius: 8px;"
-        width="100%"
-        height="400"
-        frameborder="0"
-      />
-      <demo name="Examples/CollaborativeEditing" :show-source="false" inline />
     </app-section>
 
     <app-section>

docs/src/templates/DemoPage/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo-page">
-    <demo :name="$context.name" :show-source="false" inline />
+    <demo :name="$context.name" v-bind="props" />
   </div>
 </template>
 
@@ -17,6 +17,36 @@ export default {
       ],
     }
   },
+
+  methods: {
+    fromString(value) {
+      if (typeof value !== 'string') {
+        return value
+      }
+
+      if (value.match(/^\d*(\.\d+)?$/)) {
+        return Number(value)
+      }
+
+      if (value === 'true') {
+        return true
+      }
+
+      if (value === 'false') {
+        return false
+      }
+
+      return value
+    },
+  },
+
+  computed: {
+    props() {
+      return Object.fromEntries(Object
+        .entries(this.$route.query)
+        .map(([key, value]) => [key, this.fromString(value)]))
+    },
+  },
 }
 </script>