@3mo/data-grid 0.8.21 → 0.8.22
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 +7 -15
- package/dist/DataGrid.d.ts.map +1 -1
- package/dist/DataGrid.js +12 -40
- package/dist/DataGridColumn.d.ts +2 -5
- package/dist/DataGridColumn.d.ts.map +1 -1
- package/dist/DataGridColumn.js +3 -9
- package/dist/DataGridHeader.d.ts.map +1 -1
- package/dist/DataGridHeader.js +6 -35
- package/dist/DataGridSortingController.d.ts +40 -0
- package/dist/DataGridSortingController.d.ts.map +1 -0
- package/dist/DataGridSortingController.js +94 -0
- package/dist/custom-elements.json +13 -4
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
package/dist/DataGrid.d.ts
CHANGED
|
@@ -4,13 +4,10 @@ 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 DataGridRow } from './index.js';
|
|
8
7
|
import { DataGridSelectionController, DataGridSelectionMode } from './DataGridSelectionController.js';
|
|
8
|
+
import { DataGridSortingController, type DataGridRankedSortDefinition, type DataGridSorting } from './DataGridSortingController.js';
|
|
9
|
+
import { DataGridSidePanelTab, type DataGridColumn, type DataGridCell, type DataGridRow } from './index.js';
|
|
9
10
|
export type DataGridPagination = 'auto' | number;
|
|
10
|
-
export declare enum DataGridSortingStrategy {
|
|
11
|
-
Descending = "descending",
|
|
12
|
-
Ascending = "ascending"
|
|
13
|
-
}
|
|
14
11
|
export declare enum DataGridSelectionBehaviorOnDataChange {
|
|
15
12
|
Reset = "reset",
|
|
16
13
|
Prevent = "prevent",
|
|
@@ -21,11 +18,6 @@ export declare enum DataGridEditability {
|
|
|
21
18
|
Cell = "cell",
|
|
22
19
|
Always = "always"
|
|
23
20
|
}
|
|
24
|
-
export type DataGridSortingDefinition<TData> = {
|
|
25
|
-
selector: KeyPathOf<TData>;
|
|
26
|
-
strategy: DataGridSortingStrategy;
|
|
27
|
-
};
|
|
28
|
-
export type DataGridSorting<TData> = DataGridSortingDefinition<TData> | Array<DataGridSortingDefinition<TData>>;
|
|
29
21
|
/**
|
|
30
22
|
* @element mo-data-grid
|
|
31
23
|
*
|
|
@@ -99,7 +91,7 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
|
|
|
99
91
|
readonly columnsChange: EventDispatcher<Array<DataGridColumn<TData>>>;
|
|
100
92
|
readonly sidePanelOpen: EventDispatcher<DataGridSidePanelTab>;
|
|
101
93
|
readonly sidePanelClose: EventDispatcher;
|
|
102
|
-
readonly sortingChange: EventDispatcher<
|
|
94
|
+
readonly sortingChange: EventDispatcher<Array<DataGridRankedSortDefinition<TData>>>;
|
|
103
95
|
readonly rowDetailsOpen: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
|
|
104
96
|
readonly rowDetailsClose: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
|
|
105
97
|
readonly rowClick: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
|
|
@@ -161,9 +153,8 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
|
|
|
161
153
|
openRowDetails(): void;
|
|
162
154
|
closeRowDetails(): void;
|
|
163
155
|
toggleRowDetails(): void;
|
|
164
|
-
sort(
|
|
165
|
-
unsort(): void;
|
|
166
|
-
handleSortChange(sorting?: DataGridSorting<TData>): void;
|
|
156
|
+
sort(...parameters: Parameters<typeof this.sortingController.set>): void;
|
|
157
|
+
unsort(...parameters: Parameters<typeof this.sortingController.reset>): void;
|
|
167
158
|
setColumns(columns: Array<DataGridColumn<TData>>): void;
|
|
168
159
|
extractColumnsIfNotSetExplicitly(): void;
|
|
169
160
|
extractColumns(): void;
|
|
@@ -191,6 +182,7 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
|
|
|
191
182
|
protected readonly smallScreenObserverController: MediaQueryController;
|
|
192
183
|
readonly themeController: ThemeController;
|
|
193
184
|
readonly selectionController: DataGridSelectionController<TData>;
|
|
185
|
+
readonly sortingController: DataGridSortingController<TData>;
|
|
194
186
|
readonly rowIntersectionObserver?: IntersectionObserver;
|
|
195
187
|
protected updated(...parameters: Parameters<Component['updated']>): void;
|
|
196
188
|
protected firstUpdated(props: PropertyValues): void;
|
|
@@ -233,7 +225,7 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
|
|
|
233
225
|
private lastScrollElementTop;
|
|
234
226
|
private handleScroll;
|
|
235
227
|
protected handlePointerDown(event: PointerEvent): void;
|
|
236
|
-
getSorting():
|
|
228
|
+
getSorting(): DataGridRankedSortDefinition<TData>[];
|
|
237
229
|
private getFlattenedData;
|
|
238
230
|
get flattenedData(): TData[];
|
|
239
231
|
protected get sortedData(): 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,EAAwD,MAAM,WAAW,CAAA;AAEpO,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,OAAO,EAAE,6BAA6B,EAAE,MAAM,sCAAsC,CAAA;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAE5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAGhE,OAAO,
|
|
1
|
+
{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../DataGrid.ts"],"names":[],"mappings":"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"}
|
package/dist/DataGrid.js
CHANGED
|
@@ -10,8 +10,9 @@ 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 { CsvGenerator, DataGridColumnComponent, DataGridSidePanelTab } from './index.js';
|
|
14
13
|
import { DataGridSelectionController, DataGridSelectionMode } from './DataGridSelectionController.js';
|
|
14
|
+
import { DataGridSortingController } from './DataGridSortingController.js';
|
|
15
|
+
import { CsvGenerator, DataGridColumnComponent, DataGridSidePanelTab } from './index.js';
|
|
15
16
|
Localizer.register('en', {
|
|
16
17
|
'${count:pluralityNumber} entries selected': [
|
|
17
18
|
'1 entry selected',
|
|
@@ -29,11 +30,6 @@ Localizer.register('de', {
|
|
|
29
30
|
'More Filters': 'Weitere Filter',
|
|
30
31
|
'Deselect All': 'Alle deselektieren',
|
|
31
32
|
});
|
|
32
|
-
export var DataGridSortingStrategy;
|
|
33
|
-
(function (DataGridSortingStrategy) {
|
|
34
|
-
DataGridSortingStrategy["Descending"] = "descending";
|
|
35
|
-
DataGridSortingStrategy["Ascending"] = "ascending";
|
|
36
|
-
})(DataGridSortingStrategy || (DataGridSortingStrategy = {}));
|
|
37
33
|
export var DataGridSelectionBehaviorOnDataChange;
|
|
38
34
|
(function (DataGridSelectionBehaviorOnDataChange) {
|
|
39
35
|
DataGridSelectionBehaviorOnDataChange["Reset"] = "reset";
|
|
@@ -143,6 +139,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
143
139
|
this.smallScreenObserverController = new MediaQueryController(this, '(max-width: 768px)');
|
|
144
140
|
this.themeController = new ThemeController(this);
|
|
145
141
|
this.selectionController = new DataGridSelectionController(this);
|
|
142
|
+
this.sortingController = new DataGridSortingController(this);
|
|
146
143
|
this.splitterResizerTemplate = html `
|
|
147
144
|
<mo-splitter-resizer-line style='--mo-splitter-resizer-line-thickness: 1px; --mo-splitter-resizer-line-idle-background: var(--mo-color-transparent-gray-3); --mo-splitter-resizer-line-horizontal-transform: scaleX(5);'></mo-splitter-resizer-line>
|
|
148
145
|
`;
|
|
@@ -205,7 +202,9 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
205
202
|
return undefined;
|
|
206
203
|
}
|
|
207
204
|
const subValue = getValueByKeyPath(data, this.subDataGridDataSelector);
|
|
208
|
-
return Array.isArray(subValue)
|
|
205
|
+
return !Array.isArray(subValue) || !subValue.length
|
|
206
|
+
? undefined
|
|
207
|
+
: this.sortingController.toSorted(subValue);
|
|
209
208
|
}
|
|
210
209
|
hasDetail(data) {
|
|
211
210
|
return !!this.getSubData(data) || (this.hasDataDetail?.(data) ??
|
|
@@ -228,15 +227,11 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
228
227
|
this.openRowDetails();
|
|
229
228
|
}
|
|
230
229
|
}
|
|
231
|
-
sort(
|
|
232
|
-
this.
|
|
233
|
-
this.sortingChange.dispatch(sorting);
|
|
230
|
+
sort(...parameters) {
|
|
231
|
+
this.sortingController.set(...parameters);
|
|
234
232
|
}
|
|
235
|
-
unsort() {
|
|
236
|
-
this.
|
|
237
|
-
}
|
|
238
|
-
handleSortChange(sorting) {
|
|
239
|
-
this.sort(sorting);
|
|
233
|
+
unsort(...parameters) {
|
|
234
|
+
this.sortingController.reset(...parameters);
|
|
240
235
|
}
|
|
241
236
|
setColumns(columns) {
|
|
242
237
|
this.columns = columns;
|
|
@@ -794,11 +789,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
794
789
|
this.rows.forEach(row => row.cells.forEach(cell => cell.handlePointerDown(event)));
|
|
795
790
|
}
|
|
796
791
|
getSorting() {
|
|
797
|
-
return
|
|
798
|
-
? []
|
|
799
|
-
: Array.isArray(this.sorting)
|
|
800
|
-
? this.sorting
|
|
801
|
-
: [this.sorting];
|
|
792
|
+
return this.sortingController.get();
|
|
802
793
|
}
|
|
803
794
|
*getFlattenedData() {
|
|
804
795
|
if (!this.subDataGridDataSelector) {
|
|
@@ -823,26 +814,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
823
814
|
return [...this.getFlattenedData()].map(({ data }) => data);
|
|
824
815
|
}
|
|
825
816
|
get sortedData() {
|
|
826
|
-
|
|
827
|
-
const sortedData = [...this.data];
|
|
828
|
-
if (!sorting?.length) {
|
|
829
|
-
return sortedData;
|
|
830
|
-
}
|
|
831
|
-
return sortedData.sort((a, b) => {
|
|
832
|
-
for (const sortCriteria of sorting) {
|
|
833
|
-
const { selector, strategy } = sortCriteria;
|
|
834
|
-
const aValue = getValueByKeyPath(a, selector) ?? Infinity;
|
|
835
|
-
const bValue = getValueByKeyPath(b, selector) ?? Infinity;
|
|
836
|
-
if (aValue < bValue) {
|
|
837
|
-
return strategy === DataGridSortingStrategy.Ascending ? -1 : 1;
|
|
838
|
-
}
|
|
839
|
-
else if (aValue > bValue) {
|
|
840
|
-
return strategy === DataGridSortingStrategy.Ascending ? 1 : -1;
|
|
841
|
-
}
|
|
842
|
-
// If values are equal, continue to the next level of sorting
|
|
843
|
-
}
|
|
844
|
-
return 0; // Items are equal in all sorting criteria
|
|
845
|
-
});
|
|
817
|
+
return this.sortingController.toSorted([...this.data]);
|
|
846
818
|
}
|
|
847
819
|
get renderData() {
|
|
848
820
|
if (this.hasPagination === false) {
|
package/dist/DataGridColumn.d.ts
CHANGED
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
import { type HTMLTemplateResult } from '@a11d/lit';
|
|
2
|
-
import type { DataGrid
|
|
2
|
+
import type { DataGrid } from './index.js';
|
|
3
3
|
import type * as CSS from 'csstype';
|
|
4
4
|
export type DataGridColumnAlignment = 'start' | 'center' | 'end';
|
|
5
5
|
export type DataGridColumnSticky = 'start' | 'both' | 'end';
|
|
6
|
-
export type DataGridRankedSortDefinition<TData> = DataGridSortingDefinition<TData> & {
|
|
7
|
-
rank: number;
|
|
8
|
-
};
|
|
9
6
|
export declare class DataGridColumn<TData, TValue = unknown> {
|
|
10
7
|
dataGrid?: DataGrid<TData, any>;
|
|
11
8
|
dataSelector: KeyPathOf<TData>;
|
|
@@ -32,7 +29,7 @@ export declare class DataGridColumn<TData, TValue = unknown> {
|
|
|
32
29
|
private _intersecting;
|
|
33
30
|
get intersecting(): boolean;
|
|
34
31
|
set intersecting(value: boolean);
|
|
35
|
-
get sortingDefinition(): DataGridRankedSortDefinition<TData> | undefined;
|
|
32
|
+
get sortingDefinition(): import("./DataGridSortingController.js").DataGridRankedSortDefinition<TData> | undefined;
|
|
36
33
|
get sumTemplate(): HTMLTemplateResult | undefined;
|
|
37
34
|
get stickyColumnInsetInline(): string;
|
|
38
35
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridColumn.d.ts","sourceRoot":"","sources":["../DataGridColumn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAChE,OAAO,KAAK,EAAE,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"DataGridColumn.d.ts","sourceRoot":"","sources":["../DataGridColumn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAChE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAC1C,OAAO,KAAK,KAAK,GAAG,MAAM,SAAS,CAAA;AAEnC,MAAM,MAAM,uBAAuB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAEhE,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAA;AAE3D,qBAAa,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAClD,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IAC/B,YAAY,EAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAE/B,OAAO,EAAG,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IAGpB,KAAK,EAAE,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAgB;IAEnE,SAAS,EAAE,uBAAuB,CAAU;IAC5C,MAAM,UAAQ;IAEd,QAAQ,UAAO;IAEf,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAE7B,OAAO,CAAC,iBAAiB,CAAC,CAAkB;IAC5C,IAAI,gBAAgB,+/CAAyD;IAC7E,IAAI,gBAAgB,CAAC,KAAK,4/CAAA,EAAoC;IAE9D,kBAAkB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAEnE,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAQ;IAC5C,sBAAsB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAEvE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,CAAC,GAAG,EAAE,MAAM,GAAG,kBAAkB;gBAEpC,MAAM,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAI1D,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,OAAO;IAMlD,OAAO,CAAC,cAAc,CAAC,CAAQ;IAC/B,IAAI,aAAa,WAAsC;IACvD,IAAI,aAAa,CAAC,KAAK,QAAA,EAGtB;IAED,OAAO,CAAC,aAAa,CAAQ;IAC7B,IAAI,YAAY,YAAgC;IAChD,IAAI,YAAY,CAAC,KAAK,SAAA,EAGrB;IAED,IAAI,iBAAiB,6FAIpB;IAED,IAAI,WAAW,mCAgBd;IAED,IAAI,uBAAuB,WA2B1B;CACD"}
|
package/dist/DataGridColumn.js
CHANGED
|
@@ -28,15 +28,9 @@ export class DataGridColumn {
|
|
|
28
28
|
this.dataGrid?.requestUpdate();
|
|
29
29
|
}
|
|
30
30
|
get sortingDefinition() {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
const sorting = this.dataGrid.getSorting();
|
|
35
|
-
const definition = sorting.find(s => s.selector === this.sortDataSelector);
|
|
36
|
-
return !definition ? undefined : {
|
|
37
|
-
...definition,
|
|
38
|
-
rank: sorting.indexOf(definition) + 1
|
|
39
|
-
};
|
|
31
|
+
return this.dataGrid
|
|
32
|
+
?.getSorting()
|
|
33
|
+
.find(s => s.selector === this.sortDataSelector);
|
|
40
34
|
}
|
|
41
35
|
get sumTemplate() {
|
|
42
36
|
if (!this.dataGrid || this.sumHeading === undefined || this.getSumTemplate === undefined) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridHeader.d.ts","sourceRoot":"","sources":["../DataGridHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAgD,MAAM,WAAW,CAAA;
|
|
1
|
+
{"version":3,"file":"DataGridHeader.d.ts","sourceRoot":"","sources":["../DataGridHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAgD,MAAM,WAAW,CAAA;AAI9F,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,kCAmFzB;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;IAOZ,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,6 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { component, Component, css, html, ifDefined, property, event, style } from '@a11d/lit';
|
|
3
|
-
import { KeyboardController } from '@3mo/keyboard-controller';
|
|
4
3
|
import { tooltip } from '@3mo/tooltip';
|
|
5
4
|
import { observeResize } from '@3mo/resize-observer';
|
|
6
5
|
import { DataGridSelectionMode, DataGridSortingStrategy, DataGridSidePanelTab } from './index.js';
|
|
@@ -50,7 +49,7 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
50
49
|
|
|
51
50
|
${sortIcon === undefined ? html.nothing : html `
|
|
52
51
|
${!sortingRank ? html.nothing : html `<span class='sort-rank'>${sortingRank}</span>`}
|
|
53
|
-
<mo-icon ${style({ color: 'var(--mo-color-accent)' })} icon=${ifDefined(sortIcon)}></mo-icon>
|
|
52
|
+
<mo-icon ${style({ color: 'var(--mo-color-accent)', marginInline: '3px' })} icon=${ifDefined(sortIcon)}></mo-icon>
|
|
54
53
|
`}
|
|
55
54
|
</mo-flex>
|
|
56
55
|
<mo-data-grid-header-separator
|
|
@@ -113,7 +112,8 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
113
112
|
color: var(--mo-color-foreground);
|
|
114
113
|
border: 1px solid var(--mo-color-gray-transparent);
|
|
115
114
|
border-radius: 50%;
|
|
116
|
-
width:
|
|
115
|
+
width: fit-content;
|
|
116
|
+
user-select: none;
|
|
117
117
|
height: 20px;
|
|
118
118
|
aspect-ratio: 1 / 1;
|
|
119
119
|
display: flex;
|
|
@@ -215,39 +215,10 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
215
215
|
return observeResize(([entry]) => this.dataGrid[property] = entry?.contentRect.width ?? 0);
|
|
216
216
|
}
|
|
217
217
|
sort(column) {
|
|
218
|
-
if (column.sortable
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
const defaultSortingStrategy = DataGridSortingStrategy.Descending;
|
|
222
|
-
const sortDataSelector = column.sortDataSelector;
|
|
223
|
-
const sortingDefinition = column.sortingDefinition;
|
|
224
|
-
if (KeyboardController.shift || KeyboardController.meta || KeyboardController.ctrl) {
|
|
225
|
-
const sortings = this.dataGrid.getSorting();
|
|
226
|
-
if (sortingDefinition?.selector !== sortDataSelector) {
|
|
227
|
-
this.dataGrid.handleSortChange([...sortings, { selector: sortDataSelector, strategy: defaultSortingStrategy }]);
|
|
228
|
-
}
|
|
229
|
-
else if (sortingDefinition.strategy === DataGridSortingStrategy.Descending) {
|
|
230
|
-
this.dataGrid.handleSortChange(sortings.map(x => x.selector !== sortDataSelector ? x : {
|
|
231
|
-
selector: sortDataSelector,
|
|
232
|
-
strategy: DataGridSortingStrategy.Ascending,
|
|
233
|
-
}));
|
|
234
|
-
}
|
|
235
|
-
else {
|
|
236
|
-
this.dataGrid.handleSortChange(this.dataGrid.getSorting().filter(x => x.selector !== sortDataSelector));
|
|
237
|
-
}
|
|
238
|
-
}
|
|
239
|
-
else {
|
|
240
|
-
if (sortingDefinition?.selector !== sortDataSelector) {
|
|
241
|
-
this.dataGrid.handleSortChange({ selector: sortDataSelector, strategy: defaultSortingStrategy });
|
|
242
|
-
}
|
|
243
|
-
else if (sortingDefinition.strategy === DataGridSortingStrategy.Descending) {
|
|
244
|
-
this.dataGrid.handleSortChange({ selector: sortDataSelector, strategy: DataGridSortingStrategy.Ascending });
|
|
245
|
-
}
|
|
246
|
-
else {
|
|
247
|
-
this.dataGrid.handleSortChange(undefined);
|
|
248
|
-
}
|
|
218
|
+
if (column.sortable) {
|
|
219
|
+
this.dataGrid.sortingController.toggle(column.sortDataSelector);
|
|
220
|
+
this.requestUpdate();
|
|
249
221
|
}
|
|
250
|
-
this.requestUpdate();
|
|
251
222
|
}
|
|
252
223
|
toggleAllDetails() {
|
|
253
224
|
this.dataGrid.toggleRowDetails();
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
export declare enum DataGridSortingStrategy {
|
|
2
|
+
Descending = "descending",
|
|
3
|
+
Ascending = "ascending"
|
|
4
|
+
}
|
|
5
|
+
export type DataGridSortingDefinition<TData> = {
|
|
6
|
+
readonly selector: KeyPathOf<TData>;
|
|
7
|
+
readonly strategy: DataGridSortingStrategy;
|
|
8
|
+
};
|
|
9
|
+
export type DataGridRankedSortDefinition<TData> = DataGridSortingDefinition<TData> & {
|
|
10
|
+
readonly rank: number;
|
|
11
|
+
};
|
|
12
|
+
export type DataGridSorting<TData> = DataGridSortingDefinition<TData> | Array<DataGridSortingDefinition<TData>>;
|
|
13
|
+
interface SortableComponent<TData> {
|
|
14
|
+
sorting?: DataGridSorting<TData> | undefined;
|
|
15
|
+
readonly sortingChange?: EventDispatcher<Array<DataGridRankedSortDefinition<TData>>>;
|
|
16
|
+
}
|
|
17
|
+
export declare class DataGridSortingController<TData> {
|
|
18
|
+
readonly host: SortableComponent<TData>;
|
|
19
|
+
constructor(host: SortableComponent<TData>);
|
|
20
|
+
get(): DataGridRankedSortDefinition<TData>[];
|
|
21
|
+
set(sorting: DataGridSorting<TData>): void;
|
|
22
|
+
private toNormalizedRanked;
|
|
23
|
+
reset(): void;
|
|
24
|
+
/**
|
|
25
|
+
* Toggles the sorting strategy of the provided key path.
|
|
26
|
+
* If a modifier key is pressed, the sorting will be added to the existing sorting definitions.
|
|
27
|
+
*
|
|
28
|
+
* @param selector - The key path of the data to sort by
|
|
29
|
+
* @param strategy - The sorting strategy to use forcefully. If not provided, the strategy will be toggled between ascending, descending, and unsorted
|
|
30
|
+
*/
|
|
31
|
+
toggle(selector: KeyPathOf<TData>, strategy?: DataGridSortingStrategy): void;
|
|
32
|
+
/**
|
|
33
|
+
* Sorts the provided data based on the current sorting definitions
|
|
34
|
+
* @param data - The data to sort
|
|
35
|
+
* @returns - The sorted data
|
|
36
|
+
*/
|
|
37
|
+
toSorted(data: Array<TData>): TData[];
|
|
38
|
+
}
|
|
39
|
+
export {};
|
|
40
|
+
//# sourceMappingURL=DataGridSortingController.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataGridSortingController.d.ts","sourceRoot":"","sources":["../DataGridSortingController.ts"],"names":[],"mappings":"AAEA,oBAAY,uBAAuB;IAClC,UAAU,eAAe;IACzB,SAAS,cAAc;CACvB;AAED,MAAM,MAAM,yBAAyB,CAAC,KAAK,IAAI;IAC9C,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IACnC,QAAQ,CAAC,QAAQ,EAAE,uBAAuB,CAAA;CAC1C,CAAA;AAED,MAAM,MAAM,4BAA4B,CAAC,KAAK,IAAI,yBAAyB,CAAC,KAAK,CAAC,GAAG;IACpF,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,KAAK,IAC9B,yBAAyB,CAAC,KAAK,CAAC,GAChC,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC,CAAA;AAE1C,UAAU,iBAAiB,CAAC,KAAK;IAChC,OAAO,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG,SAAS,CAAA;IAC5C,QAAQ,CAAC,aAAa,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,4BAA4B,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;CACpF;AAED,qBAAa,yBAAyB,CAAC,KAAK;IAC/B,QAAQ,CAAC,IAAI,EAAE,iBAAiB,CAAC,KAAK,CAAC;gBAA9B,IAAI,EAAE,iBAAiB,CAAC,KAAK,CAAC;IAEnD,GAAG;IAIH,GAAG,CAAC,OAAO,EAAE,eAAe,CAAC,KAAK,CAAC;IAMnC,OAAO,CAAC,kBAAkB;IAK1B,KAAK;IAIL;;;;;;OAMG;IACH,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,EAAE,uBAAuB;IAyCrE;;;;OAIG;IACH,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAwB3B"}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { KeyboardController } from '@3mo/keyboard-controller';
|
|
2
|
+
export var DataGridSortingStrategy;
|
|
3
|
+
(function (DataGridSortingStrategy) {
|
|
4
|
+
DataGridSortingStrategy["Descending"] = "descending";
|
|
5
|
+
DataGridSortingStrategy["Ascending"] = "ascending";
|
|
6
|
+
})(DataGridSortingStrategy || (DataGridSortingStrategy = {}));
|
|
7
|
+
export class DataGridSortingController {
|
|
8
|
+
constructor(host) {
|
|
9
|
+
this.host = host;
|
|
10
|
+
}
|
|
11
|
+
get() {
|
|
12
|
+
return this.toNormalizedRanked(this.host.sorting ?? []);
|
|
13
|
+
}
|
|
14
|
+
set(sorting) {
|
|
15
|
+
const normalized = this.toNormalizedRanked(sorting ?? []);
|
|
16
|
+
this.host.sorting = normalized;
|
|
17
|
+
this.host.sortingChange?.dispatch(normalized);
|
|
18
|
+
}
|
|
19
|
+
toNormalizedRanked(sorting) {
|
|
20
|
+
return (Array.isArray(sorting) ? sorting : [sorting])
|
|
21
|
+
.map((d, i) => ({ ...d, rank: i + 1 }));
|
|
22
|
+
}
|
|
23
|
+
reset() {
|
|
24
|
+
this.set([]);
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Toggles the sorting strategy of the provided key path.
|
|
28
|
+
* If a modifier key is pressed, the sorting will be added to the existing sorting definitions.
|
|
29
|
+
*
|
|
30
|
+
* @param selector - The key path of the data to sort by
|
|
31
|
+
* @param strategy - The sorting strategy to use forcefully. If not provided, the strategy will be toggled between ascending, descending, and unsorted
|
|
32
|
+
*/
|
|
33
|
+
toggle(selector, strategy) {
|
|
34
|
+
const defaultSortingStrategy = DataGridSortingStrategy.Descending;
|
|
35
|
+
const sortings = this.get();
|
|
36
|
+
const existing = sortings.find(x => x.selector === selector);
|
|
37
|
+
const allowMultiple = KeyboardController.shift || KeyboardController.meta || KeyboardController.ctrl;
|
|
38
|
+
switch (true) {
|
|
39
|
+
case allowMultiple && !!strategy:
|
|
40
|
+
this.set([...sortings, { selector, strategy }]);
|
|
41
|
+
break;
|
|
42
|
+
case allowMultiple && existing?.selector !== selector:
|
|
43
|
+
this.set([...sortings, { selector, strategy: defaultSortingStrategy }]);
|
|
44
|
+
break;
|
|
45
|
+
case allowMultiple && existing?.strategy === DataGridSortingStrategy.Descending:
|
|
46
|
+
this.set(sortings.map(x => x.selector !== selector ? x : {
|
|
47
|
+
selector,
|
|
48
|
+
strategy: DataGridSortingStrategy.Ascending,
|
|
49
|
+
}));
|
|
50
|
+
break;
|
|
51
|
+
case allowMultiple:
|
|
52
|
+
this.set(sortings.filter(x => x.selector !== selector));
|
|
53
|
+
break;
|
|
54
|
+
case !!strategy:
|
|
55
|
+
this.set({ selector, strategy });
|
|
56
|
+
break;
|
|
57
|
+
case existing?.selector !== selector:
|
|
58
|
+
this.set({ selector, strategy: defaultSortingStrategy });
|
|
59
|
+
break;
|
|
60
|
+
case existing?.strategy === DataGridSortingStrategy.Descending:
|
|
61
|
+
this.set({ selector, strategy: DataGridSortingStrategy.Ascending });
|
|
62
|
+
break;
|
|
63
|
+
default:
|
|
64
|
+
this.reset();
|
|
65
|
+
break;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Sorts the provided data based on the current sorting definitions
|
|
70
|
+
* @param data - The data to sort
|
|
71
|
+
* @returns - The sorted data
|
|
72
|
+
*/
|
|
73
|
+
toSorted(data) {
|
|
74
|
+
const sorting = this.get();
|
|
75
|
+
if (!sorting?.length) {
|
|
76
|
+
return data;
|
|
77
|
+
}
|
|
78
|
+
return data.sort((a, b) => {
|
|
79
|
+
for (const definition of sorting) {
|
|
80
|
+
const { selector, strategy } = definition;
|
|
81
|
+
const aValue = getValueByKeyPath(a, selector) ?? Infinity;
|
|
82
|
+
const bValue = getValueByKeyPath(b, selector) ?? Infinity;
|
|
83
|
+
if (aValue < bValue) {
|
|
84
|
+
return strategy === DataGridSortingStrategy.Ascending ? -1 : 1;
|
|
85
|
+
}
|
|
86
|
+
else if (aValue > bValue) {
|
|
87
|
+
return strategy === DataGridSortingStrategy.Ascending ? 1 : -1;
|
|
88
|
+
}
|
|
89
|
+
// If values are equal, continue to the next level of sorting
|
|
90
|
+
}
|
|
91
|
+
return 0; // Items are equal in all sorting criteria
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
}
|
|
@@ -208,7 +208,7 @@
|
|
|
208
208
|
},
|
|
209
209
|
{
|
|
210
210
|
"name": "sortingChange",
|
|
211
|
-
"type": "EventDispatcher<
|
|
211
|
+
"type": "EventDispatcher<DataGridRankedSortDefinition<TData>[]>"
|
|
212
212
|
},
|
|
213
213
|
{
|
|
214
214
|
"name": "rowDetailsOpen",
|
|
@@ -321,6 +321,11 @@
|
|
|
321
321
|
"type": "DataGridSelectionController<TData>",
|
|
322
322
|
"default": "\"new DataGridSelectionController(this)\""
|
|
323
323
|
},
|
|
324
|
+
{
|
|
325
|
+
"name": "sortingController",
|
|
326
|
+
"type": "DataGridSortingController<TData>",
|
|
327
|
+
"default": "\"new DataGridSortingController(this)\""
|
|
328
|
+
},
|
|
324
329
|
{
|
|
325
330
|
"name": "rowIntersectionObserver",
|
|
326
331
|
"type": "IntersectionObserver | undefined"
|
|
@@ -607,7 +612,7 @@
|
|
|
607
612
|
},
|
|
608
613
|
{
|
|
609
614
|
"name": "sortingChange",
|
|
610
|
-
"type": "CustomEvent<
|
|
615
|
+
"type": "CustomEvent<DataGridRankedSortDefinition<TData>[]>"
|
|
611
616
|
},
|
|
612
617
|
{
|
|
613
618
|
"name": "rowDetailsOpen",
|
|
@@ -3337,7 +3342,7 @@
|
|
|
3337
3342
|
},
|
|
3338
3343
|
{
|
|
3339
3344
|
"name": "sortingChange",
|
|
3340
|
-
"type": "EventDispatcher<
|
|
3345
|
+
"type": "EventDispatcher<DataGridRankedSortDefinition<TData>[]>"
|
|
3341
3346
|
},
|
|
3342
3347
|
{
|
|
3343
3348
|
"name": "rowDetailsOpen",
|
|
@@ -3447,6 +3452,10 @@
|
|
|
3447
3452
|
"name": "selectionController",
|
|
3448
3453
|
"type": "DataGridSelectionController<TData>"
|
|
3449
3454
|
},
|
|
3455
|
+
{
|
|
3456
|
+
"name": "sortingController",
|
|
3457
|
+
"type": "DataGridSortingController<TData>"
|
|
3458
|
+
},
|
|
3450
3459
|
{
|
|
3451
3460
|
"name": "rowIntersectionObserver",
|
|
3452
3461
|
"type": "IntersectionObserver | undefined"
|
|
@@ -3712,7 +3721,7 @@
|
|
|
3712
3721
|
},
|
|
3713
3722
|
{
|
|
3714
3723
|
"name": "sortingChange",
|
|
3715
|
-
"type": "CustomEvent<
|
|
3724
|
+
"type": "CustomEvent<DataGridRankedSortDefinition<TData>[]>"
|
|
3716
3725
|
},
|
|
3717
3726
|
{
|
|
3718
3727
|
"name": "rowDetailsOpen",
|
package/dist/index.d.ts
CHANGED
|
@@ -19,7 +19,8 @@ import '@3mo/focus-ring';
|
|
|
19
19
|
import './types.js';
|
|
20
20
|
export * from './DataGridColumn.js';
|
|
21
21
|
export * from './columns/index.js';
|
|
22
|
-
export
|
|
22
|
+
export * from './DataGridSelectionController.js';
|
|
23
|
+
export * from './DataGridSortingController.js';
|
|
23
24
|
export * from './DataGrid.js';
|
|
24
25
|
export * from './DataGridHeader.js';
|
|
25
26
|
export * from './DataGridHeaderSeparator.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AACrC,OAAO,WAAW,CAAA;AAClB,OAAO,WAAW,CAAA;AAClB,OAAO,gBAAgB,CAAA;AACvB,OAAO,WAAW,CAAA;AAClB,OAAO,kBAAkB,CAAA;AACzB,OAAO,eAAe,CAAA;AACtB,OAAO,oBAAoB,CAAA;AAC3B,OAAO,kBAAkB,CAAA;AACzB,OAAO,uBAAuB,CAAA;AAC9B,OAAO,mBAAmB,CAAA;AAC1B,OAAO,cAAc,CAAA;AACrB,OAAO,eAAe,CAAA;AACtB,OAAO,kBAAkB,CAAA;AACzB,OAAO,cAAc,CAAA;AACrB,OAAO,UAAU,CAAA;AACjB,OAAO,aAAa,CAAA;AACpB,OAAO,iBAAiB,CAAA;AACxB,OAAO,YAAY,CAAA;AACnB,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AACrC,OAAO,WAAW,CAAA;AAClB,OAAO,WAAW,CAAA;AAClB,OAAO,gBAAgB,CAAA;AACvB,OAAO,WAAW,CAAA;AAClB,OAAO,kBAAkB,CAAA;AACzB,OAAO,eAAe,CAAA;AACtB,OAAO,oBAAoB,CAAA;AAC3B,OAAO,kBAAkB,CAAA;AACzB,OAAO,uBAAuB,CAAA;AAC9B,OAAO,mBAAmB,CAAA;AAC1B,OAAO,cAAc,CAAA;AACrB,OAAO,eAAe,CAAA;AACtB,OAAO,kBAAkB,CAAA;AACzB,OAAO,cAAc,CAAA;AACrB,OAAO,UAAU,CAAA;AACjB,OAAO,aAAa,CAAA;AACpB,OAAO,iBAAiB,CAAA;AACxB,OAAO,YAAY,CAAA;AACnB,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kCAAkC,CAAA;AAChD,cAAc,gCAAgC,CAAA;AAC9C,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kCAAkC,CAAA;AAChD,cAAc,qCAAqC,CAAA;AACnD,cAAc,mBAAmB,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -19,7 +19,8 @@ import '@3mo/focus-ring';
|
|
|
19
19
|
import './types.js';
|
|
20
20
|
export * from './DataGridColumn.js';
|
|
21
21
|
export * from './columns/index.js';
|
|
22
|
-
export
|
|
22
|
+
export * from './DataGridSelectionController.js';
|
|
23
|
+
export * from './DataGridSortingController.js';
|
|
23
24
|
export * from './DataGrid.js';
|
|
24
25
|
export * from './DataGridHeader.js';
|
|
25
26
|
export * from './DataGridHeaderSeparator.js';
|