You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
1.8 KiB
73 lines
1.8 KiB
<script lang="ts" context="module">
|
|
import { getContext, setContext } from "svelte";
|
|
|
|
export const ctxKey = {};
|
|
|
|
export function getBFormOptionEnabled() {
|
|
return getContext(ctxKey) as Readable<boolean>
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import Icon, { type IconName } from "../Icon.svelte";
|
|
import { writable, type Readable } from "svelte/store";
|
|
|
|
export let state: boolean | null = false;
|
|
export let color: string = "hsl(240, 8%, 56%)";
|
|
export let icon: IconName = "check";
|
|
export let unclickable: boolean = false;
|
|
export let red: boolean = false;
|
|
export let alwaysOpen: boolean = false;
|
|
|
|
const enabled = writable(state === true);
|
|
$: $enabled = state === true || alwaysOpen;
|
|
|
|
setContext(ctxKey, { subscribe: enabled.subscribe });
|
|
</script>
|
|
|
|
<div class="bform-option" class:red class:unclickable class:on={state === true} class:off={state === false} style="--color: {color}">
|
|
<Icon on:click block name={icon} />
|
|
<div class="bform-option-body">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="sass">
|
|
@import "$lib/css/colors.sass"
|
|
|
|
div.bform-option
|
|
box-shadow: 1px 1px 1px #000
|
|
display: flex
|
|
margin: 0.25em 0.25ch
|
|
min-height: 1.9rem
|
|
cursor: pointer
|
|
background: $color-main1
|
|
|
|
> :global(div > .icon)
|
|
padding: 0.1em 0.5ch
|
|
padding-top: 0.45em
|
|
color: $color-main2
|
|
|
|
&.off
|
|
background-color: $color-main2
|
|
> :global(div > .icon)
|
|
color: $color-main4
|
|
|
|
&.on
|
|
background-color: $color-main2
|
|
> :global(div > .icon)
|
|
color: var(--color)
|
|
|
|
&.red
|
|
background-color: $color-main2-red
|
|
> :global(div > .icon)
|
|
color: $color-main6-redder
|
|
|
|
&.unclickable
|
|
cursor: default
|
|
|
|
div.bform-option-body
|
|
display: flex
|
|
flex-direction: row
|
|
cursor: default
|
|
</style>
|