@3mo/data-grid 0.20.0 → 0.20.2

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.
@@ -19,130 +19,124 @@ let DataGridColumnHeader = class DataGridColumnHeader extends Component {
19
19
  super(...arguments);
20
20
  this.menuOpen = false;
21
21
  this.resizeController = new ResizeController(this, {
22
- callback: async ([entry]) => {
23
- // It is necessary to defer the callback to avoid
24
- // this resize-observer triggering other resize-observers in a loop
25
- await new Promise(r => requestIdleCallback(r));
26
- this.column.widthInPixels = entry?.contentRect.width ?? 0;
27
- }
22
+ callback: () => requestIdleCallback(() => this.column.widthInPixels = this.getBoundingClientRect().width)
28
23
  });
29
24
  }
30
25
  static get styles() {
31
- return css `
32
- :host {
33
- display: flex;
34
- position: relative;
35
- padding: 0 var(--mo-data-grid-cell-padding);
36
- transition: background 0.1s;
37
- anchor-name: --mo-data-grid-column-header;
38
- }
39
-
40
- :host(:hover) {
41
- background: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-gray) 8%);
42
- }
43
-
44
- :host([data-sticky]) {
45
- position: sticky;
46
- }
47
-
48
- :host([data-sticky]) /*[data-sticking]*/ {
49
- z-index: 6;
50
- background: var(--mo-data-grid-sticky-part-color);
51
- }
52
-
53
- mo-data-grid-header-separator {
54
- z-index: 5;
55
- }
56
-
57
- :host([data-sticky]) /*[data-sticking]*/ mo-data-grid-header-separator {
58
- z-index: 7;
59
- }
60
-
61
- #container {
62
- transition: margin-inline-end 0.1s;
63
- }
64
-
65
- #content {
66
- display: inline-block;
67
- overflow: hidden !important;
68
- color: var(--mo-color-foreground);
69
- font-weight: 500;
70
- line-height: var(--mo-data-grid-header-height);
71
- white-space: nowrap;
72
- text-overflow: ellipsis;
73
- user-select: none;
74
- width: 100%;
75
- }
76
-
77
- #sort {
78
- position: relative;
79
-
80
- &[data-preview] {
81
- display: none;
82
- }
83
-
84
- mo-icon-button {
85
- transition: 0.1s;
86
- font-size: 20px;
87
- color: var(--mo-color-accent);
88
- }
89
-
90
- span {
91
- position: absolute;
92
- inset-inline-end: 0;
93
- inset-block-end: 0;
94
- color: var(--mo-color-accent);
95
- border-radius: 50%;
96
- width: fit-content;
97
- user-select: none;
98
- font-size: 0.8rem;
99
- aspect-ratio: 1 / 1;
100
- display: flex;
101
- align-items: center;
102
- justify-content: center;
103
- }
104
- }
105
-
106
- :host(:hover) #sort[data-preview] {
107
- display: flex;
108
- mo-icon-button {
109
- color: var(--mo-color-gray);
110
- opacity: 0.5;
111
- }
112
- }
113
-
114
- #menu-icon {
115
- position: absolute;
116
- inset-inline-end: calc(var(--mo-data-grid-cell-padding) - 6px);
117
- inset-block-start: 2px;
118
- cursor: pointer;
119
- opacity: 0;
120
- font-size: 20px;
121
- transition: 0.1s;
122
- }
123
-
124
- :host(:hover), :host([menuOpen]) {
125
- #container {
126
- margin-inline-end: 20px;
127
- }
128
-
129
- #menu-icon {
130
- opacity: 1;
131
- }
132
- }
133
-
134
- mo-menu {
135
- position-anchor: --mo-data-grid-column-header;
136
-
137
- &::part(popover) {
138
- margin-inline-start: 4px;
139
- }
140
-
141
- mo-heading {
142
- padding: 0.5rem 1rem;
143
- opacity: 0.5;
144
- }
145
- }
26
+ return css `
27
+ :host {
28
+ display: flex;
29
+ position: relative;
30
+ padding: 0 var(--mo-data-grid-cell-padding);
31
+ transition: background 0.1s;
32
+ anchor-name: --mo-data-grid-column-header;
33
+ }
34
+
35
+ :host(:hover) {
36
+ background: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-gray) 8%);
37
+ }
38
+
39
+ :host([data-sticky]) {
40
+ position: sticky;
41
+ }
42
+
43
+ :host([data-sticky]) /*[data-sticking]*/ {
44
+ z-index: 6;
45
+ background: var(--mo-data-grid-sticky-part-color);
46
+ }
47
+
48
+ mo-data-grid-header-separator {
49
+ z-index: 5;
50
+ }
51
+
52
+ :host([data-sticky]) /*[data-sticking]*/ mo-data-grid-header-separator {
53
+ z-index: 7;
54
+ }
55
+
56
+ #container {
57
+ transition: margin-inline-end 0.1s;
58
+ }
59
+
60
+ #content {
61
+ display: inline-block;
62
+ overflow: hidden !important;
63
+ color: var(--mo-color-foreground);
64
+ font-weight: 500;
65
+ line-height: var(--mo-data-grid-header-height);
66
+ white-space: nowrap;
67
+ text-overflow: ellipsis;
68
+ user-select: none;
69
+ width: 100%;
70
+ }
71
+
72
+ #sort {
73
+ position: relative;
74
+
75
+ &[data-preview] {
76
+ display: none;
77
+ }
78
+
79
+ mo-icon-button {
80
+ transition: 0.1s;
81
+ font-size: 20px;
82
+ color: var(--mo-color-accent);
83
+ }
84
+
85
+ span {
86
+ position: absolute;
87
+ inset-inline-end: 0;
88
+ inset-block-end: 0;
89
+ color: var(--mo-color-accent);
90
+ border-radius: 50%;
91
+ width: fit-content;
92
+ user-select: none;
93
+ font-size: 0.8rem;
94
+ aspect-ratio: 1 / 1;
95
+ display: flex;
96
+ align-items: center;
97
+ justify-content: center;
98
+ }
99
+ }
100
+
101
+ :host(:hover) #sort[data-preview] {
102
+ display: flex;
103
+ mo-icon-button {
104
+ color: var(--mo-color-gray);
105
+ opacity: 0.5;
106
+ }
107
+ }
108
+
109
+ #menu-icon {
110
+ position: absolute;
111
+ inset-inline-end: calc(var(--mo-data-grid-cell-padding) - 6px);
112
+ inset-block-start: 2px;
113
+ opacity: 0;
114
+ font-size: 20px;
115
+ transition: 0.1s;
116
+ }
117
+
118
+ :host(:hover), :host([menuOpen]) {
119
+ #container {
120
+ margin-inline-end: 20px;
121
+ }
122
+
123
+ #menu-icon {
124
+ opacity: 1;
125
+ }
126
+ }
127
+
128
+ mo-menu {
129
+ position-anchor: --mo-data-grid-column-header;
130
+
131
+ &::part(popover) {
132
+ margin-inline-start: 4px;
133
+ }
134
+
135
+ mo-heading {
136
+ padding: 0.5rem 1rem;
137
+ opacity: 0.5;
138
+ }
139
+ }
146
140
  `;
147
141
  }
148
142
  get template() {
@@ -157,97 +151,97 @@ let DataGridColumnHeader = class DataGridColumnHeader extends Component {
157
151
  this.setAttribute('data-sticky', this.column.sticky);
158
152
  }
159
153
  const direction = this.column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal';
160
- return html `
161
- <mo-flex id='container' alignItems='center' gap='0.2rem'
162
- direction=${direction}
163
- @click=${() => this.column.toggleSort()}
164
- @contextmenu=${(e) => { e.preventDefault(); this.menuOpen = true; }}
165
- ${style({ flex: '1', overflow: 'hidden', cursor: 'pointer' })}
166
- >
167
- ${this.contentTemplate}
168
- ${this.sortingTemplate}
169
- </mo-flex>
170
- ${this.menuTemplate}
171
- ${this.separatorTemplate}
154
+ return html `
155
+ <mo-flex id='container' alignItems='center' gap='0.2rem'
156
+ direction=${direction}
157
+ @click=${() => this.column.toggleSort()}
158
+ @contextmenu=${(e) => { e.preventDefault(); this.menuOpen = true; }}
159
+ ${style({ flex: '1', overflow: 'hidden' })}
160
+ >
161
+ ${this.contentTemplate}
162
+ ${this.sortingTemplate}
163
+ </mo-flex>
164
+ ${this.menuTemplate}
165
+ ${this.separatorTemplate}
172
166
  `;
173
167
  }
174
168
  get contentTemplate() {
175
- return html `
176
- <div id='content'
177
- ${style({ textAlign: this.column.alignment })}
178
- ${!this.column.description ? html.nothing : tooltip(this.column.description)}
179
- >${this.column.heading}</div>
169
+ return html `
170
+ <div id='content'
171
+ ${style({ textAlign: this.column.alignment })}
172
+ ${!this.column.description ? html.nothing : tooltip(this.column.description)}
173
+ >${this.column.heading}</div>
180
174
  `;
181
175
  }
182
176
  get sortingTemplate() {
183
177
  const sortingDefinition = this.column.sortingDefinition;
184
178
  const sortIcon = sortingDefinition?.strategy === DataGridSortingStrategy.Ascending ? 'arrow_upward' : 'arrow_downward';
185
179
  const sortingRank = !sortingDefinition || this.column.dataGrid.getSorting().length <= 1 ? undefined : sortingDefinition.rank;
186
- return !this.column.sortable ? html.nothing : html `
187
- <mo-flex id='sort' direction='horizontal' ?data-preview=${!sortingDefinition?.strategy}>
188
- <mo-icon-button dense icon=${sortIcon}></mo-icon-button>
189
- ${!sortingRank ? html.nothing : html `<span>${sortingRank}</span>`}
190
- </mo-flex>
180
+ return !this.column.sortable ? html.nothing : html `
181
+ <mo-flex id='sort' direction='horizontal' ?data-preview=${!sortingDefinition?.strategy}>
182
+ <mo-icon-button dense icon=${sortIcon}></mo-icon-button>
183
+ ${!sortingRank ? html.nothing : html `<span>${sortingRank}</span>`}
184
+ </mo-flex>
191
185
  `;
192
186
  }
193
187
  get menuTemplate() {
194
188
  const additionalItems = this.column.getMenuItemsTemplate?.();
195
- return html `
196
- <mo-popover-container placement='block-end' alignment='end' style='display: contents'>
197
- <mo-icon-button dense id='menu-icon' icon='more_vert'></mo-icon-button>
198
-
199
- <mo-menu slot='popover' .anchor=${this} target='menu-icon' ?open=${bind(this, 'menuOpen')}>
200
- <mo-line></mo-line>
189
+ return html `
190
+ <mo-popover-container placement='block-end' alignment='end' style='display: contents'>
191
+ <mo-icon-button dense id='menu-icon' icon='more_vert'></mo-icon-button>
192
+
193
+ <mo-menu slot='popover' .anchor=${this} target='menu-icon' ?open=${bind(this, 'menuOpen')}>
194
+ <mo-line></mo-line>
201
195
  ${join([
202
196
  !this.column.sortable ? undefined : this.getSortingItemsTemplate(additionalItems instanceof Map ? additionalItems.get('sorting') : undefined),
203
197
  // Hide stickiness items for now
204
198
  true ? undefined : this.getStickinessItemsTemplate(additionalItems instanceof Map ? additionalItems.get('stickiness') : undefined),
205
199
  this.getMoreItemsTemplate(additionalItems instanceof Map ? additionalItems.get('more') : additionalItems),
206
- ].filter(Boolean), html `<mo-line></mo-line>`)}
207
- </mo-menu>
208
- </mo-popover-container>
200
+ ].filter(Boolean), html `<mo-line></mo-line>`)}
201
+ </mo-menu>
202
+ </mo-popover-container>
209
203
  `;
210
204
  }
211
205
  getSortingItemsTemplate(additionalItems) {
212
- return html `
213
- <mo-heading typography='subtitle2'>${t('Sorting')}</mo-heading>
214
- <mo-selectable-menu-item icon='arrow_downward'
215
- ?disabled=${this.column.sortable === false}
216
- ?selected=${this.column.sortingDefinition?.strategy === DataGridSortingStrategy.Descending}
217
- @click=${() => this.column.toggleSort(DataGridSortingStrategy.Descending)}
218
- >${t('Sort descending')}</mo-selectable-menu-item>
219
- <mo-selectable-menu-item icon='arrow_upward'
220
- ?disabled=${this.column.sortable === false}
221
- ?selected=${this.column.sortingDefinition?.strategy === DataGridSortingStrategy.Ascending}
222
- @click=${() => this.column.toggleSort(DataGridSortingStrategy.Ascending)}
223
- >${t('Sort ascending')}</mo-selectable-menu-item>
224
- ${additionalItems}
206
+ return html `
207
+ <mo-heading typography='subtitle2'>${t('Sorting')}</mo-heading>
208
+ <mo-selectable-menu-item icon='arrow_downward'
209
+ ?disabled=${this.column.sortable === false}
210
+ ?selected=${this.column.sortingDefinition?.strategy === DataGridSortingStrategy.Descending}
211
+ @click=${() => this.column.toggleSort(DataGridSortingStrategy.Descending)}
212
+ >${t('Sort descending')}</mo-selectable-menu-item>
213
+ <mo-selectable-menu-item icon='arrow_upward'
214
+ ?disabled=${this.column.sortable === false}
215
+ ?selected=${this.column.sortingDefinition?.strategy === DataGridSortingStrategy.Ascending}
216
+ @click=${() => this.column.toggleSort(DataGridSortingStrategy.Ascending)}
217
+ >${t('Sort ascending')}</mo-selectable-menu-item>
218
+ ${additionalItems}
225
219
  `;
226
220
  }
227
221
  getStickinessItemsTemplate(additionalItems) {
228
- return html `
229
- <mo-heading typography='subtitle2'>${t('Stickiness')}</mo-heading>
230
- <mo-selectable-menu-item icon='push_pin'
231
- ?selected=${this.column.sticky === 'start'}
232
- @click=${() => this.column.toggleSticky('start')}
233
- >${t('Stick to start')}</mo-selectable-menu-item>
234
- <mo-selectable-menu-item icon='push_pin'
235
- ?selected=${this.column.sticky === 'both'}
236
- @click=${() => this.column.toggleSticky('both')}
237
- >${t('Stick to both')}</mo-selectable-menu-item>
238
- <mo-selectable-menu-item icon='push_pin'
239
- ?selected=${this.column.sticky === 'end'}
240
- @click=${() => this.column.toggleSticky('end')}
241
- >${t('Stick to end')}</mo-selectable-menu-item>
242
- ${additionalItems}
222
+ return html `
223
+ <mo-heading typography='subtitle2'>${t('Stickiness')}</mo-heading>
224
+ <mo-selectable-menu-item icon='push_pin'
225
+ ?selected=${this.column.sticky === 'start'}
226
+ @click=${() => this.column.toggleSticky('start')}
227
+ >${t('Stick to start')}</mo-selectable-menu-item>
228
+ <mo-selectable-menu-item icon='push_pin'
229
+ ?selected=${this.column.sticky === 'both'}
230
+ @click=${() => this.column.toggleSticky('both')}
231
+ >${t('Stick to both')}</mo-selectable-menu-item>
232
+ <mo-selectable-menu-item icon='push_pin'
233
+ ?selected=${this.column.sticky === 'end'}
234
+ @click=${() => this.column.toggleSticky('end')}
235
+ >${t('Stick to end')}</mo-selectable-menu-item>
236
+ ${additionalItems}
243
237
  `;
244
238
  }
245
239
  getMoreItemsTemplate(additionalItems) {
246
- return html `
247
- <mo-menu-item icon='visibility_off' @click=${() => this.column.hide()}>
248
- ${t('Hide')}
249
- </mo-menu-item>
250
- ${additionalItems}
240
+ return html `
241
+ <mo-menu-item icon='visibility_off' @click=${() => this.column.hide()}>
242
+ ${t('Hide')}
243
+ </mo-menu-item>
244
+ ${additionalItems}
251
245
  `;
252
246
  }
253
247
  get separatorTemplate() {
@@ -255,12 +249,12 @@ let DataGridColumnHeader = class DataGridColumnHeader extends Component {
255
249
  return html.nothing;
256
250
  }
257
251
  const index = this.column.dataGrid.visibleColumns.indexOf(this.column);
258
- return html `
259
- <mo-data-grid-header-separator
260
- ?data-last=${this.column.dataGrid.visibleColumns.length - 1 === index}
261
- .dataGrid=${this.column.dataGrid}
262
- .column=${this.column.dataGrid.visibleColumns[index]}
263
- ></mo-data-grid-header-separator>
252
+ return html `
253
+ <mo-data-grid-header-separator
254
+ ?data-last=${this.column.dataGrid.visibleColumns.length - 1 === index}
255
+ .dataGrid=${this.column.dataGrid}
256
+ .column=${this.column.dataGrid.visibleColumns[index]}
257
+ ></mo-data-grid-header-separator>
264
258
  `;
265
259
  }
266
260
  };
@@ -30,7 +30,7 @@ export class DataGridContextMenuController extends Controller {
30
30
  return this.host.getRowContextMenuTemplate !== undefined;
31
31
  }
32
32
  getMenuContentTemplate(data = this.host.selectedData) {
33
- return !this.hasContextMenu ? html.nothing : html `
33
+ return !this.hasContextMenu || !data.length ? html.nothing : html `
34
34
  ${data.length === 1 ? html.nothing : html `
35
35
  <div ${style(DataGridContextMenuController.infoStyle)}>
36
36
  <span ${style(DataGridContextMenuController.infoCountStyle)}>${data.length.format()}</span>
@@ -167,7 +167,7 @@ let DataGridFooter = class DataGridFooter extends Component {
167
167
  @click=${() => this.setPage(this.page - 1)}
168
168
  ></mo-icon-button>
169
169
 
170
- <div ${style({ cursor: 'pointer', width: hasUnknownDataLength ? '40px' : '75px', textAlign: 'center' })}>
170
+ <div ${style({ width: hasUnknownDataLength ? '40px' : '75px', textAlign: 'center' })}>
171
171
  ${this.manualPagination ? html `
172
172
  <mo-field-number dense
173
173
  value=${this.page}
@@ -199,7 +199,7 @@ let DataGridFooter = class DataGridFooter extends Component {
199
199
  const rangeText = `${(Math.min(from, to)).format()}-${to.format()}`;
200
200
  return html `
201
201
  <mo-popover-container id='page-info' placement='block-start'>
202
- <mo-flex alignItems='center' gap='6px' direction='horizontal' style='cursor: pointer'>
202
+ <mo-flex alignItems='center' gap='6px' direction='horizontal'>
203
203
  <mo-flex direction='horizontal' alignItems='center'>
204
204
  ${join([
205
205
  this.dataGrid.selectedData.length
@@ -1 +1 @@
1
- {"version":3,"file":"DataGridHeader.d.ts","sourceRoot":"","sources":["../DataGridHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAqD,MAAM,WAAW,CAAA;AAGnG,OAAO,EAAyB,KAAK,QAAQ,EAAmD,MAAM,YAAY,CAAA;AAiBlH,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;IACf,WAAW,UAAQ;IAEvB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;cAEjF,SAAS;cAIT,YAAY;IAI/B,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAExC;cAEkB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAK1E,WAAoB,MAAM,kCAoDzB;IAED,cAAuB,QAAQ,0CAQ9B;IAED,OAAO,KAAK,uBAAuB,GAclC;IAED,OAAO,KAAK,iBAAiB,GAW5B;IAED,OAAO,KAAK,SAAS,GASpB;IAED,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAQrC;IAED,OAAO,KAAK,eAAe,GAM1B;IAED,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,eAAe,GA0B1B;IAED,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;CAIxB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;KAC9C;CACD"}
1
+ {"version":3,"file":"DataGridHeader.d.ts","sourceRoot":"","sources":["../DataGridHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAqD,MAAM,WAAW,CAAA;AAGnG,OAAO,EAAyB,KAAK,QAAQ,EAAmD,MAAM,YAAY,CAAA;AAiBlH,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;IACf,WAAW,UAAQ;IAEvB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;cAEjF,SAAS;cAIT,YAAY;IAI/B,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAExC;cAEkB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAK1E,WAAoB,MAAM,kCAyDzB;IAED,cAAuB,QAAQ,0CAQ9B;IAED,OAAO,KAAK,uBAAuB,GAclC;IAED,OAAO,KAAK,iBAAiB,GAW5B;IAED,OAAO,KAAK,SAAS,GASpB;IAED,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAQrC;IAED,OAAO,KAAK,eAAe,GAM1B;IAED,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,eAAe,GA2B1B;IAED,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;CAIxB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;KAC9C;CACD"}