144 lines
4.4 KiB
Vue
144 lines
4.4 KiB
Vue
<template>
|
|
<div class="w-full">
|
|
<label v-if="label" class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">{{ label }}</label>
|
|
<div ref="wrapper" class="relative">
|
|
<form @submit.prevent="submitForm">
|
|
<div ref="inputWrapper" class="input-wrapper flex-wrap relative w-full shadow-sm flex items-center border border-gray-600 rounded px-2 py-2" :class="disabled ? 'pointer-events-none bg-black-300 text-gray-400' : 'bg-primary'">
|
|
<input ref="input" v-model="textInput" :disabled="disabled" :readonly="!editable" class="h-full w-full bg-transparent focus:outline-none px-1" @focus="inputFocus" @blur="inputBlur" @keydown="keydownHandler" />
|
|
</div>
|
|
</form>
|
|
|
|
<ul ref="menu" v-show="isFocused && itemsToShow.length" class="absolute z-50 mt-0 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
|
|
<template v-for="item in itemsToShow">
|
|
<li :key="item" class="text-gray-50 select-none relative py-2 pr-3 cursor-pointer hover:bg-black-400" :class="isMenuItemSelected(item) ? 'text-yellow-300' : ''" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
|
|
<div class="flex items-center">
|
|
<span class="font-normal ml-3 block truncate">{{ item }}</span>
|
|
</div>
|
|
<span v-if="input === item" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
|
|
<span class="material-symbols text-xl">check</span>
|
|
</span>
|
|
</li>
|
|
</template>
|
|
<li v-if="!itemsToShow.length" class="text-gray-50 select-none relative py-2 pr-9" role="option">
|
|
<div class="flex items-center justify-center">
|
|
<span class="font-normal">No items</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import menuKeyboardNavigationMixin from '@/mixins/menuKeyboardNavigation'
|
|
|
|
export default {
|
|
mixins: [menuKeyboardNavigationMixin],
|
|
props: {
|
|
value: [String, Number],
|
|
disabled: Boolean,
|
|
label: String,
|
|
items: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
editable: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
showAllWhenEmpty: Boolean
|
|
},
|
|
data() {
|
|
return {
|
|
isFocused: false,
|
|
textInput: null
|
|
}
|
|
},
|
|
watch: {
|
|
value: {
|
|
immediate: true,
|
|
handler(newVal) {
|
|
this.textInput = newVal
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
input: {
|
|
get() {
|
|
return this.value
|
|
},
|
|
set(val) {
|
|
this.$emit('input', val)
|
|
}
|
|
},
|
|
itemsToShow() {
|
|
if (!this.editable) return this.items
|
|
if (!this.textInput || this.textInput === this.input) {
|
|
if (this.showAllWhenEmpty) return this.items
|
|
return []
|
|
}
|
|
return this.items.filter((i) => {
|
|
var iValue = String(i).toLowerCase()
|
|
return iValue.includes(this.textInput.toLowerCase())
|
|
})
|
|
}
|
|
},
|
|
methods: {
|
|
keydownHandler(e) {
|
|
this.menuNavigationHandler(e)
|
|
},
|
|
setFocus() {
|
|
if (this.$refs.input && this.editable) this.$refs.input.focus()
|
|
},
|
|
inputFocus() {
|
|
this.isFocused = true
|
|
},
|
|
blur() {
|
|
// Handle blur immediately
|
|
this.isFocused = false
|
|
if (this.input !== this.textInput) {
|
|
var val = this.textInput ? this.textInput.trim() : null
|
|
this.input = val
|
|
if (val && !this.items.includes(val)) {
|
|
this.$emit('newItem', val)
|
|
}
|
|
}
|
|
|
|
if (this.$refs.input) {
|
|
this.$refs.input.blur()
|
|
}
|
|
},
|
|
inputBlur() {
|
|
if (!this.isFocused) return
|
|
|
|
setTimeout(() => {
|
|
if (document.activeElement === this.$refs.input) {
|
|
return
|
|
}
|
|
this.isFocused = false
|
|
if (this.input !== this.textInput) {
|
|
var val = this.textInput ? this.textInput.trim() : null
|
|
this.input = val
|
|
if (val && !this.items.includes(val)) {
|
|
this.$emit('newItem', val)
|
|
}
|
|
}
|
|
}, 50)
|
|
},
|
|
submitForm() {
|
|
var val = this.textInput ? this.textInput.trim() : null
|
|
this.input = val
|
|
if (val && !this.items.includes(val)) {
|
|
this.$emit('newItem', val)
|
|
}
|
|
},
|
|
clickedOption(e, item) {
|
|
this.textInput = null
|
|
this.input = item
|
|
if (this.$refs.input) this.$refs.input.blur()
|
|
}
|
|
},
|
|
mounted() {}
|
|
}
|
|
</script>
|