improve demo resizing

docs/src/components/DemoFrame/index.vue

@@ -5,7 +5,7 @@
     </div>
     <iframe
       v-show="!isLoading"
-      v-resize
+      v-resize.quiet
       :src="`/demos/${name}?${query}`"
       style="background-color: transparent;"
       width="100%"

docs/src/main.js

@@ -23,8 +23,17 @@ export default function (Vue, { head }) {
   Vue.use(PortalVue)
 
   Vue.directive('resize', {
-    bind(el, { value = {} }) {
+    bind: (el, { value = {} }) => {
-      el.addEventListener('load', () => iframeResize(value, el))
+      el.addEventListener('load', () => {
+        iframeResize({
+          ...value,
+          messageCallback(messageData) {
+            if (messageData.message === 'resize') {
+              el.iFrameResizer.resize()
+            }
+          },
+        }, el)
+      })
     },
     unbind(el) {
       el.iFrameResizer.removeListeners()

docs/src/templates/DemoPage/index.vue

@@ -23,6 +23,26 @@ export default {
       ],
     }
   },
+
+  data() {
+    return {
+      resizeObserver: null,
+    }
+  },
+
+  mounted() {
+    this.resizeObserver = new window.ResizeObserver(() => {
+      if (window.parentIFrame) {
+        window.parentIFrame.sendMessage('resize')
+      }
+    })
+
+    this.resizeObserver.observe(document.body)
+  },
+
+  beforeDestroy() {
+    this.resizeObserver.unobserve(document.body)
+  },
 }
 </script>