From 8c54daedc00d651e2cdd14c7b02340a9910fa04d Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 20 Oct 2021 18:32:37 +0200
Subject: [PATCH] feat: scope edge and node slots by name

* node, edge names slots scoped as `edge/node-${edge/node-type}`
---
 .eslintrc.js                                | 6 ++++++
 src/container/EdgeRenderer/EdgeRenderer.vue | 2 +-
 src/container/Flow/Flow.vue                 | 8 ++++----
 src/container/NodeRenderer/NodeRenderer.vue | 2 +-
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index b8b6b17b..205e4f61 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,4 +1,10 @@
 const baseRules = {
+  'vue/valid-v-slot': [
+    'error',
+    {
+      allowModifiers: true,
+    },
+  ],
   'prettier/prettier': ['error', {}, { usePrettierrc: true }],
 }
 
diff --git a/src/container/EdgeRenderer/EdgeRenderer.vue b/src/container/EdgeRenderer/EdgeRenderer.vue
index 5d42a588..44cf114e 100644
--- a/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/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>
diff --git a/src/container/Flow/Flow.vue b/src/container/Flow/Flow.vue
index 5f8c099b..e905e4d2 100644
--- a/src/container/Flow/Flow.vue
+++ b/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">
-            <slot name="node" v-bind="nodeProps"></slot>
+          <template v-for="nodeName of Object.keys(nodeTypes)" #[`node-${nodeName}`]="nodeProps">
+            <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">
-            <slot name="edge" v-bind="edgeProps"></slot>
+          <template v-for="edgeName of Object.keys(edgeTypes)" #[`edge-${edgeName}`]="edgeProps">
+            <slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot>
           </template>
           <template #custom-connection-line="customConnectionLineProps">
             <slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
diff --git a/src/container/NodeRenderer/NodeRenderer.vue b/src/container/NodeRenderer/NodeRenderer.vue
index 2ffb65e3..1cdec092 100644
--- a/src/container/NodeRenderer/NodeRenderer.vue
+++ b/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>