@nu-grid/nuxt 0.2.0 → 0.3.1

package/dist/runtime/composables/_internal/useNuGridColumnResize.js

@@ -1,13 +1,173 @@
-import { onUnmounted, ref } from "vue";
+import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 function isTouchStartEvent(e) {
   return e.type === "touchstart";
 }
-export function useNuGridColumnResize(props, tableApi) {
+export function useNuGridColumnResize(props, tableApi, tableRef) {
   const resizingGroupId = ref(null);
   const resizingColumnId = ref(null);
+  const manuallyResizedColumns = ref(/* @__PURE__ */ new Set());
+  const resizeStartSizes = /* @__PURE__ */ new Map();
+  function syncColumnWidthsFromDOM(columnIds) {
+    if (!tableRef.value) return;
+    const newSizing = {};
+    const tbody = tableRef.value.querySelector("[data-tbody]");
+    const firstRow = tbody?.querySelector("[data-row-id]");
+    for (const columnId of columnIds) {
+      let measuredWidth = 0;
+      if (firstRow) {
+        const bodyCell = firstRow.querySelector(`[data-column-id="${columnId}"]`);
+        if (bodyCell) {
+          const rect = bodyCell.getBoundingClientRect();
+          measuredWidth = rect.width;
+        }
+      }
+      if (measuredWidth === 0) {
+        const headerCell = tableRef.value.querySelector(
+          `[data-column-id="${columnId}"]`
+        );
+        if (headerCell) {
+          const rect = headerCell.getBoundingClientRect();
+          measuredWidth = rect.width;
+        }
+      }
+      if (measuredWidth > 0) {
+        newSizing[columnId] = measuredWidth;
+      }
+    }
+    if (Object.keys(newSizing).length > 0) {
+      tableApi.setColumnSizing((old) => ({
+        ...old,
+        ...newSizing
+      }));
+    }
+  }
+  let stateWasRestored = false;
+  function syncInitialFlexWidths(forceSync = false) {
+    if (props.layout?.autoSize !== "fill") return;
+    if (!tableRef.value) return;
+    if (stateWasRestored && !forceSync) {
+      stateWasRestored = false;
+      return;
+    }
+    if (!forceSync) {
+      const currentSizing = tableApi.getState().columnSizing;
+      const restoredColumnIds = Object.keys(currentSizing);
+      if (restoredColumnIds.length > 0) {
+        manuallyResizedColumns.value = new Set(restoredColumnIds);
+        return;
+      }
+    }
+    const allColumns = tableApi.getVisibleLeafColumns();
+    const flexColumns = allColumns.filter((col) => {
+      const colDef = col.columnDef;
+      return colDef.grow !== false;
+    }).map((col) => col.id);
+    if (flexColumns.length === 0) return;
+    syncColumnWidthsFromDOM(flexColumns);
+    manuallyResizedColumns.value = new Set(flexColumns);
+  }
+  function getContainerWidth() {
+    if (!tableRef.value) return 0;
+    const rootEl = tableRef.value.parentElement;
+    return rootEl?.getBoundingClientRect().width ?? 0;
+  }
+  function getSizingAsRatios() {
+    const containerWidth = getContainerWidth();
+    if (containerWidth === 0) return {};
+    const currentSizing = tableApi.getState().columnSizing;
+    const ratios = {};
+    for (const [columnId, pixelWidth] of Object.entries(currentSizing)) {
+      ratios[columnId] = pixelWidth / containerWidth;
+    }
+    return ratios;
+  }
+  function applySizingFromRatios(ratios) {
+    const containerWidth = getContainerWidth();
+    if (containerWidth === 0) return;
+    const pixelSizing = {};
+    const columnIds = [];
+    for (const [columnId, ratio] of Object.entries(ratios)) {
+      pixelSizing[columnId] = Math.round(ratio * containerWidth);
+      columnIds.push(columnId);
+    }
+    if (Object.keys(pixelSizing).length > 0) {
+      stateWasRestored = true;
+      tableApi.setColumnSizing((old) => ({
+        ...old,
+        ...pixelSizing
+      }));
+      manuallyResizedColumns.value = /* @__PURE__ */ new Set([...manuallyResizedColumns.value, ...columnIds]);
+    }
+  }
+  function applyRestoredSizing(sizing) {
+    if (Object.keys(sizing).length === 0) return;
+    stateWasRestored = true;
+    manuallyResizedColumns.value = /* @__PURE__ */ new Set([
+      ...manuallyResizedColumns.value,
+      ...Object.keys(sizing)
+    ]);
+  }
+  let lastContainerWidth = 0;
+  let resizeObserver = null;
+  let rafId = null;
+  function handleContainerResize(entries) {
+    const entry = entries[0];
+    if (!entry) return;
+    const newWidth = entry.contentRect.width;
+    if (Math.abs(newWidth - lastContainerWidth) > 1) {
+      lastContainerWidth = newWidth;
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        manuallyResizedColumns.value = /* @__PURE__ */ new Set();
+        nextTick(() => {
+          syncInitialFlexWidths(true);
+        });
+      });
+    }
+  }
+  onMounted(() => {
+    nextTick(() => {
+      nextTick(() => {
+        syncInitialFlexWidths();
+        if (tableRef.value && typeof ResizeObserver !== "undefined") {
+          const rootEl = tableRef.value.parentElement;
+          if (rootEl) {
+            lastContainerWidth = rootEl.getBoundingClientRect().width;
+            resizeObserver = new ResizeObserver(handleContainerResize);
+            resizeObserver.observe(rootEl);
+          }
+        }
+      });
+    });
+  });
+  watch(
+    () => props.layout?.autoSize,
+    (newValue, oldValue) => {
+      if (newValue === "fill" && oldValue !== "fill") {
+        manuallyResizedColumns.value = /* @__PURE__ */ new Set();
+        nextTick(() => {
+          nextTick(() => {
+            syncInitialFlexWidths();
+          });
+        });
+      }
+    }
+  );
+  onUnmounted(() => {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+    }
+  });
   function getResizeHandler(header) {
-    if (props.layout?.maintainWidth) {
-      return createMaintainWidthResizeHandler(header, tableApi);
+    if (props.layout?.resizeMode === "shift") {
+      return createShiftResizeHandler(header, tableApi, manuallyResizedColumns);
     }
     return header.getResizeHandler();
   }
@@ -17,6 +177,37 @@ export function useNuGridColumnResize(props, tableApi) {
       event.stopPropagation();
       document.body.classList.add("is-resizing-column");
       resizingColumnId.value = header.column.id;
+      if (props.layout?.autoSize === "fill") {
+        const allColumns = tableApi.getVisibleLeafColumns();
+        const columnsToSync = allColumns.filter((col) => {
+          const colDef = col.columnDef;
+          return colDef.grow !== false && !manuallyResizedColumns.value.has(col.id);
+        }).map((col) => col.id);
+        syncColumnWidthsFromDOM(columnsToSync);
+        const newSet = new Set(manuallyResizedColumns.value);
+        newSet.add(header.column.id);
+        if (props.layout?.resizeMode === "shift") {
+          const currentIndex = allColumns.findIndex((col) => col.id === header.column.id);
+          if (currentIndex >= 0 && currentIndex < allColumns.length - 1) {
+            const nextColumn = allColumns[currentIndex + 1];
+            if (nextColumn) {
+              newSet.add(nextColumn.id);
+            }
+          }
+        }
+        manuallyResizedColumns.value = newSet;
+      }
+      resizeStartSizes.set(header.column.id, header.column.getSize());
+      if (props.layout?.resizeMode === "shift") {
+        const allColumns = tableApi.getVisibleLeafColumns();
+        const currentIndex = allColumns.findIndex((col) => col.id === header.column.id);
+        if (currentIndex >= 0 && currentIndex < allColumns.length - 1) {
+          const nextColumn = allColumns[currentIndex + 1];
+          if (nextColumn) {
+            resizeStartSizes.set(nextColumn.id, nextColumn.getSize());
+          }
+        }
+      }
       resizeHandler(event);
     }
   }
@@ -28,11 +219,25 @@ export function useNuGridColumnResize(props, tableApi) {
     document.body.classList.add("is-resizing-column");
     resizingColumnId.value = null;
     resizingGroupId.value = header.id;
-    const resizeHandler = createGroupResizeHandler(header, tableApi);
+    const leafHeaders = header.getLeafHeaders();
+    for (const leafHeader of leafHeaders) {
+      resizeStartSizes.set(leafHeader.column.id, leafHeader.column.getSize());
+    }
+    const resizeHandler = createGroupResizeHandler(header, tableApi, manuallyResizedColumns);
     resizeHandler(event);
   }
   function handleResizeEnd() {
     document.body.classList.remove("is-resizing-column");
+    for (const [columnId, startSize] of resizeStartSizes) {
+      const column = tableApi.getColumn(columnId);
+      if (column) {
+        const currentSize = column.getSize();
+        if (Math.abs(currentSize - startSize) > 1) {
+          manuallyResizedColumns.value = /* @__PURE__ */ new Set([...manuallyResizedColumns.value, columnId]);
+        }
+      }
+    }
+    resizeStartSizes.clear();
     resizingColumnId.value = null;
     resizingGroupId.value = null;
   }
@@ -51,10 +256,16 @@ export function useNuGridColumnResize(props, tableApi) {
     handleGroupResizeStart,
     handleResizeEnd,
     resizingGroupId,
-    resizingColumnId
+    resizingColumnId,
+    manuallyResizedColumns,
+    // State persistence helpers
+    getContainerWidth,
+    getSizingAsRatios,
+    applySizingFromRatios,
+    applyRestoredSizing
   };
 }
-export function createMaintainWidthResizeHandler(header, table) {
+export function createShiftResizeHandler(header, table, _manuallyResizedColumns) {
   return (e) => {
     const column = table.getColumn(header.column.id);
     const canResize = column?.getCanResize();
@@ -209,7 +420,7 @@ export function createMaintainWidthResizeHandler(header, table) {
     }));
   };
 }
-export function createGroupResizeHandler(header, table) {
+export function createGroupResizeHandler(header, table, _manuallyResizedColumns) {
   return (e) => {
     ;
     e.persist?.();

package/dist/runtime/composables/_internal/useNuGridCore.d.ts

@@ -6,7 +6,7 @@ import type { NuGridRowSelectionMode, NuGridStates, PinnableHeader, UseNuGridCol
 /**
  * Shared logic for processing columns with default cell renderers
  */
-export declare function useNuGridColumns<T extends TableData>(propsColumns: Ref<NuGridColumn<T>[] | undefined>, data: Ref<T[]>, rowSelectionMode?: Ref<NuGridRowSelectionMode<T>>, actionMenuOptions?: Ref<NuGridActionMenuOptions<T> | undefined | false>, columnVisibilityState?: Ref<VisibilityState>): UseNuGridColumnsReturn<T>;
+export declare function useNuGridColumns<T extends TableData>(propsColumns: Ref<NuGridColumn<T>[] | undefined>, data: Ref<T[]>, rowSelectionMode?: Ref<NuGridRowSelectionMode<T>>, actionMenuOptions?: Ref<NuGridActionMenuOptions<T> | undefined | false>, columnVisibilityState?: Ref<VisibilityState>, dataTypeInference?: Ref<boolean>): UseNuGridColumnsReturn<T>;
 /**
  * Helper function to update state values
  */

package/dist/runtime/composables/_internal/useNuGridCore.js

@@ -11,18 +11,20 @@ import { createReusableTemplate, reactiveOmit } from "@vueuse/core";
 import { upperFirst } from "scule";
 import { computed, watch } from "vue";
 import { nuGridDefaults } from "../../config/_internal/index.js";
+import { extractColumnValues, inferCellDataType } from "../../utils/inferCellDataType.js";
 import { nuGridCellTypeRegistry } from "../useNuGridCellTypeRegistry.js";
 import { useNuGridActionMenu } from "./useNuGridActionMenu.js";
 import { useNuGridRowSelection } from "./useNuGridRowSelection.js";
-export function useNuGridColumns(propsColumns, data, rowSelectionMode, actionMenuOptions, columnVisibilityState) {
+export function useNuGridColumns(propsColumns, data, rowSelectionMode, actionMenuOptions, columnVisibilityState, dataTypeInference) {
   const rowSelection = rowSelectionMode ? useNuGridRowSelection(rowSelectionMode, columnVisibilityState) : null;
   const actionMenu = actionMenuOptions ? useNuGridActionMenu(actionMenuOptions, columnVisibilityState) : null;
   const columns = computed(() => {
+    const inferenceEnabled = dataTypeInference?.value !== false;
     const cols = propsColumns.value ?? Object.keys(data.value[0] ?? {}).map((accessorKey) => ({
       accessorKey,
       header: upperFirst(accessorKey)
     }));
-    let processedCols = processColumns(cols);
+    let processedCols = processColumns(cols, inferenceEnabled);
     if (rowSelection) {
       processedCols = rowSelection.prependSelectionColumn(processedCols);
     }
@@ -32,14 +34,23 @@ export function useNuGridColumns(propsColumns, data, rowSelectionMode, actionMen
     return processedCols;
   });
   const pluginCache = /* @__PURE__ */ new Map();
-  function processColumns(columns2) {
+  function processColumns(columns2, inferenceEnabled) {
     return columns2.map((column) => {
       const col = { ...column };
       if ("columns" in col && col.columns) {
-        col.columns = processColumns(col.columns);
+        col.columns = processColumns(col.columns, inferenceEnabled);
+      }
+      const accessorKey = col.accessorKey;
+      if (inferenceEnabled && col.cellDataType === void 0 && accessorKey && data.value.length > 0) {
+        const values = extractColumnValues(data.value, accessorKey);
+        const inferredType = inferCellDataType(values, accessorKey);
+        if (inferredType) {
+          ;
+          col.cellDataType = inferredType;
+        }
       }
       const cellDataType = col.cellDataType;
-      if (cellDataType) {
+      if (cellDataType && cellDataType !== false) {
         let plugin = pluginCache.get(cellDataType);
         if (plugin === void 0) {
           plugin = nuGridCellTypeRegistry.get(cellDataType);

package/dist/runtime/composables/_internal/useNuGridFocus.js

@@ -9,7 +9,7 @@ export function useNuGridFocus(props, tableApi, rows, navigableRows, tableRef, r
   const cmdArrows = usePropWithDefault(props, "focus", "cmdArrows");
   const alignOnModel = usePropWithDefault(props, "focus", "alignOnModel");
   const enableEditing = usePropWithDefault(props, "editing", "enabled");
-  const rowSelectionMode = computed(() => props.selection ?? false);
+  const rowSelectionMode = computed(() => props.rowSelection ?? false);
   const focusedCell = ref(null);
   const gridHasFocus = ref(false);
   let pointerDownInsideGrid = false;

package/dist/runtime/composables/_internal/useNuGridRowSelection.js

@@ -2,7 +2,7 @@ import { computed, h, ref, watch } from "vue";
 import NuGridCellCheckbox from "../../components/NuGridCellCheckbox.vue";
 import { getDefaults } from "../../config/_internal/index.js";
 import { nuGridCellTypeRegistry } from "../useNuGridCellTypeRegistry.js";
-const selectionDefaults = getDefaults("selection");
+const selectionDefaults = getDefaults("rowSelection");
 const selectionTotalsCache = /* @__PURE__ */ new WeakMap();
 function createSelectionColumn(modeRef, enabledRef, rowSelectionEnabledRef, columnDef) {
   const defaultColumn = {

package/dist/runtime/composables/_internal/useNuGridStatePersistence.d.ts

@@ -10,6 +10,8 @@ export interface NuGridStateSnapshot {
     columnPinning?: ColumnPinningState;
     columnSizing?: ColumnSizingState;
     columnSizingInfo?: ColumnSizingInfoState;
+    /** Column sizing stored as ratios (0-1) relative to container width for resolution-independent persistence */
+    columnSizingRatios?: Record<string, number>;
     rowSelection?: RowSelectionState;
     rowPinning?: RowPinningState;
     sorting?: SortingState;
@@ -17,11 +19,22 @@ export interface NuGridStateSnapshot {
     expanded?: ExpandedState;
     pagination?: PaginationState;
 }
+export interface NuGridStatePersistenceHelpers {
+    /** Get current container width for ratio calculations */
+    getContainerWidth: () => number;
+    /** Get current sizing as ratios */
+    getSizingAsRatios: () => Record<string, number>;
+    /** Apply sizing from ratios and mark columns as manually resized */
+    applySizingFromRatios: (ratios: Record<string, number>) => void;
+}
 /**
  * Composable for persisting and restoring NuGrid state to/from localStorage and cookies
  * Handles all state initialization, restoration, and persistence logic
  */
-export declare function useNuGridStatePersistence<T extends TableData = TableData>(states: NuGridStates, enabled: boolean, storageId: string | undefined, onStateChanged?: (state: NuGridStateSnapshot) => void, eventEmitter?: NuGridEventEmitter<T>): {
+export declare function useNuGridStatePersistence<T extends TableData = TableData>(states: NuGridStates, enabled: boolean, storageId: string | undefined, onStateChanged?: (state: NuGridStateSnapshot) => void, eventEmitter?: NuGridEventEmitter<T>, resizeHelpers?: NuGridStatePersistenceHelpers): {
     getState: () => {};
     setState: (_snapshot: NuGridStateSnapshot) => void;
+    clearState: () => void;
+    applyPendingRatios: () => void;
+    setResizeHelpers: (_helpers: NuGridStatePersistenceHelpers) => void;
 };

package/dist/runtime/composables/_internal/useNuGridStatePersistence.js

@@ -1,17 +1,25 @@
 import { useCookie } from "#imports";
 import { StorageSerializers, useStorage } from "@vueuse/core";
 import { nextTick, onMounted, watch } from "vue";
-export function useNuGridStatePersistence(states, enabled, storageId, onStateChanged, eventEmitter) {
+export function useNuGridStatePersistence(states, enabled, storageId, onStateChanged, eventEmitter, resizeHelpers) {
   const emitStateChanged = (state) => {
     if (eventEmitter?.stateChanged) {
       eventEmitter.stateChanged(state);
     }
     onStateChanged?.(state);
   };
+  let pendingRatios = null;
+  let helpers = resizeHelpers;
   if (!enabled || !storageId) {
     return {
       getState: () => ({}),
       setState: (_snapshot) => {
+      },
+      clearState: () => {
+      },
+      applyPendingRatios: () => {
+      },
+      setResizeHelpers: (_helpers) => {
       }
     };
   }
@@ -75,6 +83,12 @@ export function useNuGridStatePersistence(states, enabled, storageId, onStateCha
     }
     if (hasKeys(states.columnSizingState.value)) {
       snapshot.columnSizing = states.columnSizingState.value;
+      if (helpers?.getSizingAsRatios) {
+        const ratios = helpers.getSizingAsRatios();
+        if (hasKeys(ratios)) {
+          snapshot.columnSizingRatios = ratios;
+        }
+      }
     }
     if (hasKeys(states.columnSizingInfoState.value)) {
       snapshot.columnSizingInfo = states.columnSizingInfoState.value;
@@ -129,7 +143,12 @@ export function useNuGridStatePersistence(states, enabled, storageId, onStateCha
     if (snapshot.columnPinning !== void 0) {
       states.columnPinningState.value = snapshot.columnPinning;
     }
-    if (snapshot.columnSizing !== void 0) {
+    if (snapshot.columnSizingRatios !== void 0 && hasKeys(snapshot.columnSizingRatios)) {
+      pendingRatios = snapshot.columnSizingRatios;
+      if (snapshot.columnSizing !== void 0) {
+        states.columnSizingState.value = snapshot.columnSizing;
+      }
+    } else if (snapshot.columnSizing !== void 0) {
       states.columnSizingState.value = snapshot.columnSizing;
     }
     if (snapshot.columnSizingInfo !== void 0) {
@@ -154,6 +173,12 @@ export function useNuGridStatePersistence(states, enabled, storageId, onStateCha
       states.paginationState.value = snapshot.pagination;
     }
   }
+  function applyPendingRatios() {
+    if (pendingRatios && helpers?.applySizingFromRatios) {
+      helpers.applySizingFromRatios(pendingRatios);
+      pendingRatios = null;
+    }
+  }
   function setState(snapshot) {
     try {
       isRestoring = true;
@@ -236,8 +261,46 @@ export function useNuGridStatePersistence(states, enabled, storageId, onStateCha
     watchersActive = true;
     initialActivationComplete = true;
   }
+  function setResizeHelpers(newHelpers) {
+    helpers = newHelpers;
+  }
+  function clearState() {
+    try {
+      isRestoring = true;
+      if (storedState) {
+        storedState.value = null;
+      }
+      if (cookieStateRef) {
+        cookieStateRef.value = null;
+      }
+      states.globalFilterState.value = "";
+      states.columnFiltersState.value = [];
+      states.columnOrderState.value = [];
+      states.columnVisibilityState.value = {};
+      states.columnPinningState.value = {};
+      states.columnSizingState.value = {};
+      states.columnSizingInfoState.value = {};
+      states.rowSelectionState.value = {};
+      states.rowPinningState.value = {};
+      states.sortingState.value = [];
+      states.groupingState.value = [];
+      states.expandedState.value = {};
+      states.paginationState.value = { pageIndex: 0, pageSize: 10 };
+      pendingRatios = null;
+      emitStateChanged({});
+      nextTick(() => {
+        isRestoring = false;
+      });
+    } catch (error) {
+      console.warn("[NuGrid State] Failed to clear state:", error);
+      isRestoring = false;
+    }
+  }
   return {
     getState,
-    setState
+    setState,
+    clearState,
+    applyPendingRatios,
+    setResizeHelpers
   };
 }