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

feat(examples): add pinia example to vite-examples

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-04-26 10:15:39 +02:00
committed by Braks
parent 53884a941e
commit 18aeefb069
6 changed files with 147 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/vite/src/Pinia/PiniaExample.vue
+55
View File
@@ -0,0 +1,55 @@
<script lang="ts" setup>
import { Panel, PanelPosition, VueFlow, useVueFlow } from '@vue-flow/core'
import useStore from './store'
const store = useStore()
const { onConnect, addEdges } = useVueFlow()
onConnect((params) => addEdges([params]))
</script>
<template>
<VueFlow v-model="store.elements" fit-view-on-init>
<Panel :position="PanelPosition.TopCenter">
<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>
</Panel>
</VueFlow>
</template>
<style scoped>
.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;
}
.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;
cursor: pointer;
font-size: 0.8rem;
margin: 0.25rem;
padding: 0.25rem 0.5rem;
}
.vue-flow__panel button:hover {
background-color: #e5e5e5;
}
.vue-flow__panel button:active {
background-color: #d5d5d5;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
}
</style>