update(examples): move examples into src dir

examples/src/Nesting/GroupNode.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { Handle, Position, getNodesInside, useVueFlow } from '@braks/vue-flow'
+import type { NodeProps } from '@braks/vue-flow'
+
+const props = defineProps<NodeProps>()
+const { onNodeDragStop, getNodes, transform } = useVueFlow()
+onNodeDragStop(({ node }) => {
+  const nodes = getNodesInside(
+    getNodes.value,
+    {
+      ...props.dimensions,
+      x: props.computedPosition.x,
+      y: props.computedPosition.y,
+    },
+    transform.value,
+  )
+  if (nodes.some((n) => n.id === node.id && n.id !== props.id)) {
+    node.label = `In ${props.id}`
+    node.data = {
+      group: props.id,
+    }
+  } else if (node.data?.group === props.id) {
+    node.data.group = undefined
+    node.label = node.id
+  }
+})
+</script>
+<template>
+  <div class="vue-flow__group-node">
+    <Handle type="target" :position="Position.Top" />
+    <strong>Group {{ label }}</strong>
+    <Handle type="source" :position="Position.Bottom" />
+  </div>
+</template>
+<style>
+.vue-flow__group-node {
+  padding: 15px;
+  width: 300px;
+  height: 300px;
+  border: solid 1px black;
+}
+</style>

examples/src/Nesting/Nesting.vue

@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+import { ConnectionMode, useVueFlow, VueFlow, MiniMap, Background, Controls } from '@braks/vue-flow'
+
+const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
+  fitViewOnInit: true,
+  connectionMode: ConnectionMode.Loose,
+  nodes: [
+    { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
+    {
+      id: '2',
+      label: 'Node 2',
+      position: { x: 100, y: 100 },
+      class: 'light',
+      style: { backgroundColor: 'rgba(255, 0, 0, 0.8)', width: '200px', height: '200px' },
+    },
+    {
+      id: '2a',
+      label: 'Node 2a',
+      position: { x: 10, y: 50 },
+      parentNode: '2',
+    },
+    { id: '3', label: 'Node 3', position: { x: 320, y: 100 }, class: 'light' },
+    {
+      id: '4',
+      label: 'Node 4',
+      position: { x: 320, y: 200 },
+      class: 'light',
+      style: { backgroundColor: 'rgba(255, 0, 0, 0.7)', width: '300px', height: '300px' },
+    },
+    {
+      id: '4a',
+      label: 'Node 4a',
+      position: { x: 15, y: 65 },
+      class: 'light',
+      extent: 'parent',
+      parentNode: '4',
+    },
+    {
+      id: '4b',
+      label: 'Node 4b',
+      position: { x: 15, y: 120 },
+      class: 'light',
+      style: { backgroundColor: 'rgba(255, 0, 255, 0.7)', height: '150px', width: '270px' },
+      parentNode: '4',
+    },
+    {
+      id: '4b1',
+      label: 'Node 4b1',
+      position: { x: 20, y: 40 },
+      class: 'light',
+      parentNode: '4b',
+    },
+    {
+      id: '4b2',
+      label: 'Node 4b2',
+      position: { x: 100, y: 100 },
+      class: 'light',
+      parentNode: '4b',
+    },
+  ],
+  edges: [
+    { id: 'e1-2', source: '1', target: '2', animated: true },
+    { id: 'e1-3', source: '1', target: '3' },
+    { id: 'e2a-4a', source: '2a', target: '4a' },
+    { id: 'e3-4', source: '3', target: '4' },
+    { id: 'e3-4b', source: '3', target: '4b' },
+    { id: 'e4a-4b1', source: '4a', target: '4b1' },
+    { id: 'e4a-4b2', source: '4a', target: '4b2' },
+    { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
+  ],
+})
+
+onConnect((params) => addEdges([params]))
+
+onMounted(() => {
+  // add nodes to parent
+  addNodes([
+    {
+      id: '999',
+      type: 'input',
+      label: 'Added after mount',
+      position: { x: 20, y: 100 },
+      class: 'light',
+      expandParent: true,
+      parentNode: '2',
+    },
+  ])
+})
+</script>
+<template>
+  <VueFlow>
+    <MiniMap />
+    <Controls />
+    <Background />
+  </VueFlow>
+</template>