@3mo/data-grid 0.8.6-rc.0 → 0.8.6
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 -86
- 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 +0 -2
- package/dist/DataGridHeader.d.ts.map +1 -1
- package/dist/DataGridHeader.js +50 -96
- 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/rows/DataGridDefaultRow.d.ts.map +1 -1
- package/dist/rows/DataGridDefaultRow.js +10 -18
- package/dist/rows/DataGridRow.d.ts +1 -3
- package/dist/rows/DataGridRow.d.ts.map +1 -1
- package/dist/rows/DataGridRow.js +26 -81
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -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,14 +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
|
-
${style({ gridRow: '2', gridColumn: '1 / last-line', overflowX: 'hidden' })}
|
|
664
|
-
${observeResize(() => this.requestUpdate())}
|
|
665
|
-
@scroll=${this.handleScroll}
|
|
666
|
-
>
|
|
667
|
-
${content}
|
|
668
|
-
</mo-scroller>
|
|
628
|
+
return html `
|
|
629
|
+
${content}
|
|
669
630
|
`;
|
|
670
631
|
}
|
|
671
632
|
getRowTemplate(data, index, level = 0) {
|
|
@@ -748,10 +709,16 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
748
709
|
${t('${count:pluralityNumber} entries selected', { count: this.selectedData.length })}
|
|
749
710
|
</div>
|
|
750
711
|
${!this.getRowContextMenuTemplate ? html.nothing : html `
|
|
751
|
-
<mo-
|
|
752
|
-
<
|
|
753
|
-
|
|
754
|
-
|
|
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>
|
|
755
722
|
`}
|
|
756
723
|
<div ${style({ flex: '1' })}></div>
|
|
757
724
|
<mo-icon-button icon='close'
|
|
@@ -808,6 +775,21 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
808
775
|
get moreColumnWidth() {
|
|
809
776
|
return this.sidePanelHidden && !this.hasContextMenu ? undefined : window.getComputedStyle(this).getPropertyValue('--mo-data-grid-column-more-width');
|
|
810
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
|
+
}
|
|
811
793
|
getSorting() {
|
|
812
794
|
return !this.sorting
|
|
813
795
|
? []
|
|
@@ -1089,6 +1071,9 @@ __decorate([
|
|
|
1089
1071
|
__decorate([
|
|
1090
1072
|
query('slot[name=column]')
|
|
1091
1073
|
], DataGrid.prototype, "columnsSlot", void 0);
|
|
1074
|
+
__decorate([
|
|
1075
|
+
eventOptions({ passive: true })
|
|
1076
|
+
], DataGrid.prototype, "handleScroll", null);
|
|
1092
1077
|
DataGrid = DataGrid_1 = __decorate([
|
|
1093
1078
|
component('mo-data-grid')
|
|
1094
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,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
|
@@ -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,62 +84,14 @@ 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 {
|
|
@@ -177,30 +125,49 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
177
125
|
align-items: center;
|
|
178
126
|
justify-content: center;
|
|
179
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
|
+
}
|
|
180
168
|
`;
|
|
181
169
|
}
|
|
182
|
-
get skeletonColumns() {
|
|
183
|
-
return [
|
|
184
|
-
this.dataGrid.detailsColumnWidth,
|
|
185
|
-
this.dataGrid.selectionColumnWidth,
|
|
186
|
-
'1fr',
|
|
187
|
-
this.dataGrid.moreColumnWidth
|
|
188
|
-
].filter((c) => c !== undefined).join(' ');
|
|
189
|
-
}
|
|
190
|
-
get separatorAdjustedColumns() {
|
|
191
|
-
return this.dataGrid.dataColumnsWidths.join(' var(--mo-data-grid-columns-gap, 2px) ');
|
|
192
|
-
}
|
|
193
170
|
get template() {
|
|
194
|
-
if (!this.dataGrid.isUsingSubgrid) {
|
|
195
|
-
return html `
|
|
196
|
-
<mo-grid id='header' columns=${this.skeletonColumns} columnGap='var(--mo-data-grid-columns-gap, 2px)'>
|
|
197
|
-
${this.detailsExpanderTemplate}
|
|
198
|
-
${this.selectionTemplate}
|
|
199
|
-
${this.contentTemplate}
|
|
200
|
-
${this.moreTemplate}
|
|
201
|
-
</mo-grid>
|
|
202
|
-
`;
|
|
203
|
-
}
|
|
204
171
|
return html `
|
|
205
172
|
${this.detailsExpanderTemplate}
|
|
206
173
|
${this.selectionTemplate}
|
|
@@ -232,19 +199,6 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
232
199
|
`;
|
|
233
200
|
}
|
|
234
201
|
get contentTemplate() {
|
|
235
|
-
if (!this.dataGrid.isUsingSubgrid) {
|
|
236
|
-
return html `
|
|
237
|
-
<mo-grid columns=${this.separatorAdjustedColumns}>
|
|
238
|
-
${join(this.dataGrid.visibleColumns.map(this.getHeaderCellTemplate), index => html `
|
|
239
|
-
<mo-data-grid-header-separator
|
|
240
|
-
.dataGrid=${this.dataGrid}
|
|
241
|
-
.column=${this.dataGrid.visibleColumns[index]}
|
|
242
|
-
@columnUpdate=${() => this.dataGrid.requestUpdate()}
|
|
243
|
-
></mo-data-grid-header-separator>
|
|
244
|
-
`)}
|
|
245
|
-
</mo-grid>
|
|
246
|
-
`;
|
|
247
|
-
}
|
|
248
202
|
return html `
|
|
249
203
|
${this.dataGrid.visibleColumns.map(this.getHeaderCellTemplate)}
|
|
250
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 })
|
|
@@ -3,11 +3,11 @@ import { component, css } from '@a11d/lit';
|
|
|
3
3
|
import { ContextMenuItem } from '@3mo/context-menu';
|
|
4
4
|
let DataGridPrimaryContextMenuItem = class DataGridPrimaryContextMenuItem extends ContextMenuItem {
|
|
5
5
|
static get styles() {
|
|
6
|
-
return css `
|
|
7
|
-
${super.styles}
|
|
8
|
-
:host {
|
|
9
|
-
font-weight: bold;
|
|
10
|
-
}
|
|
6
|
+
return css `
|
|
7
|
+
${super.styles}
|
|
8
|
+
:host {
|
|
9
|
+
font-weight: bold;
|
|
10
|
+
}
|
|
11
11
|
`;
|
|
12
12
|
}
|
|
13
13
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridColumnComponent.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,KAAK,uBAAuB,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAE9G;;;;;;;;;;;GAWG;AACH,8BAAsB,uBAAuB,CAAC,KAAK,EAAE,MAAM,CAAE,SAAQ,SAAS;
|
|
1
|
+
{"version":3,"file":"DataGridColumnComponent.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,KAAK,uBAAuB,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAE9G;;;;;;;;;;;GAWG;AACH,8BAAsB,uBAAuB,CAAC,KAAK,EAAE,MAAM,CAAE,SAAQ,SAAS;IACjD,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,SAAS,CAAA;IAE3D,KAAK,SAAgB;IACK,MAAM,UAAQ;IACxC,MAAM,CAAC,EAAE,oBAAoB,CAAA;IACZ,OAAO,SAAK;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,uBAAuB,CAAU;IAC5C,YAAY,EAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAC/B,gBAAgB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IACpB,WAAW,UAAQ;IAO5D,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAQ;IAElD,IAAI,MAAM,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAgB1C;IAED,QAAQ,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IACvF,QAAQ,CAAC,sBAAsB,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAE5F,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK;IAIlD,iBAAiB;cAOP,OAAO;CAI1B"}
|