Setting INDETERMINATE STATE on SVELTE TREEVIEW Component with CHECKBOXES?

Question

hope you can help me figuring out this problem I have :)

Hi have a nested directory tree object that is structured in this way:

{name: 'root_folder', files: Array(6), val: true}

and if you check files you would see something like that:

0: {name: 'sub_folder1', files: Array(3), val: true}
1: {name: 'sub_folder2', files: Array(2), val: true}
2: {name: 'sub_folder3', files: Array(9), val: true}
3: {name: 'sub_folder4', files: Array(1), val: true}
4: {name: 'sub_folder5', files: Array(1), val: true}
5: {name: 'sub_folder6', files: Array(1), val: true}

and so on and so forth until you get to "no-folder" files (of course there could also be no folder s inside this structure).

I'm developing a web app using Svelte and I could render this structure using a Treeview Component taken from here: https://v5.framework7.io/svelte/treeview.html#:~:text=%3CBlockTitle%3EWith%20checkboxes%3C/BlockTitle%3E

and what I wrote is the following:

<!-- Tree_component.svelte -->

<Treeview>
{#each files as file}
    {#if file.files}
      <TreeviewItem label={file.name} iconF7="folder_fill">
        <span slot="content-start">
          <Checkbox
            indeterminate = {?????? *boolean value* ????}
            checked={file.val}
            onChange={async(e) => {

              const auto_check = (node) => {

                if(node.files){
                  node.files.forEach(obj => auto_check(obj));

                }

                node.val = e.target.checked;
              }

              file.val = e.target.checked;
              file.files.forEach(obj => auto_check(obj));
              files = files;
            }}
          />
        </span>
        <svelte:self {...file}/>

      </TreeviewItem>
      {:else}
      <TreeviewItem label={file.name1} iconF7="chevron_left_slash_chevron_right">
        <span slot="content-start">
          <Checkbox 
            checked={file.val}
            onChange={(e) => {
              file['val'] = e.target.checked;
            }}
          />
        </span>
      </TreeviewItem>
    {/if}
{/each}
</Treeview>

As you can see I could recursively set the check value all the way through the structure using recursively the auto_check function.

I'm having some issues to set the "indeterminate" state of the folder checkboxes when I have only a few element of the structure checked, wether they are the last files or the folder in between the structure.

Could someone help me to solve this problem? Thank you in advance :D

Answer 1

You would need to check if any children but not all are checked. Something along these lines:

let indeterminate
$: {
  // Get the number of files that is checked
  const count = file.files.filter(f => f.val).length;
  indeterminate = count != 0 && count != file.files.length;
}

I would advice to put this in the script block to not clutter your markup, it might be a good idea to the same with your event handler to improve readability.