js-kompo-utils 1.0.27 → 1.0.28

package/components/VlSelect.vue

@@ -64,6 +64,7 @@
 </template>
 
 <script>
+import { autoUpdate, computePosition, flip, hide, offset, shift, size } from '@floating-ui/dom'
 import Select from 'vue-kompo/js/form/form-fields/Select.vue'
 
 export default {
@@ -71,7 +72,6 @@ export default {
     data() {
         return {
             flipUp: false,
-            panelStyle: null,
             isTouchDevice: false,
         }
     },
@@ -82,9 +82,11 @@ export default {
         forceUp() {
             return !!this.$_config('openUpward')
         },
+        forceDown() {
+            return !!this.$_config('openDownward') || this.$_config('autoOptionsPlacement') === false
+        },
         optionsStyle() {
-            if (!this.isFocused || !this.panelStyle) return { display: 'none' }
-            return this.panelStyle
+            return this.isFocused ? null : { display: 'none' }
         },
         useNativeMobile() {
             if (!this.$_config('native_on_mobile')) return false
@@ -115,25 +117,24 @@ export default {
     watch: {
         isFocused(focused) {
             if (focused) {
-                this.$nextTick(() => this.refresh())
                 this.attachListeners()
+                this.$nextTick(() => {
+                    this.teleportOptions()
+                    this.startPositioning()
+                })
             } else {
                 this.flipUp = false
-                this.panelStyle = null
                 this.detachListeners()
+                this.resetPanelStyles()
             }
         },
         filteredOptions() {
-            if (this.isFocused) this.$nextTick(() => this.refresh())
+            if (this.isFocused) this.$nextTick(() => this.queuePositionUpdate())
         },
         optionsKey() {
             this.$nextTick(() => {
                 this.teleportOptions()
-                if (this._panelObserver && this.$refs.selectOptions) {
-                    this._panelObserver.disconnect()
-                    this._panelObserver.observe(this.$refs.selectOptions)
-                }
-                if (this.isFocused) this.refresh()
+                if (this.isFocused) this.startPositioning()
             })
         },
     },
@@ -197,42 +198,13 @@ export default {
         anchorEl() {
             return this.$refs.taggableInput?.$el || this.$refs.input?.parentElement
         },
+        overlayAncestor(anchor = this.anchorEl()) {
+            return anchor?.closest('.kompoModal, .kompoDrawer, .vl-sidebar-l') || null
+        },
         attachListeners() {
             if (this._listenersAttached) return
-            this._rafId = null
-            this._onScroll = (e) => {
-                const opts = this.$refs.selectOptions
-                if (opts && e.target instanceof Node && opts.contains(e.target)) return
-                if (this._rafId) return
-                this._rafId = requestAnimationFrame(() => {
-                    this._rafId = null
-                    this.trackPosition()
-                })
-            }
-            this._onResize = () => this.refresh()
-            window.addEventListener('scroll', this._onScroll, true)
-            window.addEventListener('resize', this._onResize, { passive: true })
-
-            if (window.visualViewport) {
-                this._onViewportScroll = () => {
-                    if (this._rafId) return
-                    this._rafId = requestAnimationFrame(() => {
-                        this._rafId = null
-                        this.trackPosition()
-                    })
-                }
-                this._onViewportResize = () => this.refresh()
-                window.visualViewport.addEventListener('scroll', this._onViewportScroll)
-                window.visualViewport.addEventListener('resize', this._onViewportResize)
-            }
-
-            const opts = this.$refs.selectOptions
             const anchor = this.anchorEl()
             if (typeof ResizeObserver !== 'undefined') {
-                this._panelObserver = new ResizeObserver(() => {
-                    if (this.isFocused) this.trackPosition()
-                })
-                if (opts) this._panelObserver.observe(opts)
                 this._anchorObserver = new ResizeObserver((entries) => {
                     const entry = entries[0]
                     if (!entry) return
@@ -244,105 +216,142 @@ export default {
                 })
                 if (anchor) this._anchorObserver.observe(anchor)
             }
-            const inOverlay = !!(anchor && anchor.closest('.kompoModal, .kompoDrawer, .vl-sidebar-l'))
-            if (inOverlay && typeof IntersectionObserver !== 'undefined' && anchor) {
-                let intersectionInitialised = false
-                this._anchorIntersection = new IntersectionObserver((entries) => {
-                    const entry = entries[entries.length - 1]
-                    if (!entry) return
-                    if (!intersectionInitialised) {
-                        intersectionInitialised = true
-                        return
-                    }
-                    if (entry.intersectionRatio === 0) this.blur()
-                }, { threshold: 0 })
-                this._anchorIntersection.observe(anchor)
-            }
-
             this._listenersAttached = true
         },
         detachListeners() {
             if (!this._listenersAttached) return
-            if (this._rafId) {
-                cancelAnimationFrame(this._rafId)
-                this._rafId = null
-            }
-            window.removeEventListener('scroll', this._onScroll, true)
-            window.removeEventListener('resize', this._onResize)
-            if (window.visualViewport) {
-                if (this._onViewportScroll) {
-                    window.visualViewport.removeEventListener('scroll', this._onViewportScroll)
-                    this._onViewportScroll = null
-                }
-                if (this._onViewportResize) {
-                    window.visualViewport.removeEventListener('resize', this._onViewportResize)
-                    this._onViewportResize = null
-                }
-            }
-            if (this._panelObserver) {
-                this._panelObserver.disconnect()
-                this._panelObserver = null
-            }
+            this.stopPositioning()
             if (this._anchorObserver) {
                 this._anchorObserver.disconnect()
                 this._anchorObserver = null
             }
-            if (this._anchorIntersection) {
-                this._anchorIntersection.disconnect()
-                this._anchorIntersection = null
-            }
             this._listenersAttached = false
         },
-        trackPosition() {
+        startPositioning() {
             const opts = this.$refs.selectOptions
             const anchor = this.anchorEl()
-            if (!opts || !anchor) return
-            const rect = anchor.getBoundingClientRect()
-            const x = Math.round(rect.left)
-            const y = this.flipUp
-                ? Math.round(rect.top) - opts.offsetHeight + 1
-                : Math.round(rect.bottom) - 1
-            opts.style.transform = `translate3d(${x}px, ${y}px, 0)`
-            opts.style.width = Math.round(rect.width) + 'px'
+            if (!opts || !anchor || !this.isFocused) return
+
+            this.stopPositioning()
+            this.applyBasePanelStyles(opts, anchor)
+            opts.style.visibility = 'hidden'
+            opts.style.transform = 'translate3d(0px, 0px, 0)'
+
+            const updatePosition = () => this.queuePositionUpdate()
+            this._autoUpdateCleanup = autoUpdate(anchor, opts, updatePosition, {
+                ancestorScroll: true,
+                ancestorResize: true,
+                elementResize: true,
+                layoutShift: true,
+                animationFrame: true,
+            })
+
+            this.queuePositionUpdate(true)
+        },
+        stopPositioning() {
+            if (this._positionRafId) {
+                cancelAnimationFrame(this._positionRafId)
+                this._positionRafId = null
+            }
+            this._positionVersion = (this._positionVersion || 0) + 1
+            if (!this._autoUpdateCleanup) return
+            this._autoUpdateCleanup()
+            this._autoUpdateCleanup = null
         },
-        refresh() {
+        applyBasePanelStyles(opts, anchor) {
+            const inOverlay = !!this.overlayAncestor(anchor)
+            opts.style.position = 'fixed'
+            opts.style.top = '0px'
+            opts.style.left = '0px'
+            opts.style.bottom = 'auto'
+            opts.style.width = Math.round(anchor.getBoundingClientRect().width) + 'px'
+            opts.style.maxHeight = '240px'
+            opts.style.zIndex = inOverlay ? '5001' : '1000'
+            opts.style.willChange = 'transform'
+        },
+        resetPanelStyles() {
             const opts = this.$refs.selectOptions
-            const anchor = this.anchorEl()
-            if (!opts || !anchor) return
+            if (!opts) return
 
-            const rect = anchor.getBoundingClientRect()
-            const inOverlay = !!anchor.closest('.kompoModal, .kompoDrawer, .vl-sidebar-l')
-            const x = Math.round(rect.left)
-            const yBelow = Math.round(rect.bottom) - 1
-            const baseStyle = {
-                position: 'fixed',
-                top: '0px',
-                left: '0px',
-                bottom: 'auto',
-                width: Math.round(rect.width) + 'px',
-                zIndex: inOverlay ? 5001 : 1000,
-                transform: `translate3d(${x}px, ${yBelow}px, 0)`,
-                willChange: 'transform',
+            opts.style.position = ''
+            opts.style.top = ''
+            opts.style.left = ''
+            opts.style.bottom = ''
+            opts.style.transform = ''
+            opts.style.width = ''
+            opts.style.maxHeight = ''
+            opts.style.zIndex = ''
+            opts.style.willChange = ''
+            opts.style.visibility = ''
+            opts.style.borderRadius = ''
+        },
+        queuePositionUpdate(immediate = false) {
+            if (!this.isFocused) return
+            if (immediate) {
+                if (this._positionRafId) {
+                    cancelAnimationFrame(this._positionRafId)
+                    this._positionRafId = null
+                }
+                this.updatePosition()
+                return
             }
-            this.panelStyle = baseStyle
+            if (this._positionRafId) return
+            this._positionRafId = requestAnimationFrame(() => {
+                this._positionRafId = null
+                this.updatePosition()
+            })
+        },
+        placementConfig() {
+            if (this.forceUp) return { placement: 'top-start', auto: false }
+            if (this.forceDown) return { placement: 'bottom-start', auto: false }
+            return { placement: 'bottom-start', auto: true }
+        },
+        updatePosition() {
+            const opts = this.$refs.selectOptions
+            const anchor = this.anchorEl()
+            if (!opts || !anchor || !this.isFocused) return
 
-            this.$nextTick(() => {
-                const optsHeight = opts.offsetHeight
-                const vv = window.visualViewport
-                const viewportHeight = vv ? vv.height : window.innerHeight
-                const viewportTop = vv ? vv.offsetTop : 0
-                const spaceBelow = (viewportTop + viewportHeight) - rect.bottom
-                const spaceAbove = rect.top - viewportTop
-                const shouldFlip = this.forceUp || (spaceBelow < optsHeight && spaceAbove > spaceBelow)
-                this.flipUp = shouldFlip
-                if (shouldFlip) {
-                    const yAbove = Math.round(rect.top) - optsHeight + 1
-                    this.panelStyle = {
-                        ...baseStyle,
-                        transform: `translate3d(${x}px, ${yAbove}px, 0)`,
-                        borderRadius: '5px 5px 0 0',
-                    }
+            const floatingEl = opts
+            const referenceEl = anchor
+            const positionVersion = this._positionVersion || 0
+            const { placement, auto } = this.placementConfig()
+
+            const middleware = [
+                offset(-1),
+                ...(auto ? [flip({ fallbackPlacements: ['top-start'], padding: 8 })] : []),
+                shift({ padding: 8, crossAxis: true }),
+                size({
+                    padding: 8,
+                    apply: ({ availableHeight, rects, elements }) => {
+                        const maxHeight = Math.max(0, Math.min(240, Math.floor(availableHeight)))
+                        elements.floating.style.width = Math.round(rects.reference.width) + 'px'
+                        elements.floating.style.maxHeight = maxHeight + 'px'
+                    },
+                }),
+                hide(),
+            ]
+
+            computePosition(referenceEl, floatingEl, {
+                strategy: 'fixed',
+                placement,
+                middleware,
+            }).then(({ x, y, placement, middlewareData }) => {
+                if (positionVersion !== (this._positionVersion || 0)) return
+                if (!this.isFocused) return
+                if (floatingEl !== this.$refs.selectOptions || referenceEl !== this.anchorEl()) {
+                    this.$nextTick(() => {
+                        if (this.isFocused) this.startPositioning()
+                    })
+                    return
                 }
+
+                const hidden = middlewareData.hide?.referenceHidden || middlewareData.hide?.escaped
+                const flipsUp = placement.startsWith('top')
+
+                this.flipUp = flipsUp
+                floatingEl.style.transform = `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`
+                floatingEl.style.borderRadius = flipsUp ? '5px 5px 0 0' : '0 0 5px 5px'
+                floatingEl.style.visibility = hidden ? 'hidden' : 'visible'
             })
         },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-kompo-utils",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "description": "",
   "main": "app.js",
   "scripts": {