mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
639975b804
## Summary Ensures only one MediaAssetCard popover is open at a time. ## Changes - Added `hide()` method exposure in MoreButton component - Implemented parent-level state management for tracking open popover - Added VueUse `whenever` to auto-close other popovers when one opens ## Test Plan - Open multiple asset cards' more menus - Verify only one popover remains open at a time 🤖 Generated with [Claude Code](https://claude.com/claude-code) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6808-fix-Prevent-multiple-asset-card-popovers-from-opening-simultaneously-2b26d73d365081e1b3f0d97b869cedc5) by [Unito](https://www.unito.io)
76 lines
1.5 KiB
Vue
76 lines
1.5 KiB
Vue
<template>
|
|
<div class="relative inline-flex items-center">
|
|
<IconButton :size="size" :type="type" @click="toggle">
|
|
<i v-if="!isVertical" class="icon-[lucide--ellipsis] text-sm" />
|
|
<i v-else class="icon-[lucide--more-vertical] text-sm" />
|
|
</IconButton>
|
|
|
|
<Popover
|
|
ref="popover"
|
|
append-to="body"
|
|
auto-z-index
|
|
dismissable
|
|
close-on-escape
|
|
unstyled
|
|
:base-z-index="1000"
|
|
:pt="{
|
|
root: {
|
|
class: cn('absolute z-50')
|
|
},
|
|
content: {
|
|
class: cn(
|
|
'mt-1 rounded-lg',
|
|
'bg-secondary-background text-base-foreground',
|
|
'shadow-lg'
|
|
)
|
|
}
|
|
}"
|
|
@show="$emit('menuOpened')"
|
|
@hide="$emit('menuClosed')"
|
|
>
|
|
<div class="flex min-w-40 flex-col gap-2 p-2">
|
|
<slot :close="hide" />
|
|
</div>
|
|
</Popover>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Popover from 'primevue/popover'
|
|
import { ref } from 'vue'
|
|
|
|
import type { BaseButtonProps } from '@/types/buttonTypes'
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
import IconButton from './IconButton.vue'
|
|
|
|
interface MoreButtonProps extends BaseButtonProps {
|
|
isVertical?: boolean
|
|
}
|
|
|
|
const popover = ref<InstanceType<typeof Popover>>()
|
|
|
|
const {
|
|
size = 'md',
|
|
type = 'secondary',
|
|
isVertical = false
|
|
} = defineProps<MoreButtonProps>()
|
|
|
|
defineEmits<{
|
|
menuOpened: []
|
|
menuClosed: []
|
|
}>()
|
|
|
|
const toggle = (event: Event) => {
|
|
popover.value?.toggle(event)
|
|
}
|
|
|
|
const hide = () => {
|
|
popover.value?.hide()
|
|
}
|
|
|
|
defineExpose({
|
|
hide
|
|
})
|
|
</script>
|