feat(minimap): add minimap slot types

packages/minimap/src/MiniMap.vue

@@ -4,10 +4,10 @@ import { Panel, getBoundsofRects, getConnectedEdges, getRectOfNodes, useVueFlow
 import { zoom, zoomIdentity } from 'd3-zoom'
 import type { D3ZoomEvent } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
-import { computed, provide, ref, useAttrs, useSlots, watchEffect } from 'vue'
-import type { MiniMapEmits, MiniMapNodeFunc, MiniMapProps, ShapeRendering } from './types'
+import { computed, provide, ref, toRef, useAttrs, watchEffect } from 'vue'
+import type { MiniMapEmits, MiniMapNodeFunc, MiniMapProps, MiniMapSlots, ShapeRendering } from './types'
 import MiniMapNode from './MiniMapNode'
-import { MiniMapSlots } from './types'
+import { Slots } from './types'
 
 const {
   width,
@@ -31,6 +31,8 @@ const {
 
 const emit = defineEmits<MiniMapEmits>()
 
+const slots = defineSlots<MiniMapSlots>()
+
 const attrs: Record<string, any> = useAttrs()
 
 const defaultWidth = 200
@@ -40,22 +42,23 @@ const { id, edges, viewport, translateExtent, dimensions, emits, nodes, d3Select
 
 const el = ref<SVGElement>()
 
-provide(MiniMapSlots, useSlots())
+provide(Slots, slots)
 
-const elementWidth = computed(() => width ?? attrs.style?.width ?? defaultWidth)
+const elementWidth = toRef(() => width ?? attrs.style?.width ?? defaultWidth)
 
-const elementHeight = computed(() => height ?? attrs.style?.height ?? defaultHeight)
+const elementHeight = toRef(() => height ?? attrs.style?.height ?? defaultHeight)
 
 const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
 
-const nodeColorFunc = computed<MiniMapNodeFunc>(() => (nodeColor instanceof Function ? nodeColor : () => nodeColor as string))
+const nodeColorFunc = toRef((): MiniMapNodeFunc => (typeof nodeColor === 'string' ? () => nodeColor : nodeColor))
 
-const nodeStrokeColorFunc = computed<MiniMapNodeFunc>(() =>
-  nodeStrokeColor instanceof Function ? nodeStrokeColor : () => nodeStrokeColor as string,
+const nodeStrokeColorFunc = toRef(
+  (): MiniMapNodeFunc => (typeof nodeStrokeColor === 'string' ? () => nodeStrokeColor : nodeStrokeColor),
 )
 
-const nodeClassNameFunc = computed<MiniMapNodeFunc>(() =>
-  nodeClassName instanceof Function ? nodeClassName : ((() => nodeClassName) as MiniMapNodeFunc),
+const nodeClassNameFunc = toRef(
+  (): MiniMapNodeFunc =>
+    typeof nodeClassName === 'string' ? () => nodeClassName : typeof nodeClassName === 'function' ? nodeClassName : () => '',
 )
 
 const bb = computed(() => getRectOfNodes(nodes.value))

packages/minimap/src/MiniMapNode.ts

@@ -1,7 +1,7 @@
-import type { CSSProperties, Slots } from 'vue'
+import type { CSSProperties } from 'vue'
 import { defineComponent, h, inject } from 'vue'
 import type { MiniMapNodeProps } from './types'
-import { MiniMapSlots } from './types'
+import { Slots } from './types'
 
 // todo: typings
 export default defineComponent({
@@ -22,7 +22,7 @@ export default defineComponent({
   ],
   emits: ['click', 'dblclick', 'mouseenter', 'mousemove', 'mouseleave'],
   setup(props: MiniMapNodeProps, { attrs, emit }) {
-    const miniMapSlots: Slots = inject(MiniMapSlots)!
+    const miniMapSlots = inject(Slots)!
 
     return () => {
       const style = (attrs.style ?? {}) as CSSProperties

packages/minimap/src/types.ts

@@ -1,5 +1,5 @@
 import type { Dimensions, GraphNode, NodeMouseEvent, PanelPosition, XYPosition } from '@vue-flow/core'
-import type { CSSProperties, InjectionKey, Slots } from 'vue'
+import type { CSSProperties, InjectionKey } from 'vue'
 
 /** expects a node and returns a color value */
 export type MiniMapNodeFunc = (node: GraphNode) => string
@@ -73,4 +73,6 @@ export interface MiniMapEmits {
   (event: 'nodeMouseleave', params: NodeMouseEvent): void
 }
 
-export const MiniMapSlots: InjectionKey<Slots> = Symbol('MiniMapSlots')
+export interface MiniMapSlots extends Record<`node-${string}`, (nodeProps: MiniMapNodeProps) => any> {}
+
+export const Slots: InjectionKey<MiniMapSlots> = Symbol('MiniMapSlots')