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

add checkbox component

Browse Source
This commit is contained in:
Elijah Duffy
2025-07-02 09:51:32 -07:00
parent ace9f96804
commit 520a909b01
4 changed files with 127 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.css
View File

@@ -1 +1,3 @@
@import '$lib/styles/theme.css'; @import '$lib/styles/theme.css';
@custom-variant dark (&:where(.dark, .dark *));

7
src/app.html
View File

@@ -4,6 +4,13 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Material Design Icons -->
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
rel="stylesheet"
/>
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

91
src/lib/Checkbox.svelte Normal file
View File

@@ -0,0 +1,91 @@
<script lang="ts" module>
export type CheckboxState = 'indeterminate' | boolean;
</script>
<script lang="ts">
import type { Snippet } from 'svelte';
import { validate } from '@svelte-toolkit/validate';
interface Props {
name?: string;
required?: boolean;
value?: CheckboxState;
color?: 'default' | 'contrast';
children?: Snippet;
onchange: (value: CheckboxState) => void;
}
let {
name,
required = false,
value = $bindable(false),
color = 'contrast',
children,
onchange
}: Props = $props();
let id = $derived.by(() => {
return `checkbox-${name || Math.random().toString(36).substring(2, 15)}`;
});
let valid = $state(true);
</script>
<div class="flex items-center">
<input
type="hidden"
{name}
value={value.toString()}
use:validate={{
valfunc: () => {
if (required && value !== true) {
return false;
}
return true;
}
}}
onvalidate={(e) => {
valid = e.detail.valid;
}}
/>
<button
{id}
class={[
'text-text flex size-7 appearance-none items-center',
'justify-center rounded-lg shadow transition-all hover:opacity-75',
color === 'default' && 'bg-white',
color === 'contrast' && 'border-text/40 border bg-white',
!valid && 'border-accent-400 border'
]}
onclick={() => {
if (value === false || value === 'indeterminate') {
value = true;
} else {
value = false;
}
onchange(value);
}}
>
{#if value === 'indeterminate'}
<span class="material-symbols-outlined">remove</span>
{:else if value === true}
<span class="material-symbols-outlined">check</span>
{/if}
</button>
{#if children}
<label
class={[
'text-text pl-4 font-medium transition-colors select-none',
!valid && 'text-accent-400'
]}
for={id}
>
{@render children()}
{#if required}
<span class="text-accent-400">*</span>
{/if}
</label>
{/if}
</div>

33
src/routes/+page.svelte
View File

@@ -1,5 +1,6 @@
<script> <script>
import Button from '$lib/Button.svelte'; import Button from '$lib/Button.svelte';
import Checkbox from '$lib/Checkbox.svelte';
import Combobox from '$lib/Combobox.svelte'; import Combobox from '$lib/Combobox.svelte';
</script> </script>
@@ -12,14 +13,18 @@
<h2 class="mb-2 text-2xl font-semibold">Component Library</h2> <h2 class="mb-2 text-2xl font-semibold">Component Library</h2>
<p class="comp-title">Button</p> <div class="component">
<div class="flex gap-4"> <p class="title">Button</p>
<Button icon="add" loading={false} onclick={() => alert('Button clicked!')}>Click Me</Button> <div class="flex gap-4">
<Button icon="add" loading={true} onclick={() => alert('Button clicked!')}>Loading Button</Button> <Button icon="add" loading={false} onclick={() => alert('Button clicked!')}>Click Me</Button>
<Button icon="add" loading={true} onclick={() => alert('Button clicked!')}
>Loading Button</Button
>
</div>
</div> </div>
<div class="component"> <div class="component">
<p class="comp-title">Combobox</p> <p class="title">Combobox</p>
<Combobox <Combobox
name="example-combobox" name="example-combobox"
@@ -35,10 +40,26 @@
/> />
</div> </div>
<div class="component">
<p class="title">Checkbox</p>
<Checkbox
name="example-checkbox"
value={'indeterminate'}
onchange={(value) => console.log('Checkbox value:', value)}
>
Agree to terms and conditions
</Checkbox>
</div>
<style lang="postcss"> <style lang="postcss">
@reference '$lib/styles/theme.css'; @reference '$lib/styles/theme.css';
.comp-title { .component .title {
@apply mb-2 text-lg font-semibold; @apply mb-2 text-lg font-semibold;
} }
.component {
@apply mb-6 rounded-lg border p-4;
}
</style> </style>