@x33025/sveltely 0.0.18 → 0.0.20
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.
|
@@ -41,11 +41,11 @@
|
|
|
41
41
|
<div class="hstack size-full">
|
|
42
42
|
{#if left}
|
|
43
43
|
<div
|
|
44
|
-
class="h-full overflow-hidden border-r border-
|
|
44
|
+
class="h-full overflow-hidden border-r border-zinc-200 transition-all duration-300 ease-in-out"
|
|
45
45
|
style="width: {leftOpen ? 'var(--navigation-stack-sidebar-width)' : '0'}"
|
|
46
46
|
>
|
|
47
47
|
<div
|
|
48
|
-
class="vstack h-full overflow-auto bg-
|
|
48
|
+
class="vstack h-full overflow-auto bg-zinc-50 p-4"
|
|
49
49
|
style="width: var(--navigation-stack-sidebar-width);"
|
|
50
50
|
>
|
|
51
51
|
{@render left()}
|
|
@@ -61,11 +61,11 @@
|
|
|
61
61
|
|
|
62
62
|
{#if right}
|
|
63
63
|
<div
|
|
64
|
-
class="h-full overflow-hidden border-l border-
|
|
64
|
+
class="h-full overflow-hidden border-l border-zinc-200 transition-all duration-300 ease-in-out"
|
|
65
65
|
style="width: {rightOpen ? 'var(--navigation-stack-sidebar-width)' : '0'}"
|
|
66
66
|
>
|
|
67
67
|
<div
|
|
68
|
-
class="vstack h-full overflow-auto bg-
|
|
68
|
+
class="vstack h-full overflow-auto bg-zinc-50 p-4"
|
|
69
69
|
style="width: var(--navigation-stack-sidebar-width);"
|
|
70
70
|
>
|
|
71
71
|
{@render right()}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
type Option = {
|
|
3
|
+
label: string;
|
|
4
|
+
value: string;
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
let {
|
|
8
|
+
options,
|
|
9
|
+
value = $bindable(''),
|
|
10
|
+
class: className = ''
|
|
11
|
+
}: {
|
|
12
|
+
options: Option[];
|
|
13
|
+
value: string;
|
|
14
|
+
class?: string;
|
|
15
|
+
} = $props();
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<div
|
|
19
|
+
class={`hstack w-fit gap-1 ${className}`}
|
|
20
|
+
style="
|
|
21
|
+
padding: var(--segmented-picker-outer-padding);
|
|
22
|
+
border-radius: var(--segmented-picker-border-radius);
|
|
23
|
+
background: var(--segmented-picker-background);
|
|
24
|
+
"
|
|
25
|
+
>
|
|
26
|
+
{#each options as option}
|
|
27
|
+
{#if option.value === value}
|
|
28
|
+
<span
|
|
29
|
+
class=""
|
|
30
|
+
style="
|
|
31
|
+
padding: var(--segmented-picker-inner-padding);
|
|
32
|
+
border-radius: var(--segmented-picker-inner-border-radius);
|
|
33
|
+
background: var(--segmented-picker-active-background);
|
|
34
|
+
">{option.label}</span
|
|
35
|
+
>
|
|
36
|
+
{:else}
|
|
37
|
+
<button
|
|
38
|
+
type="button"
|
|
39
|
+
style="
|
|
40
|
+
padding: var(--segmented-picker-inner-padding);
|
|
41
|
+
border-radius: var(--segmented-picker-inner-border-radius);
|
|
42
|
+
"
|
|
43
|
+
onclick={() => {
|
|
44
|
+
value = option.value;
|
|
45
|
+
}}
|
|
46
|
+
>
|
|
47
|
+
{option.label}
|
|
48
|
+
</button>
|
|
49
|
+
{/if}
|
|
50
|
+
{/each}
|
|
51
|
+
</div>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
type Option = {
|
|
2
|
+
label: string;
|
|
3
|
+
value: string;
|
|
4
|
+
};
|
|
5
|
+
type $$ComponentProps = {
|
|
6
|
+
options: Option[];
|
|
7
|
+
value: string;
|
|
8
|
+
class?: string;
|
|
9
|
+
};
|
|
10
|
+
declare const SegmentedPicker: import("svelte").Component<$$ComponentProps, {}, "value">;
|
|
11
|
+
type SegmentedPicker = ReturnType<typeof SegmentedPicker>;
|
|
12
|
+
export default SegmentedPicker;
|
package/dist/style/index.css
CHANGED
|
@@ -67,10 +67,20 @@
|
|
|
67
67
|
|
|
68
68
|
--slider-shadow: var(--shadow-md);
|
|
69
69
|
--slider-track: var(--color-zinc-300);
|
|
70
|
-
--slider-fill: var(--color-
|
|
71
|
-
--slider-thumb-inner: var(--color-
|
|
70
|
+
--slider-fill: var(--color-zinc-900);
|
|
71
|
+
--slider-thumb-inner: var(--color-zinc-900);
|
|
72
72
|
--slider-thumb-outer: var(--color-white);
|
|
73
73
|
|
|
74
74
|
--navigation-stack-sidebar-width: 16rem;
|
|
75
|
+
|
|
76
|
+
--segmented-picker-outer-padding: calc(var(--spacing));
|
|
77
|
+
--segmented-picker-inner-padding: 4px 10px;
|
|
78
|
+
--segmented-picker-border-radius: var(--radius-md);
|
|
79
|
+
--segmented-picker-background: var(--color-zinc-100);
|
|
80
|
+
--segmented-picker-active-background: var(--color-white);
|
|
81
|
+
--segmented-picker-inner-border-radius: max(
|
|
82
|
+
0px,
|
|
83
|
+
calc(var(--segmented-picker-border-radius) - var(--segmented-picker-outer-padding))
|
|
84
|
+
);
|
|
75
85
|
}
|
|
76
86
|
}
|
package/dist/style.css
CHANGED
|
@@ -7,17 +7,18 @@
|
|
|
7
7
|
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
8
8
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
|
9
9
|
"Courier New", monospace;
|
|
10
|
-
--color-gray-50: oklch(98.5% 0.002 247.839);
|
|
11
10
|
--color-gray-100: oklch(96.7% 0.003 264.542);
|
|
12
11
|
--color-gray-200: oklch(92.8% 0.006 264.531);
|
|
13
12
|
--color-gray-500: oklch(55.1% 0.027 264.364);
|
|
14
13
|
--color-gray-700: oklch(37.3% 0.034 259.733);
|
|
15
14
|
--color-gray-900: oklch(21% 0.034 264.665);
|
|
15
|
+
--color-zinc-50: oklch(98.5% 0 0);
|
|
16
16
|
--color-zinc-100: oklch(96.7% 0.001 286.375);
|
|
17
17
|
--color-zinc-200: oklch(92% 0.004 286.32);
|
|
18
18
|
--color-zinc-300: oklch(87.1% 0.006 286.286);
|
|
19
19
|
--color-zinc-500: oklch(55.2% 0.016 285.938);
|
|
20
20
|
--color-zinc-700: oklch(37% 0.013 285.805);
|
|
21
|
+
--color-zinc-900: oklch(21% 0.006 285.885);
|
|
21
22
|
--color-zinc-950: oklch(14.1% 0.005 285.823);
|
|
22
23
|
--color-black: #000;
|
|
23
24
|
--color-white: #fff;
|
|
@@ -260,6 +261,9 @@
|
|
|
260
261
|
.w-60 {
|
|
261
262
|
width: calc(var(--spacing) * 60);
|
|
262
263
|
}
|
|
264
|
+
.w-fit {
|
|
265
|
+
width: fit-content;
|
|
266
|
+
}
|
|
263
267
|
.w-full {
|
|
264
268
|
width: 100%;
|
|
265
269
|
}
|
|
@@ -281,6 +285,9 @@
|
|
|
281
285
|
.items-center {
|
|
282
286
|
align-items: center;
|
|
283
287
|
}
|
|
288
|
+
.gap-1 {
|
|
289
|
+
gap: calc(var(--spacing) * 1);
|
|
290
|
+
}
|
|
284
291
|
.gap-2 {
|
|
285
292
|
gap: calc(var(--spacing) * 2);
|
|
286
293
|
}
|
|
@@ -338,15 +345,15 @@
|
|
|
338
345
|
.border-zinc-200 {
|
|
339
346
|
border-color: var(--color-zinc-200);
|
|
340
347
|
}
|
|
341
|
-
.bg-gray-50 {
|
|
342
|
-
background-color: var(--color-gray-50);
|
|
343
|
-
}
|
|
344
348
|
.bg-gray-100 {
|
|
345
349
|
background-color: var(--color-gray-100);
|
|
346
350
|
}
|
|
347
351
|
.bg-white {
|
|
348
352
|
background-color: var(--color-white);
|
|
349
353
|
}
|
|
354
|
+
.bg-zinc-50 {
|
|
355
|
+
background-color: var(--color-zinc-50);
|
|
356
|
+
}
|
|
350
357
|
.p-1\.5 {
|
|
351
358
|
padding: calc(var(--spacing) * 1.5);
|
|
352
359
|
}
|
|
@@ -569,10 +576,19 @@
|
|
|
569
576
|
--tooltip-text: var(--color-white);
|
|
570
577
|
--slider-shadow: var(--shadow-md);
|
|
571
578
|
--slider-track: var(--color-zinc-300);
|
|
572
|
-
--slider-fill: var(--color-
|
|
573
|
-
--slider-thumb-inner: var(--color-
|
|
579
|
+
--slider-fill: var(--color-zinc-900);
|
|
580
|
+
--slider-thumb-inner: var(--color-zinc-900);
|
|
574
581
|
--slider-thumb-outer: var(--color-white);
|
|
575
582
|
--navigation-stack-sidebar-width: 16rem;
|
|
583
|
+
--segmented-picker-outer-padding: calc(var(--spacing));
|
|
584
|
+
--segmented-picker-inner-padding: 4px 10px;
|
|
585
|
+
--segmented-picker-border-radius: var(--radius-md);
|
|
586
|
+
--segmented-picker-background: var(--color-zinc-100);
|
|
587
|
+
--segmented-picker-active-background: var(--color-white);
|
|
588
|
+
--segmented-picker-inner-border-radius: max(
|
|
589
|
+
0px,
|
|
590
|
+
calc(var(--segmented-picker-border-radius) - var(--segmented-picker-outer-padding))
|
|
591
|
+
);
|
|
576
592
|
}
|
|
577
593
|
}
|
|
578
594
|
@property --tw-rotate-x {
|