Change TriStateCheckbox a bit
This commit is contained in:
parent
78c1b9b918
commit
ed6ea39d3c
1 changed files with 13 additions and 27 deletions
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue