svelte-toolkit/sui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finish custom class and improved options overhaul

Browse Source
This commit is contained in:
Elijah Duffy
2025-07-03 14:45:23 -07:00
parent c54002f5fa
commit 02311a0e7b
16 changed files with 170 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/lib/ToggleSelect.svelte
View File

@@ -1,20 +1,17 @@
<script lang="ts">
import type { Snippet } from 'svelte';
import type { MouseEventHandler } from 'svelte/elements';
import type { ClassValue, MouseEventHandler } from 'svelte/elements';
let {
name,
selected = false,
children,
onclick,
ontoggle
}: {
interface Props {
name?: string;
selected?: boolean;
class?: ClassValue | null | undefined;
children: Snippet;
onclick?: MouseEventHandler<HTMLButtonElement>;
ontoggle?: (selected: boolean) => void;
} = $props();
}
let { name, selected = false, class: classValue, children, onclick, ontoggle }: Props = $props();
const handleToggleSelectClick: MouseEventHandler<HTMLButtonElement> = (event) => {
selected = !selected; // update state
@@ -28,9 +25,13 @@
{/if}
<button
class="rounded-3xl border px-6 py-2.5 font-medium transition-colors {selected
? 'border-secondary bg-primary text-background hover:bg-primary-600'
: 'border-accent text-text dark:border-accent/50 dark:bg-text dark:text-background dark:hover:bg-text-900 bg-white hover:bg-slate-100'}"
class={[
'rounded-3xl border px-6 py-2.5 font-medium transition-colors',
selected
? 'border-secondary bg-primary text-background hover:bg-primary-600'
: 'border-accent text-text dark:border-accent/50 dark:bg-text dark:text-background dark:hover:bg-text-900 bg-white hover:bg-slate-100',
classValue
]}
onclick={handleToggleSelectClick}
>
{@render children()}