refactor: replace additional-components package occurrences

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

docs/components/DocsRepl.vue

@@ -12,6 +12,8 @@ const { vueFlowVersion } = useVueFlow()
 
 let css = `@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/dist/style.css';
 @import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/dist/theme-default.css';
+@import 'https://cdn.jsdelivr.net/npm/@vue-flow/controls@latest/dist/style.css';
+@import 'https://cdn.jsdelivr.net/npm/@vue-flow/minimap@latest/dist/style.css';
 
 html,
 body,
@@ -72,7 +74,9 @@ onMounted(async () => {
   // pre-set import map
   await store.setImportMap({
     imports: {
-      '@vue-flow/additional-components': `${location.origin}/vue-flow-additional-components.mjs`,
+      '@vue-flow/background': `${location.origin}/vue-flow-background.mjs`,
+      '@vue-flow/controls': `${location.origin}/vue-flow-controls.mjs`,
+      '@vue-flow/minimap': `${location.origin}/vue-flow-minimap.mjs`,
       '@vue-flow/core': `${location.origin}/vue-flow-core.mjs`,
       '@vue-flow/node-toolbar': `${location.origin}/vue-flow-node-toolbar.mjs`,
       ...additionalImports,

docs/components/examples/basic/App.vue

@@ -1,6 +1,8 @@
 <script setup>
-import { Background, Controls, 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 { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
 import { ref } from 'vue'
 import { initialElements } from './initial-elements.js'
 

docs/components/examples/custom-node/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { MiniMap } from '@vue-flow/additional-components'
+import { MiniMap } from '@vue-flow/minimap'
 import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { h, onMounted, ref } from 'vue'
 import ColorSelectorNode from './CustomNode.vue'

docs/components/examples/edges/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Background } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
 import { MarkerType, VueFlow } from '@vue-flow/core'
 import { h, ref } from 'vue'
 import CustomEdge from './CustomEdge.vue'

docs/components/examples/empty/App.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { Background, BackgroundVariant, MiniMap, Panel, PanelPosition } from '@vue-flow/additional-components'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Panel, PanelPosition, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, BackgroundVariant } from '@vue-flow/background'
+import { MiniMap } from '@vue-flow/minimap'
 
 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 

docs/components/examples/hidden/App.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { Background, Panel, PanelPosition } from '@vue-flow/additional-components'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import { Panel, PanelPosition, VueFlow, useVueFlow } from '@vue-flow/core'
 import { ref, watch } from 'vue'
 
 const isHidden = ref(false)

docs/components/examples/horizontal/App.vue

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

docs/components/examples/multi/Flow.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { Background, Panel, PanelPosition } from '@vue-flow/additional-components'
-import { VueFlow, isNode } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import { Panel, PanelPosition, VueFlow, isNode } from '@vue-flow/core'
 import { ref } from 'vue'
 
 const elements = ref([

docs/components/examples/nested/App.vue

@@ -1,6 +1,8 @@
 <script setup>
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
 import { onMounted } from 'vue'
 
 const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({

docs/components/examples/save-restore/Controls.vue

@@ -1,6 +1,5 @@
 <script setup>
-import { Panel, PanelPosition } from '@vue-flow/additional-components'
-import { useVueFlow } from '@vue-flow/core'
+import { Panel, PanelPosition, useVueFlow } from '@vue-flow/core'
 
 const flowKey = 'example-flow'
 

docs/components/examples/stress/App.vue

@@ -1,6 +1,7 @@
 <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 { Background } from '@vue-flow/background'
+import { MiniMap } from '@vue-flow/minimap'
 import { nextTick, ref } from 'vue'
 import { getElements } from './utils.js'
 

docs/components/examples/update-edge/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Background } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 

docs/components/home/flows/Additional.vue

@@ -2,7 +2,9 @@
 import { ref } from 'vue'
 import type { Elements } from '@vue-flow/core'
 import { Position, 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 emit = defineEmits(['pane'])
 

docs/components/home/flows/Basic.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { ClassFunc, GraphEdge, GraphNode, StyleFunc } from '@vue-flow/core'
 import { ConnectionLineType, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background, Controls } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+
 import Cross from '~icons/mdi/window-close'
 
 const emit = defineEmits(['pane'])

docs/components/home/flows/Intro.vue

@@ -3,7 +3,7 @@ import { Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import confetti from 'canvas-confetti'
 import colors from 'windicss/colors'
-import { Background } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
 import { cheer, fireworks } from './confetti'
 import Heart from '~icons/mdi/heart'
 

docs/components/home/flows/Nested.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
 import { breakpointsTailwind } from '@vueuse/core'
-import { Background, Controls } from '@vue-flow/additional-components'
 
 const emit = defineEmits(['pane'])
 

docs/components/home/flows/RGB.vue

@@ -1,8 +1,11 @@
 <script lang="ts" setup>
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind } from '@vueuse/core'
-import type { MiniMapNodeFunc } from '@vue-flow/additional-components'
-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 type { MiniMapNodeFunc } from '@vue-flow/minimap'
+
 import CustomEdge from '../edges/Custom.vue'
 import RGBNode from '../nodes/Input.vue'
 import RGBOutputNode from '../nodes/Output.vue'

docs/package.json

@@ -16,7 +16,10 @@
     "@animxyz/vue3": "^0.6.7",
     "@stackblitz/sdk": "^1.8.0",
     "@vercel/analytics": "^0.1.5",
+    "@vue-flow/background": "workspace:*",
+    "@vue-flow/controls": "workspace:*",
     "@vue-flow/core": "workspace:*",
+    "@vue-flow/minimap": "workspace:*",
     "@vue-flow/node-toolbar": "workspace:*",
     "@vue/repl": "1.1.2",
     "blobity": "^0.2.1",

docs/src/.vitepress/plugins/copy.ts

@@ -9,8 +9,16 @@ export function copyVueFlowPlugin(): Plugin {
       ;[
         { path: '../../../node_modules/@vue-flow/core/dist/', pkgName: 'vue-flow-core.mjs' },
         {
-          path: '../../../node_modules/@vue-flow/additional-components/dist/',
-          pkgName: 'vue-flow-additional-components.mjs',
+          path: '../../../node_modules/@vue-flow/background/dist/',
+          pkgName: 'vue-flow-background.mjs',
+        },
+        {
+          path: '../../../node_modules/@vue-flow/controls/dist/',
+          pkgName: 'vue-flow-controls.mjs',
+        },
+        {
+          path: '../../../node_modules/@vue-flow/minimap/dist/',
+          pkgName: 'vue-flow-minimap.mjs',
         },
         {
           path: '../../../node_modules/@vue-flow/node-toolbar/dist/',

docs/src/.vitepress/theme/index.ts

@@ -7,6 +7,8 @@ import 'virtual:windi.css'
 import '@animxyz/core'
 import '@vue-flow/core/dist/style.css'
 import '@vue-flow/core/dist/theme-default.css'
+import '@vue-flow/controls/dist/style.css'
+import '@vue-flow/minimap/dist/style.css'
 import './../../assets/index.css'
 
 const CustomTheme = {

docs/typedoc.json

@@ -6,7 +6,9 @@
   ],
   "entryPoints": [
     "../packages/core/src/index.ts",
-    "../packages/additional-components/src/index.ts",
+    "../packages/background/src/index.ts",
+    "../packages/controls/src/index.ts",
+    "../packages/minimap/src/index.ts",
     "../packages/node-toolbar/src/index.ts"
   ],
   "categorizeByGroup": true,

docs/typedoc.md.json

@@ -7,7 +7,9 @@
   ],
   "entryPoints": [
     "../packages/core/src/index.ts",
-    "../packages/additional-components/src/index.ts",
+    "../packages/background/src/index.ts",
+    "../packages/controls/src/index.ts",
+    "../packages/minimap/src/index.ts",
     "../packages/node-toolbar/src/index.ts"
   ],
   "allReflectionsHaveOwnDocument": true,

e2e/cypress/component/3-additional-components/background/App.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
 </script>
 
 <template>

e2e/cypress/component/3-additional-components/controls/App.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { VueFlow } from '@vue-flow/core'
-import { Controls } from '@vue-flow/additional-components'
+import { Controls } from '@vue-flow/controls'
 </script>
 
 <template>

e2e/cypress/component/3-additional-components/minimap/App.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { VueFlow } from '@vue-flow/core'
-import { MiniMap } from '@vue-flow/additional-components'
+import { MiniMap } from '@vue-flow/minimap'
 
 defineProps({
   nodes: {

e2e/package.json

@@ -7,8 +7,10 @@
     "open": "cypress open"
   },
   "dependencies": {
-    "@vue-flow/additional-components": "workspace:*",
-    "@vue-flow/core": "workspace:*"
+    "@vue-flow/background": "workspace:*",
+    "@vue-flow/controls": "workspace:*",
+    "@vue-flow/core": "workspace:*",
+    "@vue-flow/minimap": "workspace:*"
   },
   "devDependencies": {
     "cypress": "^10.9.0",

examples/nuxt3/components/BasicFlow.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import { initialElements } from './initial-elements.js'
@@ -67,10 +66,6 @@ const toggleClass = () => {
 
 <template>
   <VueFlow v-model="elements" class="basicflow" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
-    <Background pattern-color="#aaa" gap="8" />
-    <MiniMap />
-    <Controls />
-
     <div class="controls">
       <button style="background-color: #113285; color: white" @click="resetTransform">reset transform</button>
       <button style="background-color: #6f3381; color: white" @click="updatePos">update positions</button>

examples/nuxt3/package.json

@@ -9,8 +9,10 @@
     "dev": "nuxt dev"
   },
   "dependencies": {
-    "@vue-flow/additional-components": "workspace:*",
-    "@vue-flow/core": "workspace:*"
+    "@vue-flow/background": "workspace:*",
+    "@vue-flow/controls": "workspace:*",
+    "@vue-flow/core": "workspace:*",
+    "@vue-flow/minimap": "workspace:*"
   },
   "devDependencies": {
     "nuxt": "3.0.0-rc.11"

examples/quasar/package.json

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

examples/quasar/src/components/BasicFlow.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import { initialElements } from './initial-elements.js'
@@ -67,10 +66,6 @@ const toggleClass = () => {
 
 <template>
   <VueFlow v-model="elements" class="basicflow" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
-    <Background pattern-color="#aaa" gap="8" />
-    <MiniMap />
-    <Controls />
-
     <div class="controls">
       <button style="background-color: #113285; color: white" @click="resetTransform">reset transform</button>
       <button style="background-color: #6f3381; color: white" @click="updatePos">update positions</button>

examples/quasar/src/components/CustomizedFlow.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import { initialElements } from './customized-elements.js'
@@ -78,9 +77,6 @@ const toggleClass = () => {
         </q-card-section>
       </q-card>
     </template>
-    <Background pattern-color="#aaa" gap="8" />
-    <MiniMap />
-    <Controls />
 
     <div class="controls">
       <button style="background-color: #113285; color: white" @click="resetTransform">reset transform</button>

examples/vite/index.css

@@ -4,6 +4,9 @@
 /* import the default theme (optional) */
 @import 'node_modules/@vue-flow/core/dist/theme-default.css';
 
+@import '@vue-flow/controls/dist/style.css';
+@import '@vue-flow/minimap/dist/style.css';
+
 body {
   color: #111;
   padding: 5px;

examples/vite/package.json

@@ -8,8 +8,10 @@
   },
   "dependencies": {
     "vueflow": "workspace:*",
-    "@vue-flow/additional-components": "workspace:*",
+    "@vue-flow/background": "workspace:*",
+    "@vue-flow/controls": "workspace:*",
     "@vue-flow/core": "workspace:*",
+    "@vue-flow/minimap": "workspace:*",
     "@vue-flow/node-toolbar": "workspace:*"
   },
   "devDependencies": {

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 = [
   {

packages/vue-flow/package.json

@@ -35,8 +35,10 @@
     "vue": "^3.2.25"
   },
   "dependencies": {
-    "@vue-flow/additional-components": "workspace:*",
-    "@vue-flow/core": "workspace:*"
+    "@vue-flow/background": "workspace:*",
+    "@vue-flow/controls": "workspace:*",
+    "@vue-flow/core": "workspace:*",
+    "@vue-flow/minimap": "workspace:*"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.13",

packages/vue-flow/src/index.ts

@@ -1,4 +1,9 @@
 import '@vue-flow/core/dist/style.css'
 import '@vue-flow/core/dist/theme-default.css'
-export * from '@vue-flow/additional-components'
+import '@vue-flow/controls/dist/style.css'
+import '@vue-flow/minimap/dist/style.css'
+
+export * from '@vue-flow/background'
+export * from '@vue-flow/controls'
+export * from '@vue-flow/minimap'
 export * from '@vue-flow/core'

pnpm-lock.yaml

@@ -38,8 +38,10 @@ importers:
       '@types/canvas-confetti': ^1.4.3
       '@types/node': ^18.7.8
       '@vercel/analytics': ^0.1.5
-      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/background': workspace:*
+      '@vue-flow/controls': workspace:*
       '@vue-flow/core': workspace:*
+      '@vue-flow/minimap': workspace:*
       '@vue-flow/node-toolbar': workspace:*
       '@vue/repl': 1.1.2
       '@windicss/plugin-scrollbar': ^1.2.3
@@ -65,8 +67,10 @@ importers:
       '@animxyz/vue3': 0.6.7_vue@3.2.37
       '@stackblitz/sdk': 1.8.0
       '@vercel/analytics': 0.1.5_react@18.2.0
-      '@vue-flow/additional-components': link:../packages/additional-components
+      '@vue-flow/background': link:../packages/background
+      '@vue-flow/controls': link:../packages/controls
       '@vue-flow/core': link:../packages/core
+      '@vue-flow/minimap': link:../packages/minimap
       '@vue-flow/node-toolbar': link:../packages/node-toolbar
       '@vue/repl': 1.1.2_vue@3.2.37
       blobity: 0.2.1_react@18.2.0+vue@3.2.37
@@ -94,24 +98,32 @@ importers:
   e2e:
     specifiers:
       '@vitejs/plugin-vue': ^3.2.0
-      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/background': workspace:*
+      '@vue-flow/controls': workspace:*
       '@vue-flow/core': workspace:*
+      '@vue-flow/minimap': workspace:*
       cypress: ^10.9.0
     dependencies:
-      '@vue-flow/additional-components': link:../packages/additional-components
+      '@vue-flow/background': link:../packages/background
+      '@vue-flow/controls': link:../packages/controls
       '@vue-flow/core': link:../packages/core
+      '@vue-flow/minimap': link:../packages/minimap
     devDependencies:
       '@vitejs/plugin-vue': 3.2.0_vite@3.2.5+vue@3.2.40
       cypress: 10.9.0
 
   examples/nuxt3:
     specifiers:
-      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/background': workspace:*
+      '@vue-flow/controls': workspace:*
       '@vue-flow/core': workspace:*
+      '@vue-flow/minimap': workspace:*
       nuxt: 3.0.0-rc.11
     dependencies:
-      '@vue-flow/additional-components': link:../../packages/additional-components
+      '@vue-flow/background': link:../../packages/background
+      '@vue-flow/controls': link:../../packages/controls
       '@vue-flow/core': link:../../packages/core
+      '@vue-flow/minimap': link:../../packages/minimap
     devDependencies:
       nuxt: 3.0.0-rc.11_rollup@2.79.1+vite@3.1.6
 
@@ -121,16 +133,20 @@ importers:
       '@quasar/extras': ^1.15.4
       '@types/node': ^18.8.3
       '@vitejs/plugin-vue': ^2.3.4
-      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/background': workspace:*
+      '@vue-flow/controls': workspace:*
       '@vue-flow/core': workspace:*
+      '@vue-flow/minimap': workspace:*
       autoprefixer: ^10.4.12
       quasar: ^2.9.2
       vue: ^3.2.37
       vue-router: ^4.1.5
     dependencies:
       '@quasar/extras': 1.15.4
-      '@vue-flow/additional-components': link:../../packages/additional-components
+      '@vue-flow/background': link:../../packages/background
+      '@vue-flow/controls': link:../../packages/controls
       '@vue-flow/core': link:../../packages/core
+      '@vue-flow/minimap': link:../../packages/minimap
       quasar: 2.9.2
       vue: 3.2.37
       vue-router: 4.1.5_vue@3.2.37
@@ -144,8 +160,10 @@ importers:
     specifiers:
       '@types/dagre': ^0.7.48
       '@vitejs/plugin-vue': ^3.2.0
-      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/background': workspace:*
+      '@vue-flow/controls': workspace:*
       '@vue-flow/core': workspace:*
+      '@vue-flow/minimap': workspace:*
       '@vue-flow/node-toolbar': workspace:*
       dagre: ^0.8.5
       unplugin-auto-import: ^0.12.0
@@ -156,8 +174,10 @@ importers:
       vue-router: ^4.1.6
       vueflow: workspace:*
     dependencies:
-      '@vue-flow/additional-components': link:../../packages/additional-components
+      '@vue-flow/background': link:../../packages/background
+      '@vue-flow/controls': link:../../packages/controls
       '@vue-flow/core': link:../../packages/core
+      '@vue-flow/minimap': link:../../packages/minimap
       '@vue-flow/node-toolbar': link:../../packages/node-toolbar
       vueflow: link:../../packages/vue-flow
     devDependencies:
@@ -171,33 +191,23 @@ importers:
       vue: 3.2.37
       vue-router: 4.1.6_vue@3.2.37
 
-  packages/additional-components:
+  packages/background:
     specifiers:
-      '@types/d3-selection': ^3.0.3
-      '@types/d3-zoom': ^3.0.1
       '@vitejs/plugin-vue': ^3.2.0
       '@vue-flow/core': workspace:*
-      d3-selection: ^3.0.0
-      d3-zoom: ^3.0.0
       unplugin-auto-import: ^0.12.0
       vite: ^3.2.5
       vite-plugin-vue-type-imports: 0.2.0
-      vite-svg-loader: ^3.6.0
-      vue: ^3.2.25
+      vue: ^3.2.37
       vue-tsc: ^1.0.11
     dependencies:
-      d3-selection: 3.0.0
-      d3-zoom: 3.0.0
       vue: 3.2.40
     devDependencies:
-      '@types/d3-selection': 3.0.3
-      '@types/d3-zoom': 3.0.1
       '@vitejs/plugin-vue': 3.2.0_vite@3.2.5+vue@3.2.40
       '@vue-flow/core': link:../core
       unplugin-auto-import: 0.12.0
       vite: 3.2.5
       vite-plugin-vue-type-imports: 0.2.0_ek75d3noihdfv6qzog663yntom
-      vite-svg-loader: 3.6.0
       vue-tsc: 1.0.11_typescript@4.8.4
 
   packages/controls:
@@ -264,6 +274,33 @@ importers:
       vite-plugin-vue-type-imports: 0.2.0_ek75d3noihdfv6qzog663yntom
       vue-tsc: 1.0.11_typescript@4.8.4
 
+  packages/minimap:
+    specifiers:
+      '@types/d3-selection': ^3.0.3
+      '@types/d3-zoom': ^3.0.1
+      '@vitejs/plugin-vue': ^3.2.0
+      '@vue-flow/core': workspace:*
+      d3-selection: ^3.0.0
+      d3-zoom: ^3.0.0
+      unplugin-auto-import: ^0.12.0
+      vite: ^3.2.5
+      vite-plugin-vue-type-imports: 0.2.0
+      vue: ^3.2.37
+      vue-tsc: ^1.0.11
+    dependencies:
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+      vue: 3.2.40
+    devDependencies:
+      '@types/d3-selection': 3.0.3
+      '@types/d3-zoom': 3.0.1
+      '@vitejs/plugin-vue': 3.2.0_vite@3.2.5+vue@3.2.40
+      '@vue-flow/core': link:../core
+      unplugin-auto-import: 0.12.0
+      vite: 3.2.5
+      vite-plugin-vue-type-imports: 0.2.0_ek75d3noihdfv6qzog663yntom
+      vue-tsc: 1.0.11_typescript@4.8.4
+
   packages/node-toolbar:
     specifiers:
       '@vitejs/plugin-vue': ^3.2.0
@@ -314,8 +351,10 @@ importers:
 
   packages/vue-flow:
     specifiers:
-      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/background': workspace:*
+      '@vue-flow/controls': workspace:*
       '@vue-flow/core': workspace:*
+      '@vue-flow/minimap': workspace:*
       autoprefixer: ^10.4.13
       postcss: ^8.4.19
       postcss-cli: ^10.1.0
@@ -323,8 +362,10 @@ importers:
       vite: ^3.2.5
       vue: ^3.2.25
     dependencies:
-      '@vue-flow/additional-components': link:../additional-components
+      '@vue-flow/background': link:../background
+      '@vue-flow/controls': link:../controls
       '@vue-flow/core': link:../core
+      '@vue-flow/minimap': link:../minimap
       vue: 3.2.37
     devDependencies:
       autoprefixer: 10.4.13_postcss@8.4.19