blob: e17eddbc7b675361c410ee679e8d56cad0b3c1c3 (
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
|
<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 | (() => string);
export let setting: SettingsBooleanKeys[keyof SettingsBooleanKeys];
export let lineBreak = true;
export let onChange: () => void = () => {
return;
};
export let invert = false;
$: checked = invert ? !$settings[setting] : $settings[setting];
$: field = 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;
settings.setKey(setting, invert ? !checked : checked);
onChange();
};
</script>
<input type="checkbox" on:change={check} bind:checked />
<span
on:click={() => ($settings[setting] = !$settings[setting])}
on:keydown={() => {
return;
}}
role="button"
tabindex="0"
>
{#if disabled}
<strike>
{field}
</strike>
{:else}
{field}
{/if}
</span>
<slot />
{#if lineBreak}
<br />
{/if}
{#if sectionBreak}
<p />
{/if}
|