diff --git a/docs/package.json b/docs/package.json index 6c4b9999..ac1b9d9e 100644 --- a/docs/package.json +++ b/docs/package.json @@ -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" } } diff --git a/docs/src/.vitepress/plugins/vercel-web-vitals-api.ts b/docs/src/.vitepress/plugins/vercel-web-vitals-api.ts index 04813990..7bedb2aa 100644 --- a/docs/src/.vitepress/plugins/vercel-web-vitals-api.ts +++ b/docs/src/.vitepress/plugins/vercel-web-vitals-api.ts @@ -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) } diff --git a/docs/src/guide/components/background.md b/docs/src/guide/components/background.md index e3e1242b..b928281c 100644 --- a/docs/src/guide/components/background.md +++ b/docs/src/guide/components/background.md @@ -30,14 +30,14 @@ import { Background } from '@vue-flow/background' ## [Props](/typedocs/interfaces/BackgroundProps) -| Name | Definition | Type | Optional | Default | -|--------------|---------------------------------------|--------------------------------------------------------|----------|---------| -| variant | Pattern variant | [BackgroundVariant](/typedocs/enums/BackgroundVariant) | true | dots | -| gap | Pattern gap | number | true | 10 | -| size | Pattern size | number | true | 0.4 | -| patternColor | Pattern color | string | true | #81818a | -| bgColor | Background color (overwrites pattern) | string | 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 | +| Name | Definition | Type | Optional | Default | +|--------------|---------------------------------------|---------------------------------------------------------------|----------|---------| +| 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 | +| bgColor | Background color (overwrites pattern) | string | 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 | diff --git a/docs/src/guide/components/controls.md b/docs/src/guide/components/controls.md index c40b9aba..80ecafb3 100644 --- a/docs/src/guide/components/controls.md +++ b/docs/src/guide/components/controls.md @@ -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 diff --git a/docs/src/guide/components/minimap.md b/docs/src/guide/components/minimap.md index ea538163..927ed54e 100644 --- a/docs/src/guide/components/minimap.md +++ b/docs/src/guide/components/minimap.md @@ -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) | diff --git a/docs/src/guide/components/node-toolbar.md b/docs/src/guide/components/node-toolbar.md index 2f36a068..be2413ce 100644 --- a/docs/src/guide/components/node-toolbar.md +++ b/docs/src/guide/components/node-toolbar.md @@ -70,7 +70,7 @@ defineProps() |-----------------|---------------------------------------------------|--------------------------------------|----------|-------------------------| | 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 diff --git a/docs/src/guide/controlled-flow.md b/docs/src/guide/controlled-flow.md index 568d5f52..8e8a7b36 100644 --- a/docs/src/guide/controlled-flow.md +++ b/docs/src/guide/controlled-flow.md @@ -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. diff --git a/docs/src/guide/edge.md b/docs/src/guide/edge.md index a7871a75..7cf4c446 100644 --- a/docs/src/guide/edge.md +++ b/docs/src/guide/edge.md @@ -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 | | | style | CSS properties | CSSProperties | | | selected | Is edge selected | boolean | | -| sourcePosition | Source position | [Position](/typedocs/enums/Position) | | -| targetPosition | Target position | [Position](/typedocs/enums/Position) | | +| sourcePosition | Source position | [Position](/typedocs/enumerations/Position) | | +| targetPosition | Target position | [Position](/typedocs/enumerations/Position) | | | sourceHandleId | ID of the source handle | string | | | targetHandleId | ID of the target handle | string | | | animated | Is edge animated | boolean | | @@ -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 | | | interactionWidth | Width of the interaction area for the edge | number | | | data | Additional data of edge | any object | | -| events | Contextual and custom events of edge | [EdgeEventsOn](/typedocs/types/EdgeEventsOn) | | +| events | Contextual and custom events of edge | [EdgeEventsOn](/typedocs/type-aliases/EdgeEventsOn) | | ## Edge Events diff --git a/docs/src/guide/getting-started.md b/docs/src/guide/getting-started.md index 46bae677..c825b128 100644 --- a/docs/src/guide/getting-started.md +++ b/docs/src/guide/getting-started.md @@ -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.** diff --git a/docs/src/guide/handle.md b/docs/src/guide/handle.md index e2d817a1..bd90e538 100644 --- a/docs/src/guide/handle.md +++ b/docs/src/guide/handle.md @@ -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. diff --git a/docs/src/guide/node.md b/docs/src/guide/node.md index 6111763d..c513ce31 100644 --- a/docs/src/guide/node.md +++ b/docs/src/guide/node.md @@ -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 | | | type | Node Type | string | | | selected | Is node selected | boolean | | -| connectable | Can node handles be connected | [HandleConnectable](/typedocs/types/HandleConnectable) | | +| connectable | Can node handles be connected | [HandleConnectable](/typedocs/type-aliases/HandleConnectable) | | | position | Node's x, y (relative) position on the graph | [XYPosition](/typedocs/interfaces/XYPosition) | | | dimensions | Dom element dimensions (width, height) | [Dimensions](/typedocs/interfaces/Dimensions) | | | label | Node label, either a string or a VNode. `h('div', props, children)` | string \| VNode \| Component \| Object | | -| isValidTargetPos | Called when used as target for new connection | [ValidConnectionFunc](/typedocs/types/ValidConnectionFunc) | | -| isValidSourcePos | Called when used as the source for a new connection | [ValidConnectionFunc](/typedocs/types/ValidConnectionFunc) | | +| isValidTargetPos | Called when used as target for new connection | [ValidConnectionFunc](/typedocs/type-aliases/ValidConnectionFunc) | | +| isValidSourcePos | Called when used as the source for a new connection | [ValidConnectionFunc](/typedocs/type-aliases/ValidConnectionFunc) | | | parent | Parent node id | string | | | dragging | Is node currently dragging | boolean | | | resizing | Is node currently resizing | boolean | | | zIndex | Node z-index | number | | -| targetPosition | Handle position | [Position](/typedocs/enums/Position) | | -| sourcePosition | Handle position | [Position](/typedocs/enums/Position) | | +| targetPosition | Handle position | [Position](/typedocs/enumerations/Position) | | +| sourcePosition | Handle position | [Position](/typedocs/enumerations/Position) | | | dragHandle | Drag handle query selector | string | | | data | Additional data of node | any object | | -| events | Contextual and custom events of node | [NodeEventsOn](/typedocs/types/NodeEventsOn) | | +| events | Contextual and custom events of node | [NodeEventsOn](/typedocs/type-aliases/NodeEventsOn) | | -## [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 `` component. diff --git a/docs/src/guide/theming.md b/docs/src/guide/theming.md index a011cfa8..61a789c5 100644 --- a/docs/src/guide/theming.md +++ b/docs/src/guide/theming.md @@ -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. diff --git a/docs/src/guide/utils/graph.md b/docs/src/guide/utils/graph.md index f6e27dbf..7bad19d4 100644 --- a/docs/src/guide/utils/graph.md +++ b/docs/src/guide/utils/graph.md @@ -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) => { ``` -## [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: diff --git a/docs/src/guide/utils/instance.md b/docs/src/guide/utils/instance.md index 6f62ae50..f6b88c1a 100644 --- a/docs/src/guide/utils/instance.md +++ b/docs/src/guide/utils/instance.md @@ -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({ ``` -## [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: diff --git a/docs/src/guide/vue-flow/config.md b/docs/src/guide/vue-flow/config.md index ed7a609d..979d875d 100644 --- a/docs/src/guide/vue-flow/config.md +++ b/docs/src/guide/vue-flow/config.md @@ -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`](/typedocs/types/NodeComponent) +- Type: [`Record`](/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`](/typedocs/types/EdgeComponent) +- Type: [`Record`](/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([ ``` -#### [Connector](/typedocs/types/Connector) +#### [Connector](/typedocs/type-aliases/Connector) ```vue