feat(docs): replace vitepress with vuepress

* vitepress too limited

docs/components/demo/Demo.vue

@@ -0,0 +1,3 @@
+<template>
+  Demo!
+</template>

docs/components/home/Additional.vue

@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import { Position, Elements, VueFlow, Controls, MiniMap, Background, useVueFlow } from "@braks/vue-flow";
+
+const elements = ref<Elements>([
+  {
+    id: "1",
+    style: { width: "75px" },
+    type: "input",
+    sourcePosition: Position.Right,
+    label: "input",
+    position: { x: 25, y: 120 }
+  },
+  {
+    id: "2",
+    label: "A",
+    targetPosition: Position.Left,
+    sourcePosition: Position.Right,
+    position: { x: 150, y: 25 },
+    style: { width: "75px" }
+  },
+  {
+    id: "3",
+    label: "B",
+    targetPosition: Position.Left,
+    sourcePosition: Position.Right,
+    position: { x: 250, y: 25 },
+    style: { width: "75px" }
+  },
+  {
+    id: "4",
+    label: "C",
+    targetPosition: Position.Left,
+    sourcePosition: Position.Right,
+    position: { x: 350, y: 25 },
+    style: { width: "75px" }
+  },
+  {
+    id: "5",
+    label: "D",
+    targetPosition: Position.Left,
+    sourcePosition: Position.Right,
+    position: { x: 150, y: 220 },
+    style: { width: "75px" }
+  },
+  {
+    id: "6",
+    label: "E",
+    targetPosition: Position.Left,
+    sourcePosition: Position.Right,
+    position: { x: 250, y: 220 },
+    style: { width: "75px" }
+  },
+  {
+    id: "7",
+    label: "F",
+    targetPosition: Position.Left,
+    sourcePosition: Position.Right,
+    position: { x: 350, y: 220 },
+    style: { width: "75px" }
+  },
+  {
+    id: "8",
+    type: "output",
+    label: "Output",
+    targetPosition: Position.Left,
+    position: { x: 500, y: 120 },
+    style: { width: "75px" }
+  },
+  { id: "e1-2", type: "step", source: "1", target: "2" },
+  { id: "e2-3", type: "step", source: "2", target: "3" },
+  { id: "e3-4", type: "step", source: "3", target: "4" },
+  { id: "e4-8", type: "step", source: "4", target: "8" },
+  { id: "e1-5", type: "step", source: "1", target: "5", animated: true },
+  { id: "e5-6", type: "step", source: "5", target: "6", animated: true },
+  { id: "e6-7", type: "step", source: "6", target: "7", animated: true },
+  { id: "e6-8", type: "step", source: "7", target: "8", animated: true }
+]);
+
+const emit = defineEmits(["pane"]);
+
+const { onPaneReady } = useVueFlow({
+  modelValue: elements.value,
+  zoomOnScroll: false,
+  panOnDrag: false,
+});
+
+onPaneReady((i) => emit('pane', i))
+</script>
+<template>
+  <div
+    class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase overflow-hidden border-2"
+  >
+    <VueFlow>
+      <Controls :show-interactive="false" />
+      <MiniMap mask-color="rgba(16, 185, 129, 0.5)" class="transform scale-60 origin-bottom-right opacity-75" />
+      <Background variant="lines" pattern-color="#aaa" :gap="46" />
+    </VueFlow>
+  </div>
+  <div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12">
+    <div class="flex flex-col gap-2 items-center md:items-start">
+      <h1>Additional Components</h1>
+      <p>
+        Vue Flow includes a MiniMap, Controls and Background, as well as a ton of utilities and a supercharged
+        composable to control the internal state
+        outside the Vue Flow component.
+      </p>
+      <a class="button max-w-max" href="/docs">
+        Documentation
+      </a>
+    </div>
+  </div>
+</template>

docs/components/home/Banner.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import data from '../../.data.json'
+import Star from '~icons/carbon/star'
+import Download from '~icons/carbon/download'
+</script>
+<template>
+  <div class="w-full bg-black text-white">
+    <div class="max-w-9/12 md:max-w-3/4 lg:max-w-4xl m-auto py-4 md:py-12">
+      <div class="grid md:grid-cols-3 gap-3 md:gap-0 text-center <md:divide-y md:divide-x divide-blue-200">
+        <div class="grid grid-rows-auto gap-2 py-4 md:py-0">
+          <div class="text-gray-400 font-semibold text-lg">Stargazers</div>
+          <div class="font-bold text-3xl flex gap-2 items-center justify-center">
+            <Star /> {{ data.stargazers_count }}
+          </div>
+        </div>
+        <div class="grid grid-rows-2 gap-2 py-4 md:py-0">
+          <div class="text-gray-400 font-semibold text-lg">Downloads (last month)</div>
+          <div class="font-bold text-3xl flex gap-2 items-center justify-center">
+            <Download /> {{ data.downloads }}
+          </div>
+        </div>
+        <div class="grid grid-rows-2 gap-2 py-4 md:py-0">
+          <div class="text-gray-400 font-semibold text-lg">License</div>
+          <div class="font-bold text-3xl">
+            {{ data.license.key.toUpperCase() }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

docs/components/home/Basic.vue

@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import { GraphEdge, useVueFlow, VueFlow, Background, Controls, ClassFunc } from "@braks/vue-flow";
+
+const getClass: ClassFunc = (el) => {
+  const classes = ["font-semibold", "!border-2", "transition-colors", "duration-300", "ease-in-out"];
+  if (el.selected) classes.push(
+    ...[
+      "!border-green-500/80",
+      "!shadow-md",
+      "!shadow-green-500/50",
+      "!bg-green-100/45",
+      "!text-gray-700"
+    ]
+  );
+
+  return classes.join(" ");
+};
+
+const emit = defineEmits(["pane"]);
+
+const { onPaneReady } = useVueFlow({
+  modelValue: [
+    {
+      id: "1",
+      type: "input",
+      label: "input",
+      position: { x: 250, y: 5 },
+      class: getClass
+    },
+    {
+      id: "2",
+      label: "default",
+      position: { x: 100, y: 100 },
+      class: getClass
+    },
+    { id: "3", label: "default", position: { x: 400, y: 100 }, class: getClass },
+    {
+      id: "4",
+      type: "output",
+      label: "output",
+      position: { x: 250, y: 225 },
+      class: getClass
+    },
+    {
+      id: "e1-2",
+      source: "1",
+      label: "animated edge",
+      target: "2",
+      animated: true,
+      class: (el: GraphEdge) => {
+        const classes = ["transition-colors duration-300", el.sourceNode.selected ? "font-semibold" : ""];
+        return classes.join(" ");
+      },
+      style: (el: GraphEdge) => {
+        const sourceNodeSelected = el.sourceNode.selected;
+        return {
+          transition: "stroke ease-in-out 300ms",
+          stroke: el.selected || sourceNodeSelected ? "var(--secondary)" : undefined
+        };
+      }
+    },
+    {
+      id: "e1-3",
+      source: "1",
+      target: "3",
+      label: "default edge",
+      class: (el: GraphEdge) => {
+        const classes = ["transition-colors duration-300", el.sourceNode.selected ? 'font-semibold' : '']
+        return classes.join(" ")
+      },
+      style: (el: GraphEdge) => {
+        const sourceNodeSelected = el.sourceNode.selected;
+        return {
+          transition: "stroke ease-in-out 300ms",
+          stroke: el.selected || sourceNodeSelected ? "red" : undefined
+        };
+      }
+    },
+    {
+      id: "e2-4",
+      source: "2",
+      target: "4",
+      type: "step",
+      animated: true,
+      class: (el: GraphEdge) => {
+        const classes = ["transition-colors duration-300", el.sourceNode.selected ? 'font-semibold' : '']
+        return classes.join(" ")
+      },
+      style: (el: GraphEdge) => {
+        const sourceNodeSelected = el.sourceNode.selected;
+        return {
+          transition: "stroke ease-in-out 300ms",
+          stroke: el.selected || sourceNodeSelected ? "var(--secondary)" : undefined
+        };
+      }
+    }
+  ]
+});
+
+onPaneReady((i) => emit("pane", i));
+</script>
+<template>
+  <div class="md:max-w-1/3 flex flex-col justify-center">
+    <div class="flex flex-col gap-2 items-center md:items-start">
+      <h1>Feature-rich</h1>
+      <p>
+        Vue Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection,
+        controls,
+        several event handlers and more.
+      </p>
+      <a class="button max-w-max" href="/docs">
+        Documentation
+      </a>
+    </div>
+  </div>
+  <div
+    class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-secondary overflow-hidden">
+    <VueFlow class="basic">
+      <Controls class="md:!left-auto md:!right-[10px]" />
+      <Background pattern-color="#aaa" :gap="16" />
+    </VueFlow>
+  </div>
+</template>
+<style>
+.basic .vue-flow__node-input.selected .vue-flow__handle {
+  @apply bg-green-500;
+}
+
+.basic .vue-flow__node-default.selected .vue-flow__handle {
+  @apply bg-green-500;
+}
+
+.basic .vue-flow__node-output.selected .vue-flow__handle {
+  @apply bg-green-500;
+}
+</style>

docs/components/home/Features.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { reactive, watch } from "vue";
+import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
+import { FlowInstance } from "@braks/vue-flow";
+
+const breakpoints = useBreakpoints(breakpointsTailwind);
+
+const instances = reactive<FlowInstance[]>([]);
+
+const onLoad = (instance: FlowInstance) => {
+  instances.push(instance);
+  instance.fitView();
+};
+
+const fitViews = () => {
+  instances.forEach(i => i.fitView());
+};
+
+watch(
+  [
+    breakpoints.sm,
+    breakpoints.md,
+    breakpoints.lg,
+    breakpoints.xl,
+    breakpoints["2xl"]
+  ],
+  () => setTimeout(() => {
+    fitViews()
+  }, 5)
+);
+</script>
+<template>
+  <div class="w-full bg-gray-50">
+    <div
+      class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 m-auto py-12 md:py-24 text-center md:text-left">
+      <div class="flex flex-col md:flex-row gap-12 md:gap-24">
+        <Basic @pane="onLoad" />
+      </div>
+      <div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
+        <RGB @pane="onLoad" />
+      </div>
+      <div class="flex flex-col md:flex-row flex-unwrap gap-12 md:gap-24">
+        <Nested @pane="onLoad" />
+      </div>
+      <div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
+        <Additional @pane="onLoad" />
+      </div>
+    </div>
+  </div>
+</template>
+<style>
+.button {
+  @apply
+  shadow-lg transition-colors duration-200 hover:bg-black font-semibold text-lg mt-4 px-5 py-3 rounded-xl bg-green-500 text-white;
+}
+</style>

docs/components/home/Home.vue

@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import { watch } from 'vue'
+import { VueFlow, Handle, Position, useVueFlow } from '@braks/vue-flow'
+import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
+import BoxNode from './nodes/Box.vue'
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+
+const { dimensions, instance, onPaneReady, getNodes, getNode } = useVueFlow({
+  nodes: [
+    { id: 'intro', type: 'box', position: { x: 0, y: 0 }, draggable: true },
+    { id: 'examples', type: 'box', position: { x: -50, y: 400 } },
+    { id: 'documentation', type: 'box', position: { x: 300, y: 400 } },
+  ],
+  edges: [
+    {
+      id: 'eintro-examples',
+      type: 'smoothstep',
+      sourceHandle: 'a',
+      source: 'intro',
+      target: 'examples',
+      animated: true,
+      style: { strokeWidth: 2, stroke: '#8b5cf6' },
+    },
+    {
+      id: 'eintro-documentation',
+      type: 'smoothstep',
+      sourceHandle: 'a',
+      source: 'intro',
+      target: 'documentation',
+      animated: true,
+      style: { strokeWidth: 2, stroke: '#f97316' },
+    },
+  ],
+  elementsSelectable: true,
+  nodesDraggable: false,
+  panOnDrag: false,
+  zoomOnScroll: false,
+})
+
+onPaneReady(async ({ fitView }) => {
+  fitView({
+    nodes: ['intro', 'examples', 'documentation'],
+    duration: 1500,
+  })
+
+  setTimeout(() => {
+    watch([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']], () =>
+      setTimeout(() => {
+        instance.value?.fitView()
+      }, 5),
+    )
+  }, 1500)
+})
+</script>
+<template>
+  <div class="bg-white h-[90vh] md:h-[75vh]">
+    <VueFlow class="dark:bg-black bg-white">
+      <template #node-box="props">
+        <template v-if="props.id === 'intro'">
+          <div class="max-w-[500px]">
+            <BoxNode class="bg-green-500 text-white">
+              <div class="font-mono flex flex-col gap-4 p-4 items-center">
+                <h1 class="pointer-events-none text-2xl lg:text-4xl text-center">Visualize your ideas with Vue Flow</h1>
+                <h2 class="pointer-events-none text-lg lg:text-xl font-normal">
+                  A customizable Vue.js library for building node-based editors and diagrams.
+                </h2>
+              </div>
+            </BoxNode>
+          </div>
+        </template>
+        <template v-else-if="props.id === 'documentation'">
+          <div class="flex">
+            <a class="link group bg-orange-500" href="/docs"> Read The Documentation </a>
+          </div>
+          <Handle type="target" :position="Position.Top" />
+          <Handle type="source" :position="Position.Bottom" />
+        </template>
+        <template v-else-if="props.id === 'examples'">
+          <div class="flex">
+            <a class="link group bg-purple-500" href="/examples"> Check The Examples </a>
+          </div>
+          <Handle type="target" :position="Position.Top" />
+          <Handle type="source" :position="Position.Bottom" />
+        </template>
+      </template>
+    </VueFlow>
+  </div>
+</template>
+<style scoped>
+.link {
+  @apply flex
+  gap-3
+  items-center
+  p-4
+  shadow-lg
+  transform
+  transition-transform
+  duration-300
+  hover:scale-102
+  transition-colors
+  ease-in-out
+  rounded-lg
+  hover:bg-black
+  text-white
+  font-semibold
+  text-lg;
+}
+
+button:focus {
+  outline: none;
+}
+</style>

docs/components/home/Nested.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { ConnectionMode, useVueFlow, VueFlow, Background, Controls } from "@braks/vue-flow";
+
+const emit = defineEmits(['pane'])
+const nodeClasses = ["!normal-case font-semibold !text-white", "!border-1", "shadow-md"].join(" ");
+const childClasses = nodeClasses + " !bg-green-500/70 !border-white";
+
+const { onPaneReady } = useVueFlow({
+  fitViewOnInit: true,
+  connectionMode: ConnectionMode.Loose,
+  zoomOnScroll: false,
+  preventScrolling: false,
+  translateExtent: [[-500, -100], [600, 500]],
+  nodes: [
+    { id: "1", type: "input", label: "Outer Node", position: { x: 0, y: 0 }, class: childClasses },
+    {
+      id: "2",
+      label: "Parent Node",
+      position: { x: -125, y: 100 },
+      class: nodeClasses + " !bg-green-500/30 !border-green-500",
+      style: { width: "400px", height: "160px" }
+    },
+    {
+      id: "2a",
+      label: "Child Node",
+      position: { x: 17, y: 30 },
+      parentNode: "2",
+      extent: 'parent',
+      class: childClasses
+    },
+    { id: "2b", label: "Child Node", position: { x: 225, y: 30 }, parentNode: "2", extent: 'parent', class: childClasses },
+    { id: "2c", label: "Child Node", position: { x: 125, y: 100 }, parentNode: "2", extent: 'parent', class: childClasses },
+    { id: "3", type: "output", label: "Outer Node", position: { x: 0, y: 300 }, class: childClasses },
+  ],
+  edges: [
+    { id: "e1-2a", source: "1", target: "2a", type: 'smoothstep', style: { stroke: 'white', strokeWidth: '2' } },
+    { id: "e2-3", source: "2", target: "3", type: 'smoothstep', style: { stroke: 'white', strokeWidth: '2' } }
+  ]
+});
+
+onPaneReady((i) => emit('pane', i))
+</script>
+<template>
+  <div class="md:max-w-1/3 flex flex-col justify-center <md:pt-12">
+    <div class="flex flex-col gap-2 items-center md:items-start">
+      <h1>Nested- & Subflows</h1>
+      <p>
+        Vue Flow comes with built-in support for nested nodes and nested flows.
+      </p>
+      <a class="button max-w-max" href="/docs">
+        Documentation
+      </a>
+    </div>
+  </div>
+  <div
+    class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-green-500 overflow-hidden">
+    <VueFlow class="nested">
+      <Controls class="md:!left-auto md:!right-[10px]" />
+      <Background pattern-color="#aaa" class="!bg-gray-800" :gap="18" />
+    </VueFlow>
+  </div>
+</template>
+<style>
+.nested .vue-flow__handle {
+  opacity: 0;
+}
+</style>

docs/components/home/RGB.vue

@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import {
+  BackgroundVariant,
+  VueFlow,
+  Background,
+  Controls,
+  MiniMap,
+  GraphNode,
+  MiniMapNodeFunc,
+  useVueFlow
+} from "@braks/vue-flow";
+import { templateRef } from "@vueuse/core";
+import CustomEdge from "./edges/Custom.vue";
+import RGBNode from "./nodes/Input.vue";
+import RGBOutputNode from "./nodes/Output.vue";
+
+type Colors = {
+  red: number
+  green: number
+  blue: number
+}
+
+const emit = defineEmits(["pane"]);
+
+const { id, onPaneReady, store } = useVueFlow({
+  id: "rgb-flow",
+  nodes: [
+    { id: "1", type: "rgb", data: { color: "g" }, position: { x: -25, y: 0 } },
+    { id: "2", type: "rgb", data: { color: "r" }, position: { x: 50, y: -110 } },
+    { id: "3", type: "rgb", data: { color: "b" }, position: { x: 0, y: 110 } },
+    { id: "4", type: "rgb-output", label: "RGB", position: { x: 400, y: -25 } }
+  ],
+  edges: [
+    { id: "e1-4", type: "rgb-line", data: { color: "green" }, source: "1", target: "4", animated: true },
+    { id: "e2-4", type: "rgb-line", data: { color: "red" }, source: "2", target: "4", animated: true },
+    { id: "e3-4", type: "rgb-line", data: { color: "blue" }, source: "3", target: "4", animated: true }
+  ],
+  zoomOnScroll: false,
+  nodeExtent: [[-50, -150], [500, 300]]
+});
+
+onPaneReady((i) => emit("pane", i));
+
+const el = templateRef<HTMLDivElement>("el", null);
+
+const color = ref<Colors>({
+  red: 222,
+  green: 45,
+  blue: 140
+});
+
+const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val));
+
+const nodeColor: MiniMapNodeFunc = (node: GraphNode) => {
+  switch (node.id) {
+    case "1":
+      return "green";
+    case "2":
+      return "red";
+    case "3":
+      return "blue";
+    case "4":
+      return `rgb(${color.value.red}, ${color.value.green}, ${color.value.blue})`;
+  }
+};
+</script>
+<template>
+  <div
+    ref="el"
+    class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase overflow-hidden bg-gray-800 border-2"
+    :style="{ borderColor: `rgb(${color.red}, ${color.green}, ${color.blue})` }">
+    <VueFlow class="relative font-mono">
+      <template #edge-rgb-line="rgbLineProps">
+        <CustomEdge
+          v-bind="{ ...rgbLineProps, data: { text: color[rgbLineProps.data?.color], ...rgbLineProps.data } }" />
+      </template>
+      <template #node-rgb="rgbProps">
+        <RGBNode v-bind="rgbProps" :amount="color" @change="onChange" />
+      </template>
+      <template #node-rgb-output="rgbOutputProps">
+        <RGBOutputNode v-bind="rgbOutputProps" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
+      </template>
+      <Controls class="transform scale-75 md:scale-100 origin-bottom-left" />
+      <Background :variant="BackgroundVariant.Lines" :pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`"
+                  :gap="48"
+                  :size="1" />
+      <MiniMap class="hidden sm:block transform scale-25 md:scale-50 lg:scale-75 origin-bottom-right"
+               :node-color="nodeColor" />
+    </VueFlow>
+  </div>
+  <div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12">
+    <div class="flex flex-col gap-2 items-center md:items-start">
+      <h1>Customizable</h1>
+      <p>
+        You can create your own node and edge types or just pass a custom style.
+        Implement custom UIs
+        inside your nodes
+        and add functionality to your edges.
+      </p>
+      <a class="button max-w-max" href="/docs">Documentation</a>
+    </div>
+  </div>
+</template>

docs/components/home/edges/Custom.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { MarkerType, getBezierPath, Position, EdgeProps } from '@braks/vue-flow'
+
+interface CustomEdgeProps extends EdgeProps {
+  source: string
+  target: string
+  sourceHandleId?: string
+  targetHandleId?: string
+  id: string
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+  sourcePosition: Position
+  targetPosition: Position
+  markerEnd?: MarkerType
+  data?: {
+    text?: string
+    color?: 'red' | 'green' | 'blue'
+  }
+}
+
+const props = defineProps<CustomEdgeProps>()
+const edgePath = computed(() =>
+  getBezierPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+  }),
+)
+</script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+<template>
+  <path
+    :id="props.id"
+    class="vue-flow__edge-path"
+    :style="{ stroke: props.data?.color }"
+    :d="edgePath"
+    :marker-end="props.markerEnd"
+  />
+  <text>
+    <textPath
+      :href="`#${props.id}`"
+      :style="{ fontSize: '1.25rem', fill: 'white' }"
+      startOffset="50%"
+      text-anchor="middle"
+    >
+      {{ props.data?.text }}
+    </textPath>
+  </text>
+</template>

docs/components/home/nodes/Box.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { Handle, Position } from '@braks/vue-flow'
+
+const emit = defineEmits(['next'])
+</script>
+<template>
+  <div class="px-4 py-2 shadow-lg rounded-md border-2 border-solid border-black">
+    <slot />
+    <Handle id="a" type="source" :position="Position.Bottom" />
+  </div>
+</template>

docs/components/home/nodes/Input.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { Handle, NodeProps, Position } from '@braks/vue-flow'
+
+interface RGBNodeProps extends NodeProps {
+  data: {
+    color: 'r' | 'g' | 'b'
+  }
+  amount: {
+    red: number
+    green: number
+    blue: number
+  }
+}
+const props = defineProps<RGBNodeProps>()
+const emit = defineEmits(['change'])
+let color = 'red'
+switch (props.data?.color) {
+  case 'r':
+    color = 'red'
+    break
+  case 'g':
+    color = 'green'
+    break
+  case 'b':
+    color = 'blue'
+    break
+}
+const onChange = (e: any) => emit('change', { color, val: e.target.value })
+</script>
+<template>
+  <div class="px-4 py-2 bg-white rounded-md border-2 border-solid border-black text-left transform scale-75 lg:scale-100">
+    <div class="text-md" :style="{ color }">{{ `${color} Amount`.toUpperCase() }}</div>
+    <input
+      v-model="props.amount[color]"
+      class="slider nodrag"
+      :style="{ '--color': color }"
+      type="range"
+      min="0"
+      max="255"
+      @input="onChange"
+    />
+    <Handle type="source" :position="Position.Right" :style="{ backgroundColor: color }" />
+  </div>
+</template>

docs/components/home/nodes/Output.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { Handle, NodeProps, Position } from "@braks/vue-flow";
+
+interface RBGOutputNodeProps extends NodeProps {
+  rgb: string;
+}
+
+const props = defineProps<RBGOutputNodeProps>();
+</script>
+<template>
+  <div :style="{ backgroundColor: props.rgb }"
+       class="px-6 py-2 rounded-xl text-white text-center min-w-[220px] border-2 border-white">
+    <div class="text-xl font-bold">Color Output</div>
+    <div class="font-semibold">{{ props.rgb }}</div>
+    <Handle type="target" :position="Position.Left" />
+  </div>
+</template>