clean search bar
This commit is contained in:
liangping
parent
64711bd99a
commit
f1e3e04e1f
@ -27,14 +27,9 @@
|
|||||||
<b-form-input
|
<b-form-input
|
||||||
v-if="showSearchBar"
|
v-if="showSearchBar"
|
||||||
v-model="searchQuery"
|
v-model="searchQuery"
|
||||||
placeholder="Explore Vuexy"
|
placeholder="Search Height/Transaction/Address"
|
||||||
autofocus
|
autofocus
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
@keyup.up="increaseIndex(false)"
|
|
||||||
@keyup.down="increaseIndex"
|
|
||||||
@keyup.esc="showSearchBar = false; resetsearchQuery()"
|
|
||||||
@keyup.enter="suggestionSelected"
|
|
||||||
@blur.stop="showSearchBar = false; resetsearchQuery()"
|
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="search-input-close"
|
class="search-input-close"
|
||||||
@ -42,109 +37,19 @@
|
|||||||
>
|
>
|
||||||
<feather-icon icon="XIcon" />
|
<feather-icon icon="XIcon" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Suggestions List -->
|
|
||||||
<vue-perfect-scrollbar
|
|
||||||
:settings="perfectScrollbarSettings"
|
|
||||||
class="search-list search-list-main scroll-area overflow-hidden"
|
|
||||||
:class="{'show': searchQuery}"
|
|
||||||
tagname="ul"
|
|
||||||
>
|
|
||||||
<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">
|
|
||||||
<span>
|
|
||||||
{{ title(grp_name) }}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- Suggestion List of each group -->
|
|
||||||
<ul>
|
|
||||||
<li
|
|
||||||
v-for="(suggestion, index) in suggestion_list"
|
|
||||||
:key="index"
|
|
||||||
class="suggestion-group-suggestion cursor-pointer"
|
|
||||||
:class="{'suggestion-current-selected': currentSelected === `${grp_index}.${index}`}"
|
|
||||||
@mouseenter="currentSelected = `${grp_index}.${index}`"
|
|
||||||
@mousedown.prevent="suggestionSelected(grp_name, suggestion)"
|
|
||||||
>
|
|
||||||
<b-link
|
|
||||||
v-if="grp_name === 'pages'"
|
|
||||||
class="p-0"
|
|
||||||
>
|
|
||||||
<feather-icon
|
|
||||||
:icon="suggestion.icon"
|
|
||||||
class="mr-75"
|
|
||||||
/>
|
|
||||||
<span class="align-middle">{{ suggestion.title }}</span>
|
|
||||||
</b-link>
|
|
||||||
<template v-else-if="grp_name === 'files'">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<b-img
|
|
||||||
:src="suggestion.icon"
|
|
||||||
class="mr-1"
|
|
||||||
height="32"
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<p>{{ suggestion.file_name }}</p>
|
|
||||||
<small>by {{ suggestion.from }}</small>
|
|
||||||
</div>
|
|
||||||
<small class="ml-auto">{{ suggestion.size }}</small>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="grp_name === 'contacts'">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<b-avatar
|
|
||||||
:src="suggestion.img"
|
|
||||||
class="mr-1"
|
|
||||||
size="32"
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<p>{{ suggestion.name }}</p>
|
|
||||||
<small>{{ suggestion.email }}</small>
|
|
||||||
</div>
|
|
||||||
<small class="ml-auto">{{ suggestion.time }}</small>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li
|
|
||||||
v-if="!suggestion_list.length && searchQuery"
|
|
||||||
class="suggestion-group-suggestion no-results"
|
|
||||||
>
|
|
||||||
<p>No Results Found.</p>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</vue-perfect-scrollbar>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import { BFormInput } from 'bootstrap-vue'
|
||||||
BFormInput, BLink, BImg, BAvatar,
|
import { ref } from '@vue/composition-api'
|
||||||
} from 'bootstrap-vue'
|
|
||||||
import { ref, watch } from '@vue/composition-api'
|
|
||||||
import VuePerfectScrollbar from 'vue-perfect-scrollbar'
|
|
||||||
import useAutoSuggest from '@core/components/app-auto-suggest/useAutoSuggest'
|
|
||||||
import { title } from '@core/utils/filter'
|
import { title } from '@core/utils/filter'
|
||||||
import router from '@/router'
|
|
||||||
import store from '@/store'
|
|
||||||
import searchAndBookmarkData from '../search-and-bookmark-data'
|
import searchAndBookmarkData from '../search-and-bookmark-data'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
BFormInput,
|
BFormInput,
|
||||||
BLink,
|
|
||||||
BImg,
|
|
||||||
BAvatar,
|
|
||||||
VuePerfectScrollbar,
|
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const showSearchBar = ref(false)
|
const showSearchBar = ref(false)
|
||||||
@ -153,113 +58,11 @@ export default {
|
|||||||
maxScrollbarLength: 60,
|
maxScrollbarLength: 60,
|
||||||
}
|
}
|
||||||
|
|
||||||
const suggestionSelected = (grpName, suggestion) => {
|
|
||||||
// If parameter is not provided => Use current selected
|
|
||||||
if (!suggestion) {
|
|
||||||
// If currentSelected value is -1 => No value/item is selected (Prevent Errors)
|
|
||||||
/* eslint-disable no-use-before-define, no-param-reassign */
|
|
||||||
if (currentSelected.value !== -1) {
|
|
||||||
/* eslint-disable no-use-before-define, no-param-reassign */
|
|
||||||
const [grpIndex, itemIndex] = currentSelected.value.split('.')
|
|
||||||
grpName = Object.keys(filteredData.value)[grpIndex]
|
|
||||||
suggestion = filteredData.value[grpName][itemIndex]
|
|
||||||
/* eslint-enable */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (grpName === 'pages') router.push(suggestion.route).catch(() => {})
|
|
||||||
// eslint-disable-next-line no-use-before-define
|
|
||||||
resetsearchQuery()
|
|
||||||
showSearchBar.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
const {
|
|
||||||
searchQuery,
|
|
||||||
resetsearchQuery,
|
|
||||||
filteredData,
|
|
||||||
} = useAutoSuggest({ data: searchAndBookmarkData, searchLimit: 4 })
|
|
||||||
|
|
||||||
watch(searchQuery, val => {
|
|
||||||
store.commit('app/TOGGLE_OVERLAY', Boolean(val))
|
|
||||||
})
|
|
||||||
|
|
||||||
const currentSelected = ref(-1)
|
|
||||||
watch(filteredData, val => {
|
|
||||||
if (!Object.values(val).some(obj => obj.length)) {
|
|
||||||
currentSelected.value = -1
|
|
||||||
} else {
|
|
||||||
// Auto Select first item if it's not item-404
|
|
||||||
let grpIndex = null
|
|
||||||
|
|
||||||
// eslint-disable-next-line no-restricted-syntax
|
|
||||||
for (const [index, grpSuggestions] of Object.values(val).entries()) {
|
|
||||||
if (grpSuggestions.length) {
|
|
||||||
grpIndex = index
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (grpIndex !== null) currentSelected.value = `${grpIndex}.0`
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const increaseIndex = (val = true) => {
|
|
||||||
/* eslint-disable no-lonely-if, no-plusplus */
|
|
||||||
|
|
||||||
// If there's no matching items
|
|
||||||
if (!Object.values(filteredData.value).some(grpItems => grpItems.length)) return
|
|
||||||
|
|
||||||
const [grpIndex, itemIndex] = currentSelected.value.split('.')
|
|
||||||
|
|
||||||
const grpArr = Object.entries(filteredData.value)
|
|
||||||
const activeGrpTotalItems = grpArr[grpIndex][1].length
|
|
||||||
|
|
||||||
if (val) {
|
|
||||||
// If active item is not of last item in grp
|
|
||||||
if (activeGrpTotalItems - 1 > itemIndex) {
|
|
||||||
currentSelected.value = `${grpIndex}.${Number(itemIndex) + 1}`
|
|
||||||
|
|
||||||
// If active item grp is not last in grp list
|
|
||||||
} else if (grpIndex < grpArr.length - 1) {
|
|
||||||
for (let i = Number(grpIndex) + 1; i < grpArr.length; i++) {
|
|
||||||
// If navigating group have items => Then move in that group
|
|
||||||
if (grpArr[i][1].length > 0) {
|
|
||||||
currentSelected.value = `${Number(i)}.0`
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// If active item is not of first item in grp
|
|
||||||
if (Number(itemIndex)) {
|
|
||||||
currentSelected.value = `${grpIndex}.${Number(itemIndex) - 1}`
|
|
||||||
|
|
||||||
// If active item grp is not first in grp list
|
|
||||||
} else if (Number(grpIndex)) {
|
|
||||||
for (let i = Number(grpIndex) - 1; i >= 0; i--) {
|
|
||||||
// If navigating group have items => Then move in that group
|
|
||||||
if (grpArr[i][1].length > 0) {
|
|
||||||
currentSelected.value = `${i}.${grpArr[i][1].length - 1}`
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* eslint-enable no-lonely-if, no-plusplus */
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
showSearchBar,
|
showSearchBar,
|
||||||
perfectScrollbarSettings,
|
perfectScrollbarSettings,
|
||||||
searchAndBookmarkData,
|
searchAndBookmarkData,
|
||||||
title,
|
title,
|
||||||
suggestionSelected,
|
|
||||||
currentSelected,
|
|
||||||
increaseIndex,
|
|
||||||
|
|
||||||
// AutoSuggest
|
|
||||||
searchQuery,
|
|
||||||
resetsearchQuery,
|
|
||||||
filteredData,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user