chore: cleanup components

packages/background/src/Background.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { useVueFlow } from '@vue-flow/core'
-import { computed } from 'vue'
+import { computed, toRef } from 'vue'
 import { BackgroundVariant } from './types'
 import type { BackgroundProps } from './types'
-import { DotPattern, LinePattern } from './patterns'
+import { DefaultBgColors, DotPattern, LinePattern } from './patterns'
 
 const {
   id,
@@ -20,11 +20,6 @@ const {
   offset = 2,
 } = defineProps<BackgroundProps>()
 
-const defaultColors: Record<BackgroundVariant, string> = {
-  [BackgroundVariant.Dots]: '#81818a',
-  [BackgroundVariant.Lines]: '#eee',
-}
-
 const { id: vueFlowId, viewport } = useVueFlow()
 
 const background = computed(() => {
@@ -47,9 +42,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 = computed(() => `pattern-${vueFlowId}${id ? `-${id}` : ''}`)
+const patternId = toRef(() => `pattern-${vueFlowId}${id ? `-${id}` : ''}`)
 
-const patternColor = computed(() => initialPatternColor || defaultColors[variant || BackgroundVariant.Dots])
+const patternColor = toRef(() => initialPatternColor || DefaultBgColors[variant || BackgroundVariant.Dots])
 </script>
 
 <script lang="ts">

packages/background/src/patterns.ts

@@ -29,3 +29,8 @@ export const Patterns = {
   [BackgroundVariant.Lines]: LinePattern,
   [BackgroundVariant.Dots]: DotPattern,
 }
+
+export const DefaultBgColors: Record<BackgroundVariant, string> = {
+  [BackgroundVariant.Dots]: '#81818a',
+  [BackgroundVariant.Lines]: '#eee',
+}

packages/background/src/types.ts

@@ -1,12 +1,15 @@
+// todo: replace with a simple string type
 export enum BackgroundVariant {
   Lines = 'lines',
   Dots = 'dots',
 }
 
+export type BackgroundVariantType = Lowercase<keyof typeof BackgroundVariant>
+
 export interface BackgroundProps {
   id?: string
-  /** The background pattern variant, {@link BackgroundVariant} */
-  variant?: BackgroundVariant
+  /** The background pattern variant */
+  variant?: BackgroundVariant | BackgroundVariantType
   /** Background pattern gap */
   gap?: number | number[]
   /** Background pattern size */
@@ -16,9 +19,9 @@ export interface BackgroundProps {
   patternColor?: string
   /** Background color */
   bgColor?: string
-  /** Background height */
+  /** @deprecated Background height */
   height?: number
-  /** Background width */
+  /** @deprecated Background width */
   width?: number
   /** Background x-coordinate (offset x) */
   x?: number