Yielded Nested Checkboxes

components.checkbox-tree\.hbs

<input
  class="checkbox-item"
  id={{@name}}
  type="checkbox"
  checked={{@checked}}
  {{on 'change' (fn this.setChecked (not @checked))}}
  name={{@name}}
  {{set-indeterminate this.isIndeterminate @checked}}
>
<label for={{@name}}>{{@label}}</label>

{{#if (or @checked this.isIndeterminate)}}
  {{yield (hash
    checkbox=(component 'checkbox-tree' registerChild=this.registerChild)
  )}}
{{/if}}

components.checkbox-tree\.js

import Component from '@glimmer/component';
import { schedule } from '@ember/runloop';
import { action } from '@ember/object';
import { tracked } from 'tracked-built-ins';
import { cached, trackedReset } from 'tracked-toolbox';

export default class extends Component {
  @trackedReset('args.checked') children = tracked([]);

  constructor() {
    super(...arguments);
    
    this.args.registerChild?.(this);
  }
 
  @cached
  get isIndeterminate() {
    return this.children.some(child => child.args.checked); 
  }

  @action
  registerChild(child) {
    schedule('actions', () => this.children.push(child)); 
  }

  @action
  setChecked(checked) {
    if (this.isIndeterminate) {
      for (let child of this.children) {
        child.setChecked(false);
      }
    } else {
      this.args.onChange?.(checked); 
    }
  }
}

components.wrapper\.hbs

<ol>
  <li>
    <CheckboxTree
      @checked={{this.searchChecked}}
      @onChange={{fn (mut this.searchChecked)}}
      @label="Search"
      @name="search"
    />
  </li>
  <li>
    <CheckboxTree
      @checked={{this.jobChecked}}
      @onChange={{fn (mut this.jobChecked)}}
      @label="Job Posting"
      @name="job"
      as |list|
    >
      <ol>
        <h4>Filter Job Status</h4>

        <li>
          <list.checkbox
            @checked={{this.openJobChecked}}
            @onChange={{fn (mut this.openJobChecked)}}
            @label="Open"
            @name="openJob"
          />
        </li>
        <li>
          <list.checkbox
            @checked={{this.closedJobChecked}}
            @onChange={{fn (mut this.closedJobChecked)}}
            @label="Closed"
            @name="closedJob"
          />
        </li>
      </ol>

    </CheckboxTree>
  </li>
  <li>
    <CheckboxTree
      @checked={{this.campaignChecked}}
      @onChange={{fn (mut this.campaignChecked)}}
      @label="Campaign"
      @name="campaign"
    />
  </li>
</ol>

components.wrapper\.js

import Component from '@glimmer/component';
import { action, set } from '@ember/object';

export default class extends Component {
	searchChecked = true;
  jobChecked = false;
	campaignChecked = true;
	openJobChecked = false;
	closedJobChecked = false;

	@action
  toggleCheckbox(name, checked) {
    console.log(`WRAPPER setting ${name} to ${checked}`, )
    if (name === 'search') {
    	set(this, 'searchChecked', checked);
    } else if (name === 'job') {
    	set(this, 'jobChecked', checked);
    } else if (name === 'campaign') {
    	set(this, 'campaignChecked', checked);
    } else if (name === 'openJob') {
    	set(this, 'openJobChecked', checked);
    } else if (name === 'closedJob') {
    	set(this, 'closedJobChecked', checked);
    } else {
      throw('I dont know that checkbox!')
    }
  }
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Yielded Nested Checkboxes';
}

modifiers.set-indeterminate\.js

import { modifier } from 'ember-modifier';

export default modifier((element, [isIndeterminate, checked]) => {
  element.indeterminate = isIndeterminate;
  
  if (!isIndeterminate && checked) {
    element.checked = true; 
  }
});

templates.application\.hbs

<h1>{{this.appName}}</h1>
<br>
<br>
<Wrapper />
<br>
<br>
{{outlet}}
<br>
<br>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-modifier": "1.0.3",
    "ember-truth-helpers": "2.1.0",
    "tracked-built-ins": "1.0.0",
    "tracked-toolbox": "1.2.0"
  }
}