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

chore(docs): cleanup v-model usages

Browse Source
This commit is contained in:
braks
2024-06-13 23:20:32 +02:00
parent 865fe722db
commit 889797e684
9 changed files with 38 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/src/guide/components/background.md
View File

@@ -19,14 +19,10 @@ To use the background simply pass the `Background` component as a child to the `
<script setup>
import { VueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import initialElements from './initial-elements'
// some nodes and edges
const elements = ref(initialElements)
</script>
<template>
<VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
<VueFlow>
<Background />
</VueFlow>
</template>

8
docs/src/guide/components/controls.md
View File

@@ -26,16 +26,10 @@ import { Controls } from '@vue-flow/controls'
// import default controls styles
import '@vue-flow/controls/dist/style.css'
import initialElements from './initial-elements'
// some nodes and edges
const elements = ref(initialElements)
</script>
<template>
<VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
<VueFlow>
<Controls />
</VueFlow>
</template>

7
docs/src/guide/components/minimap.md
View File

@@ -24,15 +24,10 @@ import { MiniMap } from '@vue-flow/minimap'
// import default minimap styles
import '@vue-flow/minimap/dist/style.css'
import initialElements from './initial-elements'
// some nodes and edges
const elements = ref(initialElements)
</script>
<template>
<VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
<VueFlow>
<MiniMap />
</VueFlow>
</template>

12
docs/src/guide/components/node-resizer.md
View File

@@ -16,17 +16,18 @@ npm install @vue-flow/node-resizer
```vue
<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'
import initialElements from './initial-elements'
import initialNodes from './initialNodes'
// some nodes and edges
const elements = ref(initialElements)
const nodes = ref(initialNodes)
</script>
<template>
<VueFlow v-model="elements" fit-view-on-init>
<VueFlow :nodes="nodes">
<template #node-custom="nodeProps">
<CustomNode :data="nodeProps.data" :label="nodeProps.label" />
<CustomNode :data="nodeProps.data" />
</template>
</VueFlow>
</template>
@@ -40,14 +41,13 @@ import { NodeResizer } from '@vue-flow/node-resizer'
// make sure to include the necessary styles!
import '@vue-flow/node-resizer/dist/style.css'
defineProps(['label'])
defineProps(['data'])
</script>
<template>
<NodeResizer min-width="100" min-height="30" />
<Handle type="target" :position="Position.Left" />
<div style="padding: 10px">{{ label }}</div>
<Handle type="source" :position="Position.Right" />
</template>
```

12
docs/src/guide/components/node-toolbar.md
View File

@@ -19,16 +19,16 @@ npm install @vue-flow/node-toolbar
```vue
<script setup>
import { VueFlow } from '@vue-flow/core'
import initialElements from './initial-elements'
import initialNodes from './initialNodes'
// some nodes and edges
const elements = ref(initialElements)
const nodes = ref(initialNodes)
</script>
<template>
<VueFlow v-model="elements" fit-view-on-init>
<VueFlow :nodes="nodes">
<template #node-custom="nodeProps">
<CustomNode :data="nodeProps.data" :label="nodeProps.label" />
<CustomNode :data="nodeProps.data" />
</template>
</VueFlow>
</template>
@@ -59,10 +59,6 @@ defineProps<Props>()
<button>expand</button>
</NodeToolbar>
<div :style="{ padding: '10px 20px' }">
{{ label }}
</div>
<Handle type="target" :position="Position.Left" />
<Handle type="source" :position="Position.Right" />
</template>

11
docs/src/guide/theming.md
View File

@@ -91,9 +91,10 @@ Below are a couple of examples on how you can do this:
Directly styling the Vue Flow component:
```vue{3-4}
```vue{4-5}
<VueFlow
v-model="elements"
:nodes="nodes"
:edges="edges"
class="my-diagram-class"
:style="{ background: 'red' }"
/>
@@ -108,8 +109,8 @@ Styling nodes/edges with a style or class attribute:
const nodes = ref([
{
id: '1',
label: 'Node 1',
position: { x: 250, y: 5 },
data: { label: 'Node 1' },
// Add a class name to the node
class: 'my-custom-node-class',
@@ -140,11 +141,11 @@ These alterations can be implemented either on a global scale or to individual e
```
```js{6-7} [<LogosJavascript />]
const elements = ref([
const nodes = ref([
{
id: '1',
label: 'Node 1',
position: { x: 100, y: 100 },
data: { label: 'Node 1' },
/* Overriding the `--vf-node-color` variable to change node border, box-shadow and handle color */
style: { '--vf-node-color': 'blue' }
},

2
docs/src/guide/troubleshooting.md
View File

@@ -18,7 +18,7 @@ Vue Flow can emit several error types to help diagnose and resolve issues.
<template>
<!-- Ensure the parent container has a width and height -->
<div style="width: 500px; height: 500px">
<VueFlow v-model="elements" />
<VueFlow :nodes="nodes" :edges="edges" />
</div>
</template>
```

33
docs/src/guide/utils/graph.md
View File

@@ -13,8 +13,8 @@
import { VueFlow, isEdge } from '@vue-flow/core'
const elements = ref([
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 }, },
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
{ id: '1', position: { x: 250, y: 5 }, },
{ id: '2', position: { x: 100, y: 100 }, },
{ id: 'e1-2', source: '1', target: '2', class: 'light' },
])
@@ -27,9 +27,10 @@ const toggleClass = () => {
})
}
</script>
<template>
<VueFlow v-model="elements">
<button style="position: absolute; top: 10px; right: 10px;" @click="toggleClass">Toggle classes</button>
<button @click="toggleClass">Toggle classes</button>
</VueFlow>
</template>
```
@@ -61,33 +62,34 @@ const toggleClass = () => {
})
}
</script>
<template>
<VueFlow v-model="elements">
<button style="position: absolute; top: 10px; right: 10px;" @click="toggleClass">Toggle classes</button>
<button @click="toggleClass">Toggle classes</button>
</VueFlow>
</template>
```
## [addEdge](/typedocs/functions/isEdge)
## [addEdge](/typedocs/functions/isEdge) (deprecated)
::: warning
In the composition API you should use [`addEdges`](/typedocs/types/AddEdges)
of [`useVueFlow`](/guide/composables#usevueflow/)
In the composition API you should use [`addEdges`](/typedocs/types/AddEdges) of [`useVueFlow`](/guide/composables#usevueflow/)
:::
- Details:
Confirms if an element is a node.
Adds an edge to the elements array.
- Example:
```vue{12}
<script setup>
import { ref } from 'vue'
import { VueFlow, addEdge } from '@vue-flow/core'
const elements = ref([
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
{ id: '1', position: { x: 250, y: 5 } },
{ id: '2', position: { x: 100, y: 100 } },
{ id: 'e1-2', source: '1', target: '2' },
])
@@ -101,16 +103,15 @@ const onConnect = (params) => {
</template>
```
## [updateEdge](/typedocs/functions/updateEdge-1)
## [updateEdge](/typedocs/functions/updateEdge-1) (deprecated)
::: warning
In the composition API you should use [`updateEdge`](/typedocs/types/UpdateEdge)
of [`useVueFlow`](/guide/composables#usevueflow/)
In the composition API you should use [`updateEdge`](/typedocs/types/UpdateEdge) of [`useVueFlow`](/guide/composables#usevueflow/)
:::
- Details:
Updates an edge and applies new source/target.
Updates an edge to a new source or target node.
- Example:
@@ -119,8 +120,8 @@ of [`useVueFlow`](/guide/composables#usevueflow/)
import { VueFlow, updateEdge } from '@vue-flow/core'
const elements = ref([
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
{ id: 'e1-2', source: '1', target: '2' },
])

2
docs/src/guide/vue-flow/config.md
View File

@@ -812,7 +812,7 @@ const edges = ref([
```vue{2}
<template>
<VueFlow v-model="elements" auto-connect />
<VueFlow :auto-connect="true" />
</template>
```