@3mo/data-grid 0.20.1 → 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.
Files changed (14) hide show
  1. package/dist/DataGrid.d.ts.map +1 -1
  2. package/dist/DataGrid.js +243 -245
  3. package/dist/DataGridColumnHeader.d.ts.map +1 -1
  4. package/dist/DataGridColumnHeader.js +184 -185
  5. package/dist/DataGridFooter.js +2 -2
  6. package/dist/DataGridHeader.d.ts.map +1 -1
  7. package/dist/DataGridHeader.js +102 -103
  8. package/dist/DataGridSidePanel.js +1 -1
  9. package/dist/custom-elements.json +1 -1
  10. package/dist/rows/DataGridDefaultRow.js +25 -25
  11. package/dist/rows/DataGridRow.d.ts.map +1 -1
  12. package/dist/rows/DataGridRow.js +196 -197
  13. package/dist/tsconfig.tsbuildinfo +1 -1
  14. package/package.json +59 -59
package/dist/DataGridColumnHeader.js CHANGED
@@ -23,121 +23,120 @@ let DataGridColumnHeader = class DataGridColumnHeader extends Component {
23
23
  });
24
24
  }
25
25
  static get styles() {
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
- cursor: pointer;
114
- opacity: 0;
115
- font-size: 20px;
116
- transition: 0.1s;
117
- }
118
-
119
- :host(:hover), :host([menuOpen]) {
120
- #container {
121
- margin-inline-end: 20px;
122
- }
123
-
124
- #menu-icon {
125
- opacity: 1;
126
- }
127
- }
128
-
129
- mo-menu {
130
- position-anchor: --mo-data-grid-column-header;
131
-
132
- &::part(popover) {
133
- margin-inline-start: 4px;
134
- }
135
-
136
- mo-heading {
137
- padding: 0.5rem 1rem;
138
- opacity: 0.5;
139
- }
140
- }
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
+ }
141
140
  `;
142
141
  }
143
142
  get template() {
@@ -152,97 +151,97 @@ let DataGridColumnHeader = class DataGridColumnHeader extends Component {
152
151
  this.setAttribute('data-sticky', this.column.sticky);
153
152
  }
154
153
  const direction = this.column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal';
155
- return html `
156
- <mo-flex id='container' alignItems='center' gap='0.2rem'
157
- direction=${direction}
158
- @click=${() => this.column.toggleSort()}
159
- @contextmenu=${(e) => { e.preventDefault(); this.menuOpen = true; }}
160
- ${style({ flex: '1', overflow: 'hidden', cursor: 'pointer' })}
161
- >
162
- ${this.contentTemplate}
163
- ${this.sortingTemplate}
164
- </mo-flex>
165
- ${this.menuTemplate}
166
- ${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}
167
166
  `;
168
167
  }
169
168
  get contentTemplate() {
170
- return html `
171
- <div id='content'
172
- ${style({ textAlign: this.column.alignment })}
173
- ${!this.column.description ? html.nothing : tooltip(this.column.description)}
174
- >${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>
175
174
  `;
176
175
  }
177
176
  get sortingTemplate() {
178
177
  const sortingDefinition = this.column.sortingDefinition;
179
178
  const sortIcon = sortingDefinition?.strategy === DataGridSortingStrategy.Ascending ? 'arrow_upward' : 'arrow_downward';
180
179
  const sortingRank = !sortingDefinition || this.column.dataGrid.getSorting().length <= 1 ? undefined : sortingDefinition.rank;
181
- return !this.column.sortable ? html.nothing : html `
182
- <mo-flex id='sort' direction='horizontal' ?data-preview=${!sortingDefinition?.strategy}>
183
- <mo-icon-button dense icon=${sortIcon}></mo-icon-button>
184
- ${!sortingRank ? html.nothing : html `<span>${sortingRank}</span>`}
185
- </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>
186
185
  `;
187
186
  }
188
187
  get menuTemplate() {
189
188
  const additionalItems = this.column.getMenuItemsTemplate?.();
190
- return html `
191
- <mo-popover-container placement='block-end' alignment='end' style='display: contents'>
192
- <mo-icon-button dense id='menu-icon' icon='more_vert'></mo-icon-button>
193
-
194
- <mo-menu slot='popover' .anchor=${this} target='menu-icon' ?open=${bind(this, 'menuOpen')}>
195
- <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>
196
195
  ${join([
197
196
  !this.column.sortable ? undefined : this.getSortingItemsTemplate(additionalItems instanceof Map ? additionalItems.get('sorting') : undefined),
198
197
  // Hide stickiness items for now
199
198
  true ? undefined : this.getStickinessItemsTemplate(additionalItems instanceof Map ? additionalItems.get('stickiness') : undefined),
200
199
  this.getMoreItemsTemplate(additionalItems instanceof Map ? additionalItems.get('more') : additionalItems),
201
- ].filter(Boolean), html `<mo-line></mo-line>`)}
202
- </mo-menu>
203
- </mo-popover-container>
200
+ ].filter(Boolean), html `<mo-line></mo-line>`)}
201
+ </mo-menu>
202
+ </mo-popover-container>
204
203
  `;
205
204
  }
206
205
  getSortingItemsTemplate(additionalItems) {
207
- return html `
208
- <mo-heading typography='subtitle2'>${t('Sorting')}</mo-heading>
209
- <mo-selectable-menu-item icon='arrow_downward'
210
- ?disabled=${this.column.sortable === false}
211
- ?selected=${this.column.sortingDefinition?.strategy === DataGridSortingStrategy.Descending}
212
- @click=${() => this.column.toggleSort(DataGridSortingStrategy.Descending)}
213
- >${t('Sort descending')}</mo-selectable-menu-item>
214
- <mo-selectable-menu-item icon='arrow_upward'
215
- ?disabled=${this.column.sortable === false}
216
- ?selected=${this.column.sortingDefinition?.strategy === DataGridSortingStrategy.Ascending}
217
- @click=${() => this.column.toggleSort(DataGridSortingStrategy.Ascending)}
218
- >${t('Sort ascending')}</mo-selectable-menu-item>
219
- ${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}
220
219
  `;
221
220
  }
222
221
  getStickinessItemsTemplate(additionalItems) {
223
- return html `
224
- <mo-heading typography='subtitle2'>${t('Stickiness')}</mo-heading>
225
- <mo-selectable-menu-item icon='push_pin'
226
- ?selected=${this.column.sticky === 'start'}
227
- @click=${() => this.column.toggleSticky('start')}
228
- >${t('Stick to start')}</mo-selectable-menu-item>
229
- <mo-selectable-menu-item icon='push_pin'
230
- ?selected=${this.column.sticky === 'both'}
231
- @click=${() => this.column.toggleSticky('both')}
232
- >${t('Stick to both')}</mo-selectable-menu-item>
233
- <mo-selectable-menu-item icon='push_pin'
234
- ?selected=${this.column.sticky === 'end'}
235
- @click=${() => this.column.toggleSticky('end')}
236
- >${t('Stick to end')}</mo-selectable-menu-item>
237
- ${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}
238
237
  `;
239
238
  }
240
239
  getMoreItemsTemplate(additionalItems) {
241
- return html `
242
- <mo-menu-item icon='visibility_off' @click=${() => this.column.hide()}>
243
- ${t('Hide')}
244
- </mo-menu-item>
245
- ${additionalItems}
240
+ return html `
241
+ <mo-menu-item icon='visibility_off' @click=${() => this.column.hide()}>
242
+ ${t('Hide')}
243
+ </mo-menu-item>
244
+ ${additionalItems}
246
245
  `;
247
246
  }
248
247
  get separatorTemplate() {
@@ -250,12 +249,12 @@ let DataGridColumnHeader = class DataGridColumnHeader extends Component {
250
249
  return html.nothing;
251
250
  }
252
251
  const index = this.column.dataGrid.visibleColumns.indexOf(this.column);
253
- return html `
254
- <mo-data-grid-header-separator
255
- ?data-last=${this.column.dataGrid.visibleColumns.length - 1 === index}
256
- .dataGrid=${this.column.dataGrid}
257
- .column=${this.column.dataGrid.visibleColumns[index]}
258
- ></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>
259
258
  `;
260
259
  }
261
260
  };
package/dist/DataGridFooter.js CHANGED
@@ -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
package/dist/DataGridHeader.d.ts.map CHANGED
@@ -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,kCA0DzB;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"}
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"}