fix: update imports for VueUse v14 compatibility (#8550)

Update imports for VueUse v14 compatibility:
- `toValue` → import from `vue` (dropped from VueUse v14)
- `MaybeRef` type → import from `vue` (dropped from VueUse v14)

These APIs were deprecated in VueUse v12 and removed in v14 in favor of
Vue's native exports.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8550-fix-update-imports-for-VueUse-v14-compatibility-2fb6d73d365081b0bac1d01d4092c176)
by [Unito](https://www.unito.io)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Chores**
* Updated VueUse dependencies to newer versions for improved
compatibility
  * Minor package entry reorganization (no functional changes)

* **Refactor**
  * Consolidated imports to use native Vue utilities where applicable

* **Tests**
* Updated unit tests: improved outside-click simulation and cleanup;
migrated tests to use the real store setup for more realistic test
behavior
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Amp <amp@ampcode.com>

pnpm-workspace.yaml

@@ -41,8 +41,8 @@ catalog:
   '@vitest/coverage-v8': ^4.0.16
   '@vitest/ui': ^4.0.16
   '@vue/test-utils': ^2.4.6
-  '@vueuse/core': ^11.0.0
-  '@vueuse/integrations': ^13.9.0
+  '@vueuse/core': ^14.2.0
+  '@vueuse/integrations': ^14.2.0
   '@webgpu/types': ^0.1.66
   algoliasearch: ^5.21.0
   axios: ^1.8.2
@@ -62,8 +62,8 @@ catalog:
   happy-dom: ^20.0.11
   husky: ^9.1.7
   jiti: 2.6.1
-  jsonata: ^2.1.0
   jsdom: ^27.4.0
+  jsonata: ^2.1.0
   knip: ^5.75.1
   lint-staged: ^16.2.7
   markdown-table: ^3.0.4

src/components/ui/tags-input/TagsInput.test.ts

@@ -119,26 +119,28 @@ describe('TagsInput with child components', () => {
   })
 
   it('exits edit mode when clicking outside', async () => {
+    const outsideElement = document.createElement('div')
+    document.body.appendChild(outsideElement)
     const wrapper = mount<typeof TagsInput<string>>(TagsInput, {
       props: {
         modelValue: ['tag1']
       },
       slots: {
         default: () => h(TagsInputInput, { placeholder: 'Add tag...' })
-      },
-      attachTo: document.body
+      }
     })
 
     await wrapper.trigger('click')
     await nextTick()
     expect(wrapper.find('input').exists()).toBe(true)
 
-    document.body.click()
+    outsideElement.dispatchEvent(new PointerEvent('click', { bubbles: true }))
     await nextTick()
 
     expect(wrapper.find('input').exists()).toBe(false)
 
     wrapper.unmount()
+    outsideElement.remove()
   })
 
   it('shows placeholder when modelValue is empty', async () => {

src/composables/useLoad3d.ts

@@ -1,5 +1,6 @@
+import type { MaybeRef } from 'vue'
+
 import { toRef } from '@vueuse/core'
-import type { MaybeRef } from '@vueuse/core'
 import { nextTick, ref, toRaw, watch } from 'vue'
 
 import Load3d from '@/extensions/core/load3d/Load3d'

src/renderer/extensions/vueNodes/components/LGraphNode.test.ts

@@ -8,9 +8,10 @@ import { createI18n } from 'vue-i18n'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import LGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
 import { useVueElementTracking } from '@/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { setActivePinia } from 'pinia'
 
 const mockData = vi.hoisted(() => ({
-  mockNodeIds: new Set<string>(),
   mockExecuting: false
 }))
 
@@ -25,17 +26,6 @@ vi.mock('@/renderer/core/layout/transform/useTransformState', () => {
   }
 })
 
-vi.mock('@/renderer/core/canvas/canvasStore', () => {
-  const getCanvas = vi.fn()
-  const useCanvasStore = () => ({
-    getCanvas,
-    selectedNodeIds: computed(() => mockData.mockNodeIds)
-  })
-  return {
-    useCanvasStore
-  }
-})
-
 vi.mock(
   '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers',
   () => {
@@ -108,17 +98,16 @@ const i18n = createI18n({
     }
   }
 })
+
+const pinia = createTestingPinia({
+  createSpy: vi.fn
+})
+
 function mountLGraphNode(props: ComponentProps<typeof LGraphNode>) {
   return mount(LGraphNode, {
     props,
     global: {
-      plugins: [
-        createTestingPinia({
-          createSpy: vi.fn
-        }),
-        i18n
-      ],
-
+      plugins: [pinia, i18n],
       stubs: {
         NodeHeader: true,
         NodeSlots: true,
@@ -145,8 +134,11 @@ const mockNodeData: VueNodeData = {
 describe('LGraphNode', () => {
   beforeEach(() => {
     vi.resetAllMocks()
-    mockData.mockNodeIds = new Set()
     mockData.mockExecuting = false
+
+    setActivePinia(pinia)
+    const canvasStore = useCanvasStore()
+    canvasStore.selectedNodeIds.clear()
   })
 
   it('should call resize tracking composable with node ID', () => {
@@ -172,12 +164,7 @@ describe('LGraphNode', () => {
     const wrapper = mount(LGraphNode, {
       props: { nodeData: mockNodeData },
       global: {
-        plugins: [
-          createTestingPinia({
-            createSpy: vi.fn
-          }),
-          i18n
-        ],
+        plugins: [pinia, i18n],
         stubs: {
           NodeSlots: true,
           NodeWidgets: true,
@@ -190,9 +177,13 @@ describe('LGraphNode', () => {
     expect(wrapper.text()).toContain('Test Node')
   })
 
-  it('should apply selected styling when selected prop is true', () => {
-    mockData.mockNodeIds = new Set(['test-node-123'])
+  it('should apply selected styling when selected prop is true', async () => {
+    const canvasStore = useCanvasStore()
+    canvasStore.selectedNodeIds.clear()
+    canvasStore.selectedNodeIds.add('test-node-123')
+
     const wrapper = mountLGraphNode({ nodeData: mockNodeData })
+
     expect(wrapper.classes()).toContain('outline-2')
     expect(wrapper.classes()).toContain('outline-node-component-outline')
   })

src/workbench/extensions/manager/composables/nodePack/usePackUpdateStatus.ts

@@ -1,7 +1,7 @@
-import { toValue } from '@vueuse/core'
-import { compare, valid } from 'semver'
 import type { MaybeRefOrGetter } from 'vue'
-import { computed } from 'vue'
+import { computed, toValue } from 'vue'
+
+import { compare, valid } from 'semver'
 
 import type { components } from '@/types/comfyRegistryTypes'
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'