v-nuxt-ui 0.2.7 → 0.2.9

package/dist/module.json

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

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

@@ -1,12 +1,12 @@
+import type { FlowColorRole } from '#v/constants';
 type __VLS_Props = {
     /** Tailwind 颜色名 (e.g. 'red', 'blue')，空字符串表示默认 */
     chip?: string;
-    /** 色阶 (默认 500) */
-    shade?: number;
     /** 是否选中 */
     selected?: boolean;
     /** 标题提示 */
     title?: string;
+    colorRole?: FlowColorRole;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: () => any;

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

@@ -1,18 +1,19 @@
 <script setup>
 import { computed } from "vue";
 import { useColorMode } from "@vueuse/core";
+import { resolveFlowColor } from "#v/constants";
 const props = defineProps({
   chip: { type: String, required: false },
-  shade: { type: Number, required: false },
   selected: { type: Boolean, required: false },
-  title: { type: String, required: false }
+  title: { type: String, required: false },
+  colorRole: { type: null, 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})`;
+  if (!props.chip) return void 0;
+  const varName = resolveFlowColor(props.chip, props.colorRole ?? "border", colorMode.value === "dark");
+  return `background-color: ${varName}`;
 });
 </script>
 

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

@@ -1,12 +1,12 @@
+import type { FlowColorRole } from '#v/constants';
 type __VLS_Props = {
     /** Tailwind 颜色名 (e.g. 'red', 'blue')，空字符串表示默认 */
     chip?: string;
-    /** 色阶 (默认 500) */
-    shade?: number;
     /** 是否选中 */
     selected?: boolean;
     /** 标题提示 */
     title?: string;
+    colorRole?: FlowColorRole;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: () => any;

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

@@ -42,6 +42,7 @@ const {
   edgePathType,
   edgeAnimated,
   edgeStrokeType,
+  edgeColorOpacity,
   effectiveEdgeColor,
   effectiveEdgeLabelColor,
   effectiveNodeBorderColor
@@ -114,7 +115,8 @@ const markersToRender = computed(() => {
 const edgeStyle = computed(() => {
   const base = {
     ...props.style,
-    stroke: strokeColor.value
+    stroke: strokeColor.value,
+    opacity: edgeColorOpacity.value / 100
   };
   if (edgeAnimated.value) {
     const strokeOpt = FLOW_EDGE_STROKE_TYPES.find((t) => t.type === edgeStrokeType.value);

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

@@ -55,6 +55,7 @@ const {
   edgeStrokeType,
   edgePathType,
   edgeColor,
+  edgeColorOpacity,
   edgeLabelColor,
   nodeShowBorder,
   nodeBorderWidth,
@@ -126,7 +127,8 @@ watchEffect(() => {
     edge.style = {
       strokeWidth: edgeStrokeWidth.value,
       ...dasharray ? { strokeDasharray: dasharray } : {},
-      ...effectiveEdgeColor.value ? { stroke: effectiveEdgeColor.value } : {}
+      ...effectiveEdgeColor.value ? { stroke: effectiveEdgeColor.value } : {},
+      opacity: edgeColorOpacity.value / 100
     };
     edge.markerStart = void 0;
     edge.markerEnd = void 0;
@@ -209,7 +211,8 @@ const defaultEdgeOptions = computed(() => {
     style: {
       strokeWidth: edgeStrokeWidth.value,
       ...dasharray ? { strokeDasharray: dasharray } : {},
-      ...effectiveEdgeColor.value ? { stroke: effectiveEdgeColor.value } : {}
+      ...effectiveEdgeColor.value ? { stroke: effectiveEdgeColor.value } : {},
+      opacity: edgeColorOpacity.value / 100
     },
     // Markers are handled by FlowEdge custom SVG markers
     markerStart: void 0,
@@ -273,6 +276,7 @@ const isValidConnection = () => true;
         :edge-marker-end="edgeMarkerEnd"
         :edge-animated="edgeAnimated"
         :edge-color="edgeColor"
+        :edge-color-opacity="edgeColorOpacity"
         :edge-label-color="edgeLabelColor"
         :node-show-border="nodeShowBorder"
         :node-border-width="nodeBorderWidth"
@@ -290,6 +294,7 @@ const isValidConnection = () => true;
         :on-edge-marker-end-change="(v) => edgeMarkerEnd = v"
         :on-toggle-edge-animated="() => edgeAnimated = !edgeAnimated"
         :on-edge-color-change="(v) => edgeColor = v"
+        :on-edge-color-opacity-change="(v) => edgeColorOpacity = v"
         :on-edge-label-color-change="(v) => edgeLabelColor = v"
         :on-toggle-node-show-border="() => nodeShowBorder = !nodeShowBorder"
         :on-node-border-width-change="(v) => nodeBorderWidth = v"

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

@@ -47,18 +47,20 @@ const showBorder = computed(() => props.data.showBorder !== false);
     @mouseleave="isHoveredLocal = false"
     @dblclick="data.onEdit?.()"
   >
-    <!-- Connection handles：仅在可编辑模式下渲染 -->
-    <template v-if="editable">
-      <Handle
-        v-for="handle in activeHandles"
-        :id="`${handle.id}`"
-        :key="`${handle.id}`"
-        type="source"
-        :position="handle.position"
-        :style="handleStyle(handle)"
-        @mousedown.stop
-      />
-    </template>
+    <!-- Connection handles：始终渲染以确保 edge 连接点正确，非编辑模式下隐藏且禁用交互 -->
+    <Handle
+      v-for="handle in activeHandles"
+      :id="`${handle.id}`"
+      :key="`${handle.id}`"
+      type="source"
+      :position="handle.position"
+      :connectable="editable"
+      :style="{
+  ...handleStyle(handle),
+  ...editable ? {} : { opacity: 0, pointerEvents: 'none', width: '1px', height: '1px' }
+}"
+      @mousedown.stop
+    />
 
     <!-- content -->
     <div class="flex items-center justify-center gap-2 w-full">

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

@@ -10,6 +10,7 @@ type __VLS_Props = {
     edgeMarkerStart?: FlowArrowType;
     edgeMarkerEnd?: FlowArrowType;
     edgeAnimated?: boolean;
+    edgeColorOpacity?: number;
     edgeColor?: string;
     edgeLabelColor?: string;
     editable?: boolean;
@@ -34,6 +35,7 @@ type __VLS_Props = {
     onEdgeMarkerStartChange?: (type: FlowArrowType) => void;
     onEdgeMarkerEndChange?: (type: FlowArrowType) => void;
     onToggleEdgeAnimated?: () => void;
+    onEdgeColorOpacityChange?: (opacity: number) => void;
     onEdgeColorChange?: (color: string) => void;
     onEdgeLabelColorChange?: (color: string) => void;
     onToggleNodeShowBorder?: () => void;

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

@@ -25,6 +25,7 @@ defineProps({
   edgeMarkerStart: { type: String, required: false },
   edgeMarkerEnd: { type: String, required: false },
   edgeAnimated: { type: Boolean, required: false },
+  edgeColorOpacity: { type: Number, required: false },
   edgeColor: { type: String, required: false },
   edgeLabelColor: { type: String, required: false },
   editable: { type: Boolean, required: false },
@@ -46,6 +47,7 @@ defineProps({
   onEdgeMarkerStartChange: { type: Function, required: false },
   onEdgeMarkerEndChange: { type: Function, required: false },
   onToggleEdgeAnimated: { type: Function, required: false },
+  onEdgeColorOpacityChange: { type: Function, required: false },
   onEdgeColorChange: { type: Function, required: false },
   onEdgeLabelColorChange: { type: Function, required: false },
   onToggleNodeShowBorder: { type: Function, required: false },
@@ -138,7 +140,7 @@ function getStrokeDasharray(value) {
                       v-for="opt in FLOW_COLORS"
                       :key="opt.color"
                       :chip="opt.chip"
-                      :shade="500"
+                      color-role="border"
                       :selected="unifiedColor === opt.color"
                       :title="opt.chip || 'default'"
                       @click="onUnifiedColorChange?.(opt.color)"
@@ -199,7 +201,7 @@ function getStrokeDasharray(value) {
                       v-for="opt in FLOW_COLORS"
                       :key="opt.color"
                       :chip="opt.chip"
-                      :shade="500"
+                      color-role="border"
                       :selected="nodeBorderColor === opt.color"
                       :title="opt.chip || 'default'"
                       @click="onNodeBorderColorChange?.(opt.color)"
@@ -218,7 +220,7 @@ function getStrokeDasharray(value) {
                       v-for="opt in FLOW_COLORS"
                       :key="opt.color"
                       :chip="opt.chip"
-                      :shade="50"
+                      color-role="bg"
                       :selected="nodeBgColor === opt.color"
                       :title="opt.chip || 'default'"
                       @click="onNodeBgColorChange?.(opt.color)"
@@ -252,7 +254,7 @@ function getStrokeDasharray(value) {
                       v-for="opt in FLOW_COLORS"
                       :key="opt.color"
                       :chip="opt.chip"
-                      :shade="600"
+                      color-role="font"
                       :selected="nodeFontColor === opt.color"
                       :title="opt.chip || 'default'"
                       @click="onNodeFontColorChange?.(opt.color)"
@@ -297,7 +299,7 @@ function getStrokeDasharray(value) {
                       v-for="opt in FLOW_COLORS"
                       :key="opt.color"
                       :chip="opt.chip"
-                      :shade="500"
+                      color-role="border"
                       :selected="nodeHandleColor === opt.color"
                       :title="opt.chip || 'default'"
                       @click="onNodeHandleColorChange?.(opt.color)"
@@ -550,6 +552,19 @@ function getStrokeDasharray(value) {
                 </div>
               </FlowToolbarItemWrapper>
 
+              <!-- 颜色透明度 -->
+              <FlowToolbarItemWrapper label="颜色透明度">
+                <USlider
+                  :model-value="edgeColorOpacity ?? 100"
+                  :min="0"
+                  :max="100"
+                  :step="5"
+                  size="sm"
+                  class="flex-1"
+                  @update:model-value="(v) => onEdgeColorOpacityChange?.(v ?? 100)"
+                />
+              </FlowToolbarItemWrapper>
+
               <!-- 连接线颜色 -->
               <div :class="{ 'opacity-40 pointer-events-none': isUnifiedMode }">
                 <FlowToolbarItemWrapper label="连接线颜色">
@@ -558,7 +573,7 @@ function getStrokeDasharray(value) {
                       v-for="opt in FLOW_COLORS"
                       :key="opt.color"
                       :chip="opt.chip"
-                      :shade="500"
+                      color-role="border"
                       :selected="edgeColor === opt.color"
                       :title="opt.chip || 'default'"
                       @click="onEdgeColorChange?.(opt.color)"
@@ -577,7 +592,7 @@ function getStrokeDasharray(value) {
                       v-for="opt in FLOW_COLORS"
                       :key="opt.color"
                       :chip="opt.chip"
-                      :shade="600"
+                      color-role="font"
                       :selected="edgeLabelColor === opt.color"
                       :title="opt.chip || 'default'"
                       @click="onEdgeLabelColorChange?.(opt.color)"

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

@@ -10,6 +10,7 @@ type __VLS_Props = {
     edgeMarkerStart?: FlowArrowType;
     edgeMarkerEnd?: FlowArrowType;
     edgeAnimated?: boolean;
+    edgeColorOpacity?: number;
     edgeColor?: string;
     edgeLabelColor?: string;
     editable?: boolean;
@@ -34,6 +35,7 @@ type __VLS_Props = {
     onEdgeMarkerStartChange?: (type: FlowArrowType) => void;
     onEdgeMarkerEndChange?: (type: FlowArrowType) => void;
     onToggleEdgeAnimated?: () => void;
+    onEdgeColorOpacityChange?: (opacity: number) => void;
     onEdgeColorChange?: (color: string) => void;
     onEdgeLabelColorChange?: (color: string) => void;
     onToggleNodeShowBorder?: () => void;

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

@@ -9,6 +9,7 @@ export interface FlowEdgeStylesState {
     strokeType: FlowEdgeStrokeType;
     pathType: FlowEdgePathType;
     color: string;
+    colorOpacity: number;
     labelColor: string;
 }
 /** 节点样式存储结构 */
@@ -49,6 +50,7 @@ export declare function useFlowStyles(): {
     edgeStrokeType: WritableComputedRef<FlowEdgeStrokeType, FlowEdgeStrokeType>;
     edgePathType: WritableComputedRef<FlowEdgePathType, FlowEdgePathType>;
     edgeColor: WritableComputedRef<string, string>;
+    edgeColorOpacity: WritableComputedRef<number, number>;
     edgeLabelColor: WritableComputedRef<string, string>;
     nodeShowBorder: WritableComputedRef<boolean, boolean>;
     nodeBorderWidth: WritableComputedRef<number, number>;

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

@@ -10,6 +10,7 @@ const EDGE_DEFAULTS = {
   strokeType: "solid",
   pathType: "smoothstep",
   color: "",
+  colorOpacity: 100,
   labelColor: ""
 };
 const NODE_DEFAULTS = {
@@ -74,6 +75,7 @@ export function useFlowStyles() {
   const edgeStrokeType = useField(edgeStore, "strokeType");
   const edgePathType = useField(edgeStore, "pathType");
   const edgeColor = useField(edgeStore, "color");
+  const edgeColorOpacity = useField(edgeStore, "colorOpacity");
   const edgeLabelColor = useField(edgeStore, "labelColor");
   const nodeShowBorder = useField(nodeStore, "showBorder");
   const nodeBorderWidth = useField(nodeStore, "borderWidth");
@@ -117,6 +119,7 @@ export function useFlowStyles() {
     edgeStrokeType,
     edgePathType,
     edgeColor,
+    edgeColorOpacity,
     edgeLabelColor,
     // 节点（原始自定义值，用于 UI 绑定）
     nodeShowBorder,

package/dist/runtime/constants/flow.js

@@ -58,7 +58,8 @@ const FLOW_COLOR_NAMES = [
   "purple",
   "fuchsia",
   "pink",
-  "rose"
+  "rose",
+  "neutral"
 ];
 export const FLOW_COLORS = [
   { color: "primary", chip: "primary" },
@@ -72,7 +73,7 @@ export const FLOW_SHADE_MAP = {
 export function resolveFlowColor(name, role, isDark) {
   if (!name) return "";
   const shade = FLOW_SHADE_MAP[role][isDark ? "dark" : "light"];
-  if (name === "primary") {
+  if (name === "primary" || name === "neutral") {
     return `var(--ui-color-${name}-${shade})`;
   }
   return `var(--color-${name}-${shade})`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-nuxt-ui",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "Veken UI Component Library - Reusable Nuxt UI components, composables, and utilities for enterprise applications",
   "type": "module",
   "style": "./dist/runtime/index.css",