[backport core/1.35] Fix doubled control application (#7682)

Backport of #7550 to `core/1.35`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7682-backport-core-1-35-Fix-doubled-control-application-2cf6d73d365081908428efca082dfd98)
by [Unito](https://www.unito.io)

Co-authored-by: AustinMroz <austin@comfy.org>

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

@@ -0,0 +1,60 @@
+<script setup lang="ts" generic="T extends WidgetValue">
+import Button from 'primevue/button'
+import { computed, defineAsyncComponent, ref, watch } from 'vue'
+import type { Component } from 'vue'
+
+import type {
+  SimplifiedControlWidget,
+  WidgetValue
+} from '@/types/simplifiedWidget'
+
+const ValueControlPopover = defineAsyncComponent(
+  () => import('./ValueControlPopover.vue')
+)
+
+const props = defineProps<{
+  widget: SimplifiedControlWidget<T>
+  component: Component
+}>()
+
+const modelValue = defineModel<T>()
+
+const popover = ref()
+
+const controlModel = ref(props.widget.controlWidget.value)
+
+const controlButtonIcon = computed(() => {
+  switch (controlModel.value) {
+    case 'increment':
+      return 'pi pi-plus'
+    case 'decrement':
+      return 'pi pi-minus'
+    case 'fixed':
+      return 'icon-[lucide--pencil-off]'
+    default:
+      return 'icon-[lucide--shuffle]'
+  }
+})
+
+watch(controlModel, props.widget.controlWidget.update)
+
+const togglePopover = (event: Event) => {
+  popover.value.toggle(event)
+}
+</script>
+
+<template>
+  <div class="relative grid grid-cols-subgrid">
+    <component :is="component" v-bind="$attrs" v-model="modelValue" :widget>
+      <Button
+        variant="link"
+        size="small"
+        class="h-4 w-7 self-center rounded-xl bg-blue-100/30 p-0"
+        @pointerdown.stop.prevent="togglePopover"
+      >
+        <i :class="`${controlButtonIcon} text-blue-100 text-xs size-3.5`" />
+      </Button>
+    </component>
+    <ValueControlPopover ref="popover" v-model="controlModel" />
+  </div>
+</template>