teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix: server autocomplete

Browse source
This commit is contained in:
Anthony Fu 2022-12-24 12:42:54 +01:00
parent ffe592cc57
commit e7b9b5b8a6
1 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
components/user/UserSignIn.vue
View file

@ -9,7 +9,8 @@ let busy = $ref<boolean>(false)
let error = $ref<boolean>(false) let error = $ref<boolean>(false)
let displayError = $ref<boolean>(false) let displayError = $ref<boolean>(false)
let knownServers = $ref<string[]>([]) let knownServers = $ref<string[]>([])
let acIndex = $ref(0) let autocompleteIndex = $ref(0)
let autocompleteShow = $ref(false)
async function oauth() { async function oauth() {
if (busy) if (busy)
@ -55,19 +56,22 @@ const filteredServers = $computed(() => {
return [] return []
const results = fuse.search(server, { limit: 6 }).map(result => result.item) const results = fuse.search(server, { limit: 6 }).map(result => result.item)
if (results.length === 1 && results[0] === server) if (results[0] === server)
return [] return []
return results return results
}) })
function move(delta: number) { function move(delta: number) {
acIndex = ((acIndex + delta) + filteredServers.length) % filteredServers.length autocompleteIndex = ((autocompleteIndex + delta) + filteredServers.length) % filteredServers.length
} }
function onEnter() { function onEnter(e: KeyboardEvent) {
if (filteredServers[acIndex]) if (autocompleteShow === true && filteredServers[autocompleteIndex]) {
server = filteredServers[acIndex] server = filteredServers[autocompleteIndex]
e.preventDefault()
autocompleteShow = false
}
} }
onMounted(async () => { onMounted(async () => {
@ -106,8 +110,12 @@ onMounted(async () => {
@keydown.down="move(1)" @keydown.down="move(1)"
@keydown.up="move(-1)" @keydown.up="move(-1)"
@keydown.enter="onEnter" @keydown.enter="onEnter"
@keydown.esc.prevent="autocompleteShow = false"
@blur="autocompleteShow = false"
@focus="autocompleteShow = true"
> >
<div <div
v-if="autocompleteShow && filteredServers.length"
absolute left-6em right-0 top="100%" absolute left-6em right-0 top="100%"
bg-base rounded border="~ base" bg-base rounded border="~ base"
text-left z-10 shadow of-auto text-left z-10 shadow of-auto
@ -117,7 +125,7 @@ onMounted(async () => {
:key="server" :key="server"
:value="server" :value="server"
px-2 py1 font-mono px-2 py1 font-mono
:class="acIndex === idx ? 'text-primary font-bold' : null" :class="autocompleteIndex === idx ? 'text-primary font-bold' : null"
> >
{{ server }} {{ server }}
</div> </div>