@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 = computed(() => {
4878
- const columns = this.zConfig().columns ?? [];
4879
- const findActionColumn = (cols) => {
4880
- for (const col of cols) {
4881
- if (isBodyConfig(col.body)) {
4882
- const actionConfig = this._getActionColumnConfig(col.body);
4883
- if (actionConfig) {
4884
- return { columnId: col.id, config: actionConfig };
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
- if (col.columns?.length) {
4888
- const found = findActionColumn(col.columns);
4889
- if (found) {
4890
- return found;
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
- return null;
4895
- };
4896
- const actionCol = findActionColumn(columns);
4897
- if (!actionCol) {
4898
- return null;
4899
- }
4900
- const { config } = actionCol;
4901
- const maxVisible = config.maxVisible ?? Z_TABLE_DEFAULT_MAX_VISIBLE_ACTIONS;
4902
- const data = this._actionColumnRows();
4903
- let buttonCount = 0;
4904
- for (const row of data) {
4905
- const actions = typeof config.actions === 'function' ? config.actions(row) : config.actions;
4906
- const visibleActions = actions.filter(action => {
4907
- if (typeof action.hidden === 'function') {
4908
- return !action.hidden(row);
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
- if (data.length === 0 && Array.isArray(config.actions)) {
4919
- const possibleVisibleCount = config.actions.filter(action => action.hidden !== true).length;
4920
- buttonCount = possibleVisibleCount > maxVisible ? 1 : possibleVisibleCount;
4921
- }
4922
- if (data.length === 0 && typeof config.actions === 'function') {
4923
- buttonCount = maxVisible;
4924
- }
4925
- const buttonWidth = Z_TABLE_DEFAULT_ACTION_BUTTON_WIDTH;
4926
- const gap = 4;
4927
- const padding = 16;
4928
- const width = buttonCount * buttonWidth + Math.max(0, buttonCount - 1) * gap + padding;
4929
- return {
4930
- columnId: actionCol.columnId,
4931
- config: actionCol.config,
4932
- width,
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 lastResetPagination = null;
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 filtersStr = JSON.stringify({ columnFilters, globalFilter });
6090
- const paginationStr = JSON.stringify({ pageIndex: pagination.pageIndex, pageSize: pagination.pageSize });
6091
- const sortingStr = JSON.stringify(sorting);
6092
- if (lastResetFilters === filtersStr &&
6093
- lastResetPagination === paginationStr &&
6094
- lastResetSorting === sortingStr) {
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
- lastResetFilters = filtersStr;
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 (visibleColumnIds.size === 0) {
6545
+ if (Object.keys(nextBaseSizing).length === 0) {
6586
6546
  return;
6587
6547
  }
6588
6548
  if (this._isSameColumnSizing(currentBaseSizing, nextBaseSizing)) {