mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-05 13:10:24 +00:00
5f045b335d
* [feat] Improve UX for disabled node packs in Manager dialog - Hide "Update All" button when only disabled packs have updates - Add tooltip on "Update All" hover to indicate disabled nodes won't be updated - Disable version selector and show tooltip for disabled node packs - Filter updates to only show enabled packs in the update queue - Add visual indicators (opacity, cursor) for disabled pack cards - Add comprehensive test coverage for new functionality This improves the user experience by clearly indicating which packs can be updated and preventing confusion about disabled packs. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * chore: missing nodes description added * test: test code modified --------- Co-authored-by: Claude <noreply@anthropic.com>
105 lines
2.9 KiB
Vue
105 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<div
|
|
v-tooltip.top="
|
|
isDisabled ? $t('manager.enablePackToChangeVersion') : null
|
|
"
|
|
class="inline-flex items-center gap-1 rounded-2xl text-xs py-1"
|
|
:class="{
|
|
'bg-gray-100 dark-theme:bg-neutral-700 px-1.5': fill,
|
|
'cursor-pointer': !isDisabled,
|
|
'cursor-not-allowed opacity-60': isDisabled
|
|
}"
|
|
:aria-haspopup="!isDisabled"
|
|
:role="isDisabled ? 'text' : 'button'"
|
|
:tabindex="isDisabled ? -1 : 0"
|
|
@click="!isDisabled && toggleVersionSelector($event)"
|
|
@keydown.enter="!isDisabled && toggleVersionSelector($event)"
|
|
@keydown.space="!isDisabled && toggleVersionSelector($event)"
|
|
>
|
|
<i
|
|
v-if="isUpdateAvailable"
|
|
class="pi pi-arrow-circle-up text-blue-600 text-xs"
|
|
/>
|
|
<span>{{ installedVersion }}</span>
|
|
<i v-if="!isDisabled" class="pi pi-chevron-right text-xxs" />
|
|
</div>
|
|
|
|
<Popover
|
|
ref="popoverRef"
|
|
:pt="{
|
|
content: { class: 'p-0 shadow-lg' }
|
|
}"
|
|
>
|
|
<PackVersionSelectorPopover
|
|
:installed-version="installedVersion"
|
|
:node-pack="nodePack"
|
|
@cancel="closeVersionSelector"
|
|
@submit="closeVersionSelector"
|
|
/>
|
|
</Popover>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Popover from 'primevue/popover'
|
|
import { computed, ref, watch } from 'vue'
|
|
|
|
import PackVersionSelectorPopover from '@/components/dialog/content/manager/PackVersionSelectorPopover.vue'
|
|
import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
|
|
import { useComfyManagerStore } from '@/stores/comfyManagerStore'
|
|
import type { components } from '@/types/comfyRegistryTypes'
|
|
import { isSemVer } from '@/utils/formatUtil'
|
|
|
|
const TRUNCATED_HASH_LENGTH = 7
|
|
|
|
const {
|
|
nodePack,
|
|
isSelected,
|
|
fill = true
|
|
} = defineProps<{
|
|
nodePack: components['schemas']['Node']
|
|
isSelected: boolean
|
|
fill?: boolean
|
|
}>()
|
|
|
|
const { isUpdateAvailable } = usePackUpdateStatus(nodePack)
|
|
const popoverRef = ref()
|
|
|
|
const managerStore = useComfyManagerStore()
|
|
|
|
const isInstalled = computed(() => managerStore.isPackInstalled(nodePack?.id))
|
|
const isDisabled = computed(
|
|
() => isInstalled.value && !managerStore.isPackEnabled(nodePack?.id)
|
|
)
|
|
|
|
const installedVersion = computed(() => {
|
|
if (!nodePack.id) return 'nightly'
|
|
const version =
|
|
managerStore.installedPacks[nodePack.id]?.ver ??
|
|
nodePack.latest_version?.version ??
|
|
'nightly'
|
|
|
|
// If Git hash, truncate to 7 characters
|
|
return isSemVer(version) ? version : version.slice(0, TRUNCATED_HASH_LENGTH)
|
|
})
|
|
|
|
const toggleVersionSelector = (event: Event) => {
|
|
popoverRef.value.toggle(event)
|
|
}
|
|
|
|
const closeVersionSelector = () => {
|
|
popoverRef.value.hide()
|
|
}
|
|
|
|
// If the card is unselected, automatically close the version selector popover
|
|
watch(
|
|
() => isSelected,
|
|
(isSelected, wasSelected) => {
|
|
if (wasSelected && !isSelected) {
|
|
closeVersionSelector()
|
|
}
|
|
}
|
|
)
|
|
</script>
|