fixes necessitated by vue-tsc bump that increased strictness

Author: planetchili

IntelPresentMon/AppCef/ipm-ui-vue/src/components/LoadoutLine.vue

@@ -1,5 +1,5 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 import { type Widget, WidgetType } from '@/core/widget';
 import type { Metric } from '@/core/metric';
 import type { MetricOption } from '@/core/metric-option';
@@ -123,6 +123,9 @@ const findMetricById = (metricId: number) => {
 };
 
 const widgetTypeToString = (t: WidgetType) => WidgetType[t];
+const metricOptionFromItem = (item: ListItem<unknown>) => item.raw as MetricOption;
+const statFromItem = (item: ListItem<unknown>) => item.raw as Stat;
+const widgetTypeFromItem = (item: ListItem<unknown>) => item.raw as WidgetType;
 
 const metricOptionsFiltered = computed(() => {
   return props.lineIdx === 0
@@ -161,10 +164,10 @@ const isReadoutWidget = computed(() => widgetType.value === WidgetType.Readout);
         return-object
         :density="isMaster ? 'default' : 'compact'"
       >
-        <template v-slot:item="{item, props: itemProps}: {item:ListItem<MetricOption>, props:any}">
-          <v-tooltip :text="findMetricById(item.raw.metricId).description">
+        <template v-slot:item="{ item, props: itemProps }">
+          <v-tooltip :text="findMetricById(metricOptionFromItem(item).metricId).description">
             <template v-slot:activator="{props: tooltipProps}">
-              <v-list-item v-bind="{...itemProps, ...tooltipProps}" :title="item.raw.name"/>
+              <v-list-item v-bind="{...itemProps, ...tooltipProps}" :title="metricOptionFromItem(item).name"/>
             </template>
           </v-tooltip>
         </template>
@@ -179,10 +182,10 @@ const isReadoutWidget = computed(() => widgetType.value === WidgetType.Readout);
         return-object
         :density="isMaster ? 'default' : 'compact'"
       >
-        <template v-slot:item="{item, props: itemProps}: {item:ListItem<Stat>, props:any}">
-          <v-tooltip :text="`${item.raw.name}: ${item.raw.description}`">
+        <template v-slot:item="{ item, props: itemProps }">
+          <v-tooltip :text="`${statFromItem(item).name}: ${statFromItem(item).description}`">
             <template v-slot:activator="{props: tooltipProps}">
-              <v-list-item v-bind="{...itemProps, ...tooltipProps}" :title="item.raw.shortName"/>
+              <v-list-item v-bind="{...itemProps, ...tooltipProps}" :title="statFromItem(item).shortName"/>
             </template>
           </v-tooltip>
         </template>
@@ -196,11 +199,11 @@ const isReadoutWidget = computed(() => widgetType.value === WidgetType.Readout);
         :disabled="locked || widgetTypeOptions.length < 2"
         :density="isMaster ? 'default' : 'compact'"
       >
-        <template v-slot:selection="{item, index}: {item:ListItem<WidgetType>, index:number}">
-          {{ widgetTypeToString(item.raw) }}
+        <template v-slot:selection="{ item }">
+          {{ widgetTypeToString(widgetTypeFromItem(item)) }}
         </template>
-        <template v-slot:item="{item, props, index}: {item:ListItem<WidgetType>, props:any, index:number}">
-          <v-list-item v-bind="props" :title="widgetTypeToString(item.raw)">
+        <template v-slot:item="{ item, props }">
+          <v-list-item v-bind="props" :title="widgetTypeToString(widgetTypeFromItem(item))">
           </v-list-item>
         </template>
       </v-select>
@@ -271,4 +274,4 @@ const isReadoutWidget = computed(() => widgetType.value === WidgetType.Readout);
 </template>
 
 <style scoped lang="scss">
-</style>
+</style>

IntelPresentMon/AppCef/ipm-ui-vue/src/views/MainView.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script lang="ts" setup>
 import { computed, ref, watchEffect } from 'vue'
 import { type ListItem } from 'vuetify/lib/composables/list-items.mjs';
 import { type Process } from '@/core/process';
@@ -85,6 +85,8 @@ watchEffect(async () => {
         }
     }
 })
+
+const processFromItem = (item: ListItem<unknown>) => item.raw as Process;
 </script>
 
 
@@ -110,36 +112,36 @@ watchEffect(async () => {
             :disabled="prefs.preferences.enableAutotargetting"
             clearable
         >
-            <template v-slot:selection="{item, index}: {item:ListItem<Process>, index:number}">
-                <template v-if="item.raw.windowName">
-                    {{ makeSelectorName(item.raw.windowName) }} 
-                    <span class="pid-node-inline">[{{ item.raw.pid }}]</span>
+            <template v-slot:selection="{ item }">
+                <template v-if="processFromItem(item).windowName">
+                    {{ makeSelectorName(processFromItem(item).windowName ?? '') }}
+                    <span class="pid-node-inline">[{{ processFromItem(item).pid }}]</span>
                 </template>            
                 <template v-else>
                     <div>
-                    {{ item.raw.name }}
-                    <span class="pid-node-inline">[{{ item.raw.pid }}]</span>
+                    {{ processFromItem(item).name }}
+                    <span class="pid-node-inline">[{{ processFromItem(item).pid }}]</span>
                     </div>
                 </template>
             </template>
-            <template v-slot:item="{item, props, index}: {item:ListItem<Process>, props:any, index:number}">
-                <v-list-item v-if="item.raw.windowName" v-bind="props" :title="makeSelectorName(item.raw.windowName)">
+            <template v-slot:item="{ item, props }">
+                <v-list-item v-if="processFromItem(item).windowName" v-bind="props" :title="makeSelectorName(processFromItem(item).windowName ?? '')">
                     <v-list-item-subtitle>
-                        {{ item.raw.name }}
-                        <span class="pid-node">[{{ item.raw.pid }}]</span>
+                        {{ processFromItem(item).name }}
+                        <span class="pid-node">[{{ processFromItem(item).pid }}]</span>
                     </v-list-item-subtitle>
                 </v-list-item>
                 <v-list-item v-else v-bind="props" :title="undefined">
                     <v-list-item-title>
-                        {{ makeSelectorName(item.raw.name) }}
-                        <span class="pid-node-inline">[{{ item.raw.pid }}]</span>
+                        {{ makeSelectorName(processFromItem(item).name) }}
+                        <span class="pid-node-inline">[{{ processFromItem(item).pid }}]</span>
                     </v-list-item-title>
                 </v-list-item>
             </template>
         </v-autocomplete>
         </v-col>
     </v-row> 
-    
+
     <v-row dense>       
         <v-col cols="3">
         Auto-target
@@ -312,5 +314,3 @@ watchEffect(async () => {
     }
 }
 </style>
-
-