blob: 85dbfcdc9a453d62f2d357445a36c83ce426cf96 (
plain) (
blame)
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
<script lang="ts">
import { run } from 'svelte/legacy';
import settings, { type Settings } from '$stores/settings';
type BooleanSettingsKeys<T> = {
[K in keyof T]: T[K] extends boolean ? K : never;
};
type SettingsBooleanKeys = BooleanSettingsKeys<Settings>;
interface Props {
sectionBreak?: boolean;
disabled?: boolean;
text: string | (() => string);
setting: SettingsBooleanKeys[keyof SettingsBooleanKeys];
lineBreak?: boolean;
onChange?: () => void;
invert?: boolean;
id?: string | null;
children?: import('svelte').Snippet;
}
let {
sectionBreak = false,
disabled = false,
text,
setting,
lineBreak = true,
onChange = () => {
return;
},
invert = false,
id = null,
children
}: Props = $props();
let checked = $state(false);
run(() => {
checked = setting ? (invert ? !$settings[setting] : $settings[setting]) : false;
});
let field = $derived(text instanceof Function ? text() : text);
// 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 => {
const checked = (e.target as HTMLInputElement).checked;
if (setting) {
settings.setKey(setting, invert ? !checked : checked);
onChange();
}
};
const flip = () => {
if (setting) $settings[setting] = !$settings[setting];
};
</script>
<input type="checkbox" onchange={check} bind:checked {id} />
<span
onclick={flip}
onkeydown={() => {
return;
}}
role="button"
tabindex="0"
>
{#if disabled}
<strike>
{field}
</strike>
{:else}
{field}
{/if}
</span>
{@render children?.()}
{#if lineBreak}
<br />
{/if}
{#if sectionBreak}
<p></p>
{/if}
|