refactor(core): move <Background> component to core pkg

.changeset/late-toys-play.md

@@ -0,0 +1,6 @@
+---
+"@vue-flow/background": minor
+"@vue-flow/core": minor
+---
+
+Move `<Background>` component to core package

.changeset/spicy-cups-argue.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/background": minor
+---
+
+Re-export `<Background>` from core pkg

.changeset/witty-seals-cough.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/background": minor
+---
+
+Deprecate `@vue-flow/background` pkg

docs/components/DocsRepl.vue

@@ -67,7 +67,6 @@ await store.setFiles(
 // pre-set import map
 store.setImportMap({
   imports: {
-    '@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`,

docs/components/home/flows/Additional.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import type { Elements } from '@vue-flow/core'
-import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
@@ -98,7 +97,7 @@ onPaneReady((i) => emit('pane', i))
     <VueFlow>
       <Controls :show-interactive="false" />
       <MiniMap mask-color="rgba(16, 185, 129, 0.5)" class="transform scale-60 origin-bottom-right opacity-75" />
-      <Background variant="lines" pattern-color="#aaa" :gap="46" />
+      <Background variant="lines" color="#aaa" :gap="46" />
     </VueFlow>
   </div>
 

docs/components/home/flows/Basic.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { ClassFunc, GraphEdge, GraphNode, StyleFunc } from '@vue-flow/core'
-import { ConnectionLineType, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, ConnectionLineType, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 
 import Cross from '~icons/mdi/window-close'

docs/components/home/flows/Intro.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-import { Background } from '@vue-flow/background'
 import Heart from '~icons/mdi/heart'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
@@ -190,8 +189,8 @@ function scrollTo() {
 
 <template>
   <VueFlow ref="el" :style="{ opacity: !!currentBreakpoint ? 1 : 0 }">
-    <Background id="dots" pattern-color="#aaa" :size="0.75" :gap="25" />
-    <Background id="lines" variant="lines" :pattern-color="isDark ? '#fff' : '#000'" :size="1" :gap="100" />
+    <Background id="dots" color="#aaa" :size="0.75" :gap="25" />
+    <Background id="lines" variant="lines" :color="isDark ? '#fff' : '#000'" :size="1" :gap="100" />
 
     <template #node-box="props">
       <template v-if="props.id === 'intro'">

docs/components/home/flows/Nested.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 import { breakpointsTailwind } from '@vueuse/core'
 
@@ -76,7 +75,7 @@ onPaneReady((i) => emit('pane', i))
   >
     <VueFlow class="nested">
       <Controls class="md:(!left-auto !right-[10px])" />
-      <Background pattern-color="#aaa" class="!bg-gray-800" :gap="18" />
+      <Background color="#aaa" class="!bg-gray-800" :gap="18" />
     </VueFlow>
   </div>
 </template>

docs/components/home/flows/RGB.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind } from '@vueuse/core'
-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'
@@ -96,12 +95,7 @@ const nodeColor: MiniMapNodeFunc = (node) => {
       </template>
       <Controls class="hidden md:block" />
 
-      <Background
-        :variant="BackgroundVariant.Lines"
-        :pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`"
-        :gap="48"
-        :size="1"
-      />
+      <Background variant="lines" :color="`rgb(${color.red}, ${color.green}, ${color.blue})`" :gap="48" :size="1" />
 
       <MiniMap class="hidden sm:block transform scale-25 md:scale-50 lg:scale-75 origin-bottom-right" :node-color="nodeColor" />
     </VueFlow>

docs/examples/basic/App.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow, useVueFlow } from '@vue-flow/core'
 import { ControlButton, Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 import { initialEdges, initialNodes } from './initial-elements.js'
@@ -102,7 +101,7 @@ function toggleDarkMode() {
     :min-zoom="0.2"
     :max-zoom="4"
   >
-    <Background pattern-color="#aaa" :gap="16" />
+    <Background color="#aaa" :gap="16" />
 
     <MiniMap />
 

docs/examples/confirm-delete/App.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { h, ref } from 'vue'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow, useVueFlow } from '@vue-flow/core'
 import { useDialog } from './useDialog'
 import Dialog from './Dialog.vue'
 

docs/examples/dnd/DropzoneBackground.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { Background } from '@vue-flow/background'
+import { Background } from '@vue-flow/core'
 </script>
 
 <template>
   <div class="dropzone-background">
-    <Background :size="2" :gap="20" pattern-color="#BDBDBD" />
+    <Background :size="2" :gap="20" color="#BDBDBD" />
 
     <div class="overlay">
       <slot />

docs/examples/edge-markers/App.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { MarkerType, VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, MarkerType, VueFlow } from '@vue-flow/core'
 import CustomEdge from './CustomEdge.vue'
 
 const nodes = ref([

docs/examples/edges/App.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { h, ref } from 'vue'
-import { Background } from '@vue-flow/background'
-import { MarkerType, VueFlow } from '@vue-flow/core'
+import { Background, MarkerType, VueFlow } from '@vue-flow/core'
 import EdgeWithButton from './EdgeWithButton.vue'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdgeLabel from './CustomEdgeLabel.vue'

docs/examples/hidden/App.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref, watch } from 'vue'
-import { Background } from '@vue-flow/background'
-import { Panel, VueFlow } from '@vue-flow/core'
+import { Background, Panel, VueFlow } from '@vue-flow/core'
 
 const nodes = ref([
   {

docs/examples/layout-simple/App.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { nextTick, ref } from 'vue'
-import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import Icon from './Icon.vue'
 
 import { initialEdges, initialNodes } from './initial-elements.js'

docs/examples/layout/App.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { nextTick, ref } from 'vue'
-import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import Icon from './Icon.vue'
 import ProcessNode from './ProcessNode.vue'
 import AnimationEdge from './AnimationEdge.vue'

docs/examples/loopback/App.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { Background } from '@vue-flow/background'
-import { Panel, Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Panel, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import LoopbackEdge from './LoopbackEdge.vue'
 
 const { updateEdgeData, updateNode } = useVueFlow()

docs/examples/math/App.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow } from '@vue-flow/core'
 import { initialEdges, initialNodes } from './initial-elements.js'
 import ValueNode from './ValueNode.vue'
 import OperatorNode from './OperatorNode.vue'

docs/examples/multi/Flow.vue

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

docs/examples/nested/App.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 

docs/examples/save-restore/App.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow } from '@vue-flow/core'
 import SaveRestoreControls from './Controls.vue'
 
 const nodes = ref([{ id: '1', data: { label: 'Node 1' }, position: { x: 100, y: 100 } }])

docs/examples/stress/App.vue

@@ -1,6 +1,5 @@
 <script setup>
-import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import { MiniMap } from '@vue-flow/minimap'
 import { nextTick, ref } from 'vue'
 import { getElements } from './utils.js'

docs/examples/transition/App.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import TransitionEdge from './TransitionEdge.vue'
 
 const { onInit } = useVueFlow()

docs/examples/update-edge/App.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { Background } from '@vue-flow/background'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const { updateEdge, addEdges } = useVueFlow()
 

docs/package.json

@@ -15,7 +15,6 @@
     "@stackblitz/sdk": "^1.11.0",
     "@vercel/analytics": "^1.3.2",
     "@vercel/speed-insights": "^1.0.14",
-    "@vue-flow/background": "workspace:*",
     "@vue-flow/controls": "workspace:*",
     "@vue-flow/core": "workspace:*",
     "@vue-flow/minimap": "workspace:*",

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

@@ -13,7 +13,7 @@ function getPublicPath(fileName: string) {
 }
 
 function copyFiles(emit: Emit) {
-  ;['core', 'background', 'controls', 'minimap', 'node-resizer', 'node-toolbar'].forEach((name) => {
+  ;['core', 'controls', 'minimap', 'node-resizer', 'node-toolbar'].forEach((name) => {
     const fileName = `vue-flow-${name}.mjs`
 
     const filePath = resolve(__dirname, getPkgPath(name, fileName))

docs/src/guide/components/background.md

@@ -2,23 +2,13 @@
 
 Vue Flow comes with two background pattern variants: dots and lines. 
 
-## Installation
-
-```bash
-yarn add @vue-flow/background
-
-# or
-npm install @vue-flow/background
-```
-
 ## Usage
 
 To use the background simply pass the `Background` component as a child to the `VueFlow` component.
 
 ```vue
 <script setup>
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow } from '@vue-flow/core'
 </script>
 
 <template>
@@ -32,7 +22,7 @@ import { Background } from '@vue-flow/background'
 
 | Name         | Definition                            | Type                                                          | Optional | Default |
 |--------------|---------------------------------------|---------------------------------------------------------------|----------|---------|
-| variant      | Pattern variant                       | [BackgroundVariant](/typedocs/enumerations/BackgroundVariant) | true     | dots    |
+| variant      | Pattern variant                       | [BackgroundVariant](/typedocs/type-aliases/BackgroundVariant) | true     | dots    |
 | gap          | Pattern gap                           | number                                                        | true     | 10      |
 | size         | Pattern size                          | number                                                        | true     | 0.4     |
 | patternColor | Pattern color                         | string                                                        | true     | #81818a |

docs/src/guide/edge.md

@@ -5,8 +5,7 @@ title: Edges
 <script setup>
 import LogosJavascript from '~icons/logos/javascript';
 import LogosTypescript from '~icons/logos/typescript-icon';
-import { VueFlow, Panel } from '@vue-flow/core';
-import { Background } from '@vue-flow/background';
+import { Background, Panel, VueFlow } from '@vue-flow/core';
 import Check from '~icons/mdi/check';
 import Close from '~icons/mdi/close';
 import { ref } from 'vue';

docs/src/guide/node.md

@@ -5,8 +5,7 @@ title: Nodes
 <script setup>
 import LogosJavascript from '~icons/logos/javascript';
 import LogosTypescript from '~icons/logos/typescript-icon';
-import { VueFlow, Panel } from '@vue-flow/core';
-import { Background } from '@vue-flow/background';
+import { Background, Panel, VueFlow } from '@vue-flow/core';
 import Check from '~icons/mdi/check';
 import Close from '~icons/mdi/close';
 import { ref, h } from 'vue';

docs/src/guide/theming.md

@@ -5,8 +5,7 @@ title: Theming
 <script setup>
 import LogosJavascript from '~icons/logos/javascript';
 import { ref, h } from 'vue';
-import { Handle, Position, VueFlow } from '@vue-flow/core';
-import { Background } from '@vue-flow/background';
+import { Background, Handle, Position, VueFlow } from '@vue-flow/core';
 
 const CustomNode = (props) => h('div', [
   h(Handle, { connectable: false, type: 'target', position: Position.Top }),

examples/nuxt3/components/Flow.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow, useVueFlow } from '@vue-flow/core'
 import { ControlButton, Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 import { initialEdges, initialNodes } from './initial-elements.js'
@@ -99,7 +98,7 @@ function toggleDarkMode() {
     :min-zoom="0.2"
     :max-zoom="4"
   >
-    <Background pattern-color="#aaa" :gap="16" />
+    <Background :gap="16" />
 
     <MiniMap />
 

examples/nuxt3/package.json

@@ -7,7 +7,6 @@
     "lint": "eslint --ext .js,.ts,.vue ./"
   },
   "dependencies": {
-    "@vue-flow/background": "workspace:*",
     "@vue-flow/controls": "workspace:*",
     "@vue-flow/core": "workspace:*",
     "@vue-flow/minimap": "workspace:*"

examples/quasar/package.json

@@ -8,7 +8,6 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.16.12",
-    "@vue-flow/background": "workspace:*",
     "@vue-flow/controls": "workspace:*",
     "@vue-flow/core": "workspace:*",
     "@vue-flow/minimap": "workspace:*",

examples/vite/index-cdn.html

@@ -5,7 +5,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@vue-flow/core@1.20.2/dist/vue-flow-core.iife.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@vue-flow/background@1.0.4/dist/vue-flow-background.iife.min.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/@vue-flow/core@1.20.2/dist/style.css" rel="stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/@vue-flow/core@1.20.2/dist/theme-default.min.css" rel="stylesheet">
 </head>