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

update(docs): dark mode colors for home

Browse Source
This commit is contained in:
Braks
2022-04-04 21:42:48 +02:00
parent 3bbe92a4ea
commit 6c7fde01c9
4 changed files with 83 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/home/Banner.vue
+1 -1
View File
@@ -4,7 +4,7 @@ import Star from '~icons/carbon/star'
import Download from '~icons/carbon/download'
</script>
<template>
<div class="w-full bg-black text-white">
<div class="w-full bg-black text-white border-b-1 border-white">
<div class="max-w-9/12 md:max-w-3/4 lg:max-w-4xl m-auto py-4 md:py-12">
<div class="grid md:grid-cols-3 gap-3 md:gap-0 text-center <md:divide-y md:divide-x divide-blue-200">
<div class="grid grid-rows-auto gap-2 py-4 md:py-0">
docs/components/home/Basic.vue
+62 -69
View File
@@ -1,120 +1,113 @@
<script lang="ts" setup>
import { GraphEdge, useVueFlow, VueFlow, Background, Controls, ClassFunc } from "@braks/vue-flow";
import { GraphEdge, useVueFlow, VueFlow, Background, Controls, ClassFunc } from '@braks/vue-flow'
const getClass: ClassFunc = (el) => {
const classes = ["font-semibold", "!border-2", "transition-colors", "duration-300", "ease-in-out"];
if (el.selected) classes.push(
...[
"!border-green-500/80",
"!shadow-md",
"!shadow-green-500/50",
"!bg-green-100/45",
"!text-gray-700"
]
);
const classes = ['font-semibold', '!border-2', 'transition-colors', 'duration-300', 'ease-in-out']
if (el.selected)
classes.push(
...['!border-green-500/80', '!shadow-md', '!shadow-green-500/50', '!bg-green-100/80 dark:(!bg-white)', '!text-gray-700'],
)
return classes.join(" ");
};
return classes.join(' ')
}
const emit = defineEmits(["pane"]);
const emit = defineEmits(['pane'])
const { onPaneReady } = useVueFlow({
modelValue: [
{
id: "1",
type: "input",
label: "input",
id: '1',
type: 'input',
label: 'input',
position: { x: 250, y: 5 },
class: getClass
class: getClass,
},
{
id: "2",
label: "default",
id: '2',
label: 'default',
position: { x: 100, y: 100 },
class: getClass
class: getClass,
},
{ id: "3", label: "default", position: { x: 400, y: 100 }, class: getClass },
{ id: '3', label: 'default', position: { x: 400, y: 100 }, class: getClass },
{
id: "4",
type: "output",
label: "output",
id: '4',
type: 'output',
label: 'output',
position: { x: 250, y: 225 },
class: getClass
class: getClass,
},
{
id: "e1-2",
source: "1",
label: "animated edge",
target: "2",
id: 'e1-2',
source: '1',
label: 'animated edge',
target: '2',
animated: true,
class: (el: GraphEdge) => {
const classes = ["transition-colors duration-300", el.sourceNode.selected ? "font-semibold" : ""];
return classes.join(" ");
const classes = ['transition-colors duration-300', el.sourceNode.selected ? 'font-semibold' : '']
return classes.join(' ')
},
style: (el: GraphEdge) => {
const sourceNodeSelected = el.sourceNode.selected;
const sourceNodeSelected = el.sourceNode.selected
return {
transition: "stroke ease-in-out 300ms",
stroke: el.selected || sourceNodeSelected ? "var(--secondary)" : undefined
};
}
transition: 'stroke ease-in-out 300ms',
stroke: el.selected || sourceNodeSelected ? 'var(--secondary)' : undefined,
}
},
},
{
id: "e1-3",
source: "1",
target: "3",
label: "default edge",
id: 'e1-3',
source: '1',
target: '3',
label: 'default edge',
class: (el: GraphEdge) => {
const classes = ["transition-colors duration-300", el.sourceNode.selected ? 'font-semibold' : '']
return classes.join(" ")
const classes = ['transition-colors duration-300', el.sourceNode.selected ? 'font-semibold' : '']
return classes.join(' ')
},
style: (el: GraphEdge) => {
const sourceNodeSelected = el.sourceNode.selected;
const sourceNodeSelected = el.sourceNode.selected
return {
transition: "stroke ease-in-out 300ms",
stroke: el.selected || sourceNodeSelected ? "red" : undefined
};
}
transition: 'stroke ease-in-out 300ms',
stroke: el.selected || sourceNodeSelected ? 'red' : undefined,
}
},
},
{
id: "e2-4",
source: "2",
target: "4",
type: "step",
id: 'e2-4',
source: '2',
target: '4',
type: 'step',
animated: true,
class: (el: GraphEdge) => {
const classes = ["transition-colors duration-300", el.sourceNode.selected ? 'font-semibold' : '']
return classes.join(" ")
const classes = ['transition-colors duration-300', el.sourceNode.selected ? 'font-semibold' : '']
return classes.join(' ')
},
style: (el: GraphEdge) => {
const sourceNodeSelected = el.sourceNode.selected;
const sourceNodeSelected = el.sourceNode.selected
return {
transition: "stroke ease-in-out 300ms",
stroke: el.selected || sourceNodeSelected ? "var(--secondary)" : undefined
};
}
}
]
});
transition: 'stroke ease-in-out 300ms',
stroke: el.selected || sourceNodeSelected ? 'var(--secondary)' : undefined,
}
},
},
],
})
onPaneReady((i) => emit("pane", i));
onPaneReady((i) => emit('pane', i))
</script>
<template>
<div class="md:max-w-1/3 flex flex-col justify-center">
<div class="flex flex-col gap-2 items-center md:items-start">
<h1>Feature-rich</h1>
<p>
Vue Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection,
controls,
Vue Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection, controls,
several event handlers and more.
</p>
<a class="button max-w-max" href="/docs">
Documentation
</a>
<a class="button max-w-max" href="/docs"> Documentation </a>
</div>
</div>
<div
class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-secondary overflow-hidden">
class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-secondary overflow-hidden"
>
<VueFlow class="basic">
<Controls class="md:!left-auto md:!right-[10px]" />
<Background pattern-color="#aaa" :gap="16" />
docs/components/home/Features.vue
+18 -25
View File
@@ -1,38 +1,32 @@
<script lang="ts" setup>
import { reactive, watch } from "vue";
import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
import { FlowInstance } from "@braks/vue-flow";
import { reactive, watch } from 'vue'
import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
import { FlowInstance } from '@braks/vue-flow'
const breakpoints = useBreakpoints(breakpointsTailwind);
const breakpoints = useBreakpoints(breakpointsTailwind)
const instances = reactive<FlowInstance[]>([]);
const instances = reactive<FlowInstance[]>([])
const onLoad = (instance: FlowInstance) => {
instances.push(instance);
instance.fitView();
};
instances.push(instance)
instance.fitView()
}
const fitViews = () => {
instances.forEach(i => i.fitView());
};
instances.forEach((i) => i.fitView())
}
watch(
[
breakpoints.sm,
breakpoints.md,
breakpoints.lg,
breakpoints.xl,
breakpoints["2xl"]
],
() => setTimeout(() => {
watch([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']], () =>
setTimeout(() => {
fitViews()
}, 5)
);
}, 5),
)
</script>
<template>
<div class="w-full bg-gray-50">
<div class="w-full dark:(bg-black text-white)">
<div
class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 m-auto py-12 md:py-24 text-center md:text-left">
class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 m-auto py-12 md:py-24 text-center md:text-left"
>
<div class="flex flex-col md:flex-row gap-12 md:gap-24">
<Basic @pane="onLoad" />
</div>
@@ -50,7 +44,6 @@ watch(
</template>
<style>
.button {
@apply
shadow-lg transition-colors duration-200 hover:bg-black font-semibold text-lg mt-4 px-5 py-3 rounded-xl bg-green-500 text-white;
@apply shadow-lg transition-colors duration-200 hover:(dark:(bg-white text-black) bg-black) text-white font-semibold text-lg mt-4 px-5 py-3 rounded-xl bg-green-500;
}
</style>
docs/components/home/Home.vue
+2 -2
View File
@@ -54,8 +54,8 @@ onPaneReady(async ({ fitView }) => {
})
</script>
<template>
<div class="bg-white h-[90vh] md:h-[75vh]">
<VueFlow class="dark:bg-black bg-white">
<div class="h-[90vh] md:h-[75vh]">
<VueFlow class="dark:bg-black bg-white transition-colors duration-200 ease-in-out">
<template #node-box="props">
<template v-if="props.id === 'intro'">
<div class="max-w-[500px]">