@kouji-ui/core 0.9.2 → 0.10.0

package/fesm2022/kouji-ui-core.mjs

@@ -22156,6 +22156,54 @@ class KjTable {
     setRowCount(n) {
         this._rowCount.set(n);
     }
+    /**
+     * Server-side infinite mode. When on, `kjTableData` is index-aligned with
+     * the server's result set and may hold holes (`undefined` / `null`) for
+     * rows that are not loaded yet: the holes are dropped before the rows reach
+     * TanStack, and {@link sourceIndex} maps each loaded row back to its
+     * position in the full result set. Sorting, filtering and pagination are
+     * left to the server (TanStack's `manual*` flags), so a header click only
+     * changes `state.sorting()` — feed it into your loader's request.
+     */
+    _infinite = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_infinite" }] : /* istanbul ignore next */ []));
+    /** Whether server-side infinite mode is on — see {@link setInfinite}. */
+    infinite = this._infinite.asReadonly();
+    /**
+     * Turn server-side infinite mode on or off.
+     * @param on `true` while the data is a sparse window of a server result set.
+     */
+    setInfinite(on) {
+        this._infinite.set(on);
+    }
+    /** Rows handed to TanStack plus, in infinite mode, their positions in the full result set. */
+    compacted = computed(() => {
+        const data = this.kjTableData();
+        if (!this._infinite())
+            return { rows: data, sourceIndex: null };
+        const rows = [];
+        const sourceIndex = [];
+        // `forEach` skips true holes, so a `new Array(total)` window costs only
+        // its loaded entries.
+        data.forEach((row, i) => {
+            if (row == null)
+                return;
+            rows.push(row);
+            sourceIndex.push(i);
+        });
+        return { rows, sourceIndex };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compacted" }] : /* istanbul ignore next */ []));
+    /**
+     * In infinite mode, the result-set position of each loaded top-level row,
+     * indexed by its TanStack `row.index`; `null` otherwise.
+     */
+    sourceIndex = computed(() => this.compacted().sourceIndex, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceIndex" }] : /* istanbul ignore next */ []));
+    /** Position of a top-level row in the full result set (its `row.index` outside infinite mode). */
+    sourceIndexOf(index) {
+        return this.compacted().sourceIndex?.[index] ?? index;
+    }
     /**
      * Apply a TanStack updater (value or function) to a single state slice.
      *
@@ -22198,11 +22246,15 @@ class KjTable {
     ...(ngDevMode ? [{ debugName: "boundColumns" }] : /* istanbul ignore next */ []));
     /** The TanStack table instance. Access rows, headers, and state here. */
     table = createAngularTable(() => ({
-        data: this.kjTableData(),
+        data: this.compacted().rows,
         columns: this.boundColumns(),
+        // In infinite mode a top-level row's index is its result-set position,
+        // so default ids stay stable while pages load around them.
         getRowId: this.kjGetRowId()
-            ? (row, index) => this.kjGetRowId()(row, index)
-            : undefined,
+            ? (row, index, parent) => this.kjGetRowId()(row, parent ? index : this.sourceIndexOf(index))
+            : this._infinite()
+                ? (_row, index, parent) => (parent ? `${parent.id}.${index}` : String(this.sourceIndexOf(index)))
+                : undefined,
         // `columnResizeMode: 'onEnd'` defers the actual column width write until
         // the user releases the resize handle. While dragging, the wrapper reads
         // `state.columnSizingInfo().deltaOffset` to render a vertical preview
@@ -22212,7 +22264,9 @@ class KjTable {
         // TanStack to manual pagination so the loader-page becomes the
         // visible page (no client-side slicing) and pagination controls
         // derive their totals from the remote count.
-        manualPagination: this._rowCount() !== null,
+        manualPagination: this._rowCount() !== null || this._infinite(),
+        manualSorting: this._infinite(),
+        manualFiltering: this._infinite(),
         rowCount: this._rowCount() ?? undefined,
         state: { ...this._state(), columnSizingInfo: this._columnSizingInfo() },
         onSortingChange: u => this.patch('sorting', u),
@@ -22514,7 +22568,12 @@ class KjTableRow {
     ...(ngDevMode ? [{ debugName: "kjRow" }] : /* istanbul ignore next */ []));
     table = injectParent(KJ_TABLE, { child: 'KjTableRow', parent: '[kjTable]' });
     /** 1-based ARIA index — accounts for header row(s). */
-    ariaRowIndex = computed(() => this.kjRow().index + 2, /* @ts-ignore */
+    ariaRowIndex = computed(() => {
+        const row = this.kjRow();
+        // Infinite mode: the row's place in the whole result set, not in the loaded window.
+        const source = row.depth === 0 ? this.table.sourceIndex()?.[row.index] : undefined;
+        return (source ?? row.index) + 2;
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaRowIndex" }] : /* istanbul ignore next */ []));
     isSelectable = computed(() => Object.keys(this.table.state.rowSelection()).length >= 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isSelectable" }] : /* istanbul ignore next */ [])); // always true if selection enabled