@x33025/sveltely 0.0.39 → 0.0.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { goto } from '$app/navigation';
|
|
3
|
+
import {
|
|
4
|
+
ArrowLeftIcon,
|
|
5
|
+
ArrowRightIcon,
|
|
6
|
+
ChevronsLeftIcon,
|
|
7
|
+
ChevronsRightIcon
|
|
8
|
+
} from '@lucide/svelte';
|
|
3
9
|
|
|
4
10
|
type PaginationData = {
|
|
5
11
|
view: string;
|
|
@@ -11,10 +17,14 @@
|
|
|
11
17
|
let {
|
|
12
18
|
data,
|
|
13
19
|
onPageChange,
|
|
20
|
+
showFirstLast = false,
|
|
21
|
+
style: styleMode = 'label',
|
|
14
22
|
class: className = ''
|
|
15
23
|
}: {
|
|
16
24
|
data: PaginationData;
|
|
17
25
|
onPageChange?: (page: number, href: string) => void | Promise<void>;
|
|
26
|
+
showFirstLast?: boolean;
|
|
27
|
+
style?: 'icon' | 'label';
|
|
18
28
|
class?: string;
|
|
19
29
|
} = $props();
|
|
20
30
|
|
|
@@ -58,16 +68,52 @@
|
|
|
58
68
|
</script>
|
|
59
69
|
|
|
60
70
|
<div class={`hstack items-center ${className}`} style="gap: var(--pagination-gap);">
|
|
71
|
+
{#if showFirstLast}
|
|
72
|
+
{#if safePage() > 1}
|
|
73
|
+
<button
|
|
74
|
+
type="button"
|
|
75
|
+
class="pagination-button action padding-sm"
|
|
76
|
+
onclick={() => goToPage(1)}
|
|
77
|
+
aria-label="First page"
|
|
78
|
+
>
|
|
79
|
+
{#if styleMode === 'icon'}
|
|
80
|
+
<ChevronsLeftIcon class="size-4" />
|
|
81
|
+
{:else}
|
|
82
|
+
First
|
|
83
|
+
{/if}
|
|
84
|
+
</button>
|
|
85
|
+
{:else}
|
|
86
|
+
<span class="pagination-button action padding-sm bg-zinc-400">
|
|
87
|
+
{#if styleMode === 'icon'}
|
|
88
|
+
<ChevronsLeftIcon class="size-4" />
|
|
89
|
+
{:else}
|
|
90
|
+
First
|
|
91
|
+
{/if}
|
|
92
|
+
</span>
|
|
93
|
+
{/if}
|
|
94
|
+
{/if}
|
|
95
|
+
|
|
61
96
|
{#if safePage() > 1}
|
|
62
97
|
<button
|
|
63
98
|
type="button"
|
|
64
99
|
class="pagination-button action padding-sm"
|
|
65
100
|
onclick={() => goToPage(safePage() - 1)}
|
|
101
|
+
aria-label="Previous page"
|
|
66
102
|
>
|
|
67
|
-
|
|
103
|
+
{#if styleMode === 'icon'}
|
|
104
|
+
<ArrowLeftIcon class="size-4" />
|
|
105
|
+
{:else}
|
|
106
|
+
Previous
|
|
107
|
+
{/if}
|
|
68
108
|
</button>
|
|
69
109
|
{:else}
|
|
70
|
-
<span class="pagination-button action padding-sm bg-zinc-400">
|
|
110
|
+
<span class="pagination-button action padding-sm bg-zinc-400">
|
|
111
|
+
{#if styleMode === 'icon'}
|
|
112
|
+
<ArrowLeftIcon class="size-4" />
|
|
113
|
+
{:else}
|
|
114
|
+
Previous
|
|
115
|
+
{/if}
|
|
116
|
+
</span>
|
|
71
117
|
{/if}
|
|
72
118
|
|
|
73
119
|
<span>Page</span>
|
|
@@ -84,10 +130,46 @@
|
|
|
84
130
|
type="button"
|
|
85
131
|
class="pagination-button action padding-sm"
|
|
86
132
|
onclick={() => goToPage(safePage() + 1)}
|
|
133
|
+
aria-label="Next page"
|
|
87
134
|
>
|
|
88
|
-
|
|
135
|
+
{#if styleMode === 'icon'}
|
|
136
|
+
<ArrowRightIcon class="size-4" />
|
|
137
|
+
{:else}
|
|
138
|
+
Next
|
|
139
|
+
{/if}
|
|
89
140
|
</button>
|
|
90
141
|
{:else}
|
|
91
|
-
<span class="pagination-button action padding-sm bg-zinc-400">
|
|
142
|
+
<span class="pagination-button action padding-sm bg-zinc-400">
|
|
143
|
+
{#if styleMode === 'icon'}
|
|
144
|
+
<ArrowRightIcon class="size-4" />
|
|
145
|
+
{:else}
|
|
146
|
+
Next
|
|
147
|
+
{/if}
|
|
148
|
+
</span>
|
|
149
|
+
{/if}
|
|
150
|
+
|
|
151
|
+
{#if showFirstLast}
|
|
152
|
+
{#if hasNext()}
|
|
153
|
+
<button
|
|
154
|
+
type="button"
|
|
155
|
+
class="pagination-button action padding-sm"
|
|
156
|
+
onclick={() => goToPage(maxPage())}
|
|
157
|
+
aria-label="Last page"
|
|
158
|
+
>
|
|
159
|
+
{#if styleMode === 'icon'}
|
|
160
|
+
<ChevronsRightIcon class="size-4" />
|
|
161
|
+
{:else}
|
|
162
|
+
Last
|
|
163
|
+
{/if}
|
|
164
|
+
</button>
|
|
165
|
+
{:else}
|
|
166
|
+
<span class="pagination-button action padding-sm bg-zinc-400">
|
|
167
|
+
{#if styleMode === 'icon'}
|
|
168
|
+
<ChevronsRightIcon class="size-4" />
|
|
169
|
+
{:else}
|
|
170
|
+
Last
|
|
171
|
+
{/if}
|
|
172
|
+
</span>
|
|
173
|
+
{/if}
|
|
92
174
|
{/if}
|
|
93
175
|
</div>
|
|
@@ -7,6 +7,8 @@ type PaginationData = {
|
|
|
7
7
|
type $$ComponentProps = {
|
|
8
8
|
data: PaginationData;
|
|
9
9
|
onPageChange?: (page: number, href: string) => void | Promise<void>;
|
|
10
|
+
showFirstLast?: boolean;
|
|
11
|
+
style?: 'icon' | 'label';
|
|
10
12
|
class?: string;
|
|
11
13
|
};
|
|
12
14
|
declare const Pagination: import("svelte").Component<$$ComponentProps, {}, "">;
|