SteamWar/Website
10
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
Chaoscaot
2024-11-24 22:57:21 +01:00
parent bbf13cf203
commit 72933a46d1
48 changed files with 752 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/styled/SWPaginator.svelte
View File

@@ -18,6 +18,8 @@
-->
<script lang="ts">
import { preventDefault } from 'svelte/legacy';
import {
ChevronDoubleLeftOutline,
ChevronDoubleRightOutline,
@@ -25,23 +27,27 @@
ChevronRightOutline,
} from "flowbite-svelte-icons";
export let page: number = 0;
export let maxPage: number;
$: pages = new Array(maxPage).fill(0)
.map((_, i) => i + 1)
//.slice(Math.max(page - 2, 0) - Math.abs(Math.max(page + 3 - maxPage, 0)), Math.min(page + 3, maxPage) + Math.abs(Math.min(page - 2, 0)))
.map(i => ({
name: i.toString(),
active: i === page + 1,
i: i - 1
}));
export let firstUrl: string = "#";
export let lastUrl: string = "#";
export let previousUrl: string = "#";
export let nextUrl: string = "#";
export let pagesUrl: (i: number) => string = () => "#";
interface Props {
page?: number;
maxPage: number;
firstUrl?: string;
lastUrl?: string;
previousUrl?: string;
nextUrl?: string;
pagesUrl?: (i: number) => string;
}
let {
page = $bindable(0),
maxPage,
firstUrl = "#",
lastUrl = "#",
previousUrl = "#",
nextUrl = "#",
pagesUrl = () => "#"
}: Props = $props();
const previous = () => {
page = Math.max(page - 1, 0);
@@ -50,37 +56,45 @@
const next = () => {
page = Math.min(page + 1, maxPage - 1);
};
let pages = $derived(new Array(maxPage).fill(0)
.map((_, i) => i + 1)
//.slice(Math.max(page - 2, 0) - Math.abs(Math.max(page + 3 - maxPage, 0)), Math.min(page + 3, maxPage) + Math.abs(Math.min(page - 2, 0)))
.map(i => ({
name: i.toString(),
active: i === page + 1,
i: i - 1
})));
</script>
<div class="w-full flex justify-center mt-4">
<ul class="inline-flex flex-wrap">
<li>
<a href={firstUrl} on:click|preventDefault={() => page = 0} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-r-none">
<a href={firstUrl} onclick={preventDefault(() => page = 0)} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-r-none">
<span class="sr-only">Next</span>
<ChevronDoubleLeftOutline class="w-3 h-3" />
</a>
</li>
<li>
<a href={previousUrl} on:click|preventDefault={previous} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
<a href={previousUrl} onclick={preventDefault(previous)} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
<span class="sr-only">Previous</span>
<ChevronLeftOutline class="w-3 h-3" />
</a>
</li>
{#each pages as p}
<li>
<a href={pagesUrl(p.i)} on:click|preventDefault={() => page = p.i} class="btn h-8 px-3 text-sm flex items-center !m-0 !rounded-none" class:btn-neutral={!p.active}>
<a href={pagesUrl(p.i)} onclick={preventDefault(() => page = p.i)} class="btn h-8 px-3 text-sm flex items-center !m-0 !rounded-none" class:btn-neutral={!p.active}>
<span>{p.name}</span>
</a>
</li>
{/each}
<li>
<a href={nextUrl} on:click|preventDefault={next} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
<a href={nextUrl} onclick={preventDefault(next)} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
<span class="sr-only">Next</span>
<ChevronRightOutline class="w-3 h-3" />
</a>
</li>
<li>
<a href={lastUrl} on:click|preventDefault={() => page = maxPage - 1} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-l-none">
<a href={lastUrl} onclick={preventDefault(() => page = maxPage - 1)} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-l-none">
<span class="sr-only">Next</span>
<ChevronDoubleRightOutline class="w-3 h-3" />
</a>