From ca7fa97510ea4ffa08f0fdf6b9f1938bb4e57fde Mon Sep 17 00:00:00 2001
From: Brian Helba <brian.helba@kitware.com>
Date: Tue, 9 Jun 2026 14:07:07 -0400
Subject: [PATCH] Enable ESLint rule `vue/no-template-shadow`

---
 web/eslint.config.ts                          |  2 -
 web/src/components/projects/AccessControl.vue |  4 +-
 .../components/sidebars/ColormapEditor.vue    |  4 +-
 .../components/sidebars/CompareLayerStyle.vue |  8 +++-
 web/src/components/sidebars/LayerStyle.vue    | 40 +++++++++----------
 5 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/web/eslint.config.ts b/web/eslint.config.ts
index 951ac859..c2577834 100644
--- a/web/eslint.config.ts
+++ b/web/eslint.config.ts
@@ -23,8 +23,6 @@ export default defineConfigWithVueTs(
       "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",
     },
   },
 
diff --git a/web/src/components/projects/AccessControl.vue b/web/src/components/projects/AccessControl.vue
index 6dd6d9ae..57c7f602 100644
--- a/web/src/components/projects/AccessControl.vue
+++ b/web/src/components/projects/AccessControl.vue
@@ -272,9 +272,9 @@ onMounted(() => {
               }
             "
           >
-            <template #item="{ props, item }">
+            <template #item="{ props: itemProps, item }">
               <v-list-item
-                v-bind="props"
+                v-bind="itemProps"
                 :title="
                   item.first_name && item.last_name
                     ? item.first_name + ' ' + item.last_name
diff --git a/web/src/components/sidebars/ColormapEditor.vue b/web/src/components/sidebars/ColormapEditor.vue
index 8ffc6ed5..8bdcff1a 100644
--- a/web/src/components/sidebars/ColormapEditor.vue
+++ b/web/src/components/sidebars/ColormapEditor.vue
@@ -283,9 +283,9 @@ onMounted(init);
           class="py-2 marker-row"
         >
           <v-menu :close-on-content-click="false" open-on-hover location="end">
-            <template #activator="{ props }">
+            <template #activator="{ props: activatorProps }">
               <div
-                v-bind="props"
+                v-bind="activatorProps"
                 class="color-square ma-0"
                 :style="{ backgroundColor: marker.color }"
               />
diff --git a/web/src/components/sidebars/CompareLayerStyle.vue b/web/src/components/sidebars/CompareLayerStyle.vue
index f21d0e53..735fc949 100644
--- a/web/src/components/sidebars/CompareLayerStyle.vue
+++ b/web/src/components/sidebars/CompareLayerStyle.vue
@@ -227,8 +227,12 @@ const panels = ref(["A", "B"] as const);
       emit('setLayerActive', props.activeLayer !== props.layer)
     "
   >
-    <template #activator="{ props }">
-      <v-icon v-tooltip="appliedStyleText" v-bind="props" icon="mdi-cog" />
+    <template #activator="{ props: activatorProps }">
+      <v-icon
+        v-tooltip="appliedStyleText"
+        v-bind="activatorProps"
+        icon="mdi-cog"
+      />
     </template>
     <v-card
       v-if="currentStyleSpecs.A && currentStyleSpecs.B"
diff --git a/web/src/components/sidebars/LayerStyle.vue b/web/src/components/sidebars/LayerStyle.vue
index a97991a9..716e2dae 100644
--- a/web/src/components/sidebars/LayerStyle.vue
+++ b/web/src/components/sidebars/LayerStyle.vue
@@ -605,12 +605,12 @@ onMounted(resetCurrentStyle);
       emit('setLayerActive', props.activeLayer !== props.layer)
     "
   >
-    <template #activator="{ props }">
+    <template #activator="{ props: activatorProps }">
       <v-icon
         v-tooltip="
           appliedStyleName ? 'Style: ' + appliedStyleName : 'Configure styling'
         "
-        v-bind="props"
+        v-bind="activatorProps"
         icon="mdi-cog"
       />
     </template>
@@ -663,9 +663,9 @@ onMounted(resetCurrentStyle);
             :close-on-content-click="false"
             location="start"
           >
-            <template #activator="{ props }">
+            <template #activator="{ props: activatorProps }">
               <v-icon
-                v-bind="props"
+                v-bind="activatorProps"
                 :disabled="!currentLayerStyle.id"
                 icon="mdi-pencil"
               />
@@ -868,9 +868,9 @@ onMounted(resetCurrentStyle);
                             open-on-hover
                             location="end"
                           >
-                            <template #activator="{ props }">
+                            <template #activator="{ props: activatorProps }">
                               <div
-                                v-bind="props"
+                                v-bind="activatorProps"
                                 class="color-square"
                                 :style="{
                                   backgroundColor: group.single_color,
@@ -908,8 +908,8 @@ onMounted(resetCurrentStyle);
                             (v: Colormap) => setGroupColormap(group.name, v)
                           "
                         >
-                          <template #item="{ props, item }">
-                            <v-list-item v-bind="props">
+                          <template #item="{ props: itemProps, item }">
+                            <v-list-item v-bind="itemProps">
                               <template #append>
                                 <v-icon
                                   v-if="
@@ -1261,9 +1261,9 @@ onMounted(resetCurrentStyle);
                             open-on-hover
                             location="end"
                           >
-                            <template #activator="{ props }">
+                            <template #activator="{ props: activatorProps }">
                               <div
-                                v-bind="props"
+                                v-bind="activatorProps"
                                 class="color-square"
                                 :style="{
                                   backgroundColor: group.single_color,
@@ -1312,8 +1312,8 @@ onMounted(resetCurrentStyle);
                               }
                             "
                           >
-                            <template #item="{ props, item }">
-                              <v-list-item v-bind="props">
+                            <template #item="{ props: itemProps, item }">
+                              <v-list-item v-bind="itemProps">
                                 <template #append>
                                   <v-chip
                                     v-if="(item as any).sample_label"
@@ -1353,8 +1353,8 @@ onMounted(resetCurrentStyle);
                               (v: Colormap) => setGroupColormap(group.name, v)
                             "
                           >
-                            <template #item="{ props, item }">
-                              <v-list-item v-bind="props">
+                            <template #item="{ props: itemProps, item }">
+                              <v-list-item v-bind="itemProps">
                                 <template #append>
                                   <v-icon
                                     v-if="
@@ -1561,9 +1561,9 @@ onMounted(resetCurrentStyle);
                               :disabled="!group.visible"
                               location="end"
                             >
-                              <template #activator="{ props }">
+                              <template #activator="{ props: activatorProps }">
                                 <div
-                                  v-bind="props"
+                                  v-bind="activatorProps"
                                   class="color-square"
                                   :style="{
                                     backgroundColor: group.colormap.null_color,
@@ -1706,9 +1706,9 @@ onMounted(resetCurrentStyle);
                           placeholder="Select property"
                           hide-details
                         >
-                          <template #item="{ props, item }">
+                          <template #item="{ props: itemProps, item }">
                             <v-list-item
-                              v-bind="props"
+                              v-bind="itemProps"
                               :disabled="!(item as any).range"
                             >
                               <template #append>
@@ -1891,8 +1891,8 @@ onMounted(resetCurrentStyle);
                     hide-details
                     @update:model-value="(v) => updateFilterBy(filter.id, v)"
                   >
-                    <template #item="{ props, item }">
-                      <v-list-item v-bind="props">
+                    <template #item="{ props: itemProps, item }">
+                      <v-list-item v-bind="itemProps">
                         <template #append>
                           <v-chip
                             v-if="(item as any).sample_label"