@x33025/sveltely 0.0.38 → 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.
- package/dist/components/Pagination.svelte +86 -4
- package/dist/components/Pagination.svelte.d.ts +2 -0
- package/dist/components/SegmentedPicker.svelte +6 -0
- package/dist/components/SegmentedPicker.svelte.d.ts +1 -0
- package/dist/components/Sheet/Sheet.svelte +1 -15
- package/dist/components/Sheet/Sheet.svelte.d.ts +0 -2
- package/dist/style/index.css +1 -0
- package/dist/style.css +12 -9
- package/package.json +1 -1
|
@@ -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, {}, "">;
|
|
@@ -7,10 +7,12 @@
|
|
|
7
7
|
let {
|
|
8
8
|
options,
|
|
9
9
|
value = $bindable(''),
|
|
10
|
+
disabled = false,
|
|
10
11
|
class: className = ''
|
|
11
12
|
}: {
|
|
12
13
|
options: Option[];
|
|
13
14
|
value: string;
|
|
15
|
+
disabled?: boolean;
|
|
14
16
|
class?: string;
|
|
15
17
|
} = $props();
|
|
16
18
|
</script>
|
|
@@ -22,6 +24,8 @@
|
|
|
22
24
|
border-radius: var(--segmented-picker-border-radius);
|
|
23
25
|
background: var(--segmented-picker-background);
|
|
24
26
|
gap: var(--segmented-picker-item-gap);
|
|
27
|
+
opacity: {disabled ? '0.5' : '1'};
|
|
28
|
+
filter: {disabled ? 'grayscale(1)' : 'none'};
|
|
25
29
|
"
|
|
26
30
|
>
|
|
27
31
|
{#each options as option}
|
|
@@ -38,11 +42,13 @@
|
|
|
38
42
|
{:else}
|
|
39
43
|
<button
|
|
40
44
|
type="button"
|
|
45
|
+
{disabled}
|
|
41
46
|
style="
|
|
42
47
|
padding: var(--segmented-picker-inner-padding);
|
|
43
48
|
border-radius: var(--segmented-picker-inner-border-radius);
|
|
44
49
|
"
|
|
45
50
|
onclick={() => {
|
|
51
|
+
if (disabled) return;
|
|
46
52
|
value = option.value;
|
|
47
53
|
}}
|
|
48
54
|
>
|
|
@@ -7,8 +7,6 @@
|
|
|
7
7
|
onClose?: () => void;
|
|
8
8
|
class?: string;
|
|
9
9
|
maxWidth?: string;
|
|
10
|
-
header?: Snippet;
|
|
11
|
-
footer?: Snippet;
|
|
12
10
|
children?: Snippet;
|
|
13
11
|
}
|
|
14
12
|
|
|
@@ -18,8 +16,6 @@
|
|
|
18
16
|
onClose,
|
|
19
17
|
class: className = '',
|
|
20
18
|
maxWidth = '32rem',
|
|
21
|
-
header,
|
|
22
|
-
footer,
|
|
23
19
|
children
|
|
24
20
|
}: Props = $props();
|
|
25
21
|
|
|
@@ -53,23 +49,13 @@
|
|
|
53
49
|
aria-modal="true"
|
|
54
50
|
aria-label={label}
|
|
55
51
|
style={`border-radius: var(--sheet-border-radius); box-shadow: var(--sheet-shadow); max-width: ${maxWidth};`}
|
|
56
|
-
class="relative z-10 flex max-h-full w-full flex-col overflow-hidden bg-
|
|
52
|
+
class="relative z-10 flex max-h-full w-full flex-col overflow-hidden bg-[var(--sheet-background)] ring-1 ring-[var(--sheet-border-color)] {className}"
|
|
57
53
|
>
|
|
58
|
-
{#if header}
|
|
59
|
-
<div class="border-b border-gray-200/70" style="padding: var(--sheet-content-padding);">
|
|
60
|
-
{@render header()}
|
|
61
|
-
</div>
|
|
62
|
-
{/if}
|
|
63
54
|
<div class="flex-1 overflow-auto" style="padding: var(--sheet-content-padding);">
|
|
64
55
|
{#if children}
|
|
65
56
|
{@render children()}
|
|
66
57
|
{/if}
|
|
67
58
|
</div>
|
|
68
|
-
{#if footer}
|
|
69
|
-
<div class="border-t border-gray-200/70" style="padding: var(--sheet-content-padding);">
|
|
70
|
-
{@render footer()}
|
|
71
|
-
</div>
|
|
72
|
-
{/if}
|
|
73
59
|
</div>
|
|
74
60
|
</div>
|
|
75
61
|
{/if}
|
package/dist/style/index.css
CHANGED
|
@@ -59,6 +59,7 @@
|
|
|
59
59
|
--sheet-content-padding: calc(var(--spacing) * 4);
|
|
60
60
|
|
|
61
61
|
--sheet-background: var(--color-white);
|
|
62
|
+
--sheet-border-color: color-mix(in oklab, var(--color-zinc-950) 10%, transparent);
|
|
62
63
|
--sheet-overlay: color-mix(in oklab, var(--color-black) 20%, transparent);
|
|
63
64
|
--sheet-blur: var(--blur-sm);
|
|
64
65
|
--sheet-shadow: var(--shadow-md);
|
package/dist/style.css
CHANGED
|
@@ -328,10 +328,6 @@
|
|
|
328
328
|
border-style: var(--tw-border-style);
|
|
329
329
|
border-width: 1px;
|
|
330
330
|
}
|
|
331
|
-
.border-t {
|
|
332
|
-
border-top-style: var(--tw-border-style);
|
|
333
|
-
border-top-width: 1px;
|
|
334
|
-
}
|
|
335
331
|
.border-r {
|
|
336
332
|
border-right-style: var(--tw-border-style);
|
|
337
333
|
border-right-width: 1px;
|
|
@@ -362,6 +358,9 @@
|
|
|
362
358
|
.bg-\[var\(--chip-input-background\)\] {
|
|
363
359
|
background-color: var(--chip-input-background);
|
|
364
360
|
}
|
|
361
|
+
.bg-\[var\(--sheet-background\)\] {
|
|
362
|
+
background-color: var(--sheet-background);
|
|
363
|
+
}
|
|
365
364
|
.bg-white {
|
|
366
365
|
background-color: var(--color-white);
|
|
367
366
|
}
|
|
@@ -440,11 +439,8 @@
|
|
|
440
439
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
441
440
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
442
441
|
}
|
|
443
|
-
.ring-
|
|
444
|
-
--tw-ring-color: color
|
|
445
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
446
|
-
--tw-ring-color: color-mix(in oklab, var(--color-zinc-950) 10%, transparent);
|
|
447
|
-
}
|
|
442
|
+
.ring-\[var\(--sheet-border-color\)\] {
|
|
443
|
+
--tw-ring-color: var(--sheet-border-color);
|
|
448
444
|
}
|
|
449
445
|
.outline {
|
|
450
446
|
outline-style: var(--tw-outline-style);
|
|
@@ -482,6 +478,9 @@
|
|
|
482
478
|
--tw-blur: blur(var(--blur-xs));
|
|
483
479
|
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
|
484
480
|
}
|
|
481
|
+
.filter {
|
|
482
|
+
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
|
483
|
+
}
|
|
485
484
|
.backdrop-filter {
|
|
486
485
|
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
487
486
|
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
@@ -590,6 +589,10 @@
|
|
|
590
589
|
--sheet-border-radius: var(--radius-md);
|
|
591
590
|
--sheet-content-padding: calc(var(--spacing) * 4);
|
|
592
591
|
--sheet-background: var(--color-white);
|
|
592
|
+
--sheet-border-color: color-mix(in srgb, oklch(14.1% 0.005 285.823) 10%, transparent);
|
|
593
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
594
|
+
--sheet-border-color: color-mix(in oklab, var(--color-zinc-950) 10%, transparent);
|
|
595
|
+
}
|
|
593
596
|
--sheet-overlay: color-mix(in srgb, #000 20%, transparent);
|
|
594
597
|
@supports (color: color-mix(in lab, red, red)) {
|
|
595
598
|
--sheet-overlay: color-mix(in oklab, var(--color-black) 20%, transparent);
|