@nu-grid/nuxt 0.2.0 → 0.3.0

package/dist/runtime/components/_internal/NuGridSplitGroup.vue

@@ -5,6 +5,7 @@ import { Primitive } from "reka-ui";
 import { upperFirst } from "scule";
 import { computed, h, inject, toValue } from "vue";
 import {
+  getFlexHeaderStyle,
   getHeaderEffectivePinning,
   getHeaderPinningStyle,
   resolveStyleObject,
@@ -21,9 +22,9 @@ const props = defineProps({
   ui: { type: null, required: false },
   preset: { type: String, required: false },
   focus: { type: Object, required: false },
-  editing: { type: Object, required: false },
+  editing: { type: [Boolean, Object], required: false },
   validation: { type: [Boolean, Object], required: false },
-  selection: { type: [Boolean, String, Object], required: false },
+  rowSelection: { type: [Boolean, String, Object], required: false },
   actions: { type: [Boolean, Object], required: false },
   columnDefaults: { type: Object, required: false },
   layout: { type: Object, required: false },
@@ -35,7 +36,7 @@ const props = defineProps({
   theme: { type: [String, Object], required: false },
   virtualization: { type: [Boolean, Object], required: false },
   cellTypes: { type: Array, required: false },
-  skipAutoSizeColumns: { type: Array, required: false },
+  dataTypeInference: { type: Boolean, required: false },
   rowDragOptions: { type: Object, required: false },
   rowId: { type: [String, Function], required: false },
   addNewRow: { type: [Boolean, Object], required: false },
@@ -96,7 +97,7 @@ if (!coreContext || !dragContext || !resizeContext || !virtualizationContext ||
 }
 const { tableRef, rootRef, tableApi, ui, hasFooter, propsUi } = coreContext;
 const { dragFns, rowDragOptions } = dragContext;
-const { handleGroupResizeStart, resizingGroupId, resizingColumnId } = resizeContext;
+const { handleGroupResizeStart, resizingGroupId, resizingColumnId, manuallyResizedColumns } = resizeContext;
 const { stickyEnabled } = virtualizationContext;
 const { groupingFns } = groupingContext;
 const { headerGroupsLength } = performanceContext;
@@ -104,8 +105,17 @@ const {
   sortIcons: gridSortIcons,
   scrollbarClass,
   scrollbarThemeClass,
-  scrollbarAttr
+  scrollbarAttr,
+  autoSizeMode
 } = uiConfigContext;
+const flexStyleOptions = computed(() => ({
+  useCssFlexDistribution: autoSizeMode?.value === "fill",
+  manuallyResizedColumns: manuallyResizedColumns.value,
+  columnSizing: tableApi.getState().columnSizing
+}));
+function getHeaderStyle(header) {
+  return getFlexHeaderStyle(header, flexStyleOptions.value);
+}
 const [DefineTableTemplate, ReuseNuGridTemplate] = createReusableTemplate({ inheritAttrs: false });
 const [DefineGroupHeaderTemplate, ReuseGroupHeaderTemplate] = createReusableTemplate({ inheritAttrs: false });
 const [DefineHeaderCellTemplate, ReuseHeaderCellTemplate] = createReusableTemplate({ inheritAttrs: false });
@@ -255,10 +265,7 @@ function measureElementRef(el) {
 ]"
       :style="{
   ...resolveStyleObject(header.column.columnDef.meta?.style?.th, header),
-  // Use header.getSize() for all headers - it returns the sum of leaf column widths for group headers
-  width: `${header.getSize()}px`,
-  minWidth: `${header.getSize()}px`,
-  maxWidth: `${header.getSize()}px`,
+  ...getHeaderStyle(header),
   ...getHeaderPinningStyle(header, { includeZIndex: isExpanded }),
   ...isExpanded && header.rowSpan > 1 ? { alignSelf: 'stretch' } : {}
 }"
@@ -350,9 +357,7 @@ function measureElementRef(el) {
   ui.td({ class: [propsUi?.td], pinned: !!header.column.getIsPinned() })
 ]"
       :style="{
-  width: `${header.getSize()}px`,
-  minWidth: `${header.getSize()}px`,
-  maxWidth: `${header.getSize()}px`,
+  ...getHeaderStyle(header),
   ...header.column.getIsPinned() === 'left' ? { left: `${header.column.getStart('left')}px` } : {},
   ...header.column.getIsPinned() === 'right' ? { right: `${header.column.getAfter('right')}px` } : {}
 }"
@@ -379,7 +384,10 @@ function measureElementRef(el) {
   </DefineFooterCellTemplate>
 
   <DefineTableTemplate>
-    <div ref="tableRef" :class="ui.base({ class: [propsUi?.base] })">
+    <div
+      ref="tableRef"
+      :class="ui.base({ class: [propsUi?.base, autoSizeMode === 'fill' && 'w-full'] })"
+    >
       <div v-if="caption || !!slots.caption" :class="ui.caption({ class: [propsUi?.caption] })">
         <slot name="caption">
           {{ caption }}
@@ -701,9 +709,7 @@ function measureElementRef(el) {
 ]"
             :style="{
   ...resolveStyleObject(header.column.columnDef.meta?.style?.th, header),
-  width: `${header.getSize()}px`,
-  minWidth: `${header.getSize()}px`,
-  maxWidth: `${header.getSize()}px`,
+  ...getHeaderStyle(header),
   ...getHeaderPinningStyle(header),
   ...header.colSpan > 1 ? { flexGrow: header.colSpan } : {},
   ...header.rowSpan > 1 ? { alignSelf: 'stretch' } : {}

package/dist/runtime/composables/_internal/column-flex-style.d.ts

@@ -0,0 +1,22 @@
+import type { Column, ColumnSizingState, Header } from '@tanstack/vue-table';
+interface FlexStyleOptions {
+    /** Whether CSS flex distribution is enabled (autoSize === 'fill') */
+    useCssFlexDistribution: boolean;
+    /** Set of column IDs that have been manually resized */
+    manuallyResizedColumns: Set<string>;
+    /** Column sizing state from TanStack (for SSR - detects restored sizing) */
+    columnSizing?: ColumnSizingState;
+}
+/**
+ * Get style object for a header with flex distribution support.
+ * In fill mode, uses flex distribution instead of fixed widths.
+ * Respects column-level `grow` and `widthPercentage` properties.
+ * Once a column is manually resized, it switches to fixed width.
+ */
+export declare function getFlexHeaderStyle<T>(header: Header<T, unknown>, options: FlexStyleOptions): Record<string, string | number>;
+/**
+ * Get style object for a cell with flex distribution support.
+ * Mirrors the header style logic for consistent column widths.
+ */
+export declare function getFlexCellStyle<T>(column: Column<T, unknown>, options: FlexStyleOptions): Record<string, string | number>;
+export {};

package/dist/runtime/composables/_internal/column-flex-style.js

@@ -0,0 +1,84 @@
+export function getFlexHeaderStyle(header, options) {
+  const { useCssFlexDistribution, manuallyResizedColumns, columnSizing } = options;
+  const isPinned = header.column.getIsPinned();
+  const columnDef = header.column.columnDef;
+  const minSize = columnDef.minSize ?? 50;
+  const maxSize = columnDef.maxSize;
+  const grow = columnDef.grow;
+  const widthPercentage = columnDef.widthPercentage;
+  const fixedSize = columnDef.size ?? header.getSize();
+  const hasBeenResized = manuallyResizedColumns.has(header.column.id) || columnSizing !== void 0 && header.column.id in columnSizing;
+  if (isPinned) {
+    return {
+      width: `${header.getSize()}px`,
+      minWidth: `${header.getSize()}px`,
+      maxWidth: `${header.getSize()}px`
+    };
+  }
+  if (useCssFlexDistribution) {
+    if (grow === false || hasBeenResized) {
+      const size = hasBeenResized ? header.getSize() : fixedSize;
+      return {
+        width: `${size}px`,
+        minWidth: `${minSize}px`,
+        maxWidth: `${size}px`,
+        flexShrink: 0
+      };
+    }
+    const flexGrow = widthPercentage ?? 1;
+    return {
+      flexGrow,
+      flexShrink: 1,
+      flexBasis: 0,
+      minWidth: `${minSize}px`,
+      ...maxSize && maxSize < Number.MAX_SAFE_INTEGER ? { maxWidth: `${maxSize}px` } : {}
+    };
+  }
+  return {
+    width: `${header.getSize()}px`,
+    minWidth: `${header.getSize()}px`,
+    maxWidth: `${header.getSize()}px`
+  };
+}
+export function getFlexCellStyle(column, options) {
+  const { useCssFlexDistribution, manuallyResizedColumns, columnSizing } = options;
+  const isPinned = column.getIsPinned();
+  const columnDef = column.columnDef;
+  const minSize = columnDef.minSize ?? 50;
+  const maxSize = columnDef.maxSize;
+  const grow = columnDef.grow;
+  const widthPercentage = columnDef.widthPercentage;
+  const fixedSize = columnDef.size ?? column.getSize();
+  const hasBeenResized = manuallyResizedColumns.has(column.id) || columnSizing !== void 0 && column.id in columnSizing;
+  if (isPinned) {
+    return {
+      width: `${column.getSize()}px`,
+      minWidth: `${column.getSize()}px`,
+      maxWidth: `${column.getSize()}px`
+    };
+  }
+  if (useCssFlexDistribution) {
+    if (grow === false || hasBeenResized) {
+      const size = hasBeenResized ? column.getSize() : fixedSize;
+      return {
+        width: `${size}px`,
+        minWidth: `${minSize}px`,
+        maxWidth: `${size}px`,
+        flexShrink: 0
+      };
+    }
+    const flexGrow = widthPercentage ?? 1;
+    return {
+      flexGrow,
+      flexShrink: 1,
+      flexBasis: 0,
+      minWidth: `${minSize}px`,
+      ...maxSize && maxSize < Number.MAX_SAFE_INTEGER ? { maxWidth: `${maxSize}px` } : {}
+    };
+  }
+  return {
+    width: `${column.getSize()}px`,
+    minWidth: `${column.getSize()}px`,
+    maxWidth: `${column.getSize()}px`
+  };
+}

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

@@ -1,6 +1,7 @@
 /**
  * @internal
  */
+export * from './column-flex-style.js';
 export * from './keyboard-handlers/index.js';
 export * from './useNuGridActionMenu.js';
 export * from './useNuGridAddRow.js';

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

@@ -1,3 +1,4 @@
+export * from "./column-flex-style.js";
 export * from "./keyboard-handlers/index.js";
 export * from "./useNuGridActionMenu.js";
 export * from "./useNuGridAddRow.js";

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

@@ -427,7 +427,11 @@ export function useNuGridAddRow(options) {
     );
   }
   function isCellEditable(row, cell) {
-    if (options.props.editing?.enabled === false) {
+    const editingProp = options.props.editing;
+    if (editingProp === false) {
+      return false;
+    }
+    if (typeof editingProp === "object" && editingProp?.enabled === false) {
       return false;
     }
     const columnDef = cell.column.columnDef;

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

@@ -5,10 +5,13 @@ import type { NuGridProps } from '../../types/index.js';
 /**
  * Autosize functionality for tables similar to AG Grid
  * Supports two modes:
- * - fitCell: Auto-size columns to fit cell contents
- * - fitGrid: Auto-size columns to fit cell contents and scale up to fill grid width
+ * - content: Auto-size columns to fit cell contents
+ * - fill: Auto-size columns to fit cell contents and scale up to fill grid width
  */
 export declare function useNuGridAutosize<T extends TableData>(props: NuGridProps<T>, tableApi: Table<T>, tableRef: Ref<HTMLElement | null>): {
-    autoSizeColumns: (mode?: "fitCell" | "fitGrid") => void;
+    autoSizeColumns: (mode?: "content" | "fill") => void;
     autoSizeColumn: (columnId: string) => void;
+    presetEqualColumnWidths: () => void;
+    autosizeReady: Ref<boolean, boolean>;
+    autoSizeMode: import("vue").ComputedRef<NonNullable<import("../../types/index.js").NuGridAutoSizeStrategy | undefined>>;
 };

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

@@ -1,5 +1,5 @@
 import { useDebounceFn } from "@vueuse/core";
-import { nextTick, watch } from "vue";
+import { nextTick, ref, watch } from "vue";
 import { usePropWithDefault } from "../../config/_internal/index.js";
 export function useNuGridAutosize(props, tableApi, tableRef) {
   function measureSingleColumnWidth(columnId, measureDiv) {
@@ -71,16 +71,41 @@ export function useNuGridAutosize(props, tableApi, tableRef) {
     }
   }
   const autoSize = usePropWithDefault(props, "layout", "autoSize");
+  function presetEqualColumnWidths() {
+    if (!tableRef.value) return;
+    const containerWidth = tableRef.value.offsetWidth;
+    if (containerWidth <= 0) return;
+    const visibleColumns = tableApi.getVisibleLeafColumns();
+    const resizableColumns = visibleColumns.filter((col) => {
+      const columnDef = col.columnDef;
+      return columnDef.grow !== false;
+    });
+    if (resizableColumns.length === 0) return;
+    const equalWidth = containerWidth / resizableColumns.length;
+    const newSizing = {};
+    resizableColumns.forEach((column) => {
+      const minSize = column.columnDef.minSize ?? 20;
+      const maxSize = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
+      newSizing[column.id] = Math.max(minSize, Math.min(equalWidth, maxSize));
+    });
+    tableApi.setColumnSizing((old) => ({
+      ...old,
+      ...newSizing
+    }));
+  }
   function autoSizeColumns(mode) {
     const effectiveMode = mode || autoSize.value;
     if (!effectiveMode || !tableRef.value) return;
     const visibleColumns = tableApi.getVisibleLeafColumns();
-    const skipColumns = props.skipAutoSizeColumns || [];
     const newSizing = {};
-    const columnsToMeasure = visibleColumns.filter((column) => !skipColumns.includes(column.id)).map((column) => column.id);
+    const columnsToMeasure = visibleColumns.filter((column) => {
+      const columnDef = column.columnDef;
+      return columnDef.grow !== false;
+    }).map((column) => column.id);
     const measuredWidths = measureAllColumnsContentWidth(columnsToMeasure);
     const columnWidths = visibleColumns.map((column) => {
-      if (skipColumns.includes(column.id)) {
+      const columnDef = column.columnDef;
+      if (columnDef.grow === false) {
         return { id: column.id, width: column.getSize(), skip: true };
       }
       const minSize = column.columnDef.minSize ?? 20;
@@ -90,7 +115,7 @@ export function useNuGridAutosize(props, tableApi, tableRef) {
       return { id: column.id, width: constrainedWidth, skip: false };
     });
     const totalContentWidth = columnWidths.reduce((sum, col) => sum + col.width, 0);
-    if (effectiveMode === "fitGrid" && tableRef.value) {
+    if (effectiveMode === "fill" && tableRef.value) {
       const containerWidth = tableRef.value.offsetWidth;
       if (totalContentWidth < containerWidth && totalContentWidth > 0) {
         const scaleFactor = containerWidth / totalContentWidth;
@@ -128,8 +153,8 @@ export function useNuGridAutosize(props, tableApi, tableRef) {
   function autoSizeColumn(columnId) {
     const column = tableApi.getColumn(columnId);
     if (!column) return;
-    const skipColumns = props.skipAutoSizeColumns || [];
-    if (skipColumns.includes(columnId)) return;
+    const columnDef = column.columnDef;
+    if (columnDef.grow === false) return;
     const visibleColumns = tableApi.getVisibleLeafColumns();
     const columnIndex = visibleColumns.findIndex((col) => col.id === columnId);
     if (columnIndex === -1) return;
@@ -145,17 +170,74 @@ export function useNuGridAutosize(props, tableApi, tableRef) {
   const debouncedAutosize = useDebounceFn(() => {
     autoSizeColumns();
   }, 100);
+  let initialAutosizeComplete = false;
+  const autosizeReady = ref(!autoSize.value || autoSize.value === "fill");
+  function syncFlexColumnWidths() {
+    if (!tableRef.value) return;
+    const visibleColumns = tableApi.getVisibleLeafColumns();
+    const columnSizing = tableApi.getState().columnSizing;
+    const newSizing = {};
+    const headerCells = tableRef.value.querySelectorAll("[data-column-id]");
+    const measuredWidths = /* @__PURE__ */ new Map();
+    headerCells.forEach((cell) => {
+      const columnId = cell.getAttribute("data-column-id");
+      if (columnId && !measuredWidths.has(columnId)) {
+        measuredWidths.set(columnId, cell.offsetWidth);
+      }
+    });
+    for (const column of visibleColumns) {
+      const columnDef = column.columnDef;
+      const isFlexColumn = columnDef.grow !== false && !columnSizing[column.id];
+      if (isFlexColumn) {
+        const measuredWidth = measuredWidths.get(column.id);
+        if (measuredWidth && measuredWidth > 0) {
+          newSizing[column.id] = measuredWidth;
+        }
+      }
+    }
+    if (Object.keys(newSizing).length > 0) {
+      tableApi.setColumnSizing((old) => ({
+        ...old,
+        ...newSizing
+      }));
+    }
+  }
   watch(
     [() => props.data, autoSize],
     () => {
       if (autoSize.value) {
-        nextTick(debouncedAutosize);
+        if (autoSize.value === "fill") {
+          autosizeReady.value = true;
+          initialAutosizeComplete = true;
+          if (props.data && props.data.length > 0 && typeof requestAnimationFrame !== "undefined") {
+            nextTick(() => {
+              requestAnimationFrame(() => {
+                syncFlexColumnWidths();
+              });
+            });
+          }
+          return;
+        }
+        if (!initialAutosizeComplete && props.data && props.data.length > 0) {
+          nextTick(() => {
+            autoSizeColumns();
+            initialAutosizeComplete = true;
+            autosizeReady.value = true;
+          });
+        } else if (initialAutosizeComplete) {
+          nextTick(debouncedAutosize);
+        }
+      } else {
+        autosizeReady.value = true;
       }
     },
     { immediate: true, flush: "post" }
   );
   return {
     autoSizeColumns,
-    autoSizeColumn
+    autoSizeColumn,
+    presetEqualColumnWidths,
+    autosizeReady,
+    autoSizeMode: autoSize
   };
 }

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

@@ -894,8 +894,9 @@ export function useNuGridCellEditing(props, tableApi, data, rows, tableRef, root
         }
       }
     }
-    if (props.editing?.defaultEditors?.[cellDataType]) {
-      const customEditor = props.editing.defaultEditors[cellDataType];
+    const editingConfig = typeof props.editing === "object" ? props.editing : void 0;
+    if (editingConfig?.defaultEditors?.[cellDataType]) {
+      const customEditor = editingConfig.defaultEditors[cellDataType];
       if (customEditor) {
         const context2 = createEditorContext(cell, row);
         return renderEditor(customEditor, context2);

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

@@ -1,22 +1,32 @@
 import type { TableData } from '@nuxt/ui';
 import type { Header, Table } from '@tanstack/vue-table';
+import type { Ref } from 'vue';
 import type { NuGridProps } from '../../types/index.js';
 /**
  * Column resize functionality with cursor locking
  */
-export declare function useNuGridColumnResize<T extends TableData>(props: NuGridProps<T>, tableApi: Table<T>): {
+export declare function useNuGridColumnResize<T extends TableData>(props: NuGridProps<T>, tableApi: Table<T>, tableRef: Ref<HTMLElement | null>): {
     handleResizeStart: (event: MouseEvent | TouchEvent, header: Header<T, any>) => void;
     handleGroupResizeStart: (event: MouseEvent | TouchEvent, header: Header<T, any>) => void;
     handleResizeEnd: () => void;
-    resizingGroupId: import("vue").Ref<string | null, string | null>;
-    resizingColumnId: import("vue").Ref<string | null, string | null>;
+    resizingGroupId: Ref<string | null, string | null>;
+    resizingColumnId: Ref<string | null, string | null>;
+    manuallyResizedColumns: Ref<Set<string> & Omit<Set<string>, keyof Set<any>>, Set<string> | (Set<string> & Omit<Set<string>, keyof Set<any>>)>;
+    getContainerWidth: () => number;
+    getSizingAsRatios: () => Record<string, number>;
+    applySizingFromRatios: (ratios: Record<string, number>) => void;
+    applyRestoredSizing: (sizing: Record<string, number>) => void;
 };
 /**
- * Custom resize handler that maintains table width by redistributing size changes
- * to following columns
+ * Shift resize handler - redistributes size changes to adjacent columns
+ * to maintain the total table width
  */
-export declare function createMaintainWidthResizeHandler<TData>(header: Header<TData, any>, table: Table<TData>): (event: MouseEvent | TouchEvent) => void;
+export declare function createShiftResizeHandler<TData>(header: Header<TData, any>, table: Table<TData>, _manuallyResizedColumns?: {
+    value: Set<string>;
+}): (event: MouseEvent | TouchEvent) => void;
 /**
  * Custom resize handler for column groups that resizes all leaf columns proportionately
  */
-export declare function createGroupResizeHandler<TData>(header: Header<TData, any>, table: Table<TData>): (event: MouseEvent | TouchEvent) => void;
+export declare function createGroupResizeHandler<TData>(header: Header<TData, any>, table: Table<TData>, _manuallyResizedColumns?: {
+    value: Set<string>;
+}): (event: MouseEvent | TouchEvent) => void;