forked from cerc-io/cosmos-explorer
129 lines
2.6 KiB
Vue
129 lines
2.6 KiB
Vue
<template>
|
|
<div class="app-auto-suggest">
|
|
<input
|
|
v-model="searchQuery"
|
|
type="text"
|
|
v-bind="inputProps"
|
|
>
|
|
<ul class="auto-suggest-suggestions-list">
|
|
<li
|
|
v-for="(suggestion_list, grp_name, grp_index) in filteredData"
|
|
:key="grp_index"
|
|
class="suggestions-groups-list"
|
|
>
|
|
|
|
<!-- Group Header -->
|
|
<p class="suggestion-group-title">
|
|
<slot
|
|
name="group"
|
|
:group_name="grp_name"
|
|
>
|
|
<span>
|
|
{{ grp_name }}
|
|
</span>
|
|
</slot>
|
|
</p>
|
|
|
|
<!-- Suggestion List of each group -->
|
|
<ul>
|
|
<li
|
|
v-for="(suggestion, index) in suggestion_list"
|
|
:key="index"
|
|
class="suggestion-group-suggestion cursor-pointer"
|
|
@click="suggestionSelected(suggestion)"
|
|
>
|
|
<slot
|
|
:name="grp_name"
|
|
:suggestion="suggestion"
|
|
>
|
|
<span>{{ suggestion[data[grp_name].key] }}</span>
|
|
</slot>
|
|
</li>
|
|
|
|
<li
|
|
v-if="!suggestion_list.length && searchQuery"
|
|
class="suggestion-group-suggestion no-results"
|
|
>
|
|
<slot
|
|
name="noResult"
|
|
:group_name="grp_name"
|
|
>
|
|
<p>No Results Found.</p>
|
|
</slot>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import useAutoSuggest from './useAutoSuggest'
|
|
|
|
export default {
|
|
props: {
|
|
inputProps: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
data: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
searchLimit: {
|
|
type: Number,
|
|
default: 4,
|
|
},
|
|
},
|
|
setup(props, { emit }) {
|
|
// eslint-disable-next-line no-console
|
|
console.warn('This component is still in Development. Please do not use it.')
|
|
|
|
const { searchQuery, filteredData, resetsearchQuery } = useAutoSuggest(props)
|
|
|
|
const suggestionSelected = suggestion => {
|
|
resetsearchQuery()
|
|
emit('suggestion-selected', suggestion)
|
|
}
|
|
|
|
return {
|
|
searchQuery, filteredData, suggestionSelected,
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
ul
|
|
{
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
.app-auto-suggest {
|
|
position: relative;
|
|
}
|
|
|
|
.auto-suggest-suggestions-list {
|
|
box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
|
|
border-radius: 6px;
|
|
position: absolute;
|
|
top: calc(100% + 1rem);
|
|
background-color: white;
|
|
width: 100%;
|
|
}
|
|
|
|
.suggestion-group-title {
|
|
font-weight: 500;
|
|
padding: .75rem 1rem .25rem;
|
|
}
|
|
|
|
.suggestion-group-suggestion {
|
|
padding: .75rem 1rem
|
|
}
|
|
</style>
|