docs: replace codesandbox embed with repl (#122)

* 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

docs/components/examples/update-node/App.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import { reactive } from 'vue'
+
+const defaultLabel = '-'
+const { onPaneReady, getNode } = useVueFlow({
+  nodes: [
+    { id: '1', label: defaultLabel, position: { x: 100, y: 100 } },
+    { id: '2', label: 'Node 2', position: { x: 100, y: 200 } },
+  ],
+  edges: [{ id: 'e1-2', source: '1', target: '2' }],
+})
+
+const opts = reactive({
+  bg: '#eeeeee',
+  label: 'Node 1',
+  hidden: false,
+})
+
+const updateNode = () => {
+  const node = getNode.value('1')
+  node.label = opts.label.trim() !== '' ? opts.label : defaultLabel
+  node.style = { backgroundColor: opts.bg }
+  node.hidden = opts.hidden
+}
+
+onPaneReady(({ fitView }) => {
+  fitView()
+  updateNode()
+})
+</script>
+
+<template>
+  <VueFlow>
+    <div class="updatenode__controls">
+      <label>label:</label>
+      <input v-model="opts.label" @input="updateNode" />
+
+      <label class="updatenode__bglabel">background:</label>
+      <input v-model="opts.bg" type="color" @input="updateNode" />
+
+      <div class="updatenode__checkboxwrapper">
+        <label>hidden:</label>
+        <input v-model="opts.hidden" type="checkbox" @change="updateNode" />
+      </div>
+    </div>
+  </VueFlow>
+</template>

docs/components/examples/update-node/index.ts

@@ -0,0 +1,2 @@
+export { default as UpdateNodeApp } from './App.vue?raw'
+export { default as UpdateNodeCSS } from './style.css'

docs/components/examples/update-node/style.css

@@ -0,0 +1,30 @@
+.updatenode__controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 4;
+  font-size: 11px;
+  background-color: lightgray;
+  border-radius: 10px;
+  padding: 8px;
+}
+
+.updatenode__controls label {
+  display: blocK;
+}
+
+.updatenode__controls input {
+  padding: 2px;
+  border-radius: 5px;
+}
+
+.updatenode__bglabel {
+  margin-top: 8px;
+}
+
+.updatenode__checkboxwrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 8px;
+}