chore: lint files

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

docs/components/DocsRepl.vue

@@ -49,7 +49,7 @@ watchEffect(() => {
   vh.value = `${window.innerHeight}px`
 })
 
-const files: Record<string, typeof imports[keyof typeof imports]> = {}
+const files: Record<string, (typeof imports)[keyof typeof imports]> = {}
 const imports = exampleImports[props.example]
 const additionalImports = 'additionalImports' in imports ? imports.additionalImports : {}
 

docs/components/examples/basic/App.vue

@@ -40,8 +40,8 @@ const dark = ref(false)
  * To update node properties you can simply use your elements v-model and mutate the elements directly
  * Changes should always be reflected on the graph reactively, without the need to overwrite the elements
  */
-const updatePos = () =>
-  elements.value.forEach((el) => {
+function updatePos() {
+  return elements.value.forEach((el) => {
     if (isNode(el)) {
       el.position = {
         x: Math.random() * 400,
@@ -49,18 +49,25 @@ const updatePos = () =>
       }
     }
   })
+}
 
 /**
  * toObject transforms your current graph data to an easily persist-able object
  */
-const logToObject = () => console.log(toObject())
+function logToObject() {
+  return console.log(toObject())
+}
 
 /**
  * Resets the current viewpane transformation (zoom & pan)
  */
-const resetTransform = () => setTransform({ x: 0, y: 0, zoom: 1 })
+function resetTransform() {
+  return setTransform({ x: 0, y: 0, zoom: 1 })
+}
 
-const toggleClass = () => (dark.value = !dark.value)
+function toggleClass() {
+  return (dark.value = !dark.value)
+}
 </script>
 
 <template>

docs/components/examples/connectionline/CustomConnectionLine.vue

@@ -1,5 +1,5 @@
 <script setup>
-const props = defineProps({
+defineProps({
   sourceX: {
     type: Number,
     required: true,

docs/components/examples/custom-node/App.vue

@@ -18,23 +18,27 @@ const bgName = ref('AYAME')
 const connectionLineStyle = { stroke: '#fff' }
 
 // minimap stroke color functions
-const nodeStroke = (n) => {
+function nodeStroke(n) {
   if (n.type === 'input') return '#0041d0'
   if (n.type === 'custom') return presets.sumi
   if (n.type === 'output') return '#ff0072'
   return '#eee'
 }
 
-const nodeColor = (n) => {
+function nodeColor(n) {
   if (n.type === 'custom') return bgColor.value
   return '#fff'
 }
 
 // output labels
-const outputColorLabel = () => h('div', {}, bgColor.value)
-const outputNameLabel = () => h('div', {}, bgName.value)
+function outputColorLabel() {
+  return h('div', {}, bgColor.value)
+}
+function outputNameLabel() {
+  return h('div', {}, bgName.value)
+}
 
-const onChange = (color) => {
+function onChange(color) {
   gradient.value = false
   bgColor.value = color.value
   bgName.value = color.name
@@ -42,7 +46,7 @@ const onChange = (color) => {
   findNode('3').hidden = false
 }
 
-const onGradient = () => {
+function onGradient() {
   gradient.value = true
   bgColor.value = null
   bgName.value = 'gradient'

docs/components/examples/custom-node/CustomNode.vue

@@ -12,11 +12,11 @@ const props = defineProps({
 
 const emit = defineEmits(['change', 'gradient'])
 
-const onSelect = (color) => {
+function onSelect(color) {
   emit('change', color)
 }
 
-const onGradient = () => {
+function onGradient() {
   emit('gradient')
 }
 

docs/components/examples/dnd/App.vue

@@ -4,9 +4,11 @@ import { nextTick, watch } from 'vue'
 import Sidebar from './Sidebar.vue'
 
 let id = 0
-const getId = () => `dndnode_${id++}`
+function getId() {
+  return `dndnode_${id++}`
+}
 
-const { findNode, onConnect, nodes, edges, addEdges, addNodes, viewport, project, vueFlowRef } = useVueFlow({
+const { findNode, onConnect, addEdges, addNodes, project, vueFlowRef } = useVueFlow({
   nodes: [
     {
       id: '1',
@@ -17,7 +19,7 @@ const { findNode, onConnect, nodes, edges, addEdges, addNodes, viewport, project
   ],
 })
 
-const onDragOver = (event) => {
+function onDragOver(event) {
   event.preventDefault()
 
   if (event.dataTransfer) {
@@ -27,7 +29,7 @@ const onDragOver = (event) => {
 
 onConnect((params) => addEdges([params]))
 
-const onDrop = (event) => {
+function onDrop(event) {
   const type = event.dataTransfer?.getData('application/vueflow')
 
   const { left, top } = vueFlowRef.value.getBoundingClientRect()

docs/components/examples/dnd/Sidebar.vue

@@ -1,5 +1,5 @@
 <script setup>
-const onDragStart = (event, nodeType) => {
+function onDragStart(event, nodeType) {
   if (event.dataTransfer) {
     event.dataTransfer.setData('application/vueflow', nodeType)
     event.dataTransfer.effectAllowed = 'move'

docs/components/examples/empty/App.vue

@@ -3,11 +3,11 @@ import { Panel, PanelPosition, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Background, BackgroundVariant } from '@vue-flow/background'
 import { MiniMap } from '@vue-flow/minimap'
 
-const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
+const { nodes, addNodes, addEdges, onConnect, dimensions } = useVueFlow()
 
 onConnect((params) => addEdges([params]))
 
-const addRandomNode = () => {
+function addRandomNode() {
   const nodeId = (nodes.value.length + 1).toString()
 
   const newNode = {

docs/components/examples/intersection/App.vue

@@ -7,6 +7,7 @@ import { initialElements } from './initial-elements.js'
  * You can either use `getIntersectingNodes` to check if a given node intersects with others
  * or `isNodeIntersecting` to check if a node is intersecting with a given area
  */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const { onNodeDrag, getIntersectingNodes, isNodeIntersecting, getNodes } = useVueFlow()
 
 const elements = ref(initialElements)

docs/components/examples/multi/Flow.vue

@@ -12,10 +12,12 @@ const elements = ref([
   { id: 'e1-3', source: '1', target: '3' },
 ])
 
-const toggleClass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
+function toggleClass() {
+  return elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
+}
 
-const updatePos = () =>
-  elements.value.forEach((el) => {
+function updatePos() {
+  return elements.value.forEach((el) => {
     if (isNode(el)) {
       el.position = {
         x: Math.random() * 400,
@@ -23,6 +25,7 @@ const updatePos = () =>
       }
     }
   })
+}
 </script>
 
 <template>

docs/components/examples/nested/App.vue

@@ -5,7 +5,7 @@ import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 import { onMounted } from 'vue'
 
-const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
+const { onConnect, addEdges, addNodes } = useVueFlow({
   fitViewOnInit: true,
   // set this to true so edges get elevated when selected, defaults to false
   elevateEdgesOnSelect: true,

docs/components/examples/save-restore/Controls.vue

@@ -5,11 +5,11 @@ const flowKey = 'example-flow'
 
 const { nodes, addNodes, setNodes, setEdges, dimensions, setTransform, toObject } = useVueFlow()
 
-const onSave = () => {
+function onSave() {
   localStorage.setItem(flowKey, JSON.stringify(toObject()))
 }
 
-const onRestore = () => {
+function onRestore() {
   const flow = JSON.parse(localStorage.getItem(flowKey))
 
   if (flow) {
@@ -20,7 +20,7 @@ const onRestore = () => {
   }
 }
 
-const onAdd = () => {
+function onAdd() {
   const id = nodes.value.length + 1
 
   const newNode = {

docs/components/examples/stress/App.vue

@@ -6,21 +6,22 @@ import { nextTick, ref } from 'vue'
 import { getElements } from './utils.js'
 
 const { nodes, edges } = getElements(15, 15)
+
 const elements = ref([...nodes, ...edges])
 
-const { onPaneReady, dimensions, onNodeClick, getEdges, fitView } = useVueFlow()
+const { onPaneReady, dimensions, fitView } = useVueFlow()
 
-onPaneReady((i) => {
-  i.fitView({
-    padding: 0.2,
-  })
+onPaneReady(({ fitView, getElements }) => {
+  fitView({ padding: 0.2 })
 
-  console.log(i.getElements.value)
+  console.log(getElements.value)
 })
 
-const toggleClass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
+function toggleClass() {
+  return elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
+}
 
-const updatePos = () => {
+function updatePos() {
   elements.value.forEach((el) => {
     if (isNode(el)) {
       el.position = {

docs/components/examples/teleport/TeleportableNode.vue

@@ -11,7 +11,7 @@ const props = defineProps({
 
 const { animation, transition, teleport, onClick } = useTeleport(props.id)
 
-const changeAnimation = () => {
+function changeAnimation() {
   animation.value = animation.value === 'fade' ? 'shrink' : 'fade'
 }
 </script>

docs/components/examples/teleport/useTeleport.js

@@ -7,7 +7,7 @@ import { nextTick, ref } from 'vue'
  * Animations that resize a node need to call the `updateNodeDimensions` function from store to update node handle positions
  * Otherwise edges do not connect properly
  */
-export const useTeleport = (id) => {
+export function useTeleport(id) {
   const animation = ref('fade')
   const transition = ref(false)
   const teleport = ref(null)

docs/components/examples/update-edge/App.vue

@@ -26,13 +26,21 @@ const elements = ref([
 
 const { updateEdge, addEdges } = useVueFlow()
 
-const onEdgeUpdateStart = (edge) => console.log('start update', edge)
+function onEdgeUpdateStart(edge) {
+  return console.log('start update', edge)
+}
 
-const onEdgeUpdateEnd = (edge) => console.log('end update', edge)
+function onEdgeUpdateEnd(edge) {
+  return console.log('end update', edge)
+}
 
-const onEdgeUpdate = ({ edge, connection }) => updateEdge(edge, connection)
+function onEdgeUpdate({ edge, connection }) {
+  return updateEdge(edge, connection)
+}
 
-const onConnect = (params) => addEdges([params])
+function onConnect(params) {
+  return addEdges([params])
+}
 </script>
 
 <template>

docs/components/examples/update-node/App.vue

@@ -17,7 +17,7 @@ const opts = reactive({
   hidden: false,
 })
 
-const updateNode = () => {
+function updateNode() {
   const node = getNode.value('1')
   node.label = opts.label.trim() !== '' ? opts.label : defaultLabel
   node.style = { backgroundColor: opts.bg }

docs/components/examples/validation/App.vue

@@ -16,11 +16,15 @@ const elements = ref([
   { id: 'C', type: 'custom', position: { x: 250, y: 300 }, isValidSourcePos: (connection) => connection.target === 'B' },
 ])
 
-const onConnectStart = ({ nodeId, handleType }) => console.log('on connect start', { nodeId, handleType })
+function onConnectStart({ nodeId, handleType }) {
+  return console.log('on connect start', { nodeId, handleType })
+}
 
-const onConnectEnd = (event) => console.log('on connect end', event)
+function onConnectEnd(event) {
+  return console.log('on connect end', event)
+}
 
-const onConnect = (params) => {
+function onConnect(params) {
   console.log('on connect', params)
   addEdge(params, elements.value)
 }

docs/components/home/Features.vue

@@ -8,12 +8,12 @@ import Additional from './flows/Additional.vue'
 const el = ref<HTMLDivElement>()
 const instances: VueFlowStore[] = []
 
-const onLoad = (instance: VueFlowStore) => {
+function onLoad(instance: VueFlowStore) {
   instances.push(instance)
   instance.fitView()
 }
 
-const fitViews = () => {
+function fitViews() {
   instances.forEach((i) => i.fitView())
 }
 

docs/components/home/flows/Intro.vue

@@ -226,7 +226,7 @@ function setElements() {
 const { stop } = useResizeObserver(el, useDebounceFn(setElements, 5))
 onBeforeUnmount(stop)
 
-const scrollTo = () => {
+function scrollTo() {
   const el = document.getElementById('acknowledgement')
   if (el) {
     el.scrollIntoView({ behavior: 'smooth' })
@@ -235,7 +235,7 @@ const scrollTo = () => {
 
 const animationClassNames = ['checker-gb', 'checker-op', 'checker-yg', 'checker-ss']
 
-const shuffle = (a: any[]) => {
+function shuffle(a: any[]) {
   for (let i = a.length - 1; i > 0; i--) {
     const j = Math.floor(Math.random() * (i + 1))
     ;[a[i], a[j]] = [a[j], a[i]]
@@ -243,7 +243,7 @@ const shuffle = (a: any[]) => {
   return a
 }
 
-const createAnimationDurations = () => {
+function createAnimationDurations() {
   return animationClassNames.map((className) => {
     const duration = 5 + Math.random() * 5
 

docs/components/home/flows/RGB.vue

@@ -59,7 +59,9 @@ watch(
   { immediate: true },
 )
 
-const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val))
+function onChange({ color: c, val }: { color: keyof Colors; val: number }) {
+  return (color.value[c] = Number(val))
+}
 
 const nodeColor: MiniMapNodeFunc = (node) => {
   switch (node.id) {

docs/components/home/flows/confetti.ts

@@ -1,6 +1,6 @@
 import confetti from 'canvas-confetti'
 
-export const fireworks = (colors?: string[]) => {
+export function fireworks(colors?: string[]) {
   return new Promise((resolve) => {
     const duration = 15 * 1000
     const animationEnd = Date.now() + duration
@@ -38,7 +38,7 @@ export const fireworks = (colors?: string[]) => {
   })
 }
 
-export const cheer = (colors: string[]) => {
+export function cheer(colors: string[]) {
   return new Promise((resolve) => {
     const end = Date.now() + 2 * 1000
 

docs/components/home/nodes/Input.vue

@@ -12,35 +12,50 @@ interface RGBNodeProps extends NodeProps {
     blue: number
   }
 }
+
 const props = defineProps<RGBNodeProps>()
+
 const emit = defineEmits(['change'])
-let color = 'red'
-switch (props.data?.color) {
-  case 'r':
-    color = 'red'
-    break
-  case 'g':
-    color = 'green'
-    break
-  case 'b':
-    color = 'blue'
-    break
+
+const currentColor = computed(() => {
+  let color
+
+  switch (props.data?.color) {
+    case 'r':
+      color = 'red'
+      break
+    case 'g':
+      color = 'green'
+      break
+    case 'b':
+      color = 'blue'
+      break
+    default:
+      color = 'red'
+  }
+
+  return color
+})
+
+function onChange(e: any) {
+  return emit('change', { color: currentColor.value, val: e.target.value })
 }
-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>
+    <div class="text-md" :style="{ color: currentColor }">{{ `${currentColor} Amount`.toUpperCase() }}</div>
+
     <input
-      v-model="props.amount[color]"
+      :model-value="amount[currentColor]"
       class="slider nodrag"
-      :style="{ '--color': color }"
+      :style="{ '--color': currentColor }"
       type="range"
       min="0"
       max="255"
       @input="onChange"
     />
+
     <Handle type="source" :position="Position.Right" :style="{ backgroundColor: color }" />
   </div>
 </template>