[chore] Update primevue to 4.2.5 (#2304)

src/components/actionbar/ComfyQueueButton.vue

@@ -22,7 +22,7 @@
       </template>
       <template #item="{ item }">
         <Button
-          :label="item.label"
+          :label="String(item.label)"
           :icon="item.icon"
           :severity="item.key === queueMode ? 'primary' : 'secondary'"
           size="small"

src/components/common/ElectronFileDownload.vue

@@ -18,7 +18,7 @@
           :label="$t('g.download') + ' (' + fileSize + ')'"
           size="small"
           outlined
-          :disabled="props.error"
+          :disabled="!!props.error"
           @click="triggerDownload"
           v-if="status === null || status === 'error'"
           icon="pi pi-download"
@@ -30,7 +30,7 @@
       v-if="status === 'in_progress' || status === 'paused'"
     >
       <!-- 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     
+           https://comfy-organization.slack.com/archives/C07H3GLKDPF/p1731551013385499
       -->
       <ProgressBar
         class="flex-1"
@@ -42,7 +42,7 @@
         class="file-action-button"
         size="small"
         outlined
-        :disabled="props.error"
+        :disabled="!!props.error"
         @click="triggerPauseDownload"
         v-if="status === 'in_progress'"
         icon="pi pi-pause-circle"
@@ -53,7 +53,7 @@
         class="file-action-button"
         size="small"
         outlined
-        :disabled="props.error"
+        :disabled="!!props.error"
         @click="triggerResumeDownload"
         v-if="status === 'paused'"
         icon="pi pi-play-circle"
@@ -64,7 +64,7 @@
         class="file-action-button"
         size="small"
         outlined
-        :disabled="props.error"
+        :disabled="!!props.error"
         @click="triggerCancelDownload"
         icon="pi pi-times-circle"
         severity="danger"

src/components/common/FileDownload.vue

@@ -15,7 +15,7 @@
         :label="$t('g.download') + ' (' + fileSize + ')'"
         size="small"
         outlined
-        :disabled="props.error"
+        :disabled="!!props.error"
         :title="props.url"
         @click="download.triggerBrowserDownload"
       />

src/components/common/FormColorPicker.vue

@@ -1,35 +1,17 @@
 <template>
   <div class="color-picker-wrapper flex items-center gap-2">
-    <ColorPicker v-model="modelValue">
-      <template #header>
-        <div class="flex items-center justify-between p-2">
-          <span>{{ props.label }}</span>
-          <Button
-            v-if="props.defaultValue"
-            icon="pi pi-refresh"
-            text
-            size="small"
-            @click="resetColor"
-          />
-        </div>
-      </template>
-    </ColorPicker>
+    <ColorPicker v-model="modelValue" />
     <InputText v-model="modelValue" class="w-28" :placeholder="label" />
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import ColorPicker from 'primevue/colorpicker'
 import InputText from 'primevue/inputtext'
 
 const modelValue = defineModel<string>('modelValue')
-const props = defineProps<{
+defineProps<{
   defaultValue?: string
   label?: string
 }>()
-
-const resetColor = () => {
-  modelValue.value = props.defaultValue || '#000000'
-}
 </script>

src/components/common/LogTerminal.vue

@@ -1,66 +0,0 @@
-<!-- A simple read-only terminal component that displays logs. -->
-<template>
-  <div class="p-terminal rounded-none h-full w-full">
-    <ScrollPanel class="h-full w-full" ref="scrollPanelRef">
-      <pre class="px-4 whitespace-pre-wrap">{{ log }}</pre>
-    </ScrollPanel>
-  </div>
-</template>
-
-<script setup lang="ts">
-import ScrollPanel from 'primevue/scrollpanel'
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
-
-const props = defineProps<{
-  fetchLogs: () => Promise<string>
-  fetchInterval: number
-}>()
-
-const log = ref<string>('')
-const scrollPanelRef = ref<InstanceType<typeof ScrollPanel> | null>(null)
-/**
- * Whether the user has scrolled to the bottom of the terminal.
- * This is used to prevent the terminal from scrolling to the bottom
- * when new logs are fetched.
- */
-const scrolledToBottom = ref(false)
-
-let intervalId: number = 0
-
-onMounted(async () => {
-  const element = scrollPanelRef.value?.$el
-  const scrollContainer = element?.querySelector('.p-scrollpanel-content')
-
-  if (scrollContainer) {
-    scrollContainer.addEventListener('scroll', () => {
-      scrolledToBottom.value =
-        scrollContainer.scrollTop + scrollContainer.clientHeight ===
-        scrollContainer.scrollHeight
-    })
-  }
-
-  const scrollToBottom = () => {
-    if (scrollContainer) {
-      scrollContainer.scrollTop = scrollContainer.scrollHeight
-    }
-  }
-
-  watch(log, () => {
-    if (scrolledToBottom.value) {
-      scrollToBottom()
-    }
-  })
-
-  const fetchLogs = async () => {
-    log.value = await props.fetchLogs()
-  }
-
-  await fetchLogs()
-  scrollToBottom()
-  intervalId = window.setInterval(fetchLogs, props.fetchInterval)
-})
-
-onBeforeUnmount(() => {
-  window.clearInterval(intervalId)
-})
-</script>

src/components/common/SystemStatsPanel.vue

@@ -19,6 +19,7 @@
           v-for="device in props.stats.devices"
           :key="device.index"
           :header="device.name"
+          :value="device.index"
         >
           <DeviceInfo :device="device" />
         </TabPanel>

src/components/common/TreeExplorer.vue

@@ -8,9 +8,11 @@
     selectionMode="single"
     :pt="{
       nodeLabel: 'tree-explorer-node-label',
-      nodeContent: ({ props }) => ({
-        onClick: (e: MouseEvent) => onNodeContentClick(e, props.node),
-        onContextmenu: (e: MouseEvent) => handleContextMenu(props.node, e)
+      nodeContent: ({ context }) => ({
+        onClick: (e: MouseEvent) =>
+          onNodeContentClick(e, context.node as RenderedTreeExplorerNode),
+        onContextmenu: (e: MouseEvent) =>
+          handleContextMenu(e, context.node as RenderedTreeExplorerNode)
       }),
       nodeToggleButton: () => ({
         onClick: (e: MouseEvent) => {
@@ -152,7 +154,7 @@ const menuItems = computed<MenuItem[]>(() =>
   }))
 )
 
-const handleContextMenu = (node: RenderedTreeExplorerNode, e: MouseEvent) => {
+const handleContextMenu = (e: MouseEvent, node: RenderedTreeExplorerNode) => {
   menuTargetNode.value = node
   emit('contextMenu', node, e)
   if (menuItems.value.filter((item) => item.visible).length > 0) {

src/components/install/DesktopSettingsConfiguration.vue

@@ -130,8 +130,8 @@ import ToggleSwitch from 'primevue/toggleswitch'
 import { ref } from 'vue'
 
 const showDialog = ref(false)
-const autoUpdate = defineModel('autoUpdate', { required: true })
-const allowMetrics = defineModel('allowMetrics', { required: true })
+const autoUpdate = defineModel<boolean>('autoUpdate', { required: true })
+const allowMetrics = defineModel<boolean>('allowMetrics', { required: true })
 
 const showMetricsInfo = () => {
   showDialog.value = true