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

This commit is contained in:
Alex Liu
2023-07-11 00:22:50 +08:00
committed by GitHub
parent 70528f8a99
commit 5669c8b101
11 changed files with 22 additions and 22 deletions

View File

@@ -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>

View File

@@ -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

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>