examples: add initial class to basic

examples/Header.vue

@@ -4,17 +4,26 @@ import { routes } from './router'
 
 const router = useRouter()
 const route = useRoute()
-const onChange = (event: any) => {
+const onChange = (event: Event) => {
-  router.push(event.target.value)
+  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">
+      <template v-for="r of computedRoutes" :key="r.path">
-        <option v-if="r.path !== '/'" :value="r.path">
+        <option :value="r.path">
-          {{ r.path.substr(1, r.path.length) }}
+          {{ r.label }}
         </option>
       </template>
     </select>

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: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
-  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
-  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
+  { 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()
 })

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: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
-        { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
+        { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
-        { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
+        { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
-        { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
+        { 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,