From e8a6f7c6ddf1afd008b9ee34fe03e4dbb8e6d299 Mon Sep 17 00:00:00 2001
From: Kenneth Cheng <kenneth.cheng@ortholite.hk>
Date: Tue, 2 May 2023 20:47:53 +0800
Subject: [PATCH] revise $forceUpdate

---
 package-lock.json      |  2 +-
 package.json           |  2 +-
 src/VueExcelEditor.vue | 32 +++++++++++++++++++-------------
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3dad80d..18082fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "vue3-excel-editor",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 535964b..00776d0 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "vue3-excel-editor",
   "email": "apple.6502@gmail.com",
   "description": "Vue3 plugin for displaying and editing the array-of-object in Excel style",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "main": "src/main.js",
   "dependencies": {
     "@vuepic/vue-datepicker": "^3.3.0",
diff --git a/src/VueExcelEditor.vue b/src/VueExcelEditor.vue
index 640cefa..266f7df 100644
--- a/src/VueExcelEditor.vue
+++ b/src/VueExcelEditor.vue
@@ -511,7 +511,8 @@ export default {
           })
           if (valid) {
             this.fields = newFields
-            this.$forceUpdate()
+            const instance = getCurrentInstance()
+            instance?.proxy?.$forceUpdate()
           }
         }
       }
@@ -890,7 +891,8 @@ export default {
           else if (this.leftMost === -1) this.leftMost = left
         }
       })
-      this.$forceUpdate()
+      const instance = getCurrentInstance()
+      instance?.proxy?.$forceUpdate()
     },
     renderColumnCellStyle (field) {
       let result = field.initStyle
@@ -1110,7 +1112,8 @@ export default {
       this.vScroller.buttonHeight = Math.max(24, this.vScroller.height * ratio)
       const prop = (this.tableContent.scrollTop + this.pageTop * 24) / (this.table.length * 24 - this.vScroller.height)
       this.vScroller.buttonTop = (this.vScroller.height - this.vScroller.buttonHeight) * prop
-      this.$forceUpdate()
+      const instance = getCurrentInstance()
+      instance?.proxy?.$forceUpdate()
     },
     vsMouseDown (e) {
       e.stopPropagation()
@@ -1149,7 +1152,8 @@ export default {
         this.pageTop = Math.round((this.table.length - this.pageSize) * ratio)
       }
       this.vScroller.runner = ''
-      this.$forceUpdate()
+      const instance = getCurrentInstance()
+      instance?.proxy?.$forceUpdate()
     },
     vsbMouseMove (e) {
       if (e.buttons === 0)
@@ -1171,7 +1175,8 @@ export default {
             .filter((field, i) => field.keyField || field.sticky || this.sortPos === i)
             .map(field => field.label + ': ' + rec[field.name])
             .join('<br>')
-          this.$forceUpdate()
+          const instance = getCurrentInstance()
+          instance?.proxy?.$forceUpdate()
         }
       }
     },
@@ -1198,14 +1203,15 @@ export default {
       }
     },
     sbMouseUp () {
-        window.removeEventListener('mousemove', this.sbMouseMove)
-        window.removeEventListener('mouseup', this.sbMouseUp)
-        this.lazy(() => {
-          if (!this.$refs.hScroll) return
-          this.$refs.hScroll.classList.remove('focus')
-        })
-        this.hScroller.mouseX = 0
-        this.$forceUpdate()
+      window.removeEventListener('mousemove', this.sbMouseMove)
+      window.removeEventListener('mouseup', this.sbMouseUp)
+      this.lazy(() => {
+        if (!this.$refs.hScroll) return
+        this.$refs.hScroll.classList.remove('focus')
+      })
+      this.hScroller.mouseX = 0
+      const instance = getCurrentInstance()
+      instance?.proxy?.$forceUpdate()
     },
     sbMouseMove (e) {
       if (e.buttons === 0)