chore(docs): update save and restore example

Author: bcakmakoglu

docs/examples/index.ts

@@ -7,7 +7,7 @@ import { StressApp, StressCSS, StressUtils } from './stress'
 import { UpdateEdgeApp } from './update-edge'
 import { UpdateNodeApp, UpdateNodeCSS } from './update-node'
 import { ValidationApp, ValidationCSS, ValidationCustomInput, ValidationCustomNode } from './validation'
-import { SaveRestoreApp, SaveRestoreCSS, SaveRestoreControls } from './save-restore'
+import { SaveRestoreApp, SaveRestoreCSS, SaveRestoreControls, SaveRestoreIcon } from './save-restore'
 import { DndApp, DndBackground, DndCSS, DndScript, DndSidebar } from './dnd'
 import { HiddenApp } from './hidden'
 import { InteractionApp, InteractionCSS, InteractionControls } from './interaction'
@@ -71,6 +71,7 @@ export const exampleImports = {
   saveRestore: {
     'App.vue': SaveRestoreApp,
     'Controls.vue': SaveRestoreControls,
+    'Icon.vue': SaveRestoreIcon,
     'style.css': SaveRestoreCSS,
   },
   dnd: {

docs/examples/math/Icon.vue

@@ -4,7 +4,7 @@ defineProps(['name'])
 
 <template>
   <svg v-if="name === '+'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" />
+    <path fill="currentColor" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z" />
   </svg>
 
   <svg v-else-if="name === '-'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

docs/examples/math/style.css

@@ -57,7 +57,7 @@
 }
 
 .vue-flow__node-operator.selected {
-  box-shadow: 0 0 0 2px #0EA5E9;
+  box-shadow: 0 0 0 2px #2563eb;
 }
 
 .vue-flow__node-operator .buttons {
@@ -86,12 +86,12 @@
 }
 
 .vue-flow__node-operator button:hover {
-  background-color: #0EA5E9;
+  background-color: #2563eb;
   transition: background-color 0.2s;
 }
 
 .vue-flow__node-operator button.selected {
-  background-color: #0EA5E9;
+  background-color: #2563eb;
 }
 
 .vue-flow__node-operator .vue-flow__handle[data-handleid="target-a"] {
@@ -103,7 +103,7 @@
 }
 
 .vue-flow__node-operator .vue-flow__handle {
-  background-color: #0EA5E9;
+  background-color: #2563eb;
 }
 
 .vue-flow__node-result {

docs/examples/save-restore/App.vue

@@ -1,13 +1,18 @@
-<script lang="ts" setup>
+<script setup>
 import { ref } from 'vue'
 import { VueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
 import SaveRestoreControls from './Controls.vue'
 
 const nodes = ref([{ id: '1', label: 'Node 1', position: { x: 100, y: 100 } }])
+
+const edges = ref([])
 </script>
 
 <template>
-  <VueFlow :nodes="nodes">
+  <VueFlow :nodes="nodes" :edges="edges">
     <SaveRestoreControls />
+
+    <Background />
   </VueFlow>
 </template>

docs/examples/save-restore/Controls.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { Panel, useVueFlow } from '@vue-flow/core'
+import Icon from './Icon.vue'
 
-const flowKey = 'example-flow'
+const flowKey = 'vue-flow--save-restore'
 
 const { nodes, addNodes, dimensions, toObject, fromObject } = useVueFlow()
 
@@ -31,9 +32,17 @@ function onAdd() {
 </script>
 
 <template>
-  <Panel position="top-right" class="save-restore-controls">
-    <button style="background-color: #33a6b8" @click="onSave">save</button>
-    <button style="background-color: #113285" @click="onRestore">restore</button>
-    <button style="background-color: #6f3381" @click="onAdd">add node</button>
+  <Panel position="top-right">
+    <div class="buttons">
+      <button title="save graph" @click="onSave">
+        <Icon name="save" />
+      </button>
+      <button title="restore graph" @click="onRestore">
+        <Icon name="restore" />
+      </button>
+      <button title="add random node" @click="onAdd">
+        <Icon name="add" />
+      </button>
+    </div>
   </Panel>
 </template>

docs/examples/save-restore/Icon.vue

@@ -0,0 +1,23 @@
+<script setup>
+defineProps(['name'])
+</script>
+
+<template>
+  <svg v-if="name === 'save'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M21 7v12q0 .825-.587 1.413T19 21H5q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h12zm-9 11q1.25 0 2.125-.875T15 15t-.875-2.125T12 12t-2.125.875T9 15t.875 2.125T12 18m-6-8h9V6H6z"
+    />
+  </svg>
+
+  <svg v-else-if="name === 'restore'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="m12 17l4-4l-1.4-1.4l-1.6 1.55V9h-2v4.15L9.4 11.6L8 13zm-6 5q-.825 0-1.412-.587T4 20V8l6-6h8q.825 0 1.413.588T20 4v16q0 .825-.587 1.413T18 22zm0-2h12V4h-7.15L6 8.85zm0 0h12z"
+    />
+  </svg>
+
+  <svg v-else-if="name === 'add'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z" />
+  </svg>
+</template>

docs/examples/save-restore/index.ts

@@ -1,3 +1,4 @@
 export { default as SaveRestoreApp } from './App.vue?raw'
 export { default as SaveRestoreControls } from './Controls.vue?raw'
+export { default as SaveRestoreIcon } from './Icon.vue?raw'
 export { default as SaveRestoreCSS } from './style.css?inline'

docs/examples/save-restore/style.css

@@ -1,20 +1,31 @@
-.save-restore-controls {
-  font-size: 12px;
+.vue-flow__panel {
+  background-color: #2d3748;
+  padding: 10px;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
-.save-restore-controls button {
-  margin-left: 5px;
-  padding: 5px;
-  border-radius: 5px;
-  font-weight: 700;
-  text-transform: uppercase;
-  color: white;
-  -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
+.vue-flow__panel .buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.vue-flow__panel button {
+  border: none;
   cursor: pointer;
+  background-color: #4a5568;
+  border-radius: 8px;
+  color: white;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  width: 40px;
+  height: 40px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.save-restore-controls button:hover {
-  transform: scale(105%);
-  transition: 250ms all ease-in-out;
+.vue-flow__panel button:hover {
+  background-color: #2563eb;
+  transition: background-color 0.2s;
 }