feat(docs): Add additional demo

docs/.vitepress/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">
+    <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/.vitepress/components/home/Features.vue

@@ -30,7 +30,7 @@ watch(
 );
 </script>
 <template>
-  <div class="w-full">
+  <div class="w-full bg-gray-50">
     <div
       class="flex flex-col 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">
@@ -42,6 +42,9 @@ watch(
       <div class="flex flex-col-reverse 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>

docs/.vitepress/components/home/Nested.vue

@@ -8,6 +8,9 @@ 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 },
     {

docs/.vitepress/components/home/RGB.vue

@@ -7,7 +7,7 @@ import {
   Controls,
   MiniMap,
   GraphNode,
-  StringFunc,
+  MiniMapNodeFunc,
   useVueFlow
 } from "@braks/vue-flow";
 import { templateRef } from "@vueuse/core";
@@ -52,7 +52,7 @@ const color = ref<Colors>({
 
 const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val));
 
-const nodeColor: StringFunc = (node: GraphNode) => {
+const nodeColor: MiniMapNodeFunc = (node: GraphNode) => {
   switch (node.id) {
     case "1":
       return "green";