js-kompo-utils 1.0.19 → 1.0.21

package/components/VlDropdown.vue

@@ -50,6 +50,7 @@ export default {
             menuLeft: -9999,
             menuRight: null,
             inModal: false,
+            autoFlipUp: false,
         }
     },
     watch:{
@@ -81,9 +82,12 @@ export default {
         isRightAligned() {
             return this.dropdownPosition.includes('Right')
         },
-        isUpward() {
+        forcedUpward() {
             return this.dropdownPosition.includes('Up')
         },
+        isUpward() {
+            return this.forcedUpward || this.autoFlipUp
+        },
         menuPositionStyle() {
             const style = {
                 position: 'fixed',
@@ -155,7 +159,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')) {
@@ -206,9 +210,15 @@ export default {
             if (!root) return
 
             const rect = root.getBoundingClientRect()
+            const menuHeight = menu ? menu.offsetHeight : 0
+
+            if (!this.forcedUpward) {
+                const spaceBelow = window.innerHeight - rect.bottom
+                const spaceAbove = rect.top
+                this.autoFlipUp = spaceBelow < menuHeight && spaceAbove > spaceBelow
+            }
 
             if (this.isUpward) {
-                const menuHeight = menu ? menu.offsetHeight : 0
                 this.menuTop = rect.top - menuHeight
             } else {
                 this.menuTop = rect.bottom

package/components/VlSelect.vue

@@ -0,0 +1,120 @@
+<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"
+            :key="optionsKey"
+            ref="selectOptions"
+            :style="optionsStyle"
+            :class="{ 'vlOptionsFlipUp': flipUp }">
+            <template v-if="filteredOptions.length">
+                <div v-for="(option,key) in filteredOptions" :key="option.value" :ref="key"
+                    class="vlOption"
+                    :class="{
+                        'vlSelected' : isSelected(option),
+                        'vlHoveredOption' : key == hoveredOption
+                    }"
+                    @click.stop="select(option)"
+                    @mouseover="setHoveredOption(key)">
+                    <vlCustomLabel :vkompo="option.label" :kompoid="kompoid" />
+                </div>
+            </template>
+            <template v-else>
+                <div class="vlOption" v-html="optionsMessage" />
+            </template>
+        </div>
+
+        <template v-slot:after>
+            <slot name="after"/>
+        </template>
+
+    </vl-form-field>
+</template>
+
+<script>
+import Select from 'vue-kompo/js/form/form-fields/Select.vue'
+
+export default {
+    extends: Select,
+    data() {
+        return {
+            flipUp: false,
+            overlayStyle: null,
+        }
+    },
+    computed: {
+        isFocused() {
+            return this.$_state('focusedField')
+        },
+        forceUp() {
+            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 {}
+        },
+    },
+    watch: {
+        isFocused(focused) {
+            if (focused) {
+                this.$nextTick(() => this.refresh())
+            } else {
+                this.flipUp = false
+                this.overlayStyle = null
+            }
+        },
+        filteredOptions() {
+            if (this.isFocused) this.$nextTick(() => this.refresh())
+        },
+    },
+    methods: {
+        refresh() {
+            const opts = this.$refs.selectOptions
+            const anchor = opts && opts.parentElement
+            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)
+
+            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' }),
+                }
+            } else {
+                this.overlayStyle = null
+            }
+        },
+    },
+}
+</script>

package/package.json

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