@3mo/data-grid 0.8.9 → 0.8.11
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 -1
- package/dist/DataGrid.d.ts.map +1 -1
- package/dist/DataGrid.js +16 -10
- package/dist/DataGridCell.d.ts +3 -5
- package/dist/DataGridCell.d.ts.map +1 -1
- package/dist/DataGridCell.js +10 -13
- package/dist/custom-elements.json +38 -0
- package/dist/rows/DataGridRow.d.ts +3 -0
- package/dist/rows/DataGridRow.d.ts.map +1 -1
- package/dist/rows/DataGridRow.js +27 -3
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
package/dist/DataGrid.d.ts
CHANGED
|
@@ -144,7 +144,6 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
|
|
|
144
144
|
rowHeight: number;
|
|
145
145
|
private readonly header?;
|
|
146
146
|
private readonly scroller?;
|
|
147
|
-
private readonly content?;
|
|
148
147
|
readonly rows: Array<DataGridRow<TData, TDetailsElement>>;
|
|
149
148
|
private readonly footer?;
|
|
150
149
|
private readonly sidePanel?;
|
|
@@ -237,6 +236,7 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
|
|
|
237
236
|
get moreColumnWidth(): string | undefined;
|
|
238
237
|
private lastScrollElementTop;
|
|
239
238
|
private handleScroll;
|
|
239
|
+
protected handlePointerDown(event: PointerEvent): void;
|
|
240
240
|
getSorting(): DataGridSortingDefinition<TData>[];
|
|
241
241
|
private getFlattenedData;
|
|
242
242
|
get flattenedData(): TData[];
|
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,
|
|
1
|
+
{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../DataGrid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAqC,KAAK,cAAc,EAAqC,KAAK,kBAAkB,EAAwD,MAAM,WAAW,CAAA;AAEpO,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;AAqB9E,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,MAAM,CAAA;AAEhD,oBAAY,qBAAqB;IAChC,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACrB;AAED,oBAAY,uBAAuB;IAClC,UAAU,eAAe;IACzB,SAAS,cAAc;CACvB;AAED,oBAAY,qCAAqC;IAChD,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,QAAQ,aAAa;CACrB;AAED,oBAAY,mBAAmB;IAC9B,KAAK,UAAU;IACf,IAAI,SAAS;IACb,MAAM,WAAW;CACjB;AAED,MAAM,MAAM,yBAAyB,CAAC,KAAK,IAAI;IAC9C,QAAQ,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IAC1B,QAAQ,EAAE,uBAAuB,CAAA;CACjC,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,KAAK,IAAI,yBAAyB,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC,CAAA;AAE/G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,qBACa,QAAQ,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IACtG,MAAM,CAAC,QAAQ,CAAC,SAAS,uBAAqD;IAC9E,MAAM,CAAC,QAAQ,CAAC,oBAAoB,uBAAiE;IACrG,MAAM,CAAC,QAAQ,CAAC,QAAQ,uBAAiF;IACzG,MAAM,CAAC,QAAQ,CAAC,wBAAwB,wBAA8D;IAE7F,QAAQ,CAAC,UAAU,EAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IACnD,QAAQ,CAAC,eAAe,EAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IACxD,QAAQ,CAAC,UAAU,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAC7C,QAAQ,CAAC,gBAAgB,EAAG,eAAe,CAAC,kBAAkB,GAAG,SAAS,CAAC,CAAA;IAC3E,QAAQ,CAAC,aAAa,EAAG,eAAe,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IACtE,QAAQ,CAAC,aAAa,EAAG,eAAe,CAAC,oBAAoB,CAAC,CAAA;IAC9D,QAAQ,CAAC,cAAc,EAAG,eAAe,CAAA;IACzC,QAAQ,CAAC,aAAa,EAAG,eAAe,CAAC,eAAe,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,CAAA;IAC5E,QAAQ,CAAC,cAAc,EAAG,eAAe,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAC9E,QAAQ,CAAC,eAAe,EAAG,eAAe,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAC/E,QAAQ,CAAC,QAAQ,EAAG,eAAe,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IACxE,QAAQ,CAAC,cAAc,EAAG,eAAe,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAC9E,QAAQ,CAAC,cAAc,EAAG,eAAe,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAC9E,QAAQ,CAAC,QAAQ,EAAG,eAAe,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAE5D,IAAI,UAAqB;IAMjD,OAAO,mCAAqC;IAEH,YAAY,UAAQ;IACpB,4BAA4B,UAAQ;IACpD,IAAI,SAAI;IACmJ,UAAU,CAAC,EAAE,kBAAkB,CAAA;IAE1L,OAAO,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAA;IAE/B,aAAa,wBAA6B;IAC3C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAA;IAClB,YAAY,UAAqB;IACzD,aAAa,UAAQ;IACrB,yBAAyB,UAAQ;IAClD,6BAA6B,wCAA8C;IAE3D,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,kBAAkB,CAAA;IAC1D,eAAe,UAAQ;IACxC,uBAAuB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IAC1B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAA;IACvC,cAAc,UAAQ;IACxB,SAAS,CAAC,gBAAgB,UAAqB;IAE9C,yBAAyB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,kBAAkB,CAAA;IACrE,mCAAmC,UAAQ;IAE3C,WAAW,sBAA4B;IAExD,YAAY,EAAE,oBAAoB,GAAG,SAAS,CAAA;IAC7B,eAAe,UAAQ;IACvB,wBAAwB,UAAQ;IAChC,wBAAwB,UAA0C;IAElE,kBAAkB,UAAQ;IACX,SAAS,CAAC,gBAAgB,UAAQ;IAEjD,UAAU,UAAQ;IAQ5C,YAAY,SAAsC;IAQlD,SAAS,SAA2B;IAET,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAuB;IACvD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAU;IAC1B,QAAQ,CAAC,IAAI,EAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAC5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAuB;IAC3C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAA0B;IAC3D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAiB;IAE1E,OAAO,CAAC,IAAI,EAAE,MAAM;IAKpB,gBAAgB,CAAC,IAAI,EAAE,MAAM;IAI7B,aAAa,CAAC,UAAU,CAAC,EAAE,kBAAkB;IAK7C,sBAAsB,CAAC,UAAU,CAAC,EAAE,kBAAkB;IAItD,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,iBAAiB,wCAAqC;IAalF,IAAI,YAAY,YAEf;IAED,SAAS,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC;IAI9E,WAAW,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC;IAIlF,MAAM,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC;IAIxE,YAAY,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC;IAIpF,IAAI,YAAY,YAEf;IAED,IAAI,UAAU,YAGb;IAED,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,SAAS;IAQjD,SAAS,CAAC,IAAI,EAAE,KAAK;IAOrB,IAAI,iBAAiB,YAEpB;IAED,cAAc;IAId,eAAe;IAIf,gBAAgB;IAQhB,IAAI,CAAC,OAAO,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC;IAKrC,MAAM;IAIN,gBAAgB,CAAC,OAAO,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC;IAIjD,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAMhD,gCAAgC;IAMhC,cAAc;IAOd,MAAM,CAAC,IAAI,EAAE,KAAK;IAIlB,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC;IAK3D,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,GAAG,SAAS;IAU1H,sBAAsB,CAAC,GAAG,CAAC,EAAE,oBAAoB;IAKjD,eAAe;IAUf,IAAI,cAAc,YAEjB;IAED,IAAI,eAAe,cAElB;IAED,IAAI,cAAc,cAEjB;IAED,IAAI,UAAU,YAEb;IAED,IAAI,UAAU,YAEb;IAED,IAAI,OAAO,YAIV;IAED,IAAI,OAAO,YAIV;IAED,IAAI,aAAa,YAEhB;IAED,IAAI,uBAAuB,YAE1B;IAED,IAAI,QAAQ,WAgBX;IAED,IAAI,SAAS,YAIZ;IAED,IAAI,UAAU,WAEb;IAED,IAAI,OAAO,WAEV;IAED,IAAI,WAAW,YAEd;IAED,SAAS,CAAC,QAAQ,CAAC,cAAc,iBAK/B;IAEF,SAAS,CAAC,QAAQ,CAAC,6BAA6B,gCAA0C;IAE1F,SAAS,CAAC,QAAQ,CAAC,6BAA6B,uBAAuD;IAEvG,QAAQ,CAAC,eAAe,kBAA4B;IAEpD,QAAQ,CAAC,mBAAmB,qCAAwC;IAEpE,QAAQ,CAAC,uBAAuB,CAAC,EAAE,oBAAoB,CAAA;cAEpC,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;cAoBvD,YAAY,CAAC,KAAK,EAAE,cAAc;IAOrD,WAAoB,MAAM,kCA0JzB;IAED,cAAuB,QAAQ,uBAM9B;IAED,OAAO,KAAK,oBAAoB,GAgB/B;IAED,OAAO,KAAK,mBAAmB,GAO9B;IAED,OAAO,KAAK,iBAAiB,GAU5B;IAED,SAAS,KAAK,uBAAuB,uBAEpC;IAED,SAAS,KAAK,sBAAsB,uBAEnC;IAED,SAAS,KAAK,eAAe,uBAE5B;IAED,SAAS,KAAK,aAAa,6CAE1B;IAED,SAAS,KAAK,WAAW,uBAOxB;IAED,SAAS,KAAK,eAAe,uBAE5B;IAED,SAAS,KAAK,iBAAiB,uBAM9B;IAED,SAAS,KAAK,gBAAgB,uBAiB7B;IAED,SAAS,KAAK,cAAc,uBAI3B;IAED,OAAO,KAAK,YAAY,GAIvB;IAED,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,SAAI;IAerD,OAAO,CAAC,0BAA0B;IAclC,SAAS,KAAK,cAAc,uBAa3B;IAED,IAAI,QAAQ,YAEX;IAED,IAAI,YAAY,uBAMf;IAED,SAAS,KAAK,eAAe,uBAa5B;IAED,SAAS,KAAK,sBAAsB,uBAEnC;IAED,SAAS,KAAK,4BAA4B,uBAEzC;IAED,SAAS,KAAK,kBAAkB,uBAE/B;IAED,SAAS,KAAK,wBAAwB,uBA2BrC;IAED,SAAS,KAAK,sBAAsB,uBAgBnC;IAID,OAAO,CAAC,2BAA2B;IAKnC,QAAQ,CAAC,0BAA0B,KAAI;IACvC,QAAQ,CAAC,4BAA4B,KAAI;IACzC,QAAQ,CAAC,uBAAuB,KAAI;IAEpC,IAAI,aAAa,aAQhB;IAED,IAAI,kBAAkB,uBAErB;IAED,IAAI,oBAAoB,uBAEvB;IAED,IAAI,iBAAiB,aAIpB;IAED,IAAI,eAAe,uBAElB;IAGD,OAAO,CAAC,oBAAoB,CAAI;IAEhC,OAAO,CAAC,YAAY;IAkBpB,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,YAAY;IAI/C,UAAU;IAQV,OAAO,CAAE,gBAAgB;IAuBzB,IAAI,aAAa,YAEhB;IAED,SAAS,KAAK,UAAU,YAyBvB;IAED,IAAI,UAAU,YAOb;IAED,OAAO,KAAK,uBAAuB,GAelC;IAED,OAAO,KAAK,oBAAoB,GA2B/B;IAED,IAAI,cAAc,qCAEjB;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;KAC5C;CACD"}
|
package/dist/DataGrid.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
var DataGrid_1;
|
|
2
2
|
import { __decorate } from "tslib";
|
|
3
|
-
import { property, component, Component, html, css, live, query, ifDefined, event, style, literal, staticHtml, cache, eventOptions, queryAll, repeat } from '@a11d/lit';
|
|
3
|
+
import { property, component, Component, html, css, live, query, ifDefined, event, style, literal, staticHtml, cache, eventOptions, queryAll, repeat, eventListener } from '@a11d/lit';
|
|
4
4
|
import { NotificationComponent } from '@a11d/lit-application';
|
|
5
5
|
import { LocalStorage } from '@a11d/local-storage';
|
|
6
6
|
import { InstanceofAttributeController } from '@3mo/instanceof-attribute-controller';
|
|
@@ -324,7 +324,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
324
324
|
return dynamicPageSize(this.data.length);
|
|
325
325
|
}
|
|
326
326
|
if (this.pagination === 'auto') {
|
|
327
|
-
const rowsHeight = (this.
|
|
327
|
+
const rowsHeight = (this.scroller?.clientHeight ?? 0) - (this.header?.clientHeight ?? 0);
|
|
328
328
|
const rowHeight = this.rowHeight;
|
|
329
329
|
const pageSize = Math.floor(rowsHeight / rowHeight) || 1;
|
|
330
330
|
return dynamicPageSize(pageSize);
|
|
@@ -353,7 +353,10 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
353
353
|
// @ts-expect-error rowIntersectionObserver is initialized once here
|
|
354
354
|
this.rowIntersectionObserver ?? (this.rowIntersectionObserver = new IntersectionObserver(entries => {
|
|
355
355
|
entries.forEach(({ target, isIntersecting }) => {
|
|
356
|
-
|
|
356
|
+
const row = target;
|
|
357
|
+
if (row.isIntersecting === false && isIntersecting === true) {
|
|
358
|
+
row.isIntersecting = true;
|
|
359
|
+
}
|
|
357
360
|
});
|
|
358
361
|
}, {
|
|
359
362
|
root: this.scroller,
|
|
@@ -605,11 +608,11 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
605
608
|
@scroll=${this.handleScroll}
|
|
606
609
|
>
|
|
607
610
|
<mo-grid id='content' autoRows='min-content' columns='var(--mo-data-grid-columns)'>
|
|
608
|
-
${
|
|
609
|
-
${
|
|
611
|
+
${this.headerTemplate}
|
|
612
|
+
${this.contentTemplate}
|
|
610
613
|
</mo-grid>
|
|
611
614
|
</mo-scroller>
|
|
612
|
-
${
|
|
615
|
+
${this.footerTemplate}
|
|
613
616
|
</mo-grid>
|
|
614
617
|
`;
|
|
615
618
|
}
|
|
@@ -629,7 +632,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
629
632
|
.level=${level}
|
|
630
633
|
.dataGrid=${this}
|
|
631
634
|
.data=${data}
|
|
632
|
-
|
|
635
|
+
index=${ifDefined(index)}
|
|
633
636
|
?data-grid-has-details=${this.hasDetails}
|
|
634
637
|
?selected=${live(this.selectedData.includes(data))}
|
|
635
638
|
?detailsOpen=${live(this.openDetailedData.includes(data))}
|
|
@@ -784,6 +787,9 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
784
787
|
}
|
|
785
788
|
}
|
|
786
789
|
}
|
|
790
|
+
handlePointerDown(event) {
|
|
791
|
+
this.rows.forEach(row => row.cells.forEach(cell => cell.handlePointerDown(event)));
|
|
792
|
+
}
|
|
787
793
|
getSorting() {
|
|
788
794
|
return !this.sorting
|
|
789
795
|
? []
|
|
@@ -1052,9 +1058,6 @@ __decorate([
|
|
|
1052
1058
|
__decorate([
|
|
1053
1059
|
query('mo-scroller')
|
|
1054
1060
|
], DataGrid.prototype, "scroller", void 0);
|
|
1055
|
-
__decorate([
|
|
1056
|
-
query('#content')
|
|
1057
|
-
], DataGrid.prototype, "content", void 0);
|
|
1058
1061
|
__decorate([
|
|
1059
1062
|
queryAll('[mo-data-grid-row]')
|
|
1060
1063
|
], DataGrid.prototype, "rows", void 0);
|
|
@@ -1070,6 +1073,9 @@ __decorate([
|
|
|
1070
1073
|
__decorate([
|
|
1071
1074
|
eventOptions({ passive: true })
|
|
1072
1075
|
], DataGrid.prototype, "handleScroll", null);
|
|
1076
|
+
__decorate([
|
|
1077
|
+
eventListener({ target: document, type: 'pointerdown' })
|
|
1078
|
+
], DataGrid.prototype, "handlePointerDown", null);
|
|
1073
1079
|
DataGrid = DataGrid_1 = __decorate([
|
|
1074
1080
|
component('mo-data-grid')
|
|
1075
1081
|
], DataGrid);
|
package/dist/DataGridCell.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { Component, type HTMLTemplateResult } from '@a11d/lit';
|
|
2
|
-
import { FocusController } from '@3mo/focus-controller';
|
|
3
2
|
import { type DataGridColumn, type DataGridRow } from './index.js';
|
|
4
3
|
/**
|
|
5
4
|
* @element mo-data-grid-cell
|
|
@@ -21,10 +20,9 @@ export declare class DataGridCell<TValue extends KeyPathValueOf<TData>, TData =
|
|
|
21
20
|
private get valueTextContent();
|
|
22
21
|
private get isEditable();
|
|
23
22
|
get isEditing(): boolean;
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
protected handleKeyDown(event: KeyboardEvent): Promise<void>;
|
|
23
|
+
handlePointerDown(event: PointerEvent): void;
|
|
24
|
+
handleDoubleClick(event: MouseEvent): void;
|
|
25
|
+
handleKeyDown(event: KeyboardEvent): Promise<void>;
|
|
28
26
|
private focusCell;
|
|
29
27
|
static get styles(): import("@a11d/lit").CSSResult;
|
|
30
28
|
private get tooltip();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridCell.d.ts","sourceRoot":"","sources":["../DataGridCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,
|
|
1
|
+
{"version":3,"file":"DataGridCell.d.ts","sourceRoot":"","sources":["../DataGridCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAA8B,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAGrG,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,iBAAiB,CAAC,KAAK,EAAE,YAAY;IAMrC,iBAAiB,CAAC,KAAK,EAAE,UAAU;IAO7B,aAAa,CAAC,KAAK,EAAE,aAAa;IA2CxC,OAAO,CAAC,SAAS;IAWjB,WAAoB,MAAM,kCAoDzB;IAED,OAAO,KAAK,OAAO,GAAmC;IAEtD,cAAuB,QAAQ,uBAa9B;IAED,OAAO,KAAK,eAAe,GAI1B;IAQD,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
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { component, Component, html, property, css,
|
|
2
|
+
import { component, Component, html, property, css, state } from '@a11d/lit';
|
|
3
3
|
import { NotificationComponent } from '@a11d/lit-application';
|
|
4
4
|
import { Localizer } from '@3mo/localization';
|
|
5
|
-
import { FocusController } from '@3mo/focus-controller';
|
|
6
5
|
import { DataGridEditability } from './index.js';
|
|
7
6
|
Localizer.register('de', {
|
|
8
7
|
'Using the clipboard is not allowed in an insecure browser environment': 'In einer unsicheren Browser-Umgebung darf kein Text in die Zwischenablage kopiert werden',
|
|
@@ -19,7 +18,6 @@ let DataGridCell = class DataGridCell extends Component {
|
|
|
19
18
|
constructor() {
|
|
20
19
|
super(...arguments);
|
|
21
20
|
this.editing = false;
|
|
22
|
-
this.focusController = new FocusController(this);
|
|
23
21
|
}
|
|
24
22
|
get dataGrid() { return this.row.dataGrid; }
|
|
25
23
|
get data() { return this.row.data; }
|
|
@@ -114,6 +112,10 @@ let DataGridCell = class DataGridCell extends Component {
|
|
|
114
112
|
outline: none;
|
|
115
113
|
}
|
|
116
114
|
|
|
115
|
+
:host(:not([isEditing]):focus) {
|
|
116
|
+
outline: 2px solid var(--mo-color-accent);
|
|
117
|
+
}
|
|
118
|
+
|
|
117
119
|
:host([isEditing]) {
|
|
118
120
|
display: grid;
|
|
119
121
|
}
|
|
@@ -167,10 +169,14 @@ let DataGridCell = class DataGridCell extends Component {
|
|
|
167
169
|
}
|
|
168
170
|
get contentTemplate() {
|
|
169
171
|
return html `
|
|
170
|
-
${!this.focusController.focused ? html.nothing : html `<mo-focus-ring inward visible></mo-focus-ring>`}
|
|
171
172
|
${this.column.getContentTemplate?.(this.value, this.data) ?? html `${this.value}`}
|
|
172
173
|
`;
|
|
173
174
|
}
|
|
175
|
+
// Having focus-controller on every cell can lead to performance issues
|
|
176
|
+
// in larger data-grids. Therefore defaulting to CSS native outline for now.
|
|
177
|
+
// protected get focusRingTemplate() {
|
|
178
|
+
// return !this.focusController.focused ? html.nothing : html`<mo-focus-ring inward visible></mo-focus-ring>`
|
|
179
|
+
// }
|
|
174
180
|
get editContentTemplate() {
|
|
175
181
|
return this.column.getEditContentTemplate?.(this.value, this.data);
|
|
176
182
|
}
|
|
@@ -193,15 +199,6 @@ __decorate([
|
|
|
193
199
|
}
|
|
194
200
|
})
|
|
195
201
|
], DataGridCell.prototype, "editing", void 0);
|
|
196
|
-
__decorate([
|
|
197
|
-
eventListener({ target: document, type: 'pointerdown' })
|
|
198
|
-
], DataGridCell.prototype, "handlePointerDown", null);
|
|
199
|
-
__decorate([
|
|
200
|
-
eventListener('dblclick')
|
|
201
|
-
], DataGridCell.prototype, "handleDoubleClick", null);
|
|
202
|
-
__decorate([
|
|
203
|
-
eventListener('keydown')
|
|
204
|
-
], DataGridCell.prototype, "handleKeyDown", null);
|
|
205
202
|
DataGridCell = __decorate([
|
|
206
203
|
component('mo-data-grid-cell')
|
|
207
204
|
], DataGridCell);
|
|
@@ -6009,6 +6009,10 @@
|
|
|
6009
6009
|
"name": "content",
|
|
6010
6010
|
"type": "HTMLElement"
|
|
6011
6011
|
},
|
|
6012
|
+
{
|
|
6013
|
+
"name": "index",
|
|
6014
|
+
"type": "number | undefined"
|
|
6015
|
+
},
|
|
6012
6016
|
{
|
|
6013
6017
|
"name": "level",
|
|
6014
6018
|
"type": "number"
|
|
@@ -6088,6 +6092,10 @@
|
|
|
6088
6092
|
"name": "content",
|
|
6089
6093
|
"type": "HTMLElement"
|
|
6090
6094
|
},
|
|
6095
|
+
{
|
|
6096
|
+
"name": "index",
|
|
6097
|
+
"type": "number | undefined"
|
|
6098
|
+
},
|
|
6091
6099
|
{
|
|
6092
6100
|
"name": "level",
|
|
6093
6101
|
"type": "number"
|
|
@@ -6133,11 +6141,20 @@
|
|
|
6133
6141
|
"name": "mo-data-grid-default-row",
|
|
6134
6142
|
"path": ".\\packages\\DataGrid\\rows\\DataGridDefaultRow.ts",
|
|
6135
6143
|
"attributes": [
|
|
6144
|
+
{
|
|
6145
|
+
"name": "index",
|
|
6146
|
+
"type": "number | undefined"
|
|
6147
|
+
},
|
|
6136
6148
|
{
|
|
6137
6149
|
"name": "level",
|
|
6138
6150
|
"type": "number",
|
|
6139
6151
|
"default": "0"
|
|
6140
6152
|
},
|
|
6153
|
+
{
|
|
6154
|
+
"name": "isIntersecting",
|
|
6155
|
+
"type": "boolean",
|
|
6156
|
+
"default": "false"
|
|
6157
|
+
},
|
|
6141
6158
|
{
|
|
6142
6159
|
"name": "dataGrid",
|
|
6143
6160
|
"type": "DataGrid<TData, TDetailsElement>"
|
|
@@ -6174,6 +6191,11 @@
|
|
|
6174
6191
|
"name": "content",
|
|
6175
6192
|
"type": "HTMLElement"
|
|
6176
6193
|
},
|
|
6194
|
+
{
|
|
6195
|
+
"name": "index",
|
|
6196
|
+
"attribute": "index",
|
|
6197
|
+
"type": "number | undefined"
|
|
6198
|
+
},
|
|
6177
6199
|
{
|
|
6178
6200
|
"name": "level",
|
|
6179
6201
|
"attribute": "level",
|
|
@@ -6182,6 +6204,7 @@
|
|
|
6182
6204
|
},
|
|
6183
6205
|
{
|
|
6184
6206
|
"name": "isIntersecting",
|
|
6207
|
+
"attribute": "isIntersecting",
|
|
6185
6208
|
"type": "boolean",
|
|
6186
6209
|
"default": "false"
|
|
6187
6210
|
},
|
|
@@ -6228,11 +6251,20 @@
|
|
|
6228
6251
|
"name": "mo-data-grid-row",
|
|
6229
6252
|
"path": ".\\packages\\DataGrid\\rows\\DataGridRow.ts",
|
|
6230
6253
|
"attributes": [
|
|
6254
|
+
{
|
|
6255
|
+
"name": "index",
|
|
6256
|
+
"type": "number | undefined"
|
|
6257
|
+
},
|
|
6231
6258
|
{
|
|
6232
6259
|
"name": "level",
|
|
6233
6260
|
"type": "number",
|
|
6234
6261
|
"default": "0"
|
|
6235
6262
|
},
|
|
6263
|
+
{
|
|
6264
|
+
"name": "isIntersecting",
|
|
6265
|
+
"type": "boolean",
|
|
6266
|
+
"default": "false"
|
|
6267
|
+
},
|
|
6236
6268
|
{
|
|
6237
6269
|
"name": "dataGrid",
|
|
6238
6270
|
"type": "DataGrid<TData, TDetailsElement>"
|
|
@@ -6269,6 +6301,11 @@
|
|
|
6269
6301
|
"name": "content",
|
|
6270
6302
|
"type": "HTMLElement"
|
|
6271
6303
|
},
|
|
6304
|
+
{
|
|
6305
|
+
"name": "index",
|
|
6306
|
+
"attribute": "index",
|
|
6307
|
+
"type": "number | undefined"
|
|
6308
|
+
},
|
|
6272
6309
|
{
|
|
6273
6310
|
"name": "level",
|
|
6274
6311
|
"attribute": "level",
|
|
@@ -6277,6 +6314,7 @@
|
|
|
6277
6314
|
},
|
|
6278
6315
|
{
|
|
6279
6316
|
"name": "isIntersecting",
|
|
6317
|
+
"attribute": "isIntersecting",
|
|
6280
6318
|
"type": "boolean",
|
|
6281
6319
|
"default": "false"
|
|
6282
6320
|
},
|
|
@@ -17,11 +17,13 @@ export declare abstract class DataGridRow<TData, TDetailsElement extends Element
|
|
|
17
17
|
dataGrid: DataGrid<TData, TDetailsElement>;
|
|
18
18
|
data: TData;
|
|
19
19
|
selected: boolean;
|
|
20
|
+
index?: number;
|
|
20
21
|
detailsOpen: boolean;
|
|
21
22
|
level: number;
|
|
22
23
|
isIntersecting: boolean;
|
|
23
24
|
get detailsElement(): TDetailsElement | undefined;
|
|
24
25
|
getCell(column: DataGridColumn<TData, any>): DataGridCell<any, TData, TDetailsElement> | undefined;
|
|
26
|
+
connected(): void;
|
|
25
27
|
protected initialized(): void;
|
|
26
28
|
protected disconnected(): void;
|
|
27
29
|
updated(...parameters: Parameters<Component['updated']>): void;
|
|
@@ -32,6 +34,7 @@ export declare abstract class DataGridRow<TData, TDetailsElement extends Element
|
|
|
32
34
|
protected get detailsExpanderTemplate(): HTMLTemplateResult;
|
|
33
35
|
protected get selectionTemplate(): HTMLTemplateResult;
|
|
34
36
|
protected getCellTemplate(column: DataGridColumn<TData, KeyPathValueOf<TData, KeyPathOf<TData>>>): HTMLTemplateResult;
|
|
37
|
+
private readonly delegateToCell;
|
|
35
38
|
protected get fillerTemplate(): HTMLTemplateResult;
|
|
36
39
|
protected get contextMenuIconButtonTemplate(): HTMLTemplateResult;
|
|
37
40
|
protected get detailsTemplate(): HTMLTemplateResult;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAgC,KAAK,kBAAkB,
|
|
1
|
+
{"version":3,"file":"DataGridRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAgC,KAAK,kBAAkB,EAAqB,MAAM,WAAW,CAAA;AAG9H,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAyD,MAAM,aAAa,CAAA;AAErH;;;;;;;GAOG;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;IACjE,QAAQ,CAAC,OAAO,EAAG,WAAW,CAAA;IAE9B,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAC3C,IAAI,EAAG,KAAK,CAAA;IACI,QAAQ,UAAQ;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IAavC,WAAW,UAAQ;IAOnB,KAAK,SAAI;IAST,cAAc,UAAQ;IAEzB,IAAI,cAAc,gCAEjB;IAED,OAAO,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC;IAIjC,SAAS;cAOC,WAAW;cAOX,YAAY;IAItB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAShE,SAAS,KAAK,UAAU,YAEvB;IAED,WAAoB,MAAM,kCA+FzB;IAED,cAAuB,QAAQ,uBAgB9B;IAED,SAAS,CAAC,QAAQ,KAAK,WAAW,IAAI,kBAAkB,CAAA;IAExD,SAAS,KAAK,uBAAuB,uBAgBpC;IAED,SAAS,KAAK,iBAAiB,uBAe9B;IAED,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAYhG,OAAO,CAAC,QAAQ,CAAC,cAAc,CAG9B;IAED,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;IAgB1C,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
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { css, property, Component, html, query, queryAll, style, LitElement, event
|
|
2
|
+
import { css, property, Component, html, query, queryAll, style, LitElement, event } from '@a11d/lit';
|
|
3
3
|
import { popover } from '@3mo/popover';
|
|
4
4
|
import { ContextMenu } from '@3mo/context-menu';
|
|
5
5
|
import { DataGridPrimaryContextMenuItem, DataGridSelectionMode } from '../index.js';
|
|
@@ -18,6 +18,10 @@ export class DataGridRow extends Component {
|
|
|
18
18
|
this.detailsOpen = false;
|
|
19
19
|
this.level = 0;
|
|
20
20
|
this.isIntersecting = false;
|
|
21
|
+
this.delegateToCell = (method) => (e) => {
|
|
22
|
+
const target = e.target;
|
|
23
|
+
target?.[method]?.(e);
|
|
24
|
+
};
|
|
21
25
|
}
|
|
22
26
|
get detailsElement() {
|
|
23
27
|
return this.renderRoot.querySelector('#detailsContainer')?.firstElementChild;
|
|
@@ -25,9 +29,17 @@ export class DataGridRow extends Component {
|
|
|
25
29
|
getCell(column) {
|
|
26
30
|
return this.cells.find(cell => cell.column === column);
|
|
27
31
|
}
|
|
32
|
+
connected() {
|
|
33
|
+
this.toggleAttribute('data-has-alternating-background', this.dataGrid.hasAlternatingBackground && (this.index ?? 0) % 2 === 1);
|
|
34
|
+
if ((this.index ?? 0) < 25) {
|
|
35
|
+
this.isIntersecting = true;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
28
38
|
initialized() {
|
|
29
39
|
this.toggleAttribute('mo-data-grid-row', true);
|
|
30
|
-
|
|
40
|
+
if (this.isIntersecting === false) {
|
|
41
|
+
this.dataGrid.rowIntersectionObserver?.observe(this);
|
|
42
|
+
}
|
|
31
43
|
}
|
|
32
44
|
disconnected() {
|
|
33
45
|
this.dataGrid.rowIntersectionObserver?.unobserve?.(this);
|
|
@@ -195,6 +207,8 @@ export class DataGridRow extends Component {
|
|
|
195
207
|
.row=${this}
|
|
196
208
|
.column=${column}
|
|
197
209
|
.value=${getValueByKeyPath(this.data, column.dataSelector)}
|
|
210
|
+
@keydown=${this.delegateToCell('handleKeyDown')}
|
|
211
|
+
@dblclick=${this.delegateToCell('handleDoubleClick')}
|
|
198
212
|
></mo-data-grid-cell>
|
|
199
213
|
`;
|
|
200
214
|
}
|
|
@@ -306,6 +320,9 @@ __decorate([
|
|
|
306
320
|
__decorate([
|
|
307
321
|
property({ type: Boolean, reflect: true })
|
|
308
322
|
], DataGridRow.prototype, "selected", void 0);
|
|
323
|
+
__decorate([
|
|
324
|
+
property({ type: Number })
|
|
325
|
+
], DataGridRow.prototype, "index", void 0);
|
|
309
326
|
__decorate([
|
|
310
327
|
property({
|
|
311
328
|
type: Boolean,
|
|
@@ -331,5 +348,12 @@ __decorate([
|
|
|
331
348
|
})
|
|
332
349
|
], DataGridRow.prototype, "level", void 0);
|
|
333
350
|
__decorate([
|
|
334
|
-
|
|
351
|
+
property({
|
|
352
|
+
type: Boolean,
|
|
353
|
+
updated() {
|
|
354
|
+
if (this.isIntersecting) {
|
|
355
|
+
this.dataGrid.rowIntersectionObserver?.unobserve?.(this);
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
})
|
|
335
359
|
], DataGridRow.prototype, "isIntersecting", void 0);
|