chore: lint files

docs/components/home/Acknowledgement.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import Heart from '~icons/mdi/heart'
 </script>
+
 <template>
   <div id="acknowledgement" class="w-full bg-black text-white border-y-1 border-white">
     <div class="max-w-11/12 md:max-w-6/12 m-auto py-4 md:(pb-12 pt-6) text-center">

docs/components/home/Banner.vue

@@ -6,6 +6,7 @@ import Download from '~icons/carbon/download'
 const githubData = await $fetch('https://api.github.com/repos/bcakmakoglu/vue-flow?page=$i&per_page=100')
 const npmData = await $fetch('https://api.npmjs.org/downloads/point/last-month/@braks/vue-flow')
 </script>
+
 <template>
   <div class="w-full bg-black text-white border-b-1 border-white">
     <div class="max-w-full md:max-w-11/12 m-auto py-4 md:py-12 <md:(dark:border-t-1 border-white)">

docs/components/home/Features.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { reactive, watch } from 'vue'
-import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
-import { FlowInstance } from '@braks/vue-flow'
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import type { FlowInstance } from '@braks/vue-flow'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
@@ -22,6 +22,7 @@ watch([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoin
   }, 5),
 )
 </script>
+
 <template>
   <div class="w-full dark:(bg-black text-white)">
     <div
@@ -42,6 +43,7 @@ watch([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoin
     </div>
   </div>
 </template>
+
 <style>
 .button {
   @apply z-1 shadow-lg transition-colors duration-200 text-white font-semibold text-lg mt-4 px-5 py-3 rounded-lg bg-green-500;

docs/components/home/Home.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import Blobity from 'blobity'
 import Intro from './flows/Intro.vue'
 
@@ -29,11 +29,13 @@ onMounted(() => {
   }
 })
 </script>
+
 <template>
   <div class="relative h-[90vh] md:h-[75vh]">
     <Intro />
   </div>
 </template>
+
 <style>
 button:focus {
   outline: none;

docs/components/home/edges/Custom.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { MarkerType, getBezierPath, Position, EdgeProps } from '@braks/vue-flow'
+import type { EdgeProps, MarkerType, Position } from '@braks/vue-flow'
+import { getBezierPath } from '@braks/vue-flow'
 
 interface CustomEdgeProps extends EdgeProps {
   source: string
@@ -33,11 +34,13 @@ const edgePath = computed(() =>
   }),
 )
 </script>
+
 <script lang="ts">
 export default {
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <path
     :id="props.id"
@@ -47,12 +50,7 @@ export default {
     :marker-end="props.markerEnd"
   />
   <text>
-    <textPath
-      :href="`#${props.id}`"
-      :style="{ fontSize: '1.25rem', fill: 'white' }"
-      startOffset="50%"
-      text-anchor="middle"
-    >
+    <textPath :href="`#${props.id}`" :style="{ fontSize: '1.25rem', fill: 'white' }" startOffset="50%" text-anchor="middle">
       {{ props.data?.text }}
     </textPath>
   </text>

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>

docs/components/home/nodes/Box.vue

@@ -3,6 +3,7 @@ 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 />

docs/components/home/nodes/Input.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Handle, NodeProps, Position } from '@braks/vue-flow'
+import type { NodeProps } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface RGBNodeProps extends NodeProps {
   data: {
@@ -27,6 +28,7 @@ switch (props.data?.color) {
 }
 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>

docs/components/home/nodes/Output.vue

@@ -1,15 +1,19 @@
 <script lang="ts" setup>
-import { Handle, NodeProps, Position } from "@braks/vue-flow";
+import type { NodeProps } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface RBGOutputNodeProps extends NodeProps {
-  rgb: string;
+  rgb: string
 }
 
-const props = defineProps<RBGOutputNodeProps>();
+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
+    :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" />

docs/src/examples/validation.md

@@ -22,10 +22,10 @@ const nodes = [
   {
     id: '1',
     label: 'Node 1',
-    position: { x: 0 , y: 0 },
+    position: { x: 0, y: 0 },
     isValidSourcePos: (connection) => {
       return connection.target === '2'
-    }
+    },
   },
 ]
 ```

docs/src/guide/composables.md

@@ -61,16 +61,16 @@ This is how the default handle component is built:
 
 ```vue
 <script lang="ts" setup>
-import { useHandle, useVueFlow, Position, NodeId } from '@braks/vue-flow'
-import type { HandleProps } from '@braks/vue-flow'
+import { NodeId, useHandle, useVueFlow } from '@braks/vue-flow'
+import type { HandleProps, Position } from '@braks/vue-flow'
 
-const { id, hooks, connectionStartHandle } = useVueFlow()
 const props = withDefaults(defineProps<HandleProps>(), {
   type: 'source',
   position: 'top' as Position,
   connectable: true,
 })
 
+const { id, hooks, connectionStartHandle } = useVueFlow()
 const nodeId = inject(NodeId, '')
 
 const { onMouseDown, onClick } = useHandle()
@@ -80,21 +80,22 @@ const onMouseDownHandler = (event: MouseEvent) =>
   )
 const onClickHandler = (event: MouseEvent) => onClick(event, props.id ?? null, nodeId, props.type, props.isValidConnection)
 </script>
+
 <script lang="ts">
 export default {
   name: 'Handle',
 }
 </script>
+
 <template>
   <div
     :data-handleid="props.id"
     :data-nodeid="nodeId"
     :data-handlepos="props.position"
+    class="vue-flow__handle nodrag"
     :class="[
-      'vue-flow__handle',
       `vue-flow__handle-${props.position}`,
       `vue-flow__handle-${id}`,
-      'nodrag',
       {
         source: props.type !== 'target',
         target: props.type === 'target',

docs/tsconfig.json

@@ -3,10 +3,7 @@
     "baseUrl": ".",
     "module": "ESNext",
     "target": "es2017",
-    "lib": [
-      "DOM",
-      "ESNext"
-    ],
+    "lib": ["DOM", "ESNext"],
     "noEmit": true,
     "declaration": false,
     "strict": true,
@@ -18,20 +15,9 @@
     "noUnusedLocals": false,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
-    "types": [
-      "vite/client",
-      "@types/node",
-      "unplugin-icons/types/vue"
-    ]
+    "types": ["vite/client", "@types/node", "unplugin-icons/types/vue"]
   },
-  "include": [
-    "components",
-    "src",
-    "src/.vuepress/auto-imports.d.ts"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ],
+  "include": ["components", "src", "src/.vuepress/auto-imports.d.ts"],
+  "exclude": ["node_modules", "dist"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }