v-nuxt-ui 0.2.25 → 0.2.27

package/README.md

@@ -148,6 +148,12 @@ make publish-dry
 make publish
 ```
 
+## Notes
+
+  1. 在form里面某些字段类型比如tree-select-transfer第一次选择后报错`Invalid input: expected array, received undefined`，可以
+    1. 设置默认值
+    2. 设置zod类型为optional
+
 ## License
 
 MIT

package/dist/module.json

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

package/dist/runtime/components/AsyncSelect.vue

@@ -122,6 +122,8 @@ const ui = computed(() => ({
   root: ["min-w-32", props.roundedNone && "rounded-none"].filter(Boolean).join(" "),
   base: "peer",
   content: "min-w-fit",
+  tagsItem: "max-w-48 inline-flex min-w-0",
+  tagsItemText: "truncate",
   tagsInput: "min-w-4 w-0"
 }));
 const dropdownOpen = ref(false);
@@ -138,6 +140,13 @@ defineExpose({
     inputMenuRef.value?.inputRef.focus();
   }
 });
+function findLabel(tagItem) {
+  if (tagItem && typeof tagItem === "object" && "label" in tagItem) {
+    return String(tagItem.label ?? "");
+  }
+  const match = items.value.find((i) => i != null && String(i.value) === String(tagItem));
+  return match?.label ?? String(tagItem ?? "");
+}
 </script>
 
 <template>
@@ -176,5 +185,11 @@ defineExpose({
 }"
     @update:model-value="onSelect"
     @create="onCreateNew"
-  />
+  >
+    <template v-if="multiple" #tags-item-text="{ item }">
+      <UTooltip :delay-duration="0" :text="findLabel(item)" :content="{ side: 'top' }">
+        <span class="truncate">{{ findLabel(item) }}</span>
+      </UTooltip>
+    </template>
+  </UInputMenu>
 </template>

package/dist/runtime/components/AsyncTreeSelect.vue

@@ -31,7 +31,13 @@ const props = defineProps({
   roundedNone: { type: Boolean, required: false }
 });
 const modelValue = defineModel("modelValue", { type: Object, ...{ required: true } });
-const treeModelValue = computed(() => allModels.value.filter((item) => item[props.valueField] === modelValue.value));
+const treeSelectedItems = computed(() => {
+  const flat = flattenTree(items.value);
+  if (props.multiple) {
+    return flat.filter((i) => modelValue.value.values?.includes(i.value));
+  }
+  return flat.find((i) => i.value === modelValue.value.values) ?? void 0;
+});
 const open = ref(false);
 const searchedModel = ref([]);
 const currentSelectedModels = computed(() => [modelValue.value.extraModels ?? []].flat());
@@ -43,13 +49,13 @@ const allModels = computed(() => {
       [props.labelField]: "\u65E0"
     });
   }
-  newSearchedModel.push(...currentSelectedModels.value);
-  searchedModel.value.forEach((searchedItem) => {
-    const idx = newSearchedModel.findIndex((item) => item[props.valueField] === searchedItem[props.valueField]);
-    if (idx === -1) {
-      newSearchedModel.push(searchedItem);
+  currentSelectedModels.value.forEach((currentModel) => {
+    const existInSearched = searchedModel.value.some((searched) => searched[props.valueField] === currentModel[props.valueField]);
+    if (!existInSearched) {
+      newSearchedModel.unshift(currentModel);
     }
   });
+  newSearchedModel.push(...searchedModel.value);
   return newSearchedModel;
 });
 const onSelect = (values) => {
@@ -67,6 +73,7 @@ const onSelect = (values) => {
       values: newValue,
       extraModels: newExtraModel ? [newExtraModel] : []
     };
+    open.value = false;
   }
 };
 const items = computed(() => {
@@ -139,12 +146,11 @@ const onFetchItems = async () => {
 
     <template #content>
       <UTree
-        :model-value="treeModelValue"
+        :model-value="treeSelectedItems"
         :items="items"
         :disabled="fetching"
         :expanded="expandedItemValues"
-        :get-key="(i) => i.value"
-        multiple
+        :multiple="multiple"
         class="p-1 max-h-80 overflow-auto"
       />
     </template>

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

@@ -1,27 +1,30 @@
 import type { RequestResult } from '#v/types';
 import type { Ref } from 'vue';
-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<{
-        ids: number[];
-        onDelete: ((ids: number[]) => Promise<{
-            data: Ref<RequestResult<T>>;
-        }> | undefined) | undefined | null;
-    } & {
-        onClose?: ((args_0: boolean) => any) | undefined;
-    }> & (typeof globalThis extends {
-        __VLS_PROPS_FALLBACK: infer P;
-    } ? P : {});
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: {};
-    emit: (evt: "close", args_0: boolean) => void;
-}>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+type __VLS_Props = {
+    ids?: number[];
+    models?: any[];
+    displayFn?: ((model: any) => string | undefined);
+    onDelete?: ((ids: number[]) => Promise<{
+        data: Ref<RequestResult<any>>;
+    }> | undefined);
 };
+declare var __VLS_15: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (args_0: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((args_0: boolean) => any) | undefined;
+}>, {
+    ids: number[];
+    models: any[];
+}, {}, {}, {}, 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_PrettifyLocal<T> = (T extends any ? {
-    [K in keyof T]: T[K];
-} : {
-    [K in keyof T as K]: T[K];
-}) & {};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DeleteModal.vue

@@ -1,17 +1,35 @@
 <script setup>
+import { computed } from "vue";
 import { useSubmitting } from "#v/composables/useBoolean";
 const props = defineProps({
-  ids: { type: Array, required: true },
-  onDelete: { type: [Function, null], required: true, skipCheck: true }
+  ids: { type: Array, required: false, default: () => [] },
+  models: { type: Array, required: false, default: () => [] },
+  displayFn: { type: Function, required: false },
+  onDelete: { type: Function, required: false }
 });
 const emit = defineEmits(["close"]);
+const effectiveIds = computed(() => {
+  if (props.models && props.models.length > 0) {
+    return props.models.map((m) => m.id);
+  }
+  return props.ids ?? [];
+});
+const displayLabels = computed(() => {
+  if (props.models && props.models.length > 0) {
+    if (props.displayFn) {
+      return props.models.map((m) => props.displayFn(m) ?? String(m.id));
+    }
+    return props.models.map((m) => String(m.id));
+  }
+  return (props.ids ?? []).map((id) => String(id));
+});
 const { submitting, startSubmitting, endSubmitting } = useSubmitting();
 async function onSubmit(e) {
   if (!props.onDelete) return;
   e.preventDefault();
   try {
     startSubmitting();
-    const { data } = await props.onDelete(props.ids);
+    const { data } = await props.onDelete(effectiveIds.value);
     if (!data.value.error) {
       emit("close", true);
     }
@@ -35,6 +53,23 @@ async function onSubmit(e) {
     >
       删除
     </UButton>
+    <template #body>
+      <div v-if="effectiveIds.length > 0" class="mb-4">
+        <p class="text-sm text-(--ui-text-muted) mb-2">
+          以下数据将被删除：
+        </p>
+        <ul class="list-disc list-inside space-y-1">
+          <li
+            v-for="(label, index) in displayLabels"
+            :key="effectiveIds[index]"
+            class="text-sm"
+          >
+            {{ label }}
+          </li>
+        </ul>
+      </div>
+      <slot />
+    </template>
     <template #footer>
       <div class="flex justify-end gap-2">
         <UButton
@@ -44,7 +79,7 @@ async function onSubmit(e) {
           @click="emit('close', false)"
         />
         <UButton
-          :label="`\u5220\u9664 ${props.ids.length} \u6761\u6570\u636E`"
+          :label="`\u5220\u9664 ${effectiveIds.length} \u6761\u6570\u636E`"
           color="error"
           variant="solid"
           icon="i-lucide-trash"

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

@@ -1,27 +1,30 @@
 import type { RequestResult } from '#v/types';
 import type { Ref } from 'vue';
-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<{
-        ids: number[];
-        onDelete: ((ids: number[]) => Promise<{
-            data: Ref<RequestResult<T>>;
-        }> | undefined) | undefined | null;
-    } & {
-        onClose?: ((args_0: boolean) => any) | undefined;
-    }> & (typeof globalThis extends {
-        __VLS_PROPS_FALLBACK: infer P;
-    } ? P : {});
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: {};
-    emit: (evt: "close", args_0: boolean) => void;
-}>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+type __VLS_Props = {
+    ids?: number[];
+    models?: any[];
+    displayFn?: ((model: any) => string | undefined);
+    onDelete?: ((ids: number[]) => Promise<{
+        data: Ref<RequestResult<any>>;
+    }> | undefined);
 };
+declare var __VLS_15: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (args_0: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((args_0: boolean) => any) | undefined;
+}>, {
+    ids: number[];
+    models: any[];
+}, {}, {}, {}, 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_PrettifyLocal<T> = (T extends any ? {
-    [K in keyof T]: T[K];
-} : {
-    [K in keyof T as K]: T[K];
-}) & {};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ScrollArea.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, useTemplateRef, onMounted, onUnmounted } from "vue";
+import { ref, computed, useTemplateRef, onMounted, onUnmounted, onActivated, nextTick } from "vue";
 import { useDebounceFn } from "@vueuse/core";
 import {
   ScrollAreaRoot,
@@ -51,12 +51,14 @@ const onDetectBoundary = () => {
   isAtLeft.value = scrollLeft <= 1;
   isAtRight.value = scrollLeft + clientWidth >= scrollWidth - 1;
 };
-const onScroll = useDebounceFn(() => {
+const savedScrollTop = ref(0);
+const savedScrollLeft = ref(0);
+const onScrollWithSave = useDebounceFn(() => {
   onDetectBoundary();
   const viewport = scrollArea.value?.viewport;
-  if (!viewport) {
-    return;
-  }
+  if (!viewport) return;
+  savedScrollTop.value = viewport.scrollTop;
+  savedScrollLeft.value = viewport.scrollLeft;
   props.onScrollEvent?.(viewport);
 }, 128);
 const scrollHorizontally = (targetX) => {
@@ -108,11 +110,20 @@ defineExpose({
   scrollVerticallyBy
 });
 onMounted(() => {
-  onScroll();
-  window.addEventListener("resize", onScroll);
+  onScrollWithSave();
+  window.addEventListener("resize", onScrollWithSave);
 });
 onUnmounted(() => {
-  window.removeEventListener("resize", onScroll);
+  window.removeEventListener("resize", onScrollWithSave);
+});
+onActivated(() => {
+  nextTick(() => {
+    const vp = scrollArea.value?.viewport;
+    if (vp) {
+      vp.scrollTop = savedScrollTop.value;
+      vp.scrollLeft = savedScrollLeft.value;
+    }
+  });
 });
 </script>
 
@@ -149,7 +160,7 @@ onUnmounted(() => {
       />
     </Transition>
 
-    <ScrollAreaViewport class="size-full overscroll-contain" @scroll="onScroll">
+    <ScrollAreaViewport class="size-full overscroll-contain" @scroll="onScrollWithSave">
       <slot />
     </ScrollAreaViewport>
 

package/dist/runtime/components/form/save-modal-template/ConfirmUpdateModal.d.vue.ts

@@ -0,0 +1,19 @@
+import type { VFormFieldProps } from '#v/types';
+export interface ConfirmDiffItem {
+    fieldName: string;
+    oldValue: unknown;
+    newValue: unknown;
+}
+type __VLS_Props = {
+    fields: VFormFieldProps[];
+    diffItems: ConfirmDiffItem[];
+    oldModelValue: Record<string, unknown>;
+    newModelValue: Record<string, unknown>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (args_0: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((args_0: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/save-modal-template/ConfirmUpdateModal.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { isEmptyString } from "#v/utils";
+import { diffEligibleTypes, useConfirmDiff } from "#v/composables";
+const props = defineProps({
+  fields: { type: Array, required: true },
+  diffItems: { type: Array, required: true },
+  oldModelValue: { type: Object, required: true },
+  newModelValue: { type: Object, required: true }
+});
+const emit = defineEmits(["close"]);
+const { diffedItems } = useConfirmDiff(
+  () => props.fields,
+  () => props.diffItems,
+  () => props.oldModelValue,
+  () => props.newModelValue
+);
+</script>
+
+<template>
+  <UModal
+    title="确认修改"
+    :close="{ onClick: () => emit('close', false) }"
+    :dismissible="false"
+  >
+    <template #description>
+      <div class="flex items-center gap-3 w-full">
+        <span>
+          请确认以下 {{ diffedItems.length }} 处修改内容
+        </span>
+      </div>
+    </template>
+    <template #body>
+      <div class="overflow-y-auto max-h-96">
+        <div class="space-y-4">
+          <UFormField
+            v-for="item in diffedItems"
+            :key="item.fieldName"
+            :label="item.field.label || item.fieldName"
+          >
+            <!-- String types: word diff -->
+            <div v-if="item.field.diffable ?? diffEligibleTypes.has(item.field.type)" class="flex items-center flex-wrap gap-2">
+              <span
+                class="rounded-md bg-muted px-2 py-1 text-sm text-dimmed"
+                :title="item.oldDisplay"
+              >
+                <span v-if="!item.parts.filter((part2) => !part2.added).length">{{ "\xA0" }}</span>
+                <template v-for="(part, idx) in item.parts" :key="idx">
+                  <span
+                    v-if="!part.added"
+                    :class="{ 'bg-red-200 text-red-800 dark:bg-red-800 dark:text-red-200 rounded-sm line-through px-0.5': part.removed }"
+                  >{{ isEmptyString(part.value) ? "\xA0" : part.value }}</span>
+                </template>
+              </span>
+              <UIcon
+                name="i-lucide-arrow-right"
+                class="text-dimmed shrink-0 size-4"
+              />
+              <span
+                class="rounded-md bg-elevated px-2 py-1 text-sm text-highlighted font-bold"
+                :title="item.newDisplay"
+              >
+                <span v-if="!item.parts.filter((part2) => !part2.removed).length">{{ "\xA0" }}</span>
+                <template v-for="(part, idx) in item.parts" :key="idx">
+                  <span
+                    v-if="!part.removed"
+                    :class="{ 'bg-green-200 text-green-800 dark:bg-green-800 dark:text-green-200 rounded-sm px-0.5': part.added }"
+                  >{{ isEmptyString(part.value) ? "\xA0" : part.value }}</span>
+                </template>
+              </span>
+            </div>
+            <!-- Other types: simple old -> new -->
+            <div v-else class="flex items-center flex-wrap gap-2">
+              <span
+                class="rounded-md bg-muted px-2 py-1 text-sm text-dimmed"
+                :title="item.oldDisplay"
+              >
+                {{ isEmptyString(item.oldDisplay) ? "\xA0" : item.oldDisplay }}
+              </span>
+              <UIcon
+                name="i-lucide-arrow-right"
+                class="text-dimmed shrink-0 size-4"
+              />
+              <span
+                class="rounded-md bg-elevated px-2 py-1 text-sm text-highlighted font-medium"
+                :title="item.newDisplay"
+              >
+                {{ isEmptyString(item.newDisplay) ? "\xA0" : item.newDisplay }}
+              </span>
+            </div>
+          </UFormField>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <UButton
+        label="取消"
+        color="neutral"
+        variant="subtle"
+        icon="i-lucide-x"
+        @click="emit('close', false)"
+      />
+      <UButton
+        :label="`\u786E\u8BA4 ${diffedItems.length} \u5904\u4FEE\u6539`"
+        color="primary"
+        variant="solid"
+        icon="i-lucide-check"
+        @click="emit('close', true)"
+      />
+    </template>
+  </UModal>
+</template>

package/dist/runtime/components/form/save-modal-template/ConfirmUpdateModal.vue.d.ts

@@ -0,0 +1,19 @@
+import type { VFormFieldProps } from '#v/types';
+export interface ConfirmDiffItem {
+    fieldName: string;
+    oldValue: unknown;
+    newValue: unknown;
+}
+type __VLS_Props = {
+    fields: VFormFieldProps[];
+    diffItems: ConfirmDiffItem[];
+    oldModelValue: Record<string, unknown>;
+    newModelValue: Record<string, unknown>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (args_0: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((args_0: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/{create-modal-template → save-modal-template}/WithApi.d.vue.ts

@@ -1,6 +1,6 @@
-import type { BaseModel, CreateModalFormTemplatePropsWithApi } from '#v/types';
+import type { BaseModel, SaveModalFormTemplatePropsWithApi } from '#v/types';
 declare const __VLS_export: <T extends 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 {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<SaveModalFormTemplatePropsWithApi<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;

package/dist/runtime/components/form/{create-modal-template → save-modal-template}/WithApi.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { toRef } from "vue";
-import { useFormSubmission, useFormValues } from "#v/composables/useForm";
-import FormCreateModalTemplate from "./index.vue";
+import { useFormSubmission, useFormValues } from "#v/composables/form/useForm";
+import FormSaveModalTemplate from "./index.vue";
 const props = defineProps({
   apiGroup: { type: Function, required: true },
   valuePruneFn: { type: Function, required: false },
@@ -25,8 +25,9 @@ const { onSubmit } = useFormSubmission(
 </script>
 
 <template>
-  <FormCreateModalTemplate
+  <FormSaveModalTemplate
     v-model:model-value="newValues"
+    :old-model-value="oldValues"
     :title="title"
     :description="description"
     :on-close="onClose"

package/dist/runtime/components/form/{create-modal-template → save-modal-template}/WithApi.vue.d.ts

@@ -1,6 +1,6 @@
-import type { BaseModel, CreateModalFormTemplatePropsWithApi } from '#v/types';
+import type { BaseModel, SaveModalFormTemplatePropsWithApi } from '#v/types';
 declare const __VLS_export: <T extends 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 {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<SaveModalFormTemplatePropsWithApi<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;

package/dist/runtime/components/form/{create-modal-template → save-modal-template}/index.d.vue.ts

@@ -1,6 +1,6 @@
-import type { BaseModel, CreateModalFormTemplateProps } from '#v/types';
+import type { BaseModel, SaveModalFormTemplateProps } from '#v/types';
 declare const __VLS_export: <T extends 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 {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<SaveModalFormTemplateProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;

package/dist/runtime/components/form/{create-modal-template → save-modal-template}/index.vue

@@ -1,13 +1,16 @@
 <script setup>
-import { computed, useTemplateRef } from "vue";
-import { useSubmitting } from "#v/composables/useBoolean";
+import { computed, ref, useTemplateRef } from "vue";
+import { useOverlay } from "@nuxt/ui/composables";
+import { useSubmitting } from "#v/composables";
 import Form from "../index.vue";
+import ConfirmUpdateModal from "./ConfirmUpdateModal.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 },
+  oldModelValue: { type: Object, required: true },
   modelValue: { type: Object, required: true },
   onUpdateModelValue: { type: Function, required: false },
   rowKey: { type: null, required: false, default: "id" },
@@ -15,10 +18,42 @@ const props = defineProps({
 });
 const form = useTemplateRef("form");
 const action = computed(() => props.modelValue[props.rowKey] === 0 ? "\u521B\u5EFA" : "\u66F4\u65B0");
+const isUpdate = computed(() => props.modelValue[props.rowKey] !== 0);
 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 initialModelValue = ref(JSON.parse(JSON.stringify(props.modelValue)));
+const overlay = useOverlay();
+const confirmModal = overlay.create(ConfirmUpdateModal);
+function computeDiff() {
+  const items = [];
+  for (const field of props.fields) {
+    if (!field.name || field.hidden) continue;
+    const name = field.name;
+    const oldVal = initialModelValue.value[name];
+    const newVal = props.modelValue[name];
+    if ((oldVal === null || oldVal === void 0) && (newVal === null || newVal === void 0)) continue;
+    if (oldVal === newVal) continue;
+    if (typeof oldVal === "object" && typeof newVal === "object" && oldVal !== null && newVal !== null) {
+      if (JSON.stringify(oldVal) === JSON.stringify(newVal)) continue;
+    }
+    items.push({
+      fieldName: name,
+      oldValue: oldVal,
+      newValue: newVal
+    });
+  }
+  return items;
+}
 const { submitting, startSubmitting, endSubmitting } = useSubmitting();
+async function doSubmit() {
+  try {
+    startSubmitting();
+    await props.onSubmit();
+  } finally {
+    endSubmitting();
+  }
+}
 async function onSubmitWithValidation(e) {
   e.preventDefault();
   e.stopPropagation();
@@ -27,12 +62,24 @@ async function onSubmitWithValidation(e) {
   } catch {
     return;
   }
-  try {
-    startSubmitting();
-    await props.onSubmit();
-  } finally {
-    endSubmitting();
+  if (isUpdate.value) {
+    const items = computeDiff();
+    if (items.length === 0) {
+      await doSubmit();
+      return;
+    }
+    const confirmed = await confirmModal.open({
+      fields: props.fields,
+      diffItems: items,
+      oldModelValue: props.oldModelValue,
+      newModelValue: props.modelValue
+    }).result;
+    if (confirmed) {
+      await doSubmit();
+    }
+    return;
   }
+  await doSubmit();
 }
 </script>
 

package/dist/runtime/components/form/{create-modal-template → save-modal-template}/index.vue.d.ts

@@ -1,6 +1,6 @@
-import type { BaseModel, CreateModalFormTemplateProps } from '#v/types';
+import type { BaseModel, SaveModalFormTemplateProps } from '#v/types';
 declare const __VLS_export: <T extends 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 {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<SaveModalFormTemplateProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;