nested checkbox component

This commit is contained in:
dandds 2019-04-29 06:32:17 -04:00
parent b7a8cd4168
commit 47b07c2bb5
5 changed files with 41 additions and 7 deletions

View File

@ -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,
}
},

View File

@ -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,
})
},
},
}

View File

@ -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() {

View File

@ -14,7 +14,7 @@
<fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
<legend>
{{ field(**{"v-model": "checked"}) }}
{{ field(**{"v-model": "isChecked"}) }}
{{ label | safe }}
{% if field.description %}

View File

@ -89,11 +89,11 @@
{{ CheckboxInput(member_form.permission_sets.perms_team_mgmt, classes="input__inline-fields") }}
{% call CheckboxInput(member_form.permission_sets.perms_env_mgmt, classes="input__inline-fields") %}
{% set field=member_form.permission_sets.perms_del_env %}
<checkboxinput
<nestedcheckboxinput
name='{{ field.name }}'
inline-template
key='{{ field.name }}'
v-bind:initial-checked='{{ field.data|string|lower }}'
v-bind:is-parent-checked="isChecked"
>
<div class="usa-input input__inline-fields input__inline-fields--indented">
<fieldset data-ally-disabled="true" class="usa-input__choices usa-input__choices--inline">
@ -102,8 +102,8 @@
id="permission_sets-perms_del_env"
name="permission_sets-perms_del_env"
type="checkbox"
v-model="checked"
v-bind:disabled="!$parent.checked">
v-model="isChecked"
v-bind:disabled="!$parent.isChecked">
{{ field.label | safe }}
</legend>
</fieldset>