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

chore(docs): update example styles (#1469)

Browse Source 
* 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
This commit is contained in:
Braks
2024-06-10 23:51:47 +02:00
committed by braks
parent 5dc8711a6b
commit d71de0a92d
34 changed files with 528 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/examples/update-node/App.vue
+25 -27
View File
@@ -1,44 +1,42 @@
<script setup>
import { reactive, ref } from 'vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import { ref } from 'vue'
import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
const { onPaneReady, findNode, updateNode } = useVueFlow()
const { updateNode } = useVueFlow()
const opts = reactive({
bg: '#eeeeee',
label: 'Node 1',
hidden: false,
})
const bgColor = ref('#eeeeee')
const label = ref('Node 1')
const nodes = ref([
{ id: '1', label: opts.label, style: { backgroundColor: opts.bg }, hidden: opts.hidden, position: { x: 100, y: 100 } },
{ id: '2', label: 'Node 2', position: { x: 100, y: 200 } },
{
id: '1',
data: { label: label.value },
style: { backgroundColor: bgColor.value },
position: { x: 100, y: 100 },
},
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
])
const edges = ref([{ id: 'e1-2', source: '1', target: '2' }])
onPaneReady(({ fitView }) => {
fitView()
})
function handleUpdate() {
updateNode(nodes.value[0].id, { label: opts.label, style: { backgroundColor: opts.bg }, hidden: opts.hidden })
updateNode('1', { data: { label: label.value }, style: { backgroundColor: bgColor.value } })
}
</script>
<template>
<VueFlow :nodes="nodes" :edges="edges">
<div class="updatenode__controls">
<label>label:</label>
<input v-model="opts.label" @input="handleUpdate" />
<label class="updatenode__bglabel">background:</label>
<input v-model="opts.bg" type="color" @input="handleUpdate" />
<div class="updatenode__checkboxwrapper">
<label>hidden:</label>
<input v-model="opts.hidden" type="checkbox" @change="handleUpdate" />
<VueFlow :nodes="nodes" :edges="edges" fit-view-on-init>
<Panel position="top-right">
<div class="field">
<label for="label">Label:</label>
<input id="label" v-model="label" @input="handleUpdate" />
</div>
</div>
<div class="field">
<label for="bgColor">Background color:</label>
<input id="bgColor" v-model="bgColor" type="color" @input="handleUpdate" />
</div>
</Panel>
</VueFlow>
</template>
docs/examples/update-node/style.css
+15 -21
View File
@@ -1,30 +1,24 @@
.updatenode__controls {
position: absolute;
right: 10px;
top: 10px;
z-index: 4;
font-size: 11px;
background-color: lightgray;
border-radius: 10px;
.vue-flow__panel {
background-color: #2d3748;
color: white;
border-radius: 8px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 8px;
}
.updatenode__controls label {
.vue-flow__panel .field {
display: flex;
gap: 8px;
align-items: center;
}
.vue-flow__panel label {
display: blocK;
}
.updatenode__controls input {
.vue-flow__panel input {
padding: 2px;
border-radius: 5px;
}
.updatenode__bglabel {
margin-top: 8px;
}
.updatenode__checkboxwrapper {
display: flex;
justify-content: center;
align-items: center;
margin-top: 8px;
}