@iframe-resizer/vue 5.0.1-alpha.1 → 5.0.2

package/README.md

@@ -22,4 +22,4 @@ yarn add @iframe-resizer/vue
 
 ---
 
-_iframe-resizer version 5.0.1 2024-05-27 - 17:26:46.228Z_
+_iframe-resizer version 5.0.2 2024-05-30 - 17:45:53.360Z_

package/iframe-resizer.vue

@@ -1,35 +1,89 @@
 <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>
   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 || {}
+
+  export default {
+    name: 'IframeResizer',
+
+    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,
+      },
+    },
+    
+    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))
+
+      iframe.addEventListener("load", () => {
+        self.resizer = connectWithOptions(iframe)
+      })
     },
-    unmounted(el /*: HTMLElement */) {
-      const resizableEl = el /* as ResizableHTMLElement */
-      resizableEl?.iframeResizer.disconnect()
+    
+    beforeUnmount() {
+      this.resizer?.disconnect()
     },
-  }
 
-  export default resize
+    methods: {
+      moveToAnchor(anchor) {
+        this.resizer.moveToAnchor(anchor)
+      },
+      resize() {
+        this.resizer.resize()
+      },
+      sendMessage(msg, target) {
+        this.resizer.sendMessage(msg, target)
+      },
+    },
+  }
 
 </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.2 (cjs) - 2024-05-30
  *
  *  @license    GPL-3.0 for non-commercial use only.
  *              For commercial use, you must purchase a license from
@@ -19,17 +19,92 @@
 
 'use strict';
 
-require('@iframe-resizer/core');
+const connectResizer = require('@iframe-resizer/core');
 const vue = require('vue');
 
-const script = resize;
+const script = {
+    name: 'IframeResizer',
 
-const _hoisted_1 = { ref: "IframeResizer" };
+    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,
+      },
+    },
+    
+    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", () => {
+        self.resizer = connectWithOptions(iframe);
+      });
+    },
+    
+    beforeUnmount() {
+      this.resizer?.disconnect();
+    },
+
+    methods: {
+      moveToAnchor(anchor) {
+        this.resizer.moveToAnchor(anchor);
+      },
+      resize() {
+        this.resizer.resize();
+      },
+      sendMessage(msg, target) {
+        this.resizer.sendMessage(msg, target);
+      },
+    },
+  };
 
 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 (vue.openBlock(), vue.createElementBlock("iframe", vue.mergeProps({ ref: "iframe" }, _ctx.$attrs), null, 16 /* FULL_PROPS */))
 }
 
 script.render = render;

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.2 (esm) - 2024-05-30
  *
  *  @license    GPL-3.0 for non-commercial use only.
  *              For commercial use, you must purchase a license from
@@ -17,17 +17,92 @@
  */
 
 
-import '@iframe-resizer/core';
-import { openBlock, createElementBlock, renderSlot } from 'vue';
+import connectResizer from '@iframe-resizer/core';
+import { openBlock, createElementBlock, mergeProps } from 'vue';
 
-const script = resize;
+const script = {
+    name: 'IframeResizer',
 
-const _hoisted_1 = { ref: "IframeResizer" };
+    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,
+      },
+    },
+    
+    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", () => {
+        self.resizer = connectWithOptions(iframe);
+      });
+    },
+    
+    beforeUnmount() {
+      this.resizer?.disconnect();
+    },
+
+    methods: {
+      moveToAnchor(anchor) {
+        this.resizer.moveToAnchor(anchor);
+      },
+      resize() {
+        this.resizer.resize();
+      },
+      sendMessage(msg, target) {
+        this.resizer.sendMessage(msg, target);
+      },
+    },
+  };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1, [
-    renderSlot(_ctx.$slots, "default")
-  ], 512 /* NEED_PATCH */))
+  return (openBlock(), createElementBlock("iframe", mergeProps({ ref: "iframe" }, _ctx.$attrs), null, 16 /* FULL_PROPS */))
 }
 
 script.render = render;

package/index.umd.js

@@ -0,0 +1,122 @@
+/*!
+ *  @preserve
+ *  
+ *  @module     iframe-resizer/vue 5.0.2 (umd) - 2024-05-30
+ *
+ *  @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('@iframe-resizer/core'), require('vue')) :
+  typeof define === 'function' && define.amd ? define(['@iframe-resizer/core', 'vue'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.IframeResizer = factory(global.connectResizer, global.vue));
+})(this, (function (connectResizer, vue) { 'use strict';
+
+  const script = {
+      name: 'IframeResizer',
+
+      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,
+        },
+      },
+      
+      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", () => {
+          self.resizer = connectWithOptions(iframe);
+        });
+      },
+      
+      beforeUnmount() {
+        this.resizer?.disconnect();
+      },
+
+      methods: {
+        moveToAnchor(anchor) {
+          this.resizer.moveToAnchor(anchor);
+        },
+        resize() {
+          this.resizer.resize();
+        },
+        sendMessage(msg, target) {
+          this.resizer.sendMessage(msg, target);
+        },
+      },
+    };
+
+  function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return (vue.openBlock(), vue.createElementBlock("iframe", vue.mergeProps({ ref: "iframe" }, _ctx.$attrs), null, 16 /* FULL_PROPS */))
+  }
+
+  script.render = render;
+  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.1-alpha.1",
+  "version": "5.0.2",
   "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"
   },
@@ -41,6 +44,6 @@
     "vue"
   ],
   "dependencies": {
-    "@iframe-resizer/core": "5.0.1"
+    "@iframe-resizer/core": "5.0.2"
   }
 }