feat(docs): responsive pos of elements

docs/components/home/Additional.vue

@@ -1,96 +1,94 @@
 <script lang="ts" setup>
-import { ref } from "vue";
-import { Position, Elements, VueFlow, Controls, MiniMap, Background, useVueFlow } from "@braks/vue-flow";
+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",
+    id: '1',
+    style: { width: '75px' },
+    type: 'input',
     sourcePosition: Position.Right,
-    label: "input",
-    position: { x: 25, y: 120 }
+    label: 'input',
+    position: { x: 25, y: 120 },
   },
   {
-    id: "2",
-    label: "A",
+    id: '2',
+    label: 'A',
     targetPosition: Position.Left,
     sourcePosition: Position.Right,
     position: { x: 150, y: 25 },
-    style: { width: "75px" }
+    style: { width: '75px' },
   },
   {
-    id: "3",
-    label: "B",
+    id: '3',
+    label: 'B',
     targetPosition: Position.Left,
     sourcePosition: Position.Right,
     position: { x: 250, y: 25 },
-    style: { width: "75px" }
+    style: { width: '75px' },
   },
   {
-    id: "4",
-    label: "C",
+    id: '4',
+    label: 'C',
     targetPosition: Position.Left,
     sourcePosition: Position.Right,
     position: { x: 350, y: 25 },
-    style: { width: "75px" }
+    style: { width: '75px' },
   },
   {
-    id: "5",
-    label: "D",
+    id: '5',
+    label: 'D',
     targetPosition: Position.Left,
     sourcePosition: Position.Right,
     position: { x: 150, y: 220 },
-    style: { width: "75px" }
+    style: { width: '75px' },
   },
   {
-    id: "6",
-    label: "E",
+    id: '6',
+    label: 'E',
     targetPosition: Position.Left,
     sourcePosition: Position.Right,
     position: { x: 250, y: 220 },
-    style: { width: "75px" }
+    style: { width: '75px' },
   },
   {
-    id: "7",
-    label: "F",
+    id: '7',
+    label: 'F',
     targetPosition: Position.Left,
     sourcePosition: Position.Right,
     position: { x: 350, y: 220 },
-    style: { width: "75px" }
+    style: { width: '75px' },
   },
   {
-    id: "8",
-    type: "output",
-    label: "Output",
+    id: '8',
+    type: 'output',
+    label: 'Output',
     targetPosition: Position.Left,
     position: { x: 500, y: 120 },
-    style: { width: "75px" }
+    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 }
-]);
+  { 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 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"
-  >
+  <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" />
@@ -101,13 +99,10 @@ onPaneReady((i) => emit('pane', i))
     <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.
+        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>
+      <a class="button max-w-max" href="/docs"> Documentation </a>
     </div>
   </div>
 </template>