Add control button to vue combo widget

src/extensions/core/widgetInputs.ts

@@ -257,6 +257,7 @@ export class PrimitiveNode extends LGraphNode {
         undefined,
         inputData
       )
+      if (this.widgets?.[1]) widget.linkedWidgets = [this.widgets[1]]
       let filter = this.widgets_values?.[2]
       if (filter && this.widgets && this.widgets.length === 3) {
         this.widgets[2].value = filter

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

@@ -130,7 +130,9 @@ const handleEditSettings = () => {
           <ToggleSwitch
             :model-value="isActive(option.mode)"
             class="flex-shrink-0"
-            @update:model-value="handleToggle(option.mode)"
+            @update:model-value="
+              (v) => (v ? handleToggle(option.mode) : handleToggle('fixed'))
+            "
           />
         </div>
       </div>

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

@@ -9,6 +9,11 @@
     :is-asset-mode="isAssetMode"
     :default-layout-mode="defaultLayoutMode"
   />
+  <WidgetWithControl
+    v-else-if="widget.controlWidget"
+    :comp="WidgetSelectDefault"
+    :widget="widget as SimplifiedControlWidget<string>"
+  />
   <WidgetSelectDefault v-else v-model="modelValue" :widget />
 </template>
 
@@ -20,11 +25,15 @@ import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import WidgetSelectDefault from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue'
 import WidgetSelectDropdown from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue'
+import WidgetWithControl from '@/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.vue'
 import type { LayoutMode } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
 import type { ResultItemType } from '@/schemas/apiSchema'
 import { isComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import type {
+  SimplifiedControlWidget,
+  SimplifiedWidget
+} from '@/types/simplifiedWidget'
 import type { AssetKind } from '@/types/widgetTypes'
 
 const props = defineProps<{

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

@@ -1,5 +1,6 @@
 <template>
   <WidgetLayoutField :widget>
+    <div class="relative">
     <Select
       v-model="modelValue"
       :invalid
@@ -13,17 +14,21 @@
       :pt="{
         option: 'text-xs',
         dropdown: 'w-8',
-        label: 'truncate min-w-[4ch]',
+        label: cn('truncate min-w-[4ch]', slots.default && 'mr-5'),
         overlay: 'w-fit min-w-full'
       }"
       data-capture-wheel="true"
     />
+      <div class="absolute top-5 right-8 h-4 w-7 -translate-y-4/5">
+        <slot />
+      </div>
+    </div>
   </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
 import Select from 'primevue/select'
-import { computed } from 'vue'
+import { computed, useSlots } from 'vue'
 
 import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
@@ -36,6 +41,8 @@ import {
 import { WidgetInputBaseClass } from './layout'
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
 
+const slots = useSlots()
+
 interface Props {
   widget: SimplifiedWidget<string | undefined>
 }

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

@@ -1,11 +1,12 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends WidgetValue">
 import Button from 'primevue/button'
 import { computed, defineAsyncComponent, ref } from 'vue'
 import type { Ref } from 'vue'
 
 import type {
   ControlOptions,
-  SimplifiedControlWidget
+  SimplifiedControlWidget,
+  WidgetValue
 } from '@/types/simplifiedWidget'
 
 const NumberControlPopover = defineAsyncComponent(
@@ -28,7 +29,7 @@ function useControlButtonIcon(controlMode: Ref<ControlOptions>) {
 }
 
 const props = defineProps<{
-  widget: SimplifiedControlWidget<number>
+  widget: SimplifiedControlWidget<T>
   comp: unknown
 }>()
 
@@ -47,9 +48,9 @@ const togglePopover = (event: Event) => {
       variant="link"
       size="small"
       class="h-4 w-7 self-center rounded-xl bg-blue-100/30 p-0"
-      @click="togglePopover"
+      @pointerdown.stop.prevent="togglePopover"
     >
-      <i :class="`${controlButtonIcon} text-blue-100 text-xs`" />
+      <i :class="`${controlButtonIcon} text-blue-100 text-xs size-3.5`" />
     </Button>
   </component>
   <NumberControlPopover ref="popover" :control-widget="widget.controlWidget" />