docs: Add additional component pages

docs/src/.vuepress/config.ts

@@ -76,7 +76,12 @@ export default defineUserConfig<DefaultThemeOptions>({
             '/guide/state',
             '/guide/node',
             '/guide/edge',
+            '/guide/composables',
             { text: 'Utilities', children: ['/guide/utils/graph', '/guide/utils/instance', '/guide/utils/edge'] },
+            {
+              text: 'Additional Components',
+              children: ['/guide/components/background', '/guide/components/minimap', '/guide/components/controls'],
+            },
           ],
         },
       ],

docs/src/guide/components/background.md

@@ -0,0 +1,29 @@
+# Background
+
+Vue Flow comes with two background pattern variants: dots and lines. 
+
+## Usage
+
+To use the background simply pass the `Background` component as a child to the `VueFlow` component.
+
+```vue
+<template>
+  <VueFlow>
+    <Background :variant="BackgroundVariant.Dots" pattern-color="#f8f8f8" />
+  </VueFlow>
+</template>
+```
+
+## Props
+
+| Name         | Definition        | Type                                                                        | Optional | Default |
+|--------------|-------------------|-----------------------------------------------------------------------------|----------|---------|
+| variant      | Pattern variant   | [BackgroundVariant](https://types.vueflow.dev/enums/BackgroundVariant.html) | true     | dots    |
+| gap          | Pattern gap       | number                                                                      | true     | 10      |
+| size         | Pattern size      | number                                                                      | true     | 0.4     |
+| patternColor | Pattern color     | string                                                                      | true     | #81818a |
+| bgColor      | Is node dragging  | boolean                                                                     | true     | #fff    |
+| height       | Background height | number                                                                      | true     | 100     |
+| width        | Background width  | number                                                                      | true     | 100     |
+| x            | X-offset          | number                                                                      | true     | 0       |
+| y            | Y-offset          | number                                                                      | true     | 0       |

docs/src/guide/components/controls.md

@@ -0,0 +1,34 @@
+# Controls
+
+The control panel contains a zoom-in, zoom-out, fit-view and a lock/unlock button.
+
+## Usage
+
+To use the controls simply pass the `Controls` component as a child to the `VueFlow` component.
+
+```vue
+<template>
+  <VueFlow>
+    <Controls />
+  </VueFlow>
+</template>
+```
+
+## Props
+
+| Name            | Definition                | Type                                                                  | Optional | Default |
+|-----------------|---------------------------|-----------------------------------------------------------------------|----------|---------|
+| showZoom        | Show zoom btn             | boolean                                                               | true     | true    |
+| showFitView     | Show fit-view btn         | boolean                                                               | true     | true    |
+| showInteractive | Show lock interactive btn | boolean                                                               | true     | true    |
+| showZoom        | Show zoom button          | boolean                                                               | true     | true    |
+| fitViewParams   | Params to use on fit-view | [FitViewParams](https://types.vueflow.dev/modules.html#FitViewParams) | true     | -       |
+
+## Emits
+
+| Name               | Definition                  |
+|--------------------|-----------------------------|
+| zoom-in            | Zoom-in btn clicked         |
+| zoom-out           | Zoom-out btn clicked        |
+| fit-view           | Fit-view btn clicked        |
+| interaction-change | Interaction locked/unlocked |

docs/src/guide/components/minimap.md

@@ -0,0 +1,24 @@
+# MiniMap
+
+## Usage
+
+To use the minimap simply pass the `MiniMap` component as a child to the `VueFlow` component.
+
+```vue
+<template>
+  <VueFlow>
+    <MiniMap />
+  </VueFlow>
+</template>
+```
+
+## Props
+
+| Name             | Definition               | Type                                                                         | Optional | Default                 |
+|------------------|--------------------------|------------------------------------------------------------------------------|----------|-------------------------|
+| nodeColor        | Node(s) Background color | string, [MiniMapNodeFunc](https://types.vueflow.dev/modules.html#StringFunc) | true     | #fff                    |
+| nodeStrokeColor  | Border color             | string, [MiniMapNodeFunc](https://types.vueflow.dev/modules.html#StringFunc) | true     | #555                    |
+| nodeClassName    | Extra classes            | string, [MiniMapNodeFunc](https://types.vueflow.dev/modules.html#StringFunc) | true     | -                       |
+| nodeBorderRadius | Border radius            | number                                                                       | true     | 5                       |
+| nodeStrokeWidth  | Stroke width             | number                                                                       | true     | 2                       |
+| maskColor        | Minimap Background color | string                                                                       | true     | rgb(240, 242, 243, 0.7) |