From 5a563e45b6024ef09bc815e25c5339cf83b6c709 Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 16 Jun 2022 22:45:39 +0200
Subject: [PATCH] docs: add documentation on `autoConnect` option

---
 docs/src/guide/vue-flow/config.md | 52 +++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/docs/src/guide/vue-flow/config.md b/docs/src/guide/vue-flow/config.md
index b403a8b3..26f9f835 100644
--- a/docs/src/guide/vue-flow/config.md
+++ b/docs/src/guide/vue-flow/config.md
@@ -722,6 +722,58 @@ const elements = ref([
 
   Does not work for the `addEdge` utility!
 
+### auto-connect <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: `boolean` | [`Connector`](/typedocs/types/Connector.html/)
+
+- Default: `false`
+
+- Details:
+
+  When connection is emitted, automatically create a new edge from params.
+
+  Also accepts a [`Connector`](/typedocs/types/Connector.html/) which returns an edge-like object or false (if creating an edge is not allowed).
+
+  This option can be used as a shorthand for `onConnect((params) => addEdges([params]))`.
+
+#### Examples
+
+##### Boolean value
+
+```vue:no-line-numbers{2}
+<template>
+  <VueFlow v-model="elements" auto-connect />
+</template>
+```
+
+#### [Connector](/typedocs/types/Connector.html/)
+
+```vue:no-line-numbers{6-18,22}
+<script setup>
+import { ref } from 'vue'
+
+const elements = ref([/** elements omitted for simplicity */])
+
+const connector = (params) => {
+  if (params.source.id === params.target.id) {
+    return false
+  }
+  
+  return {
+    id: `edge-${params.source.id}-${params.target.id}`,
+    source: params.source.id,
+    target: params.target.id,
+    label: `Edge ${params.source.id}-${params.target.id}`,
+    animated: true,
+  }
+}
+</script>
+
+<template>
+  <VueFlow v-model="elements" :auto-connect="connector" />
+</template>
+```
+
 ## Global Element Options
 
 ### only-render-visible-elements <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />