examples: add math example (#1461)

* examples: add math example

* docs: add math example

docs/src/.vitepress/config.mts

@@ -206,6 +206,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
             { text: 'Drag & Drop', link: '/examples/dnd' },
             { text: 'Interactions', link: '/examples/interaction' },
             { text: 'Save & Restore', link: '/examples/save' },
+            { text: 'Math Operation Flow', link: '/examples/math' },
             { text: 'Screenshot', link: '/examples/screenshot' },
             { text: 'Node Visibility', link: '/examples/hidden' },
             { text: 'Node Intersections', link: '/examples/intersection' },

docs/src/examples/math.md

@@ -0,0 +1,9 @@
+# Math Operation
+
+This example demonstrates how to use the different composables like `useHandleConnections` or `useNodesData` to create a data flow between nodes.
+
+In this example we use nodes to create a simple math operation, where the user can input two numbers and select an operation to perform.
+
+<div class="mt-6">
+  <Repl example="math"></Repl>
+</div>

docs/src/examples/stress.md

@@ -1,4 +1,3 @@
-
 # Stress
 
 Vue Flow is built to be fast but there are limits.
@@ -6,9 +5,5 @@ Vue Flow is built to be fast but there are limits.
 Try out how many nodes you can get to render before your browser crashes.
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="stress"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="stress"></Repl>
 </div>

docs/src/examples/teleport.md

@@ -4,9 +4,5 @@
 Teleport your nodes to another dom element using Vue 3 [`Teleport`](https://vuejs.org/guide/built-ins/teleport.html).
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="teleport"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="teleport"></Repl>
 </div>