Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-25 09:14:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Manager] Refactor node pack card footer to separate component (#3028)

Browse Source
This commit is contained in:
Christian Byrne
2025-03-13 16:45:09 -07:00
committed by GitHub
parent 1605a37679
commit 58be9ad4c3
2 changed files with 41 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/dialog/content/manager/packCard/PackCard.vue
View File

@@ -66,28 +66,7 @@
</template>
<template #footer>
<ContentDivider :width="0.1" />
<div class="flex justify-between p-5 text-xs text-muted">
<div class="flex items-center gap-2 cursor-pointer">
<span v-if="nodePack.publisher?.name">
{{ nodePack.publisher.name }}
</span>
<PackVersionBadge v-if="isPackInstalled" :node-pack="nodePack" />
<span v-else-if="nodePack.latest_version">
{{ nodePack.latest_version.version }}
</span>
</div>
<div
v-if="nodePack.latest_version?.createdAt"
class="flex items-center gap-2 truncate"
>
{{ $t('g.updated') }}
{{
$d(new Date(nodePack.latest_version.createdAt), {
dateStyle: 'medium'
})
}}
</div>
</div>
<PackCardFooter :node-pack="nodePack" />
</template>
</Card>
</template>
@@ -97,9 +76,9 @@ import Card from 'primevue/card'
import { computed } from 'vue'
import ContentDivider from '@/components/common/ContentDivider.vue'
import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
import PackEnableToggle from '@/components/dialog/content/manager/button/PackEnableToggle.vue'
import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
import PackCardFooter from '@/components/dialog/content/manager/packCard/PackCardFooter.vue'
import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
import { useComfyManagerStore } from '@/stores/comfyManagerStore'
import type { components } from '@/types/comfyRegistryTypes'

39
src/components/dialog/content/manager/packCard/PackCardFooter.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<div class="flex justify-between p-5 text-xs text-muted">
<div class="flex items-center gap-2 cursor-pointer">
<span v-if="nodePack.publisher?.name">
{{ nodePack.publisher.name }}
</span>
<PackVersionBadge v-if="isInstalled" :node-pack="nodePack" />
<span v-else-if="nodePack.latest_version">
{{ nodePack.latest_version.version }}
</span>
</div>
<div
v-if="nodePack.latest_version?.createdAt"
class="flex items-center gap-2 truncate"
>
{{ $t('g.updated') }}
{{
$d(new Date(nodePack.latest_version.createdAt), {
dateStyle: 'medium'
})
}}
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
import { useComfyManagerStore } from '@/stores/comfyManagerStore'
import type { components } from '@/types/comfyRegistryTypes'
const { nodePack } = defineProps<{
nodePack: components['schemas']['Node']
}>()
const { isPackInstalled } = useComfyManagerStore()
const isInstalled = computed(() => isPackInstalled(nodePack?.id))
</script>