Use floating-ui’s autoUpdate to handle updates of positioning

packages/floating-vue/package.json

@@ -15,8 +15,7 @@
   "module": "dist/floating-vue.es.js",
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@floating-ui/dom": "^0.1.10",
-    "vue-resize": "^2.0.0-alpha.1"
+    "@floating-ui/dom": "^0.5.0"
   },
   "peerDependencies": {
     "vue": "^3.2.0"

packages/floating-vue/src/components/Popper.ts

@@ -6,8 +6,9 @@ import {
   shift,
   flip,
   arrow,
-  getScrollParents,
+  getOverflowAncestors,
   size,
+  autoUpdate,
 } from '@floating-ui/dom'
 import { supportsPassive, isIOS } from '../util/env'
 import { placements, Placement } from '../util/popper'
@@ -323,7 +324,6 @@ export default () => defineComponent({
         show: this.show,
         hide: this.hide,
         handleResize: this.handleResize,
-        onResize: this.onResize,
         classes: {
           ...this.classes,
           popperClass: this.popperClass,
@@ -484,6 +484,14 @@ export default () => defineComponent({
       this.$_innerNode = this.$_popperNode.querySelector('.v-popper__inner')
       this.$_arrowNode = this.$_popperNode.querySelector('.v-popper__arrow-container')
 
+      // Init autoUpdate
+      this.$_cleanup = autoUpdate(this.$_referenceNode, this.$_popperNode, async () => {
+        await this.$_computePosition()
+
+        // Emit resize-Event evevry time position is re-computed to replace onResize.
+        this.$emit('resize')
+      })
+
       this.$_swapTargetAttrs('title', 'data-original-title')
 
       this.$_detachPopperNode()
@@ -500,6 +508,7 @@ export default () => defineComponent({
     dispose () {
       if (this.$_isDisposed) return
       this.$_isDisposed = true
+      this.$_cleanup() // Cleanup autoUpdate
       this.$_removeEventListeners()
       this.hide({ skipDelay: true })
       this.$_detachPopperNode()
@@ -514,13 +523,6 @@ export default () => defineComponent({
       this.$emit('dispose')
     },
 
-    async onResize () {
-      if (this.isShown) {
-        await this.$_computePosition()
-        this.$emit('resize')
-      }
-    },
-
     async $_computePosition () {
       if (this.$_isDisposed || this.positioningDisabled) return
 
@@ -633,7 +635,7 @@ export default () => defineComponent({
         options.middleware.push(size({
           boundary: this.boundary,
           padding: this.overflowPadding,
-          apply: ({ width, height }) => {
+          apply: ({ availableWidth: width, availableHeight: height }) => {
             // Apply and re-compute
             this.$_innerNode.style.maxWidth = width != null ? `${width}px` : null
             this.$_innerNode.style.maxHeight = height != null ? `${height}px` : null
@@ -716,8 +718,8 @@ export default () => defineComponent({
       // Scroll
       if (!this.positioningDisabled) {
         this.$_registerEventListeners([
-          ...getScrollParents(this.$_referenceNode),
-          ...getScrollParents(this.$_popperNode),
+          ...getOverflowAncestors(this.$_referenceNode),
+          ...getOverflowAncestors(this.$_popperNode),
         ], 'scroll', () => {
           this.$_computePosition()
         })

packages/floating-vue/src/components/PopperContent.vue

@@ -45,11 +45,6 @@
           <div>
             <slot />
           </div>
-
-          <ResizeObserver
-            v-if="handleResize"
-            @notify="$emit('resize', $event)"
-          />
         </template>
       </div>
 
@@ -70,16 +65,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { ResizeObserver } from 'vue-resize'
 import ThemeClass from './ThemeClass'
 
 export default defineComponent({
   name: 'VPopperContent',
 
-  components: {
-    ResizeObserver,
-  },
-
   mixins: [
     ThemeClass(),
   ],

packages/floating-vue/src/components/PopperWrapper.vue

@@ -10,7 +10,6 @@
       show,
       hide,
       handleResize,
-      onResize,
       classes,
       result,
       attrs,
@@ -52,7 +51,6 @@
         :classes="classes"
         :result="result"
         @hide="hide"
-        @resize="onResize"
       >
         <slot
           name="popper"

yarn.lock

@@ -1294,13 +1294,25 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.3.1.tgz#3dde0ad0724d4b730567c92f49f0950910e18871"
   integrity sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g==
 
+"@floating-ui/core@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.7.0.tgz#f2442168d65c22daeb48cfb730cbc3a29a846ac7"
+  integrity sha512-W7+i5Suhhvv97WDTW//KqUA43f/2a4abprM1rWqtLM9lIlJ29tbFI8h232SvqunXon0WmKNEKVjbOsgBhTnbLw==
+
 "@floating-ui/dom@^0.1.10":
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.1.10.tgz#ce304136a52c71ef157826d2ebf52d68fa2deed5"
   integrity sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==
   dependencies:
     "@floating-ui/core" "^0.3.0"
 
+"@floating-ui/dom@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.5.0.tgz#e4efd9e609ff3ee6778fbe4273930d6d1c220f2e"
+  integrity sha512-PS75dnMg4GdWjDFOiOs15cDzYJpukRNHqQn0ugrBlsrpk2n+y8bwZ24XrsdLSL7kxshmxxr2nTNycLnmRIvV7g==
+  dependencies:
+    "@floating-ui/core" "^0.7.0"
+
 "@gar/promisify@^1.0.1":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -7666,6 +7678,14 @@ floating-vue@^1.0.0-beta.15:
     "@floating-ui/dom" "^0.1.10"
     vue-resize "^1.0.0"
 
+floating-vue@^2.0.0-beta.16:
+  version "2.0.0-beta.16"
+  resolved "https://registry.yarnpkg.com/floating-vue/-/floating-vue-2.0.0-beta.16.tgz#511d2eca106e67da6ccb4e85bb89c86b96297cbd"
+  integrity sha512-MoVA9pLGMVkuyG9cvlzpSB9//HGynbWnkLr0cxDgnEWORL98kuSa2ph/bcq7sDGNM3l0/3v6HYSqhBMBp9F3/A==
+  dependencies:
+    "@floating-ui/dom" "^0.1.10"
+    vue-resize "^2.0.0-alpha.1"
+
 flush-write-stream@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"