123 lines
2.6 KiB
Svelte
123 lines
2.6 KiB
Svelte
<script lang="ts">
|
||
import { createEventDispatcher } from "svelte";
|
||
|
||
import Icon, { type IconName } from "./Icon.svelte";
|
||
|
||
export let tabIndex: number | undefined | null = void(0);
|
||
export let checked: boolean | string | number;
|
||
export let centered = false;
|
||
export let disabled = false;
|
||
export let noLabel = false;
|
||
export let noBorder = false;
|
||
export let inline = false;
|
||
export let small = false;
|
||
export let icon: IconName = "check";
|
||
export let label = "(Missing label property)";
|
||
|
||
const dispatch = createEventDispatcher();
|
||
|
||
function handleClick() {
|
||
if (!disabled) {
|
||
checked = !checked;
|
||
dispatch('check', { checked });
|
||
}
|
||
}
|
||
|
||
function handlePress(e: KeyboardEvent) {
|
||
if (!disabled && ["enter", " ", " ", "c"].includes(e.key?.toLowerCase())) {
|
||
checked = !checked;
|
||
dispatch('check', { checked });
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<div
|
||
class="checkbox"
|
||
class:centered
|
||
class:noLabel
|
||
class:inline
|
||
class:small
|
||
role="checkbox"
|
||
aria-checked={checked}
|
||
aria-disabled={disabled}
|
||
tabindex={tabIndex}
|
||
on:keypress={handlePress}
|
||
on:click={handleClick}
|
||
>
|
||
<div class="box" class:noBorder class:disabled class:checked class:unchecked={!checked}>
|
||
<Icon name={icon} />
|
||
</div>
|
||
{#if !noLabel}
|
||
<div class="label">{label}</div>
|
||
{/if}
|
||
</div>
|
||
|
||
<style lang="sass">
|
||
@import "$lib/css/colors"
|
||
|
||
div.checkbox
|
||
display: flex
|
||
flex-direction: row
|
||
flex-shrink: 0
|
||
margin-top: 0.5em
|
||
margin-bottom: 1em
|
||
-webkit-user-select: none
|
||
-moz-user-select: none
|
||
user-select: none
|
||
transition: 250ms
|
||
padding: 0.1em
|
||
font-size: 0.9em
|
||
|
||
&.noLabel
|
||
display: block
|
||
margin-top: 0.35em
|
||
margin-bottom: 0
|
||
font-size: 0.75em
|
||
|
||
&.small
|
||
padding-top: 0
|
||
font-size: 0.65em
|
||
|
||
div.checkbox.centered
|
||
margin: auto
|
||
|
||
:global(div.checkbox + div.checkbox)
|
||
margin-top: -0.75em
|
||
|
||
div.checkbox.inline
|
||
margin-top: 0.25rem
|
||
margin-bottom: 0.25rem
|
||
margin-right: 1rch
|
||
|
||
div.box
|
||
cursor: pointer
|
||
border: 0.5px solid
|
||
padding: 0.05em 0.3ch
|
||
padding-top: 0.2em
|
||
line-height: 1
|
||
background-color: $color-mainhalf
|
||
color: $color-mainhalf
|
||
border-color: $color-main5
|
||
font-size: 0.9em
|
||
&.noBorder
|
||
color: $color-main2
|
||
&.checked
|
||
color: $color-main9
|
||
background-color: $color-main4
|
||
&.disabled
|
||
color: $color-main1
|
||
&.checked
|
||
color: $color-main5
|
||
background-color: $color-main1
|
||
&.noBorder
|
||
border: none
|
||
background: none
|
||
|
||
div.label
|
||
margin: auto 0
|
||
margin-left: 1ch
|
||
|
||
-webkit-user-select: none
|
||
-moz-user-select: none
|
||
user-select: none
|
||
</style> |