Forked from pzuraq/components.checkbox-tree\.hbs
Last active
August 19, 2020 17:39
-
-
Save tylerbecks/571663e5c7f5a962f4e505d382309c9f to your computer and use it in GitHub Desktop.
@Tracked Nested Checkboxes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
@action | |
registerChild(child) { | |
schedule('actions', () => this.children.push(child)); | |
} | |
@cached | |
get isIndeterminate() { | |
return this.children.some(child => child.args.checked); | |
} | |
@action | |
setChecked(checked) { | |
if (this.isIndeterminate) { | |
for (let child of this.children) { | |
child.setChecked(false); | |
} | |
} else { | |
this.args.onChange?.(checked); | |
} | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Controller from '@ember/controller'; | |
export default class ApplicationController extends Controller { | |
appName = '@tracked Nested Checkboxes'; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { modifier } from 'ember-modifier'; | |
export default modifier((element, [isIndeterminate, checked]) => { | |
element.indeterminate = isIndeterminate; | |
if (!isIndeterminate && checked) { | |
element.checked = true; | |
} | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment