From 138cd75b3ca728cbd2dbd000392ed52ce114d0f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 2 Feb 2021 11:37:24 +0100
Subject: [PATCH] improve demo resizing

---
 docs/src/components/DemoFrame/index.vue |  2 +-
 docs/src/main.js                        | 13 +++++++++++--
 docs/src/templates/DemoPage/index.vue   | 20 ++++++++++++++++++++
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/docs/src/components/DemoFrame/index.vue b/docs/src/components/DemoFrame/index.vue
index 52df9a59..6ed9737b 100644
--- a/docs/src/components/DemoFrame/index.vue
+++ b/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%"
diff --git a/docs/src/main.js b/docs/src/main.js
index 00cace32..5b9f212b 100644
--- a/docs/src/main.js
+++ b/docs/src/main.js
@@ -23,8 +23,17 @@ export default function (Vue, { head }) {
   Vue.use(PortalVue)
 
   Vue.directive('resize', {
-    bind(el, { value = {} }) {
-      el.addEventListener('load', () => iframeResize(value, el))
+    bind: (el, { value = {} }) => {
+      el.addEventListener('load', () => {
+        iframeResize({
+          ...value,
+          messageCallback(messageData) {
+            if (messageData.message === 'resize') {
+              el.iFrameResizer.resize()
+            }
+          },
+        }, el)
+      })
     },
     unbind(el) {
       el.iFrameResizer.removeListeners()
diff --git a/docs/src/templates/DemoPage/index.vue b/docs/src/templates/DemoPage/index.vue
index a04a86cc..919a0c9b 100644
--- a/docs/src/templates/DemoPage/index.vue
+++ b/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>