v-nuxt-ui 0.1.0

package/dist/runtime/components/date-picker/index.vue.d.ts

@@ -0,0 +1,26 @@
+import type { ButtonProps } from '@nuxt/ui';
+import type { DateRange, DateValue } from 'reka-ui';
+import type { DateShortcut } from '#v/types';
+type __VLS_Props = {
+    size?: ButtonProps['size'];
+    loading?: ButtonProps['loading'];
+    range?: boolean;
+    placeholder?: string;
+    timeUnit?: Const.Time.TimeUnit;
+    leadingIcon?: ButtonProps['leadingIcon'];
+    shortcuts?: DateShortcut[];
+    peerButtons?: ButtonProps[];
+};
+type __VLS_ModelProps = {
+    'modelValue'?: DateValue | DateValue[] | DateRange | null | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    open: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: DateValue | DateRange | DateValue[] | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DateValue | DateRange | DateValue[] | null | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,5 @@
+import type { EdgeProps } from '@vue-flow/core';
+type __VLS_Props = EdgeProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,110 @@
+<script setup>
+import { computed } from "vue";
+import { useFlowStyles } from "#v/composables/flow/useFlowStyles";
+import { EdgeLabelRenderer, getSmoothStepPath, BaseEdge } from "@vue-flow/core";
+const props = defineProps({
+  id: { type: String, required: true },
+  sourceNode: { type: Object, required: true },
+  targetNode: { type: Object, required: true },
+  source: { type: String, required: true },
+  target: { type: String, required: true },
+  type: { type: null, required: true },
+  label: { type: [String, Object, Function], required: false },
+  style: { type: Object, required: false },
+  selected: { type: Boolean, required: false },
+  sourcePosition: { type: String, required: true },
+  targetPosition: { type: String, required: true },
+  sourceHandleId: { type: String, required: false },
+  targetHandleId: { type: String, required: false },
+  animated: { type: Boolean, required: false },
+  updatable: { type: Boolean, required: false },
+  markerStart: { type: String, required: true },
+  markerEnd: { type: String, required: true },
+  curvature: { type: Number, required: false },
+  interactionWidth: { type: Number, required: false },
+  data: { type: null, required: true },
+  events: { type: void 0, required: true },
+  labelStyle: { type: Object, required: false },
+  labelShowBg: { type: Boolean, required: false },
+  labelBgStyle: { type: Object, required: false },
+  labelBgPadding: { type: Array, required: false },
+  labelBgBorderRadius: { type: Number, required: false },
+  sourceX: { type: Number, required: true },
+  sourceY: { type: Number, required: true },
+  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
+}));
+</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"
+        orient="auto"
+      >
+        <path
+          d="M 14 -4 L 0 5 L 14 14 z"
+          :fill="strokeColor"
+        />
+      </marker>
+    </defs>
+  </svg>
+
+  <BaseEdge
+    :id="id"
+    :style="edgeStyle"
+    :path="path[0]"
+    :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"
+    >
+      <div class="bg-background border border-default rounded px-2 py-1 text-xs shadow-sm">
+        {{ label }}
+      </div>
+    </div>
+  </EdgeLabelRenderer>
+</template>

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

@@ -0,0 +1,5 @@
+import type { EdgeProps } from '@vue-flow/core';
+type __VLS_Props = EdgeProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    data: any;
+    hoveredNodeId: string | null;
+    selected?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,79 @@
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import { Handle } from "@vue-flow/core";
+import { FLOW_HANDLES } from "#v/constants";
+const props = defineProps({
+  data: { type: null, required: true },
+  hoveredNodeId: { type: [String, null], required: true },
+  selected: { type: Boolean, required: false }
+});
+const nodeRef = ref(null);
+const mousePosition = ref({ x: 0, y: 0 });
+const PROXIMITY_THRESHOLD = 50;
+const borderColor = computed(
+  () => props.selected ? "var(--ui-primary)" : "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 <= PROXIMITY_THRESHOLD;
+});
+const isHovered = computed(() => props.hoveredNodeId === String(props.data.id));
+const showHandles = computed(() => isHovered.value || isNearby.value);
+const handleGlobalMouseMove = (e) => {
+  mousePosition.value = { x: e.clientX, y: e.clientY };
+};
+onMounted(() => {
+  window.addEventListener("mousemove", handleGlobalMouseMove);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("mousemove", handleGlobalMouseMove);
+});
+</script>
+
+<template>
+  <div
+    ref="nodeRef"
+    class="bg-background border rounded-md px-3 py-2 relative flex"
+    :style="{
+  width: data.width ? `${data.width}px` : '128px',
+  height: data.height ? `${data.height}px` : 'auto',
+  minWidth: '128px',
+  borderWidth: data.borderWidth ? `${data.borderWidth}px` : '2px',
+  borderStyle: 'solid',
+  borderColor
+}"
+    @mouseenter="data.onMouseEnter?.()"
+    @mouseleave="data.onMouseLeave?.()"
+    @mousemove="(e) => data.onMouseMove?.(e, e.currentTarget)"
+    @dblclick="data.onEdit?.()"
+  >
+    <!-- 连接点 - 可以作为 source 或 target -->
+    <Handle
+      v-for="handle in FLOW_HANDLES"
+      :id="`${handle.id}`"
+      :key="`${handle.id}`"
+      type="source"
+      :position="handle.position"
+      :style="{
+  left: handle.offsetPercent?.x !== void 0 ? `${handle.offsetPercent.x}%` : void 0,
+  top: handle.offsetPercent?.y !== void 0 ? `${handle.offsetPercent.y}%` : void 0,
+  pointerEvents: 'all',
+  opacity: showHandles ? 1 : 0,
+  transition: 'opacity 0.2s',
+  width: '6px',
+  height: '6px'
+}"
+      @mousedown.stop
+    />
+
+    <div class="flex items-center justify-center gap-2 w-full">
+      <span class="text-sm font-medium">{{ data.name }}</span>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    data: any;
+    hoveredNodeId: string | null;
+    selected?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    nodeCount: number;
+    edgeCount: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,17 @@
+<script setup>
+defineProps({
+  nodeCount: { type: Number, required: true },
+  edgeCount: { type: Number, required: true }
+});
+</script>
+
+<template>
+  <div class="bg-default rounded-md p-2 flex flex-col items-center gap-1 shadow-sm">
+    <UBadge variant="outline" color="neutral" icon="i-lucide-circle-dot">
+      节点数 {{ nodeCount }}
+    </UBadge>
+    <UBadge variant="outline" color="neutral" icon="i-lucide-arrow-right-left">
+      连接数 {{ edgeCount }}
+    </UBadge>
+  </div>
+</template>

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    nodeCount: number;
+    edgeCount: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    onAddNode?: () => void;
+    edgeStrokeWidth?: number;
+    edgeMarkerStart?: boolean;
+    edgeMarkerEnd?: boolean;
+    nodeBorderWidth?: number;
+    onEdgeStrokeWidthChange?: (width: number) => void;
+    onToggleEdgeMarkerStart?: () => void;
+    onToggleEdgeMarkerEnd?: () => void;
+    onNodeBorderWidthChange?: (width: number) => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,113 @@
+<script setup>
+import ButtonTheme from "#v/components/button/Theme.vue";
+defineProps({
+  onAddNode: { type: Function, required: false },
+  edgeStrokeWidth: { type: Number, required: false },
+  edgeMarkerStart: { type: Boolean, required: false },
+  edgeMarkerEnd: { type: Boolean, required: false },
+  nodeBorderWidth: { type: Number, required: false },
+  onEdgeStrokeWidthChange: { type: Function, required: false },
+  onToggleEdgeMarkerStart: { type: Function, required: false },
+  onToggleEdgeMarkerEnd: { type: Function, required: false },
+  onNodeBorderWidthChange: { type: Function, required: false }
+});
+</script>
+
+<template>
+  <div class="bg-default rounded-md p-1.5 flex gap-1.5 shadow-sm">
+    <!-- 添加节点 -->
+    <UButton
+      label="节点"
+      icon="i-lucide-circle-plus"
+      size="sm"
+      variant="subtle"
+      @click="onAddNode?.()"
+    />
+
+    <!-- 样式设置 -->
+    <UPopover :content="{ side: 'top' }" :ui="{ content: 'px-6 py-4 flex flex-col gap-4' }">
+      <UButton
+        label="设置"
+        icon="i-lucide-settings"
+        size="sm"
+        variant="subtle"
+      />
+      <template #content>
+        <fieldset>
+          <legend class="text-[11px] leading-none font-semibold mb-2">
+            连接线粗细
+          </legend>
+
+          <div class="grid grid-cols-5 gap-2 -mx-2">
+            <ButtonTheme
+              v-for="width in [1, 2, 3, 4, 5]"
+              :key="width"
+              :label="width.toString()"
+              :selected="edgeStrokeWidth === width"
+              class="justify-center min-w-10"
+              @click="onEdgeStrokeWidthChange?.(width)"
+            >
+              <template #leading>
+                <div class="flex flex-col gap-px">
+                  <div
+                    v-for="i in width"
+                    :key="i"
+                    class="w-4 h-0.5 bg-current rounded-full"
+                  />
+                </div>
+              </template>
+            </ButtonTheme>
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend class="text-[11px] leading-none font-semibold mb-2">
+            连接线箭头
+          </legend>
+
+          <div class="grid grid-cols-2 gap-2 -mx-2">
+            <ButtonTheme
+              label="起点"
+              :icon="edgeMarkerStart ? 'i-lucide-arrow-left' : 'i-lucide-minus'"
+              :selected="edgeMarkerStart"
+              @click="onToggleEdgeMarkerStart?.()"
+            />
+            <ButtonTheme
+              label="终点"
+              :icon="edgeMarkerEnd ? 'i-lucide-arrow-right' : 'i-lucide-minus'"
+              :selected="edgeMarkerEnd"
+              @click="onToggleEdgeMarkerEnd?.()"
+            />
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend class="text-[11px] leading-none font-semibold mb-2">
+            节点边框粗细
+          </legend>
+
+          <div class="grid grid-cols-5 gap-2 -mx-2">
+            <ButtonTheme
+              v-for="width in [1, 2, 3, 4, 5]"
+              :key="width"
+              :label="width.toString()"
+              :selected="nodeBorderWidth === width"
+              class="justify-center"
+              @click="onNodeBorderWidthChange?.(width)"
+            >
+              <template #leading>
+                <div class="flex flex-col gap-px">
+                  <div
+                    v-for="i in width"
+                    :key="i"
+                    class="w-4 h-0.5 bg-current rounded-full"
+                  />
+                </div>
+              </template>
+            </ButtonTheme>
+          </div>
+        </fieldset>
+      </template>
+    </UPopover>
+  </div>
+</template>

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

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    onAddNode?: () => void;
+    edgeStrokeWidth?: number;
+    edgeMarkerStart?: boolean;
+    edgeMarkerEnd?: boolean;
+    nodeBorderWidth?: number;
+    onEdgeStrokeWidthChange?: (width: number) => void;
+    onToggleEdgeMarkerStart?: () => void;
+    onToggleEdgeMarkerEnd?: () => void;
+    onNodeBorderWidthChange?: (width: number) => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/create-modal-template/WithApi.d.vue.ts

@@ -0,0 +1,19 @@
+import type { CreateModalFormTemplatePropsWithApi } from '#v/types';
+declare const __VLS_export: <T extends Model.BaseModel>(__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<CreateModalFormTemplatePropsWithApi<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/form/create-modal-template/WithApi.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { toRef } from "vue";
+import { useFormSubmission, useFormValues } from "#v/composables/useForm";
+import FormCreateModalTemplate from "./index.vue";
+const props = defineProps({
+  apiGroup: { type: Function, required: true },
+  valuePruneFn: { type: Function, required: false },
+  defaultModelValue: { type: Object, required: false },
+  onSave: { type: Function, required: true },
+  title: { type: String, required: true },
+  description: { type: String, required: false },
+  fields: { type: Array, required: true },
+  onClose: { type: Function, required: true },
+  modelValue: { type: Object, required: true },
+  onUpdateModelValue: { type: Function, required: false }
+});
+const { oldValues, newValues } = useFormValues(toRef(props.modelValue), props.defaultModelValue);
+const { onSubmit } = useFormSubmission(
+  toRef(oldValues),
+  toRef(newValues),
+  props.onClose,
+  props.onSave,
+  props.apiGroup
+);
+</script>
+
+<template>
+  <FormCreateModalTemplate
+    v-model:model-value="newValues"
+    :title="title"
+    :description="description"
+    :on-close="onClose"
+    :on-submit="onSubmit"
+    :fields="fields"
+  />
+</template>

package/dist/runtime/components/form/create-modal-template/WithApi.vue.d.ts

@@ -0,0 +1,19 @@
+import type { CreateModalFormTemplatePropsWithApi } from '#v/types';
+declare const __VLS_export: <T extends Model.BaseModel>(__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<CreateModalFormTemplatePropsWithApi<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/form/create-modal-template/index.d.vue.ts

@@ -0,0 +1,19 @@
+import type { CreateModalFormTemplateProps } from '#v/types';
+declare const __VLS_export: <T extends Model.BaseModel>(__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<CreateModalFormTemplateProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/form/create-modal-template/index.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { computed, useTemplateRef } from "vue";
+import { useSubmitting } from "#v/composables/useBoolean";
+import Form from "../index.vue";
+const props = defineProps({
+  title: { type: String, required: true },
+  description: { type: String, required: false },
+  onClose: { type: Function, required: true },
+  onSubmit: { type: Function, required: true },
+  fields: { type: Array, required: true },
+  modelValue: { type: Object, required: true },
+  onUpdateModelValue: { type: Function, required: false },
+  rowKey: { type: null, required: false, default: "id" },
+  fullscreen: { type: Boolean, required: false }
+});
+const form = useTemplateRef("form");
+const action = computed(() => props.modelValue[props.rowKey] === 0 ? "\u521B\u5EFA" : "\u66F4\u65B0");
+const titleWithAction = computed(() => `${action.value}${props.title}`);
+const descWithAction = computed(() => props.description ?? `\u8BF7${action.value}${props.title}`);
+const submitIcon = computed(() => props.modelValue[props.rowKey] === 0 ? "i-lucide-clipboard-plus" : "i-lucide-clipboard-pen-line");
+const { submitting, startSubmitting, endSubmitting } = useSubmitting();
+async function onSubmitWithValidation(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  try {
+    await form.value?.validate?.();
+  } catch {
+    return;
+  }
+  try {
+    startSubmitting();
+    await props.onSubmit();
+  } finally {
+    endSubmitting();
+  }
+}
+</script>
+
+<template>
+  <UModal
+    :title="titleWithAction"
+    :description="descWithAction"
+    :close="{ onClick: () => props.onClose(false) }"
+    :dismissible="false"
+    :fullscreen="fullscreen"
+  >
+    <template #body>
+      <Form
+        ref="form"
+        :fields="fields"
+        :loading="submitting"
+        :model-value="modelValue"
+        @trigger-submit="onSubmitWithValidation"
+        @update-model-value="onUpdateModelValue"
+      />
+    </template>
+    <template #footer>
+      <UButton
+        label="取消"
+        color="neutral"
+        variant="subtle"
+        icon="i-lucide-x"
+        @click="props.onClose(false)"
+      />
+      <UButton
+        :label="action"
+        color="primary"
+        variant="solid"
+        :icon="submitIcon"
+        :loading="submitting"
+        @click="onSubmitWithValidation"
+      />
+    </template>
+  </UModal>
+</template>

package/dist/runtime/components/form/create-modal-template/index.vue.d.ts

@@ -0,0 +1,19 @@
+import type { CreateModalFormTemplateProps } from '#v/types';
+declare const __VLS_export: <T extends Model.BaseModel>(__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<CreateModalFormTemplateProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,23 @@
+import type { VFormFieldAsyncSelectProps } from '#v/types';
+declare const __VLS_export: <T extends Record<string, any>>(__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> & {
+        modelValue: T[] | undefined;
+    }) & {
+        "onUpdate:modelValue"?: ((value: T[] | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: T[] | undefined) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};