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

feat(docs): Add vitepress for docs & docs workspace

Browse Source
This commit is contained in:
Braks
2022-04-04 21:42:48 +02:00
parent bf3ca8bfda
commit e71b9d5e48
21 changed files with 1293 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/components/Demo.vue
+3
View File
@@ -0,0 +1,3 @@
<template>
Demo!
</template>
docs/.vitepress/config.ts
+42
View File
@@ -0,0 +1,42 @@
import { config } from 'dotenv'
import { resolve } from 'path'
import { defineConfig, HeadConfig } from 'vitepress'
import head from './head'
config({ path: resolve(__dirname, '.env') })
export default defineConfig({
title: 'Vue Flow',
description: 'Create node based editors!',
lastUpdated: true,
srcDir: './src',
head: head as HeadConfig[],
themeConfig: {
repo: 'bcakmakoglu/vue-flow',
docsDir: 'docs',
docsBranch: 'master',
lastUpdated: 'Last Updated',
algolia: {
appId: 'YCY25RSLA8',
apiKey: process.env.ALGOLIA_API_KEY,
indexName: (process.env.NODE_ENV !== 'production' ? 'dev_' : 'prod_') + 'VUE-FLOW',
},
nav: [
{ text: 'Guide', link: '/', activeMatch: '^/$|^/guide/' },
{
text: 'Config Reference',
link: '/config/basics',
activeMatch: '^/config/',
},
],
},
markdown: {
config(md) {
return md
},
},
})
docs/.vitepress/head.ts
+122
View File
@@ -0,0 +1,122 @@
const meta = {
title: '🌊 Vue Flow - A Vue3 Flowchart library',
description: 'Visualize your ideas with Vue Flow, a highly customizable Vue3 Flowchart library.',
img: 'https://images.prismic.io/bcakmakoglu/7cca6d1f-2d05-4ed6-a0a9-af9df54943ac_vue-flow.png',
url: 'https://vueflow.dev/',
}
export default [
[
'meta',
{
name: 'description',
content: meta.description,
},
],
['meta', { hid: 'og:title', name: 'og:title', content: meta.title }],
[
'meta',
{
hid: 'og:description',
property: 'og:description',
content: meta.description,
},
],
[
'meta',
{
hid: 'og:image',
property: 'og:image',
content: `http://${meta.img}`,
},
],
[
'meta',
{
hid: 'og:image:secure_url',
property: 'og:image:secure_url',
content: `https://${meta.img}`,
},
],
[
'meta',
{
hid: 'og:image:type',
property: 'og:image:type',
content: 'image/png',
},
],
[
'meta',
{
hid: 'og:image:width',
property: 'og:image:width',
content: '2428',
},
],
[
'meta',
{
hid: 'og:image:height',
property: 'og:image:height',
content: '1280',
},
],
['meta', { hid: 'og:url', property: 'og:url', content: meta.url }],
[
'meta',
{
hid: 'twitter:card',
name: 'twitter:card',
content: 'summary_large_image',
},
],
[
'meta',
{
hid: 'twitter:url',
name: 'twitter:url',
content: meta.url,
},
],
[
'meta',
{
hid: 'twitter:title',
name: 'twitter:title',
content: meta.title,
},
],
[
'meta',
{
hid: 'twitter:description',
name: 'twitter:description',
content: meta.description,
},
],
[
'meta',
{
hid: 'twitter:image',
name: 'twitter:image',
content: meta.img,
},
],
[
'link',
{
hid: 'canonical',
rel: 'canonical',
href: meta.url,
},
],
[
'link',
{
hid: 'image_src',
rel: 'image_src',
href: meta.img,
},
],
]
docs/.vitepress/plugins/demo.ts
+70
View File
@@ -0,0 +1,70 @@
import fs from 'fs'
import path from 'path'
import MarkdownIt from 'markdown-it'
import { highlight } from './highlight'
interface HoistedTags {
script: string[]
style: string[]
components: string[]
}
type ExtendedMarkdownParsedData = { hoistedTags: HoistedTags }
let index = 1
// hoist <script> and <style> tags out of the returned html
// so that they can be placed outside as SFC blocks.
export const demoPlugin = (md: MarkdownIt): any => {
const RE = /<demo /i
md.renderer.rules.html_inline = (tokens: any, idx: any) => {
const content = tokens[idx].content
const data = (md as any).__data as ExtendedMarkdownParsedData
const hoistedTags =
data.hoistedTags ||
(data.hoistedTags = {
script: [],
style: [],
components: [],
})
if (RE.test(content.trim())) {
const componentName = `demo${index++}`
let language = (content.match(/language=("|')(.*)('|")/) || [])[2] ?? ''
const src = (content.match(/src=("|')(\S+)('|")/) || [])[2] ?? ''
const { realPath, urlPath, importMap } = md as any
const absolutePath = path
.resolve(realPath ?? urlPath, '../', src)
.split(path.sep)
.join('/')
if (!src || !fs.existsSync(absolutePath)) {
const warningMsg = `${absolutePath} does not exist!`
console.warn(`[vitepress]: ${warningMsg}`)
return `<demo src="${absolutePath}" >
<p>${warningMsg}</p>`
}
if (!language) {
language = (absolutePath.match(/\.(.+)$/) || [])[1] ?? 'vue'
}
const codeStr = fs.readFileSync(absolutePath).toString()
const htmlStr = encodeURIComponent(highlight(codeStr, language))
hoistedTags.script!.unshift(`import ${componentName} from '${absolutePath}' \n`)
hoistedTags.components!.push(componentName)
return content.replace(
'>',
` componentName="${componentName}" htmlStr="${htmlStr}" codeStr="${encodeURIComponent(codeStr)}" ${
importMap ? `importMap="${encodeURIComponent(JSON.stringify(importMap))}"` : ''
} >
<${componentName}></${componentName}>
`,
)
} else {
return content
}
}
}
docs/.vitepress/plugins/highlight.ts
+46
View File
@@ -0,0 +1,46 @@
import chalk from 'chalk'
import prism from 'prismjs'
import loadLanguages from 'prismjs/components/index'
import escapeHtml from 'escape-html'
// required to make embedded highlighting work...
loadLanguages(['markup', 'css', 'javascript'])
function wrap(code: string, lang: string): string {
if (lang === 'text') {
code = escapeHtml(code)
}
return `<pre v-pre><code>${code}</code></pre>`
}
export const highlight = (str: string, lang: string) => {
if (!lang) {
return wrap(str, 'text')
}
lang = lang.toLowerCase()
const rawLang = lang
if (lang === 'vue' || lang === 'html') {
lang = 'markup'
}
if (lang === 'md') {
lang = 'markdown'
}
if (lang === 'ts') {
lang = 'typescript'
}
if (lang === 'py') {
lang = 'python'
}
if (!prism.languages[lang]) {
try {
loadLanguages([lang])
} catch (e) {
console.warn(chalk.yellow(`[vitepress] Syntax highlight for language "${lang}" is not supported.`))
}
}
if (prism.languages[lang]) {
const code = prism.highlight(str, prism.languages[lang], lang)
return wrap(code, rawLang)
}
return wrap(str, 'text')
}
docs/.vitepress/theme/index.ts
+10
View File
@@ -0,0 +1,10 @@
import { Theme } from 'vitepress';
import DefaultTheme from 'vitepress/theme'
import Demo from '../components/Demo.vue'
export default {
...DefaultTheme,
enhanceApp({ app }) {
app.component('Demo', Demo)
}
} as Theme
docs/Basic/Basic.vue
+62
View File
@@ -0,0 +1,62 @@
<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>
docs/Basic/BasicOptionsAPI.vue
+74
View File
@@ -0,0 +1,74 @@
<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>
docs/Basic/ResizableNode.vue
+64
View File
@@ -0,0 +1,64 @@
<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>
docs/auto-imports.d.ts
Vendored
+212
View File
@@ -0,0 +1,212 @@
// 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 {}
docs/package.json
+25
View File
@@ -0,0 +1,25 @@
{
"name": "docs",
"version": "0.0.0",
"private": true,
"license": "MIT",
"author": "Burak Cakmakoglu<brainbraks@googlemail.com>",
"scripts": {
"dev": "vitepress dev",
"build": "vitepress build",
"serve": "vitepress serve"
},
"devDependencies": {
"@types/escape-html": "^1.0.1",
"@types/markdown-it": "^12.2.3",
"@types/node": "^17.0.23",
"@types/prismjs": "^1.26.0",
"dotenv": "^16.0.0",
"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"
}
}
docs/src/components/index.md
+1
View File
@@ -0,0 +1 @@
# Blabla
docs/src/index.md
+3
View File
@@ -0,0 +1,3 @@
# Hello World
<demo src="./Basic/Basic.vue" language="vue"></demo>
docs/tsconfig.json
+32
View File
@@ -0,0 +1,32 @@
{
"compilerOptions": {
"baseUrl": ".",
"module": "ESNext",
"target": "es2017",
"lib": [
"DOM",
"ESNext"
],
"noEmit": true,
"declaration": false,
"strict": true,
"esModuleInterop": true,
"incremental": false,
"skipLibCheck": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"noUnusedLocals": false,
"strictNullChecks": true,
"forceConsistentCasingInFileNames": true,
"types": [
"vite/client",
"@types/node"
],
},
"include": ["./.vitepress", "."],
"exclude": [
"node_modules",
"dist"
],
"references": [{ "path": "./tsconfig.node.json" }]
}
docs/tsconfig.node.json
+8
View File
@@ -0,0 +1,8 @@
{
"compilerOptions": {
"composite": true,
"module": "esnext",
"moduleResolution": "node"
},
"include": ["vite.config.ts"]
}
docs/vite.config.ts
+16
View File
@@ -0,0 +1,16 @@
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'],
},
})