fix(vue-nodes): hide slot labels for reroute nodes with empty names (#8574)

## Summary
Fixes reroute node styling in Vue Nodes 2.0 by hiding slot labels when
slot names are intentionally empty.


| Before | After |
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
| <img width="1437" height="473" alt="image"
src="https://github.com/user-attachments/assets/603f52e0-7b75-4822-8c91-0a8374cc0cb6"
/> | <img width="1350" height="493" alt="image"
src="https://github.com/user-attachments/assets/38168955-4d35-4c61-a685-a54efb44cd5d"
/> |


## Problem
Reroute nodes displayed unwanted fallback labels ("Input 0", "Output 0")
instead of appearing as minimal connection-only nodes. This happened
because:
- Reroute nodes intentionally use empty string (`""`) for slot names
- Slot components used `||` operator for fallback labels, treating `''`
as falsy

## Solution
- Add `hasNoLabel` computed property to detect when all label sources
(`label`, `localized_name`, `name`) are empty/falsy
- Derive `dotOnly` from either the existing prop OR `hasNoLabel` being
true
- When `dotOnly` is true: label text is hidden, padding removed
(`lg-slot--dot-only` class), only connection dot visible

Combined with existing `NO_TITLE` support from #7589, reroutes now
display as minimal nodes with just connection dots—matching classic
reroute appearance.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

* **Bug Fixes**
* Enhanced input and output slot label handling to automatically conceal
labels when unavailable
* Improved fallback display names for slots with more reliable naming
logic

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8574-fix-vue-nodes-hide-slot-labels-for-reroute-nodes-with-empty-names-2fc6d73d365081c38031e260402283d3)
by [Unito](https://www.unito.io)
This commit is contained in:
Christian Byrne
2026-02-07 15:30:20 -08:00
committed by GitHub
parent ad6f856a31
commit 6535138e0b
2 changed files with 22 additions and 7 deletions

View File

@@ -7,7 +7,7 @@
cn(
'lg-slot lg-slot--input flex items-center group rounded-r-lg m-0',
'cursor-crosshair',
props.dotOnly ? 'lg-slot--dot-only' : 'pr-6',
dotOnly ? 'lg-slot--dot-only' : 'pr-6',
{
'lg-slot--connected': props.connected,
'lg-slot--compatible': props.compatible,
@@ -36,7 +36,7 @@
<!-- Slot Name -->
<div class="h-full flex items-center min-w-0">
<span
v-if="!dotOnly"
v-if="!props.dotOnly && !hasNoLabel"
:class="
cn(
'truncate text-node-component-slot-text',
@@ -47,8 +47,7 @@
{{
slotData.label ||
slotData.localized_name ||
slotData.name ||
`Input ${index}`
(slotData.name ?? `Input ${index}`)
}}
</span>
</div>
@@ -84,6 +83,14 @@ interface InputSlotProps {
const props = defineProps<InputSlotProps>()
const hasNoLabel = computed(
() =>
!props.slotData.label &&
!props.slotData.localized_name &&
props.slotData.name === ''
)
const dotOnly = computed(() => props.dotOnly || hasNoLabel.value)
const executionStore = useExecutionStore()
const hasSlotError = computed(() => {

View File

@@ -3,8 +3,11 @@
<div v-else v-tooltip.right="tooltipConfig" :class="slotWrapperClass">
<div class="relative h-full flex items-center min-w-0">
<!-- Slot Name -->
<span v-if="!dotOnly" class="truncate text-node-component-slot-text">
{{ slotData.localized_name || slotData.name || `Output ${index}` }}
<span
v-if="!props.dotOnly && !hasNoLabel"
class="truncate text-node-component-slot-text"
>
{{ slotData.localized_name || (slotData.name ?? `Output ${index}`) }}
</span>
</div>
<!-- Connection Dot -->
@@ -44,6 +47,11 @@ interface OutputSlotProps {
const props = defineProps<OutputSlotProps>()
const hasNoLabel = computed(
() => !props.slotData.localized_name && props.slotData.name === ''
)
const dotOnly = computed(() => props.dotOnly || hasNoLabel.value)
// Error boundary implementation
const renderError = ref<string | null>(null)
@@ -79,7 +87,7 @@ const slotWrapperClass = computed(() =>
cn(
'lg-slot lg-slot--output flex items-center justify-end group rounded-l-lg h-6',
'cursor-crosshair',
props.dotOnly ? 'lg-slot--dot-only justify-center' : 'pl-6',
dotOnly.value ? 'lg-slot--dot-only justify-center' : 'pl-6',
{
'lg-slot--connected': props.connected,
'lg-slot--compatible': props.compatible,