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