[TS] Fix ts-strict errors in Vue components (Part 2) (#3123)

Co-authored-by: Christian Byrne <cbyrne@comfy.org>

src/components/dialog/content/PromptDialogContent.vue

@@ -35,9 +35,10 @@ const onConfirm = () => {
   useDialogStore().closeDialog()
 }
 
-const inputRef = ref(null)
+const inputRef = ref<InstanceType<typeof InputText> | undefined>()
 const selectAllText = () => {
   if (!inputRef.value) return
+  // @ts-expect-error - $el is an internal property of the InputText component
   const inputElement = inputRef.value.$el
   inputElement.setSelectionRange(0, inputElement.value.length)
 }

src/components/dialog/content/SettingDialogContent.vue

@@ -15,7 +15,7 @@
         scrollHeight="100%"
         :optionDisabled="
           (option: SettingTreeNode) =>
-            !queryIsEmpty && !searchResultsCategories.has(option.label)
+            !queryIsEmpty && !searchResultsCategories.has(option.label ?? '')
         "
         class="border-none w-full"
       />
@@ -266,8 +266,8 @@ const handleSearch = (query: string) => {
 
 const queryIsEmpty = computed(() => searchQuery.value.length === 0)
 const inSearch = computed(() => !queryIsEmpty.value && !searchInProgress.value)
-const tabValue = computed(() =>
-  inSearch.value ? 'Search Results' : activeCategory.value?.label
+const tabValue = computed<string>(() =>
+  inSearch.value ? 'Search Results' : activeCategory.value?.label ?? ''
 )
 // Don't allow null category to be set outside of search.
 // In search mode, the active category can be null to show all search results.

src/components/dialog/content/error/ReportIssuePanel.vue

@@ -187,7 +187,7 @@ const createUser = (formData: IssueReportFormData): User => ({
 })
 
 const createExtraData = async (formData: IssueReportFormData) => {
-  const result = {}
+  const result: Record<string, unknown> = {}
   const isChecked = (fieldValue: string) => formData[fieldValue]
 
   await Promise.all(
@@ -243,7 +243,7 @@ const submit = async (event: FormSubmitEvent) => {
       toast.add({
         severity: 'error',
         summary: t('g.error'),
-        detail: error.message,
+        detail: error instanceof Error ? error.message : String(error),
         life: 3000
       })
     }

src/components/dialog/content/manager/ManagerDialogContent.vue

@@ -83,7 +83,7 @@
         <ContentDivider orientation="vertical" :width="0.2" />
         <div class="flex-1 flex flex-col isolate">
           <InfoPanel
-            v-if="!hasMultipleSelections"
+            v-if="!hasMultipleSelections && selectedNodePack"
             :node-pack="selectedNodePack"
           />
           <InfoPanelMultiItem v-else :node-packs="selectedNodePacks" />
@@ -149,8 +149,8 @@ const isEmptySearch = computed(() => searchQuery.value === '')
 
 const getInstalledSearchResults = async () => {
   if (isEmptySearch.value) return getInstalledPacks()
-  return searchResults.value.filter((pack) =>
-    comfyManagerStore.installedPacksIds.has(pack.name)
+  return searchResults.value.filter(
+    (pack) => pack.name && comfyManagerStore.installedPacksIds.has(pack.name)
   )
 }
 
@@ -162,15 +162,16 @@ watchEffect(async () => {
   }
 })
 
-const resultsWithKeys = computed(() =>
-  displayPacks.value.map((item) => ({
-    ...item,
-    key: item.id || item.name
-  }))
+const resultsWithKeys = computed(
+  () =>
+    displayPacks.value.map((item) => ({
+      ...item,
+      key: item.id || item.name
+    })) as (components['schemas']['Node'] & { key: string })[]
 )
 
 const selectedNodePacks = ref<components['schemas']['Node'][]>([])
-const selectedNodePack = computed(() =>
+const selectedNodePack = computed<components['schemas']['Node'] | null>(() =>
   selectedNodePacks.value.length === 1 ? selectedNodePacks.value[0] : null
 )
 

src/components/dialog/content/manager/infoPanel/InfoPanelMultiItem.vue

@@ -48,7 +48,7 @@ const getPackNodes = async (pack: components['schemas']['Node']) => {
   if (!comfyRegistryService.packNodesAvailable(pack)) return []
   return comfyRegistryService.getNodeDefs({
     packId: pack.id,
-    versionId: pack.latest_version.id
+    versionId: pack.latest_version?.id
   })
 }
 

src/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue

@@ -16,6 +16,7 @@
 
 <script setup lang="ts">
 import NodePreview from '@/components/node/NodePreview.vue'
+import { ComfyNodeDef } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { components } from '@/types/comfyRegistryTypes'
 
 defineProps<{
@@ -24,7 +25,8 @@ defineProps<{
 }>()
 
 // TODO: when registry returns node defs, use them here
-const placeholderNodeDef = {
+const placeholderNodeDef: ComfyNodeDef = {
+  name: 'Sample Node',
   display_name: 'Sample Node',
   description: 'This is a sample node for preview purposes',
   inputs: {
@@ -32,8 +34,11 @@ const placeholderNodeDef = {
     input2: { name: 'Input 2', type: 'CONDITIONING' }
   },
   outputs: [
-    { name: 'Output 1', type: 'IMAGE', index: 0 },
-    { name: 'Output 2', type: 'MASK', index: 1 }
-  ]
+    { name: 'Output 1', type: 'IMAGE', index: 0, is_list: false },
+    { name: 'Output 2', type: 'MASK', index: 1, is_list: false }
+  ],
+  category: 'Utility',
+  output_node: false,
+  python_module: 'nodes'
 }
 </script>

src/components/dialog/content/manager/packCard/PackCard.vue

@@ -128,7 +128,7 @@ const isUpdateAvailable = computed(() => {
   const latestVersion = nodePack.latest_version?.version
   if (!latestVersion) return false
 
-  const installedVersion = getInstalledPackVersion(nodePack.id)
+  const installedVersion = getInstalledPackVersion(nodePack.id ?? '')
 
   // Don't attempt to show update available for nightly GitHub packs
   if (installedVersion && !isSemVer(installedVersion)) return false

src/components/dialog/content/setting/ExtensionPanel.vue

@@ -55,7 +55,7 @@
             icon="pi pi-ellipsis-h"
             text
             severity="secondary"
-            @click="menu.show($event)"
+            @click="menu?.show($event)"
           />
           <ContextMenu ref="menu" :model="contextMenuItems" />
         </template>

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -157,7 +157,10 @@ interface ICommandData {
 const commandsData = computed<ICommandData[]>(() => {
   return Object.values(commandStore.commands).map((command) => ({
     id: command.id,
-    label: t(`commands.${normalizeI18nKey(command.id)}.label`, command.label),
+    label: t(
+      `commands.${normalizeI18nKey(command.id)}.label`,
+      command.label ?? ''
+    ),
     keybinding: keybindingStore.getKeybindingByCommandId(command.id)
   }))
 })
@@ -166,7 +169,7 @@ const selectedCommandData = ref<ICommandData | null>(null)
 const editDialogVisible = ref(false)
 const newBindingKeyCombo = ref<KeyComboImpl | null>(null)
 const currentEditingCommand = ref<ICommandData | null>(null)
-const keybindingInput = ref(null)
+const keybindingInput = ref<InstanceType<typeof InputText> | null>(null)
 
 const existingKeybindingOnCombo = computed<KeybindingImpl | null>(() => {
   if (!currentEditingCommand.value) {
@@ -201,6 +204,7 @@ watchEffect(() => {
   if (editDialogVisible.value) {
     // nextTick doesn't work here, so we use a timeout instead
     setTimeout(() => {
+      // @ts-expect-error - $el is an internal property of the InputText component
       keybindingInput.value?.$el?.focus()
     }, 300)
   }