feat: dropdown widgets vue node ui (#5624)

- Load media dropdown widgets
- Load models dropdown widgets

I added a lot of feedback effects during interactions.
I tried my best to break the Dropdown into small components.
To make it more flexible, I provided many configurable props and
v-model.

<img width="1000" alt="CleanShot 2025-09-18 at 01 54 38"
src="https://github.com/user-attachments/assets/1a413078-1547-44b8-8b48-1ce8f8e764b5"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5624-feat-dropdown-widgets-vue-node-ui-2716d73d36508115a52bc1fb6d6376d0)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Christian Byrne <[email protected]>

Author: LittleSound

src/composables/graph/useGraphNodeManager.ts

@@ -9,6 +9,8 @@ import type { INodeOutputSlot } from '@/lib/litegraph/src/interfaces'
 import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 import type { WidgetValue } from '@/types/simplifiedWidget'
 
 import type { LGraph, LGraphNode } from '../../lib/litegraph/src/litegraph'
@@ -20,6 +22,7 @@ export interface SafeWidgetData {
   label?: string
   options?: Record<string, unknown>
   callback?: ((value: unknown) => void) | undefined
+  spec?: InputSpec
 }
 
 export interface VueNodeData {
@@ -53,6 +56,7 @@ export interface GraphNodeManager {
 export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
   // Get layout mutations composable
   const { createNode, deleteNode, setSource } = useLayoutMutations()
+  const nodeDefStore = useNodeDefStore()
   // Safe reactive data extracted from LiteGraph nodes
   const vueNodeData = reactive(new Map<string, VueNodeData>())
 
@@ -82,22 +86,22 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
         ) {
           value = widget.options.values[0]
         }
+        const spec = nodeDefStore.getInputSpecForWidget(node, widget.name)
 
         return {
           name: widget.name,
           type: widget.type,
           value: value,
           label: widget.label,
           options: widget.options ? { ...widget.options } : undefined,
-          callback: widget.callback
+          callback: widget.callback,
+          spec
         }
       } catch (error) {
         return {
           name: widget.name || 'unknown',
           type: widget.type || 'text',
-          value: undefined, // Already a valid WidgetValue
-          options: undefined,
-          callback: undefined
+          value: undefined
         }
       }
     })

src/locales/en/main.json

@@ -1872,7 +1872,15 @@
     "copyTooltip": "Copy message to clipboard"
   },
   "widgets": {
-    "selectModel": "Select model"
+    "selectModel": "Select model",
+    "uploadSelect": {
+      "placeholder": "Select...",
+      "placeholderImage": "Select image...",
+      "placeholderAudio": "Select audio...",
+      "placeholderVideo": "Select video...",
+      "placeholderModel": "Select model...",
+      "placeholderUnknown": "Select media..."
+    }
   },
   "nodeHelpPage": {
     "inputs": "Inputs",

src/renderer/extensions/vueNodes/components/NodeWidgets.vue

@@ -137,7 +137,8 @@ const processedWidgets = computed((): ProcessedWidget[] => {
       value: widget.value,
       label: widget.label,
       options: widget.options,
-      callback: widget.callback
+      callback: widget.callback,
+      spec: widget.spec
     }
 
     const updateHandler = (value: unknown) => {

src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.test.ts

@@ -4,17 +4,21 @@ import Select from 'primevue/select'
 import type { SelectProps } from 'primevue/select'
 import { describe, expect, it } from 'vitest'
 
+import type { ComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 import WidgetSelect from './WidgetSelect.vue'
+import WidgetSelectDefault from './WidgetSelectDefault.vue'
+import WidgetSelectDropdown from './WidgetSelectDropdown.vue'
 
 describe('WidgetSelect Value Binding', () => {
   const createMockWidget = (
     value: string = 'option1',
     options: Partial<
       SelectProps & { values?: string[]; return_index?: boolean }
     > = {},
-    callback?: (value: string | number | undefined) => void
+    callback?: (value: string | number | undefined) => void,
+    spec?: ComboInputSpec
   ): SimplifiedWidget<string | number | undefined> => ({
     name: 'test_select',
     type: 'combo',
@@ -23,7 +27,8 @@ describe('WidgetSelect Value Binding', () => {
       values: ['option1', 'option2', 'option3'],
       ...options
     },
-    callback
+    callback,
+    spec
   })
 
   const mountComponent = (
@@ -184,4 +189,44 @@ describe('WidgetSelect Value Binding', () => {
       expect(emitted![0]).toContain('100')
     })
   })
+
+  describe('Spec-aware rendering', () => {
+    it('uses dropdown variant when combo spec enables image uploads', () => {
+      const spec: ComboInputSpec = {
+        type: 'COMBO',
+        name: 'test_select',
+        image_upload: true
+      }
+      const widget = createMockWidget('option1', {}, undefined, spec)
+      const wrapper = mountComponent(widget, 'option1')
+
+      expect(wrapper.findComponent(WidgetSelectDropdown).exists()).toBe(true)
+      expect(wrapper.findComponent(WidgetSelectDefault).exists()).toBe(false)
+    })
+
+    it('uses dropdown variant for audio uploads', () => {
+      const spec: ComboInputSpec = {
+        type: 'COMBO',
+        name: 'test_select',
+        audio_upload: true
+      }
+      const widget = createMockWidget('clip.wav', {}, undefined, spec)
+      const wrapper = mountComponent(widget, 'clip.wav')
+      const dropdown = wrapper.findComponent(WidgetSelectDropdown)
+
+      expect(dropdown.exists()).toBe(true)
+      expect(dropdown.props('assetKind')).toBe('audio')
+      expect(dropdown.props('allowUpload')).toBe(false)
+    })
+
+    it('keeps default select when no spec or media hints are present', () => {
+      const widget = createMockWidget('plain', {
+        values: ['plain', 'text']
+      })
+      const wrapper = mountComponent(widget, 'plain')
+
+      expect(wrapper.findComponent(WidgetSelectDefault).exists()).toBe(true)
+      expect(wrapper.findComponent(WidgetSelectDropdown).exists()).toBe(false)
+    })
+  })
 })

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

@@ -1,33 +1,32 @@
 <template>
-  <WidgetLayoutField :widget>
-    <Select
-      v-model="localValue"
-      :options="selectOptions"
-      v-bind="combinedProps"
-      :disabled="readonly"
-      class="w-full text-xs bg-[#F9F8F4] dark-theme:bg-[#0E0E12] border-[#E1DED5] dark-theme:border-[#15161C] !rounded-lg"
-      size="small"
-      :pt="{
-        option: 'text-xs'
-      }"
-      @update:model-value="onChange"
-    />
-  </WidgetLayoutField>
+  <WidgetSelectDropdown
+    v-if="isDropdownUIWidget"
+    v-bind="props"
+    :asset-kind="assetKind"
+    :allow-upload="allowUpload"
+    :upload-folder="uploadFolder"
+    @update:model-value="handleUpdateModelValue"
+  />
+  <WidgetSelectDefault
+    v-else
+    v-bind="props"
+    @update:model-value="handleUpdateModelValue"
+  />
 </template>
 
 <script setup lang="ts">
-import Select from 'primevue/select'
 import { computed } from 'vue'
 
-import { useWidgetValue } from '@/composables/graph/useWidgetValue'
-import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
-import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import type { ResultItemType } from '@/schemas/apiSchema'
 import {
-  PANEL_EXCLUDED_PROPS,
-  filterWidgetProps
-} from '@/utils/widgetPropFilter'
+  type ComboInputSpec,
+  isComboInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import type { AssetKind } from '@/types/widgetTypes'
 
-import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+import WidgetSelectDefault from './WidgetSelectDefault.vue'
+import WidgetSelectDropdown from './WidgetSelectDropdown.vue'
 
 const props = defineProps<{
   widget: SimplifiedWidget<string | number | undefined>
@@ -39,30 +38,64 @@ const emit = defineEmits<{
   'update:modelValue': [value: string | number | undefined]
 }>()
 
-// Use the composable for consistent widget value handling
-const { localValue, onChange } = useWidgetValue({
-  widget: props.widget,
-  modelValue: props.modelValue,
-  defaultValue: props.widget.options?.values?.[0] || '',
-  emit
+function handleUpdateModelValue(value: string | number | undefined) {
+  emit('update:modelValue', value)
+}
+
+const comboSpec = computed<ComboInputSpec | undefined>(() => {
+  if (props.widget.spec && isComboInputSpec(props.widget.spec)) {
+    return props.widget.spec
+  }
+  return undefined
 })
 
-// Transform compatibility props for overlay positioning
-const transformCompatProps = useTransformCompatOverlayProps()
+const specDescriptor = computed<{
+  kind: AssetKind
+  allowUpload: boolean
+  folder: ResultItemType | undefined
+}>(() => {
+  const spec = comboSpec.value
+  if (!spec) {
+    return {
+      kind: 'unknown',
+      allowUpload: false,
+      folder: undefined
+    }
+  }
 
-const combinedProps = computed(() => ({
-  ...filterWidgetProps(props.widget.options, PANEL_EXCLUDED_PROPS),
-  ...transformCompatProps.value
-}))
+  const {
+    image_upload,
+    animated_image_upload,
+    video_upload,
+    image_folder,
+    audio_upload
+  } = spec
 
-// Extract select options from widget options
-const selectOptions = computed(() => {
-  const options = props.widget.options
+  let kind: AssetKind = 'unknown'
+  if (video_upload) {
+    kind = 'video'
+  } else if (image_upload || animated_image_upload) {
+    kind = 'image'
+  } else if (audio_upload) {
+    kind = 'audio'
+  }
+  // TODO: add support for models (checkpoints, VAE, LoRAs, etc.) -- get widgetType from spec
 
-  if (options?.values && Array.isArray(options.values)) {
-    return options.values
+  const allowUpload =
+    image_upload === true ||
+    animated_image_upload === true ||
+    audio_upload === true
+  return {
+    kind,
+    allowUpload,
+    folder: image_folder
   }
+})
 
-  return []
+const assetKind = computed(() => specDescriptor.value.kind)
+const isDropdownUIWidget = computed(() => assetKind.value !== 'unknown')
+const allowUpload = computed(() => specDescriptor.value.allowUpload)
+const uploadFolder = computed<ResultItemType>(() => {
+  return specDescriptor.value.folder ?? 'input'
 })
 </script>

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

@@ -0,0 +1,68 @@
+<template>
+  <WidgetLayoutField :widget>
+    <Select
+      v-model="localValue"
+      :options="selectOptions"
+      v-bind="combinedProps"
+      :disabled="readonly"
+      class="w-full text-xs bg-[#F9F8F4] dark-theme:bg-[#0E0E12] border-[#E1DED5] dark-theme:border-[#15161C] !rounded-lg"
+      size="small"
+      :pt="{
+        option: 'text-xs'
+      }"
+      @update:model-value="onChange"
+    />
+  </WidgetLayoutField>
+</template>
+
+<script setup lang="ts">
+import Select from 'primevue/select'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string | number | undefined>
+  modelValue: string | number | undefined
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number | undefined]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: props.widget.options?.values?.[0] || '',
+  emit
+})
+
+// Transform compatibility props for overlay positioning
+const transformCompatProps = useTransformCompatOverlayProps()
+
+const combinedProps = computed(() => ({
+  ...filterWidgetProps(props.widget.options, PANEL_EXCLUDED_PROPS),
+  ...transformCompatProps.value
+}))
+
+// Extract select options from widget options
+const selectOptions = computed(() => {
+  const options = props.widget.options
+
+  if (options?.values && Array.isArray(options.values)) {
+    return options.values
+  }
+
+  return []
+})
+</script>