[chore] Update primevue to 4.2.5 (#2304)

2026-02-08 09:00:05 +00:00 · 2025-01-20 16:22:24 -05:00
parent 8b9f0ddd1d
commit 34c267c755
13 changed files with 63 additions and 140 deletions
--- a/browser_tests/nodeSearchBox.spec.ts
+++ b/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)
-    const firstResult = comfyPage.page
-      .locator('li.p-autocomplete-option')
-      .first()
+    await comfyPage.searchBox.input.waitFor({ state: 'visible' })
+    await comfyPage.searchBox.input.fill(node)
+    await comfyPage.searchBox.dropdown.waitFor({ state: 'visible' })
+    // 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)
  })

--- a/package-lock.json
+++ b/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",
-      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.0.5.tgz",
-      "integrity": "sha512-pVoGn/uPkVm/DyF3TR3EmH/pL/dP4nR42FcYbVduFq9VfO3KVeOEqvcCULHXos66RZO9MCbCFUoLy6ctf9GUGQ==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.3.2.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.0.5.tgz",
-      "integrity": "sha512-ntUiUgtRtkF8KuaxHffzhYxQxoXk6LAPHm7CVlFjdqS8Rx8xRkLkZVyo84E+pO2hcNFkOGVP/GxHhQ2s94O8zA==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.3.2.tgz",
+      "integrity": "sha512-B+nphqTQeq+i6JuICLdVWnDMjONome2sNz0xI65qIOyeB4EF12CoKRiCsxuZ5uKAkHi/0d1LqlQ9mIWRSdkavw==",
      "license": "MIT",
      "engines": {
        "node": ">=12.11.0"
      }
    },
    "node_modules/@primevue/core": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.0.5.tgz",
-      "integrity": "sha512-DUCslDA93eUOVW0A1I3yoZgRLI4zmI2++loZQXbUF5jaXCwKiAza14+iyUU+cWH27VSq+jQnCEP9QJtPZiJJ0w==",
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.2.5.tgz",
+      "integrity": "sha512-+oWBIQs5dLd2Ini4KEVOlvPILk989EHAskiFS3R/dz3jeOllJDMZFcSp8V9ddV0R3yDaPdLVkfHm2Q5t42kU2Q==",
      "license": "MIT",
      "dependencies": {
-        "@primeuix/styled": "^0.0.5",
-        "@primeuix/utils": "^0.0.5"
+        "@primeuix/styled": "^0.3.2",
+        "@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",
-      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.0.5.tgz",
-      "integrity": "sha512-ZxR9W1wlAE2fTtUhrHyeMx5t0jNyAgxDcHPm0cNXpX8q1XF95rSM/qb48QKXIBDBrJ/xs57BcyCNADP/VDPY4g==",
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.2.5.tgz",
+      "integrity": "sha512-WFbUMZhQkXf/KmwcytkjGVeJ9aGEDXjP3uweOjQZMmRdEIxFnqYYpd90wE90JE1teZn3+TVnT4ZT7ejGyEXnFQ==",
      "license": "MIT",
      "dependencies": {
-        "@primeuix/utils": "^0.0.5",
-        "@primevue/core": "4.0.5"
+        "@primeuix/utils": "^0.3.2",
+        "@primevue/core": "4.2.5"
      },
      "engines": {
        "node": ">=12.11.0"
      }
    },
    "node_modules/@primevue/themes": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.0.5.tgz",
-      "integrity": "sha512-cRrAhOapOT8eFCTDwNdB/acg2ZEEkn7y6h6p188PYSjJsWnYK+D8eI1Js1ZB5HwWo4sWs3oR3Sy8bPwejnGbAw==",
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.2.5.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.0.5.tgz",
-      "integrity": "sha512-MALszGIZ5SnEQy1XeZLBFhpMXQ1OS7D1U7H+l/JAX5U46RQ1vufo7NAiWbbV5/ADjPGw4uLplqMQxujkksNY2g==",
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.2.5.tgz",
+      "integrity": "sha512-7UMOIJvdFz4jQyhC76yhNdSlHtXvVpmE2JSo2ndUTBWjWJOkYyT562rQ4ayO+bMdJLtzBGqgY64I9ZfEvNd7vQ==",
      "license": "MIT",
      "dependencies": {
-        "@primeuix/styled": "^0.0.5",
-        "@primeuix/utils": "^0.0.5",
-        "@primevue/core": "4.0.5",
-        "@primevue/icons": "4.0.5"
+        "@primeuix/styled": "^0.3.2",
+        "@primeuix/utils": "^0.3.2",
+        "@primevue/core": "4.2.5",
+        "@primevue/icons": "4.2.5"
      },
      "engines": {
        "node": ">=12.11.0"
--- a/package.json
+++ b/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",
--- a/src/App.vue
+++ b/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
  }
 }
--- a/src/components/actionbar/ComfyQueueButton.vue
+++ b/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"
--- a/src/components/common/ElectronFileDownload.vue
+++ b/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"
--- a/src/components/common/FileDownload.vue
+++ b/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"
      />
--- a/src/components/common/FormColorPicker.vue
+++ b/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>
--- a/src/components/common/LogTerminal.vue
+++ b/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>
--- a/src/components/common/SystemStatsPanel.vue
+++ b/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>
--- a/src/components/common/TreeExplorer.vue
+++ b/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) {
--- a/src/components/install/DesktopSettingsConfiguration.vue
+++ b/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
--- a/src/utils/envUtil.ts
+++ b/src/utils/envUtil.ts
@@ -11,6 +11,6 @@ export function electronAPI() {
  return (window as any).electronAPI as ElectronAPI
 }

-export function showNativeMenu(options?: ElectronContextMenuOptions) {
-  electronAPI()?.showContextMenu(options)
+export function showNativeMenu(event: MouseEvent) {
+  electronAPI()?.showContextMenu(event as ElectronContextMenuOptions)
 }