mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
471ccca1dd
## Summary Only remaining use is in `buttonTypes.ts` which @viva-jinyi is going to be working on to consolidate our different buttons soon. ## Changes - **What**: Replace light/dark colors with theme aware design system tokens. ## Review Focus Double check the chosen colors for the components ## Screenshots | Before | After | | ------ | ----- | | <img width="607" height="432" alt="image" src="https://github.com/user-attachments/assets/6c0ee6d6-819f-40b1-b775-f8b25dd18104" /> | <img width="646" height="488" alt="image" src="https://github.com/user-attachments/assets/9c8532de-8ac6-4b48-9021-3fd0b3e0bc63" /> | ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6705-Style-WIP-Design-System-use-across-more-components-2ab6d73d365081619115fc5f87a46341) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
72 lines
1.5 KiB
Vue
72 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()
|
|
}
|
|
</script>
|