diff --git a/src/components/VCheckbox/VCheckbox.js b/src/components/VCheckbox/VCheckbox.js index 24cccbce382..d10fec3092f 100644 --- a/src/components/VCheckbox/VCheckbox.js +++ b/src/components/VCheckbox/VCheckbox.js @@ -78,7 +78,7 @@ export default { const data = { attrs: { - tabindex: this.disabled + tabindex: this.isDisabled ? -1 : this.internalTabIndex || this.tabindex, role: 'checkbox', diff --git a/src/components/VForm/VForm.js b/src/components/VForm/VForm.js index 7979c580e78..b6798fcaccf 100644 --- a/src/components/VForm/VForm.js +++ b/src/components/VForm/VForm.js @@ -11,11 +11,17 @@ export default { }, props: { - value: Boolean, - lazyValidation: Boolean + disabled: Boolean, + lazyValidation: Boolean, + value: Boolean }, watch: { + disabled (disabled) { + for (const input of this.inputs) { + input.formDisabled = disabled + } + }, errorBag: { handler () { const errors = Object.values(this.errorBag).includes(true) @@ -62,6 +68,8 @@ export default { }, { immediate: true }) } + child.formDisabled = this.disabled + if (!this.lazyValidation) return watcher(child) // Only start watching inputs if we need to diff --git a/src/components/VRadioGroup/VRadio.js b/src/components/VRadioGroup/VRadio.js index 1ae2b7db39f..e6c8dbb13b9 100644 --- a/src/components/VRadioGroup/VRadio.js +++ b/src/components/VRadioGroup/VRadio.js @@ -37,7 +37,7 @@ export default { return this.addColorClassChecks({ 'input-group': true, 'input-group--active': this.isActive, - 'input-group--disabled': this.disabled, + 'input-group--disabled': this.isDisabled, 'input-group--selection-controls': true, 'input-group--tab-focused': this.tabFocused, 'radio': true, @@ -113,7 +113,7 @@ export default { const mandatory = this.isMandatory && this.isMandatory() || false - if (!this.disabled && (!this.isActive || !mandatory)) { + if (!this.isDisabled && (!this.isActive || !mandatory)) { this.$refs.input.checked = true this.isActive = true this.$emit('change', this.value) diff --git a/src/components/VRadioGroup/VRadioGroup.js b/src/components/VRadioGroup/VRadioGroup.js index 2592676147e..90bc03c80d2 100644 --- a/src/components/VRadioGroup/VRadioGroup.js +++ b/src/components/VRadioGroup/VRadioGroup.js @@ -67,7 +67,7 @@ export default { .filter((child) => child.$el.classList.contains('radio')) }, toggleRadio (value) { - if (this.disabled) { + if (this.isDisabled) { return } diff --git a/src/components/VSelect/VSelect.js b/src/components/VSelect/VSelect.js index 39719a9489e..0e58bacd9d3 100644 --- a/src/components/VSelect/VSelect.js +++ b/src/components/VSelect/VSelect.js @@ -436,12 +436,12 @@ export default { return { ...listeners, click: () => { - if (this.disabled || this.readonly) return + if (this.isDisabled || this.readonly) return this.showMenuItems() this.selectedIndex = -1 }, focus: () => { - if (this.disabled || this.readonly) return + if (this.isDisabled || this.readonly) return !this.isFocused && this.focus() }, @@ -583,7 +583,7 @@ export default { render (h) { const data = { attrs: { - tabindex: this.isAutocomplete || this.disabled ? -1 : this.tabindex, + tabindex: this.isAutocomplete || this.isDisabled ? -1 : this.tabindex, ...(this.isAutocomplete ? null : this.$attrs), role: this.isAutocomplete ? null : 'combobox' } @@ -595,7 +595,7 @@ export default { } else { data.on = { click: () => { - if (this.disabled || this.readonly) return + if (this.isDisabled || this.readonly) return // Workaround for clicking select // when using autocomplete diff --git a/src/components/VSelect/mixins/select-generators.js b/src/components/VSelect/mixins/select-generators.js index ec22435945b..1e41d20d545 100644 --- a/src/components/VSelect/mixins/select-generators.js +++ b/src/components/VSelect/mixins/select-generators.js @@ -26,7 +26,7 @@ export default { closeOnClick: false, closeOnContentClick: !this.isMultiple, contentClass: this.computedContentClass, - disabled: this.disabled, + disabled: this.isDisabled, maxHeight: this.maxHeight, nudgeTop, offsetY, @@ -63,9 +63,9 @@ export default { }, attrs: { ...this.$attrs, - disabled: this.disabled || !this.isAutocomplete, + disabled: this.isDisabled || !this.isAutocomplete, readonly: this.readonly, - tabindex: this.disabled || !this.isAutocomplete ? -1 : this.tabindex + tabindex: this.isDisabled || !this.isAutocomplete ? -1 : this.tabindex }, domProps: { value: this.maskText(this.lazySearch || '') @@ -149,11 +149,11 @@ export default { item, index, selected: index === this.selectedIndex, - disabled: this.disabled || this.readonly + disabled: this.isDisabled || this.readonly }) }, genChipSelection (item, index) { - const isDisabled = this.disabled || this.readonly + const isDisabled = this.isDisabled || this.readonly const click = e => { if (isDisabled) return diff --git a/src/components/VSlider/VSlider.js b/src/components/VSlider/VSlider.js index 49f3c442221..7e012722be0 100644 --- a/src/components/VSlider/VSlider.js +++ b/src/components/VSlider/VSlider.js @@ -59,8 +59,8 @@ export default { 'input-group--slider': true, 'input-group--active': this.isActive, 'input-group--dirty': this.inputWidth > 0, - 'input-group--disabled': this.disabled, - 'input-group--ticks': !this.disabled && this.step + 'input-group--disabled': this.isDisabled, + 'input-group--ticks': !this.isDisabled && this.step } }, inputValue: { @@ -162,7 +162,7 @@ export default { methods: { calculateScale (scale) { - return this.disabled ? scale - 0.015 : scale + return this.isDisabled ? scale - 0.015 : scale }, onMouseDown (e) { this.keyPressed = 2 diff --git a/src/components/VSwitch/VSwitch.js b/src/components/VSwitch/VSwitch.js index e0bb461c396..b4a921a5294 100644 --- a/src/components/VSwitch/VSwitch.js +++ b/src/components/VSwitch/VSwitch.js @@ -34,7 +34,7 @@ export default { return { 'input-group--selection-controls__container': true, 'input-group--selection-controls__container--light': this.light, - 'input-group--selection-controls__container--disabled': this.disabled + 'input-group--selection-controls__container--disabled': this.isDisabled } }, toggleClasses () { diff --git a/src/components/VTextField/VTextField.js b/src/components/VTextField/VTextField.js index 8931f3d53a1..144427040df 100644 --- a/src/components/VTextField/VTextField.js +++ b/src/components/VTextField/VTextField.js @@ -180,7 +180,7 @@ export default { style: {}, domProps: { autofocus: this.autofocus, - disabled: this.disabled, + disabled: this.isDisabled, required: this.required, value: this.maskText(this.lazyValue || '') }, diff --git a/src/mixins/input.js b/src/mixins/input.js index 56d501cfda4..413b8aec45c 100644 --- a/src/mixins/input.js +++ b/src/mixins/input.js @@ -12,6 +12,7 @@ export default { data () { return { + formDisabled: false, isFocused: false, tabFocused: false, internalTabIndex: null, @@ -45,6 +46,9 @@ export default { }, computed: { + isDisabled () { + return this.disabled || this.formDisabled + }, inputGroupClasses () { return Object.assign({ 'input-group': true, @@ -52,7 +56,7 @@ export default { 'input-group--focused': this.isFocused, 'input-group--dirty': this.isDirty, 'input-group--tab-focused': this.tabFocused, - 'input-group--disabled': this.disabled, + 'input-group--disabled': this.isDisabled, 'input-group--error': this.hasError, 'input-group--append-icon': this.appendIcon, 'input-group--prepend-icon': this.prependIcon, @@ -136,7 +140,7 @@ export default { 'input-group__icon-clearable': shouldClear }, props: { - disabled: this.disabled + disabled: this.isDisabled }, on: { click: e => { @@ -156,7 +160,7 @@ export default { data = Object.assign({}, { 'class': this.inputGroupClasses, attrs: { - tabindex: this.disabled + tabindex: this.isDisabled ? -1 : this.internalTabIndex || this.tabindex },