nested checkbox component
This commit is contained in:
parent
b7a8cd4168
commit
47b07c2bb5
@ -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,
|
||||
}
|
||||
},
|
||||
|
||||
|
31
js/components/nested_checkbox_input.js
Normal file
31
js/components/nested_checkbox_input.js
Normal 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,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
@ -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() {
|
||||
|
@ -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 %}
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user