@open-iframe-resizer/vue 1.4.0

package/LICENSE.md

@@ -0,0 +1,20 @@
+Copyright (c) 2012-2024 Scott Chacon and others
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import { App } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { PublicProps } from 'vue';
+import { Settings } from '@open-iframe-resizer/core';
+
+export declare const IframeResizer: DefineComponent<Partial<Settings>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Partial<Settings>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+'iframe-ref': HTMLIFrameElement;
+}, HTMLIFrameElement>;
+
+export declare const IframeResizerPlugin: {
+    install(app: App): void;
+};
+
+export { }

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

@@ -0,0 +1,240 @@
+import { defineComponent as M, useTemplateRef as k, onMounted as O, onBeforeUnmount as P, createElementBlock as A, openBlock as B, mergeProps as T } from "vue";
+const E = () => typeof window < "u", D = () => window.self !== window.top, h = (e) => e instanceof HTMLIFrameElement, H = (e) => {
+  window.document.readyState === "complete" ? e() : window.addEventListener("load", e);
+}, C = (e, t) => {
+  t(), e.addEventListener("load", t);
+}, x = (e, t) => {
+  var n, r;
+  const a = ((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" && a ? t() : e.addEventListener("load", t);
+}, F = () => ({ offsetSize: 0, checkOrigin: !0, enableLegacyLibSupport: !1 }), W = (e) => {
+  try {
+    return new URL(e.src).origin === window.location.origin;
+  } catch {
+    return !1;
+  }
+}, _ = (e) => {
+  try {
+    const t = new URL(e.src).origin;
+    if (t !== "about:blank")
+      return t;
+  } catch {
+  }
+  return null;
+}, U = (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) };
+}, f = (e, t) => e ? t ? e.querySelector(t) : e.documentElement : null, z = (e, t) => {
+  e && (t.bodyPadding && (e.body.style.padding = t.bodyPadding), t.bodyMargin && (e.body.style.margin = t.bodyMargin));
+}, g = (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 $(e) {
+  if (typeof e.data == "string" && e.data.startsWith("[iFrameSizer]")) {
+    const [t, n] = e.data.split(":"), r = +n;
+    return r > 0 ? r : null;
+  }
+  return null;
+}
+const w = X();
+let l = [];
+const j = (e, t) => {
+  if (!E())
+    return [];
+  const n = { ...F(), ...U(e ?? {}) }, r = N(t), a = G(n, r);
+  return r.map((i) => {
+    const o = {
+      iframe: i,
+      settings: n,
+      interactionState: { isHovered: !1 },
+      initContext: { isInitialized: !1, retryAttempts: 0 }
+    }, s = K(o, a);
+    return l.push(o), {
+      unsubscribe: () => {
+        s(), l = l.filter((d) => d.iframe !== i);
+      }
+    };
+  });
+};
+function N(e) {
+  return typeof e == "string" ? Array.from(document.querySelectorAll(e)).filter(h) : e ? h(e) ? [e] : [] : Array.from(document.getElementsByTagName("iframe"));
+}
+function G(e, t) {
+  if (Array.isArray(e.checkOrigin))
+    return e.checkOrigin;
+  if (!e.checkOrigin)
+    return [];
+  const n = [];
+  for (const r of t) {
+    const a = _(r);
+    a && n.push(a);
+  }
+  return n;
+}
+function K(e, t) {
+  const n = W(e.iframe) ? J(e) : V(e, t), r = Q(e);
+  return () => {
+    n(), r();
+  };
+}
+function V(e, t) {
+  const {
+    iframe: n,
+    initContext: r,
+    settings: { checkOrigin: a, enableLegacyLibSupport: i, targetElementSelector: o, bodyPadding: s, bodyMargin: d }
+  } = e, y = (c) => {
+    var b;
+    const I = !a || t.includes(c.origin);
+    if (!(n.contentWindow !== c.source || !I)) {
+      if (((b = c.data) == null ? void 0 : b.type) === "iframe-resized") {
+        const { height: u } = c.data;
+        u && m({ newHeight: u, registeredElement: e });
+        return;
+      }
+      if (i) {
+        const u = $(c);
+        u !== null && m({ newHeight: u, registeredElement: e });
+        return;
+      }
+    }
+  };
+  window.addEventListener("message", y);
+  const R = i ? q() : { type: "iframe-child-init", targetElementSelector: o, bodyPadding: s, bodyMargin: d }, p = () => {
+    C(n, () => {
+      var c;
+      return (c = n.contentWindow) == null ? void 0 : c.postMessage(R, "*");
+    }), r.retryAttempts++, r.retryTimeoutId = window.setTimeout(p, g(r.retryAttempts));
+  };
+  return p(), () => window.removeEventListener("message", y);
+}
+function J(e) {
+  const { iframe: t, settings: n } = e, { targetElementSelector: r } = n;
+  let a = 0;
+  const i = () => {
+    const o = f(t.contentDocument, r);
+    if (!t.contentDocument || !o)
+      return a++, setTimeout(i, g(a));
+    z(t.contentDocument, n), w().observe(o);
+  };
+  return x(t, i), () => {
+    const o = f(t.contentDocument, r);
+    o && w().unobserve(o), t.removeEventListener("load", i);
+  };
+}
+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 X() {
+  let e = null;
+  return () => {
+    if (!e) {
+      const t = ({ target: n }) => {
+        const r = l.find(({ iframe: d }) => d.contentDocument === n.ownerDocument);
+        if (!r)
+          return;
+        const { iframe: a, settings: i } = r, o = f(a.contentDocument, i.targetElementSelector);
+        if (!o)
+          return;
+        const { height: s } = S(o);
+        s && m({ newHeight: s, registeredElement: r });
+      };
+      e = new ResizeObserver((n) => n.forEach(t));
+    }
+    return e;
+  };
+}
+function m({ registeredElement: e, newHeight: t }) {
+  const { iframe: n, settings: r, interactionState: a, initContext: i } = e;
+  i.isInitialized || (i.isInitialized = !0, clearTimeout(i.retryTimeoutId));
+  const o = n.getBoundingClientRect(), s = t + r.offsetSize;
+  if (n.style.height = `${s}px`, !r.onIframeResize)
+    return;
+  const d = {
+    iframe: n,
+    settings: { ...r },
+    interactionState: { ...a },
+    previousRenderState: { rect: o },
+    nextRenderState: { rect: n.getBoundingClientRect() }
+  };
+  r.onIframeResize(d);
+}
+const Y = ee();
+let v = !1;
+Z();
+function Z() {
+  !E() || !D() || window.addEventListener("message", (e) => {
+    var t;
+    ((t = e.data) == null ? void 0 : t.type) === "iframe-child-init" && H(() => L(e));
+  });
+}
+function L(e, t = 0) {
+  const { targetElementSelector: n, bodyPadding: r, bodyMargin: a } = e.data, i = f(document, n);
+  if (v || window.parent !== e.source)
+    return;
+  if (!i)
+    return setTimeout(() => L(e, t + 1), g(t));
+  z(document, { bodyMargin: a, bodyPadding: r });
+  const o = Y();
+  o.disconnect(), o.observe(i), v = !0;
+}
+function ee() {
+  let e = null;
+  return () => (e || (e = new ResizeObserver((t) => {
+    if (!t[0].target)
+      return;
+    const { height: n, width: r } = S(t[0].target), a = {
+      type: "iframe-resized",
+      width: r,
+      height: n
+    };
+    window.parent.postMessage(a, "*");
+  })), e);
+}
+const te = /* @__PURE__ */ M({
+  __name: "IframeResizer",
+  props: {
+    offsetSize: {},
+    checkOrigin: { type: [Array, Boolean] },
+    enableLegacyLibSupport: { type: Boolean },
+    targetElementSelector: {},
+    bodyPadding: {},
+    bodyMargin: {},
+    onIframeResize: { type: Function }
+  },
+  setup(e) {
+    const t = e, n = k("iframe-ref");
+    let r = [];
+    const a = (i) => {
+      const o = {
+        offsetSize: t.offsetSize,
+        enableLegacyLibSupport: t.enableLegacyLibSupport,
+        checkOrigin: t.checkOrigin,
+        onIframeResize: t.onIframeResize,
+        targetElementSelector: t.targetElementSelector,
+        bodyMargin: t.bodyMargin,
+        bodyPadding: t.bodyPadding
+      };
+      Object.keys(o).forEach((s) => {
+        o[s] === void 0 && delete o[s];
+      }), r = j(o, i);
+    };
+    return O(() => {
+      n.value && a(n.value);
+    }), P(() => {
+      r.forEach((i) => i.unsubscribe()), r = [];
+    }), (i, o) => (B(), A("iframe", T({ ref: "iframe-ref" }, i.$attrs), null, 16));
+  }
+}), re = {
+  install(e) {
+    e.component("IframeResizer", te);
+  }
+};
+export {
+  te as IframeResizer,
+  re as IframeResizerPlugin
+};

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

@@ -0,0 +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 b=()=>typeof window<"u",k=()=>window.self!==window.top,h=e=>e instanceof HTMLIFrameElement,O=e=>{window.document.readyState==="complete"?e():window.addEventListener("load",e)},P=(e,t)=>{t(),e.addEventListener("load",t)},T=(e,t)=>{var n,i;const a=((n=e.contentWindow)==null?void 0:n.document.readyState)==="complete";return e.src!=="about:blank"&&((i=e.contentWindow)==null?void 0:i.location.href)!=="about:blank"&&a?t():e.addEventListener("load",t)},A=()=>({offsetSize:0,checkOrigin:!0,enableLegacyLibSupport:!1}),B=e=>{try{return new URL(e.src).origin===window.location.origin}catch{return!1}},D=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,v=(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,C=()=>"[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]")){const[t,n]=e.data.split(":"),i=+n;return i>0?i:null}return null}const S=N();let g=[];const F=(e,t)=>{if(!b())return[];const n={...A(),...H(e??{})},i=W(t),a=_(n,i);return i.map(r=>{const o={iframe:r,settings:n,interactionState:{isHovered:!1},initContext:{isInitialized:!1,retryAttempts:0}},c=j(o,a);return g.push(o),{unsubscribe:()=>{c(),g=g.filter(l=>l.iframe!==r)}}})};function W(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)).filter(h):e?h(e)?[e]:[]:Array.from(document.getElementsByTagName("iframe"))}function _(e,t){if(Array.isArray(e.checkOrigin))return e.checkOrigin;if(!e.checkOrigin)return[];const n=[];for(const i of t){const a=D(i);a&&n.push(a)}return n}function j(e,t){const n=B(e.iframe)?U(e):q(e,t),i=$(e);return()=>{n(),i()}}function q(e,t){const{iframe:n,initContext:i,settings:{checkOrigin:a,enableLegacyLibSupport:r,targetElementSelector:o,bodyPadding:c,bodyMargin:l}}=e,R=u=>{var M;const X=!a||t.includes(u.origin);if(!(n.contentWindow!==u.source||!X)){if(((M=u.data)==null?void 0:M.type)==="iframe-resized"){const{height:f}=u.data;f&&p({newHeight:f,registeredElement:e});return}if(r){const f=x(u);f!==null&&p({newHeight:f,registeredElement:e});return}}};window.addEventListener("message",R);const Q=r?C():{type:"iframe-child-init",targetElementSelector:o,bodyPadding:c,bodyMargin:l},I=()=>{P(n,()=>{var u;return(u=n.contentWindow)==null?void 0:u.postMessage(Q,"*")}),i.retryAttempts++,i.retryTimeoutId=window.setTimeout(I,y(i.retryAttempts))};return I(),()=>window.removeEventListener("message",R)}function U(e){const{iframe:t,settings:n}=e,{targetElementSelector:i}=n;let a=0;const r=()=>{const o=m(t.contentDocument,i);if(!t.contentDocument||!o)return a++,setTimeout(r,y(a));v(t.contentDocument,n),S().observe(o)};return T(t,r),()=>{const o=m(t.contentDocument,i);o&&S().unobserve(o),t.removeEventListener("load",r)}}function $({iframe:e,interactionState:t}){const n=()=>{t.isHovered=!0},i=()=>{t.isHovered=!1};return e.addEventListener("mouseenter",n),e.addEventListener("mouseleave",i),()=>{e.removeEventListener("mouseenter",n),e.removeEventListener("mouseleave",i)}}function N(){let e=null;return()=>{if(!e){const t=({target:n})=>{const i=g.find(({iframe:l})=>l.contentDocument===n.ownerDocument);if(!i)return;const{iframe:a,settings:r}=i,o=m(a.contentDocument,r.targetElementSelector);if(!o)return;const{height:c}=w(o);c&&p({newHeight:c,registeredElement:i})};e=new ResizeObserver(n=>n.forEach(t))}return e}}function p({registeredElement:e,newHeight:t}){const{iframe:n,settings:i,interactionState:a,initContext:r}=e;r.isInitialized||(r.isInitialized=!0,clearTimeout(r.retryTimeoutId));const o=n.getBoundingClientRect(),c=t+i.offsetSize;if(n.style.height=`${c}px`,!i.onIframeResize)return;const l={iframe:n,settings:{...i},interactionState:{...a},previousRenderState:{rect:o},nextRenderState:{rect:n.getBoundingClientRect()}};i.onIframeResize(l)}const V=K();let E=!1;G();function G(){!b()||!k()||window.addEventListener("message",e=>{var t;((t=e.data)==null?void 0:t.type)==="iframe-child-init"&&O(()=>z(e))})}function z(e,t=0){const{targetElementSelector:n,bodyPadding:i,bodyMargin:a}=e.data,r=m(document,n);if(E||window.parent!==e.source)return;if(!r)return setTimeout(()=>z(e,t+1),y(t));v(document,{bodyMargin:a,bodyPadding:i});const o=V();o.disconnect(),o.observe(r),E=!0}function K(){let e=null;return()=>(e||(e=new ResizeObserver(t=>{if(!t[0].target)return;const{height:n,width:i}=w(t[0].target),a={type:"iframe-resized",width:i,height:n};window.parent.postMessage(a,"*")})),e)}const L=s.defineComponent({__name:"IframeResizer",props:{offsetSize:{},checkOrigin:{type:[Array,Boolean]},enableLegacyLibSupport:{type:Boolean},targetElementSelector:{},bodyPadding:{},bodyMargin:{},onIframeResize:{type:Function}},setup(e){const t=e,n=s.useTemplateRef("iframe-ref");let i=[];const a=r=>{const o={offsetSize:t.offsetSize,enableLegacyLibSupport:t.enableLegacyLibSupport,checkOrigin:t.checkOrigin,onIframeResize:t.onIframeResize,targetElementSelector:t.targetElementSelector,bodyMargin:t.bodyMargin,bodyPadding:t.bodyPadding};Object.keys(o).forEach(c=>{o[c]===void 0&&delete o[c]}),i=F(o,r)};return s.onMounted(()=>{n.value&&a(n.value)}),s.onBeforeUnmount(()=>{i.forEach(r=>r.unsubscribe()),i=[]}),(r,o)=>(s.openBlock(),s.createElementBlock("iframe",s.mergeProps({ref:"iframe-ref"},r.$attrs),null,16))}}),J={install(e){e.component("IframeResizer",L)}};d.IframeResizer=L,d.IframeResizerPlugin=J,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@open-iframe-resizer/vue",
+  "private": false,
+  "version": "1.4.0",
+  "description": "Open-source modern iframe resizer component",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Lemick/open-iframe-resizer.git"
+  },
+  "keywords": [
+    "iframe",
+    "resizing",
+    "resizer",
+    "resize",
+    "cross-domain",
+    "same-origin",
+    "responsive iframe",
+    "vue iframe",
+    "iframe-resizer"
+  ],
+  "type": "module",
+  "main": "./dist/open-iframe-resizer-vue.umd.js",
+  "module": "./dist/open-iframe-resizer-vue.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/open-iframe-resizer-vue.es.js",
+      "require": "./dist/open-iframe-resizer-vue.umd.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE.md"
+  ],
+  "scripts": {
+    "build": "vue-tsc -b && npm run lint && vite build",
+    "lint": "biome lint ./src",
+    "dev": "concurrently \"vite build --watch \" \"npm run serve\"",
+    "serve": "concurrently \"vite --port 5552\" \"vite --port 5553\"",
+    "test": "npx playwright install --with-deps && npx playwright test"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@open-iframe-resizer/core": "1.4.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/tsconfig": "^0.7.0",
+    "vue-tsc": "^2.2.8",
+    "vue": "^3.5.13"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  }
+}