sit-onyx 1.4.0-dev-20251118074438 → 1.4.0-dev-20251118092838

package/dist/components/OnyxDataGrid/features/resizing/types.d.ts

@@ -1,7 +1,19 @@
+import { Ref } from 'vue';
 import { DataGridEntry } from '../../types.js';
 import { DataGridFeatureOptions } from '../index.js';
 /**
  * The configuration options for the resizing feature in the OnyxDataGrid component.
  * Includes settings for the individual columns and general resizing behavior.
  */
-export type ResizingOptions<TEntry extends DataGridEntry> = DataGridFeatureOptions<TEntry, object>;
+export type ResizingOptions<TEntry extends DataGridEntry> = DataGridFeatureOptions<TEntry, object> & {
+    /**
+     * The current column resizing state.
+     * Can be used to e.g. save the user resized columns and restore them on page load.
+     */
+    resizeState?: Ref<ResizeState<TEntry>>;
+};
+/**
+ * Defines the current column resizing state.
+ * Key = Column key, value = resized width.
+ */
+export type ResizeState<TEntry> = Map<keyof TEntry, string>;

package/dist/index.esm-bundler.js

@@ -9581,15 +9581,15 @@ const useResizing = (options) => createFeature((ctx) => {
   const MIN_COLUMN_WIDTH = 3 * 16;
   const headers = ref(/* @__PURE__ */ new Map());
   const { isEnabled } = useFeatureContext(ctx, options);
-  const colWidths = ref(/* @__PURE__ */ new Map());
+  const resizeState = toRef(options?.resizeState ?? /* @__PURE__ */ new Map());
   const scrollContainer = ref();
   watch(
-    [headers, colWidths],
+    [headers, resizeState],
     () => {
       headers.value.forEach((th, columnKey) => {
         const property = `--onyx-data-grid-column-${escapeCSS(columnKey)}`;
         const container = th.closest(".onyx-table-wrapper__container");
-        const width = colWidths.value.get(columnKey);
+        const width = resizeState.value.get(columnKey);
         if (width) {
           container?.style.setProperty(property, width);
         } else {
@@ -9612,7 +9612,7 @@ const useResizing = (options) => createFeature((ctx) => {
           }
         }
       };
-      const resizedWidth = colWidths.value.get(column.key);
+      const resizedWidth = resizeState.value.get(column.key);
       return {
         ...column,
         width: resizedWidth || column.width,
@@ -9634,16 +9634,16 @@ const useResizing = (options) => createFeature((ctx) => {
           resizingCol.value = column;
           Array.from(headers.value.entries()).forEach(([col, el]) => {
             const { width } = el.getBoundingClientRect();
-            colWidths.value.set(col, `${Math.max(MIN_COLUMN_WIDTH, width)}px`);
+            resizeState.value.set(col, `${Math.max(MIN_COLUMN_WIDTH, width)}px`);
           });
         },
         onEnd: () => {
           resizingCol.value = void 0;
         },
         onUpdateWidth: (width) => {
-          colWidths.value.set(column.key, `${width}px`);
+          resizeState.value.set(column.key, `${width}px`);
         },
-        onAutoSize: () => colWidths.value.set(column.key, "max-content")
+        onAutoSize: () => resizeState.value.set(column.key, "max-content")
       }),
       slotContent
     ];