update(docs): split features into separate files

docs/.vitepress/components/home/Basic.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import { GraphEdge, GraphNode, useVueFlow, VueFlow, Background, Controls } from "@braks/vue-flow";
+
+const getStyle = (el: GraphNode) => {
+  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"]);
+  if (el.selected && !el.dragging) classes.push("animate-pulse");
+  return classes.join(" ");
+};
+
+const emit = defineEmits(['pane'])
+
+const { onPaneReady } = useVueFlow({
+  modelValue: [
+    {
+      id: "1",
+      type: "input",
+      label: "input",
+      position: { x: 250, y: 5 },
+      class: getStyle
+    },
+    {
+      id: "2",
+      label: "default",
+      position: { x: 100, y: 100 },
+      class: getStyle
+    },
+    { id: "3", label: "default", position: { x: 400, y: 100 }, class: getStyle },
+    {
+      id: "4",
+      type: "output",
+      label: "output",
+      position: { x: 250, y: 225 },
+      class: getStyle
+    },
+    {
+      id: "e1-2",
+      source: "1",
+      label: "animated edge",
+      target: "2",
+      animated: true,
+      class: "transition-all duration-1000",
+      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", label: "default edge", target: "3", 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", type: "step", target: "4", animated: true, 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>
+      <Controls class="!left-auto !right-[10px]" />
+      <Background pattern-color="#aaa" style="background: #f8f8f8" :gap="8" />
+    </VueFlow>
+  </div>
+</template>

docs/.vitepress/components/home/Features.vue

@@ -1,17 +1,7 @@
 <script lang="ts" setup>
-import { ref } from "vue";
+import { reactive } from "vue";
-import {
-  Elements,
-  VueFlow,
-  MiniMap,
-  Controls,
-  Background,
-  FlowInstance,
-  Position,
-  GraphEdge,
-  GraphNode
-} from "@braks/vue-flow";
 import { useBreakpoints, whenever } from "@vueuse/core";
+import { FlowInstance } from "@braks/vue-flow";
 
 const breakpoints = useBreakpoints({
   mobile: 360,
@@ -20,215 +10,34 @@ const breakpoints = useBreakpoints({
   desktop: 1280
 });
 
-const getStyle = (el: GraphNode) => {
+const instances = reactive<FlowInstance[]>([])
-  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"]);
+const onLoad = (instance: FlowInstance) => {
-  if (el.selected && !el.dragging) classes.push("animate-pulse");
+  instances.push(instance)
-  return classes.join(" ");
+  instance.fitView()
 };
 
-const elements = ref<Elements>([
+const fitViews = () => {
-  {
+  instances.forEach(i => i.fitView())
-    id: "1",
+}
-    type: "input",
-    label: "input",
-    position: { x: 250, y: 5 },
-    class: getStyle
-  },
-  {
-    id: "2",
-    label: "default",
-    position: { x: 100, y: 100 },
-    class: getStyle
-  },
-  { id: "3", label: "default", position: { x: 400, y: 100 }, class: getStyle },
-  {
-    id: "4",
-    type: "output",
-    label: "output",
-    position: { x: 250, y: 225 },
-    class: getStyle
-  },
-  {
-    id: "e1-2",
-    source: "1",
-    label: "animated edge",
-    target: "2",
-    animated: true,
-    class: "transition-all duration-1000",
-    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", label: "default edge", target: "3", 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", type: "step", target: "4", animated: true, style: (el: GraphEdge) => {
-      const sourceNodeSelected = el.sourceNode.selected;
-      return {
-        transition: "stroke ease-in-out 300ms",
-        stroke: el.selected || sourceNodeSelected ? "var(--secondary)" : undefined
-      };
-    }
-  }
-]);
 
-const customizableElements = ref<Elements>([
+whenever(breakpoints.greater("tablet"), fitViews);
-  { id: "1", type: "text-input", label: "First Name", position: { x: 0, y: 0 } },
+whenever(breakpoints.smaller("tablet"), fitViews);
-  { id: "2", type: "text-input", label: "Last Name", position: { x: 400, y: 0 } },
-  { id: "3", type: "text-output", label: "Node 3", position: { x: 240, y: 200 } },
-  { id: "e1-3", source: "1", target: "3", animated: true },
-  { id: "e2-3", source: "2", target: "3", animated: true }
-]);
-
-const additionalElements = ref<Elements>([
-  {
-    id: "1",
-    type: "input",
-    sourcePosition: Position.Right,
-    label: "input",
-    style: { width: "75px" },
-    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 label = ref({
-  first: "",
-  last: ""
-});
-
-const instance = ref<FlowInstance>();
-const onChange = ({ name, val }: { name: "first" | "last"; val: string }) => (label.value[name] = val);
-const onLoad = (vf: FlowInstance) => {
-  if (!instance.value) instance.value = vf;
-  vf.fitView();
-};
-whenever(breakpoints.greater("tablet"), () => instance.value.fitView());
-whenever(breakpoints.smaller("tablet"), () => instance.value.fitView());
 </script>
 <template>
   <div class="w-full">
     <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">
-        <div class="md:max-w-1/3 flex flex-col justify-center">
+        <Basic @pane="onLoad" />
-          <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 md:min-h-[300px] shadow-xl rounded-xl font-mono uppercase border-1 border-secondary overflow-hidden">
-          <VueFlow v-model="elements" @pane-ready="onLoad">
-            <Controls />
-            <Background pattern-color="#aaa" style="background: #f8f8f8" :gap="8" />
-          </VueFlow>
-        </div>
       </div>
       <div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
-        <div
+        <RGB @pane="onLoad" />
-          class="w-full md:min-h-[300px] shadow-xl rounded-xl font-mono uppercase overflow-hidden bg-gray-800">
-          <RGB />
-        </div>
-        <div class="md:max-w-1/3 flex flex-col md:flex-row gap-12 justify-end">
-          <div class="gap-2 flex flex-col justify-center">
-            <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>
       </div>
     </div>
   </div>
 </template>
-<style scoped>
+<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;

docs/.vitepress/components/home/Home.vue

@@ -61,7 +61,7 @@ const nextNode = (id: string[], duration = 2000, padding = 0) => instance.value.
 });
 </script>
 <template>
-  <div class="bg-white h-[80vh]">
+  <div class="bg-white h-[75vh]">
     <VueFlow>
       <template #node-box="props">
         <template v-if="props.id === 'intro'">

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

@@ -1,16 +1,16 @@
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import {
-  Elements,
+  BackgroundVariant,
-  FlowInstance,
   VueFlow,
   Background,
   Controls,
   MiniMap,
-  BackgroundVariant,
+  GraphNode,
-  GraphNode, StringFunc
+  StringFunc,
+  useVueFlow
 } from "@braks/vue-flow";
-import { templateRef, useBreakpoints, useElementBounding, whenever } from "@vueuse/core";
+import { templateRef } from "@vueuse/core";
 import CustomEdge from "./edges/Custom.vue";
 import RGBNode from "./nodes/Input.vue";
 import RGBOutputNode from "./nodes/Output.vue";
@@ -21,45 +21,38 @@ type Colors = {
   blue: number
 }
 
-const breakpoints = useBreakpoints({
+const emit = defineEmits(["pane"]);
-  mobile: 360,
+
-  tablet: 640,
+const { id, onPaneReady, store } = useVueFlow({
-  laptop: 1024,
+  id: "rgb-flow",
-  desktop: 1280
+  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]]
 });
 
-const elements = ref<Elements>([
+onMounted(() => console.log(id));
-  { 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 } },
-  { 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 }
-]);
-const instance = ref<FlowInstance>();
 
-const el = templateRef<HTMLDivElement>("page", null);
+onPaneReady((i) => emit("pane", i));
 
-const bounds = useElementBounding(el);
+const el = templateRef<HTMLDivElement>("el", null);
-const onLoad = (flowInstance: FlowInstance) => {
-  instance.value = flowInstance;
-  instance.value.fitView();
-};
-whenever(breakpoints.greater("tablet"), () => onLoad(instance.value));
-whenever(breakpoints.smaller("tablet"), () => onLoad(instance.value));
 
 const color = ref<Colors>({
-  red: 100,
+  red: 222,
-  green: 150,
+  green: 45,
-  blue: 100
+  blue: 140
 });
+
 const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val));
-const bg = ref(BackgroundVariant.Lines);
-const bgSize = ref(1);
-const bgGap = ref(48);
-const backgroundChange = (variant: BackgroundVariant) => (bg.value = variant);
-const sizeChange = (size: number) => (bgSize.value = size);
 
 const nodeColor: StringFunc = (node: GraphNode) => {
   switch (node.id) {
@@ -75,27 +68,39 @@ const nodeColor: StringFunc = (node: GraphNode) => {
 };
 </script>
 <template>
-  <div ref="page" class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
+  <div
-    <div
+    ref="el"
-      class="w-full md:min-h-[300px] shadow-xl rounded-xl font-mono uppercase overflow-hidden bg-gray-800 border-2"
+    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})` }">
+    :style="{ borderColor: `rgb(${color.red}, ${color.green}, ${color.blue})` }">
-      <VueFlow id="rgb-flow" v-model="elements" class="relative font-mono" :zoom-on-scroll="false"
+    <VueFlow class="relative font-mono">
-               :node-extent="[[-50, -150], [500, 300]]" @pane-ready="onLoad">
+      <template #edge-rgb-line="rgbLineProps">
-        <template #edge-rgb-line="rgbLineProps">
+        <CustomEdge
-          <CustomEdge
+          v-bind="{ ...rgbLineProps, data: { text: color[rgbLineProps.data?.color], ...rgbLineProps.data } }" />
-            v-bind="{ ...rgbLineProps, data: { text: color[rgbLineProps.data?.color], ...rgbLineProps.data } }" />
+      </template>
-        </template>
+      <template #node-rgb="rgbProps">
-        <template #node-rgb="rgbProps">
+        <RGBNode v-bind="rgbProps" :amount="color" @change="onChange" />
-          <RGBNode v-bind="rgbProps" :amount="color" @change="onChange" />
+      </template>
-        </template>
+      <template #node-rgb-output="rgbOutputProps">
-        <template #node-rgb-output="rgbOutputProps">
+        <RGBOutputNode v-bind="rgbOutputProps" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
-          <RGBOutputNode v-bind="rgbOutputProps" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
+      </template>
-        </template>
+      <Controls class="transform scale-75 md:scale-100 origin-bottom-left" />
-        <Controls />
+      <Background :variant="BackgroundVariant.Lines" :pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`"
-        <Background :variant="bg" :pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`" :gap="bgGap"
+                  :gap="48"
-                    :size="bgSize" />
+                  :size="1" />
-        <MiniMap class="transform scale-75 origin-bottom-right" :node-color="nodeColor" />
+      <MiniMap class="hidden sm:block transform scale-25 md:scale-50 lg:scale-75 origin-bottom-right"
-      </VueFlow>
+               :node-color="nodeColor" />
+    </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>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/.vitepress/components/home/nodes/Output.vue

@@ -1,14 +1,15 @@
 <script lang="ts" setup>
-import { Handle, NodeProps, Position } from '@braks/vue-flow'
+import { Handle, NodeProps, Position } from "@braks/vue-flow";
+
 interface RBGOutputNodeProps extends NodeProps {
-  rgb: string
+  rgb: string;
 }
-const props = defineProps<RBGOutputNodeProps>()
+
-const emit = defineEmits(['next'])
+const props = defineProps<RBGOutputNodeProps>();
-const next = () => emit('next')
 </script>
 <template>
-  <div :style="{ backgroundColor: props.rgb }" class="px-6 py-2 rounded-xl text-white text-center" @click="next">
+  <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" />