feat: scope edge and node slots by name

* node, edge names slots scoped as `edge/node-${edge/node-type}`

.eslintrc.js

@@ -1,4 +1,10 @@
 const baseRules = {
+  'vue/valid-v-slot': [
+    'error',
+    {
+      allowModifiers: true,
+    },
+  ],
   'prettier/prettier': ['error', {}, { usePrettierrc: true }],
 }
 

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -45,7 +45,7 @@ const connectionLineVisible = computed(
           :edge-updater-radius="props.edgeUpdaterRadius"
         >
           <template #default="edgeProps">
-            <slot name="edge" v-bind="edgeProps"></slot>
+            <slot :name="`edge-${edge.type}`" v-bind="edgeProps"></slot>
           </template>
         </Edge>
       </template>

src/container/Flow/Flow.vue

@@ -164,8 +164,8 @@ const edgeTypes = createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })
         :selection-key-code="props.selectionKeyCode"
       >
         <NodeRenderer :node-types="nodeTypes">
-          <template #default="nodeProps">
+          <template v-for="nodeName of Object.keys(nodeTypes)" #[`node-${nodeName}`]="nodeProps">
-            <slot name="node" v-bind="nodeProps"></slot>
+            <slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot>
           </template>
         </NodeRenderer>
         <EdgeRenderer
@@ -175,8 +175,8 @@ const edgeTypes = createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })
           :marker-end-id="props.markerEndId"
           :edge-types="edgeTypes"
         >
-          <template #edge="edgeProps">
+          <template v-for="edgeName of Object.keys(edgeTypes)" #[`edge-${edgeName}`]="edgeProps">
-            <slot name="edge" v-bind="edgeProps"></slot>
+            <slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot>
           </template>
           <template #custom-connection-line="customConnectionLineProps">
             <slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>

src/container/NodeRenderer/NodeRenderer.vue

@@ -58,7 +58,7 @@ const selected = (nodeId: string) => store.selectedElements?.some(({ id }) => id
         :draggable="node.draggable || store.nodesDraggable"
       >
         <template #default="nodeProps">
-          <slot v-bind="nodeProps"></slot>
+          <slot :name="`node-${node.type}`" v-bind="nodeProps"></slot>
         </template>
       </Node>
     </template>