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

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

examples/vite/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import './index.css'
+import { createPinia } from 'pinia'
 import App from './App.vue'
 import { router } from './router'
 
@@ -7,4 +8,5 @@ const app = createApp(App)
 
 app.config.performance = true
 app.use(router)
+app.use(createPinia())
 app.mount('#root')

examples/vite/package.json

@@ -7,13 +7,14 @@
     "lint": "eslint --ext .js,.ts,.vue ./"
   },
   "dependencies": {
-    "vueflow": "workspace:*",
     "@vue-flow/background": "workspace:*",
     "@vue-flow/controls": "workspace:*",
     "@vue-flow/core": "workspace:*",
     "@vue-flow/minimap": "workspace:*",
     "@vue-flow/node-resizer": "workspace:*",
-    "@vue-flow/node-toolbar": "workspace:*"
+    "@vue-flow/node-toolbar": "workspace:*",
+    "pinia": "^2.0.35",
+    "vueflow": "workspace:*"
   },
   "devDependencies": {
     "@tooling/eslint-config": "workspace:*",

examples/vite/router.ts

@@ -122,6 +122,10 @@ export const routes: RouterOptions['routes'] = [
     path: '/easy-connect',
     component: () => import('./src/EasyConnect/EasyConnect.vue'),
   },
+  {
+    path: '/pinia',
+    component: () => import('./src/Pinia/PiniaExample.vue'),
+  },
 ]
 
 export const router = createRouter({

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