[chore] Update primevue to 4.2.5 (#2304)

browser_tests/nodeSearchBox.spec.ts

@@ -82,10 +82,14 @@ test.describe('Node search box', () => {
   test('Has correct aria-labels on search results', async ({ comfyPage }) => {
     const node = 'Load Checkpoint'
     await comfyPage.doubleClickCanvas()
-    await comfyPage.searchBox.fillAndSelectFirstNode(node)
+    await comfyPage.searchBox.input.waitFor({ state: 'visible' })
-    const firstResult = comfyPage.page
+    await comfyPage.searchBox.input.fill(node)
-      .locator('li.p-autocomplete-option')
+    await comfyPage.searchBox.dropdown.waitFor({ state: 'visible' })
-      .first()
+    // Wait for some time for the auto complete list to update.
+    // The auto complete list is debounced and may take some time to update.
+    await comfyPage.page.waitForTimeout(500)
+
+    const firstResult = comfyPage.searchBox.dropdown.locator('li').first()
     await expect(firstResult).toHaveAttribute('aria-label', node)
   })
 

package-lock.json

@@ -12,7 +12,7 @@
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
         "@comfyorg/comfyui-electron-types": "^0.4.11",
         "@comfyorg/litegraph": "^0.8.61",
-        "@primevue/themes": "^4.0.5",
+        "@primevue/themes": "^4.2.5",
         "@sentry/vue": "^8.48.0",
         "@tiptap/core": "^2.10.4",
         "@tiptap/extension-link": "^2.10.4",
@@ -32,7 +32,7 @@
         "loglevel": "^1.9.2",
         "pinia": "^2.1.7",
         "primeicons": "^7.0.0",
-        "primevue": "^4.0.5",
+        "primevue": "^4.2.5",
         "three": "^0.170.0",
         "tiptap-markdown": "^0.8.10",
         "vue": "^3.4.31",
@@ -3962,62 +3962,62 @@
       }
     },
     "node_modules/@primeuix/styled": {
-      "version": "0.0.5",
+      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.3.2.tgz",
-      "integrity": "sha512-pVoGn/uPkVm/DyF3TR3EmH/pL/dP4nR42FcYbVduFq9VfO3KVeOEqvcCULHXos66RZO9MCbCFUoLy6ctf9GUGQ==",
+      "integrity": "sha512-ColZes0+/WKqH4ob2x8DyNYf1NENpe5ZguOvx5yCLxaP8EIMVhLjWLO/3umJiDnQU4XXMLkn2mMHHw+fhTX/mw==",
       "license": "MIT",
       "dependencies": {
-        "@primeuix/utils": "^0.0.5"
+        "@primeuix/utils": "^0.3.2"
       },
       "engines": {
         "node": ">=12.11.0"
       }
     },
     "node_modules/@primeuix/utils": {
-      "version": "0.0.5",
+      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.3.2.tgz",
-      "integrity": "sha512-ntUiUgtRtkF8KuaxHffzhYxQxoXk6LAPHm7CVlFjdqS8Rx8xRkLkZVyo84E+pO2hcNFkOGVP/GxHhQ2s94O8zA==",
+      "integrity": "sha512-B+nphqTQeq+i6JuICLdVWnDMjONome2sNz0xI65qIOyeB4EF12CoKRiCsxuZ5uKAkHi/0d1LqlQ9mIWRSdkavw==",
       "license": "MIT",
       "engines": {
         "node": ">=12.11.0"
       }
     },
     "node_modules/@primevue/core": {
-      "version": "4.0.5",
+      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.2.5.tgz",
-      "integrity": "sha512-DUCslDA93eUOVW0A1I3yoZgRLI4zmI2++loZQXbUF5jaXCwKiAza14+iyUU+cWH27VSq+jQnCEP9QJtPZiJJ0w==",
+      "integrity": "sha512-+oWBIQs5dLd2Ini4KEVOlvPILk989EHAskiFS3R/dz3jeOllJDMZFcSp8V9ddV0R3yDaPdLVkfHm2Q5t42kU2Q==",
       "license": "MIT",
       "dependencies": {
-        "@primeuix/styled": "^0.0.5",
+        "@primeuix/styled": "^0.3.2",
-        "@primeuix/utils": "^0.0.5"
+        "@primeuix/utils": "^0.3.2"
       },
       "engines": {
         "node": ">=12.11.0"
       },
       "peerDependencies": {
-        "vue": "^3.0.0"
+        "vue": "^3.3.0"
       }
     },
     "node_modules/@primevue/icons": {
-      "version": "4.0.5",
+      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.2.5.tgz",
-      "integrity": "sha512-ZxR9W1wlAE2fTtUhrHyeMx5t0jNyAgxDcHPm0cNXpX8q1XF95rSM/qb48QKXIBDBrJ/xs57BcyCNADP/VDPY4g==",
+      "integrity": "sha512-WFbUMZhQkXf/KmwcytkjGVeJ9aGEDXjP3uweOjQZMmRdEIxFnqYYpd90wE90JE1teZn3+TVnT4ZT7ejGyEXnFQ==",
       "license": "MIT",
       "dependencies": {
-        "@primeuix/utils": "^0.0.5",
+        "@primeuix/utils": "^0.3.2",
-        "@primevue/core": "4.0.5"
+        "@primevue/core": "4.2.5"
       },
       "engines": {
         "node": ">=12.11.0"
       }
     },
     "node_modules/@primevue/themes": {
-      "version": "4.0.5",
+      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.2.5.tgz",
-      "integrity": "sha512-cRrAhOapOT8eFCTDwNdB/acg2ZEEkn7y6h6p188PYSjJsWnYK+D8eI1Js1ZB5HwWo4sWs3oR3Sy8bPwejnGbAw==",
+      "integrity": "sha512-8F7yA36xYIKtNuAuyBdZZEks/bKDwlhH5WjpqGGB0FdwfAEoBYsynQ5sdqcT2Lb/NsajHmS5lc++Ttlvr1g1Lw==",
       "license": "MIT",
       "dependencies": {
-        "@primeuix/styled": "^0.0.5"
+        "@primeuix/styled": "^0.3.2"
       },
       "engines": {
         "node": ">=12.11.0"
@@ -15528,15 +15528,15 @@
       "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw=="
     },
     "node_modules/primevue": {
-      "version": "4.0.5",
+      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.2.5.tgz",
-      "integrity": "sha512-MALszGIZ5SnEQy1XeZLBFhpMXQ1OS7D1U7H+l/JAX5U46RQ1vufo7NAiWbbV5/ADjPGw4uLplqMQxujkksNY2g==",
+      "integrity": "sha512-7UMOIJvdFz4jQyhC76yhNdSlHtXvVpmE2JSo2ndUTBWjWJOkYyT562rQ4ayO+bMdJLtzBGqgY64I9ZfEvNd7vQ==",
       "license": "MIT",
       "dependencies": {
-        "@primeuix/styled": "^0.0.5",
+        "@primeuix/styled": "^0.3.2",
-        "@primeuix/utils": "^0.0.5",
+        "@primeuix/utils": "^0.3.2",
-        "@primevue/core": "4.0.5",
+        "@primevue/core": "4.2.5",
-        "@primevue/icons": "4.0.5"
+        "@primevue/icons": "4.2.5"
       },
       "engines": {
         "node": ">=12.11.0"

package.json

@@ -85,7 +85,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "^0.4.11",
     "@comfyorg/litegraph": "^0.8.61",
-    "@primevue/themes": "^4.0.5",
+    "@primevue/themes": "^4.2.5",
     "@sentry/vue": "^8.48.0",
     "@tiptap/core": "^2.10.4",
     "@tiptap/extension-link": "^2.10.4",
@@ -105,7 +105,7 @@
     "loglevel": "^1.9.2",
     "pinia": "^2.1.7",
     "primeicons": "^7.0.0",
-    "primevue": "^4.0.5",
+    "primevue": "^4.2.5",
     "three": "^0.170.0",
     "tiptap-markdown": "^0.8.10",
     "vue": "^3.4.31",

src/App.vue

@@ -18,7 +18,7 @@ import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
-import { isElectron, showNativeMenu } from './utils/envUtil'
+import { electronAPI, isElectron } from './utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()
 const isLoading = computed<boolean>(() => workspaceStore.spinner)
@@ -34,7 +34,7 @@ const showContextMenu = (event: PointerEvent) => {
     case target instanceof HTMLTextAreaElement:
     case target instanceof HTMLInputElement && target.type === 'text':
       // TODO: Context input menu explicitly for text input
-      showNativeMenu({ type: 'text' })
+      electronAPI()?.showContextMenu({ type: 'text' })
       return
   }
 }

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">
+    <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>
     <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 }) => ({
+      nodeContent: ({ context }) => ({
-        onClick: (e: MouseEvent) => onNodeContentClick(e, props.node),
+        onClick: (e: MouseEvent) =>
-        onContextmenu: (e: MouseEvent) => handleContextMenu(props.node, e)
+          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 autoUpdate = defineModel<boolean>('autoUpdate', { required: true })
-const allowMetrics = defineModel('allowMetrics', { required: true })
+const allowMetrics = defineModel<boolean>('allowMetrics', { required: true })
 
 const showMetricsInfo = () => {
   showDialog.value = true

src/utils/envUtil.ts

@@ -11,6 +11,6 @@ export function electronAPI() {
   return (window as any).electronAPI as ElectronAPI
 }
 
-export function showNativeMenu(options?: ElectronContextMenuOptions) {
+export function showNativeMenu(event: MouseEvent) {
-  electronAPI()?.showContextMenu(options)
+  electronAPI()?.showContextMenu(event as ElectronContextMenuOptions)
 }