d71de0a92d
* chore(docs): update basic example styles * chore(docs): update confirm delete example styles * chore(docs): update dnd example styles * chore(docs): update hidden example * chore(docs): update update node example * chore(docs): update node toolbar example styles * chore(docs): update transition example styles * chore(docs): cleanup basic example els * chore(docs): cleanup examples
93 lines
2.6 KiB
Vue
93 lines
2.6 KiB
Vue
<script setup>
|
|
import { ref, watch } from 'vue'
|
|
import { Background } from '@vue-flow/background'
|
|
import { Panel, VueFlow } from '@vue-flow/core'
|
|
|
|
const nodes = ref([
|
|
{
|
|
id: '1',
|
|
type: 'input',
|
|
data: { label: 'Node 1' },
|
|
position: { x: 250, y: 5 },
|
|
},
|
|
{
|
|
id: '2',
|
|
data: { label: 'Node 2' },
|
|
position: { x: 100, y: 100 },
|
|
},
|
|
{
|
|
id: '3',
|
|
data: { label: 'Node 3' },
|
|
position: { x: 400, y: 100 },
|
|
},
|
|
{
|
|
id: '4',
|
|
data: { label: 'Node 4' },
|
|
position: { x: 400, y: 200 },
|
|
},
|
|
])
|
|
|
|
const edges = ref([
|
|
{ id: 'e1-2', source: '1', target: '2' },
|
|
{ id: 'e1-3', source: '1', target: '3' },
|
|
{ id: 'e3-4', source: '3', target: '4' },
|
|
])
|
|
|
|
const isHidden = ref(false)
|
|
|
|
watch(isHidden, () => {
|
|
nodes.value = nodes.value.map((node) => ({ ...node, hidden: isHidden.value }))
|
|
edges.value = edges.value.map((edge) => ({ ...edge, hidden: isHidden.value }))
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<VueFlow :nodes="nodes" :edges="edges" fit-view-on-init>
|
|
<Background />
|
|
|
|
<Panel position="top-right">
|
|
<button type="button" @click="isHidden = !isHidden">
|
|
<svg v-if="isHidden" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
|
|
<path
|
|
fill="currentColor"
|
|
d="M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5"
|
|
/>
|
|
</svg>
|
|
|
|
<svg v-else xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
|
|
<path
|
|
fill="currentColor"
|
|
d="M11.83 9L15 12.16V12a3 3 0 0 0-3-3zm-4.3.8l1.55 1.55c-.05.21-.08.42-.08.65a3 3 0 0 0 3 3c.22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53a5 5 0 0 1-5-5c0-.79.2-1.53.53-2.2M2 4.27l2.28 2.28l.45.45C3.08 8.3 1.78 10 1 12c1.73 4.39 6 7.5 11 7.5c1.55 0 3.03-.3 4.38-.84l.43.42L19.73 22L21 20.73L3.27 3M12 7a5 5 0 0 1 5 5c0 .64-.13 1.26-.36 1.82l2.93 2.93c1.5-1.25 2.7-2.89 3.43-4.75c-1.73-4.39-6-7.5-11-7.5c-1.4 0-2.74.25-4 .7l2.17 2.15C10.74 7.13 11.35 7 12 7"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</Panel>
|
|
</VueFlow>
|
|
</template>
|
|
|
|
<style>
|
|
.vue-flow__panel {
|
|
background-color: #2d3748;
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
color: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.vue-flow__panel button {
|
|
background-color: #4a5568;
|
|
border: none;
|
|
border-radius: 4px;
|
|
color: white;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
padding: 5px 10px;
|
|
}
|
|
</style>
|