v-nuxt-ui 0.1.36 → 0.2.1

package/dist/runtime/components/flow/FlowEditor.client.vue

@@ -0,0 +1,294 @@
+<script setup>
+import { ref, computed, provide, watchEffect, onMounted, onBeforeUnmount } from "vue";
+import { VueFlow, useVueFlow, Panel } from "@vue-flow/core";
+import { Background } from "@vue-flow/background";
+import { FLOW_MOUSE_POSITION_KEY, FLOW_EDGE_STROKE_TYPES } from "#v/constants";
+import FlowNode from "./FlowNode.client.vue";
+import FlowEdge from "./FlowEdge.client.vue";
+import FlowToolbar from "./FlowToolbar.vue";
+import FlowStats from "./FlowStats.vue";
+import { useFlow, useFlowResize, useFlowStyles } from "#v/composables";
+const props = defineProps({
+  modelValue: { type: Object, required: false, default: () => ({ id: 0, nodes: [], edges: [] }) },
+  api: { type: Object, required: false, default: void 0 },
+  showBackground: { type: Boolean, required: false, default: true },
+  showToolbar: { type: Boolean, required: false, default: true },
+  showStats: { type: Boolean, required: false, default: true },
+  minZoom: { type: Number, required: false, default: 0.2 },
+  maxZoom: { type: Number, required: false, default: 4 },
+  defaultZoom: { type: Number, required: false, default: 1 }
+});
+const emit = defineEmits(["update:modelValue", "edit-node"]);
+const handleUpdateModel = (model) => {
+  emit("update:modelValue", model);
+};
+const flowLogic = useFlow({
+  flow: computed(() => props.modelValue),
+  onUpdateModel: computed(() => handleUpdateModel),
+  api: computed(() => props.api)
+});
+const {
+  nodes,
+  edges,
+  GRID_SIZE,
+  loading,
+  deleteNode,
+  deleteEdge,
+  createEdge,
+  reconnectEdge,
+  updateNodePosition,
+  updateNodeDimensions,
+  createNode,
+  updateEdgeLabel
+} = flowLogic;
+const {
+  edgeStrokeWidth,
+  edgeMarkerStart,
+  edgeMarkerEnd,
+  edgeAnimated,
+  edgeStrokeType,
+  edgePathType,
+  edgeColor,
+  edgeLabelColor,
+  nodeBorderWidth,
+  nodeBorderRadius,
+  nodeBorderColor,
+  nodeBgColor,
+  nodeFontColor,
+  nodeFontSize,
+  nodeHandleSize,
+  nodeHandleColor,
+  colorMode,
+  unifiedColor,
+  isUnifiedMode,
+  effectiveNodeBorderColor,
+  effectiveNodeBgColor,
+  effectiveNodeFontColor,
+  effectiveNodeHandleColor,
+  effectiveEdgeColor
+} = useFlowStyles();
+const { onConnect, onNodeDragStop, onEdgeUpdate, getSelectedNodes, getSelectedEdges, getViewport } = useVueFlow();
+const handleResizeEnd = async (nodeId, dimensions) => {
+  await updateNodeDimensions(nodeId, dimensions);
+};
+const resizeLogic = useFlowResize({
+  gridSize: GRID_SIZE,
+  nodes,
+  getViewport,
+  onResizeEnd: handleResizeEnd
+});
+const {
+  startResize,
+  handleMouseMove,
+  handleMouseUp
+} = resizeLogic;
+const mousePosition = ref({ x: 0, y: 0 });
+provide(FLOW_MOUSE_POSITION_KEY, mousePosition);
+const handleEditNode = (nodeId) => {
+  const flowNode = props.modelValue?.nodes?.find((n) => String(n.id) === nodeId);
+  if (flowNode) {
+    emit("edit-node", flowNode);
+  }
+};
+watchEffect(() => {
+  flowLogic.syncNodes((nodeId) => ({
+    onEdit: () => handleEditNode(nodeId),
+    onDelete: () => deleteNode(nodeId),
+    borderWidth: nodeBorderWidth.value,
+    borderRadius: nodeBorderRadius.value,
+    borderColor: effectiveNodeBorderColor.value,
+    bgColor: effectiveNodeBgColor.value,
+    fontColor: effectiveNodeFontColor.value,
+    fontSize: nodeFontSize.value,
+    handleSize: nodeHandleSize.value,
+    handleColor: effectiveNodeHandleColor.value,
+    onResizeStart: (event, edge) => {
+      const node = props.modelValue?.nodes?.find((n) => String(n.id) === nodeId);
+      if (node) {
+        startResize(event, nodeId, node, edge);
+      }
+    }
+  }));
+});
+watchEffect(() => {
+  const dasharray = FLOW_EDGE_STROKE_TYPES.find((t) => t.type === edgeStrokeType.value)?.dasharray || "";
+  edges.value.forEach((edge) => {
+    edge.style = {
+      strokeWidth: edgeStrokeWidth.value,
+      ...dasharray ? { strokeDasharray: dasharray } : {},
+      ...effectiveEdgeColor.value ? { stroke: effectiveEdgeColor.value } : {}
+    };
+    edge.markerStart = void 0;
+    edge.markerEnd = void 0;
+    edge.animated = false;
+  });
+});
+watchEffect(() => {
+  flowLogic.syncEdges((edgeId) => ({
+    onUpdateLabel: (newLabel) => updateEdgeLabel(edgeId, newLabel)
+  }));
+});
+const isDeleteKey = (event) => {
+  return event.key === "Delete" || event.key === "Backspace" || event.code === "Backspace";
+};
+const isEditableTarget = (target) => {
+  const element = target instanceof HTMLElement ? target : null;
+  if (!element) return false;
+  const tagName = element.tagName;
+  return element.isContentEditable || tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT";
+};
+const handleKeyDown = async (event) => {
+  if (!isDeleteKey(event)) return;
+  if (isEditableTarget(event.target)) return;
+  event.preventDefault();
+  event.stopPropagation();
+  event.stopImmediatePropagation();
+  const selectedNodes = getSelectedNodes.value;
+  const selectedEdges = getSelectedEdges.value;
+  if (selectedNodes.length === 0 && selectedEdges.length === 0) return;
+  await Promise.all([
+    ...selectedNodes.map((node) => deleteNode(node.id)),
+    ...selectedEdges.map((edge) => deleteEdge(edge.id))
+  ]);
+};
+onMounted(() => {
+  const handleGlobalMouseMove = (event) => {
+    mousePosition.value = { x: event.clientX, y: event.clientY };
+    handleMouseMove(event);
+  };
+  document.addEventListener("keydown", handleKeyDown, true);
+  window.addEventListener("mousemove", handleGlobalMouseMove);
+  window.addEventListener("mouseup", handleMouseUp);
+  onBeforeUnmount(() => {
+    document.removeEventListener("keydown", handleKeyDown, true);
+    window.removeEventListener("mousemove", handleGlobalMouseMove);
+    window.removeEventListener("mouseup", handleMouseUp);
+  });
+});
+onNodeDragStop(async (event) => {
+  const { node } = event;
+  await updateNodePosition(node.id, node.position.x, node.position.y);
+});
+onConnect(async (params) => {
+  await createEdge(params);
+});
+onEdgeUpdate(({ edge, connection }) => {
+  if (connection.source && connection.target) {
+    reconnectEdge(edge.id, connection);
+  }
+});
+const defaultEdgeOptions = computed(() => {
+  const dasharray = FLOW_EDGE_STROKE_TYPES.find((t) => t.type === edgeStrokeType.value)?.dasharray || "";
+  return {
+    style: {
+      strokeWidth: edgeStrokeWidth.value,
+      ...dasharray ? { strokeDasharray: dasharray } : {},
+      ...effectiveEdgeColor.value ? { stroke: effectiveEdgeColor.value } : {}
+    },
+    // Markers are handled by FlowEdge custom SVG markers
+    markerStart: void 0,
+    markerEnd: void 0,
+    animated: false
+  };
+});
+const isValidConnection = () => true;
+</script>
+
+<template>
+  <VueFlow
+    v-model:nodes="nodes"
+    v-model:edges="edges"
+    :default-zoom="defaultZoom"
+    :min-zoom="minZoom"
+    :max-zoom="maxZoom"
+    :snap-to-grid="true"
+    :snap-grid="[GRID_SIZE, GRID_SIZE]"
+    :default-edge-options="defaultEdgeOptions"
+    :is-valid-connection="isValidConnection"
+    :edges-updatable="true"
+  >
+    <Background
+      v-if="showBackground"
+      pattern-color="var(--ui-bg-elevated)"
+      :gap="GRID_SIZE"
+      variant="lines"
+    />
+
+    <template #node-custom="nodeProps">
+      <FlowNode v-bind="nodeProps">
+        <template v-if="$slots.node" #default="{ data }">
+          <slot name="node" :data="data" />
+        </template>
+      </FlowNode>
+    </template>
+
+    <template #edge-custom="edgeProps">
+      <FlowEdge v-bind="edgeProps" />
+    </template>
+
+    <Panel v-if="showToolbar" position="bottom-center">
+      <FlowToolbar
+        :on-add-node="createNode"
+        :loading="loading"
+        :edge-stroke-width="edgeStrokeWidth"
+        :edge-stroke-type="edgeStrokeType"
+        :edge-path-type="edgePathType"
+        :edge-marker-start="edgeMarkerStart"
+        :edge-marker-end="edgeMarkerEnd"
+        :edge-animated="edgeAnimated"
+        :edge-color="edgeColor"
+        :edge-label-color="edgeLabelColor"
+        :node-border-width="nodeBorderWidth"
+        :node-border-radius="nodeBorderRadius"
+        :node-border-color="nodeBorderColor"
+        :node-bg-color="nodeBgColor"
+        :node-font-color="nodeFontColor"
+        :node-font-size="nodeFontSize"
+        :node-handle-size="nodeHandleSize"
+        :node-handle-color="nodeHandleColor"
+        :on-edge-stroke-width-change="(v) => edgeStrokeWidth = v"
+        :on-edge-stroke-type-change="(v) => edgeStrokeType = v"
+        :on-edge-path-type-change="(v) => edgePathType = v"
+        :on-edge-marker-start-change="(v) => edgeMarkerStart = v"
+        :on-edge-marker-end-change="(v) => edgeMarkerEnd = v"
+        :on-toggle-edge-animated="() => edgeAnimated = !edgeAnimated"
+        :on-edge-color-change="(v) => edgeColor = v"
+        :on-edge-label-color-change="(v) => edgeLabelColor = v"
+        :on-node-border-width-change="(v) => nodeBorderWidth = v"
+        :on-node-border-radius-change="(v) => nodeBorderRadius = v"
+        :on-node-border-color-change="(v) => nodeBorderColor = v"
+        :on-node-bg-color-change="(v) => nodeBgColor = v"
+        :on-node-font-color-change="(v) => nodeFontColor = v"
+        :on-node-font-size-change="(v) => nodeFontSize = v"
+        :on-node-handle-size-change="(v) => nodeHandleSize = v"
+        :on-node-handle-color-change="(v) => nodeHandleColor = v"
+        :color-mode="colorMode"
+        :unified-color="unifiedColor"
+        :is-unified-mode="isUnifiedMode"
+        :on-color-mode-change="(v) => colorMode = v"
+        :on-unified-color-change="(v) => unifiedColor = v"
+      />
+    </Panel>
+
+    <Panel v-if="showStats" position="top-right">
+      <div class="flex items-center gap-2">
+        <Transition name="fade">
+          <UIcon
+            v-if="loading"
+            name="i-lucide-loader-2"
+            class="text-primary animate-spin"
+            size="18"
+          />
+        </Transition>
+        <FlowStats :node-count="nodes.length" :edge-count="edges.length" />
+      </div>
+    </Panel>
+
+    <!-- 透传额外的 Panel 插槽 -->
+    <slot />
+  </VueFlow>
+</template>
+
+<style>
+@import "@vue-flow/core/dist/style.css";@import "@vue-flow/core/dist/theme-default.css";.fade-enter-active,.fade-leave-active{transition:opacity .2s ease}.fade-enter-from,.fade-leave-to{opacity:0}
+</style>

package/dist/runtime/components/flow/FlowEditor.client.vue.d.ts

@@ -0,0 +1,51 @@
+import type { Flow, FlowNode as FlowNodeType, FlowApi } from '#v/types';
+type __VLS_Props = {
+    /** Flow 数据模型 (v-model) */
+    modelValue?: Flow;
+    /** CRUD API 回调，节点/边增删改时调用 */
+    api?: FlowApi;
+    /** 是否显示背景网格 */
+    showBackground?: boolean;
+    /** 是否显示工具栏 */
+    showToolbar?: boolean;
+    /** 是否显示统计面板 */
+    showStats?: boolean;
+    /** 最小缩放 */
+    minZoom?: number;
+    /** 最大缩放 */
+    maxZoom?: number;
+    /** 默认缩放 */
+    defaultZoom?: number;
+};
+declare var __VLS_21: {
+    data: any;
+}, __VLS_62: {};
+type __VLS_Slots = {} & {
+    node?: (props: typeof __VLS_21) => any;
+} & {
+    default?: (props: typeof __VLS_62) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Flow) => any;
+    "edit-node": (node: FlowNodeType) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Flow) => any) | undefined;
+    "onEdit-node"?: ((node: FlowNodeType) => any) | undefined;
+}>, {
+    modelValue: Flow;
+    api: FlowApi;
+    showBackground: boolean;
+    showToolbar: boolean;
+    showStats: boolean;
+    minZoom: number;
+    maxZoom: number;
+    defaultZoom: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/flow/FlowNode.client.d.vue.ts

@@ -1,8 +1,19 @@
 type __VLS_Props = {
     data: any;
-    hoveredNodeId: string | null;
     selected?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare var __VLS_8: {
+    data: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/flow/FlowNode.client.vue

@@ -1,79 +1,75 @@
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import { computed } from "vue";
 import { Handle } from "@vue-flow/core";
-import { FLOW_HANDLES } from "#v/constants";
+import { FLOW_RESIZE_HANDLES, GRID_SIZE } from "#v/constants";
+import { useFlowNode } from "#v/composables";
 const props = defineProps({
   data: { type: null, required: true },
-  hoveredNodeId: { type: [String, null], required: true },
   selected: { type: Boolean, required: false }
 });
-const nodeRef = ref(null);
-const mousePosition = ref({ x: 0, y: 0 });
-const PROXIMITY_THRESHOLD = 50;
-const borderColor = computed(
-  () => props.selected ? "var(--ui-primary)" : "var(--ui-border-default)"
-);
-const isNearby = computed(() => {
-  if (!nodeRef.value) return false;
-  const rect = nodeRef.value.getBoundingClientRect();
-  const mouseX = mousePosition.value.x;
-  const mouseY = mousePosition.value.y;
-  const dx = Math.max(rect.left - mouseX, 0, mouseX - rect.right);
-  const dy = Math.max(rect.top - mouseY, 0, mouseY - rect.bottom);
-  const distance = Math.sqrt(dx * dx + dy * dy);
-  return distance <= PROXIMITY_THRESHOLD;
+const {
+  nodeRef,
+  isHoveredLocal,
+  borderColor,
+  activeHandles,
+  handleStyle
+} = useFlowNode({
+  data: computed(() => props.data),
+  selected: computed(() => props.selected ?? false)
 });
-const isHovered = computed(() => props.hoveredNodeId === String(props.data.id));
-const showHandles = computed(() => isHovered.value || isNearby.value);
-const handleGlobalMouseMove = (e) => {
-  mousePosition.value = { x: e.clientX, y: e.clientY };
+const setNodeRef = (el) => {
+  nodeRef.value = el instanceof HTMLElement ? el : null;
 };
-onMounted(() => {
-  window.addEventListener("mousemove", handleGlobalMouseMove);
-});
-onBeforeUnmount(() => {
-  window.removeEventListener("mousemove", handleGlobalMouseMove);
-});
 </script>
 
 <template>
   <div
-    ref="nodeRef"
-    class="bg-background border rounded-md px-3 py-2 relative flex"
+    :ref="setNodeRef"
+    class="bg-background border relative flex"
     :style="{
-  width: data.width ? `${data.width}px` : '128px',
+  boxSizing: 'border-box',
+  width: data.width ? `${data.width}px` : GRID_SIZE * 6 + 'px',
   height: data.height ? `${data.height}px` : 'auto',
-  minWidth: '128px',
+  minWidth: GRID_SIZE * 2 + 'px',
+  minHeight: GRID_SIZE * 2 + 'px',
   borderWidth: data.borderWidth ? `${data.borderWidth}px` : '2px',
   borderStyle: 'solid',
-  borderColor
+  borderColor,
+  borderRadius: data.borderRadius !== void 0 ? `${data.borderRadius}px` : '6px',
+  ...data.bgColor ? { backgroundColor: data.bgColor } : {},
+  ...data.fontColor ? { color: data.fontColor } : {},
+  fontSize: data.fontSize ? `${data.fontSize}px` : '14px'
 }"
-    @mouseenter="data.onMouseEnter?.()"
-    @mouseleave="data.onMouseLeave?.()"
-    @mousemove="(e) => data.onMouseMove?.(e, e.currentTarget)"
+    @mouseenter="isHoveredLocal = true"
+    @mouseleave="isHoveredLocal = false"
     @dblclick="data.onEdit?.()"
   >
-    <!-- 连接点 - 可以作为 source 或 target -->
+    <!-- Connection handles (z-index 高于 resize handles，优先响应连线拖拽) -->
     <Handle
-      v-for="handle in FLOW_HANDLES"
+      v-for="handle in activeHandles"
       :id="`${handle.id}`"
       :key="`${handle.id}`"
       type="source"
       :position="handle.position"
-      :style="{
-  left: handle.offsetPercent?.x !== void 0 ? `${handle.offsetPercent.x}%` : void 0,
-  top: handle.offsetPercent?.y !== void 0 ? `${handle.offsetPercent.y}%` : void 0,
-  pointerEvents: 'all',
-  opacity: showHandles ? 1 : 0,
-  transition: 'opacity 0.2s',
-  width: '6px',
-  height: '6px'
-}"
+      :style="handleStyle(handle)"
       @mousedown.stop
     />
 
+    <!-- content -->
     <div class="flex items-center justify-center gap-2 w-full">
-      <span class="text-sm font-medium">{{ data.name }}</span>
+      <slot :data="data">
+        <span class="font-medium">{{ data.name }}</span>
+      </slot>
     </div>
+
+    <!-- Resize handles (z-index 低于 connection handles，连线优先) -->
+    <div
+      v-for="rh in FLOW_RESIZE_HANDLES"
+      :key="rh.edge"
+      class="absolute nodrag"
+      :class="rh.class"
+      :style="{ zIndex: rh.zIndex, cursor: rh.cursor }"
+      @mousedown.stop.prevent="data.onResizeStart?.($event, rh.edge)"
+    />
   </div>
 </template>

package/dist/runtime/components/flow/FlowNode.client.vue.d.ts

@@ -1,8 +1,19 @@
 type __VLS_Props = {
     data: any;
-    hoveredNodeId: string | null;
     selected?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare var __VLS_8: {
+    data: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/flow/FlowToolbar.d.vue.ts

@@ -1,13 +1,49 @@
+import type { FlowEdgeStrokeType, FlowEdgePathType, FlowArrowType } from '#v/constants';
+import type { FlowColorMode } from '#v/composables/flow/useFlowStyles';
 type __VLS_Props = {
     onAddNode?: () => void;
+    /** 是否有 API 操作正在进行，用于禁用交互 */
+    loading?: boolean;
     edgeStrokeWidth?: number;
-    edgeMarkerStart?: boolean;
-    edgeMarkerEnd?: boolean;
+    edgeStrokeType?: FlowEdgeStrokeType;
+    edgePathType?: FlowEdgePathType;
+    edgeMarkerStart?: FlowArrowType;
+    edgeMarkerEnd?: FlowArrowType;
+    edgeAnimated?: boolean;
+    edgeColor?: string;
+    edgeLabelColor?: string;
     nodeBorderWidth?: number;
-    onEdgeStrokeWidthChange?: (width: number) => void;
-    onToggleEdgeMarkerStart?: () => void;
-    onToggleEdgeMarkerEnd?: () => void;
+    nodeBorderRadius?: number;
+    nodeBorderColor?: string;
+    nodeBgColor?: string;
+    nodeFontColor?: string;
+    nodeFontSize?: number;
+    nodeHandleSize?: number;
+    nodeHandleColor?: string;
+    /** 颜色模式 */
+    colorMode?: FlowColorMode;
+    /** 统一颜色名称 */
+    unifiedColor?: string;
+    /** 是否统一模式 */
+    isUnifiedMode?: boolean;
+    onEdgeStrokeWidthChange: (width: number) => void;
+    onEdgeStrokeTypeChange?: (type: FlowEdgeStrokeType) => void;
+    onEdgePathTypeChange?: (type: FlowEdgePathType) => void;
+    onEdgeMarkerStartChange?: (type: FlowArrowType) => void;
+    onEdgeMarkerEndChange?: (type: FlowArrowType) => void;
+    onToggleEdgeAnimated?: () => void;
+    onEdgeColorChange?: (color: string) => void;
+    onEdgeLabelColorChange?: (color: string) => void;
     onNodeBorderWidthChange?: (width: number) => void;
+    onNodeBorderRadiusChange?: (radius: number) => void;
+    onNodeBorderColorChange?: (color: string) => void;
+    onNodeBgColorChange?: (color: string) => void;
+    onNodeFontColorChange?: (color: string) => void;
+    onNodeFontSizeChange?: (size: number) => void;
+    onNodeHandleSizeChange?: (size: number) => void;
+    onNodeHandleColorChange?: (color: string) => void;
+    onColorModeChange?: (mode: FlowColorMode) => void;
+    onUnifiedColorChange?: (name: string) => void;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;