mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-23 00:04:06 +00:00
306fb94cf5
Planning to keep updates smaller and more contained in the interest of collaboration and velocity - The breadcrumb hamburger menu that provides workflow options is now displayed in linear mode - As part of this change, the reka-ui popover component now accepts primvevue format MenuItems - I prefer the format I had, but this makes transitioning stuff easier. - The simplified linear history is moved to always be horizontal and shown beneath previews. - The label has been removed from the "Give Feedback" button on desktop so it does not overlap - The full side toolbar is displayed in linear mode - This is temporary, but it gets the dead code pruned out now. - Lays some groundwork for selecting an asset from the assets panel to also select the item in the main linear panel - The api `promptQueued` event can now optionally include a promptIds, which list the ids for all jobs that were queued together as part of that batch - Update the max for the `number of generations` field to respect the recently updated cloud limits | Before | After | | ------ | ----- | | <img width="360" alt="before" src="https://github.com/user-attachments/assets/e632679c-d727-4882-841b-09e99a2f81a4" /> | <img width="360" alt="after" src="https://github.com/user-attachments/assets/a9bcd809-c314-49bd-a479-2448d1a88456"/>| ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8853-Linear-mode-arrangement-tweaks-3066d73d365081589355ef753513900b) by [Unito](https://www.unito.io)
79 lines
2.4 KiB
Vue
79 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import type { MenuItem } from 'primevue/menuitem'
|
|
import {
|
|
PopoverArrow,
|
|
PopoverContent,
|
|
PopoverPortal,
|
|
PopoverRoot,
|
|
PopoverTrigger
|
|
} from 'reka-ui'
|
|
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
defineOptions({
|
|
inheritAttrs: false
|
|
})
|
|
|
|
defineProps<{
|
|
entries?: MenuItem[]
|
|
icon?: string
|
|
to?: string | HTMLElement
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<PopoverRoot v-slot="{ close }">
|
|
<PopoverTrigger as-child>
|
|
<slot name="button">
|
|
<Button size="icon">
|
|
<i :class="icon ?? 'icon-[lucide--ellipsis]'" />
|
|
</Button>
|
|
</slot>
|
|
</PopoverTrigger>
|
|
<PopoverPortal :to>
|
|
<PopoverContent
|
|
side="bottom"
|
|
:side-offset="5"
|
|
:collision-padding="10"
|
|
v-bind="$attrs"
|
|
class="z-1700 rounded-lg p-2 bg-base-background shadow-sm border border-border-subtle will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
|
|
>
|
|
<slot>
|
|
<div class="flex flex-col p-1">
|
|
<template v-for="item in entries ?? []" :key="item.label">
|
|
<div
|
|
v-if="item.separator"
|
|
class="border-b w-full border-border-subtle"
|
|
/>
|
|
<div
|
|
v-else
|
|
:class="
|
|
cn(
|
|
'flex flex-row gap-4 p-2 rounded-sm my-1',
|
|
item.disabled
|
|
? 'opacity-50 pointer-events-none'
|
|
: item.command &&
|
|
'cursor-pointer hover:bg-secondary-background-hover'
|
|
)
|
|
"
|
|
@click="
|
|
(e) => {
|
|
if (!item.command || item.disabled) return
|
|
item.command({ originalEvent: e, item })
|
|
close()
|
|
}
|
|
"
|
|
>
|
|
<i v-if="item.icon" :class="item.icon" />
|
|
{{ item.label }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</slot>
|
|
<PopoverArrow class="fill-base-background stroke-border-subtle" />
|
|
</PopoverContent>
|
|
</PopoverPortal>
|
|
</PopoverRoot>
|
|
</template>
|