@3mo/data-grid 0.8.5-rc.9 → 0.8.5
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 -5
- package/dist/DataGrid.d.ts.map +1 -1
- package/dist/DataGrid.js +55 -149
- package/dist/DataGridCell.d.ts.map +1 -1
- package/dist/DataGridCell.js +3 -5
- package/dist/DataGridFooter.js +2 -2
- package/dist/DataGridHeader.d.ts +1 -4
- package/dist/DataGridHeader.d.ts.map +1 -1
- package/dist/DataGridHeader.js +52 -103
- package/dist/DataGridHeaderSeparator.d.ts.map +1 -1
- package/dist/DataGridHeaderSeparator.js +3 -17
- package/dist/columns/DataGridColumnComponent.d.ts.map +1 -1
- package/dist/columns/DataGridColumnComponent.js +2 -8
- package/dist/custom-elements.json +5054 -20
- package/dist/rows/DataGridDefaultRow.d.ts.map +1 -1
- package/dist/rows/DataGridDefaultRow.js +11 -16
- package/dist/rows/DataGridRow.d.ts +3 -5
- package/dist/rows/DataGridRow.d.ts.map +1 -1
- package/dist/rows/DataGridRow.js +29 -84
- 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 DataGridColumn, type DataGridCell, type
|
|
7
|
+
import { DataGridSidePanelTab, type DataGridColumn, 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 {
|
|
@@ -146,7 +146,7 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
|
|
|
146
146
|
cellFontSize: number;
|
|
147
147
|
rowHeight: number;
|
|
148
148
|
get rows(): Array<DataGridRow<TData, TDetailsElement>>;
|
|
149
|
-
readonly header
|
|
149
|
+
private readonly header?;
|
|
150
150
|
private readonly content?;
|
|
151
151
|
private readonly footer?;
|
|
152
152
|
private readonly sidePanel?;
|
|
@@ -157,7 +157,6 @@ 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;
|
|
161
160
|
selectAll(...parameters: Parameters<typeof this.selectionController.selectAll>): void;
|
|
162
161
|
deselectAll(...parameters: Parameters<typeof this.selectionController.deselectAll>): void;
|
|
163
162
|
select(...parameters: Parameters<typeof this.selectionController.select>): void;
|
|
@@ -218,10 +217,8 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
|
|
|
218
217
|
protected get headerTemplate(): HTMLTemplateResult;
|
|
219
218
|
private get shallVirtualize();
|
|
220
219
|
private get rowsTemplate();
|
|
221
|
-
private get fallbackContextMenuTemplate();
|
|
222
220
|
getRowTemplate(data: TData, index?: number, level?: number): import("lit-html").TemplateResult;
|
|
223
221
|
private handleRowDetailsOpenChange;
|
|
224
|
-
private updateContextMenuFallbackIfNeeded;
|
|
225
222
|
protected get footerTemplate(): HTMLTemplateResult;
|
|
226
223
|
get sumsData(): TData[];
|
|
227
224
|
get sumsTemplate(): 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;
|
|
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;AAEhE,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;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;IACtG,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,uBAAuB,EAAE,MAAM,CAAK;IAErD,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,uBAAuB,SAAmC;IAC1D,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;IAEvC,IAAI,IAAI,IAAI,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAKrD;IAE6B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAuB;IAC1D,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAa;IAC3B,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;cAEjD,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;cAQvD,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,eAAe,GAE1B;IAED,OAAO,KAAK,YAAY,GAQvB;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;IAChC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAe5B;IAED,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
|
@@ -10,11 +10,8 @@ import { ThemeController } from '@3mo/theme';
|
|
|
10
10
|
import { observeMutation } from '@3mo/mutation-observer';
|
|
11
11
|
import { MediaQueryController } from '@3mo/media-query-observer';
|
|
12
12
|
import { Localizer } from '@3mo/localization';
|
|
13
|
-
import { ContextMenu } from '@3mo/context-menu';
|
|
14
13
|
import { CsvGenerator, DataGridColumnComponent, DataGridSidePanelTab } from './index.js';
|
|
15
14
|
import { DataGridSelectionController } from './DataGridSelectionController.js';
|
|
16
|
-
import * as System from 'detect-browser';
|
|
17
|
-
import { observeResize } from '@3mo/resize-observer';
|
|
18
15
|
Localizer.register('en', {
|
|
19
16
|
'${count:pluralityNumber} entries selected': [
|
|
20
17
|
'1 entry selected',
|
|
@@ -154,9 +151,6 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
154
151
|
this.smallScreenObserverController = new MediaQueryController(this, '(max-width: 768px)');
|
|
155
152
|
this.themeController = new ThemeController(this);
|
|
156
153
|
this.selectionController = new DataGridSelectionController(this);
|
|
157
|
-
this.updateContextMenuFallbackIfNeeded = () => {
|
|
158
|
-
requestAnimationFrame(() => !this.isUsingSubgrid && this.requestUpdate());
|
|
159
|
-
};
|
|
160
154
|
this.detailsColumnWidthInPixels = 0;
|
|
161
155
|
this.selectionColumnWidthInPixels = 0;
|
|
162
156
|
this.moreColumnWidthInPixels = 0;
|
|
@@ -213,9 +207,6 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
213
207
|
get hasSelection() {
|
|
214
208
|
return this.selectionController.hasSelection;
|
|
215
209
|
}
|
|
216
|
-
get isUsingSubgrid() {
|
|
217
|
-
return System.detect()?.name !== 'safari' && System.detect()?.os !== 'iOS';
|
|
218
|
-
}
|
|
219
210
|
selectAll(...parameters) {
|
|
220
211
|
return this.selectionController.selectAll(...parameters);
|
|
221
212
|
}
|
|
@@ -262,7 +253,6 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
262
253
|
else {
|
|
263
254
|
this.openRowDetails();
|
|
264
255
|
}
|
|
265
|
-
this.updateContextMenuFallbackIfNeeded();
|
|
266
256
|
}
|
|
267
257
|
sort(sorting) {
|
|
268
258
|
this.sorting = sorting;
|
|
@@ -424,11 +414,13 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
424
414
|
}
|
|
425
415
|
|
|
426
416
|
:host([preventVerticalContentScroll]) mo-scroller {
|
|
427
|
-
|
|
428
|
-
|
|
417
|
+
mo-scroller {
|
|
418
|
+
overflow-y: hidden;
|
|
419
|
+
}
|
|
429
420
|
|
|
430
|
-
|
|
431
|
-
|
|
421
|
+
mo-scroller::part(container) {
|
|
422
|
+
position: relative;
|
|
423
|
+
}
|
|
432
424
|
}
|
|
433
425
|
|
|
434
426
|
:host(:not([selectionMode="none"])) {
|
|
@@ -441,9 +433,6 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
441
433
|
|
|
442
434
|
#content {
|
|
443
435
|
width: fit-content;
|
|
444
|
-
}
|
|
445
|
-
|
|
446
|
-
:host([subgrid]) #content {
|
|
447
436
|
min-width: 100%;
|
|
448
437
|
height: min-content;
|
|
449
438
|
min-height: 100%;
|
|
@@ -452,36 +441,11 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
452
441
|
#toolbar {
|
|
453
442
|
position: relative;
|
|
454
443
|
padding: var(--mo-data-grid-toolbar-padding);
|
|
455
|
-
}
|
|
456
|
-
|
|
457
|
-
#toolbar mo-icon-button {
|
|
458
|
-
align-self: flex-start;
|
|
459
|
-
color: var(--mo-color-gray);
|
|
460
|
-
}
|
|
461
444
|
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
.contextMenu[opened] {
|
|
468
|
-
background-color: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-accent));
|
|
469
|
-
}
|
|
470
|
-
|
|
471
|
-
.contextMenu[opened] .contextMenuIconButton {
|
|
472
|
-
color: var(--mo-color-foreground);
|
|
473
|
-
opacity: 1;
|
|
474
|
-
}
|
|
475
|
-
|
|
476
|
-
.contextMenu:not([opened]):hover .contextMenuIconButton {
|
|
477
|
-
color: var(--mo-color-accent);
|
|
478
|
-
opacity: 1;
|
|
479
|
-
}
|
|
480
|
-
|
|
481
|
-
.contextMenuIconButton {
|
|
482
|
-
transition: 250ms;
|
|
483
|
-
opacity: 0.5;
|
|
484
|
-
color: var(--mo-color-gray);
|
|
445
|
+
mo-icon-button {
|
|
446
|
+
align-self: flex-start;
|
|
447
|
+
color: var(--mo-color-gray);
|
|
448
|
+
}
|
|
485
449
|
}
|
|
486
450
|
|
|
487
451
|
#flexSelectionToolbar {
|
|
@@ -490,31 +454,36 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
490
454
|
inset: 0px;
|
|
491
455
|
width: 100%;
|
|
492
456
|
height: 100%;
|
|
493
|
-
z-index:
|
|
494
|
-
}
|
|
457
|
+
z-index: 5;
|
|
495
458
|
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
459
|
+
& > mo-flex {
|
|
460
|
+
background: var(--mo-data-grid-selection-background);
|
|
461
|
+
height: 100%;
|
|
462
|
+
align-items: center;
|
|
463
|
+
}
|
|
501
464
|
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
465
|
+
mo-icon-button {
|
|
466
|
+
align-self: center;
|
|
467
|
+
color: var(--mo-color-foreground);
|
|
468
|
+
}
|
|
505
469
|
}
|
|
506
470
|
|
|
507
|
-
|
|
508
|
-
align-items: center;
|
|
509
|
-
justify-content: center;
|
|
510
|
-
padding-inline: 14px 6px;
|
|
511
|
-
margin: 6px 0;
|
|
512
|
-
cursor: pointer;
|
|
513
|
-
background: var(--mo-color-accent-transparent);
|
|
471
|
+
mo-popover-container {
|
|
514
472
|
height: calc(100% - calc(2 * 6px));
|
|
515
473
|
max-height: 45px;
|
|
474
|
+
margin: 6px 0;
|
|
475
|
+
|
|
476
|
+
#flexActions {
|
|
477
|
+
align-items: center;
|
|
478
|
+
justify-content: center;
|
|
479
|
+
padding-inline: 14px 6px;
|
|
480
|
+
cursor: pointer;
|
|
481
|
+
background: var(--mo-color-accent-transparent);
|
|
482
|
+
height: 100%;
|
|
483
|
+
}
|
|
516
484
|
}
|
|
517
485
|
|
|
486
|
+
|
|
518
487
|
#fab {
|
|
519
488
|
position: absolute;
|
|
520
489
|
inset-inline-end: 16px;
|
|
@@ -555,15 +524,15 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
555
524
|
position: relative;
|
|
556
525
|
height: 100%;
|
|
557
526
|
width: 100%;
|
|
558
|
-
}
|
|
559
527
|
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
528
|
+
mo-data-grid-side-panel {
|
|
529
|
+
position: absolute;
|
|
530
|
+
inset: 0;
|
|
531
|
+
width: 100%;
|
|
532
|
+
height: 100%;
|
|
533
|
+
z-index: 1;
|
|
534
|
+
background-color: var(--mo-color-surface);
|
|
535
|
+
}
|
|
567
536
|
}
|
|
568
537
|
`;
|
|
569
538
|
}
|
|
@@ -643,22 +612,6 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
643
612
|
get dataGridTemplate() {
|
|
644
613
|
this.provideCssColumnsProperties();
|
|
645
614
|
this.toggleAttribute('hasDetails', this.hasDetails);
|
|
646
|
-
this.toggleAttribute('subgrid', this.isUsingSubgrid);
|
|
647
|
-
if (!this.isUsingSubgrid) {
|
|
648
|
-
return html `
|
|
649
|
-
<mo-flex ${style({ flexGrow: '1', position: 'relative' })}>
|
|
650
|
-
<mo-grid rows='* auto' ${style({ flexGrow: '1' })}>
|
|
651
|
-
<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)))' })}>
|
|
652
|
-
<mo-grid ${style({ height: '100%' })} rows='auto *'>
|
|
653
|
-
${this.headerTemplate}
|
|
654
|
-
${this.contentTemplate}
|
|
655
|
-
</mo-grid>
|
|
656
|
-
</mo-scroller>
|
|
657
|
-
${this.footerTemplate}
|
|
658
|
-
</mo-grid>
|
|
659
|
-
</mo-flex>
|
|
660
|
-
`;
|
|
661
|
-
}
|
|
662
615
|
return html `
|
|
663
616
|
<mo-grid rows='* auto' ${style({ position: 'relative', height: '100%' })}>
|
|
664
617
|
<mo-scroller
|
|
@@ -684,64 +637,11 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
684
637
|
}
|
|
685
638
|
get rowsTemplate() {
|
|
686
639
|
const getRowTemplate = (data, index) => this.getRowTemplate(data, index);
|
|
687
|
-
const content =
|
|
640
|
+
const content = this.shallVirtualize === false
|
|
688
641
|
? this.renderData.map(getRowTemplate)
|
|
689
|
-
: html
|
|
690
|
-
<mo-virtualized-scroller exportparts='row'
|
|
691
|
-
.items=${this.renderData}
|
|
692
|
-
.getItemTemplate=${getRowTemplate}
|
|
693
|
-
></mo-virtualized-scroller>
|
|
694
|
-
`;
|
|
695
|
-
return this.isUsingSubgrid ? html `${content}` : html `
|
|
696
|
-
<mo-flex direction='horizontal'>
|
|
697
|
-
<mo-scroller
|
|
698
|
-
${style({ flexGrow: '1', gridRow: '2', gridColumn: '1 / last-line', overflow: 'hidden' })}
|
|
699
|
-
${observeResize(() => this.requestUpdate())}
|
|
700
|
-
@scroll=${this.handleScroll}
|
|
701
|
-
>
|
|
702
|
-
${content}
|
|
703
|
-
</mo-scroller>
|
|
704
|
-
${this.fallbackContextMenuTemplate}
|
|
705
|
-
</mo-flex>
|
|
706
|
-
`;
|
|
707
|
-
}
|
|
708
|
-
get fallbackContextMenuTemplate() {
|
|
709
|
-
if (!this.hasContextMenu) {
|
|
710
|
-
return html.nothing;
|
|
711
|
-
}
|
|
712
|
-
const flattenedData = this.renderData.map((root, i) => [
|
|
713
|
-
{ ...root, outer: i },
|
|
714
|
-
...(this.getSubData(root) ?? []).map((node, j) => ({ ...node, outer: i, nested: j })),
|
|
715
|
-
]).flat();
|
|
642
|
+
: html `<mo-virtualized-scroller .items=${this.renderData} .getItemTemplate=${getRowTemplate} exportparts='row'></mo-virtualized-scroller>`;
|
|
716
643
|
return html `
|
|
717
|
-
|
|
718
|
-
${flattenedData.map((node) => {
|
|
719
|
-
const { outer, nested } = node;
|
|
720
|
-
let rowNode = this.rows[outer];
|
|
721
|
-
if (nested !== undefined) {
|
|
722
|
-
rowNode = rowNode?.subRows[nested];
|
|
723
|
-
}
|
|
724
|
-
if (!rowNode) {
|
|
725
|
-
return html.nothing;
|
|
726
|
-
}
|
|
727
|
-
const rowKey = `${outer}-${nested ?? -1}`;
|
|
728
|
-
const onClick = (e) => {
|
|
729
|
-
if (rowNode.contextMenuOpen) {
|
|
730
|
-
return;
|
|
731
|
-
}
|
|
732
|
-
const contextMenuIconNode = this.shadowRoot?.querySelector(`[data-row-key="${rowKey}"]`);
|
|
733
|
-
contextMenuIconNode.setAttribute('opened', '');
|
|
734
|
-
rowNode.openContextMenu.call(rowNode, e, () => {
|
|
735
|
-
contextMenuIconNode.removeAttribute('opened');
|
|
736
|
-
});
|
|
737
|
-
};
|
|
738
|
-
return html `
|
|
739
|
-
<mo-flex data-row-key=${rowKey} class='contextMenu' alignItems='center' justifyContent='center'>
|
|
740
|
-
<mo-icon-button dense class='contextMenuIconButton' icon='more_vert' @click=${onClick}></mo-icon-button>
|
|
741
|
-
</mo-flex>
|
|
742
|
-
`;
|
|
743
|
-
})}
|
|
744
|
-
</mo-flex>
|
|
644
|
+
${content}
|
|
745
645
|
`;
|
|
746
646
|
}
|
|
747
647
|
getRowTemplate(data, index, level = 0) {
|
|
@@ -768,7 +668,6 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
768
668
|
this.openDetailedData = open
|
|
769
669
|
? [...this.openDetailedData, data]
|
|
770
670
|
: this.openDetailedData.filter(d => d !== data);
|
|
771
|
-
this.updateContextMenuFallbackIfNeeded();
|
|
772
671
|
}
|
|
773
672
|
get footerTemplate() {
|
|
774
673
|
return html `
|
|
@@ -825,10 +724,16 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
825
724
|
${t('${count:pluralityNumber} entries selected', { count: this.selectedData.length })}
|
|
826
725
|
</div>
|
|
827
726
|
${!this.getRowContextMenuTemplate ? html.nothing : html `
|
|
828
|
-
<mo-
|
|
829
|
-
<
|
|
830
|
-
|
|
831
|
-
|
|
727
|
+
<mo-popover-container fixed>
|
|
728
|
+
<mo-flex id='flexActions' direction='horizontal'>
|
|
729
|
+
<div ${style({ flex: '1' })}>${t('Options')}</div>
|
|
730
|
+
<mo-icon-button dense icon='arrow_drop_down' ${style({ display: 'flex', alignItems: 'center', justifyContent: 'center' })}></mo-icon-button>
|
|
731
|
+
</mo-flex>
|
|
732
|
+
|
|
733
|
+
<mo-menu slot='popover'>
|
|
734
|
+
${this.getRowContextMenuTemplate?.(this.selectedData) ?? html.nothing}
|
|
735
|
+
</mo-menu>
|
|
736
|
+
</mo-popover-container>
|
|
832
737
|
`}
|
|
833
738
|
<div ${style({ flex: '1' })}></div>
|
|
834
739
|
<mo-icon-button icon='close'
|
|
@@ -867,7 +772,8 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
867
772
|
this.detailsColumnWidth,
|
|
868
773
|
this.selectionColumnWidth,
|
|
869
774
|
...this.dataColumnsWidths,
|
|
870
|
-
'1fr'
|
|
775
|
+
'1fr',
|
|
776
|
+
this.moreColumnWidth
|
|
871
777
|
].filter((c) => c !== undefined);
|
|
872
778
|
}
|
|
873
779
|
get detailsColumnWidth() {
|
|
@@ -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,uBAa9B;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,11 +164,9 @@ let DataGridCell = class DataGridCell extends Component {
|
|
|
164
164
|
else {
|
|
165
165
|
this.setAttribute('tabindex', '-1');
|
|
166
166
|
}
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
this.style.insetInline = this.column.stickyColumnInsetInline;
|
|
171
|
-
}
|
|
167
|
+
this.toggleAttribute('sticky', this.column.sticky !== undefined);
|
|
168
|
+
this.toggleAttribute('sticking', this.column.intersecting === false);
|
|
169
|
+
this.style.insetInline = this.column.stickyColumnInsetInline;
|
|
172
170
|
return this.isEditing ? this.editContentTemplate : this.contentTemplate;
|
|
173
171
|
}
|
|
174
172
|
get contentTemplate() {
|
package/dist/DataGridFooter.js
CHANGED
|
@@ -174,7 +174,7 @@ __decorate([
|
|
|
174
174
|
async updated(value) {
|
|
175
175
|
if (value === true) {
|
|
176
176
|
await this.updateComplete;
|
|
177
|
-
await new Promise(
|
|
177
|
+
await new Promise(r => requestAnimationFrame(r));
|
|
178
178
|
this.pageNumberField.focus();
|
|
179
179
|
this.pageNumberField.select();
|
|
180
180
|
}
|
|
@@ -186,7 +186,7 @@ __decorate([
|
|
|
186
186
|
async updated(value) {
|
|
187
187
|
if (value === true) {
|
|
188
188
|
await this.updateComplete;
|
|
189
|
-
await new Promise(
|
|
189
|
+
await new Promise(r => requestAnimationFrame(r));
|
|
190
190
|
this.pageSizeSelectField.focus();
|
|
191
191
|
this.pageSizeSelectField.open = true;
|
|
192
192
|
}
|
package/dist/DataGridHeader.d.ts
CHANGED
|
@@ -1,19 +1,16 @@
|
|
|
1
1
|
import { Component } from '@a11d/lit';
|
|
2
|
-
import { DataGrid } from './index.js';
|
|
2
|
+
import { type DataGrid } from './index.js';
|
|
3
3
|
export declare class DataGridHeader<TData> extends Component {
|
|
4
4
|
readonly pageChange: EventDispatcher<number>;
|
|
5
5
|
readonly modeSelectionChange: EventDispatcher<string>;
|
|
6
6
|
dataGrid: DataGrid<TData, any>;
|
|
7
7
|
selection: CheckboxSelection;
|
|
8
8
|
overlayOpen: boolean;
|
|
9
|
-
readonly cells: Array<HTMLElement>;
|
|
10
9
|
protected connected(): void;
|
|
11
10
|
protected disconnected(): void;
|
|
12
11
|
private readonly handleDataGridDataChange;
|
|
13
12
|
private readonly handleDataGridSelectionChange;
|
|
14
13
|
static get styles(): import("@a11d/lit").CSSResult;
|
|
15
|
-
private get skeletonColumns();
|
|
16
|
-
private get separatorAdjustedColumns();
|
|
17
14
|
protected get template(): import("lit-html").HTMLTemplateResult;
|
|
18
15
|
private get detailsExpanderTemplate();
|
|
19
16
|
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,EAAgD,MAAM,WAAW,CAAA;AAK9F,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;cAKT,YAAY;IAK/B,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAExC;IAED,OAAO,CAAC,QAAQ,CAAC,6BAA6B,CAQ7C;IAED,WAAoB,MAAM,kCAuFzB;IAED,cAAuB,QAAQ,0CAQ9B;IAED,OAAO,KAAK,uBAAuB,GAYlC;IAED,OAAO,KAAK,iBAAiB,GAQ5B;IAED,OAAO,KAAK,eAAe,GAI1B;IAED,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAqCrC;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"}
|