@open-iframe-resizer/vue 2.0.0 → 2.2.0

package/README.md

@@ -0,0 +1,34 @@
+# Open Iframe Resizer Vue
+
+## Overview
+
+`iframe-resizer` is a modern, lightweight library for resizing iframes dynamically. It is shipped under the MIT license, making it usable in commercial projects.
+
+If you found this plugin helpful, please consider starring the repository!
+
+## Getting Started
+
+
+Install the package:
+```bash
+npm install @vvopen-iframe-resizer/vue
+```
+
+Wrap your iframes with it to resize them automatically:
+```js
+import { createApp } from "vue";
+import { IframeResizer } from "@vvopen-iframe-resizer/vue";
+
+const app = createApp({
+  components: {
+    IframeResizer,
+  },
+  template: `
+      <div>
+        <IframeResizer src=""https://github.com" />
+      </div>
+    `,
+}).mount("#app");
+```
+
+

package/dist/open-iframe-resizer-vue.es.js

@@ -1,19 +1,19 @@
-import { defineComponent as k, ref as O, onMounted as M, onBeforeUnmount as B, createElementBlock as P, openBlock as D, mergeProps as A } from "vue";
-const v = () => typeof window < "u", H = () => {
+import { defineComponent as P, ref as D, onMounted as A, onBeforeUnmount as H, createElementBlock as _, openBlock as T, mergeProps as W } from "vue";
+const S = () => typeof window < "u", x = () => {
   try {
     return window.self !== window.top;
   } catch {
     return !0;
   }
-}, h = (e) => e instanceof HTMLIFrameElement, _ = (e) => {
+}, w = (e) => e instanceof HTMLIFrameElement, p = (e) => {
   window.document.readyState === "complete" ? e() : window.addEventListener("load", e, { once: !0 });
-}, T = (e, t) => {
+}, C = (e, t) => {
   t(), e.addEventListener("load", t, { once: !0 });
-}, x = (e, t) => {
+}, F = (e, t) => {
   const n = e.contentWindow?.document.readyState === "complete";
   return e.src !== "about:blank" && e.contentWindow?.location.href !== "about:blank" && n ? t() : e.addEventListener("load", t, { once: !0 });
-}, C = () => ({ offsetSize: 0, checkOrigin: !0, enableLegacyLibSupport: !1 });
-async function W(e) {
+}, $ = () => ({ offsetSize: 0, checkOrigin: !0, enableLegacyLibSupport: !1 });
+async function N(e) {
   try {
     return e.contentDocument?.URL === "about:blank" ? new Promise((t) => {
       e.addEventListener("load", () => t(e.contentDocument !== null), { once: !0 });
@@ -22,7 +22,7 @@ async function W(e) {
     return !1;
   }
 }
-const F = (e) => {
+const U = (e) => {
   try {
     const t = new URL(e.src).origin;
     if (t !== "about:blank")
@@ -30,180 +30,204 @@ const F = (e) => {
   } catch {
   }
   return null;
-}, $ = (e) => (Object.keys(e).forEach((t) => {
+}, j = (e) => (Object.keys(e).forEach((t) => {
   e[t] === void 0 && delete e[t];
-}), e), S = (e) => {
+}), e), v = (e) => {
   const { height: t, width: n } = e.getBoundingClientRect();
   return { height: Math.ceil(t), width: Math.ceil(n) };
-}, m = (e, t) => e ? t ? e.querySelector(t) : e.documentElement : null, E = (e, t) => {
+}, f = (e, t) => e ? t ? e.querySelector(t) : e.documentElement : null, E = (e, t) => {
   e && (t.bodyPadding && (e.body.style.padding = t.bodyPadding), t.bodyMargin && (e.body.style.margin = t.bodyMargin));
-}, y = (e) => e <= 100 ? 100 : e <= 120 ? 1e3 : 1e4, N = () => "[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false";
-function U(e) {
+}, y = (e) => e <= 100 ? 100 : e <= 120 ? 1e3 : 1e4, q = () => "[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false";
+function G(e) {
   if (typeof e.data != "string" || !e.data.startsWith("[iFrameSizer]") || !e.data.endsWith("mutationObserver") && !e.data.endsWith("resizeObserver"))
     return null;
   const [t, n] = e.data.split(":"), r = +n;
   return r > 0 ? r : null;
 }
-const w = X();
-let f = [];
-const j = async (e, t) => {
-  if (!v())
+const z = ee();
+let m = [];
+const J = async (e, t) => {
+  if (!S())
     return [];
-  const n = { ...C(), ...$(e ?? {}) }, r = q(t), i = G(n, r);
+  const n = { ...$(), ...j(e ?? {}) }, r = K(t), i = Q(n, r);
   return Promise.all(
-    r.map(async (a) => {
-      const o = {
-        iframe: a,
+    r.map(async (o) => {
+      const s = {
+        iframe: o,
         settings: n,
         interactionState: { isHovered: !1 },
         initContext: { isInitialized: !1, retryAttempts: 0 }
-      }, s = await K(o, i);
-      return f.push(o), {
+      }, { unsubscribe: a, resize: u } = await V(s, i);
+      return m.push(s), {
         unsubscribe: () => {
-          s(), f = f.filter((c) => c.iframe !== a);
-        }
+          a(), m = m.filter((c) => c.iframe !== o);
+        },
+        resize: u
       };
     })
   );
 };
-function q(e) {
-  return typeof e == "string" ? Array.from(document.querySelectorAll(e)).filter(h) : e ? h(e) ? [e] : [] : Array.from(document.getElementsByTagName("iframe"));
+function K(e) {
+  return typeof e == "string" ? Array.from(document.querySelectorAll(e)).filter(w) : e ? w(e) ? [e] : [] : Array.from(document.getElementsByTagName("iframe"));
 }
-function G(e, t) {
+function Q(e, t) {
   if (Array.isArray(e.checkOrigin))
     return e.checkOrigin;
   if (!e.checkOrigin)
     return [];
   const n = [];
   for (const r of t) {
-    const i = F(r);
+    const i = U(r);
     i && n.push(i);
   }
   return n;
 }
-async function K(e, t) {
-  const n = await W(e.iframe) ? J(e) : V(e, t), r = Q(e);
-  return () => {
-    n(), r();
+async function V(e, t) {
+  const n = await N(e.iframe), { unsubscribe: r, resize: i } = n ? Z(e) : X(e, t), o = Y(e);
+  return {
+    unsubscribe: () => {
+      r(), o();
+    },
+    resize: i
   };
 }
-function V(e, t) {
+function X(e, t) {
   const {
     iframe: n,
     initContext: r,
-    settings: { checkOrigin: i, enableLegacyLibSupport: a, targetElementSelector: o, bodyPadding: s, bodyMargin: c }
-  } = e, u = (d) => {
-    const R = d.origin === "null", I = !i || R || t.includes(d.origin);
-    if (!(n.contentWindow !== d.source || !I)) {
+    settings: { checkOrigin: i, enableLegacyLibSupport: o, targetElementSelector: s, bodyPadding: a, bodyMargin: u }
+  } = e, c = (d) => {
+    const O = d.origin === "null", B = !i || O || t.includes(d.origin);
+    if (!(n.contentWindow !== d.source || !B)) {
       if (d.data?.type === "iframe-resized") {
         const { height: l } = d.data;
         l && g({ newHeight: l, registeredElement: e });
         return;
       }
-      if (a) {
-        const l = U(d);
+      if (o) {
+        const l = G(d);
         l !== null && g({ newHeight: l, registeredElement: e });
         return;
       }
     }
   };
-  window.addEventListener("message", u);
-  const L = a ? N() : { type: "iframe-child-init", targetElementSelector: o, bodyPadding: s, bodyMargin: c }, b = () => {
-    T(n, () => n.contentWindow?.postMessage(L, "*")), r.retryAttempts++, r.retryTimeoutId = window.setTimeout(b, y(r.retryAttempts));
+  window.addEventListener("message", c);
+  const M = o ? q() : { type: "iframe-child-init", targetElementSelector: s, bodyPadding: a, bodyMargin: u }, h = () => {
+    C(n, () => n.contentWindow?.postMessage(M, "*")), r.retryAttempts++, r.retryTimeoutId = window.setTimeout(h, y(r.retryAttempts));
+  };
+  return h(), {
+    unsubscribe: () => window.removeEventListener("message", c),
+    resize: () => {
+      const d = { type: "iframe-get-child-dimensions" };
+      n.contentWindow?.postMessage(d, "*");
+    }
   };
-  return b(), () => window.removeEventListener("message", u);
 }
-function J(e) {
+function Z(e) {
   const { iframe: t, settings: n } = e, { targetElementSelector: r } = n;
   let i = 0;
-  const a = () => {
-    const o = m(t.contentDocument, r);
-    if (!t.contentDocument || !o)
-      return i++, setTimeout(a, y(i));
-    E(t.contentDocument, n), w().observe(o);
+  const o = () => {
+    const s = f(t.contentDocument, r);
+    if (!t.contentDocument || !s)
+      return i++, setTimeout(o, y(i));
+    E(t.contentDocument, n), z().observe(s);
   };
-  return x(t, a), () => {
-    const o = m(t.contentDocument, r);
-    o && w().unobserve(o), t.removeEventListener("load", a);
+  return F(t, o), {
+    unsubscribe: () => {
+      const s = f(t.contentDocument, r);
+      s && z().unobserve(s);
+    },
+    resize: () => R(e)
   };
 }
-function Q({ iframe: e, interactionState: t }) {
-  const n = () => {
+function Y({ iframe: e, interactionState: t, settings: n }) {
+  if (!n.onBeforeIframeResize && !n.onIframeResize)
+    return () => {
+    };
+  const r = () => {
     t.isHovered = !0;
-  }, r = () => {
+  }, i = () => {
     t.isHovered = !1;
   };
-  return e.addEventListener("mouseenter", n), e.addEventListener("mouseleave", r), () => {
-    e.removeEventListener("mouseenter", n), e.removeEventListener("mouseleave", r);
+  return e.addEventListener("mouseenter", r), e.addEventListener("mouseleave", i), () => {
+    e.removeEventListener("mouseenter", r), e.removeEventListener("mouseleave", i);
   };
 }
-function X() {
+function ee() {
   let e = null;
   return () => {
     if (!e) {
       const t = ({ target: n }) => {
-        const r = f.find(({ iframe: c }) => c.contentDocument === n.ownerDocument);
-        if (!r)
-          return;
-        const { iframe: i, settings: a } = r, o = m(i.contentDocument, a.targetElementSelector);
-        if (!o)
-          return;
-        const { height: s } = S(o);
-        s && g({ newHeight: s, registeredElement: r });
+        const r = m.find(({ iframe: i }) => i.contentDocument === n.ownerDocument);
+        r && R(r);
       };
       e = new ResizeObserver((n) => n.forEach(t));
     }
     return e;
   };
 }
+function R(e) {
+  const { iframe: t, settings: n } = e, r = f(t.contentDocument, n.targetElementSelector);
+  if (!r)
+    return;
+  const { height: i } = v(r);
+  i && g({ newHeight: i, registeredElement: e });
+}
 function g({ registeredElement: e, newHeight: t }) {
-  const { iframe: n, settings: r, interactionState: i, initContext: a } = e;
-  if (a.isInitialized || (a.isInitialized = !0, clearTimeout(a.retryTimeoutId)), r.onBeforeIframeResize?.({ iframe: n, settings: { ...r }, observedHeight: t }) === !1)
+  const { iframe: n, settings: r, interactionState: i, initContext: o } = e;
+  if (o.isInitialized || (o.isInitialized = !0, clearTimeout(o.retryTimeoutId)), r.onBeforeIframeResize?.({ iframe: n, interactionState: { ...i }, settings: { ...r }, observedHeight: t }) === !1)
     return;
-  const o = n.getBoundingClientRect(), s = t + r.offsetSize;
-  if (n.style.height = `${s}px`, !r.onIframeResize)
+  const s = n.getBoundingClientRect(), a = t + r.offsetSize;
+  if (n.style.height = `${a}px`, !r.onIframeResize)
     return;
-  const c = {
+  const u = {
     iframe: n,
     settings: { ...r },
     interactionState: { ...i },
-    previousRenderState: { rect: o },
+    previousRenderState: { rect: s },
     nextRenderState: { rect: n.getBoundingClientRect() }
   };
-  r.onIframeResize(c);
+  r.onIframeResize(u);
 }
-const Y = ee();
-let p = !1;
-Z();
-function Z() {
-  !v() || !H() || window.addEventListener("message", (e) => {
-    e.data?.type === "iframe-child-init" && _(() => z(e));
+const te = ie();
+let b = !1, L;
+ne();
+function ne() {
+  !S() || !x() || window.addEventListener("message", (e) => {
+    if (e.data?.type === "iframe-child-init")
+      return p(() => I(e));
+    if (e.data?.type === "iframe-get-child-dimensions")
+      return p(() => re(e));
   });
 }
-function z(e, t = 0) {
-  const { targetElementSelector: n, bodyPadding: r, bodyMargin: i } = e.data, a = m(document, n);
-  if (p || window.parent !== e.source)
+function I(e, t = 0) {
+  const { targetElementSelector: n, bodyPadding: r, bodyMargin: i } = e.data, o = f(document, n);
+  if (b || window.parent !== e.source)
     return;
-  if (!a)
-    return setTimeout(() => z(e, t + 1), y(t));
-  E(document, { bodyMargin: i, bodyPadding: r });
-  const o = Y();
-  o.disconnect(), o.observe(a), p = !0;
+  if (!o)
+    return setTimeout(() => I(e, t + 1), y(t));
+  E(document, { bodyMargin: i, bodyPadding: r }), L = n;
+  const s = te();
+  s.disconnect(), s.observe(o), b = !0;
 }
-function ee() {
+function re(e) {
+  const t = f(document, L);
+  !b || window.parent !== e.source || !t || k(t);
+}
+function ie() {
   let e = null;
   return () => (e || (e = new ResizeObserver((t) => {
-    if (!t[0].target)
-      return;
-    const { height: n, width: r } = S(t[0].target), i = {
-      type: "iframe-resized",
-      width: r,
-      height: n
-    };
-    window.parent.postMessage(i, "*");
+    t[0].target && k(t[0].target);
   })), e);
 }
-const te = k({
+const k = (e) => {
+  const { width: t, height: n } = v(e), r = {
+    type: "iframe-resized",
+    width: t,
+    height: n
+  };
+  window.parent.postMessage(r, "*");
+}, oe = P({
   name: "ResizableIframe",
   props: {
     offsetSize: [String, Number, Object],
@@ -216,10 +240,10 @@ const te = k({
     enableLegacyLibSupport: Boolean
   },
   setup(e, { attrs: t }) {
-    const n = O(null);
+    const n = D(null);
     let r = [], i = !1;
-    const a = async (o) => {
-      const s = {
+    const o = async (s) => {
+      const a = {
         offsetSize: e.offsetSize,
         enableLegacyLibSupport: e.enableLegacyLibSupport,
         checkOrigin: e.checkOrigin,
@@ -229,40 +253,40 @@ const te = k({
         bodyMargin: e.bodyMargin,
         bodyPadding: e.bodyPadding
       };
-      Object.keys(s).forEach((u) => {
-        s[u] === void 0 && delete s[u];
+      Object.keys(a).forEach((c) => {
+        a[c] === void 0 && delete a[c];
       });
-      const c = await j(s, o);
-      i ? c.forEach((u) => {
-        u.unsubscribe();
-      }) : r = c;
+      const u = await J(a, s);
+      i ? u.forEach((c) => {
+        c.unsubscribe();
+      }) : r = u;
     };
-    return M(() => {
-      n.value && a(n.value);
-    }), B(() => {
-      i = !0, r.forEach((o) => {
-        o.unsubscribe();
+    return A(() => {
+      n.value && o(n.value);
+    }), H(() => {
+      i = !0, r.forEach((s) => {
+        s.unsubscribe();
       }), r = [];
     }), {
       iframeRef: n,
       attrs: t
     };
   }
-}), ne = (e, t) => {
+}), se = (e, t) => {
   const n = e.__vccOpts || e;
   for (const [r, i] of t)
     n[r] = i;
   return n;
 };
-function re(e, t, n, r, i, a) {
-  return D(), P("iframe", A({ ref: "iframeRef" }, e.$attrs), null, 16);
+function ae(e, t, n, r, i, o) {
+  return T(), _("iframe", W({ ref: "iframeRef" }, e.$attrs), null, 16);
 }
-const ie = /* @__PURE__ */ ne(te, [["render", re]]), ae = {
+const ce = /* @__PURE__ */ se(oe, [["render", ae]]), de = {
   install(e) {
-    e.component("IframeResizer", ie);
+    e.component("IframeResizer", ce);
   }
 };
 export {
-  ie as IframeResizer,
-  ae as IframeResizerPlugin
+  ce as IframeResizer,
+  de as IframeResizerPlugin
 };

package/dist/open-iframe-resizer-vue.umd.js

@@ -1 +1 @@
-(function(d,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],c):(d=typeof globalThis<"u"?globalThis:d||self,c(d["open-iframe-resizer-vue"]={},d.Vue))})(this,function(d,c){"use strict";const w=()=>typeof window<"u",O=()=>{try{return window.self!==window.top}catch{return!0}},p=e=>e instanceof HTMLIFrameElement,k=e=>{window.document.readyState==="complete"?e():window.addEventListener("load",e,{once:!0})},M=(e,t)=>{t(),e.addEventListener("load",t,{once:!0})},P=(e,t)=>{const n=e.contentWindow?.document.readyState==="complete";return e.src!=="about:blank"&&e.contentWindow?.location.href!=="about:blank"&&n?t():e.addEventListener("load",t,{once:!0})},B=()=>({offsetSize:0,checkOrigin:!0,enableLegacyLibSupport:!1});async function D(e){try{return e.contentDocument?.URL==="about:blank"?new Promise(t=>{e.addEventListener("load",()=>t(e.contentDocument!==null),{once:!0})}):e.contentDocument!==null}catch{return!1}}const T=e=>{try{const t=new URL(e.src).origin;if(t!=="about:blank")return t}catch{}return null},A=e=>(Object.keys(e).forEach(t=>{e[t]===void 0&&delete e[t]}),e),S=e=>{const{height:t,width:n}=e.getBoundingClientRect();return{height:Math.ceil(t),width:Math.ceil(n)}},g=(e,t)=>e?t?e.querySelector(t):e.documentElement:null,v=(e,t)=>{e&&(t.bodyPadding&&(e.body.style.padding=t.bodyPadding),t.bodyMargin&&(e.body.style.margin=t.bodyMargin))},b=e=>e<=100?100:e<=120?1e3:1e4,H=()=>"[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false";function _(e){if(typeof e.data!="string"||!e.data.startsWith("[iFrameSizer]")||!e.data.endsWith("mutationObserver")&&!e.data.endsWith("resizeObserver"))return null;const[t,n]=e.data.split(":"),r=+n;return r>0?r:null}const z=U();let y=[];const x=async(e,t)=>{if(!w())return[];const n={...B(),...A(e??{})},r=C(t),i=W(n,r);return Promise.all(r.map(async a=>{const o={iframe:a,settings:n,interactionState:{isHovered:!1},initContext:{isInitialized:!1,retryAttempts:0}},s=await F(o,i);return y.push(o),{unsubscribe:()=>{s(),y=y.filter(u=>u.iframe!==a)}}}))};function C(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)).filter(p):e?p(e)?[e]:[]:Array.from(document.getElementsByTagName("iframe"))}function W(e,t){if(Array.isArray(e.checkOrigin))return e.checkOrigin;if(!e.checkOrigin)return[];const n=[];for(const r of t){const i=T(r);i&&n.push(i)}return n}async function F(e,t){const n=await D(e.iframe)?j(e):$(e,t),r=N(e);return()=>{n(),r()}}function $(e,t){const{iframe:n,initContext:r,settings:{checkOrigin:i,enableLegacyLibSupport:a,targetElementSelector:o,bodyPadding:s,bodyMargin:u}}=e,f=l=>{const Z=l.origin==="null",ee=!i||Z||t.includes(l.origin);if(!(n.contentWindow!==l.source||!ee)){if(l.data?.type==="iframe-resized"){const{height:m}=l.data;m&&h({newHeight:m,registeredElement:e});return}if(a){const m=_(l);m!==null&&h({newHeight:m,registeredElement:e});return}}};window.addEventListener("message",f);const Y=a?H():{type:"iframe-child-init",targetElementSelector:o,bodyPadding:s,bodyMargin:u},I=()=>{M(n,()=>n.contentWindow?.postMessage(Y,"*")),r.retryAttempts++,r.retryTimeoutId=window.setTimeout(I,b(r.retryAttempts))};return I(),()=>window.removeEventListener("message",f)}function j(e){const{iframe:t,settings:n}=e,{targetElementSelector:r}=n;let i=0;const a=()=>{const o=g(t.contentDocument,r);if(!t.contentDocument||!o)return i++,setTimeout(a,b(i));v(t.contentDocument,n),z().observe(o)};return P(t,a),()=>{const o=g(t.contentDocument,r);o&&z().unobserve(o),t.removeEventListener("load",a)}}function N({iframe:e,interactionState:t}){const n=()=>{t.isHovered=!0},r=()=>{t.isHovered=!1};return e.addEventListener("mouseenter",n),e.addEventListener("mouseleave",r),()=>{e.removeEventListener("mouseenter",n),e.removeEventListener("mouseleave",r)}}function U(){let e=null;return()=>{if(!e){const t=({target:n})=>{const r=y.find(({iframe:u})=>u.contentDocument===n.ownerDocument);if(!r)return;const{iframe:i,settings:a}=r,o=g(i.contentDocument,a.targetElementSelector);if(!o)return;const{height:s}=S(o);s&&h({newHeight:s,registeredElement:r})};e=new ResizeObserver(n=>n.forEach(t))}return e}}function h({registeredElement:e,newHeight:t}){const{iframe:n,settings:r,interactionState:i,initContext:a}=e;if(a.isInitialized||(a.isInitialized=!0,clearTimeout(a.retryTimeoutId)),r.onBeforeIframeResize?.({iframe:n,settings:{...r},observedHeight:t})===!1)return;const o=n.getBoundingClientRect(),s=t+r.offsetSize;if(n.style.height=`${s}px`,!r.onIframeResize)return;const u={iframe:n,settings:{...r},interactionState:{...i},previousRenderState:{rect:o},nextRenderState:{rect:n.getBoundingClientRect()}};r.onIframeResize(u)}const q=G();let E=!1;V();function V(){!w()||!O()||window.addEventListener("message",e=>{e.data?.type==="iframe-child-init"&&k(()=>R(e))})}function R(e,t=0){const{targetElementSelector:n,bodyPadding:r,bodyMargin:i}=e.data,a=g(document,n);if(E||window.parent!==e.source)return;if(!a)return setTimeout(()=>R(e,t+1),b(t));v(document,{bodyMargin:i,bodyPadding:r});const o=q();o.disconnect(),o.observe(a),E=!0}function G(){let e=null;return()=>(e||(e=new ResizeObserver(t=>{if(!t[0].target)return;const{height:n,width:r}=S(t[0].target),i={type:"iframe-resized",width:r,height:n};window.parent.postMessage(i,"*")})),e)}const K=c.defineComponent({name:"ResizableIframe",props:{offsetSize:[String,Number,Object],checkOrigin:[Boolean,Array],onIframeResize:Function,onBeforeIframeResize:Function,targetElementSelector:String,bodyMargin:[String,Number],bodyPadding:[String,Number],enableLegacyLibSupport:Boolean},setup(e,{attrs:t}){const n=c.ref(null);let r=[],i=!1;const a=async o=>{const s={offsetSize:e.offsetSize,enableLegacyLibSupport:e.enableLegacyLibSupport,checkOrigin:e.checkOrigin,onIframeResize:e.onIframeResize,onBeforeIframeResize:e.onBeforeIframeResize,targetElementSelector:e.targetElementSelector,bodyMargin:e.bodyMargin,bodyPadding:e.bodyPadding};Object.keys(s).forEach(f=>{s[f]===void 0&&delete s[f]});const u=await x(s,o);i?u.forEach(f=>{f.unsubscribe()}):r=u};return c.onMounted(()=>{n.value&&a(n.value)}),c.onBeforeUnmount(()=>{i=!0,r.forEach(o=>{o.unsubscribe()}),r=[]}),{iframeRef:n,attrs:t}}}),J=(e,t)=>{const n=e.__vccOpts||e;for(const[r,i]of t)n[r]=i;return n};function Q(e,t,n,r,i,a){return c.openBlock(),c.createElementBlock("iframe",c.mergeProps({ref:"iframeRef"},e.$attrs),null,16)}const L=J(K,[["render",Q]]),X={install(e){e.component("IframeResizer",L)}};d.IframeResizer=L,d.IframeResizerPlugin=X,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
+(function(d,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],a):(d=typeof globalThis<"u"?globalThis:d||self,a(d["open-iframe-resizer-vue"]={},d.Vue))})(this,(function(d,a){"use strict";const w=()=>typeof window<"u",B=()=>{try{return window.self!==window.top}catch{return!0}},z=e=>e instanceof HTMLIFrameElement,S=e=>{window.document.readyState==="complete"?e():window.addEventListener("load",e,{once:!0})},D=(e,t)=>{t(),e.addEventListener("load",t,{once:!0})},T=(e,t)=>{const n=e.contentWindow?.document.readyState==="complete";return e.src!=="about:blank"&&e.contentWindow?.location.href!=="about:blank"&&n?t():e.addEventListener("load",t,{once:!0})},A=()=>({offsetSize:0,checkOrigin:!0,enableLegacyLibSupport:!1});async function H(e){try{return e.contentDocument?.URL==="about:blank"?new Promise(t=>{e.addEventListener("load",()=>t(e.contentDocument!==null),{once:!0})}):e.contentDocument!==null}catch{return!1}}const _=e=>{try{const t=new URL(e.src).origin;if(t!=="about:blank")return t}catch{}return null},W=e=>(Object.keys(e).forEach(t=>{e[t]===void 0&&delete e[t]}),e),v=e=>{const{height:t,width:n}=e.getBoundingClientRect();return{height:Math.ceil(t),width:Math.ceil(n)}},m=(e,t)=>e?t?e.querySelector(t):e.documentElement:null,E=(e,t)=>{e&&(t.bodyPadding&&(e.body.style.padding=t.bodyPadding),t.bodyMargin&&(e.body.style.margin=t.bodyMargin))},y=e=>e<=100?100:e<=120?1e3:1e4,x=()=>"[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false";function C(e){if(typeof e.data!="string"||!e.data.startsWith("[iFrameSizer]")||!e.data.endsWith("mutationObserver")&&!e.data.endsWith("resizeObserver"))return null;const[t,n]=e.data.split(":"),r=+n;return r>0?r:null}const R=G();let b=[];const F=async(e,t)=>{if(!w())return[];const n={...A(),...W(e??{})},r=$(t),i=j(n,r);return Promise.all(r.map(async o=>{const s={iframe:o,settings:n,interactionState:{isHovered:!1},initContext:{isInitialized:!1,retryAttempts:0}},{unsubscribe:c,resize:f}=await N(s,i);return b.push(s),{unsubscribe:()=>{c(),b=b.filter(u=>u.iframe!==o)},resize:f}}))};function $(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)).filter(z):e?z(e)?[e]:[]:Array.from(document.getElementsByTagName("iframe"))}function j(e,t){if(Array.isArray(e.checkOrigin))return e.checkOrigin;if(!e.checkOrigin)return[];const n=[];for(const r of t){const i=_(r);i&&n.push(i)}return n}async function N(e,t){const n=await H(e.iframe),{unsubscribe:r,resize:i}=n?q(e):U(e,t),o=V(e);return{unsubscribe:()=>{r(),o()},resize:i}}function U(e,t){const{iframe:n,initContext:r,settings:{checkOrigin:i,enableLegacyLibSupport:o,targetElementSelector:s,bodyPadding:c,bodyMargin:f}}=e,u=l=>{const re=l.origin==="null",ie=!i||re||t.includes(l.origin);if(!(n.contentWindow!==l.source||!ie)){if(l.data?.type==="iframe-resized"){const{height:g}=l.data;g&&h({newHeight:g,registeredElement:e});return}if(o){const g=C(l);g!==null&&h({newHeight:g,registeredElement:e});return}}};window.addEventListener("message",u);const ne=o?x():{type:"iframe-child-init",targetElementSelector:s,bodyPadding:c,bodyMargin:f},P=()=>{D(n,()=>n.contentWindow?.postMessage(ne,"*")),r.retryAttempts++,r.retryTimeoutId=window.setTimeout(P,y(r.retryAttempts))};return P(),{unsubscribe:()=>window.removeEventListener("message",u),resize:()=>{const l={type:"iframe-get-child-dimensions"};n.contentWindow?.postMessage(l,"*")}}}function q(e){const{iframe:t,settings:n}=e,{targetElementSelector:r}=n;let i=0;const o=()=>{const s=m(t.contentDocument,r);if(!t.contentDocument||!s)return i++,setTimeout(o,y(i));E(t.contentDocument,n),R().observe(s)};return T(t,o),{unsubscribe:()=>{const s=m(t.contentDocument,r);s&&R().unobserve(s)},resize:()=>I(e)}}function V({iframe:e,interactionState:t,settings:n}){if(!n.onBeforeIframeResize&&!n.onIframeResize)return()=>{};const r=()=>{t.isHovered=!0},i=()=>{t.isHovered=!1};return e.addEventListener("mouseenter",r),e.addEventListener("mouseleave",i),()=>{e.removeEventListener("mouseenter",r),e.removeEventListener("mouseleave",i)}}function G(){let e=null;return()=>{if(!e){const t=({target:n})=>{const r=b.find(({iframe:i})=>i.contentDocument===n.ownerDocument);r&&I(r)};e=new ResizeObserver(n=>n.forEach(t))}return e}}function I(e){const{iframe:t,settings:n}=e,r=m(t.contentDocument,n.targetElementSelector);if(!r)return;const{height:i}=v(r);i&&h({newHeight:i,registeredElement:e})}function h({registeredElement:e,newHeight:t}){const{iframe:n,settings:r,interactionState:i,initContext:o}=e;if(o.isInitialized||(o.isInitialized=!0,clearTimeout(o.retryTimeoutId)),r.onBeforeIframeResize?.({iframe:n,interactionState:{...i},settings:{...r},observedHeight:t})===!1)return;const s=n.getBoundingClientRect(),c=t+r.offsetSize;if(n.style.height=`${c}px`,!r.onIframeResize)return;const f={iframe:n,settings:{...r},interactionState:{...i},previousRenderState:{rect:s},nextRenderState:{rect:n.getBoundingClientRect()}};r.onIframeResize(f)}const J=X();let p=!1,L;K();function K(){!w()||!B()||window.addEventListener("message",e=>{if(e.data?.type==="iframe-child-init")return S(()=>M(e));if(e.data?.type==="iframe-get-child-dimensions")return S(()=>Q(e))})}function M(e,t=0){const{targetElementSelector:n,bodyPadding:r,bodyMargin:i}=e.data,o=m(document,n);if(p||window.parent!==e.source)return;if(!o)return setTimeout(()=>M(e,t+1),y(t));E(document,{bodyMargin:i,bodyPadding:r}),L=n;const s=J();s.disconnect(),s.observe(o),p=!0}function Q(e){const t=m(document,L);!p||window.parent!==e.source||!t||O(t)}function X(){let e=null;return()=>(e||(e=new ResizeObserver(t=>{t[0].target&&O(t[0].target)})),e)}const O=e=>{const{width:t,height:n}=v(e),r={type:"iframe-resized",width:t,height:n};window.parent.postMessage(r,"*")},Z=a.defineComponent({name:"ResizableIframe",props:{offsetSize:[String,Number,Object],checkOrigin:[Boolean,Array],onIframeResize:Function,onBeforeIframeResize:Function,targetElementSelector:String,bodyMargin:[String,Number],bodyPadding:[String,Number],enableLegacyLibSupport:Boolean},setup(e,{attrs:t}){const n=a.ref(null);let r=[],i=!1;const o=async s=>{const c={offsetSize:e.offsetSize,enableLegacyLibSupport:e.enableLegacyLibSupport,checkOrigin:e.checkOrigin,onIframeResize:e.onIframeResize,onBeforeIframeResize:e.onBeforeIframeResize,targetElementSelector:e.targetElementSelector,bodyMargin:e.bodyMargin,bodyPadding:e.bodyPadding};Object.keys(c).forEach(u=>{c[u]===void 0&&delete c[u]});const f=await F(c,s);i?f.forEach(u=>{u.unsubscribe()}):r=f};return a.onMounted(()=>{n.value&&o(n.value)}),a.onBeforeUnmount(()=>{i=!0,r.forEach(s=>{s.unsubscribe()}),r=[]}),{iframeRef:n,attrs:t}}}),Y=(e,t)=>{const n=e.__vccOpts||e;for(const[r,i]of t)n[r]=i;return n};function ee(e,t,n,r,i,o){return a.openBlock(),a.createElementBlock("iframe",a.mergeProps({ref:"iframeRef"},e.$attrs),null,16)}const k=Y(Z,[["render",ee]]),te={install(e){e.component("IframeResizer",k)}};d.IframeResizer=k,d.IframeResizerPlugin=te,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@open-iframe-resizer/vue",
   "private": false,
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "Open-source modern iframe resizer component",
   "license": "MIT",
   "repository": {
@@ -43,7 +43,7 @@
     "test": "npx playwright install --with-deps && npx playwright test"
   },
   "dependencies": {
-    "@open-iframe-resizer/core": "2.0.0"
+    "@open-iframe-resizer/core": "2.2.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",