From 6503b3e9ed0cf125de3564f7d5ea1208489fed48 Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Sat, 8 Jun 2024 16:07:50 +0200 Subject: [PATCH] examples: update pinia example (#1458) * examples: update pinia example * chore(examples): update pinia dep * examples: add icons to pinia panel * docs(examples): update pinia example --- docs/examples/pinia/PiniaExample.vue | 2 +- examples/vite/package.json | 2 +- examples/vite/src/Pinia/Icon.vue | 32 ++++++ examples/vite/src/Pinia/PiniaExample.vue | 80 ++++++++++----- examples/vite/src/Pinia/store.ts | 125 +++++++++++++---------- pnpm-lock.yaml | 49 +++++---- 6 files changed, 181 insertions(+), 109 deletions(-) create mode 100644 examples/vite/src/Pinia/Icon.vue diff --git a/docs/examples/pinia/PiniaExample.vue b/docs/examples/pinia/PiniaExample.vue index df1b4118..c447ec19 100644 --- a/docs/examples/pinia/PiniaExample.vue +++ b/docs/examples/pinia/PiniaExample.vue @@ -4,7 +4,7 @@ import sdk from '@stackblitz/sdk' const el = ref() onMounted(() => { - sdk.embedProjectId(el.value!, 'vitejs-vite-ujrwcm', { + sdk.embedProjectId(el.value!, 'vitejs-vite-zk9hqt', { forceEmbedLayout: true, openFile: 'src/App.vue', height: 750, diff --git a/examples/vite/package.json b/examples/vite/package.json index d957c4a9..9d82ea70 100644 --- a/examples/vite/package.json +++ b/examples/vite/package.json @@ -14,7 +14,7 @@ "@vue-flow/minimap": "workspace:*", "@vue-flow/node-resizer": "workspace:*", "@vue-flow/node-toolbar": "workspace:*", - "pinia": "^2.1.6" + "pinia": "^2.1.7" }, "devDependencies": { "@tooling/eslint-config": "workspace:*", diff --git a/examples/vite/src/Pinia/Icon.vue b/examples/vite/src/Pinia/Icon.vue new file mode 100644 index 00000000..594fe4e3 --- /dev/null +++ b/examples/vite/src/Pinia/Icon.vue @@ -0,0 +1,32 @@ + + + diff --git a/examples/vite/src/Pinia/PiniaExample.vue b/examples/vite/src/Pinia/PiniaExample.vue index 93368bbe..0da70845 100644 --- a/examples/vite/src/Pinia/PiniaExample.vue +++ b/examples/vite/src/Pinia/PiniaExample.vue @@ -1,55 +1,79 @@ - diff --git a/examples/vite/src/Pinia/store.ts b/examples/vite/src/Pinia/store.ts index 0900f6b1..e33853a1 100644 --- a/examples/vite/src/Pinia/store.ts +++ b/examples/vite/src/Pinia/store.ts @@ -1,63 +1,80 @@ import { defineStore } from 'pinia' -import { isNode } from '@vue-flow/core' +import { ref } from 'vue' +import type { Edge, Node } 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 = [] +const useStore = defineStore('vue-flow-pinia', () => { + const nodes = ref([ + { + id: '1', + type: 'input', + label: 'Node 1', + position: { x: 250, y: 5 }, + class: 'light', }, - log() { - console.log('stored elements', this.elements) + { + id: '2', + label: 'Node 2', + position: { x: 100, y: 100 }, + class: 'light', }, - toggleClass() { - this.elements.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light')) + { + id: '3', + label: 'Node 3', + position: { x: 400, y: 100 }, + class: 'light', }, - updatePosition() { - this.elements.forEach((el) => { - if (isNode(el)) { - el.position = { - x: Math.random() * 400, - y: Math.random() * 400, - } - } - }) + { + id: '4', + label: 'Node 4', + position: { x: 400, y: 200 }, + class: 'light', }, - }, + ]) + + const edges = ref([ + { id: 'e1-2', source: '1', target: '2' }, + { id: 'e1-3', source: '1', target: '3' }, + { id: 'e3-4', source: '3', target: '4' }, + ]) + + const reset = () => { + edges.value = [] + nodes.value = [] + } + + const log = () => { + console.log('nodes', nodes.value, 'edges', edges.value) + } + + const toggleClass = () => { + nodes.value = nodes.value.map((node) => { + return { + ...node, + class: node.class === 'dark' ? 'light' : 'dark', + } + }) + } + + const updatePositions = () => { + nodes.value = nodes.value.map((node) => { + return { + ...node, + position: { + x: Math.random() * 400, + y: Math.random() * 400, + }, + } + }) + } + + return { + nodes, + edges, + reset, + log, + toggleClass, + updatePositions, + } }) export default useStore diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d7c7486f..9e2bb2c8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -132,7 +132,7 @@ importers: version: link:../../tooling/eslint-config nuxt: specifier: ^3.10.2 - version: 3.10.2(@parcel/watcher@2.3.0)(@types/node@18.18.4)(encoding@0.1.13)(eslint@8.51.0)(meow@6.1.1)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)) + version: 3.10.2(@parcel/watcher@2.3.0)(@types/node@18.18.4)(encoding@0.1.13)(eslint@8.51.0)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)) examples/quasar: dependencies: @@ -163,7 +163,7 @@ importers: devDependencies: '@quasar/app-vite': specifier: ^1.6.2 - version: 1.6.2(eslint@8.51.0)(pinia@2.1.6(typescript@4.9.5)(vue@3.3.4))(quasar@2.12.7)(rollup@4.8.0)(vue-router@4.2.5(vue@3.3.4))(vue@3.3.4) + version: 1.6.2(eslint@8.51.0)(pinia@2.1.7(vue@3.3.4))(quasar@2.12.7)(rollup@3.29.4)(vue-router@4.2.5(vue@3.3.4))(vue@3.3.4) '@tooling/eslint-config': specifier: workspace:* version: link:../../tooling/eslint-config @@ -201,8 +201,8 @@ importers: specifier: workspace:* version: link:../../packages/node-toolbar pinia: - specifier: ^2.1.6 - version: 2.1.6(typescript@4.9.5)(vue@3.3.4) + specifier: ^2.1.7 + version: 2.1.7(typescript@4.9.5)(vue@3.3.4) devDependencies: '@tooling/eslint-config': specifier: workspace:* @@ -5609,8 +5609,8 @@ packages: resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==} engines: {node: '>=6'} - pinia@2.1.6: - resolution: {integrity: sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==} + pinia@2.1.7: + resolution: {integrity: sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==} peerDependencies: '@vue/composition-api': ^1.4.0 typescript: '>=4.4.4' @@ -8698,12 +8698,12 @@ snapshots: '@nuxt/devalue@2.0.2': {} - '@nuxt/devtools-kit@1.0.8(nuxt@3.10.2(@parcel/watcher@2.3.0)(@types/node@18.18.4)(encoding@0.1.13)(eslint@8.51.0)(meow@6.1.1)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)))(rollup@4.8.0)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))': + '@nuxt/devtools-kit@1.0.8(nuxt@3.10.2(@parcel/watcher@2.3.0)(@types/node@18.18.4)(encoding@0.1.13)(eslint@8.51.0)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)))(rollup@4.8.0)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))': dependencies: '@nuxt/kit': 3.10.2(rollup@4.8.0) '@nuxt/schema': 3.10.2(rollup@4.8.0) execa: 7.2.0 - nuxt: 3.10.2(@parcel/watcher@2.3.0)(@types/node@18.18.4)(encoding@0.1.13)(eslint@8.51.0)(meow@6.1.1)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)) + nuxt: 3.10.2(@parcel/watcher@2.3.0)(@types/node@18.18.4)(encoding@0.1.13)(eslint@8.51.0)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)) vite: 5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0) transitivePeerDependencies: - rollup @@ -8722,10 +8722,10 @@ snapshots: rc9: 2.1.1 semver: 7.5.4 - '@nuxt/devtools@1.0.8(nuxt@3.10.2(@parcel/watcher@2.3.0)(@types/node@18.18.4)(encoding@0.1.13)(eslint@8.51.0)(meow@6.1.1)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)))(rollup@4.8.0)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))': + '@nuxt/devtools@1.0.8(nuxt@3.10.2(@parcel/watcher@2.3.0)(@types/node@18.18.4)(encoding@0.1.13)(eslint@8.51.0)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)))(rollup@4.8.0)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))': dependencies: '@antfu/utils': 0.7.7 - '@nuxt/devtools-kit': 1.0.8(nuxt@3.10.2(@parcel/watcher@2.3.0)(@types/node@18.18.4)(encoding@0.1.13)(eslint@8.51.0)(meow@6.1.1)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)))(rollup@4.8.0)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0)) + '@nuxt/devtools-kit': 1.0.8(nuxt@3.10.2(@parcel/watcher@2.3.0)(@types/node@18.18.4)(encoding@0.1.13)(eslint@8.51.0)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)))(rollup@4.8.0)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0)) '@nuxt/devtools-wizard': 1.0.8 '@nuxt/kit': 3.10.2(rollup@4.8.0) birpc: 0.2.17 @@ -8742,7 +8742,7 @@ snapshots: launch-editor: 2.6.1 local-pkg: 0.5.0 magicast: 0.3.3 - nuxt: 3.10.2(@parcel/watcher@2.3.0)(@types/node@18.18.4)(encoding@0.1.13)(eslint@8.51.0)(meow@6.1.1)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)) + nuxt: 3.10.2(@parcel/watcher@2.3.0)(@types/node@18.18.4)(encoding@0.1.13)(eslint@8.51.0)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)) nypm: 0.3.6 ohash: 1.1.3 pacote: 17.0.6 @@ -8833,7 +8833,7 @@ snapshots: '@nuxt/ui-templates@1.3.1': {} - '@nuxt/vite-builder@3.10.2(@types/node@18.18.4)(eslint@8.51.0)(meow@6.1.1)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vue-tsc@1.8.16(typescript@4.9.5))(vue@3.4.19(typescript@4.9.5))': + '@nuxt/vite-builder@3.10.2(@types/node@18.18.4)(eslint@8.51.0)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vue-tsc@1.8.16(typescript@4.9.5))(vue@3.4.19(typescript@4.9.5))': dependencies: '@nuxt/kit': 3.10.2(rollup@4.8.0) '@rollup/plugin-replace': 5.0.5(rollup@4.8.0) @@ -8867,7 +8867,7 @@ snapshots: unplugin: 1.7.1 vite: 5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0) vite-node: 1.3.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0) - vite-plugin-checker: 0.6.4(eslint@8.51.0)(meow@6.1.1)(optionator@0.9.3)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)) + vite-plugin-checker: 0.6.4(eslint@8.51.0)(optionator@0.9.3)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)) vue: 3.4.19(typescript@4.9.5) vue-bundle-renderer: 2.0.0 transitivePeerDependencies: @@ -8955,7 +8955,7 @@ snapshots: '@polka/url@1.0.0-next.24': {} - '@quasar/app-vite@1.6.2(eslint@8.51.0)(pinia@2.1.6(typescript@4.9.5)(vue@3.3.4))(quasar@2.12.7)(rollup@4.8.0)(vue-router@4.2.5(vue@3.3.4))(vue@3.3.4)': + '@quasar/app-vite@1.6.2(eslint@8.51.0)(pinia@2.1.7(vue@3.3.4))(quasar@2.12.7)(rollup@3.29.4)(vue-router@4.2.5(vue@3.3.4))(vue@3.3.4)': dependencies: '@quasar/render-ssr-error': 1.0.2 '@quasar/vite-plugin': 1.5.0(@vitejs/plugin-vue@2.3.4(vite@2.9.16(sass@1.32.12))(vue@3.3.4))(quasar@2.12.7)(vite@2.9.16(sass@1.32.12))(vue@3.3.4) @@ -8985,7 +8985,7 @@ snapshots: open: 8.4.2 quasar: 2.12.7 register-service-worker: 1.7.2 - rollup-plugin-visualizer: 5.9.2(rollup@4.8.0) + rollup-plugin-visualizer: 5.9.2(rollup@3.29.4) sass: 1.32.12 semver: 7.5.4 serialize-javascript: 6.0.1 @@ -8996,7 +8996,7 @@ snapshots: webpack-merge: 5.9.0 optionalDependencies: eslint: 8.51.0 - pinia: 2.1.6(typescript@4.9.5)(vue@3.3.4) + pinia: 2.1.7(typescript@4.9.5)(vue@3.3.4) transitivePeerDependencies: - less - rollup @@ -13121,15 +13121,15 @@ snapshots: optionalDependencies: fsevents: 2.3.3 - nuxt@3.10.2(@parcel/watcher@2.3.0)(@types/node@18.18.4)(encoding@0.1.13)(eslint@8.51.0)(meow@6.1.1)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)): + nuxt@3.10.2(@parcel/watcher@2.3.0)(@types/node@18.18.4)(encoding@0.1.13)(eslint@8.51.0)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)): dependencies: '@nuxt/devalue': 2.0.2 - '@nuxt/devtools': 1.0.8(nuxt@3.10.2(@parcel/watcher@2.3.0)(@types/node@18.18.4)(encoding@0.1.13)(eslint@8.51.0)(meow@6.1.1)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)))(rollup@4.8.0)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0)) + '@nuxt/devtools': 1.0.8(nuxt@3.10.2(@parcel/watcher@2.3.0)(@types/node@18.18.4)(encoding@0.1.13)(eslint@8.51.0)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)))(rollup@4.8.0)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0)) '@nuxt/kit': 3.10.2(rollup@4.8.0) '@nuxt/schema': 3.10.2(rollup@4.8.0) '@nuxt/telemetry': 2.5.3(rollup@4.8.0) '@nuxt/ui-templates': 1.3.1 - '@nuxt/vite-builder': 3.10.2(@types/node@18.18.4)(eslint@8.51.0)(meow@6.1.1)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vue-tsc@1.8.16(typescript@4.9.5))(vue@3.4.19(typescript@4.9.5)) + '@nuxt/vite-builder': 3.10.2(@types/node@18.18.4)(eslint@8.51.0)(optionator@0.9.3)(rollup@4.8.0)(sass@1.32.12)(terser@5.21.0)(typescript@4.9.5)(vue-tsc@1.8.16(typescript@4.9.5))(vue@3.4.19(typescript@4.9.5)) '@unhead/dom': 1.8.10 '@unhead/ssr': 1.8.10 '@unhead/vue': 1.8.10(vue@3.4.19(typescript@4.9.5)) @@ -13455,9 +13455,9 @@ snapshots: pify@4.0.1: {} - pinia@2.1.6(typescript@4.9.5)(vue@3.3.4): + pinia@2.1.7(typescript@4.9.5)(vue@3.3.4): dependencies: - '@vue/devtools-api': 6.5.0 + '@vue/devtools-api': 6.5.1 vue: 3.3.4 vue-demi: 0.14.6(vue@3.3.4) optionalDependencies: @@ -13939,14 +13939,14 @@ snapshots: optionalDependencies: rollup: 4.8.0 - rollup-plugin-visualizer@5.9.2(rollup@4.8.0): + rollup-plugin-visualizer@5.9.2(rollup@3.29.4): dependencies: open: 8.4.2 picomatch: 2.3.1 source-map: 0.7.4 yargs: 17.7.2 optionalDependencies: - rollup: 4.8.0 + rollup: 3.29.4 rollup@2.77.3: optionalDependencies: @@ -14914,7 +14914,7 @@ snapshots: - supports-color - terser - vite-plugin-checker@0.6.4(eslint@8.51.0)(meow@6.1.1)(optionator@0.9.3)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)): + vite-plugin-checker@0.6.4(eslint@8.51.0)(optionator@0.9.3)(typescript@4.9.5)(vite@5.1.1(@types/node@18.18.4)(sass@1.32.12)(terser@5.21.0))(vue-tsc@1.8.16(typescript@4.9.5)): dependencies: '@babel/code-frame': 7.22.13 ansi-escapes: 4.3.2 @@ -14934,7 +14934,6 @@ snapshots: vscode-uri: 3.0.8 optionalDependencies: eslint: 8.51.0 - meow: 6.1.1 optionator: 0.9.3 typescript: 4.9.5 vue-tsc: 1.8.16(typescript@4.9.5)