v-nuxt-ui 0.1.36 → 0.2.1

package/dist/module.json

@@ -7,7 +7,7 @@
   "dependencies": [
     "@nuxt/ui"
   ],
-  "version": "0.1.36",
+  "version": "0.2.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -41,6 +41,7 @@ const module$1 = defineNuxtModule({
       "dayjs/plugin/timezone",
       "defu",
       "@vue-flow/core",
+      "@vue-flow/background",
       "maska/vue",
       "sql-formatter"
     );

package/dist/runtime/components/Watermark.d.vue.ts

@@ -22,13 +22,13 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     disabled: boolean;
     text: string | string[];
+    opacity: number;
+    rotate: number;
+    fontColor: string;
     fontSize: number;
     fontWeight: string | number;
-    fontColor: string;
     lineHeight: number;
-    rotate: number;
     gap: number;
-    opacity: number;
     debug: boolean;
     textAlign: "left" | "center" | "right";
     xOffset: number;

package/dist/runtime/components/Watermark.vue.d.ts

@@ -22,13 +22,13 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     disabled: boolean;
     text: string | string[];
+    opacity: number;
+    rotate: number;
+    fontColor: string;
     fontSize: number;
     fontWeight: string | number;
-    fontColor: string;
     lineHeight: number;
-    rotate: number;
     gap: number;
-    opacity: number;
     debug: boolean;
     textAlign: "left" | "center" | "right";
     xOffset: number;

package/dist/runtime/components/button/CircleColor.d.vue.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    /** Tailwind 颜色名 (e.g. 'red', 'blue')，空字符串表示默认 */
+    chip?: string;
+    /** 色阶 (默认 500) */
+    shade?: number;
+    /** 是否选中 */
+    selected?: boolean;
+    /** 标题提示 */
+    title?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/button/CircleColor.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { computed } from "vue";
+import { useColorMode } from "@vueuse/core";
+const props = defineProps({
+  chip: { type: String, required: false },
+  shade: { type: Number, required: false },
+  selected: { type: Boolean, required: false },
+  title: { type: String, required: false }
+});
+defineEmits(["click"]);
+const colorMode = useColorMode();
+const backgroundStyle = computed(() => {
+  if (!props.chip || props.chip === "primary") return void 0;
+  const shade = props.shade ?? (colorMode.value === "dark" ? 400 : 500);
+  return `background-color: var(--color-${props.chip}-${shade})`;
+});
+</script>
+
+<template>
+  <button
+    type="button"
+    class="w-3 h-3 rounded-full transition-transform transition-shadow flex items-center justify-center shrink-0"
+    :class="[
+  selected ? 'ring-2 ring-primary ring-offset-2 ring-offset-[var(--ui-bg)] scale-110' : 'hover:scale-110 hover:ring-1 hover:ring-muted'
+]"
+    :style="backgroundStyle"
+    :title="title"
+    @click="$emit('click')"
+  >
+    <template v-if="!chip || chip === 'primary'">
+      <span class="relative w-full h-full flex items-center justify-center">
+        <span class="absolute w-3 h-3 rounded-full border-2 border-muted" />
+        <span class="absolute w-[1px] h-3 bg-muted rotate-45" />
+      </span>
+    </template>
+  </button>
+</template>

package/dist/runtime/components/button/CircleColor.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    /** Tailwind 颜色名 (e.g. 'red', 'blue')，空字符串表示默认 */
+    chip?: string;
+    /** 色阶 (默认 500) */
+    shade?: number;
+    /** 是否选中 */
+    selected?: boolean;
+    /** 标题提示 */
+    title?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,7 +1,8 @@
 <script setup>
-import { computed } from "vue";
+import { ref, computed, nextTick } from "vue";
 import { useFlowStyles } from "#v/composables/flow/useFlowStyles";
-import { EdgeLabelRenderer, getSmoothStepPath, BaseEdge } from "@vue-flow/core";
+import { FLOW_EDGE_STROKE_TYPES } from "#v/constants";
+import { EdgeLabelRenderer, getSmoothStepPath, getBezierPath, getStraightPath, BaseEdge } from "@vue-flow/core";
 const props = defineProps({
   id: { type: String, required: true },
   sourceNode: { type: Object, required: true },
@@ -34,52 +35,151 @@ const props = defineProps({
   targetX: { type: Number, required: true },
   targetY: { type: Number, required: true }
 });
-const path = computed(() => getSmoothStepPath(props));
-const flowStyles = useFlowStyles();
-const { edgeMarkerStart, edgeMarkerEnd } = flowStyles;
-const customMarkerEnd = computed(() => edgeMarkerEnd.value ? `url(#custom-arrow-end-${props.id})` : void 0);
-const customMarkerStart = computed(() => edgeMarkerStart.value ? `url(#custom-arrow-start-${props.id})` : void 0);
-const strokeColor = computed(
-  () => props.selected ? "var(--ui-primary)" : "var(--ui-text-dimmed)"
-);
-const edgeStyle = computed(() => ({
-  ...props.style,
-  stroke: strokeColor.value
-}));
+const {
+  edgeMarkerStart,
+  edgeMarkerEnd,
+  edgePathType,
+  edgeAnimated,
+  edgeStrokeType,
+  effectiveEdgeColor,
+  effectiveEdgeLabelColor,
+  effectiveNodeBorderColor
+} = useFlowStyles();
+const path = computed(() => {
+  switch (edgePathType.value) {
+    case "bezier":
+      return getBezierPath(props);
+    case "step":
+      return getSmoothStepPath({ ...props, borderRadius: 0 });
+    case "straight":
+      return getStraightPath(props);
+    case "smoothstep":
+    default:
+      return getSmoothStepPath(props);
+  }
+});
+function markerUrl(type, direction) {
+  if (type === "none") return void 0;
+  return `url(#marker-${type}-${direction}-${props.id})`;
+}
+const customMarkerEnd = computed(() => markerUrl(edgeMarkerEnd.value, "end"));
+const customMarkerStart = computed(() => markerUrl(edgeMarkerStart.value, "start"));
+const strokeColor = computed(() => {
+  if (props.selected) return "var(--ui-primary)";
+  return effectiveEdgeColor.value || "var(--ui-text-dimmed)";
+});
+const MARKER_DEFS = {
+  "arrow": {
+    // end: tip at (10,5); refX=8 → line ends 2px inside triangle, stroke fully covered by fill
+    end: { viewBox: "-1 -1 12 12", refX: 8, refY: 5, shape: "path", d: "M 0 0 L 10 5 L 0 10 z", filled: true },
+    // start: tip at (0,5); refX=2 → line ends 2px inside triangle, stroke fully covered by fill
+    start: { viewBox: "-1 -1 12 12", refX: 2, refY: 5, shape: "path", d: "M 10 0 L 0 5 L 10 10 z", filled: true }
+  },
+  "diamond": {
+    // end: rightmost at x=12; refX=10 → line ends 2px inside diamond
+    end: { viewBox: "-2 -2 16 12", refX: 10, refY: 4, shape: "path", d: "M 0 4 L 6 0 L 12 4 L 6 8 z", filled: true },
+    // start: leftmost at x=0; refX=2 → line ends 2px inside diamond
+    start: { viewBox: "-2 -2 16 12", refX: 2, refY: 4, shape: "path", d: "M 0 4 L 6 0 L 12 4 L 6 8 z", filled: true }
+  },
+  "diamond-open": {
+    end: { viewBox: "-2 -2 16 12", refX: 10, refY: 4, shape: "path", d: "M 0 4 L 6 0 L 12 4 L 6 8 z", filled: false },
+    start: { viewBox: "-2 -2 16 12", refX: 2, refY: 4, shape: "path", d: "M 0 4 L 6 0 L 12 4 L 6 8 z", filled: false }
+  },
+  "circle": {
+    // end: right edge at x=8; refX=6 → line ends 2px inside circle
+    end: { viewBox: "-2 -2 12 12", refX: 6, refY: 4, shape: "circle", cx: 4, cy: 4, r: 4, filled: true },
+    // start: left edge at x=0; refX=2 → line ends 2px inside circle
+    start: { viewBox: "-2 -2 12 12", refX: 2, refY: 4, shape: "circle", cx: 4, cy: 4, r: 4, filled: true }
+  },
+  "circle-open": {
+    end: { viewBox: "-2 -2 12 12", refX: 6, refY: 4, shape: "circle", cx: 4, cy: 4, r: 4, filled: false },
+    start: { viewBox: "-2 -2 12 12", refX: 2, refY: 4, shape: "circle", cx: 4, cy: 4, r: 4, filled: false }
+  }
+};
+const markersToRender = computed(() => {
+  const markers = [];
+  const startType = edgeMarkerStart.value;
+  const endType = edgeMarkerEnd.value;
+  if (startType !== "none") {
+    const defs = MARKER_DEFS[startType];
+    markers.push({ id: `marker-${startType}-start-${props.id}`, def: defs.start });
+  }
+  if (endType !== "none") {
+    const defs = MARKER_DEFS[endType];
+    markers.push({ id: `marker-${endType}-end-${props.id}`, def: defs.end });
+  }
+  return markers;
+});
+const edgeStyle = computed(() => {
+  const base = {
+    ...props.style,
+    stroke: strokeColor.value
+  };
+  if (edgeAnimated.value) {
+    const strokeOpt = FLOW_EDGE_STROKE_TYPES.find((t) => t.type === edgeStrokeType.value);
+    const dasharray = strokeOpt?.dasharray || "";
+    const animDash = dasharray || "8 4";
+    const total = animDash.split(/\s+/).reduce((sum, n) => sum + Number(n), 0);
+    base.strokeDasharray = animDash;
+    base["--flow-dash-len"] = `${total}`;
+    base.animation = `flow-dash ${Math.max(total * 0.05, 0.3)}s linear infinite`;
+  }
+  return base;
+});
+const editingLabel = ref(false);
+const tempLabel = ref("");
+const inputRef = ref(null);
+const startEditing = () => {
+  editingLabel.value = true;
+  tempLabel.value = typeof props.label === "string" ? props.label : "";
+  nextTick(() => {
+    inputRef.value?.focus();
+    inputRef.value?.select();
+  });
+};
+const saveLabel = () => {
+  if (!editingLabel.value) return;
+  editingLabel.value = false;
+  const newLabel = tempLabel.value.trim();
+  props.data?.onUpdateLabel?.(newLabel);
+};
+const cancelEditing = () => {
+  editingLabel.value = false;
+};
+const labelColorStyle = computed(() => effectiveEdgeLabelColor.value ? { color: effectiveEdgeLabelColor.value } : {});
+const labelBorderColorStyle = computed(() => effectiveNodeBorderColor.value ? { borderColor: effectiveNodeBorderColor.value } : {});
 </script>
 
 <template>
   <svg style="position: absolute; width: 0; height: 0">
     <defs>
-      <!-- 自定义箭头 - 终点 -->
-      <marker
-        :id="`custom-arrow-end-${id}`"
-        viewBox="-4 -4 14 18"
-        refX="7"
-        refY="5"
-        markerWidth="5"
-        markerHeight="5"
-        orient="auto-start-reverse"
-      >
-        <path
-          d="M -4 -4 L 10 5 L -4 14 z"
-          :fill="strokeColor"
-        />
-      </marker>
-
-      <!-- 自定义箭头 - 起点 -->
       <marker
-        :id="`custom-arrow-start-${id}`"
-        viewBox="0 -4 14 18"
-        refX="3"
-        refY="5"
-        markerWidth="5"
-        markerHeight="5"
+        v-for="m in markersToRender"
+        :id="m.id"
+        :key="m.id"
+        :viewBox="m.def.viewBox"
+        :refX="m.def.refX"
+        :refY="m.def.refY"
+        markerWidth="12"
+        markerHeight="12"
+        markerUnits="userSpaceOnUse"
         orient="auto"
       >
         <path
-          d="M 14 -4 L 0 5 L 14 14 z"
-          :fill="strokeColor"
+          v-if="m.def.shape === 'path'"
+          :d="m.def.d"
+          :fill="m.def.filled ? strokeColor : 'var(--ui-bg)'"
+          :stroke="strokeColor"
+          :stroke-width="m.def.filled ? 0 : 1.5"
+        />
+        <circle
+          v-else-if="m.def.shape === 'circle'"
+          :cx="m.def.cx"
+          :cy="m.def.cy"
+          :r="m.def.r"
+          :fill="m.def.filled ? strokeColor : 'var(--ui-bg)'"
+          :stroke="strokeColor"
+          :stroke-width="m.def.filled ? 0 : 1.5"
         />
       </marker>
     </defs>
@@ -92,19 +192,48 @@ const edgeStyle = computed(() => ({
     :marker-end="customMarkerEnd"
     :marker-start="customMarkerStart"
   />
+
   <EdgeLabelRenderer>
     <div
-      v-if="label"
       :style="{
   position: 'absolute',
   transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
   pointerEvents: 'all'
 }"
       class="nodrag nopan"
+      @dblclick.stop="startEditing"
     >
-      <div class="bg-background border border-default rounded px-2 py-1 text-xs shadow-sm">
+      <!-- Editing mode -->
+      <input
+        v-if="editingLabel"
+        ref="inputRef"
+        v-model="tempLabel"
+        class="bg-default border border-default rounded px-2 py-1 text-xs outline-none"
+        :style="{ minWidth: '16px', ...labelColorStyle }"
+        @keydown.enter="saveLabel"
+        @keydown.escape="cancelEditing"
+        @blur="saveLabel"
+      >
+      <!-- Display mode: show label or invisible placeholder for no-label edges -->
+      <div
+        v-else-if="label"
+        class="bg-default border border-default rounded px-2 py-1 text-xs shadow-sm"
+        :style="{
+  ...labelColorStyle,
+  ...labelBorderColorStyle
+}"
+      >
         {{ label }}
       </div>
+      <!-- Invisible placeholder for edges without label -->
+      <div
+        v-else
+        class="w-6 h-4 opacity-0 hover:opacity-30 hover:bg-muted rounded transition-opacity"
+      />
     </div>
   </EdgeLabelRenderer>
 </template>
+
+<style>
+@keyframes flow-dash{to{stroke-dashoffset:calc(var(--flow-dash-len)*-1px)}}
+</style>

package/dist/runtime/components/flow/FlowEditor.client.d.vue.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;
+    };
+};