@3mo/data-grid 0.5.17 → 0.6.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 +3 -3
- package/dist/DataGrid.d.ts.map +1 -1
- package/dist/DataGrid.js +34 -25
- package/dist/DataGridHeader.d.ts +1 -3
- package/dist/DataGridHeader.d.ts.map +1 -1
- package/dist/DataGridHeader.js +42 -47
- package/dist/DataGridHeaderSeparator.d.ts +3 -4
- package/dist/DataGridHeaderSeparator.d.ts.map +1 -1
- package/dist/DataGridHeaderSeparator.js +35 -28
- package/dist/custom-elements.json +0 -37
- package/dist/rows/DataGridDefaultRow.d.ts.map +1 -1
- package/dist/rows/DataGridDefaultRow.js +14 -4
- package/dist/rows/DataGridRow.d.ts +1 -1
- package/dist/rows/DataGridRow.d.ts.map +1 -1
- package/dist/rows/DataGridRow.js +13 -13
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
package/dist/DataGrid.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ import { InstanceofAttributeController } from '@3mo/instanceof-attribute-control
|
|
|
4
4
|
import { SlotController } from '@3mo/slot-controller';
|
|
5
5
|
import { ThemeController } from '@3mo/theme';
|
|
6
6
|
import { MediaQueryController } from '@3mo/media-query-observer';
|
|
7
|
-
import { DataGridSidePanelTab, type ColumnDefinition, type DataGridCell, type
|
|
7
|
+
import { DataGridSidePanelTab, type ColumnDefinition, type DataGridCell, type DataGridRow } from './index.js';
|
|
8
8
|
import { DataGridSelectionController } from './DataGridSelectionController.js';
|
|
9
9
|
export type DataGridPagination = 'auto' | number;
|
|
10
10
|
export declare enum DataGridSelectionMode {
|
|
@@ -149,8 +149,8 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
|
|
|
149
149
|
cellFontSize: number;
|
|
150
150
|
rowHeight: number;
|
|
151
151
|
get rows(): Array<DataGridRow<TData, TDetailsElement>>;
|
|
152
|
-
readonly header
|
|
153
|
-
private readonly
|
|
152
|
+
private readonly header?;
|
|
153
|
+
private readonly content?;
|
|
154
154
|
private readonly footer?;
|
|
155
155
|
private readonly sidePanel?;
|
|
156
156
|
private readonly columnsSlot?;
|
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;AAIhE,OAAO,EAAgC,oBAAoB,EAAE,KAAK,gBAAgB,EAAE,KAAK,YAAY,
|
|
1
|
+
{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../DataGrid.ts"],"names":[],"mappings":"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"}
|
package/dist/DataGrid.js
CHANGED
|
@@ -339,7 +339,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
339
339
|
return dynamicPageSize(this.data.length);
|
|
340
340
|
}
|
|
341
341
|
if (this.pagination === 'auto') {
|
|
342
|
-
const rowsHeight = this.
|
|
342
|
+
const rowsHeight = this.content?.clientHeight;
|
|
343
343
|
const rowHeight = this.rowHeight;
|
|
344
344
|
const pageSize = Math.floor((rowsHeight || 0) / rowHeight) || 1;
|
|
345
345
|
return dynamicPageSize(pageSize);
|
|
@@ -378,7 +378,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
378
378
|
:host {
|
|
379
379
|
--mo-data-grid-column-details-width: 20px;
|
|
380
380
|
--mo-data-grid-column-selection-width: 40px;
|
|
381
|
-
--mo-data-grid-column-more-width:
|
|
381
|
+
--mo-data-grid-column-more-width: minmax(28px, 1fr);
|
|
382
382
|
|
|
383
383
|
--mo-data-grid-header-height: 32px;
|
|
384
384
|
--mo-data-grid-footer-min-height: 40px;
|
|
@@ -391,6 +391,8 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
391
391
|
--mo-data-grid-row-tree-line-width: 8px;
|
|
392
392
|
--mo-details-data-grid-start-margin: 26px;
|
|
393
393
|
|
|
394
|
+
--mo-data-grid-sticky-part-color: var(--mo-color-surface-container-high);
|
|
395
|
+
|
|
394
396
|
--mo-data-grid-selection-background: color-mix(in srgb, var(--mo-color-accent), transparent 50%);
|
|
395
397
|
display: flex;
|
|
396
398
|
flex-direction: column;
|
|
@@ -465,9 +467,10 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
465
467
|
|
|
466
468
|
#fab {
|
|
467
469
|
position: absolute;
|
|
468
|
-
|
|
470
|
+
bottom: 8px;
|
|
469
471
|
inset-inline-end: 16px;
|
|
470
472
|
transition: var(--mo-data-grid-fab-transition, 250ms);
|
|
473
|
+
z-index: 3;
|
|
471
474
|
}
|
|
472
475
|
|
|
473
476
|
:host([hasFooter]) #fab {
|
|
@@ -510,6 +513,16 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
510
513
|
z-index: 1;
|
|
511
514
|
background-color: var(--mo-color-surface);
|
|
512
515
|
}
|
|
516
|
+
|
|
517
|
+
mo-grid#content:has(.span-through) {
|
|
518
|
+
min-height: 100%;
|
|
519
|
+
grid-template-rows: auto 1fr;
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
.span-through {
|
|
523
|
+
display: block;
|
|
524
|
+
grid-column: -1 / 1;
|
|
525
|
+
}
|
|
513
526
|
`;
|
|
514
527
|
}
|
|
515
528
|
get template() {
|
|
@@ -580,7 +593,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
580
593
|
}
|
|
581
594
|
get noContentTemplate() {
|
|
582
595
|
return html `
|
|
583
|
-
<slot name='error-no-content'>
|
|
596
|
+
<slot name='error-no-content' class='span-through'>
|
|
584
597
|
<mo-empty-state icon='youtube_searched_for'>${t('No results')}</mo-empty-state>
|
|
585
598
|
</slot>
|
|
586
599
|
`;
|
|
@@ -589,17 +602,19 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
589
602
|
this.provideCssColumnsProperties();
|
|
590
603
|
this.toggleAttribute('hasDetails', this.hasDetails);
|
|
591
604
|
return html `
|
|
592
|
-
<mo-
|
|
593
|
-
<mo-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
605
|
+
<mo-grid rows='* auto' ${style({ position: 'relative' })}>
|
|
606
|
+
<mo-scroller
|
|
607
|
+
${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)))' })}
|
|
608
|
+
${observeResize(() => this.requestUpdate())}
|
|
609
|
+
@scroll=${this.handleScroll}
|
|
610
|
+
>
|
|
611
|
+
<mo-grid id='content' autoRows='min-content' columns='var(--mo-data-grid-columns)' columnGap='var(--mo-data-grid-columns-gap)'>
|
|
612
|
+
${this.headerTemplate}
|
|
613
|
+
${this.contentTemplate}
|
|
614
|
+
</mo-grid>
|
|
615
|
+
</mo-scroller>
|
|
616
|
+
${this.footerTemplate}
|
|
617
|
+
</mo-grid>
|
|
603
618
|
`;
|
|
604
619
|
}
|
|
605
620
|
get headerTemplate() {
|
|
@@ -608,7 +623,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
608
623
|
`;
|
|
609
624
|
}
|
|
610
625
|
get shallVirtualize() {
|
|
611
|
-
return !this.preventVerticalContentScroll && this.renderData.length > this.virtualizationThreshold;
|
|
626
|
+
return false && !this.preventVerticalContentScroll && this.renderData.length > this.virtualizationThreshold;
|
|
612
627
|
}
|
|
613
628
|
get rowsTemplate() {
|
|
614
629
|
const getRowTemplate = (data, index) => this.getRowTemplate(data, index);
|
|
@@ -616,13 +631,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
616
631
|
? this.renderData.map(getRowTemplate)
|
|
617
632
|
: html `<mo-virtualized-scroller .items=${this.renderData} .getItemTemplate=${getRowTemplate} exportparts='row'></mo-virtualized-scroller>`;
|
|
618
633
|
return html `
|
|
619
|
-
|
|
620
|
-
${style({ gridRow: '2', gridColumn: '1 / last-line', overflowX: 'hidden' })}
|
|
621
|
-
${observeResize(() => this.requestUpdate())}
|
|
622
|
-
@scroll=${this.handleScroll}
|
|
623
|
-
>
|
|
624
|
-
${content}
|
|
625
|
-
</mo-scroller>
|
|
634
|
+
${content}
|
|
626
635
|
`;
|
|
627
636
|
}
|
|
628
637
|
getRowTemplate(data, index, level = 0) {
|
|
@@ -1055,8 +1064,8 @@ __decorate([
|
|
|
1055
1064
|
query('mo-data-grid-header')
|
|
1056
1065
|
], DataGrid.prototype, "header", void 0);
|
|
1057
1066
|
__decorate([
|
|
1058
|
-
query('#
|
|
1059
|
-
], DataGrid.prototype, "
|
|
1067
|
+
query('#content')
|
|
1068
|
+
], DataGrid.prototype, "content", void 0);
|
|
1060
1069
|
__decorate([
|
|
1061
1070
|
query('mo-data-grid-footer')
|
|
1062
1071
|
], DataGrid.prototype, "footer", void 0);
|
package/dist/DataGridHeader.d.ts
CHANGED
|
@@ -11,13 +11,11 @@ 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();
|
|
16
14
|
protected get template(): import("lit-html").HTMLTemplateResult;
|
|
17
15
|
private get detailsExpanderTemplate();
|
|
18
16
|
private get selectionTemplate();
|
|
19
17
|
private get contentTemplate();
|
|
20
|
-
private getHeaderCellTemplate;
|
|
18
|
+
private readonly getHeaderCellTemplate;
|
|
21
19
|
private get moreTemplate();
|
|
22
20
|
private sort;
|
|
23
21
|
private toggleAllDetails;
|
|
@@ -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,EAAgD,MAAM,WAAW,CAAA;AAG9F,OAAO,EAAyE,KAAK,QAAQ,EAAwB,MAAM,YAAY,CAAA;AAEvI,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;cAKT,YAAY;IAK/B,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAExC;IAED,OAAO,CAAC,QAAQ,CAAC,6BAA6B,CAQ7C;IAED,WAAoB,MAAM,kCA+CzB;IAED,cAAuB,QAAQ,0CAO9B;IAED,OAAO,KAAK,uBAAuB,GAYlC;IAED,OAAO,KAAK,iBAAiB,GAQ5B;IAED,OAAO,KAAK,eAAe,GAI1B;IAED,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CA0BrC;IAED,OAAO,KAAK,YAAY,GAUvB;IAED,OAAO,CAAC,IAAI;IAqCZ,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,
|
|
2
|
+
import { component, Component, css, html, ifDefined, property, event, style } from '@a11d/lit';
|
|
3
3
|
import { KeyboardController } from '@3mo/keyboard-controller';
|
|
4
4
|
import { DataGridSelectionMode, DataGridSortingStrategy, DataGridSidePanelTab } from './index.js';
|
|
5
5
|
let DataGridHeader = class DataGridHeader extends Component {
|
|
@@ -21,6 +21,32 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
21
21
|
this.selection = 'indeterminate';
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
|
+
this.getHeaderCellTemplate = (column, index) => {
|
|
25
|
+
const sortingDefinition = this.dataGrid.getSortingDefinition(column);
|
|
26
|
+
const sortIcon = !sortingDefinition ? undefined : sortingDefinition.strategy === DataGridSortingStrategy.Ascending ? 'arrow_upward' : 'arrow_downward';
|
|
27
|
+
const sortingRank = !sortingDefinition || this.dataGrid.getSorting().length <= 1 ? undefined : sortingDefinition.rank;
|
|
28
|
+
return html `
|
|
29
|
+
<mo-flex direction=${column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal'} alignItems='center' ${style({ position: 'relative' })}>
|
|
30
|
+
<mo-flex direction=${column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal'} alignItems='center'
|
|
31
|
+
${style({ overflow: 'hidden', cursor: 'pointer', userSelect: 'none', flex: '1' })}
|
|
32
|
+
@click=${() => this.sort(column)}
|
|
33
|
+
>
|
|
34
|
+
<div class='headerContent' ${style({ width: '100%', textAlign: column.alignment })} title=${column.title || column.heading}>${column.heading}</div>
|
|
35
|
+
|
|
36
|
+
${sortIcon === undefined ? html.nothing : html `
|
|
37
|
+
${!sortingRank ? html.nothing : html `<span class='sort-rank'>${sortingRank}</span>`}
|
|
38
|
+
<mo-icon ${style({ color: 'var(--mo-color-accent)' })} icon=${ifDefined(sortIcon)}></mo-icon>
|
|
39
|
+
`}
|
|
40
|
+
</mo-flex>
|
|
41
|
+
${index === this.dataGrid.visibleColumns.length - 1 ? html.nothing : html `
|
|
42
|
+
<mo-data-grid-header-separator
|
|
43
|
+
.dataGrid=${this.dataGrid}
|
|
44
|
+
.column=${this.dataGrid.visibleColumns[index]}
|
|
45
|
+
></mo-data-grid-header-separator>
|
|
46
|
+
`}
|
|
47
|
+
</mo-flex>
|
|
48
|
+
`;
|
|
49
|
+
};
|
|
24
50
|
this.handleSelectionChange = (e) => {
|
|
25
51
|
const selected = e.target.selected;
|
|
26
52
|
if (selected === true) {
|
|
@@ -44,7 +70,13 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
44
70
|
:host {
|
|
45
71
|
--mo-data-grid-header-separator-height: 15px;
|
|
46
72
|
--mo-data-grid-header-separator-width: 2px;
|
|
47
|
-
display:
|
|
73
|
+
display: grid;
|
|
74
|
+
grid-template-columns: subgrid;
|
|
75
|
+
grid-column: -1 / 1;
|
|
76
|
+
background: var(--mo-data-grid-sticky-part-color);
|
|
77
|
+
position: sticky;
|
|
78
|
+
top: 0;
|
|
79
|
+
z-index: 4;
|
|
48
80
|
font-size: small;
|
|
49
81
|
}
|
|
50
82
|
|
|
@@ -81,25 +113,12 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
81
113
|
}
|
|
82
114
|
`;
|
|
83
115
|
}
|
|
84
|
-
get skeletonColumns() {
|
|
85
|
-
return [
|
|
86
|
-
this.dataGrid.detailsColumnWidth,
|
|
87
|
-
this.dataGrid.selectionColumnWidth,
|
|
88
|
-
'1fr',
|
|
89
|
-
this.dataGrid.moreColumnWidth
|
|
90
|
-
].filter((c) => c !== undefined).join(' ');
|
|
91
|
-
}
|
|
92
|
-
get separatorAdjustedColumns() {
|
|
93
|
-
return this.dataGrid.dataColumnsWidths.join(' var(--mo-data-grid-columns-gap) ');
|
|
94
|
-
}
|
|
95
116
|
get template() {
|
|
96
117
|
return html `
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
${this.moreTemplate}
|
|
102
|
-
</mo-grid>
|
|
118
|
+
${this.detailsExpanderTemplate}
|
|
119
|
+
${this.selectionTemplate}
|
|
120
|
+
${this.contentTemplate}
|
|
121
|
+
${this.moreTemplate}
|
|
103
122
|
`;
|
|
104
123
|
}
|
|
105
124
|
get detailsExpanderTemplate() {
|
|
@@ -126,38 +145,14 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
126
145
|
}
|
|
127
146
|
get contentTemplate() {
|
|
128
147
|
return html `
|
|
129
|
-
|
|
130
|
-
${join(this.dataGrid.visibleColumns.map(column => this.getHeaderCellTemplate(column)), index => html `
|
|
131
|
-
<mo-data-grid-header-separator
|
|
132
|
-
.dataGrid=${this.dataGrid}
|
|
133
|
-
.column=${this.dataGrid.visibleColumns[index]}
|
|
134
|
-
@columnUpdate=${() => this.dataGrid.requestUpdate()}
|
|
135
|
-
></mo-data-grid-header-separator>
|
|
136
|
-
`)}
|
|
137
|
-
</mo-grid>
|
|
138
|
-
`;
|
|
139
|
-
}
|
|
140
|
-
getHeaderCellTemplate(column) {
|
|
141
|
-
const sortingDefinition = this.dataGrid.getSortingDefinition(column);
|
|
142
|
-
const sortIcon = !sortingDefinition ? undefined : sortingDefinition.strategy === DataGridSortingStrategy.Ascending ? 'arrow_upward' : 'arrow_downward';
|
|
143
|
-
const sortingRank = !sortingDefinition || this.dataGrid.getSorting().length <= 1 ? undefined : sortingDefinition.rank;
|
|
144
|
-
return html `
|
|
145
|
-
<mo-flex direction=${column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal'} alignItems='center'
|
|
146
|
-
${style({ overflow: 'hidden', position: 'relative', cursor: 'pointer', userSelect: 'none' })}
|
|
147
|
-
@click=${() => this.sort(column)}
|
|
148
|
-
>
|
|
149
|
-
<div class='headerContent' ${style({ width: '100%', textAlign: column.alignment })} title=${column.title || column.heading}>${column.heading}</div>
|
|
150
|
-
|
|
151
|
-
${sortIcon === undefined ? html.nothing : html `
|
|
152
|
-
${!sortingRank ? html.nothing : html `<span class='sort-rank'>${sortingRank}</span>`}
|
|
153
|
-
<mo-icon ${style({ color: 'var(--mo-color-accent)' })} icon=${ifDefined(sortIcon)}></mo-icon>
|
|
154
|
-
`}
|
|
155
|
-
</mo-flex>
|
|
148
|
+
${this.dataGrid.visibleColumns.map(this.getHeaderCellTemplate)}
|
|
156
149
|
`;
|
|
157
150
|
}
|
|
158
151
|
get moreTemplate() {
|
|
159
152
|
return this.dataGrid.hasToolbar || this.dataGrid.sidePanelHidden ? html.nothing : html `
|
|
160
|
-
<mo-flex alignItems='
|
|
153
|
+
<mo-flex alignItems='end' justifyContent='center'
|
|
154
|
+
${style({ cursor: 'pointer', position: 'sticky', insetInlineEnd: '0px', background: 'var(--mo-data-grid-sticky-part-color)', zIndex: '3' })}
|
|
155
|
+
>
|
|
161
156
|
<mo-icon-button dense icon='settings' ${style({ color: 'var(--mo-color-accent)', fontSize: 'large' })}
|
|
162
157
|
@click=${() => this.dataGrid.navigateToSidePanelTab(this.dataGrid.sidePanelTab ? undefined : DataGridSidePanelTab.Settings)}
|
|
163
158
|
></mo-icon-button>
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import { Component } from '@a11d/lit';
|
|
2
2
|
import { type ColumnDefinition, type DataGrid } from './index.js';
|
|
3
|
-
/** @fires columnUpdate */
|
|
4
3
|
export declare class DataGridHeaderSeparator extends Component {
|
|
5
|
-
static disableResizing: boolean;
|
|
6
|
-
readonly columnUpdate: EventDispatcher;
|
|
7
4
|
dataGrid: DataGrid<unknown>;
|
|
8
5
|
column: ColumnDefinition<unknown>;
|
|
9
6
|
private isResizing;
|
|
10
|
-
private
|
|
7
|
+
private pointerInlineStart;
|
|
11
8
|
private readonly minimum;
|
|
12
9
|
private initialWidth?;
|
|
13
10
|
private targetWidth?;
|
|
@@ -16,6 +13,8 @@ export declare class DataGridHeaderSeparator extends Component {
|
|
|
16
13
|
protected handleMouseUp(): void;
|
|
17
14
|
protected handleMouseMove(e: MouseEvent): void;
|
|
18
15
|
private readonly handleMouseDown;
|
|
16
|
+
private updatePointerPosition;
|
|
17
|
+
private readonly handleDoubleClick;
|
|
19
18
|
private getColumnWidth;
|
|
20
19
|
}
|
|
21
20
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridHeaderSeparator.d.ts","sourceRoot":"","sources":["../DataGridHeaderSeparator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,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,gBAAgB,EAAE,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAA;AAEjE,qBACa,uBAAwB,SAAQ,SAAS;IACzB,QAAQ,EAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC5B,MAAM,EAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAErD,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,kCA8CzB;IAED,cAAuB,QAAQ,0CAU9B;IAGD,SAAS,CAAC,aAAa;IAavB,SAAS,CAAC,eAAe,CAAC,CAAC,EAAE,UAAU;IAkBvC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAI/B;IAED,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAIjC;IAED,OAAO,CAAC,cAAc;CAmBtB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,+BAA+B,EAAE,uBAAuB,CAAA;KACxD;CACD"}
|
|
@@ -1,23 +1,30 @@
|
|
|
1
|
-
var DataGridHeaderSeparator_1;
|
|
2
1
|
import { __decorate } from "tslib";
|
|
3
|
-
import { Component, component, property, html, css, state,
|
|
4
|
-
|
|
5
|
-
let DataGridHeaderSeparator = DataGridHeaderSeparator_1 = class DataGridHeaderSeparator extends Component {
|
|
2
|
+
import { Component, component, property, html, css, state, eventListener, style } from '@a11d/lit';
|
|
3
|
+
let DataGridHeaderSeparator = class DataGridHeaderSeparator extends Component {
|
|
6
4
|
constructor() {
|
|
7
5
|
super(...arguments);
|
|
8
6
|
this.isResizing = false;
|
|
9
|
-
this.
|
|
7
|
+
this.pointerInlineStart = 0;
|
|
10
8
|
this.minimum = 30;
|
|
11
|
-
this.handleMouseDown = () => {
|
|
12
|
-
if (DataGridHeaderSeparator_1.disableResizing) {
|
|
13
|
-
return;
|
|
14
|
-
}
|
|
9
|
+
this.handleMouseDown = (e) => {
|
|
15
10
|
this.isResizing = true;
|
|
16
11
|
this.initialWidth = this.getColumnWidth(this.column);
|
|
12
|
+
this.updatePointerPosition(e);
|
|
13
|
+
};
|
|
14
|
+
this.handleDoubleClick = () => {
|
|
15
|
+
this.isResizing = false;
|
|
16
|
+
this.column.width = 'min-content';
|
|
17
|
+
this.dataGrid.setColumns(this.dataGrid.columns);
|
|
17
18
|
};
|
|
18
19
|
}
|
|
19
20
|
static get styles() {
|
|
20
21
|
return css `
|
|
22
|
+
:host {
|
|
23
|
+
position: absolute;
|
|
24
|
+
inset-inline-end: calc(var(--mo-data-grid-columns-gap) * -1);
|
|
25
|
+
z-index: 2;
|
|
26
|
+
}
|
|
27
|
+
|
|
21
28
|
div.separator {
|
|
22
29
|
display: flex;
|
|
23
30
|
align-items: center;
|
|
@@ -49,6 +56,7 @@ let DataGridHeaderSeparator = DataGridHeaderSeparator_1 = class DataGridHeaderSe
|
|
|
49
56
|
|
|
50
57
|
:host(:not([disabled])) .resizerOverlay {
|
|
51
58
|
position: fixed;
|
|
59
|
+
pointer-events: none;
|
|
52
60
|
top: 0;
|
|
53
61
|
height: 100%;
|
|
54
62
|
background: var(--mo-color-gray);
|
|
@@ -57,41 +65,44 @@ let DataGridHeaderSeparator = DataGridHeaderSeparator_1 = class DataGridHeaderSe
|
|
|
57
65
|
`;
|
|
58
66
|
}
|
|
59
67
|
get template() {
|
|
60
|
-
this.toggleAttribute('disabled', DataGridHeaderSeparator_1.disableResizing);
|
|
61
68
|
return html `
|
|
62
|
-
<div class='separator' @mousedown=${this.handleMouseDown}>
|
|
69
|
+
<div class='separator' @mousedown=${this.handleMouseDown} @dblclick=${this.handleDoubleClick}>
|
|
63
70
|
<div class='knob'></div>
|
|
64
71
|
</div>
|
|
65
72
|
|
|
66
73
|
${this.isResizing === false ? html.nothing : html `
|
|
67
|
-
<div class='resizerOverlay' ${style({
|
|
74
|
+
<div class='resizerOverlay' ${style({ insetInlineStart: `${this.pointerInlineStart}px` })}></div>
|
|
68
75
|
`}
|
|
69
76
|
`;
|
|
70
77
|
}
|
|
71
78
|
handleMouseUp() {
|
|
72
|
-
if (!this.isResizing
|
|
79
|
+
if (!this.isResizing) {
|
|
73
80
|
return;
|
|
74
81
|
}
|
|
75
82
|
this.isResizing = false;
|
|
76
|
-
this.delta = 0;
|
|
77
83
|
this.initialWidth = undefined;
|
|
78
|
-
this.
|
|
84
|
+
if (this.targetWidth) {
|
|
85
|
+
this.column.width = `${this.targetWidth}px`;
|
|
86
|
+
}
|
|
79
87
|
this.dataGrid.setColumns(this.dataGrid.columns);
|
|
80
|
-
this.columnUpdate.dispatch();
|
|
81
88
|
}
|
|
82
89
|
handleMouseMove(e) {
|
|
83
|
-
if (this.isResizing === false || this.initialWidth === undefined
|
|
90
|
+
if (this.isResizing === false || this.initialWidth === undefined) {
|
|
84
91
|
return;
|
|
85
92
|
}
|
|
86
|
-
|
|
87
|
-
const
|
|
88
|
-
|
|
89
|
-
|
|
93
|
+
this.updatePointerPosition(e);
|
|
94
|
+
const isRtl = getComputedStyle(this).direction === 'rtl';
|
|
95
|
+
const { left: offsetLeft, right: offsetRight } = this.getBoundingClientRect();
|
|
96
|
+
const offsetInlineStart = !isRtl ? offsetLeft : offsetRight;
|
|
97
|
+
this.targetWidth = this.initialWidth + this.pointerInlineStart - offsetInlineStart;
|
|
90
98
|
if (this.targetWidth < this.minimum) {
|
|
91
|
-
this.delta = this.minimum - this.initialWidth;
|
|
92
99
|
this.targetWidth = this.minimum;
|
|
93
100
|
}
|
|
94
101
|
}
|
|
102
|
+
updatePointerPosition(e) {
|
|
103
|
+
const isRtl = getComputedStyle(this).direction === 'rtl';
|
|
104
|
+
this.pointerInlineStart = !isRtl ? e.clientX : window.innerWidth - e.clientX;
|
|
105
|
+
}
|
|
95
106
|
getColumnWidth(column) {
|
|
96
107
|
if (column.hidden === true) {
|
|
97
108
|
return 0;
|
|
@@ -110,10 +121,6 @@ let DataGridHeaderSeparator = DataGridHeaderSeparator_1 = class DataGridHeaderSe
|
|
|
110
121
|
return targetColumn.clientWidth || 0;
|
|
111
122
|
}
|
|
112
123
|
};
|
|
113
|
-
DataGridHeaderSeparator.disableResizing = false;
|
|
114
|
-
__decorate([
|
|
115
|
-
event()
|
|
116
|
-
], DataGridHeaderSeparator.prototype, "columnUpdate", void 0);
|
|
117
124
|
__decorate([
|
|
118
125
|
property({ type: Object })
|
|
119
126
|
], DataGridHeaderSeparator.prototype, "dataGrid", void 0);
|
|
@@ -125,14 +132,14 @@ __decorate([
|
|
|
125
132
|
], DataGridHeaderSeparator.prototype, "isResizing", void 0);
|
|
126
133
|
__decorate([
|
|
127
134
|
state()
|
|
128
|
-
], DataGridHeaderSeparator.prototype, "
|
|
135
|
+
], DataGridHeaderSeparator.prototype, "pointerInlineStart", void 0);
|
|
129
136
|
__decorate([
|
|
130
137
|
eventListener({ target: window, type: 'mouseup' })
|
|
131
138
|
], DataGridHeaderSeparator.prototype, "handleMouseUp", null);
|
|
132
139
|
__decorate([
|
|
133
140
|
eventListener({ target: window, type: 'mousemove' })
|
|
134
141
|
], DataGridHeaderSeparator.prototype, "handleMouseMove", null);
|
|
135
|
-
DataGridHeaderSeparator =
|
|
142
|
+
DataGridHeaderSeparator = __decorate([
|
|
136
143
|
component('mo-data-grid-header-separator')
|
|
137
144
|
], DataGridHeaderSeparator);
|
|
138
145
|
export { DataGridHeaderSeparator };
|
|
@@ -238,10 +238,6 @@
|
|
|
238
238
|
"name": "rows",
|
|
239
239
|
"type": "DataGridRow<TData, TDetailsElement>[]"
|
|
240
240
|
},
|
|
241
|
-
{
|
|
242
|
-
"name": "header",
|
|
243
|
-
"type": "DataGridHeader<TData> | undefined"
|
|
244
|
-
},
|
|
245
241
|
{
|
|
246
242
|
"name": "hasSelection",
|
|
247
243
|
"type": "boolean"
|
|
@@ -812,15 +808,6 @@
|
|
|
812
808
|
}
|
|
813
809
|
],
|
|
814
810
|
"properties": [
|
|
815
|
-
{
|
|
816
|
-
"name": "disableResizing",
|
|
817
|
-
"type": "boolean",
|
|
818
|
-
"default": "false"
|
|
819
|
-
},
|
|
820
|
-
{
|
|
821
|
-
"name": "columnUpdate",
|
|
822
|
-
"type": "EventDispatcher<void>"
|
|
823
|
-
},
|
|
824
811
|
{
|
|
825
812
|
"name": "dataGrid",
|
|
826
813
|
"attribute": "dataGrid",
|
|
@@ -831,12 +818,6 @@
|
|
|
831
818
|
"attribute": "column",
|
|
832
819
|
"type": "ColumnDefinition<unknown>"
|
|
833
820
|
}
|
|
834
|
-
],
|
|
835
|
-
"events": [
|
|
836
|
-
{
|
|
837
|
-
"name": "columnUpdate",
|
|
838
|
-
"type": "CustomEvent<void>"
|
|
839
|
-
}
|
|
840
821
|
]
|
|
841
822
|
},
|
|
842
823
|
{
|
|
@@ -3297,10 +3278,6 @@
|
|
|
3297
3278
|
"name": "rows",
|
|
3298
3279
|
"type": "DataGridRow<TData, TDetailsElement>[]"
|
|
3299
3280
|
},
|
|
3300
|
-
{
|
|
3301
|
-
"name": "header",
|
|
3302
|
-
"type": "DataGridHeader<TData> | undefined"
|
|
3303
|
-
},
|
|
3304
3281
|
{
|
|
3305
3282
|
"name": "hasSelection",
|
|
3306
3283
|
"type": "boolean"
|
|
@@ -3810,14 +3787,6 @@
|
|
|
3810
3787
|
"name": "mo-data-grid-header-separator",
|
|
3811
3788
|
"path": ".\\packages\\DataGrid\\dist\\DataGridHeaderSeparator.d.ts",
|
|
3812
3789
|
"properties": [
|
|
3813
|
-
{
|
|
3814
|
-
"name": "disableResizing",
|
|
3815
|
-
"type": "boolean"
|
|
3816
|
-
},
|
|
3817
|
-
{
|
|
3818
|
-
"name": "columnUpdate",
|
|
3819
|
-
"type": "EventDispatcher<void>"
|
|
3820
|
-
},
|
|
3821
3790
|
{
|
|
3822
3791
|
"name": "dataGrid",
|
|
3823
3792
|
"type": "DataGrid<unknown, undefined>"
|
|
@@ -3826,12 +3795,6 @@
|
|
|
3826
3795
|
"name": "column",
|
|
3827
3796
|
"type": "ColumnDefinition<unknown>"
|
|
3828
3797
|
}
|
|
3829
|
-
],
|
|
3830
|
-
"events": [
|
|
3831
|
-
{
|
|
3832
|
-
"name": "columnUpdate",
|
|
3833
|
-
"type": "CustomEvent<void>"
|
|
3834
|
-
}
|
|
3835
3798
|
]
|
|
3836
3799
|
},
|
|
3837
3800
|
{
|
|
@@ -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,kCAsDzB;IAEQ,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;IAQ1F,cAAuB,WAAW,0CAOjC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,0BAA0B,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KAChD;CACD"}
|
|
@@ -6,10 +6,11 @@ let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
|
|
|
6
6
|
return css `
|
|
7
7
|
${super.styles}
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
grid-template-columns:
|
|
12
|
-
column
|
|
9
|
+
:host {
|
|
10
|
+
display: grid;
|
|
11
|
+
grid-template-columns: subgrid;
|
|
12
|
+
grid-column: -1 / 1;
|
|
13
|
+
min-height: var(--mo-data-grid-row-height);
|
|
13
14
|
}
|
|
14
15
|
|
|
15
16
|
mo-flex {
|
|
@@ -22,6 +23,15 @@ let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
|
|
|
22
23
|
height: var(--mo-data-grid-row-height);
|
|
23
24
|
}
|
|
24
25
|
|
|
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
|
+
|
|
25
35
|
#detailsContainer [instanceof*=mo-data-grid] {
|
|
26
36
|
--mo-data-grid-header-background: color-mix(in srgb, var(--mo-color-foreground), transparent 96%);
|
|
27
37
|
--mo-data-grid-alternating-background: transparent;
|
|
@@ -37,7 +37,7 @@ export declare abstract class DataGridRow<TData, TDetailsElement extends Element
|
|
|
37
37
|
protected handleContentDoubleClick(): Promise<void>;
|
|
38
38
|
protected handleContentMiddleClick(): Promise<void>;
|
|
39
39
|
private clickOnPrimaryContextMenuItemIfApplicable;
|
|
40
|
-
openContextMenu(
|
|
40
|
+
openContextMenu(event?: PointerEvent): Promise<void>;
|
|
41
41
|
private get contextMenuData();
|
|
42
42
|
private get contextMenuTemplate();
|
|
43
43
|
closeContextMenu(): Promise<void>;
|
|
@@ -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,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAC9D,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;IAOnB,KAAK,SAAI;IAEgC,SAAS,CAAC,eAAe,UAAQ;IAE7E,IAAI,cAAc,gCAEjB;cAEkB,WAAW;IAIrB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAShE,SAAS,KAAK,UAAU,YAEvB;IAED,WAAoB,MAAM,
|
|
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,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAC9D,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;IAOnB,KAAK,SAAI;IAEgC,SAAS,CAAC,eAAe,UAAQ;IAE7E,IAAI,cAAc,gCAEjB;cAEkB,WAAW;IAIrB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAShE,SAAS,KAAK,UAAU,YAEvB;IAED,WAAoB,MAAM,kCA6FzB;IAED,cAAuB,QAAQ,uBAY9B;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,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAUlG,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"}
|