File size: 2,829 Bytes
a03b3ba |
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}
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>
|