Change TriStateCheckbox a bit

This commit is contained in:
Tom Hubrecht 2022-03-13 13:10:43 +01:00
parent 78c1b9b918
commit ed6ea39d3c

View file

@ -8,45 +8,31 @@
import { UNCHECKED, CHECKED, WEIRD } from './stores'; import { UNCHECKED, CHECKED, WEIRD } from './stores';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
const icons = new Map()
.set(UNCHECKED, 'square')
.set(CHECKED, 'check-square-fill')
.set(WEIRD, 'square-half');
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
function handleClick() { const handleClick = () => {
if (state === CHECKED) { state = state === CHECKED ? UNCHECKED : CHECKED;
state = UNCHECKED;
} else {
state = CHECKED;
}
dispatch('change', { value: state }); dispatch('change', { value: state });
}
function handleCollapse(evt) {
collapsed = !collapsed;
}
$: icon = () => {
switch (state) {
case UNCHECKED:
return 'square';
case WEIRD:
return 'square-half';
case CHECKED:
return 'check-square-fill';
}
}; };
$: colIcon = () => { $: icon = icons.get(state);
return collapsed ? 'chevron-expand' : 'chevron-contract';
}; $: chevron = collapsed ? 'chevron-expand' : 'chevron-contract';
</script> </script>
<span class="cal w-100 d-block" on:click={handleClick}> <span class="cal w-100 d-block" on:click={handleClick}>
<span class="ms-2"> <span class="ms-2">
<Icon name={icon()} /> <Icon name={icon} />
</span> </span>
<span class="ms-1">{value}</span> <span class="ms-1">{value}</span>
{#if collapsed !== undefined} {#if collapsed !== undefined}
<span class="float-end" on:click|stopPropagation={handleCollapse}> <span class="float-end" on:click|stopPropagation={() => (collapsed = !collapsed)}>
<Icon name={colIcon()} /> <Icon name={chevron} />
</span> </span>
{/if} {/if}
</span> </span>