[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4
flo-bit.dev/ui-kit/
svelte
tailwindcss
ui-components
fix copy code buttons, update color select
+39
-16
+20
-5
src/lib/components/extra/color-select/ColorSelect.svelte
+20
-5
src/lib/components/extra/color-select/ColorSelect.svelte
···
3
3
import type { HTMLAttributes } from 'svelte/elements';
4
4
import { cn } from '$lib/utils';
5
5
6
-
type Color = { class?: string; label: string; value?: string };
6
+
type Color = { class?: string; label: string; value?: string } | string;
7
7
8
8
let {
9
9
ref = $bindable(null),
···
24
24
25
25
onselected?: (color: Color, previous: Color) => void;
26
26
} = $props();
27
+
28
+
function getLabel(c: Color) {
29
+
if (typeof c === 'string') return c;
30
+
return c.label;
31
+
}
32
+
33
+
function getValue(c: Color) {
34
+
if (typeof c === 'string') return c;
35
+
return c.value;
36
+
}
37
+
38
+
function getColorClass(c: Color) {
39
+
if (typeof c === 'string') return '';
40
+
return c.class;
41
+
}
27
42
</script>
28
43
29
44
<div
···
36
51
class={cn(
37
52
'peer outline-base-900 focus:outline-base-900 dark:outline-base-100 dark:focus:outline-base-100 cursor-pointer items-center justify-center rounded-full p-0.5 outline-offset-2 transition-all duration-100 focus:outline-2 focus:outline-offset-2',
38
53
'border-base-600 border-opacity-30 dark:border-base-400 dark:border-opacity-30 size-8 rounded-full border transition-all',
39
-
selected.label === color.label
54
+
getLabel(selected) === getLabel(color)
40
55
? 'bg-opacity-100 group-focus-within:outline-base-500 focus:group-focus-within:outline-base-900 dark:group-focus-within:outline-base-400 dark:focus:group-focus-within:outline-base-100 outline-2'
41
56
: 'opacity-90 outline-0 hover:opacity-100 focus:opacity-100',
42
57
colorsClass,
43
-
color.class
58
+
getColorClass(color)
44
59
)}
45
-
style={color.value ? `background-color: ${color.value}` : undefined}
60
+
style={getValue(color) ? `background-color: ${getValue(color)}` : undefined}
46
61
onclick={() => {
47
62
if (selected === color) return;
48
63
let previous = selected;
···
51
66
if (onselected) onselected(color, previous);
52
67
}}
53
68
>
54
-
<span class="sr-only">{color.label}</span>
69
+
<span class="sr-only">{getLabel(color)}</span>
55
70
</button>
56
71
{/each}
57
72
</div>
+1
-2
src/routes/+page.svelte
+1
-2
src/routes/+page.svelte
···
1
1
<script>
2
2
import { base } from '$app/paths';
3
-
import { Alert } from '$lib/components/base/alert';
4
3
import { Button } from '$lib/components/base/button';
5
4
import Cards from '$docs/site-components/Cards.svelte';
6
5
import Navbar from '$docs/site-components/Navbar.svelte';
···
15
14
<h1
16
15
class="text-base-950 dark:text-base-50 my-8 mt-8 max-w-2xl text-4xl font-bold tracking-tight text-pretty md:text-5xl md:leading-14"
17
16
>
18
-
Beautiful UI components built with Tailwind 4 and Svelte 5
17
+
UI components built with Tailwind 4 and Svelte 5
19
18
</h1>
20
19
21
20
<PublicAlphaAlert class="w-fit" />