v-nuxt-ui 0.2.27 → 0.2.29

package/dist/module.json

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

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

@@ -7,6 +7,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         columns: VColumn<T>[];
         whereQueryOptions: WhereQueryOption<T>[];
         extraWhereQueryInitValues?: WhereQuery<T>;
+        initWhereQuery?: WhereQuery<T>;
         listFn?(payload: Omit<QueryTemplate<T>, "selectQuery">, ...args: unknown[]): Promise<{
             data: Ref<RequestResult<PageResult<T>>>;
         }>;

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

@@ -5,7 +5,7 @@ import { defu } from "defu";
 import { useExporting } from "#v/composables/useBoolean";
 import { useDate } from "#v/composables/useDate";
 import { dateFormat, TIME_ZONE } from "#v/constants";
-import { genTableExcel } from "#v/utils";
+import { cloneJson, genTableExcel } from "#v/utils";
 import TableQueryWhere from "#v/components/table/query/where/index.vue";
 const props = defineProps({
   filename: { type: String, required: false },
@@ -13,9 +13,10 @@ const props = defineProps({
   columns: { type: Array, required: true },
   whereQueryOptions: { type: Array, required: true },
   extraWhereQueryInitValues: { type: Object, required: false },
+  initWhereQuery: { type: Object, required: false },
   listFn: { type: Function, required: false }
 });
-const whereQuery = ref();
+const whereQuery = ref(props.initWhereQuery);
 const emit = defineEmits(["close"]);
 const { exporting, startExporting, endExporting } = useExporting();
 const exportExcel = async () => {
@@ -51,14 +52,30 @@ const exportExcel = async () => {
   >
     <template #body>
       <UFormField label="筛选条件">
-        <TableQueryWhere
-          :where-query="whereQuery"
-          :where-options="whereQueryOptions"
-          :trigger-fetching="async () => {
+        <template #label>
+          <div class="flex items-center gap-1">
+            <span>筛选条件</span>
+            <UTooltip text="同步查询条件" :delay="0" :content="{ side: 'top' }">
+              <UButton
+                variant="ghost"
+                color="neutral"
+                size="xs"
+                icon="i-lucide-refresh-ccw"
+                @click="whereQuery = cloneJson(initWhereQuery)"
+              />
+            </UTooltip>
+          </div>
+        </template>
+        <div class="ring ring-default rounded-md">
+          <TableQueryWhere
+            :where-query="whereQuery"
+            :where-options="whereQueryOptions"
+            :trigger-fetching="async () => {
 }"
-          hide-query-button
-          @update-where-query="(newWhereQuery) => whereQuery = newWhereQuery"
-        />
+            hide-query-button
+            @update-where-query="(newWhereQuery) => whereQuery = newWhereQuery"
+          />
+        </div>
       </UFormField>
     </template>
     <template #footer>

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

@@ -7,6 +7,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         columns: VColumn<T>[];
         whereQueryOptions: WhereQueryOption<T>[];
         extraWhereQueryInitValues?: WhereQuery<T>;
+        initWhereQuery?: WhereQuery<T>;
         listFn?(payload: Omit<QueryTemplate<T>, "selectQuery">, ...args: unknown[]): Promise<{
             data: Ref<RequestResult<PageResult<T>>>;
         }>;

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/header/index.vue

@@ -67,7 +67,8 @@ async function handleExportExcel() {
     filenameWithDateTime: props.exportExcel.filenameWithDateTime,
     listFn: props.apiGroup?.().countAndList,
     whereQueryOptions: props.whereQueryProps.whereOptions,
-    extraWhereQueryInitValues: defu(props.extraWhereQueryInitValues, props.exportExcel.extraWhereQueryInitValues)
+    extraWhereQueryInitValues: defu(props.extraWhereQueryInitValues, props.exportExcel.extraWhereQueryInitValues),
+    initWhereQuery: props.whereQueryProps.whereQuery
   });
 }
 async function handleBatchDelete() {

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/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.27",
+  "version": "0.2.29",
   "description": "Veken UI Component Library - Reusable Nuxt UI components, composables, and utilities for enterprise applications",
   "type": "module",
   "style": "./dist/runtime/index.css",