blob: 0cfbbd8ecfb7420f222d2e2827af57f6457a2e45 (
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
|
<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];
export let lineBreak = true;
export let onChange: () => void = () => {
return;
};
// 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);
onChange();
};
</script>
<input type="checkbox" on:change={check} bind:checked={$settings[setting]} />
<span
on:click={() => ($settings[setting] = !$settings[setting])}
on:keydown={() => {
return;
}}
role="button"
tabindex="0"
id="option-text"
>
{#if disabled}
<strike>
{@html text}
</strike>
<slot />
{:else}
{@html text}
<slot />
{/if}
</span>
{#if lineBreak}
<br />
{/if}
{#if sectionBreak}
<p />
{/if}
<style>
#option-text {
cursor: text;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
</style>
|