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

examples: update pinia example (#1458)

Browse Source 
* examples: update pinia example

* chore(examples): update pinia dep

* examples: add icons to pinia panel

* docs(examples): update pinia example
This commit is contained in:
Braks
2024-06-08 16:07:50 +02:00
committed by GitHub
parent 9bd813dc59
commit 6503b3e9ed
6 changed files with 181 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/vite/src/Pinia/PiniaExample.vue
+52 -28
View File
@@ -1,55 +1,79 @@
<script lang="ts" setup>
import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
import useStore from './store'
import Icon from './Icon.vue'
const store = useStore()
const { onConnect, addEdges } = useVueFlow()
onConnect(addEdges)
onConnect((params) => addEdges([params]))
</script>
<template>
<VueFlow v-model="store.elements" fit-view-on-init>
<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>
<button @click="store.reset">reset elements</button>
<VueFlow v-model:nodes="store.nodes" v-model:edges="store.edges" class="pinia-flow" fit-view-on-init>
<Panel position="top-right">
<div class="buttons-panel">
<button @click="store.updatePositions">
<Icon name="shuffle" />
</button>
<button @click="store.toggleClass">
<Icon name="moon" />
</button>
<button @click="store.log">
<Icon name="log" />
</button>
<button @click="store.reset">
<Icon name="reset" />
</button>
</div>
</Panel>
</VueFlow>
</template>
<style scoped>
<style>
.pinia-flow {
background-color: #1a192b;
height: 100%;
width: 100%;
}
.buttons-panel {
display: flex;
gap: 10px;
}
.vue-flow__panel {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
color: #333;
font-size: 0.8rem;
margin: 0.25rem;
padding: 0.25rem 0.5rem;
background-color: #2d3748;
padding: 10px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
}
.vue-flow__panel button {
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
color: #333;
border: none;
cursor: pointer;
font-size: 0.8rem;
margin: 0.25rem;
padding: 0.25rem 0.5rem;
background-color: #4a5568;
border-radius: 8px;
color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
width: 40px;
height: 40px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.vue-flow__panel button:hover {
background-color: #e5e5e5;
background-color: #2563eb;
transition: background-color 0.2s;
}
.vue-flow__panel button:active {
background-color: #d5d5d5;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
.vue-flow__node.dark {
background-color: #2d3748;
color: white;
}
</style>