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 + + + +``` + +```vue + + + +``` + + +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 + + + +``` + +```vue + + + +``` + +## [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 -