Fix reduced animation setting 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,7 @@ import {
   mutationStatus
 } from '@/utils/aotf'
 import { mdiClose } from '@mdi/js'
+import { useDynamicVuetifyDefaults } from '@/plugins/vuetify'
 
 export default {
   name: 'mutation',
@@ -171,6 +176,14 @@ export default {
     },
   },
 
+  setup () {
+    const vuetifyDefaults = useDynamicVuetifyDefaults()
+
+    return {
+      vuetifyDefaults,
+    }
+  },
+
   data: () => ({
     isValid: false,
     submitting: false,

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,6 +24,7 @@ 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'
 
 const inputDefaults = Object.fromEntries([
   VAutocomplete,
@@ -76,3 +78,20 @@ 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.
+ */
+export function useDynamicVuetifyDefaults () {
+  const reducedAnimation = useReducedAnimation()
+
+  return computed(() => ({
+    global: {
+      transition: reducedAnimation.value ? 'no' : undefined,
+      ripple: reducedAnimation.value ? false : undefined,
+    }
+  }))
+}