mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-06 20:29:08 +01:00
fix: allow clicking and scrolling autocompleted servers (#610)
This commit is contained in:
parent
377072bea7
commit
d569754b09
1 changed files with 16 additions and 5 deletions
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue