docs: update examples

docs/components/examples/empty/App.vue

@@ -1,20 +1,20 @@
 <script setup>
-import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
+import { Background, BackgroundVariant, MiniMap, Panel, PanelPosition } from '@vue-flow/additional-components'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 
 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 
 onConnect((params) => addEdges([params]))
-onPaneReady((flowInstance) => console.log('flow loaded:', flowInstance))
-onNodeDragStop((node) => console.log('drag stop', node))
 
 const addRandomNode = () => {
   const nodeId = (nodes.value.length + 1).toString()
+
   const newNode = {
     id: nodeId,
     label: `Node: ${nodeId}`,
     position: { x: Math.random() * dimensions.value.width, y: Math.random() * dimensions.value.height },
   }
+
   addNodes([newNode])
 }
 </script>
@@ -22,11 +22,11 @@ const addRandomNode = () => {
 <template>
   <VueFlow>
     <MiniMap />
-    <Controls />
+
     <Background :variant="BackgroundVariant.Lines" />
 
-    <button type="button" :style="{ position: 'absolute', left: '10px', top: '10px', zIndex: 4 }" @click="addRandomNode">
-      add node
-    </button>
+    <Panel :position="PanelPosition.TopRight">
+      <button type="button" @click="addRandomNode">add node</button>
+    </Panel>
   </VueFlow>
 </template>