Merge pull request #1642 from MetRonnie/vuetify

Update Vuetify to 3.5.1

README.md

@@ -186,7 +186,7 @@ will be automatically handled by your `build:watch` command.
 
 ### Internationalization
 
-> **Note**
+> [!NOTE]
 > Internationalization is only partly implemented at the moment.
 
 This project utilizes [vue-i18n](https://kazupon.github.io/vue-i18n/) for

package.json

@@ -50,7 +50,7 @@
     "vue-router": "4.2.5",
     "vue-the-mask": "0.11.1",
     "vue3-apexcharts": "1.4.1",
-    "vuetify": "3.1.7",
+    "vuetify": "3.5.1",
     "vuex": "4.1.0"
   },
   "devDependencies": {

src/App.vue

@@ -16,47 +16,42 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <v-app :class="jobThemeClass">
-    <component :is="layout" :showSidebar="showSidebar">
-      <router-view/>
-    </component>
-  </v-app>
+  <v-defaults-provider :defaults="vuetifyDefaults">
+    <v-app :class="jobThemeClass">
+      <component :is="layout" :showSidebar="showSidebar">
+        <router-view/>
+      </component>
+    </v-app>
+  </v-defaults-provider>
 </template>
 
-<script>
-import appSettings from '@/mixins/appSettings'
+<script setup>
+import { computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
 import { useJobTheme, useReducedAnimation } from '@/composables/localStorage'
 
 const DEFAULT_LAYOUT = 'empty'
+const route = useRoute()
 
-export default {
-  mixins: [
-    appSettings,
-  ],
-
-  computed: {
-    layout () {
-      return `${this.$route.meta.layout || DEFAULT_LAYOUT}-layout`
-    },
-    showSidebar () {
-      return this.$route.meta.showSidebar ?? true
-    },
-    jobThemeClass () {
-      return `job_theme--${useJobTheme().value}`
-    },
-  },
-
-  mounted () {
-    // apply stored application font-size
-    if (localStorage.fontSize) {
-      document.documentElement.style.fontSize = localStorage.fontSize
-    }
-    // apply stored reduced animation mode on/off
-    this.setReducedAnimation(useReducedAnimation().value)
+const layout = computed(() => `${route.meta.layout || DEFAULT_LAYOUT}-layout`)
+
+const showSidebar = computed(() => route.meta.showSidebar ?? true)
+
+const jobThemeClass = computed(() => `job_theme--${useJobTheme().value}`)
+
+const reducedAnimation = useReducedAnimation()
+
+const vuetifyDefaults = computed(() => ({
+  global: {
+    transition: reducedAnimation.value ? false : null,
+    ripple: reducedAnimation.value ? false : null,
   }
-}
-</script>
+}))
 
-<style lang="scss">
-  @import '@/styles/index.scss';
-</style>
+onMounted(() => {
+  // apply stored application font-size
+  if (localStorage.fontSize) {
+    document.documentElement.style.fontSize = localStorage.fontSize
+  }
+})
+</script>

src/components/core/Alert.vue

@@ -28,7 +28,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <template v-slot:actions>
       <v-btn
         icon
-        v-bind="attrs"
         @click="closeAlert"
         data-cy="snack-close"
       >

src/components/cylc/Mutation.vue

@@ -16,15 +16,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-    <v-card>
+    <v-card
+      v-click-outside="onClickOutside"
+    >
       <!-- the mutation title -->
       <v-card-title class="py-3">
           {{ mutation._title }}
       </v-card-title>
       <v-card-text class="card-text py-0 px-4">
         <!-- the mutation description -->
         <v-expansion-panels
-          variant="accordian"
           v-bind="extendedDescription ? { hover: true } : { readonly: true }"
         >
           <v-expansion-panel
@@ -71,7 +72,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <v-spacer></v-spacer>
         <v-btn
           color="grey"
-          @click="cancel()"
+          @click="close()"
           variant="text"
           data-cy="cancel"
         >
@@ -113,7 +114,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <v-btn
             @click="showWarning = false"
             icon
-            v-bind="attrs"
             data-cy="snack-close"
           >
             <v-icon>
@@ -145,6 +145,11 @@ export default {
     Markdown
   },
 
+  emits: [
+    'close',
+    'success',
+  ],
+
   props: {
     mutation: {
       // graphql mutation object as returned by introspection query
@@ -166,10 +171,6 @@ export default {
       required: false,
       default: () => {}
     },
-    cancel: {
-      type: Function,
-      required: true
-    }
   },
 
   data: () => ({
@@ -178,6 +179,14 @@ export default {
     warningMsg: null
   }),
 
+  mounted () {
+    document.addEventListener('keydown', this.onKeydown)
+  },
+
+  beforeUnmount () {
+    document.removeEventListener('keydown', this.onKeydown)
+  },
+
   computed: {
     /* Return the first line of the description. */
     shortDescription () {
@@ -198,19 +207,38 @@ export default {
   },
 
   methods: {
+    close () {
+      this.$emit('close')
+    },
+
     /* Execute the GraphQL mutation */
     submit () {
       this.submitting = true
       this.$refs.form.submit().then(response => {
         this.submitting = false
         if (response.status === mutationStatus.SUCCEEDED) {
           // Close the form on success
-          this.cancel()
+          this.close()
+          this.$emit('success')
         } else if (response.status === mutationStatus.WARN) {
           this.warningMsg = response.message
         }
         // else if error, an alert is generated by AOTF
       })
+    },
+
+    onClickOutside (e) {
+      // Only close on click outside if it's the "scrim", i.e. we are
+      // not clicking on an error snackbar for example
+      if (e.target?.classList.contains('v-overlay__scrim')) {
+        this.close()
+      }
+    },
+
+    onKeydown (e) {
+      if (e.key === 'Escape') {
+        this.close()
+      }
     }
   },
 

src/components/cylc/TaskFilterSelect.vue

@@ -10,11 +10,11 @@
         <template #prepend>
           <div class="mr-4">
             <Workflowicon
-              v-if="type==='workflow state'"
+              v-if="type === 'workflow state'"
               :status="item.raw"
             />
             <Task
-              v-if="type==='task state'"
+              v-if="type === 'task state'"
               :task="{ state: item.raw }"
             />
           </div>
@@ -30,14 +30,16 @@
         :close-icon="mdiClose"
       >
         <template #prepend>
-          <Workflowicon
-            v-if="type==='workflow state'"
-            :status="item.raw"
-          />
-          <Task
-            v-if="type==='task state'"
-            :task="{ state: item.raw }"
-          />
+          <div class="mr-1 ml-n1">
+            <Workflowicon
+              v-if="type === 'workflow state'"
+              :status="item.raw"
+            />
+            <Task
+              v-if="type === 'task state'"
+              :task="{ state: item.raw }"
+            />
+          </div>
         </template>
         {{ item.title }}
       </v-chip>

src/components/cylc/analysis/AnalysisTable.vue

@@ -149,7 +149,7 @@ export default {
     formatCell (item, header) {
       const arrayMatch = header.key.match(/^(.+)\.(\d+)$/)
       const key = arrayMatch?.[1] ?? header.key
-      let value = item.value[key]
+      let value = item[key]
       if (arrayMatch) {
         const index = arrayMatch[2]
         value = value[index]

src/components/cylc/cylcObject/Menu.vue

@@ -25,7 +25,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-show="showMenu"
         @show-mutations-menu="showMutationsMenu"
         :key="node.id"
-        v-click-outside="{ handler: onClickOutside }"
+        v-click-outside="{ handler: onClickOutside, closeConditional: () => !dialog }"
         class="c-mutation-menu elevation-10 overflow-y-auto"
         max-height="90vh"
         width="max-content"
@@ -46,19 +46,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           {{ typeAndStatusText }}
         </v-card-subtitle>
         <v-divider v-if="primaryMutations.length || displayMutations.length" />
-        <!-- TODO: replace v-progress-linear with v-skeleton-loader when
-        the latter is added to Vuetify 3.
-        https://github.com/cylc/cylc-ui/issues/1272 -->
-        <!-- <v-skeleton-loader
+        <v-skeleton-loader
           v-if="isLoadingMutations && primaryMutations.length"
           type="list-item-avatar-two-line@3"
           min-width="400"
-          data-cy="skeleton"
-        /> -->
-        <v-progress-linear
-          v-if="isLoadingMutations && primaryMutations.length"
-          indeterminate
-          min-width="400px"
+          class="my-2"
           data-cy="skeleton"
         />
         <v-list
@@ -108,17 +100,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </v-card>
     </component>
     <v-dialog
+      v-if="dialogMutation"
       v-model="dialog"
       width="700px"
       max-width="100%"
       content-class="c-mutation-dialog mx-0"
-      v-if="dialogMutation"
+      persistent
+      no-click-animation
     >
       <Mutation
         :mutation="dialogMutation"
         :cylcObject="node"
         :initialData="initialData(dialogMutation, node.tokens)"
-        :cancel="closeDialog"
+        @close="closeDialog"
+        @success="closeMenu"
         :types="types"
         :key="dialogKey /* Enables re-render of component each time dialog opened */"
         ref="mutationComponent"
@@ -128,7 +123,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import { nextTick } from 'vue'
+import { computed, nextTick } from 'vue'
 import {
   filterAssociations,
   getMutationArgsFromTokens,
@@ -158,6 +153,15 @@ export default {
     }
   },
 
+  setup () {
+    const reducedAnimation = useReducedAnimation()
+    return {
+      menuTransition: computed(
+        () => reducedAnimation.value ? 'slot' : VDialogTransition
+      ),
+    }
+  },
+
   data () {
     return {
       dialog: false,
@@ -241,10 +245,6 @@ export default {
       }
       return ret
     },
-
-    menuTransition () {
-      return useReducedAnimation().value ? 'slot' : VDialogTransition
-    },
   },
 
   methods: {
@@ -319,7 +319,7 @@ export default {
     },
 
     onKeydown (e) {
-      if (e.key === 'Escape') {
+      if (!this.dialog && e.key === 'Escape') {
         this.closeMenu()
       }
     },