js-kompo-utils 1.0.19 → 1.0.20

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',
@@ -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,111 @@
+<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,
+        }
+    },
+    computed: {
+        isFocused() {
+            return this.$_state('focusedField')
+        },
+        forceUp() {
+            return !!this.$_config('openUpward')
+        },
+        optionsStyle() {
+            if (!this.flipUp) return {}
+            return {
+                top: 'auto',
+                bottom: '100%',
+                borderRadius: '5px 5px 0 0',
+            }
+        },
+    },
+    watch: {
+        isFocused(focused) {
+            if (focused) {
+                this.$nextTick(() => this.computeFlip())
+            } else {
+                this.flipUp = false
+            }
+        },
+        filteredOptions() {
+            if (this.isFocused) {
+                this.$nextTick(() => this.computeFlip())
+            }
+        },
+    },
+    methods: {
+        computeFlip() {
+            if (this.forceUp) {
+                this.flipUp = true
+                return
+            }
+            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
+        },
+    },
+}
+</script>

package/package.json

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