blob: 85b4f0cd451f84ce9cee50f01b68f0a21e495485 (
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
|
<script lang="ts">
import Spacer from "$lib/Layout/Spacer.svelte";
import tooltip from "$lib/Tooltip/tooltip";
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;
export let id: string | null = null;
export let tooltipText: string | undefined = undefined;
$: checked = setting
? invert
? !$settings[setting]
: $settings[setting]
: false;
$: 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;
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
title={tooltipText}
use:tooltip
data-tooltip-disable={tooltipText === undefined}
onclick={flip}
onkeydown={() => {
return;
}}
role="button"
tabindex="0"
>
{#if disabled}
<strike>
{field}
</strike>
{:else}
{field}
{/if}
</span>
<slot />
{#if lineBreak}
<br />
{/if}
{#if sectionBreak}
<Spacer />
{/if}
|