update(docs): Add windicss
* remove unused files
This commit is contained in:
Braks
@@ -0,0 +1,164 @@
|
||||
html,
|
||||
body {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
color: #111;
|
||||
/* background-color: #31475e;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('./polygon-scatter.svg');
|
||||
*/
|
||||
}
|
||||
|
||||
.backround-img {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('./polygon-scatter.svg');
|
||||
}
|
||||
|
||||
.overview-example__add {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vue-flow__node a {
|
||||
font-weight: 700;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.vue-flow__node.dark-node {
|
||||
background: #0041d0;
|
||||
color: #f8f8f8;
|
||||
}
|
||||
|
||||
.vue-flow__node.dark {
|
||||
background: #557;
|
||||
color: #f8f8f8;
|
||||
}
|
||||
|
||||
.vue-flow__node-selector {
|
||||
font-size: 14px;
|
||||
background: #f0f2f3;
|
||||
border: 1px solid #555;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.vue-flow__node-selector .vue-flow__handle {
|
||||
border-color: #f0f2f3;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.overview-example__add {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#vue-flow-examples {
|
||||
width: calc(100% - 280px);
|
||||
overflow: scroll;
|
||||
@apply flex m-0 flex-col uppercase;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
.vue-flow {
|
||||
@apply bg-white h-[80vh];
|
||||
}
|
||||
|
||||
.description {
|
||||
@apply p-0 md:p-6 text-left gap-2 flex flex-col justify-center items-center text-white normal-case leading-tight md:leading-normal;
|
||||
|
||||
.content {
|
||||
@apply w-full md:w-5/6 xl:w-11/12 p-6 md:rounded-xl;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#vue-flow-docs {
|
||||
@apply flex m-0 p-0 lg:p-6 bg-gray-800 text-white overflow-scroll max-w-full;
|
||||
}
|
||||
|
||||
#vue-flow-docs, #vue-flow-examples,
|
||||
.home-page {
|
||||
a {
|
||||
@apply text-green-500 font-semibold hover:text-green-300;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-xl lg:text-4xl mb-4 font-bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-lg lg:text-2xl mb-4 font-semibold;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply text-md lg:text-lg font-qtype;
|
||||
}
|
||||
|
||||
p ~ h1, p ~ h2 {
|
||||
@apply mt-6;
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply md:p-[revert];
|
||||
}
|
||||
|
||||
li {
|
||||
@apply mt-2 text-md lg:text-lg;
|
||||
list-style: inside;
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.button {
|
||||
@apply bg-gray-200 hover:bg-gray-300 focus:outline-none font-bold mr-2 border-2 p-2 rounded-xl;
|
||||
}
|
||||
|
||||
.md {
|
||||
@apply prose prose-sm m-auto text-left flex flex-col gap-4;
|
||||
}
|
||||
|
||||
.attention-box {
|
||||
@apply text-gray-800 p-4 bg-yellow-300 rounded-xl mb-4;
|
||||
|
||||
.title {
|
||||
@apply text-lg font-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-flow {
|
||||
@apply bg-white border-1 solid border-gray-300 rounded-xl;
|
||||
}
|
||||
|
||||
pre {
|
||||
@apply !text-xs !md:text-lg;
|
||||
}
|
||||
|
||||
.slider {
|
||||
--color: red;
|
||||
@apply bg-gray-200 w-full h-[10px] outline-none rounded-full;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
|
||||
-webkit-appearance: none;
|
||||
background: var(--color);
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
@apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
|
||||
-webkit-appearance: none;
|
||||
background: var(--color);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect width="960" height="540" fill="#31475e"></rect><g><g transform="translate(57 45)"><path d="M0 -106.9L83.6 -66.7L104.2 23.8L46.4 96.3L-46.4 96.3L-104.2 23.8L-83.6 -66.7Z" fill="#3fb984"></path></g><g transform="translate(708 88)"><path d="M0 -66L51.6 -41.2L64.3 14.7L28.6 59.5L-28.6 59.5L-64.3 14.7L-51.6 -41.2Z" fill="#3fb984"></path></g><g transform="translate(823 510)"><path d="M0 -77L60.2 -48L75.1 17.1L33.4 69.4L-33.4 69.4L-75.1 17.1L-60.2 -48Z" fill="#3fb984"></path></g><g transform="translate(896 280)"><path d="M0 -45L35.2 -28.1L43.9 10L19.5 40.5L-19.5 40.5L-43.9 10L-35.2 -28.1Z" fill="#3fb984"></path></g><g transform="translate(287 458)"><path d="M0 -58L45.3 -36.2L56.5 12.9L25.2 52.3L-25.2 52.3L-56.5 12.9L-45.3 -36.2Z" fill="#3fb984"></path></g><g transform="translate(12 380)"><path d="M0 -101L79 -63L98.5 22.5L43.8 91L-43.8 91L-98.5 22.5L-79 -63Z" fill="#3fb984"></path></g><g transform="translate(609 440)"><path d="M0 -60L46.9 -37.4L58.5 13.4L26 54.1L-26 54.1L-58.5 13.4L-46.9 -37.4Z" fill="#3fb984"></path></g><g transform="translate(457 42)"><path d="M0 -81L63.3 -50.5L79 18L35.1 73L-35.1 73L-79 18L-63.3 -50.5Z" fill="#3fb984"></path></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,73 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { VueFlow, Background, Elements, isNode, MarkerType, useVueFlow } from '@braks/vue-flow'
|
||||
|
||||
const elements = ref<Elements>([
|
||||
{ id: '1', type: 'input', label: 'Input Node', position: { x: 250, y: 15 } },
|
||||
{ id: '2', label: 'Default Node', position: { x: 100, y: 150 } },
|
||||
{ id: '3', label: 'Default Node', position: { x: 400, y: 150 } },
|
||||
{ id: '4', type: 'button', position: { x: 240, y: 300 }, style: { borderRadius: '50%' } },
|
||||
{ id: 'e1-2', type: 'step', source: '1', target: '2', markerEnd: MarkerType.Arrow },
|
||||
{ id: 'e2-4', type: 'smoothstep', source: '2', target: '4', animated: true, style: { strokeWidth: 2, stroke: '#3b82f6' } },
|
||||
{ id: 'e3-4', type: 'smoothstep', source: '3', target: '4', animated: true, style: { strokeWidth: 2, stroke: '#3b82f6' } },
|
||||
{ id: 'e1-3', type: 'step', source: '1', target: '3', markerEnd: MarkerType.Arrow },
|
||||
])
|
||||
|
||||
const { onConnect, onPaneReady, addEdges } = useVueFlow()
|
||||
onConnect((connection) => addEdges([connection]))
|
||||
onPaneReady(({ fitView }) => {
|
||||
fitView({ padding: 0.3, offset: { y: 30 } })
|
||||
})
|
||||
|
||||
const toggleClassnames = () => {
|
||||
elements.value = elements.value.map((el) => {
|
||||
if (isNode(el)) el.class = el.class === 'dark' ? 'light' : 'dark'
|
||||
return el
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="relative w-[100vw] h-[80vh] flex flex-col-reverse md:flex-row font-mono border-1 border-white bg-white">
|
||||
<div class="flex bg-light-800 flex-col justify-center gap-2 md:gap-4 p-6 w-full md:w-1/3">
|
||||
<h1 class="pointer-events-none text-xl lg:text-4xl">Easy to use</h1>
|
||||
<h2 class="pointer-events-none text-sm lg:text-xl text-black font-normal">
|
||||
Getting started is simple. All you need are some <strong>elements</strong> and you're ready to go.
|
||||
<span class="font-bold">Each element needs a unique id.</span> A node also needs a <strong>position (x and y)</strong>. An
|
||||
edge needs <strong>a source and a target</strong>.
|
||||
</h2>
|
||||
<div class="!pointer-events-auto transform scale-75 lg:scale-100 flex flex-row justify-center items-center gap-4">
|
||||
<a class="p-4 bg-green-500 hover:bg-black rounded-xl !text-white font-semibold text-lg" href="/docs">
|
||||
Documentation
|
||||
</a>
|
||||
<a
|
||||
class="!pointer-events-auto p-4 bg-white hover:bg-black rounded-xl bg-blue-500 !text-white font-semibold text-lg"
|
||||
href="/examples"
|
||||
>
|
||||
Examples
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<VueFlow
|
||||
id="basic-flow"
|
||||
v-model="elements"
|
||||
class="vue-flow-basic-example"
|
||||
:default-zoom="1.5"
|
||||
:min-zoom="0.2"
|
||||
:max-zoom="4"
|
||||
:zoom-on-scroll="false"
|
||||
>
|
||||
<Background variant="dots" color="black" />
|
||||
<template #node-button>
|
||||
<slot></slot>
|
||||
</template>
|
||||
<div class="absolute right-[10px] top-[10px] z-4">
|
||||
<button class="button" @click="toggleClassnames">toggle class</button>
|
||||
</div>
|
||||
</VueFlow>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.vue-flow__node.dark {
|
||||
@apply !bg-black;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { VueFlow, MiniMap, Background, Controls, Elements, MarkerType, FlowEvents } from '@braks/vue-flow'
|
||||
|
||||
interface Props {
|
||||
next: (node: string[], duration: number) => void
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const elements = ref<Elements>([
|
||||
{ id: '1', type: 'input', label: 'Back To The Start', position: { x: 200, y: 0 } },
|
||||
{ id: '2', label: 'Node 2', position: { x: 0, y: 130 } },
|
||||
{ id: '3', label: 'Node 3', position: { x: 400, y: 130 } },
|
||||
{ id: 'e1-2', source: '1', target: '2', markerEnd: MarkerType.Arrow },
|
||||
{ id: 'e1-3', source: '1', target: '3', markerEnd: MarkerType.Arrow },
|
||||
])
|
||||
|
||||
const onLoad = ({ fitView }) => fitView({ padding: 0.5 })
|
||||
const onNodeClick = ({ node }: FlowEvents['nodeClick']) => {
|
||||
if (node.type === 'input') props.next(['intro', 'examples', 'tour', 'documentation'], 4000)
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
ref="page"
|
||||
class="!pointer-events-auto font-mono flex flex flex-col md:flex-row bg-white w-[100vw] h-[80vh]"
|
||||
:style="{ borderRadius: 0 }"
|
||||
>
|
||||
<VueFlow
|
||||
id="features-flow"
|
||||
v-model="elements"
|
||||
class="relative font-mono"
|
||||
:pane-moveable="true"
|
||||
@pane-ready="onLoad"
|
||||
@node-click="onNodeClick"
|
||||
>
|
||||
<Controls />
|
||||
<Background />
|
||||
<MiniMap />
|
||||
</VueFlow>
|
||||
<div class="flex bg-light-800 flex-col justify-center gap-2 md:gap-4 p-6 w-full md:w-1/3">
|
||||
<h1 class="pointer-events-none text-xl lg:text-4xl">Everything you need</h1>
|
||||
<h2 class="pointer-events-none text-sm lg:text-xl text-black font-normal">
|
||||
Vue Flow ships with a <strong>Minimap-, Background- and Controls-Component</strong>. On top of that we add
|
||||
<strong>Zoom & Pan utilities</strong> with which you can create the exact same transitions that are used on this site!
|
||||
</h2>
|
||||
<div class="!pointer-events-auto transform scale-75 lg:scale-100 flex flex-row justify-center items-center gap-4">
|
||||
<a class="p-4 bg-green-500 hover:bg-black rounded-xl !text-white font-semibold text-lg" href="/docs">
|
||||
Documentation
|
||||
</a>
|
||||
<a
|
||||
class="!pointer-events-auto p-4 bg-white hover:bg-black rounded-xl bg-blue-500 !text-white font-semibold text-lg"
|
||||
href="/examples"
|
||||
>
|
||||
Examples
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,311 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { VueFlow, Handle, Position, Elements, FlowInstance } from '@braks/vue-flow'
|
||||
import { useBreakpoints } from '@vueuse/core'
|
||||
import BoxNode from './nodes/Box.vue'
|
||||
import RGBFlow from './RGB.vue'
|
||||
import BasicFlow from './Basic.vue'
|
||||
import FeaturesFlow from './Features.vue'
|
||||
|
||||
const breakpoints = useBreakpoints({
|
||||
mobile: 320,
|
||||
tablet: 640,
|
||||
laptop: 1024,
|
||||
desktop: 1280,
|
||||
})
|
||||
|
||||
const desktop = breakpoints.greater('tablet')
|
||||
|
||||
const elements: Elements = [
|
||||
{ id: 'intro', type: 'box', position: { x: 480, y: 50 }, draggable: true },
|
||||
{ id: 'demo', type: 'box', position: { x: desktop.value ? 1250 : 1150, y: 400 } },
|
||||
{ id: 'examples', type: 'box', position: { x: 800, y: 400 } },
|
||||
{ id: 'tour', type: 'box', position: { x: 650, y: 550 } },
|
||||
{ id: 'documentation', type: 'box', position: { x: 400, y: 400 } },
|
||||
{ id: 'github', type: 'box', position: { x: 1100, y: 200 } },
|
||||
{ id: 'features', type: 'features', position: { x: 3000, y: 5000 }, style: { cursor: 'default' } },
|
||||
{ id: 'rgb', type: 'rgb', position: { x: 3000, y: 2500 }, style: { cursor: 'default' } },
|
||||
{ id: 'basic', type: 'basic', position: { x: 250, y: 2500 }, style: { cursor: 'default' } },
|
||||
{
|
||||
id: 'eintro-examples',
|
||||
type: 'smoothstep',
|
||||
sourceHandle: 'a',
|
||||
source: 'intro',
|
||||
target: 'examples',
|
||||
animated: true,
|
||||
style: { strokeWidth: 2, stroke: '#8b5cf6' },
|
||||
},
|
||||
{
|
||||
id: 'eexamples-tour',
|
||||
type: 'smoothstep',
|
||||
sourceHandle: 'a',
|
||||
source: 'examples',
|
||||
target: 'tour',
|
||||
animated: true,
|
||||
style: { strokeWidth: 3, stroke: '#3b82f6' },
|
||||
},
|
||||
{
|
||||
id: 'eexamples-demo',
|
||||
type: 'smoothstep',
|
||||
sourceHandle: 'right',
|
||||
source: 'examples',
|
||||
target: 'demo',
|
||||
animated: true,
|
||||
style: { strokeWidth: 2 },
|
||||
},
|
||||
{
|
||||
id: 'edocumentation-tour',
|
||||
type: 'smoothstep',
|
||||
sourceHandle: 'a',
|
||||
source: 'documentation',
|
||||
target: 'tour',
|
||||
animated: true,
|
||||
style: { strokeWidth: 3, stroke: '#3b82f6' },
|
||||
},
|
||||
{
|
||||
id: 'eintro-documentation',
|
||||
type: 'smoothstep',
|
||||
sourceHandle: 'a',
|
||||
source: 'intro',
|
||||
target: 'documentation',
|
||||
animated: true,
|
||||
style: { strokeWidth: 2, stroke: '#f97316' },
|
||||
},
|
||||
{
|
||||
id: 'eintro-github',
|
||||
sourceHandle: 'b',
|
||||
source: 'intro',
|
||||
target: 'github',
|
||||
animated: true,
|
||||
style: { strokeWidth: 2 },
|
||||
},
|
||||
{
|
||||
id: 'etour-basic',
|
||||
targetHandle: 'basic-b',
|
||||
source: 'tour',
|
||||
target: 'basic',
|
||||
animated: true,
|
||||
style: { strokeWidth: 3, stroke: '#3b82f6' },
|
||||
},
|
||||
{
|
||||
id: 'ebasic-rgb',
|
||||
targetHandle: 'rgb-a',
|
||||
sourceHandle: 'basic-a',
|
||||
source: 'basic',
|
||||
target: 'rgb',
|
||||
animated: true,
|
||||
style: { strokeWidth: 3, stroke: '#3b82f6' },
|
||||
},
|
||||
{
|
||||
id: 'ergb-features',
|
||||
targetHandle: 'features-a',
|
||||
sourceHandle: 'rgb-b',
|
||||
source: 'rgb',
|
||||
target: 'basic',
|
||||
animated: true,
|
||||
style: { strokeWidth: 3, stroke: '#3b82f6' },
|
||||
},
|
||||
]
|
||||
const instance = ref<FlowInstance>()
|
||||
const onLoad = (i: FlowInstance) => {
|
||||
instance.value = i
|
||||
setTimeout(() => {
|
||||
i.fitView({
|
||||
nodes: ['intro', 'examples', 'tour', 'documentation'],
|
||||
padding: 0.2,
|
||||
offset: { x: !desktop.value ? -10 : -50 },
|
||||
duration: 1500,
|
||||
})
|
||||
})
|
||||
}
|
||||
const nextNode = (id: string[], duration = 2000, padding = 0) => instance.value.fitView({ padding, nodes: id, duration })
|
||||
</script>
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<div class="flex h-[60vh] md:h-[80vh] w-full gap-4" style="border-radius: 0">
|
||||
<VueFlow
|
||||
v-model="elements"
|
||||
:elements-selectable="true"
|
||||
:nodes-draggable="false"
|
||||
:pane-moveable="false"
|
||||
:zoom-on-scroll="false"
|
||||
@pane-ready="onLoad"
|
||||
>
|
||||
<template #node-features>
|
||||
<FeaturesFlow :next="nextNode" />
|
||||
<Handle id="features-a" type="target" :position="Position.Top" />
|
||||
</template>
|
||||
<template #node-basic>
|
||||
<BasicFlow>
|
||||
<button
|
||||
class="
|
||||
flex flex-row
|
||||
gap-3
|
||||
items-center
|
||||
p-4
|
||||
shadow-lg
|
||||
hover:bg-black
|
||||
dark:(bg-black) dark:hover:bg-blue-500
|
||||
bg-blue-500
|
||||
rounded-xl
|
||||
!text-white
|
||||
font-semibold
|
||||
text-lg
|
||||
"
|
||||
@click="nextNode(['rgb'], 3500)"
|
||||
>
|
||||
<i class="icon-sm icon-heart !text-red-300" />Continue Demo
|
||||
</button>
|
||||
<Handle type="target" :position="Position.Top" />
|
||||
</BasicFlow>
|
||||
<Handle id="basic-a" type="source" :position="Position.Right" />
|
||||
<Handle id="basic-b" type="target" :position="Position.Top" />
|
||||
</template>
|
||||
<template #node-rgb>
|
||||
<RGBFlow :next="nextNode" />
|
||||
<Handle id="rgb-a" type="target" :position="Position.Left" />
|
||||
<Handle id="rgb-b" type="source" :position="Position.Bottom" />
|
||||
</template>
|
||||
<template #node-box="props">
|
||||
{{ props }}
|
||||
<template v-if="props.id === 'intro'">
|
||||
<div class="max-w-[500px]">
|
||||
<BoxNode class="bg-green-500 text-white">
|
||||
<div class="font-mono flex flex-col gap-4 p-4 items-center">
|
||||
<h1 class="pointer-events-none text-2xl lg:text-4xl">Visualize your ideas with Vue Flow</h1>
|
||||
<h2 class="pointer-events-none text-lg lg:text-xl font-normal">
|
||||
A customizable Vue.js library for building node-based editors and diagrams.
|
||||
</h2>
|
||||
</div>
|
||||
</BoxNode>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="props.id === 'documentation'">
|
||||
<div class="flex">
|
||||
<a
|
||||
class="
|
||||
flex flex-row
|
||||
gap-3
|
||||
items-center
|
||||
p-4
|
||||
shadow-lg
|
||||
bg-orange-500
|
||||
hover:bg-black
|
||||
rounded-xl
|
||||
!text-white
|
||||
font-semibold
|
||||
text-lg
|
||||
"
|
||||
href="/docs"
|
||||
>
|
||||
<i class="icon-sm icon-file-document !text-blue-700" />Read The Documentation
|
||||
</a>
|
||||
</div>
|
||||
<Handle type="target" :position="Position.Top" />
|
||||
<Handle type="source" :position="Position.Bottom" />
|
||||
</template>
|
||||
<template v-else-if="props.id === 'tour'">
|
||||
<button
|
||||
class="
|
||||
flex flex-row
|
||||
gap-3
|
||||
items-center
|
||||
p-4
|
||||
shadow-lg
|
||||
hover:bg-black
|
||||
bg-blue-500
|
||||
rounded-xl
|
||||
!text-white
|
||||
font-semibold
|
||||
text-lg
|
||||
"
|
||||
@click="nextNode(['basic'])"
|
||||
>
|
||||
<i class="icon-sm icon-heart !text-red-300" />Start the Tour
|
||||
</button>
|
||||
<Handle type="target" :position="Position.Top" />
|
||||
<Handle type="source" :position="Position.Bottom" />
|
||||
</template>
|
||||
<template v-else-if="props.id === 'demo'">
|
||||
<a
|
||||
class="
|
||||
flex flex-row
|
||||
gap-3
|
||||
items-center
|
||||
p-4
|
||||
shadow-lg
|
||||
hover:bg-black
|
||||
bg-pink-400
|
||||
rounded-xl
|
||||
!text-white
|
||||
font-semibold
|
||||
text-lg
|
||||
"
|
||||
href="/examples/playground"
|
||||
>
|
||||
<i class="icon-sm icon-toolbox !text-blue-700" />Playground
|
||||
</a>
|
||||
<Handle type="target" :position="Position.Left" />
|
||||
</template>
|
||||
<template v-else-if="props.id === 'examples'">
|
||||
<div class="flex">
|
||||
<a
|
||||
class="
|
||||
flex flex-row
|
||||
gap-3
|
||||
items-center
|
||||
p-4
|
||||
shadow-lg
|
||||
hover:bg-black
|
||||
bg-purple-500
|
||||
rounded-xl
|
||||
!text-white
|
||||
font-semibold
|
||||
text-lg
|
||||
"
|
||||
href="/examples"
|
||||
>
|
||||
<i class="icon-sun icon-sm !text-yellow-300" />Check The Examples
|
||||
</a>
|
||||
</div>
|
||||
<Handle type="target" :position="Position.Top" />
|
||||
<Handle type="source" :position="Position.Bottom" />
|
||||
<Handle type="source" id="right" :position="Position.Right" />
|
||||
</template>
|
||||
<template v-else-if="props.id === 'github'">
|
||||
<div class="flex">
|
||||
<a
|
||||
class="
|
||||
flex flex-row
|
||||
items-center
|
||||
gap-3
|
||||
p-4
|
||||
bg-black
|
||||
rounded-xl
|
||||
!text-white
|
||||
hover:(bg-white
|
||||
border-1 border-black
|
||||
!text-black)
|
||||
text-lg
|
||||
"
|
||||
href="https://github.com/bcakmakoglu/vue-flow"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="icon-sm icon-git-branch" />Github
|
||||
</a>
|
||||
</div>
|
||||
<Handle type="target" :position="Position.Left" />
|
||||
</template>
|
||||
</template>
|
||||
</VueFlow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
a {
|
||||
@apply text-green-500 font-semibold hover:text-green-300;
|
||||
}
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,103 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { Elements, FlowInstance, VueFlow, Background, Controls, MiniMap, BackgroundVariant } from '@braks/vue-flow'
|
||||
import { templateRef, useBreakpoints, useElementBounding, whenever } from '@vueuse/core'
|
||||
import CustomEdge from './edges/Custom.vue'
|
||||
import RGBNode from './nodes/Input.vue'
|
||||
import RGBOutputNode from './nodes/Output.vue'
|
||||
|
||||
type Colors = {
|
||||
red: number
|
||||
green: number
|
||||
blue: number
|
||||
}
|
||||
|
||||
interface Props {
|
||||
next: (node: string[], duration?: number, padding?: number) => void
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const breakpoints = useBreakpoints({
|
||||
mobile: 360,
|
||||
tablet: 640,
|
||||
laptop: 1024,
|
||||
desktop: 1280,
|
||||
})
|
||||
|
||||
const elements = ref<Elements>([
|
||||
{ id: '1', type: 'rgb', data: { color: 'g' }, position: { x: -25, y: 50 } },
|
||||
{ id: '2', type: 'rgb', data: { color: 'r' }, position: { x: 50, y: -100 } },
|
||||
{ id: '3', type: 'rgb', data: { color: 'b' }, position: { x: 0, y: 200 } },
|
||||
{ id: '4', type: 'rgb-output', label: 'RGB', position: { x: 400, y: 50 } },
|
||||
{ id: 'e1-4', type: 'rgb-line', data: { color: 'green' }, source: '1', target: '4', animated: true },
|
||||
{ id: 'e2-4', type: 'rgb-line', data: { color: 'red' }, source: '2', target: '4', animated: true },
|
||||
{ id: 'e3-4', type: 'rgb-line', data: { color: 'blue' }, source: '3', target: '4', animated: true },
|
||||
])
|
||||
const instance = ref<FlowInstance>()
|
||||
|
||||
const el = templateRef<HTMLDivElement>('page', null)
|
||||
|
||||
const bounds = useElementBounding(el)
|
||||
const onLoad = (flowInstance: FlowInstance) => {
|
||||
instance.value = flowInstance
|
||||
if (breakpoints.greater('tablet').value) flowInstance.fitView({ padding: 0.5 })
|
||||
else flowInstance.fitView()
|
||||
}
|
||||
whenever(breakpoints.greater('tablet'), () => onLoad(instance.value))
|
||||
whenever(breakpoints.smaller('tablet'), () => onLoad(instance.value))
|
||||
|
||||
const color = ref<Colors>({
|
||||
red: 100,
|
||||
green: 150,
|
||||
blue: 100,
|
||||
})
|
||||
const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val))
|
||||
const bg = ref(BackgroundVariant.Lines)
|
||||
const bgSize = ref(1)
|
||||
const bgGap = ref(48)
|
||||
const backgroundChange = (variant: BackgroundVariant) => (bg.value = variant)
|
||||
const sizeChange = (size: number) => (bgSize.value = size)
|
||||
</script>
|
||||
<template>
|
||||
<div ref="page" class="font-mono flex flex flex-col md:flex-row bg-white w-[100vw] h-[80vh]" :style="{ borderRadius: 0 }">
|
||||
<VueFlow id="rgb-flow" v-model="elements" class="relative font-mono" :zoom-on-scroll="false" @pane-ready="onLoad">
|
||||
<template #edge-rgb-line="rgbLineProps">
|
||||
<CustomEdge v-bind="{ ...rgbLineProps }" />
|
||||
</template>
|
||||
<template #node-rgb="rgbProps">
|
||||
<RGBNode v-bind="rgbProps" :amount="color" @change="onChange" />
|
||||
</template>
|
||||
<template #node-rgb-output="rgbOutputProps">
|
||||
<RGBOutputNode
|
||||
v-bind="rgbOutputProps"
|
||||
:rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`"
|
||||
@next="props.next(['features'], 3500)"
|
||||
/>
|
||||
</template>
|
||||
<Controls />
|
||||
<Background :variant="bg" :color="`rgb(${color.red}, ${color.green}, ${color.blue})`" :gap="bgGap" :size="bgSize" />
|
||||
<MiniMap />
|
||||
</VueFlow>
|
||||
<div class="flex bg-light-800 flex-col justify-center gap-2 md:gap-4 p-6 w-full md:w-1/3">
|
||||
<h1 class="pointer-events-none text-xl lg:text-4xl" :style="{ color: `rgb(${color.red}, ${color.green}, ${color.blue})` }">
|
||||
Highly customizable
|
||||
</h1>
|
||||
<h2 class="pointer-events-none text-sm lg:text-xl text-black font-normal">
|
||||
With Vue Flow you can create the most beautiful <strong>static diagrams</strong> or even <strong>custom editors</strong>.
|
||||
Thanks to a lot of handy utilities that come out of the box, you jump right into <strong>customizing</strong> Vue Flow to
|
||||
your hearts desire and utilize the <strong>seamless zoom & panning</strong> feature.
|
||||
</h2>
|
||||
<div class="!pointer-events-auto transform scale-75 lg:scale-100 flex flex-row justify-center items-center gap-4">
|
||||
<a class="p-4 bg-green-500 hover:bg-black rounded-xl !text-white font-semibold text-lg" href="/docs">
|
||||
Documentation
|
||||
</a>
|
||||
<a
|
||||
class="!pointer-events-auto p-4 bg-white hover:bg-black rounded-xl bg-blue-500 !text-white font-semibold text-lg"
|
||||
href="/examples"
|
||||
>
|
||||
Examples
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,61 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { MarkerType, getBezierPath, Position, EdgeProps } from '@braks/vue-flow'
|
||||
|
||||
interface CustomEdgeProps extends EdgeProps {
|
||||
source: string
|
||||
target: string
|
||||
sourceHandleId?: string
|
||||
targetHandleId?: string
|
||||
id: string
|
||||
sourceX: number
|
||||
sourceY: number
|
||||
targetX: number
|
||||
targetY: number
|
||||
sourcePosition: Position
|
||||
targetPosition: Position
|
||||
markerEnd?: MarkerType
|
||||
data?: {
|
||||
text?: string
|
||||
color?: 'red' | 'green' | 'blue'
|
||||
}
|
||||
}
|
||||
|
||||
const props = defineProps<CustomEdgeProps>()
|
||||
const edgePath = computed(() =>
|
||||
getBezierPath({
|
||||
sourceX: props.sourceX,
|
||||
sourceY: props.sourceY,
|
||||
sourcePosition: props.sourcePosition,
|
||||
targetX: props.targetX,
|
||||
targetY: props.targetY,
|
||||
targetPosition: props.targetPosition,
|
||||
}),
|
||||
)
|
||||
|
||||
console.log(props)
|
||||
</script>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<path
|
||||
:id="props.id"
|
||||
class="vue-flow__edge-path"
|
||||
:style="{ stroke: props.data?.color }"
|
||||
:d="edgePath"
|
||||
:marker-end="props.markerEnd"
|
||||
/>
|
||||
<text>
|
||||
<textPath
|
||||
:href="`#${props.id}`"
|
||||
:style="{ fontSize: '12px', fill: props.data?.color }"
|
||||
startOffset="50%"
|
||||
text-anchor="middle"
|
||||
>
|
||||
{{ props.data?.text }}
|
||||
</textPath>
|
||||
</text>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script lang="ts" setup>
|
||||
import { Handle, Position } from '@braks/vue-flow'
|
||||
|
||||
const emit = defineEmits(['next'])
|
||||
</script>
|
||||
<template>
|
||||
<div class="px-4 py-2 bg-white shadow-lg rounded-md border-2 border-solid border-black">
|
||||
<slot />
|
||||
<Handle id="a" type="source" :position="Position.Bottom" />
|
||||
<Handle id="b" type="source" :position="Position.Right" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,44 @@
|
||||
<script lang="ts" setup>
|
||||
import { Handle, NodeProps, Position } from '@braks/vue-flow'
|
||||
|
||||
interface RGBNodeProps extends NodeProps {
|
||||
data: {
|
||||
color: 'r' | 'g' | 'b'
|
||||
}
|
||||
amount: {
|
||||
red: number
|
||||
green: number
|
||||
blue: number
|
||||
}
|
||||
}
|
||||
const props = defineProps<RGBNodeProps>()
|
||||
const emit = defineEmits(['change'])
|
||||
let color = 'red'
|
||||
switch (props.data?.color) {
|
||||
case 'r':
|
||||
color = 'red'
|
||||
break
|
||||
case 'g':
|
||||
color = 'green'
|
||||
break
|
||||
case 'b':
|
||||
color = 'blue'
|
||||
break
|
||||
}
|
||||
const onChange = (e: any) => emit('change', { color, val: e.target.value })
|
||||
</script>
|
||||
<template>
|
||||
<div class="px-4 py-2 bg-white rounded-md border-2 border-solid border-black text-left transform scale-75 lg:scale-100">
|
||||
<div class="text-md" :style="{ color }">{{ `${color} Amount`.toUpperCase() }}</div>
|
||||
<input
|
||||
v-model="props.amount[color]"
|
||||
class="slider nodrag"
|
||||
:style="{ '--color': color }"
|
||||
type="range"
|
||||
min="0"
|
||||
max="255"
|
||||
@input="onChange"
|
||||
/>
|
||||
<Handle type="source" :position="Position.Right" :style="{ backgroundColor: color }" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,24 @@
|
||||
<script lang="ts" setup>
|
||||
import { Handle, NodeProps, Position } from '@braks/vue-flow'
|
||||
interface RBGOutputNodeProps extends NodeProps {
|
||||
rgb: string
|
||||
}
|
||||
const props = defineProps<RBGOutputNodeProps>()
|
||||
const emit = defineEmits(['next'])
|
||||
const next = () => emit('next')
|
||||
</script>
|
||||
<template>
|
||||
<div :style="{ backgroundColor: props.rgb }" class="rgb-output-node" @click="next">
|
||||
<div class="text-md uppercase">{{ props.rgb }}</div>
|
||||
Click me to continue.
|
||||
<Handle type="target" :position="Position.Left" />
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.rgb-output-node {
|
||||
padding: 9px;
|
||||
border-radius: 25px;
|
||||
text-align: left;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
@@ -2,16 +2,36 @@ import { config } from 'dotenv'
|
||||
import { resolve } from 'path'
|
||||
import { defineConfig, HeadConfig } from 'vitepress'
|
||||
import head from './head'
|
||||
import WindiCSS from 'vite-plugin-windicss'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
|
||||
config({ path: resolve(__dirname, '.env') })
|
||||
|
||||
export default defineConfig({
|
||||
title: 'Vue Flow',
|
||||
description: 'Create node based editors!',
|
||||
lastUpdated: true,
|
||||
srcDir: './src',
|
||||
head: head as HeadConfig[],
|
||||
|
||||
vite: {
|
||||
plugins: [
|
||||
WindiCSS({
|
||||
config: resolve(__dirname, './windi.config.ts'),
|
||||
}) as any,
|
||||
Components({
|
||||
dirs: [
|
||||
resolve(__dirname, './components')
|
||||
],
|
||||
deep: true,
|
||||
// allow auto load markdown components under `./src/components/`
|
||||
extensions: ['vue', 'md'],
|
||||
// allow auto import and register components used in markdown
|
||||
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
|
||||
dts: false,
|
||||
}),
|
||||
],
|
||||
},
|
||||
|
||||
themeConfig: {
|
||||
repo: 'bcakmakoglu/vue-flow',
|
||||
docsDir: 'docs',
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { Theme } from 'vitepress';
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import Demo from '../components/Demo.vue'
|
||||
import 'virtual:windi.css'
|
||||
import '@braks/vue-flow/dist/style.css'
|
||||
import '@braks/vue-flow/dist/theme-default.css'
|
||||
import '../assets/index.css'
|
||||
|
||||
export default {
|
||||
...DefaultTheme,
|
||||
enhanceApp({ app }) {
|
||||
app.component('Demo', Demo)
|
||||
}
|
||||
} as Theme
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
import { defineConfig } from 'windicss/helpers'
|
||||
import { resolve } from 'path'
|
||||
|
||||
export default defineConfig({
|
||||
extract: {
|
||||
include: [
|
||||
resolve(__dirname, 'components/**/*.{ts,md,vue}')
|
||||
],
|
||||
},
|
||||
attributify: true,
|
||||
})
|
||||
@@ -1,62 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '@braks/vue-flow'
|
||||
import ResizableNode from './ResizableNode.vue'
|
||||
|
||||
const elements = ref<Elements>([
|
||||
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
|
||||
{
|
||||
id: '2',
|
||||
type: 'resize',
|
||||
label: 'Node 2',
|
||||
position: { x: 100, y: 100 },
|
||||
},
|
||||
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
|
||||
{ id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
|
||||
{ id: 'e1-2', source: '1', target: '2', animated: true },
|
||||
{ id: 'e1-3', source: '1', target: '3' },
|
||||
])
|
||||
const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges, store } = useVueFlow()
|
||||
onPaneReady(({ fitView }) => {
|
||||
fitView({ padding: 0.1 })
|
||||
})
|
||||
onNodeDragStop((e) => console.log('drag stop', e))
|
||||
onConnect((params) => addEdges([params]))
|
||||
|
||||
const updatePos = () =>
|
||||
elements.value.forEach((el) => {
|
||||
if (isNode(el)) {
|
||||
el.position = {
|
||||
x: Math.random() * 400,
|
||||
y: Math.random() * 400,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const logToObject = () => console.log(instance.value?.toObject())
|
||||
const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
|
||||
const toggleclass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
|
||||
</script>
|
||||
<template>
|
||||
<VueFlow v-model="elements" class="vue-flow-basic-example" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
|
||||
<template #node-resize="props">
|
||||
<ResizableNode v-bind="props" />
|
||||
</template>
|
||||
<Background :height="33" bg-color="pink">
|
||||
<text fill="#000000" font-size="22" font-family="ARIAL" x="120" y="110"> LEVEL 1 </text>
|
||||
</Background>
|
||||
<Background :height="33" bg-color="purple">
|
||||
<text fill="white" font-size="22" font-family="ARIAL" x="120" y="110"> LEVEL 2 </text>
|
||||
</Background>
|
||||
<Background :height="33" bg-color="crimson">
|
||||
<text fill="white" font-size="22" font-family="ARIAL" x="120" y="110"> LEVEL 3 </text>
|
||||
</Background>
|
||||
<MiniMap />
|
||||
<Controls />
|
||||
<div style="position: absolute; right: 10px; top: 10px; z-index: 4">
|
||||
<button style="margin-right: 5px" @click="resetTransform">reset transform</button>
|
||||
<button style="margin-right: 5px" @click="updatePos">change pos</button>
|
||||
<button style="margin-right: 5px" @click="toggleclass">toggle class</button>
|
||||
<button @click="logToObject">toObject</button>
|
||||
</div>
|
||||
</VueFlow>
|
||||
</template>
|
||||
@@ -1,74 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { VueFlow, Background, MiniMap, Controls, Elements, FlowEvents, FlowInstance, isNode, addEdge } from '@braks/vue-flow'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BasicOptionsAPI',
|
||||
components: { VueFlow, Background, MiniMap, Controls },
|
||||
data() {
|
||||
return {
|
||||
instance: null as FlowInstance | null,
|
||||
elements: [
|
||||
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
|
||||
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
|
||||
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
|
||||
{ id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
|
||||
{ id: 'e1-2', source: '1', target: '2', animated: true },
|
||||
{ id: 'e1-3', source: '1', target: '3' },
|
||||
] as Elements,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
logToObject() {
|
||||
console.log(this.instance?.toObject())
|
||||
},
|
||||
resetTransform() {
|
||||
//
|
||||
},
|
||||
toggleclass() {
|
||||
this.elements.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
|
||||
},
|
||||
updatePos() {
|
||||
this.elements.forEach((el) => {
|
||||
if (isNode(el)) {
|
||||
el.position = {
|
||||
x: Math.random() * 400,
|
||||
y: Math.random() * 400,
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
onNodeDragStop(e: FlowEvents['nodeDragStop']) {
|
||||
console.log('drag stop', e)
|
||||
},
|
||||
onPaneReady({ fitView }: FlowEvents['paneReady']) {
|
||||
fitView({ padding: 0.1 })
|
||||
},
|
||||
onConnect(params: FlowEvents['connect']) {
|
||||
addEdge(params, this.elements)
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<VueFlow
|
||||
v-model="elements"
|
||||
class="vue-flow-basic-example"
|
||||
:default-zoom="1.5"
|
||||
:min-zoom="0.2"
|
||||
:max-zoom="4"
|
||||
:zoom-on-scroll="false"
|
||||
@connect="onConnect"
|
||||
@pane-ready="onPaneReady"
|
||||
@node-drag-stop="onNodeDragStop"
|
||||
>
|
||||
<Background />
|
||||
<MiniMap />
|
||||
<Controls />
|
||||
<div style="position: absolute; right: 10px; top: 10px; z-index: 4">
|
||||
<button style="margin-right: 5px" @click="resetTransform">reset transform</button>
|
||||
<button style="margin-right: 5px" @click="updatePos">change pos</button>
|
||||
<button style="margin-right: 5px" @click="toggleclass">toggle class</button>
|
||||
<button @click="logToObject">toObject</button>
|
||||
</div>
|
||||
</VueFlow>
|
||||
</template>
|
||||
@@ -1,64 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { Position, Handle, ValidConnectionFunc } from '@braks/vue-flow'
|
||||
|
||||
interface Props {
|
||||
id: string
|
||||
selected?: boolean
|
||||
connectable?: boolean
|
||||
label?: string
|
||||
isValidSourcePos?: ValidConnectionFunc
|
||||
isValidTargetPos?: ValidConnectionFunc
|
||||
parentNode?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
connectable: false,
|
||||
sourcePosition: 'bottom' as Position,
|
||||
targetPosition: 'top' as Position,
|
||||
})
|
||||
</script>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'ResizableNode',
|
||||
inheritAttrs: false,
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Handle
|
||||
type="target"
|
||||
:position="props.targetPosition"
|
||||
:is-connectable="props.connectable"
|
||||
:is-valid-connection="props.isValidTargetPos"
|
||||
/>
|
||||
<div class="resize-node">
|
||||
<div v-html="props.label"></div>
|
||||
<div ref="el" class="resizer nodrag" />
|
||||
</div>
|
||||
<Handle
|
||||
type="source"
|
||||
:position="props.sourcePosition"
|
||||
:is-connectable="props.connectable"
|
||||
:is-valid-connection="props.isValidSourcePos"
|
||||
/>
|
||||
</template>
|
||||
<style>
|
||||
.resize-node {
|
||||
padding: 1rem;
|
||||
border: 1px solid gray;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.resizer {
|
||||
resize: both;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
outline: none;
|
||||
white-space: pre;
|
||||
overflow-wrap: normal;
|
||||
overflow: hidden;
|
||||
background: aliceblue;
|
||||
border: 1px solid gray;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
Vendored
-212
@@ -1,212 +0,0 @@
|
||||
// Generated by 'unplugin-auto-import'
|
||||
// We suggest you to commit this file into source control
|
||||
declare global {
|
||||
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
|
||||
const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
|
||||
const biSyncRef: typeof import('@vueuse/core')['biSyncRef']
|
||||
const computed: typeof import('vue')['computed']
|
||||
const computedInject: typeof import('@vueuse/core')['computedInject']
|
||||
const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
|
||||
const controlledRef: typeof import('@vueuse/core')['controlledRef']
|
||||
const createApp: typeof import('vue')['createApp']
|
||||
const createEventHook: typeof import('@vueuse/core')['createEventHook']
|
||||
const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
|
||||
const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
|
||||
const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
|
||||
const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
|
||||
const customRef: typeof import('vue')['customRef']
|
||||
const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
|
||||
const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
|
||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||
const defineComponent: typeof import('vue')['defineComponent']
|
||||
const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
|
||||
const effectScope: typeof import('vue')['effectScope']
|
||||
const EffectScope: typeof import('vue')['EffectScope']
|
||||
const extendRef: typeof import('@vueuse/core')['extendRef']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const h: typeof import('vue')['h']
|
||||
const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
|
||||
const inject: typeof import('vue')['inject']
|
||||
const isDefined: typeof import('@vueuse/core')['isDefined']
|
||||
const isReadonly: typeof import('vue')['isReadonly']
|
||||
const isRef: typeof import('vue')['isRef']
|
||||
const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
|
||||
const markRaw: typeof import('vue')['markRaw']
|
||||
const nextTick: typeof import('vue')['nextTick']
|
||||
const onActivated: typeof import('vue')['onActivated']
|
||||
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
||||
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||
const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
|
||||
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||
const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
|
||||
const onLongPress: typeof import('@vueuse/core')['onLongPress']
|
||||
const onMounted: typeof import('vue')['onMounted']
|
||||
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||
const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const reactify: typeof import('@vueuse/core')['reactify']
|
||||
const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
|
||||
const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
|
||||
const reactivePick: typeof import('@vueuse/core')['reactivePick']
|
||||
const readonly: typeof import('vue')['readonly']
|
||||
const ref: typeof import('vue')['ref']
|
||||
const refDefault: typeof import('@vueuse/core')['refDefault']
|
||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||
const shallowRef: typeof import('vue')['shallowRef']
|
||||
const syncRef: typeof import('@vueuse/core')['syncRef']
|
||||
const templateRef: typeof import('@vueuse/core')['templateRef']
|
||||
const throttledRef: typeof import('@vueuse/core')['throttledRef']
|
||||
const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
|
||||
const toRaw: typeof import('vue')['toRaw']
|
||||
const toReactive: typeof import('@vueuse/core')['toReactive']
|
||||
const toRef: typeof import('vue')['toRef']
|
||||
const toRefs: typeof import('vue')['toRefs']
|
||||
const triggerRef: typeof import('vue')['triggerRef']
|
||||
const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
|
||||
const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
|
||||
const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
|
||||
const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
|
||||
const unref: typeof import('vue')['unref']
|
||||
const unrefElement: typeof import('@vueuse/core')['unrefElement']
|
||||
const until: typeof import('@vueuse/core')['until']
|
||||
const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
|
||||
const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
|
||||
const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useBase64: typeof import('@vueuse/core')['useBase64']
|
||||
const useBattery: typeof import('@vueuse/core')['useBattery']
|
||||
const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
|
||||
const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
|
||||
const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
|
||||
const useCached: typeof import('@vueuse/core')['useCached']
|
||||
const useClamp: typeof import('@vueuse/core')['useClamp']
|
||||
const useClipboard: typeof import('@vueuse/core')['useClipboard']
|
||||
const useColorMode: typeof import('@vueuse/core')['useColorMode']
|
||||
const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
|
||||
const useCounter: typeof import('@vueuse/core')['useCounter']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVar: typeof import('@vueuse/core')['useCssVar']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useCycleList: typeof import('@vueuse/core')['useCycleList']
|
||||
const useDark: typeof import('@vueuse/core')['useDark']
|
||||
const useDebounce: typeof import('@vueuse/core')['useDebounce']
|
||||
const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
|
||||
const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
|
||||
const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
|
||||
const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
|
||||
const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
|
||||
const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
|
||||
const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
|
||||
const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
|
||||
const useDraggable: typeof import('@vueuse/core')['useDraggable']
|
||||
const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
|
||||
const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
|
||||
const useElementHover: typeof import('@vueuse/core')['useElementHover']
|
||||
const useElementSize: typeof import('@vueuse/core')['useElementSize']
|
||||
const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
|
||||
const useEventBus: typeof import('@vueuse/core')['useEventBus']
|
||||
const useEventListener: typeof import('@vueuse/core')['useEventListener']
|
||||
const useEventSource: typeof import('@vueuse/core')['useEventSource']
|
||||
const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
|
||||
const useFavicon: typeof import('@vueuse/core')['useFavicon']
|
||||
const useFetch: typeof import('@vueuse/core')['useFetch']
|
||||
const useFocus: typeof import('@vueuse/core')['useFocus']
|
||||
const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
|
||||
const useFps: typeof import('@vueuse/core')['useFps']
|
||||
const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
|
||||
const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
|
||||
const useIdle: typeof import('@vueuse/core')['useIdle']
|
||||
const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
|
||||
const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
|
||||
const useInterval: typeof import('@vueuse/core')['useInterval']
|
||||
const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
|
||||
const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
|
||||
const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
|
||||
const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
|
||||
const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
|
||||
const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
|
||||
const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
|
||||
const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
|
||||
const useMemoize: typeof import('@vueuse/core')['useMemoize']
|
||||
const useMemory: typeof import('@vueuse/core')['useMemory']
|
||||
const useMounted: typeof import('@vueuse/core')['useMounted']
|
||||
const useMouse: typeof import('@vueuse/core')['useMouse']
|
||||
const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
|
||||
const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
|
||||
const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
|
||||
const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
|
||||
const useNetwork: typeof import('@vueuse/core')['useNetwork']
|
||||
const useNow: typeof import('@vueuse/core')['useNow']
|
||||
const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
|
||||
const useOnline: typeof import('@vueuse/core')['useOnline']
|
||||
const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
|
||||
const useParallax: typeof import('@vueuse/core')['useParallax']
|
||||
const usePermission: typeof import('@vueuse/core')['usePermission']
|
||||
const usePointer: typeof import('@vueuse/core')['usePointer']
|
||||
const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
|
||||
const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
|
||||
const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
|
||||
const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
|
||||
const useRafFn: typeof import('@vueuse/core')['useRafFn']
|
||||
const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
|
||||
const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
|
||||
const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
|
||||
const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
|
||||
const useScroll: typeof import('@vueuse/core')['useScroll']
|
||||
const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
|
||||
const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
|
||||
const useShare: typeof import('@vueuse/core')['useShare']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
|
||||
const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
|
||||
const useStorage: typeof import('@vueuse/core')['useStorage']
|
||||
const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
|
||||
const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
|
||||
const useSwipe: typeof import('@vueuse/core')['useSwipe']
|
||||
const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
|
||||
const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
|
||||
const useThrottle: typeof import('@vueuse/core')['useThrottle']
|
||||
const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
|
||||
const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
|
||||
const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
|
||||
const useTimeout: typeof import('@vueuse/core')['useTimeout']
|
||||
const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
|
||||
const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
|
||||
const useTitle: typeof import('@vueuse/core')['useTitle']
|
||||
const useToggle: typeof import('@vueuse/core')['useToggle']
|
||||
const useTransition: typeof import('@vueuse/core')['useTransition']
|
||||
const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
|
||||
const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
|
||||
const useVibrate: typeof import('@vueuse/core')['useVibrate']
|
||||
const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
|
||||
const useVModel: typeof import('@vueuse/core')['useVModel']
|
||||
const useVModels: typeof import('@vueuse/core')['useVModels']
|
||||
const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
|
||||
const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
|
||||
const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
|
||||
const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
|
||||
const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
|
||||
const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
|
||||
const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
|
||||
const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchOnce: typeof import('@vueuse/core')['watchOnce']
|
||||
const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
|
||||
const whenever: typeof import('@vueuse/core')['whenever']
|
||||
}
|
||||
export {}
|
||||
+5
-3
@@ -18,8 +18,10 @@
|
||||
"escape-html": "^1.0.3",
|
||||
"markdown-it": "^12.3.2",
|
||||
"prismjs": "^1.27.0",
|
||||
"unplugin-auto-import": "^0.6.8",
|
||||
"vite-plugin-vue-type-imports": "^0.1.3",
|
||||
"vitepress": "^0.22.3"
|
||||
"unplugin-vue-components": "^0.18.5",
|
||||
"vite-plugin-windicss": "^1.8.3",
|
||||
"vitepress": "^0.22.3",
|
||||
"vue": "3.2.21",
|
||||
"windicss": "^3.5.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
# Blabla
|
||||
+7
-1
@@ -1,3 +1,9 @@
|
||||
---
|
||||
home: true
|
||||
navbar: false
|
||||
footer: MIT Licensed | Copyright © 2021-present Burak Cakmakoglu
|
||||
---
|
||||
|
||||
# Hello World
|
||||
|
||||
<demo src="./Basic/Basic.vue" language="vue"></demo>
|
||||
<Home />
|
||||
|
||||
@@ -23,7 +23,6 @@
|
||||
"@types/node"
|
||||
],
|
||||
},
|
||||
"include": ["./.vitepress", "."],
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"dist"
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
import { resolve } from 'path'
|
||||
import { defineConfig } from 'vite'
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
// https://github.com/antfu/unplugin-auto-import
|
||||
AutoImport({
|
||||
imports: ['vue', '@vueuse/core'],
|
||||
dts: resolve('auto-imports.d.ts'),
|
||||
}),
|
||||
],
|
||||
optimizeDeps: {
|
||||
include: ['@braks/vue-flow'],
|
||||
},
|
||||
})
|
||||
@@ -1388,6 +1388,28 @@
|
||||
dependencies:
|
||||
vue-demi "*"
|
||||
|
||||
"@windicss/config@1.8.3":
|
||||
version "1.8.3"
|
||||
resolved "https://registry.yarnpkg.com/@windicss/config/-/config-1.8.3.tgz#4f6eb0441be00ff7f284bb278a6d0c8f34f791ed"
|
||||
integrity sha512-1fvfZhRD7WfV/Xh6uIAYKIdbQWrwEgSdkFlHiLPzMDS44KjwNZILDzLAz9Y2W5H2K4MLGgGMnzGS89ECyjc0Ww==
|
||||
dependencies:
|
||||
debug "^4.3.3"
|
||||
jiti "^1.13.0"
|
||||
windicss "^3.5.1"
|
||||
|
||||
"@windicss/plugin-utils@1.8.3":
|
||||
version "1.8.3"
|
||||
resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-1.8.3.tgz#cec2bdc7703357de348e4512d61c7bd7802b049a"
|
||||
integrity sha512-emlMeDt73uNV1ZofLTDogcxqL9aZ5uIRYkjeHlrWiaDozFbX6Jc+a6eRo9Ieaar3JUryl6AnecTPHAiFDl4IXg==
|
||||
dependencies:
|
||||
"@antfu/utils" "^0.5.0"
|
||||
"@windicss/config" "1.8.3"
|
||||
debug "^4.3.3"
|
||||
fast-glob "^3.2.11"
|
||||
magic-string "^0.25.7"
|
||||
micromatch "^4.0.4"
|
||||
windicss "^3.5.1"
|
||||
|
||||
acorn-jsx@^5.2.0, acorn-jsx@^5.3.1:
|
||||
version "5.3.2"
|
||||
resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
|
||||
@@ -2486,7 +2508,7 @@ debug@^3.1.0, debug@^3.2.7:
|
||||
dependencies:
|
||||
ms "^2.1.1"
|
||||
|
||||
debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2:
|
||||
debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3:
|
||||
version "4.3.4"
|
||||
resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
|
||||
integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
|
||||
@@ -3323,7 +3345,7 @@ fast-diff@^1.1.2:
|
||||
resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
|
||||
integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
|
||||
|
||||
fast-glob@^3.2.7, fast-glob@^3.2.9:
|
||||
fast-glob@^3.2.11, fast-glob@^3.2.7, fast-glob@^3.2.9:
|
||||
version "3.2.11"
|
||||
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
|
||||
integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
|
||||
@@ -4233,6 +4255,11 @@ issue-regex@^3.1.0:
|
||||
resolved "https://registry.yarnpkg.com/issue-regex/-/issue-regex-3.1.0.tgz#0671f094d6449c5b712fac3c9562aecb727d709e"
|
||||
integrity sha512-0RHjbtw9QXeSYnIEY5Yrp2QZrdtz21xBDV9C/GIlY2POmgoS6a7qjkYS5siRKXScnuAj5/SPv1C3YForNCHTJA==
|
||||
|
||||
jiti@^1.13.0:
|
||||
version "1.13.0"
|
||||
resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.13.0.tgz#3cdfc4e651ca0cca4c62ed5e47747b5841d41a8e"
|
||||
integrity sha512-/n9mNxZj/HDSrincJ6RP+L+yXbpnB8FybySBa+IjIaoH9FIxBbrbRT5XUbe8R7zuVM2AQqNMNDDqz0bzx3znOQ==
|
||||
|
||||
js-stringify@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/js-stringify/-/js-stringify-1.0.2.tgz#1736fddfd9724f28a3682adc6230ae7e4e9679db"
|
||||
@@ -4388,6 +4415,11 @@ kind-of@^6.0.2, kind-of@^6.0.3:
|
||||
resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
|
||||
integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
|
||||
|
||||
kolorist@^1.5.1:
|
||||
version "1.5.1"
|
||||
resolved "https://registry.yarnpkg.com/kolorist/-/kolorist-1.5.1.tgz#c3d66dc4fabde4f6b7faa6efda84c00491f9e52b"
|
||||
integrity sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==
|
||||
|
||||
latest-version@^5.1.0:
|
||||
version "5.1.0"
|
||||
resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-5.1.0.tgz#119dfe908fe38d15dfa43ecd13fa12ec8832face"
|
||||
@@ -6499,6 +6531,22 @@ unplugin-auto-import@^0.6.8:
|
||||
resolve "^1.22.0"
|
||||
unplugin "^0.4.0"
|
||||
|
||||
unplugin-vue-components@^0.18.5:
|
||||
version "0.18.5"
|
||||
resolved "https://registry.yarnpkg.com/unplugin-vue-components/-/unplugin-vue-components-0.18.5.tgz#96dfad540100ed8ae8895e65c32d9b37886dc5c5"
|
||||
integrity sha512-VPA6z/4pcKRDYtWu1H+FIpV0MADlFKG3q7YMVFzNFC3EhMVZ4WuBJ76490oKyauguNw1T1obLCuxNU9JzJ0oAQ==
|
||||
dependencies:
|
||||
"@antfu/utils" "^0.5.0"
|
||||
"@rollup/pluginutils" "^4.2.0"
|
||||
chokidar "^3.5.3"
|
||||
debug "^4.3.3"
|
||||
fast-glob "^3.2.11"
|
||||
local-pkg "^0.4.1"
|
||||
magic-string "^0.26.1"
|
||||
minimatch "^5.0.1"
|
||||
resolve "^1.22.0"
|
||||
unplugin "^0.4.0"
|
||||
|
||||
unplugin@^0.3.0:
|
||||
version "0.3.3"
|
||||
resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-0.3.3.tgz#e9b148f84cabef5e6529f232a10e674a7c020930"
|
||||
@@ -6615,6 +6663,16 @@ vite-plugin-vue-type-imports@^0.1.3:
|
||||
resolved "https://registry.yarnpkg.com/vite-plugin-vue-type-imports/-/vite-plugin-vue-type-imports-0.1.3.tgz#06edf2da7abdd3367217842e69b6ed7f506a3919"
|
||||
integrity sha512-iF5NgeQc2MZ6wDUS1tnN7rglkWmm+WhK9rCQb3FudsrMTqLazbtN6shyrEcsGBdqYAqH9c5HhiwU3gOIrFcVHA==
|
||||
|
||||
vite-plugin-windicss@^1.8.3:
|
||||
version "1.8.3"
|
||||
resolved "https://registry.yarnpkg.com/vite-plugin-windicss/-/vite-plugin-windicss-1.8.3.tgz#d5fe923ad60f5d80f153a4fae5f837d56caa25cb"
|
||||
integrity sha512-RIw2GD6H6cKNE8wZXVOBs4L1uTicVS0FaAkeqXvy1oyuXLC4SXmvnzEuoK0+qFuWJjW0ECNwE8eU+ZZhzNQKUg==
|
||||
dependencies:
|
||||
"@windicss/plugin-utils" "1.8.3"
|
||||
debug "^4.3.3"
|
||||
kolorist "^1.5.1"
|
||||
windicss "^3.5.1"
|
||||
|
||||
vite-svg-loader@^2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/vite-svg-loader/-/vite-svg-loader-2.2.0.tgz#b5d6ca948b03e45320cb4f96c44bf88f5bef0a2c"
|
||||
@@ -6903,6 +6961,11 @@ widest-line@^3.1.0:
|
||||
dependencies:
|
||||
string-width "^4.0.0"
|
||||
|
||||
windicss@^3.5.1:
|
||||
version "3.5.1"
|
||||
resolved "https://registry.yarnpkg.com/windicss/-/windicss-3.5.1.tgz#5e279c21179dbc122122d0b3a3a2651511249241"
|
||||
integrity sha512-E1hYZATcZFci/XhGS0sJAMRxULjnK+glNukE78Ku7xeb3jxgMY55fFOdIrav+GjQCsgR+IZxPq9/DwmO6eyc4Q==
|
||||
|
||||
with@^7.0.0:
|
||||
version "7.0.2"
|
||||
resolved "https://registry.yarnpkg.com/with/-/with-7.0.2.tgz#ccee3ad542d25538a7a7a80aad212b9828495bac"
|
||||
|
||||
Reference in New Issue
Block a user