v-nuxt-ui 0.2.26 → 0.2.28

package/dist/module.json

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

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/save-modal-template/WithApi.d.vue.ts

@@ -0,0 +1,19 @@
+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<SaveModalFormTemplatePropsWithApi<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/save-modal-template/WithApi.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { toRef } from "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 },
+  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>
+  <FormSaveModalTemplate
+    v-model:model-value="newValues"
+    :old-model-value="oldValues"
+    :title="title"
+    :description="description"
+    :on-close="onClose"
+    :on-submit="onSubmit"
+    :fields="fields"
+  />
+</template>

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

@@ -0,0 +1,19 @@
+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<SaveModalFormTemplatePropsWithApi<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/save-modal-template/index.d.vue.ts

@@ -0,0 +1,21 @@
+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<SaveModalFormTemplateProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        'after-form'?: (props: {}) => any;
+    };
+    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/save-modal-template/index.vue

@@ -0,0 +1,123 @@
+<script setup>
+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" },
+  fullscreen: { type: Boolean, required: false }
+});
+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();
+  try {
+    await form.value?.validate?.();
+  } catch {
+    return;
+  }
+  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>
+
+<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"
+      />
+      <slot name="after-form" />
+    </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/save-modal-template/index.vue.d.ts

@@ -0,0 +1,21 @@
+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<SaveModalFormTemplateProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        'after-form'?: (props: {}) => any;
+    };
+    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/save-model-template/WithApi.vue

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

package/dist/runtime/components/sys/company/SaveModal.vue

@@ -1,6 +1,6 @@
 <script setup>
 import * as z from "zod";
-import FormSaveModelTemplateWithApi from "#v/components/form/save-model-template/WithApi.vue";
+import FormSaveModalTemplateWithApi from "#v/components/form/save-modal-template/WithApi.vue";
 import { useCompanyApi } from "#v/composables";
 defineProps({
   model: { type: Object, required: true }
@@ -9,7 +9,7 @@ const emit = defineEmits(["close", "save"]);
 </script>
 
 <template>
-  <FormSaveModelTemplateWithApi
+  <FormSaveModalTemplateWithApi
     title="公司信息"
     :on-close="(ok) => emit('close', ok)"
     :on-save="(model) => emit('save', model)"

package/dist/runtime/components/sys/department/SaveModal.vue

@@ -1,6 +1,6 @@
 <script setup>
 import * as z from "zod";
-import FormSaveModelTemplate from "#v/components/form/save-model-template/index.vue";
+import FormSaveModalTemplate from "#v/components/form/save-modal-template/index.vue";
 import { useCompanyApi, useDepartmentApi, useFormSubmission, useFormValues, useUserApi } from "#v/composables";
 import { toRef, watch } from "vue";
 const props = defineProps({
@@ -27,7 +27,7 @@ const { onSubmit } = useFormSubmission(
 </script>
 
 <template>
-  <FormSaveModelTemplate
+  <FormSaveModalTemplate
     title="部门信息"
     :on-close="(ok) => emit('close', ok)"
     :fields="[

package/dist/runtime/components/sys/flow/EditNodeModal.vue

@@ -1,6 +1,6 @@
 <script setup>
 import * as z from "zod";
-import FormSaveModelTemplate from "#v/components/form/save-model-template/index.vue";
+import FormSaveModalTemplate from "#v/components/form/save-modal-template/index.vue";
 import { useFormValues } from "#v/composables";
 import { toRef } from "vue";
 const props = defineProps({
@@ -14,7 +14,7 @@ const { oldValues, newValues } = useFormValues(toRef(props.model), {
 </script>
 
 <template>
-  <FormSaveModelTemplate
+  <FormSaveModalTemplate
     title="编辑节点"
     :on-close="(ok) => emit('close', ok)"
     :fields="[

package/dist/runtime/components/sys/flow/SaveModal.vue

@@ -1,6 +1,6 @@
 <script setup>
 import * as z from "zod";
-import FormSaveModelTemplate from "#v/components/form/save-model-template/index.vue";
+import FormSaveModalTemplate from "#v/components/form/save-modal-template/index.vue";
 import { useFlowApi, useFormSubmission, useFormValues } from "#v/composables";
 import { toRef } from "vue";
 const props = defineProps({
@@ -18,7 +18,7 @@ const { onSubmit } = useFormSubmission(
 </script>
 
 <template>
-  <FormSaveModelTemplate
+  <FormSaveModalTemplate
     title="流程信息"
     :on-close="(ok) => emit('close', ok)"
     :fields="[

package/dist/runtime/components/sys/issue-record/SaveModal.vue

@@ -1,6 +1,6 @@
 <script setup>
 import * as z from "zod";
-import FormSaveModelTemplateWithApi from "#v/components/form/save-model-template/WithApi.vue";
+import FormSaveModalTemplateWithApi from "#v/components/form/save-modal-template/WithApi.vue";
 import { useIssueRecordApi } from "#v/composables";
 defineProps({
   model: { type: Object, required: true }
@@ -9,7 +9,7 @@ const emit = defineEmits(["close", "save"]);
 </script>
 
 <template>
-  <FormSaveModelTemplateWithApi
+  <FormSaveModalTemplateWithApi
     title="改进建议"
     description="您可以针对该网页提出任何改进建议或直接联系chenrn@mail.veken.com"
     :on-close="(ok) => emit('close', ok)"

package/dist/runtime/components/sys/job-title/SaveModal.vue

@@ -1,6 +1,6 @@
 <script setup>
 import * as z from "zod";
-import FormSaveModelTemplateWithApi from "#v/components/form/save-model-template/WithApi.vue";
+import FormSaveModalTemplateWithApi from "#v/components/form/save-modal-template/WithApi.vue";
 import { useJobTitleApi } from "#v/composables";
 defineProps({
   model: { type: Object, required: true }
@@ -9,7 +9,7 @@ const emit = defineEmits(["close", "save"]);
 </script>
 
 <template>
-  <FormSaveModelTemplateWithApi
+  <FormSaveModalTemplateWithApi
     title="职位信息"
     :on-close="(ok) => emit('close', ok)"
     :on-save="(model) => emit('save', model)"

package/dist/runtime/components/sys/menu/SaveModal.vue

@@ -1,6 +1,6 @@
 <script setup>
 import * as z from "zod";
-import FormSaveModelTemplate from "#v/components/form/save-model-template/index.vue";
+import FormSaveModalTemplate from "#v/components/form/save-modal-template/index.vue";
 import { useMenuApi, useFormSubmission, useFormValues } from "#v/composables";
 import { toRef } from "vue";
 import { menuTypeOptions } from "#v/constants";
@@ -20,7 +20,7 @@ const { onSubmit } = useFormSubmission(
 </script>
 
 <template>
-  <FormSaveModelTemplate
+  <FormSaveModalTemplate
     title="菜单信息"
     :on-close="(ok) => emit('close', ok)"
     :fields="[

package/dist/runtime/components/sys/role/SaveModal.vue

@@ -1,6 +1,6 @@
 <script setup>
 import * as z from "zod";
-import FormSaveModelTemplate from "#v/components/form/save-model-template/index.vue";
+import FormSaveModalTemplate from "#v/components/form/save-modal-template/index.vue";
 import TablePermissionTab from "#v/components/table/permission/TablePermissionTab.vue";
 import { useFormSubmission, useFormValues, useMenuApi, useRoleApi } from "#v/composables";
 import { computed, onMounted, ref, toRef } from "vue";
@@ -86,7 +86,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <FormSaveModelTemplate
+  <FormSaveModalTemplate
     title="角色信息"
     :on-close="(ok) => emit('close', ok)"
     :fields="fields"
@@ -103,5 +103,5 @@ onMounted(async () => {
         <TablePermissionTab v-model="tablePermissions" />
       </div>
     </template>
-  </FormSaveModelTemplate>
+  </FormSaveModalTemplate>
 </template>

package/dist/runtime/components/sys/table/SaveModal.vue

@@ -1,6 +1,6 @@
 <script setup>
 import * as z from "zod";
-import FormSaveModelTemplate from "#v/components/form/save-model-template/index.vue";
+import FormSaveModalTemplate from "#v/components/form/save-modal-template/index.vue";
 import TableColumnList from "./TableColumnList.vue";
 import { useFormSubmission, useFormValues, useTableApi } from "#v/composables";
 import { computed, ref, toRef } from "vue";
@@ -40,7 +40,7 @@ function updateModelValue(newVal) {
 </script>
 
 <template>
-  <FormSaveModelTemplate
+  <FormSaveModalTemplate
     title="Table"
     :on-close="(ok) => emit('close', ok)"
     :fields="fields"
@@ -52,5 +52,5 @@ function updateModelValue(newVal) {
     <template #after-form>
       <TableColumnList ref="columnListRef" :initial-columns="model.columns" />
     </template>
-  </FormSaveModelTemplate>
+  </FormSaveModalTemplate>
 </template>

package/dist/runtime/components/sys/table/TableColumnModal.vue

@@ -1,6 +1,6 @@
 <script setup>
 import * as z from "zod";
-import FormSaveModelTemplate from "#v/components/form/save-model-template/index.vue";
+import FormSaveModalTemplate from "#v/components/form/save-modal-template/index.vue";
 import { useFormValues } from "#v/composables";
 import { computed, toRef } from "vue";
 const props = defineProps({
@@ -25,7 +25,7 @@ const fields = computed(() => [
 </script>
 
 <template>
-  <FormSaveModelTemplate
+  <FormSaveModalTemplate
     title="列配置"
     :on-close="(ok) => emit('close', ok)"
     :fields="fields"

package/dist/runtime/components/sys/user/SaveModal.vue

@@ -2,7 +2,7 @@
 import { useFormValues, useFormSubmission, useUserApi, useRoleApi, useMenuApi, useDepartmentApi } from "#v/composables";
 import { treeifyOptions } from "#v/utils";
 import { toRef, ref, computed, onMounted } from "vue";
-import FormSaveModelTemplate from "#v/components/form/save-model-template/index.vue";
+import FormSaveModalTemplate from "#v/components/form/save-modal-template/index.vue";
 import TablePermissionTab from "#v/components/table/permission/TablePermissionTab.vue";
 import { loginTypeOptions, genderOptions, Gender } from "#v/constants";
 import * as z from "zod";
@@ -191,7 +191,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <FormSaveModelTemplate
+  <FormSaveModalTemplate
     title="用户信息"
     :on-close="(ok) => emit('close', ok)"
     :fields="fields"
@@ -208,5 +208,5 @@ onMounted(async () => {
         <TablePermissionTab v-model="tablePermissions" />
       </div>
     </template>
-  </FormSaveModelTemplate>
+  </FormSaveModalTemplate>
 </template>

package/dist/runtime/components/table/Page.vue

@@ -41,6 +41,7 @@ const props = defineProps({
   disableRowCopy: { type: Boolean, required: false },
   disableRowDeletion: { type: Boolean, required: false },
   disableRowSelection: { type: Boolean, required: false },
+  disableRowDiff: { type: Boolean, required: false },
   expandable: { type: Boolean, required: false },
   expandVNode: { type: Function, required: false },
   rowSpanColumns: { type: Array, required: false },

package/dist/runtime/components/table/index.vue

@@ -40,6 +40,7 @@ const props = defineProps({
   disableRowCopy: { type: Boolean, required: false },
   disableRowDeletion: { type: Boolean, required: false },
   disableRowSelection: { type: Boolean, required: false },
+  disableRowDiff: { type: Boolean, required: false },
   expandable: { type: Boolean, required: false },
   expandVNode: { type: Function, required: false },
   rowSpanColumns: { type: Array, required: false },

package/dist/runtime/composables/form/useForm.d.ts

@@ -1,6 +1,6 @@
 import { type Ref, type MaybeRefOrGetter } from 'vue';
 import type { ApiGroup, BaseModel, VFormFieldProps } from '#v/types';
-import type { ConfirmDiffItem } from '#v/components/form/save-model-template/ConfirmUpdateModal.vue';
+import type { ConfirmDiffItem } from '#v/components/form/save-modal-template/ConfirmUpdateModal.vue';
 export declare const useFormValues: <T>(raw: Ref<T>, defaultValues?: Partial<T>) => {
     oldValues: Ref<T>;
     newValues: Ref<T>;

package/dist/runtime/composables/table/useTable.d.ts

@@ -21,5 +21,7 @@ export interface UseTableReturn<T> {
     tblHeaderProps: ComputedRef<TableHeaderProps<T>>;
     tblPaginationProps: ComputedRef<TablePaginationProps<T>>;
     tblContextMenuItems: Ref<ContextMenuItem[]>;
+    deletingRowKey: Ref<number | null>;
+    editingRowKey: Ref<number | null>;
 }
 export declare function useTable<T>(props: VTableProps<T>): UseTableReturn<T>;

package/dist/runtime/composables/table/useTable.js

@@ -42,6 +42,7 @@ export function useTable(props) {
     disableRowCopy,
     disableRowDeletion,
     disableRowSelection,
+    disableRowDiff,
     expandable,
     rowSpanColumns,
     customRowCopyFn,
@@ -159,6 +160,7 @@ export function useTable(props) {
     disableRowUpdate,
     disableRowCopy,
     disableRowDeletion,
+    disableRowDiff,
     onEditRowFromModal,
     extraRowActions,
     useApiGroup,
@@ -166,7 +168,7 @@ export function useTable(props) {
     displayFnInDeleteModal,
     fetchList
   });
-  const { getRowActions, generateActionColumn } = rowActionsComposable;
+  const { getRowActions, generateActionColumn, deletingRowKey, editingRowKey } = rowActionsComposable;
   const columns = computed(() => {
     const newCols = [];
     if (!disableRowSelection) {
@@ -243,6 +245,22 @@ export function useTable(props) {
     if (!disableRowActions) {
       newCols.push(generateActionColumn());
     }
+    newCols.forEach((col) => {
+      const existingTdClass = col.meta?.class?.td;
+      col.meta = col.meta || {};
+      col.meta.class = col.meta.class || {};
+      col.meta.class.td = (cell) => {
+        const rowKeyValue = cell.row.original[rowKey];
+        let highlightClass = "";
+        if (deletingRowKey.value !== null && deletingRowKey.value === rowKeyValue) {
+          highlightClass = "!bg-(--ui-color-error-50) dark:!bg-(--ui-color-error-900)";
+        } else if (editingRowKey.value !== null && editingRowKey.value === rowKeyValue) {
+          highlightClass = "!bg-(--ui-color-primary-50) dark:!bg-(--ui-color-primary-900)";
+        }
+        const existingClass = typeof existingTdClass === "function" ? existingTdClass(cell) : existingTdClass || "";
+        return [existingClass, highlightClass].filter(Boolean).join(" ");
+      };
+    });
     return newCols;
   });
   const tblContextMenuItems = ref([]);
@@ -345,6 +363,8 @@ export function useTable(props) {
     tblHeaderProps,
     tblPaginationProps,
     // others
-    tblContextMenuItems
+    tblContextMenuItems,
+    deletingRowKey,
+    editingRowKey
   };
 }

package/dist/runtime/composables/table/useTableRowActions.d.ts

@@ -8,6 +8,7 @@ export declare function useTableRowActions<T>(props: {
     disableRowUpdate?: boolean;
     disableRowCopy?: boolean;
     disableRowDeletion?: boolean;
+    disableRowDiff?: boolean;
     onEditRowFromModal?: (...args: any[]) => any;
     extraRowActions?: any[];
     useApiGroup?: (...args: any[]) => any;
@@ -18,4 +19,6 @@ export declare function useTableRowActions<T>(props: {
     getRowActions: (row: TableRow<T>) => DropdownMenuItem[];
     generateActionColumn: () => VColumn<T>;
     actionLoadingRowIdxSet: import("vue").Ref<Set<number> & Omit<Set<number>, keyof Set<any>>, Set<number> | (Set<number> & Omit<Set<number>, keyof Set<any>>)>;
+    deletingRowKey: import("vue").Ref<number | null, number | null>;
+    editingRowKey: import("vue").Ref<number | null, number | null>;
 };

package/dist/runtime/composables/table/useTableRowActions.js

@@ -13,6 +13,7 @@ export function useTableRowActions(props) {
     disableRowUpdate,
     disableRowCopy,
     disableRowDeletion,
+    disableRowDiff,
     onEditRowFromModal,
     extraRowActions,
     useApiGroup,
@@ -25,6 +26,8 @@ export function useTableRowActions(props) {
   const updateDiffModal = overlay.create(UpdateDiffModal);
   const apiGroup = useApiGroup?.();
   const actionLoadingRowIdxSet = ref(/* @__PURE__ */ new Set());
+  const deletingRowKey = ref(null);
+  const editingRowKey = ref(null);
   function getRowActions(row) {
     const actionItems = [];
     if (!disableRowUpdate && onEditRowFromModal) {
@@ -32,9 +35,14 @@ export function useTableRowActions(props) {
         label: "\u7F16\u8F91",
         icon: "i-lucide-clipboard-pen-line",
         onClick: async () => {
-          const result = await onEditRowFromModal(row.original);
-          if (result) {
-            await fetchList();
+          editingRowKey.value = row.original[rowKey];
+          try {
+            const result = await onEditRowFromModal(row.original);
+            if (result) {
+              await fetchList();
+            }
+          } finally {
+            editingRowKey.value = null;
           }
         }
       });
@@ -94,7 +102,7 @@ export function useTableRowActions(props) {
     extraRowActions?.forEach((action) => {
       actionItems.push(buildActionItem(action));
     });
-    if (tableName) {
+    if (tableName && !disableRowDiff) {
       if (actionItems.length > 0 && !disableRowDeletion) {
         actionItems.push({ type: "separator" });
       }
@@ -120,14 +128,19 @@ export function useTableRowActions(props) {
         icon: "i-lucide-trash-2",
         color: "error",
         onSelect: async () => {
-          const result = await deleteModal.open({
-            ids: [row.original[rowKey]],
-            models: [row.original],
-            displayFn: displayFnInDeleteModal,
-            onDelete: (ids) => apiGroup?.batchDelete({ ids })
-          }).result;
-          if (result) {
-            await fetchList();
+          deletingRowKey.value = row.original[rowKey];
+          try {
+            const result = await deleteModal.open({
+              ids: [row.original[rowKey]],
+              models: [row.original],
+              displayFn: displayFnInDeleteModal,
+              onDelete: (ids) => apiGroup?.batchDelete({ ids })
+            }).result;
+            if (result) {
+              await fetchList();
+            }
+          } finally {
+            deletingRowKey.value = null;
           }
         }
       });
@@ -185,6 +198,8 @@ export function useTableRowActions(props) {
   return {
     getRowActions,
     generateActionColumn,
-    actionLoadingRowIdxSet
+    actionLoadingRowIdxSet,
+    deletingRowKey,
+    editingRowKey
   };
 }

package/dist/runtime/composables/table/useTableView.d.ts

@@ -23,5 +23,7 @@ export interface UseProTableViewReturn<T> {
         th: string;
         td: string;
     }>;
+    deletingRowKey: Ref<number | null>;
+    editingRowKey: Ref<number | null>;
 }
 export declare function useProTableView<T>(props: VTableProps<T>): UseProTableViewReturn<T>;

package/dist/runtime/composables/table/useTableView.js

@@ -27,7 +27,9 @@ export function useProTableView(props) {
     tblWhereQueryProps,
     tblHeaderProps,
     tblPaginationProps,
-    tblContextMenuItems
+    tblContextMenuItems,
+    deletingRowKey,
+    editingRowKey
   } = useTable(props);
   const thClass = computed(() => {
     const classList = [];
@@ -145,6 +147,8 @@ export function useProTableView(props) {
     tableWidth,
     updateTableWidth,
     tblClasses,
-    tblUi
+    tblUi,
+    deletingRowKey,
+    editingRowKey
   };
 }

package/dist/runtime/types/components/table/index.d.ts

@@ -98,6 +98,7 @@ export type VTableProps<T> = {
     disableRowCopy?: boolean;
     disableRowDeletion?: boolean;
     disableRowSelection?: boolean;
+    disableRowDiff?: boolean;
     expandable?: boolean;
     expandVNode?: (row: T) => VNode;
     rowSpanColumns?: (keyof T)[];

package/package.json

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