refactor(types)!: Remove elements prop, change EdgeTypes/NodeTypes prop to string[]

* no more elements prop - v-model instead!
* Instead of passing an object map to components just pass in an array of strings as nodeTypes/edgeTypes object
* the string name will either be resolved to a dynamic component with :is="type" or a slot with the type-name
* update all examples

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

examples/Unidirectional/UnidirectionalExample.vue

@@ -2,7 +2,6 @@
 import CustomNode from './CustomNode.vue'
 import {
   VueFlow,
-  NodeType,
   addEdge,
   useZoomPanHelper,
   Elements,
@@ -14,7 +13,6 @@ import {
   ConnectionMode,
   updateEdge,
   ArrowHeadType,
-  NodeTypes,
 } from '~/index'
 
 const initialElements: Elements = [
@@ -173,10 +171,6 @@ const initialElements: Elements = [
   },
 ]
 
-const nodeTypes: NodeTypes = {
-  custom: CustomNode,
-}
-
 let id = 4
 const getId = (): ElementId => `${id++}`
 
@@ -195,12 +189,16 @@ const onPaneClick = (evt: MouseEvent) =>
 </script>
 <template>
   <VueFlow
-    :elements="elements"
-    :node-types="nodeTypes"
+    v-model="elements"
+    :node-types="['custom']"
     :connection-line-type="ConnectionLineType.SmoothStep"
     :connection-mode="ConnectionMode.Loose"
     @connect="onConnect"
     @pane-click="onPaneClick"
     @edge-pdate="onEdgeUpdate"
-  />
+  >
+    <template #node-custom="props">
+      <CustomNode v-bind="props" />
+    </template>
+  </VueFlow>
 </template>