mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 22:09:37 +00:00
e70ddea684
* feature: size adjust * feature: design adjust * fix: popover width, height added * fix: li style override * refactor: improve component readability and maintainability per PR feedback - Replace CardGridList component with createGridStyle utility function - Add runtime validation for grid column values - Remove !important usage in MultiSelect, use cn() function instead - Extract popover sizing logic into usePopoverSizing composable - Improve class string readability by splitting into logical groups - Use Tailwind size utilities (size-8, size-10) instead of separate width/height - Remove magic numbers in SearchBox, align with button sizes - Rename BaseWidgetLayout to BaseModalLayout for clarity - Enhance SearchBox click area to cover entire component - Refactor long class strings using cn() utility across components * fix: BaseWidgetLayout => BaseModalLayout * fix: CardGrid deleted * fix: unused exported types * Update test expectations [skip ci] * chore: code review * Update test expectations [skip ci] * chore: restore screenshot --------- Co-authored-by: github-actions <github-actions@github.com>
57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<template>
|
|
<div class="relative inline-flex items-center">
|
|
<IconButton @click="toggle">
|
|
<i-lucide:more-vertical class="text-sm" />
|
|
</IconButton>
|
|
|
|
<Popover
|
|
ref="popover"
|
|
:append-to="'body'"
|
|
:auto-z-index="true"
|
|
:base-z-index="1000"
|
|
:dismissable="true"
|
|
:close-on-escape="true"
|
|
unstyled
|
|
:pt="pt"
|
|
>
|
|
<div class="flex flex-col gap-2 p-2 min-w-40">
|
|
<slot :close="hide" />
|
|
</div>
|
|
</Popover>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Popover from 'primevue/popover'
|
|
import { computed, ref } from 'vue'
|
|
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
import IconButton from './IconButton.vue'
|
|
|
|
const popover = ref<InstanceType<typeof Popover>>()
|
|
|
|
const toggle = (event: Event) => {
|
|
popover.value?.toggle(event)
|
|
}
|
|
|
|
const hide = () => {
|
|
popover.value?.hide()
|
|
}
|
|
|
|
const pt = computed(() => ({
|
|
root: {
|
|
class: cn('absolute z-50')
|
|
},
|
|
content: {
|
|
class: cn(
|
|
'mt-2 rounded-lg',
|
|
'bg-white dark-theme:bg-zinc-800',
|
|
'text-neutral dark-theme:text-white',
|
|
'shadow-lg',
|
|
'border border-zinc-200 dark-theme:border-zinc-700'
|
|
)
|
|
}
|
|
}))
|
|
</script>
|