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