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

refactor: change pkg scope to vue-flow

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/guide/composables.md
+4 -4
View File
@@ -12,7 +12,7 @@ Thus accessing the internal state of Vue Flow becomes super easy when using comp
```vue
<script setup>
import { useVueFlow, VueFlow } from '@braks/vue-flow'
import { useVueFlow, VueFlow } from '@vue-flow/core'
const { nodes, edges } = useVueFlow({
nodes: [
@@ -51,7 +51,7 @@ It requires a valid Vue Flow store in its context.
```vue
<script setup>
import { useZoomPanHelper } from '@braks/vue-flow'
import { useZoomPanHelper } from '@vue-flow/core'
const { fitView } = useZoomPanHelper()
</script>
@@ -71,8 +71,8 @@ This is how the default handle component is built:
```vue
<script lang="ts" setup>
import { NodeId, useHandle, useVueFlow } from '@braks/vue-flow'
import type { HandleProps, Position } from '@braks/vue-flow'
import { NodeId, useHandle, useVueFlow } from '@vue-flow/core'
import type { HandleProps, Position } from '@vue-flow/core'
const props = withDefaults(defineProps<HandleProps>(), {
type: 'source',
docs/src/guide/edge.md
+5 -5
View File
@@ -15,7 +15,7 @@ Generally you create edges by adding them to the model-value or the edges prop o
```vue
<script>
import { VueFlow } from '@braks/vue-flow'
import { VueFlow } from '@vue-flow/core'
export default defineComponent({
components: { VueFlow },
@@ -61,7 +61,7 @@ directly to the state.
```vue
<script setup>
import { VueFlow, useVueFlow } from '@braks/vue-flow'
import { VueFlow, useVueFlow } from '@vue-flow/core'
const initialNodes = ref([
{
@@ -197,7 +197,7 @@ will expect a slot to have the name `edge-custom`.
```vue{18,26}
<script setup>
import { VueFlow } from '@braks/vue-flow'
import { VueFlow } from '@vue-flow/core'
import CustomEdge from './CustomEdge.vue'
const elements = ref([
@@ -360,7 +360,7 @@ to your edge components.
```vue{19-26}
<script setup>
import { VueFlow } from '@braks/vue-flow'
import { VueFlow } from '@vue-flow/core'
const elements = ref([
{
@@ -397,7 +397,7 @@ triggered when the edge is clicked.
```vue
<script lang="ts" setup>
import type { EdgeProps, EdgeEventsOn } from '@braks/vue-flow'
import type { EdgeProps, EdgeEventsOn } from '@vue-flow/core'
// define your events
interface CustomEdgeEvents {
docs/src/guide/getting-started.md
+4 -4
View File
@@ -8,11 +8,11 @@
## Installation
```bash
npm i --save @braks/vue-flow
npm i --save @vue-flow/core
yarn add @braks/vue-flow
yarn add @vue-flow/core
pnpm i @braks/vue-flow
pnpm i @vue-flow/core
```
## Usage
@@ -28,7 +28,7 @@ source (node id) and a target (node id).
```vue
<script setup>
import { VueFlow } from '@braks/vue-flow'
import { VueFlow } from '@vue-flow/core'
const elements = ref([
// Nodes
docs/src/guide/node.md
+7 -7
View File
@@ -16,7 +16,7 @@ Generally you create nodes by adding them to the model-value or the nodes prop o
```vue
<script>
import { VueFlow } from '@braks/vue-flow'
import { VueFlow } from '@vue-flow/core'
export default defineComponent({
components: { VueFlow },
@@ -57,7 +57,7 @@ directly to the state.
```vue
<script setup>
import { VueFlow, useVueFlow } from '@braks/vue-flow'
import { VueFlow, useVueFlow } from '@vue-flow/core'
const initialNodes = ref([
{
@@ -94,7 +94,7 @@ which expects an array of [changes](/typedocs/types/NodeChange) to be applied to
```vue{11,17-22}
<script setup>
import { VueFlow, useVueFlow } from '@braks/vue-flow'
import { VueFlow, useVueFlow } from '@vue-flow/core'
const initialNodes = ref([
{
@@ -200,7 +200,7 @@ will expect a slot to have the name `node-custom`.
```vue{9,16}
<script setup>
import { VueFlow } from '@braks/vue-flow'
import { VueFlow } from '@vue-flow/core'
import CustomNode from './CustomNode.vue'
const elements = ref([
@@ -341,7 +341,7 @@ to your node components.
```vue{9-13}
<script setup>
import { VueFlow } from '@braks/vue-flow'
import { VueFlow } from '@vue-flow/core'
const elements = ref([
{
@@ -370,7 +370,7 @@ triggered when the node is clicked.
```vue
<script lang="ts" setup>
import type { NodeProps, NodeEventsOn } from '@braks/vue-flow'
import type { NodeProps, NodeEventsOn } from '@vue-flow/core'
// define your events
interface CustomNodeEvents {
@@ -440,7 +440,7 @@ or you can emit the `updateNodeInternals` event from your custom node component
```vue
<script setup>
import { useVueFlow } from '@braks/vue-flow'
import { useVueFlow } from '@vue-flow/core'
const { updateNodeInternals } = useVueFlow()
docs/src/guide/theming.md
+2 -2
View File
@@ -6,10 +6,10 @@ the default theme) can be skipped.
```css
/* these are necessary styles for vue flow */
@import '@braks/vue-flow/dist/style.css';
@import '@vue-flow/core/dist/style.css';
/* this contains the default theme, these are optional styles */
@import '@braks/vue-flow/dist/theme-default.css';
@import '@vue-flow/core/dist/theme-default.css';
```
## Customizing default theme
docs/src/guide/utils/edge.md
+1 -1
View File
@@ -5,7 +5,7 @@ All default edge components are exported and can be used or extended if necessar
```vue
<script setup>
// CustomEdge.vue
import { EdgeProps, BezierEdge } from '@braks/vue-flow'
import { EdgeProps, BezierEdge } from '@vue-flow/core'
const props = defineProps<EdgeProps>()
docs/src/guide/utils/graph.md
+4 -4
View File
@@ -10,7 +10,7 @@
```vue{13}
<script setup>
import { VueFlow, isEdge } from '@braks/vue-flow'
import { VueFlow, isEdge } from '@vue-flow/core'
const elements = ref([
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 }, },
@@ -44,7 +44,7 @@ const toggleClass = () => {
```vue{13}
<script setup>
import { VueFlow, isNode } from '@braks/vue-flow'
import { VueFlow, isNode } from '@vue-flow/core'
const elements = ref([
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
@@ -83,7 +83,7 @@ of [`useVueFlow`](/guide/composables#usevueflow/)
```vue{12}
<script setup>
import { VueFlow, addEdge } from '@braks/vue-flow'
import { VueFlow, addEdge } from '@vue-flow/core'
const elements = ref([
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
@@ -116,7 +116,7 @@ of [`useVueFlow`](/guide/composables#usevueflow/)
```vue{12}
<script setup>
import { VueFlow, updateEdge } from '@braks/vue-flow'
import { VueFlow, updateEdge } from '@vue-flow/core'
const elements = ref([
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
docs/src/guide/utils/instance.md
+2 -2
View File
@@ -12,7 +12,7 @@ instance provided by [`onPaneReady`](/typedocs/interfaces/FlowEvents#paneready).
```vue
<script setup>
import { VueFlow, useVueFlow } from '@braks/vue-flow'
import { VueFlow, useVueFlow } from '@vue-flow/core'
const { onPaneReady } = useVueFlow()
@@ -25,7 +25,7 @@ onPaneReady((instance) => instance.fitView())
```vue
<script>
import { VueFlow } from '@braks/vue-flow'
import { VueFlow } from '@vue-flow/core'
export default defineComponent({
components: { VueFlow },
docs/src/guide/vue-flow/config.md
+7 -7
View File
@@ -19,7 +19,7 @@ as options to the [`useVueFlow`](/guide/composables#usevueflow) composable.
```vue
<script setup>
import { useVueFlow } from '@braks/vue-flow'
import { useVueFlow } from '@vue-flow/core'
useVueFlow({
defaultZoom: 0.5,
@@ -91,7 +91,7 @@ onMounted(() => {
```vue
<script setup>
import { VueFlow } from '@braks/vue-flow'
import { VueFlow } from '@vue-flow/core'
const elements = ref([
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -123,7 +123,7 @@ const elements = ref([
```vue
<script setup>
import { VueFlow } from '@braks/vue-flow'
import { VueFlow } from '@vue-flow/core'
const nodes = ref([
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -153,7 +153,7 @@ const nodes = ref([
```vue
<script setup>
import { VueFlow } from '@braks/vue-flow'
import { VueFlow } from '@vue-flow/core'
const nodes = ref([
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -188,7 +188,7 @@ const edges = ref([
```vue
<script setup>
import { VueFlow } from '@braks/vue-flow'
import { VueFlow } from '@vue-flow/core'
import CustomNode from './CustomNode.vue'
const nodeTypes = {
@@ -225,7 +225,7 @@ const edges = ref([
```vue
<script setup>
import { VueFlow } from '@braks/vue-flow'
import { VueFlow } from '@vue-flow/core'
import CustomEdge from './CustomEdge.vue'
const edgeTypes = {
@@ -265,7 +265,7 @@ const edges = ref([
```vue
<script setup>
import { VueFlow } from '@braks/vue-flow'
import { VueFlow } from '@vue-flow/core'
const nodes = ref([
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
docs/src/guide/vue-flow/state.md
+4 -4
View File
@@ -14,7 +14,7 @@ state is reactive and changes will be reflected on the graph.
```vue{4-6}
<script setup>
import { useVueFlow } from '@braks/vue-flow'
import { useVueFlow } from '@vue-flow/core'
const { getNodes, onPaneReady } = useVueFlow({
... // you can pass any VueFlowProp to the composable as a static option
@@ -59,7 +59,7 @@ available as an injection in the component tree.
```vue{5-6}
<script>
// Container.vue
import { useVueFlow } from '@braks/vue-flow'
import { useVueFlow } from '@vue-flow/core'
// initialize a store instance in this context, so it is available when calling inject(VueFlow)
useVueFlow()
@@ -70,7 +70,7 @@ Now we can easily access our current state instance from our Sidebar without pas
```vue
<script setup>
import { useVueFlow } from '@braks/vue-flow'
import { useVueFlow } from '@vue-flow/core'
const { nodesSelectionActive, addSelectedNodes, getNodes } = useVueFlow()
@@ -124,7 +124,7 @@ when mounted.
```vue{4,32}
<script>
import { VueFlow, useVueFlow } from '@braks/vue-flow'
import { VueFlow, useVueFlow } from '@vue-flow/core'
const { addEdges, onConnect } = useVueFlow({ id: 'options-api' })
export default defineComponent({