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' import Download from '~icons/carbon/download'
</script> </script>
<template> <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="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 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"> <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> <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 getClass: ClassFunc = (el) => {
const classes = ["font-semibold", "!border-2", "transition-colors", "duration-300", "ease-in-out"]; const classes = ['font-semibold', '!border-2', 'transition-colors', 'duration-300', 'ease-in-out']
if (el.selected) classes.push( if (el.selected)
...[ classes.push(
"!border-green-500/80", ...['!border-green-500/80', '!shadow-md', '!shadow-green-500/50', '!bg-green-100/80 dark:(!bg-white)', '!text-gray-700'],
"!shadow-md", )
"!shadow-green-500/50",
"!bg-green-100/45",
"!text-gray-700"
]
);
return classes.join(" "); return classes.join(' ')
}; }
const emit = defineEmits(["pane"]); const emit = defineEmits(['pane'])
const { onPaneReady } = useVueFlow({ const { onPaneReady } = useVueFlow({
modelValue: [ modelValue: [
{ {
id: "1", id: '1',
type: "input", type: 'input',
label: "input", label: 'input',
position: { x: 250, y: 5 }, position: { x: 250, y: 5 },
class: getClass class: getClass,
}, },
{ {
id: "2", id: '2',
label: "default", label: 'default',
position: { x: 100, y: 100 }, 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", id: '4',
type: "output", type: 'output',
label: "output", label: 'output',
position: { x: 250, y: 225 }, position: { x: 250, y: 225 },
class: getClass class: getClass,
}, },
{ {
id: "e1-2", id: 'e1-2',
source: "1", source: '1',
label: "animated edge", label: 'animated edge',
target: "2", target: '2',
animated: true, animated: true,
class: (el: GraphEdge) => { class: (el: GraphEdge) => {
const classes = ["transition-colors duration-300", el.sourceNode.selected ? "font-semibold" : ""]; const classes = ['transition-colors duration-300', el.sourceNode.selected ? 'font-semibold' : '']
return classes.join(" "); return classes.join(' ')
}, },
style: (el: GraphEdge) => { style: (el: GraphEdge) => {
const sourceNodeSelected = el.sourceNode.selected; const sourceNodeSelected = el.sourceNode.selected
return { return {
transition: "stroke ease-in-out 300ms", transition: 'stroke ease-in-out 300ms',
stroke: el.selected || sourceNodeSelected ? "var(--secondary)" : undefined stroke: el.selected || sourceNodeSelected ? 'var(--secondary)' : undefined,
}; }
} },
}, },
{ {
id: "e1-3", id: 'e1-3',
source: "1", source: '1',
target: "3", target: '3',
label: "default edge", label: 'default edge',
class: (el: GraphEdge) => { class: (el: GraphEdge) => {
const classes = ["transition-colors duration-300", el.sourceNode.selected ? 'font-semibold' : ''] const classes = ['transition-colors duration-300', el.sourceNode.selected ? 'font-semibold' : '']
return classes.join(" ") return classes.join(' ')
}, },
style: (el: GraphEdge) => { style: (el: GraphEdge) => {
const sourceNodeSelected = el.sourceNode.selected; const sourceNodeSelected = el.sourceNode.selected
return { return {
transition: "stroke ease-in-out 300ms", transition: 'stroke ease-in-out 300ms',
stroke: el.selected || sourceNodeSelected ? "red" : undefined stroke: el.selected || sourceNodeSelected ? 'red' : undefined,
}; }
} },
}, },
{ {
id: "e2-4", id: 'e2-4',
source: "2", source: '2',
target: "4", target: '4',
type: "step", type: 'step',
animated: true, animated: true,
class: (el: GraphEdge) => { class: (el: GraphEdge) => {
const classes = ["transition-colors duration-300", el.sourceNode.selected ? 'font-semibold' : ''] const classes = ['transition-colors duration-300', el.sourceNode.selected ? 'font-semibold' : '']
return classes.join(" ") return classes.join(' ')
}, },
style: (el: GraphEdge) => { style: (el: GraphEdge) => {
const sourceNodeSelected = el.sourceNode.selected; const sourceNodeSelected = el.sourceNode.selected
return { return {
transition: "stroke ease-in-out 300ms", transition: 'stroke ease-in-out 300ms',
stroke: el.selected || sourceNodeSelected ? "var(--secondary)" : undefined stroke: el.selected || sourceNodeSelected ? 'var(--secondary)' : undefined,
}; }
} },
} },
] ],
}); })
onPaneReady((i) => emit("pane", i)); onPaneReady((i) => emit('pane', i))
</script> </script>
<template> <template>
<div class="md:max-w-1/3 flex flex-col justify-center"> <div class="md:max-w-1/3 flex flex-col justify-center">
<div class="flex flex-col gap-2 items-center md:items-start"> <div class="flex flex-col gap-2 items-center md:items-start">
<h1>Feature-rich</h1> <h1>Feature-rich</h1>
<p> <p>
Vue Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection, Vue Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection, controls,
controls,
several event handlers and more. several event handlers and more.
</p> </p>
<a class="button max-w-max" href="/docs"> <a class="button max-w-max" href="/docs"> Documentation </a>
Documentation
</a>
</div> </div>
</div> </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"> <VueFlow class="basic">
<Controls class="md:!left-auto md:!right-[10px]" /> <Controls class="md:!left-auto md:!right-[10px]" />
<Background pattern-color="#aaa" :gap="16" /> <Background pattern-color="#aaa" :gap="16" />
docs/components/home/Features.vue
+18 -25
View File
@@ -1,38 +1,32 @@
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, watch } from "vue"; import { reactive, watch } from 'vue'
import { useBreakpoints, breakpointsTailwind } from "@vueuse/core"; import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
import { FlowInstance } from "@braks/vue-flow"; 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) => { const onLoad = (instance: FlowInstance) => {
instances.push(instance); instances.push(instance)
instance.fitView(); instance.fitView()
}; }
const fitViews = () => { const fitViews = () => {
instances.forEach(i => i.fitView()); instances.forEach((i) => i.fitView())
}; }
watch( watch([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']], () =>
[ setTimeout(() => {
breakpoints.sm,
breakpoints.md,
breakpoints.lg,
breakpoints.xl,
breakpoints["2xl"]
],
() => setTimeout(() => {
fitViews() fitViews()
}, 5) }, 5),
); )
</script> </script>
<template> <template>
<div class="w-full bg-gray-50"> <div class="w-full dark:(bg-black text-white)">
<div <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"> <div class="flex flex-col md:flex-row gap-12 md:gap-24">
<Basic @pane="onLoad" /> <Basic @pane="onLoad" />
</div> </div>
@@ -50,7 +44,6 @@ watch(
</template> </template>
<style> <style>
.button { .button {
@apply @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;
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;
} }
</style> </style>
docs/components/home/Home.vue
+2 -2
View File
@@ -54,8 +54,8 @@ onPaneReady(async ({ fitView }) => {
}) })
</script> </script>
<template> <template>
<div class="bg-white h-[90vh] md:h-[75vh]"> <div class="h-[90vh] md:h-[75vh]">
<VueFlow class="dark:bg-black bg-white"> <VueFlow class="dark:bg-black bg-white transition-colors duration-200 ease-in-out">
<template #node-box="props"> <template #node-box="props">
<template v-if="props.id === 'intro'"> <template v-if="props.id === 'intro'">
<div class="max-w-[500px]"> <div class="max-w-[500px]">