Move graphqlFormGenerator defaults into v-defaults-provider

Author: MetRonnie

src/components/cylc/Mutation.vue

@@ -138,6 +138,7 @@ import {
 } from '@/utils/aotf'
 import { mdiClose } from '@mdi/js'
 import { useDynamicVuetifyDefaults } from '@/plugins/vuetify'
+import { inputDefaults } from '@/components/graphqlFormGenerator/components/vuetify'
 
 export default {
   name: 'mutation',
@@ -177,7 +178,7 @@ export default {
   },
 
   setup () {
-    const vuetifyDefaults = useDynamicVuetifyDefaults()
+    const vuetifyDefaults = useDynamicVuetifyDefaults(inputDefaults)
 
     return {
       vuetifyDefaults,

src/components/graphqlFormGenerator/EditRuntimeForm.vue

@@ -223,7 +223,6 @@ export default {
     getInputProps (fieldName) {
       const gqlType = findByName(this.type.fields, fieldName).type
       return {
-        ...VuetifyConfig.defaultProps,
         gqlType,
         ...getComponentProps(gqlType, NamedTypes, VuetifyConfig.kinds)
       }

src/components/graphqlFormGenerator/FormInput.vue

@@ -96,7 +96,6 @@ export default {
 
     // merge this in with default and override props
     const propGroups = [
-      VuetifyConfig.defaultProps,
       componentProps,
       this.propOverrides || {}
     ]

src/components/graphqlFormGenerator/components/vuetify.js

@@ -24,6 +24,7 @@ import GList from '@/components/graphqlFormGenerator/components/List.vue'
 import GObject from '@/components/graphqlFormGenerator/components/Object.vue'
 import GBroadcastSetting from '@/components/graphqlFormGenerator/components/BroadcastSetting.vue'
 import GMapItem from '@/components/graphqlFormGenerator/components/MapItem.vue'
+import { inputComponents } from '@/plugins/vuetify'
 
 const NumberFieldProps = {
   is: VTextField,
@@ -55,14 +56,18 @@ export const RULES = {
 
 export const RUNTIME_SETTING = 'RuntimeSetting'
 
-export default {
-  defaultProps: {
-    // default props for all form inputs
-    variant: 'filled',
-    density: 'compact',
-    hideDetails: false,
-  },
+/** Defaults for all form inputs */
+export const inputDefaults = Object.fromEntries(
+  inputComponents.map((name) => [
+    name,
+    {
+      variant: 'filled',
+      hideDetails: false,
+    }
+  ])
+)
 
+export default {
   namedTypes: {
     // registry of GraphQL "named types" (e.g. String)
     // {namedType: {is: ComponentClass, prop1: value, ...}}

src/plugins/vuetify.js

@@ -25,22 +25,27 @@ import { VTextField } from 'vuetify/components/VTextField'
 import colors from 'vuetify/util/colors'
 import { mdiClose } from '@mdi/js'
 import { useReducedAnimation } from '@/composables/localStorage'
+import { merge } from 'lodash-es'
 
-const inputDefaults = Object.fromEntries([
+export const inputComponents = [
   VAutocomplete,
   VCombobox,
   VSelect,
   VTextarea,
-  VTextField
-].map(({ name }) => [
-  name,
-  {
-    density: 'compact',
-    variant: 'outlined',
-    clearIcon: mdiClose,
-    hideDetails: true,
-  }
-]))
+  VTextField,
+].map(({ name }) => name)
+
+const inputDefaults = Object.fromEntries(
+  inputComponents.map((name) => [
+    name,
+    {
+      density: 'compact',
+      variant: 'outlined',
+      clearIcon: mdiClose,
+      hideDetails: true,
+    }
+  ])
+)
 
 /**
  * @type {import('vuetify').VuetifyOptions}
@@ -84,14 +89,19 @@ export const vuetifyOptions = {
  * the static defaults provided in `createVuetify(vuetifyOptions)`.
  *
  * For use with a v-defaults-provider.
+ *
+ * @param {Object=} other - Additional defaults to provide.
  */
-export function useDynamicVuetifyDefaults () {
+export function useDynamicVuetifyDefaults (other = {}) {
   const reducedAnimation = useReducedAnimation()
 
-  return computed(() => ({
-    global: {
-      transition: reducedAnimation.value ? 'no' : undefined,
-      ripple: reducedAnimation.value ? false : undefined,
-    }
-  }))
+  return computed(() => merge(
+    {
+      global: {
+        transition: reducedAnimation.value ? 'no' : undefined,
+        ripple: reducedAnimation.value ? false : undefined,
+      },
+    },
+    other
+  ))
 }