@shival99/z-ui 2.0.40 → 2.0.42

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

@@ -4685,9 +4685,7 @@ class ZTableComponent {
     _bulkBarTimer = null;
     _activeColumnVisibilityPopover = signal(null, ...(ngDevMode ? [{ debugName: "_activeColumnVisibilityPopover" }] : []));
     _hasInitializedColumnPinning = false;
-    _fitColumnScheduleId = 0;
     _isFitColumnScheduled = false;
-    _isApplyingFitColumnSizing = false;
     // ─── Template-bound State ─────────────────────────────────────────────────
     /** Merged loading state from both zLoading input and config.loading */
     isLoading = computed(() => this.zConfig().loading ?? this.zLoading(), ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
@@ -4876,40 +4874,45 @@ class ZTableComponent {
         }
         return !this.hasBodyRowSpan();
     }, ...(ngDevMode ? [{ debugName: "isRowDragEnabled" }] : []));
-    actionColumnInfo = computed(() => {
-        const columns = this.zConfig().columns ?? [];
-        const findActionColumn = (cols) => {
-            for (const col of cols) {
-                if (isBodyConfig(col.body)) {
-                    const actionConfig = this._getActionColumnConfig(col.body);
-                    if (actionConfig) {
-                        return { columnId: col.id, config: actionConfig };
+    actionColumnInfo = linkedSignal({ ...(ngDevMode ? { debugName: "actionColumnInfo" } : {}), source: () => ({
+            columns: this.zConfig().columns ?? [],
+            isPending: this.isLoading() || this.isProcessing(),
+            rows: this._actionColumnRows(),
+        }),
+        computation: ({ columns, isPending, rows }, previous) => {
+            const findActionColumn = (cols) => {
+                for (const col of cols) {
+                    if (isBodyConfig(col.body)) {
+                        const actionConfig = this._getActionColumnConfig(col.body);
+                        if (actionConfig) {
+                            return { columnId: col.id, config: actionConfig };
+                        }
                     }
-                }
-                if (col.columns?.length) {
-                    const found = findActionColumn(col.columns);
-                    if (found) {
-                        return found;
+                    if (col.columns?.length) {
+                        const found = findActionColumn(col.columns);
+                        if (found) {
+                            return found;
+                        }
                     }
                 }
+                return null;
+            };
+            const actionCol = findActionColumn(columns);
+            if (!actionCol) {
+                return null;
             }
-            return null;
-        };
-        const actionCol = findActionColumn(columns);
-        if (!actionCol) {
-            return null;
-        }
-        const { config } = actionCol;
-        const maxVisible = config.maxVisible ?? Z_TABLE_DEFAULT_MAX_VISIBLE_ACTIONS;
-        let buttonCount = 0;
-        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 (isPending && previous?.value?.columnId === actionCol.columnId) {
+                return {
+                    ...previous.value,
+                    config: actionCol.config,
+                };
+            }
+            const { config } = actionCol;
+            const maxVisible = config.maxVisible ?? Z_TABLE_DEFAULT_MAX_VISIBLE_ACTIONS;
+            let buttonCount = 0;
+            for (const row of rows) {
+                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);
                     }
@@ -4921,20 +4924,23 @@ class ZTableComponent {
                     break;
                 }
             }
-            if (data.length === 0) {
+            if (rows.length === 0 && Array.isArray(config.actions)) {
+                const possibleVisibleCount = config.actions.filter(action => action.hidden !== true).length;
+                buttonCount = possibleVisibleCount > maxVisible ? 1 : possibleVisibleCount;
+            }
+            if (rows.length === 0 && typeof config.actions === 'function') {
                 buttonCount = maxVisible;
             }
-        }
-        const buttonWidth = Z_TABLE_DEFAULT_ACTION_BUTTON_WIDTH;
-        const gap = 4;
-        const padding = 16;
-        const width = buttonCount * buttonWidth + Math.max(0, buttonCount - 1) * gap + padding;
-        return {
-            columnId: actionCol.columnId,
-            config: actionCol.config,
-            width,
-        };
-    }, ...(ngDevMode ? [{ debugName: "actionColumnInfo" }] : []));
+            const buttonWidth = Z_TABLE_DEFAULT_ACTION_BUTTON_WIDTH;
+            const gap = 4;
+            const padding = 16;
+            const width = buttonCount * buttonWidth + Math.max(0, buttonCount - 1) * gap + padding;
+            return {
+                columnId: actionCol.columnId,
+                config: actionCol.config,
+                width,
+            };
+        } });
     _actionColumnRows = computed(() => {
         const data = this._data();
         const config = this.zConfig();
@@ -4945,7 +4951,6 @@ class ZTableComponent {
         const start = Math.max(0, pageIndex - 1) * pageSize;
         return data.slice(start, start + pageSize);
     }, ...(ngDevMode ? [{ debugName: "_actionColumnRows" }] : []));
-    hasActionColumn = computed(() => this.actionColumnInfo() !== null, ...(ngDevMode ? [{ debugName: "hasActionColumn" }] : []));
     _fixedColumnPinning = computed(() => {
         const actionColumnId = this.actionColumnInfo()?.columnId;
         const configuredColumnIds = new Set();
@@ -5061,27 +5066,6 @@ class ZTableComponent {
         };
         return columns.some(c => checkServerFilter(c));
     }, ...(ngDevMode ? [{ debugName: "hasServerFiltering" }] : []));
-    hasServerSorting = computed(() => {
-        const config = this.zConfig();
-        if (config.enableColumnSorting === false) {
-            return false;
-        }
-        const columns = config.columns ?? [];
-        const checkServerSorting = (col) => {
-            const sortConfig = typeof col.sort === 'boolean' ? { enabled: col.sort } : col.sort;
-            if (sortConfig?.enabled) {
-                const sortMode = sortConfig.mode ?? 'local';
-                if (sortMode === 'server') {
-                    return true;
-                }
-            }
-            if (col.columns?.length) {
-                return col.columns.some(c => checkServerSorting(c));
-            }
-            return false;
-        };
-        return columns.some(c => checkServerSorting(c));
-    }, ...(ngDevMode ? [{ debugName: "hasServerSorting" }] : []));
     searchConfig = computed(() => {
         const { search } = this.zConfig();
         if (!search) {
@@ -5327,7 +5311,6 @@ class ZTableComponent {
         return columns.some(c => checkFooter(c));
     }, ...(ngDevMode ? [{ debugName: "hasFooter" }] : []));
     isEmpty = computed(() => this.table.getRowModel().rows.length === 0, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
-    isEmptyData = computed(() => this._data().length === 0, ...(ngDevMode ? [{ debugName: "isEmptyData" }] : []));
     isNoSearchResults = computed(() => {
         const isServerMode = this.zConfig().mode === 'server';
         const hasActiveFilter = this.globalFilter().trim() !== '' || this.columnFilters().length > 0;
@@ -5461,10 +5444,6 @@ class ZTableComponent {
             .filter(column => column.getIsVisible() && !this._isSpecialColumnId(column.id) && column.id !== actionColumnId)
             .map(column => column.id);
     }, ...(ngDevMode ? [{ debugName: "fitColumnIds" }] : []));
-    fillColumnId = computed(() => {
-        const columnIds = this.fitColumnIds();
-        return columnIds[columnIds.length - 1] ?? null;
-    }, ...(ngDevMode ? [{ debugName: "fillColumnId" }] : []));
     hideableColumns = computed(() => this.orderedLeafColumns().filter(col => col.getCanHide() && !this._isColumnHiddenFromVisibilityMenu(col.id)), ...(ngDevMode ? [{ debugName: "hideableColumns" }] : []));
     orderedHeaderGroups = computed(() => {
         void this.columnPinning();
@@ -5510,21 +5489,10 @@ class ZTableComponent {
     leftHeaderRow = computed(() => this.table.getLeftHeaderGroups()[0]?.headers ?? [], ...(ngDevMode ? [{ debugName: "leftHeaderRow" }] : []));
     centerHeaderRow = computed(() => this.table.getCenterHeaderGroups()[0]?.headers ?? [], ...(ngDevMode ? [{ debugName: "centerHeaderRow" }] : []));
     rightHeaderRow = computed(() => this.table.getRightHeaderGroups()[0]?.headers ?? [], ...(ngDevMode ? [{ debugName: "rightHeaderRow" }] : []));
-    leftFooterRow = computed(() => this.table.getLeftFooterGroups()[0]?.headers ?? [], ...(ngDevMode ? [{ debugName: "leftFooterRow" }] : []));
-    centerFooterRow = computed(() => this.table.getCenterFooterGroups()[0]?.headers ?? [], ...(ngDevMode ? [{ debugName: "centerFooterRow" }] : []));
-    rightFooterRow = computed(() => this.table.getRightFooterGroups()[0]?.headers ?? [], ...(ngDevMode ? [{ debugName: "rightFooterRow" }] : []));
     virtualCenterHeaderRow = computed(() => {
         const visibleColumns = this.virtualCenterColumnVisibilityMap();
         return this.centerHeaderRow().filter(header => visibleColumns[header.column.id]);
     }, ...(ngDevMode ? [{ debugName: "virtualCenterHeaderRow" }] : []));
-    virtualCenterFooterRow = computed(() => {
-        const visibleColumns = this.virtualCenterColumnVisibilityMap();
-        return this.centerFooterRow().filter(footer => visibleColumns[footer.column.id]);
-    }, ...(ngDevMode ? [{ debugName: "virtualCenterFooterRow" }] : []));
-    totalWidth = computed(() => {
-        const columns = this.table.getAllLeafColumns();
-        return columns.reduce((sum, col) => sum + col.getSize(), 0);
-    }, ...(ngDevMode ? [{ debugName: "totalWidth" }] : []));
     shouldHeaderShowShadow = computed(() => this.showHeaderFooterShadow() && this.table.getTopRows().length === 0, ...(ngDevMode ? [{ debugName: "shouldHeaderShowShadow" }] : []));
     shouldFooterShowShadow = computed(() => this.showHeaderFooterShadow() && this.table.getBottomRows().length === 0, ...(ngDevMode ? [{ debugName: "shouldFooterShowShadow" }] : []));
     tbodyContainerHeight = signal(0, ...(ngDevMode ? [{ debugName: "tbodyContainerHeight" }] : []));
@@ -5544,14 +5512,6 @@ class ZTableComponent {
         }
         return Math.min(this.pagination().pageSize || 10, 10);
     }, ...(ngDevMode ? [{ debugName: "skeletonRowCount" }] : []));
-    actualSkeletonRowHeight = computed(() => {
-        const containerHeight = this.tbodyContainerHeight();
-        const rowCount = this.skeletonRowCount();
-        if (containerHeight > 0 && rowCount > 0) {
-            return containerHeight / rowCount;
-        }
-        return this.skeletonRowHeight();
-    }, ...(ngDevMode ? [{ debugName: "actualSkeletonRowHeight" }] : []));
     skeletonRows = computed(() => {
         const count = this.skeletonRowCount();
         return Array.from({ length: count }, (_, i) => i);
@@ -6061,7 +6021,6 @@ class ZTableComponent {
                         this._resizeObserver.disconnect();
                         this._resizeObserver = null;
                     }
-                    this._cancelFitColumnSchedule();
                 });
             }
         });
@@ -6086,21 +6045,19 @@ class ZTableComponent {
         //     }
         //   });
         // });
-        let lastResetPagination = null;
-        let lastResetFilters = null;
-        let lastResetSorting = null;
+        let lastResetState = null;
         explicitEffect([this.columnFilters, this.globalFilter, this.pagination, this.sorting], ([columnFilters, globalFilter, pagination, sorting]) => {
-            const filtersStr = JSON.stringify({ columnFilters, globalFilter });
-            const paginationStr = JSON.stringify({ pageIndex: pagination.pageIndex, pageSize: pagination.pageSize });
-            const sortingStr = JSON.stringify(sorting);
-            if (lastResetFilters === filtersStr &&
-                lastResetPagination === paginationStr &&
-                lastResetSorting === sortingStr) {
+            const resetState = JSON.stringify({
+                columnFilters,
+                globalFilter,
+                pageIndex: pagination.pageIndex,
+                pageSize: pagination.pageSize,
+                sorting,
+            });
+            if (lastResetState === resetState) {
                 return;
             }
-            lastResetFilters = filtersStr;
-            lastResetPagination = paginationStr;
-            lastResetSorting = sortingStr;
+            lastResetState = resetState;
             if (this.isVirtual()) {
                 const wrapperEl = this.tbodyWrapper()?.nativeElement;
                 if (wrapperEl) {
@@ -6570,14 +6527,10 @@ class ZTableComponent {
             return;
         }
         this.columnSizingState.set(next);
-        if (this._isApplyingFitColumnSizing) {
-            return;
-        }
         this._columnBaseSizing.set(next);
         this._scheduleFitColumnWidths();
     }
     _syncColumnBaseSizing() {
-        const visibleColumnIds = new Set();
         const currentBaseSizing = this._columnBaseSizing();
         const currentSizing = this.columnSizingState();
         const nextBaseSizing = {};
@@ -6585,11 +6538,10 @@ class ZTableComponent {
             if (!column.getIsVisible()) {
                 continue;
             }
-            visibleColumnIds.add(column.id);
             nextBaseSizing[column.id] =
                 currentBaseSizing[column.id] ?? currentSizing[column.id] ?? column.columnDef.size ?? column.getSize();
         }
-        if (visibleColumnIds.size === 0) {
+        if (Object.keys(nextBaseSizing).length === 0) {
             return;
         }
         if (this._isSameColumnSizing(currentBaseSizing, nextBaseSizing)) {
@@ -6602,19 +6554,11 @@ class ZTableComponent {
             return;
         }
         this._isFitColumnScheduled = true;
-        const scheduleId = ++this._fitColumnScheduleId;
         queueMicrotask(() => {
-            if (scheduleId !== this._fitColumnScheduleId) {
-                return;
-            }
             this._isFitColumnScheduled = false;
             this._applyFitColumnWidths();
         });
     }
-    _cancelFitColumnSchedule() {
-        this._fitColumnScheduleId += 1;
-        this._isFitColumnScheduled = false;
-    }
     _applyFitColumnWidths() {
         this._syncColumnBaseSizing();
         const baseSizing = this._columnBaseSizing();
@@ -6645,9 +6589,7 @@ class ZTableComponent {
         if (this._isSameColumnSizing(this.columnSizingState(), nextSizing)) {
             return;
         }
-        this._isApplyingFitColumnSizing = true;
         this.columnSizingState.set(nextSizing);
-        this._isApplyingFitColumnSizing = false;
     }
     _getColumnBaseSize(column, baseSizing) {
         return baseSizing[column.id] ?? column.columnDef.size ?? column.getSize();