diff --git a/docs/.vitepress/components/Demo.vue b/docs/.vitepress/components/Demo.vue new file mode 100644 index 00000000..90e2ad59 --- /dev/null +++ b/docs/.vitepress/components/Demo.vue @@ -0,0 +1,3 @@ + diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts new file mode 100644 index 00000000..ee795e52 --- /dev/null +++ b/docs/.vitepress/config.ts @@ -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 + }, + }, +}) diff --git a/docs/.vitepress/head.ts b/docs/.vitepress/head.ts new file mode 100644 index 00000000..f226b9ae --- /dev/null +++ b/docs/.vitepress/head.ts @@ -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, + }, + ], +] diff --git a/docs/.vitepress/plugins/demo.ts b/docs/.vitepress/plugins/demo.ts new file mode 100644 index 00000000..a0f2057c --- /dev/null +++ b/docs/.vitepress/plugins/demo.ts @@ -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 + diff --git a/docs/Basic/BasicOptionsAPI.vue b/docs/Basic/BasicOptionsAPI.vue new file mode 100644 index 00000000..08c11db2 --- /dev/null +++ b/docs/Basic/BasicOptionsAPI.vue @@ -0,0 +1,74 @@ + + diff --git a/docs/Basic/ResizableNode.vue b/docs/Basic/ResizableNode.vue new file mode 100644 index 00000000..6a5dddbc --- /dev/null +++ b/docs/Basic/ResizableNode.vue @@ -0,0 +1,64 @@ + + + + diff --git a/docs/auto-imports.d.ts b/docs/auto-imports.d.ts new file mode 100644 index 00000000..d7d68940 --- /dev/null +++ b/docs/auto-imports.d.ts @@ -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 {} diff --git a/docs/package.json b/docs/package.json new file mode 100644 index 00000000..790250a5 --- /dev/null +++ b/docs/package.json @@ -0,0 +1,25 @@ +{ + "name": "docs", + "version": "0.0.0", + "private": true, + "license": "MIT", + "author": "Burak Cakmakoglu", + "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" + } +} diff --git a/docs/src/components/index.md b/docs/src/components/index.md new file mode 100644 index 00000000..aee9cdc3 --- /dev/null +++ b/docs/src/components/index.md @@ -0,0 +1 @@ +# Blabla diff --git a/docs/src/index.md b/docs/src/index.md new file mode 100644 index 00000000..2b1b235d --- /dev/null +++ b/docs/src/index.md @@ -0,0 +1,3 @@ +# Hello World + + diff --git a/docs/tsconfig.json b/docs/tsconfig.json new file mode 100644 index 00000000..2a2e6110 --- /dev/null +++ b/docs/tsconfig.json @@ -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" }] +} diff --git a/docs/tsconfig.node.json b/docs/tsconfig.node.json new file mode 100644 index 00000000..e993792c --- /dev/null +++ b/docs/tsconfig.node.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "composite": true, + "module": "esnext", + "moduleResolution": "node" + }, + "include": ["vite.config.ts"] +} diff --git a/docs/vite.config.ts b/docs/vite.config.ts new file mode 100644 index 00000000..88997519 --- /dev/null +++ b/docs/vite.config.ts @@ -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'], + }, +}) diff --git a/examples/src/CustomConnectionLine/CustomConnectionLine.vue b/examples/src/CustomConnectionLine/CustomConnectionLine.vue index 36016b77..cfe87889 100644 --- a/examples/src/CustomConnectionLine/CustomConnectionLine.vue +++ b/examples/src/CustomConnectionLine/CustomConnectionLine.vue @@ -1,6 +1,6 @@