refactor: replace additional-components package occurrences

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

examples/vite/src/Basic/Basic.vue

@@ -1,7 +1,10 @@
 <script lang="ts" setup>
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
-import type { Elements } from '@vue-flow/core'
 import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import type { Elements } from '@vue-flow/core'
+
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
 
 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,7 +1,10 @@
 <script lang="ts">
 import type { Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
 import { VueFlow, addEdge, isNode } from '@vue-flow/core'
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
 
 export default defineComponent({
   name: 'BasicOptionsAPI',

examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue

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

examples/vite/src/CustomNode/CustomNode.vue

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

examples/vite/src/DragNDrop/DnD.vue

@@ -6,7 +6,7 @@ import Sidebar from './Sidebar.vue'
 let id = 0
 const getId = () => `dndnode_${id++}`
 
-const { onConnect, nodes, edges, addEdges, addNodes, project } = useVueFlow({
+const { onConnect, addEdges, addNodes, project } = useVueFlow({
   nodes: [
     {
       id: '1',

examples/vite/src/EdgeTypes/EdgeTypesExample.vue

@@ -1,19 +1,15 @@
 <script lang="ts" setup>
-import type { VueFlowStore } from '@vue-flow/core'
 import { VueFlow } from '@vue-flow/core'
-import { Controls, MiniMap } from '@vue-flow/additional-components'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
+
 import { getElements } from './utils'
 
-const onLoad = (flowInstance: VueFlowStore) => {
-  flowInstance.fitView()
-  console.log(flowInstance.getElements.value)
-}
-
-const elements = getElements()
+const elements = ref(getElements())
 </script>
 
 <template>
-  <VueFlow v-model="elements" :min-zoom="0.2" @pane-ready="onLoad">
+  <VueFlow v-model="elements" :min-zoom="0.2" fit-view-on-init>
     <MiniMap />
     <Controls />
   </VueFlow>

examples/vite/src/Edges/EdgesExample.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import { VueFlow } from '@vue-flow/core'
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
+
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import { initialEdges, initialNodes } from './initial-elements'

examples/vite/src/Empty/EmptyExample.vue

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
 import type { Node } from '@vue-flow/core'
 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()
+import { Background, BackgroundVariant } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
+
+const { nodes, addNodes, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 
 onConnect((params) => addEdges([params]))
 onPaneReady((flowInstance) => console.log('flow loaded:', flowInstance))

examples/vite/src/FloatingEdges/FloatingEdges.vue

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

examples/vite/src/Hidden/HiddenExample.vue

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

examples/vite/src/Interaction/InteractionExample.vue

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

examples/vite/src/Layouting/LayoutingExample.vue

@@ -2,7 +2,10 @@
 import dagre from 'dagre'
 import type { CoordinateExtent, Elements } from '@vue-flow/core'
 import { ConnectionMode, Position, VueFlow, isNode } from '@vue-flow/core'
-import { Controls } from '@vue-flow/additional-components'
+import { Controls } from '@vue-flow/controls'
+
+import '@vue-flow/controls/dist/style.css'
+
 import initialElements from './initial-elements'
 
 const dagreGraph = new dagre.graphlib.Graph()

examples/vite/src/MultiFlows/Flow.vue

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

examples/vite/src/Nesting/Nesting.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
 
 const { onConnect, addEdges, addNodes } = useVueFlow({
   fitViewOnInit: true,

examples/vite/src/Overview/Overview.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 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'
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
 
 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,7 +1,10 @@
 <script lang="ts" setup>
 import type { Elements, VueFlowStore } from '@vue-flow/core'
 import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Controls } from '@vue-flow/additional-components'
+import { Controls } from '@vue-flow/controls'
+
+import '@vue-flow/controls/dist/style.css'
+
 import Sidebar from './Sidebar.vue'
 
 const onLoad = (flowInstance: VueFlowStore) => console.log('flow loaded:', flowInstance)

examples/vite/src/Stress/StressExample.vue

@@ -1,13 +1,13 @@
 <script setup>
-import { Background, MiniMap, Panel, PanelPosition } from '@vue-flow/additional-components'
-import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Panel, PanelPosition, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { nextTick, ref } from 'vue'
+import { Background } from '@vue-flow/background'
 import { getElements } from './utils'
 
 const { nodes, edges } = getElements(15, 15)
 const elements = ref([...nodes, ...edges])
 
-const { onPaneReady, dimensions, onNodeClick, getEdges, fitView } = useVueFlow()
+const { onPaneReady, dimensions, fitView } = useVueFlow()
 
 onPaneReady((i) => {
   i.fitView({

examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue

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