@3mo/data-grid 0.8.4 → 0.8.5-rc.1
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 +2 -0
- package/dist/DataGrid.d.ts.map +1 -1
- package/dist/DataGrid.js +111 -3
- 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 +99 -53
- package/dist/DataGridHeaderSeparator.d.ts.map +1 -1
- package/dist/DataGridHeaderSeparator.js +13 -2
- package/dist/DataGridPrimaryContextMenuItem.js +5 -5
- package/dist/columns/DataGridColumnComponent.d.ts.map +1 -1
- package/dist/columns/DataGridColumnComponent.js +8 -2
- package/dist/columns/number/DataGridFooterSum.js +20 -20
- package/dist/custom-elements.json +12 -5030
- package/dist/excel.svg.js +47 -47
- package/dist/rows/DataGridDefaultRow.d.ts.map +1 -1
- package/dist/rows/DataGridDefaultRow.js +18 -10
- package/dist/rows/DataGridRow.d.ts +4 -3
- package/dist/rows/DataGridRow.d.ts.map +1 -1
- package/dist/rows/DataGridRow.js +63 -10
- 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;
|
|
@@ -217,6 +218,7 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
|
|
|
217
218
|
protected get headerTemplate(): HTMLTemplateResult;
|
|
218
219
|
private get shallVirtualize();
|
|
219
220
|
private get rowsTemplate();
|
|
221
|
+
private get fallbackContextMenuTemplate();
|
|
220
222
|
getRowTemplate(data: TData, index?: number, level?: number): import("lit-html").TemplateResult;
|
|
221
223
|
private handleRowDetailsOpenChange;
|
|
222
224
|
protected get footerTemplate(): HTMLTemplateResult;
|
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' && System.detect()?.os !== 'iOS';
|
|
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%;
|
|
@@ -447,6 +455,36 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
447
455
|
color: var(--mo-color-gray);
|
|
448
456
|
}
|
|
449
457
|
|
|
458
|
+
.contextMenu {
|
|
459
|
+
background-color: var(--mo-data-grid-sticky-part-color);
|
|
460
|
+
height: var(--mo-data-grid-row-height);
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
.contextMenu:first-of-type {
|
|
464
|
+
margin-top: -1px;
|
|
465
|
+
padding-top: 1px;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
.contextMenu[opened] {
|
|
469
|
+
background-color: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-accent));
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
.contextMenu[opened] .contextMenuIconButton {
|
|
473
|
+
color: var(--mo-color-foreground);
|
|
474
|
+
opacity: 1;
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
.contextMenu:not([opened]):hover .contextMenuIconButton {
|
|
478
|
+
color: var(--mo-color-accent);
|
|
479
|
+
opacity: 1;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
.contextMenuIconButton {
|
|
483
|
+
transition: 250ms;
|
|
484
|
+
opacity: 0.5;
|
|
485
|
+
color: var(--mo-color-gray);
|
|
486
|
+
}
|
|
487
|
+
|
|
450
488
|
#flexSelectionToolbar {
|
|
451
489
|
background: var(--mo-color-surface);
|
|
452
490
|
position: absolute;
|
|
@@ -606,6 +644,22 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
606
644
|
get dataGridTemplate() {
|
|
607
645
|
this.provideCssColumnsProperties();
|
|
608
646
|
this.toggleAttribute('hasDetails', this.hasDetails);
|
|
647
|
+
this.toggleAttribute('subgrid', this.isUsingSubgrid);
|
|
648
|
+
if (!this.isUsingSubgrid) {
|
|
649
|
+
return html `
|
|
650
|
+
<mo-flex ${style({ flexGrow: '1', position: 'relative' })}>
|
|
651
|
+
<mo-grid rows='* auto' ${style({ flexGrow: '1' })}>
|
|
652
|
+
<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)))' })}>
|
|
653
|
+
<mo-grid ${style({ height: '100%' })} rows='auto *'>
|
|
654
|
+
${this.headerTemplate}
|
|
655
|
+
${this.contentTemplate}
|
|
656
|
+
</mo-grid>
|
|
657
|
+
</mo-scroller>
|
|
658
|
+
${this.footerTemplate}
|
|
659
|
+
</mo-grid>
|
|
660
|
+
</mo-flex>
|
|
661
|
+
`;
|
|
662
|
+
}
|
|
609
663
|
return html `
|
|
610
664
|
<mo-grid rows='* auto' ${style({ position: 'relative', height: '100%' })}>
|
|
611
665
|
<mo-scroller
|
|
@@ -631,11 +685,64 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
631
685
|
}
|
|
632
686
|
get rowsTemplate() {
|
|
633
687
|
const getRowTemplate = (data, index) => this.getRowTemplate(data, index);
|
|
634
|
-
const content = this.shallVirtualize
|
|
688
|
+
const content = !this.shallVirtualize
|
|
635
689
|
? this.renderData.map(getRowTemplate)
|
|
636
|
-
: html
|
|
690
|
+
: html `
|
|
691
|
+
<mo-virtualized-scroller exportparts='row'
|
|
692
|
+
.items=${this.renderData}
|
|
693
|
+
.getItemTemplate=${getRowTemplate}
|
|
694
|
+
></mo-virtualized-scroller>
|
|
695
|
+
`;
|
|
696
|
+
return this.isUsingSubgrid ? html `${content}` : html `
|
|
697
|
+
<mo-flex direction='horizontal'>
|
|
698
|
+
<mo-scroller
|
|
699
|
+
${style({ flexGrow: '1', gridRow: '2', gridColumn: '1 / last-line', overflow: 'hidden' })}
|
|
700
|
+
${observeResize(() => this.requestUpdate())}
|
|
701
|
+
@scroll=${this.handleScroll}
|
|
702
|
+
>
|
|
703
|
+
${content}
|
|
704
|
+
</mo-scroller>
|
|
705
|
+
${this.fallbackContextMenuTemplate}
|
|
706
|
+
</mo-flex>
|
|
707
|
+
`;
|
|
708
|
+
}
|
|
709
|
+
get fallbackContextMenuTemplate() {
|
|
710
|
+
if (!this.hasContextMenu) {
|
|
711
|
+
return html.nothing;
|
|
712
|
+
}
|
|
713
|
+
const flattenedData = this.renderData.map((root, i) => [
|
|
714
|
+
{ ...root, outer: i },
|
|
715
|
+
...(this.getSubData(root) ?? []).map((node, j) => ({ ...node, outer: i, nested: j })),
|
|
716
|
+
]).flat();
|
|
637
717
|
return html `
|
|
638
|
-
${
|
|
718
|
+
<mo-flex ${style({ position: 'sticky', right: '0' })}>
|
|
719
|
+
${flattenedData.map((node) => {
|
|
720
|
+
const { outer, nested } = node;
|
|
721
|
+
let rowNode = this.rows[outer];
|
|
722
|
+
if (nested !== undefined) {
|
|
723
|
+
rowNode = rowNode?.subRows[nested];
|
|
724
|
+
}
|
|
725
|
+
if (!rowNode) {
|
|
726
|
+
return html.nothing;
|
|
727
|
+
}
|
|
728
|
+
const rowKey = `${outer}-${nested ?? -1}`;
|
|
729
|
+
const onClick = (e) => {
|
|
730
|
+
if (rowNode.contextMenuOpen) {
|
|
731
|
+
return;
|
|
732
|
+
}
|
|
733
|
+
const contextMenuIconNode = this.shadowRoot?.querySelector(`[data-row-key="${rowKey}"]`);
|
|
734
|
+
contextMenuIconNode.setAttribute('opened', '');
|
|
735
|
+
rowNode.openContextMenu.call(rowNode, e, () => {
|
|
736
|
+
contextMenuIconNode.removeAttribute('opened');
|
|
737
|
+
});
|
|
738
|
+
};
|
|
739
|
+
return html `
|
|
740
|
+
<mo-flex data-row-key=${rowKey} class='contextMenu' alignItems='center' justifyContent='center'>
|
|
741
|
+
<mo-icon-button dense class='contextMenuIconButton' icon='more_vert' @click=${onClick}></mo-icon-button>
|
|
742
|
+
</mo-flex>
|
|
743
|
+
`;
|
|
744
|
+
})}
|
|
745
|
+
</mo-flex>
|
|
639
746
|
`;
|
|
640
747
|
}
|
|
641
748
|
getRowTemplate(data, index, level = 0) {
|
|
@@ -662,6 +769,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
662
769
|
this.openDetailedData = open
|
|
663
770
|
? [...this.openDetailedData, data]
|
|
664
771
|
: this.openDetailedData.filter(d => d !== data);
|
|
772
|
+
requestAnimationFrame(() => !this.isUsingSubgrid && this.requestUpdate());
|
|
665
773
|
}
|
|
666
774
|
get footerTemplate() {
|
|
667
775
|
return html `
|
|
@@ -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';
|
|
@@ -34,9 +34,9 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
34
34
|
});
|
|
35
35
|
return html `
|
|
36
36
|
<mo-flex class='cell' alignItems='center' direction=${column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal'}
|
|
37
|
-
data-sticky=${ifDefined(column.sticky)}
|
|
37
|
+
data-sticky=${ifDefined(this.dataGrid.isUsingSubgrid ? column.sticky : undefined)}
|
|
38
38
|
data-sticking=${column.intersecting === false}
|
|
39
|
-
${!column.sticky || column.intersecting ? html.nothing : style({ insetInline: column.stickyColumnInsetInline })}
|
|
39
|
+
${!column.sticky || column.intersecting || this.dataGrid.isUsingSubgrid ? html.nothing : style({ insetInline: column.stickyColumnInsetInline })}
|
|
40
40
|
${observeResizeDeferred(([entry]) => column.widthInPixels = entry?.contentRect.width ?? 0)}
|
|
41
41
|
>
|
|
42
42
|
<mo-flex direction=${column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal'} alignItems='center'
|
|
@@ -53,11 +53,13 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
53
53
|
<mo-icon ${style({ color: 'var(--mo-color-accent)' })} icon=${ifDefined(sortIcon)}></mo-icon>
|
|
54
54
|
`}
|
|
55
55
|
</mo-flex>
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
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
|
+
`}
|
|
61
63
|
</mo-flex>
|
|
62
64
|
`;
|
|
63
65
|
};
|
|
@@ -74,6 +76,8 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
74
76
|
connected() {
|
|
75
77
|
this.dataGrid.dataChange.subscribe(this.handleDataGridDataChange);
|
|
76
78
|
this.dataGrid.selectionChange.subscribe(this.handleDataGridSelectionChange);
|
|
79
|
+
this.toggleAttribute('subgrid', this.dataGrid.isUsingSubgrid);
|
|
80
|
+
this.toggleAttribute('details', this.dataGrid.hasDetails);
|
|
77
81
|
}
|
|
78
82
|
disconnected() {
|
|
79
83
|
this.dataGrid.dataChange.unsubscribe(this.handleDataGridDataChange);
|
|
@@ -84,22 +88,70 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
84
88
|
:host {
|
|
85
89
|
--mo-data-grid-header-separator-height: 15px;
|
|
86
90
|
--mo-data-grid-header-separator-width: 2px;
|
|
91
|
+
display: inherit;
|
|
92
|
+
font-size: small;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
:host([subgrid]) {
|
|
96
|
+
position: sticky;
|
|
87
97
|
display: grid;
|
|
88
98
|
grid-template-columns: subgrid;
|
|
89
99
|
grid-column: -1 / 1;
|
|
90
100
|
background: var(--mo-data-grid-sticky-part-color);
|
|
91
|
-
position: sticky;
|
|
92
101
|
top: 0;
|
|
93
102
|
z-index: 4;
|
|
94
|
-
|
|
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;
|
|
95
147
|
}
|
|
96
148
|
|
|
97
149
|
#header {
|
|
98
|
-
border-top: var(--mo-data-grid-border);
|
|
99
|
-
border-bottom: var(--mo-data-grid-border);
|
|
100
150
|
position: relative;
|
|
101
151
|
height: var(--mo-data-grid-header-height);
|
|
102
|
-
background: var(--mo-data-grid-
|
|
152
|
+
background-color: var(--mo-data-grid-sticky-part-color);
|
|
153
|
+
border-top: var(--mo-data-grid-border);
|
|
154
|
+
border-bottom: var(--mo-data-grid-border);
|
|
103
155
|
}
|
|
104
156
|
|
|
105
157
|
.headerContent {
|
|
@@ -125,49 +177,30 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
125
177
|
align-items: center;
|
|
126
178
|
justify-content: center;
|
|
127
179
|
}
|
|
128
|
-
|
|
129
|
-
.cell {
|
|
130
|
-
position: relative;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
.cell[data-sticky] {
|
|
134
|
-
position: sticky;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
.cell[data-sticky] /*[data-sticking]*/ {
|
|
138
|
-
z-index: 6;
|
|
139
|
-
background: var(--mo-data-grid-sticky-part-color);
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
mo-data-grid-header-separator {
|
|
143
|
-
z-index: 5;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.cell[data-sticky] /*[data-sticking]*/ mo-data-grid-header-separator {
|
|
147
|
-
z-index: 7;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.details, .selection, .more {
|
|
151
|
-
position: sticky;
|
|
152
|
-
background: var(--mo-data-grid-sticky-part-color);
|
|
153
|
-
z-index: 5;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
.details {
|
|
157
|
-
inset-inline-start: 0px;
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
.selection {
|
|
161
|
-
inset-inline-start: 0px;
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
.more {
|
|
165
|
-
cursor: pointer;
|
|
166
|
-
inset-inline-end: 0px;
|
|
167
|
-
}
|
|
168
180
|
`;
|
|
169
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
|
+
}
|
|
170
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
|
+
}
|
|
171
204
|
return html `
|
|
172
205
|
${this.detailsExpanderTemplate}
|
|
173
206
|
${this.selectionTemplate}
|
|
@@ -199,6 +232,19 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
199
232
|
`;
|
|
200
233
|
}
|
|
201
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
|
+
}
|
|
202
248
|
return html `
|
|
203
249
|
${this.dataGrid.visibleColumns.map(this.getHeaderCellTemplate)}
|
|
204
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 })
|
|
@@ -3,11 +3,11 @@ import { component, css } from '@a11d/lit';
|
|
|
3
3
|
import { ContextMenuItem } from '@3mo/context-menu';
|
|
4
4
|
let DataGridPrimaryContextMenuItem = class DataGridPrimaryContextMenuItem extends ContextMenuItem {
|
|
5
5
|
static get styles() {
|
|
6
|
-
return css `
|
|
7
|
-
${super.styles}
|
|
8
|
-
:host {
|
|
9
|
-
font-weight: bold;
|
|
10
|
-
}
|
|
6
|
+
return css `
|
|
7
|
+
${super.styles}
|
|
8
|
+
:host {
|
|
9
|
+
font-weight: bold;
|
|
10
|
+
}
|
|
11
11
|
`;
|
|
12
12
|
}
|
|
13
13
|
};
|
|
@@ -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()
|
|
@@ -13,29 +13,29 @@ let DataGridFooterSum = class DataGridFooterSum extends Component {
|
|
|
13
13
|
this.heading = '';
|
|
14
14
|
}
|
|
15
15
|
static get styles() {
|
|
16
|
-
return css `
|
|
17
|
-
:host {
|
|
18
|
-
display: flex;
|
|
19
|
-
flex-direction: column;
|
|
20
|
-
position: relative;
|
|
21
|
-
max-height: 100%;
|
|
22
|
-
line-height: 1em;
|
|
23
|
-
user-select: all;
|
|
24
|
-
align-items: flex-end;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
div {
|
|
28
|
-
color: var(--mo-color-gray);
|
|
29
|
-
font-size: 0.75rem;
|
|
30
|
-
}
|
|
16
|
+
return css `
|
|
17
|
+
:host {
|
|
18
|
+
display: flex;
|
|
19
|
+
flex-direction: column;
|
|
20
|
+
position: relative;
|
|
21
|
+
max-height: 100%;
|
|
22
|
+
line-height: 1em;
|
|
23
|
+
user-select: all;
|
|
24
|
+
align-items: flex-end;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
div {
|
|
28
|
+
color: var(--mo-color-gray);
|
|
29
|
+
font-size: 0.75rem;
|
|
30
|
+
}
|
|
31
31
|
`;
|
|
32
32
|
}
|
|
33
33
|
get template() {
|
|
34
|
-
return html `
|
|
35
|
-
<div>${this.heading}</div>
|
|
36
|
-
<mo-flex direction='horizontal' justifyContent='center'>
|
|
37
|
-
<slot></slot>
|
|
38
|
-
</mo-flex>
|
|
34
|
+
return html `
|
|
35
|
+
<div>${this.heading}</div>
|
|
36
|
+
<mo-flex direction='horizontal' justifyContent='center'>
|
|
37
|
+
<slot></slot>
|
|
38
|
+
</mo-flex>
|
|
39
39
|
`;
|
|
40
40
|
}
|
|
41
41
|
};
|