v-nuxt-ui 0.2.8 → 0.2.10

package/dist/module.json

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

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.d.vue.ts

@@ -27,13 +27,13 @@ type __VLS_Props = {
     fitViewPadding?: number;
     noFlowNodeBorder?: boolean;
 };
-declare var __VLS_21: {
+declare var __VLS_22: {
     data: any;
-}, __VLS_62: {};
+}, __VLS_63: {};
 type __VLS_Slots = {} & {
-    node?: (props: typeof __VLS_21) => any;
+    node?: (props: typeof __VLS_22) => any;
 } & {
-    default?: (props: typeof __VLS_62) => any;
+    default?: (props: typeof __VLS_63) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: Flow) => any;

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,
@@ -217,11 +220,33 @@ const defaultEdgeOptions = computed(() => {
     animated: false
   };
 });
+const flowContainer = ref(null);
+let resizeObserver = null;
+let prevWidth = 0;
+onMounted(() => {
+  const el = flowContainer.value?.$el ?? flowContainer.value;
+  if (!el) return;
+  prevWidth = el.clientWidth;
+  resizeObserver = new ResizeObserver((entries) => {
+    const entry = entries[0];
+    if (!entry) return;
+    const newWidth = entry.contentRect.width;
+    if (newWidth !== prevWidth) {
+      prevWidth = newWidth;
+      nextTick(() => vueFlowFitView({ padding: props.fitViewPadding }));
+    }
+  });
+  resizeObserver.observe(el);
+});
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+});
 const isValidConnection = () => true;
 </script>
 
 <template>
   <VueFlow
+    ref="flowContainer"
     v-model:nodes="nodes"
     v-model:edges="edges"
     :default-zoom="defaultZoom"
@@ -273,6 +298,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 +316,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/FlowEditor.client.vue.d.ts

@@ -27,13 +27,13 @@ type __VLS_Props = {
     fitViewPadding?: number;
     noFlowNodeBorder?: boolean;
 };
-declare var __VLS_21: {
+declare var __VLS_22: {
     data: any;
-}, __VLS_62: {};
+}, __VLS_63: {};
 type __VLS_Slots = {} & {
-    node?: (props: typeof __VLS_21) => any;
+    node?: (props: typeof __VLS_22) => any;
 } & {
-    default?: (props: typeof __VLS_62) => any;
+    default?: (props: typeof __VLS_63) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: Flow) => any;

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 },
@@ -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="连接线颜色">

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/package.json

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