@iframe-resizer/vue 5.0.0-alpha.2 → 5.0.0-beta.1

package/README.md

@@ -22,4 +22,4 @@ yarn add @iframe-resizer/vue
 
 ---
 
-_iframe-resizer version 5.0.1 2024-05-27 - 18:04:32.155Z_
+_iframe-resizer version 5.0.1 2024-05-28 - 19:45:39.232Z_

package/iframe-resizer.vue

@@ -1,35 +1,79 @@
 <template>
-  <div ref='IframeResizer'>
-    <slot></slot>
-  </div>
+  <iframe ref="iframe" v-bind="$attrs"></iframe>
 </template>
 
-<script lang="ts">
-  // Rollup-plug-vue blows up with the types included!
-
+<script setup>
   import connectResizer from '@iframe-resizer/core'
-  // import { Directive, DirectiveBinding } from 'vue'
-
-  // interface ResizableHTMLElement extends HTMLElement {
-  //   iframeResizer?: {
-  //     moveToAnchor: (string) => void
-  //     resize: (x: number, y: number) => void
-  //     sendMessage: (string) => void
-  //   }
-  // }
-
-  const iframeResizer /* : Directive */ = {
-    mounted(el /* : HTMLElement */, binding /*: DirectiveBinding */) {
-      const options = binding.value || {}
+
+  const emit = defineEmits(['onReady', 'onMessage', 'onResized'])
+
+  defineProps({
+      license: {
+        type: String,
+        required: true
+      },
+      bodyBackground: {
+        type: String,
+      },
+      bodyMargin: {
+        type: String,
+      },
+      bodyPadding: {
+        type: String,
+      },
+      checkOrigin: {
+        type: Boolean,
+        default: true,
+      },
+      direction: {
+        type: String,
+      },
+      inPageLinks: {
+        type: Boolean,
+      },
+      offset: {
+        type: Number,
+      },
+      scrolling: {
+        type: Boolean,
+      },
+      tolerance: {
+        type: Number,
+      },
+      warningTimeout: {
+        type: Number,
+      },
+    })
+
+  defineOptions({
+    name: 'IframeResizer',
+    
+    mounted() {
+      const self = this
+      const { iframe } = this.$refs
+      const options = {
+        ...Object.fromEntries(
+          Object
+            .entries(this.$props)
+            .filter(([key, value]) => value !== undefined)
+        ),
+
+        onClose:() => false, // Disable close methods, use Vue to remove iframe
+        onReady: (...args) => self.$emit('onReady', ...args),
+        onMessage: (...args) => self.$emit('onMessage', ...args),
+        onResized: (...args) => self.$emit('onResized', ...args),
+      }
+
       const connectWithOptions = connectResizer(options)
-      el.addEventListener('load', () => connectWithOptions(el))
-    },
-    unmounted(el /*: HTMLElement */) {
-      const resizableEl = el /* as ResizableHTMLElement */
-      resizableEl?.iframeResizer.disconnect()
-    },
-  }
 
-  export default iframeResizer
+      iframe.addEventListener("load", () => connectWithOptions(iframe))
+    },
+    
+    beforeDestroy() {
+      if (this.$refs.iframe.iFrameResizer) {
+        this.$refs.iframe.iFrameResizer.disconnect();
+      }
+    }
+  })
 
 </script>

package/index.cjs.js

@@ -1,7 +1,7 @@
 /*!
  *  @preserve
  *  
- *  @module     iframe-resizer/vue 5.0.1 (cjs) - 2024-05-27
+ *  @module     iframe-resizer/vue 5.0.1 (cjs) - 2024-05-28
  *
  *  @license    GPL-3.0 for non-commercial use only.
  *              For commercial use, you must purchase a license from
@@ -19,45 +19,97 @@
 
 'use strict';
 
-const connectResizer = require('@iframe-resizer/core');
 const vue = require('vue');
+const connectResizer = require('@iframe-resizer/core');
 
-// import { Directive, DirectiveBinding } from 'vue'
+const script = /*#__PURE__*/Object.assign({
+    name: 'IframeResizer',
+    
+    mounted() {
+      const self = this;
+      const { iframe } = this.$refs;
+      const options = {
+        ...Object.fromEntries(
+          Object
+            .entries(this.$props)
+            .filter(([key, value]) => value !== undefined)
+        ),
 
-  // interface ResizableHTMLElement extends HTMLElement {
-  //   iframeResizer?: {
-  //     moveToAnchor: (string) => void
-  //     resize: (x: number, y: number) => void
-  //     sendMessage: (string) => void
-  //   }
-  // }
+        onClose:() => false, // Disable close methods, use Vue to remove iframe
+        onReady: (...args) => self.$emit('onReady', ...args),
+        onMessage: (...args) => self.$emit('onMessage', ...args),
+        onResized: (...args) => self.$emit('onResized', ...args),
+      };
 
-  const iframeResizer /* : Directive */ = {
-    mounted(el /* : HTMLElement */, binding /*: DirectiveBinding */) {
-      const options = binding.value || {};
       const connectWithOptions = connectResizer(options);
-      el.addEventListener('load', () => connectWithOptions(el));
+
+      iframe.addEventListener("load", () => connectWithOptions(iframe));
     },
-    unmounted(el /*: HTMLElement */) {
-      const resizableEl = el; /* as ResizableHTMLElement */
-      resizableEl?.iframeResizer.disconnect();
+    
+    beforeDestroy() {
+      if (this.$refs.iframe.iFrameResizer) {
+        this.$refs.iframe.iFrameResizer.disconnect();
+      }
+    }
+  }, {
+  __name: 'iframe-resizer',
+  props: {
+      license: {
+        type: String,
+        required: true
+      },
+      bodyBackground: {
+        type: String,
+      },
+      bodyMargin: {
+        type: String,
+      },
+      bodyPadding: {
+        type: String,
+      },
+      checkOrigin: {
+        type: Boolean,
+        default: true,
+      },
+      direction: {
+        type: String,
+      },
+      inPageLinks: {
+        type: Boolean,
+      },
+      offset: {
+        type: Number,
+      },
+      scrolling: {
+        type: Boolean,
+      },
+      tolerance: {
+        type: Number,
+      },
+      warningTimeout: {
+        type: Number,
+      },
     },
-  };
+  emits: ['onReady', 'onMessage', 'onResized'],
+  setup(__props, { emit: __emit }) {
+
+  
 
-const _hoisted_1 = { ref: "IframeResizer" };
+  
 
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-    vue.renderSlot(_ctx.$slots, "default")
-  ], 512 /* NEED_PATCH */))
+
+return (_ctx, _cache) => {
+  return (vue.openBlock(), vue.createElementBlock("iframe", vue.mergeProps({ ref: "iframe" }, _ctx.$attrs), null, 16 /* FULL_PROPS */))
+}
 }
 
-iframeResizer.render = render;
-iframeResizer.__file = "./iframe-resizer.vue";
+});
+
+script.__file = "./iframe-resizer.vue";
 
 const index = {
   install(Vue) {
-    Vue.component('IframeResizer', iframeResizer);
+    Vue.component('IframeResizer', script);
   },
 };
 

package/index.esm.js

@@ -1,7 +1,7 @@
 /*!
  *  @preserve
  *  
- *  @module     iframe-resizer/vue 5.0.1 (esm) - 2024-05-27
+ *  @module     iframe-resizer/vue 5.0.1 (esm) - 2024-05-28
  *
  *  @license    GPL-3.0 for non-commercial use only.
  *              For commercial use, you must purchase a license from
@@ -17,45 +17,97 @@
  */
 
 
+import { openBlock, createElementBlock, mergeProps } from 'vue';
 import connectResizer from '@iframe-resizer/core';
-import { openBlock, createElementBlock, renderSlot } from 'vue';
 
-// import { Directive, DirectiveBinding } from 'vue'
+const script = /*#__PURE__*/Object.assign({
+    name: 'IframeResizer',
+    
+    mounted() {
+      const self = this;
+      const { iframe } = this.$refs;
+      const options = {
+        ...Object.fromEntries(
+          Object
+            .entries(this.$props)
+            .filter(([key, value]) => value !== undefined)
+        ),
 
-  // interface ResizableHTMLElement extends HTMLElement {
-  //   iframeResizer?: {
-  //     moveToAnchor: (string) => void
-  //     resize: (x: number, y: number) => void
-  //     sendMessage: (string) => void
-  //   }
-  // }
+        onClose:() => false, // Disable close methods, use Vue to remove iframe
+        onReady: (...args) => self.$emit('onReady', ...args),
+        onMessage: (...args) => self.$emit('onMessage', ...args),
+        onResized: (...args) => self.$emit('onResized', ...args),
+      };
 
-  const iframeResizer /* : Directive */ = {
-    mounted(el /* : HTMLElement */, binding /*: DirectiveBinding */) {
-      const options = binding.value || {};
       const connectWithOptions = connectResizer(options);
-      el.addEventListener('load', () => connectWithOptions(el));
+
+      iframe.addEventListener("load", () => connectWithOptions(iframe));
     },
-    unmounted(el /*: HTMLElement */) {
-      const resizableEl = el; /* as ResizableHTMLElement */
-      resizableEl?.iframeResizer.disconnect();
+    
+    beforeDestroy() {
+      if (this.$refs.iframe.iFrameResizer) {
+        this.$refs.iframe.iFrameResizer.disconnect();
+      }
+    }
+  }, {
+  __name: 'iframe-resizer',
+  props: {
+      license: {
+        type: String,
+        required: true
+      },
+      bodyBackground: {
+        type: String,
+      },
+      bodyMargin: {
+        type: String,
+      },
+      bodyPadding: {
+        type: String,
+      },
+      checkOrigin: {
+        type: Boolean,
+        default: true,
+      },
+      direction: {
+        type: String,
+      },
+      inPageLinks: {
+        type: Boolean,
+      },
+      offset: {
+        type: Number,
+      },
+      scrolling: {
+        type: Boolean,
+      },
+      tolerance: {
+        type: Number,
+      },
+      warningTimeout: {
+        type: Number,
+      },
     },
-  };
+  emits: ['onReady', 'onMessage', 'onResized'],
+  setup(__props, { emit: __emit }) {
+
+  
+
+  
 
-const _hoisted_1 = { ref: "IframeResizer" };
 
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1, [
-    renderSlot(_ctx.$slots, "default")
-  ], 512 /* NEED_PATCH */))
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("iframe", mergeProps({ ref: "iframe" }, _ctx.$attrs), null, 16 /* FULL_PROPS */))
 }
+}
+
+});
 
-iframeResizer.render = render;
-iframeResizer.__file = "./iframe-resizer.vue";
+script.__file = "./iframe-resizer.vue";
 
 const index = {
   install(Vue) {
-    Vue.component('IframeResizer', iframeResizer);
+    Vue.component('IframeResizer', script);
   },
 };
 

package/index.umd.js

@@ -0,0 +1,119 @@
+/*!
+ *  @preserve
+ *  
+ *  @module     iframe-resizer/vue 5.0.1 (umd) - 2024-05-28
+ *
+ *  @license    GPL-3.0 for non-commercial use only.
+ *              For commercial use, you must purchase a license from
+ *              https://iframe-resizer.com/pricing
+ * 
+ *  @desciption Keep same and cross domain iFrames sized to their content 
+ *
+ *  @author     David J. Bradshaw <info@iframe-resizer.com>
+ * 
+ *  @see        {@link https://iframe-resizer.com}
+ * 
+ *  @copyright  (c) 2013 - 2024, David J. Bradshaw. All rights reserved.
+ */
+
+
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('vue'), require('@iframe-resizer/core')) :
+  typeof define === 'function' && define.amd ? define(['vue', '@iframe-resizer/core'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.IframeResizer = factory(global.vue, global.connectResizer));
+})(this, (function (vue, connectResizer) { 'use strict';
+
+  const script = /*#__PURE__*/Object.assign({
+      name: 'IframeResizer',
+      
+      mounted() {
+        const self = this;
+        const { iframe } = this.$refs;
+        const options = {
+          ...Object.fromEntries(
+            Object
+              .entries(this.$props)
+              .filter(([key, value]) => value !== undefined)
+          ),
+
+          onClose:() => false, // Disable close methods, use Vue to remove iframe
+          onReady: (...args) => self.$emit('onReady', ...args),
+          onMessage: (...args) => self.$emit('onMessage', ...args),
+          onResized: (...args) => self.$emit('onResized', ...args),
+        };
+
+        const connectWithOptions = connectResizer(options);
+
+        iframe.addEventListener("load", () => connectWithOptions(iframe));
+      },
+      
+      beforeDestroy() {
+        if (this.$refs.iframe.iFrameResizer) {
+          this.$refs.iframe.iFrameResizer.disconnect();
+        }
+      }
+    }, {
+    __name: 'iframe-resizer',
+    props: {
+        license: {
+          type: String,
+          required: true
+        },
+        bodyBackground: {
+          type: String,
+        },
+        bodyMargin: {
+          type: String,
+        },
+        bodyPadding: {
+          type: String,
+        },
+        checkOrigin: {
+          type: Boolean,
+          default: true,
+        },
+        direction: {
+          type: String,
+        },
+        inPageLinks: {
+          type: Boolean,
+        },
+        offset: {
+          type: Number,
+        },
+        scrolling: {
+          type: Boolean,
+        },
+        tolerance: {
+          type: Number,
+        },
+        warningTimeout: {
+          type: Number,
+        },
+      },
+    emits: ['onReady', 'onMessage', 'onResized'],
+    setup(__props, { emit: __emit }) {
+
+    
+
+    
+
+
+  return (_ctx, _cache) => {
+    return (vue.openBlock(), vue.createElementBlock("iframe", vue.mergeProps({ ref: "iframe" }, _ctx.$attrs), null, 16 /* FULL_PROPS */))
+  }
+  }
+
+  });
+
+  script.__file = "./iframe-resizer.vue";
+
+  const index = {
+    install(Vue) {
+      Vue.component('IframeResizer', script);
+    },
+  };
+
+  return index;
+
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iframe-resizer/vue",
-  "version": "5.0.0-alpha.2",
+  "version": "5.0.0-beta.1",
   "license": "GPL-3.0",
   "homepage": "https://iframe-resizer.com",
   "author": {
@@ -17,8 +17,11 @@
     "type": "individual",
     "url": "https://iframe-resizer.com/pricing/"
   },
-  "main": "index.cjs.js",
+  "main": "index.umd.js",
   "module": "index.esm.js",
+  "browser": {
+    "./sfc": "iframe-resizer.vue"
+  },
   "peerDependencies": {
     "vue": "^2.6.0 || ^3.0.0"
   },