@x33025/sveltely 0.0.19 → 0.0.21
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.
|
@@ -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/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ export { portalHost, portalContent } from './actions/portal';
|
|
|
3
3
|
export { default as AnimatedNumber } from './components/AnimatedNumber.svelte';
|
|
4
4
|
export { default as GlowEffect } from './components/GlowEffect.svelte';
|
|
5
5
|
export { default as NavigationStack } from './components/NavigationStack';
|
|
6
|
+
export { default as SegmentedPicker } from './components/SegmentedPicker.svelte';
|
|
6
7
|
export { default as Slider } from './components/Slider.svelte';
|
|
7
8
|
export { default as Sheet } from './components/Sheet';
|
|
8
9
|
export { default as Spinner } from './components/Spinner.svelte';
|
package/dist/index.js
CHANGED
|
@@ -3,6 +3,7 @@ export { portalHost, portalContent } from './actions/portal';
|
|
|
3
3
|
export { default as AnimatedNumber } from './components/AnimatedNumber.svelte';
|
|
4
4
|
export { default as GlowEffect } from './components/GlowEffect.svelte';
|
|
5
5
|
export { default as NavigationStack } from './components/NavigationStack';
|
|
6
|
+
export { default as SegmentedPicker } from './components/SegmentedPicker.svelte';
|
|
6
7
|
export { default as Slider } from './components/Slider.svelte';
|
|
7
8
|
export { default as Sheet } from './components/Sheet';
|
|
8
9
|
export { default as Spinner } from './components/Spinner.svelte';
|
package/dist/style/index.css
CHANGED
|
@@ -72,5 +72,15 @@
|
|
|
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
|
@@ -261,6 +261,9 @@
|
|
|
261
261
|
.w-60 {
|
|
262
262
|
width: calc(var(--spacing) * 60);
|
|
263
263
|
}
|
|
264
|
+
.w-fit {
|
|
265
|
+
width: fit-content;
|
|
266
|
+
}
|
|
264
267
|
.w-full {
|
|
265
268
|
width: 100%;
|
|
266
269
|
}
|
|
@@ -282,6 +285,9 @@
|
|
|
282
285
|
.items-center {
|
|
283
286
|
align-items: center;
|
|
284
287
|
}
|
|
288
|
+
.gap-1 {
|
|
289
|
+
gap: calc(var(--spacing) * 1);
|
|
290
|
+
}
|
|
285
291
|
.gap-2 {
|
|
286
292
|
gap: calc(var(--spacing) * 2);
|
|
287
293
|
}
|
|
@@ -574,6 +580,15 @@
|
|
|
574
580
|
--slider-thumb-inner: var(--color-zinc-900);
|
|
575
581
|
--slider-thumb-outer: var(--color-white);
|
|
576
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
|
+
);
|
|
577
592
|
}
|
|
578
593
|
}
|
|
579
594
|
@property --tw-rotate-x {
|