@open-iframe-resizer/vue 1.6.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,19 +1,28 @@
1
- import { defineComponent as O, ref as k, onMounted as M, onBeforeUnmount as B, createElementBlock as P, openBlock as A, mergeProps as H } from "vue";
2
- const S = () => typeof window < "u", _ = () => window.self !== window.top, v = (e) => e instanceof HTMLIFrameElement, D = (e) => {
3
- window.document.readyState === "complete" ? e() : window.addEventListener("load", e);
1
+ import { defineComponent as k, ref as O, onMounted as M, onBeforeUnmount as B, createElementBlock as P, openBlock as D, mergeProps as A } from "vue";
2
+ const v = () => typeof window < "u", H = () => {
3
+ try {
4
+ return window.self !== window.top;
5
+ } catch {
6
+ return !0;
7
+ }
8
+ }, h = (e) => e instanceof HTMLIFrameElement, _ = (e) => {
9
+ window.document.readyState === "complete" ? e() : window.addEventListener("load", e, { once: !0 });
4
10
  }, T = (e, t) => {
5
- t(), e.addEventListener("load", t);
11
+ t(), e.addEventListener("load", t, { once: !0 });
6
12
  }, x = (e, t) => {
7
- var n, r;
8
- const i = ((n = e.contentWindow) == null ? void 0 : n.document.readyState) === "complete";
9
- return e.src !== "about:blank" && ((r = e.contentWindow) == null ? void 0 : r.location.href) !== "about:blank" && i ? t() : e.addEventListener("load", t);
10
- }, C = () => ({ offsetSize: 0, checkOrigin: !0, enableLegacyLibSupport: !1 }), W = (e) => {
13
+ const n = e.contentWindow?.document.readyState === "complete";
14
+ return e.src !== "about:blank" && e.contentWindow?.location.href !== "about:blank" && n ? t() : e.addEventListener("load", t, { once: !0 });
15
+ }, C = () => ({ offsetSize: 0, checkOrigin: !0, enableLegacyLibSupport: !1 });
16
+ async function W(e) {
11
17
  try {
12
- return new URL(e.src).origin === window.location.origin;
18
+ return e.contentDocument?.URL === "about:blank" ? new Promise((t) => {
19
+ e.addEventListener("load", () => t(e.contentDocument !== null), { once: !0 });
20
+ }) : e.contentDocument !== null;
13
21
  } catch {
14
22
  return !1;
15
23
  }
16
- }, F = (e) => {
24
+ }
25
+ const F = (e) => {
17
26
  try {
18
27
  const t = new URL(e.src).origin;
19
28
  if (t !== "about:blank")
@@ -21,12 +30,14 @@ const S = () => typeof window < "u", _ = () => window.self !== window.top, v = (
21
30
  } catch {
22
31
  }
23
32
  return null;
24
- }, $ = (e) => (Object.keys(e).forEach((t) => e[t] === void 0 && delete e[t]), e), E = (e) => {
33
+ }, $ = (e) => (Object.keys(e).forEach((t) => {
34
+ e[t] === void 0 && delete e[t];
35
+ }), e), S = (e) => {
25
36
  const { height: t, width: n } = e.getBoundingClientRect();
26
37
  return { height: Math.ceil(t), width: Math.ceil(n) };
27
- }, m = (e, t) => e ? t ? e.querySelector(t) : e.documentElement : null, z = (e, t) => {
38
+ }, m = (e, t) => e ? t ? e.querySelector(t) : e.documentElement : null, E = (e, t) => {
28
39
  e && (t.bodyPadding && (e.body.style.padding = t.bodyPadding), t.bodyMargin && (e.body.style.margin = t.bodyMargin));
29
- }, b = (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";
40
+ }, 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";
30
41
  function U(e) {
31
42
  if (typeof e.data != "string" || !e.data.startsWith("[iFrameSizer]") || !e.data.endsWith("mutationObserver") && !e.data.endsWith("resizeObserver"))
32
43
  return null;
@@ -35,26 +46,28 @@ function U(e) {
35
46
  }
36
47
  const w = X();
37
48
  let f = [];
38
- const j = (e, t) => {
39
- if (!S())
49
+ const j = async (e, t) => {
50
+ if (!v())
40
51
  return [];
41
52
  const n = { ...C(), ...$(e ?? {}) }, r = q(t), i = G(n, r);
42
- return r.map((a) => {
43
- const o = {
44
- iframe: a,
45
- settings: n,
46
- interactionState: { isHovered: !1 },
47
- initContext: { isInitialized: !1, retryAttempts: 0 }
48
- }, s = K(o, i);
49
- return f.push(o), {
50
- unsubscribe: () => {
51
- s(), f = f.filter((d) => d.iframe !== a);
52
- }
53
- };
54
- });
53
+ return Promise.all(
54
+ r.map(async (a) => {
55
+ const o = {
56
+ iframe: a,
57
+ settings: n,
58
+ interactionState: { isHovered: !1 },
59
+ initContext: { isInitialized: !1, retryAttempts: 0 }
60
+ }, s = await K(o, i);
61
+ return f.push(o), {
62
+ unsubscribe: () => {
63
+ s(), f = f.filter((c) => c.iframe !== a);
64
+ }
65
+ };
66
+ })
67
+ );
55
68
  };
56
69
  function q(e) {
57
- return typeof e == "string" ? Array.from(document.querySelectorAll(e)).filter(v) : e ? v(e) ? [e] : [] : Array.from(document.getElementsByTagName("iframe"));
70
+ return typeof e == "string" ? Array.from(document.querySelectorAll(e)).filter(h) : e ? h(e) ? [e] : [] : Array.from(document.getElementsByTagName("iframe"));
58
71
  }
59
72
  function G(e, t) {
60
73
  if (Array.isArray(e.checkOrigin))
@@ -68,8 +81,8 @@ function G(e, t) {
68
81
  }
69
82
  return n;
70
83
  }
71
- function K(e, t) {
72
- const n = W(e.iframe) ? J(e) : V(e, t), r = Q(e);
84
+ async function K(e, t) {
85
+ const n = await W(e.iframe) ? J(e) : V(e, t), r = Q(e);
73
86
  return () => {
74
87
  n(), r();
75
88
  };
@@ -78,31 +91,27 @@ function V(e, t) {
78
91
  const {
79
92
  iframe: n,
80
93
  initContext: r,
81
- settings: { checkOrigin: i, enableLegacyLibSupport: a, targetElementSelector: o, bodyPadding: s, bodyMargin: d }
82
- } = e, l = (c) => {
83
- var h;
84
- const I = !i || t.includes(c.origin);
85
- if (!(n.contentWindow !== c.source || !I)) {
86
- if (((h = c.data) == null ? void 0 : h.type) === "iframe-resized") {
87
- const { height: u } = c.data;
88
- u && g({ newHeight: u, registeredElement: e });
94
+ settings: { checkOrigin: i, enableLegacyLibSupport: a, targetElementSelector: o, bodyPadding: s, bodyMargin: c }
95
+ } = e, u = (d) => {
96
+ const R = d.origin === "null", I = !i || R || t.includes(d.origin);
97
+ if (!(n.contentWindow !== d.source || !I)) {
98
+ if (d.data?.type === "iframe-resized") {
99
+ const { height: l } = d.data;
100
+ l && g({ newHeight: l, registeredElement: e });
89
101
  return;
90
102
  }
91
103
  if (a) {
92
- const u = U(c);
93
- u !== null && g({ newHeight: u, registeredElement: e });
104
+ const l = U(d);
105
+ l !== null && g({ newHeight: l, registeredElement: e });
94
106
  return;
95
107
  }
96
108
  }
97
109
  };
98
- window.addEventListener("message", l);
99
- const L = a ? N() : { type: "iframe-child-init", targetElementSelector: o, bodyPadding: s, bodyMargin: d }, y = () => {
100
- T(n, () => {
101
- var c;
102
- return (c = n.contentWindow) == null ? void 0 : c.postMessage(L, "*");
103
- }), r.retryAttempts++, r.retryTimeoutId = window.setTimeout(y, b(r.retryAttempts));
110
+ window.addEventListener("message", u);
111
+ const L = a ? N() : { type: "iframe-child-init", targetElementSelector: o, bodyPadding: s, bodyMargin: c }, b = () => {
112
+ T(n, () => n.contentWindow?.postMessage(L, "*")), r.retryAttempts++, r.retryTimeoutId = window.setTimeout(b, y(r.retryAttempts));
104
113
  };
105
- return y(), () => window.removeEventListener("message", l);
114
+ return b(), () => window.removeEventListener("message", u);
106
115
  }
107
116
  function J(e) {
108
117
  const { iframe: t, settings: n } = e, { targetElementSelector: r } = n;
@@ -110,8 +119,8 @@ function J(e) {
110
119
  const a = () => {
111
120
  const o = m(t.contentDocument, r);
112
121
  if (!t.contentDocument || !o)
113
- return i++, setTimeout(a, b(i));
114
- z(t.contentDocument, n), w().observe(o);
122
+ return i++, setTimeout(a, y(i));
123
+ E(t.contentDocument, n), w().observe(o);
115
124
  };
116
125
  return x(t, a), () => {
117
126
  const o = m(t.contentDocument, r);
@@ -133,13 +142,13 @@ function X() {
133
142
  return () => {
134
143
  if (!e) {
135
144
  const t = ({ target: n }) => {
136
- const r = f.find(({ iframe: d }) => d.contentDocument === n.ownerDocument);
145
+ const r = f.find(({ iframe: c }) => c.contentDocument === n.ownerDocument);
137
146
  if (!r)
138
147
  return;
139
148
  const { iframe: i, settings: a } = r, o = m(i.contentDocument, a.targetElementSelector);
140
149
  if (!o)
141
150
  return;
142
- const { height: s } = E(o);
151
+ const { height: s } = S(o);
143
152
  s && g({ newHeight: s, registeredElement: r });
144
153
  };
145
154
  e = new ResizeObserver((n) => n.forEach(t));
@@ -148,38 +157,36 @@ function X() {
148
157
  };
149
158
  }
150
159
  function g({ registeredElement: e, newHeight: t }) {
151
- var n;
152
- const { iframe: r, settings: i, interactionState: a, initContext: o } = e;
153
- if (o.isInitialized || (o.isInitialized = !0, clearTimeout(o.retryTimeoutId)), ((n = i.onBeforeIframeResize) == null ? void 0 : n.call(i, { iframe: r, settings: { ...i }, observedHeight: t })) === !1)
160
+ const { iframe: n, settings: r, interactionState: i, initContext: a } = e;
161
+ if (a.isInitialized || (a.isInitialized = !0, clearTimeout(a.retryTimeoutId)), r.onBeforeIframeResize?.({ iframe: n, settings: { ...r }, observedHeight: t }) === !1)
154
162
  return;
155
- const s = r.getBoundingClientRect(), d = t + i.offsetSize;
156
- if (r.style.height = `${d}px`, !i.onIframeResize)
163
+ const o = n.getBoundingClientRect(), s = t + r.offsetSize;
164
+ if (n.style.height = `${s}px`, !r.onIframeResize)
157
165
  return;
158
- const l = {
159
- iframe: r,
160
- settings: { ...i },
161
- interactionState: { ...a },
162
- previousRenderState: { rect: s },
163
- nextRenderState: { rect: r.getBoundingClientRect() }
166
+ const c = {
167
+ iframe: n,
168
+ settings: { ...r },
169
+ interactionState: { ...i },
170
+ previousRenderState: { rect: o },
171
+ nextRenderState: { rect: n.getBoundingClientRect() }
164
172
  };
165
- i.onIframeResize(l);
173
+ r.onIframeResize(c);
166
174
  }
167
175
  const Y = ee();
168
176
  let p = !1;
169
177
  Z();
170
178
  function Z() {
171
- !S() || !_() || window.addEventListener("message", (e) => {
172
- var t;
173
- ((t = e.data) == null ? void 0 : t.type) === "iframe-child-init" && D(() => R(e));
179
+ !v() || !H() || window.addEventListener("message", (e) => {
180
+ e.data?.type === "iframe-child-init" && _(() => z(e));
174
181
  });
175
182
  }
176
- function R(e, t = 0) {
183
+ function z(e, t = 0) {
177
184
  const { targetElementSelector: n, bodyPadding: r, bodyMargin: i } = e.data, a = m(document, n);
178
185
  if (p || window.parent !== e.source)
179
186
  return;
180
187
  if (!a)
181
- return setTimeout(() => R(e, t + 1), b(t));
182
- z(document, { bodyMargin: i, bodyPadding: r });
188
+ return setTimeout(() => z(e, t + 1), y(t));
189
+ E(document, { bodyMargin: i, bodyPadding: r });
183
190
  const o = Y();
184
191
  o.disconnect(), o.observe(a), p = !0;
185
192
  }
@@ -188,7 +195,7 @@ function ee() {
188
195
  return () => (e || (e = new ResizeObserver((t) => {
189
196
  if (!t[0].target)
190
197
  return;
191
- const { height: n, width: r } = E(t[0].target), i = {
198
+ const { height: n, width: r } = S(t[0].target), i = {
192
199
  type: "iframe-resized",
193
200
  width: r,
194
201
  height: n
@@ -196,23 +203,23 @@ function ee() {
196
203
  window.parent.postMessage(i, "*");
197
204
  })), e);
198
205
  }
199
- const te = O({
206
+ const te = k({
200
207
  name: "ResizableIframe",
201
208
  props: {
202
209
  offsetSize: [String, Number, Object],
203
210
  checkOrigin: [Boolean, Array],
204
211
  onIframeResize: Function,
205
212
  onBeforeIframeResize: Function,
206
- targetElementSelector: [String],
213
+ targetElementSelector: String,
207
214
  bodyMargin: [String, Number],
208
215
  bodyPadding: [String, Number],
209
216
  enableLegacyLibSupport: Boolean
210
217
  },
211
218
  setup(e, { attrs: t }) {
212
- const n = k(null);
213
- let r = [];
214
- const i = (a) => {
215
- const o = {
219
+ const n = O(null);
220
+ let r = [], i = !1;
221
+ const a = async (o) => {
222
+ const s = {
216
223
  offsetSize: e.offsetSize,
217
224
  enableLegacyLibSupport: e.enableLegacyLibSupport,
218
225
  checkOrigin: e.checkOrigin,
@@ -222,14 +229,20 @@ const te = O({
222
229
  bodyMargin: e.bodyMargin,
223
230
  bodyPadding: e.bodyPadding
224
231
  };
225
- Object.keys(o).forEach((s) => {
226
- o[s] === void 0 && delete o[s];
227
- }), r = j(o, a);
232
+ Object.keys(s).forEach((u) => {
233
+ s[u] === void 0 && delete s[u];
234
+ });
235
+ const c = await j(s, o);
236
+ i ? c.forEach((u) => {
237
+ u.unsubscribe();
238
+ }) : r = c;
228
239
  };
229
240
  return M(() => {
230
- n.value && i(n.value);
241
+ n.value && a(n.value);
231
242
  }), B(() => {
232
- r.forEach((a) => a.unsubscribe()), r = [];
243
+ i = !0, r.forEach((o) => {
244
+ o.unsubscribe();
245
+ }), r = [];
233
246
  }), {
234
247
  iframeRef: n,
235
248
  attrs: t
@@ -242,7 +255,7 @@ const te = O({
242
255
  return n;
243
256
  };
244
257
  function re(e, t, n, r, i, a) {
245
- return A(), P("iframe", H({ ref: "iframeRef" }, e.$attrs), null, 16);
258
+ return D(), P("iframe", A({ ref: "iframeRef" }, e.$attrs), null, 16);
246
259
  }
247
260
  const ie = /* @__PURE__ */ ne(te, [["render", re]]), ae = {
248
261
  install(e) {
@@ -1 +1 @@
1
- (function(d,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(d=typeof globalThis<"u"?globalThis:d||self,s(d["open-iframe-resizer-vue"]={},d.Vue))})(this,function(d,s){"use strict";const v=()=>typeof window<"u",M=()=>window.self!==window.top,p=e=>e instanceof HTMLIFrameElement,k=e=>{window.document.readyState==="complete"?e():window.addEventListener("load",e)},B=(e,t)=>{t(),e.addEventListener("load",t)},P=(e,t)=>{var n,r;const i=((n=e.contentWindow)==null?void 0:n.document.readyState)==="complete";return e.src!=="about:blank"&&((r=e.contentWindow)==null?void 0:r.location.href)!=="about:blank"&&i?t():e.addEventListener("load",t)},T=()=>({offsetSize:0,checkOrigin:!0,enableLegacyLibSupport:!1}),A=e=>{try{return new URL(e.src).origin===window.location.origin}catch{return!1}},H=e=>{try{const t=new URL(e.src).origin;if(t!=="about:blank")return t}catch{}return null},_=e=>(Object.keys(e).forEach(t=>e[t]===void 0&&delete e[t]),e),w=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,S=(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,D=()=>"[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false";function x(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 g=[];const C=(e,t)=>{if(!v())return[];const n={...T(),..._(e??{})},r=W(t),i=F(n,r);return r.map(a=>{const o={iframe:a,settings:n,interactionState:{isHovered:!1},initContext:{isInitialized:!1,retryAttempts:0}},c=$(o,i);return g.push(o),{unsubscribe:()=>{c(),g=g.filter(l=>l.iframe!==a)}}})};function W(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)).filter(p):e?p(e)?[e]:[]:Array.from(document.getElementsByTagName("iframe"))}function F(e,t){if(Array.isArray(e.checkOrigin))return e.checkOrigin;if(!e.checkOrigin)return[];const n=[];for(const r of t){const i=H(r);i&&n.push(i)}return n}function $(e,t){const n=A(e.iframe)?N(e):j(e,t),r=q(e);return()=>{n(),r()}}function j(e,t){const{iframe:n,initContext:r,settings:{checkOrigin:i,enableLegacyLibSupport:a,targetElementSelector:o,bodyPadding:c,bodyMargin:l}}=e,y=u=>{var O;const ee=!i||t.includes(u.origin);if(!(n.contentWindow!==u.source||!ee)){if(((O=u.data)==null?void 0:O.type)==="iframe-resized"){const{height:f}=u.data;f&&h({newHeight:f,registeredElement:e});return}if(a){const f=x(u);f!==null&&h({newHeight:f,registeredElement:e});return}}};window.addEventListener("message",y);const Z=a?D():{type:"iframe-child-init",targetElementSelector:o,bodyPadding:c,bodyMargin:l},I=()=>{B(n,()=>{var u;return(u=n.contentWindow)==null?void 0:u.postMessage(Z,"*")}),r.retryAttempts++,r.retryTimeoutId=window.setTimeout(I,b(r.retryAttempts))};return I(),()=>window.removeEventListener("message",y)}function N(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,b(i));S(t.contentDocument,n),z().observe(o)};return P(t,a),()=>{const o=m(t.contentDocument,r);o&&z().unobserve(o),t.removeEventListener("load",a)}}function q({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=g.find(({iframe:l})=>l.contentDocument===n.ownerDocument);if(!r)return;const{iframe:i,settings:a}=r,o=m(i.contentDocument,a.targetElementSelector);if(!o)return;const{height:c}=w(o);c&&h({newHeight:c,registeredElement:r})};e=new ResizeObserver(n=>n.forEach(t))}return e}}function h({registeredElement:e,newHeight:t}){var n;const{iframe:r,settings:i,interactionState:a,initContext:o}=e;if(o.isInitialized||(o.isInitialized=!0,clearTimeout(o.retryTimeoutId)),((n=i.onBeforeIframeResize)==null?void 0:n.call(i,{iframe:r,settings:{...i},observedHeight:t}))===!1)return;const c=r.getBoundingClientRect(),l=t+i.offsetSize;if(r.style.height=`${l}px`,!i.onIframeResize)return;const y={iframe:r,settings:{...i},interactionState:{...a},previousRenderState:{rect:c},nextRenderState:{rect:r.getBoundingClientRect()}};i.onIframeResize(y)}const V=K();let E=!1;G();function G(){!v()||!M()||window.addEventListener("message",e=>{var t;((t=e.data)==null?void 0:t.type)==="iframe-child-init"&&k(()=>R(e))})}function R(e,t=0){const{targetElementSelector:n,bodyPadding:r,bodyMargin:i}=e.data,a=m(document,n);if(E||window.parent!==e.source)return;if(!a)return setTimeout(()=>R(e,t+1),b(t));S(document,{bodyMargin:i,bodyPadding:r});const o=V();o.disconnect(),o.observe(a),E=!0}function K(){let e=null;return()=>(e||(e=new ResizeObserver(t=>{if(!t[0].target)return;const{height:n,width:r}=w(t[0].target),i={type:"iframe-resized",width:r,height:n};window.parent.postMessage(i,"*")})),e)}const J=s.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=s.ref(null);let r=[];const i=a=>{const o={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(o).forEach(c=>{o[c]===void 0&&delete o[c]}),r=C(o,a)};return s.onMounted(()=>{n.value&&i(n.value)}),s.onBeforeUnmount(()=>{r.forEach(a=>a.unsubscribe()),r=[]}),{iframeRef:n,attrs:t}}}),Q=(e,t)=>{const n=e.__vccOpts||e;for(const[r,i]of t)n[r]=i;return n};function X(e,t,n,r,i,a){return s.openBlock(),s.createElementBlock("iframe",s.mergeProps({ref:"iframeRef"},e.$attrs),null,16)}const L=Q(J,[["render",X]]),Y={install(e){e.component("IframeResizer",L)}};d.IframeResizer=L,d.IframeResizerPlugin=Y,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
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"})});
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@open-iframe-resizer/vue",
3
3
  "private": false,
4
- "version": "1.6.0",
4
+ "version": "2.0.0",
5
5
  "description": "Open-source modern iframe resizer component",
6
6
  "license": "MIT",
7
7
  "repository": {
@@ -43,13 +43,13 @@
43
43
  "test": "npx playwright install --with-deps && npx playwright test"
44
44
  },
45
45
  "dependencies": {
46
- "@open-iframe-resizer/core": "1.6.0"
46
+ "@open-iframe-resizer/core": "2.0.0"
47
47
  },
48
48
  "devDependencies": {
49
- "@vitejs/plugin-vue": "^5.2.3",
50
- "@vue/tsconfig": "^0.7.0",
51
- "vue": "^3.5.13",
52
- "vue-tsc": "^2.2.8"
49
+ "@vitejs/plugin-vue": "^6.0.1",
50
+ "@vue/tsconfig": "^0.8.1",
51
+ "vue": "^3.5.21",
52
+ "vue-tsc": "^3.0.7"
53
53
  },
54
54
  "peerDependencies": {
55
55
  "vue": ">=3.0.0"