mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-03 12:10:11 +00:00
e7745eb2be
## Summary Replace color/dark-color pairs in components with design tokens to allow for easy overriding. <!-- Also standardizes the icon pattern to simplify the tailwind config. --> ## Changes - **What**: Token based colors, for now, mostly. - **Breaking**: Got approval from Design to collapse some very similar pairs of colors that seem to have diverged in implementations over time. Some of the colors might be a little different, but we can tweak them later. ## Review Focus Still have quite a few places from which to remove `dark-theme`, but this at least gets the theming much closer. Need to decide if I want to keep going in here or cut this and do the rest in a subsequent PR. ## Screenshots (if applicable) <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5908-WIP-Make-components-themeable-2816d73d365081ffbc05d189fe71084b) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
107 lines
2.9 KiB
Vue
107 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-dialog-surface 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 { valid as validSemver } from 'semver'
|
|
import { computed, ref, watch } from 'vue'
|
|
|
|
import type { components } from '@/types/comfyRegistryTypes'
|
|
import PackVersionSelectorPopover from '@/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue'
|
|
import { usePackUpdateStatus } from '@/workbench/extensions/manager/composables/nodePack/usePackUpdateStatus'
|
|
import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
|
|
|
|
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 validSemver(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>
|