fix Vue node widgets should be in disabled state if their slots are connected with a link (#5834)

## Summary

Fixes #5692 by
making widget link connection status trigger on change so Vue widgets
with connected links could properly switch to the `disabled` state when
they are implicitly converted to inputs.

## Changes

- **What**: Added `node:slot-links:changed` event tracking and reactive
slot data synchronization for Vue widgets

```mermaid
graph TD
    A[Widget Link Change] --> B[NodeInputSlot.link setter]
    B --> C{Is Widget Input?}
    C -->|Yes| D[Trigger slot-links:changed]
    C -->|No| E[End]
    D --> F[Graph Event Handler]
    F --> G[syncNodeSlotData]
    G --> H[Update Vue Reactive Data]
    H --> I[Widget Re-render]
    
    style A fill:#f9f9f9,stroke:#333,color:#000
    style I fill:#f9f9f9,stroke:#333,color:#000
```

## Review Focus

Widget reactivity performance with frequent link changes and event
handler memory management in graph operations.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5834-fix-Vue-node-widgets-should-be-in-disabled-state-if-their-slots-are-connected-with-a-link-27c6d73d365081f6a6c3c1ddc3905c5e)
by [Unito](https://www.unito.io)

Author: christian-byrne

browser_tests/assets/vueNodes/linked-int-widget.json

@@ -0,0 +1,90 @@
+{
+  "id": "95ea19ba-456c-46e8-aa40-dc3ff135b746",
+  "revision": 0,
+  "last_node_id": 11,
+  "last_link_id": 10,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "KSampler",
+      "pos": [494.3333740234375, 142.3333282470703],
+      "size": [444, 399],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": null
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": null
+        },
+        {
+          "name": "seed",
+          "type": "INT",
+          "widget": {
+            "name": "seed"
+          },
+          "link": 10
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [67, "randomize", 20, 8, "euler", "simple", 1]
+    },
+    {
+      "id": 11,
+      "type": "PrimitiveInt",
+      "pos": [24.333343505859375, 149.6666717529297],
+      "size": [444, 125],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "INT",
+          "type": "INT",
+          "links": [10]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "PrimitiveInt"
+      },
+      "widgets_values": [67, "randomize"]
+    }
+  ],
+  "links": [[10, 11, 0, 10, 4, "INT"]],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    },
+    "frontendVersion": "1.28.6"
+  },
+  "version": 0.4
+}

browser_tests/fixtures/VueNodeHelpers.ts

@@ -119,4 +119,24 @@ export class VueNodeHelpers {
       await this.page.waitForSelector('[data-node-id]')
     }
   }
+
+  /**
+   * Get a specific widget by node title and widget name
+   */
+  getWidgetByName(nodeTitle: string, widgetName: string): Locator {
+    return this.getNodeByTitle(nodeTitle).locator(
+      `_vue=[widget.name="${widgetName}"]`
+    )
+  }
+
+  /**
+   * Get controls for input number widgets (increment/decrement buttons and input)
+   */
+  getInputNumberControls(widget: Locator) {
+    return {
+      input: widget.locator('input'),
+      incrementButton: widget.locator('button').first(),
+      decrementButton: widget.locator('button').last()
+    }
+  }
 }

browser_tests/tests/vueNodes/widgets/int/integerWidget.spec.ts

@@ -0,0 +1,42 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+
+test.describe('Vue Integer Widget', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+  })
+
+  test('should be disabled and not allow changing value when link connected to slot', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('vueNodes/linked-int-widget')
+    await comfyPage.vueNodes.waitForNodes()
+
+    const seedWidget = comfyPage.vueNodes.getWidgetByName('KSampler', 'seed')
+    const controls = comfyPage.vueNodes.getInputNumberControls(seedWidget)
+    const initialValue = Number(await controls.input.inputValue())
+
+    // Verify widget is disabled when linked
+    await controls.incrementButton.click({ force: true })
+    await expect(controls.input).toHaveValue(initialValue.toString())
+
+    await controls.decrementButton.click({ force: true })
+    await expect(controls.input).toHaveValue(initialValue.toString())
+
+    await expect(seedWidget).toBeVisible()
+
+    // Delete the node that is linked to the slot (freeing up the widget)
+    await comfyPage.vueNodes.getNodeByTitle('Int').click()
+    await comfyPage.vueNodes.deleteSelected()
+
+    // Test widget works when unlinked
+    await controls.incrementButton.click()
+    await expect(controls.input).toHaveValue((initialValue + 1).toString())
+
+    await controls.decrementButton.click()
+    await expect(controls.input).toHaveValue(initialValue.toString())
+  })
+})