ecoppens/metis
1
0
Fork 0
forked from DGNum/metis
Code Pull requests Activity

Allow collapsing of groups

Browse source
This commit is contained in:
Tom Hubrecht 2022-03-07 11:29:45 +01:00
parent 27d904871d
commit 232a06feee
2 changed files with 45 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/FilterItem.svelte
View file

@ -16,6 +16,8 @@
let subfiltering = createTriStates(UNCHECKED, Object.entries(children).length); let subfiltering = createTriStates(UNCHECKED, Object.entries(children).length);
let subselected = Array.from({ length: Object.entries(children).length }, _ => []); let subselected = Array.from({ length: Object.entries(children).length }, _ => []);
let collapsed = Object.entries(children).length ? false : undefined;
function isVal(val) { function isVal(val) {
return function (other) { return function (other) {
return other === val; return other === val;
@ -78,31 +80,39 @@
$: selected = $: selected =
$filtering === CHECKED ? [item, ...subselected.flat()] : subselected.flat(); $filtering === CHECKED ? [item, ...subselected.flat()] : subselected.flat();
$: subHidden = () => (collapsed ? 'd-none' : '');
</script> </script>
{#if item} {#if item}
<div class="ml-1" style="padding-left: {2 * level}em"> <div class="ml-1" style="padding-left: {2 * level}em">
<TriStateCheckbox state={$filtering} on:change={handleChange} value={item} /> <TriStateCheckbox
state={$filtering}
on:change={handleChange}
value={item}
bind:collapsed
/>
</div> </div>
{#each Object.entries(children) as [toplevel, subchildren], i} <div class={subHidden()}>
{#if subchildren} {#each Object.entries(children) as [toplevel, subchildren], i}
<svelte:self {#if subchildren}
item={toplevel} <svelte:self
children={subchildren} item={toplevel}
on:change={handleChildChange(i)} children={subchildren}
filtering={subfiltering.storeAt(i)} on:change={handleChildChange(i)}
bind:selected={subselected[i]} filtering={subfiltering.storeAt(i)}
level={level + 1} bind:selected={subselected[i]}
/> level={level + 1}
{:else} />
<svelte:self {:else}
item={toplevel} <svelte:self
on:change={handleChildChange(i)} item={toplevel}
filtering={subfiltering.storeAt(i)} on:change={handleChildChange(i)}
bind:selected={subselected[i]} filtering={subfiltering.storeAt(i)}
level={level + 1} bind:selected={subselected[i]}
/> level={level + 1}
{/if} />
{/each} {/if}
{/each}
</div>
{/if} {/if}

14
src/TriStateCheckbox.svelte
View file

@ -3,6 +3,7 @@
export let state; export let state;
export let value; export let value;
export let collapsed = undefined;
import { UNCHECKED, CHECKED, WEIRD } from './stores'; import { UNCHECKED, CHECKED, WEIRD } from './stores';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
@ -18,6 +19,10 @@
dispatch('change', { value: state }); dispatch('change', { value: state });
} }
function handleCollapse(evt) {
collapsed = !collapsed;
}
$: icon = () => { $: icon = () => {
switch (state) { switch (state) {
case UNCHECKED: case UNCHECKED:
@ -28,6 +33,10 @@
return 'check-square-fill'; return 'check-square-fill';
} }
}; };
$: colIcon = () => {
return 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}>
@ -35,6 +44,11 @@
<Icon name={icon()} /> <Icon name={icon()} />
</span> </span>
<span class="ms-1">{value}</span> <span class="ms-1">{value}</span>
{#if collapsed !== undefined}
<span class="float-end" on:click|stopPropagation={handleCollapse}>
<Icon name={colIcon()} />
</span>
{/if}
</span> </span>
<style> <style>