js-kompo-utils 1.0.28 → 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"
@@ -85,7 +89,14 @@ export default {
         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.useFloatingOptions) return null
             return this.isFocused ? null : { display: 'none' }
         },
         useNativeMobile() {
@@ -116,6 +127,14 @@ export default {
     },
     watch: {
         isFocused(focused) {
+            if (!this.useFloatingOptions) {
+                if (!focused) {
+                    this.flipUp = false
+                    this.detachListeners()
+                    this.resetPanelStyles()
+                }
+                return
+            }
             if (focused) {
                 this.attachListeners()
                 this.$nextTick(() => {
@@ -129,9 +148,10 @@ export default {
             }
         },
         filteredOptions() {
-            if (this.isFocused) this.$nextTick(() => this.queuePositionUpdate())
+            if (this.useFloatingOptions && this.isFocused) this.$nextTick(() => this.queuePositionUpdate())
         },
         optionsKey() {
+            if (!this.useFloatingOptions) return
             this.$nextTick(() => {
                 this.teleportOptions()
                 if (this.isFocused) this.startPositioning()
@@ -139,7 +159,7 @@ export default {
         },
     },
     mounted() {
-        this.teleportOptions()
+        if (this.useFloatingOptions) this.teleportOptions()
         if (typeof window !== 'undefined' && window.matchMedia) {
             this.isTouchDevice = window.matchMedia('(pointer: coarse)').matches
         }
@@ -183,23 +203,56 @@ 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
         },
         overlayAncestor(anchor = this.anchorEl()) {
-            return anchor?.closest('.kompoModal, .kompoDrawer, .vl-sidebar-l') || null
+            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,
+                    }
+                }
+            }
+
+            if (this.overlayAncestor(anchor)) {
+                return {
+                    root: document.body,
+                    strategy: 'fixed',
+                    zIndex: 5001,
+                }
+            }
+
+            return {
+                root: document.body,
+                strategy: 'absolute',
+                zIndex: 1000,
+            }
         },
         attachListeners() {
             if (this._listenersAttached) return
@@ -233,7 +286,10 @@ export default {
             if (!opts || !anchor || !this.isFocused) return
 
             this.stopPositioning()
-            this.applyBasePanelStyles(opts, anchor)
+            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)'
 
@@ -258,15 +314,16 @@ export default {
             this._autoUpdateCleanup()
             this._autoUpdateCleanup = null
         },
-        applyBasePanelStyles(opts, anchor) {
-            const inOverlay = !!this.overlayAncestor(anchor)
-            opts.style.position = 'fixed'
+        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 = inOverlay ? '5001' : '1000'
+            opts.style.zIndex = String(context.zIndex)
             opts.style.willChange = 'transform'
         },
         resetPanelStyles() {
@@ -315,6 +372,17 @@ export default {
             const referenceEl = anchor
             const positionVersion = this._positionVersion || 0
             const { placement, auto } = this.placementConfig()
+            const context = this.floatingContext(referenceEl)
+            if (!context) return
+
+            if (floatingEl.parentNode !== context.root) {
+                this.$nextTick(() => {
+                    if (this.isFocused) this.startPositioning()
+                })
+                return
+            }
+
+            this.applyBasePanelStyles(floatingEl, referenceEl, context)
 
             const middleware = [
                 offset(-1),
@@ -332,7 +400,7 @@ export default {
             ]
 
             computePosition(referenceEl, floatingEl, {
-                strategy: 'fixed',
+                strategy: context.strategy,
                 placement,
                 middleware,
             }).then(({ x, y, placement, middlewareData }) => {

package/package.json

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