js-kompo-utils 1.0.20 → 1.0.22

package/components/VlDropdown.vue

@@ -63,6 +63,9 @@ export default {
         shouldShowMenu(visible) {
             if (visible) {
                 this.updatePosition()
+                this.attachListeners()
+            } else {
+                this.detachListeners()
             }
             if (!visible && this.openOnClick) {
                 this.open = false
@@ -147,11 +150,10 @@ export default {
     },
     mounted() {
         this.teleportMenu()
-        this.setupListeners()
     },
     beforeDestroy() {
         this.cleanupMenu()
-        this.removeListeners()
+        this.detachListeners()
     },
     methods:{
         teleportMenu() {
@@ -159,7 +161,7 @@ export default {
             const root = this.$refs.dropdownRoot
             if (!menu) return
 
-            this.inModal = !!(root && root.closest('.kompoModal'))
+            this.inModal = !!(root && root.closest('.kompoModal, .kompoDrawer, .vl-sidebar-l'))
 
             // Transfer scroll styles from root before teleporting
             if (root && root.classList.contains('dropdown-with-scroll')) {
@@ -182,27 +184,19 @@ export default {
                 clearTimeout(this._closeTimeout)
             }
         },
-        setupListeners() {
-            this._scrollHandler = () => {
-                if (this.shouldShowMenu) {
-                    requestAnimationFrame(() => this.updatePosition())
-                }
-            }
-            this._resizeHandler = () => {
-                if (this.shouldShowMenu) {
-                    this.updatePosition()
-                }
-            }
+        attachListeners() {
+            if (this._listenersAttached) return
+            this._scrollHandler = () => requestAnimationFrame(() => this.updatePosition())
+            this._resizeHandler = () => this.updatePosition()
             window.addEventListener('scroll', this._scrollHandler, true)
             window.addEventListener('resize', this._resizeHandler, { passive: true })
+            this._listenersAttached = true
         },
-        removeListeners() {
-            if (this._scrollHandler) {
-                window.removeEventListener('scroll', this._scrollHandler, true)
-            }
-            if (this._resizeHandler) {
-                window.removeEventListener('resize', this._resizeHandler)
-            }
+        detachListeners() {
+            if (!this._listenersAttached) return
+            window.removeEventListener('scroll', this._scrollHandler, true)
+            window.removeEventListener('resize', this._resizeHandler)
+            this._listenersAttached = false
         },
         updatePosition() {
             const root = this.$refs.dropdownRoot

package/components/VlSelect.vue

@@ -3,7 +3,8 @@
         <vlTaggableInput
             v-click-out="blur"
             v-bind="$_taggableInputAttributes"
-            v-on="$_taggableInputEvents">
+            v-on="$_taggableInputEvents"
+            ref="taggableInput">
             <template v-slot:prepend v-if="$_icon">
                 <div v-bind="prependIcon" />
             </template>
@@ -21,11 +22,11 @@
                 <div v-html="appendIcon"/>
             </template>
         </vlTaggableInput>
-        <div class="vlOptions"
+        <div class="vlOptions vlOptionsTeleported"
             :key="optionsKey"
             ref="selectOptions"
             :style="optionsStyle"
-            :class="{ 'vlOptionsFlipUp': flipUp }">
+            :class="{ 'vlOptionsFlipUp': flipUp, 'vlOptionsVisible': isFocused }">
             <template v-if="filteredOptions.length">
                 <div v-for="(option,key) in filteredOptions" :key="option.value" :ref="key"
                     class="vlOption"
@@ -58,6 +59,7 @@ export default {
     data() {
         return {
             flipUp: false,
+            panelStyle: null,
         }
     },
     computed: {
@@ -68,43 +70,98 @@ export default {
             return !!this.$_config('openUpward')
         },
         optionsStyle() {
-            if (!this.flipUp) return {}
-            return {
-                top: 'auto',
-                bottom: '100%',
-                borderRadius: '5px 5px 0 0',
-            }
+            if (!this.isFocused || !this.panelStyle) return { display: 'none' }
+            return this.panelStyle
         },
     },
     watch: {
         isFocused(focused) {
             if (focused) {
-                this.$nextTick(() => this.computeFlip())
+                this.$nextTick(() => this.refresh())
+                this.attachListeners()
             } else {
                 this.flipUp = false
+                this.panelStyle = null
+                this.detachListeners()
             }
         },
         filteredOptions() {
-            if (this.isFocused) {
-                this.$nextTick(() => this.computeFlip())
-            }
+            if (this.isFocused) this.$nextTick(() => this.refresh())
         },
     },
+    mounted() {
+        this.teleportOptions()
+    },
+    beforeDestroy() {
+        this.cleanupOptions()
+        this.detachListeners()
+    },
     methods: {
-        computeFlip() {
-            if (this.forceUp) {
-                this.flipUp = true
-                return
+        teleportOptions() {
+            const opts = this.$refs.selectOptions
+            if (opts && opts.parentNode !== document.body) {
+                document.body.appendChild(opts)
+            }
+        },
+        cleanupOptions() {
+            const opts = this.$refs.selectOptions
+            if (opts && opts.parentNode === document.body) {
+                document.body.removeChild(opts)
             }
+        },
+        anchorEl() {
+            return this.$refs.taggableInput?.$el || this.$refs.input?.parentElement
+        },
+        attachListeners() {
+            if (this._listenersAttached) return
+            this._onScroll = (e) => {
+                const opts = this.$refs.selectOptions
+                if (opts && e.target instanceof Node && opts.contains(e.target)) return
+                this.blur()
+            }
+            this._onResize = () => this.refresh()
+            window.addEventListener('scroll', this._onScroll, true)
+            window.addEventListener('resize', this._onResize, { passive: true })
+            this._listenersAttached = true
+        },
+        detachListeners() {
+            if (!this._listenersAttached) return
+            window.removeEventListener('scroll', this._onScroll, true)
+            window.removeEventListener('resize', this._onResize)
+            this._listenersAttached = false
+        },
+        refresh() {
             const opts = this.$refs.selectOptions
-            if (!opts) return
-            const anchor = opts.parentElement
-            if (!anchor) return
-            const anchorRect = anchor.getBoundingClientRect()
-            const optsHeight = opts.offsetHeight
-            const spaceBelow = window.innerHeight - anchorRect.bottom
-            const spaceAbove = anchorRect.top
-            this.flipUp = spaceBelow < optsHeight && spaceAbove > spaceBelow
+            const anchor = this.anchorEl()
+            if (!opts || !anchor) return
+
+            const rect = anchor.getBoundingClientRect()
+            const inOverlay = !!anchor.closest('.kompoModal, .kompoDrawer, .vl-sidebar-l')
+            const baseStyle = {
+                position: 'fixed',
+                left: rect.left + 'px',
+                width: rect.width + 'px',
+                zIndex: inOverlay ? 5001 : 1000,
+                top: rect.bottom + 'px',
+                bottom: 'auto',
+            }
+            this.panelStyle = baseStyle
+
+            this.$nextTick(() => {
+                const optsHeight = opts.offsetHeight
+                const spaceBelow = window.innerHeight - rect.bottom
+                const spaceAbove = rect.top
+                const shouldFlip = this.forceUp || (spaceBelow < optsHeight && spaceAbove > spaceBelow)
+                this.flipUp = shouldFlip
+                if (shouldFlip) {
+                    this.panelStyle = {
+                        ...baseStyle,
+                        top: 'auto',
+                        bottom: (window.innerHeight - rect.top) + 'px',
+                        borderRadius: '5px 5px 0 0',
+                    }
+                }
+            })
         },
     },
 }

package/package.json

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