js-kompo-utils 1.0.27 → 1.0.29

package/components/VlSelect.vue

@@ -34,11 +34,15 @@
                 <option v-for="opt in nativeOptionsList" :key="opt.value" :value="opt.value">{{ nativeLabel(opt) }}</option>
             </select>
         </div>
-        <div class="vlOptions vlOptionsTeleported"
+        <div class="vlOptions"
             :key="optionsKey"
             ref="selectOptions"
             :style="optionsStyle"
-            :class="{ 'vlOptionsFlipUp': flipUp, 'vlOptionsVisible': isFocused }">
+            :class="{
+                'vlOptionsTeleported': useFloatingOptions,
+                'vlOptionsFlipUp': useFloatingOptions && flipUp,
+                'vlOptionsVisible': useFloatingOptions && isFocused
+            }">
             <template v-if="filteredOptions.length">
                 <div v-for="(option,key) in filteredOptions" :key="option.value" :ref="key"
                     class="vlOption"
@@ -64,6 +68,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 +76,6 @@ export default {
     data() {
         return {
             flipUp: false,
-            panelStyle: null,
             isTouchDevice: false,
         }
     },
@@ -82,9 +86,18 @@ export default {
         forceUp() {
             return !!this.$_config('openUpward')
         },
+        forceDown() {
+            return !!this.$_config('openDownward') || this.$_config('autoOptionsPlacement') === false
+        },
+        useFloatingOptions() {
+            const explicitFloating = this.$_config('floatingOptions')
+            if (explicitFloating !== undefined && explicitFloating !== null) return !!explicitFloating
+
+            return !!this.$_config('teleportedOptions') || this.forceUp
+        },
         optionsStyle() {
-            if (!this.isFocused || !this.panelStyle) return { display: 'none' }
-            return this.panelStyle
+            if (!this.useFloatingOptions) return null
+            return this.isFocused ? null : { display: 'none' }
         },
         useNativeMobile() {
             if (!this.$_config('native_on_mobile')) return false
@@ -114,31 +127,39 @@ export default {
     },
     watch: {
         isFocused(focused) {
+            if (!this.useFloatingOptions) {
+                if (!focused) {
+                    this.flipUp = false
+                    this.detachListeners()
+                    this.resetPanelStyles()
+                }
+                return
+            }
             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.useFloatingOptions && this.isFocused) this.$nextTick(() => this.queuePositionUpdate())
         },
         optionsKey() {
+            if (!this.useFloatingOptions) return
             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()
             })
         },
     },
     mounted() {
-        this.teleportOptions()
+        if (this.useFloatingOptions) this.teleportOptions()
         if (typeof window !== 'undefined' && window.matchMedia) {
             this.isTouchDevice = window.matchMedia('(pointer: coarse)').matches
         }
@@ -182,57 +203,61 @@ export default {
             tmp.innerHTML = str
             return (tmp.textContent || tmp.innerText || '').trim()
         },
-        teleportOptions() {
+        teleportOptions(anchor = this.anchorEl()) {
+            if (!this.useFloatingOptions) return
             const opts = this.$refs.selectOptions
-            if (opts && opts.parentNode !== document.body) {
-                document.body.appendChild(opts)
+            const context = this.floatingContext(anchor)
+            const root = context?.root
+            if (opts && root && opts.parentNode !== root) {
+                root.appendChild(opts)
             }
         },
         cleanupOptions() {
+            if (!this.useFloatingOptions) return
             const opts = this.$refs.selectOptions
-            if (opts && opts.parentNode === document.body) {
-                document.body.removeChild(opts)
+            if (opts && opts.parentNode && this.$el && !this.$el.contains(opts)) {
+                opts.parentNode.removeChild(opts)
             }
         },
         anchorEl() {
             return this.$refs.taggableInput?.$el || this.$refs.input?.parentElement
         },
-        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()
-                })
+        overlayAncestor(anchor = this.anchorEl()) {
+            return anchor?.closest('.kompoModal, .kompoDrawer, .vl-sidebar-l, .vl-sidebar-r') || null
+        },
+        floatingContext(anchor = this.anchorEl()) {
+            if (!anchor || typeof document === 'undefined') return null
+
+            const drawerOrSidebar = anchor.closest('.kompoDrawer, .vl-sidebar-l, .vl-sidebar-r')
+            if (drawerOrSidebar && typeof window !== 'undefined') {
+                const position = window.getComputedStyle(drawerOrSidebar).position
+                if (position && position !== 'static') {
+                    return {
+                        root: drawerOrSidebar,
+                        strategy: 'absolute',
+                        zIndex: 5001,
+                    }
+                }
             }
-            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()
-                    })
+            if (this.overlayAncestor(anchor)) {
+                return {
+                    root: document.body,
+                    strategy: 'fixed',
+                    zIndex: 5001,
                 }
-                this._onViewportResize = () => this.refresh()
-                window.visualViewport.addEventListener('scroll', this._onViewportScroll)
-                window.visualViewport.addEventListener('resize', this._onViewportResize)
             }
 
-            const opts = this.$refs.selectOptions
+            return {
+                root: document.body,
+                strategy: 'absolute',
+                zIndex: 1000,
+            }
+        },
+        attachListeners() {
+            if (this._listenersAttached) return
             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 +269,157 @@ 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.teleportOptions(anchor)
+            const context = this.floatingContext(anchor)
+            if (!context) return
+            this.applyBasePanelStyles(opts, anchor, context)
+            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
+        },
+        applyBasePanelStyles(opts, anchor, context = this.floatingContext(anchor)) {
+            if (!context) return
+
+            opts.style.position = context.strategy
+            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 = String(context.zIndex)
+            opts.style.willChange = 'transform'
+        },
+        resetPanelStyles() {
+            const opts = this.$refs.selectOptions
+            if (!opts) return
+
+            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 = ''
         },
-        refresh() {
+        queuePositionUpdate(immediate = false) {
+            if (!this.isFocused) return
+            if (immediate) {
+                if (this._positionRafId) {
+                    cancelAnimationFrame(this._positionRafId)
+                    this._positionRafId = null
+                }
+                this.updatePosition()
+                return
+            }
+            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) return
+            if (!opts || !anchor || !this.isFocused) return
+
+            const floatingEl = opts
+            const referenceEl = anchor
+            const positionVersion = this._positionVersion || 0
+            const { placement, auto } = this.placementConfig()
+            const context = this.floatingContext(referenceEl)
+            if (!context) 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',
+            if (floatingEl.parentNode !== context.root) {
+                this.$nextTick(() => {
+                    if (this.isFocused) this.startPositioning()
+                })
+                return
             }
-            this.panelStyle = baseStyle
 
-            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',
-                    }
+            this.applyBasePanelStyles(floatingEl, referenceEl, context)
+
+            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: context.strategy,
+                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.29",
   "description": "",
   "main": "app.js",
   "scripts": {