fix(deps): update dependency vuetify to v4

.eslintrc.cjs

@@ -27,6 +27,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:vue/vue3-essential',
     'plugin:vuetify/base',
+    'plugin:vuetify/recommended-v4',
     'plugin:cypress/recommended',
   ],
   rules: {

package.json

@@ -50,7 +50,7 @@
     "vue-router": "5.0.4",
     "vue-the-mask": "0.11.1",
     "vue3-apexcharts": "1.8.0",
-    "vuetify": "3.11.8",
+    "vuetify": "4.0.3",
     "vuex": "4.1.0"
   },
   "devDependencies": {
@@ -72,7 +72,7 @@
     "eslint-plugin-no-only-tests": "3.3.0",
     "eslint-plugin-promise": "6.6.0",
     "eslint-plugin-vue": "9.33.0",
-    "eslint-plugin-vuetify": "2.5.3",
+    "eslint-plugin-vuetify": "2.7.2",
     "express": "5.2.1",
     "express-ws": "5.0.2",
     "istanbul-lib-coverage": "3.2.2",

src/components/core/Alert.vue

@@ -32,15 +32,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         data-cy="snack-close"
       />
     </template>
-    <p>
+    <div>
       {{ alert.text }}
-    </p>
-    <p
+    </div>
+    <div
       v-if="alert.detail"
       class="mt-2 opacity-80"
     >
       {{ alert.detail }}
-    </p>
+    </div>
   </v-snackbar>
 </template>
 

src/components/cylc/Header.vue

@@ -44,12 +44,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template v-slot:item="{ item, props }">
             <!-- HTML that describe how select should render items when the select is open -->
             <v-list-item
-              :title="item.title"
+              :title="item"
               v-bind="props"
             >
-              <template v-slot:append v-if="item.title !== ownerOnLoad">
+              <template v-slot:append v-if="item !== ownerOnLoad">
                 <v-icon
-                  @click.stop="owners.delete(item.title)"
+                  @click.stop="owners.delete(item)"
                   color="pink-accent-4"
                   :icon="mdiClose"
                 />
@@ -71,12 +71,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template v-slot:item="{ item, props }">
             <!-- HTML that describe how select should render items when the select is open -->
             <v-list-item
-              :title="item.title"
+              :title="item"
               v-bind="props"
             >
-              <template v-slot:append v-if="item.title !== deploymentOnLoad">
+              <template v-slot:append v-if="item !== deploymentOnLoad">
                 <v-icon
-                  @click.stop="deployments.delete(item.title)"
+                  @click.stop="deployments.delete(item)"
                   color="pink-accent-4"
                   :icon="mdiClose"
                 />
@@ -130,5 +130,4 @@ const showGoButton = computed(() => (
   deployment.value &&
   isNewRoute.value
 ))
-
 </script>

src/components/cylc/Info.vue

@@ -53,7 +53,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     >
       <v-defaults-provider :defaults="{
         VExpansionPanelTitle: {
-          class: 'text-button py-2',
+          class: 'text-title-small py-2',
         },
         VExpansionPanelText: {
           class: 'mt-2',

src/components/cylc/Mutation.vue

@@ -99,7 +99,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <v-btn
         color="grey"
         @click="close()"
-        variant="text"
         data-cy="cancel"
         v-if="!isView"
       >
@@ -108,13 +107,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <v-btn
         color="orange"
         @click="$refs.form.reset()"
-        variant="text"
         data-cy="reset"
       >
         Reset
       </v-btn>
       <v-btn
-        variant="text"
         :color="isValid ? 'primary' : 'error'"
         @click="submit"
         :loading="submitting"

src/components/cylc/commandMenu/Menu.vue

@@ -27,11 +27,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     theme="dark"
   >
     <v-card>
-      <v-card-title class="pb-1 pt-3">
+      <v-card-title class="text-title-medium pb-1 pt-3">
         {{ title }}
         <CopyBtn :text="title"/>
       </v-card-title>
-      <v-card-subtitle class="pt-0 pb-2">
+      <v-card-subtitle class="pb-2">
         {{ typeAndStatusText }}
       </v-card-subtitle>
       <v-divider v-if="primaryMutations.length || displayMutations.length" />

src/components/cylc/gscan/TaskFilterSelect.vue

@@ -23,11 +23,11 @@
           <div class="mr-4">
             <Workflowicon
               v-if="type === 'workflow state'"
-              :status="item.raw"
+              :status="item"
             />
             <Task
               v-if="type === 'task state'"
-              :task="{ state: item.raw }"
+              :task="{ state: item }"
             />
           </div>
         </template>
@@ -45,19 +45,19 @@
           <div class="mr-1 ml-n1">
             <Workflowicon
               v-if="type === 'workflow state'"
-              :status="item.raw"
+              :status="item"
             />
             <Task
               v-if="type === 'task state'"
-              :task="{ state: item.raw }"
+              :task="{ state: item }"
             />
           </div>
         </template>
-        {{ item.title }}
+        {{ item }}
       </v-chip>
       <span
         v-if="index === maxVisibleStates"
-        class="text-grey text-caption"
+        class="text-grey text-body-small"
       >
         (+{{ model.length - maxVisibleStates }})
       </span>

src/components/cylc/workspace/Toolbar.vue

@@ -37,8 +37,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </v-btn>
     <!-- title -->
     <v-toolbar-title
-      class="c-toolbar-title text-md-h6 text-subtitle-1 font-weight-medium text-primary"
-      :class="showNavBtn ? 'ml-0' : null"
+      class="c-toolbar-title font-weight-medium text-primary"
+      :class="{
+        'ml-0': showNavBtn,
+        'shrink': mdAndDown, // TODO: use title.length as well
+      }"
     >
       {{ title }}
     </v-toolbar-title>
@@ -156,7 +159,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </v-tooltip>
 
       <!-- workflow status message -->
-      <span class="status-msg text-body-2">
+      <span class="status-msg text-body-medium">
         {{ statusMessage }}
         <!-- workflow Cylc version popup on differ with UIS version -->
         <!-- nested within status-msg for style inheritance -->
@@ -267,6 +270,7 @@ import {
   mdiArrowULeftTop,
   mdiInformationOutline,
 } from '@mdi/js'
+import { useDisplay } from 'vuetify'
 import { startCase } from 'lodash'
 import { until } from '@/utils/reactivity'
 import { useDrawer, useNavBtn, toolbarHeight } from '@/utils/toolbar'
@@ -329,13 +333,15 @@ export default {
   name: 'Toolbar',
 
   setup () {
+    const { mdAndDown } = useDisplay()
     const { showNavBtn } = useNavBtn()
     const { toggleDrawer } = useDrawer()
 
     const uisVersionInfo = inject('versionInfo')
     const uisFlowVersion = uisVersionInfo?.value?.['cylc-flow'] ?? ''
 
     return {
+      mdAndDown,
       eventBus,
       showNavBtn,
       toggleDrawer,
@@ -557,3 +563,9 @@ export default {
   },
 }
 </script>
+
+<style>
+.c-toolbar-title.shrink {
+  font-size: 1rem;
+}
+</style>

src/components/graphqlFormGenerator/EditRuntimeForm.vue

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div>
-    <v-card-subtitle class="text-subtitle-1 font-weight-medium mt-4">
+    <v-card-subtitle class="text-body-large font-weight-medium mt-4">
       {{ this.tokens.id }}
     </v-card-subtitle>
     <v-skeleton-loader

src/main.js

@@ -15,6 +15,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+// CSS first
+import 'nprogress/css/nprogress.css'
+import '@/styles/index.scss'
+
 import { createApp } from 'vue'
 
 // Plugins
@@ -31,9 +35,6 @@ import router from '@/router/index'
 import { store } from '@/store/index'
 import { createVuetify } from 'vuetify'
 
-import 'nprogress/css/nprogress.css'
-import '@/styles/index.scss'
-
 if (location.search) {
   /* Remove token from the querystring - we only need it on first load.
   After the browser has sent the token as part of the URL in the first GET, the

src/plugins/vuetify.js

@@ -85,6 +85,7 @@ export const vuetifyOptions = {
     VTooltip: {
       activator: 'parent',
       location: 'bottom',
+      maxWidth: 600,
     },
     VList: {
       slim: true,

src/styles/cylc/_dashboard.scss

@@ -16,11 +16,6 @@
  */
 
 .c-dashboard {
-  /* to align icons in the links section */
-  .v-list-item__prepend {
-    align-self: center;
-  }
-
   table {
     tbody {
       tr {

src/styles/cylc/_drawer.scss

@@ -20,10 +20,10 @@
 @use '../util';
 
 body.resizing-drawer {
-  cursor: ew-resize !important;
+  cursor: ew-resize;
   #c-sidebar, .v-main {
     // Prevent Vuetify-provided transitions during resize to ensure responsiveness
-    transition: none !important;
+    transition: none;
   }
 }
 

src/styles/cylc/_markdown.scss

@@ -17,6 +17,7 @@
 
 .markdown {
   p, ul, ol {
+    margin: 0;
     &:not(:last-child) {
       margin-bottom: 0.8em;
     }

src/styles/cylc/_menu.scss

@@ -16,10 +16,10 @@
  */
 
 .c-mutation-menu {
-  z-index: 2000 !important;
+  z-index: 2000;
 
   .v-card-title {
-    font-size: 1.1rem !important;
+    font-size: 1.1rem;
     line-height: 1.5rem;
     white-space: normal;
   }

src/styles/cylc/_toolbar.scss

@@ -37,7 +37,7 @@
     // make this shrink more than title (can see status in mutation menu if needed):
     flex-shrink: 10;
     // override vuetify .text-* class letter spacing:
-    letter-spacing: normal !important;
+    letter-spacing: normal;
   }
 
   .v-icon {