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

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

examples/vite/src/Pinia/PiniaExample.vue

@@ -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>

examples/vite/src/Pinia/store.ts

@@ -0,0 +1,63 @@
+import { defineStore } from 'pinia'
+import { isNode } from '@vue-flow/core'
+
+const useStore = defineStore('elementsStore', {
+  state() {
+    return {
+      foo: ['bar', 'baz'],
+      elements: [
+        {
+          id: '1',
+          type: 'input',
+          label: 'Node 1',
+          position: { x: 250, y: 5 },
+          class: 'light',
+        },
+        {
+          id: '2',
+          label: 'Node 2',
+          position: { x: 100, y: 100 },
+          class: 'light',
+        },
+        {
+          id: '3',
+          label: 'Node 3',
+          position: { x: 400, y: 100 },
+          class: 'light',
+        },
+        {
+          id: '4',
+          label: 'Node 4',
+          position: { x: 400, y: 200 },
+          class: 'light',
+        },
+        { id: 'e1-2', source: '1', target: '2' },
+        { id: 'e1-3', source: '1', target: '3' },
+        { id: 'e3-4', source: '3', target: '4' },
+      ],
+    }
+  },
+  actions: {
+    reset() {
+      this.elements = []
+    },
+    log() {
+      console.log('stored elements', this.elements)
+    },
+    toggleClass() {
+      this.elements.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
+    },
+    updatePosition() {
+      this.elements.forEach((el) => {
+        if (isNode(el)) {
+          el.position = {
+            x: Math.random() * 400,
+            y: Math.random() * 400,
+          }
+        }
+      })
+    },
+  },
+})
+
+export default useStore