From b2c8ea3e50d63ad9ae105101f9471fa9acbb74f2 Mon Sep 17 00:00:00 2001
From: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
Date: Tue, 3 Feb 2026 11:21:14 +0100
Subject: [PATCH] refactor: use emit events pattern instead of mutating props
 in widget components (#8549)

---
 src/components/rightSidePanel/RightSidePanel.vue       |  8 ++++++++
 .../rightSidePanel/parameters/SectionWidgets.vue       | 10 ++++++++++
 .../rightSidePanel/parameters/TabSubgraphInputs.vue    |  7 +++++--
 .../rightSidePanel/parameters/WidgetItem.vue           |  9 +++++----
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/components/rightSidePanel/RightSidePanel.vue b/src/components/rightSidePanel/RightSidePanel.vue
index 1ba514f66..2548b899b 100644
--- a/src/components/rightSidePanel/RightSidePanel.vue
+++ b/src/components/rightSidePanel/RightSidePanel.vue
@@ -8,6 +8,7 @@ import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useGraphHierarchy } from '@/composables/graph/useGraphHierarchy'
+import type { ProxyWidgetsProperty } from '@/core/schemas/proxyWidget'
 import { st } from '@/i18n'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -190,6 +191,12 @@ function handleTitleEdit(newTitle: string) {
 function handleTitleCancel() {
   isEditing.value = false
 }
+
+function handleProxyWidgetsUpdate(value: ProxyWidgetsProperty) {
+  if (!selectedSingleNode.value) return
+  ;(selectedSingleNode.value as SubgraphNode).properties.proxyWidgets = value
+  canvasStore.canvas?.setDirty(true, true)
+}
 </script>
 
 <template>
@@ -283,6 +290,7 @@ function handleTitleCancel() {
         <TabSubgraphInputs
           v-if="activeTab === 'parameters' && isSingleSubgraphNode"
           :node="selectedSingleNode as SubgraphNode"
+          @update:proxy-widgets="handleProxyWidgetsUpdate"
         />
         <TabNormalInputs
           v-else-if="activeTab === 'parameters'"
diff --git a/src/components/rightSidePanel/parameters/SectionWidgets.vue b/src/components/rightSidePanel/parameters/SectionWidgets.vue
index 9ffbfa6dc..6d87cab6d 100644
--- a/src/components/rightSidePanel/parameters/SectionWidgets.vue
+++ b/src/components/rightSidePanel/parameters/SectionWidgets.vue
@@ -118,6 +118,15 @@ function handleLocateNode() {
   }
 }
 
+function handleWidgetValueUpdate(
+  widget: IBaseWidget,
+  newValue: string | number | boolean | object
+) {
+  widget.value = newValue
+  widget.callback?.(newValue)
+  canvasStore.canvas?.setDirty(true, true)
+}
+
 defineExpose({
   widgetsContainer,
   rootElement
@@ -179,6 +188,7 @@ defineExpose({
             :show-node-name="showNodeName"
             :parents="parents"
             :is-shown-on-parents="isWidgetShownOnParents(node, widget)"
+            @update:widget-value="handleWidgetValueUpdate(widget, $event)"
           />
         </TransitionGroup>
       </div>
diff --git a/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue b/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
index a6fe94635..0fa87c746 100644
--- a/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
+++ b/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
@@ -32,6 +32,10 @@ const { node } = defineProps<{
   node: SubgraphNode
 }>()
 
+const emit = defineEmits<{
+  'update:proxyWidgets': [value: ProxyWidgetsProperty]
+}>()
+
 const { t } = useI18n()
 const canvasStore = useCanvasStore()
 const rightSidePanelStore = useRightSidePanelStore()
@@ -51,8 +55,7 @@ const proxyWidgets = customRef<ProxyWidgetsProperty>((track, trigger) => ({
   set(value?: ProxyWidgetsProperty) {
     trigger()
     if (!value) return
-    // eslint-disable-next-line vue/no-mutating-props
-    node.properties.proxyWidgets = value
+    emit('update:proxyWidgets', value)
   }
 }))
 
diff --git a/src/components/rightSidePanel/parameters/WidgetItem.vue b/src/components/rightSidePanel/parameters/WidgetItem.vue
index 4cd05636a..0f203d38b 100644
--- a/src/components/rightSidePanel/parameters/WidgetItem.vue
+++ b/src/components/rightSidePanel/parameters/WidgetItem.vue
@@ -41,6 +41,10 @@ const {
   isShownOnParents?: boolean
 }>()
 
+const emit = defineEmits<{
+  'update:widgetValue': [value: string | number | boolean | object]
+}>()
+
 const { t } = useI18n()
 const canvasStore = useCanvasStore()
 const favoritedWidgetsStore = useFavoritedWidgetsStore()
@@ -83,10 +87,7 @@ const widgetValue = computed({
     return widget.value
   },
   set: (newValue: string | number | boolean | object) => {
-    // eslint-disable-next-line vue/no-mutating-props
-    widget.value = newValue
-    widget.callback?.(newValue)
-    canvasStore.canvas?.setDirty(true, true)
+    emit('update:widgetValue', newValue)
   }
 })