js-kompo-utils 1.0.21 → 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() {
@@ -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,7 +59,7 @@ export default {
     data() {
         return {
             flipUp: false,
-            overlayStyle: null,
+            panelStyle: null,
         }
     },
     computed: {
@@ -69,51 +70,98 @@ export default {
             return !!this.$_config('openUpward')
         },
         optionsStyle() {
-            if (this.overlayStyle) return this.overlayStyle
-            if (this.flipUp) {
-                return { top: 'auto', bottom: '100%', borderRadius: '5px 5px 0 0' }
-            }
-            return {}
+            if (!this.isFocused || !this.panelStyle) return { display: 'none' }
+            return this.panelStyle
         },
     },
     watch: {
         isFocused(focused) {
             if (focused) {
                 this.$nextTick(() => this.refresh())
+                this.attachListeners()
             } else {
                 this.flipUp = false
-                this.overlayStyle = null
+                this.panelStyle = null
+                this.detachListeners()
             }
         },
         filteredOptions() {
             if (this.isFocused) this.$nextTick(() => this.refresh())
         },
     },
+    mounted() {
+        this.teleportOptions()
+    },
+    beforeDestroy() {
+        this.cleanupOptions()
+        this.detachListeners()
+    },
     methods: {
+        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
-            const anchor = opts && opts.parentElement
+            const anchor = this.anchorEl()
             if (!opts || !anchor) return
 
             const rect = anchor.getBoundingClientRect()
-            const optsHeight = opts.offsetHeight
-            const spaceBelow = window.innerHeight - rect.bottom
-            const spaceAbove = rect.top
-            this.flipUp = this.forceUp || (spaceBelow < optsHeight && spaceAbove > spaceBelow)
+            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
 
-            if (opts.closest('.kompoModal, .kompoDrawer, .vl-sidebar-l')) {
-                this.overlayStyle = {
-                    position: 'fixed',
-                    left: rect.left + 'px',
-                    width: rect.width + 'px',
-                    zIndex: 5001,
-                    ...(this.flipUp
-                        ? { top: 'auto', bottom: (window.innerHeight - rect.top) + 'px', borderRadius: '5px 5px 0 0' }
-                        : { top: rect.bottom + 'px', bottom: 'auto' }),
+            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',
+                    }
                 }
-            } else {
-                this.overlayStyle = null
-            }
+            })
         },
     },
 }

package/package.json

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