v-nuxt-ui 0.2.25 → 0.2.26

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;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, h } from "vue";
+import { markRaw } from "vue";
 import { defu } from "defu";
 import { useOverlay } from "@nuxt/ui/composables";
 import UButton from "@nuxt/ui/components/Button.vue";
@@ -21,6 +21,8 @@ const props = defineProps({
   fetchList: { type: Function, required: true },
   onEditRowFromModal: { type: Function, required: false },
   selectedIds: { type: Array, required: false },
+  selectedModels: { type: Array, required: false },
+  displayFnInDeleteModal: { type: Function, required: false },
   disableCreation: { type: Boolean, required: false },
   disableWhereQuery: { type: Boolean, required: false },
   whereQueryProps: { type: Object, required: true },
@@ -36,190 +38,186 @@ const props = defineProps({
 });
 const defaultNewRow = { id: 0 };
 const overlay = useOverlay();
-const deleteModal = overlay.create(DeleteModal);
-const settingsModal = overlay.create(TableHeaderSettings);
-const excelExportModal = overlay.create(TableExcelExportModal);
-const oprButtons = computed(() => {
-  const defaultButtons = props.oprOrder.map((opr) => {
-    switch (opr) {
-      case "create":
-        if (props.disableCreation) return null;
-        return h(
-          UButton,
-          {
-            icon: "i-lucide-plus",
-            size: props.size,
-            onClick: async () => {
-              const result = await props.onEditRowFromModal?.(props.onNew?.() ?? defaultNewRow);
-              if (result) {
-                props.fetchList();
-              }
-            }
-          },
-          () => "\u65B0\u589E"
-        );
-      case "refresh":
-        return h(
-          UButton,
-          {
-            icon: "i-lucide-refresh-ccw",
-            size: props.size,
-            color: "neutral",
-            loading: props.fetching,
-            variant: "outline",
-            onClick: () => props.fetchList()
-          },
-          () => "\u5237\u65B0"
-        );
-      case "whereQuery":
-        if (props.disableWhereQuery) return null;
-        return h(
-          UChip,
-          { show: !props.whereQueryProps.isWhereQueryValueEmpty },
-          () => h(
-            UButton,
-            {
-              icon: "i-lucide-list-filter",
-              size: props.size,
-              color: props.whereQueryProps.whereQueryOpen ? "primary" : "neutral",
-              loading: props.fetching,
-              variant: "outline",
-              onClick: () => {
-                props.whereQueryProps.onUpdateWhereQueryOpen?.(!props.whereQueryProps.whereQueryOpen);
-              }
-            },
-            () => "\u67E5\u8BE2"
-          )
-        );
-      case "orderQuery":
-        if (props.disableOrderQuery) return null;
-        return h(
-          TableQueryOrder,
-          { ...props.orderQueryProps, size: props.size }
-        );
-      case "settings":
-        if (props.disableSettings) return null;
-        return props.rawBizColumns && props.rawBizColumns.length > 0 && props.onUpdateBizColumns && h(
-          UButton,
-          {
-            icon: "i-lucide-settings",
-            size: props.size,
-            color: "neutral",
-            variant: "outline",
-            onClick: async () => {
-              if (!props.onUpdateBizColumns) return;
-              const updateFn = props.onUpdateBizColumns;
-              await settingsModal.open({
-                tblName: props.name,
-                rawBizColumns: props.rawBizColumns,
-                // 列数据由父组件创建（VColumn<T>），模态框仅重排顺序后返回，运行时类型不变
-                onUpdateBizColumns: ((cols) => updateFn(cols))
-              });
-            }
-          },
-          () => "\u8BBE\u7F6E"
-        );
-      case "exportExcel": {
-        if (!props.exportExcel) return null;
-        const exportButton = h(
-          UButton,
-          {
-            icon: "i-lucide-sheet",
-            size: props.size,
-            color: "neutral",
-            variant: "outline",
-            onClick: async () => {
-              await excelExportModal.open({
-                columns: props.rawBizColumns,
-                filename: props.exportExcel.filename,
-                filenameWithDateTime: props.exportExcel.filenameWithDateTime,
-                listFn: props.apiGroup?.().countAndList,
-                whereQueryOptions: props.whereQueryProps.whereOptions,
-                extraWhereQueryInitValues: defu(props.extraWhereQueryInitValues, props.exportExcel.extraWhereQueryInitValues)
-              });
-            }
-          },
-          () => "\u5BFC\u51FA"
-        );
-        if (!props.exportExcel.permissionKey) {
-          return exportButton;
-        }
-        return h(PermissionWrapper, { permission: props.exportExcel.permissionKey }, {
-          default: () => exportButton
-        });
-      }
-      case "batchDelete":
-        if (props.disableBatchDeletion) return null;
-        return props.selectedIds && props.selectedIds.length > 0 && h(
-          UButton,
-          {
-            icon: "i-lucide-trash-2",
-            size: props.size,
-            color: "error",
-            variant: "outline",
-            onClick: async () => {
-              const result = await deleteModal.open({
-                ids: props.selectedIds,
-                onDelete: (ids) => props.apiGroup?.().batchDelete({ ids })
-              }).result;
-              if (result) {
-                await props.fetchList();
-              }
-            }
-          },
-          {
-            default: () => "\u6279\u91CF\u5220\u9664",
-            trailing: () => h(UKbd, { size: "sm" }, () => props.selectedIds?.length ?? 0)
-          }
-        );
-      default:
-        return null;
-    }
+const deleteModal = markRaw(overlay.create(DeleteModal));
+const settingsModal = markRaw(overlay.create(TableHeaderSettings));
+const excelExportModal = markRaw(overlay.create(TableExcelExportModal));
+function omitOnClick(button) {
+  const { onClick: _, ...rest } = button;
+  return rest;
+}
+async function handleCreate() {
+  const result = await props.onEditRowFromModal?.(props.onNew?.() ?? defaultNewRow);
+  if (result) {
+    props.fetchList();
+  }
+}
+async function handleSettings() {
+  if (!props.onUpdateBizColumns) return;
+  const updateFn = props.onUpdateBizColumns;
+  await settingsModal.open({
+    tblName: props.name,
+    rawBizColumns: props.rawBizColumns,
+    onUpdateBizColumns: ((cols) => updateFn(cols))
   });
-  const buttons = [
-    ...props.extraButtons?.filter((btn) => btn.appendTo === "left")?.filter((btn) => btn.withBatchData ? props.selectedIds && props.selectedIds.length > 0 : true).map((btn) => h(
-      UButton,
-      {
-        ...btn.button,
-        onClick: async (e) => {
-          if (btn.withBatchData && props.selectedIds && btn.batchFn) {
-            await btn.batchFn(props.selectedIds);
-            await props.fetchList();
-          }
-          if (Array.isArray(btn.button.onClick)) {
-            btn.button.onClick.forEach((fn) => fn?.(e));
-          } else {
-            btn.button.onClick?.(e);
-          }
-        }
-      }
-    )) ?? [],
-    ...defaultButtons,
-    ...props.extraButtons?.filter((btn) => btn.appendTo === "right")?.filter((btn) => btn.withBatchData ? props.selectedIds && props.selectedIds.length > 0 : true).map((btn) => h(
-      UButton,
-      {
-        ...btn.button,
-        onClick: async (e) => {
-          if (btn.withBatchData && props.selectedIds && btn.batchFn) {
-            await btn.batchFn(props.selectedIds);
-          }
-          if (Array.isArray(btn.button.onClick)) {
-            btn.button.onClick.forEach((fn) => fn?.(e));
-          } else {
-            btn.button.onClick?.(e);
-          }
-        }
-      }
-    )) ?? []
-  ];
-  return h(
-    "div",
-    { class: "flex flex-wrap items-center gap-3" },
-    buttons
-  );
-});
+}
+async function handleExportExcel() {
+  await excelExportModal.open({
+    columns: props.rawBizColumns,
+    filename: props.exportExcel.filename,
+    filenameWithDateTime: props.exportExcel.filenameWithDateTime,
+    listFn: props.apiGroup?.().countAndList,
+    whereQueryOptions: props.whereQueryProps.whereOptions,
+    extraWhereQueryInitValues: defu(props.extraWhereQueryInitValues, props.exportExcel.extraWhereQueryInitValues)
+  });
+}
+async function handleBatchDelete() {
+  const result = await deleteModal.open({
+    ids: props.selectedIds,
+    models: props.selectedModels,
+    displayFn: props.displayFnInDeleteModal,
+    onDelete: (ids) => props.apiGroup?.().batchDelete({ ids })
+  }).result;
+  if (result) {
+    await props.fetchList();
+  }
+}
+async function onLeftExtraButtonClick(btn, e) {
+  if (btn.withBatchData && props.selectedIds && btn.batchFn) {
+    await btn.batchFn(props.selectedIds);
+    await props.fetchList();
+  }
+  const originalOnClick = btn.button.onClick;
+  if (Array.isArray(originalOnClick)) {
+    originalOnClick.forEach((fn) => fn?.(e));
+  } else {
+    originalOnClick?.(e);
+  }
+}
+async function onRightExtraButtonClick(btn, e) {
+  if (btn.withBatchData && props.selectedIds && btn.batchFn) {
+    await btn.batchFn(props.selectedIds);
+  }
+  const originalOnClick = btn.button.onClick;
+  if (Array.isArray(originalOnClick)) {
+    originalOnClick.forEach((fn) => fn?.(e));
+  } else {
+    originalOnClick?.(e);
+  }
+}
 </script>
 
 <template>
-  <component :is="oprButtons" />
+  <div class="flex flex-wrap items-center gap-3">
+    <template v-for="(btn, i) in extraButtons" :key="`extra-left-${i}`">
+      <UButton
+        v-if="(!btn.withBatchData || selectedIds?.length) && btn.appendTo === 'left'"
+        v-bind="omitOnClick(btn.button)"
+        @click="(e) => onLeftExtraButtonClick(btn, e)"
+      />
+    </template>
+
+    <template v-for="opr in oprOrder" :key="opr">
+      <UButton
+        v-if="opr === 'create' && !disableCreation"
+        icon="i-lucide-plus"
+        :size="size"
+        @click="handleCreate"
+      >
+        新增
+      </UButton>
+
+      <UButton
+        v-if="opr === 'refresh'"
+        icon="i-lucide-refresh-ccw"
+        :size="size"
+        color="neutral"
+        :loading="fetching"
+        variant="outline"
+        @click="fetchList"
+      >
+        刷新
+      </UButton>
+
+      <UChip
+        v-if="opr === 'whereQuery' && !disableWhereQuery"
+        :show="!whereQueryProps.isWhereQueryValueEmpty"
+      >
+        <UButton
+          icon="i-lucide-list-filter"
+          :size="size"
+          :color="whereQueryProps.whereQueryOpen ? 'primary' : 'neutral'"
+          :loading="fetching"
+          variant="outline"
+          @click="whereQueryProps.onUpdateWhereQueryOpen?.(!whereQueryProps.whereQueryOpen)"
+        >
+          查询
+        </UButton>
+      </UChip>
+
+      <TableQueryOrder
+        v-if="opr === 'orderQuery' && !disableOrderQuery"
+        v-bind="orderQueryProps"
+        :size="size"
+      />
+
+      <UButton
+        v-if="opr === 'settings' && !disableSettings && rawBizColumns?.length && onUpdateBizColumns"
+        icon="i-lucide-settings"
+        :size="size"
+        color="neutral"
+        variant="outline"
+        @click="handleSettings"
+      >
+        设置
+      </UButton>
+
+      <template v-if="opr === 'exportExcel' && exportExcel">
+        <PermissionWrapper v-if="exportExcel.permissionKey" :permission="exportExcel.permissionKey">
+          <UButton
+            icon="i-lucide-sheet"
+            :size="size"
+            color="neutral"
+            variant="outline"
+            @click="handleExportExcel"
+          >
+            导出
+          </UButton>
+        </PermissionWrapper>
+        <UButton
+          v-else
+          icon="i-lucide-sheet"
+          :size="size"
+          color="neutral"
+          variant="outline"
+          @click="handleExportExcel"
+        >
+          导出
+        </UButton>
+      </template>
+
+      <UButton
+        v-if="opr === 'batchDelete' && !disableBatchDeletion && selectedIds?.length"
+        icon="i-lucide-trash-2"
+        :size="size"
+        color="error"
+        variant="outline"
+        @click="handleBatchDelete"
+      >
+        批量删除
+        <template #trailing>
+          <UKbd size="sm">
+            {{ selectedIds?.length ?? 0 }}
+          </UKbd>
+        </template>
+      </UButton>
+    </template>
+
+    <template v-for="(btn, i) in extraButtons" :key="`extra-right-${i}`">
+      <UButton
+        v-if="(!btn.withBatchData || selectedIds?.length) && btn.appendTo === 'right'"
+        v-bind="omitOnClick(btn.button)"
+        @click="(e) => onRightExtraButtonClick(btn, e)"
+      />
+    </template>
+  </div>
 </template>

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

@@ -43,7 +43,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/composables/form/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useForm.js';
+export * from './useFormUpdate.js';

package/dist/runtime/composables/form/index.js

@@ -0,0 +1,2 @@
+export * from "./useForm.js";
+export * from "./useFormUpdate.js";

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

@@ -0,0 +1,21 @@
+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';
+export declare const useFormValues: <T>(raw: Ref<T>, defaultValues?: Partial<T>) => {
+    oldValues: Ref<T>;
+    newValues: Ref<T>;
+};
+export declare const useFormSubmission: <T extends BaseModel>(oldValues: Ref<T>, newValues: Ref<T>, close: (ok: boolean) => void, save: (model: T) => void, apiGroup: () => ApiGroup<T>, arrayTypeFieldKeys?: (keyof T)[], rowKey?: keyof T, versionKey?: keyof T, getExtraFields?: () => Record<string, any>) => {
+    onSubmit: () => Promise<void>;
+};
+export declare const useConfirmDiff: (fields: MaybeRefOrGetter<VFormFieldProps[]>, diffItems: MaybeRefOrGetter<ConfirmDiffItem[]>, oldModelValue: MaybeRefOrGetter<Record<string, unknown>>, newModelValue: MaybeRefOrGetter<Record<string, unknown>>) => {
+    diffedItems: import("vue").ComputedRef<{
+        oldDisplay: string;
+        newDisplay: string;
+        parts: import("diff").ChangeObject<string>[];
+        field: VFormFieldProps | undefined;
+        fieldName: string;
+        oldValue: unknown;
+        newValue: unknown;
+    }[]>;
+};

package/dist/runtime/composables/{useForm.js → form/useForm.js}

@@ -1,6 +1,7 @@
-import { ref, watch } from "vue";
+import { ref, watch, computed, toValue } from "vue";
 import { defu } from "defu";
 import { getObjWithModifiedFields } from "#v/utils";
+import { resolveDisplayValue, smartDiff } from "#v/composables";
 import { useToast } from "@nuxt/ui/composables";
 export const useFormValues = (raw, defaultValues) => {
   const oldValues = ref({});
@@ -62,3 +63,24 @@ export const useFormSubmission = (oldValues, newValues, close, save, apiGroup, a
   }
   return { onSubmit };
 };
+export const useConfirmDiff = (fields, diffItems, oldModelValue, newModelValue) => {
+  const resolvedItems = computed(
+    () => toValue(diffItems).map((item) => ({
+      ...item,
+      field: toValue(fields).find((f) => f.name === item.fieldName)
+    })).filter((item) => item.field != null)
+  );
+  const diffedItems = computed(
+    () => resolvedItems.value.map((item) => {
+      const oldDisplay = resolveDisplayValue(item.field, item.oldValue, toValue(oldModelValue));
+      const newDisplay = resolveDisplayValue(item.field, item.newValue, toValue(newModelValue));
+      return {
+        ...item,
+        oldDisplay,
+        newDisplay,
+        parts: smartDiff(oldDisplay, newDisplay)
+      };
+    })
+  );
+  return { diffedItems };
+};

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

@@ -0,0 +1,6 @@
+import type { VFormFieldProps } from '#v/types';
+export declare function resolveSelectLabel(rawVal: unknown, items: readonly any[]): string;
+export declare function resolveDisplayValue(field: VFormFieldProps, rawVal: unknown, modelSource: Record<string, unknown>): string;
+export declare function smartDiff(oldStr: string, newStr: string): import("diff").ChangeObject<string>[];
+export declare const diffEligibleTypes: Set<string>;
+export declare function formatValue(val: unknown): string;