feat(WidgetSelectDropdown): support mapped display names (#6602)

## Summary

Add the ability for `WidgetSelectDropdown` to leverage `getOptionLabel`
for custom display labels.

## Review Focus

Will note inline.

## Screenshots


https://github.com/user-attachments/assets/0167cc12-e23d-4b6d-8f7f-74fd97a18397

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6602-feat-WidgetSelectDropdown-support-mapped-display-names-2a26d73d365081709c56c846e3455339)
by [Unito](https://www.unito.io)

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

@@ -67,6 +67,23 @@ const filterOptions = ref<FilterOption[]>([
 ])
 
 const selectedSet = ref<Set<SelectedKey>>(new Set())
+
+/**
+ * Transforms a value using getOptionLabel if available.
+ * Falls back to the original value if getOptionLabel is not provided or throws an error.
+ */
+function getDisplayLabel(value: string): string {
+  const getOptionLabel = props.widget.options?.getOptionLabel
+  if (!getOptionLabel) return value
+
+  try {
+    return getOptionLabel(value)
+  } catch (e) {
+    console.error('Failed to map value:', e)
+    return value
+  }
+}
+
 const inputItems = computed<DropdownItem[]>(() => {
   const values = props.widget.options?.values || []
 
@@ -78,6 +95,7 @@ const inputItems = computed<DropdownItem[]>(() => {
     id: `input-${index}`,
     mediaSrc: getMediaUrl(value, 'input'),
     name: value,
+    label: getDisplayLabel(value),
     metadata: ''
   }))
 })
@@ -108,6 +126,7 @@ const outputItems = computed<DropdownItem[]>(() => {
     id: `output-${index}`,
     mediaSrc: getMediaUrl(output.replace(' [output]', ''), 'output'),
     name: output,
+    label: getDisplayLabel(output),
     metadata: ''
   }))
 })

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

@@ -77,7 +77,7 @@ const theButtonStyle = computed(() =>
           {{ props.placeholder }}
         </span>
         <span v-else class="line-clamp-1 min-w-0 break-all">
-          {{ selectedItems.map((item) => (item as any)?.name).join(', ') }}
+          {{ selectedItems.map((item) => item.label ?? item.name).join(', ') }}
         </span>
       </span>
       <i class="icon-[lucide--chevron-down]" :class="chevronClass" />

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

@@ -86,6 +86,7 @@ const searchQuery = defineModel<string>('searchQuery')
           :selected="isSelected(item, index)"
           :media-src="item.mediaSrc"
           :name="item.name"
+          :label="item.label"
           :metadata="item.metadata"
           :layout="layoutMode"
           @click="emit('item-click', item, index)"

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

@@ -12,6 +12,7 @@ interface Props {
   selected: boolean
   mediaSrc: string
   name: string
+  label?: string
   metadata?: string
   layout?: LayoutMode
 }
@@ -139,7 +140,7 @@ function handleVideoLoad(event: Event) {
           )
         "
       >
-        {{ name }}
+        {{ label ?? name }}
       </span>
       <!-- Meta Data -->
       <span class="block text-xs text-slate-400">{{

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/types.ts

@@ -9,6 +9,7 @@ export interface DropdownItem {
   id: SelectedKey
   mediaSrc: string // URL for image, video, or other media
   name: string
+  label?: string
   metadata: string
 }
 export interface SortOption {