Merge pull request #2007 from MetRonnie/reduced-animation

Fix reduced animation mode not working inside mutation form

Author: MetRonnie

src/App.vue

@@ -28,7 +28,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script setup>
 import { computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { useJobTheme, useReducedAnimation } from '@/composables/localStorage'
+import { useJobTheme } from '@/composables/localStorage'
+import { useDynamicVuetifyDefaults } from '@/plugins/vuetify'
 
 const DEFAULT_LAYOUT = 'empty'
 const route = useRoute()
@@ -39,14 +40,7 @@ const showSidebar = computed(() => route.meta.showSidebar ?? true)
 
 const jobTheme = useJobTheme()
 
-const reducedAnimation = useReducedAnimation()
-
-const vuetifyDefaults = computed(() => ({
-  global: {
-    transition: reducedAnimation.value ? 'no' : undefined,
-    ripple: reducedAnimation.value ? false : undefined,
-  }
-}))
+const vuetifyDefaults = useDynamicVuetifyDefaults()
 
 onMounted(() => {
   // apply stored application font-size

src/components/cylc/Mutation.vue

@@ -16,6 +16,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
+  <!-- Have to repeat these defaults as the ones set in App.vue don't make it through
+  the parent v-dialog - see https://github.com/vuetifyjs/vuetify/issues/18123 -->
+  <v-defaults-provider :defaults="vuetifyDefaults">
     <v-card>
       <!-- the mutation title -->
       <v-card-title class="py-3">
@@ -121,6 +124,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
       </v-snackbar>
     </v-card>
+  </v-defaults-provider>
 </template>
 
 <script>
@@ -133,6 +137,8 @@ import {
   mutationStatus
 } from '@/utils/aotf'
 import { mdiClose } from '@mdi/js'
+import { useDynamicVuetifyDefaults } from '@/plugins/vuetify'
+import { inputDefaults } from '@/components/graphqlFormGenerator/components/vuetify'
 
 export default {
   name: 'mutation',
@@ -171,6 +177,14 @@ export default {
     },
   },
 
+  setup () {
+    const vuetifyDefaults = useDynamicVuetifyDefaults(inputDefaults)
+
+    return {
+      vuetifyDefaults,
+    }
+  },
+
   data: () => ({
     isValid: false,
     submitting: false,

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

@@ -15,6 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { computed } from 'vue'
 import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
 import { VAutocomplete } from 'vuetify/components/VAutocomplete'
 import { VCombobox } from 'vuetify/components/VCombobox'
@@ -23,22 +24,28 @@ import { VTextarea } from 'vuetify/components/VTextarea'
 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}
@@ -76,3 +83,25 @@ export const vuetifyOptions = {
     ...inputDefaults
   },
 }
+
+/**
+ * Composable that provides Vuetify defaults that can change at runtime, as opposed to
+ * the static defaults provided in `createVuetify(vuetifyOptions)`.
+ *
+ * For use with a v-defaults-provider.
+ *
+ * @param {Object=} other - Additional defaults to provide.
+ */
+export function useDynamicVuetifyDefaults (other = {}) {
+  const reducedAnimation = useReducedAnimation()
+
+  return computed(() => merge(
+    {
+      global: {
+        transition: reducedAnimation.value ? 'no' : undefined,
+        ripple: reducedAnimation.value ? false : undefined,
+      },
+    },
+    other
+  ))
+}