mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-11-15 17:58:18 +00:00
35 lines
773 B
Svelte
35 lines
773 B
Svelte
<script lang="ts">
|
|
import type { CheckboxSpec, FieldSpec } from "$lib/registry-schema";
|
|
import Control from "./Control.svelte";
|
|
|
|
interface Props {
|
|
label: string;
|
|
value: unknown;
|
|
spec: FieldSpec;
|
|
onchange?: (value: boolean) => void;
|
|
}
|
|
let { label, value, spec, onchange }: Props = $props();
|
|
|
|
const sp = $derived(spec as CheckboxSpec);
|
|
const current = $derived(
|
|
typeof value === "boolean" ? value : Boolean(sp.default),
|
|
);
|
|
</script>
|
|
|
|
<Control element="label" {label} row>
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox-field"
|
|
checked={current}
|
|
onchange={(e) => onchange?.((e.target as HTMLInputElement).checked)}
|
|
/>
|
|
</Control>
|
|
|
|
<style>
|
|
.checkbox-field {
|
|
width: var(--space-xl);
|
|
height: var(--space-xl);
|
|
accent-color: var(--color-main);
|
|
}
|
|
</style>
|