77 lines
1.4 KiB
Vue
77 lines
1.4 KiB
Vue
<template lang="html">
|
|
<v-autocomplete
|
|
v-model="model"
|
|
:search-input.sync="searchString"
|
|
:items="items"
|
|
:loading="!$subReady.searchIcons || isLoading"
|
|
item-text="name"
|
|
item-value="_id"
|
|
label="Search icons"
|
|
hide-no-data
|
|
@input="input"
|
|
>
|
|
<template
|
|
slot="item"
|
|
slot-scope="{ item, tile }"
|
|
>
|
|
<v-list-tile-avatar>
|
|
<svg class="avatar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" :d="item.shape"/></svg>
|
|
</v-list-tile-avatar>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title v-text="item.name"></v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</template>
|
|
</v-autocomplete>
|
|
</template>
|
|
|
|
<script>
|
|
import Icons from '/imports/api/icons/Icons.js';
|
|
|
|
export default {
|
|
data(){ return {
|
|
model: this.value,
|
|
searchString: null,
|
|
serverSearchString: null,
|
|
isLoading: false,
|
|
}},
|
|
props: {
|
|
value: String,
|
|
},
|
|
watch: {
|
|
searchString(string){
|
|
this.isLoading = true;
|
|
this.searchServer(string)
|
|
},
|
|
value(newValue){
|
|
this.model = newValue;
|
|
},
|
|
},
|
|
methods: {
|
|
searchServer: _.debounce(function(string){
|
|
this.serverSearchString = string;
|
|
}, 200),
|
|
input(e){
|
|
this.$emit('input', e);
|
|
}
|
|
},
|
|
meteor: {
|
|
$subscribe: {
|
|
searchIcons() {
|
|
this.isLoading = false;
|
|
return [this.serverSearchString];
|
|
},
|
|
},
|
|
items(){
|
|
return Icons.find({}, { sort: [['score', 'desc']] }).fetch();
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
.avatar {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|