forked from srxl/akkoma-fe
hide results on outside click
This commit is contained in:
parent
6d3187b449
commit
787737c80d
5 changed files with 21 additions and 4 deletions
|
@ -27,6 +27,7 @@
|
|||
"popper.js": "^1.14.7",
|
||||
"sanitize-html": "^1.13.0",
|
||||
"sass-loader": "^4.0.2",
|
||||
"v-click-outside": "^2.1.1",
|
||||
"vue": "^2.5.13",
|
||||
"vue-chat-scroll": "^1.2.1",
|
||||
"vue-compose": "^0.7.1",
|
||||
|
|
|
@ -11,7 +11,8 @@ export default {
|
|||
return {
|
||||
query: '',
|
||||
results: [],
|
||||
timeout: null
|
||||
timeout: null,
|
||||
resultsVisible: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
@ -26,9 +27,18 @@ export default {
|
|||
this.results = []
|
||||
if (query) {
|
||||
userSearchApi.search({query, store: this.$store})
|
||||
.then((data) => { this.results = data })
|
||||
.then((data) => {
|
||||
this.results = data
|
||||
this.resultsVisible = true
|
||||
})
|
||||
}
|
||||
}, debounceMilliseconds)
|
||||
},
|
||||
onInputClick () {
|
||||
this.resultsVisible = true
|
||||
},
|
||||
onClickOutside () {
|
||||
this.resultsVisible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="user-autosuggest">
|
||||
<input v-model="query" placeholder="Search..." />
|
||||
<div class="user-autosuggest-results">
|
||||
<div class="user-autosuggest" v-click-outside="onClickOutside">
|
||||
<div class="user-autosuggest-results" v-if="resultsVisible">
|
||||
<BasicUserCard v-for="user in results" :key="user.id" :user="user"/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -22,6 +22,7 @@ import pushNotifications from './lib/push_notifications_plugin.js'
|
|||
import messages from './i18n/messages.js'
|
||||
|
||||
import VueChatScroll from 'vue-chat-scroll'
|
||||
import VueClickOutside from 'v-click-outside'
|
||||
|
||||
import afterStoreSetup from './boot/after_store.js'
|
||||
|
||||
|
@ -39,6 +40,7 @@ Vue.use(VueTimeago, {
|
|||
})
|
||||
Vue.use(VueI18n)
|
||||
Vue.use(VueChatScroll)
|
||||
Vue.use(VueClickOutside)
|
||||
|
||||
const i18n = new VueI18n({
|
||||
// By default, use the browser locale, we will update it if neccessary
|
||||
|
|
|
@ -6389,6 +6389,10 @@ uuid@^3.3.2:
|
|||
version "3.3.2"
|
||||
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
|
||||
|
||||
v-click-outside@^2.1.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/v-click-outside/-/v-click-outside-2.1.1.tgz#5af80b68a1c82eac89c597890434fa3994b42ed1"
|
||||
|
||||
validate-npm-package-license@^3.0.1:
|
||||
version "3.0.4"
|
||||
resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
|
||||
|
|
Loading…
Reference in a new issue