docs: replace vuepress specific components

2022-08-01 21:10:14 +02:00
parent af78b52233
commit f386ea454c
26 changed files with 99 additions and 156 deletions
@@ -7,24 +7,13 @@

 ## Installation

-<CodeGroup>
-  <CodeGroupItem title="YARN" active>
-
-```bash
-yarn add @braks/vue-flow
-```
-
-  </CodeGroupItem>
-
-
-  <CodeGroupItem title="NPM">
-
 ```bash
 npm i --save @braks/vue-flow
-```

-  </CodeGroupItem>
-</CodeGroup>
+yarn i @braks/vue-flow
+
+pnpm i @braks/vue-flow
+```

 ## Usage

@@ -66,31 +55,6 @@ const elements = ref([
 </template>
 ```

-## Quickstart
-
-The recommended method of using Vue Flow is the composition API as it allows for full control of the state, thanks to
-composables and the power of [provide/inject](https://vuejs.org/guide/components/provide-inject). You can even
-access the state outside the context and manipulate it to your liking. However, using the options API is possible,
-though more limited it will probably satisfy most of your needs if you are not looking for too advanced handling of
-states.
-
-A basic setup would look like this:
-
-<CodeGroup>
-  <CodeGroupItem title="Composition API" active>
-
-@[code vue](../../../examples/vite/src/Basic/Basic.vue)
-
-  </CodeGroupItem>
-
-
-  <CodeGroupItem title="Options API">
-
-@[code vue](../../../examples/vite/src/Basic/BasicOptionsAPI.vue)
-
-  </CodeGroupItem>
-</CodeGroup>
-
 ## TypeScript

 Vue Flow is fully written in [TypeScript](https://www.typescriptlang.org/), so it is highly recommended to use TypeScript to have the best possible DX and
@@ -8,8 +8,7 @@ Viewport Functions can be accessed via the [`useVueFlow`](/guide/composables#use
 utility or with the [`VueFlowStore`](/typedocs/types/VueFlowStore)
 instance provided by [`onPaneReady`](/typedocs/interfaces/FlowEvents#paneready).

-<CodeGroup>
-  <CodeGroupItem title="Composition API" active>
+- Using Event Hooks (Composable)

 ```vue
 <script setup>
@@ -22,10 +21,7 @@ onPaneReady((instance) => instance.fitView())
 </script>
 ```

-  </CodeGroupItem>
-
-
-  <CodeGroupItem title="Options API">
+- Using Event Listener 

 ```vue
 <script>
@@ -51,9 +47,6 @@ export default defineComponent({
 </template>
 ```

-  </CodeGroupItem>
-</CodeGroup>
-
 ### [project](/typedocs/types/Project)

 - Details:
@@ -4,8 +4,7 @@ Vue Flow allows you to configure zoom, graph and flow behavior.
 Configuration can be passed either as props to the `VueFlow` component or
 as options to the [`useVueFlow`](/guide/composables#usevueflow) composable.

-<CodeGroup>
-  <CodeGroupItem title="Props" active>
+- Using Component Props

 ```vue
 <!-- Pass configuration as props -->
@@ -14,10 +13,7 @@ as options to the [`useVueFlow`](/guide/composables#usevueflow) composable.
 </template>
 ```

-  </CodeGroupItem>
-
-
-  <CodeGroupItem title="Composable">
+- Using Composable Options

 ```vue
 <script setup>
@@ -31,16 +27,12 @@ useVueFlow({
 </script>
 ```

-  </CodeGroupItem>
-</CodeGroup>
-
 ## Updating Config

 You can update the configuration at any point, either by having them bound as props or using the state values returned
 by `useVueFlow`.

-<CodeGroup>
-  <CodeGroupItem title="Props" active>
+- Using Component Props

 ```vue{2,5-6,10}
 <script setup>
@@ -56,10 +48,7 @@ onMounted(() => {
 </template>
 ```

-  </CodeGroupItem>
-
-
-  <CodeGroupItem title="Composable">
+- Using State (Composable)

 ```vue{2,7-8}
 <script setup>
@@ -74,12 +63,9 @@ onMounted(() => {
 </script>
 ```

-  </CodeGroupItem>
-</CodeGroup>
-
 ## Basic Options

-### id <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### id (optional)

 - Type: `string`

@@ -89,7 +75,7 @@ onMounted(() => {

  It is used for the lookup and injection of the state instance.

-### modelValue <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### modelValue (optional)

 - Type: [`Elements`](/typedocs/types/Elements)

@@ -121,7 +107,7 @@ const elements = ref([
 </template>
 ```

-### nodes <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### nodes (optional)

 - Type: [`Node[]`](/typedocs/interfaces/Node)

@@ -151,7 +137,7 @@ const nodes = ref([
 </template>
 ```

-### edges <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### edges (optional)

 - Type: [`Edge[]`](/typedocs/interfaces/Edge)

@@ -186,7 +172,7 @@ const edges = ref([
 </template>
 ```

-### node-types <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### node-types (optional)

 - Type: [`Record<string, NodeComponent>`](/typedocs/types/NodeComponent)

@@ -223,7 +209,7 @@ const edges = ref([
 </template>
 ```

-### edge-types <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### edge-types (optional)

 - Type: [`Record<string, EdgeComponent>`](/typedocs/types/EdgeComponent)

@@ -260,7 +246,7 @@ const edges = ref([
 </template>
 ```

-### apply-default <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### apply-default (optional)

 - Type: `boolean`

@@ -295,7 +281,7 @@ const edges = ref([
 </template>
 ```

-### connection-mode <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### connection-mode (optional)

 - Type: [`ConnectionMode`](/typedocs/enums/ConnectionMode)

@@ -315,7 +301,7 @@ const edges = ref([
  
  The options include the connection line type, style and possible marker types (marker-end/marker-start).

-### connection-line-type <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> <Badge type="warning" class="text-white" style="line-height: inherit" text="deprecated" vertical="top" />
+### connection-line-type (optional) (deprecated)

 - Type: [`ConnectionLineType`](/typedocs/enums/ConnectionLineType)

@@ -327,7 +313,7 @@ const edges = ref([

  When using a custom connection line this prop does nothing.

-### connection-line-style <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> <Badge type="warning" class="text-white" style="line-height: inherit" text="deprecated" vertical="top" />
+### connection-line-style (optional) (deprecated)

 - Type: `CSSProperties` | `null`

@@ -335,7 +321,7 @@ const edges = ref([

  Additional styles to add to the default connection-line.

-### fit-view-on-init <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### fit-view-on-init (optional)

 - Type: `boolean`

@@ -347,7 +333,7 @@ const edges = ref([

 ## Viewport Options

-### zoom-activation-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### zoom-activation-key-code (optional)

 - Type: `KeyCode`

@@ -359,7 +345,7 @@ const edges = ref([

  Overwrites zoom-on-scroll or pan-on-scroll behavior as long as the key is pressed.

-### zoom-on-scroll <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### zoom-on-scroll (optional)

 - Type: `boolean`

@@ -369,7 +355,7 @@ const edges = ref([

  Whether to allow zooming in and out when scrolling inside the Vue Flow container.

-### zoom-on-pinch <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### zoom-on-pinch (optional)

 - Type: `boolean`

@@ -379,7 +365,7 @@ const edges = ref([

  Whether to allow zooming in and out when pinching (touch or trackpad) inside the Vue Flow container.

-### zoom-on-double-click <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### zoom-on-double-click (optional)

 - Type: `boolean`

@@ -389,7 +375,7 @@ const edges = ref([

  Whether to allow zooming in and out when double-clicking (or tapping) inside the Vue Flow container.

-### pan-on-scroll <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### pan-on-scroll (optional)

 - Type: `boolean`

@@ -401,13 +387,13 @@ const edges = ref([

  Does not work together with `zoom-on-scroll` but will work together with `zoom-activation-key-code`.

-### pan-on-scroll-speed <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### pan-on-scroll-speed (optional)

 - Type: `number`

 - Default: `0.5`

-### pan-on-scroll-mode <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### pan-on-scroll-mode (optional)

 - Type: [`PanOnScrollMode`](/typedocs/enums/PanOnScrollMode)

@@ -417,7 +403,7 @@ const edges = ref([

  Specify on which axis panning is allowed (x, y or both).

-### pan-on-drag <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### pan-on-drag (optional)

 - Old name: `paneMovable`

@@ -429,7 +415,7 @@ const edges = ref([

  Whether to allow moving the pane when dragging inside the Vue Flow container.

-### prevent-scrolling <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### prevent-scrolling (optional)

 - Type: `boolean`

@@ -439,7 +425,7 @@ const edges = ref([

  Enable this to prevent vue flow from scrolling inside its container, i.e. allow for the page to scroll.

-### no-wheel-class-name <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### no-wheel-class-name (optional)

 - Type: `string`

@@ -452,7 +438,7 @@ const edges = ref([

  Useful if you want to allow for scrolling _inside_ a node

-### no-pan-class-name <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### no-pan-class-name (optional)

 - Type: `string`

@@ -462,25 +448,25 @@ const edges = ref([

  Set a class name which prevents elements from triggering pan-scroll events.

-### min-zoom <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### min-zoom (optional)

 - Type: `number`

 - Default: `0.5`

-### max-zoom <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### max-zoom (optional)

 - Type: `number`

 - Default: `2`

-### default-zoom <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### default-zoom (optional)

 - Type: `number`

 - Default: `1`

-### default-position <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### default-position (optional)

 - Type: `[x: number, y: number]`

@@ -490,7 +476,7 @@ const edges = ref([

  Default viewport position on initial load.

-### translate-extent <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### translate-extent (optional)

 - Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent)

@@ -509,7 +495,7 @@ const edges = ref([

 ## Selection Options

-### selection-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### selection-key-code (optional)

 - Type: `KeyCode`

@@ -519,7 +505,7 @@ const edges = ref([

  Define a key which can be used to activate the selection rect.

-### multi-selection-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### multi-selection-key-code (optional)

 - Type: `KeyCode`

@@ -531,7 +517,7 @@ const edges = ref([

  Multi-selection can be used to select multiple nodes with clicks.

-### delete-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### delete-key-code (optional)

 - Type: `KeyCode`

@@ -543,7 +529,7 @@ const edges = ref([

 ## Global Node Options

-### nodes-draggable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### nodes-draggable (optional)

 - Type: `boolean`

@@ -571,7 +557,7 @@ const elements = ref([
 </template>
 ```

-### nodes-connectable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### nodes-connectable (optional)

 - Type: `boolean`

@@ -599,7 +585,7 @@ const elements = ref([
 </template>
 ```

-### nodes-extent <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### nodes-extent (optional)

 - Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent)

@@ -634,13 +620,13 @@ const elements = ref([
 </template>
 ```

-### select-nodes-on-drag <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### select-nodes-on-drag (optional)

 - Type: `boolean`

 - Default: `true`

-### snap-to-grid <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### snap-to-grid (optional)

 - Type: `boolean`

@@ -650,7 +636,7 @@ const elements = ref([

  If enabled, nodes will be placed and moved in a grid-like fashion.

-### snap-grid <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### snap-grid (optional)

 - Type: [`SnapGrid`](/typedocs/types/SnapGrid)

@@ -662,7 +648,7 @@ const elements = ref([

 ## Global Edge Options

-### edges-updatable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### edges-updatable (optional)

 - Type: `boolean`

@@ -692,7 +678,7 @@ const elements = ref([
 </template>
 ```

-### default-marker-color <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### default-marker-color (optional)

 - Type: `string`

@@ -702,7 +688,7 @@ const elements = ref([

  The default color value which is used when presenting edge-markers (arrowheads).

-### edge-updater-radius <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### edge-updater-radius (optional)

 - Type: `number`

@@ -712,7 +698,7 @@ const elements = ref([

  The radius at which an edge-updater can be triggered.

-### connect-on-click <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### connect-on-click (optional)

 - Type: `boolean`

@@ -724,7 +710,7 @@ const elements = ref([

  Useful if you want to enable creating edges on a touch device.

-### default-edge-options <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### default-edge-options (optional)

 - Type: [`DefaultEdgeOptions`](/typedocs/types/DefaultEdgeOptions)

@@ -734,7 +720,7 @@ const elements = ref([

  Does not work for the `addEdge` utility!

-### auto-connect <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### auto-connect (optional)

 - Type: `boolean` | [`Connector`](/typedocs/types/Connector)

@@ -787,7 +773,7 @@ const connector = (params) => {
 </template>
 ```

-### elevate-edges-on-select <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### elevate-edges-on-select (optional)

 - Type: `boolean`

@@ -803,7 +789,7 @@ const connector = (params) => {

 ## Global Element Options

-### only-render-visible-elements <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### only-render-visible-elements (optional)

 - Type: `boolean`

@@ -813,7 +799,7 @@ const connector = (params) => {

  Skip rendering elements that are not visible currently (either hidden or outside the current pane dimensions).

-### elements-selectable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### elements-selectable (optional)

 - Type: `boolean`