refactor: replace additional-components package occurrences

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
2022-12-13 15:21:10 +01:00
parent e1c904f97f
commit 000dd5c9ba
54 changed files with 218 additions and 108 deletions
--- a/docs/components/DocsRepl.vue
+++ b/docs/components/DocsRepl.vue
@@ -12,6 +12,8 @@ const { vueFlowVersion } = useVueFlow()

 let css = `@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/dist/style.css';
@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/dist/theme-default.css';
+@import 'https://cdn.jsdelivr.net/npm/@vue-flow/controls@latest/dist/style.css';
+@import 'https://cdn.jsdelivr.net/npm/@vue-flow/minimap@latest/dist/style.css';

 html,
 body,
@@ -72,7 +74,9 @@ onMounted(async () => {
  // pre-set import map
  await store.setImportMap({
    imports: {
-      '@vue-flow/additional-components': `${location.origin}/vue-flow-additional-components.mjs`,
+      '@vue-flow/background': `${location.origin}/vue-flow-background.mjs`,
+      '@vue-flow/controls': `${location.origin}/vue-flow-controls.mjs`,
+      '@vue-flow/minimap': `${location.origin}/vue-flow-minimap.mjs`,
      '@vue-flow/core': `${location.origin}/vue-flow-core.mjs`,
      '@vue-flow/node-toolbar': `${location.origin}/vue-flow-node-toolbar.mjs`,
      ...additionalImports,
--- a/docs/components/examples/basic/App.vue
+++ b/docs/components/examples/basic/App.vue
@@ -1,6 +1,8 @@
 <script setup>
-import { Background, Controls, MiniMap, Panel, PanelPosition } from '@vue-flow/additional-components'
-import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Panel, PanelPosition, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
 import { ref } from 'vue'
 import { initialElements } from './initial-elements.js'

--- a/docs/components/examples/custom-node/App.vue
+++ b/docs/components/examples/custom-node/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { MiniMap } from '@vue-flow/additional-components'
+import { MiniMap } from '@vue-flow/minimap'
 import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { h, onMounted, ref } from 'vue'
 import ColorSelectorNode from './CustomNode.vue'
--- a/docs/components/examples/edges/App.vue
+++ b/docs/components/examples/edges/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Background } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
 import { MarkerType, VueFlow } from '@vue-flow/core'
 import { h, ref } from 'vue'
 import CustomEdge from './CustomEdge.vue'
--- a/docs/components/examples/empty/App.vue
+++ b/docs/components/examples/empty/App.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { Background, BackgroundVariant, MiniMap, Panel, PanelPosition } from '@vue-flow/additional-components'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Panel, PanelPosition, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, BackgroundVariant } from '@vue-flow/background'
+import { MiniMap } from '@vue-flow/minimap'

 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()

--- a/docs/components/examples/hidden/App.vue
+++ b/docs/components/examples/hidden/App.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { Background, Panel, PanelPosition } from '@vue-flow/additional-components'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import { Panel, PanelPosition, VueFlow, useVueFlow } from '@vue-flow/core'
 import { ref, watch } from 'vue'

 const isHidden = ref(false)
--- a/docs/components/examples/horizontal/App.vue
+++ b/docs/components/examples/horizontal/App.vue
@@ -1,6 +1,8 @@
 <script setup>
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
 import { ref } from 'vue'
 import { initialElements } from './initial-elements.js'

--- a/docs/components/examples/multi/Flow.vue
+++ b/docs/components/examples/multi/Flow.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { Background, Panel, PanelPosition } from '@vue-flow/additional-components'
-import { VueFlow, isNode } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import { Panel, PanelPosition, VueFlow, isNode } from '@vue-flow/core'
 import { ref } from 'vue'

 const elements = ref([
--- a/docs/components/examples/nested/App.vue
+++ b/docs/components/examples/nested/App.vue
@@ -1,6 +1,8 @@
 <script setup>
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
 import { onMounted } from 'vue'

 const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
--- a/docs/components/examples/save-restore/Controls.vue
+++ b/docs/components/examples/save-restore/Controls.vue
@@ -1,6 +1,5 @@
 <script setup>
-import { Panel, PanelPosition } from '@vue-flow/additional-components'
-import { useVueFlow } from '@vue-flow/core'
+import { Panel, PanelPosition, useVueFlow } from '@vue-flow/core'

 const flowKey = 'example-flow'

--- a/docs/components/examples/stress/App.vue
+++ b/docs/components/examples/stress/App.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { Background, MiniMap, Panel, PanelPosition } from '@vue-flow/additional-components'
-import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Panel, PanelPosition, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import { MiniMap } from '@vue-flow/minimap'
 import { nextTick, ref } from 'vue'
 import { getElements } from './utils.js'

--- a/docs/components/examples/update-edge/App.vue
+++ b/docs/components/examples/update-edge/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Background } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'

--- a/docs/components/home/flows/Additional.vue
+++ b/docs/components/home/flows/Additional.vue
@@ -2,7 +2,9 @@
 import { ref } from 'vue'
 import type { Elements } from '@vue-flow/core'
 import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'

 const emit = defineEmits(['pane'])

--- a/docs/components/home/flows/Basic.vue
+++ b/docs/components/home/flows/Basic.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { ClassFunc, GraphEdge, GraphNode, StyleFunc } from '@vue-flow/core'
 import { ConnectionLineType, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background, Controls } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+
 import Cross from '~icons/mdi/window-close'

 const emit = defineEmits(['pane'])
--- a/docs/components/home/flows/Intro.vue
+++ b/docs/components/home/flows/Intro.vue
@@ -3,7 +3,7 @@ import { Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import confetti from 'canvas-confetti'
 import colors from 'windicss/colors'
-import { Background } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
 import { cheer, fireworks } from './confetti'
 import Heart from '~icons/mdi/heart'

--- a/docs/components/home/flows/Nested.vue
+++ b/docs/components/home/flows/Nested.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
 import { breakpointsTailwind } from '@vueuse/core'
-import { Background, Controls } from '@vue-flow/additional-components'

 const emit = defineEmits(['pane'])

--- a/docs/components/home/flows/RGB.vue
+++ b/docs/components/home/flows/RGB.vue
@@ -1,8 +1,11 @@
 <script lang="ts" setup>
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind } from '@vueuse/core'
-import type { MiniMapNodeFunc } from '@vue-flow/additional-components'
-import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
+import { Background, BackgroundVariant } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
+import type { MiniMapNodeFunc } from '@vue-flow/minimap'
+
 import CustomEdge from '../edges/Custom.vue'
 import RGBNode from '../nodes/Input.vue'
 import RGBOutputNode from '../nodes/Output.vue'
--- a/docs/package.json
+++ b/docs/package.json
@@ -16,7 +16,10 @@
    "@animxyz/vue3": "^0.6.7",
    "@stackblitz/sdk": "^1.8.0",
    "@vercel/analytics": "^0.1.5",
+    "@vue-flow/background": "workspace:*",
+    "@vue-flow/controls": "workspace:*",
    "@vue-flow/core": "workspace:*",
+    "@vue-flow/minimap": "workspace:*",
    "@vue-flow/node-toolbar": "workspace:*",
    "@vue/repl": "1.1.2",
    "blobity": "^0.2.1",
--- a/docs/src/.vitepress/plugins/copy.ts
+++ b/docs/src/.vitepress/plugins/copy.ts
@@ -9,8 +9,16 @@ export function copyVueFlowPlugin(): Plugin {
      ;[
        { path: '../../../node_modules/@vue-flow/core/dist/', pkgName: 'vue-flow-core.mjs' },
        {
-          path: '../../../node_modules/@vue-flow/additional-components/dist/',
-          pkgName: 'vue-flow-additional-components.mjs',
+          path: '../../../node_modules/@vue-flow/background/dist/',
+          pkgName: 'vue-flow-background.mjs',
+        },
+        {
+          path: '../../../node_modules/@vue-flow/controls/dist/',
+          pkgName: 'vue-flow-controls.mjs',
+        },
+        {
+          path: '../../../node_modules/@vue-flow/minimap/dist/',
+          pkgName: 'vue-flow-minimap.mjs',
        },
        {
          path: '../../../node_modules/@vue-flow/node-toolbar/dist/',
--- a/docs/src/.vitepress/theme/index.ts
+++ b/docs/src/.vitepress/theme/index.ts
@@ -7,6 +7,8 @@ import 'virtual:windi.css'
 import '@animxyz/core'
 import '@vue-flow/core/dist/style.css'
 import '@vue-flow/core/dist/theme-default.css'
+import '@vue-flow/controls/dist/style.css'
+import '@vue-flow/minimap/dist/style.css'
 import './../../assets/index.css'

 const CustomTheme = {
--- a/docs/typedoc.json
+++ b/docs/typedoc.json
@@ -6,7 +6,9 @@
  ],
  "entryPoints": [
    "../packages/core/src/index.ts",
-    "../packages/additional-components/src/index.ts",
+    "../packages/background/src/index.ts",
+    "../packages/controls/src/index.ts",
+    "../packages/minimap/src/index.ts",
    "../packages/node-toolbar/src/index.ts"
  ],
  "categorizeByGroup": true,
--- a/docs/typedoc.md.json
+++ b/docs/typedoc.md.json
@@ -7,7 +7,9 @@
  ],
  "entryPoints": [
    "../packages/core/src/index.ts",
-    "../packages/additional-components/src/index.ts",
+    "../packages/background/src/index.ts",
+    "../packages/controls/src/index.ts",
+    "../packages/minimap/src/index.ts",
    "../packages/node-toolbar/src/index.ts"
  ],
  "allReflectionsHaveOwnDocument": true,