Typecheck vue components (#1721)

* Fix various type issues in vue components

* Add vue tsc

* Add to hooks

* nit

src/components/common/SearchBox.vue

@@ -44,21 +44,22 @@ import Button from 'primevue/button'
 import SearchFilterChip from './SearchFilterChip.vue'
 import { toRefs } from 'vue'
 
-interface Props {
-  class?: string
-  modelValue: string
-  placeholder?: string
-  icon?: string
-  debounceTime?: number
-  filterIcon?: string
-  filters?: TFilter[]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: 'Search...',
-  icon: 'pi pi-search',
-  debounceTime: 300
-})
+const props = withDefaults(
+  defineProps<{
+    class?: string
+    modelValue: string
+    placeholder?: string
+    icon?: string
+    debounceTime?: number
+    filterIcon?: string
+    filters?: TFilter[]
+  }>(),
+  {
+    placeholder: 'Search...',
+    icon: 'pi pi-search',
+    debounceTime: 300
+  }
+)
 
 const { filters } = toRefs(props)
 

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -22,7 +22,7 @@
     >
       <template #container>
         <NodeSearchBox
-          :filters="nodeFilters"
+          :filters="nodeFilters as FilterAndValue[]"
           @add-filter="addFilter"
           @remove-filter="removeFilter"
           @add-node="addNode"
@@ -56,7 +56,7 @@ const getNewNodeLocation = (): [number, number] => {
   if (triggerEvent.value === null) {
     return [100, 100]
   }
-
+  // @ts-expect-error type event detail
   const originalEvent = triggerEvent.value.detail.originalEvent
   return [originalEvent.canvasX, originalEvent.canvasY]
 }
@@ -99,6 +99,7 @@ const newSearchBoxEnabled = computed(
 )
 const showSearchBox = (e: LiteGraphCanvasEvent) => {
   if (newSearchBoxEnabled.value) {
+    // @ts-expect-error type event detail
     if (e.detail.originalEvent?.pointerType === 'touch') {
       setTimeout(() => {
         showNewSearchBox(e)
@@ -107,13 +108,16 @@ const showSearchBox = (e: LiteGraphCanvasEvent) => {
       showNewSearchBox(e)
     }
   } else {
+    // @ts-expect-error type event detail
     canvasStore.canvas.showSearchBox(e.detail.originalEvent as MouseEvent)
   }
 }
 
 const nodeDefStore = useNodeDefStore()
 const showNewSearchBox = (e: LiteGraphCanvasEvent) => {
+  // @ts-expect-error type event detail
   if (e.detail.linkReleaseContext) {
+    // @ts-expect-error type event detail
     const links = e.detail.linkReleaseContext.links
     if (links.length === 0) {
       console.warn('Empty release with no links! This should never happen')
@@ -123,7 +127,7 @@ const showNewSearchBox = (e: LiteGraphCanvasEvent) => {
     const filter = nodeDefStore.nodeSearchService.getFilterById(
       firstLink.releaseSlotType
     )
-    const dataType = firstLink.type
+    const dataType = firstLink.type.toString()
     addFilter([filter, dataType])
   }
 
@@ -138,6 +142,7 @@ const showNewSearchBox = (e: LiteGraphCanvasEvent) => {
 }
 
 const showContextMenu = (e: LiteGraphCanvasEvent) => {
+  // @ts-expect-error type event detail
   const links = e.detail.linkReleaseContext.links
   if (links.length === 0) {
     console.warn('Empty release with no links! This should never happen')
@@ -145,6 +150,7 @@ const showContextMenu = (e: LiteGraphCanvasEvent) => {
   }
 
   const firstLink = ConnectingLinkImpl.createFromPlainObject(links[0])
+  // @ts-expect-error type event detail
   const mouseEvent = e.detail.originalEvent as MouseEvent
   const commonOptions = {
     e: mouseEvent,
@@ -162,6 +168,7 @@ const showContextMenu = (e: LiteGraphCanvasEvent) => {
         slotTo: firstLink.input,
         afterRerouteId: firstLink.afterRerouteId
       }
+  // @ts-expect-error type arguments
   canvasStore.canvas.showConnectionMenu({
     ...connectionOptions,
     ...commonOptions
@@ -202,6 +209,7 @@ const linkReleaseActionShift = computed(() => {
 })
 
 const handleCanvasEmptyRelease = (e: LiteGraphCanvasEvent) => {
+  // @ts-expect-error type event detail
   const originalEvent = e.detail.originalEvent as MouseEvent
   const shiftPressed = originalEvent.shiftKey
 

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

@@ -75,7 +75,7 @@ const props = defineProps<{
   download: ElectronDownload
 }>()
 
-const getDownloadLabel = (savePath: string, filename: string) => {
+const getDownloadLabel = (savePath: string) => {
   let parts = (savePath ?? '').split('/')
   parts = parts.length === 1 ? parts[0].split('\\') : parts
   const name = parts.pop()
@@ -95,7 +95,6 @@ const handleRemoveDownload = () => {
     state.downloads = state.downloads.filter(
       ({ url }) => url !== props.download.url
     )
-    state.hasChanged = true
   })
 }
 </script>

src/stores/queueStore.ts

@@ -51,7 +51,7 @@ export class ResultItemImpl {
     this.frame_rate = obj.frame_rate
   }
 
-  private get urlParams(): URLSearchParams {
+  get urlParams(): URLSearchParams {
     const params = new URLSearchParams()
     params.set('filename', this.filename)
     params.set('type', this.type)

src/views/WelcomeView.vue

@@ -15,7 +15,7 @@
         iconPos="right"
         size="large"
         rounded
-        @click="$router.push('/install')"
+        @click="navigateTo('/install')"
         class="p-4 text-lg fade-in-up"
       />
     </div>
@@ -24,6 +24,12 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const navigateTo = (path: string) => {
+  router.push(path)
+}
 </script>
 
 <style scoped>