mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-05 21:20:12 +00:00
3b5649232d
## Summary Add batch image navigation to the ImageCompare node so users can browse all images in a batch instead of only seeing the first one. ## Changes The backend already returns all batch images in a_images/b_images arrays, but the frontend only used index [0]. Now all images are mapped to URLs and a navigation bar with prev/next controls appears above the comparison slider when either side has more than one image. A/B sides navigate independently. Extracted a reusable BatchNavigation component for the index selector UI. fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/9098 ## Screenshots (if applicable) https://github.com/user-attachments/assets/a801cc96-9182-4b0d-a342-4e6107290f47 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9151-feat-add-batch-image-navigation-to-ImageCompare-node-3116d73d365081498be6d401773619a3) by [Unito](https://www.unito.io)
39 lines
917 B
Vue
39 lines
917 B
Vue
<template>
|
|
<div v-if="count > 1" class="flex items-center gap-1">
|
|
<span class="mr-1 text-muted-foreground">
|
|
<slot name="label" />
|
|
</span>
|
|
<Button
|
|
variant="muted-textonly"
|
|
size="icon-sm"
|
|
:disabled="index === 0"
|
|
data-testid="batch-prev"
|
|
@click="index--"
|
|
>
|
|
<i class="icon-[lucide--chevron-left]" />
|
|
</Button>
|
|
<span data-testid="batch-counter">
|
|
{{ $t('batch.index', { current: index + 1, total: count }) }}
|
|
</span>
|
|
<Button
|
|
variant="muted-textonly"
|
|
size="icon-sm"
|
|
:disabled="index === count - 1"
|
|
data-testid="batch-next"
|
|
@click="index++"
|
|
>
|
|
<i class="icon-[lucide--chevron-right]" />
|
|
</Button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
|
|
const index = defineModel<number>({ required: true })
|
|
|
|
defineProps<{
|
|
count: number
|
|
}>()
|
|
</script>
|