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

docs: replace codesandbox embed with repl (#122)

Browse Source 
* docs: Animations

* docs: add confetti gun

* docs: update basic example on home page

* docs(deps): Add stackblitz sdk to deps

* chore: update yarn.lock

* docs: use vue repl

* docs: remove stackblitz sdk

* docs: basic repl example

* docs: use repl for examples/index.md (basic example)

* docs: pass ext to repl

* docs: add copy plugin

* docs: use import map instead of dynamic imports

* docs: use repl for custom node example

* docs: hide repl errors

* docs: use repl for custom connectionline example

* docs: use repl for edges example

* docs: exclude repl from ssr

* docs: use repl for nested example

* docs: use repl for stress example

* docs: rename customNode to custom-node

* docs: use repl for update-edge example

* docs: use repl for update-node example

* docs: use repl for validation example

* docs: use repl for save-restore example

* docs: scale down minimap in repl examples

* docs: use repl for dnd example

* docs: use repl for empty example

* docs: use repl for hidden example

* docs: use repl for interaction example

* docs: use repl for multi example

* docs: add pinia example with stackblitz

* docs: update basic example

* docs: update examples

* docs: remove transition from intro

* docs: update features

* update: README.md

* docs: scope css
This commit is contained in:
Braks
2022-05-26 19:28:25 +02:00
parent 6494b65b3e
commit 98a893108c
95 changed files with 2342 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/examples/connectionline.md
+6 -25
View File
@@ -6,33 +6,14 @@ pageClass: examples
# Custom Connection Line
If the default connection lines aren't to your liking, or you want to expand on the existing
functionality you can pass a custom connection line component to Vue Flow.
functionality you can use your own custom connection line.
Simply pass a component in the designated template slot, and you're good to go.
```vue:no-line-numbers
<template>
<VueFlow>
<template #connection-line="props">
<MyCustomConnectionLine v-bind="props" />
</template>
</VueFlow>
</template>
```
You can see a working example in the sandbox.
<div class="mt-6">
<iframe src="https://codesandbox.io/embed/vue-flow-custom-connection-line-0okgze?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: Custom Connection Line"
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-custom-connection-line-0okgze?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: Custom Connection Line"
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>
<client-only>
<Suspense>
<Repl example="connectionline"></Repl>
</Suspense>
</client-only>
</div>
docs/src/examples/custom-node.md
+7 -16
View File
@@ -5,24 +5,15 @@ pageClass: examples
# Custom Node
One of the key features of Vue Flow is implementing custom elements (nodes / edges) that allow you to expand on the basic node functionality (dragging, selection etc).
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).
You can display any content and functionality inside a custom node. More documentation about how to set
up a custom node can be found on the [custom nodes page](/guide/node.html#custom-nodes/).
You can see a working example in the sandbox below.
up a custom node can be found on the [custom nodes page](/guide/node.html#custom-nodes).
<div class="mt-6">
<iframe src="https://codesandbox.io/embed/vue-flow-custom-node-example-wznb3q?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: Custom Node Example"
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-custom-node-example-wznb3q?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: Custom Node Example"
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>
<client-only>
<Suspense>
<Repl example="customNode"></Repl>
</Suspense>
</client-only>
</div>
docs/src/examples/dnd.md
+5 -12
View File
@@ -16,16 +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">
<iframe src="https://codesandbox.io/embed/vue-flow-drag-drop-tpbm7d?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: Drag & Drop"
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-drag-drop-tpbm7d?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: Drag & Drop"
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>
<client-only>
<Suspense>
<Repl example="dnd"></Repl>
</Suspense>
</client-only>
</div>
docs/src/examples/edges.md
+5 -12
View File
@@ -9,16 +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">
<iframe src="https://codesandbox.io/embed/vue-flow-edges-3jbddk?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: 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-edges-3jbddk?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: 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>
<client-only>
<Suspense>
<Repl example="edges"></Repl>
</Suspense>
</client-only>
</div>
docs/src/examples/empty.md
+5 -12
View File
@@ -9,16 +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">
<iframe src="https://codesandbox.io/embed/vue-flow-empty-example-bcxxdv?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: Empty Example"
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-empty-example-bcxxdv?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: Empty Example"
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>
<client-only>
<Suspense>
<Repl example="empty"></Repl>
</Suspense>
</client-only>
</div>
docs/src/examples/hidden.md
+5 -12
View File
@@ -13,16 +13,9 @@ If you set the `onlyRenderVisibleElements` prop to `true`, hidden elements will
css. This behavior is disabled by default, meaning all elements are rendered whether they are hidden or not.
<div class="mt-6">
<iframe src="https://codesandbox.io/embed/vue-flow-hidden-example-nrpjl7?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: Hidden Example"
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-hidden-example-nrpjl7?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: Hidden Example"
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>
<client-only>
<Suspense>
<Repl example="hidden"></Repl>
</Suspense>
</client-only>
</div>
docs/src/examples/index.md
+5 -12
View File
@@ -11,16 +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">
<iframe src="https://codesandbox.io/embed/vue-flow-basic-example-3hq147?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FBasic.vue&moduleview=1&theme=dark"
class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
title="Vue Flow: Basic Example"
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-basic-example-3hq147?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FBasic.vue&moduleview=1&theme=light"
class="block dark:hidden h-full w-full min-h-[75vh]"
title="Vue Flow: Basic Example"
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>
<client-only>
<Suspense>
<Repl example="basic"></Repl>
</Suspense>
</client-only>
</div>
docs/src/examples/interaction.md
+5 -12
View File
@@ -10,16 +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">
<iframe src="https://codesandbox.io/embed/vue-flow-interaction-example-pqzf7p?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: Hidden Example"
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-interaction-example-pqzf7p?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: Hidden Example"
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>
<client-only>
<Suspense>
<Repl example="interaction"></Repl>
</Suspense>
</client-only>
</div>
docs/src/examples/multi.md
+5 -12
View File
@@ -10,16 +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">
<iframe src="https://codesandbox.io/embed/vue-flow-multi-flows-example-y4yn9u?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FMultiFlow.vue&theme=dark"
class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
title="Vue Flow: Multi Flows Example"
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-multi-flows-example-y4yn9u?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FMultiFlow.vue&theme=light"
class="block dark:hidden h-full w-full min-h-[75vh]"
title="Vue Flow: Multi Flows Example"
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>
<client-only>
<Suspense>
<Repl example="multi"></Repl>
</Suspense>
</client-only>
</div>
docs/src/examples/nesting.md
+5 -12
View File
@@ -12,16 +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">
<iframe src="https://codesandbox.io/embed/compassionate-goldberg-h5dsnq?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: Nested Nodes Example"
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/compassionate-goldberg-h5dsnq?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: Nested Nodes Example"
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>
<client-only>
<Suspense>
<Repl example="nested"></Repl>
</Suspense>
</client-only>
</div>
docs/src/examples/pinia.md
+15
View File
@@ -0,0 +1,15 @@
---
pageClass: examples
---
# Pinia
Using your existing storage implementation is not an issue.
You can store your elements in whatever store you're already using, mutate them there and pass the result to Vue Flow.
In this example we use [pinia](https://pinia.vuejs.org/) to store our elements, update their positions and toggle classes.
<div class="mt-6">
<PiniaExample />
</div>
docs/src/examples/save.md
+12 -18
View File
@@ -5,27 +5,21 @@ pageClass: examples
# Save & Restore
::: warning BREAKING CHANGE
__Changes from 0.3.x to 0.4.x__
The "built-in" storage feature has been fully removed.
There is no built-in persistent storage feature, however you can use your own storage implementation.
::: tip State Management Libraries
Check the [pinia](/examples/pinia) example to see how to use Vue Flow with a state management library.
:::
There is no built-in storage feature, however creating a save & restore feature is simple.
This example demonstrates save & restore functionality using the [`LocalStorage`](https://developer.mozilla.org/de/docs/Web/API/Window/localStorage) of the browser.
This example demonstrates save & restore functionality using the `LocalStorage` of the browser.
You are of course free to implement your own logic (for example fetching the data from an API that's connected to a database).
You can extend on this basic idea however you like, i.e. fetch data that you transform into elements which are then passed to Vue Flow or
some other business logic you would like to handle.
<div class="mt-6">
<iframe src="https://codesandbox.io/embed/vue-flow-save-restore-example-1u7u6t?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: Save & Restore Example"
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-save-restore-example-1u7u6t?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: Save & Restore Example"
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>
<client-only>
<Suspense>
<Repl example="saveRestore"></Repl>
</Suspense>
</client-only>
</div>
docs/src/examples/stress.md
+5 -12
View File
@@ -10,16 +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">
<iframe src="https://codesandbox.io/embed/vue-flow-stress-zyr01z?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: Stress"
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-stress-zyr01z?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: Stress"
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>
<client-only>
<Suspense>
<Repl example="stress"></Repl>
</Suspense>
</client-only>
</div>
docs/src/examples/updatable-edge.md
+5 -12
View File
@@ -14,16 +14,9 @@ for specific edges by using the `updatable` attribute.
<div class="mt-6">
<iframe src="https://codesandbox.io/embed/eager-tree-c7igf6?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: Updatable Edge Example"
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/eager-tree-c7igf6?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: Updatable Edge Example"
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>
<client-only>
<Suspense>
<Repl example="updateEdge"></Repl>
</Suspense>
</client-only>
</div>
docs/src/examples/update-node.md
+5 -12
View File
@@ -14,16 +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">
<iframe src="https://codesandbox.io/embed/vue-flow-update-node-example-q5hjp3?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: Update Node Example"
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-update-node-example-q5hjp3?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: Update Node Example"
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>
<client-only>
<Suspense>
<Repl example="updateNode"></Repl>
</Suspense>
</client-only>
</div>
docs/src/examples/validation.md
+5 -12
View File
@@ -31,16 +31,9 @@ const nodes = [
```
<div class="mt-6">
<iframe src="https://codesandbox.io/embed/vue-flow-validation-example-zxbyus?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: Validation Example"
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-validation-example-zxbyus?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: Validation Example"
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>
<client-only>
<Suspense>
<Repl example="validation"></Repl>
</Suspense>
</client-only>
</div>