Emit progress target instead of expose

src/components/TopMenuSection.test.ts

@@ -2,7 +2,7 @@ import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
 import type { MenuItem } from 'primevue/menuitem'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { computed, defineComponent, h, nextTick } from 'vue'
+import { computed, defineComponent, h, nextTick, onMounted } from 'vue'
 import type { Component } from 'vue'
 import { createI18n } from 'vue-i18n'
 
@@ -273,8 +273,10 @@ describe('TopMenuSection', () => {
 
       const ComfyActionbarStub = defineComponent({
         name: 'ComfyActionbar',
-        setup(_, { expose }) {
-          expose({ panelElement: actionbarTarget })
+        setup(_, { emit }) {
+          onMounted(() => {
+            emit('update:progressTarget', actionbarTarget)
+          })
           return () => h('div')
         }
       })

src/components/TopMenuSection.vue

@@ -43,9 +43,9 @@
               class="[&:not(:has(*>*:not(:empty)))]:hidden"
             ></div>
             <ComfyActionbar
-              ref="actionbarRef"
               :top-menu-container="actionbarContainerRef"
               :queue-overlay-expanded="isQueueOverlayExpanded"
+              @update:progress-target="updateProgressTarget"
             />
             <Button
               v-tooltip.bottom="queueHistoryTooltipConfig"
@@ -203,24 +203,18 @@ const isQueuePanelV2Enabled = computed(() =>
 const isQueueProgressOverlayEnabled = computed(
   () => !isQueuePanelV2Enabled.value
 )
-type PanelElementTarget = HTMLElement | { value?: HTMLElement | null } | null
 const shouldShowInlineProgressSummary = computed(
   () => isQueuePanelV2Enabled.value && isActionbarEnabled.value
 )
-const actionbarRef = ref<{ panelElement: PanelElementTarget } | null>(null)
-const resolvePanelElement = (target: PanelElementTarget) => {
-  if (!target) return null
-  if (target instanceof HTMLElement) return target
-  if (typeof target === 'object' && 'value' in target) {
-    return target.value ?? null
-  }
-  return null
+const progressTarget = ref<HTMLElement | null>(null)
+function updateProgressTarget(target: HTMLElement | null) {
+  progressTarget.value = target
 }
 const inlineProgressSummaryTarget = computed(() => {
   if (!shouldShowInlineProgressSummary.value || !isActionbarFloating.value) {
     return null
   }
-  return resolvePanelElement(actionbarRef.value?.panelElement ?? null)
+  return progressTarget.value
 })
 const queueHistoryTooltipConfig = computed(() =>
   buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))

src/components/actionbar/ComfyActionbar.vue

@@ -85,6 +85,10 @@ const { topMenuContainer, queueOverlayExpanded = false } = defineProps<{
   queueOverlayExpanded?: boolean
 }>()
 
+const emit = defineEmits<{
+  (event: 'update:progressTarget', target: HTMLElement | null): void
+}>()
+
 const settingsStore = useSettingStore()
 const commandStore = useCommandStore()
 const { t } = useI18n()
@@ -281,8 +285,13 @@ const inlineProgressTarget = computed(() => {
   if (isDocked.value) return topMenuContainer ?? null
   return panelElement.value
 })
-
-defineExpose({ panelElement })
+watch(
+  panelElement,
+  (target) => {
+    emit('update:progressTarget', target)
+  },
+  { immediate: true }
+)
 
 // Handle drag state changes
 watch(isDragging, (dragging) => {