@3mo/data-grid 0.8.3 → 0.8.5-rc.0
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/DataGrid.d.ts +1 -0
- package/dist/DataGrid.d.ts.map +1 -1
- package/dist/DataGrid.js +32 -2
- package/dist/DataGridCell.d.ts.map +1 -1
- package/dist/DataGridCell.js +5 -3
- package/dist/DataGridHeader.d.ts +2 -0
- package/dist/DataGridHeader.d.ts.map +1 -1
- package/dist/DataGridHeader.js +102 -51
- package/dist/DataGridHeaderSeparator.d.ts.map +1 -1
- package/dist/DataGridHeaderSeparator.js +13 -2
- package/dist/columns/DataGridColumnComponent.d.ts.map +1 -1
- package/dist/columns/DataGridColumnComponent.js +8 -2
- package/dist/custom-elements.json +4 -0
- package/dist/rows/DataGridDefaultRow.d.ts.map +1 -1
- package/dist/rows/DataGridDefaultRow.js +18 -10
- package/dist/rows/DataGridRow.d.ts +1 -0
- package/dist/rows/DataGridRow.d.ts.map +1 -1
- package/dist/rows/DataGridRow.js +60 -7
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
package/dist/DataGrid.d.ts
CHANGED
|
@@ -157,6 +157,7 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
|
|
|
157
157
|
handlePaginationChange(pagination?: DataGridPagination): void;
|
|
158
158
|
setData(data: Array<TData>, selectionBehavior?: DataGridSelectionBehaviorOnDataChange): void;
|
|
159
159
|
get hasSelection(): boolean;
|
|
160
|
+
get isUsingSubgrid(): boolean;
|
|
160
161
|
selectAll(...parameters: Parameters<typeof this.selectionController.selectAll>): void;
|
|
161
162
|
deselectAll(...parameters: Parameters<typeof this.selectionController.deselectAll>): void;
|
|
162
163
|
select(...parameters: Parameters<typeof this.selectionController.select>): void;
|
package/dist/DataGrid.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../DataGrid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAqC,KAAK,cAAc,EAAqC,KAAK,kBAAkB,EAAS,MAAM,WAAW,CAAA;AAErL,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,OAAO,EAAE,6BAA6B,EAAE,MAAM,sCAAsC,CAAA;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAE5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAGhE,OAAO,EAAyC,oBAAoB,EAAE,KAAK,cAAc,EAAE,KAAK,YAAY,EAA4C,KAAK,WAAW,EAA0B,MAAM,YAAY,CAAA;AACpN,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAA;
|
|
1
|
+
{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../DataGrid.ts"],"names":[],"mappings":"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"}
|
package/dist/DataGrid.js
CHANGED
|
@@ -13,6 +13,8 @@ import { Localizer } from '@3mo/localization';
|
|
|
13
13
|
import { ContextMenu } from '@3mo/context-menu';
|
|
14
14
|
import { CsvGenerator, DataGridColumnComponent, DataGridSidePanelTab } from './index.js';
|
|
15
15
|
import { DataGridSelectionController } from './DataGridSelectionController.js';
|
|
16
|
+
import * as System from 'detect-browser';
|
|
17
|
+
import { observeResize } from '@3mo/resize-observer';
|
|
16
18
|
Localizer.register('en', {
|
|
17
19
|
'${count:pluralityNumber} entries selected': [
|
|
18
20
|
'1 entry selected',
|
|
@@ -208,6 +210,9 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
208
210
|
get hasSelection() {
|
|
209
211
|
return this.selectionController.hasSelection;
|
|
210
212
|
}
|
|
213
|
+
get isUsingSubgrid() {
|
|
214
|
+
return System.detect()?.name !== 'safari';
|
|
215
|
+
}
|
|
211
216
|
selectAll(...parameters) {
|
|
212
217
|
return this.selectionController.selectAll(...parameters);
|
|
213
218
|
}
|
|
@@ -432,6 +437,9 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
432
437
|
|
|
433
438
|
#content {
|
|
434
439
|
width: fit-content;
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
:host([subgrid]) #content {
|
|
435
443
|
min-width: 100%;
|
|
436
444
|
height: min-content;
|
|
437
445
|
min-height: 100%;
|
|
@@ -606,6 +614,22 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
606
614
|
get dataGridTemplate() {
|
|
607
615
|
this.provideCssColumnsProperties();
|
|
608
616
|
this.toggleAttribute('hasDetails', this.hasDetails);
|
|
617
|
+
this.toggleAttribute('subgrid', this.isUsingSubgrid);
|
|
618
|
+
if (!this.isUsingSubgrid) {
|
|
619
|
+
return html `
|
|
620
|
+
<mo-flex ${style({ flexGrow: '1', position: 'relative' })}>
|
|
621
|
+
<mo-grid rows='* auto' ${style({ flexGrow: '1' })}>
|
|
622
|
+
<mo-scroller ${style({ minHeight: 'var(--mo-data-grid-content-min-height, calc(var(--mo-data-grid-min-visible-rows, 2.5) * var(--mo-data-grid-row-height) + var(--mo-data-grid-header-height)))' })}>
|
|
623
|
+
<mo-grid ${style({ height: '100%' })} rows='auto *'>
|
|
624
|
+
${this.headerTemplate}
|
|
625
|
+
${this.contentTemplate}
|
|
626
|
+
</mo-grid>
|
|
627
|
+
</mo-scroller>
|
|
628
|
+
${this.footerTemplate}
|
|
629
|
+
</mo-grid>
|
|
630
|
+
</mo-flex>
|
|
631
|
+
`;
|
|
632
|
+
}
|
|
609
633
|
return html `
|
|
610
634
|
<mo-grid rows='* auto' ${style({ position: 'relative', height: '100%' })}>
|
|
611
635
|
<mo-scroller
|
|
@@ -634,8 +658,14 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
634
658
|
const content = this.shallVirtualize === false
|
|
635
659
|
? this.renderData.map(getRowTemplate)
|
|
636
660
|
: html `<mo-virtualized-scroller .items=${this.renderData} .getItemTemplate=${getRowTemplate} exportparts='row'></mo-virtualized-scroller>`;
|
|
637
|
-
return html `
|
|
638
|
-
|
|
661
|
+
return this.isUsingSubgrid ? html `${content}` : html `
|
|
662
|
+
<mo-scroller
|
|
663
|
+
${style({ gridRow: '2', gridColumn: '1 / last-line', overflowX: 'hidden' })}
|
|
664
|
+
${observeResize(() => this.requestUpdate())}
|
|
665
|
+
@scroll=${this.handleScroll}
|
|
666
|
+
>
|
|
667
|
+
${content}
|
|
668
|
+
</mo-scroller>
|
|
639
669
|
`;
|
|
640
670
|
}
|
|
641
671
|
getRowTemplate(data, index, level = 0) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridCell.d.ts","sourceRoot":"","sources":["../DataGridCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAA6C,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAGpH,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,KAAK,cAAc,EAAuB,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAOvF;;;;;;GAMG;AACH,qBACa,YAAY,CAAC,MAAM,SAAS,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IAC1H,KAAK,EAAG,MAAM,CAAA;IACd,MAAM,EAAG,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IACtC,GAAG,EAAG,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAQlE,OAAO,CAAC,OAAO,CAAQ;IAE1B,IAAI,QAAQ,6DAA+B;IAC3C,IAAI,IAAI,UAA2B;IACnC,IAAI,YAAY,+/CAAsC;IAEtD,OAAO,KAAK,SAAS,GAAkD;IACvE,OAAO,KAAK,QAAQ,GAA0D;IAE9E,OAAO,KAAK,gBAAgB,GAAuD;IAEnF,OAAO,KAAK,UAAU,GAIrB;IAED,IAAI,SAAS,YAGZ;IAED,SAAS,CAAC,QAAQ,CAAC,eAAe,kBAA4B;IAG9D,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,YAAY;IAO/C,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;cAQ7B,aAAa,CAAC,KAAK,EAAE,aAAa;IA2ClD,OAAO,CAAC,SAAS;IAWjB,WAAoB,MAAM,kCAoDzB;IAED,OAAO,KAAK,OAAO,GAAmC;IAEtD,cAAuB,QAAQ,
|
|
1
|
+
{"version":3,"file":"DataGridCell.d.ts","sourceRoot":"","sources":["../DataGridCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAA6C,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAGpH,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,KAAK,cAAc,EAAuB,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAOvF;;;;;;GAMG;AACH,qBACa,YAAY,CAAC,MAAM,SAAS,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IAC1H,KAAK,EAAG,MAAM,CAAA;IACd,MAAM,EAAG,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IACtC,GAAG,EAAG,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAQlE,OAAO,CAAC,OAAO,CAAQ;IAE1B,IAAI,QAAQ,6DAA+B;IAC3C,IAAI,IAAI,UAA2B;IACnC,IAAI,YAAY,+/CAAsC;IAEtD,OAAO,KAAK,SAAS,GAAkD;IACvE,OAAO,KAAK,QAAQ,GAA0D;IAE9E,OAAO,KAAK,gBAAgB,GAAuD;IAEnF,OAAO,KAAK,UAAU,GAIrB;IAED,IAAI,SAAS,YAGZ;IAED,SAAS,CAAC,QAAQ,CAAC,eAAe,kBAA4B;IAG9D,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,YAAY;IAO/C,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;cAQ7B,aAAa,CAAC,KAAK,EAAE,aAAa;IA2ClD,OAAO,CAAC,SAAS;IAWjB,WAAoB,MAAM,kCAoDzB;IAED,OAAO,KAAK,OAAO,GAAmC;IAEtD,cAAuB,QAAQ,uBAe9B;IAED,OAAO,KAAK,eAAe,GAK1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;KAC1C;CACD"}
|
package/dist/DataGridCell.js
CHANGED
|
@@ -164,9 +164,11 @@ let DataGridCell = class DataGridCell extends Component {
|
|
|
164
164
|
else {
|
|
165
165
|
this.setAttribute('tabindex', '-1');
|
|
166
166
|
}
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
167
|
+
if (this.dataGrid.isUsingSubgrid) {
|
|
168
|
+
this.toggleAttribute('sticky', this.column.sticky !== undefined);
|
|
169
|
+
this.toggleAttribute('sticking', !this.column.intersecting);
|
|
170
|
+
this.style.insetInline = this.column.stickyColumnInsetInline;
|
|
171
|
+
}
|
|
170
172
|
return this.isEditing ? this.editContentTemplate : this.contentTemplate;
|
|
171
173
|
}
|
|
172
174
|
get contentTemplate() {
|
package/dist/DataGridHeader.d.ts
CHANGED
|
@@ -11,6 +11,8 @@ export declare class DataGridHeader<TData> extends Component {
|
|
|
11
11
|
private readonly handleDataGridDataChange;
|
|
12
12
|
private readonly handleDataGridSelectionChange;
|
|
13
13
|
static get styles(): import("@a11d/lit").CSSResult;
|
|
14
|
+
private get skeletonColumns();
|
|
15
|
+
private get separatorAdjustedColumns();
|
|
14
16
|
protected get template(): import("lit-html").HTMLTemplateResult;
|
|
15
17
|
private get detailsExpanderTemplate();
|
|
16
18
|
private get selectionTemplate();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridHeader.d.ts","sourceRoot":"","sources":["../DataGridHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,
|
|
1
|
+
{"version":3,"file":"DataGridHeader.d.ts","sourceRoot":"","sources":["../DataGridHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAsD,MAAM,WAAW,CAAA;AAKpG,OAAO,EAAuE,KAAK,QAAQ,EAAwB,MAAM,YAAY,CAAA;AAErI,qBACa,cAAc,CAAC,KAAK,CAAE,SAAQ,SAAS;IAC1C,QAAQ,CAAC,UAAU,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAC7C,QAAQ,CAAC,mBAAmB,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAEnC,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IAC/C,SAAS,EAAE,iBAAiB,CAAQ;IACJ,WAAW,UAAQ;cAE5C,SAAS;cAOT,YAAY;IAK/B,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAExC;IAED,OAAO,CAAC,QAAQ,CAAC,6BAA6B,CAQ7C;IAED,WAAoB,MAAM,kCA+FzB;IAED,OAAO,KAAK,eAAe,GAO1B;IAED,OAAO,KAAK,wBAAwB,GAEnC;IAED,cAAuB,QAAQ,0CAmB9B;IAED,OAAO,KAAK,uBAAuB,GAYlC;IAED,OAAO,KAAK,iBAAiB,GAQ5B;IAED,OAAO,KAAK,eAAe,GAkB1B;IAED,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAuCrC;IAED,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,YAAY,GAQvB;IAED,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,IAAI;IAoCZ,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAOrC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;KAC9C;CACD"}
|
package/dist/DataGridHeader.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { component, Component, css, html, ifDefined, property, event, style } from '@a11d/lit';
|
|
2
|
+
import { component, Component, css, html, ifDefined, property, event, style, join } from '@a11d/lit';
|
|
3
3
|
import { KeyboardController } from '@3mo/keyboard-controller';
|
|
4
4
|
import { tooltip } from '@3mo/tooltip';
|
|
5
5
|
import { observeResize } from '@3mo/resize-observer';
|
|
@@ -27,12 +27,17 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
27
27
|
const sortingDefinition = column.sortingDefinition;
|
|
28
28
|
const sortIcon = !sortingDefinition ? undefined : sortingDefinition.strategy === DataGridSortingStrategy.Ascending ? 'arrow_upward' : 'arrow_downward';
|
|
29
29
|
const sortingRank = !sortingDefinition || this.dataGrid.getSorting().length <= 1 ? undefined : sortingDefinition.rank;
|
|
30
|
+
const observeResizeDeferred = (callback) => observeResize((e, o) => {
|
|
31
|
+
// It is necessary to defer the callback to the next frame to avoid
|
|
32
|
+
// this resize-observer triggering other resize-observers in a loop
|
|
33
|
+
requestAnimationFrame(() => callback(e, o));
|
|
34
|
+
});
|
|
30
35
|
return html `
|
|
31
36
|
<mo-flex class='cell' alignItems='center' direction=${column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal'}
|
|
32
|
-
data-sticky=${ifDefined(column.sticky)}
|
|
37
|
+
data-sticky=${ifDefined(this.dataGrid.isUsingSubgrid ? column.sticky : undefined)}
|
|
33
38
|
data-sticking=${column.intersecting === false}
|
|
34
|
-
${!column.sticky || column.intersecting ? html.nothing : style({ insetInline: column.stickyColumnInsetInline })}
|
|
35
|
-
${
|
|
39
|
+
${!column.sticky || column.intersecting || this.dataGrid.isUsingSubgrid ? html.nothing : style({ insetInline: column.stickyColumnInsetInline })}
|
|
40
|
+
${observeResizeDeferred(([entry]) => column.widthInPixels = entry?.contentRect.width ?? 0)}
|
|
36
41
|
>
|
|
37
42
|
<mo-flex direction=${column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal'} alignItems='center'
|
|
38
43
|
${style({ overflow: 'hidden', cursor: 'pointer', flex: '1' })}
|
|
@@ -48,11 +53,13 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
48
53
|
<mo-icon ${style({ color: 'var(--mo-color-accent)' })} icon=${ifDefined(sortIcon)}></mo-icon>
|
|
49
54
|
`}
|
|
50
55
|
</mo-flex>
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
+
${!this.dataGrid.isUsingSubgrid ? html.nothing : html `
|
|
57
|
+
<mo-data-grid-header-separator
|
|
58
|
+
?data-last=${columns.length - 1 === index}
|
|
59
|
+
.dataGrid=${this.dataGrid}
|
|
60
|
+
.column=${this.dataGrid.visibleColumns[index]}
|
|
61
|
+
></mo-data-grid-header-separator>
|
|
62
|
+
`}
|
|
56
63
|
</mo-flex>
|
|
57
64
|
`;
|
|
58
65
|
};
|
|
@@ -69,6 +76,8 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
69
76
|
connected() {
|
|
70
77
|
this.dataGrid.dataChange.subscribe(this.handleDataGridDataChange);
|
|
71
78
|
this.dataGrid.selectionChange.subscribe(this.handleDataGridSelectionChange);
|
|
79
|
+
this.toggleAttribute('subgrid', this.dataGrid.isUsingSubgrid);
|
|
80
|
+
this.toggleAttribute('details', this.dataGrid.hasDetails);
|
|
72
81
|
}
|
|
73
82
|
disconnected() {
|
|
74
83
|
this.dataGrid.dataChange.unsubscribe(this.handleDataGridDataChange);
|
|
@@ -79,14 +88,62 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
79
88
|
:host {
|
|
80
89
|
--mo-data-grid-header-separator-height: 15px;
|
|
81
90
|
--mo-data-grid-header-separator-width: 2px;
|
|
91
|
+
display: inherit;
|
|
92
|
+
font-size: small;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
:host([subgrid]) {
|
|
96
|
+
position: sticky;
|
|
82
97
|
display: grid;
|
|
83
98
|
grid-template-columns: subgrid;
|
|
84
99
|
grid-column: -1 / 1;
|
|
85
100
|
background: var(--mo-data-grid-sticky-part-color);
|
|
86
|
-
position: sticky;
|
|
87
101
|
top: 0;
|
|
88
102
|
z-index: 4;
|
|
89
|
-
|
|
103
|
+
|
|
104
|
+
.details, .selection, .more {
|
|
105
|
+
position: sticky;
|
|
106
|
+
background: var(--mo-data-grid-sticky-part-color);
|
|
107
|
+
z-index: 10;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.cell {
|
|
111
|
+
position: relative;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.cell[data-sticky] {
|
|
115
|
+
position: sticky;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.cell[data-sticky] /*[data-sticking]*/ {
|
|
119
|
+
z-index: 6;
|
|
120
|
+
background: var(--mo-data-grid-sticky-part-color);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
mo-data-grid-header-separator {
|
|
124
|
+
z-index: 5;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.cell[data-sticky] /*[data-sticking]*/ mo-data-grid-header-separator {
|
|
128
|
+
z-index: 7;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.details {
|
|
132
|
+
inset-inline-start: 0px;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.selection {
|
|
136
|
+
inset-inline-start: 0px;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.more {
|
|
140
|
+
cursor: pointer;
|
|
141
|
+
inset-inline-end: 0px;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
:host([subgrid][details]) .selection {
|
|
146
|
+
inset-inline-start: 20px;
|
|
90
147
|
}
|
|
91
148
|
|
|
92
149
|
#header {
|
|
@@ -120,49 +177,30 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
120
177
|
align-items: center;
|
|
121
178
|
justify-content: center;
|
|
122
179
|
}
|
|
123
|
-
|
|
124
|
-
.cell {
|
|
125
|
-
position: relative;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.cell[data-sticky] {
|
|
129
|
-
position: sticky;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.cell[data-sticky] /*[data-sticking]*/ {
|
|
133
|
-
z-index: 6;
|
|
134
|
-
background: var(--mo-data-grid-sticky-part-color);
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
mo-data-grid-header-separator {
|
|
138
|
-
z-index: 5;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
.cell[data-sticky] /*[data-sticking]*/ mo-data-grid-header-separator {
|
|
142
|
-
z-index: 7;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.details, .selection, .more {
|
|
146
|
-
position: sticky;
|
|
147
|
-
background: var(--mo-data-grid-sticky-part-color);
|
|
148
|
-
z-index: 5;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
.details {
|
|
152
|
-
inset-inline-start: 0px;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.selection {
|
|
156
|
-
inset-inline-start: 0px;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
.more {
|
|
160
|
-
cursor: pointer;
|
|
161
|
-
inset-inline-end: 0px;
|
|
162
|
-
}
|
|
163
180
|
`;
|
|
164
181
|
}
|
|
182
|
+
get skeletonColumns() {
|
|
183
|
+
return [
|
|
184
|
+
this.dataGrid.detailsColumnWidth,
|
|
185
|
+
this.dataGrid.selectionColumnWidth,
|
|
186
|
+
'1fr',
|
|
187
|
+
this.dataGrid.moreColumnWidth
|
|
188
|
+
].filter((c) => c !== undefined).join(' ');
|
|
189
|
+
}
|
|
190
|
+
get separatorAdjustedColumns() {
|
|
191
|
+
return this.dataGrid.dataColumnsWidths.join(' var(--mo-data-grid-columns-gap, 2px) ');
|
|
192
|
+
}
|
|
165
193
|
get template() {
|
|
194
|
+
if (!this.dataGrid.isUsingSubgrid) {
|
|
195
|
+
return html `
|
|
196
|
+
<mo-grid id='header' columns=${this.skeletonColumns} columnGap='var(--mo-data-grid-columns-gap, 2px)'>
|
|
197
|
+
${this.detailsExpanderTemplate}
|
|
198
|
+
${this.selectionTemplate}
|
|
199
|
+
${this.contentTemplate}
|
|
200
|
+
${this.moreTemplate}
|
|
201
|
+
</mo-grid>
|
|
202
|
+
`;
|
|
203
|
+
}
|
|
166
204
|
return html `
|
|
167
205
|
${this.detailsExpanderTemplate}
|
|
168
206
|
${this.selectionTemplate}
|
|
@@ -194,6 +232,19 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
194
232
|
`;
|
|
195
233
|
}
|
|
196
234
|
get contentTemplate() {
|
|
235
|
+
if (!this.dataGrid.isUsingSubgrid) {
|
|
236
|
+
return html `
|
|
237
|
+
<mo-grid columns=${this.separatorAdjustedColumns}>
|
|
238
|
+
${join(this.dataGrid.visibleColumns.map(this.getHeaderCellTemplate), index => html `
|
|
239
|
+
<mo-data-grid-header-separator
|
|
240
|
+
.dataGrid=${this.dataGrid}
|
|
241
|
+
.column=${this.dataGrid.visibleColumns[index]}
|
|
242
|
+
@columnUpdate=${() => this.dataGrid.requestUpdate()}
|
|
243
|
+
></mo-data-grid-header-separator>
|
|
244
|
+
`)}
|
|
245
|
+
</mo-grid>
|
|
246
|
+
`;
|
|
247
|
+
}
|
|
197
248
|
return html `
|
|
198
249
|
${this.dataGrid.visibleColumns.map(this.getHeaderCellTemplate)}
|
|
199
250
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridHeaderSeparator.d.ts","sourceRoot":"","sources":["../DataGridHeaderSeparator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+D,MAAM,WAAW,CAAA;AAClG,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAA;AAE/D,qBACa,uBAAwB,SAAQ,SAAS;
|
|
1
|
+
{"version":3,"file":"DataGridHeaderSeparator.d.ts","sourceRoot":"","sources":["../DataGridHeaderSeparator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+D,MAAM,WAAW,CAAA;AAClG,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAA;AAE/D,qBACa,uBAAwB,SAAQ,SAAS;IAQlD,QAAQ,EAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IACH,MAAM,EAAG,cAAc,CAAC,OAAO,CAAC,CAAA;IAEnD,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,kBAAkB,CAAI;IAEvC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAK;IAE7B,OAAO,CAAC,YAAY,CAAC,CAAQ;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAQ;IAE5B,WAAoB,MAAM,kCAkDzB;IAED,cAAuB,QAAQ,0CAU9B;IAGD,SAAS,CAAC,eAAe;IAczB,SAAS,CAAC,iBAAiB,CAAC,CAAC,EAAE,YAAY,GAAG,UAAU;IAmBxD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAIjC;IAED,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAOjC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,+BAA+B,EAAE,uBAAuB,CAAA;KACxD;CACD"}
|
|
@@ -12,6 +12,9 @@ let DataGridHeaderSeparator = class DataGridHeaderSeparator extends Component {
|
|
|
12
12
|
this.updatePointerPosition(e);
|
|
13
13
|
};
|
|
14
14
|
this.handleDoubleClick = () => {
|
|
15
|
+
if (!this.dataGrid.isUsingSubgrid) {
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
15
18
|
this.isResizing = false;
|
|
16
19
|
this.column.width = 'max-content';
|
|
17
20
|
this.dataGrid.setColumns(this.dataGrid.columns);
|
|
@@ -19,9 +22,10 @@ let DataGridHeaderSeparator = class DataGridHeaderSeparator extends Component {
|
|
|
19
22
|
}
|
|
20
23
|
static get styles() {
|
|
21
24
|
return css `
|
|
22
|
-
:host {
|
|
25
|
+
:host([subgrid]) {
|
|
23
26
|
position: absolute;
|
|
24
27
|
inset-inline-end: -2px;
|
|
28
|
+
z-index: 2;
|
|
25
29
|
}
|
|
26
30
|
|
|
27
31
|
:host([data-last]) {
|
|
@@ -110,7 +114,14 @@ let DataGridHeaderSeparator = class DataGridHeaderSeparator extends Component {
|
|
|
110
114
|
}
|
|
111
115
|
};
|
|
112
116
|
__decorate([
|
|
113
|
-
property({
|
|
117
|
+
property({
|
|
118
|
+
type: Object,
|
|
119
|
+
updated(dataGrid) {
|
|
120
|
+
if (dataGrid) {
|
|
121
|
+
this.toggleAttribute('subgrid', dataGrid.isUsingSubgrid);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
})
|
|
114
125
|
], DataGridHeaderSeparator.prototype, "dataGrid", void 0);
|
|
115
126
|
__decorate([
|
|
116
127
|
property({ type: Object })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridColumnComponent.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,KAAK,uBAAuB,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAE9G;;;;;;;;;;;GAWG;AACH,8BAAsB,uBAAuB,CAAC,KAAK,EAAE,MAAM,CAAE,SAAQ,SAAS;
|
|
1
|
+
{"version":3,"file":"DataGridColumnComponent.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,KAAK,uBAAuB,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAE9G;;;;;;;;;;;GAWG;AACH,8BAAsB,uBAAuB,CAAC,KAAK,EAAE,MAAM,CAAE,SAAQ,SAAS;IAQ1E,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,SAAS,CAAA;IAElC,KAAK,EAAG,MAAM,CAAA;IACY,MAAM,UAAQ;IACxC,MAAM,CAAC,EAAE,oBAAoB,CAAA;IACZ,OAAO,SAAK;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,uBAAuB,CAAU;IAC5C,YAAY,EAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAC/B,gBAAgB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IACpB,WAAW,UAAQ;IAO5D,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAQ;IAElD,IAAI,MAAM,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAgB1C;IAED,QAAQ,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IACvF,QAAQ,CAAC,sBAAsB,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAE5F,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK;IAIlD,iBAAiB;cAOP,OAAO;CAI1B"}
|
|
@@ -17,7 +17,6 @@ import { DataGridColumn } from '../DataGridColumn.js';
|
|
|
17
17
|
export class DataGridColumnComponent extends Component {
|
|
18
18
|
constructor() {
|
|
19
19
|
super(...arguments);
|
|
20
|
-
this.width = 'max-content';
|
|
21
20
|
this.hidden = false;
|
|
22
21
|
this.heading = '';
|
|
23
22
|
this.textAlign = 'start';
|
|
@@ -56,7 +55,14 @@ export class DataGridColumnComponent extends Component {
|
|
|
56
55
|
}
|
|
57
56
|
}
|
|
58
57
|
__decorate([
|
|
59
|
-
property({
|
|
58
|
+
property({
|
|
59
|
+
type: Object,
|
|
60
|
+
updated(dataGrid) {
|
|
61
|
+
if (dataGrid) {
|
|
62
|
+
this.width = dataGrid.isUsingSubgrid ? 'max-content' : 'minmax(100px, 1fr)';
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
})
|
|
60
66
|
], DataGridColumnComponent.prototype, "dataGrid", void 0);
|
|
61
67
|
__decorate([
|
|
62
68
|
property()
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridDefaultRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridDefaultRow.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAG9C,qBACa,kBAAkB,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC;IAC1I,WAAoB,MAAM,
|
|
1
|
+
{"version":3,"file":"DataGridDefaultRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridDefaultRow.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAG9C,qBACa,kBAAkB,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC;IAC1I,WAAoB,MAAM,kCA8DzB;IAEQ,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;IAQ1F,cAAuB,WAAW,0CAQjC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,0BAA0B,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KAChD;CACD"}
|
|
@@ -6,11 +6,28 @@ let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
|
|
|
6
6
|
return css `
|
|
7
7
|
${super.styles}
|
|
8
8
|
|
|
9
|
-
:host {
|
|
9
|
+
:host([subgrid]) {
|
|
10
10
|
display: grid;
|
|
11
11
|
grid-template-columns: subgrid;
|
|
12
12
|
grid-column: -1 / 1;
|
|
13
13
|
min-height: var(--mo-data-grid-row-height);
|
|
14
|
+
|
|
15
|
+
#detailsContainer {
|
|
16
|
+
grid-column: -1 / 1;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
:host([has-sub-data]) #detailsContainer {
|
|
20
|
+
display: grid;
|
|
21
|
+
grid-template-columns: subgrid;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
:host(:not([subgrid])) {
|
|
26
|
+
mo-grid {
|
|
27
|
+
height: var(--mo-data-grid-row-height);
|
|
28
|
+
grid-template-columns: var(--mo-data-grid-columns);
|
|
29
|
+
column-gap: var(--mo-data-grid-columns-gap, 2px);
|
|
30
|
+
}
|
|
14
31
|
}
|
|
15
32
|
|
|
16
33
|
mo-flex {
|
|
@@ -23,15 +40,6 @@ let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
|
|
|
23
40
|
height: var(--mo-data-grid-row-height);
|
|
24
41
|
}
|
|
25
42
|
|
|
26
|
-
#detailsContainer {
|
|
27
|
-
grid-column: -1 / 1;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
:host([has-sub-data]) #detailsContainer {
|
|
31
|
-
display: grid;
|
|
32
|
-
grid-template-columns: subgrid;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
43
|
#detailsContainer [instanceof*=mo-data-grid] {
|
|
36
44
|
--mo-data-grid-header-background: color-mix(in srgb, var(--mo-color-foreground), transparent 96%);
|
|
37
45
|
--mo-data-grid-alternating-background: transparent;
|
|
@@ -26,6 +26,7 @@ export declare abstract class DataGridRow<TData, TDetailsElement extends Element
|
|
|
26
26
|
updated(...parameters: Parameters<Component['updated']>): void;
|
|
27
27
|
protected get hasDetails(): boolean;
|
|
28
28
|
static get styles(): import("@a11d/lit").CSSResult;
|
|
29
|
+
private get columnsWidths();
|
|
29
30
|
protected get template(): HTMLTemplateResult;
|
|
30
31
|
protected abstract get rowTemplate(): HTMLTemplateResult;
|
|
31
32
|
protected get detailsExpanderTemplate(): HTMLTemplateResult;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAyB,KAAK,kBAAkB,EAAqB,MAAM,WAAW,CAAA;AAEvH,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAyD,MAAM,aAAa,CAAA;AAErH;;;;;;;;GAQG;AACH,8BAAsB,WAAW,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IACzG,QAAQ,CAAC,iBAAiB,EAAG,eAAe,CAAC,OAAO,CAAC,CAAA;IAE/B,QAAQ,CAAC,KAAK,EAAG,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAChE,QAAQ,CAAC,OAAO,EAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAEjE,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAC3C,IAAI,EAAG,KAAK,CAAA;IACI,QAAQ,UAAQ;IAazD,WAAW,UAAQ;
|
|
1
|
+
{"version":3,"file":"DataGridRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAyB,KAAK,kBAAkB,EAAqB,MAAM,WAAW,CAAA;AAEvH,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAyD,MAAM,aAAa,CAAA;AAErH;;;;;;;;GAQG;AACH,8BAAsB,WAAW,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IACzG,QAAQ,CAAC,iBAAiB,EAAG,eAAe,CAAC,OAAO,CAAC,CAAA;IAE/B,QAAQ,CAAC,KAAK,EAAG,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAChE,QAAQ,CAAC,OAAO,EAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAEjE,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAC3C,IAAI,EAAG,KAAK,CAAA;IACI,QAAQ,UAAQ;IAazD,WAAW,UAAQ;IAQnB,KAAK,SAAI;IAEgC,SAAS,CAAC,eAAe,UAAQ;IAE7E,IAAI,cAAc,gCAEjB;IAED,OAAO,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC;cAIvB,WAAW;IAMrB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAShE,SAAS,KAAK,UAAU,YAEvB;IAED,WAAoB,MAAM,kCA0IzB;IAED,OAAO,KAAK,aAAa,GAOxB;IAED,cAAuB,QAAQ,uBAc9B;IAED,SAAS,CAAC,QAAQ,KAAK,WAAW,IAAI,kBAAkB,CAAA;IAExD,SAAS,KAAK,uBAAuB,uBAepC;IAED,SAAS,KAAK,iBAAiB,uBAc9B;IAED,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAUhG,SAAS,KAAK,cAAc,uBAE3B;IAED,SAAS,KAAK,6BAA6B,uBAS1C;IAED,SAAS,KAAK,eAAe,uBAmB5B;IAED,OAAO,CAAC,YAAY;IAIpB,SAAS,CAAC,kBAAkB;cAYZ,wBAAwB;cAKxB,wBAAwB;YAK1B,yCAAyC;IAQjD,eAAe,CAAC,KAAK,CAAC,EAAE,YAAY;IAwB1C,OAAO,KAAK,eAAe,GAI1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAEK,gBAAgB;IAKtB,SAAS,CAAC,aAAa;IAIvB,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,OAAO;CAIvC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KACxC;CACD"}
|
package/dist/rows/DataGridRow.js
CHANGED
|
@@ -27,6 +27,8 @@ export class DataGridRow extends Component {
|
|
|
27
27
|
}
|
|
28
28
|
initialized() {
|
|
29
29
|
this.toggleAttribute('mo-data-grid-row', true);
|
|
30
|
+
this.toggleAttribute('subgrid', this.dataGrid.isUsingSubgrid);
|
|
31
|
+
this.toggleAttribute('details', this.dataGrid.hasDetails);
|
|
30
32
|
}
|
|
31
33
|
updated(...parameters) {
|
|
32
34
|
this.cells.forEach(cell => cell.requestUpdate());
|
|
@@ -68,7 +70,6 @@ export class DataGridRow extends Component {
|
|
|
68
70
|
}
|
|
69
71
|
|
|
70
72
|
#contentContainer {
|
|
71
|
-
grid-column: -1 / 1;
|
|
72
73
|
cursor: pointer;
|
|
73
74
|
transition: 250ms;
|
|
74
75
|
}
|
|
@@ -93,6 +94,51 @@ export class DataGridRow extends Component {
|
|
|
93
94
|
color: var(--mo-color-gray);
|
|
94
95
|
}
|
|
95
96
|
|
|
97
|
+
:host(:not([subgrid])) #contextMenu {
|
|
98
|
+
align-items: center;
|
|
99
|
+
grid-column: -1;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
:host([subgrid]) {
|
|
103
|
+
#contentContainer {
|
|
104
|
+
grid-column: -1 / 1;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
[data-sticky] {
|
|
108
|
+
position: sticky;
|
|
109
|
+
z-index: 3;
|
|
110
|
+
background: var(--mo-data-grid-sticky-part-color);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
#contextMenu {
|
|
114
|
+
height: 100%;
|
|
115
|
+
place-self: end;
|
|
116
|
+
inset-inline-end: 0;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
#detailsExpander {
|
|
120
|
+
inset-inline-start: 0;
|
|
121
|
+
background-color: var(--mo-data-grid-sticky-expander-part-color, var(--mo-data-grid-sticky-part-color));
|
|
122
|
+
z-index: 5;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
#selection {
|
|
126
|
+
width: var(--mo-data-grid-column-selection-width);
|
|
127
|
+
align-items: unset;
|
|
128
|
+
left: 0;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
:host([subgrid]:not([details])) #selectionContainer {
|
|
134
|
+
inset-inline-start: 0;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
:host([subgrid][details]) #selectionContainer {
|
|
138
|
+
inset-inline-start: 20px;
|
|
139
|
+
padding: 1px 0;
|
|
140
|
+
}
|
|
141
|
+
|
|
96
142
|
:host([selected]) #contextMenuIconButton, :host([contextMenuOpen]) #contextMenuIconButton {
|
|
97
143
|
color: var(--mo-color-foreground);
|
|
98
144
|
opacity: 1;
|
|
@@ -134,9 +180,18 @@ export class DataGridRow extends Component {
|
|
|
134
180
|
}
|
|
135
181
|
`;
|
|
136
182
|
}
|
|
183
|
+
get columnsWidths() {
|
|
184
|
+
return [
|
|
185
|
+
this.dataGrid.detailsColumnWidth,
|
|
186
|
+
this.dataGrid.selectionColumnWidth,
|
|
187
|
+
this.dataGrid.dataColumnsWidths,
|
|
188
|
+
this.dataGrid.moreColumnWidth,
|
|
189
|
+
].flat().filter(Boolean).join(' ');
|
|
190
|
+
}
|
|
137
191
|
get template() {
|
|
192
|
+
console.log(this.columnsWidths, this.dataGrid.dataColumnsWidths);
|
|
138
193
|
return html `
|
|
139
|
-
<mo-grid id='contentContainer' columns
|
|
194
|
+
<mo-grid id='contentContainer' columns=${this.dataGrid.isUsingSubgrid ? 'subgrid' : this.columnsWidths}
|
|
140
195
|
@click=${() => this.handleContentClick()}
|
|
141
196
|
@dblclick=${() => this.handleContentDoubleClick()}
|
|
142
197
|
@auxclick=${(e) => e.button !== 1 ? void 0 : this.handleContentMiddleClick()}
|
|
@@ -149,8 +204,7 @@ export class DataGridRow extends Component {
|
|
|
149
204
|
}
|
|
150
205
|
get detailsExpanderTemplate() {
|
|
151
206
|
return this.dataGrid.hasDetails === false ? html.nothing : html `
|
|
152
|
-
<mo-flex justifyContent='center' alignItems='center'
|
|
153
|
-
${style({ position: 'sticky', zIndex: '2', insetInlineStart: '0px', background: 'var(--mo-data-grid-sticky-expander-part-color, var(--mo-data-grid-sticky-part-color))' })}
|
|
207
|
+
<mo-flex justifyContent='center' alignItems='center' id='detailsExpander' data-sticky
|
|
154
208
|
@click=${(e) => e.stopPropagation()}
|
|
155
209
|
@dblclick=${(e) => e.stopPropagation()}
|
|
156
210
|
>
|
|
@@ -166,8 +220,7 @@ export class DataGridRow extends Component {
|
|
|
166
220
|
}
|
|
167
221
|
get selectionTemplate() {
|
|
168
222
|
return this.dataGrid.hasSelection === false || this.dataGrid.selectionCheckboxesHidden ? html.nothing : html `
|
|
169
|
-
<mo-flex id='selectionContainer' justifyContent='center' alignItems='center'
|
|
170
|
-
${style({ width: 'var(--mo-data-grid-column-selection-width)', position: 'sticky', zIndex: '2', insetInlineStart: this.dataGrid.hasDetails ? '20px' : '0px', padding: this.dataGrid.hasDetails ? '1px 0' : undefined, background: 'var(--mo-data-grid-sticky-part-color)' })}
|
|
223
|
+
<mo-flex id='selectionContainer' justifyContent='center' alignItems='center' id='selection' data-sticky
|
|
171
224
|
@click=${(e) => e.stopPropagation()}
|
|
172
225
|
@dblclick=${(e) => e.stopPropagation()}
|
|
173
226
|
>
|
|
@@ -194,7 +247,7 @@ export class DataGridRow extends Component {
|
|
|
194
247
|
}
|
|
195
248
|
get contextMenuIconButtonTemplate() {
|
|
196
249
|
return this.dataGrid.hasContextMenu === false ? html.nothing : html `
|
|
197
|
-
<mo-flex
|
|
250
|
+
<mo-flex id='contextMenu' data-sticky justifyContent='center'>
|
|
198
251
|
<mo-icon-button id='contextMenuIconButton' icon='more_vert' dense
|
|
199
252
|
@click=${this.openContextMenu}
|
|
200
253
|
@dblclick=${(e) => e.stopPropagation()}
|