From bb30db7c08708672e7981736c505a1f27ea3a688 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 22 Apr 2022 15:02:34 +0200
Subject: [PATCH] examples: add initial class to basic

---
 examples/Header.vue                    | 19 ++++++++++++++-----
 examples/src/Basic/Basic.vue           |  9 +++++----
 examples/src/Basic/BasicOptionsAPI.vue |  8 ++++----
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/examples/Header.vue b/examples/Header.vue
index 559fb4d4..cfcf1302 100644
--- a/examples/Header.vue
+++ b/examples/Header.vue
@@ -4,17 +4,26 @@ import { routes } from './router'
 
 const router = useRouter()
 const route = useRoute()
-const onChange = (event: any) => {
-  router.push(event.target.value)
+const onChange = (event: Event) => {
+  router.push((event.target as HTMLSelectElement).value)
 }
+
+const computedRoutes = computed(() => {
+  return routes
+    .filter((r) => r.path !== '/')
+    .map((r) => ({
+      path: r.path,
+      label: r.path.substring(1),
+    }))
+})
 </script>
 <template>
   <header>
     <a class="logo" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow Dev </a>
     <select v-model="route.path" @change="onChange">
-      <template v-for="r of routes" :key="r.path">
-        <option v-if="r.path !== '/'" :value="r.path">
-          {{ r.path.substr(1, r.path.length) }}
+      <template v-for="r of computedRoutes" :key="r.path">
+        <option :value="r.path">
+          {{ r.label }}
         </option>
       </template>
     </select>
diff --git a/examples/src/Basic/Basic.vue b/examples/src/Basic/Basic.vue
index 529ed115..af40525d 100644
--- a/examples/src/Basic/Basic.vue
+++ b/examples/src/Basic/Basic.vue
@@ -2,10 +2,10 @@
 import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '@braks/vue-flow'
 
 const elements = ref<Elements>([
-  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
-  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
-  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
+  { 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', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ])
@@ -14,6 +14,7 @@ const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges } = useVueFlo
   minZoom: 0.2,
   maxZoom: 4,
 })
+
 onPaneReady(({ fitView }) => {
   fitView()
 })
diff --git a/examples/src/Basic/BasicOptionsAPI.vue b/examples/src/Basic/BasicOptionsAPI.vue
index 8f520f95..25bd51eb 100644
--- a/examples/src/Basic/BasicOptionsAPI.vue
+++ b/examples/src/Basic/BasicOptionsAPI.vue
@@ -8,10 +8,10 @@ export default defineComponent({
     return {
       instance: null as FlowInstance | null,
       elements: [
-        { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
-        { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
-        { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
-        { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
+        { 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', animated: true },
         { id: 'e1-3', source: '1', target: '3' },
       ] as Elements,