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

update(docs): fix view height

Browse Source
This commit is contained in:
Braks
2021-10-23 16:29:42 +02:00
parent 67876cdd1b
commit ae0772b6d4
42 changed files with 91 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/app.vue
View File

@@ -1,6 +1,6 @@
<template>
<Header />
<div class="flex h-full">
<div id="app" class="flex">
<Sidebar />
<div id="vue-flow-docs" class="flex-1">
<NuxtPage />
@@ -10,4 +10,8 @@
<style>
@import 'assets/index.css';
@import 'node_modules/@braks/vue-flow/dist/style.css';
#app {
height: calc(100% - 92px);
}
</style>

3
docs/assets/index.css
View File

@@ -13,9 +13,10 @@ html,
body,
#root,
#__nuxt {
height: 100vh;
margin: 0;
height: 100%;
color: #111;
overflow: hidden;
background-position: center;
background-size: cover;
background-repeat: no-repeat;

2
docs/components/Flow.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import Flow, { Background, Connection, Elements, Edge, removeElements, addEdge } from '@braks/vue-flow'
import { Flow, Background, Connection, Elements, Edge, removeElements, addEdge } from '@braks/vue-flow'
const initialElements: Elements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },

2
docs/components/Header.vue
View File

@@ -1,5 +1,5 @@
<template>
<header class="flex items-center py-4 px-8 text-white">
<header class="flex items-center py-4 px-8 text-white h-[92px]">
<div class="flex flex-col">
<a class="logo text-xl" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow </a>
<span class="text-xs text-gray-800 mt-2"

5
docs/nuxt.config.ts
View File

@@ -5,7 +5,8 @@ export default defineNuxtConfig({
title: 'Vue Flow',
description: 'Vue Flow Documentation',
},
target: 'client',
ssr: false,
router: {
base: '/',
},
buildModules: ['nuxt-windicss'],
})

1
docs/package.json
View File

@@ -11,6 +11,7 @@
"localforage": "^1.10.0"
},
"devDependencies": {
"@nuxt/nitro": "^0.10.0",
"@types/dagre": "^0.7.46",
"nuxt-windicss": "^2.0.4",
"nuxt3": "latest"

10
docs/pages/examples/basic.vue
View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import Flow, {
import {
Flow,
MiniMap,
Controls,
Background,
@@ -26,12 +27,9 @@ const elements = ref<Elements>([
])
const rfInstance = ref<FlowInstance | null>(null)
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
const onConnect = (params: Edge | Connection) => {
elements.value = addEdge(params, elements.value)
console.log(params)
}
const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value))
const onLoad = (flowInstance: FlowInstance) => {
flowInstance.fitView({ padding: 0.1 })
flowInstance?.fitView({ padding: 0.1 })
rfInstance.value = flowInstance
}

3
docs/pages/examples/button-edge.vue
View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import Flow, {
import {
Flow,
addEdge,
Background,
Connection,

2
docs/pages/examples/custom-connectionline.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import Flow, { removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '@braks/vue-flow'
import { Flow, removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '@braks/vue-flow'
import CustomConnectionLine from '../../components/CustomConnectionLine.vue'
const elements = ref<Elements>([

3
docs/pages/examples/custom-node.vue
View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import Flow, {
import {
Flow,
isEdge,
removeElements,
addEdge,

3
docs/pages/examples/drag-n-drop.vue
View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import Flow, {
import {
Flow,
addEdge,
removeElements,
Controls,

3
docs/pages/examples/edge-types.vue
View File

@@ -2,7 +2,8 @@
/**
* Example for checking the different edge types and source and target positions
*/
import Flow, {
import {
Flow,
removeElements,
addEdge,
MiniMap,

3
docs/pages/examples/edges.vue
View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import Flow, {
import {
Flow,
MiniMap,
Controls,
Background,

3
docs/pages/examples/empty.vue
View File

@@ -1,6 +1,7 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue'
import Flow, {
import {
Flow,
MiniMap,
Controls,
Background,

2
docs/pages/examples/hidden.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import Flow, { MiniMap, Controls, Connection, Edge, Elements, addEdge } from '@braks/vue-flow'
import { Flow, MiniMap, Controls, Connection, Edge, Elements, addEdge } from '@braks/vue-flow'
const initialElements: Elements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },

3
docs/pages/examples/index.vue
View File

@@ -1,6 +1,7 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue'
import Flow, {
import {
Flow,
removeElements,
addEdge,
MiniMap,

3
docs/pages/examples/interaction.vue
View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import Flow, {
import {
Flow,
addEdge,
MiniMap,
Controls,

3
docs/pages/examples/layouting.vue
View File

@@ -1,6 +1,7 @@
<script lang="ts" setup>
import dagre from 'dagre'
import Flow, {
import {
Flow,
Controls,
addEdge,
ConnectionMode,

2
docs/pages/examples/node-type-change.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue'
import Flow, { addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '@braks/vue-flow'
import { Flow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '@braks/vue-flow'
const initialElements: Elements = [
{

2
docs/pages/examples/node-types-id-change.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue'
import Flow, { Elements, Position, NodeType, Connection, Edge, addEdge } from '@braks/vue-flow'
import { Flow, Elements, Position, NodeType, Connection, Edge, addEdge } from '@braks/vue-flow'
import NodeA from '../../components/NodeA.vue'
import NodeB from '../../components/NodeB.vue'

3
docs/pages/examples/provider.vue
View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import Flow, {
import {
Flow,
addEdge,
removeElements,
Controls,

2
docs/pages/examples/save-restore.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import Flow, { addEdge, Connection, Node, Edge, Elements, FlowInstance, removeElements } from '@braks/vue-flow'
import { Flow, addEdge, Connection, Node, Edge, Elements, FlowInstance, removeElements } from '@braks/vue-flow'
import Controls from '../../components/SaveControls.vue'
const initialElements: Elements = [

3
docs/pages/examples/stress.vue
View File

@@ -1,6 +1,7 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue'
import Flow, {
import {
Flow,
removeElements,
addEdge,
MiniMap,

2
docs/pages/examples/switch.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import Flow, { removeElements, addEdge, Node, FlowElement, Elements, Connection, Edge } from '@braks/vue-flow'
import { Flow, removeElements, addEdge, Node, FlowElement, Elements, Connection, Edge } from '@braks/vue-flow'
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)

3
docs/pages/examples/unidirectional.vue
View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import Flow, {
import {
Flow,
NodeType,
addEdge,
useZoomPanHelper,

3
docs/pages/examples/updatable-edge.vue
View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import Flow, {
import {
Flow,
Controls,
updateEdge,
addEdge,

3
docs/pages/examples/update-node-internals.vue
View File

@@ -1,6 +1,7 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue'
import Flow, {
import {
Flow,
NodeType,
addEdge,
useZoomPanHelper,

2
docs/pages/examples/update-node.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import Flow, { Elements } from '@braks/vue-flow'
import { Flow, Elements } from '@braks/vue-flow'
const initialElements: Elements = [
{ id: '1', data: { label: '-' }, position: { x: 100, y: 100 } },

3
docs/pages/examples/validation.vue
View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import Flow, {
import {
Flow,
addEdge,
Handle,
Connection,

3
docs/pages/examples/zoom-pan-helper.vue
View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import Flow, {
import {
Flow,
removeElements,
addEdge,
Background,

5
docs/yarn.lock
View File

@@ -369,6 +369,11 @@
unctx "^1.0.2"
untyped "^0.2.9"
"@nuxt/nitro@^0.10.0":
version "0.10.0"
resolved "https://registry.yarnpkg.com/@nuxt/nitro/-/nitro-0.10.0.tgz#e2157be377f6131ec72484153d56908da8704094"
integrity sha512-3ffdZMD0WK7UNgrkBhOyPr3fyOfmy2nPMxDOaX6eUCamr5NuY7cHQhWnum/BwSm1vIOm4b9/rnd/cgYcg9qiag==
"@nuxt/nitro@npm:@nuxt/nitro-edge@3.0.0-27249044.7d918e1":
version "3.0.0-27249044.7d918e1"
resolved "https://registry.yarnpkg.com/@nuxt/nitro-edge/-/nitro-edge-3.0.0-27249044.7d918e1.tgz#340dc19a58d295a0009add91ca2467a2598d8072"