fix: typings

src/additional-components/Background/Background.vue

@@ -40,15 +40,15 @@ 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 = `pattern-${Math.floor(Math.random() * 100000)}`
 const bgColor = computed(() => (props.color ? props.color : defaultColors[props.variant || BackgroundVariant.Dots]))
+const d = computed(
+  () =>
+    `M${background.value.scaledGap / 2} 0 V${background.value.scaledGap} M0 ${background.value.scaledGap / 2} H${
+      background.value.scaledGap
+    }`,
+)
 </script>
 <template>
-  <svg
-    class="vue-flow__background"
-    :style="{
-      width: '100%',
-      height: '100%',
-    }"
-  >
+  <svg class="vue-flow__background" style="width: 100%; height: 100%">
     <pattern
       :id="patternId"
       :x="background.xOffset"
@@ -58,11 +58,7 @@ const bgColor = computed(() => (props.color ? props.color : defaultColors[props.
       patternUnits="userSpaceOnUse"
     >
       <template v-if="props.variant === BackgroundVariant.Lines">
-        <path
-          :stroke="bgColor"
-          :stroke-width="props.size"
-          :d="`M${background.scaledGap / 2} 0 V${background.scaledGap} M0 ${background.scaledGap / 2} H${background.scaledGap}`"
-        />
+        <path :stroke="bgColor" :stroke-width="props.size" :d="d" />
       </template>
       <template v-else>
         <circle :cx="background.size" :cy="background.size" :r="background.size" :fill="bgColor" />

src/additional-components/MiniMap/MiniMap.vue

@@ -6,6 +6,7 @@ import { Node } from '~/types'
 import { useStore } from '~/composables'
 
 type StringFunc = (node: Node) => string
+type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined
 
 export interface MiniMapProps extends HTMLAttributes {
   nodeColor?: string | StringFunc
@@ -34,13 +35,13 @@ const store = useStore()
 
 const elementWidth = attrs.style?.width ?? defaultWidth
 const elementHeight = attrs.style?.height ?? defaultHeight
-const nodeColorFunc = props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor as StringFunc
-const nodeStrokeColorFunc =
-  props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor as StringFunc
+const nodeColorFunc: StringFunc = props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor as string
+const nodeStrokeColorFunc: StringFunc =
+  props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor as string
 
 const nodeClassNameFunc = props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as StringFunc
 
-const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
+const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
 
 const viewBox = computed(() => {
   const bb = getRectOfNodes(store.nodes)

src/additional-components/MiniMap/MiniMapNode.vue

@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<MiniMapNodeProps>(), {
 const attrs = useAttrs()
 
 const styles = (attrs.style ?? {}) as CSSProperties
-const fill = computed(() => props.color || styles.background || styles.backgroundColor)
+const fill = computed(() => props.color || (styles.background as string) || styles.backgroundColor)
 </script>
 <template>
   <rect