@xyflow/vue 2.0.0-next.1 → 2.0.0-next.2

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createPropsRestProxy, createTextVNode, createVNode, defineComponent, effectScope, getCurrentInstance, h, inject, isMemoSame, isRef, markRaw, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeMount, onBeforeUnmount, onMounted, onScopeDispose, onUnmounted, openBlock, provide, reactive, renderList, renderSlot, resolveComponent, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, toRef, toRefs, toValue, unref, useAttrs, useId, useModel, useSlots, watch, watchEffect, withCtx } from "vue";
 import { ConnectionLineType, ConnectionLineType as ConnectionLineType$1, ConnectionMode, ConnectionMode as ConnectionMode$1, PanOnScrollMode, PanOnScrollMode as PanOnScrollMode$1, Position, Position as Position$1, ResizeControlVariant, ResizeControlVariant as ResizeControlVariant$2, SelectionMode, SelectionMode as SelectionMode$1, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, adoptUserNodes, areConnectionMapsEqual, areSetsEqual, calcAutoPan, clamp, clampPosition, clampPositionToParent, evaluateAbsolutePosition, fitViewport, getBezierEdgeCenter, getBezierEdgeCenter as getBezierEdgeCenter$1, getBezierPath, getBezierPath as getBezierPath$1, getBoundsOfBoxes, getBoundsOfRects, getBoundsOfRects as getBoundsOfRects$1, getConnectedEdges, getConnectedEdges as getConnectedEdges$1, getConnectionStatus, getDimensions, getEdgeId, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHandlePosition, getHostForElement, getIncomers, getMarkerId, getMarkerId as getMarkerId$1, getNodeDimensions, getNodeToolbarTransform, getNodesBounds, getNodesBounds as getNodesBounds$1, getNodesInside, getNodesInside as getNodesInside$1, getOutgoers, getOverlappingArea, getSmoothStepPath, getSmoothStepPath as getSmoothStepPath$1, getStraightPath, getStraightPath as getStraightPath$1, getViewportForBounds, getViewportForBounds as getViewportForBounds$1, handleConnectionChange, handleExpandParent, infiniteExtent, isCoordinateExtent, isEdgeBase, isEdgeBase as isEdgeBase$1, isEdgeVisible, isInternalNodeBase, isInternalNodeBase as isInternalNodeBase$1, isMacOs, isMacOs as isMacOs$1, isMouseEvent, isNodeBase, isNodeBase as isNodeBase$1, isRectObject, mergeAriaLabelConfig, nodeHasDimensions, nodeToRect, oppositePosition, panBy, pointToRendererPoint, pointToRendererPoint as pointToRendererPoint$1, rendererPointToPoint, rendererPointToPoint as rendererPointToPoint$1, updateAbsolutePositions } from "@xyflow/system";
-import { onKeyStroke, until, useEventListener, useMediaQuery } from "@vueuse/core";
+import { onKeyStroke, until, useEventListener } from "@vueuse/core";
 //#region src/context/index.ts
 /** the curated instance (`useVueFlow()`) */
 const VueFlow = Symbol("vueFlow");
@@ -4033,23 +4033,6 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var A11yDescriptions_default = /* @__PURE__ */ export_helper_default(_sfc_main$11, [["render", _sfc_render$11], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/A11y/A11yDescriptions.vue"]]);
 //#endregion
-//#region src/composables/useColorModeClass.ts
-/**
-* Resolves the `colorMode` prop to the `light`/`dark` class applied to the flow container, tracking
-* `prefers-color-scheme` reactively when `colorMode` is `system` (matching xyflow/react+svelte).
-*
-* Takes the state explicitly because it runs inside `<VueFlow>`'s own setup; defaults to `useStore()`.
-*
-* @internal
-*/
-function useColorModeClass(state = useStore()) {
-	const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
-	return computed(() => {
-		if (state.colorMode === "system") return prefersDark.value ? "dark" : "light";
-		return state.colorMode;
-	});
-}
-//#endregion
 //#region src/store/hooks.ts
 function createHooks() {
 	return {
@@ -4167,7 +4150,6 @@ function useState() {
 		translateExtent: [[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY], [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY]],
 		nodeExtent: [[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY], [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY]],
 		nodeOrigin: [0, 0],
-		colorMode: "light",
 		selectionMode: SelectionMode$1.Full,
 		paneDragging: false,
 		preventScrolling: true,
@@ -7108,7 +7090,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 			type: Array,
 			required: false
 		},
-		colorMode: {
+		forceColorMode: {
 			type: String,
 			required: false,
 			default: void 0
@@ -7360,7 +7342,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 		useOnInitHandler(instance);
 		useSelectionChange(instance);
 		useStylesLoadedWarning(instance);
-		const colorModeClass = useColorModeClass(state);
 		useViewportSync(modelViewport, state);
 		const stateRefs = storeToRefs(state);
 		provide(Slots$1, slots);
@@ -7379,7 +7360,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 			instance,
 			state,
 			disposeWatchers,
-			colorModeClass,
 			stateRefs,
 			A11yDescriptions: A11yDescriptions_default,
 			ZoomPane: ZoomPane_default
@@ -7394,7 +7374,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createElementBlock("div", {
 		ref: $setup.stateRefs.vueFlowRef,
-		class: normalizeClass(["vue-flow", $setup.colorModeClass])
+		class: normalizeClass(["vue-flow", $setup.props.forceColorMode])
 	}, [
 		createCommentVNode(" the `zoom-pane` slot (affected by zooming & panning) renders inside the transformed Viewport via\n    the provided `Slots` (see ZoomPaneSlot), not drilled through ZoomPane → Pane → Viewport "),
 		createVNode($setup["ZoomPane"]),