chore(docs): replace the deprecated enum PanelPosition (#979)
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user