feat(VForm): allow individual inputs to be enabled in disabled form

closes #17391
vuetifyjs · May 16, 2023 · 42ec8c5 · 42ec8c5
1 parent 7738eee
commit 42ec8c5
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 9 deletions.
diff --git a/packages/vuetify/src/components/VForm/__tests__/VForm.spec.ts b/packages/vuetify/src/components/VForm/__tests__/VForm.spec.ts
@@ -1,5 +1,5 @@
 // Libraries
-import Vue from 'vue'
+import Vue, { h } from 'vue'
 import Vuetify from '../../../framework'
 
 // Components
@@ -232,4 +232,25 @@ describe('VForm.ts', () => {
 
     expect(disabledInputs).toBe(inputs.length)
   })
+
+  it('disables all inputs but one', async () => {
+    const inputs = {
+      functional: true,
+      render () {
+        return [h(VTextField), h(VTextField, { props: { disabled: false } })]
+      },
+    }
+
+    const wrapper = mountFunction({
+      propsData: { disabled: true },
+      slots: { default: inputs },
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.inputs).toEqual([
+      expect.objectContaining({ isDisabled: true }),
+      expect.objectContaining({ isDisabled: false }),
+    ])
+  })
 })
diff --git a/packages/vuetify/src/components/VRadioGroup/VRadio.ts b/packages/vuetify/src/components/VRadioGroup/VRadio.ts
@@ -42,7 +42,10 @@ export default baseMixins.extend<options>().extend({
   inheritAttrs: false,
 
   props: {
-    disabled: Boolean,
+    disabled: {
+      type: Boolean,
+      default: null,
+    },
     id: String,
     label: String,
     name: String,
@@ -54,7 +57,10 @@ export default baseMixins.extend<options>().extend({
       type: String,
       default: '$radioOn',
     },
-    readonly: Boolean,
+    readonly: {
+      type: Boolean,
+      default: null,
+    },
     value: {
       default: null,
     },
@@ -90,13 +96,13 @@ export default baseMixins.extend<options>().extend({
       return (this.radioGroup || {}).hasState
     },
     isDisabled (): boolean {
-      return this.disabled || (
+      return this.disabled ?? (
         !!this.radioGroup &&
         this.radioGroup.isDisabled
       )
     },
     isReadonly (): boolean {
-      return this.readonly || (
+      return this.readonly ?? (
         !!this.radioGroup &&
         this.radioGroup.isReadonly
       )

diff --git a/packages/vuetify/src/mixins/validatable/index.ts b/packages/vuetify/src/mixins/validatable/index.ts
@@ -23,7 +23,10 @@ export default baseMixins.extend({
   name: 'validatable',
 
   props: {
-    disabled: Boolean,
+    disabled: {
+      type: Boolean,
+      default: null,
+    },
     error: Boolean,
     errorCount: {
       type: [Number, String],
@@ -37,7 +40,10 @@ export default baseMixins.extend({
       type: [String, Array],
       default: () => [],
     } as PropValidator<InputMessage | null>,
-    readonly: Boolean,
+    readonly: {
+      type: Boolean,
+      default: null,
+    },
     rules: {
       type: Array,
       default: () => [],
@@ -125,7 +131,7 @@ export default baseMixins.extend({
       },
     },
     isDisabled (): boolean {
-      return this.disabled || (
+      return this.disabled ?? (
         !!this.form &&
         this.form.disabled
       )
@@ -134,7 +140,7 @@ export default baseMixins.extend({
       return !this.isDisabled && !this.isReadonly
     },
     isReadonly (): boolean {
-      return this.readonly || (
+      return this.readonly ?? (
         !!this.form &&
         this.form.readonly
       )