Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages Activity

fix: allow clicking and scrolling autocompleted servers (#610)

Browse source
This commit is contained in:
Daniel Roe 2022-12-28 15:56:08 +01:00 committed by GitHub
parent 377072bea7
commit d569754b09
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
components/user/UserSignIn.vue
View file

@ -62,8 +62,12 @@ const filteredServers = $computed(() => {
return results return results
}) })
function toSelector(server: string) {
return server.replace(/[^\w-]/g, '-')
}
function move(delta: number) { function move(delta: number) {
autocompleteIndex = ((autocompleteIndex + delta) + filteredServers.length) % filteredServers.length autocompleteIndex = ((autocompleteIndex + delta) + filteredServers.length) % filteredServers.length
document.querySelector(`#${toSelector(filteredServers[autocompleteIndex])}`)?.scrollIntoView(false)
} }
function onEnter(e: KeyboardEvent) { function onEnter(e: KeyboardEvent) {
@ -74,6 +78,10 @@ function onEnter(e: KeyboardEvent) {
} }
} }
function select(index: number) {
server = filteredServers[index]
}
onMounted(async () => { onMounted(async () => {
input?.focus() input?.focus()
knownServers = await $fetch('/api/list-servers') knownServers = await $fetch('/api/list-servers')
@ -111,24 +119,27 @@ onMounted(async () => {
@keydown.up="move(-1)" @keydown.up="move(-1)"
@keydown.enter="onEnter" @keydown.enter="onEnter"
@keydown.esc.prevent="autocompleteShow = false" @keydown.esc.prevent="autocompleteShow = false"
@blur="autocompleteShow = false"
@focus="autocompleteShow = true" @focus="autocompleteShow = true"
> >
<div <div
v-if="autocompleteShow && filteredServers.length" 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 z-10 shadow of-auto
overflow-y-auto
class="max-h-[8rem]"
> >
<div <button
v-for="name, idx in filteredServers" v-for="name, idx in filteredServers"
:id="toSelector(name)"
:key="name" :key="name"
:value="name" :value="name"
px-2 py1 font-mono px-2 py1 font-mono w-full text-left
:class="autocompleteIndex === idx ? 'text-primary font-bold' : null" :class="autocompleteIndex === idx ? 'text-primary font-bold' : null"
@click="select(idx)"
> >
{{ name }} {{ name }}
</div> </button>
</div> </div>
</div> </div>
<div min-h-4> <div min-h-4>