@shival99/z-ui 2.0.41 → 2.0.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4874,64 +4874,74 @@ class ZTableComponent {
|
|
|
4874
4874
|
}
|
|
4875
4875
|
return !this.hasBodyRowSpan();
|
|
4876
4876
|
}, ...(ngDevMode ? [{ debugName: "isRowDragEnabled" }] : []));
|
|
4877
|
-
actionColumnInfo =
|
|
4878
|
-
|
|
4879
|
-
|
|
4880
|
-
|
|
4881
|
-
|
|
4882
|
-
|
|
4883
|
-
|
|
4884
|
-
|
|
4877
|
+
actionColumnInfo = linkedSignal({ ...(ngDevMode ? { debugName: "actionColumnInfo" } : {}), source: () => ({
|
|
4878
|
+
columns: this.zConfig().columns ?? [],
|
|
4879
|
+
isPending: this.isLoading() || this.isProcessing(),
|
|
4880
|
+
rows: this._actionColumnRows(),
|
|
4881
|
+
}),
|
|
4882
|
+
computation: ({ columns, isPending, rows }, previous) => {
|
|
4883
|
+
const findActionColumn = (cols) => {
|
|
4884
|
+
for (const col of cols) {
|
|
4885
|
+
if (isBodyConfig(col.body)) {
|
|
4886
|
+
const actionConfig = this._getActionColumnConfig(col.body);
|
|
4887
|
+
if (actionConfig) {
|
|
4888
|
+
return { columnId: col.id, config: actionConfig };
|
|
4889
|
+
}
|
|
4885
4890
|
}
|
|
4886
|
-
|
|
4887
|
-
|
|
4888
|
-
|
|
4889
|
-
|
|
4890
|
-
|
|
4891
|
+
if (col.columns?.length) {
|
|
4892
|
+
const found = findActionColumn(col.columns);
|
|
4893
|
+
if (found) {
|
|
4894
|
+
return found;
|
|
4895
|
+
}
|
|
4891
4896
|
}
|
|
4892
4897
|
}
|
|
4898
|
+
return null;
|
|
4899
|
+
};
|
|
4900
|
+
const actionCol = findActionColumn(columns);
|
|
4901
|
+
if (!actionCol) {
|
|
4902
|
+
return null;
|
|
4893
4903
|
}
|
|
4894
|
-
|
|
4895
|
-
|
|
4896
|
-
|
|
4897
|
-
|
|
4898
|
-
|
|
4899
|
-
|
|
4900
|
-
|
|
4901
|
-
|
|
4902
|
-
|
|
4903
|
-
|
|
4904
|
-
|
|
4905
|
-
|
|
4906
|
-
|
|
4907
|
-
|
|
4908
|
-
|
|
4904
|
+
const previousValue = previous?.value;
|
|
4905
|
+
if (previousValue?.columnId === actionCol.columnId && (isPending || rows.length === 0)) {
|
|
4906
|
+
return {
|
|
4907
|
+
...previousValue,
|
|
4908
|
+
config: actionCol.config,
|
|
4909
|
+
};
|
|
4910
|
+
}
|
|
4911
|
+
const { config } = actionCol;
|
|
4912
|
+
const maxVisible = config.maxVisible ?? Z_TABLE_DEFAULT_MAX_VISIBLE_ACTIONS;
|
|
4913
|
+
let buttonCount = 0;
|
|
4914
|
+
for (const row of rows) {
|
|
4915
|
+
const actions = typeof config.actions === 'function' ? config.actions(row) : config.actions;
|
|
4916
|
+
const visibleActions = actions.filter(action => {
|
|
4917
|
+
if (typeof action.hidden === 'function') {
|
|
4918
|
+
return !action.hidden(row);
|
|
4919
|
+
}
|
|
4920
|
+
return !action.hidden;
|
|
4921
|
+
});
|
|
4922
|
+
const rowButtonCount = visibleActions.length > maxVisible ? 1 : visibleActions.length;
|
|
4923
|
+
buttonCount = Math.max(buttonCount, rowButtonCount);
|
|
4924
|
+
if (buttonCount === maxVisible) {
|
|
4925
|
+
break;
|
|
4909
4926
|
}
|
|
4910
|
-
return !action.hidden;
|
|
4911
|
-
});
|
|
4912
|
-
const rowButtonCount = visibleActions.length > maxVisible ? 1 : visibleActions.length;
|
|
4913
|
-
buttonCount = Math.max(buttonCount, rowButtonCount);
|
|
4914
|
-
if (buttonCount === maxVisible) {
|
|
4915
|
-
break;
|
|
4916
4927
|
}
|
|
4917
|
-
|
|
4918
|
-
|
|
4919
|
-
|
|
4920
|
-
|
|
4921
|
-
|
|
4922
|
-
|
|
4923
|
-
|
|
4924
|
-
|
|
4925
|
-
|
|
4926
|
-
|
|
4927
|
-
|
|
4928
|
-
|
|
4929
|
-
|
|
4930
|
-
|
|
4931
|
-
|
|
4932
|
-
|
|
4933
|
-
};
|
|
4934
|
-
}, ...(ngDevMode ? [{ debugName: "actionColumnInfo" }] : []));
|
|
4928
|
+
if (rows.length === 0 && Array.isArray(config.actions)) {
|
|
4929
|
+
const possibleVisibleCount = config.actions.filter(action => action.hidden !== true).length;
|
|
4930
|
+
buttonCount = possibleVisibleCount > maxVisible ? 1 : possibleVisibleCount;
|
|
4931
|
+
}
|
|
4932
|
+
if (rows.length === 0 && typeof config.actions === 'function') {
|
|
4933
|
+
buttonCount = maxVisible;
|
|
4934
|
+
}
|
|
4935
|
+
const buttonWidth = Z_TABLE_DEFAULT_ACTION_BUTTON_WIDTH;
|
|
4936
|
+
const gap = 4;
|
|
4937
|
+
const padding = 16;
|
|
4938
|
+
const width = buttonCount * buttonWidth + Math.max(0, buttonCount - 1) * gap + padding;
|
|
4939
|
+
return {
|
|
4940
|
+
columnId: actionCol.columnId,
|
|
4941
|
+
config: actionCol.config,
|
|
4942
|
+
width,
|
|
4943
|
+
};
|
|
4944
|
+
} });
|
|
4935
4945
|
_actionColumnRows = computed(() => {
|
|
4936
4946
|
const data = this._data();
|
|
4937
4947
|
const config = this.zConfig();
|
|
@@ -4942,7 +4952,6 @@ class ZTableComponent {
|
|
|
4942
4952
|
const start = Math.max(0, pageIndex - 1) * pageSize;
|
|
4943
4953
|
return data.slice(start, start + pageSize);
|
|
4944
4954
|
}, ...(ngDevMode ? [{ debugName: "_actionColumnRows" }] : []));
|
|
4945
|
-
hasActionColumn = computed(() => this.actionColumnInfo() !== null, ...(ngDevMode ? [{ debugName: "hasActionColumn" }] : []));
|
|
4946
4955
|
_fixedColumnPinning = computed(() => {
|
|
4947
4956
|
const actionColumnId = this.actionColumnInfo()?.columnId;
|
|
4948
4957
|
const configuredColumnIds = new Set();
|
|
@@ -5058,27 +5067,6 @@ class ZTableComponent {
|
|
|
5058
5067
|
};
|
|
5059
5068
|
return columns.some(c => checkServerFilter(c));
|
|
5060
5069
|
}, ...(ngDevMode ? [{ debugName: "hasServerFiltering" }] : []));
|
|
5061
|
-
hasServerSorting = computed(() => {
|
|
5062
|
-
const config = this.zConfig();
|
|
5063
|
-
if (config.enableColumnSorting === false) {
|
|
5064
|
-
return false;
|
|
5065
|
-
}
|
|
5066
|
-
const columns = config.columns ?? [];
|
|
5067
|
-
const checkServerSorting = (col) => {
|
|
5068
|
-
const sortConfig = typeof col.sort === 'boolean' ? { enabled: col.sort } : col.sort;
|
|
5069
|
-
if (sortConfig?.enabled) {
|
|
5070
|
-
const sortMode = sortConfig.mode ?? 'local';
|
|
5071
|
-
if (sortMode === 'server') {
|
|
5072
|
-
return true;
|
|
5073
|
-
}
|
|
5074
|
-
}
|
|
5075
|
-
if (col.columns?.length) {
|
|
5076
|
-
return col.columns.some(c => checkServerSorting(c));
|
|
5077
|
-
}
|
|
5078
|
-
return false;
|
|
5079
|
-
};
|
|
5080
|
-
return columns.some(c => checkServerSorting(c));
|
|
5081
|
-
}, ...(ngDevMode ? [{ debugName: "hasServerSorting" }] : []));
|
|
5082
5070
|
searchConfig = computed(() => {
|
|
5083
5071
|
const { search } = this.zConfig();
|
|
5084
5072
|
if (!search) {
|
|
@@ -5324,7 +5312,6 @@ class ZTableComponent {
|
|
|
5324
5312
|
return columns.some(c => checkFooter(c));
|
|
5325
5313
|
}, ...(ngDevMode ? [{ debugName: "hasFooter" }] : []));
|
|
5326
5314
|
isEmpty = computed(() => this.table.getRowModel().rows.length === 0, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
|
|
5327
|
-
isEmptyData = computed(() => this._data().length === 0, ...(ngDevMode ? [{ debugName: "isEmptyData" }] : []));
|
|
5328
5315
|
isNoSearchResults = computed(() => {
|
|
5329
5316
|
const isServerMode = this.zConfig().mode === 'server';
|
|
5330
5317
|
const hasActiveFilter = this.globalFilter().trim() !== '' || this.columnFilters().length > 0;
|
|
@@ -5458,10 +5445,6 @@ class ZTableComponent {
|
|
|
5458
5445
|
.filter(column => column.getIsVisible() && !this._isSpecialColumnId(column.id) && column.id !== actionColumnId)
|
|
5459
5446
|
.map(column => column.id);
|
|
5460
5447
|
}, ...(ngDevMode ? [{ debugName: "fitColumnIds" }] : []));
|
|
5461
|
-
fillColumnId = computed(() => {
|
|
5462
|
-
const columnIds = this.fitColumnIds();
|
|
5463
|
-
return columnIds[columnIds.length - 1] ?? null;
|
|
5464
|
-
}, ...(ngDevMode ? [{ debugName: "fillColumnId" }] : []));
|
|
5465
5448
|
hideableColumns = computed(() => this.orderedLeafColumns().filter(col => col.getCanHide() && !this._isColumnHiddenFromVisibilityMenu(col.id)), ...(ngDevMode ? [{ debugName: "hideableColumns" }] : []));
|
|
5466
5449
|
orderedHeaderGroups = computed(() => {
|
|
5467
5450
|
void this.columnPinning();
|
|
@@ -5507,21 +5490,10 @@ class ZTableComponent {
|
|
|
5507
5490
|
leftHeaderRow = computed(() => this.table.getLeftHeaderGroups()[0]?.headers ?? [], ...(ngDevMode ? [{ debugName: "leftHeaderRow" }] : []));
|
|
5508
5491
|
centerHeaderRow = computed(() => this.table.getCenterHeaderGroups()[0]?.headers ?? [], ...(ngDevMode ? [{ debugName: "centerHeaderRow" }] : []));
|
|
5509
5492
|
rightHeaderRow = computed(() => this.table.getRightHeaderGroups()[0]?.headers ?? [], ...(ngDevMode ? [{ debugName: "rightHeaderRow" }] : []));
|
|
5510
|
-
leftFooterRow = computed(() => this.table.getLeftFooterGroups()[0]?.headers ?? [], ...(ngDevMode ? [{ debugName: "leftFooterRow" }] : []));
|
|
5511
|
-
centerFooterRow = computed(() => this.table.getCenterFooterGroups()[0]?.headers ?? [], ...(ngDevMode ? [{ debugName: "centerFooterRow" }] : []));
|
|
5512
|
-
rightFooterRow = computed(() => this.table.getRightFooterGroups()[0]?.headers ?? [], ...(ngDevMode ? [{ debugName: "rightFooterRow" }] : []));
|
|
5513
5493
|
virtualCenterHeaderRow = computed(() => {
|
|
5514
5494
|
const visibleColumns = this.virtualCenterColumnVisibilityMap();
|
|
5515
5495
|
return this.centerHeaderRow().filter(header => visibleColumns[header.column.id]);
|
|
5516
5496
|
}, ...(ngDevMode ? [{ debugName: "virtualCenterHeaderRow" }] : []));
|
|
5517
|
-
virtualCenterFooterRow = computed(() => {
|
|
5518
|
-
const visibleColumns = this.virtualCenterColumnVisibilityMap();
|
|
5519
|
-
return this.centerFooterRow().filter(footer => visibleColumns[footer.column.id]);
|
|
5520
|
-
}, ...(ngDevMode ? [{ debugName: "virtualCenterFooterRow" }] : []));
|
|
5521
|
-
totalWidth = computed(() => {
|
|
5522
|
-
const columns = this.table.getAllLeafColumns();
|
|
5523
|
-
return columns.reduce((sum, col) => sum + col.getSize(), 0);
|
|
5524
|
-
}, ...(ngDevMode ? [{ debugName: "totalWidth" }] : []));
|
|
5525
5497
|
shouldHeaderShowShadow = computed(() => this.showHeaderFooterShadow() && this.table.getTopRows().length === 0, ...(ngDevMode ? [{ debugName: "shouldHeaderShowShadow" }] : []));
|
|
5526
5498
|
shouldFooterShowShadow = computed(() => this.showHeaderFooterShadow() && this.table.getBottomRows().length === 0, ...(ngDevMode ? [{ debugName: "shouldFooterShowShadow" }] : []));
|
|
5527
5499
|
tbodyContainerHeight = signal(0, ...(ngDevMode ? [{ debugName: "tbodyContainerHeight" }] : []));
|
|
@@ -5541,14 +5513,6 @@ class ZTableComponent {
|
|
|
5541
5513
|
}
|
|
5542
5514
|
return Math.min(this.pagination().pageSize || 10, 10);
|
|
5543
5515
|
}, ...(ngDevMode ? [{ debugName: "skeletonRowCount" }] : []));
|
|
5544
|
-
actualSkeletonRowHeight = computed(() => {
|
|
5545
|
-
const containerHeight = this.tbodyContainerHeight();
|
|
5546
|
-
const rowCount = this.skeletonRowCount();
|
|
5547
|
-
if (containerHeight > 0 && rowCount > 0) {
|
|
5548
|
-
return containerHeight / rowCount;
|
|
5549
|
-
}
|
|
5550
|
-
return this.skeletonRowHeight();
|
|
5551
|
-
}, ...(ngDevMode ? [{ debugName: "actualSkeletonRowHeight" }] : []));
|
|
5552
5516
|
skeletonRows = computed(() => {
|
|
5553
5517
|
const count = this.skeletonRowCount();
|
|
5554
5518
|
return Array.from({ length: count }, (_, i) => i);
|
|
@@ -6082,21 +6046,19 @@ class ZTableComponent {
|
|
|
6082
6046
|
// }
|
|
6083
6047
|
// });
|
|
6084
6048
|
// });
|
|
6085
|
-
let
|
|
6086
|
-
let lastResetFilters = null;
|
|
6087
|
-
let lastResetSorting = null;
|
|
6049
|
+
let lastResetState = null;
|
|
6088
6050
|
explicitEffect([this.columnFilters, this.globalFilter, this.pagination, this.sorting], ([columnFilters, globalFilter, pagination, sorting]) => {
|
|
6089
|
-
const
|
|
6090
|
-
|
|
6091
|
-
|
|
6092
|
-
|
|
6093
|
-
|
|
6094
|
-
|
|
6051
|
+
const resetState = JSON.stringify({
|
|
6052
|
+
columnFilters,
|
|
6053
|
+
globalFilter,
|
|
6054
|
+
pageIndex: pagination.pageIndex,
|
|
6055
|
+
pageSize: pagination.pageSize,
|
|
6056
|
+
sorting,
|
|
6057
|
+
});
|
|
6058
|
+
if (lastResetState === resetState) {
|
|
6095
6059
|
return;
|
|
6096
6060
|
}
|
|
6097
|
-
|
|
6098
|
-
lastResetPagination = paginationStr;
|
|
6099
|
-
lastResetSorting = sortingStr;
|
|
6061
|
+
lastResetState = resetState;
|
|
6100
6062
|
if (this.isVirtual()) {
|
|
6101
6063
|
const wrapperEl = this.tbodyWrapper()?.nativeElement;
|
|
6102
6064
|
if (wrapperEl) {
|
|
@@ -6570,7 +6532,6 @@ class ZTableComponent {
|
|
|
6570
6532
|
this._scheduleFitColumnWidths();
|
|
6571
6533
|
}
|
|
6572
6534
|
_syncColumnBaseSizing() {
|
|
6573
|
-
const visibleColumnIds = new Set();
|
|
6574
6535
|
const currentBaseSizing = this._columnBaseSizing();
|
|
6575
6536
|
const currentSizing = this.columnSizingState();
|
|
6576
6537
|
const nextBaseSizing = {};
|
|
@@ -6578,11 +6539,10 @@ class ZTableComponent {
|
|
|
6578
6539
|
if (!column.getIsVisible()) {
|
|
6579
6540
|
continue;
|
|
6580
6541
|
}
|
|
6581
|
-
visibleColumnIds.add(column.id);
|
|
6582
6542
|
nextBaseSizing[column.id] =
|
|
6583
6543
|
currentBaseSizing[column.id] ?? currentSizing[column.id] ?? column.columnDef.size ?? column.getSize();
|
|
6584
6544
|
}
|
|
6585
|
-
if (
|
|
6545
|
+
if (Object.keys(nextBaseSizing).length === 0) {
|
|
6586
6546
|
return;
|
|
6587
6547
|
}
|
|
6588
6548
|
if (this._isSameColumnSizing(currentBaseSizing, nextBaseSizing)) {
|