@3mo/data-grid 0.8.7-rc.0 → 0.8.7
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 -2
- package/dist/DataGrid.d.ts.map +1 -1
- package/dist/DataGrid.js +71 -101
- package/dist/DataGridCell.d.ts.map +1 -1
- package/dist/DataGridCell.js +4 -10
- package/dist/DataGridFooter.js +2 -2
- package/dist/DataGridHeader.d.ts +0 -2
- package/dist/DataGridHeader.d.ts.map +1 -1
- package/dist/DataGridHeader.js +53 -97
- package/dist/DataGridHeaderSeparator.d.ts.map +1 -1
- package/dist/DataGridHeaderSeparator.js +2 -13
- package/dist/DataGridPrimaryContextMenuItem.js +5 -5
- package/dist/columns/DataGridColumnComponent.d.ts.map +1 -1
- package/dist/columns/DataGridColumnComponent.js +2 -8
- package/dist/columns/number/DataGridFooterSum.js +20 -20
- package/dist/custom-elements.json +5054 -12
- package/dist/excel.svg.js +47 -47
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/rows/DataGridDefaultRow.d.ts.map +1 -1
- package/dist/rows/DataGridDefaultRow.js +10 -18
- package/dist/rows/DataGridRow.d.ts +2 -4
- package/dist/rows/DataGridRow.d.ts.map +1 -1
- package/dist/rows/DataGridRow.js +28 -83
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -1
package/dist/DataGrid.d.ts
CHANGED
|
@@ -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;
|
|
@@ -239,7 +238,7 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
|
|
|
239
238
|
get dataColumnsWidths(): string[];
|
|
240
239
|
get moreColumnWidth(): string | undefined;
|
|
241
240
|
private lastScrollElementTop;
|
|
242
|
-
private
|
|
241
|
+
private handleScroll;
|
|
243
242
|
getSorting(): DataGridSortingDefinition<TData>[];
|
|
244
243
|
private getFlattenedData;
|
|
245
244
|
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,EAAuB,MAAM,WAAW,CAAA;AAEnM,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;IAEhC,OAAO,CAAC,YAAY;IAiBpB,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 } from '@a11d/lit';
|
|
3
|
+
import { property, component, Component, html, css, live, query, ifDefined, event, style, literal, staticHtml, cache, eventOptions } 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';
|
|
@@ -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',
|
|
@@ -159,21 +156,6 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
159
156
|
this.moreColumnWidthInPixels = 0;
|
|
160
157
|
// eslint-disable-next-line @typescript-eslint/member-ordering
|
|
161
158
|
this.lastScrollElementTop = 0;
|
|
162
|
-
this.handleScroll = (e) => {
|
|
163
|
-
if (this.preventFabCollapse === false) {
|
|
164
|
-
if (!e.composed) {
|
|
165
|
-
e.preventDefault();
|
|
166
|
-
e.target?.dispatchEvent(new Event('scroll', { composed: true, bubbles: true }));
|
|
167
|
-
if (this.hasFabs) {
|
|
168
|
-
const targetElement = e.composedPath()[0];
|
|
169
|
-
const scrollTop = targetElement.scrollTop;
|
|
170
|
-
const isUpScrolling = scrollTop <= this.lastScrollElementTop;
|
|
171
|
-
this.fabSlotCollapsed = !isUpScrolling;
|
|
172
|
-
this.lastScrollElementTop = scrollTop <= 0 ? 0 : scrollTop;
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
};
|
|
177
159
|
}
|
|
178
160
|
get rows() {
|
|
179
161
|
const root = this.shallVirtualize
|
|
@@ -210,9 +192,6 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
210
192
|
get hasSelection() {
|
|
211
193
|
return this.selectionController.hasSelection;
|
|
212
194
|
}
|
|
213
|
-
get isUsingSubgrid() {
|
|
214
|
-
return System.detect()?.name !== 'safari' && System.detect()?.os !== 'iOS';
|
|
215
|
-
}
|
|
216
195
|
selectAll(...parameters) {
|
|
217
196
|
return this.selectionController.selectAll(...parameters);
|
|
218
197
|
}
|
|
@@ -420,11 +399,13 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
420
399
|
}
|
|
421
400
|
|
|
422
401
|
:host([preventVerticalContentScroll]) mo-scroller {
|
|
423
|
-
|
|
424
|
-
|
|
402
|
+
mo-scroller {
|
|
403
|
+
overflow-y: hidden;
|
|
404
|
+
}
|
|
425
405
|
|
|
426
|
-
|
|
427
|
-
|
|
406
|
+
mo-scroller::part(container) {
|
|
407
|
+
position: relative;
|
|
408
|
+
}
|
|
428
409
|
}
|
|
429
410
|
|
|
430
411
|
:host(:not([selectionMode="none"])) {
|
|
@@ -437,9 +418,6 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
437
418
|
|
|
438
419
|
#content {
|
|
439
420
|
width: fit-content;
|
|
440
|
-
}
|
|
441
|
-
|
|
442
|
-
:host([subgrid]) #content {
|
|
443
421
|
min-width: 100%;
|
|
444
422
|
height: min-content;
|
|
445
423
|
min-height: 100%;
|
|
@@ -448,11 +426,11 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
448
426
|
#toolbar {
|
|
449
427
|
position: relative;
|
|
450
428
|
padding: var(--mo-data-grid-toolbar-padding);
|
|
451
|
-
}
|
|
452
429
|
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
430
|
+
mo-icon-button {
|
|
431
|
+
align-self: flex-start;
|
|
432
|
+
color: var(--mo-color-gray);
|
|
433
|
+
}
|
|
456
434
|
}
|
|
457
435
|
|
|
458
436
|
#flexSelectionToolbar {
|
|
@@ -461,31 +439,36 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
461
439
|
inset: 0px;
|
|
462
440
|
width: 100%;
|
|
463
441
|
height: 100%;
|
|
464
|
-
z-index:
|
|
465
|
-
}
|
|
442
|
+
z-index: 5;
|
|
466
443
|
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
444
|
+
& > mo-flex {
|
|
445
|
+
background: var(--mo-data-grid-selection-background);
|
|
446
|
+
height: 100%;
|
|
447
|
+
align-items: center;
|
|
448
|
+
}
|
|
472
449
|
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
450
|
+
mo-icon-button {
|
|
451
|
+
align-self: center;
|
|
452
|
+
color: var(--mo-color-foreground);
|
|
453
|
+
}
|
|
476
454
|
}
|
|
477
455
|
|
|
478
|
-
|
|
479
|
-
align-items: center;
|
|
480
|
-
justify-content: center;
|
|
481
|
-
padding-inline: 14px 6px;
|
|
482
|
-
margin: 6px 0;
|
|
483
|
-
cursor: pointer;
|
|
484
|
-
background: var(--mo-color-accent-transparent);
|
|
456
|
+
mo-popover-container {
|
|
485
457
|
height: calc(100% - calc(2 * 6px));
|
|
486
458
|
max-height: 45px;
|
|
459
|
+
margin: 6px 0;
|
|
460
|
+
|
|
461
|
+
#flexActions {
|
|
462
|
+
align-items: center;
|
|
463
|
+
justify-content: center;
|
|
464
|
+
padding-inline: 14px 6px;
|
|
465
|
+
cursor: pointer;
|
|
466
|
+
background: var(--mo-color-accent-transparent);
|
|
467
|
+
height: 100%;
|
|
468
|
+
}
|
|
487
469
|
}
|
|
488
470
|
|
|
471
|
+
|
|
489
472
|
#fab {
|
|
490
473
|
position: absolute;
|
|
491
474
|
inset-inline-end: 16px;
|
|
@@ -526,15 +509,15 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
526
509
|
position: relative;
|
|
527
510
|
height: 100%;
|
|
528
511
|
width: 100%;
|
|
529
|
-
}
|
|
530
512
|
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
513
|
+
mo-data-grid-side-panel {
|
|
514
|
+
position: absolute;
|
|
515
|
+
inset: 0;
|
|
516
|
+
width: 100%;
|
|
517
|
+
height: 100%;
|
|
518
|
+
z-index: 1;
|
|
519
|
+
background-color: var(--mo-color-surface);
|
|
520
|
+
}
|
|
538
521
|
}
|
|
539
522
|
`;
|
|
540
523
|
}
|
|
@@ -614,22 +597,6 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
614
597
|
get dataGridTemplate() {
|
|
615
598
|
this.provideCssColumnsProperties();
|
|
616
599
|
this.toggleAttribute('hasDetails', this.hasDetails);
|
|
617
|
-
this.toggleAttribute('subgrid', this.isUsingSubgrid);
|
|
618
|
-
if (!this.isUsingSubgrid) {
|
|
619
|
-
return html `
|
|
620
|
-
<mo-flex ${style({ flexGrow: '1', position: 'relative' })}>
|
|
621
|
-
<mo-grid rows='* auto' ${style({ flexGrow: '1' })}>
|
|
622
|
-
<mo-scroller ${style({ minHeight: 'var(--mo-data-grid-content-min-height, calc(var(--mo-data-grid-min-visible-rows, 2.5) * var(--mo-data-grid-row-height) + var(--mo-data-grid-header-height)))' })}>
|
|
623
|
-
<mo-grid ${style({ height: '100%' })} rows='auto *'>
|
|
624
|
-
${this.headerTemplate}
|
|
625
|
-
${this.contentTemplate}
|
|
626
|
-
</mo-grid>
|
|
627
|
-
</mo-scroller>
|
|
628
|
-
${this.footerTemplate}
|
|
629
|
-
</mo-grid>
|
|
630
|
-
</mo-flex>
|
|
631
|
-
`;
|
|
632
|
-
}
|
|
633
600
|
return html `
|
|
634
601
|
<mo-grid rows='* auto' ${style({ position: 'relative', height: '100%' })}>
|
|
635
602
|
<mo-scroller
|
|
@@ -658,29 +625,8 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
658
625
|
const content = this.shallVirtualize === false
|
|
659
626
|
? this.renderData.map(getRowTemplate)
|
|
660
627
|
: html `<mo-virtualized-scroller .items=${this.renderData} .getItemTemplate=${getRowTemplate} exportparts='row'></mo-virtualized-scroller>`;
|
|
661
|
-
return
|
|
662
|
-
|
|
663
|
-
<mo-scroller
|
|
664
|
-
${style({ flexGrow: '1', gridRow: '2', gridColumn: '1 / last-line', overflowX: 'hidden' })}
|
|
665
|
-
${observeResize(() => this.requestUpdate())}
|
|
666
|
-
@scroll=${this.handleScroll}
|
|
667
|
-
>
|
|
668
|
-
${content}
|
|
669
|
-
</mo-scroller>
|
|
670
|
-
${!this.hasContextMenu ? html.nothing : html `
|
|
671
|
-
<mo-flex ${style({ position: 'sticky', right: '0' })}>
|
|
672
|
-
${this.renderData.map((_, i) => html `
|
|
673
|
-
<mo-flex alignItems='center' justifyContent='center'
|
|
674
|
-
${style({ height: 'var(--mo-data-grid-row-height)', backgroundColor: 'var(--mo-data-grid-sticky-part-color)' })}
|
|
675
|
-
>
|
|
676
|
-
<mo-icon-button dense icon='more_vert'
|
|
677
|
-
@click=${(e) => this.rows[i]?.openContextMenu.call(this.rows[i], e)}
|
|
678
|
-
></mo-icon-button>
|
|
679
|
-
</mo-flex>
|
|
680
|
-
`)}
|
|
681
|
-
</mo-flex>
|
|
682
|
-
`}
|
|
683
|
-
</mo-flex>
|
|
628
|
+
return html `
|
|
629
|
+
${content}
|
|
684
630
|
`;
|
|
685
631
|
}
|
|
686
632
|
getRowTemplate(data, index, level = 0) {
|
|
@@ -763,10 +709,16 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
763
709
|
${t('${count:pluralityNumber} entries selected', { count: this.selectedData.length })}
|
|
764
710
|
</div>
|
|
765
711
|
${!this.getRowContextMenuTemplate ? html.nothing : html `
|
|
766
|
-
<mo-
|
|
767
|
-
<
|
|
768
|
-
|
|
769
|
-
|
|
712
|
+
<mo-popover-container fixed>
|
|
713
|
+
<mo-flex id='flexActions' direction='horizontal'>
|
|
714
|
+
<div ${style({ flex: '1' })}>${t('Options')}</div>
|
|
715
|
+
<mo-icon-button dense icon='arrow_drop_down' ${style({ display: 'flex', alignItems: 'center', justifyContent: 'center' })}></mo-icon-button>
|
|
716
|
+
</mo-flex>
|
|
717
|
+
|
|
718
|
+
<mo-menu slot='popover'>
|
|
719
|
+
${this.getRowContextMenuTemplate?.(this.selectedData) ?? html.nothing}
|
|
720
|
+
</mo-menu>
|
|
721
|
+
</mo-popover-container>
|
|
770
722
|
`}
|
|
771
723
|
<div ${style({ flex: '1' })}></div>
|
|
772
724
|
<mo-icon-button icon='close'
|
|
@@ -823,6 +775,21 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
823
775
|
get moreColumnWidth() {
|
|
824
776
|
return this.sidePanelHidden && !this.hasContextMenu ? undefined : window.getComputedStyle(this).getPropertyValue('--mo-data-grid-column-more-width');
|
|
825
777
|
}
|
|
778
|
+
handleScroll(e) {
|
|
779
|
+
if (this.preventFabCollapse === false) {
|
|
780
|
+
if (!e.composed) {
|
|
781
|
+
e.preventDefault();
|
|
782
|
+
e.target?.dispatchEvent(new Event('scroll', { composed: true, bubbles: true }));
|
|
783
|
+
if (this.hasFabs) {
|
|
784
|
+
const targetElement = e.composedPath()[0];
|
|
785
|
+
const scrollTop = targetElement.scrollTop;
|
|
786
|
+
const isUpScrolling = scrollTop <= this.lastScrollElementTop;
|
|
787
|
+
this.fabSlotCollapsed = !isUpScrolling;
|
|
788
|
+
this.lastScrollElementTop = scrollTop <= 0 ? 0 : scrollTop;
|
|
789
|
+
}
|
|
790
|
+
}
|
|
791
|
+
}
|
|
792
|
+
}
|
|
826
793
|
getSorting() {
|
|
827
794
|
return !this.sorting
|
|
828
795
|
? []
|
|
@@ -1104,6 +1071,9 @@ __decorate([
|
|
|
1104
1071
|
__decorate([
|
|
1105
1072
|
query('slot[name=column]')
|
|
1106
1073
|
], DataGrid.prototype, "columnsSlot", void 0);
|
|
1074
|
+
__decorate([
|
|
1075
|
+
eventOptions({ passive: true })
|
|
1076
|
+
], DataGrid.prototype, "handleScroll", null);
|
|
1107
1077
|
DataGrid = DataGrid_1 = __decorate([
|
|
1108
1078
|
component('mo-data-grid')
|
|
1109
1079
|
], DataGrid);
|
|
@@ -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,
|
|
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,kCAgDzB;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
|
@@ -114,10 +114,6 @@ let DataGridCell = class DataGridCell extends Component {
|
|
|
114
114
|
outline: none;
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
-
md-focus-ring {
|
|
118
|
-
--md-focus-ring-shape: var(--mo-border-radius);
|
|
119
|
-
}
|
|
120
|
-
|
|
121
117
|
:host([isEditing]) {
|
|
122
118
|
display: grid;
|
|
123
119
|
}
|
|
@@ -164,16 +160,14 @@ let DataGridCell = class DataGridCell extends Component {
|
|
|
164
160
|
else {
|
|
165
161
|
this.setAttribute('tabindex', '-1');
|
|
166
162
|
}
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
this.style.insetInline = this.column.stickyColumnInsetInline;
|
|
171
|
-
}
|
|
163
|
+
this.toggleAttribute('sticky', this.column.sticky !== undefined);
|
|
164
|
+
this.toggleAttribute('sticking', this.column.intersecting === false);
|
|
165
|
+
this.style.insetInline = this.column.stickyColumnInsetInline;
|
|
172
166
|
return this.isEditing ? this.editContentTemplate : this.contentTemplate;
|
|
173
167
|
}
|
|
174
168
|
get contentTemplate() {
|
|
175
169
|
return html `
|
|
176
|
-
|
|
170
|
+
${!this.focusController.focused ? html.nothing : html `<mo-focus-ring inward visible></mo-focus-ring>`}
|
|
177
171
|
${this.column.getContentTemplate?.(this.value, this.data) ?? html `${this.value}`}
|
|
178
172
|
`;
|
|
179
173
|
}
|
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
|
@@ -11,8 +11,6 @@ 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();
|
|
@@ -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"}
|
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
|
|
2
|
+
import { component, Component, css, html, ifDefined, property, event, style } 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(
|
|
37
|
+
data-sticky=${ifDefined(column.sticky)}
|
|
38
38
|
data-sticking=${column.intersecting === false}
|
|
39
|
-
${!column.sticky || column.intersecting
|
|
39
|
+
${!column.sticky || column.intersecting ? 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,13 +53,11 @@ 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
|
-
|
|
61
|
-
></mo-data-grid-header-separator>
|
|
62
|
-
`}
|
|
56
|
+
<mo-data-grid-header-separator
|
|
57
|
+
?data-last=${columns.length - 1 === index}
|
|
58
|
+
.dataGrid=${this.dataGrid}
|
|
59
|
+
.column=${this.dataGrid.visibleColumns[index]}
|
|
60
|
+
></mo-data-grid-header-separator>
|
|
63
61
|
</mo-flex>
|
|
64
62
|
`;
|
|
65
63
|
};
|
|
@@ -76,8 +74,6 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
76
74
|
connected() {
|
|
77
75
|
this.dataGrid.dataChange.subscribe(this.handleDataGridDataChange);
|
|
78
76
|
this.dataGrid.selectionChange.subscribe(this.handleDataGridSelectionChange);
|
|
79
|
-
this.toggleAttribute('subgrid', this.dataGrid.isUsingSubgrid);
|
|
80
|
-
this.toggleAttribute('details', this.dataGrid.hasDetails);
|
|
81
77
|
}
|
|
82
78
|
disconnected() {
|
|
83
79
|
this.dataGrid.dataChange.unsubscribe(this.handleDataGridDataChange);
|
|
@@ -88,68 +84,22 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
88
84
|
:host {
|
|
89
85
|
--mo-data-grid-header-separator-height: 15px;
|
|
90
86
|
--mo-data-grid-header-separator-width: 2px;
|
|
91
|
-
display: inherit;
|
|
92
|
-
font-size: small;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
:host([subgrid]) {
|
|
96
|
-
position: sticky;
|
|
97
87
|
display: grid;
|
|
98
88
|
grid-template-columns: subgrid;
|
|
99
89
|
grid-column: -1 / 1;
|
|
100
90
|
background: var(--mo-data-grid-sticky-part-color);
|
|
91
|
+
position: sticky;
|
|
101
92
|
top: 0;
|
|
102
93
|
z-index: 4;
|
|
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;
|
|
94
|
+
font-size: small;
|
|
147
95
|
}
|
|
148
96
|
|
|
149
97
|
#header {
|
|
98
|
+
border-top: var(--mo-data-grid-border);
|
|
99
|
+
border-bottom: var(--mo-data-grid-border);
|
|
150
100
|
position: relative;
|
|
151
101
|
height: var(--mo-data-grid-header-height);
|
|
152
|
-
background
|
|
102
|
+
background: var(--mo-data-grid-header-background);
|
|
153
103
|
}
|
|
154
104
|
|
|
155
105
|
.headerContent {
|
|
@@ -175,30 +125,49 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
175
125
|
align-items: center;
|
|
176
126
|
justify-content: center;
|
|
177
127
|
}
|
|
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
|
+
}
|
|
178
168
|
`;
|
|
179
169
|
}
|
|
180
|
-
get skeletonColumns() {
|
|
181
|
-
return [
|
|
182
|
-
this.dataGrid.detailsColumnWidth,
|
|
183
|
-
this.dataGrid.selectionColumnWidth,
|
|
184
|
-
'1fr',
|
|
185
|
-
this.dataGrid.moreColumnWidth
|
|
186
|
-
].filter((c) => c !== undefined).join(' ');
|
|
187
|
-
}
|
|
188
|
-
get separatorAdjustedColumns() {
|
|
189
|
-
return this.dataGrid.dataColumnsWidths.join(' var(--mo-data-grid-columns-gap, 2px) ');
|
|
190
|
-
}
|
|
191
170
|
get template() {
|
|
192
|
-
if (!this.dataGrid.isUsingSubgrid) {
|
|
193
|
-
return html `
|
|
194
|
-
<mo-grid id='header' columns=${this.skeletonColumns} columnGap='var(--mo-data-grid-columns-gap, 2px)'>
|
|
195
|
-
${this.detailsExpanderTemplate}
|
|
196
|
-
${this.selectionTemplate}
|
|
197
|
-
${this.contentTemplate}
|
|
198
|
-
${this.moreTemplate}
|
|
199
|
-
</mo-grid>
|
|
200
|
-
`;
|
|
201
|
-
}
|
|
202
171
|
return html `
|
|
203
172
|
${this.detailsExpanderTemplate}
|
|
204
173
|
${this.selectionTemplate}
|
|
@@ -230,19 +199,6 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
230
199
|
`;
|
|
231
200
|
}
|
|
232
201
|
get contentTemplate() {
|
|
233
|
-
if (!this.dataGrid.isUsingSubgrid) {
|
|
234
|
-
return html `
|
|
235
|
-
<mo-grid columns=${this.separatorAdjustedColumns}>
|
|
236
|
-
${join(this.dataGrid.visibleColumns.map(this.getHeaderCellTemplate), index => html `
|
|
237
|
-
<mo-data-grid-header-separator
|
|
238
|
-
.dataGrid=${this.dataGrid}
|
|
239
|
-
.column=${this.dataGrid.visibleColumns[index]}
|
|
240
|
-
@columnUpdate=${() => this.dataGrid.requestUpdate()}
|
|
241
|
-
></mo-data-grid-header-separator>
|
|
242
|
-
`)}
|
|
243
|
-
</mo-grid>
|
|
244
|
-
`;
|
|
245
|
-
}
|
|
246
202
|
return html `
|
|
247
203
|
${this.dataGrid.visibleColumns.map(this.getHeaderCellTemplate)}
|
|
248
204
|
`;
|
|
@@ -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;IACzB,QAAQ,EAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC5B,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,kCAiDzB;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,CAIjC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,+BAA+B,EAAE,uBAAuB,CAAA;KACxD;CACD"}
|
|
@@ -12,9 +12,6 @@ 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
|
-
}
|
|
18
15
|
this.isResizing = false;
|
|
19
16
|
this.column.width = 'max-content';
|
|
20
17
|
this.dataGrid.setColumns(this.dataGrid.columns);
|
|
@@ -22,10 +19,9 @@ let DataGridHeaderSeparator = class DataGridHeaderSeparator extends Component {
|
|
|
22
19
|
}
|
|
23
20
|
static get styles() {
|
|
24
21
|
return css `
|
|
25
|
-
:host
|
|
22
|
+
:host {
|
|
26
23
|
position: absolute;
|
|
27
24
|
inset-inline-end: -2px;
|
|
28
|
-
z-index: 2;
|
|
29
25
|
}
|
|
30
26
|
|
|
31
27
|
:host([data-last]) {
|
|
@@ -114,14 +110,7 @@ let DataGridHeaderSeparator = class DataGridHeaderSeparator extends Component {
|
|
|
114
110
|
}
|
|
115
111
|
};
|
|
116
112
|
__decorate([
|
|
117
|
-
property({
|
|
118
|
-
type: Object,
|
|
119
|
-
updated(dataGrid) {
|
|
120
|
-
if (dataGrid) {
|
|
121
|
-
this.toggleAttribute('subgrid', dataGrid.isUsingSubgrid);
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
})
|
|
113
|
+
property({ type: Object })
|
|
125
114
|
], DataGridHeaderSeparator.prototype, "dataGrid", void 0);
|
|
126
115
|
__decorate([
|
|
127
116
|
property({ type: Object })
|