chore: lint files

docs/components/home/flows/Additional.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { Position, Elements, VueFlow, Controls, MiniMap, Background, useVueFlow } from '@braks/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { Background, Controls, MiniMap, Position, VueFlow, useVueFlow } from '@braks/vue-flow'
+
+const emit = defineEmits(['pane'])
 
 const elements = ref<Elements>([
   {
@@ -77,8 +80,6 @@ const elements = ref<Elements>([
   { id: 'e6-8', type: 'step', source: '7', target: '8', animated: true },
 ])
 
-const emit = defineEmits(['pane'])
-
 const { onPaneReady } = useVueFlow({
   modelValue: elements.value,
   zoomOnScroll: false,
@@ -87,6 +88,7 @@ const { onPaneReady } = useVueFlow({
 
 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>

docs/components/home/flows/Intro.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useVueFlow, VueFlow, Handle, Position } from '@braks/vue-flow'
+import { Handle, Position, VueFlow, useVueFlow } from '@braks/vue-flow'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import BoxNode from '../nodes/Box.vue'
 import Heart from '~icons/mdi/heart'
@@ -170,6 +170,7 @@ const scrollTo = () => {
   }
 }
 </script>
+
 <template>
   <VueFlow ref="el" class="dark:bg-black bg-white transition-colors duration-200 ease-in-out">
     <template #node-box="props">
@@ -208,6 +209,7 @@ const scrollTo = () => {
     </template>
   </VueFlow>
 </template>
+
 <style>
 .intro {
   @apply cursor-pointer

docs/components/home/flows/Nested.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { ConnectionMode, useVueFlow, VueFlow, Background, Controls } from '@braks/vue-flow'
+import { Background, ConnectionMode, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
 import { breakpointsTailwind } from '@vueuse/core'
 
-const breakpoints = useBreakpoints(breakpointsTailwind)
-
 const emit = defineEmits(['pane'])
 
+const breakpoints = useBreakpoints(breakpointsTailwind)
+
 const nodeClasses = ['!normal-case font-semibold !text-white', '!border-1', 'shadow-md'].join(' ')
 const childClasses = `${nodeClasses} !bg-green-500/70 !border-white`
 
@@ -55,6 +55,7 @@ watch(
 
 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">
@@ -76,6 +77,7 @@ onPaneReady((i) => emit('pane', i))
     </VueFlow>
   </div>
 </template>
+
 <style>
 .nested .vue-flow__handle {
   opacity: 0;

docs/components/home/flows/RGB.vue

@@ -1,20 +1,21 @@
 <script lang="ts" setup>
-import { BackgroundVariant, VueFlow, Background, Controls, MiniMap, MiniMapNodeFunc, useVueFlow } from '@braks/vue-flow'
+import type { MiniMapNodeFunc } from '@braks/vue-flow'
+import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 import { breakpointsTailwind } from '@vueuse/core'
 import CustomEdge from '../edges/Custom.vue'
 import RGBNode from '../nodes/Input.vue'
 import RGBOutputNode from '../nodes/Output.vue'
 
+const emit = defineEmits(['pane'])
+
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
-type Colors = {
+interface Colors {
   red: number
   green: number
   blue: number
 }
 
-const emit = defineEmits(['pane'])
-
 const { onPaneReady, getNode, panOnDrag } = useVueFlow({
   id: 'rgb-flow',
   nodes: [
@@ -73,6 +74,7 @@ const nodeColor: MiniMapNodeFunc = (node) => {
   return ''
 }
 </script>
+
 <template>
   <div
     ref="el"
@@ -103,7 +105,8 @@ const nodeColor: MiniMapNodeFunc = (node) => {
     <div class="flex flex-col gap-2 items-center md:items-start">
       <h1>Customizable</h1>
       <p>
-        You can expand on the existing features by using your own custom nodes and edges and implement any design and functionality you want.
+        You can expand on the existing features by using your own custom nodes and edges and implement any design and
+        functionality you want.
       </p>
       <router-link class="button max-w-max" to="/guide/">Documentation</router-link>
     </div>