@ni/nimble-components 19.8.1 → 19.8.3
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.
- package/dist/all-components-bundle.js +37669 -37082
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +3377 -3244
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/src/table/index.d.ts +28 -1
- package/dist/esm/src/table/models/table-layout-manager.d.ts +42 -0
- package/dist/esm/src/table/models/virtualizer.d.ts +1 -1
- package/dist/esm/src/table/testing/table.pageobject.d.ts +17 -1
- package/dist/esm/table/index.d.ts +28 -1
- package/dist/esm/table/index.js +35 -7
- package/dist/esm/table/index.js.map +1 -1
- package/dist/esm/table/models/table-layout-manager.d.ts +42 -0
- package/dist/esm/table/models/table-layout-manager.js +186 -0
- package/dist/esm/table/models/table-layout-manager.js.map +1 -0
- package/dist/esm/table/models/virtualizer.d.ts +1 -1
- package/dist/esm/table/models/virtualizer.js +3 -3
- package/dist/esm/table/models/virtualizer.js.map +1 -1
- package/dist/esm/table/styles.js +96 -27
- package/dist/esm/table/styles.js.map +1 -1
- package/dist/esm/table/template.js +103 -86
- package/dist/esm/table/template.js.map +1 -1
- package/dist/esm/table/testing/table.pageobject.d.ts +17 -1
- package/dist/esm/table/testing/table.pageobject.js +81 -17
- package/dist/esm/table/testing/table.pageobject.js.map +1 -1
- package/package.json +2 -2
- package/dist/esm/src/table/models/table-layout-helper.d.ts +0 -8
- package/dist/esm/table/models/table-layout-helper.d.ts +0 -8
- package/dist/esm/table/models/table-layout-helper.js +0 -20
- package/dist/esm/table/models/table-layout-helper.js.map +0 -1
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { observable } from '@microsoft/fast-element';
|
|
3
|
+
/**
|
|
4
|
+
* This class manages the layout of columns within a Table.
|
|
5
|
+
* @interal
|
|
6
|
+
*/
|
|
7
|
+
export class TableLayoutManager {
|
|
8
|
+
constructor(table) {
|
|
9
|
+
this.table = table;
|
|
10
|
+
this.isColumnBeingSized = false;
|
|
11
|
+
this.visibleColumns = [];
|
|
12
|
+
this.currentTotalDelta = 0;
|
|
13
|
+
this.dragStart = 0;
|
|
14
|
+
this.initialColumnPixelWidths = [];
|
|
15
|
+
this.onDividerMouseMove = (event) => {
|
|
16
|
+
const mouseEvent = event;
|
|
17
|
+
for (let i = 0; i < this.visibleColumns.length; i++) {
|
|
18
|
+
this.visibleColumns[i].columnInternals.currentPixelWidth = this.initialColumnPixelWidths[i]?.initialPixelWidth;
|
|
19
|
+
}
|
|
20
|
+
this.currentTotalDelta = this.getAllowedSizeDelta(mouseEvent.clientX - this.dragStart);
|
|
21
|
+
this.performCascadeSizeLeft(this.leftColumnIndex, this.currentTotalDelta);
|
|
22
|
+
this.performCascadeSizeRight(this.rightColumnIndex, this.currentTotalDelta);
|
|
23
|
+
const totalColumnWidthDelta = this.getTotalColumnFixedWidth() - this.initialColumnTotalWidth;
|
|
24
|
+
if (totalColumnWidthDelta > 0) {
|
|
25
|
+
this.table.tableScrollableMinWidth = this.initialTableScrollableWidth + totalColumnWidthDelta;
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
this.table.tableScrollableMinWidth = this.initialTableScrollableMinWidth;
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
this.onDividerMouseUp = () => {
|
|
32
|
+
document.removeEventListener('mousemove', this.onDividerMouseMove);
|
|
33
|
+
document.removeEventListener('mouseup', this.onDividerMouseUp);
|
|
34
|
+
this.resetGridSizedColumns();
|
|
35
|
+
this.isColumnBeingSized = false;
|
|
36
|
+
this.activeColumnIndex = undefined;
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
getGridTemplateColumns() {
|
|
40
|
+
return this.getVisibleColumns()
|
|
41
|
+
.map(column => {
|
|
42
|
+
const { minPixelWidth, currentPixelWidth, currentFractionalWidth } = column.columnInternals;
|
|
43
|
+
if (currentPixelWidth) {
|
|
44
|
+
const coercedPixelWidth = Math.max(minPixelWidth, currentPixelWidth);
|
|
45
|
+
return `${coercedPixelWidth}px`;
|
|
46
|
+
}
|
|
47
|
+
return `minmax(${minPixelWidth}px, ${currentFractionalWidth}fr)`;
|
|
48
|
+
})
|
|
49
|
+
.join(' ');
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Sets up state related to interactively sizing a column.
|
|
53
|
+
* @param dragStart The x-position from which a column size was started
|
|
54
|
+
* @param activeColumnDivider The divider that was clicked on
|
|
55
|
+
*/
|
|
56
|
+
beginColumnInteractiveSize(dragStart, activeColumnDivider) {
|
|
57
|
+
this.activeColumnDivider = activeColumnDivider;
|
|
58
|
+
this.leftColumnIndex = this.getLeftColumnIndexFromDivider(this.activeColumnDivider);
|
|
59
|
+
this.rightColumnIndex = this.leftColumnIndex + 1;
|
|
60
|
+
this.activeColumnIndex = this.leftColumnIndex + (this.activeColumnDivider % 2);
|
|
61
|
+
this.dragStart = dragStart;
|
|
62
|
+
this.currentTotalDelta = 0;
|
|
63
|
+
this.visibleColumns = this.getVisibleColumns();
|
|
64
|
+
this.setColumnsToFixedSize();
|
|
65
|
+
this.initialTableScrollableWidth = this.table.viewport.scrollWidth;
|
|
66
|
+
this.initialTableScrollableMinWidth = this.table.tableScrollableMinWidth;
|
|
67
|
+
this.initialColumnTotalWidth = this.getTotalColumnFixedWidth();
|
|
68
|
+
this.isColumnBeingSized = true;
|
|
69
|
+
document.addEventListener('mousemove', this.onDividerMouseMove);
|
|
70
|
+
document.addEventListener('mouseup', this.onDividerMouseUp);
|
|
71
|
+
}
|
|
72
|
+
getTotalColumnFixedWidth() {
|
|
73
|
+
let totalColumnFixedWidth = 0;
|
|
74
|
+
for (const column of this.visibleColumns) {
|
|
75
|
+
totalColumnFixedWidth
|
|
76
|
+
+= column.columnInternals.currentPixelWidth ?? 0;
|
|
77
|
+
}
|
|
78
|
+
return totalColumnFixedWidth;
|
|
79
|
+
}
|
|
80
|
+
setColumnsToFixedSize() {
|
|
81
|
+
this.cacheGridSizedColumns();
|
|
82
|
+
const headers = this.table.getHeaderContainerElements();
|
|
83
|
+
for (let i = 0; i < headers.length; i++) {
|
|
84
|
+
this.visibleColumns[i].columnInternals.currentPixelWidth = headers[i].getBoundingClientRect().width;
|
|
85
|
+
}
|
|
86
|
+
this.cacheColumnInitialPixelWidths();
|
|
87
|
+
}
|
|
88
|
+
getAllowedSizeDelta(requestedResizeAmount) {
|
|
89
|
+
let availableSpace = 0;
|
|
90
|
+
if (requestedResizeAmount > 0) {
|
|
91
|
+
// size right
|
|
92
|
+
return requestedResizeAmount;
|
|
93
|
+
}
|
|
94
|
+
// size left
|
|
95
|
+
let currentIndex = this.leftColumnIndex;
|
|
96
|
+
while (currentIndex >= 0) {
|
|
97
|
+
const columnInitialWidths = this.initialColumnPixelWidths[currentIndex];
|
|
98
|
+
availableSpace
|
|
99
|
+
+= columnInitialWidths.initialPixelWidth
|
|
100
|
+
- columnInitialWidths.minPixelWidth;
|
|
101
|
+
currentIndex -= 1;
|
|
102
|
+
}
|
|
103
|
+
return Math.max(requestedResizeAmount, -availableSpace);
|
|
104
|
+
}
|
|
105
|
+
performCascadeSizeLeft(leftColumnIndex, delta) {
|
|
106
|
+
let currentDelta = delta;
|
|
107
|
+
const leftColumnInitialWidths = this.initialColumnPixelWidths[leftColumnIndex];
|
|
108
|
+
const allowedDelta = delta < 0
|
|
109
|
+
? Math.max(leftColumnInitialWidths.minPixelWidth
|
|
110
|
+
- leftColumnInitialWidths.initialPixelWidth, currentDelta)
|
|
111
|
+
: delta;
|
|
112
|
+
const actualDelta = Math.round(allowedDelta);
|
|
113
|
+
const leftColumn = this.visibleColumns[leftColumnIndex];
|
|
114
|
+
leftColumn.columnInternals.currentPixelWidth += actualDelta;
|
|
115
|
+
if (actualDelta > currentDelta && leftColumnIndex > 0 && delta < 0) {
|
|
116
|
+
currentDelta -= allowedDelta;
|
|
117
|
+
this.performCascadeSizeLeft(leftColumnIndex - 1, currentDelta);
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
performCascadeSizeRight(rightColumnIndex, delta) {
|
|
121
|
+
let currentDelta = delta;
|
|
122
|
+
const rightColumnInitialWidths = this.initialColumnPixelWidths[rightColumnIndex];
|
|
123
|
+
const allowedDelta = delta > 0
|
|
124
|
+
? Math.min(rightColumnInitialWidths.initialPixelWidth
|
|
125
|
+
- rightColumnInitialWidths.minPixelWidth, currentDelta)
|
|
126
|
+
: delta;
|
|
127
|
+
const actualDelta = Math.round(allowedDelta);
|
|
128
|
+
const rightColumn = this.visibleColumns[rightColumnIndex];
|
|
129
|
+
rightColumn.columnInternals.currentPixelWidth -= actualDelta;
|
|
130
|
+
if (actualDelta < currentDelta
|
|
131
|
+
&& rightColumnIndex < this.visibleColumns.length - 1
|
|
132
|
+
&& delta > 0) {
|
|
133
|
+
currentDelta -= allowedDelta;
|
|
134
|
+
this.performCascadeSizeRight(rightColumnIndex + 1, currentDelta);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
cacheGridSizedColumns() {
|
|
138
|
+
this.gridSizedColumns = [];
|
|
139
|
+
for (const column of this.visibleColumns) {
|
|
140
|
+
if (column.columnInternals.currentPixelWidth === undefined) {
|
|
141
|
+
this.gridSizedColumns.push(column);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
cacheColumnInitialPixelWidths() {
|
|
146
|
+
this.initialColumnPixelWidths = [];
|
|
147
|
+
for (const column of this.visibleColumns) {
|
|
148
|
+
this.initialColumnPixelWidths.push({
|
|
149
|
+
initalColumnFractionalWidth: column.columnInternals.currentFractionalWidth,
|
|
150
|
+
initialPixelWidth: column.columnInternals.currentPixelWidth,
|
|
151
|
+
minPixelWidth: column.columnInternals.minPixelWidth
|
|
152
|
+
});
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
resetGridSizedColumns() {
|
|
156
|
+
if (!this.gridSizedColumns) {
|
|
157
|
+
return;
|
|
158
|
+
}
|
|
159
|
+
let gridColumnIndex = 0;
|
|
160
|
+
for (let i = 0; i < this.visibleColumns.length
|
|
161
|
+
&& gridColumnIndex < this.gridSizedColumns.length; i++) {
|
|
162
|
+
const column = this.visibleColumns[i];
|
|
163
|
+
if (column === this.gridSizedColumns[gridColumnIndex]) {
|
|
164
|
+
gridColumnIndex += 1;
|
|
165
|
+
column.columnInternals.currentFractionalWidth = (column.columnInternals.currentPixelWidth
|
|
166
|
+
/ this.initialColumnPixelWidths[i].initialPixelWidth)
|
|
167
|
+
* this.initialColumnPixelWidths[i]
|
|
168
|
+
.initalColumnFractionalWidth;
|
|
169
|
+
column.columnInternals.currentPixelWidth = undefined;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
getVisibleColumns() {
|
|
174
|
+
return this.table.columns.filter(column => !column.columnHidden);
|
|
175
|
+
}
|
|
176
|
+
getLeftColumnIndexFromDivider(dividerIndex) {
|
|
177
|
+
return Math.floor(dividerIndex / 2);
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
__decorate([
|
|
181
|
+
observable
|
|
182
|
+
], TableLayoutManager.prototype, "isColumnBeingSized", void 0);
|
|
183
|
+
__decorate([
|
|
184
|
+
observable
|
|
185
|
+
], TableLayoutManager.prototype, "activeColumnIndex", void 0);
|
|
186
|
+
//# sourceMappingURL=table-layout-manager.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table-layout-manager.js","sourceRoot":"","sources":["../../../../src/table/models/table-layout-manager.ts"],"names":[],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@ import type { TableRecord } from '../types';
|
|
|
9
9
|
*/
|
|
10
10
|
export declare class Virtualizer<TData extends TableRecord = TableRecord> {
|
|
11
11
|
visibleItems: VirtualItem[];
|
|
12
|
-
|
|
12
|
+
scrollHeight: number;
|
|
13
13
|
headerContainerMarginRight: number;
|
|
14
14
|
rowContainerYOffset: number;
|
|
15
15
|
private readonly table;
|
|
@@ -11,7 +11,7 @@ import { TableCellView } from '../../table-column/base/cell-view';
|
|
|
11
11
|
export class Virtualizer {
|
|
12
12
|
constructor(table, tanStackTable) {
|
|
13
13
|
this.visibleItems = [];
|
|
14
|
-
this.
|
|
14
|
+
this.scrollHeight = 0;
|
|
15
15
|
this.headerContainerMarginRight = 0;
|
|
16
16
|
this.rowContainerYOffset = 0;
|
|
17
17
|
this.table = table;
|
|
@@ -71,7 +71,7 @@ export class Virtualizer {
|
|
|
71
71
|
this.notifyFocusedCellRecycling();
|
|
72
72
|
const virtualizer = this.virtualizer;
|
|
73
73
|
this.visibleItems = virtualizer.getVirtualItems();
|
|
74
|
-
this.
|
|
74
|
+
this.scrollHeight = virtualizer.getTotalSize();
|
|
75
75
|
// We're using a separate div ('table-scroll') to represent the full height of all rows, and
|
|
76
76
|
// the row container's height is only big enough to hold the virtualized rows. So we don't
|
|
77
77
|
// use the TanStackVirtual-provided 'start' offset (which is in terms of the full height)
|
|
@@ -108,7 +108,7 @@ __decorate([
|
|
|
108
108
|
], Virtualizer.prototype, "visibleItems", void 0);
|
|
109
109
|
__decorate([
|
|
110
110
|
observable
|
|
111
|
-
], Virtualizer.prototype, "
|
|
111
|
+
], Virtualizer.prototype, "scrollHeight", void 0);
|
|
112
112
|
__decorate([
|
|
113
113
|
observable
|
|
114
114
|
], Virtualizer.prototype, "headerContainerMarginRight", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"virtualizer.js","sourceRoot":"","sources":["../../../../src/table/models/virtualizer.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,EACH,WAAW,IAAI,mBAAmB,EAElC,aAAa,EACb,oBAAoB,EACpB,kBAAkB,EAErB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAGhF,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAElE;;;;GAIG;AACH,MAAM,OAAO,WAAW;IAkBpB,YACI,KAAmB,EACnB,aAAmC;QAlBhC,iBAAY,GAAkB,EAAE,CAAC;QAGjC,
|
|
1
|
+
{"version":3,"file":"virtualizer.js","sourceRoot":"","sources":["../../../../src/table/models/virtualizer.ts"],"names":[],"mappings":"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"}
|
package/dist/esm/table/styles.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
3
|
import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
|
|
4
|
-
import { applicationBackgroundColor, bodyFont, bodyFontColor, controlSlimHeight, smallPadding, standardPadding, tableRowBorderColor } from '../theme-provider/design-tokens';
|
|
4
|
+
import { applicationBackgroundColor, bodyFont, bodyFontColor, popupBorderColor, controlSlimHeight, smallPadding, standardPadding, tableRowBorderColor } from '../theme-provider/design-tokens';
|
|
5
5
|
import { Theme } from '../theme-provider/types';
|
|
6
6
|
import { hexToRgbaCssColor } from '../utilities/style/colors';
|
|
7
7
|
import { themeBehavior } from '../utilities/style/theme';
|
|
@@ -11,6 +11,8 @@ export const styles = css `
|
|
|
11
11
|
|
|
12
12
|
:host {
|
|
13
13
|
height: 480px;
|
|
14
|
+
--ni-private-column-divider-width: 2px;
|
|
15
|
+
--ni-private-column-divider-padding: 3px;
|
|
14
16
|
}
|
|
15
17
|
|
|
16
18
|
.disable-select {
|
|
@@ -24,32 +26,17 @@ export const styles = css `
|
|
|
24
26
|
width: 100%;
|
|
25
27
|
font: ${bodyFont};
|
|
26
28
|
color: ${bodyFontColor};
|
|
29
|
+
cursor: var(--ni-private-table-cursor-override);
|
|
27
30
|
}
|
|
28
31
|
|
|
29
|
-
.
|
|
30
|
-
overflow: auto;
|
|
31
|
-
display: block;
|
|
32
|
-
height: 100%;
|
|
33
|
-
position: relative;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.table-scroll {
|
|
37
|
-
pointer-events: none;
|
|
38
|
-
position: absolute;
|
|
39
|
-
top: 0px;
|
|
32
|
+
.glass-overlay {
|
|
40
33
|
width: 100%;
|
|
41
|
-
height:
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
.table-row-container {
|
|
45
|
-
width: fit-content;
|
|
46
|
-
min-width: 100%;
|
|
47
|
-
position: relative;
|
|
48
|
-
top: var(--ni-private-table-row-container-top);
|
|
49
|
-
background-color: ${tableRowBorderColor};
|
|
34
|
+
height: 100%;
|
|
35
|
+
display: contents;
|
|
36
|
+
pointer-events: var(--ni-private-glass-overlay-pointer-events);
|
|
50
37
|
}
|
|
51
38
|
|
|
52
|
-
.header-container {
|
|
39
|
+
.header-row-container {
|
|
53
40
|
position: sticky;
|
|
54
41
|
top: 0;
|
|
55
42
|
}
|
|
@@ -59,12 +46,26 @@ export const styles = css `
|
|
|
59
46
|
background: ${applicationBackgroundColor};
|
|
60
47
|
position: relative;
|
|
61
48
|
width: fit-content;
|
|
62
|
-
min-width:
|
|
49
|
+
min-width: max(
|
|
50
|
+
100%,
|
|
51
|
+
calc(
|
|
52
|
+
var(--ni-private-table-scrollable-min-width) +
|
|
53
|
+
var(--ni-private-table-header-container-margin-right)
|
|
54
|
+
)
|
|
55
|
+
);
|
|
63
56
|
left: var(--ni-private-table-scroll-x);
|
|
64
57
|
align-items: center;
|
|
65
58
|
}
|
|
66
59
|
|
|
67
|
-
.
|
|
60
|
+
.header-row-action-container {
|
|
61
|
+
display: flex;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.checkbox-container {
|
|
65
|
+
display: flex;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.column-headers-container {
|
|
68
69
|
display: grid;
|
|
69
70
|
width: 100%;
|
|
70
71
|
grid-template-columns: var(--ni-private-table-row-grid-columns) auto;
|
|
@@ -80,16 +81,84 @@ export const styles = css `
|
|
|
80
81
|
visibility: visible;
|
|
81
82
|
}
|
|
82
83
|
|
|
84
|
+
.header-container {
|
|
85
|
+
display: flex;
|
|
86
|
+
align-items: center;
|
|
87
|
+
position: relative;
|
|
88
|
+
}
|
|
89
|
+
|
|
83
90
|
.header-scrollbar-spacer {
|
|
84
|
-
width: var(--ni-private-table-header-
|
|
91
|
+
width: var(--ni-private-table-header-container-margin-right);
|
|
85
92
|
}
|
|
86
93
|
|
|
87
94
|
.header {
|
|
88
95
|
flex: 1;
|
|
96
|
+
overflow: hidden;
|
|
89
97
|
}
|
|
90
98
|
|
|
91
|
-
.
|
|
92
|
-
|
|
99
|
+
.column-divider {
|
|
100
|
+
border-left: var(--ni-private-column-divider-width) solid
|
|
101
|
+
${popupBorderColor};
|
|
102
|
+
display: none;
|
|
103
|
+
height: ${controlSlimHeight};
|
|
104
|
+
cursor: col-resize;
|
|
105
|
+
position: absolute;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.column-divider::before {
|
|
109
|
+
content: '';
|
|
110
|
+
position: absolute;
|
|
111
|
+
width: calc(
|
|
112
|
+
var(--ni-private-column-divider-width) +
|
|
113
|
+
(2 * var(--ni-private-column-divider-padding))
|
|
114
|
+
);
|
|
115
|
+
height: 100%;
|
|
116
|
+
left: calc(
|
|
117
|
+
-1 * (var(--ni-private-column-divider-width) +
|
|
118
|
+
var(--ni-private-column-divider-padding))
|
|
119
|
+
);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.column-divider.active {
|
|
123
|
+
display: block;
|
|
124
|
+
z-index: 1;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.header-container:hover .column-divider.left,
|
|
128
|
+
.header-container:hover .column-divider.right {
|
|
129
|
+
display: block;
|
|
130
|
+
z-index: 1;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.column-divider.left {
|
|
134
|
+
left: -1px;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.column-divider.right {
|
|
138
|
+
left: calc(100% - 1px);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.table-viewport {
|
|
142
|
+
overflow: auto;
|
|
143
|
+
display: block;
|
|
144
|
+
height: 100%;
|
|
145
|
+
position: relative;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.table-scroll {
|
|
149
|
+
pointer-events: none;
|
|
150
|
+
position: absolute;
|
|
151
|
+
top: 0px;
|
|
152
|
+
width: 100%;
|
|
153
|
+
height: var(--ni-private-table-scroll-height);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.table-row-container {
|
|
157
|
+
width: fit-content;
|
|
158
|
+
min-width: max(100%, var(--ni-private-table-scrollable-min-width));
|
|
159
|
+
position: relative;
|
|
160
|
+
top: var(--ni-private-table-row-container-top);
|
|
161
|
+
background-color: ${tableRowBorderColor};
|
|
93
162
|
}
|
|
94
163
|
|
|
95
164
|
.selection-checkbox {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,eAAe,EACf,mBAAmB,EACtB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,eAAe,EACf,mBAAmB,EACtB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;UASX,cAAc;;;;;;;;gBAQR,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;sBAkBR,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA6B9B,iBAAiB;4BACP,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;cAyB1B,gBAAgB;;kBAEZ,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BA0DP,mBAAmB;;;;uBAIxB,eAAe;;;;;;;;;;;;;;CAcrC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;oCAKyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;;SAGxD,CACJ,CACJ,CAAC"}
|
|
@@ -18,101 +18,118 @@ export const template = html `
|
|
|
18
18
|
<div class="table-container ${x => (x.documentShiftKeyDown ? 'disable-select' : '')}"
|
|
19
19
|
style="
|
|
20
20
|
--ni-private-table-scroll-x: -${x => x.scrollX}px;
|
|
21
|
-
--ni-private-table-header-
|
|
22
|
-
--ni-private-table-scroll-height: ${x => x.virtualizer.
|
|
21
|
+
--ni-private-table-header-container-margin-right: ${x => x.virtualizer.headerContainerMarginRight}px;
|
|
22
|
+
--ni-private-table-scroll-height: ${x => x.virtualizer.scrollHeight}px;
|
|
23
23
|
--ni-private-table-row-container-top: ${x => x.virtualizer.rowContainerYOffset}px;
|
|
24
24
|
--ni-private-table-row-grid-columns: ${x => x.rowGridColumns ?? ''};
|
|
25
|
+
--ni-private-table-cursor-override: ${x => (x.layoutManager.isColumnBeingSized ? 'col-resize' : 'default')};
|
|
26
|
+
--ni-private-table-scrollable-min-width: ${x => x.tableScrollableMinWidth}px;
|
|
27
|
+
--ni-private-glass-overlay-pointer-events: ${x => (x.layoutManager.isColumnBeingSized ? 'none' : 'default')};
|
|
25
28
|
">
|
|
26
|
-
<div
|
|
27
|
-
<div
|
|
28
|
-
|
|
29
|
-
<span
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<${buttonTag}
|
|
40
|
-
class="collapse-all-button ${x => `${x.showCollapseAll ? 'visible' : ''}`}"
|
|
41
|
-
content-hidden
|
|
42
|
-
appearance="${ButtonAppearance.ghost}"
|
|
43
|
-
title="${x => tableGroupsCollapseAllLabel.getValueFor(x)}"
|
|
44
|
-
@click="${x => x.handleCollapseAllGroupRows()}"
|
|
45
|
-
>
|
|
46
|
-
<${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
|
|
47
|
-
${x => tableGroupsCollapseAllLabel.getValueFor(x)}
|
|
48
|
-
</${buttonTag}>
|
|
49
|
-
</span>
|
|
50
|
-
<span class="column-header-container">
|
|
51
|
-
${repeat(x => x.columns, html `
|
|
52
|
-
${when(x => !x.columnHidden, html `
|
|
53
|
-
<${tableHeaderTag}
|
|
54
|
-
class="header"
|
|
55
|
-
sort-direction="${x => (typeof x.columnInternals.currentSortIndex === 'number' ? x.columnInternals.currentSortDirection : TableColumnSortDirection.none)}"
|
|
56
|
-
?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
|
|
57
|
-
@click="${(x, c) => c.parent.toggleColumnSort(x, c.event.shiftKey)}"
|
|
58
|
-
:isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
|
|
59
|
-
>
|
|
60
|
-
<slot name="${x => x.slot}"></slot>
|
|
61
|
-
</${tableHeaderTag}>
|
|
62
|
-
`)}
|
|
63
|
-
`)}
|
|
64
|
-
<div class="header-scrollbar-spacer"></div>
|
|
65
|
-
</span>
|
|
66
|
-
</div>
|
|
67
|
-
</div>
|
|
68
|
-
<div class="table-viewport" ${ref('viewport')}>
|
|
69
|
-
<div class="table-scroll"></div>
|
|
70
|
-
<div class="table-row-container" ${children({ property: 'rowElements', filter: elements(tableRowTag) })}
|
|
71
|
-
role="rowgroup">
|
|
72
|
-
${when(x => x.columns.length > 0 && x.canRenderRows, html `
|
|
73
|
-
${repeat(x => x.virtualizer.visibleItems, html `
|
|
74
|
-
${when((x, c) => c.parent.tableData[x.index]?.isGrouped, html `
|
|
75
|
-
<${tableGroupRowTag}
|
|
76
|
-
class="group-row"
|
|
77
|
-
:groupRowValue="${(x, c) => c.parent.tableData[x.index]?.groupRowValue}"
|
|
78
|
-
?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
|
|
79
|
-
:nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
|
|
80
|
-
:leafItemCount="${(x, c) => c.parent.tableData[x.index]?.leafItemCount}"
|
|
81
|
-
:groupColumn="${(x, c) => c.parent.tableData[x.index]?.groupColumn}"
|
|
82
|
-
?selectable="${(_, c) => c.parent.selectionMode === TableRowSelectionMode.multiple}"
|
|
83
|
-
selection-state="${(x, c) => c.parent.tableData[x.index]?.selectionState}"
|
|
84
|
-
@group-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
|
|
85
|
-
@group-expand-toggle="${(x, c) => c.parent.handleGroupRowExpanded(x.index, c.event)}"
|
|
86
|
-
>
|
|
87
|
-
</${tableGroupRowTag}>
|
|
29
|
+
<div class="glass-overlay">
|
|
30
|
+
<div role="rowgroup" class="header-row-container">
|
|
31
|
+
<div class="header-row" role="row">
|
|
32
|
+
<span class="header-row-action-container" ${ref('headerRowActionContainer')}>
|
|
33
|
+
${when(x => x.selectionMode === TableRowSelectionMode.multiple, html `
|
|
34
|
+
<span role="columnheader" class="checkbox-container">
|
|
35
|
+
<${checkboxTag}
|
|
36
|
+
${ref('selectionCheckbox')}
|
|
37
|
+
class="${x => `selection-checkbox ${x.selectionMode ?? ''}`}"
|
|
38
|
+
@change="${(x, c) => x.onAllRowsSelectionChange(c.event)}"
|
|
39
|
+
>
|
|
40
|
+
</${checkboxTag}>
|
|
41
|
+
</span>
|
|
88
42
|
`)}
|
|
89
|
-
|
|
90
|
-
<${
|
|
91
|
-
class="
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
:dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
|
|
97
|
-
:columns="${(_, c) => c.parent.columns}"
|
|
98
|
-
:nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
|
|
99
|
-
@click="${(x, c) => c.parent.onRowClick(x.index, c.event)}"
|
|
100
|
-
@row-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
|
|
101
|
-
@row-action-menu-beforetoggle="${(x, c) => c.parent.onRowActionMenuBeforeToggle(x.index, c.event)}"
|
|
102
|
-
@row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
|
|
43
|
+
<span role="gridcell">
|
|
44
|
+
<${buttonTag}
|
|
45
|
+
class="collapse-all-button ${x => `${x.showCollapseAll ? 'visible' : ''}`}"
|
|
46
|
+
content-hidden
|
|
47
|
+
appearance="${ButtonAppearance.ghost}"
|
|
48
|
+
title="${x => tableGroupsCollapseAllLabel.getValueFor(x)}"
|
|
49
|
+
@click="${x => x.handleCollapseAllGroupRows()}"
|
|
103
50
|
>
|
|
104
|
-
|
|
105
|
-
${
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
51
|
+
<${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
|
|
52
|
+
${x => tableGroupsCollapseAllLabel.getValueFor(x)}
|
|
53
|
+
</${buttonTag}>
|
|
54
|
+
</span>
|
|
55
|
+
</span>
|
|
56
|
+
<span class="column-headers-container" ${ref('columnHeadersContainer')}>
|
|
57
|
+
${repeat(x => x.visibleColumns, html `
|
|
58
|
+
<div class="header-container">
|
|
59
|
+
${when((_, c) => c.index > 0, html `
|
|
60
|
+
<div class="column-divider left ${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'active' : ''}`}"
|
|
61
|
+
@mousedown="${(_, c) => c.parent.onLeftDividerMouseDown(c.event, c.index)}">
|
|
62
|
+
</div>
|
|
63
|
+
`)}
|
|
64
|
+
<${tableHeaderTag}
|
|
65
|
+
class="header"
|
|
66
|
+
sort-direction="${x => (typeof x.columnInternals.currentSortIndex === 'number' ? x.columnInternals.currentSortDirection : TableColumnSortDirection.none)}"
|
|
67
|
+
?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
|
|
68
|
+
@click="${(x, c) => c.parent.toggleColumnSort(x, c.event.shiftKey)}"
|
|
69
|
+
:isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
|
|
70
|
+
>
|
|
71
|
+
<slot name="${x => x.slot}"></slot>
|
|
72
|
+
</${tableHeaderTag}>
|
|
73
|
+
${when((_, c) => c.index < c.length - 1, html `
|
|
74
|
+
<div class="column-divider right ${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'active' : ''}`}"
|
|
75
|
+
@mousedown="${(_, c) => c.parent.onRightDividerMouseDown(c.event, c.index)}">
|
|
76
|
+
</div>
|
|
77
|
+
`)}
|
|
78
|
+
</div>
|
|
79
|
+
`, { positioning: true })}
|
|
80
|
+
<div class="header-scrollbar-spacer"></div>
|
|
81
|
+
</span>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
<div class="table-viewport" ${ref('viewport')}>
|
|
85
|
+
<div class="table-scroll"></div>
|
|
86
|
+
<div class="table-row-container" ${children({ property: 'rowElements', filter: elements(tableRowTag) })}
|
|
87
|
+
role="rowgroup">
|
|
88
|
+
${when(x => x.columns.length > 0 && x.canRenderRows, html `
|
|
89
|
+
${repeat(x => x.virtualizer.visibleItems, html `
|
|
90
|
+
${when((x, c) => c.parent.tableData[x.index]?.isGrouped, html `
|
|
91
|
+
<${tableGroupRowTag}
|
|
92
|
+
class="group-row"
|
|
93
|
+
:groupRowValue="${(x, c) => c.parent.tableData[x.index]?.groupRowValue}"
|
|
94
|
+
?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
|
|
95
|
+
:nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
|
|
96
|
+
:leafItemCount="${(x, c) => c.parent.tableData[x.index]?.leafItemCount}"
|
|
97
|
+
:groupColumn="${(x, c) => c.parent.tableData[x.index]?.groupColumn}"
|
|
98
|
+
?selectable="${(_, c) => c.parent.selectionMode === TableRowSelectionMode.multiple}"
|
|
99
|
+
selection-state="${(x, c) => c.parent.tableData[x.index]?.selectionState}"
|
|
100
|
+
@group-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
|
|
101
|
+
@group-expand-toggle="${(x, c) => c.parent.handleGroupRowExpanded(x.index, c.event)}"
|
|
102
|
+
>
|
|
103
|
+
</${tableGroupRowTag}>
|
|
104
|
+
`)}
|
|
105
|
+
${when((x, c) => !c.parent.tableData[x.index]?.isGrouped, html `
|
|
106
|
+
<${tableRowTag}
|
|
107
|
+
class="row"
|
|
108
|
+
record-id="${(x, c) => c.parent.tableData[x.index]?.id}"
|
|
109
|
+
?selectable="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.none}"
|
|
110
|
+
?selected="${(x, c) => c.parent.tableData[x.index]?.selectionState === TableRowSelectionState.selected}"
|
|
111
|
+
?hide-selection="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.multiple}"
|
|
112
|
+
:dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
|
|
113
|
+
:columns="${(_, c) => c.parent.columns}"
|
|
114
|
+
:nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
|
|
115
|
+
@click="${(x, c) => c.parent.onRowClick(x.index, c.event)}"
|
|
116
|
+
@row-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
|
|
117
|
+
@row-action-menu-beforetoggle="${(x, c) => c.parent.onRowActionMenuBeforeToggle(x.index, c.event)}"
|
|
118
|
+
@row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
|
|
119
|
+
>
|
|
120
|
+
${when((x, c) => c.parent.openActionMenuRecordId === c.parent.tableData[x.index]?.id, html `
|
|
121
|
+
${repeat((_, c) => c.parent.actionMenuSlots, html `
|
|
122
|
+
<slot
|
|
123
|
+
name="${x => x}"
|
|
124
|
+
slot="${x => `row-action-menu-${x}`}">
|
|
125
|
+
</slot>
|
|
126
|
+
`)}
|
|
110
127
|
`)}
|
|
128
|
+
</${tableRowTag}>
|
|
111
129
|
`)}
|
|
112
|
-
</${tableRowTag}>
|
|
113
130
|
`)}
|
|
114
131
|
`)}
|
|
115
|
-
|
|
132
|
+
</div>
|
|
116
133
|
</div>
|
|
117
134
|
</div>
|
|
118
135
|
</div>
|