2022-03-03 00:42:43 +08:00
|
|
|
<script lang="ts">
|
|
|
|
import { createEventDispatcher } from "svelte";
|
2022-03-12 00:00:48 +08:00
|
|
|
|
2022-03-03 00:42:43 +08:00
|
|
|
export let value: boolean;
|
2022-03-12 00:00:48 +08:00
|
|
|
export let disabled: boolean = false;
|
2022-04-06 01:11:29 +08:00
|
|
|
export let label: string;
|
2022-03-03 00:42:43 +08:00
|
|
|
|
|
|
|
const dispatch = createEventDispatcher<{ change: boolean }>();
|
|
|
|
|
2023-01-24 02:41:33 +08:00
|
|
|
function handle_change(value: boolean) {
|
2022-06-06 22:58:19 +08:00
|
|
|
dispatch("change", value);
|
2022-03-03 00:42:43 +08:00
|
|
|
}
|
2023-01-24 02:41:33 +08:00
|
|
|
|
|
|
|
$: handle_change(value);
|
2022-03-03 00:42:43 +08:00
|
|
|
</script>
|
|
|
|
|
2022-04-26 22:48:39 +08:00
|
|
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
2023-01-18 04:47:40 +08:00
|
|
|
<label class:disabled>
|
2022-04-26 22:48:39 +08:00
|
|
|
<input
|
2023-01-24 02:41:33 +08:00
|
|
|
bind:checked={value}
|
2022-04-26 22:48:39 +08:00
|
|
|
{disabled}
|
|
|
|
type="checkbox"
|
|
|
|
name="test"
|
2023-01-18 04:47:40 +08:00
|
|
|
data-testid="checkbox"
|
2022-04-26 22:48:39 +08:00
|
|
|
/>
|
2023-01-18 04:47:40 +08:00
|
|
|
<span class="ml-2">{label}</span>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
label {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
cursor: pointer;
|
2023-03-07 04:52:31 +08:00
|
|
|
color: var(--body-text-color);
|
|
|
|
font-weight: var(--checkbox-label-text-weight);
|
|
|
|
font-size: var(--checkbox-label-text-size);
|
2023-01-18 04:47:40 +08:00
|
|
|
line-height: var(--line-md);
|
|
|
|
}
|
|
|
|
|
|
|
|
label > * + * {
|
|
|
|
margin-left: var(--size-2);
|
|
|
|
}
|
|
|
|
|
|
|
|
input {
|
|
|
|
--ring-color: transparent;
|
|
|
|
position: relative;
|
2023-03-07 04:52:31 +08:00
|
|
|
box-shadow: var(--input-shadow);
|
|
|
|
border: 1px solid var(--checkbox-border-color);
|
2023-01-18 04:47:40 +08:00
|
|
|
border-radius: var(--checkbox-border-radius);
|
2023-03-07 04:52:31 +08:00
|
|
|
background-color: var(--checkbox-background);
|
2023-01-18 04:47:40 +08:00
|
|
|
line-height: var(--line-sm);
|
|
|
|
}
|
|
|
|
|
|
|
|
input:checked {
|
|
|
|
border-color: var(--checkbox-border-color-selected);
|
|
|
|
background-color: var(--checkbox-background-selected);
|
|
|
|
}
|
|
|
|
|
|
|
|
input:hover {
|
|
|
|
border-color: var(--checkbox-border-color-hover);
|
|
|
|
background-color: var(--checkbox-background-hover);
|
|
|
|
}
|
|
|
|
|
|
|
|
input:focus {
|
|
|
|
border-color: var(--checkbox-border-color-focus);
|
|
|
|
background-color: var(--checkbox-background-focus);
|
|
|
|
}
|
|
|
|
|
|
|
|
input:checked:focus {
|
|
|
|
border-color: var(--checkbox-background-selected);
|
|
|
|
background-color: var(--checkbox-background-selected);
|
|
|
|
}
|
|
|
|
|
|
|
|
input:checked:hover {
|
|
|
|
border-color: var(--checkbox-background-selected);
|
|
|
|
background-color: var(--checkbox-background-selected);
|
|
|
|
}
|
|
|
|
|
|
|
|
input[disabled],
|
|
|
|
.disabled {
|
|
|
|
cursor: not-allowed;
|
|
|
|
}
|
|
|
|
</style>
|