src/lib/Settings/SettingCheckboxToggle.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<script lang="ts">
	import settings, { type Settings } from '../../stores/settings';

	type BooleanSettingsKeys<T> = {
		[K in keyof T]: T[K] extends boolean ? K : never;
	};
	type SettingsBooleanKeys = BooleanSettingsKeys<Settings>;

	export let sectionBreak = false;
	export let disabled = false;
	export let text: string;
	export let setting: SettingsBooleanKeys[keyof SettingsBooleanKeys];

	// const toggler = (key: keyof Settings) => [
	// 	() =>
	// 		settings.update((s) => {
	// 			(s[key] as boolean) = true;

	// 			$settings = s;

	// 			return s;
	// 		}),
	// 	() =>
	// 		settings.update((s) => {
	// 			(s[key] as boolean) = false;

	// 			$settings = s;

	// 			return s;
	// 		})
	// ];

	const check = (e: Event & { currentTarget: EventTarget & HTMLInputElement }): void => {
		settings.setKey(setting, (e.target as HTMLInputElement).checked);
	};
</script>

<input type="checkbox" on:change={check} bind:checked={$settings[setting]} />

{#if disabled}
	<strike>
		{text}
	</strike>
	<slot />
{:else}
	{text}
	<slot />
{/if}

<br />

{#if sectionBreak}
	<p />
{/if}