From 15ca63a59c6eb5691339dca01b52272020845a9f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 14 Dec 2022 12:57:56 +0100
Subject: [PATCH] docs: update component documentation with new examples

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 docs/src/guide/components/background.md | 13 +++++++++++--
 docs/src/guide/components/controls.md   | 21 ++++++++++++++++++++-
 docs/src/guide/components/minimap.md    | 19 ++++++++++++++++++-
 packages/background/README.md           |  1 -
 packages/controls/README.md             |  1 -
 packages/minimap/README.md              |  1 -
 6 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/docs/src/guide/components/background.md b/docs/src/guide/components/background.md
index ad2df072..381a6fca 100644
--- a/docs/src/guide/components/background.md
+++ b/docs/src/guide/components/background.md
@@ -16,9 +16,18 @@ npm install @vue-flow/background
 To use the background simply pass the `Background` component as a child to the `VueFlow` component.
 
 ```vue
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import initialElements from './initial-elements'
+
+// some nodes and edges
+const elements = ref(initialElements)
+</script>
+
 <template>
-  <VueFlow>
-    <Background :variant="BackgroundVariant.Dots" pattern-color="#f8f8f8" />
+  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
+    <Background />
   </VueFlow>
 </template>
 ```
diff --git a/docs/src/guide/components/controls.md b/docs/src/guide/components/controls.md
index b3af8fb2..756c4455 100644
--- a/docs/src/guide/components/controls.md
+++ b/docs/src/guide/components/controls.md
@@ -15,14 +15,33 @@ npm install @vue-flow/controls
 
 To use the controls simply pass the `Controls` component as a child to the `VueFlow` component.
 
+::: warning
+Make sure you also import the styles as these are *not* part of the default theme anymore.
+:::
+
 ```vue
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import { Controls } from '@vue-flow/controls'
+
+// import default controls styles
+import '@vue-flow/controls/dist/style.css'
+
+import initialElements from './initial-elements'
+
+
+// some nodes and edges
+const elements = ref(initialElements)
+</script>
+
 <template>
-  <VueFlow>
+  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
     <Controls />
   </VueFlow>
 </template>
 ```
 
+
 ## [Props](/typedocs/interfaces/ControlProps)
 
 | Name            | Definition                | Type                                           | Optional | Default |
diff --git a/docs/src/guide/components/minimap.md b/docs/src/guide/components/minimap.md
index 683b199a..a0721ffd 100644
--- a/docs/src/guide/components/minimap.md
+++ b/docs/src/guide/components/minimap.md
@@ -13,9 +13,26 @@ npm install @vue-flow/minimap
 
 To use the minimap simply pass the `MiniMap` component as a child to the `VueFlow` component.
 
+::: warning
+Make sure you also import the styles as these are *not* part of the default theme anymore.
+:::
+
 ```vue
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import { MiniMap } from '@vue-flow/minimap'
+
+// import default minimap styles
+import '@vue-flow/minimap/dist/style.css'
+
+import initialElements from './initial-elements'
+
+// some nodes and edges
+const elements = ref(initialElements)
+</script>
+
 <template>
-  <VueFlow>
+  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
     <MiniMap />
   </VueFlow>
 </template>
diff --git a/packages/background/README.md b/packages/background/README.md
index 82251afb..177b637c 100644
--- a/packages/background/README.md
+++ b/packages/background/README.md
@@ -16,7 +16,6 @@ $ npm i --save @vue-flow/background
 ## 🎮 Quickstart
 
 ```vue
-
 <script setup>
 import { VueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
diff --git a/packages/controls/README.md b/packages/controls/README.md
index fe8124d4..6d367dd3 100644
--- a/packages/controls/README.md
+++ b/packages/controls/README.md
@@ -16,7 +16,6 @@ $ npm i --save @vue-flow/controls
 ## 🎮 Quickstart
 
 ```vue
-
 <script setup>
 import { VueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
diff --git a/packages/minimap/README.md b/packages/minimap/README.md
index a04e4a84..01f3b1a9 100644
--- a/packages/minimap/README.md
+++ b/packages/minimap/README.md
@@ -17,7 +17,6 @@ $ npm i --save @vue-flow/minimap
 ## 🎮 Quickstart
 
 ```vue
-
 <script setup>
 import { VueFlow } from '@vue-flow/core'
 import { MiniMap } from '@vue-flow/minimap'