Change TriStateCheckbox a bit
This commit is contained in:
parent
78c1b9b918
commit
ed6ea39d3c
|
@ -8,45 +8,31 @@
|
|||
import { UNCHECKED, CHECKED, WEIRD } from './stores';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
const icons = new Map()
|
||||
.set(UNCHECKED, 'square')
|
||||
.set(CHECKED, 'check-square-fill')
|
||||
.set(WEIRD, 'square-half');
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function handleClick() {
|
||||
if (state === CHECKED) {
|
||||
state = UNCHECKED;
|
||||
} else {
|
||||
state = CHECKED;
|
||||
}
|
||||
const handleClick = () => {
|
||||
state = state === CHECKED ? UNCHECKED : CHECKED;
|
||||
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 = () => {
|
||||
return collapsed ? 'chevron-expand' : 'chevron-contract';
|
||||
};
|
||||
$: icon = icons.get(state);
|
||||
|
||||
$: chevron = collapsed ? 'chevron-expand' : 'chevron-contract';
|
||||
</script>
|
||||
|
||||
<span class="cal w-100 d-block" on:click={handleClick}>
|
||||
<span class="ms-2">
|
||||
<Icon name={icon()} />
|
||||
<Icon name={icon} />
|
||||
</span>
|
||||
<span class="ms-1">{value}</span>
|
||||
{#if collapsed !== undefined}
|
||||
<span class="float-end" on:click|stopPropagation={handleCollapse}>
|
||||
<Icon name={colIcon()} />
|
||||
<span class="float-end" on:click|stopPropagation={() => (collapsed = !collapsed)}>
|
||||
<Icon name={chevron} />
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
|
|
Loading…
Reference in a new issue