brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrates to svelte 5

Browse Source
This commit is contained in:
Christian Beutel
2025-01-24 17:46:13 +01:00
parent 7571f6e9b9
commit 3721b7f537
106 changed files with 5524 additions and 4232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
web/src/lib/components/base/pagination.svelte
View File

@@ -1,20 +1,23 @@
<script lang="ts">
import { range } from "$lib/util/array_util";
import { createEventDispatcher } from "svelte";
export let page: number;
export let totalPages: number;
interface Props {
page: number;
totalPages: number;
onpagination?: (page: number) => void;
}
let { page, totalPages, onpagination }: Props = $props();
const maxPagesToRender = 6;
const dispatch = createEventDispatcher();
function update(clickedPage: number) {
if (page !== clickedPage) {
dispatch("pagination", clickedPage);
onpagination?.(clickedPage);
}
}
$: numberGenerator = () => {
let numberGenerator = $derived(() => {
if (totalPages < 4) {
return [];
}
@@ -31,21 +34,22 @@
return range(page + Math.max(1, maxPagesToRender - 5), page - 2);
}
return [];
};
});
</script>
<div class="flex gap-x-4 justify-center">
{#if totalPages > 1}
<button
aria-label="Next page"
class:text-gray-500={page == 1}
disabled={page == 1}
on:click={() => update(page - 1)}
onclick={() => update(page - 1)}
><i class="fa fa-caret-left"></i></button
>
<button
class="w-8 aspect-square rounded-lg transition-colors border-input-border hover:bg-menu-item-background-hover"
class:border={page == 1}
on:click={() => update(1)}>1</button
onclick={() => update(1)}>1</button
>
{#if totalPages > maxPagesToRender && page >= maxPagesToRender - 2 && page > 2}
<span>...</span>
@@ -53,14 +57,14 @@
<button
class="w-8 aspect-square rounded-lg transition-colors border-input-border hover:bg-menu-item-background-hover"
class:border={page == 2}
on:click={() => update(2)}>2</button
onclick={() => update(2)}>2</button
>
{/if}
{#each numberGenerator() as i}
<button
class="w-8 aspect-square rounded-lg transition-colors border-input-border hover:bg-menu-item-background-hover"
class:border={page == i + 1}
on:click={() => update(i + 1)}>{i + 1}</button
onclick={() => update(i + 1)}>{i + 1}</button
>
{/each}
{#if totalPages > maxPagesToRender && page < totalPages - 3}
@@ -69,18 +73,19 @@
<button
class="w-8 aspect-square rounded-lg transition-colors border-input-border hover:bg-menu-item-background-hover"
class:border={page == totalPages - 1}
on:click={() => update(totalPages - 1)}>{totalPages - 1}</button
onclick={() => update(totalPages - 1)}>{totalPages - 1}</button
>
{/if}
<button
class="w-8 aspect-square rounded-lg transition-colors border-input-border hover:bg-menu-item-background-hover"
class:border={page == totalPages}
on:click={() => update(totalPages)}>{totalPages}</button
onclick={() => update(totalPages)}>{totalPages}</button
>
<button
aria-label="Previous page"
class:text-gray-500={page == totalPages}
disabled={page == totalPages}
on:click={() => update(page + 1)}
onclick={() => update(page + 1)}
><i class="fa fa-caret-right"></i></button
>
{/if}