fix: Use the filename instead o the index to allow for new generated …

…outputs.

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue

@@ -136,8 +136,8 @@ const outputItems = computed<DropdownItem[]>(() => {
     })
   })
 
-  return Array.from(outputs).map((output, index) => ({
-    id: `output-${index}`,
+  return Array.from(outputs).map((output) => ({
+    id: `output-${output}`,
     mediaSrc: getMediaUrl(output.replace(' [output]', ''), 'output'),
     name: output,
     label: getDisplayLabel(output),
@@ -215,16 +215,14 @@ const layoutMode = ref<LayoutMode>(props.defaultLayoutMode ?? 'grid')
 watch(
   modelValue,
   (currentValue) => {
-    if (currentValue !== undefined) {
-      const item = dropdownItems.value.find(
-        (item) => item.name === currentValue
-      )
-      if (item) {
-        selectedSet.value.clear()
-        selectedSet.value.add(item.id)
-      }
-    } else {
+    if (currentValue === undefined) {
+      selectedSet.value.clear()
+      return
+    }
+    const item = dropdownItems.value.find((item) => item.name === currentValue)
+    if (item) {
       selectedSet.value.clear()
+      selectedSet.value.add(item.id)
     }
   },
   { immediate: true }

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue

@@ -32,24 +32,13 @@ const selectedItems = computed(() => {
   return props.items.filter((item) => props.selected.has(item.id))
 })
 
-const chevronClass = computed(() =>
-  cn(
-    'mr-2 size-4 transition-transform duration-200 flex-shrink-0 text-component-node-foreground-secondary',
-    {
-      'rotate-180': props.isOpen
-    }
-  )
-)
-
 const theButtonStyle = computed(() =>
   cn(
     'border-0 bg-component-node-widget-background outline-none text-text-secondary',
-    {
-      'hover:bg-component-node-widget-background-hovered cursor-pointer':
-        !props.disabled,
-      'cursor-not-allowed': props.disabled,
-      'text-text-primary': selectedItems.value.length > 0
-    }
+    props.disabled
+      ? 'cursor-not-allowed'
+      : 'hover:bg-component-node-widget-background-hovered cursor-pointer',
+    selectedItems.value.length > 0 && 'text-text-primary'
   )
 )
 </script>
@@ -78,13 +67,21 @@ const theButtonStyle = computed(() =>
     >
       <span class="min-w-0 flex-1 px-1 py-2 text-left truncate">
         <span v-if="!selectedItems.length">
-          {{ props.placeholder }}
+          {{ placeholder }}
         </span>
         <span v-else>
           {{ selectedItems.map((item) => item.label ?? item.name).join(', ') }}
         </span>
       </span>
-      <i class="icon-[lucide--chevron-down]" :class="chevronClass" />
+      <i
+        class="icon-[lucide--chevron-down]"
+        :class="
+          cn(
+            'mr-2 size-4 transition-transform duration-200 flex-shrink-0 text-component-node-foreground-secondary',
+            isOpen && 'rotate-180'
+          )
+        "
+      />
     </button>
     <!-- Open File -->
     <label