fix: nodes as fragments

feat: accept vnode as edge text

src/components/Edges/Edge.vue

@@ -123,7 +123,7 @@ const edgePos = computed(() =>
     v-if="!props.edge.isHidden && isVisible(edgePos)"
     :class="[
       'revue-flow__edge',
-      `revue-flow__edge-${props.type.name || 'default'}`,
+      `revue-flow__edge-${props.edge.type || 'default'}`,
       {
         selected: isSelected,
         animated: props.edge.animated,

src/components/Edges/EdgeText.vue

@@ -4,7 +4,12 @@ import { HTMLAttributes, VNode } from 'vue'
 interface EdgeTextProps extends HTMLAttributes {
   x: number
   y: number
-  label?: string | VNode
+  label?:
+    | string
+    | {
+        component: VNode
+        props?: any
+      }
   labelStyle?: any
   labelShowBg?: boolean
   labelBgStyle?: any
@@ -38,7 +43,11 @@ const { width = 0, height = 0, x = 0, y = 0 } = useElementBounding(edgeRef)
       :ry="props.labelBgBorderRadius"
     />
     <text ref="edge-text" class="revue-flow__edge-text" :y="height / 2" dy="0.3em" :style="props.labelStyle">
-      <component :is="props.label" v-if="typeof props.label !== 'string'" />
+      <component
+        :is="props.label.component"
+        v-if="typeof props.label.component !== 'undefined'"
+        v-bind="{ ...props, ...props.label.props, width, height, x, y }"
+      />
       <template v-else>
         {{ props.label }}
       </template>

src/components/Nodes/DefaultNode.vue

@@ -17,12 +17,10 @@ const props = withDefaults(defineProps<DefaultNodeProps>(), {
 })
 </script>
 <template>
-  <div class="revue-flow__node-default">
-    <Handle type="target" :position="props.targetPosition" :is-connectable="props.connectable" />
-    <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
-    <template v-else>
-      {{ props.data?.label }}
-    </template>
-    <Handle type="source" :position="props.sourcePosition" :is-connectable="props.connectable" />
-  </div>
+  <Handle type="target" :position="props.targetPosition" :is-connectable="props.connectable" />
+  <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
+  <template v-else>
+    {{ props.data?.label }}
+  </template>
+  <Handle type="source" :position="props.sourcePosition" :is-connectable="props.connectable" />
 </template>

src/components/Nodes/InputNode.vue

@@ -15,11 +15,9 @@ const props = withDefaults(defineProps<InputNodeProps>(), {
 })
 </script>
 <template>
-  <div class="revue-flow__node-input">
-    <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
-    <template v-else>
-      {{ props.data?.label }}
-    </template>
-    <Handle type="source" :position="props.sourcePosition" :connectable="props.connectable" />
-  </div>
+  <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
+  <template v-else>
+    {{ props.data?.label }}
+  </template>
+  <Handle type="source" :position="props.sourcePosition" :connectable="props.connectable" />
 </template>

src/components/Nodes/OutputNode.vue

@@ -15,11 +15,9 @@ const props = withDefaults(defineProps<OutputNodeProps>(), {
 })
 </script>
 <template>
-  <div class="revue-flow__node-output">
-    <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
-    <template v-else>
-      {{ props.data?.label }}
-    </template>
-    <Handle type="source" :position="props.targetPosition" :is-connectable="props.connectable" />
-  </div>
+  <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
+  <template v-else>
+    {{ props.data?.label }}
+  </template>
+  <Handle type="source" :position="props.targetPosition" :is-connectable="props.connectable" />
 </template>