Switch eslint-plugin-vue rules to flat/recommended

.git-blame-ignore-revs

@@ -4,3 +4,5 @@
 4db15705dbcb5c2b1be39e96990804cdf03fbf1b
 # Format with Prettier
 c5e40b27cd426c9665e28db54dc092d3997eb718
+# Apply automated ESLint fixes
+ea24a92f3c78faafc08d2de05d1b22745b41d1c3

web/eslint.config.ts

@@ -11,16 +11,23 @@ export default defineConfigWithVueTs(
     name: "app/files-to-lint",
     files: ["**/*.{vue,ts,mts,tsx}"],
   },
+
   globalIgnores(["**/dist/**", "**/dist-ssr/**", "**/coverage/**"]),
-  ...pluginVue.configs["flat/essential"],
+
+  ...pluginVue.configs["flat/recommended"],
   vueTsConfigs.recommended,
+
   {
     rules: {
       // allowModifiers: Vuetify uses dot notation for column slots (v-slot:item.columnName)
       "vue/valid-v-slot": ["error", { allowModifiers: true }],
       // `any` is used everywhere and will be difficult to eliminate
       "@typescript-eslint/no-explicit-any": "off",
+      // Temporary ignores until rules can be fixed
+      "vue/no-template-shadow": "off",
+      "vue/require-default-prop": "off",
     },
   },
+
   skipFormatting,
 );

web/src/App.vue

@@ -62,9 +62,9 @@ watch(() => appStore.currentUser, onReady);
         <v-btn
           icon
           variant="flat"
-          @click.stop="appStore.currentError = undefined"
           class="pa-3"
           style="float: right"
+          @click.stop="appStore.currentError = undefined"
         >
           <v-icon>mdi-close</v-icon>
         </v-btn>

web/src/components/ControlsBar.vue

@@ -317,24 +317,24 @@ watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
       <v-menu activator="parent" :close-on-content-click="false" open-on-hover>
         <v-card style="max-height: 400px; overflow-y: auto">
           <v-list
+            ref="basemapList"
             :selected="[mapStore.currentBasemap]"
-            @update:selected="
-              (selected) => (mapStore.currentBasemap = selected[0])
-            "
             class="basemap-list"
-            ref="basemapList"
             density="compact"
             mandatory
+            @update:selected="
+              (selected) => (mapStore.currentBasemap = selected[0])
+            "
           >
             <v-list-subheader>Base Map Options</v-list-subheader>
             <v-list-item
               key="new"
               title="Create Custom Basemap"
-              @click="showBasemapCreation = true"
               class="px-2"
               style="color: rgb(var(--v-theme-primary))"
+              @click="showBasemapCreation = true"
             >
-              <template v-slot:prepend>
+              <template #prepend>
                 <v-icon icon="mdi-plus" class="pa-0" color="primary"></v-icon>
               </template>
             </v-list-item>
@@ -345,7 +345,7 @@ watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
               class="px-2"
             >
               {{ basemap.name }}
-              <template v-slot:prepend>
+              <template #prepend>
                 <v-icon
                   :icon="
                     basemap.id === mapStore.currentBasemap?.id
@@ -357,8 +357,8 @@ watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
                 ></v-icon>
                 <div
                   v-if="basemap.id !== undefined"
-                  class="basemap-preview"
                   :id="'basemap-preview-' + basemap.id"
+                  class="basemap-preview"
                 />
                 <div v-else style="width: 90px" />
               </template>
@@ -367,12 +367,12 @@ watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
         </v-card>
       </v-menu>
     </v-btn>
-    <v-btn class="control-btn" @click="fitMap" variant="flat">
+    <v-btn class="control-btn" variant="flat" @click="fitMap">
       <v-progress-circular v-if="loadingBounds" indeterminate />
       <v-icon
         v-else
-        icon="mdi-fit-to-page-outline"
         v-tooltip="'Fit Map to Visible Layers'"
+        icon="mdi-fit-to-page-outline"
       ></v-icon>
     </v-btn>
     <v-btn v-if="!isComparing" class="control-btn" variant="flat">
@@ -405,8 +405,8 @@ watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
       </v-menu>
     </v-btn>
     <v-btn
-      class="control-btn"
       v-if="projectStore.currentProject"
+      class="control-btn"
       variant="flat"
     >
       <v-icon icon="mdi-view-array" class="pb-1 pr-2"></v-icon>
@@ -441,26 +441,26 @@ watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
                 class="control-menu-row pa-1"
                 @click="projectStore.navigateToViewState(viewState)"
               >
-                <template v-slot:prepend>
+                <template #prepend>
                   <img :src="viewState.thumbnail" height="70px" />
                 </template>
-                <template v-slot:title>
+                <template #title>
                   <div style="width: 150px; text-wrap: wrap">
                     {{ viewState.name }}
                   </div>
                 </template>
-                <template v-slot:append>
+                <template #append>
                   <v-btn
                     v-if="userHasEditPermission"
-                    icon="mdi-delete"
                     v-tooltip="'Delete this view state'"
+                    icon="mdi-delete"
                     flat
                     variant="text"
                     @click.stop.prevent="viewStateToDelete = viewState"
                   ></v-btn>
                   <v-btn
-                    icon="mdi-share"
                     v-tooltip="'Copy shareable link'"
+                    icon="mdi-share"
                     flat
                     variant="text"
                     @click.stop.prevent="copyViewStateLink(viewState)"
@@ -580,7 +580,7 @@ watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
           ></div>
         </v-card-text>
         <v-card-actions style="text-align: right">
-          <v-btn @click="cancelBasemapCreate" variant="tonal"> Cancel </v-btn>
+          <v-btn variant="tonal" @click="cancelBasemapCreate"> Cancel </v-btn>
           <v-btn
             color="primary"
             :disabled="!newBasemapValid"
@@ -628,7 +628,7 @@ watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
           <div v-else>Loading thumbnail...</div>
         </v-card-text>
         <v-card-actions style="text-align: right">
-          <v-btn @click="cancelCreateViewState" variant="tonal"> Cancel </v-btn>
+          <v-btn variant="tonal" @click="cancelCreateViewState"> Cancel </v-btn>
           <v-btn
             color="primary"
             :disabled="!newViewStateValid || !newViewStateThumbnail"
@@ -658,7 +658,7 @@ watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
           }}"?
         </v-card-text>
         <v-card-actions style="text-align: right">
-          <v-btn @click="viewStateToDelete = undefined" variant="tonal">
+          <v-btn variant="tonal" @click="viewStateToDelete = undefined">
             Cancel
           </v-btn>
           <v-btn color="error" variant="tonal" @click="submitDeleteViewState()">

web/src/components/DatasetList.vue

@@ -63,7 +63,7 @@ watch(filteredDatasets, expandAllGroups);
       append-inner-icon="mdi-magnify"
       hide-details
     />
-    <v-expansion-panels v-model="showFilter" flat v-if="props.datasets?.length">
+    <v-expansion-panels v-if="props.datasets?.length" v-model="showFilter" flat>
       <v-expansion-panel value="true" class="mb-2 bg-transparent">
         <v-expansion-panel-title class="tag-filter-title">
           Filter by Tag
@@ -115,7 +115,7 @@ watch(filteredDatasets, expandAllGroups);
         v-else-if="projectStore.loadingDatasets"
         indeterminate
       ></v-progress-linear>
-      <v-card-text class="help-text" v-else>No available Datasets.</v-card-text>
+      <v-card-text v-else class="help-text">No available Datasets.</v-card-text>
     </v-card>
   </div>
 </template>

web/src/components/DetailView.vue

@@ -172,9 +172,9 @@ watch([showModal, currentDetails], fetchRelated);
 
 <template>
   <v-icon
+    v-tooltip="'View Details'"
     icon="mdi-dots-vertical"
     size="small"
-    v-tooltip="'View Details'"
     class="mx-1"
     @click.stop="showModal = true"
   ></v-icon>
@@ -188,8 +188,8 @@ watch([showModal, currentDetails], fetchRelated);
             style="max-width: 90%; margin: 4px 4em 0 0; align-items: center"
           >
             <v-icon
-              icon="mdi-arrow-left"
               v-if="stackPoppable"
+              icon="mdi-arrow-left"
               @click="popStack"
             />
             <v-icon
@@ -215,7 +215,7 @@ watch([showModal, currentDetails], fetchRelated);
               item-value="id"
               @click:select="({ id }) => addToStack(id as number)"
             >
-              <template v-slot:prepend="{ item }">
+              <template #prepend="{ item }">
                 <v-icon
                   v-if="item.prependIcon"
                   :icon="item.prependIcon"
@@ -225,10 +225,10 @@ watch([showModal, currentDetails], fetchRelated);
                   item.type.toUpperCase()
                 }}</span>
               </template>
-              <template v-slot:title="{ item }">
+              <template #title="{ item }">
                 <div v-if="item" v-tooltip="item.name">{{ item.name }}</div>
               </template>
-              <template v-slot:append="{ item }">
+              <template #append="{ item }">
                 <a v-if="item?.download" :href="item.download.url" download>
                   <v-icon
                     v-tooltip="

web/src/components/SliderNumericInput.vue

@@ -74,7 +74,7 @@ function updateRange(lower: number, upper: number) {
     hide-details
     @update:model-value="(v: number) => updateValue(v)"
   >
-    <template v-slot:append>
+    <template #append>
       <v-number-input
         :model-value="props.model"
         :min="props.min"
@@ -83,7 +83,7 @@ function updateRange(lower: number, upper: number) {
         :precision="precision"
         :style="{ width: getInputWidth() }"
         variant="outlined"
-        controlVariant="stacked"
+        control-variant="stacked"
         hide-details
         @update:model-value="updateValue"
         @keydown.enter="blur()"
@@ -102,7 +102,7 @@ function updateRange(lower: number, upper: number) {
     hide-details
     @update:model-value="([lower, upper]) => updateRange(lower, upper)"
   >
-    <template v-slot:prepend>
+    <template #prepend>
       <v-number-input
         :model-value="props.rangeModel[0]"
         :min="props.min"
@@ -111,7 +111,7 @@ function updateRange(lower: number, upper: number) {
         :precision="precision"
         :style="{ width: getInputWidth() }"
         variant="outlined"
-        controlVariant="stacked"
+        control-variant="stacked"
         hide-details
         @update:model-value="
           (v) => {
@@ -121,7 +121,7 @@ function updateRange(lower: number, upper: number) {
         @keydown.enter="blur()"
       />
     </template>
-    <template v-slot:append>
+    <template #append>
       <v-number-input
         :model-value="props.rangeModel[1]"
         :min="props.rangeModel[0]"
@@ -130,7 +130,7 @@ function updateRange(lower: number, upper: number) {
         :precision="precision"
         :style="{ width: getInputWidth() }"
         variant="outlined"
-        controlVariant="stacked"
+        control-variant="stacked"
         hide-details
         @update:model-value="
           (v) => {

web/src/components/map/MapTooltip.vue

@@ -186,10 +186,10 @@ function toggleNodeHandler() {
       v-if="clickedFeature.feature.properties.node_id"
       block
       variant="outlined"
-      @click="toggleNodeHandler"
       :text="
         clickedFeatureIsDeactivatedNode ? 'Reactivate Node' : 'Deactivate Node'
       "
+      @click="toggleNodeHandler"
     />
   </div>
 

web/src/components/map/ToggleCompareMap.vue

@@ -298,14 +298,14 @@ onMounted(() => {
       layer-order="bottommost"
       :attribution-control="false"
       :preserve-drawing-buffer="true"
+      class="map"
       @panend="compareStore.updateMapStats($event)"
       @zoomend="compareStore.updateMapStats($event)"
       @pitchend="compareStore.updateMapStats($event)"
       @rotateend="compareStore.updateMapStats($event)"
       @sliderend="compareStore.updateSlider($event)"
       @map-ready-a="handleMapReady($event, 'A')"
       @map-ready-b="handleMapReady($event, 'B')"
-      class="map"
     />
 
     <div id="map-tooltip" ref="tooltip" class="tooltip pa-0">