From 152801edacf1d48a665e446351f8a13c474c6d23 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 25 Apr 2022 20:38:09 +0200
Subject: [PATCH] feat: Add pattern slot to background

# What's changed?

* Add a slot named pattern to background
* Allows for icons or similar things to be passed as bg pattern
---
 .../Background/Background.vue                 | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/package/src/additional-components/Background/Background.vue b/package/src/additional-components/Background/Background.vue
index 745efe01..94448579 100644
--- a/package/src/additional-components/Background/Background.vue
+++ b/package/src/additional-components/Background/Background.vue
@@ -26,7 +26,7 @@ const background = $computed(() => {
   const scaledGap = gap && gap * viewport.zoom
   const xOffset = scaledGap && viewport.x % scaledGap
   const yOffset = scaledGap && viewport.y % scaledGap
-  const bgSize = size || 0.4 * viewport.zoom
+  const bgSize = size * viewport.zoom
 
   return {
     scaledGap,
@@ -66,15 +66,17 @@ export default {
       :height="background.scaledGap"
       patternUnits="userSpaceOnUse"
     >
-      <template v-if="variant === BackgroundVariant.Lines">
-        <path :stroke="patternColor" :stroke-width="size" :d="d" />
-      </template>
-      <template v-else-if="variant === BackgroundVariant.Dots">
-        <circle :cx="background.size" :cy="background.size" :r="background.size" :fill="patternColor" />
-      </template>
-      <svg v-if="bgColor" height="100" width="100">
-        <rect width="100%" height="100%" :fill="bgColor" />
-      </svg>
+      <slot name="pattern">
+        <template v-if="variant === BackgroundVariant.Lines">
+          <path :stroke="patternColor" :stroke-width="size" :d="d" />
+        </template>
+        <template v-else-if="variant === BackgroundVariant.Dots">
+          <circle :cx="background.size" :cy="background.size" :r="background.size" :fill="patternColor" />
+        </template>
+        <svg v-if="bgColor" height="100" width="100">
+          <rect width="100%" height="100%" :fill="bgColor" />
+        </svg>
+      </slot>
     </pattern>
     <rect :x="x" :y="y" width="100%" height="100%" :fill="`url(#${patternId})`" />
     <slot></slot>