@3mo/data-grid 0.26.2 → 0.26.4

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.
Files changed (11) hide show
  1. package/dist/DataGrid.js +246 -246
  2. package/dist/DataGridCell.d.ts.map +1 -1
  3. package/dist/DataGridCell.js +47 -45
  4. package/dist/DataGridColumn.js +29 -29
  5. package/dist/DataGridColumnHeader.js +226 -226
  6. package/dist/DataGridHeader.js +100 -100
  7. package/dist/custom-elements.json +2 -2
  8. package/dist/rows/DataGridDefaultRow.js +26 -26
  9. package/dist/rows/DataGridRow.js +223 -223
  10. package/dist/tsconfig.tsbuildinfo +1 -1
  11. package/package.json +59 -59
package/dist/rows/DataGridRow.js CHANGED
@@ -50,250 +50,250 @@ export class DataGridRow extends Component {
50
50
  return this.dataGrid.detailsController.hasDetail(this.dataRecord);
51
51
  }
52
52
  static get styles() {
53
- return css `
54
- :host {
55
- display: block;
56
- position: relative;
57
- height: auto;
58
- width: 100%;
59
- }
60
-
61
- :host([data-reorderability=${unsafeCSS(ReorderabilityState.Dragging)}]) {
62
- opacity: 0.5;
63
- }
64
-
65
- :host([data-reorderability=${unsafeCSS(ReorderabilityState.DropBefore)}]) {
66
- border-top: 2px solid var(--mo-color-accent);
67
- }
68
-
69
- :host([data-reorderability=${unsafeCSS(ReorderabilityState.DropAfter)}]) {
70
- border-bottom: 2px solid var(--mo-color-accent);
71
- }
72
-
73
- #reorderability {
74
- position: sticky;
75
- z-index: 2;
76
- width: var(--mo-data-grid-column-reorder-width);
77
- height: 100%;
78
- background: var(--mo-data-grid-sticky-part-color);
79
-
80
- mo-icon-button {
81
- cursor: grab;
82
- opacity: 0.5;
83
- }
84
- }
85
-
86
- #detailsExpanderContainer {
87
- position: sticky;
88
- z-index: 2;
89
- inset-inline-start: 0px;
90
- background: var(--mo-data-grid-sticky-expander-part-color, var(--mo-data-grid-sticky-part-color));
91
- }
92
-
93
- #selectionContainer {
94
- width: var(--mo-data-grid-column-selection-width);
95
- position: sticky;
96
- z-index: 2;
97
- height: 100%;
98
- background: var(--mo-data-grid-sticky-part-color);
99
- }
100
-
101
- :host(:hover) {
102
- #contentContainer {
103
- --mo-data-grid-sticky-part-color: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-accent) 25%) !important;
104
- color: inherit;
105
- background: var(--mo-color-accent-transparent) !important;
106
- }
107
-
108
- #contentContainer, #detailsContainer {
109
- &::before {
110
- content: '';
111
- width: 2px;
112
- height: 100%;
113
- top: 0;
114
- position: absolute;
115
- background-color: var(--mo-color-accent);
116
- z-index: 2;
117
- }
118
- }
119
- }
120
-
121
- :host([data-has-alternating-background]) {
122
- #contentContainer, #detailsContainer:not(:has([instanceof*=mo-data-grid])) {
123
- background: var(--mo-data-grid-alternating-background);
124
- --mo-data-grid-sticky-part-color: color-mix(in srgb, var(--mo-color-surface), black var(--mo-data-grid-alternating-background-transparency));
125
- }
126
- }
127
-
128
- #contentContainer {
129
- grid-column: -1 / 1;
130
- }
131
-
132
- #contextMenuIconButtonContainer {
133
- height: 100%;
134
- place-self: end;
135
- position: sticky;
136
- inset-inline-end: 0px;
137
- z-index: 3;
138
- background: var(--mo-data-grid-sticky-part-color);
139
- }
140
-
141
- #contextMenuIconButton {
142
- opacity: 0.5;
143
- color: var(--mo-color-gray);
144
- }
145
-
146
- :host([selected]), :host([data-context-menu-open]) {
147
- #contentContainer {
148
- --mo-data-grid-sticky-part-color: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-accent)) !important;
149
- background: var(--mo-data-grid-selection-background) !important;
150
- }
151
-
152
- #contextMenuIconButton {
153
- color: currentColor;
154
- opacity: 1;
155
- }
156
- }
157
-
158
- #contentContainer:hover #contextMenuIconButton {
159
- color: currentColor;
160
- opacity: 1;
161
- }
162
-
163
- #detailsExpanderIconButton {
164
- transition: transform 250ms;
165
-
166
- &[data-rtl] {
167
- transform: rotate(180deg);
168
- }
169
- }
170
-
171
- :host([detailsOpen]) #detailsExpanderIconButton {
172
- transform: rotate(90deg);
173
- }
174
-
175
- #detailsContainer {
176
- display: grid;
177
- grid-template-columns: subgrid;
178
- grid-column: -1 / 1;
179
-
180
- &:empty {
181
- display: none;
182
- }
183
-
184
- & > * {
185
- grid-column: data / -1;
186
- box-sizing: border-box;
187
- padding-inline: var(--mo-data-grid-cell-padding);
188
- padding-block: 1rem;
189
-
190
- &[mo-data-grid-row] {
191
- grid-column: -1 / 1;
192
- padding: 0;
193
- }
194
-
195
- &[instanceof*=mo-data-grid] {
196
- padding-inline: 0;
197
- --mo-data-grid-header-background: color-mix(in srgb, var(--mo-color-foreground), transparent 96%);
198
- --mo-data-grid-alternating-background: transparent;
199
- --mo-data-grid-alternating-background-transparency: 0;
200
- --_content-min-height-default: 0px;
201
-
202
- &::part(row) {
203
- border-block-end: var(--mo-data-grid-border);
204
- }
205
- }
206
- }
207
- }
208
-
209
- mo-data-grid-cell:first-of-type:not([alignment=end]), mo-data-grid-cell[alignment=end]:first-of-type + mo-data-grid-cell {
210
- margin-inline-start: calc(var(--_level, 0) * var(--mo-data-grid-column-sub-row-indentation, 20px));
211
- }
53
+ return css `
54
+ :host {
55
+ display: block;
56
+ position: relative;
57
+ height: auto;
58
+ width: 100%;
59
+ }
60
+
61
+ :host([data-reorderability=${unsafeCSS(ReorderabilityState.Dragging)}]) {
62
+ opacity: 0.5;
63
+ }
64
+
65
+ :host([data-reorderability=${unsafeCSS(ReorderabilityState.DropBefore)}]) {
66
+ border-top: 2px solid var(--mo-color-accent);
67
+ }
68
+
69
+ :host([data-reorderability=${unsafeCSS(ReorderabilityState.DropAfter)}]) {
70
+ border-bottom: 2px solid var(--mo-color-accent);
71
+ }
72
+
73
+ #reorderability {
74
+ position: sticky;
75
+ z-index: 2;
76
+ width: var(--mo-data-grid-column-reorder-width);
77
+ height: 100%;
78
+ background: var(--mo-data-grid-sticky-part-color);
79
+
80
+ mo-icon-button {
81
+ cursor: grab;
82
+ opacity: 0.5;
83
+ }
84
+ }
85
+
86
+ #detailsExpanderContainer {
87
+ position: sticky;
88
+ z-index: 2;
89
+ inset-inline-start: 0px;
90
+ background: var(--mo-data-grid-sticky-expander-part-color, var(--mo-data-grid-sticky-part-color));
91
+ }
92
+
93
+ #selectionContainer {
94
+ width: var(--mo-data-grid-column-selection-width);
95
+ position: sticky;
96
+ z-index: 2;
97
+ height: 100%;
98
+ background: var(--mo-data-grid-sticky-part-color);
99
+ }
100
+
101
+ :host(:hover) {
102
+ #contentContainer {
103
+ --mo-data-grid-sticky-part-color: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-accent) 25%) !important;
104
+ color: inherit;
105
+ background: var(--mo-color-accent-transparent) !important;
106
+ }
107
+
108
+ #contentContainer, #detailsContainer {
109
+ &::before {
110
+ content: '';
111
+ width: 2px;
112
+ height: 100%;
113
+ top: 0;
114
+ position: absolute;
115
+ background-color: var(--mo-color-accent);
116
+ z-index: 2;
117
+ }
118
+ }
119
+ }
120
+
121
+ :host([data-has-alternating-background]) {
122
+ #contentContainer, #detailsContainer:not(:has([instanceof*=mo-data-grid])) {
123
+ background: var(--mo-data-grid-alternating-background);
124
+ --mo-data-grid-sticky-part-color: color-mix(in srgb, var(--mo-color-surface), black var(--mo-data-grid-alternating-background-transparency));
125
+ }
126
+ }
127
+
128
+ #contentContainer {
129
+ grid-column: -1 / 1;
130
+ }
131
+
132
+ #contextMenuIconButtonContainer {
133
+ height: 100%;
134
+ place-self: end;
135
+ position: sticky;
136
+ inset-inline-end: 0px;
137
+ z-index: 3;
138
+ background: var(--mo-data-grid-sticky-part-color);
139
+ }
140
+
141
+ #contextMenuIconButton {
142
+ opacity: 0.5;
143
+ color: var(--mo-color-gray);
144
+ }
145
+
146
+ :host([selected]), :host([data-context-menu-open]) {
147
+ #contentContainer {
148
+ --mo-data-grid-sticky-part-color: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-accent)) !important;
149
+ background: var(--mo-data-grid-selection-background) !important;
150
+ }
151
+
152
+ #contextMenuIconButton {
153
+ color: currentColor;
154
+ opacity: 1;
155
+ }
156
+ }
157
+
158
+ #contentContainer:hover #contextMenuIconButton {
159
+ color: currentColor;
160
+ opacity: 1;
161
+ }
162
+
163
+ #detailsExpanderIconButton {
164
+ transition: transform 250ms;
165
+
166
+ &[data-rtl] {
167
+ transform: rotate(180deg);
168
+ }
169
+ }
170
+
171
+ :host([detailsOpen]) #detailsExpanderIconButton {
172
+ transform: rotate(90deg);
173
+ }
174
+
175
+ #detailsContainer {
176
+ display: grid;
177
+ grid-template-columns: subgrid;
178
+ grid-column: -1 / 1;
179
+
180
+ &:empty {
181
+ display: none;
182
+ }
183
+
184
+ & > * {
185
+ grid-column: data / -1;
186
+ box-sizing: border-box;
187
+ padding-inline: var(--mo-data-grid-cell-padding);
188
+ padding-block: 1rem;
189
+
190
+ &[mo-data-grid-row] {
191
+ grid-column: -1 / 1;
192
+ padding: 0;
193
+ }
194
+
195
+ &[instanceof*=mo-data-grid] {
196
+ padding-inline: 0;
197
+ --mo-data-grid-header-background: color-mix(in srgb, var(--mo-color-foreground), transparent 96%);
198
+ --mo-data-grid-alternating-background: transparent;
199
+ --mo-data-grid-alternating-background-transparency: 0;
200
+ --_content-min-height-default: 0px;
201
+
202
+ &::part(row) {
203
+ border-block-end: var(--mo-data-grid-border);
204
+ }
205
+ }
206
+ }
207
+ }
208
+
209
+ mo-data-grid-cell:first-of-type:not([alignment=end]), mo-data-grid-cell[alignment=end]:first-of-type + mo-data-grid-cell {
210
+ margin-inline-start: calc(var(--_level, 0) * var(--mo-data-grid-column-sub-row-indentation, 20px));
211
+ }
212
212
  `;
213
213
  }
214
214
  get template() {
215
215
  this.style.setProperty('--_level', this.level.toString());
216
216
  this.toggleAttribute('selected', this.dataRecord.isSelected);
217
217
  this.toggleAttribute('detailsOpen', this.dataRecord.detailsOpen);
218
- return !this.isIntersecting ? html.nothing : html `
219
- <mo-grid id='contentContainer' columns='subgrid'
220
- @click=${() => this.handleContentClick()}
221
- @dblclick=${() => this.handleContentDoubleClick()}
222
- @auxclick=${(e) => e.button !== 1 ? void 0 : this.handleContentMiddleClick()}
223
- ${this.contextMenuTemplate === html.nothing ? html.nothing : popover(() => html `
224
- <mo-context-menu @openChange=${(e) => this.handleContextMenuOpenChange(e.detail)}>
225
- ${this.contextMenuTemplate}
226
- </mo-context-menu>
227
- `)}
228
- >
229
- ${this.rowTemplate}
230
- </mo-grid>
231
- <slot id='detailsContainer'>${this.detailsOpen ? this.detailsTemplate : html.nothing}</slot>
218
+ return !this.isIntersecting ? html.nothing : html `
219
+ <mo-grid id='contentContainer' columns='subgrid'
220
+ @click=${() => this.handleContentClick()}
221
+ @dblclick=${() => this.handleContentDoubleClick()}
222
+ @auxclick=${(e) => e.button !== 1 ? void 0 : this.handleContentMiddleClick()}
223
+ ${this.contextMenuTemplate === html.nothing ? html.nothing : popover(() => html `
224
+ <mo-context-menu @openChange=${(e) => this.handleContextMenuOpenChange(e.detail)}>
225
+ ${this.contextMenuTemplate}
226
+ </mo-context-menu>
227
+ `)}
228
+ >
229
+ ${this.rowTemplate}
230
+ </mo-grid>
231
+ <slot id='detailsContainer'>${this.detailsOpen ? this.detailsTemplate : html.nothing}</slot>
232
232
  `;
233
233
  }
234
234
  get reorderabilityTemplate() {
235
- return !this.dataGrid.reorderabilityController.enabled ? html.nothing : html `
236
- <mo-flex id='reorderability' justifyContent='center' alignItems='center' ${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('reordering') })}>
237
- <mo-icon-button icon='drag_handle'></mo-icon-button>
238
- </mo-flex>
235
+ return !this.dataGrid.reorderabilityController.enabled ? html.nothing : html `
236
+ <mo-flex id='reorderability' justifyContent='center' alignItems='center' ${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('reordering') })}>
237
+ <mo-icon-button icon='drag_handle'></mo-icon-button>
238
+ </mo-flex>
239
239
  `;
240
240
  }
241
241
  get detailsExpanderTemplate() {
242
- return this.dataGrid.hasDetails === false ? html.nothing : html `
243
- <mo-flex id='detailsExpanderContainer' justifyContent='center' alignItems='center'
244
- ${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('details') })}
245
- @click=${(e) => e.stopPropagation()}
246
- @dblclick=${(e) => e.stopPropagation()}
247
- >
248
- ${this.hasDetails === false ? html.nothing : html `
249
- <mo-icon-button id='detailsExpanderIconButton'
250
- icon='keyboard_arrow_right'
251
- ?data-rtl=${DirectionsByLanguage.get() === 'rtl'}
252
- @click=${() => this.toggleDetails()}
253
- ></mo-icon-button>
254
- `}
255
- </mo-flex>
242
+ return this.dataGrid.hasDetails === false ? html.nothing : html `
243
+ <mo-flex id='detailsExpanderContainer' justifyContent='center' alignItems='center'
244
+ ${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('details') })}
245
+ @click=${(e) => e.stopPropagation()}
246
+ @dblclick=${(e) => e.stopPropagation()}
247
+ >
248
+ ${this.hasDetails === false ? html.nothing : html `
249
+ <mo-icon-button id='detailsExpanderIconButton'
250
+ icon='keyboard_arrow_right'
251
+ ?data-rtl=${DirectionsByLanguage.get() === 'rtl'}
252
+ @click=${() => this.toggleDetails()}
253
+ ></mo-icon-button>
254
+ `}
255
+ </mo-flex>
256
256
  `;
257
257
  }
258
258
  get selectionTemplate() {
259
- return !this.dataGrid.hasSelection ? html.nothing : html `
260
- <mo-flex id='selectionContainer' justifyContent='center' alignItems='center'
261
- ?data-has-details=${this.dataGrid.hasDetails}
262
- ${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('selection') })}
263
- @click=${(e) => e.stopPropagation()}
264
- @dblclick=${(e) => e.stopPropagation()}
265
- >
266
- <mo-checkbox
267
- tabindex='-1'
268
- ?disabled=${this.dataRecord.isSelectable === false}
269
- .selected=${live(this.selected)}
270
- @change=${(e) => this.dataGrid.selectionController.setSelection(this.data, e.detail, true)}
271
- ></mo-checkbox>
272
- </mo-flex>
259
+ return !this.dataGrid.hasSelection ? html.nothing : html `
260
+ <mo-flex id='selectionContainer' justifyContent='center' alignItems='center'
261
+ ?data-has-details=${this.dataGrid.hasDetails}
262
+ ${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('selection') })}
263
+ @click=${(e) => e.stopPropagation()}
264
+ @dblclick=${(e) => e.stopPropagation()}
265
+ >
266
+ <mo-checkbox
267
+ tabindex='-1'
268
+ ?disabled=${this.dataRecord.isSelectable === false}
269
+ .selected=${live(this.selected)}
270
+ @change=${(e) => this.dataGrid.selectionController.setSelection(this.data, e.detail, true)}
271
+ ></mo-checkbox>
272
+ </mo-flex>
273
273
  `;
274
274
  }
275
275
  getCellTemplate(column) {
276
- return column.hidden ? html.nothing : html `
277
- <mo-data-grid-cell
278
- .row=${this}
279
- .column=${column}
280
- .value=${KeyPath.get(this.data, column.dataSelector)}
281
- @keydown=${this.delegateToCell('handleKeyDown')}
282
- @dblclick=${this.delegateToCell('handleDoubleClick')}
283
- ></mo-data-grid-cell>
276
+ return column.hidden ? html.nothing : html `
277
+ <mo-data-grid-cell
278
+ .row=${this}
279
+ .column=${column}
280
+ .value=${KeyPath.get(this.data, column.dataSelector)}
281
+ @keydown=${this.delegateToCell('handleKeyDown')}
282
+ @dblclick=${this.delegateToCell('handleDoubleClick')}
283
+ ></mo-data-grid-cell>
284
284
  `;
285
285
  }
286
286
  get fillerTemplate() {
287
287
  return html `<span></span>`;
288
288
  }
289
289
  get contextMenuIconButtonTemplate() {
290
- return this.dataGrid.hasContextMenu === false ? html.nothing : html `
291
- <mo-flex id='contextMenuIconButtonContainer' justifyContent='center'>
292
- <mo-icon-button id='contextMenuIconButton' icon='more_vert' dense
293
- @click=${this.openContextMenu}
294
- @dblclick=${(e) => e.stopPropagation()}
295
- ></mo-icon-button>
296
- </mo-flex>
290
+ return this.dataGrid.hasContextMenu === false ? html.nothing : html `
291
+ <mo-flex id='contextMenuIconButtonContainer' justifyContent='center'>
292
+ <mo-icon-button id='contextMenuIconButton' icon='more_vert' dense
293
+ @click=${this.openContextMenu}
294
+ @dblclick=${(e) => e.stopPropagation()}
295
+ ></mo-icon-button>
296
+ </mo-flex>
297
297
  `;
298
298
  }
299
299
  get detailsTemplate() {
@@ -303,8 +303,8 @@ export class DataGridRow extends Component {
303
303
  if (this.dataGrid.getRowDetailsTemplate) {
304
304
  return this.dataGrid.getRowDetailsTemplate(this.data);
305
305
  }
306
- return !this.dataRecord.hasSubData ? html.nothing : html `
307
- ${this.dataRecord.getSubDataByLevel(this.level + 1)?.map(data => this.dataGrid.getRowTemplate(data))}
306
+ return !this.dataRecord.hasSubData ? html.nothing : html `
307
+ ${this.dataRecord.getSubDataByLevel(this.level + 1)?.map(data => this.dataGrid.getRowTemplate(data))}
308
308
  `;
309
309
  }
310
310
  handleContentClick() {
@@ -347,7 +347,7 @@ export class DataGridRow extends Component {
347
347
  }
348
348
  }
349
349
  get contextMenuTemplate() {
350
- return this.dataGrid.contextMenuController.getMenuContentTemplate(!this.dataGrid.selectability || !this.dataGrid.selectedData.length
350
+ return this.dataGrid.contextMenuController.getMenuContentTemplate(!this.dataGrid.selectability || !this.dataGrid.selectedData.length || !this.dataRecord.isSelected
351
351
  ? [this.data]
352
352
  : this.dataGrid.selectedData);
353
353
  }