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/home/flows/Additional.vue

@@ -98,7 +98,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/Intro.vue

@@ -190,8 +190,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

@@ -76,7 +76,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,7 @@
 <script lang="ts" setup>
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind } from '@vueuse/core'
-import { Background, BackgroundVariant } from '@vue-flow/background'
+import { Background } 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 +96,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

@@ -102,7 +102,7 @@ function toggleDarkMode() {
     :min-zoom="0.2"
     :max-zoom="4"
   >
-    <Background pattern-color="#aaa" :gap="16" />
+    <Background color="#aaa" :gap="16" />
 
     <MiniMap />
 

docs/examples/dnd/DropzoneBackground.vue

@@ -4,7 +4,7 @@ import { Background } from '@vue-flow/background'
 
 <template>
   <div class="dropzone-background">
-    <Background :size="2" :gap="20" pattern-color="#BDBDBD" />
+    <Background :size="2" :gap="20" color="#BDBDBD" />
 
     <div class="overlay">
       <slot />

examples/nuxt3/components/Flow.vue

@@ -99,7 +99,7 @@ function toggleDarkMode() {
     :min-zoom="0.2"
     :max-zoom="4"
   >
-    <Background pattern-color="#aaa" :gap="16" />
+    <Background :gap="16" />
 
     <MiniMap />
 

examples/vite/src/EasyConnect/EasyConnect.vue

@@ -54,7 +54,7 @@ onConnect(addEdges)
     :default-edge-options="defaultEdgeOptions"
     fit-view-on-init
   >
-    <Background pattern-color="#aaa" :gap="8" />
+    <Background :gap="8" />
 
     <template #node-custom="props">
       <CustomNode :id="props.id" />

examples/vite/src/Empty/EmptyExample.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 
-import { Background, BackgroundVariant } from '@vue-flow/background'
+import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
@@ -28,7 +28,7 @@ function addRandomNode() {
   <VueFlow>
     <MiniMap />
     <Controls />
-    <Background :variant="BackgroundVariant.Lines" />
+    <Background variant="lines" />
 
     <button type="button" :style="{ position: 'absolute', left: '10px', top: '10px', zIndex: 4 }" @click="addRandomNode">
       add node

examples/vite/src/FloatingEdges/FloatingEdges.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background, BackgroundVariant } from '@vue-flow/background'
+import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
@@ -18,7 +18,7 @@ onConnect((params) => addEdges({ ...params, type: 'floating', markerEnd: MarkerT
 <template>
   <div class="floatingedges">
     <VueFlow fit-view-on-init>
-      <Background :variant="BackgroundVariant.Lines" :gap="24" />
+      <Background variant="lines" :gap="24" />
 
       <MiniMap />
 

examples/vite/src/Overview/Overview.vue

@@ -174,6 +174,6 @@ const elements = ref<Elements>(initialElements)
   >
     <MiniMap :node-stroke-color="nodeStrokeColor" :node-color="nodeColor" :node-border-radius="2" />
     <Controls />
-    <Background color="#aaa" :gap="20" />
+    <Background variant="lines" />
   </VueFlow>
 </template>