@ni/nimble-components 18.6.2 → 18.6.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 +177 -15
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +618 -588
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/table/components/row/styles.js +4 -1
- package/dist/esm/table/components/row/styles.js.map +1 -1
- package/dist/esm/table/index.d.ts +10 -0
- package/dist/esm/table/index.js +28 -0
- package/dist/esm/table/index.js.map +1 -1
- package/dist/esm/table/models/table-layout-helper.d.ts +8 -0
- package/dist/esm/table/models/table-layout-helper.js +24 -0
- package/dist/esm/table/models/table-layout-helper.js.map +1 -0
- package/dist/esm/table/models/virtualizer.js +1 -1
- package/dist/esm/table/styles.js +13 -3
- package/dist/esm/table/styles.js.map +1 -1
- package/dist/esm/table/template.js +11 -5
- package/dist/esm/table/template.js.map +1 -1
- package/dist/esm/table-column/base/index.d.ts +30 -0
- package/dist/esm/table-column/base/index.js +39 -1
- package/dist/esm/table-column/base/index.js.map +1 -1
- package/dist/esm/table-column/base/styles.js +6 -0
- package/dist/esm/table-column/base/styles.js.map +1 -1
- package/dist/esm/table-column/base/template.js +3 -1
- package/dist/esm/table-column/base/template.js.map +1 -1
- package/dist/esm/table-column/base/types.d.ts +2 -0
- package/dist/esm/table-column/base/types.js +2 -0
- package/dist/esm/table-column/base/types.js.map +1 -1
- package/dist/esm/table-column/mixins/fractional-width-column.d.ts +12 -0
- package/dist/esm/table-column/mixins/fractional-width-column.js +41 -0
- package/dist/esm/table-column/mixins/fractional-width-column.js.map +1 -0
- package/dist/esm/table-column/text/index.d.ts +16 -2
- package/dist/esm/table-column/text/index.js +14 -7
- package/dist/esm/table-column/text/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -5,10 +5,13 @@ export const styles = css `
|
|
|
5
5
|
${display('grid')}
|
|
6
6
|
|
|
7
7
|
:host {
|
|
8
|
-
height: ${controlHeight};
|
|
8
|
+
height: calc(${controlHeight} + 2 * ${borderWidth});
|
|
9
9
|
border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
|
|
10
10
|
grid-auto-flow: column;
|
|
11
11
|
grid-auto-columns: 1fr;
|
|
12
|
+
grid-template-columns: var(--ni-private-table-row-grid-columns) auto;
|
|
13
|
+
width: fit-content;
|
|
14
|
+
min-width: 100%;
|
|
12
15
|
}
|
|
13
16
|
|
|
14
17
|
nimble-table-cell {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,aAAa,EACb,mBAAmB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,aAAa,EACb,mBAAmB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;uBAGE,aAAa,UAAU,WAAW;+BAC1B,WAAW,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;CAmBvE,CAAC"}
|
|
@@ -40,6 +40,14 @@ export declare class Table<TData extends TableRecord = TableRecord> extends Foun
|
|
|
40
40
|
* @internal
|
|
41
41
|
*/
|
|
42
42
|
canRenderRows: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* @internal
|
|
45
|
+
*/
|
|
46
|
+
scrollX: number;
|
|
47
|
+
/**
|
|
48
|
+
* @internal
|
|
49
|
+
*/
|
|
50
|
+
rowGridColumns?: string;
|
|
43
51
|
get validity(): TableValidity;
|
|
44
52
|
/**
|
|
45
53
|
* @internal
|
|
@@ -75,11 +83,13 @@ export declare class Table<TData extends TableRecord = TableRecord> extends Foun
|
|
|
75
83
|
protected childItemsChanged(): void;
|
|
76
84
|
protected idFieldNameChanged(_prev: string | undefined, _next: string | undefined): void;
|
|
77
85
|
protected columnsChanged(_prev: TableColumn[] | undefined, _next: TableColumn[]): void;
|
|
86
|
+
private readonly onViewPortScroll;
|
|
78
87
|
private removeColumnObservers;
|
|
79
88
|
private validateAndObserveColumns;
|
|
80
89
|
private validateColumnIds;
|
|
81
90
|
private validateColumnSortIndices;
|
|
82
91
|
private getColumnsParticipatingInSorting;
|
|
92
|
+
private updateRowGridColumns;
|
|
83
93
|
private updateColumnsFromChildItems;
|
|
84
94
|
private setTableData;
|
|
85
95
|
private refreshRows;
|
package/dist/esm/table/index.js
CHANGED
|
@@ -9,6 +9,7 @@ import { template } from './template';
|
|
|
9
9
|
import { TableColumnSortDirection } from './types';
|
|
10
10
|
import { Virtualizer } from './models/virtualizer';
|
|
11
11
|
import { getTanStackSortingFunction } from './models/sort-operations';
|
|
12
|
+
import { TableLayoutHelper } from './models/table-layout-helper';
|
|
12
13
|
/**
|
|
13
14
|
* A nimble-styled table.
|
|
14
15
|
*/
|
|
@@ -35,8 +36,15 @@ export class Table extends FoundationElement {
|
|
|
35
36
|
* @internal
|
|
36
37
|
*/
|
|
37
38
|
this.canRenderRows = true;
|
|
39
|
+
/**
|
|
40
|
+
* @internal
|
|
41
|
+
*/
|
|
42
|
+
this.scrollX = 0;
|
|
38
43
|
this.tableValidator = new TableValidator();
|
|
39
44
|
this.columnNotifiers = [];
|
|
45
|
+
this.onViewPortScroll = (event) => {
|
|
46
|
+
this.scrollX = event.target.scrollLeft;
|
|
47
|
+
};
|
|
40
48
|
this.options = {
|
|
41
49
|
data: [],
|
|
42
50
|
onStateChange: (_) => { },
|
|
@@ -61,11 +69,15 @@ export class Table extends FoundationElement {
|
|
|
61
69
|
super.connectedCallback();
|
|
62
70
|
this.virtualizer.connectedCallback();
|
|
63
71
|
this.validateAndObserveColumns();
|
|
72
|
+
this.viewport.addEventListener('scroll', this.onViewPortScroll, {
|
|
73
|
+
passive: true
|
|
74
|
+
});
|
|
64
75
|
}
|
|
65
76
|
disconnectedCallback() {
|
|
66
77
|
super.disconnectedCallback();
|
|
67
78
|
this.virtualizer.disconnectedCallback();
|
|
68
79
|
this.removeColumnObservers();
|
|
80
|
+
this.viewport.removeEventListener('scroll', this.onViewPortScroll);
|
|
69
81
|
}
|
|
70
82
|
checkValidity() {
|
|
71
83
|
return this.tableValidator.isValid();
|
|
@@ -90,6 +102,12 @@ export class Table extends FoundationElement {
|
|
|
90
102
|
this.validateColumnSortIndices();
|
|
91
103
|
this.setSortState();
|
|
92
104
|
}
|
|
105
|
+
else if (args === 'currentFractionalWidth'
|
|
106
|
+
|| args === 'currentPixelWidth'
|
|
107
|
+
|| args === 'internalMinPixelWidth'
|
|
108
|
+
|| args === 'columnHidden') {
|
|
109
|
+
this.updateRowGridColumns();
|
|
110
|
+
}
|
|
93
111
|
}
|
|
94
112
|
}
|
|
95
113
|
onRowActionMenuBeforeToggle(event) {
|
|
@@ -121,6 +139,7 @@ export class Table extends FoundationElement {
|
|
|
121
139
|
}
|
|
122
140
|
}
|
|
123
141
|
this.actionMenuSlots = Array.from(slots);
|
|
142
|
+
this.updateRowGridColumns();
|
|
124
143
|
}
|
|
125
144
|
removeColumnObservers() {
|
|
126
145
|
this.columnNotifiers.forEach(notifier => {
|
|
@@ -150,6 +169,9 @@ export class Table extends FoundationElement {
|
|
|
150
169
|
return this.columns.filter(x => x.sortDirection !== TableColumnSortDirection.none
|
|
151
170
|
&& typeof x.sortIndex === 'number');
|
|
152
171
|
}
|
|
172
|
+
updateRowGridColumns() {
|
|
173
|
+
this.rowGridColumns = TableLayoutHelper.getGridTemplateColumns(this.columns);
|
|
174
|
+
}
|
|
153
175
|
async updateColumnsFromChildItems() {
|
|
154
176
|
const definedElements = this.childItems.map(async (item) => (item.matches(':not(:defined)')
|
|
155
177
|
? customElements.whenDefined(item.localName)
|
|
@@ -253,6 +275,12 @@ __decorate([
|
|
|
253
275
|
__decorate([
|
|
254
276
|
observable
|
|
255
277
|
], Table.prototype, "canRenderRows", void 0);
|
|
278
|
+
__decorate([
|
|
279
|
+
observable
|
|
280
|
+
], Table.prototype, "scrollX", void 0);
|
|
281
|
+
__decorate([
|
|
282
|
+
observable
|
|
283
|
+
], Table.prototype, "rowGridColumns", void 0);
|
|
256
284
|
__decorate([
|
|
257
285
|
observable
|
|
258
286
|
], Table.prototype, "firstSortedColumn", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,IAAI,EACJ,UAAU,EACV,UAAU,EAEb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAKH,WAAW,IAAI,mBAAmB,EAClC,eAAe,IAAI,uBAAuB,EAC1C,iBAAiB,IAAI,yBAAyB,EAGjD,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAEH,wBAAwB,EAI3B,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { TableColumn } from '../../table-column/base';
|
|
2
|
+
/**
|
|
3
|
+
* This class provides helper methods for managing the layout of cells within
|
|
4
|
+
* a Table.
|
|
5
|
+
*/
|
|
6
|
+
export declare class TableLayoutHelper {
|
|
7
|
+
static getGridTemplateColumns(columns: TableColumn[]): string;
|
|
8
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This class provides helper methods for managing the layout of cells within
|
|
3
|
+
* a Table.
|
|
4
|
+
*/
|
|
5
|
+
export class TableLayoutHelper {
|
|
6
|
+
static getGridTemplateColumns(columns) {
|
|
7
|
+
return (columns
|
|
8
|
+
?.filter(column => !column.columnHidden)
|
|
9
|
+
.reduce((accumulator, currentValue) => {
|
|
10
|
+
const gap = accumulator === '' ? '' : ' ';
|
|
11
|
+
const minPixelWidth = currentValue.internalMinPixelWidth;
|
|
12
|
+
if (currentValue.currentPixelWidth) {
|
|
13
|
+
const pixelWidth = currentValue.currentPixelWidth;
|
|
14
|
+
const gridPixelWidth = pixelWidth > minPixelWidth
|
|
15
|
+
? pixelWidth
|
|
16
|
+
: minPixelWidth;
|
|
17
|
+
return `${accumulator}${gap}${gridPixelWidth}px`;
|
|
18
|
+
}
|
|
19
|
+
const fractionalWidth = currentValue.currentFractionalWidth;
|
|
20
|
+
return `${accumulator}${gap}minmax(${minPixelWidth}px, ${fractionalWidth}fr)`;
|
|
21
|
+
}, '') ?? '');
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=table-layout-helper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table-layout-helper.js","sourceRoot":"","sources":["../../../../src/table/models/table-layout-helper.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,OAAO,iBAAiB;IACnB,MAAM,CAAC,sBAAsB,CAAC,OAAsB;QACvD,OAAO,CACH,OAAO;YACH,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC;aACvC,MAAM,CAAC,CAAC,WAAmB,EAAE,YAAY,EAAE,EAAE;YAC1C,MAAM,GAAG,GAAG,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;YAC1C,MAAM,aAAa,GAAG,YAAY,CAAC,qBAAqB,CAAC;YACzD,IAAI,YAAY,CAAC,iBAAiB,EAAE;gBAChC,MAAM,UAAU,GAAG,YAAY,CAAC,iBAAiB,CAAC;gBAClD,MAAM,cAAc,GAAG,UAAU,GAAG,aAAa;oBAC7C,CAAC,CAAC,UAAU;oBACZ,CAAC,CAAC,aAAa,CAAC;gBACpB,OAAO,GAAG,WAAW,GAAG,GAAG,GAAG,cAAc,IAAI,CAAC;aACpD;YAED,MAAM,eAAe,GAAG,YAAY,CAAC,sBAAsB,CAAC;YAC5D,OAAO,GAAG,WAAW,GAAG,GAAG,UAAU,aAAa,OAAO,eAAe,KAAK,CAAC;QAClF,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,CACnB,CAAC;IACN,CAAC;CACJ"}
|
|
@@ -20,7 +20,7 @@ export class Virtualizer {
|
|
|
20
20
|
// If we have enough rows that a vertical scrollbar is shown, we need to offset the header widths
|
|
21
21
|
// by the same margin so the column headers align with the corresponding rendered cells
|
|
22
22
|
const viewportBoundingWidth = borderBoxSize.inlineSize;
|
|
23
|
-
this.headerContainerMarginRight = viewportBoundingWidth - this.table.viewport.
|
|
23
|
+
this.headerContainerMarginRight = viewportBoundingWidth - this.table.viewport.clientWidth;
|
|
24
24
|
}
|
|
25
25
|
});
|
|
26
26
|
}
|
package/dist/esm/table/styles.js
CHANGED
|
@@ -13,6 +13,7 @@ export const styles = css `
|
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
.table-container {
|
|
16
|
+
overflow: hidden;
|
|
16
17
|
display: flex;
|
|
17
18
|
flex-direction: column;
|
|
18
19
|
width: 100%;
|
|
@@ -21,7 +22,7 @@ export const styles = css `
|
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
.table-viewport {
|
|
24
|
-
overflow
|
|
25
|
+
overflow: auto;
|
|
25
26
|
display: block;
|
|
26
27
|
height: 100%;
|
|
27
28
|
position: relative;
|
|
@@ -32,11 +33,13 @@ export const styles = css `
|
|
|
32
33
|
position: absolute;
|
|
33
34
|
top: 0px;
|
|
34
35
|
width: 100%;
|
|
36
|
+
height: var(--ni-private-table-scroll-height);
|
|
35
37
|
}
|
|
36
38
|
|
|
37
39
|
.table-row-container {
|
|
38
40
|
width: 100%;
|
|
39
41
|
position: relative;
|
|
42
|
+
top: var(--ni-private-table-row-container-top);
|
|
40
43
|
}
|
|
41
44
|
|
|
42
45
|
.header-container {
|
|
@@ -45,10 +48,17 @@ export const styles = css `
|
|
|
45
48
|
}
|
|
46
49
|
|
|
47
50
|
.header-row {
|
|
48
|
-
display:
|
|
49
|
-
flex-direction: row;
|
|
51
|
+
display: grid;
|
|
50
52
|
background: ${applicationBackgroundColor};
|
|
51
53
|
position: relative;
|
|
54
|
+
width: fit-content;
|
|
55
|
+
min-width: 100%;
|
|
56
|
+
grid-template-columns: var(--ni-private-table-row-grid-columns) auto;
|
|
57
|
+
left: var(--ni-private-table-scroll-x);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.header-scrollbar-spacer {
|
|
61
|
+
width: var(--ni-private-table-header-scrollbar-spacer-width);
|
|
52
62
|
}
|
|
53
63
|
|
|
54
64
|
.header {
|
|
@@ -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,cAAc,EACjB,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;AAEzD,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,cAAc,EACjB,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;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;gBAWL,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA+BR,0BAA0B;;;;;;;;;;;;;;;;;sBAiB1B,0BAA0B;;;;;;;;;;;;;;sBAc1B,cAAc;;CAEnC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;;8BAMmB,cAAc;;;;;8BAKd,cAAc;;;;8BAId,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC"}
|
|
@@ -6,7 +6,13 @@ import { TableColumnSortDirection } from './types';
|
|
|
6
6
|
// prettier-ignore
|
|
7
7
|
export const template = html `
|
|
8
8
|
<template role="table" ${children({ property: 'childItems', filter: elements() })}>
|
|
9
|
-
<div class="table-container"
|
|
9
|
+
<div class="table-container" style="
|
|
10
|
+
--ni-private-table-scroll-x: -${x => x.scrollX}px;
|
|
11
|
+
--ni-private-table-header-scrollbar-spacer-width: ${x => x.virtualizer.headerContainerMarginRight}px;
|
|
12
|
+
--ni-private-table-scroll-height: ${x => x.virtualizer.allRowsHeight}px;
|
|
13
|
+
--ni-private-table-row-container-top: ${x => x.virtualizer.rowContainerYOffset}px;
|
|
14
|
+
--ni-private-table-row-grid-columns: ${x => x.rowGridColumns ?? ''}
|
|
15
|
+
">
|
|
10
16
|
<div role="rowgroup" class="header-container">
|
|
11
17
|
<div class="header-row" role="row">
|
|
12
18
|
${repeat(x => x.columns, html `
|
|
@@ -20,12 +26,13 @@ export const template = html `
|
|
|
20
26
|
</${DesignSystem.tagFor(TableHeader)}>
|
|
21
27
|
`)}
|
|
22
28
|
`)}
|
|
23
|
-
<div class="header-scrollbar-spacer"
|
|
29
|
+
<div class="header-scrollbar-spacer"></div>
|
|
24
30
|
</div>
|
|
25
31
|
</div>
|
|
26
32
|
<div class="table-viewport" ${ref('viewport')}>
|
|
27
|
-
<div class="table-scroll"
|
|
28
|
-
<div class="table-row-container"
|
|
33
|
+
<div class="table-scroll"></div>
|
|
34
|
+
<div class="table-row-container"
|
|
35
|
+
role="rowgroup">
|
|
29
36
|
${when(x => x.columns.length > 0 && x.canRenderRows, html `
|
|
30
37
|
${repeat(x => x.virtualizer.visibleItems, html `
|
|
31
38
|
<${DesignSystem.tagFor(TableRow)}
|
|
@@ -35,7 +42,6 @@ export const template = html `
|
|
|
35
42
|
:columns="${(_, c) => c.parent.columns}"
|
|
36
43
|
@row-action-menu-beforetoggle="${(_, c) => c.parent.onRowActionMenuBeforeToggle(c.event)}"
|
|
37
44
|
@row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
|
|
38
|
-
style="height: ${x => x.size}px;"
|
|
39
45
|
>
|
|
40
46
|
${when((x, c) => c.parent.openActionMenuRecordId === c.parent.tableData[x.index]?.id, html `
|
|
41
47
|
${repeat((_, c) => c.parent.actionMenuSlots, html `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/table/template.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,MAAM,EACN,IAAI,EACP,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAEH,wBAAwB,EAC3B,MAAM,SAAS,CAAC;AAEjB,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAO;6BACN,QAAQ,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;;;;
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/table/template.ts"],"names":[],"mappings":"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"}
|
|
@@ -12,6 +12,34 @@ export declare abstract class TableColumn<TCellRecord extends TableCellRecord =
|
|
|
12
12
|
columnHidden: boolean;
|
|
13
13
|
sortIndex?: number | null;
|
|
14
14
|
sortDirection: TableColumnSortDirection;
|
|
15
|
+
/**
|
|
16
|
+
* @internal
|
|
17
|
+
* Used by the Table in order to give a column a specific pixel width.
|
|
18
|
+
* When set 'currentFractionalWidth' will be ignored.
|
|
19
|
+
*/
|
|
20
|
+
currentPixelWidth?: number;
|
|
21
|
+
/**
|
|
22
|
+
* @internal
|
|
23
|
+
* Used by the Table in order to size a column proportionally to the available
|
|
24
|
+
* width of a row.
|
|
25
|
+
*/
|
|
26
|
+
currentFractionalWidth: number;
|
|
27
|
+
/**
|
|
28
|
+
* @internal
|
|
29
|
+
* Used by column plugins to set a specific pixel width. Sets currentPixelWidth when changed.
|
|
30
|
+
*/
|
|
31
|
+
internalPixelWidth?: number;
|
|
32
|
+
/**
|
|
33
|
+
* @internal
|
|
34
|
+
* Used by column plugins to size a column proportionally to the available
|
|
35
|
+
* width of a row. Sets currentFractionalWidth when changed.
|
|
36
|
+
*/
|
|
37
|
+
internalFractionalWidth: number;
|
|
38
|
+
/**
|
|
39
|
+
* @internal
|
|
40
|
+
* The minimum size in pixels according to the design doc
|
|
41
|
+
*/
|
|
42
|
+
internalMinPixelWidth: number;
|
|
15
43
|
/**
|
|
16
44
|
* @internal
|
|
17
45
|
*
|
|
@@ -67,4 +95,6 @@ export declare abstract class TableColumn<TCellRecord extends TableCellRecord =
|
|
|
67
95
|
* @internal
|
|
68
96
|
*/
|
|
69
97
|
connectedCallback(): void;
|
|
98
|
+
protected internalFractionalWidthChanged(): void;
|
|
99
|
+
protected internalPixelWidthChanged(): void;
|
|
70
100
|
}
|
|
@@ -3,7 +3,7 @@ import { attr, nullableNumberConverter, observable } from '@microsoft/fast-eleme
|
|
|
3
3
|
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
4
4
|
import { uniqueId } from '@microsoft/fast-web-utilities';
|
|
5
5
|
import { TableColumnSortDirection } from '../../table/types';
|
|
6
|
-
import { TableColumnSortOperation } from './types';
|
|
6
|
+
import { defaultFractionalWidth, defaultMinPixelWidth, TableColumnSortOperation } from './types';
|
|
7
7
|
/**
|
|
8
8
|
* The base class for table columns
|
|
9
9
|
*/
|
|
@@ -12,6 +12,23 @@ export class TableColumn extends FoundationElement {
|
|
|
12
12
|
super();
|
|
13
13
|
this.columnHidden = false;
|
|
14
14
|
this.sortDirection = TableColumnSortDirection.none;
|
|
15
|
+
/**
|
|
16
|
+
* @internal
|
|
17
|
+
* Used by the Table in order to size a column proportionally to the available
|
|
18
|
+
* width of a row.
|
|
19
|
+
*/
|
|
20
|
+
this.currentFractionalWidth = defaultFractionalWidth;
|
|
21
|
+
/**
|
|
22
|
+
* @internal
|
|
23
|
+
* Used by column plugins to size a column proportionally to the available
|
|
24
|
+
* width of a row. Sets currentFractionalWidth when changed.
|
|
25
|
+
*/
|
|
26
|
+
this.internalFractionalWidth = defaultFractionalWidth;
|
|
27
|
+
/**
|
|
28
|
+
* @internal
|
|
29
|
+
* The minimum size in pixels according to the design doc
|
|
30
|
+
*/
|
|
31
|
+
this.internalMinPixelWidth = defaultMinPixelWidth;
|
|
15
32
|
/**
|
|
16
33
|
* @internal
|
|
17
34
|
*
|
|
@@ -34,6 +51,12 @@ export class TableColumn extends FoundationElement {
|
|
|
34
51
|
super.connectedCallback();
|
|
35
52
|
this.setAttribute('slot', this.internalUniqueId);
|
|
36
53
|
}
|
|
54
|
+
internalFractionalWidthChanged() {
|
|
55
|
+
this.currentFractionalWidth = this.internalFractionalWidth;
|
|
56
|
+
}
|
|
57
|
+
internalPixelWidthChanged() {
|
|
58
|
+
this.currentPixelWidth = this.internalPixelWidth;
|
|
59
|
+
}
|
|
37
60
|
}
|
|
38
61
|
__decorate([
|
|
39
62
|
attr({ attribute: 'column-id' })
|
|
@@ -53,6 +76,21 @@ __decorate([
|
|
|
53
76
|
__decorate([
|
|
54
77
|
attr({ attribute: 'sort-direction' })
|
|
55
78
|
], TableColumn.prototype, "sortDirection", void 0);
|
|
79
|
+
__decorate([
|
|
80
|
+
observable
|
|
81
|
+
], TableColumn.prototype, "currentPixelWidth", void 0);
|
|
82
|
+
__decorate([
|
|
83
|
+
observable
|
|
84
|
+
], TableColumn.prototype, "currentFractionalWidth", void 0);
|
|
85
|
+
__decorate([
|
|
86
|
+
observable
|
|
87
|
+
], TableColumn.prototype, "internalPixelWidth", void 0);
|
|
88
|
+
__decorate([
|
|
89
|
+
observable
|
|
90
|
+
], TableColumn.prototype, "internalFractionalWidth", void 0);
|
|
91
|
+
__decorate([
|
|
92
|
+
observable
|
|
93
|
+
], TableColumn.prototype, "internalMinPixelWidth", void 0);
|
|
56
94
|
__decorate([
|
|
57
95
|
observable
|
|
58
96
|
], TableColumn.prototype, "dataRecordFieldNames", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/base/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,IAAI,EAEJ,uBAAuB,EACvB,UAAU,EAEb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,wBAAwB,EAAkB,MAAM,mBAAmB,CAAC;AAC7E,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/base/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,IAAI,EAEJ,uBAAuB,EACvB,UAAU,EAEb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,wBAAwB,EAAkB,MAAM,mBAAmB,CAAC;AAC7E,OAAO,EACH,sBAAsB,EACtB,oBAAoB,EAGpB,wBAAwB,EAC3B,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,MAAM,OAAgB,WAGpB,SAAQ,iBAAiB;IAwHvB;QACI,KAAK,EAAE,CAAC;QA9GL,iBAAY,GAAG,KAAK,CAAC;QAMrB,kBAAa,GAA6B,wBAAwB,CAAC,IAAI,CAAC;QAU/E;;;;WAIG;QAEI,2BAAsB,GAAG,sBAAsB,CAAC;QASvD;;;;WAIG;QAEI,4BAAuB,GAAG,sBAAsB,CAAC;QAExD;;;WAGG;QAEI,0BAAqB,GAAG,oBAAoB,CAAC;QAyBpD;;;;;WAKG;QAEI,yBAAoB,GAA4C,EAAE,CAAC;QAkB1E;;;;WAIG;QAEI,kBAAa,GAA6B,wBAAwB,CAAC,KAAK,CAAC;QAW5E,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;IAC1D,CAAC;IAED;;OAEG;IACa,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACrD,CAAC;IAES,8BAA8B;QACpC,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,uBAAuB,CAAC;IAC/D,CAAC;IAES,yBAAyB;QAC/B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,kBAAkB,CAAC;IACrD,CAAC;CACJ;AA3IG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;6CACR;AAGzB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;mDACT;AAG/B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;oDACT;AAGhC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;iDAC1B;AAG5B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;8CACrC;AAGjC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDACyC;AAQ/E;IADC,UAAU;sDACuB;AAQlC;IADC,UAAU;2DAC4C;AAOvD;IADC,UAAU;uDACwB;AAQnC;IADC,UAAU;4DAC6C;AAOxD;IADC,UAAU;0DACyC;AAgCpD;IADC,UAAU;yDAC+D;AAQ1E;IADC,UAAU;iDACyB;AAQpC;IADC,UAAU;+DACwC;AAQnD;IADC,UAAU;kDACqE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/table-column/base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/table-column/base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;CAUxB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/table-column/base/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAA
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/table-column/base/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAA;;;;;;CAM3B,CAAC"}
|
|
@@ -24,3 +24,5 @@ export declare const TableColumnSortOperation: {
|
|
|
24
24
|
readonly localeAwareCaseSensitive: "localeAwareCaseSensitive";
|
|
25
25
|
};
|
|
26
26
|
export declare type TableColumnSortOperation = (typeof TableColumnSortOperation)[keyof typeof TableColumnSortOperation];
|
|
27
|
+
export declare const defaultMinPixelWidth = 88;
|
|
28
|
+
export declare const defaultFractionalWidth = 1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/table-column/base/types.ts"],"names":[],"mappings":"AAiBA;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,OAAO;IACd;;;OAGG;IACH,wBAAwB,EAAE,0BAA0B;CAC9C,CAAC"}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/table-column/base/types.ts"],"names":[],"mappings":"AAiBA;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,OAAO;IACd;;;OAGG;IACH,wBAAwB,EAAE,0BAA0B;CAC9C,CAAC;AAIX,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAEvC,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { TableColumn } from '../base';
|
|
2
|
+
declare type SizedTableColumn = Pick<TableColumn, 'internalFractionalWidth' | 'internalMinPixelWidth'>;
|
|
3
|
+
declare type SizedTableColumnConstructor = abstract new (...args: any[]) => SizedTableColumn;
|
|
4
|
+
export declare function mixinFractionalWidthColumnAPI<TBase extends SizedTableColumnConstructor>(base: TBase): (abstract new (...args: any[]) => {
|
|
5
|
+
fractionalWidth?: number | null | undefined;
|
|
6
|
+
minPixelWidth?: number | null | undefined;
|
|
7
|
+
fractionalWidthChanged(): void;
|
|
8
|
+
minPixelWidthChanged(): void;
|
|
9
|
+
internalFractionalWidth: number;
|
|
10
|
+
internalMinPixelWidth: number;
|
|
11
|
+
}) & TBase;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { attr, nullableNumberConverter } from '@microsoft/fast-element';
|
|
2
|
+
import { defaultMinPixelWidth, defaultFractionalWidth } from '../base/types';
|
|
3
|
+
// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference
|
|
4
|
+
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
|
|
5
|
+
export function mixinFractionalWidthColumnAPI(base) {
|
|
6
|
+
/**
|
|
7
|
+
* The Mixin that provides a concrete column with the API to support being resized
|
|
8
|
+
* proportionally within a Table.
|
|
9
|
+
*/
|
|
10
|
+
class FractionalWidthColumn extends base {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments);
|
|
13
|
+
this.fractionalWidth = defaultFractionalWidth;
|
|
14
|
+
this.minPixelWidth = defaultMinPixelWidth;
|
|
15
|
+
}
|
|
16
|
+
fractionalWidthChanged() {
|
|
17
|
+
if (typeof this.fractionalWidth === 'number') {
|
|
18
|
+
this.internalFractionalWidth = this.fractionalWidth;
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
this.internalFractionalWidth = defaultFractionalWidth;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
minPixelWidthChanged() {
|
|
25
|
+
if (typeof this.minPixelWidth === 'number') {
|
|
26
|
+
this.internalMinPixelWidth = this.minPixelWidth;
|
|
27
|
+
}
|
|
28
|
+
else {
|
|
29
|
+
this.internalMinPixelWidth = defaultMinPixelWidth;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
attr({ attribute: 'fractional-width', converter: nullableNumberConverter })(
|
|
34
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
35
|
+
FractionalWidthColumn.prototype, 'fractionalWidth');
|
|
36
|
+
attr({ attribute: 'min-pixel-width', converter: nullableNumberConverter })(
|
|
37
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
38
|
+
FractionalWidthColumn.prototype, 'minPixelWidth');
|
|
39
|
+
return FractionalWidthColumn;
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=fractional-width-column.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fractional-width-column.js","sourceRoot":"","sources":["../../../../src/table-column/mixins/fractional-width-column.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAExE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAW7E,4HAA4H;AAC5H,+HAA+H;AAC/H,MAAM,UAAU,6BAA6B,CAE3C,IAAW;IACT;;;OAGG;IACH,MAAe,qBAAsB,SAAQ,IAAI;QAAjD;;YACW,oBAAe,GAAmB,sBAAsB,CAAC;YAEzD,kBAAa,GAAmB,oBAAoB,CAAC;QAiBhE,CAAC;QAfU,sBAAsB;YACzB,IAAI,OAAO,IAAI,CAAC,eAAe,KAAK,QAAQ,EAAE;gBAC1C,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,eAAe,CAAC;aACvD;iBAAM;gBACH,IAAI,CAAC,uBAAuB,GAAG,sBAAsB,CAAC;aACzD;QACL,CAAC;QAEM,oBAAoB;YACvB,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;gBACxC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,aAAa,CAAC;aACnD;iBAAM;gBACH,IAAI,CAAC,qBAAqB,GAAG,oBAAoB,CAAC;aACrD;QACL,CAAC;KACJ;IAED,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;IACvE,iEAAiE;IACjE,qBAAqB,CAAC,SAAS,EAC/B,iBAAiB,CACpB,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;IACtE,iEAAiE;IACjE,qBAAqB,CAAC,SAAS,EAC/B,eAAe,CAClB,CAAC;IACF,OAAO,qBAAqB,CAAC;AACjC,CAAC"}
|
|
@@ -10,9 +10,9 @@ declare global {
|
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
13
|
-
* The table column for displaying strings.
|
|
13
|
+
* The base class for a table column for displaying strings.
|
|
14
14
|
*/
|
|
15
|
-
|
|
15
|
+
declare class TableColumnTextBase extends TableColumn<TableColumnTextCellRecord, TableColumnTextColumnConfig> {
|
|
16
16
|
cellRecordFieldNames: readonly ["value"];
|
|
17
17
|
fieldName?: string;
|
|
18
18
|
placeholder?: string;
|
|
@@ -22,4 +22,18 @@ export declare class TableColumnText extends TableColumn<TableColumnTextCellReco
|
|
|
22
22
|
protected fieldNameChanged(): void;
|
|
23
23
|
protected placeholderChanged(): void;
|
|
24
24
|
}
|
|
25
|
+
declare const TableColumnText_base: (abstract new (...args: any[]) => {
|
|
26
|
+
fractionalWidth?: number | null | undefined;
|
|
27
|
+
minPixelWidth?: number | null | undefined;
|
|
28
|
+
fractionalWidthChanged(): void;
|
|
29
|
+
minPixelWidthChanged(): void;
|
|
30
|
+
internalFractionalWidth: number;
|
|
31
|
+
internalMinPixelWidth: number;
|
|
32
|
+
}) & typeof TableColumnTextBase;
|
|
33
|
+
/**
|
|
34
|
+
* The table column for displaying strings.
|
|
35
|
+
*/
|
|
36
|
+
export declare class TableColumnText extends TableColumnText_base {
|
|
37
|
+
}
|
|
25
38
|
export declare const tableColumnTextTag: string;
|
|
39
|
+
export {};
|