/
Radio.svelte
115 lines (100 loc) 路 2.79 KB
/
Radio.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
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
104
105
106
107
108
109
110
111
112
113
114
115
<script context="module">
let id = 0;
</script>
<script lang="ts">
import { createEventDispatcher } from "svelte";
export let display_value: string;
export let internal_value: string | number;
export let disabled = false;
export let selected: string | null = null;
const dispatch = createEventDispatcher<{ input: string | number }>();
let is_selected = false;
async function handle_input(
selected: string | null,
internal_value: string | number
): Promise<void> {
is_selected = selected === internal_value;
if (is_selected) {
dispatch("input", internal_value);
}
}
$: handle_input(selected, internal_value);
</script>
<label
class:disabled
class:selected={is_selected}
data-testid="{display_value}-radio-label"
>
<input
{disabled}
type="radio"
name="radio-{++id}"
value={internal_value}
aria-checked={is_selected}
bind:group={selected}
/>
<span class="ml-2">{display_value}</span>
</label>
<style>
label {
display: flex;
align-items: center;
transition: var(--button-transition);
cursor: pointer;
box-shadow: var(--checkbox-label-shadow);
border: var(--checkbox-label-border-width) solid
var(--checkbox-label-border-color);
border-radius: var(--button-small-radius);
background: var(--checkbox-label-background-fill);
padding: var(--checkbox-label-padding);
color: var(--checkbox-label-text-color);
font-weight: var(--checkbox-label-text-weight);
font-size: var(--checkbox-label-text-size);
line-height: var(--line-md);
}
label:hover {
background: var(--checkbox-label-background-fill-hover);
}
label:focus {
background: var(--checkbox-label-background-fill-focus);
}
label.selected {
background: var(--checkbox-label-background-fill-selected);
color: var(--checkbox-label-text-color-selected);
}
label > * + * {
margin-left: var(--size-2);
}
input {
--ring-color: transparent;
position: relative;
box-shadow: var(--checkbox-shadow);
border: var(--checkbox-border-width) solid var(--checkbox-border-color);
border-radius: var(--radius-full);
background-color: var(--checkbox-background-color);
line-height: var(--line-sm);
}
input:checked,
input:checked:hover {
border-color: var(--checkbox-border-color-selected);
background-image: var(--radio-circle);
background-color: var(--checkbox-background-color-selected);
}
input:hover {
border-color: var(--checkbox-border-color-hover);
background-color: var(--checkbox-background-color-hover);
}
input:focus {
border-color: var(--checkbox-border-color-focus);
background-color: var(--checkbox-background-color-focus);
}
input:checked:focus {
border-color: var(--checkbox-border-color-focus);
background-image: var(--radio-circle);
background-color: var(--checkbox-background-color-selected);
}
input[disabled],
.disabled {
cursor: not-allowed;
}
</style>