alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/components/examples/basic/App.vue
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 { 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" />

4
docs/components/examples/empty/App.vue
View File

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

4
docs/components/examples/hidden/App.vue
View File

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

4
docs/components/examples/multi/Flow.vue
View File

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

4
docs/components/examples/save-restore/Controls.vue
View File

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

4
docs/components/examples/stress/App.vue
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 { 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>

4
examples/vite/src/Basic/Basic.vue
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>

4
examples/vite/src/Interaction/InteractionExample.vue
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

4
examples/vite/src/Layouting/LayoutingExample.vue
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>

4
examples/vite/src/Pinia/PiniaExample.vue
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>

4
examples/vite/src/Stress/StressExample.vue
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>