docs: move examples dir out of components dir

docs/examples/update-node/App.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { VueFlow, useVueFlow } from '@vue-flow/core'
+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,
+})
+
+function 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/examples/update-node/index.ts

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

docs/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;
+}