diff --git a/packages/floating-vue/package.json b/packages/floating-vue/package.json index caabf330..9d879c01 100644 --- a/packages/floating-vue/package.json +++ b/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" diff --git a/packages/floating-vue/src/components/Popper.ts b/packages/floating-vue/src/components/Popper.ts index db522ea4..a375dd8c 100644 --- a/packages/floating-vue/src/components/Popper.ts +++ b/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() }) diff --git a/packages/floating-vue/src/components/PopperContent.vue b/packages/floating-vue/src/components/PopperContent.vue index cdf6f7df..95f59a08 100644 --- a/packages/floating-vue/src/components/PopperContent.vue +++ b/packages/floating-vue/src/components/PopperContent.vue @@ -45,11 +45,6 @@
- - @@ -70,16 +65,11 @@