refactor: change pkg scope to vue-flow

This commit is contained in:
braks
2022-10-08 23:25:34 +02:00
committed by Braks
parent eb507c8e76
commit 8567e3733b
163 changed files with 288 additions and 288 deletions
+2 -2
View File
@@ -3,8 +3,8 @@
</template>
<style>
@import '@braks/vue-flow/dist/style.css';
@import '@braks/vue-flow/dist/theme-default.css';
@import '@vue-flow/core/dist/style.css';
@import '@vue-flow/core/dist/theme-default.css';
html,
body,
+1 -1
View File
@@ -1,5 +1,5 @@
<script setup>
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
import { ref } from 'vue'
import { initialElements } from './initial-elements.js'
@@ -1,4 +1,4 @@
import { MarkerType } from '@braks/vue-flow'
import { MarkerType } from '@vue-flow/core'
/**
* You can pass elements together as a v-model value
+1 -1
View File
@@ -9,7 +9,7 @@
"dev": "nuxt dev"
},
"dependencies": {
"@braks/vue-flow": "workspace:*"
"@vue-flow/core": "workspace:*"
},
"devDependencies": {
"nuxt": "3.0.0-rc.11"
+1 -1
View File
@@ -10,7 +10,7 @@
"lint": "eslint --ext .js,.ts,.vue ./"
},
"dependencies": {
"@braks/vue-flow": "workspace:*",
"@vue-flow/core": "workspace:*",
"@quasar/extras": "^1.15.4",
"quasar": "^2.9.2",
"vue": "^3.2.37",
+1 -1
View File
@@ -1,5 +1,5 @@
<script setup>
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
import { ref } from 'vue'
import { initialElements } from './initial-elements.js'
@@ -1,5 +1,5 @@
<script setup>
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
import { ref } from 'vue'
import { initialElements } from './customized-elements.js'
@@ -1,4 +1,4 @@
import { MarkerType } from '@braks/vue-flow'
import { MarkerType } from '@vue-flow/core'
/**
* You can pass elements together as a v-model value
@@ -1,4 +1,4 @@
import { MarkerType } from '@braks/vue-flow'
import { MarkerType } from '@vue-flow/core'
/**
* You can pass elements together as a v-model value
+2 -2
View File
@@ -1,6 +1,6 @@
/* app global css */
@import "@braks/vue-flow/dist/style.css";
@import "@braks/vue-flow/dist/theme-default.css";
@import "@vue-flow/core/dist/style.css";
@import "@vue-flow/core/dist/theme-default.css";
html,
body,
+2 -2
View File
@@ -1,8 +1,8 @@
/* import the required styles */
@import 'node_modules/@braks/vue-flow/dist/style.css';
@import 'node_modules/@vue-flow/core/dist/style.css';
/* import the default theme (optional) */
@import 'node_modules/@braks/vue-flow/dist/theme-default.css';
@import 'node_modules/@vue-flow/core/dist/theme-default.css';
body {
color: #111;
+1 -1
View File
@@ -7,7 +7,7 @@
"lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore ."
},
"dependencies": {
"@braks/vue-flow": "workspace:*"
"@vue-flow/core": "workspace:*"
},
"devDependencies": {
"@types/dagre": "^0.7.47",
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Elements } from '@braks/vue-flow'
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
import type { Elements } from '@vue-flow/core'
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
const elements = ref<Elements>([
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import type { Elements, FlowEvents, VueFlowStore } from '@braks/vue-flow'
import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '@braks/vue-flow'
import type { Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '@vue-flow/core'
export default defineComponent({
name: 'BasicOptionsAPI',
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Position, ValidConnectionFunc } from '@braks/vue-flow'
import { Handle } from '@braks/vue-flow'
import type { Position, ValidConnectionFunc } from '@vue-flow/core'
import { Handle } from '@vue-flow/core'
interface Props {
id: string
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Elements } from '@braks/vue-flow'
import { Background, BackgroundVariant, VueFlow } from '@braks/vue-flow'
import type { Elements } from '@vue-flow/core'
import { Background, BackgroundVariant, VueFlow } from '@vue-flow/core'
import ConnectionLine from './ConnectionLine.vue'
const elements = ref<Elements>([
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { CSSProperties } from 'vue'
import type { Connection, Edge, NodeProps } from '@braks/vue-flow'
import { Handle, Position } from '@braks/vue-flow'
import type { Connection, Edge, NodeProps } from '@vue-flow/core'
import { Handle, Position } from '@vue-flow/core'
interface ColorSelectorNodeProps extends NodeProps {
data: {
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Elements, Node, SnapGrid } from '@braks/vue-flow'
import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@braks/vue-flow'
import type { Elements, Node, SnapGrid } from '@vue-flow/core'
import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@vue-flow/core'
import ColorSelectorNode from './ColorSelectorNode.vue'
const elements = ref<Elements>([])
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Node } from '@braks/vue-flow'
import { VueFlow, useVueFlow } from '@braks/vue-flow'
import type { Node } from '@vue-flow/core'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import Sidebar from './Sidebar.vue'
let id = 0
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { VueFlowStore } from '@braks/vue-flow'
import { Controls, MiniMap, VueFlow } from '@braks/vue-flow'
import type { VueFlowStore } from '@vue-flow/core'
import { Controls, MiniMap, VueFlow } from '@vue-flow/core'
import { getElements } from './utils'
const onLoad = (flowInstance: VueFlowStore) => {
+2 -2
View File
@@ -1,5 +1,5 @@
import type { Elements } from '@braks/vue-flow'
import { Position } from '@braks/vue-flow'
import type { Elements } from '@vue-flow/core'
import { Position } from '@vue-flow/core'
const nodeWidth = 80
const nodeGapWidth = nodeWidth * 2
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { EdgeProps, Position } from '@braks/vue-flow'
import { getBezierPath, getEdgeCenter, useVueFlow } from '@braks/vue-flow'
import type { EdgeProps, Position } from '@vue-flow/core'
import { getBezierPath, getEdgeCenter, useVueFlow } from '@vue-flow/core'
interface CustomEdgeProps<T = any> extends EdgeProps<T> {
id: string
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { EdgeProps, Position } from '@braks/vue-flow'
import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '@braks/vue-flow'
import type { EdgeProps, Position } from '@vue-flow/core'
import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '@vue-flow/core'
interface CustomEdgeProps extends EdgeProps {
source: string
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Edge, Node } from '@braks/vue-flow'
import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
import type { Edge, Node } from '@vue-flow/core'
import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
import CustomEdge from './CustomEdge.vue'
import CustomEdge2 from './CustomEdge2.vue'
import CustomLabel from './CustomLabel.vue'
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Node } from '@braks/vue-flow'
import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow/src/index'
import type { Node } from '@vue-flow/core'
import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core/src/index'
const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { GraphNode, Position } from '@braks/vue-flow'
import { getBezierPath } from '@braks/vue-flow'
import type { GraphNode, Position } from '@vue-flow/core'
import { getBezierPath } from '@vue-flow/core'
import { getEdgeParams } from './floating-edge-utils'
interface FloatingConnectionLineProps {
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { CSSProperties } from 'vue'
import type { EdgeProps, GraphNode, MarkerType } from '@braks/vue-flow'
import { getBezierPath } from '@braks/vue-flow'
import type { EdgeProps, GraphNode, MarkerType } from '@vue-flow/core'
import { getBezierPath } from '@vue-flow/core'
import { getEdgeParams } from './floating-edge-utils'
interface FloatingEdgeProps extends EdgeProps {
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Background, BackgroundVariant, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
import { Background, BackgroundVariant, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
import FloatingEdge from './FloatingEdge.vue'
import FloatingConnectionLine from './FloatingConnectionLine.vue'
import { createElements } from './floating-edge-utils'
@@ -1,5 +1,5 @@
import type { Edge, GraphNode, XYPosition } from '@braks/vue-flow'
import { MarkerType, Position } from '@braks/vue-flow'
import type { Edge, GraphNode, XYPosition } from '@vue-flow/core'
import { MarkerType, Position } from '@vue-flow/core'
// this helper function returns the intersection point
// of the line between the center of the intersectionNode and the target node
+1 -1
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
import { Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
const isHidden = ref(false)
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
import { Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
const {
nodesDraggable,
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import dagre from 'dagre'
import type { CoordinateExtent, Elements } from '@braks/vue-flow'
import { ConnectionMode, Controls, Position, VueFlow, isNode } from '@braks/vue-flow'
import type { CoordinateExtent, Elements } from '@vue-flow/core'
import { ConnectionMode, Controls, Position, VueFlow, isNode } from '@vue-flow/core'
import initialElements from './initial-elements'
const dagreGraph = new dagre.graphlib.Graph()
@@ -1,4 +1,4 @@
import type { Elements, XYPosition } from '@braks/vue-flow'
import type { Elements, XYPosition } from '@vue-flow/core'
const position: XYPosition = { x: 0, y: 0 }
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Elements } from '@braks/vue-flow'
import { Background, VueFlow } from '@braks/vue-flow'
import type { Elements } from '@vue-flow/core'
import { Background, VueFlow } from '@vue-flow/core'
const initialElements: Elements = [
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { Handle, Position, getNodesInside, useVueFlow } from '@braks/vue-flow'
import type { NodeProps } from '@braks/vue-flow'
import { Handle, Position, getNodesInside, useVueFlow } from '@vue-flow/core'
import type { NodeProps } from '@vue-flow/core'
const props = defineProps<NodeProps>()
const { onNodeDragStop, getNodes, viewport } = useVueFlow()
+1 -1
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
fitViewOnInit: true,
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Connection, Edge, Elements, VueFlowStore } from '@braks/vue-flow'
import { Position, VueFlow, addEdge, isEdge } from '@braks/vue-flow'
import type { Connection, Edge, Elements, VueFlowStore } from '@vue-flow/core'
import { Position, VueFlow, addEdge, isEdge } from '@vue-flow/core'
const initialElements: Elements = [
{
+2 -2
View File
@@ -9,8 +9,8 @@ import type {
Styles,
ViewpaneTransform,
VueFlowStore,
} from '@braks/vue-flow'
import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '@braks/vue-flow'
} from '@vue-flow/core'
import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '@vue-flow/core'
const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
const onNodeDrag = (e: FlowEvents['nodeDrag']) => console.log('drag', e)
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Elements, VueFlowStore } from '@braks/vue-flow'
import { ConnectionMode, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
import type { Elements, VueFlowStore } from '@vue-flow/core'
import { ConnectionMode, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
import Sidebar from './Sidebar.vue'
const onLoad = (flowInstance: VueFlowStore) => console.log('flow loaded:', flowInstance)
+1 -1
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { useVueFlow } from '@braks/vue-flow'
import { useVueFlow } from '@vue-flow/core'
const { nodesSelectionActive, addSelectedNodes, getNodes, viewport } = useVueFlow()
const selectAll = () => {
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { templateRef } from '@vueuse/core'
import type { Elements, VueFlowStore } from '@braks/vue-flow'
import { VueFlow } from '@braks/vue-flow'
import type { Elements, VueFlowStore } from '@vue-flow/core'
import { VueFlow } from '@vue-flow/core'
import RGBNode from './RGBNode.vue'
import RGBOutputNode from './RGBOutputNode.vue'
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { CSSProperties } from 'vue'
import type { NodeProps } from '@braks/vue-flow'
import { Handle, Position } from '@braks/vue-flow'
import type { NodeProps } from '@vue-flow/core'
import { Handle, Position } from '@vue-flow/core'
interface RGBNodeProps extends NodeProps {
data: {
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { NodeProps } from '@braks/vue-flow'
import { Handle, Position } from '@braks/vue-flow'
import type { NodeProps } from '@vue-flow/core'
import { Handle, Position } from '@vue-flow/core'
interface RBGOutputNodeProps extends NodeProps {
rgb: string
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { FlowExportObject, Node } from '@braks/vue-flow'
import { useVueFlow, useZoomPanHelper } from '@braks/vue-flow'
import type { FlowExportObject, Node } from '@vue-flow/core'
import { useVueFlow, useZoomPanHelper } from '@vue-flow/core'
const flowKey = 'example-flow'
const state = useStorage<FlowExportObject>(flowKey, {
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Elements } from '@braks/vue-flow'
import { VueFlow } from '@braks/vue-flow'
import type { Elements } from '@vue-flow/core'
import { VueFlow } from '@vue-flow/core'
import Controls from './Controls.vue'
const initialElements: Elements = [
+1 -1
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { VueFlow, useVueFlow } from '@braks/vue-flow'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import { getElements } from './utils'
const { nodes, edges } = getElements(10, 10)
+1 -1
View File
@@ -1,4 +1,4 @@
import type { Edge, Node } from '@braks/vue-flow'
import type { Edge, Node } from '@vue-flow/core'
export function getElements(xElements = 10, yElements = 10) {
const initialNodes: Node[] = []
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Elements } from '@braks/vue-flow'
import { VueFlow } from '@braks/vue-flow'
import type { Elements } from '@vue-flow/core'
import { VueFlow } from '@vue-flow/core'
const elementsA: Elements = [
{ id: '1a', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { CSSProperties } from 'vue'
import { Handle, Position } from '@braks/vue-flow'
import { Handle, Position } from '@vue-flow/core'
interface Props {
id: string
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Elements, Node } from '@braks/vue-flow'
import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '@braks/vue-flow'
import type { Elements, Node } from '@vue-flow/core'
import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '@vue-flow/core'
import CustomNode from './CustomNode.vue'
const initialElements: Elements = [
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Connection, Edge, Elements, FlowEvents, VueFlowStore } from '@braks/vue-flow'
import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@braks/vue-flow'
import type { Connection, Edge, Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@vue-flow/core'
const initialElements: Elements = [
{
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Elements } from '@braks/vue-flow'
import { VueFlow } from '@braks/vue-flow'
import type { Elements } from '@vue-flow/core'
import { VueFlow } from '@vue-flow/core'
const initialElements: Elements = [
{ id: '1', label: '-', position: { x: 100, y: 100 } },
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { ValidConnectionFunc } from '@braks/vue-flow'
import { Handle, Position } from '@braks/vue-flow'
import type { ValidConnectionFunc } from '@vue-flow/core'
import { Handle, Position } from '@vue-flow/core'
interface CustomInputProps {
isValidTargetPos: ValidConnectionFunc
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { NodeProps, ValidConnectionFunc } from '@braks/vue-flow'
import { Handle, Position } from '@braks/vue-flow'
import type { NodeProps, ValidConnectionFunc } from '@vue-flow/core'
import { Handle, Position } from '@vue-flow/core'
interface CustomNodeProps extends NodeProps {
id: string
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { Connection, OnConnectStartParams, VueFlowStore } from '@braks/vue-flow'
import { VueFlow, useVueFlow } from '@braks/vue-flow'
import type { Connection, OnConnectStartParams, VueFlowStore } from '@vue-flow/core'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import CustomInput from './CustomInput.vue'
import CustomNode from './CustomNode.vue'
+1 -1
View File
@@ -24,6 +24,6 @@ export default defineConfig({
}),
],
optimizeDeps: {
exclude: ['@braks/vue-flow'],
exclude: ['@vue-flow/core'],
},
})