v-nuxt-ui 0.2.4 → 0.2.5

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

@@ -1,8 +1,8 @@
 <script setup>
-import { ref, computed, provide, watchEffect, onMounted, onBeforeUnmount } from "vue";
+import { ref, computed, provide, watchEffect, watch, nextTick, onMounted, onBeforeUnmount, toRef } 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 { FLOW_MOUSE_POSITION_KEY, FLOW_EDITABLE_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";
@@ -16,7 +16,12 @@ const props = defineProps({
   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 }
+  defaultZoom: { type: Number, required: false, default: 1 },
+  zoomable: { type: Boolean, required: false, default: true },
+  draggable: { type: Boolean, required: false, default: true },
+  editable: { type: Boolean, required: false, default: true },
+  fitView: { type: Boolean, required: false, default: false },
+  fitViewPadding: { type: Number, required: false, default: 0.01 }
 });
 const emit = defineEmits(["update:modelValue", "edit-node"]);
 const handleUpdateModel = (model) => {
@@ -50,6 +55,7 @@ const {
   edgePathType,
   edgeColor,
   edgeLabelColor,
+  nodeShowBorder,
   nodeBorderWidth,
   nodeBorderRadius,
   nodeBorderColor,
@@ -67,7 +73,7 @@ const {
   effectiveNodeHandleColor,
   effectiveEdgeColor
 } = useFlowStyles();
-const { onConnect, onNodeDragStop, onEdgeUpdate, getSelectedNodes, getSelectedEdges, getViewport } = useVueFlow();
+const { onConnect, onNodeDragStop, onEdgeUpdate, getSelectedNodes, getSelectedEdges, getViewport, fitView: vueFlowFitView } = useVueFlow();
 const handleResizeEnd = async (nodeId, dimensions) => {
   await updateNodeDimensions(nodeId, dimensions);
 };
@@ -84,6 +90,7 @@ const {
 } = resizeLogic;
 const mousePosition = ref({ x: 0, y: 0 });
 provide(FLOW_MOUSE_POSITION_KEY, mousePosition);
+provide(FLOW_EDITABLE_KEY, toRef(props, "editable"));
 const handleEditNode = (nodeId) => {
   const flowNode = props.modelValue?.nodes?.find((n) => String(n.id) === nodeId);
   if (flowNode) {
@@ -94,6 +101,7 @@ watchEffect(() => {
   flowLogic.syncNodes((nodeId) => ({
     onEdit: () => handleEditNode(nodeId),
     onDelete: () => deleteNode(nodeId),
+    showBorder: nodeShowBorder.value,
     borderWidth: nodeBorderWidth.value,
     borderRadius: nodeBorderRadius.value,
     borderColor: effectiveNodeBorderColor.value,
@@ -103,6 +111,7 @@ watchEffect(() => {
     handleSize: nodeHandleSize.value,
     handleColor: effectiveNodeHandleColor.value,
     onResizeStart: (event, edge) => {
+      if (!props.editable) return;
       const node = props.modelValue?.nodes?.find((n) => String(n.id) === nodeId);
       if (node) {
         startResize(event, nodeId, node, edge);
@@ -138,6 +147,7 @@ const isEditableTarget = (target) => {
   return element.isContentEditable || tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT";
 };
 const handleKeyDown = async (event) => {
+  if (!props.editable) return;
   if (!isDeleteKey(event)) return;
   if (isEditableTarget(event.target)) return;
   event.preventDefault();
@@ -159,6 +169,9 @@ onMounted(() => {
   document.addEventListener("keydown", handleKeyDown, true);
   window.addEventListener("mousemove", handleGlobalMouseMove);
   window.addEventListener("mouseup", handleMouseUp);
+  if (props.fitView) {
+    setTimeout(() => vueFlowFitView({ padding: props.fitViewPadding }), 100);
+  }
   onBeforeUnmount(() => {
     document.removeEventListener("keydown", handleKeyDown, true);
     window.removeEventListener("mousemove", handleGlobalMouseMove);
@@ -170,13 +183,25 @@ onNodeDragStop(async (event) => {
   await updateNodePosition(node.id, node.position.x, node.position.y);
 });
 onConnect(async (params) => {
+  if (!props.editable) return;
   await createEdge(params);
 });
 onEdgeUpdate(({ edge, connection }) => {
+  if (!props.editable) return;
   if (connection.source && connection.target) {
     reconnectEdge(edge.id, connection);
   }
 });
+watch(
+  [
+    () => props.fitView,
+    () => nodes.value.map((n) => `${n.id}:${n.position?.x}:${n.position?.y}:${n.data?.width}:${n.data?.height}`).join(",")
+  ],
+  () => {
+    if (props.fitView) nextTick(() => vueFlowFitView({ padding: props.fitViewPadding }));
+  },
+  { flush: "post" }
+);
 const defaultEdgeOptions = computed(() => {
   const dasharray = FLOW_EDGE_STROKE_TYPES.find((t) => t.type === edgeStrokeType.value)?.dasharray || "";
   return {
@@ -205,8 +230,16 @@ const isValidConnection = () => true;
     :snap-grid="[GRID_SIZE, GRID_SIZE]"
     :default-edge-options="defaultEdgeOptions"
     :is-valid-connection="isValidConnection"
-    :edges-updatable="true"
-    fit-view-on-init
+    :edges-updatable="editable"
+    :zoom-on-scroll="zoomable"
+    :zoom-on-pinch="zoomable"
+    :zoom-on-double-click="zoomable"
+    :pan-on-drag="draggable"
+    :pan-on-scroll="false"
+    :nodes-draggable="draggable"
+    :nodes-connectable="editable"
+    :elements-selectable="editable"
+    :class="{ 'flow-fit-view': fitView }"
   >
     <Background
       v-if="showBackground"
@@ -231,6 +264,7 @@ const isValidConnection = () => true;
       <FlowToolbar
         :on-add-node="createNode"
         :loading="loading"
+        :editable="editable"
         :edge-stroke-width="edgeStrokeWidth"
         :edge-stroke-type="edgeStrokeType"
         :edge-path-type="edgePathType"
@@ -239,6 +273,7 @@ const isValidConnection = () => true;
         :edge-animated="edgeAnimated"
         :edge-color="edgeColor"
         :edge-label-color="edgeLabelColor"
+        :node-show-border="nodeShowBorder"
         :node-border-width="nodeBorderWidth"
         :node-border-radius="nodeBorderRadius"
         :node-border-color="nodeBorderColor"
@@ -255,6 +290,7 @@ const isValidConnection = () => true;
         :on-toggle-edge-animated="() => edgeAnimated = !edgeAnimated"
         :on-edge-color-change="(v) => edgeColor = v"
         :on-edge-label-color-change="(v) => edgeLabelColor = v"
+        :on-toggle-node-show-border="() => nodeShowBorder = !nodeShowBorder"
         :on-node-border-width-change="(v) => nodeBorderWidth = v"
         :on-node-border-radius-change="(v) => nodeBorderRadius = v"
         :on-node-border-color-change="(v) => nodeBorderColor = v"
@@ -291,5 +327,5 @@ const isValidConnection = () => true;
 </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}
+@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}.flow-fit-view{height:100%!important;width:100%!important}
 </style>

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

@@ -16,6 +16,15 @@ type __VLS_Props = {
     maxZoom?: number;
     /** 默认缩放 */
     defaultZoom?: number;
+    /** 是否允许鼠标滚轮缩放 */
+    zoomable?: boolean;
+    /** 是否允许拖拽画布（平移） */
+    draggable?: boolean;
+    /** 是否可编辑（false 时：工具栏新增按钮禁用、edge 不能增删改、node handles 不显示） */
+    editable?: boolean;
+    /** 是否自动适配填满容器并居中 */
+    fitView?: boolean;
+    fitViewPadding?: number;
 };
 declare var __VLS_21: {
     data: any;
@@ -33,13 +42,18 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onEdit-node"?: ((node: FlowNodeType) => any) | undefined;
 }>, {
     modelValue: Flow;
+    draggable: boolean;
     api: FlowApi;
+    editable: boolean;
     showBackground: boolean;
     showToolbar: boolean;
     showStats: boolean;
     minZoom: number;
     maxZoom: number;
     defaultZoom: number;
+    zoomable: boolean;
+    fitView: boolean;
+    fitViewPadding: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,12 +1,13 @@
 <script setup>
-import { computed } from "vue";
+import { computed, inject, ref } from "vue";
 import { Handle } from "@vue-flow/core";
-import { FLOW_RESIZE_HANDLES, GRID_SIZE } from "#v/constants";
+import { FLOW_RESIZE_HANDLES, FLOW_EDITABLE_KEY, GRID_SIZE } from "#v/constants";
 import { useFlowNode } from "#v/composables";
 const props = defineProps({
   data: { type: null, required: true },
   selected: { type: Boolean, required: false }
 });
+const editable = inject(FLOW_EDITABLE_KEY, ref(true));
 const {
   nodeRef,
   isHoveredLocal,
@@ -20,21 +21,23 @@ const {
 const setNodeRef = (el) => {
   nodeRef.value = el instanceof HTMLElement ? el : null;
 };
+const showBorder = computed(() => props.data.showBorder !== false);
 </script>
 
 <template>
   <div
     :ref="setNodeRef"
-    class="bg-background border relative flex"
+    class="bg-background relative flex"
+    :class="{ border: showBorder }"
     :style="{
   boxSizing: 'border-box',
   width: data.width ? `${data.width}px` : GRID_SIZE * 6 + 'px',
   height: data.height ? `${data.height}px` : 'auto',
   minWidth: GRID_SIZE * 2 + 'px',
   minHeight: GRID_SIZE * 2 + 'px',
-  borderWidth: data.borderWidth ? `${data.borderWidth}px` : '2px',
-  borderStyle: 'solid',
-  borderColor,
+  borderWidth: showBorder ? data.borderWidth ? `${data.borderWidth}px` : '2px' : '0px',
+  borderStyle: showBorder ? 'solid' : 'none',
+  borderColor: showBorder ? borderColor : 'transparent',
   borderRadius: data.borderRadius !== void 0 ? `${data.borderRadius}px` : '6px',
   ...data.bgColor ? { backgroundColor: data.bgColor } : {},
   ...data.fontColor ? { color: data.fontColor } : {},
@@ -44,16 +47,18 @@ const setNodeRef = (el) => {
     @mouseleave="isHoveredLocal = false"
     @dblclick="data.onEdit?.()"
   >
-    <!-- Connection handles (z-index 高于 resize handles，优先响应连线拖拽) -->
-    <Handle
-      v-for="handle in activeHandles"
-      :id="`${handle.id}`"
-      :key="`${handle.id}`"
-      type="source"
-      :position="handle.position"
-      :style="handleStyle(handle)"
-      @mousedown.stop
-    />
+    <!-- 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>
 
     <!-- content -->
     <div class="flex items-center justify-center gap-2 w-full">
@@ -62,14 +67,16 @@ const setNodeRef = (el) => {
       </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)"
-    />
+    <!-- Resize handles：仅在可编辑模式下渲染 -->
+    <template v-if="editable">
+      <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)"
+      />
+    </template>
   </div>
 </template>

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

@@ -12,6 +12,8 @@ type __VLS_Props = {
     edgeAnimated?: boolean;
     edgeColor?: string;
     edgeLabelColor?: string;
+    editable?: boolean;
+    nodeShowBorder?: boolean;
     nodeBorderWidth?: number;
     nodeBorderRadius?: number;
     nodeBorderColor?: string;
@@ -34,6 +36,7 @@ type __VLS_Props = {
     onToggleEdgeAnimated?: () => void;
     onEdgeColorChange?: (color: string) => void;
     onEdgeLabelColorChange?: (color: string) => void;
+    onToggleNodeShowBorder?: () => void;
     onNodeBorderWidthChange?: (width: number) => void;
     onNodeBorderRadiusChange?: (radius: number) => void;
     onNodeBorderColorChange?: (color: string) => void;

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

@@ -27,6 +27,8 @@ defineProps({
   edgeAnimated: { type: Boolean, required: false },
   edgeColor: { type: String, required: false },
   edgeLabelColor: { type: String, required: false },
+  editable: { type: Boolean, required: false },
+  nodeShowBorder: { type: Boolean, required: false },
   nodeBorderWidth: { type: Number, required: false },
   nodeBorderRadius: { type: Number, required: false },
   nodeBorderColor: { type: String, required: false },
@@ -46,6 +48,7 @@ defineProps({
   onToggleEdgeAnimated: { type: Function, required: false },
   onEdgeColorChange: { type: Function, required: false },
   onEdgeLabelColorChange: { type: Function, required: false },
+  onToggleNodeShowBorder: { type: Function, required: false },
   onNodeBorderWidthChange: { type: Function, required: false },
   onNodeBorderRadiusChange: { type: Function, required: false },
   onNodeBorderColorChange: { type: Function, required: false },
@@ -80,7 +83,7 @@ function getStrokeDasharray(value) {
       icon="i-lucide-circle-plus"
       size="sm"
       variant="subtle"
-      :disabled="loading"
+      :disabled="loading || editable === false"
       :loading="loading"
       @click="onAddNode?.()"
     />
@@ -148,6 +151,17 @@ function getStrokeDasharray(value) {
 
           <template #node>
             <div class="flex flex-col gap-4">
+              <!-- 显示边框 -->
+              <FlowToolbarItemWrapper label="显示边框">
+                <div class="flex items-center h-7">
+                  <USwitch
+                    :model-value="nodeShowBorder"
+                    size="lg"
+                    @update:model-value="onToggleNodeShowBorder?.()"
+                  />
+                </div>
+              </FlowToolbarItemWrapper>
+
               <!-- 边框粗细 -->
               <FlowToolbarItemWrapper label="边框粗细">
                 <USelect
@@ -155,6 +169,7 @@ function getStrokeDasharray(value) {
                   :items="FLOW_WIDTH_ITEMS"
                   :size="itemSize"
                   trailing-icon=""
+                  :disabled="!nodeShowBorder"
                   @update:model-value="(v) => onNodeBorderWidthChange?.(v)"
                 >
                   <template #item-leading="{ item }">

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

@@ -12,6 +12,8 @@ type __VLS_Props = {
     edgeAnimated?: boolean;
     edgeColor?: string;
     edgeLabelColor?: string;
+    editable?: boolean;
+    nodeShowBorder?: boolean;
     nodeBorderWidth?: number;
     nodeBorderRadius?: number;
     nodeBorderColor?: string;
@@ -34,6 +36,7 @@ type __VLS_Props = {
     onToggleEdgeAnimated?: () => void;
     onEdgeColorChange?: (color: string) => void;
     onEdgeLabelColorChange?: (color: string) => void;
+    onToggleNodeShowBorder?: () => void;
     onNodeBorderWidthChange?: (width: number) => void;
     onNodeBorderRadiusChange?: (radius: number) => void;
     onNodeBorderColorChange?: (color: string) => void;

package/dist/runtime/components/form/field/AsyncObjectSelect.d.vue.ts

@@ -1,6 +1,8 @@
-import type { VFormFieldAsyncSelectProps } from '#v/types';
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(VFormFieldAsyncSelectProps<T> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        initModel?: any | any[];
+        onUpdateInitModel?(model: any | any[] | undefined): void;
+    } & import("#v/types").VAsyncSelectProps<T> & {
         modelValue: T[] | undefined;
     }) & {
         "onUpdate:modelValue"?: ((value: T[] | undefined) => any) | undefined;

package/dist/runtime/components/form/field/AsyncObjectSelect.vue

@@ -2,33 +2,38 @@
 import { ref, watch } from "vue";
 import AsyncSelect from "./AsyncSelect.vue";
 const props = defineProps({
+  initModel: { type: null, required: false },
+  onUpdateInitModel: { type: Function, required: false },
+  label: { type: String, required: false },
+  floatingPlaceholder: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  size: { type: null, required: false },
+  icon: { type: null, required: false },
   listApi: { type: Function, required: true },
+  searchFields: { type: Function, required: false },
+  likeSearchFields: { type: Array, required: false },
   extraQuery: { type: Object, required: false },
-  initModelValues: { type: null, required: false },
-  onUpdateInitModelValues: { type: Function, required: false },
-  searchFields: { type: Array, required: true },
-  extraSearchFieldFn: { type: Function, required: false },
-  labelField: { type: null, required: false },
+  fetchAll: { type: Boolean, required: false },
+  labelField: { type: null, required: true },
   valueField: { type: null, required: true },
   labelRenderFn: { type: Function, required: false },
   enableEmptyOption: { type: Boolean, required: false },
-  disableOprSelector: { type: Boolean, required: false },
   multiple: { type: Boolean, required: false },
-  placeholder: { type: String, required: false },
-  size: { type: null, required: false },
+  afterSelect: { type: Function, required: false },
   canCreate: { type: Boolean, required: false },
   createModalComponent: { type: null, required: false },
   createModalOpenProps: { type: Object, required: false }
 });
 const modelValue = defineModel("modelValue", { type: null, ...{ required: true } });
-const initModelValue = ref(modelValue.value);
 const modelValueWithValueField = ref(modelValue.value?.map((item) => item[props.valueField]));
 watch(
-  [initModelValue, modelValueWithValueField],
+  [props.initModel, modelValueWithValueField],
   () => {
     const newModelValue = [];
     modelValueWithValueField.value?.forEach((value) => {
-      const item = initModelValue.value?.find((innerItem) => innerItem[props.valueField] === value);
+      const initModelArray = Array.isArray(props.initModel) ? props.initModel : [props.initModel].filter(Boolean);
+      const item = initModelArray.find((innerItem) => innerItem[props.valueField] === value);
       if (item) {
         newModelValue.push(item);
       }
@@ -43,7 +48,5 @@ watch(
   <AsyncSelect
     v-bind="props"
     v-model="modelValueWithValueField"
-    :init-model-values="initModelValue"
-    @update-init-model-values="(newInitModelValues) => initModelValue = newInitModelValues"
   />
 </template>

package/dist/runtime/components/form/field/AsyncObjectSelect.vue.d.ts

@@ -1,6 +1,8 @@
-import type { VFormFieldAsyncSelectProps } from '#v/types';
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(VFormFieldAsyncSelectProps<T> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        initModel?: any | any[];
+        onUpdateInitModel?(model: any | any[] | undefined): void;
+    } & import("#v/types").VAsyncSelectProps<T> & {
         modelValue: T[] | undefined;
     }) & {
         "onUpdate:modelValue"?: ((value: T[] | undefined) => any) | undefined;

package/dist/runtime/components/form/field/AsyncSelect.d.vue.ts

@@ -1,23 +1,19 @@
-import { type Component as VueComponent } from 'vue';
-import type { VFormFieldAsyncSelectProps } from '#v/types';
+import type { AsyncSelectValue } from '#v/types';
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(VFormFieldAsyncSelectProps<T> & {
-        icon?: string;
-        disabled?: boolean;
-        canCreate?: boolean;
-        createModalComponent?: VueComponent;
-        createModalOpenProps?: Record<string, any>;
-    } & {
-        modelValue: string[] | number[] | number | string | null | undefined;
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        initModel?: any | any[];
+        onUpdateInitModel?(model: any | any[] | undefined): void;
+    } & import("#v/types").VAsyncSelectProps<T> & {
+        modelValue: AsyncSelectValue;
     }) & {
-        "onUpdate:modelValue"?: ((value: string | number | number[] | string[] | null | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: AsyncSelectValue) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: (event: "update:modelValue", value: string | number | number[] | string[] | null | undefined) => void;
+    emit: (event: "update:modelValue", value: AsyncSelectValue) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };