From 22da724ab7a0ecfc95821377a241957a04be3582 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 13 Dec 2022 21:37:36 +0100
Subject: [PATCH] docs: update component documentation

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 docs/src/guide/components/background.md   |  9 +++
 docs/src/guide/components/controls.md     |  9 +++
 docs/src/guide/components/minimap.md      |  9 +++
 docs/src/guide/components/node-resizer.md | 70 +++++++++++++++++++
 docs/src/guide/components/node-toolbar.md | 84 +++++++++++++++++++++++
 packages/node-resizer/README.md           |  3 +-
 packages/node-toolbar/README.md           |  1 -
 7 files changed, 182 insertions(+), 3 deletions(-)
 create mode 100644 docs/src/guide/components/node-resizer.md
 create mode 100644 docs/src/guide/components/node-toolbar.md

diff --git a/docs/src/guide/components/background.md b/docs/src/guide/components/background.md
index 0d5d4787..ad2df072 100644
--- a/docs/src/guide/components/background.md
+++ b/docs/src/guide/components/background.md
@@ -2,6 +2,15 @@
 
 Vue Flow comes with two background pattern variants: dots and lines. 
 
+## Installation
+
+```bash
+yarn add @vue-flow/background
+
+# or
+npm install @vue-flow/background
+```
+
 ## Usage
 
 To use the background simply pass the `Background` component as a child to the `VueFlow` component.
diff --git a/docs/src/guide/components/controls.md b/docs/src/guide/components/controls.md
index 6fea2be2..b3af8fb2 100644
--- a/docs/src/guide/components/controls.md
+++ b/docs/src/guide/components/controls.md
@@ -2,6 +2,15 @@
 
 The control panel contains a zoom-in, zoom-out, fit-view and a lock/unlock button.
 
+## Installation
+
+```bash
+yarn add @vue-flow/controls
+
+# or
+npm install @vue-flow/controls
+```
+
 ## Usage
 
 To use the controls simply pass the `Controls` component as a child to the `VueFlow` component.
diff --git a/docs/src/guide/components/minimap.md b/docs/src/guide/components/minimap.md
index 4178e53b..683b199a 100644
--- a/docs/src/guide/components/minimap.md
+++ b/docs/src/guide/components/minimap.md
@@ -1,5 +1,14 @@
 # MiniMap
 
+## Installation
+
+```bash
+yarn add @vue-flow/minimap
+  
+# or
+npm install @vue-flow/minimap
+```
+
 ## Usage
 
 To use the minimap simply pass the `MiniMap` component as a child to the `VueFlow` component.
diff --git a/docs/src/guide/components/node-resizer.md b/docs/src/guide/components/node-resizer.md
new file mode 100644
index 00000000..5cd23989
--- /dev/null
+++ b/docs/src/guide/components/node-resizer.md
@@ -0,0 +1,70 @@
+# Node Resizer
+
+This is a resizer component for Vue Flow.
+It can be used to resize your nodes.
+
+## Installation
+
+```bash
+yarn add @vue-flow/node-resizer
+  
+# or
+npm install @vue-flow/node-resizer
+```
+
+## Usage
+
+```vue
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import initialElements from './initial-elements'
+
+// some nodes and edges
+const elements = ref(initialElements)
+</script>
+
+<template>
+  <VueFlow v-model="elements" fit-view-on-init>
+    <template #node-custom="nodeProps">
+      <CustomNode :data="nodeProps.data" :label="nodeProps.label" />
+    </template>
+  </VueFlow>
+</template>
+```
+
+```vue
+<script lang="ts" setup>
+import { Handle, Position } from '@vue-flow/core'
+import { NodeResizer } from '@vue-flow/node-resizer'
+
+// make sure to include the necessary styles!
+import '@vue-flow/node-resizer/dist/style.css'
+
+defineProps(['label'])
+</script>
+
+<template>
+  <NodeResizer min-width="100" min-height="30" />
+
+  <Handle type="target" :position="Position.Left" />
+  <div style="padding: 10px">{{ label }}</div>
+  <Handle type="source" :position="Position.Right" />
+</template>
+```
+
+
+When enabled, these props allow you to pan on drag and zoom on scroll using the MiniMap.
+
+## [Props](/typedocs/interfaces/NodeResizerProps)
+
+| Name            | Definition                                                | Type          | Optional | Default              |
+|-----------------|-----------------------------------------------------------|---------------|----------|----------------------|
+| nodeId          | Node to attach the resizer to                             | string        | true     | Node id from context |
+| color           | Color of the resizer lines                                | string        | true     | -                    |
+| handleClassName | Extra class for the resize handle                         | string        | true     | -                    |
+| handleStyle     | Additional styles for the resize handle                   | CSSProperties | true     | -                    |
+| lineClassName   | Extra class for the resize lines                          | number        | true     | -                    |
+| lineStyle       | Additional styles for the resize lines                    | string        | true     | -                    |
+| isVisible       | Force visibility of resizer                               | boolean       | true     | true                 |
+| minWidth        | Min width of the resizer (can't resize below this value)  | number        | true     | -                    |
+| minHeight       | Min height of the resizer (can't resize below this value) | number        | true     | -                    |
diff --git a/docs/src/guide/components/node-toolbar.md b/docs/src/guide/components/node-toolbar.md
new file mode 100644
index 00000000..9c03675d
--- /dev/null
+++ b/docs/src/guide/components/node-toolbar.md
@@ -0,0 +1,84 @@
+# Node Toolbar
+
+This is a toolbar component for Vue Flow.
+It can be used to create a floating Toolbar next to your nodes.
+You can either display the Toolbar by setting the visibility prop or automatically showing the Toolbar
+on selected nodes.
+
+## Installation
+
+```bash
+yarn add @vue-flow/node-toolbar
+
+# or
+npm install @vue-flow/node-toolbar
+```
+
+## Usage
+
+```vue
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import initialElements from './initial-elements'
+
+// some nodes and edges
+const elements = ref(initialElements)
+</script>
+
+<template>
+  <VueFlow v-model="elements" fit-view-on-init>
+    <template #node-custom="nodeProps">
+      <CustomNode :data="nodeProps.data" :label="nodeProps.label" />
+    </template>
+  </VueFlow>
+</template>
+```
+
+```vue
+<script lang="ts" setup>
+import { Handle, Position } from '@vue-flow/core'
+import { NodeToolbar } from '@vue-flow/node-toolbar'
+
+interface NodeData {
+  toolbarVisible: boolean
+  toolbarPosition: Position
+}
+
+interface Props {
+  data: NodeData
+  label: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <NodeToolbar :is-visible="data.toolbarVisible" :position="data.toolbarPosition">
+    <button>delete</button>
+    <button>copy</button>
+    <button>expand</button>
+  </NodeToolbar>
+
+  <div :style="{ padding: '10px 20px' }">
+    {{ label }}
+  </div>
+
+  <Handle type="target" :position="Position.Left" />
+  <Handle type="source" :position="Position.Right" />
+</template>
+```
+
+## [Props](/typedocs/interfaces/NodeToolbarProps)
+
+| Name            | Definition                                        | Type                                 | Optional | Default                 |
+|-----------------|---------------------------------------------------|--------------------------------------|----------|-------------------------|
+| nodeId          | Node(s) the toolbar is supposed to be attached to | string array                         | true     | NodeId from context     |
+| isVisible       | Force visibility of toolbar                       | boolean                              | true     | Selected node           |
+| position        | Toolbar position (top, left, right, bottom)       | [Position](/typedocs/enums/Position) | true     | Top                     |
+| offset          | Offset of toolbar position                        | number                               | true     | 10                      |
+
+## Slots
+
+| Name    | Definition                           |
+|---------|--------------------------------------|
+| default | Default toolbar slot for any content | 
diff --git a/packages/node-resizer/README.md b/packages/node-resizer/README.md
index 0203ed71..31f304ea 100644
--- a/packages/node-resizer/README.md
+++ b/packages/node-resizer/README.md
@@ -1,7 +1,7 @@
 # Vue Flow: Node Resizer Component
 
 This is a resizer component for Vue Flow.
-It can be used to create resize your nodes.
+It can be used to resize your nodes.
 
 ## 🛠 Setup
 
@@ -16,7 +16,6 @@ $ npm i --save @vue-flow/node-resizer
 ## 🎮 Quickstart
 
 ```vue
-
 <script setup>
 import { VueFlow } from '@vue-flow/core'
 import initialElements from './initial-elements'
diff --git a/packages/node-toolbar/README.md b/packages/node-toolbar/README.md
index 57b32ca8..870e8c5c 100644
--- a/packages/node-toolbar/README.md
+++ b/packages/node-toolbar/README.md
@@ -18,7 +18,6 @@ $ npm i --save @vue-flow/node-toolbar
 ## 🎮 Quickstart
 
 ```vue
-
 <script setup>
 import { VueFlow } from '@vue-flow/core'
 import initialElements from './initial-elements'