CheckboxTree 3.8

components.checkbox-tree\.js

import Component from '@glimmer/component';
import { get } from '@ember/object';
import { schedule } from '@ember/runloop';

export default class extends Component {
  constructor() {
    super(...arguments);

    this.children = this.children || [];
    this.args.registerChild?.(this);
  }

  registerChild(child) {
    // schedule('actions', () => get('children').push(child)); 
    get('children').push(child);
  }

  get isIndeterminate() {
    return this.children.some(child => !child.args.checked);
  }

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

components.consumer\.js

import Component from '@glimmer/component';

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

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'CheckboxTree 3.8';
}

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>
{{outlet}}
<br>
<br>

<Consumer />

templates.components.checkbox-tree\.hbs

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

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

templates.components.consumer\.hbs

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

			<Job.checkboxTreeCheckboxTree
        @checked={{this.openJobChecked}}
        @onChange={{action (mut this.openJobChecked)}}
        @label="Open"
        @name="openJob"
      />
      <Job.checkboxTree
        @checked={{this.closedJobChecked}}
        @onChange={{action (mut this.closedJobChecked)}}
        @label="Closed"
        @name="closedJob"
      />
    </ol>

  </CheckboxTree>

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

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.8.3",
    "ember-template-compiler": "3.8.3",
    "ember-testing": "3.8.3"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-modifier": "1.0.3",
    "ember-truth-helpers": "2.1.0"
  }
}