From 758d68ca3773f5ea5e5e0c66d8e0ef28fd2a9368 Mon Sep 17 00:00:00 2001 From: Tim Grelka Date: Thu, 12 May 2022 11:07:22 +0200 Subject: [PATCH 1/3] feat: upgrade floating-ui/dom to 0.5.0 --- packages/floating-vue/package.json | 2 +- .../floating-vue/src/components/Popper.ts | 8 ++++---- yarn.lock | 20 +++++++++++++++++++ 3 files changed, 25 insertions(+), 5 deletions(-) diff --git a/packages/floating-vue/package.json b/packages/floating-vue/package.json index caabf330..6733aa95 100644 --- a/packages/floating-vue/package.json +++ b/packages/floating-vue/package.json @@ -15,7 +15,7 @@ "module": "dist/floating-vue.es.js", "types": "dist/index.d.ts", "dependencies": { - "@floating-ui/dom": "^0.1.10", + "@floating-ui/dom": "^0.5.0", "vue-resize": "^2.0.0-alpha.1" }, "peerDependencies": { diff --git a/packages/floating-vue/src/components/Popper.ts b/packages/floating-vue/src/components/Popper.ts index db522ea4..d9507aec 100644 --- a/packages/floating-vue/src/components/Popper.ts +++ b/packages/floating-vue/src/components/Popper.ts @@ -6,7 +6,7 @@ import { shift, flip, arrow, - getScrollParents, + getOverflowAncestors, size, } from '@floating-ui/dom' import { supportsPassive, isIOS } from '../util/env' @@ -633,7 +633,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 +716,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/yarn.lock b/yarn.lock index 80b071ad..de9a9133 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1294,6 +1294,11 @@ 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" @@ -1301,6 +1306,13 @@ 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" From 8b277ceec6c29472fef8265a5bac267f3f24e143 Mon Sep 17 00:00:00 2001 From: Tim Grelka Date: Thu, 12 May 2022 11:08:02 +0200 Subject: [PATCH 2/3] feat: use floating-ui autoUpdate instead of vue-resize --- packages/floating-vue/package.json | 3 +-- packages/floating-vue/src/components/Popper.ts | 16 ++++++++-------- .../src/components/PopperContent.vue | 10 ---------- .../src/components/PopperWrapper.vue | 2 -- 4 files changed, 9 insertions(+), 22 deletions(-) diff --git a/packages/floating-vue/package.json b/packages/floating-vue/package.json index 6733aa95..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.5.0", - "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 d9507aec..dda1af74 100644 --- a/packages/floating-vue/src/components/Popper.ts +++ b/packages/floating-vue/src/components/Popper.ts @@ -8,6 +8,7 @@ import { arrow, 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,9 @@ 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, this.$_computePosition) + this.$_swapTargetAttrs('title', 'data-original-title') this.$_detachPopperNode() @@ -500,6 +503,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 +518,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 @@ -643,6 +640,9 @@ export default () => defineComponent({ const data = await computePosition(this.$_referenceNode, this.$_popperNode, options) + // Emit resize-Event evevry time position is re-computed to replace onResize. + this.$emit('resize') + Object.assign(this.result, { x: data.x, y: data.y, 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 @@