mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-28 10:44:12 +00:00
91e462dae8
* feat: improve multi-package selection handling - Check each package individually for conflicts in install dialog - Show only packages with actual conflicts in warning dialog - Hide action buttons for mixed installed/uninstalled selections - Display dynamic status based on selected packages priority - Deduplicate conflict information across multiple packages - Fix PackIcon blur background opacity 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor: extract multi-package logic into reusable composables - Create usePackageSelection composable for installation state management - Create usePackageStatus composable for status priority logic - Refactor InfoPanelMultiItem to use new composables - Reduce component complexity by separating business logic - Improve code reusability across components 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: directory modified * test: add comprehensive tests for multi-package selection composables - Add tests for usePacksSelection composable - Test installation status filtering - Test selection state determination (all/none/mixed) - Test dynamic status changes - Add tests for usePacksStatus composable - Test import failure detection - Test status priority handling - Test integration with conflict detection store - Fix existing test mocking issues - Update es-toolkit/compat mock to use async import - Add Pinia setup for store-dependent tests - Update vue-i18n mock to preserve all exports --------- Co-authored-by: Claude <noreply@anthropic.com>
53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
<template>
|
|
<div class="w-full max-w-[204] aspect-[2/1] rounded-lg overflow-hidden">
|
|
<!-- default banner show -->
|
|
<div v-if="showDefaultBanner" class="w-full h-full">
|
|
<img
|
|
:src="DEFAULT_BANNER"
|
|
alt="default banner"
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
<!-- banner_url or icon show -->
|
|
<div v-else class="relative w-full h-full">
|
|
<!-- blur background -->
|
|
<div
|
|
v-if="imgSrc"
|
|
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
|
:style="{
|
|
backgroundImage: `url(${imgSrc})`,
|
|
filter: 'blur(10px)'
|
|
}"
|
|
></div>
|
|
<!-- image -->
|
|
<img
|
|
:src="isImageError ? DEFAULT_BANNER : imgSrc"
|
|
:alt="nodePack.name + ' banner'"
|
|
:class="
|
|
isImageError
|
|
? 'relative w-full h-full object-cover z-10'
|
|
: 'relative w-full h-full object-contain z-10'
|
|
"
|
|
@error="isImageError = true"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
|
|
import { components } from '@/types/comfyRegistryTypes'
|
|
|
|
const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
|
|
|
|
const { nodePack } = defineProps<{
|
|
nodePack: components['schemas']['Node']
|
|
}>()
|
|
|
|
const isImageError = ref(false)
|
|
|
|
const showDefaultBanner = computed(() => !nodePack.banner_url && !nodePack.icon)
|
|
const imgSrc = computed(() => nodePack.banner_url || nodePack.icon)
|
|
</script>
|