v-nuxt-ui 0.1.35 → 0.2.0

package/dist/runtime/composables/flow/useFlow.js

@@ -0,0 +1,401 @@
+import { shallowRef, ref, watch } from "vue";
+import { GRID_SIZE } from "#v/constants";
+export function useFlow(options) {
+  const { flow, onUpdateModel, api } = options;
+  const nodes = shallowRef([]);
+  const edges = shallowRef([]);
+  const _pendingCount = ref(0);
+  const loading = ref(false);
+  const pendingEdgeDeletes = /* @__PURE__ */ new Map();
+  const withLoading = async (fn) => {
+    _pendingCount.value++;
+    loading.value = true;
+    try {
+      return await fn();
+    } finally {
+      _pendingCount.value--;
+      if (_pendingCount.value <= 0) {
+        _pendingCount.value = 0;
+        loading.value = false;
+      }
+    }
+  };
+  const getErrorMessage = (error) => {
+    return error instanceof Error ? error.message : String(error);
+  };
+  const deleteEdgeById = async (edgeId) => {
+    if (!edges.value.some((e) => e.id === edgeId)) return;
+    const existingDelete = pendingEdgeDeletes.get(edgeId);
+    if (existingDelete) {
+      await existingDelete;
+      return;
+    }
+    const deletePromise = (async () => {
+      if (api?.value?.deleteEdge) {
+        if (!Number.isNaN(Number(edgeId))) {
+          try {
+            await api.value.deleteEdge(Number(edgeId));
+          } catch (error) {
+            throw new Error(`\u5220\u9664\u8FDE\u7EBF ${edgeId} \u5931\u8D25: ${getErrorMessage(error)}`);
+          }
+        }
+      }
+      edges.value = edges.value.filter((e) => e.id !== edgeId);
+    })();
+    pendingEdgeDeletes.set(edgeId, deletePromise);
+    try {
+      await deletePromise;
+    } finally {
+      pendingEdgeDeletes.delete(edgeId);
+    }
+  };
+  const toVueFlowNode = (node) => ({
+    id: String(node.id),
+    type: "custom",
+    position: { x: node.positionX ?? 0, y: node.positionY ?? 0 },
+    data: {
+      ...node,
+      id: node.id,
+      name: node.name,
+      width: node.width,
+      height: node.height
+    }
+  });
+  const toVueFlowEdge = (edge) => ({
+    id: String(edge.id),
+    type: "custom",
+    source: String(edge.parentId),
+    target: String(edge.childId),
+    sourceHandle: edge.parentHandlePos ?? void 0,
+    targetHandle: edge.childHandlePos ?? void 0,
+    label: edge.label
+  });
+  watch(
+    () => flow.value,
+    (newFlow) => {
+      if (!newFlow) return;
+      nodes.value = (newFlow.nodes ?? []).map(toVueFlowNode);
+      edges.value = (newFlow.edges ?? []).map(toVueFlowEdge);
+    },
+    { immediate: true }
+  );
+  const emitUpdate = () => {
+    if (!onUpdateModel?.value) return;
+    const updatedFlow = {
+      id: flow.value?.id ?? 0,
+      ...flow.value,
+      nodes: nodes.value.map((n) => ({
+        id: n.data.id ?? Number(n.id),
+        name: n.data.name ?? "",
+        positionX: n.position.x,
+        positionY: n.position.y,
+        width: n.data.width,
+        height: n.data.height
+      })),
+      edges: edges.value.map((e) => ({
+        id: Number(e.id) || void 0,
+        parentId: Number(e.source),
+        childId: Number(e.target),
+        parentHandlePos: e.sourceHandle ?? void 0,
+        childHandlePos: e.targetHandle ?? void 0,
+        label: typeof e.label === "string" ? e.label : void 0
+      }))
+    };
+    onUpdateModel.value(updatedFlow);
+  };
+  const deleteNode = async (nodeId) => {
+    const doDelete = async () => {
+      const relatedEdgeIds = [...new Set(edges.value.filter((e) => e.source === nodeId || e.target === nodeId).map((e) => e.id))];
+      try {
+        await Promise.all(relatedEdgeIds.map((edgeId) => deleteEdgeById(edgeId)));
+      } catch (error) {
+        emitUpdate();
+        throw new Error(`\u5220\u9664\u8282\u70B9 ${nodeId} \u7684\u5173\u8054\u8FDE\u7EBF\u5931\u8D25: ${getErrorMessage(error)}`);
+      }
+      if (api?.value?.deleteNode) {
+        try {
+          await api.value.deleteNode(Number(nodeId));
+        } catch (error) {
+          emitUpdate();
+          throw new Error(`\u5220\u9664\u8282\u70B9 ${nodeId} \u5931\u8D25: ${getErrorMessage(error)}`);
+        }
+      }
+      nodes.value = nodes.value.filter((n) => n.id !== nodeId);
+      emitUpdate();
+    };
+    if (api?.value) await withLoading(doDelete);
+    else await doDelete();
+  };
+  const deleteEdge = async (edgeId) => {
+    const doDelete = async () => {
+      await deleteEdgeById(edgeId);
+      emitUpdate();
+    };
+    if (api?.value) await withLoading(doDelete);
+    else await doDelete();
+  };
+  const createEdge = async (params) => {
+    const doCreate = async () => {
+      let edgeId = `e-${params.source}-${params.sourceHandle}-${params.target}-${params.targetHandle}-${Date.now()}`;
+      let label;
+      if (api?.value?.createEdge) {
+        const { data } = await api.value.createEdge({
+          id: 0,
+          flowId: flow.value?.id,
+          parentId: Number(params.source),
+          childId: Number(params.target),
+          parentHandlePos: params.sourceHandle ?? void 0,
+          childHandlePos: params.targetHandle ?? void 0
+        });
+        if (data.value.data) {
+          edgeId = String(data.value.data.id);
+          label = data.value.data.label;
+        }
+      }
+      const newEdge = {
+        id: edgeId,
+        type: "custom",
+        source: params.source,
+        target: params.target,
+        sourceHandle: params.sourceHandle ?? void 0,
+        targetHandle: params.targetHandle ?? void 0,
+        label
+      };
+      edges.value = [...edges.value, newEdge];
+      emitUpdate();
+    };
+    if (api?.value) await withLoading(doCreate);
+    else await doCreate();
+  };
+  const reconnectEdge = async (oldEdgeId, connection) => {
+    if (!api?.value) {
+      edges.value = edges.value.filter((e) => e.id !== oldEdgeId);
+      const newEdge = {
+        id: `e-${connection.source}-${connection.sourceHandle}-${connection.target}-${connection.targetHandle}-${Date.now()}`,
+        type: "custom",
+        source: connection.source,
+        target: connection.target,
+        sourceHandle: connection.sourceHandle ?? void 0,
+        targetHandle: connection.targetHandle ?? void 0
+      };
+      edges.value = [...edges.value, newEdge];
+      emitUpdate();
+      return;
+    }
+    const oldEdge = edges.value.find((e) => e.id === oldEdgeId);
+    const oldEdgeBackup = oldEdge ? { ...oldEdge } : void 0;
+    const tempId = `e-pending-${Date.now()}`;
+    const pendingEdge = {
+      id: tempId,
+      type: "custom",
+      source: connection.source,
+      target: connection.target,
+      sourceHandle: connection.sourceHandle ?? void 0,
+      targetHandle: connection.targetHandle ?? void 0,
+      label: oldEdge?.label,
+      style: { ...oldEdge?.style ?? {}, opacity: 0.5 }
+    };
+    edges.value = [...edges.value.filter((e) => e.id !== oldEdgeId), pendingEdge];
+    emitUpdate();
+    await withLoading(async () => {
+      try {
+        if (api.value?.deleteEdge) {
+          if (!Number.isNaN(Number(oldEdgeId))) {
+            await api.value.deleteEdge(Number(oldEdgeId));
+          }
+        }
+        let finalId = tempId;
+        let label = typeof pendingEdge.label === "string" ? pendingEdge.label : void 0;
+        if (api.value?.createEdge) {
+          const { data } = await api.value.createEdge({
+            id: 0,
+            flowId: flow.value?.id,
+            parentId: Number(connection.source),
+            childId: Number(connection.target),
+            parentHandlePos: connection.sourceHandle ?? void 0,
+            childHandlePos: connection.targetHandle ?? void 0
+          });
+          if (data.value.data) {
+            finalId = String(data.value.data.id);
+            label = data.value.data.label;
+          }
+        }
+        const idx = edges.value.findIndex((e) => e.id === tempId);
+        if (idx !== -1) {
+          const { opacity: _, ...restStyle } = edges.value[idx].style ?? {};
+          edges.value[idx] = {
+            ...edges.value[idx],
+            id: finalId,
+            label,
+            style: Object.keys(restStyle).length > 0 ? restStyle : void 0
+          };
+          edges.value = [...edges.value];
+          emitUpdate();
+        }
+      } catch {
+        edges.value = edges.value.filter((e) => e.id !== tempId);
+        if (oldEdgeBackup) {
+          edges.value = [...edges.value, oldEdgeBackup];
+        }
+        emitUpdate();
+      }
+    });
+  };
+  const updateNodePosition = async (nodeId, x, y) => {
+    const doUpdate = async () => {
+      const node = nodes.value.find((n) => n.id === nodeId);
+      if (node) {
+        if (api?.value?.updateNode) {
+          await api.value.updateNode({
+            ...node.data,
+            id: node.data.id ?? Number(nodeId),
+            positionX: x,
+            positionY: y
+          });
+        }
+        node.position = { x, y };
+        emitUpdate();
+      }
+    };
+    if (api?.value) await withLoading(doUpdate);
+    else await doUpdate();
+  };
+  const updateNodeDimensions = async (nodeId, dimensions) => {
+    const doUpdate = async () => {
+      const node = nodes.value.find((n) => n.id === nodeId);
+      if (node) {
+        if (api?.value?.updateNode) {
+          await api.value.updateNode({
+            ...node.data,
+            id: node.data.id ?? Number(nodeId),
+            width: dimensions.width,
+            height: dimensions.height
+          });
+        }
+        node.data = {
+          ...node.data,
+          width: dimensions.width,
+          height: dimensions.height
+        };
+        emitUpdate();
+      }
+    };
+    if (api?.value) await withLoading(doUpdate);
+    else await doUpdate();
+  };
+  const updateEdgeLabel = async (edgeId, label) => {
+    const doUpdate = async () => {
+      const edge = edges.value.find((e) => e.id === edgeId);
+      if (edge) {
+        if (api?.value?.updateEdge) {
+          if (!Number.isNaN(Number(edgeId))) {
+            await api.value.updateEdge({
+              id: Number(edgeId),
+              parentId: Number(edge.source),
+              childId: Number(edge.target),
+              parentHandlePos: edge.sourceHandle ?? void 0,
+              childHandlePos: edge.targetHandle ?? void 0,
+              label: label || void 0
+            });
+          }
+        }
+        edge.label = label || void 0;
+        emitUpdate();
+      }
+    };
+    if (api?.value) await withLoading(doUpdate);
+    else await doUpdate();
+  };
+  const updateNode = async (updatedNode) => {
+    const doUpdate = async () => {
+      const index = nodes.value.findIndex((n) => n.id === String(updatedNode.id));
+      if (index !== -1) {
+        if (api?.value?.updateNode) {
+          await api.value.updateNode(updatedNode);
+        }
+        nodes.value[index].data = {
+          ...nodes.value[index].data,
+          ...updatedNode,
+          id: updatedNode.id,
+          name: updatedNode.name
+        };
+        emitUpdate();
+      }
+    };
+    if (api?.value) await withLoading(doUpdate);
+    else await doUpdate();
+  };
+  const createNode = async () => {
+    const doCreate = async () => {
+      const positionX = Math.round((200 + Math.random() * 200) / GRID_SIZE) * GRID_SIZE;
+      const positionY = Math.round((200 + Math.random() * 200) / GRID_SIZE) * GRID_SIZE;
+      const defaultName = `\u8282\u70B9 ${nodes.value.length + 1}`;
+      let nodeId = Date.now();
+      let nodeName = defaultName;
+      let nodeWidth = 120;
+      let nodeHeight = 40;
+      if (api?.value?.createNode) {
+        const { data } = await api.value.createNode({
+          id: 0,
+          flowId: flow.value?.id,
+          name: defaultName,
+          positionX,
+          positionY,
+          width: 120,
+          height: 40
+        });
+        if (data.value.data) {
+          nodeId = data.value.data.id;
+          nodeName = data.value.data.name ?? defaultName;
+          nodeWidth = data.value.data.width ?? 120;
+          nodeHeight = data.value.data.height ?? 40;
+        }
+      }
+      const newNode = {
+        id: String(nodeId),
+        type: "custom",
+        position: { x: positionX, y: positionY },
+        data: {
+          id: nodeId,
+          name: nodeName,
+          width: nodeWidth,
+          height: nodeHeight
+        }
+      };
+      nodes.value = [...nodes.value, newNode];
+      emitUpdate();
+    };
+    if (api?.value) await withLoading(doCreate);
+    else await doCreate();
+  };
+  const syncNodes = (createHandlers) => {
+    nodes.value.forEach((node) => {
+      const handlers = createHandlers(node.id);
+      Object.assign(node.data, handlers);
+    });
+  };
+  const syncEdges = (createHandlers) => {
+    edges.value.forEach((edge) => {
+      const handlers = createHandlers(edge.id);
+      if (!edge.data) edge.data = {};
+      Object.assign(edge.data, handlers);
+    });
+  };
+  return {
+    nodes,
+    edges,
+    GRID_SIZE,
+    loading,
+    deleteNode,
+    deleteEdge,
+    createEdge,
+    reconnectEdge,
+    updateNodePosition,
+    updateNodeDimensions,
+    updateNode,
+    createNode,
+    syncNodes,
+    updateEdgeLabel,
+    syncEdges
+  };
+}

package/dist/runtime/composables/flow/useFlowNode.d.ts

@@ -0,0 +1,17 @@
+import type { Ref } from 'vue';
+import type { FlowHandle } from '#v/constants';
+interface UseFlowNodeOptions {
+    /** 节点 data (reactive) */
+    data: Ref<any>;
+    /** 是否选中 (reactive) */
+    selected: Ref<boolean>;
+}
+export declare function useFlowNode(options: UseFlowNodeOptions): {
+    nodeRef: Ref<HTMLElement | null, HTMLElement | null>;
+    isHoveredLocal: Ref<boolean, boolean>;
+    borderColor: import("vue").ComputedRef<any>;
+    showHandles: import("vue").ComputedRef<boolean>;
+    activeHandles: import("vue").ComputedRef<FlowHandle[]>;
+    handleStyle: (handle: FlowHandle) => Record<string, string | number | undefined>;
+};
+export {};

package/dist/runtime/composables/flow/useFlowNode.js

@@ -0,0 +1,106 @@
+import { ref, computed, inject, onMounted, onBeforeUnmount } from "vue";
+import {
+  FLOW_HANDLES,
+  FLOW_HANDLE_TIER_THRESHOLDS,
+  FLOW_MOUSE_POSITION_KEY,
+  FLOW_NODE_PROXIMITY_THRESHOLD
+} from "#v/constants";
+import { handleSizePreview } from "./useFlowStyles.js";
+export function useFlowNode(options) {
+  const { data, selected } = options;
+  const nodeRef = ref(null);
+  const isHoveredLocal = ref(false);
+  const injectedMousePosition = inject(FLOW_MOUSE_POSITION_KEY, null);
+  const localMousePosition = ref({ x: 0, y: 0 });
+  const mousePosition = computed(() => injectedMousePosition?.value ?? localMousePosition.value);
+  const borderColor = computed(() => {
+    if (selected.value) return "var(--ui-primary)";
+    if (data.value.borderColor) return data.value.borderColor;
+    return "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 <= FLOW_NODE_PROXIMITY_THRESHOLD;
+  });
+  const showHandles = computed(() => isHoveredLocal.value || isNearby.value || handleSizePreview.value);
+  const activeHandles = computed(() => {
+    const w = data.value.width ?? 120;
+    const h = data.value.height ?? 40;
+    const t = FLOW_HANDLE_TIER_THRESHOLDS;
+    const hTier = w < t.small.maxWidth ? 0 : w < t.medium.maxWidth ? 1 : 2;
+    const vTier = h < t.small.maxHeight ? 0 : h < t.medium.maxHeight ? 1 : 2;
+    return FLOW_HANDLES.filter((handle) => {
+      const id = handle.id;
+      if (id === "t2" || id === "b2") return true;
+      if (id === "r2" || id === "l2") return true;
+      if (id === "tl" || id === "tr" || id === "bl" || id === "br") return true;
+      if (id === "t1" || id === "t3" || id === "b1" || id === "b3") return hTier >= 2;
+      if (id === "r1" || id === "r3" || id === "l1" || id === "l3") return vTier >= 2;
+      return false;
+    });
+  });
+  const handleStyle = (handle) => {
+    const bw = data.value.borderWidth ?? 2;
+    const handleSize = data.value.handleSize ?? 6;
+    const handleColor = data.value.handleColor ?? "";
+    const offset = -(bw / 2);
+    const base = {
+      pointerEvents: "all",
+      opacity: showHandles.value ? 1 : 0,
+      transition: "opacity 0.2s",
+      width: `${handleSize}px`,
+      height: `${handleSize}px`,
+      zIndex: 20,
+      borderRadius: "50%",
+      ...handleColor ? { backgroundColor: handleColor } : {}
+    };
+    const pos = handle.position;
+    if (pos === "top") {
+      base.top = `${offset}px`;
+    } else if (pos === "bottom") {
+      base.bottom = `${offset}px`;
+    } else if (pos === "left") {
+      base.left = `${offset}px`;
+    } else if (pos === "right") {
+      base.right = `${offset}px`;
+    }
+    if (handle.offsetPercent?.x !== void 0) {
+      const pct = handle.offsetPercent.x;
+      const shift = (pct / 50 - 1) * (bw / 2);
+      base.left = `calc(${pct}% + ${shift}px)`;
+    }
+    if (handle.offsetPercent?.y !== void 0) {
+      const pct = handle.offsetPercent.y;
+      const shift = (pct / 50 - 1) * (bw / 2);
+      base.top = `calc(${pct}% + ${shift}px)`;
+    }
+    return base;
+  };
+  const handleGlobalMouseMove = (e) => {
+    localMousePosition.value = { x: e.clientX, y: e.clientY };
+  };
+  onMounted(() => {
+    if (!injectedMousePosition) {
+      window.addEventListener("mousemove", handleGlobalMouseMove);
+    }
+  });
+  onBeforeUnmount(() => {
+    if (!injectedMousePosition) {
+      window.removeEventListener("mousemove", handleGlobalMouseMove);
+    }
+  });
+  return {
+    nodeRef,
+    isHoveredLocal,
+    borderColor,
+    showHandles,
+    activeHandles,
+    handleStyle
+  };
+}

package/dist/runtime/composables/flow/useFlowResize.d.ts

@@ -0,0 +1,21 @@
+import type { ShallowRef } from 'vue';
+import type { Node } from '@vue-flow/core';
+import type { FlowNode, UseFlowResizeDimensions } from '#v/types';
+import type { ResizeEdge } from '#v/constants';
+interface UseFlowResizeOptions {
+    gridSize: number;
+    nodes: ShallowRef<Node[]>;
+    getViewport: () => {
+        x: number;
+        y: number;
+        zoom: number;
+    };
+    onResizeEnd: (nodeId: string, dimensions: UseFlowResizeDimensions) => void;
+}
+export declare function useFlowResize(options: UseFlowResizeOptions): {
+    isResizing: import("vue").Ref<boolean, boolean>;
+    startResize: (event: MouseEvent, nodeId: string, node: FlowNode, edge: ResizeEdge) => void;
+    handleMouseMove: (event: MouseEvent) => void;
+    handleMouseUp: () => void;
+};
+export {};

package/dist/runtime/composables/flow/useFlowResize.js

@@ -0,0 +1,84 @@
+import { ref } from "vue";
+export function useFlowResize(options) {
+  const { gridSize, nodes, getViewport, onResizeEnd } = options;
+  const isResizing = ref(false);
+  const resizingNodeId = ref(null);
+  const resizeEdge = ref(null);
+  const resizeStartX = ref(0);
+  const resizeStartY = ref(0);
+  const resizeStartWidth = ref(0);
+  const resizeStartHeight = ref(0);
+  const resizeStartNodeX = ref(0);
+  const resizeStartNodeY = ref(0);
+  const startResize = (event, nodeId, node, edge) => {
+    event.preventDefault();
+    event.stopPropagation();
+    isResizing.value = true;
+    resizingNodeId.value = nodeId;
+    resizeEdge.value = edge;
+    resizeStartX.value = event.clientX;
+    resizeStartY.value = event.clientY;
+    resizeStartWidth.value = node.width ?? 120;
+    resizeStartHeight.value = node.height ?? 40;
+    resizeStartNodeX.value = node.positionX ?? 0;
+    resizeStartNodeY.value = node.positionY ?? 0;
+    document.body.style.userSelect = "none";
+  };
+  const handleMouseMove = (event) => {
+    if (!isResizing.value || !resizingNodeId.value || !resizeEdge.value) return;
+    const viewport = getViewport();
+    const zoom = viewport.zoom;
+    const dx = (event.clientX - resizeStartX.value) / zoom;
+    const dy = (event.clientY - resizeStartY.value) / zoom;
+    const node = nodes.value.find((n) => n.id === resizingNodeId.value);
+    if (!node) return;
+    let newWidth = resizeStartWidth.value;
+    let newHeight = resizeStartHeight.value;
+    let newX = resizeStartNodeX.value;
+    let newY = resizeStartNodeY.value;
+    const edge = resizeEdge.value;
+    if (edge.includes("right")) {
+      newWidth = Math.max(60, resizeStartWidth.value + dx);
+    }
+    if (edge.includes("left")) {
+      const deltaWidth = Math.min(dx, resizeStartWidth.value - 60);
+      newWidth = resizeStartWidth.value - deltaWidth;
+      newX = resizeStartNodeX.value + deltaWidth;
+    }
+    if (edge.includes("bottom")) {
+      newHeight = Math.max(40, resizeStartHeight.value + dy);
+    }
+    if (edge === "top" || edge === "top-left" || edge === "top-right") {
+      const deltaHeight = Math.min(dy, resizeStartHeight.value - 40);
+      newHeight = resizeStartHeight.value - deltaHeight;
+      newY = resizeStartNodeY.value + deltaHeight;
+    }
+    newWidth = Math.round(newWidth / gridSize) * gridSize;
+    newHeight = Math.round(newHeight / gridSize) * gridSize;
+    newX = Math.round(newX / gridSize) * gridSize;
+    newY = Math.round(newY / gridSize) * gridSize;
+    node.data = { ...node.data, width: newWidth, height: newHeight };
+    node.position = { x: newX, y: newY };
+  };
+  const handleMouseUp = () => {
+    if (isResizing.value && resizingNodeId.value) {
+      const node = nodes.value.find((n) => n.id === resizingNodeId.value);
+      if (node) {
+        onResizeEnd(resizingNodeId.value, {
+          width: node.data.width ?? 120,
+          height: node.data.height ?? 40
+        });
+      }
+    }
+    isResizing.value = false;
+    resizingNodeId.value = null;
+    resizeEdge.value = null;
+    document.body.style.userSelect = "";
+  };
+  return {
+    isResizing,
+    startResize,
+    handleMouseMove,
+    handleMouseUp
+  };
+}