TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-22 12:03:25 -04:00
Code Issues Packages Projects Releases Wiki Activity

(search) open external links in a new tab, fix keyboard navigation for external links

Browse Source
This commit is contained in:
Valentyne Stigloher 2025-04-15 11:19:16 +02:00
parent 1407dbcb78
commit 31d57ef7af
2 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/search/SearchForm.vue
View File

@ -49,7 +49,7 @@ onKeyStroke('k', (event) => {
}); });
const selected = ref<number | null>(null); const selected = ref<number | null>(null);
const router = useRouter(); const searchItems = useTemplateRef('searchItems');
onKeyStroke('ArrowDown', () => { onKeyStroke('ArrowDown', () => {
selected.value = Math.min( selected.value = Math.min(
(selected.value ?? -1) + 1, (selected.value ?? -1) + 1,
@ -72,8 +72,8 @@ onKeyStroke('Enter', () => {
return; return;
} }
router.push(document.url); const link = searchItems.value?.[selected.value]?.firstElementChild as HTMLElement | undefined;
emit('selected'); link?.click();
}); });
const reset = () => { const reset = () => {
@ -112,6 +112,7 @@ defineExpose({ reset });
<li <li
v-for="(document, index) of searchAsyncData.data.value" v-for="(document, index) of searchAsyncData.data.value"
:key="`${document.kind}-${document.id}`" :key="`${document.kind}-${document.id}`"
ref="searchItems"
:class="['list-group-item list-group-item-action py-0 pe-0', selected === index ? 'list-group-item-active' : '']" :class="['list-group-item list-group-item-action py-0 pe-0', selected === index ? 'list-group-item-active' : '']"
> >
<SearchItem :document="document" @click="emit('selected')" /> <SearchItem :document="document" @click="emit('selected')" />

4
components/search/SearchItem.vue
View File

@ -31,7 +31,7 @@ const searchKindHasImage = computed(() => {
</script> </script>
<template> <template>
<nuxt-link :to="document.url" class="search-item d-block p-3 text-dark text-decoration-none"> <PotentiallyExternalLink :to="document.url" class="search-item d-block p-3 text-dark text-decoration-none">
<div class="h3 mb-3"> <div class="h3 mb-3">
<Icon :v="icon" /> <Icon :v="icon" />
<Spelling :text="document.title" /> <Spelling :text="document.title" />
@ -67,7 +67,7 @@ const searchKindHasImage = computed(() => {
</div> </div>
</div> </div>
<Spelling v-else :text="document.content" /> <Spelling v-else :text="document.content" />
</nuxt-link> </PotentiallyExternalLink>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">