45 lines
799 B
Svelte
45 lines
799 B
Svelte
<script lang="ts">
|
|
import { getSelectionContext } from './context';
|
|
|
|
const { selected: _selected } = getSelectionContext();
|
|
|
|
export let value = '';
|
|
export let selected: boolean = false;
|
|
$: if (selected) {
|
|
$_selected = value;
|
|
}
|
|
|
|
function updateSelected() {
|
|
if ($_selected === value) {
|
|
selected = true;
|
|
} else {
|
|
selected = false;
|
|
}
|
|
}
|
|
|
|
$: if ($_selected) updateSelected();
|
|
</script>
|
|
|
|
{#if $_selected !== value}
|
|
<div class="wrapper" class:selected={$_selected === value}>
|
|
<input type="checkbox" name="" id="" bind:checked={selected} />
|
|
<button
|
|
on:click={() => {
|
|
$_selected = value;
|
|
}}><slot /></button
|
|
>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.wrapper {
|
|
display: flex;
|
|
color: black;
|
|
background: white;
|
|
}
|
|
.wrapper.selected {
|
|
position: absolute;
|
|
top: 0px;
|
|
}
|
|
</style>
|