From d7f5828709a3cf7215660dfe83942b130aac78ec Mon Sep 17 00:00:00 2001
From: Divine <48183131+divine@users.noreply.github.com>
Date: Sun, 8 Dec 2024 14:25:08 +0300
Subject: [PATCH 1/8] feat: vue composition api use

---
 packages/vue/iframe-resizer.vue | 168 +++++++++++++++++---------------
 1 file changed, 89 insertions(+), 79 deletions(-)

diff --git a/packages/vue/iframe-resizer.vue b/packages/vue/iframe-resizer.vue
index 3e0b8a775..e25625aca 100644
--- a/packages/vue/iframe-resizer.vue
+++ b/packages/vue/iframe-resizer.vue
@@ -1,88 +1,98 @@
-<template>
-  <iframe ref="iframe" v-bind="$attrs"></iframe>
-</template>
+<script setup lang="ts">
+import connectResizer from '@iframe-resizer/core'
+import { defineEmits, defineProps, onBeforeUnmount, onMounted, ref } from 'vue'
 
-<script>
-  import connectResizer from '@iframe-resizer/core'
+interface IFrameObject {
+  moveToAnchor: (anchor: string) => void
+  resize: () => void
+  sendMessage: (message: string, targetOrigin?: string) => void
+  disconnect: () => void
+}
 
-  export default {
-    name: 'IframeResizer',
+const props = 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,
+  },
+})
 
-    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)
-        ),
-        waitForLoad: true,
+const emit = defineEmits<{
+  onReady: [...any[]]
+  onMessage: [...any[]]
+  onResized: [...any[]]
+}>()
 
-        onClosed: () => 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 iframeRef = ref<HTMLIFrameElement | null>(null)
+const resizer = ref<IFrameObject | null>(null)
 
-      const connectWithOptions = connectResizer(options)
+onMounted(() => {
+  if (!iframeRef.value)
+    return
 
-      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)
-      },
-    },
+  const options = {
+    ...Object.fromEntries(
+      Object.entries(props)
+        .filter(([_, value]) => value !== undefined),
+    ),
+    waitForLoad: true,
+    onClosed: () => false, // Disable close methods, use Vue to remove iframe
+    onReady: (...args: any[]) => emit('onReady', ...args),
+    onMessage: (...args: any[]) => emit('onMessage', ...args),
+    onResized: (...args: any[]) => emit('onResized', ...args),
   }
 
+  const connectWithOptions = connectResizer(options)
+  resizer.value = connectWithOptions(iframeRef.value)
+})
+
+onBeforeUnmount(() => {
+  resizer.value?.disconnect()
+})
+
+defineExpose({
+  moveToAnchor: (anchor: string) => {
+    resizer.value?.moveToAnchor(anchor)
+  },
+  resize: () => {
+    resizer.value?.resize()
+  },
+  sendMessage: (message: string, targetOrigin?: string) => {
+    resizer.value?.sendMessage(message, targetOrigin)
+  },
+})
 </script>
+
+<template>
+  <iframe ref="iframeRef" v-bind="$attrs" />
+</template>

From a655f2239a5c971af35de7cdd734ce71c27c4dad Mon Sep 17 00:00:00 2001
From: Divine <48183131+divine@users.noreply.github.com>
Date: Sun, 8 Dec 2024 14:40:43 +0300
Subject: [PATCH 2/8] move back to iframe const

---
 packages/vue/iframe-resizer.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/vue/iframe-resizer.vue b/packages/vue/iframe-resizer.vue
index e25625aca..19d383259 100644
--- a/packages/vue/iframe-resizer.vue
+++ b/packages/vue/iframe-resizer.vue
@@ -53,11 +53,11 @@ const emit = defineEmits<{
   onResized: [...any[]]
 }>()
 
-const iframeRef = ref<HTMLIFrameElement | null>(null)
+const iframe = ref<HTMLIFrameElement | null>(null)
 const resizer = ref<IFrameObject | null>(null)
 
 onMounted(() => {
-  if (!iframeRef.value)
+  if (!iframe.value)
     return
 
   const options = {
@@ -73,7 +73,7 @@ onMounted(() => {
   }
 
   const connectWithOptions = connectResizer(options)
-  resizer.value = connectWithOptions(iframeRef.value)
+  resizer.value = connectWithOptions(iframe.value)
 })
 
 onBeforeUnmount(() => {
@@ -94,5 +94,5 @@ defineExpose({
 </script>
 
 <template>
-  <iframe ref="iframeRef" v-bind="$attrs" />
+  <iframe ref="iframe" v-bind="$attrs" />
 </template>

From 302a97b90d7bd3a86d52cdb29a5687ccf3644db5 Mon Sep 17 00:00:00 2001
From: Divine <48183131+divine@users.noreply.github.com>
Date: Sun, 8 Dec 2024 14:43:49 +0300
Subject: [PATCH 3/8] make that type

---
 packages/vue/iframe-resizer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue/iframe-resizer.vue b/packages/vue/iframe-resizer.vue
index 19d383259..84bc463c2 100644
--- a/packages/vue/iframe-resizer.vue
+++ b/packages/vue/iframe-resizer.vue
@@ -2,7 +2,7 @@
 import connectResizer from '@iframe-resizer/core'
 import { defineEmits, defineProps, onBeforeUnmount, onMounted, ref } from 'vue'
 
-interface IFrameObject {
+type IFrameObject {
   moveToAnchor: (anchor: string) => void
   resize: () => void
   sendMessage: (message: string, targetOrigin?: string) => void

From cca51c439fd21502d82b6041a6c60d0aea6fdfc7 Mon Sep 17 00:00:00 2001
From: Divine <48183131+divine@users.noreply.github.com>
Date: Sun, 8 Dec 2024 14:48:44 +0300
Subject: [PATCH 4/8] feat: upgrade vue version to require v3

---
 build/pkgJson.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build/pkgJson.js b/build/pkgJson.js
index 9bc15c3d6..360db8881 100644
--- a/build/pkgJson.js
+++ b/build/pkgJson.js
@@ -37,7 +37,7 @@ const customConfig = (file) => {
           './sfc': 'iframe-resizer.vue',
         },
         peerDependencies: {
-          vue: '^2.6.0 || ^3.0.0',
+          vue: '^3.0.0',
         },
       }
 

From 816ba685a06a6f2f247947508c8313cb37bf2908 Mon Sep 17 00:00:00 2001
From: Divine <48183131+divine@users.noreply.github.com>
Date: Mon, 9 Dec 2024 12:22:34 +0300
Subject: [PATCH 5/8] make that interface instead

---
 packages/vue/iframe-resizer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue/iframe-resizer.vue b/packages/vue/iframe-resizer.vue
index 84bc463c2..19d383259 100644
--- a/packages/vue/iframe-resizer.vue
+++ b/packages/vue/iframe-resizer.vue
@@ -2,7 +2,7 @@
 import connectResizer from '@iframe-resizer/core'
 import { defineEmits, defineProps, onBeforeUnmount, onMounted, ref } from 'vue'
 
-type IFrameObject {
+interface IFrameObject {
   moveToAnchor: (anchor: string) => void
   resize: () => void
   sendMessage: (message: string, targetOrigin?: string) => void

From 30c9ccfed36b031ef5e2d9fad64af538411d3a03 Mon Sep 17 00:00:00 2001
From: Divine <48183131+divine@users.noreply.github.com>
Date: Mon, 9 Dec 2024 12:38:44 +0300
Subject: [PATCH 6/8] making sure we fix this type issue

---
 packages/vue/iframe-resizer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue/iframe-resizer.vue b/packages/vue/iframe-resizer.vue
index 19d383259..967677c4f 100644
--- a/packages/vue/iframe-resizer.vue
+++ b/packages/vue/iframe-resizer.vue
@@ -2,7 +2,7 @@
 import connectResizer from '@iframe-resizer/core'
 import { defineEmits, defineProps, onBeforeUnmount, onMounted, ref } from 'vue'
 
-interface IFrameObject {
+type IFrameObject = {
   moveToAnchor: (anchor: string) => void
   resize: () => void
   sendMessage: (message: string, targetOrigin?: string) => void

From a76a20b0dc6e363468b37cd01a8603a651cb5150 Mon Sep 17 00:00:00 2001
From: Divine <48183131+divine@users.noreply.github.com>
Date: Mon, 9 Dec 2024 12:41:47 +0300
Subject: [PATCH 7/8] add semicolomns

---
 packages/vue/iframe-resizer.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/vue/iframe-resizer.vue b/packages/vue/iframe-resizer.vue
index 967677c4f..07caa0aa9 100644
--- a/packages/vue/iframe-resizer.vue
+++ b/packages/vue/iframe-resizer.vue
@@ -3,10 +3,10 @@ import connectResizer from '@iframe-resizer/core'
 import { defineEmits, defineProps, onBeforeUnmount, onMounted, ref } from 'vue'
 
 type IFrameObject = {
-  moveToAnchor: (anchor: string) => void
-  resize: () => void
-  sendMessage: (message: string, targetOrigin?: string) => void
-  disconnect: () => void
+  moveToAnchor: (anchor: string) => void;
+  resize: () => void;
+  sendMessage: (message: string, targetOrigin?: string) => void;
+  disconnect: () => void;
 }
 
 const props = defineProps({

From 74ba3ebe04020714bbd0aa1692cce7a8eac9ee62 Mon Sep 17 00:00:00 2001
From: Divine <48183131+divine@users.noreply.github.com>
Date: Mon, 9 Dec 2024 12:42:54 +0300
Subject: [PATCH 8/8] Update iframe-resizer.vue

---
 packages/vue/iframe-resizer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue/iframe-resizer.vue b/packages/vue/iframe-resizer.vue
index 07caa0aa9..4da148f46 100644
--- a/packages/vue/iframe-resizer.vue
+++ b/packages/vue/iframe-resizer.vue
@@ -7,7 +7,7 @@ type IFrameObject = {
   resize: () => void;
   sendMessage: (message: string, targetOrigin?: string) => void;
   disconnect: () => void;
-}
+};
 
 const props = defineProps({
   license: {