@x33025/sveltely 0.0.40 → 0.0.41
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.
|
@@ -25,11 +25,7 @@
|
|
|
25
25
|
}
|
|
26
26
|
</script>
|
|
27
27
|
|
|
28
|
-
<button
|
|
29
|
-
onclick={handleClick}
|
|
30
|
-
class="rounded p-1.5 hover:bg-zinc-100 {className}"
|
|
31
|
-
title="Toggle {side} sidebar"
|
|
32
|
-
>
|
|
28
|
+
<button onclick={handleClick} class="sidebar-toggle {className}" title="Toggle {side} sidebar">
|
|
33
29
|
{#if children}
|
|
34
30
|
{@render children()}
|
|
35
31
|
{:else if side === 'left'}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { goto } from '$app/navigation';
|
|
3
3
|
import {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
ChevronLeftIcon,
|
|
5
|
+
ChevronRightIcon,
|
|
6
6
|
ChevronsLeftIcon,
|
|
7
7
|
ChevronsRightIcon
|
|
8
8
|
} from '@lucide/svelte';
|
|
@@ -41,6 +41,11 @@
|
|
|
41
41
|
const maxPage = () => Math.max(1, data.totalPages);
|
|
42
42
|
const safePage = () => Math.min(Math.max(data.page, 1), maxPage());
|
|
43
43
|
const hasNext = () => (typeof data.hasNext === 'boolean' ? data.hasNext : safePage() < maxPage());
|
|
44
|
+
const hasPrevious = () => safePage() > 1;
|
|
45
|
+
const buttonClass = () =>
|
|
46
|
+
`pagination-button action disabled:bg-zinc-200 disabled:text-zinc-500 inline-flex items-center justify-center leading-none ${
|
|
47
|
+
styleMode === 'icon' ? 'h-8 w-8 p-0' : 'padding-sm'
|
|
48
|
+
}`;
|
|
44
49
|
|
|
45
50
|
const goToPage = (targetPage: number) => {
|
|
46
51
|
const clamped = clampedPage(targetPage);
|
|
@@ -69,53 +74,35 @@
|
|
|
69
74
|
|
|
70
75
|
<div class={`hstack items-center ${className}`} style="gap: var(--pagination-gap);">
|
|
71
76
|
{#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
|
-
|
|
96
|
-
{#if safePage() > 1}
|
|
97
77
|
<button
|
|
98
78
|
type="button"
|
|
99
|
-
class=
|
|
100
|
-
onclick={() => goToPage(
|
|
101
|
-
aria-label="
|
|
79
|
+
class={buttonClass()}
|
|
80
|
+
onclick={() => goToPage(1)}
|
|
81
|
+
aria-label="First page"
|
|
82
|
+
disabled={!hasPrevious()}
|
|
102
83
|
>
|
|
103
84
|
{#if styleMode === 'icon'}
|
|
104
|
-
<
|
|
85
|
+
<ChevronsLeftIcon class="size-4" />
|
|
105
86
|
{:else}
|
|
106
|
-
|
|
87
|
+
First
|
|
107
88
|
{/if}
|
|
108
89
|
</button>
|
|
109
|
-
{:else}
|
|
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>
|
|
117
90
|
{/if}
|
|
118
91
|
|
|
92
|
+
<button
|
|
93
|
+
type="button"
|
|
94
|
+
class={buttonClass()}
|
|
95
|
+
onclick={() => goToPage(safePage() - 1)}
|
|
96
|
+
aria-label="Previous page"
|
|
97
|
+
disabled={!hasPrevious()}
|
|
98
|
+
>
|
|
99
|
+
{#if styleMode === 'icon'}
|
|
100
|
+
<ChevronLeftIcon class="size-4" />
|
|
101
|
+
{:else}
|
|
102
|
+
Previous
|
|
103
|
+
{/if}
|
|
104
|
+
</button>
|
|
105
|
+
|
|
119
106
|
<span>Page</span>
|
|
120
107
|
|
|
121
108
|
<form method="GET" style="display: inline;" novalidate onsubmit={handleSubmit}>
|
|
@@ -125,51 +112,33 @@
|
|
|
125
112
|
|
|
126
113
|
<span>of {maxPage()}</span>
|
|
127
114
|
|
|
128
|
-
|
|
115
|
+
<button
|
|
116
|
+
type="button"
|
|
117
|
+
class={buttonClass()}
|
|
118
|
+
onclick={() => goToPage(safePage() + 1)}
|
|
119
|
+
aria-label="Next page"
|
|
120
|
+
disabled={!hasNext()}
|
|
121
|
+
>
|
|
122
|
+
{#if styleMode === 'icon'}
|
|
123
|
+
<ChevronRightIcon class="size-4" />
|
|
124
|
+
{:else}
|
|
125
|
+
Next
|
|
126
|
+
{/if}
|
|
127
|
+
</button>
|
|
128
|
+
|
|
129
|
+
{#if showFirstLast}
|
|
129
130
|
<button
|
|
130
131
|
type="button"
|
|
131
|
-
class=
|
|
132
|
-
onclick={() => goToPage(
|
|
133
|
-
aria-label="
|
|
132
|
+
class={buttonClass()}
|
|
133
|
+
onclick={() => goToPage(maxPage())}
|
|
134
|
+
aria-label="Last page"
|
|
135
|
+
disabled={!hasNext()}
|
|
134
136
|
>
|
|
135
137
|
{#if styleMode === 'icon'}
|
|
136
|
-
<
|
|
138
|
+
<ChevronsRightIcon class="size-4" />
|
|
137
139
|
{:else}
|
|
138
|
-
|
|
140
|
+
Last
|
|
139
141
|
{/if}
|
|
140
142
|
</button>
|
|
141
|
-
{:else}
|
|
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}
|
|
174
143
|
{/if}
|
|
175
144
|
</div>
|
package/dist/style/index.css
CHANGED
|
@@ -47,9 +47,19 @@
|
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.pagination-button {
|
|
50
|
+
@apply rounded-full bg-zinc-100 p-1;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.pagination-button:disabled {
|
|
54
|
+
@apply cursor-not-allowed rounded-full p-1 opacity-50;
|
|
50
55
|
}
|
|
51
56
|
|
|
52
57
|
.pagination-input {
|
|
58
|
+
@apply w-[10ch] rounded-full bg-zinc-100 px-3 py-1 outline-none;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.sidebar-toggle {
|
|
62
|
+
@apply rounded p-1.5 hover:bg-zinc-100;
|
|
53
63
|
}
|
|
54
64
|
}
|
|
55
65
|
|
package/dist/style.css
CHANGED
|
@@ -15,7 +15,6 @@
|
|
|
15
15
|
--color-zinc-100: oklch(96.7% 0.001 286.375);
|
|
16
16
|
--color-zinc-200: oklch(92% 0.004 286.32);
|
|
17
17
|
--color-zinc-300: oklch(87.1% 0.006 286.286);
|
|
18
|
-
--color-zinc-400: oklch(70.5% 0.015 286.067);
|
|
19
18
|
--color-zinc-500: oklch(55.2% 0.016 285.938);
|
|
20
19
|
--color-zinc-700: oklch(37% 0.013 285.805);
|
|
21
20
|
--color-zinc-900: oklch(21% 0.006 285.885);
|
|
@@ -254,6 +253,9 @@
|
|
|
254
253
|
.h-5 {
|
|
255
254
|
height: calc(var(--spacing) * 5);
|
|
256
255
|
}
|
|
256
|
+
.h-8 {
|
|
257
|
+
height: calc(var(--spacing) * 8);
|
|
258
|
+
}
|
|
257
259
|
.h-full {
|
|
258
260
|
height: 100%;
|
|
259
261
|
}
|
|
@@ -263,6 +265,9 @@
|
|
|
263
265
|
.w-5 {
|
|
264
266
|
width: calc(var(--spacing) * 5);
|
|
265
267
|
}
|
|
268
|
+
.w-8 {
|
|
269
|
+
width: calc(var(--spacing) * 8);
|
|
270
|
+
}
|
|
266
271
|
.w-60 {
|
|
267
272
|
width: calc(var(--spacing) * 60);
|
|
268
273
|
}
|
|
@@ -367,11 +372,8 @@
|
|
|
367
372
|
.bg-zinc-50 {
|
|
368
373
|
background-color: var(--color-zinc-50);
|
|
369
374
|
}
|
|
370
|
-
.
|
|
371
|
-
|
|
372
|
-
}
|
|
373
|
-
.p-1\.5 {
|
|
374
|
-
padding: calc(var(--spacing) * 1.5);
|
|
375
|
+
.p-0 {
|
|
376
|
+
padding: calc(var(--spacing) * 0);
|
|
375
377
|
}
|
|
376
378
|
.p-2 {
|
|
377
379
|
padding: calc(var(--spacing) * 2);
|
|
@@ -401,6 +403,10 @@
|
|
|
401
403
|
font-size: var(--text-sm);
|
|
402
404
|
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
403
405
|
}
|
|
406
|
+
.leading-none {
|
|
407
|
+
--tw-leading: 1;
|
|
408
|
+
line-height: 1;
|
|
409
|
+
}
|
|
404
410
|
.font-medium {
|
|
405
411
|
--tw-font-weight: var(--font-weight-medium);
|
|
406
412
|
font-weight: var(--font-weight-medium);
|
|
@@ -527,6 +533,16 @@
|
|
|
527
533
|
cursor: not-allowed;
|
|
528
534
|
}
|
|
529
535
|
}
|
|
536
|
+
.disabled\:bg-zinc-200 {
|
|
537
|
+
&:disabled {
|
|
538
|
+
background-color: var(--color-zinc-200);
|
|
539
|
+
}
|
|
540
|
+
}
|
|
541
|
+
.disabled\:text-zinc-500 {
|
|
542
|
+
&:disabled {
|
|
543
|
+
color: var(--color-zinc-500);
|
|
544
|
+
}
|
|
545
|
+
}
|
|
530
546
|
.disabled\:opacity-40 {
|
|
531
547
|
&:disabled {
|
|
532
548
|
opacity: 40%;
|
|
@@ -583,6 +599,35 @@
|
|
|
583
599
|
.dropdown-item:hover {
|
|
584
600
|
background: var(--dropdown-item-highlight);
|
|
585
601
|
}
|
|
602
|
+
.pagination-button {
|
|
603
|
+
border-radius: calc(infinity * 1px);
|
|
604
|
+
background-color: var(--color-zinc-100);
|
|
605
|
+
padding: calc(var(--spacing) * 1);
|
|
606
|
+
}
|
|
607
|
+
.pagination-button:disabled {
|
|
608
|
+
cursor: not-allowed;
|
|
609
|
+
border-radius: calc(infinity * 1px);
|
|
610
|
+
padding: calc(var(--spacing) * 1);
|
|
611
|
+
opacity: 50%;
|
|
612
|
+
}
|
|
613
|
+
.pagination-input {
|
|
614
|
+
width: 10ch;
|
|
615
|
+
border-radius: calc(infinity * 1px);
|
|
616
|
+
background-color: var(--color-zinc-100);
|
|
617
|
+
padding-inline: calc(var(--spacing) * 3);
|
|
618
|
+
padding-block: calc(var(--spacing) * 1);
|
|
619
|
+
--tw-outline-style: none;
|
|
620
|
+
outline-style: none;
|
|
621
|
+
}
|
|
622
|
+
.sidebar-toggle {
|
|
623
|
+
border-radius: 0.25rem;
|
|
624
|
+
padding: calc(var(--spacing) * 1.5);
|
|
625
|
+
&:hover {
|
|
626
|
+
@media (hover: hover) {
|
|
627
|
+
background-color: var(--color-zinc-100);
|
|
628
|
+
}
|
|
629
|
+
}
|
|
630
|
+
}
|
|
586
631
|
}
|
|
587
632
|
@layer theme {
|
|
588
633
|
:root {
|
|
@@ -680,6 +725,10 @@
|
|
|
680
725
|
inherits: false;
|
|
681
726
|
initial-value: solid;
|
|
682
727
|
}
|
|
728
|
+
@property --tw-leading {
|
|
729
|
+
syntax: "*";
|
|
730
|
+
inherits: false;
|
|
731
|
+
}
|
|
683
732
|
@property --tw-font-weight {
|
|
684
733
|
syntax: "*";
|
|
685
734
|
inherits: false;
|
|
@@ -890,6 +939,7 @@
|
|
|
890
939
|
--tw-skew-y: initial;
|
|
891
940
|
--tw-space-y-reverse: 0;
|
|
892
941
|
--tw-border-style: solid;
|
|
942
|
+
--tw-leading: initial;
|
|
893
943
|
--tw-font-weight: initial;
|
|
894
944
|
--tw-tracking: initial;
|
|
895
945
|
--tw-ordinal: initial;
|