chore(docs): replace the deprecated enum PanelPosition (#979)

docs/components/examples/basic/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Panel, PanelPosition, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
@@ -78,7 +78,7 @@ function toggleClass() {
 
     <Controls />
 
-    <Panel :position="PanelPosition.TopRight" class="controls">
+    <Panel position="top-right" class="controls">
       <button style="background-color: #113285; color: white" title="Reset Transform" @click="resetTransform">
         <svg width="16" height="16" viewBox="0 0 32 32">
           <path fill="#FFFFFB" d="M18 28A12 12 0 1 0 6 16v6.2l-3.6-3.6L1 20l6 6l6-6l-1.4-1.4L8 22.2V16a10 10 0 1 1 10 10Z" />

docs/components/examples/empty/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Panel, PanelPosition, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Background, BackgroundVariant } from '@vue-flow/background'
 import { MiniMap } from '@vue-flow/minimap'
 
@@ -26,7 +26,7 @@ function addRandomNode() {
 
     <Background :variant="BackgroundVariant.Lines" />
 
-    <Panel :position="PanelPosition.TopRight">
+    <Panel position="top-right">
       <button type="button" @click="addRandomNode">add node</button>
     </Panel>
   </VueFlow>

docs/components/examples/hidden/App.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { Background } from '@vue-flow/background'
-import { Panel, PanelPosition, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import { ref, watch } from 'vue'
 
 const isHidden = ref(false)
@@ -29,7 +29,7 @@ watch(isHidden, () => {
   <VueFlow fit-view-on-init>
     <Background />
 
-    <Panel :position="PanelPosition.TopRight">
+    <Panel position="top-right">
       <div>
         <label for="ishidden">
           hidden

docs/components/examples/multi/Flow.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { Background } from '@vue-flow/background'
-import { Panel, PanelPosition, VueFlow, isNode } from '@vue-flow/core'
+import { Panel, VueFlow, isNode } from '@vue-flow/core'
 import { ref } from 'vue'
 
 const elements = ref([
@@ -32,7 +32,7 @@ function updatePos() {
   <VueFlow v-model="elements" fit-view-on-init>
     <Background />
 
-    <Panel :position="PanelPosition.TopRight">
+    <Panel position="top-right">
       <button style="margin-right: 5px" @click="updatePos">update positions</button>
       <button @click="toggleClass">toggle class</button>
     </Panel>

docs/components/examples/save-restore/Controls.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Panel, PanelPosition, useVueFlow } from '@vue-flow/core'
+import { Panel, useVueFlow } from '@vue-flow/core'
 
 const flowKey = 'example-flow'
 
@@ -34,7 +34,7 @@ function onAdd() {
 </script>
 
 <template>
-  <Panel :position="PanelPosition.TopRight" class="save-restore-controls">
+  <Panel position="top-right" class="save-restore-controls">
     <button style="background-color: #33a6b8" @click="onSave">save</button>
     <button style="background-color: #113285" @click="onRestore">restore</button>
     <button style="background-color: #6f3381" @click="onAdd">add node</button>

docs/components/examples/stress/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Panel, PanelPosition, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import { MiniMap } from '@vue-flow/minimap'
 import { nextTick, ref } from 'vue'
@@ -43,7 +43,7 @@ function updatePos() {
 
     <Background />
 
-    <Panel :position="PanelPosition.TopRight">
+    <Panel position="top-right">
       <button style="margin-right: 5px" @click="updatePos">update positions</button>
       <button @click="toggleClass">toggle class</button>
     </Panel>

examples/vite/src/Basic/Basic.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Elements } from '@vue-flow/core'
-import { Panel, PanelPosition, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 
 import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
@@ -49,7 +49,7 @@ function toggleclass() {
     <Background />
     <MiniMap />
     <Controls />
-    <Panel :position="PanelPosition.TopRight" style="display: flex; gap: 5px">
+    <Panel position="top-right" style="display: flex; gap: 5px">
       <button @click="resetTransform">reset transform</button>
       <button @click="updatePos">change pos</button>
       <button @click="toggleclass">toggle class</button>

examples/vite/src/Interaction/InteractionExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Panel, PanelPosition, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
@@ -57,7 +57,7 @@ onMoveEnd((flowTransform) => console.log('move end', flowTransform))
 
     <Controls />
 
-    <Panel :position="PanelPosition.TopLeft">
+    <Panel position="top-left">
       <div>
         <label for="draggable">
           nodesDraggable

examples/vite/src/Layouting/LayoutingExample.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
 import type { CoordinateExtent, Elements } from '@vue-flow/core'
-import { ConnectionMode, Panel, PanelPosition, Position, VueFlow, isNode } from '@vue-flow/core'
+import { ConnectionMode, Panel, Position, VueFlow, isNode } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 
 import '@vue-flow/controls/dist/style.css'
@@ -49,7 +49,7 @@ function onLayout(direction: string) {
     <VueFlow v-model="elements" :node-extent="nodeExtent" :connection-mode="ConnectionMode.Loose" @pane-ready="onLayout('TB')">
       <Controls />
 
-      <Panel style="display: flex; gap: 10px" :position="PanelPosition.TopRight">
+      <Panel style="display: flex; gap: 10px" position="top-right">
         <button :style="{ marginRight: 10 }" @click="onLayout('TB')">vertical layout</button>
         <button @click="onLayout('LR')">horizontal layout</button>
       </Panel>

examples/vite/src/Pinia/PiniaExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Panel, PanelPosition, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import useStore from './store'
 
 const store = useStore()
@@ -11,7 +11,7 @@ onConnect(addEdges)
 
 <template>
   <VueFlow v-model="store.elements" fit-view-on-init>
-    <Panel :position="PanelPosition.TopCenter">
+    <Panel position="top-center">
       <button @click="store.updatePosition">update positions</button>
       <button @click="store.toggleClass">toggle class</button>
       <button @click="store.log">log store state</button>

examples/vite/src/Stress/StressExample.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Panel, PanelPosition, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { nextTick, ref } from 'vue'
 import { Background } from '@vue-flow/background'
 import { getElements } from './utils'
@@ -42,7 +42,7 @@ function updatePos() {
   <VueFlow v-model="elements" :min-zoom="0.1">
     <Background />
 
-    <Panel :position="PanelPosition.TopRight">
+    <Panel position="top-right">
       <button style="margin-right: 5px" @click="updatePos">update positions</button>
       <button @click="toggleClass">toggle class</button>
     </Panel>