[TS] Fix ts-strict errors in Vue components (Part 3) (#3126)

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -26,7 +26,7 @@
         class="node-lib-search-box p-2 2xl:p-4"
         v-model:modelValue="searchQuery"
         @search="handleSearch"
-        @show-filter="($event) => searchFilter.toggle($event)"
+        @show-filter="($event) => searchFilter?.toggle($event)"
         @remove-filter="onRemoveFilter"
         :placeholder="$t('g.searchNodes') + '...'"
         filter-icon="pi pi-filter"
@@ -97,7 +97,7 @@ const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
 const nodeBookmarkTreeExplorerRef = ref<InstanceType<
   typeof NodeBookmarkTreeExplorer
 > | null>(null)
-const searchFilter = ref(null)
+const searchFilter = ref<InstanceType<typeof Popover> | null>(null)
 const alphabeticalSort = ref(false)
 
 const searchQuery = ref<string>('')

src/components/sidebar/tabs/QueueSidebarTab.vue

@@ -194,7 +194,7 @@ const confirmRemoveAll = (event: Event) => {
   })
 }
 
-const menu = ref(null)
+const menu = ref<InstanceType<typeof ContextMenu> | null>(null)
 const menuTargetTask = ref<TaskItemImpl | null>(null)
 const menuTargetNode = ref<ComfyNode | null>(null)
 const menuItems = computed<MenuItem[]>(() => [
@@ -213,7 +213,11 @@ const menuItems = computed<MenuItem[]>(() => [
   {
     label: t('g.goToNode'),
     icon: 'pi pi-arrow-circle-right',
-    command: () => useLitegraphService().goToNode(menuTargetNode.value?.id),
+    command: () => {
+      if (!menuTargetNode.value) return
+
+      useLitegraphService().goToNode(menuTargetNode.value.id)
+    },
     visible: !!menuTargetNode.value
   }
 ])
@@ -225,7 +229,7 @@ const handleContextMenu = ({
 }: {
   task: TaskItemImpl
   event: Event
-  node?: ComfyNode
+  node: ComfyNode | null
 }) => {
   menuTargetTask.value = task
   menuTargetNode.value = node

src/components/sidebar/tabs/modelLibrary/DownloadItem.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="flex flex-col">
     <div>
-      {{ getDownloadLabel(download.savePath) }}
+      {{ getDownloadLabel(download.savePath ?? '') }}
     </div>
-    <div v-if="['cancelled', 'error'].includes(download.status)">
+    <div v-if="['cancelled', 'error'].includes(download.status ?? '')">
       <Chip
         class="h-6 text-sm font-light bg-red-700 mt-2"
         removable
@@ -14,15 +14,17 @@
     </div>
     <div
       class="mt-2 flex flex-row items-center gap-2"
-      v-if="['in_progress', 'paused', 'completed'].includes(download.status)"
+      v-if="
+        ['in_progress', 'paused', 'completed'].includes(download.status ?? '')
+      "
     >
       <!-- Temporary fix for issue when % only comes into view only if the progress bar is large enough
            https://comfy-organization.slack.com/archives/C07H3GLKDPF/p1731551013385499
       -->
       <ProgressBar
         class="flex-1"
-        :value="Number((download.progress * 100).toFixed(1))"
-        :show-value="download.progress > 0.1"
+        :value="Number(((download.progress ?? 0) * 100).toFixed(1))"
+        :show-value="(download.progress ?? 0) > 0.1"
       />
 
       <Button
@@ -51,7 +53,7 @@
         rounded
         severity="danger"
         @click="triggerCancelDownload"
-        v-if="['in_progress', 'paused'].includes(download.status)"
+        v-if="['in_progress', 'paused'].includes(download.status ?? '')"
         icon="pi pi-times-circle"
         v-tooltip.top="t('electronFileDownload.cancel')"
       />
@@ -79,7 +81,7 @@ const props = defineProps<{
 }>()
 
 const getDownloadLabel = (savePath: string) => {
-  let parts = (savePath ?? '').split('/')
+  let parts = savePath.split('/')
   parts = parts.length === 1 ? parts[0].split('\\') : parts
   const name = parts.pop()
   const dir = parts.pop()

src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue

@@ -97,6 +97,8 @@ const extraMenuItems = (
     label: t('g.customize'),
     icon: 'pi pi-palette',
     command: () => {
+      if (!menuTargetNode.data) return
+
       const customization =
         nodeBookmarkStore.bookmarksCustomization[menuTargetNode.data.nodePath]
       initialIcon.value =

src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue

@@ -79,6 +79,8 @@ const nodePreviewStyle = ref<CSSProperties>({
 
 const handleNodeHover = async () => {
   const hoverTarget = nodeContentElement.value
+  if (!hoverTarget) return
+
   const targetRect = hoverTarget.getBoundingClientRect()
 
   const previewHeight = previewRef.value?.$el.offsetHeight || 0
@@ -107,7 +109,8 @@ const handleMouseLeave = () => {
   isHovered.value = false
 }
 onMounted(() => {
-  nodeContentElement.value = container.value?.closest('.p-tree-node-content')
+  nodeContentElement.value =
+    container.value?.closest('.p-tree-node-content') ?? null
   nodeContentElement.value?.addEventListener('mouseenter', handleMouseEnter)
   nodeContentElement.value?.addEventListener('mouseleave', handleMouseLeave)
 })

src/components/sidebar/tabs/queue/TaskItem.vue

@@ -8,7 +8,7 @@
         "
       >
         <ResultItem
-          v-if="flatOutputs.length"
+          v-if="flatOutputs.length && coverResult"
           :result="coverResult"
           @preview="handlePreview"
         />
@@ -42,7 +42,12 @@
             :label="`${node?.type} (#${node?.id})`"
             link
             size="small"
-            @click="litegraphService.goToNode(node?.id)"
+            @click="
+              () => {
+                if (!node) return
+                litegraphService.goToNode(node.id)
+              }
+            "
           />
         </Tag>
         <Tag :severity="taskTagSeverity(task.displayStatus)">
@@ -95,7 +100,7 @@ const coverResult = flatOutputs.length
 const node: ComfyNode | null =
   flatOutputs.length && props.task.workflow
     ? props.task.workflow.nodes.find(
-        (n: ComfyNode) => n.id == coverResult.nodeId
+        (n: ComfyNode) => n.id == coverResult?.nodeId
       ) ?? null
     : null
 const progressPreviewBlobUrl = ref('')
@@ -103,7 +108,7 @@ const progressPreviewBlobUrl = ref('')
 const emit = defineEmits<{
   (
     e: 'contextmenu',
-    value: { task: TaskItemImpl; event: MouseEvent; node?: ComfyNode }
+    value: { task: TaskItemImpl; event: MouseEvent; node: ComfyNode | null }
   ): void
   (e: 'preview', value: TaskItemImpl): void
   (e: 'task-output-length-clicked', value: TaskItemImpl): void

src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue

@@ -20,12 +20,12 @@ import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import { ComfyWorkflow, useWorkflowBookmarkStore } from '@/stores/workflowStore'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
-const props = defineProps<{
+const { node } = defineProps<{
   node: RenderedTreeExplorerNode<ComfyWorkflow>
 }>()
 
 const workflowBookmarkStore = useWorkflowBookmarkStore()
-const isBookmarked = computed(() =>
-  workflowBookmarkStore.isBookmarked(props.node.data.path)
+const isBookmarked = computed(
+  () => node.data && workflowBookmarkStore.isBookmarked(node.data.path)
 )
 </script>