diff --git a/js/components/checkbox_input.js b/js/components/checkbox_input.js index 803041eb..db542fef 100644 --- a/js/components/checkbox_input.js +++ b/js/components/checkbox_input.js @@ -1,10 +1,11 @@ import { emitEvent } from '../lib/emitters' +import nestedcheckboxinput from './nested_checkbox_input' export default { name: 'checkboxinput', components: { - checkboxinput: this, + nestedcheckboxinput, }, props: { @@ -14,7 +15,7 @@ export default { data: function() { return { - checked: this.initialChecked, + isChecked: this.initialChecked, } }, diff --git a/js/components/nested_checkbox_input.js b/js/components/nested_checkbox_input.js new file mode 100644 index 00000000..ebe8553c --- /dev/null +++ b/js/components/nested_checkbox_input.js @@ -0,0 +1,31 @@ +import { emitEvent } from '../lib/emitters' + +export default { + name: 'nestedcheckboxinput', + + props: { + name: String, + isParentChecked: Boolean, + }, + + data: function() { + return { + isChecked: false, + } + }, + + updated: function() { + if (!this.isParentChecked) { + this.isChecked = false + } + }, + + methods: { + onInput: function(e) { + emitEvent('field-change', this, { + value: e.target.checked, + name: this.name, + }) + }, + }, +} diff --git a/js/index.js b/js/index.js index 44461fc2..5f5a886e 100644 --- a/js/index.js +++ b/js/index.js @@ -11,6 +11,7 @@ import optionsinput from './components/options_input' import multicheckboxinput from './components/multi_checkbox_input' import textinput from './components/text_input' import checkboxinput from './components/checkbox_input' +import nestedcheckboxinput from './components/nested_checkbox_input' import EditOfficerForm from './components/forms/edit_officer_form' import poc from './components/forms/poc' import oversight from './components/forms/oversight' @@ -74,6 +75,7 @@ const app = new Vue({ KoReview, BaseForm, DeleteConfirmation, + nestedcheckboxinput, }, mounted: function() { diff --git a/templates/components/checkbox_input.html b/templates/components/checkbox_input.html index ac0906a2..157c0409 100644 --- a/templates/components/checkbox_input.html +++ b/templates/components/checkbox_input.html @@ -14,7 +14,7 @@