[TS] Fix ts-strict errors in Vue components (Part 1) (#3119)

Author: huchenlei

src/App.vue

@@ -28,7 +28,7 @@ const handleKey = (e: KeyboardEvent) => {
 useEventListener(window, 'keydown', handleKey)
 useEventListener(window, 'keyup', handleKey)
 
-const showContextMenu = (event: PointerEvent) => {
+const showContextMenu = (event: MouseEvent) => {
   const { target } = event
   switch (true) {
     case target instanceof HTMLTextAreaElement:

src/components/actionbar/ComfyQueueButton.vue

@@ -135,8 +135,11 @@ const hasPendingTasks = computed(
 )
 
 const commandStore = useCommandStore()
-const queuePrompt = (e: MouseEvent) => {
-  const commandId = e.shiftKey ? 'Comfy.QueuePromptFront' : 'Comfy.QueuePrompt'
+const queuePrompt = (e: Event) => {
+  const commandId =
+    'shiftKey' in e && e.shiftKey
+      ? 'Comfy.QueuePromptFront'
+      : 'Comfy.QueuePrompt'
   commandStore.execute(commandId)
 }
 </script>

src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -12,11 +12,11 @@ import { Ref, onUnmounted, ref } from 'vue'
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 
 const emit = defineEmits<{
-  created: [ReturnType<typeof useTerminal>, Ref<HTMLElement>]
+  created: [ReturnType<typeof useTerminal>, Ref<HTMLElement | undefined>]
   unmounted: []
 }>()
-const terminalEl = ref<HTMLElement>()
-const rootEl = ref<HTMLElement>()
+const terminalEl = ref<HTMLElement | undefined>()
+const rootEl = ref<HTMLElement | undefined>()
 emit('created', useTerminal(terminalEl), rootEl)
 
 onUnmounted(() => emit('unmounted'))

src/components/bottomPanel/tabs/terminal/CommandTerminal.vue

@@ -13,7 +13,7 @@ import BaseTerminal from './BaseTerminal.vue'
 
 const terminalCreated = (
   { terminal, useAutoSize }: ReturnType<typeof useTerminal>,
-  root: Ref<HTMLElement>
+  root: Ref<HTMLElement | undefined>
 ) => {
   const terminalApi = electronAPI().Terminal
 

src/components/bottomPanel/tabs/terminal/LogsTerminal.vue

@@ -27,7 +27,7 @@ const loading = ref(true)
 
 const terminalCreated = (
   { terminal, useAutoSize }: ReturnType<typeof useTerminal>,
-  root: Ref<HTMLElement>
+  root: Ref<HTMLElement | undefined>
 ) => {
   // `autoCols` is false because we don't want the progress bar in the terminal
   // to render incorrectly as the progress bar is rendered based on the

src/components/common/DeviceInfo.vue

@@ -2,7 +2,9 @@
   <div class="grid grid-cols-2 gap-2">
     <template v-for="col in deviceColumns" :key="col.field">
       <div class="font-medium">{{ col.header }}</div>
-      <div>{{ formatValue(props.device[col.field], col.field) }}</div>
+      <div>
+        {{ formatValue(props.device[col.field], col.field) }}
+      </div>
     </template>
   </div>
 </template>
@@ -15,7 +17,7 @@ const props = defineProps<{
   device: DeviceStats
 }>()
 
-const deviceColumns = [
+const deviceColumns: { field: keyof DeviceStats; header: string }[] = [
   { field: 'name', header: 'Name' },
   { field: 'type', header: 'Type' },
   { field: 'vram_total', header: 'VRAM Total' },

src/components/common/EditableText.vue

@@ -38,9 +38,10 @@ const props = withDefaults(defineProps<EditableTextProps>(), {
 
 const emit = defineEmits(['update:modelValue', 'edit'])
 const inputValue = ref<string>(props.modelValue)
-const inputRef = ref(null)
+const inputRef = ref<InstanceType<typeof InputText> | undefined>()
 
 const blurInputElement = () => {
+  // @ts-expect-error - $el is an internal property of the InputText component
   inputRef.value?.$el.blur()
 }
 const finishEditing = () => {
@@ -58,6 +59,7 @@ watch(
           : inputValue.value
         const start = 0
         const end = fileName.length
+        // @ts-expect-error - $el is an internal property of the InputText component
         const inputElement = inputRef.value.$el
         inputElement.setSelectionRange?.(start, end)
       })

src/components/common/FormItem.vue

@@ -72,7 +72,7 @@ function getFormAttrs(item: FormItem) {
             item.options(formValue.value)
           : item.options
 
-      if (typeof item.options[0] !== 'string') {
+      if (typeof item.options?.[0] !== 'string') {
         attrs['optionLabel'] = 'text'
         attrs['optionValue'] = 'value'
       }

src/components/common/InputKnob.vue

@@ -76,7 +76,7 @@ const updateValue = (newValue: number | null) => {
 
 const displayValue = (value: number): string => {
   updateValue(value)
-  const stepString = props.step.toString()
+  const stepString = (props.step ?? 1).toString()
   const resolution = stepString.includes('.')
     ? stepString.split('.')[1].length
     : 0

src/components/common/InputSlider.vue

@@ -2,7 +2,7 @@
   <div class="input-slider flex flex-row items-center gap-2">
     <Slider
       :modelValue="modelValue"
-      @update:modelValue="updateValue"
+      @update:modelValue="(value) => updateValue(value as number)"
       class="slider-part"
       :class="sliderClass"
       :min="min"