refactor: replace additional-components package occurrences

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',