@shival99/z-ui 2.0.38 → 2.0.40

package/fesm2022/shival99-z-ui-components-z-table.mjs

@@ -4685,7 +4685,8 @@ class ZTableComponent {
     _bulkBarTimer = null;
     _activeColumnVisibilityPopover = signal(null, ...(ngDevMode ? [{ debugName: "_activeColumnVisibilityPopover" }] : []));
     _hasInitializedColumnPinning = false;
-    _fitColumnFrame = null;
+    _fitColumnScheduleId = 0;
+    _isFitColumnScheduled = false;
     _isApplyingFitColumnSizing = false;
     // ─── Template-bound State ─────────────────────────────────────────────────
     /** Merged loading state from both zLoading input and config.loading */
@@ -4711,36 +4712,12 @@ class ZTableComponent {
     rowPinning = signal({ top: [], bottom: [] }, ...(ngDevMode ? [{ debugName: "rowPinning" }] : []));
     columnFilters = signal([], ...(ngDevMode ? [{ debugName: "columnFilters" }] : []));
     globalFilter = signal('', ...(ngDevMode ? [{ debugName: "globalFilter" }] : []));
-    // Synchronize initial column sizes from configuration to prevent layout shift.
-    // Use previous state to check if column structure has changed, avoiding sizing resets on reload.
+    // Giữ kích thước cột đã ổn định khi config được tạo lại trong lúc tải dữ liệu.
     columnSizingState = linkedSignal({ ...(ngDevMode ? { debugName: "columnSizingState" } : {}), source: () => this._columns(),
-        computation: (cols, previous) => {
-            if (previous && this._areColumnsEquivalent(previous.source, cols)) {
-                return previous.value;
-            }
-            const initialSizing = {};
-            for (const col of cols) {
-                if (col.id) {
-                    initialSizing[col.id] = col.size ?? Math.max(col.minSize ?? 100, 150);
-                }
-            }
-            return initialSizing;
-        } });
-    // Synchronize initial base sizing for column distribution or stretching.
-    // Use previous state to check for changes similar to columnSizingState to prevent resets.
+        computation: (cols, previous) => this._reconcileColumnSizing(cols, previous) });
+    // Tách kích thước gốc khỏi phần chiều rộng được phân bổ thêm theo container.
     _columnBaseSizing = linkedSignal({ ...(ngDevMode ? { debugName: "_columnBaseSizing" } : {}), source: () => this._columns(),
-        computation: (cols, previous) => {
-            if (previous && this._areColumnsEquivalent(previous.source, cols)) {
-                return previous.value;
-            }
-            const initialSizing = {};
-            for (const col of cols) {
-                if (col.id) {
-                    initialSizing[col.id] = col.size ?? Math.max(col.minSize ?? 100, 150);
-                }
-            }
-            return initialSizing;
-        } });
+        computation: (cols, previous) => this._reconcileColumnSizing(cols, previous) });
     /** Note: pageIndex is 1-based here; converted to 0-based for TanStack via _tanstackPagination */
     pagination = signal({ pageIndex: 1, pageSize: 10 }, ...(ngDevMode ? [{ debugName: "pagination" }] : []));
     sorting = signal([], ...(ngDevMode ? [{ debugName: "sorting" }] : []));
@@ -4924,24 +4901,29 @@ class ZTableComponent {
         }
         const { config } = actionCol;
         const maxVisible = config.maxVisible ?? Z_TABLE_DEFAULT_MAX_VISIBLE_ACTIONS;
-        const data = this._actionColumnRows();
         let buttonCount = 0;
-        for (const row of data) {
-            const actions = typeof config.actions === 'function' ? config.actions(row) : config.actions;
-            const visibleActions = actions.filter(action => {
-                if (typeof action.hidden === 'function') {
-                    return !action.hidden(row);
+        if (Array.isArray(config.actions)) {
+            const possibleVisibleCount = config.actions.filter(action => action.hidden !== true).length;
+            buttonCount = possibleVisibleCount > maxVisible ? 1 : possibleVisibleCount;
+        }
+        if (typeof config.actions === 'function') {
+            const data = this._actionColumnRows();
+            for (const row of data) {
+                const visibleActions = config.actions(row).filter(action => {
+                    if (typeof action.hidden === 'function') {
+                        return !action.hidden(row);
+                    }
+                    return !action.hidden;
+                });
+                const rowButtonCount = visibleActions.length > maxVisible ? 1 : visibleActions.length;
+                buttonCount = Math.max(buttonCount, rowButtonCount);
+                if (buttonCount === maxVisible) {
+                    break;
                 }
-                return !action.hidden;
-            });
-            const rowButtonCount = visibleActions.length > maxVisible ? 1 : visibleActions.length;
-            buttonCount = Math.max(buttonCount, rowButtonCount);
-            if (buttonCount === maxVisible) {
-                break;
             }
-        }
-        if (data.length === 0) {
-            buttonCount = maxVisible;
+            if (data.length === 0) {
+                buttonCount = maxVisible;
+            }
         }
         const buttonWidth = Z_TABLE_DEFAULT_ACTION_BUTTON_WIDTH;
         const gap = 4;
@@ -6079,7 +6061,7 @@ class ZTableComponent {
                         this._resizeObserver.disconnect();
                         this._resizeObserver = null;
                     }
-                    this._cancelFitColumnFrame();
+                    this._cancelFitColumnSchedule();
                 });
             }
         });
@@ -6616,30 +6598,22 @@ class ZTableComponent {
         this._columnBaseSizing.set(nextBaseSizing);
     }
     _scheduleFitColumnWidths() {
-        if (this._fitColumnFrame !== null) {
+        if (this._isFitColumnScheduled) {
             return;
         }
-        const run = () => {
-            this._fitColumnFrame = null;
+        this._isFitColumnScheduled = true;
+        const scheduleId = ++this._fitColumnScheduleId;
+        queueMicrotask(() => {
+            if (scheduleId !== this._fitColumnScheduleId) {
+                return;
+            }
+            this._isFitColumnScheduled = false;
             this._applyFitColumnWidths();
-        };
-        if (typeof requestAnimationFrame === 'function') {
-            this._fitColumnFrame = requestAnimationFrame(run);
-            return;
-        }
-        this._fitColumnFrame = setTimeout(run, 0);
+        });
     }
-    _cancelFitColumnFrame() {
-        if (this._fitColumnFrame === null) {
-            return;
-        }
-        if (typeof cancelAnimationFrame === 'function' && typeof this._fitColumnFrame === 'number') {
-            cancelAnimationFrame(this._fitColumnFrame);
-            this._fitColumnFrame = null;
-            return;
-        }
-        clearTimeout(this._fitColumnFrame);
-        this._fitColumnFrame = null;
+    _cancelFitColumnSchedule() {
+        this._fitColumnScheduleId += 1;
+        this._isFitColumnScheduled = false;
     }
     _applyFitColumnWidths() {
         this._syncColumnBaseSizing();
@@ -6686,19 +6660,25 @@ class ZTableComponent {
         }
         return leftKeys.every(key => left[key] === right[key]);
     }
-    // Compare old and new column definition structures to avoid resetting sizing state
-    _areColumnsEquivalent(oldCols, newCols) {
-        if (oldCols.length !== newCols.length) {
-            return false;
-        }
-        for (let i = 0; i < oldCols.length; i++) {
-            const o = oldCols[i];
-            const n = newCols[i];
-            if (o.id !== n.id || o.size !== n.size || o.minSize !== n.minSize || o.maxSize !== n.maxSize) {
-                return false;
+    _reconcileColumnSizing(columns, previous) {
+        const previousColumns = new Map(previous?.source.map(column => [column.id, column]));
+        const nextSizing = {};
+        for (const column of columns) {
+            if (!column.id) {
+                continue;
+            }
+            const previousColumn = previousColumns.get(column.id);
+            const canKeepPreviousSize = previousColumn &&
+                previousColumn.size === column.size &&
+                previousColumn.minSize === column.minSize &&
+                previousColumn.maxSize === column.maxSize;
+            if (canKeepPreviousSize && previous?.value[column.id] !== undefined) {
+                nextSizing[column.id] = previous.value[column.id];
+                continue;
             }
+            nextSizing[column.id] = column.size ?? Math.max(column.minSize ?? Z_DEFAULT_COLUMN_MIN_SIZE, 150);
         }
-        return true;
+        return nextSizing;
     }
     _checkHorizontalScroll() {
         const containerEl = this.tbodyContainer()?.nativeElement;