refactor(additional-components): move additional components into separate pkg

examples/nuxt3/components/BasicFlow.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import { initialElements } from './initial-elements.js'
 
 /**

examples/nuxt3/package.json

@@ -9,6 +9,7 @@
     "dev": "nuxt dev"
   },
   "dependencies": {
+    "@vue-flow/additional-components": "workspace:*",
     "@vue-flow/core": "workspace:*"
   },
   "devDependencies": {

examples/quasar/package.json

@@ -10,6 +10,7 @@
     "lint": "eslint --ext .js,.ts,.vue ./"
   },
   "dependencies": {
+    "@vue-flow/additional-components": "workspace:*",
     "@vue-flow/core": "workspace:*",
     "@quasar/extras": "^1.15.4",
     "quasar": "^2.9.2",

examples/quasar/src/components/BasicFlow.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import { initialElements } from './initial-elements.js'
 
 /**

examples/vite/.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
   rules: {
     'no-use-before-define': 0,
     'no-console': 0,
+    'no-unused-vars': 1,
   },
   extends: ['../../.eslintrc.js'],
 }

examples/vite/package.json

@@ -7,6 +7,7 @@
     "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore ."
   },
   "dependencies": {
+    "@vue-flow/additional-components": "workspace:*",
     "@vue-flow/core": "workspace:*"
   },
   "devDependencies": {

examples/vite/src/Basic/Basic.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Elements } from '@vue-flow/core'
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 
 const elements = ref<Elements>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },

examples/vite/src/Basic/BasicOptionsAPI.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
-import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '@vue-flow/core'
+import { VueFlow, addEdge, isNode } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 
 export default defineComponent({
   name: 'BasicOptionsAPI',

examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Elements } from '@vue-flow/core'
-import { Background, BackgroundVariant, VueFlow } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
+import { Background, BackgroundVariant } from '@vue-flow/additional-components'
 import ConnectionLine from './ConnectionLine.vue'
 
 const elements = ref<Elements>([

examples/vite/src/CustomNode/CustomNode.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Elements, Node, SnapGrid } from '@vue-flow/core'
-import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@vue-flow/core'
+import { ConnectionMode, Position, VueFlow, isEdge, useVueFlow } from '@vue-flow/core'
+import { Controls, MiniMap } from '@vue-flow/additional-components'
 import ColorSelectorNode from './ColorSelectorNode.vue'
 
 const elements = ref<Elements>([])

examples/vite/src/EdgeTypes/EdgeTypesExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { VueFlowStore } from '@vue-flow/core'
-import { Controls, MiniMap, VueFlow } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
+import { Controls, MiniMap } from '@vue-flow/additional-components'
 import { getElements } from './utils'
 
 const onLoad = (flowInstance: VueFlowStore) => {

examples/vite/src/Edges/CustomEdge.vue

@@ -15,7 +15,7 @@ interface CustomEdgeProps<T = any> extends EdgeProps<T> {
 }
 
 const props = defineProps<CustomEdgeProps>()
-const { id: storeId, applyEdgeChanges, getEdges } = useVueFlow()
+const { applyEdgeChanges, getEdges } = useVueFlow()
 
 const onClick = (evt: Event, id: string) => {
   applyEdgeChanges([{ type: 'remove', id }])

examples/vite/src/Edges/EdgesExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Edge, Node } from '@vue-flow/core'
-import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'

examples/vite/src/Empty/EmptyExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Node } from '@vue-flow/core'
-import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core/src/index'
+import { VueFlow, useVueFlow } from '@vue-flow/core/src/index'
+import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
 
 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 

examples/vite/src/FloatingEdges/FloatingEdges.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Background, BackgroundVariant, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
 import FloatingEdge from './FloatingEdge.vue'
 import FloatingConnectionLine from './FloatingConnectionLine.vue'
 import { createElements } from './floating-edge-utils'

examples/vite/src/Hidden/HiddenExample.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Controls, MiniMap } from '@vue-flow/additional-components'
 
 const isHidden = ref(false)
 

examples/vite/src/Interaction/InteractionExample.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Controls, MiniMap } from '@vue-flow/additional-components'
 
 const {
   nodesDraggable,

examples/vite/src/Layouting/LayoutingExample.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
 import type { CoordinateExtent, Elements } from '@vue-flow/core'
-import { ConnectionMode, Controls, Position, VueFlow, isNode } from '@vue-flow/core'
+import { ConnectionMode, Position, VueFlow, isNode } from '@vue-flow/core'
+import { Controls } from '@vue-flow/additional-components'
 import initialElements from './initial-elements'
 
 const dagreGraph = new dagre.graphlib.Graph()

examples/vite/src/MultiFlows/Flow.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import type { Elements } from '@vue-flow/core'
-import { Background, VueFlow } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/additional-components'
+
 const initialElements: Elements = [
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
   { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },

examples/vite/src/Nesting/GroupNode.vue

@@ -3,14 +3,16 @@ import { Handle, Position, getNodesInside, useVueFlow } from '@vue-flow/core'
 import type { NodeProps } from '@vue-flow/core'
 
 const props = defineProps<NodeProps>()
+
 const { onNodeDragStop, getNodes, viewport } = useVueFlow()
+
 onNodeDragStop(({ node }) => {
   const nodes = getNodesInside(
     getNodes.value,
     {
       ...props.dimensions,
-      x: props.computedPosition.x,
-      y: props.computedPosition.y,
+      x: props.position.x,
+      y: props.position.y,
     },
     viewport.value,
   )

examples/vite/src/Nesting/Nesting.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 
-const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
+const { onConnect, addEdges, addNodes } = useVueFlow({
   fitViewOnInit: true,
   connectionMode: ConnectionMode.Loose,
   nodes: [

examples/vite/src/Overview/Overview.vue

@@ -1,16 +1,7 @@
 <script lang="ts" setup>
-import type {
-  Connection,
-  Edge,
-  Elements,
-  FlowEvents,
-  Node,
-  SnapGrid,
-  Styles,
-  ViewpaneTransform,
-  VueFlowStore,
-} from '@vue-flow/core'
-import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '@vue-flow/core'
+import type { Connection, Edge, Elements, FlowEvents, Node, SnapGrid, Styles, VueFlowStore } from '@vue-flow/core'
+import { MarkerType, VueFlow, addEdge } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 
 const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
 const onNodeDrag = (e: FlowEvents['nodeDrag']) => console.log('drag', e)

examples/vite/src/Provider/ProviderExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Elements, VueFlowStore } from '@vue-flow/core'
-import { ConnectionMode, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
+import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Controls } from '@vue-flow/additional-components'
 import Sidebar from './Sidebar.vue'
 
 const onLoad = (flowInstance: VueFlowStore) => console.log('flow loaded:', flowInstance)

examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Connection, Edge, Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
-import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@vue-flow/core'
+import { ConnectionMode, VueFlow, addEdge, updateEdge } from '@vue-flow/core'
+import { Controls } from '@vue-flow/additional-components'
 
 const initialElements: Elements = [
   {

examples/vite/src/Validation/ValidationExample.vue

@@ -4,7 +4,7 @@ import { VueFlow, useVueFlow } from '@vue-flow/core'
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
 
-const { nodes, edges, addEdges } = useVueFlow({
+const { addEdges } = useVueFlow({
   nodes: [
     { id: '0', type: 'custominput', position: { x: 0, y: 150 }, isValidTargetPos: (connection) => connection.target === 'B' },
     {