js-kompo-utils 1.0.24 → 1.0.26

package/components/VlSelect.vue

@@ -27,9 +27,11 @@
                 class="vlNativeSelect"
                 :value="nativeValue"
                 @change="onNativeChange"
+                @mousedown="onNativeOpen"
+                @focus="onNativeOpen"
                 :style="nativeSelectStyle">
                 <option value="">{{ nativePlaceholder }}</option>
-                <option v-for="opt in options" :key="opt.value" :value="opt.value">{{ nativeLabel(opt) }}</option>
+                <option v-for="opt in nativeOptionsList" :key="opt.value" :value="opt.value">{{ nativeLabel(opt) }}</option>
             </select>
         </div>
         <div class="vlOptions vlOptionsTeleported"
@@ -86,7 +88,10 @@ export default {
         },
         useNativeMobile() {
             if (!this.$_config('native_on_mobile')) return false
-            return this.isTouchDevice && !this.$_multiple && !this.ajaxOptions
+            return this.isTouchDevice && !this.$_multiple
+        },
+        nativeOptionsList() {
+            return this.ajaxOptions ? this.filteredOptions : this.options
         },
         nativeValue() {
             return this.$_value && this.$_value.length ? this.$_value[0].value : ''
@@ -121,12 +126,25 @@ export default {
         filteredOptions() {
             if (this.isFocused) this.$nextTick(() => this.refresh())
         },
+        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()
+            })
+        },
     },
     mounted() {
         this.teleportOptions()
         if (typeof window !== 'undefined' && window.matchMedia) {
             this.isTouchDevice = window.matchMedia('(pointer: coarse)').matches
         }
+        if (this.useNativeMobile && this.ajaxOptions) {
+            this.$nextTick(() => this.onNativeOpen())
+        }
     },
     beforeDestroy() {
         this.cleanupOptions()
@@ -136,9 +154,19 @@ export default {
         onNativeChange(e) {
             const v = e.target.value
             if (v === '') return
-            const opt = this.options.find(o => String(o.value) === String(v))
+            const list = this.nativeOptionsList || []
+            const opt = list.find(o => String(o.value) === String(v))
             if (opt) this.select(opt)
         },
+        onNativeOpen() {
+            if (!this.ajaxOptions) return
+            if (this.ajaxOptionsFromField) {
+                this.$kompo.vlRequestFieldValue(this.kompoid, this.ajaxOptionsFromField, this.$_elKompoId)
+                this.performAjax(this.$_getFromStore())
+            } else {
+                this.performAjax('')
+            }
+        },
         nativeLabel(opt) {
             const l = opt.label
             let raw = ''
@@ -171,22 +199,99 @@ export default {
         },
         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
-                this.blur()
+                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._onViewportChange = () => {
+                    if (this._rafId) return
+                    this._rafId = requestAnimationFrame(() => {
+                        this._rafId = null
+                        this.refresh()
+                    })
+                }
+                window.visualViewport.addEventListener('resize', this._onViewportChange)
+                window.visualViewport.addEventListener('scroll', this._onViewportChange)
+            }
+
+            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
+                    const r = entry.contentRect
+                    const el = entry.target
+                    if (r.width === 0 || r.height === 0 || !el.isConnected) {
+                        this.blur()
+                    }
+                })
+                if (anchor) this._anchorObserver.observe(anchor)
+            }
+            if (typeof IntersectionObserver !== 'undefined' && anchor) {
+                this._anchorIntersection = new IntersectionObserver((entries) => {
+                    const entry = entries[entries.length - 1]
+                    if (entry && 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 (this._onViewportChange && window.visualViewport) {
+                window.visualViewport.removeEventListener('resize', this._onViewportChange)
+                window.visualViewport.removeEventListener('scroll', this._onViewportChange)
+                this._onViewportChange = null
+            }
+            if (this._panelObserver) {
+                this._panelObserver.disconnect()
+                this._panelObserver = null
+            }
+            if (this._anchorObserver) {
+                this._anchorObserver.disconnect()
+                this._anchorObserver = null
+            }
+            if (this._anchorIntersection) {
+                this._anchorIntersection.disconnect()
+                this._anchorIntersection = null
+            }
             this._listenersAttached = false
         },
+        trackPosition() {
+            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'
+        },
         refresh() {
             const opts = this.$refs.selectOptions
             const anchor = this.anchorEl()
@@ -194,27 +299,34 @@ export default {
 
             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',
-                left: rect.left + 'px',
-                width: rect.width + 'px',
-                zIndex: inOverlay ? 5001 : 1000,
-                top: rect.bottom + 'px',
+                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',
             }
             this.panelStyle = baseStyle
 
             this.$nextTick(() => {
                 const optsHeight = opts.offsetHeight
-                const spaceBelow = window.innerHeight - rect.bottom
-                const spaceAbove = rect.top
+                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,
-                        top: 'auto',
-                        bottom: (window.innerHeight - rect.top) + 'px',
+                        transform: `translate3d(${x}px, ${yAbove}px, 0)`,
                         borderRadius: '5px 5px 0 0',
                     }
                 }

package/package.json

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