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 />

docs/src/guide/components/background.md

@@ -32,7 +32,7 @@ import { Background } from '@vue-flow/background'
 
 | Name         | Definition                            | Type                                                   | Optional | Default |
 |--------------|---------------------------------------|--------------------------------------------------------|----------|---------|
-| variant      | Pattern variant                       | [BackgroundVariant](/typedocs/enums/BackgroundVariant) | true     | dots    |
+| variant      | Pattern variant                       | [BackgroundVariant](/typedocs/types/BackgroundVariant) | true     | dots    |
 | gap          | Pattern gap                           | number                                                 | true     | 10      |
 | size         | Pattern size                          | number                                                 | true     | 0.4     |
 | patternColor | Pattern color                         | string                                                 | true     | #81818a |

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

@@ -57,7 +57,7 @@ onConnect(addEdges)
       :min-zoom="0.2"
       :max-zoom="4"
     >
-      <Background pattern-color="#aaa" :gap="8" />
+      <Background :gap="8" />
 
       <MiniMap />
 

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>

packages/background/README.md

@@ -1,5 +1,21 @@
 # Vue Flow: Background Component
 
+> [!WARNING]
+> This package has been deprecated. 
+> Please import the `<Background>` component from `@vue-flow/core`
+> ```vue
+> <script setup>
+> import { VueFlow, Background } from '@vue-flow/core'
+> // ...
+> </script>
+> 
+> <template>
+>   <VueFlow :nodes="nodes" :edges="edges">
+>     <Background />
+>   </VueFlow>
+> </template>
+> ```
+
 This is a background component for Vue Flow.
 It can be used to create a background in your canvas.
 

packages/background/package.json

@@ -49,22 +49,19 @@
     "dev": "pnpm types:watch & pnpm build:watch",
     "build": "vite build",
     "build:watch": "vite build --watch",
-    "types": "vue-tsc --declaration --emitDeclarationOnly && pnpm lint:dist",
-    "types:watch": "vue-tsc --declaration --emitDeclarationOnly --watch",
+    "types": "tsc && pnpm lint:dist",
+    "types:watch": "tsc --watch",
     "lint": "eslint --ext .js,.ts,.vue ./",
     "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix --ignore-pattern !**/*  ./dist",
     "test": "exit 0"
   },
   "peerDependencies": {
-    "@vue-flow/core": "^1.23.0",
-    "vue": "^3.3.0"
+    "@vue-flow/core": "^2.0.0"
   },
   "devDependencies": {
     "@tooling/eslint-config": "workspace:*",
     "@tooling/tsconfig": "workspace:*",
-    "@tooling/vite-config": "workspace:*",
-    "@vue-flow/core": "workspace:*",
-    "vue-tsc": "^1.8.16"
+    "@vue-flow/core": "workspace:*"
   },
   "publishConfig": {
     "access": "public",

packages/background/src/index.ts

@@ -1,2 +1,6 @@
-export { default as Background } from './Background.vue'
-export * from './types'
+/**
+ * Re-export of the Background component and types from the core pkg.
+ *
+ * @deprecated Please import these directly from `@vue-flow/core` instead and remove `@vue-flow/background` as a dependency.
+ */
+export { Background, type BackgroundVariant, type BackgroundProps } from '@vue-flow/core'

packages/background/tsconfig.json

@@ -3,10 +3,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "declarationDir": "./dist",
-    "types": [
-      "vite/client",
-      "vue/macros"
-    ]
+    "types": ["vite/client"]
   },
   "include": [
     "./src"

packages/background/src/Background.vue → packages/core/src/components/Background/Background.vue

@@ -1,39 +1,32 @@
 <script lang="ts" setup>
-import { useVueFlow } from '@vue-flow/core'
-import { computed, toRef } from 'vue'
-import { BackgroundVariant } from './types'
+import { computed } from 'vue'
+import { useVueFlow } from '../../composables/useVueFlow'
 import type { BackgroundProps } from './types'
 import { DefaultBgColors, DotPattern, LinePattern } from './patterns'
 
-const {
-  id,
-  variant = BackgroundVariant.Dots,
-  gap = 20,
-  size = 1,
-  lineWidth = 1,
-  height = 100,
-  width = 100,
-  x = 0,
-  y = 0,
-  bgColor,
-  patternColor: initialPatternColor,
-  color: _patternColor,
-  offset = 2,
-} = defineProps<BackgroundProps>()
+const props = withDefaults(defineProps<BackgroundProps>(), {
+  variant: 'dots',
+  gap: 20,
+  size: 1,
+  lineWidth: 1,
+  x: 0,
+  y: 0,
+  offset: 2,
+})
 
 const { id: vueFlowId, viewport } = useVueFlow()
 
 const background = computed(() => {
-  const [gapX, gapY] = Array.isArray(gap) ? gap : [gap, gap]
+  const [gapX, gapY] = Array.isArray(props.gap) ? props.gap : [props.gap, props.gap]
 
   const scaledGap: [number, number] = [gapX * viewport.value.zoom || 1, gapY * viewport.value.zoom || 1]
 
-  const scaledSize = size * viewport.value.zoom
+  const scaledSize = props.size * viewport.value.zoom
 
   const patternOffset =
-    variant === BackgroundVariant.Dots
-      ? [scaledSize / offset, scaledSize / offset]
-      : [scaledGap[0] / offset, scaledGap[1] / offset]
+    props.variant === 'dots'
+      ? [scaledSize / props.offset, scaledSize / props.offset]
+      : [scaledGap[0] / props.offset, scaledGap[1] / props.offset]
 
   return {
     scaledGap,
@@ -43,9 +36,9 @@ const background = computed(() => {
 })
 
 // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
-const patternId = toRef(() => `pattern-${vueFlowId}${id ? `-${id}` : ''}`)
+const patternId = computed(() => `pattern-${vueFlowId}${props.id ? `-${props.id}` : ''}`)
 
-const patternColor = toRef(() => _patternColor || initialPatternColor || DefaultBgColors[variant || BackgroundVariant.Dots])
+const patternColor = computed(() => props.color || DefaultBgColors[props.variant || 'dots'])
 </script>
 
 <script lang="ts">
@@ -56,13 +49,7 @@ export default {
 </script>
 
 <template>
-  <svg
-    class="vue-flow__background vue-flow__container"
-    :style="{
-      height: `${height > 100 ? 100 : height}%`,
-      width: `${width > 100 ? 100 : width}%`,
-    }"
-  >
+  <svg class="vue-flow__background vue-flow__container">
     <slot :id="patternId" name="pattern-container">
       <pattern
         :id="patternId"
@@ -74,17 +61,13 @@ export default {
         patternUnits="userSpaceOnUse"
       >
         <slot name="pattern">
-          <template v-if="variant === BackgroundVariant.Lines">
+          <template v-if="variant === 'lines'">
             <LinePattern :size="lineWidth" :color="patternColor" :dimensions="background.scaledGap" />
           </template>
 
-          <template v-else-if="variant === BackgroundVariant.Dots">
+          <template v-else-if="variant === 'dots'">
             <DotPattern :color="patternColor" :radius="background.size / offset" />
           </template>
-
-          <svg v-if="bgColor" height="100" width="100">
-            <rect width="100%" height="100%" :fill="bgColor" />
-          </svg>
         </slot>
       </pattern>
     </slot>

packages/core/src/components/Background/index.ts

@@ -0,0 +1,2 @@
+export { default as Background } from './Background.vue'
+export * from './types'