alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update links and headlines

Browse Source
This commit is contained in:
braks
2022-08-01 21:10:14 +02:00
committed by Braks
parent 90b3bd0bc3
commit d077d41d71
9 changed files with 43 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/.vitepress/config.ts
+1 -1
View File
@@ -122,7 +122,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
text: 'Vue Flow', text: 'Vue Flow',
collapsible: true, collapsible: true,
items: [ items: [
{ text: 'Config / Props', link: '/guide/vue-flow/config' }, { text: 'Configuration', link: '/guide/vue-flow/config' },
{ text: 'State', link: '/guide/vue-flow/state' }, { text: 'State', link: '/guide/vue-flow/state' },
{ {
text: 'Actions', text: 'Actions',
docs/src/guide/components/controls.md
+6 -6
View File
@@ -16,12 +16,12 @@ To use the controls simply pass the `Controls` component as a child to the `VueF
## [Props](/typedocs/interfaces/ControlProps) ## [Props](/typedocs/interfaces/ControlProps)
| Name | Definition | Type | Optional | Default | | Name | Definition | Type | Optional | Default |
|-----------------|---------------------------|------------------------------------------------------|----------|---------| |-----------------|---------------------------|------------------------------------------------|----------|---------|
| showZoom | Show zoom btn | boolean | true | true | | showZoom | Show zoom btn | boolean | true | true |
| showFitView | Show fit-view btn | boolean | true | true | | showFitView | Show fit-view btn | boolean | true | true |
| showInteractive | Show lock interactive btn | boolean | true | true | | showInteractive | Show lock interactive btn | boolean | true | true |
| showZoom | Show zoom button | boolean | true | true | | showZoom | Show zoom button | boolean | true | true |
| fitViewParams | Params to use on fit-view | [FitViewParams](/typedocs/types/FitViewParams) | true | - | | fitViewParams | Params to use on fit-view | [FitViewParams](/typedocs/types/FitViewParams) | true | - |
## Emits ## Emits
docs/src/guide/getting-started.md
+5
View File
@@ -55,6 +55,11 @@ const elements = ref([
</template> </template>
``` ```
::: warning Necessary styles
Make sure you include the necessary styles.
See the [Theming](/guide/theming) section for more info.
:::
## TypeScript ## 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 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
docs/src/guide/theming.md
+1
View File
@@ -1,5 +1,6 @@
# Theming # Theming
## Library styles
VueFlow comes without any pre-injected stylings. Some necessary stylings have to be imported, though optional styles (i.e. VueFlow comes without any pre-injected stylings. Some necessary stylings have to be imported, though optional styles (i.e.
the default theme) can be skipped. the default theme) can be skipped.
docs/src/guide/utils/graph.md
+11 -11
View File
@@ -1,6 +1,6 @@
# Graph # Graph
### [isEdge](/typedocs/functions/isEdge) ## [isEdge](/typedocs/functions/isEdge)
- Details: - Details:
@@ -34,7 +34,7 @@ const toggleClass = () => {
</template> </template>
``` ```
### [isNode](/typedocs/functions/isNode) ## [isNode](/typedocs/functions/isNode)
- Details: - Details:
@@ -68,7 +68,7 @@ const toggleClass = () => {
</template> </template>
``` ```
### [addEdge](/typedocs/functions/isEdge) ## [addEdge](/typedocs/functions/isEdge)
::: warning ::: warning
In the composition API you should use [`addEdges`](/typedocs/types/AddEdges) In the composition API you should use [`addEdges`](/typedocs/types/AddEdges)
@@ -101,7 +101,7 @@ const onConnect = (params) => {
</template> </template>
``` ```
### [updateEdge](/typedocs/functions/updateEdge) ## [updateEdge](/typedocs/functions/updateEdge)
::: warning ::: warning
In the composition API you use access [`updateEdge`](/typedocs/types/UpdateEdge) In the composition API you use access [`updateEdge`](/typedocs/types/UpdateEdge)
@@ -134,31 +134,31 @@ const onEdgeUpdate = ({ edge, connection }) => {
</template> </template>
``` ```
### [getOutgoers](/typedocs/functions/getOutgoers) ## [getOutgoers](/typedocs/functions/getOutgoers)
- Details: - Details:
Returns all target elements of a node. Returns all target elements of a node.
### [getIncomers](/typedocs/functions/getIncomers) ## [getIncomers](/typedocs/functions/getIncomers)
- Details: - Details:
Returns all source elements of a node. Returns all source elements of a node.
### [getConnectedEdges](/typedocs/functions/getConnectedEdges) ## [getConnectedEdges](/typedocs/functions/getConnectedEdges)
- Details: - Details:
Returns all connected edges of a node. Returns all connected edges of a node.
### [getTransformForBounds](/typedocs/functions/getTransformForBounds) ## [getTransformForBounds](/typedocs/functions/getTransformForBounds)
- Details: - Details:
Returns a transformation for the viewport according to input bounds. Returns a transformation for the viewport according to input bounds.
### [getRectOfNodes](/typedocs/functions/getRectOfNodes) ## [getRectOfNodes](/typedocs/functions/getRectOfNodes)
- Details: - Details:
@@ -166,13 +166,13 @@ const onEdgeUpdate = ({ edge, connection }) => {
Useful when you need to know the boundaries of a set of nodes. Useful when you need to know the boundaries of a set of nodes.
### [getNodesInside](/typedocs/functions/getNodesInside) ## [getNodesInside](/typedocs/functions/getNodesInside)
- Details: - Details:
Returns node elements that are inside a specified rect. Returns node elements that are inside a specified rect.
### [getMarkerId](/typedocs/functions/getMarkerId) ## [getMarkerId](/typedocs/functions/getMarkerId)
- Details: - Details:
docs/src/guide/utils/instance.md
+12 -12
View File
@@ -47,7 +47,7 @@ export default defineComponent({
</template> </template>
``` ```
### [project](/typedocs/types/Project) ## [project](/typedocs/types/Project)
- Details: - Details:
@@ -61,7 +61,7 @@ export default defineComponent({
vueFlowInstance.project({ x: 100, y: 100 }) vueFlowInstance.project({ x: 100, y: 100 })
``` ```
### [fitView](/typedocs/types/FitView) ## [fitView](/typedocs/types/FitView)
- Details: - Details:
@@ -75,7 +75,7 @@ vueFlowInstance.project({ x: 100, y: 100 })
vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true }) vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
``` ```
### [fitBounds](/typedocs/types/FitBounds) ## [fitBounds](/typedocs/types/FitBounds)
- Details: - Details:
@@ -87,7 +87,7 @@ vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
vueFlowInstance.fitBounds(getRectOfNodes(nodes.value)) vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
``` ```
### [setTransform](/typedocs/types/SetTransform) ## [setTransform](/typedocs/types/SetTransform)
- Details: - Details:
@@ -99,49 +99,49 @@ vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 }) vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })
``` ```
### [getTransform](/typedocs/types/GetTransform) ## [getTransform](/typedocs/types/GetTransform)
- Details: - Details:
Gets position and zoom of the pane. Gets position and zoom of the pane.
### [zoomIn](/typedocs/types/ZoomInOut) ## [zoomIn](/typedocs/types/ZoomInOut)
- Details: - Details:
Zooms in. Zooms in.
### [zoomOut](/typedocs/types/ZoomInOut) ## [zoomOut](/typedocs/types/ZoomInOut)
- Details: - Details:
Zooms out. Zooms out.
### [zoomTo](/typedocs/types/ZoomTo) ## [zoomTo](/typedocs/types/ZoomTo)
- Details: - Details:
Zooms to specific level. Zooms to specific level.
### [getElements](/typedocs/interfaces/Getters#getelements) ## [getElements](/typedocs/interfaces/Getters#getelements)
- Details: - Details:
Returns currently stored elements (nodes + edges). Returns currently stored elements (nodes + edges).
### [getNodes](/typedocs/interfaces/Getters#getnodes) ## [getNodes](/typedocs/interfaces/Getters#getnodes)
- Details: - Details:
Returns currently stored nodes. Returns currently stored nodes.
### [getEdges](/typedocs/interfaces/Getters#getedges) ## [getEdges](/typedocs/interfaces/Getters#getedges)
- Details: - Details:
Returns currently stored edges. Returns currently stored edges.
### [toObject](/typedocs/interfaces/Actions#toobject) ## [toObject](/typedocs/interfaces/Actions#toobject)
- Details: - Details:
docs/src/guide/vue-flow/config.md
+3 -1
View File
@@ -1,4 +1,6 @@
# Config (Props) # Configuration
## Options / Props
Vue Flow allows you to configure zoom, graph and flow behavior. Vue Flow allows you to configure zoom, graph and flow behavior.
Configuration can be passed either as props to the `VueFlow` component or Configuration can be passed either as props to the `VueFlow` component or
docs/src/guide/vue-flow/slots.md
+2
View File
@@ -1,5 +1,7 @@
# Slots # Slots
##
Vue Flow provides several slots for customization. Vue Flow provides several slots for customization.
In addition to the node and edge slots (see the guide on [nodes](/guide/node) and [edges](/guide/edge)), In addition to the node and edge slots (see the guide on [nodes](/guide/node) and [edges](/guide/edge)),
there are a number of other slots you can use to customize the visualization. there are a number of other slots you can use to customize the visualization.
docs/src/guide/vue-flow/state.md
+2
View File
@@ -1,5 +1,7 @@
# State # State
##
Under the hood Vue Flow uses [Provide/Inject](https://v3.vuejs.org/guide/component-provide-inject) Under the hood Vue Flow uses [Provide/Inject](https://v3.vuejs.org/guide/component-provide-inject)
to pass around it's state between components. to pass around it's state between components.
You can access the internal state through the [`useVueFlow`](/guide/composables#usevueflow/) composable. You can access the internal state through the [`useVueFlow`](/guide/composables#usevueflow/) composable.