alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: replace vuepress specific components

Browse Source
This commit is contained in:
braks
2022-08-01 21:10:14 +02:00
committed by Braks
parent af78b52233
commit f386ea454c
26 changed files with 99 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/examples/dnd.md
+2 -2
View File
@@ -16,9 +16,9 @@ This example shows another key feature of Vue Flow. You can initialize the Flow
is actually mounted. This can be achieved by using the [`useVueFlow`](/guide/composables.html#usevueflow) composable.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="dnd"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>
docs/src/examples/edges/connection-line.md
+2 -2
View File
@@ -11,9 +11,9 @@ functionality you can use your own custom connection line.
Simply pass a component in the designated template slot, and you're good to go.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="connectionline"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>
docs/src/examples/edges/index.md
+2 -2
View File
@@ -9,9 +9,9 @@ Vue Flow comes with four pre-defined edge types - bezier-, step-, smoothstep and
In addition to the built-in edge types you can create your own custom edges. You can find more information on edge types [here](/guide/edge.html#default-edge-types).
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="edges"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>
docs/src/examples/edges/updatable-edge.md
+2 -2
View File
@@ -14,9 +14,9 @@ for specific edges by using the `updatable` attribute.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="updateEdge"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>
docs/src/examples/edges/validation.md
+2 -2
View File
@@ -31,9 +31,9 @@ const nodes = [
```
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="validation"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>
docs/src/examples/empty.md
+2 -2
View File
@@ -9,9 +9,9 @@ Similar to the drag and drop example, we can also add nodes to an empty graph on
which triggers a push into our elements / nodes array.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="empty"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>
docs/src/examples/hidden.md
+2 -2
View File
@@ -16,9 +16,9 @@ This can save you some time on initial renders but consider that moving the pane
which can cause performance spikes depending on the complexity of the components that have to be mounted.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="hidden"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>
docs/src/examples/horizontal.md
+2 -2
View File
@@ -11,9 +11,9 @@ You can use horizontal layouts with the default node types as well.
You can define where source or target handle positions are with the `sourcePosition` or `targetPosition` properties of nodes.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="horizontal"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>
docs/src/examples/index.md
+2 -2
View File
@@ -11,9 +11,9 @@ On the bottom left you see the viewport-controls and on the bottom right the min
You can also see the built-in node (default, input, output) and edge (bezier, straight, step, smoothstep) types.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="basic"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>
docs/src/examples/interaction.md
+2 -2
View File
@@ -10,9 +10,9 @@ This includes enabling/disabling zoom-scroll, pan-scroll, dragging etc.
In the sandbox below you can find an example showing you how to toggle interaction options.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="interaction"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>
docs/src/examples/multi.md
+2 -2
View File
@@ -10,9 +10,9 @@ Vue Flow is not limited to a single instance on a page.
You can use as many component instances as you like.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="multi"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>
docs/src/examples/nodes/index.md
+2 -2
View File
@@ -11,9 +11,9 @@ You can display any content and functionality inside a custom node. More documen
up a custom node can be found on the [custom nodes page](/guide/node.html#custom-nodes).
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="customNode"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>
docs/src/examples/nodes/nesting.md
+2 -2
View File
@@ -12,9 +12,9 @@ You can also define the boundaries of a node, i.e. if the node can be dragged ou
or even let Vue Flow extend the area of a node to fit all it's children.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="nested"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>
docs/src/examples/nodes/update-node.md
+2 -2
View File
@@ -14,9 +14,9 @@ That means you can manipulate any property of your original nodes, and it will t
You can of course also access the nodes directly from the state and change their properties from there.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="updateNode"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>
docs/src/examples/save.md
+2 -2
View File
@@ -17,9 +17,9 @@ You can extend on this basic idea however you like, i.e. fetch data that you tra
some other business logic you would like to handle.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="saveRestore"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>
docs/src/examples/stress.md
+2 -2
View File
@@ -10,9 +10,9 @@ 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">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="stress"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>
docs/src/examples/teleport.md
+2 -2
View File
@@ -8,9 +8,9 @@ layout: page
Teleport your nodes to another dom element using Vue 3 [`Teleport`](https://vuejs.org/guide/built-ins/teleport.html).
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="teleport"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>