docs: update examples

docs/components/examples/custom-node/CustomNode.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { Handle, Position } from '@vue-flow/core'
 import { computed } from 'vue'
-import { presets } from './presets.js'
+import { colors } from './presets.js'
 
 const props = defineProps({
   data: {
@@ -12,8 +12,6 @@ const props = defineProps({
 
 const emit = defineEmits(['change', 'gradient'])
 
-const onConnect = (params) => console.log('handle onConnect', params)
-
 const onSelect = (color) => {
   emit('change', color)
 }
@@ -22,20 +20,8 @@ const onGradient = () => {
   emit('gradient')
 }
 
-const colors = computed(() => {
-  return Object.keys(presets).map((color) => {
-    return {
-      name: color,
-      value: presets[color],
-    }
-  })
-})
-
-const selectedColor = computed(() => {
-  return colors.value.find((color) => color.value === props.data.color)
-})
-
 const sourceHandleStyleA = computed(() => ({ backgroundColor: props.data.color, filter: 'invert(100%)', top: '10px' }))
+
 const sourceHandleStyleB = computed(() => ({
   backgroundColor: props.data.color,
   filter: 'invert(100%)',
@@ -46,14 +32,18 @@ const sourceHandleStyleB = computed(() => ({
 
 <template>
   <div>Select a color</div>
+
   <div
     style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 90%; margin: auto; gap: 3px"
   >
     <template v-for="color of colors" :key="color.name">
       <button :title="color.name" :style="{ backgroundColor: color.value }" type="button" @click="onSelect(color)"></button>
     </template>
+
     <button class="animated-bg-gradient" title="gradient" type="button" @click="onGradient"></button>
   </div>
+
   <Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
+
   <Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
 </template>