forked from rc/aircox
radiocampus: style update
This commit is contained in:
293
radiocampus/assets/src/components/AAutocomplete.vue
Normal file
293
radiocampus/assets/src/components/AAutocomplete.vue
Normal file
@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<div class="control">
|
||||
<input type="hidden" :name="name" :value="selectedValue"
|
||||
@change="$emit('change', $event)"/>
|
||||
<input type="text" ref="input" class="input is-fullwidth" :class="inputClass"
|
||||
v-show="!button || !selected"
|
||||
v-model="inputValue"
|
||||
:placeholder="placeholder"
|
||||
@keydown.capture="onKeyDown"
|
||||
@keyup="onKeyUp($event); $emit('keyup', $event)"
|
||||
@keydown="$emit('keydown', $event)"
|
||||
@keypress="$emit('keypress', $event)"
|
||||
@focus="onInputFocus" @blur="onBlur" />
|
||||
<a v-if="selected && button"
|
||||
class="button is-normal is-fullwidth has-text-left is-inline-block overflow-hidden"
|
||||
@click="select(-1, false, true)">
|
||||
<span class="icon is-small ml-1">
|
||||
<i class="fa fa-pen"></i>
|
||||
</span>
|
||||
<span class="is-inline-block" v-if="selected">
|
||||
<slot name="button" :index="selectedIndex" :item="selected"
|
||||
:value-field="valueField" :labelField="labelField">
|
||||
{{ selectedLabel }}
|
||||
</slot>
|
||||
</span>
|
||||
</a>
|
||||
<div :class="dropdownClass">
|
||||
<div class="dropdown-menu is-fullwidth">
|
||||
<div class="dropdown-content" style="overflow: hidden">
|
||||
<span v-for="(item, index) in items" :key="item.id"
|
||||
:data-autocomplete-index="index"
|
||||
@click="select(index, false, false)"
|
||||
:class="['dropdown-item', (index == this.cursor) ? 'is-active':'']"
|
||||
tabindex="-1">
|
||||
<slot name="item" :index="index" :item="item" :value-field="valueField"
|
||||
:labelField="labelField">
|
||||
{{ getValue(item, labelField) || item }}
|
||||
</slot>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import debounce from 'lodash/debounce'
|
||||
import Model from '../model'
|
||||
|
||||
|
||||
export default {
|
||||
emit: ['change', 'keypress', 'keydown', 'keyup', 'select', 'unselect',
|
||||
'update:modelValue'],
|
||||
|
||||
props: {
|
||||
//! Search URL (where `${query}` is replaced by search term)
|
||||
url: String,
|
||||
//! Extra GET url parameters
|
||||
urlParams: Object,
|
||||
//! Items' model
|
||||
model: Function,
|
||||
//! Input tag class
|
||||
inputClass: Array,
|
||||
//! input text placeholder
|
||||
placeholder: Object,
|
||||
//! input form field name
|
||||
name: String,
|
||||
//! Field on items to use as label
|
||||
labelField: String,
|
||||
//! Field on selected item to get selectedValue from, if any
|
||||
valueField: {type: String, default: null},
|
||||
count: {type: Number, count: 10},
|
||||
//! If true, show button when value has been selected
|
||||
button: Boolean,
|
||||
//! If true, value must come from a selection
|
||||
mustExist: {type: Boolean, default: false},
|
||||
//! Minimum input size before fetching
|
||||
minFetchLength: {type: Number, default: 3},
|
||||
modelValue: {default: ''},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
inputValue: this.modelValue || '',
|
||||
query: '',
|
||||
items: [],
|
||||
selectedIndex: -1,
|
||||
cursor: -1,
|
||||
promise: null,
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
modelValue(value) {
|
||||
this.inputValue = value
|
||||
},
|
||||
|
||||
inputValue(value, old) {
|
||||
if(value != old && value != this.modelValue) {
|
||||
this.$emit('update:modelValue', value)
|
||||
this.$emit('change', {target: this.$refs.input})
|
||||
}
|
||||
if(this.selectedLabel != value)
|
||||
this.selectedIndex = -1
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
fullUrl() {
|
||||
if(!this.urlParams)
|
||||
return this.url
|
||||
|
||||
const url = new URL(this.url, window.location.origin)
|
||||
const params = new URLSearchParams(url.searchParams)
|
||||
|
||||
for(var key in this.urlParams)
|
||||
params.set(key, this.urlParams[key])
|
||||
const join = this.url.indexOf("?") >= 0 ? "&" : "?"
|
||||
url.search = params.toString()
|
||||
return url.href
|
||||
},
|
||||
|
||||
isFetching() { return !!this.promise },
|
||||
|
||||
selected() {
|
||||
let index = this.selectedIndex
|
||||
if(index<0)
|
||||
return null
|
||||
index = Math.min(index, this.items.length-1)
|
||||
return this.items[index]
|
||||
},
|
||||
|
||||
selectedValue() {
|
||||
let value = this.itemValue(this.selected)
|
||||
if(!value && !this.mustExist)
|
||||
value = this.inputValue
|
||||
return value
|
||||
},
|
||||
|
||||
selectedLabel() {
|
||||
return this.itemLabel(this.selected)
|
||||
},
|
||||
|
||||
dropdownClass() {
|
||||
var active = this.cursor > -1 && this.items.length;
|
||||
if(active && this.items.length == 1 &&
|
||||
this.itemValue(this.items[0]) == this.inputValue)
|
||||
active = false
|
||||
return ['dropdown is-fullwidth', active ? 'is-active':'']
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
reset() {
|
||||
this.inputValue = ""
|
||||
this.selectedIndex = -1
|
||||
this.items = []
|
||||
},
|
||||
|
||||
// TODO: move to utils/data
|
||||
getValue(data, path=null) {
|
||||
if(!data)
|
||||
return null
|
||||
if(!path)
|
||||
return data
|
||||
|
||||
const paths = path.split('.')
|
||||
for(const key of paths) {
|
||||
if(key in data)
|
||||
data = data[key]
|
||||
else return null;
|
||||
}
|
||||
return data
|
||||
},
|
||||
|
||||
itemValue(item) {
|
||||
return this.valueField ? this.getValue(item, this.valueField) : item;
|
||||
},
|
||||
|
||||
itemLabel(item) {
|
||||
return this.labelField ? this.getValue(item, this.labelField) : item;
|
||||
},
|
||||
|
||||
hide() {
|
||||
this.cursor = -1;
|
||||
this.selectedIndex = -1;
|
||||
},
|
||||
|
||||
move(index=-1, relative=false) {
|
||||
if(relative)
|
||||
index += this.cursor
|
||||
this.cursor = Math.max(-1, Math.min(index, this.items.length-1))
|
||||
},
|
||||
|
||||
select(index=-1, relative=false, active=null) {
|
||||
if(relative)
|
||||
index += this.selectedIndex
|
||||
else if(index == this.selectedIndex)
|
||||
return
|
||||
|
||||
this.selectedIndex = Math.max(-1, Math.min(index, this.items.length-1))
|
||||
if(index >= 0) {
|
||||
this.inputValue = this.selectedLabel
|
||||
this.$refs.input.focus()
|
||||
}
|
||||
if(this.selectedIndex < 0)
|
||||
this.$emit('unselect')
|
||||
else
|
||||
this.$emit('select', index, this.selected, this.selectedValue)
|
||||
|
||||
if(active!==null)
|
||||
active && this.move(0) || this.move(-1)
|
||||
},
|
||||
|
||||
onInputFocus() {
|
||||
this.cursor < 0 && this.move(0)
|
||||
},
|
||||
|
||||
onBlur(event) {
|
||||
if(!this.items.length)
|
||||
return
|
||||
|
||||
var index = event.relatedTarget && Math.floor(event.relatedTarget.dataset.autocompleteIndex);
|
||||
if(index !== undefined && index !== null)
|
||||
this.select(index, false, false)
|
||||
this.cursor = -1;
|
||||
},
|
||||
|
||||
onKeyDown(event) {
|
||||
if(event.ctrlKey || event.altKey || event.metaKey)
|
||||
return
|
||||
switch(event.keyCode) {
|
||||
case 13: this.select(this.cursor, false, false)
|
||||
break
|
||||
case 27: this.hide(); this.select()
|
||||
break
|
||||
case 38: this.move(-1, true)
|
||||
break
|
||||
case 40: this.move(1, true)
|
||||
break
|
||||
default: return
|
||||
}
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
},
|
||||
|
||||
onKeyUp(event) {
|
||||
if(event.ctrlKey || event.altKey || event.metaKey)
|
||||
return
|
||||
|
||||
const value = event.target.value
|
||||
if(value === this.query)
|
||||
return
|
||||
|
||||
this.inputValue = value;
|
||||
if(!value)
|
||||
return this.selected && this.select(-1)
|
||||
if(!this.minFetchLength || value.length >= this.minFetchLength)
|
||||
this.fetch(value)
|
||||
},
|
||||
|
||||
fetch(query) {
|
||||
if(!query || this.promise)
|
||||
return
|
||||
|
||||
this.query = query
|
||||
var url = this.fullUrl.replace('${query}', query).replace('%24%7Bquery%7D', query)
|
||||
var promise = this.model ? this.model.fetch(url, {many:true})
|
||||
: fetch(url, Model.getOptions()).then(d => d.json())
|
||||
|
||||
promise = promise.then(items => {
|
||||
if(items.results)
|
||||
items = items.results
|
||||
this.items = items.filter((i) => i) || []
|
||||
this.promise = null;
|
||||
this.move(0)
|
||||
return items
|
||||
}, data => {this.promise = null; Promise.reject(data)})
|
||||
this.promise = promise
|
||||
return promise
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const form = this.$el.closest('form')
|
||||
form && form.addEventListener('reset', () => {
|
||||
this.inputValue = this.value;
|
||||
this.select(-1)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user