v-nuxt-ui 0.2.25 → 0.2.27

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-modal-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;

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

@@ -0,0 +1,101 @@
+import dayjs from "dayjs";
+import { diffWords, diffChars } from "diff";
+import { dateFormat } from "#v/constants";
+export function resolveSelectLabel(rawVal, items) {
+  if (Array.isArray(rawVal)) {
+    return rawVal.map((v) => items.find((i) => i?.value === v)?.label ?? String(v)).join(", ") || "";
+  }
+  return items.find((i) => i?.value === rawVal)?.label ?? String(rawVal);
+}
+export function resolveDisplayValue(field, rawVal, modelSource) {
+  if (rawVal === null || rawVal === void 0) return "";
+  switch (field.type) {
+    case "switch":
+    case "button-switch":
+      return rawVal ? "\u662F" : "\u5426";
+    case "date-picker": {
+      if (typeof rawVal === "string") {
+        const d = dayjs(rawVal);
+        if (d.isValid()) return d.format(dateFormat);
+      }
+      return String(rawVal);
+    }
+    case "select": {
+      const items = field.enableEmptyOption ? [{ label: "\u65E0", value: 0 }, ...field.items ?? []] : field.items ?? [];
+      return resolveSelectLabel(rawVal, items);
+    }
+    case "multiple-select-string":
+    case "radio-select":
+      return resolveSelectLabel(rawVal, field.items ?? []);
+    case "async-select":
+    case "async-tree-select":
+    case "async-object-select": {
+      if (!field.name) return String(rawVal);
+      if (rawVal === 0) return "";
+      const labelField = field.labelField;
+      if (!labelField) return String(rawVal);
+      let model;
+      for (const v of Object.values(modelSource)) {
+        if (v && typeof v === "object" && v[labelField] !== void 0) {
+          if (String(v.id) === String(rawVal)) {
+            model = v;
+            break;
+          }
+        }
+      }
+      if (!model) {
+        model = field.initModel;
+      }
+      if (!model) return String(rawVal);
+      if (Array.isArray(model)) {
+        return model.map((m) => m && typeof m === "object" ? String(m[labelField] ?? "") : String(m)).filter(Boolean).join(", ") || "";
+      }
+      if (typeof model === "object") {
+        const label = model[labelField];
+        if (label != null) return String(label);
+      }
+      return String(rawVal);
+    }
+    case "input-string-number": {
+      const v = rawVal === 0 ? "0" : String(rawVal);
+      const trailing = field.trailingString;
+      return trailing ? `${v} ${trailing}` : v;
+    }
+    case "tree-select-transfer": {
+      if (Array.isArray(rawVal)) {
+        return rawVal.map((item) => {
+          if (item && typeof item === "object") {
+            const obj = item;
+            return String(obj.label ?? obj.name ?? "");
+          }
+          return String(item);
+        }).filter(Boolean).join(", ") || "";
+      }
+      return formatValue(rawVal);
+    }
+    default:
+      return formatValue(rawVal);
+  }
+}
+export function smartDiff(oldStr, newStr) {
+  if (!oldStr.includes(" ") && !newStr.includes(" ")) {
+    return diffChars(oldStr, newStr);
+  }
+  return diffWords(oldStr, newStr);
+}
+export const diffEligibleTypes = /* @__PURE__ */ new Set([
+  "input",
+  "dynamic-input",
+  "input-string-number",
+  "input-number",
+  "textarea",
+  "input-pwd",
+  "sql-editor",
+  "date-picker"
+]);
+export function formatValue(val) {
+  if (val === null || val === void 0) return "";
+  if (typeof val === "boolean") return val ? "\u662F" : "\u5426";
+  if (typeof val === "object") return JSON.stringify(val);
+  return String(val);
+}

package/dist/runtime/composables/index.d.ts

@@ -5,7 +5,7 @@ export * from './useApp.js';
 export * from './useBoolean.js';
 export * from './useDate.js';
 export * from './useEChart.js';
-export * from './useForm.js';
+export * from './form/index.js';
 export * from './useTheme.js';
 export * from './useSidebarMenu.js';
 export * from './usePermission.js';

package/dist/runtime/composables/index.js

@@ -5,7 +5,7 @@ export * from "./useApp.js";
 export * from "./useBoolean.js";
 export * from "./useDate.js";
 export * from "./useEChart.js";
-export * from "./useForm.js";
+export * from "./form/index.js";
 export * from "./useTheme.js";
 export * from "./useSidebarMenu.js";
 export * from "./usePermission.js";

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

@@ -44,7 +44,8 @@ export function useTable(props) {
     disableRowSelection,
     expandable,
     rowSpanColumns,
-    customRowCopyFn
+    customRowCopyFn,
+    displayFnInDeleteModal
   } = props;
   const queryComposable = useTableQuery({
     name,
@@ -96,6 +97,9 @@ export function useTable(props) {
   } = dataComposable;
   const rowSelectionComposable = useTableRowSelection(data, rowKey);
   const { rowSelection, selectedIds, clearRowSelection: _clearRowSelection } = rowSelectionComposable;
+  const selectedModels = computed(
+    () => data.value.filter((row) => selectedIds.value.includes(row[rowKey]))
+  );
   const whereQueryRef = useTemplateRef("proTableQueryWhere");
   const onFilterClick = (field) => {
     whereQueryOpen.value = true;
@@ -149,6 +153,8 @@ export function useTable(props) {
   } = columnsComposable;
   const rowActionsComposable = useTableRowActions({
     rowKey,
+    tableName: name,
+    bizColumns,
     disableRowActions,
     disableRowUpdate,
     disableRowCopy,
@@ -157,6 +163,7 @@ export function useTable(props) {
     extraRowActions,
     useApiGroup,
     customRowCopyFn,
+    displayFnInDeleteModal,
     fetchList
   });
   const { getRowActions, generateActionColumn } = rowActionsComposable;
@@ -287,6 +294,8 @@ export function useTable(props) {
     fetchList,
     onEditRowFromModal,
     selectedIds: selectedIds.value,
+    selectedModels: selectedModels.value,
+    displayFnInDeleteModal,
     disableCreation,
     disableWhereQuery,
     whereQueryProps: tblWhereQueryProps.value,

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

@@ -2,6 +2,8 @@ import type { VColumn } from '#v/types';
 import type { DropdownMenuItem, TableRow } from '@nuxt/ui';
 export declare function useTableRowActions<T>(props: {
     rowKey: keyof T;
+    tableName?: string;
+    bizColumns?: VColumn<T>[];
     disableRowActions?: boolean;
     disableRowUpdate?: boolean;
     disableRowCopy?: boolean;
@@ -10,6 +12,7 @@ export declare function useTableRowActions<T>(props: {
     extraRowActions?: any[];
     useApiGroup?: (...args: any[]) => any;
     customRowCopyFn?: (...args: any[]) => any;
+    displayFnInDeleteModal?: (model: T) => string | undefined;
     fetchList: () => Promise<void>;
 }): {
     getRowActions: (row: TableRow<T>) => DropdownMenuItem[];