TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-08-03 02:56:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

(nouns) scroll to top of <Table> when page navigation is used

Browse Source
This commit is contained in:
Valentyne Stigloher 2025-07-31 20:23:26 +02:00
parent f739275809
commit 52e8147e84
1 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/Table.vue
View File

@ -42,14 +42,21 @@ const pagesRange = computed((): VPage[] => {
return vPages; return vPages;
}); });
const navigateToPage = (to: number) => {
page.value = to;
focus();
};
const section = useTemplateRef<HTMLElement>('section'); const section = useTemplateRef<HTMLElement>('section');
const focus = () => {
section.value?.scrollIntoView();
};
defineExpose({ defineExpose({
reset() { reset() {
page.value = 0; navigateToPage(0);
},
focus() {
section.value?.scrollIntoView();
}, },
focus,
}); });
</script> </script>
@ -63,9 +70,9 @@ defineExpose({
:key="p.text" :key="p.text"
:class="['page-item', p.page === page ? 'active' : '', p.enabled ? '' : 'disabled']" :class="['page-item', p.page === page ? 'active' : '', p.enabled ? '' : 'disabled']"
> >
<a v-if="p.enabled" class="page-link" href="#" @click.prevent="page = p.page"> <button v-if="p.enabled" type="button" class="page-link" @click="navigateToPage(p.page)">
{{ p.text }} {{ p.text }}
</a> </button>
<span v-else class="page-link"> <span v-else class="page-link">
{{ p.text }} {{ p.text }}
</span> </span>
@ -108,9 +115,9 @@ defineExpose({
:key="p.text" :key="p.text"
:class="['page-item', p.page === page ? 'active' : '', p.enabled ? '' : 'disabled']" :class="['page-item', p.page === page ? 'active' : '', p.enabled ? '' : 'disabled']"
> >
<a v-if="p.enabled" class="page-link" href="#" @click.prevent="page = p.page"> <button v-if="p.enabled" type="button" class="page-link" @click="navigateToPage(p.page)">
{{ p.text }} {{ p.text }}
</a> </button>
<span v-else class="page-link"> <span v-else class="page-link">
{{ p.text }} {{ p.text }}
</span> </span>