v-nuxt-ui 0.2.33 → 0.3.0

package/dist/runtime/components/table/query/where/simple/item/opr/Input.vue

@@ -49,6 +49,9 @@ defineExpose({
         variant="link"
         size="sm"
         icon="i-lucide-circle-x"
+        :ui="{
+  leadingIcon: 'size-3 text-dimmed'
+}"
         aria-label="Clear input"
         @click="() => {
   queryValue = '';

package/dist/runtime/components/table/query/where/simple/item/opr/InputNumber.vue

@@ -37,7 +37,6 @@ defineExpose({
     color="neutral"
     :increment="false"
     :decrement="false"
-    class="max-w-16"
     @keyup.enter="async () => {
   await triggerFetching?.();
 }"

package/dist/runtime/components/table/query/where/simple/item/opr/Select.vue

@@ -37,6 +37,5 @@ defineExpose({
     v-bind="props"
     v-model="modelValue"
     :placeholder="`\u8BF7\u9009\u62E9${label ?? ''}`"
-    rounded-none
   />
 </template>

package/dist/runtime/components/table/query/where/simple/item/opr/index.vue

@@ -49,12 +49,14 @@ defineExpose({
     v-model:where-query-item="whereQueryItem"
     :disabled="fetching"
     v-bind="option"
+    rounded-none
   />
   <TableQueryWhereSimpleItemOprDatePicker
     v-else-if="option.type === 'date-picker'"
     ref="item"
     v-model:where-query-item="whereQueryItem"
     :disabled="fetching"
+    rounded-none
   />
   <TableQueryWhereSimpleItemOprAsyncSelect
     v-else-if="option.type === 'async-select'"
@@ -62,5 +64,6 @@ defineExpose({
     v-model:where-query-item="whereQueryItem"
     :disabled="fetching"
     v-bind="option"
+    rounded-none
   />
 </template>

package/dist/runtime/composables/api/useApi.js

@@ -82,6 +82,7 @@ export function pruneQueryTemplate(payload) {
   const newPayload = cloneJson(payload);
   newPayload.whereQuery?.items?.forEach((item) => {
     delete item.extraData;
+    delete item.whereQuerySection;
   });
   return newPayload;
 }

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

@@ -5,8 +5,8 @@ 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 useFormSubmission: <T extends BaseModel>(oldValues: Ref<T>, newValues: Ref<T>, save: (model: T) => void | Promise<void>, apiGroup: () => ApiGroup<T>, arrayTypeFieldKeys?: (keyof T)[], rowKey?: keyof T, versionKey?: keyof T, getExtraFields?: () => Record<string, any>) => {
+    onSubmit: () => Promise<boolean>;
 };
 export declare const useConfirmDiff: (fields: MaybeRefOrGetter<VFormFieldProps[]>, diffItems: MaybeRefOrGetter<ConfirmDiffItem[]>, oldModelValue: MaybeRefOrGetter<Record<string, unknown>>, newModelValue: MaybeRefOrGetter<Record<string, unknown>>) => {
     diffedItems: import("vue").ComputedRef<{

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

@@ -19,23 +19,23 @@ export const useFormValues = (raw, defaultValues) => {
   );
   return { oldValues, newValues };
 };
-export const useFormSubmission = (oldValues, newValues, close, save, apiGroup, arrayTypeFieldKeys = [], rowKey = "id", versionKey = "version", getExtraFields) => {
+export const useFormSubmission = (oldValues, newValues, save, apiGroup, arrayTypeFieldKeys = [], rowKey = "id", versionKey = "version", getExtraFields) => {
   const apiFns = apiGroup();
   async function onSubmit() {
     if (oldValues.value[rowKey] === 0) {
-      await onCreate();
-    } else {
-      await onUpdate();
+      return await onCreate();
     }
+    return await onUpdate();
   }
   async function onCreate() {
     const extraFields = getExtraFields ? getExtraFields() : void 0;
     const payload = extraFields ? { ...apiFns.prune(newValues.value), ...extraFields } : apiFns.prune(newValues.value);
     const { data } = await apiFns.create(payload);
     if (!data.value.error) {
-      save(data.value.data);
-      close(true);
+      await save(data.value.data);
+      return true;
     }
+    return false;
   }
   async function onUpdate() {
     const [objWithModifiedFields, modified] = getObjWithModifiedFields(
@@ -51,15 +51,16 @@ export const useFormSubmission = (oldValues, newValues, close, save, apiGroup, a
         color: "warning",
         icon: "i-lucide-triangle-alert"
       });
-      return;
+      return false;
     }
     const extraFields = getExtraFields ? getExtraFields() : void 0;
     const payload = extraFields ? { ...apiFns.prune(objWithModifiedFields), ...extraFields } : apiFns.prune(objWithModifiedFields);
     const { data } = await apiFns.update(payload);
     if (!data.value.error) {
-      save(data.value.data);
-      close(true);
+      await save(data.value.data);
+      return true;
     }
+    return false;
   }
   return { onSubmit };
 };

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

@@ -10,6 +10,7 @@ export function useTable(props) {
   const {
     // table-level props
     name,
+    cnName,
     disableCreation,
     disableRefresh,
     disableBatchDeletion,
@@ -67,6 +68,7 @@ export function useTable(props) {
     whereQuery,
     whereQueryOpen,
     orderQuery,
+    orderQueryOpen,
     isWhereQueryValueEmpty,
     pruneWhereQuery
   } = queryComposable;
@@ -297,16 +299,22 @@ export function useTable(props) {
     defaultOrderQuery: orderQueryInitValues.value,
     orderQuery: orderQuery.value,
     onUpdateOrderQuery: (query) => orderQuery.value = query,
+    orderQueryOpen: orderQueryOpen.value,
+    onUpdateOrderQueryOpen: (open) => orderQueryOpen.value = open,
     fetching: fetching.value,
     triggerFetching: debouncedFetchList,
     bizColumns
   }));
   const tblHeaderProps = computed(() => ({
     name,
+    tblName: cnName,
     fetching: fetching.value,
     rawBizColumns: bizColumns,
-    onUpdateBizColumns: (columns2) => {
+    onUpdateBizColumns: (columns2, storageColumns) => {
       clonedBizColumns.value = columns2;
+      if (storageColumns) {
+        localStgSettings.value = { ...localStgSettings.value, columns: storageColumns };
+      }
     },
     initStorageColumns: initStorageColumns.value,
     onNew,

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

@@ -5,7 +5,7 @@ interface UseTableColumnsReturn<T> {
     selectionColumn: VColumn<T>;
     expandColumn: VColumn<T>;
     clonedBizColumns: ShallowRef<VColumn<T>[]>;
-    columnsWithCommonProps: ShallowRef<VColumn<T>[]>;
+    columnsWithCommonProps: ComputedRef<VColumn<T>[]>;
     sortedColumns: ComputedRef<VColumn<T>[]>;
     columnsWithFilterOptions: ComputedRef<VColumn<T>[]>;
     columnsWithSortableHeader: ComputedRef<VColumn<T>[]>;

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

@@ -63,8 +63,8 @@ export function useTableColumns(props) {
   const mergeColumnWithDefaults = (col, defaults) => {
     return defu(col, defaults);
   };
-  const columnsWithCommonProps = shallowRef(
-    clonedBizColumns.value.map((col) => mergeColumnWithDefaults(col, cloneJson(commonColumnProps)))
+  const columnsWithCommonProps = computed(
+    () => clonedBizColumns.value.map((col) => mergeColumnWithDefaults(col, cloneJson(commonColumnProps)))
   );
   const sortedColumns = computed(() => {
     const sortedKeys = (localStgSettings.value.columns ?? initStorageColumns.value).filter((c) => c.checked).map((c) => c.accessorKey);

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

@@ -15,6 +15,7 @@ export declare function useTableQuery<T>(props: {
     whereQuery: import("vue").WritableComputedRef<WhereQuery<T> | undefined, WhereQuery<T> | undefined>;
     whereQueryOpen: import("vue").WritableComputedRef<boolean, boolean>;
     orderQuery: import("vue").WritableComputedRef<OrderQuery<T>, OrderQuery<T>>;
+    orderQueryOpen: import("vue").WritableComputedRef<boolean, boolean>;
     isWhereQueryValueEmpty: import("vue").ComputedRef<boolean>;
     pruneWhereQuery: (query: WhereQuery<T> | undefined) => {
         items: WhereQueryItem<T>[];

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

@@ -10,7 +10,6 @@ export function useTableQuery(props) {
     const options = bizColumns.filter((col) => col.filterOption).map((col) => ({
       field: col.accessorKey,
       label: col.header,
-      preferred: col.preferred,
       ...col.filterOption
     }));
     extraWhereQueryOptions?.forEach((option) => {
@@ -20,7 +19,7 @@ export function useTableQuery(props) {
   });
   const whereQueryInitValues = computed(() => {
     const initValues = {
-      items: whereQueryOptions.value.map((option) => ({
+      items: whereQueryOptions.value.filter((option) => option.initHide !== true).map((option) => ({
         field: option.field,
         opr: option.defaultOpr ?? useTableOpr().getDefaultOprByType(option.type),
         value: option.initValues ?? null,
@@ -48,7 +47,7 @@ export function useTableQuery(props) {
       accessorKey: col["accessorKey"],
       fixed: "unfixed",
       checked: !col.initHide,
-      preferred: col.preferred
+      preferred: col.filterOption?.preferred
     }))
   );
   const localStgSettings = useLocalStorage(`${name}-table-settings`, {
@@ -69,6 +68,10 @@ export function useTableQuery(props) {
     get: () => localStgSettings.value.orderQuery ?? [],
     set: (query) => localStgSettings.value = { ...localStgSettings.value, orderQuery: query }
   });
+  const orderQueryOpen = computed({
+    get: () => localStgSettings.value.orderQueryOpen ?? false,
+    set: (open) => localStgSettings.value = { ...localStgSettings.value, orderQueryOpen: open }
+  });
   const checkIfWhereQueryItemsValueEmpty = (items) => {
     const itemsWithOprNoValues = items.filter((item) => noValueOprList.includes(item.opr));
     if (itemsWithOprNoValues.length > 0) {
@@ -107,6 +110,7 @@ export function useTableQuery(props) {
     }).map((item) => {
       const newItem = { ...item };
       delete newItem.extraData;
+      delete newItem.whereQuerySection;
       return newItem;
     });
     const prunedGroups = clonedQuery.groups?.map(
@@ -128,6 +132,7 @@ export function useTableQuery(props) {
     whereQuery,
     whereQueryOpen,
     orderQuery,
+    orderQueryOpen,
     isWhereQueryValueEmpty,
     pruneWhereQuery
   };

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

@@ -2,17 +2,19 @@ import { ref, computed, watch, onMounted, onUnmounted, nextTick, useTemplateRef
 import { useTable } from "./useTable.js";
 const PINNED_SHADOW_CLASSES = {
   left: {
-    base: "[--pinned-shadow-color:rgba(0,0,0,0.15)] dark:[--pinned-shadow-color:rgba(0,0,0,0.45)] [&_th[data-pinned=left]]:after:absolute [&_th[data-pinned=left]]:after:top-0 [&_th[data-pinned=left]]:after:right-0 [&_th[data-pinned=left]]:after:bottom-0 [&_th[data-pinned=left]]:after:w-[30px] [&_th[data-pinned=left]]:after:translate-x-full [&_th[data-pinned=left]]:after:transition-opacity [&_th[data-pinned=left]]:after:duration-300 [&_th[data-pinned=left]]:after:pointer-events-none [&_th[data-pinned=left]]:after:shadow-[inset_10px_0_8px_-8px_var(--pinned-shadow-color)] [&_td[data-pinned=left]]:after:absolute [&_td[data-pinned=left]]:after:top-0 [&_td[data-pinned=left]]:after:right-0 [&_td[data-pinned=left]]:after:bottom-0 [&_td[data-pinned=left]]:after:w-[30px] [&_td[data-pinned=left]]:after:translate-x-full [&_td[data-pinned=left]]:after:transition-opacity [&_td[data-pinned=left]]:after:duration-200 [&_td[data-pinned=left]]:after:pointer-events-none [&_td[data-pinned=left]]:after:shadow-[inset_10px_0_8px_-8px_var(--pinned-shadow-color)]",
-    show: "[&_th[data-pinned=left]]:after:opacity-100 [&_td[data-pinned=left]]:after:opacity-100",
-    hide: "[&_th[data-pinned=left]]:after:opacity-0 [&_td[data-pinned=left]]:after:opacity-0"
+    base: "[--pinned-shadow-color:rgba(0,0,0,0.15)] dark:[--pinned-shadow-color:rgba(0,0,0,0.45)] [&_th[data-pinned=left]:not(:has(+th[data-pinned=left]))]:after:absolute [&_th[data-pinned=left]:not(:has(+th[data-pinned=left]))]:after:top-0 [&_th[data-pinned=left]:not(:has(+th[data-pinned=left]))]:after:right-0 [&_th[data-pinned=left]:not(:has(+th[data-pinned=left]))]:after:bottom-0 [&_th[data-pinned=left]:not(:has(+th[data-pinned=left]))]:after:w-[30px] [&_th[data-pinned=left]:not(:has(+th[data-pinned=left]))]:after:translate-x-full [&_th[data-pinned=left]:not(:has(+th[data-pinned=left]))]:after:transition-opacity [&_th[data-pinned=left]:not(:has(+th[data-pinned=left]))]:after:duration-300 [&_th[data-pinned=left]:not(:has(+th[data-pinned=left]))]:after:pointer-events-none [&_th[data-pinned=left]:not(:has(+th[data-pinned=left]))]:after:shadow-[inset_10px_0_8px_-8px_var(--pinned-shadow-color)] [&_td[data-pinned=left]:not(:has(+td[data-pinned=left]))]:after:absolute [&_td[data-pinned=left]:not(:has(+td[data-pinned=left]))]:after:top-0 [&_td[data-pinned=left]:not(:has(+td[data-pinned=left]))]:after:right-0 [&_td[data-pinned=left]:not(:has(+td[data-pinned=left]))]:after:bottom-0 [&_td[data-pinned=left]:not(:has(+td[data-pinned=left]))]:after:w-[30px] [&_td[data-pinned=left]:not(:has(+td[data-pinned=left]))]:after:translate-x-full [&_td[data-pinned=left]:not(:has(+td[data-pinned=left]))]:after:transition-opacity [&_td[data-pinned=left]:not(:has(+td[data-pinned=left]))]:after:duration-200 [&_td[data-pinned=left]:not(:has(+td[data-pinned=left]))]:after:pointer-events-none [&_td[data-pinned=left]:not(:has(+td[data-pinned=left]))]:after:shadow-[inset_10px_0_8px_-8px_var(--pinned-shadow-color)]",
+    show: "[&_th[data-pinned=left]:not(:has(+th[data-pinned=left]))]:after:opacity-100 [&_td[data-pinned=left]:not(:has(+td[data-pinned=left]))]:after:opacity-100",
+    hide: "[&_th[data-pinned=left]:not(:has(+th[data-pinned=left]))]:after:opacity-0 [&_td[data-pinned=left]:not(:has(+td[data-pinned=left]))]:after:opacity-0"
   },
   right: {
-    base: "[&_th[data-pinned=right]]:before:absolute [&_th[data-pinned=right]]:before:top-0 [&_th[data-pinned=right]]:before:left-0 [&_th[data-pinned=right]]:before:bottom-0 [&_th[data-pinned=right]]:before:w-[30px] [&_th[data-pinned=right]]:before:-translate-x-full [&_th[data-pinned=right]]:before:transition-opacity [&_th[data-pinned=right]]:before:duration-300 [&_th[data-pinned=right]]:before:pointer-events-none [&_th[data-pinned=right]]:before:shadow-[inset_-10px_0_8px_-8px_var(--pinned-shadow-color)] [&_td[data-pinned=right]]:before:absolute [&_td[data-pinned=right]]:before:top-0 [&_td[data-pinned=right]]:before:left-0 [&_td[data-pinned=right]]:before:bottom-0 [&_td[data-pinned=right]]:before:w-[30px] [&_td[data-pinned=right]]:before:-translate-x-full [&_td[data-pinned=right]]:before:transition-opacity [&_td[data-pinned=right]]:before:duration-200 [&_td[data-pinned=right]]:before:pointer-events-none [&_td[data-pinned=right]]:before:shadow-[inset_-10px_0_8px_-8px_var(--pinned-shadow-color)]",
-    show: "[&_th[data-pinned=right]]:before:opacity-100 [&_td[data-pinned=right]]:before:opacity-100",
-    hide: "[&_th[data-pinned=right]]:before:opacity-0 [&_td[data-pinned=right]]:before:opacity-0"
+    base: "[&_th:not([data-pinned=right])+th[data-pinned=right]]:before:absolute [&_th:not([data-pinned=right])+th[data-pinned=right]]:before:top-0 [&_th:not([data-pinned=right])+th[data-pinned=right]]:before:left-0 [&_th:not([data-pinned=right])+th[data-pinned=right]]:before:bottom-0 [&_th:not([data-pinned=right])+th[data-pinned=right]]:before:w-[30px] [&_th:not([data-pinned=right])+th[data-pinned=right]]:before:-translate-x-full [&_th:not([data-pinned=right])+th[data-pinned=right]]:before:transition-opacity [&_th:not([data-pinned=right])+th[data-pinned=right]]:before:duration-300 [&_th:not([data-pinned=right])+th[data-pinned=right]]:before:pointer-events-none [&_th:not([data-pinned=right])+th[data-pinned=right]]:before:shadow-[inset_-10px_0_8px_-8px_var(--pinned-shadow-color)] [&_td:not([data-pinned=right])+td[data-pinned=right]]:before:absolute [&_td:not([data-pinned=right])+td[data-pinned=right]]:before:top-0 [&_td:not([data-pinned=right])+td[data-pinned=right]]:before:left-0 [&_td:not([data-pinned=right])+td[data-pinned=right]]:before:bottom-0 [&_td:not([data-pinned=right])+td[data-pinned=right]]:before:w-[30px] [&_td:not([data-pinned=right])+td[data-pinned=right]]:before:-translate-x-full [&_td:not([data-pinned=right])+td[data-pinned=right]]:before:transition-opacity [&_td:not([data-pinned=right])+td[data-pinned=right]]:before:duration-200 [&_td:not([data-pinned=right])+td[data-pinned=right]]:before:pointer-events-none [&_td:not([data-pinned=right])+td[data-pinned=right]]:before:shadow-[inset_-10px_0_8px_-8px_var(--pinned-shadow-color)]",
+    show: "[&_th:not([data-pinned=right])+th[data-pinned=right]]:before:opacity-100 [&_td:not([data-pinned=right])+td[data-pinned=right]]:before:opacity-100",
+    hide: "[&_th:not([data-pinned=right])+th[data-pinned=right]]:before:opacity-0 [&_td:not([data-pinned=right])+td[data-pinned=right]]:before:opacity-0"
   }
 };
 const EXPANDED_STICKY_CLASS = "[&_tr[data-expanded=true]]:sticky [&_tr[data-expanded=true]]:top-[calc(var(--ui-table-header-height)+1px)] [&_tr[data-expanded=true]]:z-10 [&_tr[data-expanded=true]]:bg-default";
+const PINNED_POSITION_CLASS = "[&_th[data-pinned=left]]:!transition-colors [&_th[data-pinned=right]]:!transition-colors [&_td[data-pinned=left]]:!transition-colors [&_td[data-pinned=right]]:!transition-colors [&_th[data-pinned=left]]:!duration-150 [&_th[data-pinned=right]]:!duration-150 [&_td[data-pinned=left]]:!duration-150 [&_td[data-pinned=right]]:!duration-150";
+const PINNED_HOVER_CLASS = "[&_tbody_tr:hover_td[data-pinned=left]]:!bg-muted [&_tbody_tr:hover_td[data-pinned=right]]:!bg-muted";
 export function useProTableView(props) {
   const {
     data,
@@ -23,7 +25,7 @@ export function useProTableView(props) {
     fetchList,
     rowSelection,
     onUpdateRowSelection,
-    tblProps,
+    tblProps: baseTblProps,
     tblWhereQueryProps,
     tblHeaderProps,
     tblPaginationProps,
@@ -56,8 +58,14 @@ export function useProTableView(props) {
   });
   const tableWidth = ref(0);
   const tableDiv = useTemplateRef("table");
+  const columnSizing = ref({});
   let resizeObserver = null;
+  let mutationObserver = null;
   let scrollContainer = null;
+  let pinnedOffsetFrame = null;
+  let tableDomUpdateQueued = false;
+  let postRenderPinnedOffsetQueued = false;
+  let renderedTableStateQueued = false;
   const showLeftPinnedShadow = ref(false);
   const showRightPinnedShadow = ref(false);
   const hasVerticalOverflow = ref(false);
@@ -68,8 +76,169 @@ export function useProTableView(props) {
     showRightPinnedShadow.value ? PINNED_SHADOW_CLASSES.right.show : PINNED_SHADOW_CLASSES.right.hide
   ]);
   const HIDE_LAST_ROW_BORDER_CLASS = "[&_tbody_tr:last-child_td]:border-b-0";
-  const tblClasses = computed(() => [pinnedShadowClasses.value, EXPANDED_STICKY_CLASS, hasVerticalOverflow.value && HIDE_LAST_ROW_BORDER_CLASS]);
+  const tblClasses = computed(() => [pinnedShadowClasses.value, EXPANDED_STICKY_CLASS, PINNED_POSITION_CLASS, PINNED_HOVER_CLASS, hasVerticalOverflow.value && HIDE_LAST_ROW_BORDER_CLASS]);
   const tblUi = computed(() => ({ root: "relative overflow-clip", th: thClass.value, td: tdClass.value }));
+  const tblProps = computed(() => ({
+    ...baseTblProps.value,
+    columnSizing: columnSizing.value
+  }));
+  function getColumnId(column) {
+    if (!column || typeof column !== "object") return void 0;
+    const col = column;
+    return col.id ?? col.accessorKey;
+  }
+  function getLeafColumnIds(columns) {
+    return columns.flatMap((column) => {
+      if (!column || typeof column !== "object") return [];
+      const col = column;
+      if (Array.isArray(col.columns) && col.columns.length) {
+        return getLeafColumnIds(col.columns);
+      }
+      const columnId = getColumnId(column);
+      return columnId ? [columnId] : [];
+    });
+  }
+  function getRenderedLeafColumnIds(columns, columnPinning) {
+    const columnIds = getLeafColumnIds(columns);
+    const columnIdSet = new Set(columnIds);
+    const leftIds = columnPinning?.left?.filter((id) => columnIdSet.has(id)) ?? [];
+    const rightIds = columnPinning?.right?.filter((id) => columnIdSet.has(id)) ?? [];
+    const pinnedIds = /* @__PURE__ */ new Set([...leftIds, ...rightIds]);
+    const centerIds = columnIds.filter((id) => !pinnedIds.has(id));
+    return [...leftIds, ...centerIds, ...rightIds];
+  }
+  function isSameColumnSizing(prev, next) {
+    const prevKeys = Object.keys(prev);
+    const nextKeys = Object.keys(next);
+    return prevKeys.length === nextKeys.length && nextKeys.every((key) => prev[key] === next[key]);
+  }
+  function getElementWidth(element) {
+    return element.getBoundingClientRect().width;
+  }
+  function getDirectTableCells(row) {
+    return Array.from(row.children).filter((cell) => cell instanceof HTMLTableCellElement && (cell.dataset.slot === "th" || cell.dataset.slot === "td"));
+  }
+  function updateColumnSizing() {
+    if (!tableDiv.value) return false;
+    const leafColumns = getRenderedLeafColumnIds(baseTblProps.value.columns ?? [], baseTblProps.value.columnPinning);
+    const headers = Array.from(tableDiv.value.querySelectorAll('thead tr[data-slot="tr"] th[data-slot="th"]'));
+    const bodyRows = Array.from(tableDiv.value.querySelectorAll('tbody tr[data-slot="tr"]'));
+    if (!leafColumns.length || !headers.length) return false;
+    const nextSizing = {};
+    headers.slice(0, leafColumns.length).forEach((header, index) => {
+      const columnId = leafColumns[index];
+      let width = getElementWidth(header);
+      bodyRows.forEach((row) => {
+        const cell = row.children[index];
+        if (cell instanceof HTMLElement) {
+          width = Math.max(width, getElementWidth(cell));
+        }
+      });
+      if (columnId && width > 0) {
+        nextSizing[columnId] = Math.ceil(width);
+      }
+    });
+    if (isSameColumnSizing(columnSizing.value, nextSizing)) return false;
+    columnSizing.value = nextSizing;
+    return true;
+  }
+  function updatePinnedColumnOffsets() {
+    if (!tableDiv.value) return;
+    const headerRow = tableDiv.value.querySelector('thead tr[data-slot="tr"]');
+    if (!headerRow) return;
+    const headerCells = getDirectTableCells(headerRow);
+    if (!headerCells.length) return;
+    const leftOffsets = [];
+    const rightOffsets = [];
+    let leftOffset = 0;
+    headerCells.forEach((cell, index) => {
+      if (cell.dataset.pinned !== "left") return;
+      leftOffsets.push([index, leftOffset]);
+      leftOffset += getElementWidth(cell);
+    });
+    let rightOffset = 0;
+    for (let index = headerCells.length - 1; index >= 0; index--) {
+      const cell = headerCells[index];
+      if (!cell || cell.dataset.pinned !== "right") continue;
+      rightOffsets.push([index, rightOffset]);
+      rightOffset += getElementWidth(cell);
+    }
+    if (!leftOffsets.length && !rightOffsets.length) return;
+    const setCellOffset = (cell, side, offset) => {
+      const value = `${offset}px`;
+      if (cell.style[side] !== value) {
+        cell.style[side] = value;
+      }
+    };
+    const rows = Array.from(tableDiv.value.querySelectorAll('tr[data-slot="tr"]'));
+    rows.forEach((row) => {
+      const cells = getDirectTableCells(row);
+      if (!cells.length) return;
+      leftOffsets.forEach(([index, offset]) => {
+        const cell = cells[index];
+        if (cell?.dataset.pinned === "left") {
+          setCellOffset(cell, "left", offset);
+        }
+      });
+      rightOffsets.forEach(([index, offset]) => {
+        const cell = cells[index];
+        if (cell?.dataset.pinned === "right") {
+          setCellOffset(cell, "right", offset);
+        }
+      });
+    });
+  }
+  function queuePinnedColumnOffsetUpdate(immediate = true) {
+    if (immediate) {
+      updatePinnedColumnOffsets();
+    }
+    if (typeof requestAnimationFrame !== "function") return;
+    if (pinnedOffsetFrame !== null) {
+      return;
+    }
+    pinnedOffsetFrame = requestAnimationFrame(() => {
+      pinnedOffsetFrame = null;
+      updatePinnedColumnOffsets();
+    });
+  }
+  function queuePostRenderPinnedColumnOffsetUpdate() {
+    if (postRenderPinnedOffsetQueued) return;
+    postRenderPinnedOffsetQueued = true;
+    nextTick(() => {
+      postRenderPinnedOffsetQueued = false;
+      queuePinnedColumnOffsetUpdate();
+      checkShadowVisibility();
+    });
+  }
+  function updateRenderedTableState() {
+    const columnSizingChanged = updateColumnSizing();
+    queuePinnedColumnOffsetUpdate();
+    if (columnSizingChanged) {
+      queuePostRenderPinnedColumnOffsetUpdate();
+    }
+    checkShadowVisibility();
+  }
+  function queueRenderedTableStateUpdate() {
+    if (renderedTableStateQueued) return;
+    renderedTableStateQueued = true;
+    nextTick(() => {
+      renderedTableStateQueued = false;
+      updateRenderedTableState();
+    });
+  }
+  function queueTableDomUpdate() {
+    if (tableDomUpdateQueued) return;
+    tableDomUpdateQueued = true;
+    const runUpdate = () => {
+      tableDomUpdateQueued = false;
+      updateRenderedTableState();
+    };
+    if (typeof queueMicrotask === "function") {
+      queueMicrotask(runUpdate);
+      return;
+    }
+    Promise.resolve().then(runUpdate);
+  }
   function updateTableWidth() {
     if (tableDiv.value) {
       tableWidth.value = tableDiv.value.offsetWidth;
@@ -87,6 +256,7 @@ export function useProTableView(props) {
     const { scrollLeft, scrollWidth, clientWidth } = target;
     showLeftPinnedShadow.value = scrollLeft > 0;
     showRightPinnedShadow.value = scrollLeft + clientWidth < scrollWidth - 1;
+    queuePinnedColumnOffsetUpdate(false);
   }
   onMounted(() => {
     nextTick(() => {
@@ -102,27 +272,55 @@ export function useProTableView(props) {
       if (tableDiv.value) {
         resizeObserver = new ResizeObserver(() => {
           updateTableWidth();
-          nextTick(() => checkShadowVisibility());
+          queueRenderedTableStateUpdate();
         });
         resizeObserver.observe(tableDiv.value);
+        mutationObserver = new MutationObserver(() => {
+          queueTableDomUpdate();
+        });
+        const observedTableBody = tableDiv.value.querySelector("tbody") ?? tableDiv.value;
+        mutationObserver.observe(observedTableBody, {
+          childList: true,
+          subtree: true,
+          attributes: true,
+          attributeFilter: ["data-expanded"]
+        });
         updateTableWidth();
-        checkShadowVisibility();
+        updateRenderedTableState();
       }
     });
   });
   watch(data, () => {
-    nextTick(() => checkShadowVisibility());
+    queueRenderedTableStateUpdate();
   }, { flush: "post" });
+  watch(
+    () => [baseTblProps.value.columns, baseTblProps.value.columnPinning],
+    () => {
+      queueRenderedTableStateUpdate();
+    },
+    { flush: "post" }
+  );
   onUnmounted(() => {
     if (resizeObserver && tableDiv.value) {
       resizeObserver.unobserve(tableDiv.value);
       resizeObserver.disconnect();
       resizeObserver = null;
     }
+    if (mutationObserver) {
+      mutationObserver.disconnect();
+      mutationObserver = null;
+    }
     if (scrollContainer) {
       scrollContainer.removeEventListener("scroll", handleScroll);
       scrollContainer = null;
     }
+    if (pinnedOffsetFrame !== null) {
+      cancelAnimationFrame(pinnedOffsetFrame);
+      pinnedOffsetFrame = null;
+    }
+    tableDomUpdateQueued = false;
+    postRenderPinnedOffsetQueued = false;
+    renderedTableStateQueued = false;
   });
   return {
     // data

package/dist/runtime/composables/useTheme.js

@@ -1,5 +1,5 @@
 import { computed } from "vue";
-import { createSharedComposable, useColorMode } from "@vueuse/core";
+import { createSharedComposable, useColorMode, usePreferredDark } from "@vueuse/core";
 import { en, zh_cn } from "@nuxt/ui/locale";
 import { useApp } from "./useApp.js";
 import { useAppConfig } from "nuxt/app";
@@ -25,8 +25,15 @@ const twPrimaryColorNames = [
 const twNeutralColorNames = ["slate", "gray", "zinc", "neutral", "stone", "taupe", "mauve", "mist", "olive"];
 const _useTheme = () => {
   const appConfig = useAppConfig();
-  const colorMode = useColorMode();
+  const colorMode = useColorMode({ emitAuto: true });
   const app = useApp();
+  const isDark = usePreferredDark();
+  const resolvedColorMode = computed(() => {
+    if (colorMode.value === "auto") {
+      return isDark.value ? "dark" : "light";
+    }
+    return colorMode.value;
+  });
   const neutral = computed({
     get() {
       return appConfig.ui?.colors?.neutral;
@@ -56,7 +63,7 @@ const _useTheme = () => {
     }
   });
   const chartColorVars = computed(() => ["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"].map((c) => `var(--${c})`));
-  const primaryColorVars = computed(() => twPrimaryColorNames.map((c) => `var(--color-${c}-${colorMode.value === "light" ? "400" : "500"})`));
+  const primaryColorVars = computed(() => twPrimaryColorNames.map((c) => `var(--color-${c}-${resolvedColorMode.value === "light" ? "400" : "500"})`));
   const radiuses = [0, 0.125, 0.25, 0.375, 0.5];
   const radius = computed({
     get() {

package/dist/runtime/constants/columns.js

@@ -5,9 +5,9 @@ export const getCreateAtColumn = (createdAtSortOpr = "desc") => ({
   accessorKey: "createdAt",
   header: "\u521B\u5EFA\u65F6\u95F4",
   cell: ({ row }) => dayjs(row.original.createdAt).format(dateTimeFormat),
-  preferred: false,
   filterOption: {
-    type: "date-picker"
+    type: "date-picker",
+    preferred: false
   },
   sortOption: {
     defaultOpr: createdAtSortOpr
@@ -18,9 +18,9 @@ export const getOprColumns = (createdAtSortOpr = "desc") => [
     accessorKey: "createdBy",
     header: "\u521B\u5EFA\u4EBA",
     cell: ({ row }) => row.original.creator?.nickname || "/",
-    preferred: false,
     filterOption: {
       type: "async-select",
+      preferred: false,
       listApi: useUserApi().list,
       likeSearchFields: ["nickname"],
       labelField: "nickname",
@@ -34,9 +34,9 @@ export const getOprColumns = (createdAtSortOpr = "desc") => [
     accessorKey: "updatedBy",
     header: "\u66F4\u65B0\u4EBA",
     cell: ({ row }) => row.original.updater?.nickname || "/",
-    preferred: false,
     filterOption: {
       type: "async-select",
+      preferred: false,
       listApi: useUserApi().list,
       likeSearchFields: ["nickname"],
       labelField: "nickname",
@@ -49,9 +49,9 @@ export const getOprColumns = (createdAtSortOpr = "desc") => [
     accessorKey: "updatedAt",
     header: "\u66F4\u65B0\u65F6\u95F4",
     cell: ({ row }) => dayjs(row.original.updatedAt).format(dateTimeFormat),
-    preferred: false,
     filterOption: {
-      type: "date-picker"
+      type: "date-picker",
+      preferred: false
     },
     sortOption: true
   }

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

@@ -12,7 +12,7 @@ export type SaveModalFormTemplateProps<T> = {
     title: string;
     description?: string;
     onClose: (ok: boolean) => void;
-    onSubmit: () => Promise<void>;
+    onSubmit: () => Promise<boolean | undefined>;
     fields: VFormFieldProps[];
     oldModelValue: Partial<T>;
     modelValue: Partial<T>;

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

@@ -6,7 +6,9 @@ export type WhereQueryColumnOption<T> = {
     defaultOpr?: WhereQueryOpr;
     custom?: boolean;
     initValues?: any;
+    /** 查询条件是否默认隐藏（initHide=true 时不在 where 面板显示） */
     initHide?: boolean;
+    preferred?: boolean;
     disableOprSelector?: boolean;
 } & ({
     type: 'input';
@@ -29,8 +31,8 @@ export type OrderQueryColumnOption = {
 export type VColumn<T> = {
     filterOption?: WhereQueryColumnOption<any>;
     sortOption?: OrderQueryColumnOption | true;
+    /** 列是否默认隐藏（控制表格列可见性） */
     initHide?: boolean;
     checked?: boolean;
-    preferred?: boolean;
     exportCell?(row: T): string | string[];
 } & TableColumn<T>;