Skip to content

Commit 1359e81

Browse files
bcakmakoglubcakmakoglu
authored
refactor(core): move <Background> component to core pkg (#1548)
* refactor(core): move background component to core pkg Signed-off-by: braks <[email protected]> * chore(changeset): add Signed-off-by: braks <[email protected]> * chore(core): cleanup Signed-off-by: braks <[email protected]> * refactor(background): re-export background from core pkg Signed-off-by: braks <[email protected]> * refactor(background): add deprecation notice Signed-off-by: braks <[email protected]> * chore: update lock file Signed-off-by: braks <[email protected]> * chore(core,background): update default colors Signed-off-by: braks <[email protected]> * chore(docs,examples): cleanup Signed-off-by: braks <[email protected]> * chore(background): update README.md Signed-off-by: braks <[email protected]> * chore(background): update package.json Signed-off-by: braks <[email protected]> * chore: cleanup Signed-off-by: braks <[email protected]> * chore: cleanup Signed-off-by: braks <[email protected]> --------- Signed-off-by: braks <[email protected]>
1 parent fd9e172 commit 1359e81

File tree

66 files changed

+174
-511
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+174
-511
lines changed

‎.changeset/late-toys-play.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@vue-flow/background": minor
3+
"@vue-flow/core": minor
4+
---
5+
6+
Move `<Background>` component to core package

‎.changeset/spicy-cups-argue.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@vue-flow/background": minor
3+
---
4+
5+
Re-export `<Background>` from core pkg

‎.changeset/witty-seals-cough.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@vue-flow/background": minor
3+
---
4+
5+
Deprecate `@vue-flow/background` pkg

‎docs/components/DocsRepl.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,6 @@ await store.setFiles(
6767
// pre-set import map
6868
store.setImportMap({
6969
imports: {
70-
'@vue-flow/background': `${location.origin}/vue-flow-background.mjs`,
7170
'@vue-flow/controls': `${location.origin}/vue-flow-controls.mjs`,
7271
'@vue-flow/minimap': `${location.origin}/vue-flow-minimap.mjs`,
7372
'@vue-flow/core': `${location.origin}/vue-flow-core.mjs`,

‎docs/components/home/flows/Additional.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<script lang="ts" setup>
22
import { ref } from 'vue'
33
import type { Elements } from '@vue-flow/core'
4-
import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
5-
import { Background } from '@vue-flow/background'
4+
import { Background, Position, VueFlow, useVueFlow } from '@vue-flow/core'
65
import { Controls } from '@vue-flow/controls'
76
import { MiniMap } from '@vue-flow/minimap'
87
@@ -98,7 +97,7 @@ onPaneReady((i) => emit('pane', i))
9897
<VueFlow>
9998
<Controls :show-interactive="false" />
10099
<MiniMap mask-color="rgba(16, 185, 129, 0.5)" class="transform scale-60 origin-bottom-right opacity-75" />
101-
<Background variant="lines" pattern-color="#aaa" :gap="46" />
100+
<Background variant="lines" color="#aaa" :gap="46" />
102101
</VueFlow>
103102
</div>
104103

‎docs/components/home/flows/Basic.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script lang="ts" setup>
22
import type { ClassFunc, GraphEdge, GraphNode, StyleFunc } from '@vue-flow/core'
3-
import { ConnectionLineType, VueFlow, useVueFlow } from '@vue-flow/core'
4-
import { Background } from '@vue-flow/background'
3+
import { Background, ConnectionLineType, VueFlow, useVueFlow } from '@vue-flow/core'
54
import { Controls } from '@vue-flow/controls'
65
76
import Cross from '~icons/mdi/window-close'

‎docs/components/home/flows/Intro.vue‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script lang="ts" setup>
2-
import { Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
2+
import { Background, Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
33
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
4-
import { Background } from '@vue-flow/background'
54
import Heart from '~icons/mdi/heart'
65
76
const breakpoints = useBreakpoints(breakpointsTailwind)
@@ -190,8 +189,8 @@ function scrollTo() {
190189

191190
<template>
192191
<VueFlow ref="el" :style="{ opacity: !!currentBreakpoint ? 1 : 0 }">
193-
<Background id="dots" pattern-color="#aaa" :size="0.75" :gap="25" />
194-
<Background id="lines" variant="lines" :pattern-color="isDark ? '#fff' : '#000'" :size="1" :gap="100" />
192+
<Background id="dots" color="#aaa" :size="0.75" :gap="25" />
193+
<Background id="lines" variant="lines" :color="isDark ? '#fff' : '#000'" :size="1" :gap="100" />
195194

196195
<template #node-box="props">
197196
<template v-if="props.id === 'intro'">

‎docs/components/home/flows/Nested.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script lang="ts" setup>
2-
import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
3-
import { Background } from '@vue-flow/background'
2+
import { Background, ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
43
import { Controls } from '@vue-flow/controls'
54
import { breakpointsTailwind } from '@vueuse/core'
65
@@ -76,7 +75,7 @@ onPaneReady((i) => emit('pane', i))
7675
>
7776
<VueFlow class="nested">
7877
<Controls class="md:(!left-auto !right-[10px])" />
79-
<Background pattern-color="#aaa" class="!bg-gray-800" :gap="18" />
78+
<Background color="#aaa" class="!bg-gray-800" :gap="18" />
8079
</VueFlow>
8180
</div>
8281
</template>

‎docs/components/home/flows/RGB.vue‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script lang="ts" setup>
2-
import { VueFlow, useVueFlow } from '@vue-flow/core'
2+
import { Background, VueFlow, useVueFlow } from '@vue-flow/core'
33
import { breakpointsTailwind } from '@vueuse/core'
4-
import { Background, BackgroundVariant } from '@vue-flow/background'
54
import { Controls } from '@vue-flow/controls'
65
import { MiniMap } from '@vue-flow/minimap'
76
import type { MiniMapNodeFunc } from '@vue-flow/minimap'
@@ -96,12 +95,7 @@ const nodeColor: MiniMapNodeFunc = (node) => {
9695
</template>
9796
<Controls class="hidden md:block" />
9897

99-
<Background
100-
:variant="BackgroundVariant.Lines"
101-
:pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`"
102-
:gap="48"
103-
:size="1"
104-
/>
98+
<Background variant="lines" :color="`rgb(${color.red}, ${color.green}, ${color.blue})`" :gap="48" :size="1" />
10599

106100
<MiniMap class="hidden sm:block transform scale-25 md:scale-50 lg:scale-75 origin-bottom-right" :node-color="nodeColor" />
107101
</VueFlow>

‎docs/examples/basic/App.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script setup>
22
import { ref } from 'vue'
3-
import { VueFlow, useVueFlow } from '@vue-flow/core'
4-
import { Background } from '@vue-flow/background'
3+
import { Background, VueFlow, useVueFlow } from '@vue-flow/core'
54
import { ControlButton, Controls } from '@vue-flow/controls'
65
import { MiniMap } from '@vue-flow/minimap'
76
import { initialEdges, initialNodes } from './initial-elements.js'
@@ -102,7 +101,7 @@ function toggleDarkMode() {
102101
:min-zoom="0.2"
103102
:max-zoom="4"
104103
>
105-
<Background pattern-color="#aaa" :gap="16" />
104+
<Background color="#aaa" :gap="16" />
106105

107106
<MiniMap />
108107

0 commit comments

Comments
 (0)