@3mo/data-grid 0.1.5 → 0.2.0
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 -7
- package/dist/DataGrid.d.ts.map +1 -1
- package/dist/DataGrid.js +4 -24
- package/dist/DataGridCell.d.ts +14 -4
- package/dist/DataGridCell.d.ts.map +1 -1
- package/dist/DataGridCell.js +116 -11
- package/dist/columns/DataGridColumn.d.ts +1 -1
- package/dist/columns/DataGridColumn.d.ts.map +1 -1
- package/dist/columns/DataGridColumn.js +3 -2
- package/dist/columns/DataGridColumnBoolean.js +1 -1
- package/dist/columns/DataGridColumnCurrency.js +1 -1
- package/dist/columns/DataGridColumnDate.js +1 -1
- package/dist/columns/DataGridColumnImage.d.ts +1 -1
- package/dist/columns/DataGridColumnImage.d.ts.map +1 -1
- package/dist/columns/DataGridColumnImage.js +4 -3
- package/dist/columns/DataGridColumnNumber.js +1 -1
- package/dist/columns/DataGridColumnNumberBase.d.ts +5 -5
- package/dist/columns/DataGridColumnNumberBase.d.ts.map +1 -1
- package/dist/columns/DataGridColumnPercent.js +1 -1
- package/dist/columns/DataGridColumnText.js +1 -1
- package/dist/rows/DataGridRow.d.ts +0 -5
- package/dist/rows/DataGridRow.d.ts.map +1 -1
- package/dist/rows/DataGridRow.js +6 -37
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
package/dist/DataGrid.d.ts
CHANGED
|
@@ -22,7 +22,7 @@ export declare const enum DataGridSelectionBehaviorOnDataChange {
|
|
|
22
22
|
}
|
|
23
23
|
export declare const enum DataGridEditability {
|
|
24
24
|
Never = "never",
|
|
25
|
-
|
|
25
|
+
Cell = "cell",
|
|
26
26
|
Always = "always"
|
|
27
27
|
}
|
|
28
28
|
export type DataGridSorting<TData> = {
|
|
@@ -76,10 +76,7 @@ export type DataGridSorting<TData> = {
|
|
|
76
76
|
* @fires sidePanelClose {CustomEvent}
|
|
77
77
|
* @fires sortingChange {CustomEvent<DataGridSorting<TData>>}
|
|
78
78
|
* @fires rowClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
|
|
79
|
-
* @fires rowConnected {CustomEvent<DataGridRow<TData, TDetailsElement>>}
|
|
80
|
-
* @fires rowDisconnected {CustomEvent<DataGridRow<TData, TDetailsElement>>}
|
|
81
79
|
* @fires rowDoubleClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
|
|
82
|
-
* @fires rowEdit {CustomEvent<DataGridRow<TData, TDetailsElement>>}
|
|
83
80
|
* @fires cellEdit {CustomEvent<DataGridCell<any, TData, TDetailsElement>>}
|
|
84
81
|
*/
|
|
85
82
|
export declare class DataGrid<TData, TDetailsElement extends Element | undefined = undefined> extends Component {
|
|
@@ -95,11 +92,8 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
|
|
|
95
92
|
readonly sidePanelOpen: EventDispatcher<DataGridSidePanelTab>;
|
|
96
93
|
readonly sidePanelClose: EventDispatcher;
|
|
97
94
|
readonly sortingChange: EventDispatcher<DataGridSorting<TData> | undefined>;
|
|
98
|
-
readonly rowConnected: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
|
|
99
|
-
readonly rowDisconnected: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
|
|
100
95
|
readonly rowClick: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
|
|
101
96
|
readonly rowDoubleClick: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
|
|
102
|
-
readonly rowEdit: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
|
|
103
97
|
readonly cellEdit: EventDispatcher<DataGridCell<any, TData, TDetailsElement>>;
|
|
104
98
|
data: TData[];
|
|
105
99
|
columns: ColumnDefinition<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,EAA8C,cAAc,EAA+C,kBAAkB,EAAS,MAAM,WAAW,CAAA;AAE9L,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;AAIhE,OAAO,EAAgB,gBAAgB,EAAE,YAAY,EAAkC,cAAc,EAAE,WAAW,EAAqB,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAqB/K,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,MAAM,CAAA;AAEhD,0BAAkB,qBAAqB;IACtC,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACrB;AAED,0BAAkB,uBAAuB;IACxC,UAAU,eAAe;IACzB,SAAS,cAAc;CACvB;AAED,0BAAkB,qCAAqC;IACtD,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,QAAQ,aAAa;CACrB;AAED,0BAAkB,mBAAmB;IACpC,KAAK,UAAU;IACf,
|
|
1
|
+
{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../DataGrid.ts"],"names":[],"mappings":"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"}
|
package/dist/DataGrid.js
CHANGED
|
@@ -77,10 +77,7 @@ Localizer.register("de" /* LanguageCode.German */, {
|
|
|
77
77
|
* @fires sidePanelClose {CustomEvent}
|
|
78
78
|
* @fires sortingChange {CustomEvent<DataGridSorting<TData>>}
|
|
79
79
|
* @fires rowClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
|
|
80
|
-
* @fires rowConnected {CustomEvent<DataGridRow<TData, TDetailsElement>>}
|
|
81
|
-
* @fires rowDisconnected {CustomEvent<DataGridRow<TData, TDetailsElement>>}
|
|
82
80
|
* @fires rowDoubleClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
|
|
83
|
-
* @fires rowEdit {CustomEvent<DataGridRow<TData, TDetailsElement>>}
|
|
84
81
|
* @fires cellEdit {CustomEvent<DataGridCell<any, TData, TDetailsElement>>}
|
|
85
82
|
*/
|
|
86
83
|
let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
@@ -332,7 +329,6 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
332
329
|
firstUpdated(props) {
|
|
333
330
|
super.firstUpdated(props);
|
|
334
331
|
this.extractColumnsIfNotSetExplicitly();
|
|
335
|
-
this.rowEdit.subscribe(() => this.requestUpdate());
|
|
336
332
|
this.cellEdit.subscribe(() => this.requestUpdate());
|
|
337
333
|
this.setPage(1);
|
|
338
334
|
}
|
|
@@ -805,15 +801,11 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
805
801
|
.filter(key => !key.startsWith('_'))
|
|
806
802
|
.map(key => {
|
|
807
803
|
const columnElement = document.createElement(getDefaultColumnElement(getValueByKeyPath(sampleData, key)));
|
|
804
|
+
columnElement.heading = key.replace(/([A-Z])/g, ' $1').charAt(0).toUpperCase() + key.replace(/([A-Z])/g, ' $1').slice(1);
|
|
805
|
+
columnElement.dataGrid = key;
|
|
806
|
+
const definition = columnElement.definition;
|
|
808
807
|
columnElement.remove();
|
|
809
|
-
return
|
|
810
|
-
heading: key.replace(/([A-Z])/g, ' $1').charAt(0).toUpperCase() + key.replace(/([A-Z])/g, ' $1').slice(1),
|
|
811
|
-
dataSelector: key,
|
|
812
|
-
width: '1fr',
|
|
813
|
-
hidden: false,
|
|
814
|
-
getContentTemplate: columnElement.getContentTemplate.bind(columnElement),
|
|
815
|
-
getEditContentTemplate: columnElement.getEditContentTemplate.bind(columnElement),
|
|
816
|
-
};
|
|
808
|
+
return definition;
|
|
817
809
|
});
|
|
818
810
|
}
|
|
819
811
|
get visibleColumns() {
|
|
@@ -859,21 +851,12 @@ __decorate([
|
|
|
859
851
|
__decorate([
|
|
860
852
|
event()
|
|
861
853
|
], DataGrid.prototype, "sortingChange", void 0);
|
|
862
|
-
__decorate([
|
|
863
|
-
event()
|
|
864
|
-
], DataGrid.prototype, "rowConnected", void 0);
|
|
865
|
-
__decorate([
|
|
866
|
-
event()
|
|
867
|
-
], DataGrid.prototype, "rowDisconnected", void 0);
|
|
868
854
|
__decorate([
|
|
869
855
|
event()
|
|
870
856
|
], DataGrid.prototype, "rowClick", void 0);
|
|
871
857
|
__decorate([
|
|
872
858
|
event()
|
|
873
859
|
], DataGrid.prototype, "rowDoubleClick", void 0);
|
|
874
|
-
__decorate([
|
|
875
|
-
event()
|
|
876
|
-
], DataGrid.prototype, "rowEdit", void 0);
|
|
877
860
|
__decorate([
|
|
878
861
|
event()
|
|
879
862
|
], DataGrid.prototype, "cellEdit", void 0);
|
|
@@ -1005,11 +988,8 @@ function subDataGridSelectorChanged() {
|
|
|
1005
988
|
?detailsOnClick=${this.detailsOnClick}
|
|
1006
989
|
.getRowContextMenuTemplate=${this.getRowContextMenuTemplate}
|
|
1007
990
|
editability=${this.editability}
|
|
1008
|
-
@rowConnected=${(e) => this.rowConnected.dispatch(e.detail)}
|
|
1009
|
-
@rowDisconnected=${(e) => this.rowDisconnected.dispatch(e.detail)}
|
|
1010
991
|
@rowClick=${(e) => this.rowClick.dispatch(e.detail)}
|
|
1011
992
|
@rowDoubleClick=${(e) => this.rowDoubleClick.dispatch(e.detail)}
|
|
1012
|
-
@rowEdit=${(e) => this.rowEdit.dispatch(e.detail)}
|
|
1013
993
|
@cellEdit=${(e) => this.cellEdit.dispatch(e.detail)}
|
|
1014
994
|
></mo-data-grid>
|
|
1015
995
|
`;
|
package/dist/DataGridCell.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component } from '@a11d/lit';
|
|
1
|
+
import { Component, HTMLTemplateResult } from '@a11d/lit';
|
|
2
2
|
import { ColumnDefinition, DataGridRow } from './index.js';
|
|
3
3
|
/**
|
|
4
4
|
* @element mo-data-grid-cell
|
|
@@ -6,18 +6,28 @@ import { ColumnDefinition, DataGridRow } from './index.js';
|
|
|
6
6
|
* @attr value
|
|
7
7
|
* @attr column
|
|
8
8
|
* @attr row
|
|
9
|
-
* @attr editing
|
|
10
9
|
*/
|
|
11
10
|
export declare class DataGridCell<TValue extends KeyPathValueOf<TData>, TData = any, TDetailsElement extends Element | undefined = undefined> extends Component {
|
|
12
11
|
value: TValue;
|
|
13
12
|
column: ColumnDefinition<TData, TValue>;
|
|
14
13
|
row: DataGridRow<TData, TDetailsElement>;
|
|
15
|
-
editing
|
|
14
|
+
private editing;
|
|
15
|
+
get dataGrid(): import("./DataGrid.js").DataGrid<TData, TDetailsElement>;
|
|
16
16
|
get data(): TData;
|
|
17
17
|
get dataSelector(): KeyPathOf<TData>;
|
|
18
|
+
private get cellIndex();
|
|
19
|
+
private get rowIndex();
|
|
20
|
+
private get isEditable();
|
|
21
|
+
get isEditing(): boolean;
|
|
22
|
+
protected handlePointerDown(event: PointerEvent): void;
|
|
23
|
+
protected handleDoubleClick(event: MouseEvent): void;
|
|
24
|
+
protected handleKeyDown(event: KeyboardEvent): Promise<void>;
|
|
25
|
+
private focusCell;
|
|
18
26
|
static get styles(): import("@a11d/lit").CSSResult;
|
|
19
27
|
private get tooltip();
|
|
20
|
-
protected get template():
|
|
28
|
+
protected get template(): HTMLTemplateResult;
|
|
29
|
+
private get contentTemplate();
|
|
30
|
+
private get editContentTemplate();
|
|
21
31
|
}
|
|
22
32
|
declare global {
|
|
23
33
|
interface HTMLElementTagNameMap {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridCell.d.ts","sourceRoot":"","sources":["../DataGridCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,
|
|
1
|
+
{"version":3,"file":"DataGridCell.d.ts","sourceRoot":"","sources":["../DataGridCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAsD,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAGxH,OAAO,EAAE,gBAAgB,EAAuB,WAAW,EAAE,MAAM,YAAY,CAAA;AAO/E;;;;;;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,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IACxC,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,qBAAsC;IAEtD,OAAO,KAAK,SAAS,GAAkD;IACvE,OAAO,KAAK,QAAQ,GAA0D;IAE9E,OAAO,KAAK,UAAU,GAIrB;IAED,IAAI,SAAS,YAGZ;IAGD,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,YAAY;IAO/C,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;cAQ7B,aAAa,CAAC,KAAK,EAAE,aAAa;IAyClD,OAAO,CAAC,SAAS;IAWjB,WAAoB,MAAM,kCA0CzB;IAED,OAAO,KAAK,OAAO,GAGlB;IAED,cAAuB,QAAQ,uBAU9B;IAED,OAAO,KAAK,eAAe,GAE1B;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
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { component, Component, html, property, css } from '@a11d/lit';
|
|
2
|
+
import { component, Component, html, property, css, eventListener, state, nothing } from '@a11d/lit';
|
|
3
|
+
import { NotificationHost } from '@a11d/lit-application';
|
|
3
4
|
import { Localizer } from '@3mo/localization';
|
|
4
5
|
Localizer.register("de" /* LanguageCode.German */, {
|
|
5
6
|
'Using the clipboard is not allowed in an insecure browser environment': 'In einer unsicheren Browser-Umgebung darf kein Text in die Zwischenablage kopiert werden',
|
|
@@ -11,15 +12,89 @@ Localizer.register("de" /* LanguageCode.German */, {
|
|
|
11
12
|
* @attr value
|
|
12
13
|
* @attr column
|
|
13
14
|
* @attr row
|
|
14
|
-
* @attr editing
|
|
15
15
|
*/
|
|
16
16
|
let DataGridCell = class DataGridCell extends Component {
|
|
17
17
|
constructor() {
|
|
18
18
|
super(...arguments);
|
|
19
19
|
this.editing = false;
|
|
20
20
|
}
|
|
21
|
+
get dataGrid() { return this.row.dataGrid; }
|
|
21
22
|
get data() { return this.row.data; }
|
|
22
23
|
get dataSelector() { return this.column.dataSelector; }
|
|
24
|
+
get cellIndex() { return this.row.cells.indexOf(this); }
|
|
25
|
+
get rowIndex() { return this.dataGrid.rows.indexOf(this.row); }
|
|
26
|
+
get isEditable() {
|
|
27
|
+
return !!this.column.editable
|
|
28
|
+
&& this.dataGrid.editability !== "never" /* DataGridEditability.Never */
|
|
29
|
+
&& [undefined, null, nothing].includes(this.editContentTemplate) === false;
|
|
30
|
+
}
|
|
31
|
+
get isEditing() {
|
|
32
|
+
return this.isEditable
|
|
33
|
+
&& (this.editing || this.dataGrid.editability === "always" /* DataGridEditability.Always */);
|
|
34
|
+
}
|
|
35
|
+
handlePointerDown(event) {
|
|
36
|
+
if (this.isEditing && event.composedPath().includes(this) === false) {
|
|
37
|
+
this.editing = false;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
handleDoubleClick(event) {
|
|
41
|
+
if (this.dataGrid.editability === "cell" /* DataGridEditability.Cell */) {
|
|
42
|
+
event.preventDefault();
|
|
43
|
+
this.editing = true;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
async handleKeyDown(event) {
|
|
47
|
+
var _a, _b, _c;
|
|
48
|
+
switch (event.key) {
|
|
49
|
+
case 'Enter':
|
|
50
|
+
event.preventDefault();
|
|
51
|
+
if (this.isEditable) {
|
|
52
|
+
this.editing = true;
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
this.click();
|
|
56
|
+
}
|
|
57
|
+
break;
|
|
58
|
+
case 'Escape':
|
|
59
|
+
event.preventDefault();
|
|
60
|
+
this.editing = false;
|
|
61
|
+
await this.updateComplete;
|
|
62
|
+
this.focusCell(event, this);
|
|
63
|
+
break;
|
|
64
|
+
case 'c':
|
|
65
|
+
if (this.isEditing === false && event.ctrlKey) {
|
|
66
|
+
event.preventDefault();
|
|
67
|
+
await navigator.clipboard.writeText(String(this.value));
|
|
68
|
+
(_a = NotificationHost.instance) === null || _a === void 0 ? void 0 : _a.notifySuccess(t('Copied to clipboard'));
|
|
69
|
+
}
|
|
70
|
+
break;
|
|
71
|
+
case 'Tab':
|
|
72
|
+
case 'ArrowRight':
|
|
73
|
+
this.focusCell(event, this.row.cells.at(this.cellIndex === this.dataGrid.visibleColumns.length - 1 ? 0 : this.cellIndex + 1));
|
|
74
|
+
break;
|
|
75
|
+
case 'ArrowLeft':
|
|
76
|
+
this.focusCell(event, this.row.cells.at(this.cellIndex === 0 ? this.dataGrid.visibleColumns.length - 1 : this.cellIndex - 1));
|
|
77
|
+
break;
|
|
78
|
+
case 'ArrowUp':
|
|
79
|
+
this.focusCell(event, (_b = this.dataGrid.rows.at(this.rowIndex === 0 ? this.dataGrid.rows.length - 1 : this.rowIndex - 1)) === null || _b === void 0 ? void 0 : _b.cells.at(this.cellIndex));
|
|
80
|
+
break;
|
|
81
|
+
case 'ArrowDown':
|
|
82
|
+
this.focusCell(event, (_c = this.dataGrid.rows.at(this.rowIndex === this.dataGrid.rows.length - 1 ? 0 : this.rowIndex + 1)) === null || _c === void 0 ? void 0 : _c.cells.at(this.cellIndex));
|
|
83
|
+
break;
|
|
84
|
+
default:
|
|
85
|
+
break;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
focusCell(event, cell) {
|
|
89
|
+
if (cell && this.isEditing === false) {
|
|
90
|
+
event.preventDefault();
|
|
91
|
+
cell.focus();
|
|
92
|
+
this.editing = false;
|
|
93
|
+
if (this.dataGrid.selectionCheckboxesHidden) {
|
|
94
|
+
this.dataGrid.select([...(event.shiftKey ? this.dataGrid.selectedData : []), cell.row.data]);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
23
98
|
static get styles() {
|
|
24
99
|
return css `
|
|
25
100
|
:host {
|
|
@@ -33,7 +108,11 @@ let DataGridCell = class DataGridCell extends Component {
|
|
|
33
108
|
font-size: small;
|
|
34
109
|
}
|
|
35
110
|
|
|
36
|
-
:host([
|
|
111
|
+
:host(:not([isEditing]):focus) {
|
|
112
|
+
outline: 2px solid var(--mo-color-accent);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
:host([isEditing]) {
|
|
37
116
|
display: grid;
|
|
38
117
|
}
|
|
39
118
|
|
|
@@ -53,7 +132,7 @@ let DataGridCell = class DataGridCell extends Component {
|
|
|
53
132
|
line-height: var(--mo-data-grid-row-height);
|
|
54
133
|
}
|
|
55
134
|
|
|
56
|
-
:host([
|
|
135
|
+
:host([isEditing]) > :first-child {
|
|
57
136
|
align-self: center;
|
|
58
137
|
justify-self: stretch;
|
|
59
138
|
}
|
|
@@ -64,14 +143,24 @@ let DataGridCell = class DataGridCell extends Component {
|
|
|
64
143
|
return allowedTitleTypes.includes(typeof this.value) ? String(this.value) : '';
|
|
65
144
|
}
|
|
66
145
|
get template() {
|
|
67
|
-
var _a, _b, _c, _d, _e;
|
|
68
146
|
this.title = this.tooltip;
|
|
69
|
-
|
|
70
|
-
const editContentTemplate = (_e = (_d = this.column).getEditContentTemplate) === null || _e === void 0 ? void 0 : _e.call(_d, this.value, this.data);
|
|
147
|
+
this.toggleAttribute('isEditing', this.isEditing);
|
|
71
148
|
this.setAttribute('alignment', this.column.alignment || 'start');
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
149
|
+
if (this.isEditing) {
|
|
150
|
+
this.removeAttribute('tabindex');
|
|
151
|
+
}
|
|
152
|
+
else {
|
|
153
|
+
this.setAttribute('tabindex', '-1');
|
|
154
|
+
}
|
|
155
|
+
return this.isEditing ? this.editContentTemplate : this.contentTemplate;
|
|
156
|
+
}
|
|
157
|
+
get contentTemplate() {
|
|
158
|
+
var _a, _b, _c;
|
|
159
|
+
return (_c = (_b = (_a = this.column).getContentTemplate) === null || _b === void 0 ? void 0 : _b.call(_a, this.value, this.data)) !== null && _c !== void 0 ? _c : html `${this.value}`;
|
|
160
|
+
}
|
|
161
|
+
get editContentTemplate() {
|
|
162
|
+
var _a, _b;
|
|
163
|
+
return (_b = (_a = this.column).getEditContentTemplate) === null || _b === void 0 ? void 0 : _b.call(_a, this.value, this.data);
|
|
75
164
|
}
|
|
76
165
|
};
|
|
77
166
|
__decorate([
|
|
@@ -84,8 +173,24 @@ __decorate([
|
|
|
84
173
|
property({ type: Object })
|
|
85
174
|
], DataGridCell.prototype, "row", void 0);
|
|
86
175
|
__decorate([
|
|
87
|
-
|
|
176
|
+
state({
|
|
177
|
+
updated() {
|
|
178
|
+
var _a;
|
|
179
|
+
if (this.isEditing) {
|
|
180
|
+
(_a = this.renderRoot.querySelector('[data-focus]')) === null || _a === void 0 ? void 0 : _a.focus();
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
})
|
|
88
184
|
], DataGridCell.prototype, "editing", void 0);
|
|
185
|
+
__decorate([
|
|
186
|
+
eventListener({ target: document, type: 'pointerdown' })
|
|
187
|
+
], DataGridCell.prototype, "handlePointerDown", null);
|
|
188
|
+
__decorate([
|
|
189
|
+
eventListener('dblclick')
|
|
190
|
+
], DataGridCell.prototype, "handleDoubleClick", null);
|
|
191
|
+
__decorate([
|
|
192
|
+
eventListener('keydown')
|
|
193
|
+
], DataGridCell.prototype, "handleKeyDown", null);
|
|
89
194
|
DataGridCell = __decorate([
|
|
90
195
|
component('mo-data-grid-cell')
|
|
91
196
|
], DataGridCell);
|
|
@@ -23,7 +23,7 @@ export declare abstract class DataGridColumn<TData, TValue> extends Component {
|
|
|
23
23
|
nonEditable: boolean;
|
|
24
24
|
get definition(): ColumnDefinition<TData, TValue>;
|
|
25
25
|
abstract getContentTemplate(value: TValue | undefined, data: TData): HTMLTemplateResult;
|
|
26
|
-
abstract getEditContentTemplate(value: TValue | undefined, data: TData): HTMLTemplateResult;
|
|
26
|
+
abstract getEditContentTemplate?(value: TValue | undefined, data: TData): HTMLTemplateResult;
|
|
27
27
|
protected handleEdit(value: TValue | undefined, data: TData): void;
|
|
28
28
|
connectedCallback(): void;
|
|
29
29
|
protected updated(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridColumn.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAEnE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAE9D;;;;;;;;;GASG;AACH,8BAAsB,cAAc,CAAC,KAAK,EAAE,MAAM,CAAE,SAAQ,SAAS;IACxC,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,SAAS,CAAA;IAE3D,KAAK,SAAuB;IACF,MAAM,UAAQ;IACvB,OAAO,SAAK;IACZ,SAAS,SAAU;IACV,KAAK,EAAG,MAAM,CAAA;IACvB,YAAY,EAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAChB,WAAW,UAAQ;IACnB,WAAW,UAAQ;IAE/D,IAAI,UAAU,IAAI,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAahD;IAED,QAAQ,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IACvF,QAAQ,CAAC,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;
|
|
1
|
+
{"version":3,"file":"DataGridColumn.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAEnE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAE9D;;;;;;;;;GASG;AACH,8BAAsB,cAAc,CAAC,KAAK,EAAE,MAAM,CAAE,SAAQ,SAAS;IACxC,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,SAAS,CAAA;IAE3D,KAAK,SAAuB;IACF,MAAM,UAAQ;IACvB,OAAO,SAAK;IACZ,SAAS,SAAU;IACV,KAAK,EAAG,MAAM,CAAA;IACvB,YAAY,EAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAChB,WAAW,UAAQ;IACnB,WAAW,UAAQ;IAE/D,IAAI,UAAU,IAAI,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAahD;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"}
|
|
@@ -23,6 +23,7 @@ export class DataGridColumn extends Component {
|
|
|
23
23
|
this.nonEditable = false;
|
|
24
24
|
}
|
|
25
25
|
get definition() {
|
|
26
|
+
var _a;
|
|
26
27
|
return {
|
|
27
28
|
dataSelector: this.dataSelector,
|
|
28
29
|
heading: this.heading,
|
|
@@ -31,9 +32,9 @@ export class DataGridColumn extends Component {
|
|
|
31
32
|
hidden: this.hidden,
|
|
32
33
|
width: !AsteriskSyntaxStyleHandler.regex.test(this.width) ? this.width : `${AsteriskSyntaxStyleHandler.getProportion(this.width)}fr`,
|
|
33
34
|
sortable: !this.nonSortable,
|
|
34
|
-
editable: !this.nonEditable,
|
|
35
|
+
editable: !this.nonEditable && this.getEditContentTemplate !== undefined,
|
|
35
36
|
getContentTemplate: this.getContentTemplate.bind(this),
|
|
36
|
-
getEditContentTemplate: this.getEditContentTemplate.bind(this),
|
|
37
|
+
getEditContentTemplate: (_a = this.getEditContentTemplate) === null || _a === void 0 ? void 0 : _a.bind(this),
|
|
37
38
|
};
|
|
38
39
|
}
|
|
39
40
|
handleEdit(value, data) {
|
|
@@ -27,7 +27,7 @@ let DataGridColumnBoolean = class DataGridColumnBoolean extends DataGridColumn {
|
|
|
27
27
|
}
|
|
28
28
|
getEditContentTemplate(value, data) {
|
|
29
29
|
return html `
|
|
30
|
-
<mo-checkbox label=${this.heading}
|
|
30
|
+
<mo-checkbox label=${this.heading} data-focus
|
|
31
31
|
?checked=${value}
|
|
32
32
|
@change=${(e) => this.handleEdit(e.detail === 'checked', data)}
|
|
33
33
|
></mo-checkbox>
|
|
@@ -14,7 +14,7 @@ let DataGridColumnCurrency = class DataGridColumnCurrency extends DataGridColumn
|
|
|
14
14
|
}
|
|
15
15
|
getEditContentTemplate(value, data) {
|
|
16
16
|
return html `
|
|
17
|
-
<mo-field-currency dense
|
|
17
|
+
<mo-field-currency dense data-focus
|
|
18
18
|
label=${this.heading}
|
|
19
19
|
value=${ifDefined(value)}
|
|
20
20
|
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
@@ -17,7 +17,7 @@ let DataGridColumnDate = class DataGridColumnDate extends DataGridColumn {
|
|
|
17
17
|
}
|
|
18
18
|
getEditContentTemplate(value, data) {
|
|
19
19
|
return html `
|
|
20
|
-
<mo-field-date dense
|
|
20
|
+
<mo-field-date dense data-focus
|
|
21
21
|
?hideDatePicker=${this.hideDatePicker}
|
|
22
22
|
label=${this.heading}
|
|
23
23
|
.value=${value}
|
|
@@ -2,7 +2,7 @@ import { DataGridColumn } from './DataGridColumn.js';
|
|
|
2
2
|
/** @element mo-data-grid-column-image */
|
|
3
3
|
export declare class DataGridColumnImage<TData> extends DataGridColumn<TData, string> {
|
|
4
4
|
getContentTemplate(value: string | undefined, _data: TData): import("lit-html").HTMLTemplateResult;
|
|
5
|
-
getEditContentTemplate
|
|
5
|
+
getEditContentTemplate: undefined;
|
|
6
6
|
}
|
|
7
7
|
declare global {
|
|
8
8
|
interface HTMLElementTagNameMap {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridColumnImage.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnImage.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,yCAAyC;AACzC,qBACa,mBAAmB,CAAC,KAAK,CAAE,SAAQ,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC;IAE5E,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,KAAK;
|
|
1
|
+
{"version":3,"file":"DataGridColumnImage.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnImage.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,yCAAyC;AACzC,qBACa,mBAAmB,CAAC,KAAK,CAAE,SAAQ,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC;IAE5E,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,KAAK;IAMjD,sBAAsB,YAAY;CAC3C;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,2BAA2B,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAA;KACzD;CACD"}
|
|
@@ -3,15 +3,16 @@ import { component, html, nothing } from '@a11d/lit';
|
|
|
3
3
|
import { DataGridColumn } from './DataGridColumn.js';
|
|
4
4
|
/** @element mo-data-grid-column-image */
|
|
5
5
|
let DataGridColumnImage = class DataGridColumnImage extends DataGridColumn {
|
|
6
|
+
constructor() {
|
|
7
|
+
super(...arguments);
|
|
8
|
+
this.getEditContentTemplate = undefined;
|
|
9
|
+
}
|
|
6
10
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
7
11
|
getContentTemplate(value, _data) {
|
|
8
12
|
return !value ? nothing : html `
|
|
9
13
|
<img style='vertical-align: middle' src=${value} onload='this.hidden = false' onerror='this.hidden = true'/>
|
|
10
14
|
`;
|
|
11
15
|
}
|
|
12
|
-
getEditContentTemplate(value, data) {
|
|
13
|
-
return this.getContentTemplate(value, data);
|
|
14
|
-
}
|
|
15
16
|
};
|
|
16
17
|
DataGridColumnImage = __decorate([
|
|
17
18
|
component('mo-data-grid-column-image')
|
|
@@ -10,7 +10,7 @@ let DataGridColumnNumber = class DataGridColumnNumber extends DataGridColumnNumb
|
|
|
10
10
|
}
|
|
11
11
|
getEditContentTemplate(value, data) {
|
|
12
12
|
return html `
|
|
13
|
-
<mo-field-number dense label=${this.heading}
|
|
13
|
+
<mo-field-number dense label=${this.heading} data-focus
|
|
14
14
|
value=${ifDefined(value)}
|
|
15
15
|
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
16
16
|
></mo-field-number>
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { HTMLTemplateResult } from '@a11d/lit';
|
|
2
2
|
import { DataGridColumn } from './DataGridColumn.js';
|
|
3
3
|
export declare abstract class DataGridColumnNumberBase<TData> extends DataGridColumn<TData, number> {
|
|
4
4
|
sumHeading: string | undefined;
|
|
5
5
|
textAlign: string;
|
|
6
6
|
get definition(): {
|
|
7
7
|
sumHeading: string | undefined;
|
|
8
|
-
getSumTemplate: (sum: number) =>
|
|
8
|
+
getSumTemplate: (sum: number) => HTMLTemplateResult;
|
|
9
9
|
heading: string;
|
|
10
10
|
title?: string | undefined;
|
|
11
11
|
dataSelector: KeyPathOf<TData>;
|
|
@@ -14,9 +14,9 @@ export declare abstract class DataGridColumnNumberBase<TData> extends DataGridCo
|
|
|
14
14
|
hidden?: boolean | undefined;
|
|
15
15
|
sortable?: boolean | undefined;
|
|
16
16
|
editable?: boolean | undefined;
|
|
17
|
-
getContentTemplate?(value: number, data: TData):
|
|
18
|
-
getEditContentTemplate?(value: number, data: TData):
|
|
17
|
+
getContentTemplate?(value: number, data: TData): HTMLTemplateResult;
|
|
18
|
+
getEditContentTemplate?(value: number, data: TData): HTMLTemplateResult;
|
|
19
19
|
};
|
|
20
|
-
abstract getSumTemplate(sum: number):
|
|
20
|
+
abstract getSumTemplate(sum: number): HTMLTemplateResult;
|
|
21
21
|
}
|
|
22
22
|
//# sourceMappingURL=DataGridColumnNumberBase.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridColumnNumberBase.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnNumberBase.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"DataGridColumnNumberBase.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnNumberBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAY,MAAM,WAAW,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,8BAAsB,wBAAwB,CAAC,KAAK,CAAE,SAAQ,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC;IAC9E,UAAU,EAAE,MAAM,GAAG,SAAS,CAAY;IACjC,SAAS,SAAQ;IAEtC,IAAa,UAAU;;;;;;;;;;;;;MAMtB;IAED,QAAQ,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,kBAAkB;CACxD"}
|
|
@@ -10,7 +10,7 @@ let DataGridColumnPercent = class DataGridColumnPercent extends DataGridColumnNu
|
|
|
10
10
|
}
|
|
11
11
|
getEditContentTemplate(value, data) {
|
|
12
12
|
return html `
|
|
13
|
-
<mo-field-percent dense
|
|
13
|
+
<mo-field-percent dense data-focus
|
|
14
14
|
label=${this.heading}
|
|
15
15
|
value=${ifDefined(value)}
|
|
16
16
|
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
@@ -9,7 +9,7 @@ let DataGridColumnText = class DataGridColumnText extends DataGridColumn {
|
|
|
9
9
|
}
|
|
10
10
|
getEditContentTemplate(value, data) {
|
|
11
11
|
return html `
|
|
12
|
-
<mo-field-text dense label=${this.heading}
|
|
12
|
+
<mo-field-text dense label=${this.heading} data-focus
|
|
13
13
|
value=${ifDefined(value)}
|
|
14
14
|
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
15
15
|
></mo-field-text>
|
|
@@ -18,10 +18,7 @@ export declare abstract class DataGridRow<TData, TDetailsElement extends Element
|
|
|
18
18
|
selected: boolean;
|
|
19
19
|
detailsOpen: boolean;
|
|
20
20
|
protected contextMenuOpen: boolean;
|
|
21
|
-
protected editing: boolean;
|
|
22
21
|
get detailsElement(): TDetailsElement | undefined;
|
|
23
|
-
protected connected(): void;
|
|
24
|
-
protected disconnected(): void;
|
|
25
22
|
protected initialized(): void;
|
|
26
23
|
updated(...parameters: Parameters<Component['updated']>): void;
|
|
27
24
|
protected get hasDetails(): boolean;
|
|
@@ -35,8 +32,6 @@ export declare abstract class DataGridRow<TData, TDetailsElement extends Element
|
|
|
35
32
|
protected get detailsTemplate(): HTMLTemplateResult;
|
|
36
33
|
private setSelection;
|
|
37
34
|
protected handleContentClick(): void;
|
|
38
|
-
private dataBeforeEdit?;
|
|
39
|
-
private enableEditMode;
|
|
40
35
|
protected handleContentDoubleClick(): Promise<void>;
|
|
41
36
|
openContextMenu(mouseEvent?: MouseEvent): Promise<void>;
|
|
42
37
|
private get contextMenuData();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,SAAS,
|
|
1
|
+
{"version":3,"file":"DataGridRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,SAAS,EAAyB,kBAAkB,EAAqB,MAAM,WAAW,CAAA;AAG3H,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAyD,MAAM,aAAa,CAAA;AAE3G;;;;;;;;GAQG;AACH,8BAAsB,WAAW,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IACzG,QAAQ,CAAC,iBAAiB,EAAG,eAAe,CAAC,OAAO,CAAC,CAAA;IAE/B,QAAQ,CAAC,KAAK,EAAG,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAEpE,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAC3C,IAAI,EAAG,KAAK,CAAA;IACI,QAAQ,UAAQ;IAChB,WAAW,UAAQ;IAEnB,SAAS,CAAC,eAAe,UAAQ;IAE7E,IAAI,cAAc,gCAEjB;cAEkB,WAAW;IAIrB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAQhE,SAAS,KAAK,UAAU,YAEvB;IAED,WAAoB,MAAM,kCAwFzB;IAED,cAAuB,QAAQ,yCAW9B;IAED,SAAS,CAAC,QAAQ,KAAK,WAAW,IAAI,kBAAkB,CAAA;IAExD,SAAS,KAAK,uBAAuB,uBAepC;IAED,SAAS,KAAK,iBAAiB,uBAc9B;IAED,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAUlG,SAAS,KAAK,6BAA6B,uBAS1C;IAED,SAAS,KAAK,eAAe,uBAK5B;IAED,OAAO,CAAC,YAAY;IAsCpB,SAAS,CAAC,kBAAkB;cAYZ,wBAAwB;IAUlC,eAAe,CAAC,UAAU,CAAC,EAAE,UAAU;IAwB7C,OAAO,KAAK,eAAe,GAI1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAEK,gBAAgB;IAKtB,SAAS,CAAC,aAAa;IAIvB,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO;CAInC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KACxC;CACD"}
|
package/dist/rows/DataGridRow.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { nothing, css, property, Component, html,
|
|
2
|
+
import { nothing, css, property, Component, html, queryAll, style, LitElement, event } from '@a11d/lit';
|
|
3
3
|
import { ContextMenu } from '@3mo/context-menu';
|
|
4
4
|
import { KeyboardController } from '@3mo/keyboard-controller';
|
|
5
5
|
import { DataGridPrimaryContextMenuItem } from '../index.js';
|
|
@@ -18,21 +18,13 @@ export class DataGridRow extends Component {
|
|
|
18
18
|
this.selected = false;
|
|
19
19
|
this.detailsOpen = false;
|
|
20
20
|
this.contextMenuOpen = false;
|
|
21
|
-
this.editing = false;
|
|
22
21
|
}
|
|
23
22
|
get detailsElement() {
|
|
24
23
|
var _a;
|
|
25
24
|
return (_a = this.renderRoot.querySelector('#detailsContainer')) === null || _a === void 0 ? void 0 : _a.firstElementChild;
|
|
26
25
|
}
|
|
27
|
-
connected() {
|
|
28
|
-
this.dataGrid.rowConnected.dispatch(this);
|
|
29
|
-
}
|
|
30
|
-
disconnected() {
|
|
31
|
-
this.dataGrid.rowDisconnected.dispatch(this);
|
|
32
|
-
}
|
|
33
26
|
initialized() {
|
|
34
27
|
this.toggleAttribute('mo-data-grid-row', true);
|
|
35
|
-
this.editing = this.dataGrid.editability === "always" /* DataGridEditability.Always */;
|
|
36
28
|
}
|
|
37
29
|
updated(...parameters) {
|
|
38
30
|
this.cells.forEach(cell => cell.requestUpdate());
|
|
@@ -170,6 +162,7 @@ export class DataGridRow extends Component {
|
|
|
170
162
|
@dblclick=${(e) => e.stopPropagation()}
|
|
171
163
|
>
|
|
172
164
|
<mo-checkbox
|
|
165
|
+
tabindex='-1'
|
|
173
166
|
?disabled=${((_b = (_a = this.dataGrid).isDataSelectable) === null || _b === void 0 ? void 0 : _b.call(_a, this.data)) === false}
|
|
174
167
|
?checked=${this.selected}
|
|
175
168
|
@change=${(e) => this.setSelection(e.detail === 'checked')}
|
|
@@ -180,7 +173,6 @@ export class DataGridRow extends Component {
|
|
|
180
173
|
getCellTemplate(column) {
|
|
181
174
|
return column.hidden ? nothing : html `
|
|
182
175
|
<mo-data-grid-cell
|
|
183
|
-
?editing=${this.editing}
|
|
184
176
|
.row=${this}
|
|
185
177
|
.column=${column}
|
|
186
178
|
.value=${getValueByKeyPath(this.data, column.dataSelector)}
|
|
@@ -241,34 +233,14 @@ export class DataGridRow extends Component {
|
|
|
241
233
|
}
|
|
242
234
|
}
|
|
243
235
|
handleContentClick() {
|
|
244
|
-
if (this.dataGrid.
|
|
245
|
-
this.
|
|
236
|
+
if (this.dataGrid.selectOnClick || this.dataGrid.selectionCheckboxesHidden) {
|
|
237
|
+
this.setSelection(this.dataGrid.selectionCheckboxesHidden || !this.selected);
|
|
246
238
|
}
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
this.setSelection(this.dataGrid.selectionCheckboxesHidden || !this.selected);
|
|
250
|
-
}
|
|
251
|
-
if (this.dataGrid.hasDetails) {
|
|
252
|
-
this.toggleDetails();
|
|
253
|
-
}
|
|
239
|
+
if (this.dataGrid.detailsOnClick && this.dataGrid.hasDetails) {
|
|
240
|
+
this.toggleDetails();
|
|
254
241
|
}
|
|
255
242
|
this.dataGrid.rowClick.dispatch(this);
|
|
256
243
|
}
|
|
257
|
-
enableEditMode() {
|
|
258
|
-
this.dataBeforeEdit = JSON.stringify(this.data);
|
|
259
|
-
this.editing = true;
|
|
260
|
-
const handleClick = (e) => {
|
|
261
|
-
if (e.composedPath().includes(this) === false) {
|
|
262
|
-
const dataAfterEdit = JSON.stringify(this.data);
|
|
263
|
-
if (dataAfterEdit !== this.dataBeforeEdit) {
|
|
264
|
-
this.dataGrid.rowEdit.dispatch(this);
|
|
265
|
-
}
|
|
266
|
-
window.removeEventListener('click', handleClick);
|
|
267
|
-
this.editing = false;
|
|
268
|
-
}
|
|
269
|
-
};
|
|
270
|
-
window.addEventListener('click', handleClick);
|
|
271
|
-
}
|
|
272
244
|
async handleContentDoubleClick() {
|
|
273
245
|
var _a, _b;
|
|
274
246
|
if (this.dataGrid.primaryContextMenuItemOnDoubleClick === true && this.dataGrid.hasContextMenu === true && this.dataGrid.selectionMode === "none" /* DataGridSelectionMode.None */) {
|
|
@@ -339,6 +311,3 @@ __decorate([
|
|
|
339
311
|
__decorate([
|
|
340
312
|
property({ type: Boolean, reflect: true })
|
|
341
313
|
], DataGridRow.prototype, "contextMenuOpen", void 0);
|
|
342
|
-
__decorate([
|
|
343
|
-
state()
|
|
344
|
-
], DataGridRow.prototype, "editing", void 0);
|