js-kompo-utils 1.0.21 → 1.0.23

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

@@ -1,31 +1,42 @@
 <template>
     <vl-form-field v-bind="$_wrapperAttributes">
-        <vlTaggableInput
-            v-click-out="blur"
-            v-bind="$_taggableInputAttributes"
-            v-on="$_taggableInputEvents">
-            <template v-slot:prepend v-if="$_icon">
-                <div v-bind="prependIcon" />
-            </template>
-            <input
-                class="vlFormControl"
-                v-bind="$_attributes"
-                v-on="$_events"
-                v-model="inputValue"
-                @keydown.enter.prevent="() => {}"
-                ref="input"
-                type="search"
-                autocomplete="off"
-            />
-            <template v-slot:append v-if="appendIcon && !$_readOnly">
-                <div v-html="appendIcon"/>
-            </template>
-        </vlTaggableInput>
-        <div class="vlOptions"
+        <div :style="useNativeMobile ? { position: 'relative' } : null">
+            <vlTaggableInput
+                v-click-out="blur"
+                v-bind="$_taggableInputAttributes"
+                v-on="$_taggableInputEvents"
+                ref="taggableInput">
+                <template v-slot:prepend v-if="$_icon">
+                    <div v-bind="prependIcon" />
+                </template>
+                <input
+                    class="vlFormControl"
+                    v-bind="$_attributes"
+                    v-on="$_events"
+                    v-model="inputValue"
+                    @keydown.enter.prevent="() => {}"
+                    ref="input"
+                    type="search"
+                    autocomplete="off"
+                />
+                <template v-slot:append v-if="appendIcon && !$_readOnly">
+                    <div v-html="appendIcon"/>
+                </template>
+            </vlTaggableInput>
+            <select v-if="useNativeMobile"
+                class="vlNativeSelect"
+                :value="nativeValue"
+                @change="onNativeChange"
+                :style="nativeSelectStyle">
+                <option value="">{{ nativePlaceholder }}</option>
+                <option v-for="opt in options" :key="opt.value" :value="opt.value">{{ nativeLabel(opt) }}</option>
+            </select>
+        </div>
+        <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 +69,8 @@ export default {
     data() {
         return {
             flipUp: false,
-            overlayStyle: null,
+            panelStyle: null,
+            isTouchDevice: false,
         }
     },
     computed: {
@@ -69,51 +81,135 @@ 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' }
+            if (!this.isFocused || !this.panelStyle) return { display: 'none' }
+            return this.panelStyle
+        },
+        useNativeMobile() {
+            if (this.$_config('disableNativeMobile')) return false
+            return this.isTouchDevice && !this.$_multiple && !this.ajaxOptions
+        },
+        nativeValue() {
+            return this.$_value && this.$_value.length ? this.$_value[0].value : ''
+        },
+        nativePlaceholder() {
+            return this.$_config('placeholder') || ''
+        },
+        nativeSelectStyle() {
+            return {
+                position: 'absolute',
+                top: 0, left: 0, right: 0, bottom: 0,
+                width: '100%', height: '100%',
+                opacity: 0,
+                appearance: 'none',
+                border: 0,
+                background: 'transparent',
+                zIndex: 2,
             }
-            return {}
         },
     },
     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()
+        if (typeof window !== 'undefined' && window.matchMedia) {
+            this.isTouchDevice = window.matchMedia('(pointer: coarse)').matches
+        }
+    },
+    beforeDestroy() {
+        this.cleanupOptions()
+        this.detachListeners()
+    },
     methods: {
+        onNativeChange(e) {
+            const v = e.target.value
+            if (v === '') return
+            const opt = this.options.find(o => String(o.value) === String(v))
+            if (opt) this.select(opt)
+        },
+        nativeLabel(opt) {
+            const l = opt.label
+            if (typeof l === 'string') return l
+            if (l && typeof l === 'object') return l.label || l.text || l.search || ''
+            return String(opt.value ?? '')
+        },
+        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.23",
   "description": "",
   "main": "app.js",
   "scripts": {