chore(docs): wrap Repl in client only
This commit is contained in:
braks
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Drag & Drop
|
||||
|
||||
Adding nodes to an already existing graph can be done multiple ways. To create an interactive editor, you would probably
|
||||
@@ -16,9 +11,5 @@ 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">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="dnd"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="dnd"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Custom Connection Line
|
||||
|
||||
If the default connection lines aren't to your liking, or you want to expand on the existing
|
||||
@@ -11,9 +6,5 @@ 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">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="connectionline"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="connectionline"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,8 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Edges
|
||||
|
||||
Vue Flow comes with four pre-defined edge types - bezier-, step-, smoothstep and straight-edges.
|
||||
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">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="edges"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="edges"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Updatable Edge
|
||||
|
||||
Existing edges can be updated, meaning their source / target position can be changed interactively.
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Connection Validation
|
||||
|
||||
Connections can be validated before edges are created and nodes get connected.
|
||||
|
||||
## Using a handle in a custom node
|
||||
|
||||
```vue
|
||||
<div>
|
||||
[ ... ]
|
||||
@@ -17,6 +13,7 @@ Connections can be validated before edges are created and nodes get connected.
|
||||
```
|
||||
|
||||
## Passing as node option
|
||||
|
||||
```ts
|
||||
const nodes = [
|
||||
{
|
||||
@@ -31,9 +28,5 @@ const nodes = [
|
||||
```
|
||||
|
||||
<div class="mt-6">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="validation"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="validation"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,8 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Empty
|
||||
|
||||
Similar to the drag and drop example, we can also add nodes to an empty graph on a button click,
|
||||
which triggers a push into our elements / nodes array.
|
||||
|
||||
<div class="mt-6">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="empty"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="empty"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
This example demonstrates "floating edges".
|
||||
|
||||
The positions of the source and target nodes are calculated dynamically,
|
||||
the caveat here is, that edge-anchors are still tied to Handles (even though invisible in this example),
|
||||
so connections would, by default, only be triggered when hovering over the handles (bottom / top by default).
|
||||
|
||||
<div class="mt-6">
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-floating-edges-zfxdok?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
|
||||
class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Floating Edges"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-floating-edges-zfxdok?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
|
||||
class="block dark:hidden h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Floating Edges"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Hidden
|
||||
|
||||
You can toggle the visibility of nodes by simply setting their `hidden` attribute to either `true` or `false`.
|
||||
@@ -16,9 +11,5 @@ 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">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="hidden"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="hidden"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Horizontal Layout
|
||||
|
||||
Vue Flow doesn't require you to use vertical layouts.
|
||||
@@ -11,9 +6,5 @@ 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">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="horizontal"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="horizontal"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Basic
|
||||
|
||||
This is a basic example to help you familiarize with the basic features of Vue Flow.
|
||||
@@ -11,9 +6,5 @@ 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">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="basic"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="basic"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
# Interaction
|
||||
|
||||
Vue Flow provides options to interact and limit interaction with the viewport and graph.
|
||||
@@ -10,9 +6,5 @@ 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">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="interaction"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="interaction"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,15 +1,7 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
# Intersection
|
||||
|
||||
Vue Flow provides utils to find intersections of nodes with other nodes (or a given area).
|
||||
|
||||
<div class="mt-6">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="intersection"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="intersection"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Multi Flows
|
||||
|
||||
Vue Flow is not limited to a single instance on a page.
|
||||
@@ -10,9 +5,5 @@ 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">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="multi"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="multi"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Custom Node
|
||||
|
||||
One of the key features of Vue Flow is implementing custom elements (nodes / edges) that allow you to expand on the basic functionalities (dragging, selecting etc).
|
||||
@@ -11,9 +6,5 @@ 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">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="customNode"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="customNode"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Nested Nodes
|
||||
|
||||
Another key feature is nested nodes (or even nested flows).
|
||||
@@ -12,9 +7,5 @@ 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">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="nested"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="nested"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Update Node
|
||||
|
||||
Updating internal node data is simple.
|
||||
@@ -14,9 +9,5 @@ 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">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="updateNode"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="updateNode"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Pinia
|
||||
|
||||
Using your existing storage implementation is not an issue.
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Save & Restore
|
||||
|
||||
There is no built-in persistent storage feature, however you can use your own storage implementation.
|
||||
@@ -17,9 +12,5 @@ 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">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="saveRestore"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="saveRestore"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Stress
|
||||
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Teleport
|
||||
|
||||
|
||||
@@ -1,17 +1,8 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Transition
|
||||
|
||||
Vue Flow allows you to use transitions while zooming and panning around the Viewport.
|
||||
This example shows you how to use these transitions to animate actions on your graph.
|
||||
|
||||
<div class="mt-6">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="transition"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="transition"></Repl>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user