diff --git a/.changeset/three-ads-yawn.md b/.changeset/three-ads-yawn.md new file mode 100644 index 000000000..416564ad0 --- /dev/null +++ b/.changeset/three-ads-yawn.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": patch +--- + +Update to use vue 3.3 diff --git a/examples/vite/package.json b/examples/vite/package.json index 69fa86c0e..397abe86b 100644 --- a/examples/vite/package.json +++ b/examples/vite/package.json @@ -13,20 +13,20 @@ "@vue-flow/minimap": "workspace:*", "@vue-flow/node-resizer": "workspace:*", "@vue-flow/node-toolbar": "workspace:*", - "pinia": "^2.0.35", + "pinia": "^2.1.6", "vueflow": "workspace:*" }, "devDependencies": { "@tooling/eslint-config": "workspace:*", "@tooling/tsconfig": "workspace:*", - "@types/dagre": "^0.7.48", - "@vitejs/plugin-vue": "^4.0.0", + "@types/dagre": "^0.7.50", + "@vitejs/plugin-vue": "^4.4.0", "dagre": "^0.8.5", - "unplugin-auto-import": "^0.14.4", - "vite": "^4.3.5", - "vite-svg-loader": "^3.6.0", - "vue": "^3.2.45", - "vue-router": "^4.1.6", - "vue-tsc": "^1.6.5" + "unplugin-auto-import": "^0.16.6", + "vite": "^4.4.11", + "vite-svg-loader": "^4.0.0", + "vue": "^3.3.4", + "vue-router": "^4.2.5", + "vue-tsc": "^1.8.15" } } diff --git a/examples/vite/vite.config.ts b/examples/vite/vite.config.ts index 954ecdf14..0a91f3ba3 100644 --- a/examples/vite/vite.config.ts +++ b/examples/vite/vite.config.ts @@ -1,7 +1,6 @@ import { resolve } from 'node:path' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' -import vueTypes from 'vite-plugin-vue-type-imports' import AutoImport from 'unplugin-auto-import/vite' import svgLoader from 'vite-svg-loader' @@ -13,7 +12,6 @@ export default defineConfig({ vue({ reactivityTransform: true, }), - vueTypes(), svgLoader(), AutoImport({ imports: ['vue', '@vueuse/core', 'vue/macros'], diff --git a/package.json b/package.json index 593d699d5..81ce3483b 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,8 @@ }, "devDependencies": { "@changesets/changelog-github": "^0.4.8", - "@changesets/cli": "^2.26.1", + "@changesets/cli": "^2.26.2", "shx": "^0.3.4", - "turbo": "^1.9.6" + "turbo": "^1.10.15" } } diff --git a/packages/background/package.json b/packages/background/package.json index 8da4bd30b..2b3ec96a0 100644 --- a/packages/background/package.json +++ b/packages/background/package.json @@ -55,16 +55,16 @@ "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix --ignore-pattern !**/* ./dist", "test": "exit 0" }, - "peerDependencies": { - "@vue-flow/core": "^1.12.2" + "peerDependencies": { + "@vue-flow/core": "^1.23.0", + "vue": "^3.3.0" }, "devDependencies": { "@tooling/eslint-config": "workspace:*", "@tooling/tsconfig": "workspace:*", "@tooling/vite-config": "workspace:*", "@vue-flow/core": "workspace:*", - "vue": "^3.2.25", - "vue-tsc": "^1.6.5" + "vue-tsc": "^1.8.15" }, "publishConfig": { "access": "public", diff --git a/packages/background/src/Background.vue b/packages/background/src/Background.vue index 612e2044e..29b17254b 100644 --- a/packages/background/src/Background.vue +++ b/packages/background/src/Background.vue @@ -1,9 +1,9 @@ @@ -209,6 +210,7 @@ export default { = Symbol('MiniMapSlots') diff --git a/packages/node-resizer/package.json b/packages/node-resizer/package.json index f65a26faa..0f9c4e6b3 100644 --- a/packages/node-resizer/package.json +++ b/packages/node-resizer/package.json @@ -59,8 +59,8 @@ "test": "exit 0" }, "peerDependencies": { - "@vue-flow/core": "^1.12.2", - "vue": "^3.2.37" + "@vue-flow/core": "^1.23.0", + "vue": "^3.3.0" }, "dependencies": { "d3-drag": "^3.0.0", @@ -73,9 +73,7 @@ "@types/d3-drag": "^3.0.4", "@types/d3-selection": "^3.0.7", "@vue-flow/core": "workspace:*", - "vite-plugin-vue-type-imports": "^0.2.4", - "vue": "^3.2.25", - "vue-tsc": "^1.6.5" + "vue-tsc": "^1.8.15" }, "publishConfig": { "access": "public", diff --git a/packages/node-resizer/src/NodeResizer.vue b/packages/node-resizer/src/NodeResizer.vue index 61d8d0d98..694b2e978 100644 --- a/packages/node-resizer/src/NodeResizer.vue +++ b/packages/node-resizer/src/NodeResizer.vue @@ -4,18 +4,14 @@ import { computed, inject, watch } from 'vue' import type { NodeDimensionChange } from '@vue-flow/core' import { NodeIdInjection, useVueFlow } from '@vue-flow/core' import ResizeControl from './ResizeControl.vue' -import type { ControlLinePosition, ControlPosition, NodeResizerProps, OnResize, OnResizeStart } from './types' +import type { ControlLinePosition, ControlPosition, NodeResizerEmits, NodeResizerProps } from './types' import { ResizeControlVariant } from './types' const props = withDefaults(defineProps(), { isVisible: true, }) -const emits = defineEmits<{ - (event: 'resizeStart', resizeEvent: OnResizeStart): void - (event: 'resize', resizeEvent: OnResize): void - (event: 'resizeEnd', resizeEvent: OnResizeStart): void -}>() +const emits = defineEmits() const { findNode, emits: triggerEmits } = useVueFlow() diff --git a/packages/node-resizer/src/ResizeControl.vue b/packages/node-resizer/src/ResizeControl.vue index 77c8b33f5..ac5fa807d 100644 --- a/packages/node-resizer/src/ResizeControl.vue +++ b/packages/node-resizer/src/ResizeControl.vue @@ -3,10 +3,9 @@ import type { NodeChange, NodeDimensionChange, NodePositionChange } from '@vue-f import { clamp, useGetPointerPosition, useVueFlow } from '@vue-flow/core' import { select } from 'd3-selection' import { drag } from 'd3-drag' -import { computed, ref, watchEffect } from 'vue' -import type { OnResize, OnResizeStart, ResizeControlProps, ResizeDragEvent } from './types' -import { ResizeControlVariant } from './types' -import { getDirection } from './utils' +import { ref, toRef, watchEffect } from 'vue' +import type { NodeResizerEmits, ResizeControlProps, ResizeControlVariant, ResizeDragEvent } from './types' +import { DefaultPositions, StylingProperty, getDirection } from './utils' const props = withDefaults(defineProps(), { variant: 'handle' as ResizeControlVariant, @@ -17,11 +16,7 @@ const props = withDefaults(defineProps(), { keepAspectRatio: false, }) -const emits = defineEmits<{ - (event: 'resizeStart', resizeEvent: OnResizeStart): void - (event: 'resize', resizeEvent: OnResize): void - (event: 'resizeEnd', resizeEvent: OnResizeStart): void -}>() +const emits = defineEmits() const initPrevValues = { width: 0, height: 0, x: 0, y: 0 } @@ -42,9 +37,11 @@ let startValues: typeof initStartValues = initStartValues let prevValues: typeof initPrevValues = initPrevValues -const defaultPosition = computed(() => (props.variant === ResizeControlVariant.Line ? 'right' : 'bottom-right')) +const controlPosition = toRef(() => props.position ?? DefaultPositions[props.variant]) -const controlPosition = computed(() => props.position ?? defaultPosition.value) +const positionClassNames = toRef(() => controlPosition.value.split('-')) + +const controlStyle = toRef(() => (props.color ? { [StylingProperty[props.variant]]: props.color } : {})) watchEffect((onCleanup) => { if (!resizeControlRef.value || !props.nodeId) { @@ -228,10 +225,6 @@ watchEffect((onCleanup) => { selection.on('.drag', null) }) }) - -const positionClassNames = computed(() => controlPosition.value.split('-')) -const colorStyleProp = computed(() => (props.variant === ResizeControlVariant.Line ? 'borderColor' : 'backgroundColor')) -const controlStyle = computed(() => (props.color ? { [colorStyleProp.value]: props.color } : {}))