v-nuxt-ui 0.2.25 → 0.2.27

package/dist/runtime/components/sys/job-title/{CreateModal.vue → SaveModal.vue}

@@ -1,6 +1,6 @@
 <script setup>
 import * as z from "zod";
-import FormCreateModalTemplateWithApi from "#v/components/form/create-modal-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>
-  <FormCreateModalTemplateWithApi
+  <FormSaveModalTemplateWithApi
     title="职位信息"
     :on-close="(ok) => emit('close', ok)"
     :on-save="(model) => emit('save', model)"

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

@@ -1,13 +1,13 @@
 <script setup>
 import { useOverlay } from "@nuxt/ui/composables";
 import { useJobTitleApi } from "#v/composables";
-import SysJobTitlesCreateModal from "./CreateModal.vue";
+import SysJobTitlesSaveModal from "./SaveModal.vue";
 import { getOprColumns, booleanOptions } from "#v/constants";
 import UBadge from "@nuxt/ui/components/Badge.vue";
 import { h } from "vue";
 import TablePage from "#v/components/table/Page.vue";
 const overlay = useOverlay();
-const createModal = overlay.create(SysJobTitlesCreateModal);
+const saveModal = overlay.create(SysJobTitlesSaveModal);
 const columns = [
   {
     accessorKey: "name",
@@ -55,13 +55,14 @@ const columns = [
 
 <template>
   <TablePage
-    name="sys-job-title"
+    name="job_titles"
     cn-name="职位信息"
     :use-api-group="useJobTitleApi"
     :biz-columns="columns"
     :extra-order-query-options="[
   { field: 'createdAt', label: '\u521B\u5EFA\u65F6\u95F4', defaultOpr: 'desc' }
 ]"
-    @edit-row-from-modal="async (row) => await createModal.open({ model: row }).result"
+    :display-fn-in-delete-modal="(model) => model.name"
+    @edit-row-from-modal="async (row) => await saveModal.open({ model: row }).result"
   />
 </template>

package/dist/runtime/components/sys/menu/{CreateModal.vue → SaveModal.vue}

@@ -1,6 +1,6 @@
 <script setup>
 import * as z from "zod";
-import FormCreateModalTemplate from "#v/components/form/create-modal-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>
-  <FormCreateModalTemplate
+  <FormSaveModalTemplate
     title="菜单信息"
     :on-close="(ok) => emit('close', ok)"
     :fields="[
@@ -53,6 +53,7 @@ const { onSubmit } = useFormSubmission(
   { name: 'isAdmin', type: 'button-switch', label: '\u662F\u5426\u662F\u7CFB\u7EDF\u83DC\u5355', colSpan: '12', zodType: z.boolean() }
 ]"
     :model-value="newValues"
+    :old-model-value="oldValues"
     @update-model-value="(newVal) => newValues = { id: 0, ...newVal }"
     @submit="onSubmit"
   />

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

@@ -1,13 +1,13 @@
 <script setup>
 import { useOverlay } from "@nuxt/ui/composables";
 import { useMenuApi } from "#v/composables";
-import SysMenusCreateModal from "./CreateModal.vue";
+import SysMenusSaveModal from "./SaveModal.vue";
 import { getOprColumns } from "#v/constants";
 import UBadge from "@nuxt/ui/components/Badge.vue";
 import TablePage from "#v/components/table/Page.vue";
 import { h } from "vue";
 const overlay = useOverlay();
-const createModal = overlay.create(SysMenusCreateModal);
+const saveModal = overlay.create(SysMenusSaveModal);
 const columns = [
   {
     accessorKey: "type",
@@ -82,7 +82,7 @@ const columns = [
 
 <template>
   <TablePage
-    name="sys-menu"
+    name="menus"
     cn-name="菜单信息"
     :use-api-group="useMenuApi"
     :biz-columns="columns"
@@ -94,8 +94,9 @@ const columns = [
     :extra-row-actions="[{
   icon: 'i-lucide-clipboard-plus',
   label: '\u4EE5\u6B64\u4F5C\u4E3A\u7236\u83DC\u5355\u590D\u5236',
-  fnWithModal: async (raw) => await createModal.open({ model: useMenuApi().copyAsParent?.(raw) ?? { id: 0 } }).result
+  fnWithModal: async (raw) => await saveModal.open({ model: useMenuApi().copyAsParent?.(raw) ?? { id: 0 } }).result
 }]"
-    @edit-row-from-modal="async (row) => await createModal.open({ model: row }).result"
+    :display-fn-in-delete-modal="(model) => `${model.name} ${model.staticRouteKeys?.join(',')}`"
+    @edit-row-from-modal="async (row) => await saveModal.open({ model: row }).result"
   />
 </template>

package/dist/runtime/components/sys/role/{CreateModal.vue → SaveModal.vue}

@@ -1,6 +1,6 @@
 <script setup>
 import * as z from "zod";
-import FormCreateModalTemplate from "#v/components/form/create-modal-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";
@@ -9,7 +9,7 @@ const props = defineProps({
   model: { type: Object, required: true }
 });
 const emit = defineEmits(["close", "save"]);
-const { oldValues, newValues } = useFormValues(toRef(props.model), { id: 0, disabled: false, isAdmin: false });
+const { oldValues, newValues } = useFormValues(toRef(props.model), { id: 0, disabled: false, isAdmin: false, menus: [] });
 const { onSubmit } = useFormSubmission(
   toRef(oldValues),
   toRef(newValues),
@@ -86,19 +86,22 @@ onMounted(async () => {
 </script>
 
 <template>
-  <FormCreateModalTemplate
+  <FormSaveModalTemplate
     title="角色信息"
     :on-close="(ok) => emit('close', ok)"
     :fields="fields"
     :model-value="newValues"
+    :old-model-value="oldValues"
     @update-model-value="updateModelValue"
     @submit="onSubmit"
   >
     <template #after-form>
       <div class="border-t pt-4 mt-4">
-        <div class="font-semibold mb-2">Table 权限</div>
+        <div class="font-semibold mb-2">
+          Table 权限
+        </div>
         <TablePermissionTab v-model="tablePermissions" />
       </div>
     </template>
-  </FormCreateModalTemplate>
+  </FormSaveModalTemplate>
 </template>

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

@@ -1,13 +1,13 @@
 <script setup>
 import { useOverlay } from "@nuxt/ui/composables";
 import { useRoleApi } from "#v/composables";
-import SysRolesCreateModal from "./CreateModal.vue";
+import SysRolesSaveModal from "./SaveModal.vue";
 import { booleanOptions, getOprColumns } from "#v/constants";
 import UBadge from "@nuxt/ui/components/Badge.vue";
 import TablePage from "#v/components/table/Page.vue";
 import { h } from "vue";
 const overlay = useOverlay();
-const createModal = overlay.create(SysRolesCreateModal);
+const saveModal = overlay.create(SysRolesSaveModal);
 const columns = [
   {
     accessorKey: "name",
@@ -60,10 +60,11 @@ const columns = [
 
 <template>
   <TablePage
-    name="sys-role"
+    name="roles"
     cn-name="角色信息"
     :use-api-group="useRoleApi"
     :biz-columns="columns"
-    @edit-row-from-modal="async (row) => await createModal.open({ model: row }).result"
+    :display-fn-in-delete-modal="(model) => model.name"
+    @edit-row-from-modal="async (row) => await saveModal.open({ model: row }).result"
   />
 </template>

package/dist/runtime/components/sys/table/{CreateModal.vue → SaveModal.vue}

@@ -1,6 +1,6 @@
 <script setup>
 import * as z from "zod";
-import FormCreateModalTemplate from "#v/components/form/create-modal-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,16 +40,17 @@ function updateModelValue(newVal) {
 </script>
 
 <template>
-  <FormCreateModalTemplate
+  <FormSaveModalTemplate
     title="Table"
     :on-close="(ok) => emit('close', ok)"
     :fields="fields"
     :model-value="newValues"
+    :old-model-value="oldValues"
     @update-model-value="updateModelValue"
     @submit="onSubmit"
   >
     <template #after-form>
       <TableColumnList ref="columnListRef" :initial-columns="model.columns" />
     </template>
-  </FormCreateModalTemplate>
+  </FormSaveModalTemplate>
 </template>

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

@@ -3,10 +3,10 @@ import { useOverlay } from "@nuxt/ui/composables";
 import { useTableApi, useTableColumnApi, useTablePermissionApi } from "#v/composables/api";
 import { getOprColumns } from "#v/constants";
 import TablePage from "#v/components/table/Page.vue";
-import CreateModal from "./CreateModal.vue";
+import SaveModal from "./SaveModal.vue";
 import { h, ref, watch } from "vue";
 const overlay = useOverlay();
-const createModal = overlay.create(CreateModal);
+const saveModal = overlay.create(SaveModal);
 const tableMeta = ref({});
 const columns = [
   {
@@ -93,14 +93,14 @@ watch(
 <template>
   <TablePage
     ref="tablePageRef"
-    name="sys-table"
+    name="tables"
     cn-name="Table 配置"
     :use-api-group="useTableApi"
     :biz-columns="columns"
     :expandable="true"
     :expand-v-node="getExpandVNode"
     @edit-row-from-modal="async (row) => {
-  const result = await createModal.open({ model: { ...row } }).result;
+  const result = await saveModal.open({ model: { ...row } }).result;
   return result === true;
 }"
   />

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

@@ -1,6 +1,6 @@
 <script setup>
 import * as z from "zod";
-import FormCreateModalTemplate from "#v/components/form/create-modal-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({
@@ -8,7 +8,7 @@ const props = defineProps({
   onSaveColumn: { type: Function, required: true }
 });
 const emit = defineEmits(["close"]);
-const { newValues } = useFormValues(toRef(props.column), { id: 0 });
+const { oldValues, newValues } = useFormValues(toRef(props.column), { id: 0 });
 const fixedItems = [
   { label: "\u4E0D\u56FA\u5B9A", value: "" },
   { label: "\u5DE6\u4FA7\u56FA\u5B9A", value: "left" },
@@ -25,11 +25,12 @@ const fields = computed(() => [
 </script>
 
 <template>
-  <FormCreateModalTemplate
+  <FormSaveModalTemplate
     title="列配置"
     :on-close="(ok) => emit('close', ok)"
     :fields="fields"
     :model-value="newValues"
+    :old-model-value="oldValues"
     @update-model-value="(newVal) => newValues = { id: 0, ...newVal }"
     @submit="async () => {
   props.onSaveColumn(newValues);

package/dist/runtime/components/sys/user/{CreateModal.vue → 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 FormCreateModalTemplate from "#v/components/form/create-modal-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,11 +191,12 @@ onMounted(async () => {
 </script>
 
 <template>
-  <FormCreateModalTemplate
+  <FormSaveModalTemplate
     title="用户信息"
     :on-close="(ok) => emit('close', ok)"
     :fields="fields"
     :model-value="newValues"
+    :old-model-value="oldValues"
     @update-model-value="updateModelValue"
     @submit="onSubmit"
   >
@@ -207,5 +208,5 @@ onMounted(async () => {
         <TablePermissionTab v-model="tablePermissions" />
       </div>
     </template>
-  </FormCreateModalTemplate>
+  </FormSaveModalTemplate>
 </template>

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

@@ -4,12 +4,12 @@ import { useOverlay } from "@nuxt/ui/composables";
 import { isEmptyString } from "#v/utils";
 import { useDepartmentApi, useRoleApi, useUserApi } from "#v/composables";
 import { booleanOptions, dateFormat, genderOptions, loginTypeOptions } from "#v/constants";
-import SysUsersCreateModal from "./CreateModal.vue";
+import SysUsersSaveModal from "./SaveModal.vue";
 import UBadge from "@nuxt/ui/components/Badge.vue";
 import TablePage from "#v/components/table/Page.vue";
 import { h } from "vue";
 const overlay = useOverlay();
-const createModal = overlay.create(SysUsersCreateModal);
+const saveModal = overlay.create(SysUsersSaveModal);
 const columns = [
   {
     accessorKey: "isResigned",
@@ -57,8 +57,8 @@ const columns = [
     filterOption: {
       type: "async-select",
       listApi: useUserApi().list,
-      likeSearchFields: ["name"],
-      labelField: "name",
+      likeSearchFields: ["nickname"],
+      labelField: "nickname",
       valueField: "id",
       multiple: true,
       defaultOpr: "in"
@@ -186,13 +186,14 @@ const columns = [
 
 <template>
   <TablePage
-    name="sys-users"
+    name="users"
     cn-name="用户信息"
     :use-api-group="useUserApi"
     :biz-columns="columns"
     :extra-order-query-options="[
   { field: 'createdAt', label: '\u521B\u5EFA\u65F6\u95F4', defaultOpr: 'desc' }
 ]"
-    @edit-row-from-modal="async (row) => await createModal.open({ model: row }).result"
+    :display-fn-in-delete-modal="(model) => model.nickname"
+    @edit-row-from-modal="async (row) => await saveModal.open({ model: row }).result"
   />
 </template>

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

@@ -44,7 +44,8 @@ const props = defineProps({
   expandable: { type: Boolean, required: false },
   expandVNode: { type: Function, required: false },
   rowSpanColumns: { type: Array, required: false },
-  customRowCopyFn: { type: Function, required: false }
+  customRowCopyFn: { type: Function, required: false },
+  displayFnInDeleteModal: { type: Function, required: false }
 });
 const {
   // data

package/dist/runtime/components/table/UpdateDiffModal.d.vue.ts

@@ -0,0 +1,14 @@
+import type { VColumn } from '#v/types';
+type __VLS_Props = {
+    tableName: string;
+    rowId: number;
+    columns: VColumn<any>[];
+    title?: string;
+};
+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/table/UpdateDiffModal.vue

@@ -0,0 +1,156 @@
+<script setup>
+import { ref, computed } from "vue";
+import { isEmptyString } from "#v/utils";
+import { diffWords } from "diff";
+import { useRowRecordApi } from "#v/composables/api";
+import { useDate } from "#v/composables";
+const props = defineProps({
+  tableName: { type: String, required: true },
+  rowId: { type: Number, required: true },
+  columns: { type: Array, required: true },
+  title: { type: String, required: false }
+});
+const emit = defineEmits(["close"]);
+const date = useDate();
+const rowRecordApi = useRowRecordApi();
+const loading = ref(false);
+const rowRecords = ref([]);
+async function fetchRowRecords() {
+  loading.value = true;
+  try {
+    const { data } = await rowRecordApi.getByTableNameAndRowId({
+      tableName: props.tableName,
+      rowId: props.rowId
+    });
+    rowRecords.value = data.value.data?.list ?? [];
+  } finally {
+    loading.value = false;
+  }
+}
+fetchRowRecords();
+function resolveHeader(key) {
+  if (!key) return "";
+  const col = props.columns.find((c) => c.accessorKey === key || c.id === key);
+  return col?.header || key;
+}
+const aggregatedRecords = computed(() => {
+  if (!rowRecords.value.length) return [];
+  const groupMap = /* @__PURE__ */ new Map();
+  for (const record of rowRecords.value) {
+    const ver = record.rowVersion;
+    if (!groupMap.has(ver)) {
+      groupMap.set(ver, {
+        rowVersion: ver,
+        createdAt: record.createdAt,
+        creator: record.creator,
+        changes: []
+      });
+    }
+    const oldVal = record.oldValue || "";
+    const newVal = record.newValue || "";
+    groupMap.get(ver).changes.push({
+      header: resolveHeader(record.key || ""),
+      oldValue: oldVal,
+      newValue: newVal,
+      parts: diffWords(oldVal, newVal)
+    });
+  }
+  return Array.from(groupMap.values()).sort((a, b) => b.rowVersion - a.rowVersion);
+});
+const timelineItems = computed(
+  () => aggregatedRecords.value.map((record) => ({
+    record,
+    icon: "i-lucide-git-commit"
+  }))
+);
+</script>
+
+<template>
+  <UModal
+    :title="title || '\u53D8\u66F4\u8BB0\u5F55'"
+    :close="{ onClick: () => emit('close', false) }"
+    :dismissible="false"
+    :ui="{ body: 'p-0!' }"
+  >
+    <template #body>
+      <!-- Loading -->
+      <div v-if="loading" class="flex items-center justify-center py-8">
+        <UIcon name="i-lucide-loader-circle" class="size-6 animate-spin text-dimmed" />
+      </div>
+
+      <!-- Timeline -->
+      <div v-else-if="timelineItems.length > 0" class="overflow-y-auto max-h-96 p-6">
+        <UTimeline
+          :items="timelineItems"
+          size="xs"
+          :ui="{ date: 'float-end' }"
+        >
+          <template #title="{ item }">
+            <div class="flex items-center gap-1">
+              <span class="font-semibold">{{ item.record.creator?.nickname || "\u672A\u77E5\u7528\u6237" }}</span>
+              <UBadge
+                :label="`v${item.record.rowVersion}`"
+                variant="subtle"
+                color="neutral"
+                size="xs"
+              />
+              <div class="ml-auto text-xs text-dimmed font-normal">
+                更新于 {{ date.formatTimeUnit(date.isoUtcStringToDateValue(item.record.createdAt), "time") }}
+              </div>
+            </div>
+          </template>
+
+          <template #description="{ item }">
+            <div class="rounded-md ring ring-default mt-2 p-3 space-y-3">
+              <div v-for="(change, idx) in item.record.changes" :key="idx">
+                <div class="text-xs font-semibold text-dimmed mb-1">
+                  {{ change.header }}
+                </div>
+                <div class="flex items-center flex-wrap gap-2">
+                  <!-- Old -->
+                  <span class="rounded-md bg-muted px-2 py-1 text-sm text-dimmed">
+                    <span v-if="change.parts.filter((part2) => !part2.added).length === 0">{{ "\xA0" }}</span>
+                    <template v-for="(part, pIdx) in change.parts" :key="pIdx">
+                      <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" />
+                  <!-- New -->
+                  <span class="rounded-md bg-elevated px-2 py-1 text-sm text-highlighted font-medium">
+                    <span v-if="change.parts.filter((part2) => !part2.removed).length === 0">{{ "\xA0" }}</span>
+                    <template v-for="(part, pIdx) in change.parts" :key="pIdx">
+                      <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>
+              </div>
+            </div>
+          </template>
+        </UTimeline>
+      </div>
+
+      <!-- Empty -->
+      <div v-else class="text-center text-dimmed py-8">
+        暂无变更记录
+      </div>
+    </template>
+    <template #footer>
+      <UButton
+        label="关闭"
+        color="neutral"
+        variant="subtle"
+        @click="emit('close', false)"
+      />
+    </template>
+  </UModal>
+</template>

package/dist/runtime/components/table/UpdateDiffModal.vue.d.ts

@@ -0,0 +1,14 @@
+import type { VColumn } from '#v/types';
+type __VLS_Props = {
+    tableName: string;
+    rowId: number;
+    columns: VColumn<any>[];
+    title?: string;
+};
+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;