Skip to content

fix: vue nodes image preview widget, better multi image gallery support #7178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

fix: vue nodes image preview widget, better multi image gallery support #7178

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
69d3335
fix: vue nodes image preview widget, better multi image gallery support
simula-r Dec 5, 2025
e8f0d13
fix: tests by reverted class names
simula-r Dec 5, 2025
5bc76f8
[automated] Update test expectations
invalid-email-address Dec 5, 2025
d47aabc
style: light dark mode
simula-r Dec 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified ...oad/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 22 additions & 28 deletions src/renderer/extensions/vueNodes/components/ImagePreview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div
v-if="imageUrls.length > 0"
class="image-preview group relative flex size-full min-h-16 min-w-16 flex-col px-2 justify-center"
class="image-preview outline-none group relative flex size-full min-h-16 min-w-16 flex-col px-2 justify-center"
tabindex="0"
role="region"
:aria-label="$t('g.imagePreview')"
Expand All @@ -11,7 +11,7 @@
>
<!-- Image Wrapper -->
<div
class="h-full w-full overflow-hidden rounded-[5px] bg-node-component-surface"
class="h-full w-full overflow-hidden rounded-[5px] bg-node-component-surface relative"
>
<!-- Error State -->
<div
Expand All @@ -24,16 +24,13 @@
{{ getImageFilename(currentImageUrl) }}
</p>
</div>

<!-- Loading State -->
<Skeleton
v-if="isLoading && !imageError"
class="absolute inset-0 size-full"
border-radius="5px"
width="16rem"
height="16rem"
width="100%"
height="100%"
/>

<!-- Main Image -->
<img
v-if="!imageError"
Expand Down Expand Up @@ -83,29 +80,10 @@
<i class="icon-[lucide--x] h-4 w-4" />
</button>
</div>

<!-- Multiple Images Navigation -->
<div
v-if="hasMultipleImages"
class="absolute right-2 bottom-2 left-2 flex justify-center gap-1"
>
<button
v-for="(_, index) in imageUrls"
:key="index"
:class="getNavigationDotClass(index)"
:aria-label="
$t('g.viewImageOfTotal', {
index: index + 1,
total: imageUrls.length
})
"
@click="setCurrentIndex(index)"
/>
</div>
</div>

<!-- Image Dimensions -->
<div class="mt-2 text-center text-xs text-white">
<div class="pt-2 text-center text-xs text-white">
<span v-if="imageError" class="text-red-400">
{{ $t('g.errorLoadingImage') }}
</span>
Expand All @@ -116,6 +94,21 @@
{{ actualDimensions || $t('g.calculatingDimensions') }}
</span>
</div>
<!-- Multiple Images Navigation -->
<div v-if="hasMultipleImages" class="flex justify-center gap-1 pt-4">
<button
v-for="(_, index) in imageUrls"
:key="index"
:class="getNavigationDotClass(index)"
:aria-label="
$t('g.viewImageOfTotal', {
index: index + 1,
total: imageUrls.length
})
"
@click="setCurrentIndex(index)"
/>
</div>
Comment on lines +102 to +115
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Multi-image navigation block is solid; consider small ARIA/semantics tweaks

The new navigation below the image with translated aria-labels is a clear UX improvement. Two optional a11y/semantics refinements you might consider:

  • Add type="button" so these controls never act as submit buttons if this component is ever placed inside a <form>.
  • Mark the active dot for assistive tech, e.g. with aria-current="true" or aria-pressed="true" on the current index.

Example (non-blocking):

-      <button
+      <button
+        type="button"
         v-for="(_, index) in imageUrls"
         :key="index"
         :class="getNavigationDotClass(index)"
+        :aria-current="index === currentIndex ? 'true' : undefined"
🤖 Prompt for AI Agents 
In src/renderer/extensions/vueNodes/components/ImagePreview.vue around lines 98
to 111, the navigation buttons lack explicit button semantics and an
accessibility state for the active dot; update each generated control to include
type="button" to avoid unintended form submission and add a conditional
aria-current="true" (or aria-pressed) bound to the current index so assistive
tech can identify the active dot; ensure the aria-label translation remains and
the key/click handlers are unchanged.

</div>
</template>

Expand Down Expand Up @@ -230,6 +223,7 @@ const handleRemove = () => {
}

const setCurrentIndex = (index: number) => {
if (currentIndex.value === index) return
if (index >= 0 && index < props.imageUrls.length) {
currentIndex.value = index
actualDimensions.value = null
Expand All @@ -248,7 +242,7 @@ const handleMouseLeave = () => {

const getNavigationDotClass = (index: number) => {
return [
'w-2 h-2 rounded-full transition-all duration-200 border-0 cursor-pointer',
'w-2 h-2 rounded-full transition-all duration-200 border-0 cursor-pointer p-0',
index === currentIndex.value ? 'bg-white' : 'bg-white/50 hover:bg-white/80'
]
}
Expand Down