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

chore(docs,deps): update deps (#1598)

Browse Source 
* chore(docs,deps): update deps

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(docs,plugins): update web vitals plugin

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(docs): update links

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

---------

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2024-08-26 09:26:16 +02:00
committed by GitHub
parent f24230a010
commit 564d5931a5
17 changed files with 1196 additions and 896 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
docs/package.json
View File

@@ -11,10 +11,10 @@
"typedocs": "typedoc --options ./typedoc.json"
},
"dependencies": {
"@algolia/client-search": "^4.23.3",
"@stackblitz/sdk": "^1.10.0",
"@vercel/analytics": "^1.1.2",
"@vercel/speed-insights": "^1.0.8",
"@algolia/client-search": "^5.1.1",
"@stackblitz/sdk": "^1.11.0",
"@vercel/analytics": "^1.3.1",
"@vercel/speed-insights": "^1.0.12",
"@vue-flow/background": "workspace:*",
"@vue-flow/controls": "workspace:*",
"@vue-flow/core": "workspace:*",
@@ -23,24 +23,24 @@
"@vue-flow/node-toolbar": "workspace:*",
"@vue/repl": "3.4.0",
"blobity": "^0.2.3",
"vue": "^3.3.11",
"web-vitals": "^3.5.2"
"vue": "^3.4.38",
"web-vitals": "^4.2.3"
},
"devDependencies": {
"@iconify/json": "^2.2.217",
"@iconify/json": "^2.2.241",
"@tooling/eslint-config": "workspace:*",
"@tooling/tsconfig": "workspace:*",
"@windicss/plugin-scrollbar": "^1.2.3",
"dotenv": "^16.4.5",
"ohmyfetch": "^0.4.21",
"typedoc": "^0.25.7",
"typedoc-plugin-markdown": "^3.17.1",
"typedoc-plugin-merge-modules": "^5.1.0",
"unplugin-auto-import": "^0.17.6",
"unplugin-icons": "^0.19.0",
"unplugin-vue-components": "^0.27.0",
"typedoc": "^0.26.6",
"typedoc-plugin-markdown": "^4.2.6",
"typedoc-plugin-merge-modules": "^6.0.0",
"unplugin-auto-import": "^0.18.2",
"unplugin-icons": "^0.19.2",
"unplugin-vue-components": "^0.27.4",
"vite-plugin-windicss": "^1.9.3",
"vitepress": "1.2.3",
"vitepress": "^1.3.4",
"windicss": "^3.5.6"
}
}

13
docs/src/.vitepress/plugins/vercel-web-vitals-api.ts
View File

@@ -1,4 +1,4 @@
import { getCLS, getFCP, getFID, getLCP, getTTFB } from 'web-vitals'
import { onCLS, onFCP, onFID, onINP, onLCP, onTTFB } from 'web-vitals'
const vitalsUrl = 'https://vitals.vercel-analytics.com/v1/vitals'
@@ -43,11 +43,12 @@ function sendToAnalytics(metric, options) {
export function webVitals(options) {
try {
getFID((metric) => sendToAnalytics(metric, options))
getTTFB((metric) => sendToAnalytics(metric, options))
getLCP((metric) => sendToAnalytics(metric, options))
getCLS((metric) => sendToAnalytics(metric, options))
getFCP((metric) => sendToAnalytics(metric, options))
onFID((metric) => sendToAnalytics(metric, options))
onTTFB((metric) => sendToAnalytics(metric, options))
onLCP((metric) => sendToAnalytics(metric, options))
onCLS((metric) => sendToAnalytics(metric, options))
onFCP((metric) => sendToAnalytics(metric, options))
onINP((metric) => sendToAnalytics(metric, options))
} catch (err) {
console.error('[Analytics]', err)
}

4
docs/src/guide/components/background.md
View File

@@ -31,8 +31,8 @@ import { Background } from '@vue-flow/background'
## [Props](/typedocs/interfaces/BackgroundProps)
| Name | Definition | Type | Optional | Default |
|--------------|---------------------------------------|--------------------------------------------------------|----------|---------|
| variant | Pattern variant | [BackgroundVariant](/typedocs/enums/BackgroundVariant) | true | dots |
|--------------|---------------------------------------|---------------------------------------------------------------|----------|---------|
| variant | Pattern variant | [BackgroundVariant](/typedocs/enumerations/BackgroundVariant) | true | dots |
| gap | Pattern gap | number | true | 10 |
| size | Pattern size | number | true | 0.4 |
| patternColor | Pattern color | string | true | #81818a |

2
docs/src/guide/components/controls.md
View File

@@ -44,7 +44,7 @@ import '@vue-flow/controls/dist/style.css'
| 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 button click | [FitViewParams](/typedocs/types/FitViewParams) | true | - |
| fitViewParams | Params to use on fit-view button click | [FitViewParams](/typedocs/type-aliases/FitViewParams) | true | - |
## Emits

6
docs/src/guide/components/minimap.md
View File

@@ -51,9 +51,9 @@ When enabled, these props allow you to pan on drag and zoom on scroll using the
| Name | Definition | Type | Optional | Default |
|------------------|------------------------------|------------------------------------------------------------|----------|-------------------------|
| nodeColor | Node(s) Background color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | #fff |
| nodeStrokeColor | Border color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | #555 |
| nodeClassName | Extra classes | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | - |
| nodeColor | Node(s) Background color | string, [MiniMapNodeFunc](/typedocs/type-aliases/MiniMapNodeFunc) | true | #fff |
| nodeStrokeColor | Border color | string, [MiniMapNodeFunc](/typedocs/type-aliases/MiniMapNodeFunc) | true | #555 |
| nodeClassName | Extra classes | string, [MiniMapNodeFunc](/typedocs/type-aliases/MiniMapNodeFunc) | 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) |

2
docs/src/guide/components/node-toolbar.md
View File

@@ -70,7 +70,7 @@ defineProps<Props>()
|-----------------|---------------------------------------------------|--------------------------------------|----------|-------------------------|
| 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 |
| position | Toolbar position (top, left, right, bottom) | [Position](/typedocs/enumerations/Position) | true | Top |
| offset | Offset of toolbar position | number | true | 10 |
## Slots

2
docs/src/guide/controlled-flow.md
View File

@@ -14,7 +14,7 @@ Though, there are cases where you want to take control of changes and apply them
In this guide, we will learn how to take control of changes and apply them manually.
## What is a [Change](https://vueflow.dev/typedocs/types/NodeChange.html)?
## What is a [Change](https://vueflow.dev/typedocs/type-aliases/NodeChange.html)?
A *change* is anything that is triggered by an interaction with the flow, like adding, updating (position, selected), or removing a node or an edge, either
by dragging, clicking etc. or by using the provided API.

8
docs/src/guide/edge.md
View File

@@ -86,7 +86,7 @@ Each edge runs from one handle to another, and can be customized to your liking.
Remember, every edge is unique and thus **requires a unique id**, a source and target node id.
For the full list of options available for an edge, check out the [Edge Type](/typedocs/types/Edge).
For the full list of options available for an edge, check out the [Edge Type](/typedocs/type-aliases/Edge).
## Adding Edges to the Graph
@@ -801,8 +801,8 @@ But you may wish to expand on these features or implement your business logic in
| label | Edge label, can be a string or a VNode | string \| VNode \| Component \| Object | <Check class="text-[var(--vp-c-brand)]" /> |
| style | CSS properties | CSSProperties | <Check class="text-[var(--vp-c-brand)]" /> |
| selected | Is edge selected | boolean | <Check class="text-[var(--vp-c-brand)]" /> |
| sourcePosition | Source position | [Position](/typedocs/enums/Position) | <Close class="text-red-500" /> |
| targetPosition | Target position | [Position](/typedocs/enums/Position) | <Close class="text-red-500" /> |
| sourcePosition | Source position | [Position](/typedocs/enumerations/Position) | <Close class="text-red-500" /> |
| targetPosition | Target position | [Position](/typedocs/enumerations/Position) | <Close class="text-red-500" /> |
| sourceHandleId | ID of the source handle | string | <Check class="text-[var(--vp-c-brand)]" /> |
| targetHandleId | ID of the target handle | string | <Check class="text-[var(--vp-c-brand)]" /> |
| animated | Is edge animated | boolean | <Check class="text-[var(--vp-c-brand)]" /> |
@@ -812,7 +812,7 @@ But you may wish to expand on these features or implement your business logic in
| curvature | The curvature of the edge | number | <Check class="text-[var(--vp-c-brand)]" /> |
| interactionWidth | Width of the interaction area for the edge | number | <Check class="text-[var(--vp-c-brand)]" /> |
| data | Additional data of edge | any object | <Close class="text-red-500" /> |
| events | Contextual and custom events of edge | [EdgeEventsOn](/typedocs/types/EdgeEventsOn) | <Close class="text-red-500" /> |
| events | Contextual and custom events of edge | [EdgeEventsOn](/typedocs/type-aliases/EdgeEventsOn) | <Close class="text-red-500" /> |
## Edge Events

2
docs/src/guide/getting-started.md
View File

@@ -49,7 +49,7 @@ $ yarn add @vue-flow/core
## Quick Start
In Vue Flow, a graph consists of [**nodes**](/typedocs/interfaces/Node) and [**edges**](/typedocs/types/Edge).
In Vue Flow, a graph consists of [**nodes**](/typedocs/interfaces/Node) and [**edges**](/typedocs/type-aliases/Edge).
**Each node or edge requires a unique id.**

2
docs/src/guide/handle.md
View File

@@ -172,7 +172,7 @@ Upon mounting, handles will automatically attempt to attach to the node.
However, if for any reason this isn't happening as expected, you can stick to the guideline provided below to enforce Vue Flow to update the node internals.
:::
At times, you may need to modify handle positions dynamically or programmatically add new handles to a node. In this scenario, the [`updateNodeInternals`](/typedocs/types/UpdateNodeInternals) method found in Vue Flow's API comes in handy.
At times, you may need to modify handle positions dynamically or programmatically add new handles to a node. In this scenario, the [`updateNodeInternals`](/typedocs/type-aliases/UpdateNodeInternals) method found in Vue Flow's API comes in handy.
Invoking this method is vital when dealing with dynamic handles. If not, the node might fail to recognize these new handles, resulting in misaligned edges.

16
docs/src/guide/node.md
View File

@@ -423,7 +423,7 @@ function onSomeEvent(nodeId) {
:::
## [Predefined Node-Types](/typedocs/types/DefaultNodeTypes)
## [Predefined Node-Types](/typedocs/type-aliases/DefaultNodeTypes)
Vue Flow provides several built-in node types that you can leverage immediately.
The included node types are `default`, `input`, and `output`.
@@ -749,23 +749,23 @@ But you may wish to expand on these features or implement your business logic in
| id | Unique node id | string | <Close class="text-red-500" /> |
| type | Node Type | string | <Close class="text-red-500" /> |
| selected | Is node selected | boolean | <Close class="text-red-500" /> |
| connectable | Can node handles be connected | [HandleConnectable](/typedocs/types/HandleConnectable) | <Close class="text-red-500" /> |
| connectable | Can node handles be connected | [HandleConnectable](/typedocs/type-aliases/HandleConnectable) | <Close class="text-red-500" /> |
| position | Node's x, y (relative) position on the graph | [XYPosition](/typedocs/interfaces/XYPosition) | <Close class="text-red-500" /> |
| dimensions | Dom element dimensions (width, height) | [Dimensions](/typedocs/interfaces/Dimensions) | <Close class="text-red-500" /> |
| label | Node label, either a string or a VNode. `h('div', props, children)` | string \| VNode \| Component \| Object | <Check class="text-[var(--vp-c-brand)]" /> |
| isValidTargetPos <Badge type="warning" text="deprecated" /> | Called when used as target for new connection | [ValidConnectionFunc](/typedocs/types/ValidConnectionFunc) | <Check class="text-[var(--vp-c-brand)]" /> |
| isValidSourcePos <Badge type="warning" text="deprecated" /> | Called when used as the source for a new connection | [ValidConnectionFunc](/typedocs/types/ValidConnectionFunc) | <Check class="text-[var(--vp-c-brand)]" /> |
| isValidTargetPos <Badge type="warning" text="deprecated" /> | Called when used as target for new connection | [ValidConnectionFunc](/typedocs/type-aliases/ValidConnectionFunc) | <Check class="text-[var(--vp-c-brand)]" /> |
| isValidSourcePos <Badge type="warning" text="deprecated" /> | Called when used as the source for a new connection | [ValidConnectionFunc](/typedocs/type-aliases/ValidConnectionFunc) | <Check class="text-[var(--vp-c-brand)]" /> |
| parent | Parent node id | string | <Check class="text-[var(--vp-c-brand)]" /> |
| dragging | Is node currently dragging | boolean | <Close class="text-red-500" /> |
| resizing | Is node currently resizing | boolean | <Close class="text-red-500" /> |
| zIndex | Node z-index | number | <Close class="text-red-500" /> |
| targetPosition | Handle position | [Position](/typedocs/enums/Position) | <Check class="text-[var(--vp-c-brand)]" /> |
| sourcePosition | Handle position | [Position](/typedocs/enums/Position) | <Check class="text-[var(--vp-c-brand)]" /> |
| targetPosition | Handle position | [Position](/typedocs/enumerations/Position) | <Check class="text-[var(--vp-c-brand)]" /> |
| sourcePosition | Handle position | [Position](/typedocs/enumerations/Position) | <Check class="text-[var(--vp-c-brand)]" /> |
| dragHandle | Drag handle query selector | string | <Check class="text-[var(--vp-c-brand)]" /> |
| data | Additional data of node | any object | <Close class="text-red-500" /> |
| events | Contextual and custom events of node | [NodeEventsOn](/typedocs/types/NodeEventsOn) | <Close class="text-red-500" /> |
| events | Contextual and custom events of node | [NodeEventsOn](/typedocs/type-aliases/NodeEventsOn) | <Close class="text-red-500" /> |
## [Node Events](/typedocs/types/NodeEventsHandler)
## [Node Events](/typedocs/type-aliases/NodeEventsHandler)
Vue Flow provides two main ways of listening to node events,
either by using `useVueFlow` to bind listeners to the event handlers or by binding them to the `<VueFlow>` component.

2
docs/src/guide/theming.md
View File

@@ -123,7 +123,7 @@ const nodes = ref([
:::
### [Redefining Styles with CSS variables](/typedocs/types/CSSVars)
### [Redefining Styles with CSS variables](/typedocs/type-aliases/CSSVars)
Some of the defined theme styles can be overwritten using CSS variables.
These alterations can be implemented either on a global scale or to individual elements.

6
docs/src/guide/utils/graph.md
View File

@@ -73,7 +73,7 @@ const toggleClass = () => {
## [addEdge](/typedocs/functions/isEdge) (deprecated)
::: warning
In the composition API you should use [`addEdges`](/typedocs/types/AddEdges) of [`useVueFlow`](/guide/composables#usevueflow/)
In the composition API you should use [`addEdges`](/typedocs/type-aliases/AddEdges) of [`useVueFlow`](/guide/composables#usevueflow/)
:::
- Details:
@@ -103,10 +103,10 @@ const onConnect = (params) => {
</template>
```
## [updateEdge](/typedocs/functions/updateEdge-1) (deprecated)
## [updateEdge](/typedocs/functions/updateEdge) (deprecated)
::: warning
In the composition API you should use [`updateEdge`](/typedocs/types/UpdateEdge) of [`useVueFlow`](/guide/composables#usevueflow/)
In the composition API you should use [`updateEdge`](/typedocs/type-aliases/UpdateEdge) of [`useVueFlow`](/guide/composables#usevueflow/)
:::
- Details:

18
docs/src/guide/utils/instance.md
View File

@@ -1,7 +1,7 @@
# Viewport Functions
Viewport Functions can be accessed via the [`useVueFlow`](/guide/composables#usevueflow)
utility or with the [`VueFlowStore`](/typedocs/types/VueFlowStore)
utility or with the [`VueFlowStore`](/typedocs/type-aliases/VueFlowStore)
instance provided by [`onPaneReady`](/typedocs/interfaces/FlowEvents#paneready).
- Using Event Hooks (Composable)
@@ -43,7 +43,7 @@ export default defineComponent({
</template>
```
## [project](/typedocs/types/Project)
## [project](/typedocs/type-aliases/Project)
- Details:
@@ -57,7 +57,7 @@ export default defineComponent({
vueFlowInstance.project({ x: 100, y: 100 })
```
## [fitView](/typedocs/types/FitView)
## [fitView](/typedocs/type-aliases/FitView)
- Details:
@@ -71,7 +71,7 @@ vueFlowInstance.project({ x: 100, y: 100 })
vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
```
## [fitBounds](/typedocs/types/FitBounds)
## [fitBounds](/typedocs/type-aliases/FitBounds)
- Details:
@@ -83,7 +83,7 @@ vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
```
## [setViewport](/typedocs/types/SetViewport)
## [setViewport](/typedocs/type-aliases/SetViewport)
- Details:
@@ -95,25 +95,25 @@ vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
vueFlowInstance.setViewport({ x: 100, y: 100, zoom: 1.5 })
```
## [getViewport](/typedocs/types/GetViewport)
## [getViewport](/typedocs/type-aliases/GetViewport)
- Details:
Gets position and zoom of the pane.
## [zoomIn](/typedocs/types/ZoomInOut)
## [zoomIn](/typedocs/type-aliases/ZoomInOut)
- Details:
Zooms in.
## [zoomOut](/typedocs/types/ZoomInOut)
## [zoomOut](/typedocs/type-aliases/ZoomInOut)
- Details:
Zooms out.
## [zoomTo](/typedocs/types/ZoomTo)
## [zoomTo](/typedocs/type-aliases/ZoomTo)
- Details:

30
docs/src/guide/vue-flow/config.md
View File

@@ -112,7 +112,7 @@ const nodes = ref([
### edges (optional)
- Type: [`Edge[]`](/typedocs/types/Edge)
- Type: [`Edge[]`](/typedocs/type-aliases/Edge)
- Details:
@@ -171,7 +171,7 @@ const edges = ref([
### modelValue (optional) (deprecated)
- Type: [`Elements`](/typedocs/types/Elements)
- Type: [`Elements`](/typedocs/type-aliases/Elements)
- Details:
@@ -203,9 +203,9 @@ const elements = ref([
### node-types (optional)
- Type: [`Record<string, NodeComponent>`](/typedocs/types/NodeComponent)
- Type: [`Record<string, NodeComponent>`](/typedocs/type-aliases/NodeComponent)
- Default: [`DefaultNodeTypes`](/typedocs/types/DefaultNodeTypes)
- Default: [`DefaultNodeTypes`](/typedocs/type-aliases/DefaultNodeTypes)
- Details:
@@ -248,7 +248,7 @@ const edges = ref([
### edge-types (optional)
- Type: [`Record<string, EdgeComponent>`](/typedocs/types/EdgeComponent)
- Type: [`Record<string, EdgeComponent>`](/typedocs/type-aliases/EdgeComponent)
- Default: [`DefaultEdgeTypes`](/typedocs/interfaces/DefaultEdgeTypes)
@@ -321,7 +321,7 @@ const edges = ref([
### connection-mode (optional)
- Type: [`ConnectionMode`](/typedocs/enums/ConnectionMode)
- Type: [`ConnectionMode`](/typedocs/enumerations/ConnectionMode)
- Default: `ConnectionMode.Loose`
@@ -341,7 +341,7 @@ const edges = ref([
### connection-line-type (optional) (deprecated)
- Type: [`ConnectionLineType`](/typedocs/enums/ConnectionLineType)
- Type: [`ConnectionLineType`](/typedocs/enumerations/ConnectionLineType)
- Default: `ConnectionLineType.Bezier`
@@ -433,7 +433,7 @@ const edges = ref([
### pan-on-scroll-mode (optional)
- Type: [`PanOnScrollMode`](/typedocs/enums/PanOnScrollMode)
- Type: [`PanOnScrollMode`](/typedocs/enumerations/PanOnScrollMode)
- Default: `PanOnScrollMode.Free`
@@ -510,7 +510,7 @@ const edges = ref([
### translate-extent (optional)
- Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent)
- Type: [`CoordinateExtent`](/typedocs/type-aliases/CoordinateExtent)
- Default:
@@ -637,7 +637,7 @@ const nodes = ref([
### node-extent (optional)
- Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent)
- Type: [`CoordinateExtent`](/typedocs/type-aliases/CoordinateExtent)
- Default:
@@ -694,7 +694,7 @@ const nodes = ref([
### snap-grid (optional)
- Type: [`SnapGrid`](/typedocs/types/SnapGrid)
- Type: [`SnapGrid`](/typedocs/type-aliases/SnapGrid)
- Default: `[15, 15]`
@@ -785,7 +785,7 @@ const edges = ref([
### default-edge-options (optional)
- Type: [`DefaultEdgeOptions`](/typedocs/types/DefaultEdgeOptions)
- Type: [`DefaultEdgeOptions`](/typedocs/type-aliases/DefaultEdgeOptions)
- Details:
@@ -795,7 +795,7 @@ const edges = ref([
### auto-connect (optional) (deprecated)
- Type: `boolean` | [`Connector`](/typedocs/types/Connector)
- Type: `boolean` | [`Connector`](/typedocs/type-aliases/Connector)
- Default: `false`
@@ -803,7 +803,7 @@ const edges = ref([
When connection is emitted, automatically create a new edge from params.
Also accepts a [`Connector`](/typedocs/types/Connector) which returns an edge-like object or false (if creating
Also accepts a [`Connector`](/typedocs/type-aliases/Connector) which returns an edge-like object or false (if creating
an edge is not allowed).
This option can be used as a shorthand for `onConnect((params) => addEdges([params]))`.
@@ -818,7 +818,7 @@ const edges = ref([
</template>
```
#### [Connector](/typedocs/types/Connector)
#### [Connector](/typedocs/type-aliases/Connector)
```vue
<script setup>

3
docs/typedoc.md.json
View File

@@ -13,7 +13,6 @@
"../packages/node-toolbar/src/index.ts",
"../packages/node-resizer/src/index.ts"
],
"allReflectionsHaveOwnDocument": true,
"categorizeByGroup": true,
"darkHighlightTheme": "vitesse-dark",
"lightHighlightTheme": "vitesse-light",
@@ -22,5 +21,5 @@
"cleanOutputDir": true,
"out": "src/typedocs",
"tsconfig": "tsconfig.docs.json",
"entryDocument": "index.md"
"entryFileName": "index.md"
}

1930
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff