@vaadin/grid 24.4.0-dev.b3e1d14600 → 24.5.0-alpha1

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 (151) hide show
  1. package/README.md +4 -5
  2. package/package.json +10 -10
  3. package/src/all-imports.js +1 -1
  4. package/src/lit/column-renderer-directives.d.ts +1 -1
  5. package/src/lit/column-renderer-directives.js +1 -1
  6. package/src/lit/renderer-directives.d.ts +1 -1
  7. package/src/lit/renderer-directives.js +1 -1
  8. package/src/lit-all-imports.js +1 -1
  9. package/src/vaadin-grid-a11y-mixin.js +4 -2
  10. package/src/vaadin-grid-active-item-mixin.d.ts +1 -1
  11. package/src/vaadin-grid-active-item-mixin.js +29 -16
  12. package/src/vaadin-grid-array-data-provider-mixin.d.ts +1 -1
  13. package/src/vaadin-grid-array-data-provider-mixin.js +1 -1
  14. package/src/vaadin-grid-column-group-mixin.d.ts +1 -1
  15. package/src/vaadin-grid-column-group-mixin.js +1 -1
  16. package/src/vaadin-grid-column-group.d.ts +1 -1
  17. package/src/vaadin-grid-column-group.js +1 -1
  18. package/src/vaadin-grid-column-mixin.d.ts +6 -1
  19. package/src/vaadin-grid-column-mixin.js +14 -5
  20. package/src/vaadin-grid-column-reordering-mixin.d.ts +1 -1
  21. package/src/vaadin-grid-column-reordering-mixin.js +18 -5
  22. package/src/vaadin-grid-column-resizing-mixin.js +1 -1
  23. package/src/vaadin-grid-column.d.ts +1 -1
  24. package/src/vaadin-grid-column.js +1 -1
  25. package/src/vaadin-grid-data-provider-mixin.d.ts +1 -1
  26. package/src/vaadin-grid-data-provider-mixin.js +18 -9
  27. package/src/vaadin-grid-drag-and-drop-mixin.d.ts +1 -1
  28. package/src/vaadin-grid-drag-and-drop-mixin.js +1 -1
  29. package/src/vaadin-grid-dynamic-columns-mixin.js +1 -1
  30. package/src/vaadin-grid-event-context-mixin.d.ts +1 -1
  31. package/src/vaadin-grid-event-context-mixin.js +2 -5
  32. package/src/vaadin-grid-filter-column-mixin.d.ts +1 -1
  33. package/src/vaadin-grid-filter-column-mixin.js +2 -27
  34. package/src/vaadin-grid-filter-column.d.ts +1 -1
  35. package/src/vaadin-grid-filter-column.js +1 -1
  36. package/src/vaadin-grid-filter-element-mixin.d.ts +1 -1
  37. package/src/vaadin-grid-filter-element-mixin.js +3 -11
  38. package/src/vaadin-grid-filter-mixin.js +1 -1
  39. package/src/vaadin-grid-filter.d.ts +1 -1
  40. package/src/vaadin-grid-filter.js +1 -1
  41. package/src/vaadin-grid-helpers.js +1 -1
  42. package/src/vaadin-grid-keyboard-navigation-mixin.js +30 -16
  43. package/src/vaadin-grid-mixin.d.ts +1 -1
  44. package/src/vaadin-grid-mixin.js +77 -16
  45. package/src/vaadin-grid-row-details-mixin.d.ts +1 -1
  46. package/src/vaadin-grid-row-details-mixin.js +1 -1
  47. package/src/vaadin-grid-scroll-mixin.d.ts +3 -1
  48. package/src/vaadin-grid-scroll-mixin.js +21 -9
  49. package/src/vaadin-grid-selection-column-base-mixin.d.ts +1 -1
  50. package/src/vaadin-grid-selection-column-base-mixin.js +19 -1
  51. package/src/vaadin-grid-selection-column-mixin.d.ts +1 -1
  52. package/src/vaadin-grid-selection-column-mixin.js +1 -1
  53. package/src/vaadin-grid-selection-column.d.ts +1 -1
  54. package/src/vaadin-grid-selection-column.js +1 -1
  55. package/src/vaadin-grid-selection-mixin.d.ts +1 -1
  56. package/src/vaadin-grid-selection-mixin.js +1 -1
  57. package/src/vaadin-grid-sort-column-mixin.d.ts +1 -1
  58. package/src/vaadin-grid-sort-column-mixin.js +1 -1
  59. package/src/vaadin-grid-sort-column.d.ts +1 -1
  60. package/src/vaadin-grid-sort-column.js +1 -1
  61. package/src/vaadin-grid-sort-mixin.d.ts +1 -1
  62. package/src/vaadin-grid-sort-mixin.js +1 -1
  63. package/src/vaadin-grid-sorter-mixin.d.ts +1 -1
  64. package/src/vaadin-grid-sorter-mixin.js +1 -1
  65. package/src/vaadin-grid-sorter.d.ts +1 -1
  66. package/src/vaadin-grid-sorter.js +1 -1
  67. package/src/vaadin-grid-styles.js +33 -1
  68. package/src/vaadin-grid-styling-mixin.d.ts +1 -1
  69. package/src/vaadin-grid-styling-mixin.js +1 -1
  70. package/src/vaadin-grid-tree-column-mixin.d.ts +1 -1
  71. package/src/vaadin-grid-tree-column-mixin.js +1 -1
  72. package/src/vaadin-grid-tree-column.d.ts +1 -1
  73. package/src/vaadin-grid-tree-column.js +1 -1
  74. package/src/vaadin-grid-tree-toggle-mixin.d.ts +1 -1
  75. package/src/vaadin-grid-tree-toggle-mixin.js +3 -5
  76. package/src/vaadin-grid-tree-toggle.d.ts +1 -1
  77. package/src/vaadin-grid-tree-toggle.js +1 -1
  78. package/src/vaadin-grid.d.ts +2 -1
  79. package/src/vaadin-grid.js +10 -1
  80. package/src/vaadin-lit-grid-column-group.js +2 -2
  81. package/src/vaadin-lit-grid-column.js +2 -2
  82. package/src/vaadin-lit-grid-filter-column.js +2 -2
  83. package/src/vaadin-lit-grid-filter.js +2 -2
  84. package/src/vaadin-lit-grid-selection-column.js +2 -2
  85. package/src/vaadin-lit-grid-sort-column.js +2 -2
  86. package/src/vaadin-lit-grid-sorter.js +2 -2
  87. package/src/vaadin-lit-grid-tree-column.js +2 -2
  88. package/src/vaadin-lit-grid-tree-toggle.js +2 -2
  89. package/src/vaadin-lit-grid.js +10 -2
  90. package/theme/lumo/all-imports.d.ts +11 -0
  91. package/theme/lumo/lit-all-imports.d.ts +11 -0
  92. package/theme/lumo/vaadin-grid-column-group.d.ts +1 -0
  93. package/theme/lumo/vaadin-grid-column.d.ts +1 -0
  94. package/theme/lumo/vaadin-grid-filter-column.d.ts +2 -0
  95. package/theme/lumo/vaadin-grid-filter.d.ts +2 -0
  96. package/theme/lumo/vaadin-grid-selection-column.d.ts +2 -0
  97. package/theme/lumo/vaadin-grid-sort-column.d.ts +2 -0
  98. package/theme/lumo/vaadin-grid-sorter-styles.d.ts +3 -0
  99. package/theme/lumo/vaadin-grid-sorter.d.ts +2 -0
  100. package/theme/lumo/vaadin-grid-styles.d.ts +6 -0
  101. package/theme/lumo/vaadin-grid-styles.js +10 -1
  102. package/theme/lumo/vaadin-grid-tree-column.d.ts +2 -0
  103. package/theme/lumo/vaadin-grid-tree-toggle-styles.d.ts +3 -0
  104. package/theme/lumo/vaadin-grid-tree-toggle.d.ts +2 -0
  105. package/theme/lumo/vaadin-grid.d.ts +2 -0
  106. package/theme/lumo/vaadin-lit-grid-column-group.d.ts +1 -0
  107. package/theme/lumo/vaadin-lit-grid-column.d.ts +1 -0
  108. package/theme/lumo/vaadin-lit-grid-filter-column.d.ts +2 -0
  109. package/theme/lumo/vaadin-lit-grid-filter.d.ts +2 -0
  110. package/theme/lumo/vaadin-lit-grid-filter.js +1 -2
  111. package/theme/lumo/vaadin-lit-grid-selection-column.d.ts +2 -0
  112. package/theme/lumo/vaadin-lit-grid-selection-column.js +1 -1
  113. package/theme/lumo/vaadin-lit-grid-sort-column.d.ts +2 -0
  114. package/theme/lumo/vaadin-lit-grid-sorter.d.ts +2 -0
  115. package/theme/lumo/vaadin-lit-grid-tree-column.d.ts +2 -0
  116. package/theme/lumo/vaadin-lit-grid-tree-toggle.d.ts +2 -0
  117. package/theme/lumo/vaadin-lit-grid.d.ts +2 -0
  118. package/theme/material/all-imports.d.ts +11 -0
  119. package/theme/material/lit-all-imports.d.ts +11 -0
  120. package/theme/material/vaadin-grid-column-group.d.ts +1 -0
  121. package/theme/material/vaadin-grid-column.d.ts +1 -0
  122. package/theme/material/vaadin-grid-filter-column.d.ts +2 -0
  123. package/theme/material/vaadin-grid-filter.d.ts +2 -0
  124. package/theme/material/vaadin-grid-selection-column.d.ts +2 -0
  125. package/theme/material/vaadin-grid-sort-column.d.ts +2 -0
  126. package/theme/material/vaadin-grid-sorter-styles.d.ts +2 -0
  127. package/theme/material/vaadin-grid-sorter.d.ts +2 -0
  128. package/theme/material/vaadin-grid-styles.d.ts +2 -0
  129. package/theme/material/vaadin-grid-styles.js +6 -0
  130. package/theme/material/vaadin-grid-tree-column.d.ts +2 -0
  131. package/theme/material/vaadin-grid-tree-toggle-styles.d.ts +3 -0
  132. package/theme/material/vaadin-grid-tree-toggle.d.ts +2 -0
  133. package/theme/material/vaadin-grid.d.ts +2 -0
  134. package/theme/material/vaadin-lit-grid-column-group.d.ts +1 -0
  135. package/theme/material/vaadin-lit-grid-column.d.ts +1 -0
  136. package/theme/material/vaadin-lit-grid-filter-column.d.ts +2 -0
  137. package/theme/material/vaadin-lit-grid-filter.d.ts +2 -0
  138. package/theme/material/vaadin-lit-grid-filter.js +1 -2
  139. package/theme/material/vaadin-lit-grid-selection-column.d.ts +2 -0
  140. package/theme/material/vaadin-lit-grid-selection-column.js +1 -1
  141. package/theme/material/vaadin-lit-grid-sort-column.d.ts +2 -0
  142. package/theme/material/vaadin-lit-grid-sorter.d.ts +2 -0
  143. package/theme/material/vaadin-lit-grid-tree-column.d.ts +2 -0
  144. package/theme/material/vaadin-lit-grid-tree-toggle.d.ts +2 -0
  145. package/theme/material/vaadin-lit-grid.d.ts +2 -0
  146. package/vaadin-grid.d.ts +0 -1
  147. package/vaadin-grid.js +0 -1
  148. package/vaadin-lit-grid.d.ts +0 -1
  149. package/vaadin-lit-grid.js +0 -1
  150. package/web-types.json +2579 -0
  151. package/web-types.lit.json +1091 -0
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -152,6 +152,12 @@ export const gridStyles = css`
152
152
  inset: 0;
153
153
  }
154
154
 
155
+ /* Switch the focusButtonMode wrapping element to "position: static" temporarily
156
+ when measuring real width of the cells in the auto-width columns. */
157
+ [measuring-auto-width] [part~='cell'] > [tabindex] {
158
+ position: static;
159
+ }
160
+
155
161
  [part~='details-cell'] {
156
162
  position: absolute;
157
163
  bottom: 0;
@@ -183,6 +189,32 @@ export const gridStyles = css`
183
189
  overflow: hidden;
184
190
  }
185
191
 
192
+ /* Empty state */
193
+
194
+ #scroller:not([empty-state]) #emptystatebody,
195
+ #scroller[empty-state] #items {
196
+ display: none;
197
+ }
198
+
199
+ #emptystatebody {
200
+ display: flex;
201
+ position: sticky;
202
+ inset: 0;
203
+ flex: 1;
204
+ overflow: hidden;
205
+ }
206
+
207
+ #emptystaterow {
208
+ display: flex;
209
+ flex: 1;
210
+ }
211
+
212
+ #emptystatecell {
213
+ display: block;
214
+ flex: 1;
215
+ overflow: auto;
216
+ }
217
+
186
218
  /* Reordering styles */
187
219
  :host([reordering]) [part~='cell'] ::slotted(vaadin-grid-cell-content),
188
220
  :host([reordering]) [part~='resize-handle'],
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import type { Constructor } from '@open-wc/dedupe-mixin';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { iterateChildren, iterateRowCells, updatePart } from './vaadin-grid-helpers.js';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
 
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { get } from '@vaadin/component-base/src/path-utils.js';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import type { GridDefaultItem } from './vaadin-grid.js';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import './vaadin-grid-tree-toggle.js';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import type { Constructor } from '@open-wc/dedupe-mixin';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -125,10 +125,8 @@ export const GridTreeToggleMixin = (superClass) =>
125
125
  };
126
126
  }
127
127
 
128
- /** @protected */
129
- ready() {
130
- super.ready();
131
-
128
+ constructor() {
129
+ super();
132
130
  this.addEventListener('click', (e) => this._onClick(e));
133
131
  }
134
132
 
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
@@ -205,6 +205,7 @@ export type GridDefaultItem = any;
205
205
  * `reorder-allowed-cell` | Cell in a column where another column can be reordered
206
206
  * `reorder-dragging-cell` | Cell in a column currently being reordered
207
207
  * `resize-handle` | Handle for resizing the columns
208
+ * `empty-state` | The container for the content to be displayed when there are no body rows to show
208
209
  * `reorder-ghost` | Ghost element of the header cell being dragged
209
210
  *
210
211
  * The following state attributes are available for styling:
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import './vaadin-grid-column.js';
@@ -205,6 +205,7 @@ registerStyles('vaadin-grid', gridStyles, { moduleId: 'vaadin-grid-styles' });
205
205
  * `reorder-allowed-cell` | Cell in a column where another column can be reordered
206
206
  * `reorder-dragging-cell` | Cell in a column currently being reordered
207
207
  * `resize-handle` | Handle for resizing the columns
208
+ * `empty-state` | The container for the content to be displayed when there are no body rows to show
208
209
  * `reorder-ghost` | Ghost element of the header cell being dragged
209
210
  *
210
211
  * The following state attributes are available for styling:
@@ -268,11 +269,19 @@ class Grid extends GridMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerE
268
269
  ios$="[[_ios]]"
269
270
  loading$="[[loading]]"
270
271
  column-reordering-allowed$="[[columnReorderingAllowed]]"
272
+ empty-state$="[[__emptyState]]"
271
273
  >
272
274
  <table id="table" role="treegrid" aria-multiselectable="true" tabindex="0">
273
275
  <caption id="sizer" part="row"></caption>
274
276
  <thead id="header" role="rowgroup"></thead>
275
277
  <tbody id="items" role="rowgroup"></tbody>
278
+ <tbody id="emptystatebody">
279
+ <tr id="emptystaterow">
280
+ <td part="empty-state" id="emptystatecell" tabindex="0">
281
+ <slot name="empty-state" id="emptystateslot"></slot>
282
+ </td>
283
+ </tr>
284
+ </tbody>
276
285
  <tfoot id="footer" role="rowgroup"></tfoot>
277
286
  </table>
278
287
 
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { LitElement } from 'lit';
@@ -13,7 +13,7 @@ import { GridColumnGroupMixin } from './vaadin-grid-column-group-mixin.js';
13
13
  *
14
14
  * ## Disclaimer
15
15
  *
16
- * This component is an experiment not intended for publishing to npm.
16
+ * This component is an experiment and not yet a part of Vaadin platform.
17
17
  * There is no ETA regarding specific Vaadin version where it'll land.
18
18
  * Feel free to try this code in your apps as per Apache 2.0 license.
19
19
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { LitElement } from 'lit';
@@ -13,7 +13,7 @@ import { GridColumnMixin } from './vaadin-grid-column-mixin.js';
13
13
  *
14
14
  * ## Disclaimer
15
15
  *
16
- * This component is an experiment not intended for publishing to npm.
16
+ * This component is an experiment and not yet a part of Vaadin platform.
17
17
  * There is no ETA regarding specific Vaadin version where it'll land.
18
18
  * Feel free to try this code in your apps as per Apache 2.0 license.
19
19
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import './vaadin-lit-grid-filter.js';
@@ -13,7 +13,7 @@ import { GridColumn } from './vaadin-lit-grid-column.js';
13
13
  *
14
14
  * ## Disclaimer
15
15
  *
16
- * This component is an experiment not intended for publishing to npm.
16
+ * This component is an experiment and not yet a part of Vaadin platform.
17
17
  * There is no ETA regarding specific Vaadin version where it'll land.
18
18
  * Feel free to try this code in your apps as per Apache 2.0 license.
19
19
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import '@vaadin/text-field/src/vaadin-lit-text-field.js';
@@ -15,7 +15,7 @@ import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
15
15
  *
16
16
  * ## Disclaimer
17
17
  *
18
- * This component is an experiment not intended for publishing to npm.
18
+ * This component is an experiment and not yet a part of Vaadin platform.
19
19
  * There is no ETA regarding specific Vaadin version where it'll land.
20
20
  * Feel free to try this code in your apps as per Apache 2.0 license.
21
21
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import '@vaadin/checkbox/src/vaadin-lit-checkbox.js';
@@ -13,7 +13,7 @@ import { GridColumn } from './vaadin-lit-grid-column.js';
13
13
  *
14
14
  * ## Disclaimer
15
15
  *
16
- * This component is an experiment not intended for publishing to npm.
16
+ * This component is an experiment and not yet a part of Vaadin platform.
17
17
  * There is no ETA regarding specific Vaadin version where it'll land.
18
18
  * Feel free to try this code in your apps as per Apache 2.0 license.
19
19
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import './vaadin-lit-grid-sorter.js';
@@ -13,7 +13,7 @@ import { GridColumn } from './vaadin-lit-grid-column.js';
13
13
  *
14
14
  * ## Disclaimer
15
15
  *
16
- * This component is an experiment not intended for publishing to npm.
16
+ * This component is an experiment and not yet a part of Vaadin platform.
17
17
  * There is no ETA regarding specific Vaadin version where it'll land.
18
18
  * Feel free to try this code in your apps as per Apache 2.0 license.
19
19
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { html, LitElement } from 'lit';
@@ -15,7 +15,7 @@ import { GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
15
15
  *
16
16
  * ## Disclaimer
17
17
  *
18
- * This component is an experiment not intended for publishing to npm.
18
+ * This component is an experiment and not yet a part of Vaadin platform.
19
19
  * There is no ETA regarding specific Vaadin version where it'll land.
20
20
  * Feel free to try this code in your apps as per Apache 2.0 license.
21
21
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import './vaadin-lit-grid-tree-toggle.js';
@@ -13,7 +13,7 @@ import { GridColumn } from './vaadin-lit-grid-column.js';
13
13
  *
14
14
  * ## Disclaimer
15
15
  *
16
- * This component is an experiment not intended for publishing to npm.
16
+ * This component is an experiment and not yet a part of Vaadin platform.
17
17
  * There is no ETA regarding specific Vaadin version where it'll land.
18
18
  * Feel free to try this code in your apps as per Apache 2.0 license.
19
19
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { html, LitElement } from 'lit';
@@ -15,7 +15,7 @@ import { GridTreeToggleMixin } from './vaadin-grid-tree-toggle-mixin.js';
15
15
  *
16
16
  * ## Disclaimer
17
17
  *
18
- * This component is an experiment not intended for publishing to npm.
18
+ * This component is an experiment and not yet a part of Vaadin platform.
19
19
  * There is no ETA regarding specific Vaadin version where it'll land.
20
20
  * Feel free to try this code in your apps as per Apache 2.0 license.
21
21
  */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import './vaadin-lit-grid-column.js';
@@ -18,7 +18,7 @@ import { gridStyles } from './vaadin-grid-styles.js';
18
18
  *
19
19
  * ## Disclaimer
20
20
  *
21
- * This component is an experiment not intended for publishing to npm.
21
+ * This component is an experiment and not yet a part of Vaadin platform.
22
22
  * There is no ETA regarding specific Vaadin version where it'll land.
23
23
  * Feel free to try this code in your apps as per Apache 2.0 license.
24
24
  */
@@ -40,11 +40,19 @@ class Grid extends GridMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)
40
40
  ios="${isIOS}"
41
41
  ?loading="${this.loading}"
42
42
  column-reordering-allowed="${this.columnReorderingAllowed}"
43
+ ?empty-state="${this.__emptyState}"
43
44
  >
44
45
  <table id="table" role="treegrid" aria-multiselectable="true" tabindex="0">
45
46
  <caption id="sizer" part="row"></caption>
46
47
  <thead id="header" role="rowgroup"></thead>
47
48
  <tbody id="items" role="rowgroup"></tbody>
49
+ <tbody id="emptystatebody">
50
+ <tr id="emptystaterow">
51
+ <td part="empty-state" id="emptystatecell" tabindex="0">
52
+ <slot name="empty-state" id="emptystateslot"></slot>
53
+ </td>
54
+ </tr>
55
+ </tbody>
48
56
  <tfoot id="footer" role="rowgroup"></tfoot>
49
57
  </table>
50
58
 
@@ -0,0 +1,11 @@
1
+ import './vaadin-grid-column-group.js';
2
+ import './vaadin-grid-column.js';
3
+ import './vaadin-grid-filter.js';
4
+ import './vaadin-grid-filter-column.js';
5
+ import './vaadin-grid-selection-column.js';
6
+ import './vaadin-grid-sorter.js';
7
+ import './vaadin-grid-sort-column.js';
8
+ import './vaadin-grid-tree-toggle.js';
9
+ import './vaadin-grid-tree-column.js';
10
+ import './vaadin-grid.js';
11
+ import '../../src/all-imports.js';
@@ -0,0 +1,11 @@
1
+ import './vaadin-lit-grid-column-group.js';
2
+ import './vaadin-lit-grid-column.js';
3
+ import './vaadin-lit-grid-filter.js';
4
+ import './vaadin-lit-grid-filter-column.js';
5
+ import './vaadin-lit-grid-selection-column.js';
6
+ import './vaadin-lit-grid-sorter.js';
7
+ import './vaadin-lit-grid-sort-column.js';
8
+ import './vaadin-lit-grid-tree-toggle.js';
9
+ import './vaadin-lit-grid-tree-column.js';
10
+ import './vaadin-lit-grid.js';
11
+ import '../../src/lit-all-imports.js';
@@ -0,0 +1 @@
1
+ import '../../src/vaadin-grid-column-group.js';
@@ -0,0 +1 @@
1
+ import '../../src/vaadin-grid-column.js';
@@ -0,0 +1,2 @@
1
+ import './vaadin-grid-filter.js';
2
+ import '../../src/vaadin-grid-filter-column.js';
@@ -0,0 +1,2 @@
1
+ import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
2
+ import '../../src/vaadin-grid-filter.js';
@@ -0,0 +1,2 @@
1
+ import '@vaadin/checkbox/theme/lumo/vaadin-checkbox.js';
2
+ import '../../src/vaadin-grid-selection-column.js';
@@ -0,0 +1,2 @@
1
+ import './vaadin-grid-sorter.js';
2
+ import '../../src/vaadin-grid-sort-column.js';
@@ -0,0 +1,3 @@
1
+ import '@vaadin/vaadin-lumo-styles/color.js';
2
+ import '@vaadin/vaadin-lumo-styles/style.js';
3
+ import '@vaadin/vaadin-lumo-styles/spacing.js';
@@ -0,0 +1,2 @@
1
+ import './vaadin-grid-sorter-styles.js';
2
+ import '../../src/vaadin-grid-sorter.js';
@@ -0,0 +1,6 @@
1
+ import '@vaadin/vaadin-lumo-styles/color.js';
2
+ import '@vaadin/vaadin-lumo-styles/font-icons.js';
3
+ import '@vaadin/vaadin-lumo-styles/sizing.js';
4
+ import '@vaadin/vaadin-lumo-styles/spacing.js';
5
+ import '@vaadin/vaadin-lumo-styles/style.js';
6
+ import '@vaadin/vaadin-lumo-styles/typography.js';
@@ -4,7 +4,6 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';
4
4
  import '@vaadin/vaadin-lumo-styles/spacing.js';
5
5
  import '@vaadin/vaadin-lumo-styles/style.js';
6
6
  import '@vaadin/vaadin-lumo-styles/typography.js';
7
- import '@vaadin/checkbox/theme/lumo/vaadin-checkbox-styles.js';
8
7
  import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
9
8
 
10
9
  registerStyles(
@@ -91,6 +90,12 @@ registerStyles(
91
90
  z-index: 3;
92
91
  }
93
92
 
93
+ /* Empty state */
94
+ [part~='empty-state'] {
95
+ padding: var(--lumo-space-m);
96
+ color: var(--lumo-secondary-text-color);
97
+ }
98
+
94
99
  /* Drag and Drop styles */
95
100
  :host([dragover])::after {
96
101
  content: '';
@@ -347,6 +352,10 @@ registerStyles(
347
352
  min-height: calc(var(--lumo-size-s) - var(--_lumo-grid-border-width));
348
353
  }
349
354
 
355
+ :host([theme~='compact']) [part~='empty-state'] {
356
+ padding: var(--lumo-space-s);
357
+ }
358
+
350
359
  /* Wrap cell contents */
351
360
 
352
361
  :host([theme~='wrap-cell-content']) [part~='cell'] ::slotted(vaadin-grid-cell-content) {
@@ -0,0 +1,2 @@
1
+ import './vaadin-grid-tree-toggle.js';
2
+ import '../../src/vaadin-grid-tree-column.js';
@@ -0,0 +1,3 @@
1
+ import '@vaadin/vaadin-lumo-styles/color.js';
2
+ import '@vaadin/vaadin-lumo-styles/spacing.js';
3
+ import '@vaadin/vaadin-lumo-styles/style.js';
@@ -0,0 +1,2 @@
1
+ import './vaadin-grid-tree-toggle-styles.js';
2
+ import '../../src/vaadin-grid-tree-toggle.js';
@@ -0,0 +1,2 @@
1
+ import './vaadin-grid-styles.js';
2
+ import '../../src/vaadin-grid.js';
@@ -0,0 +1 @@
1
+ import '../../src/vaadin-lit-grid-column-group.js';
@@ -0,0 +1 @@
1
+ import '../../src/vaadin-lit-grid-column.js';
@@ -0,0 +1,2 @@
1
+ import './vaadin-lit-grid-filter.js';
2
+ import '../../src/vaadin-lit-grid-filter-column.js';
@@ -0,0 +1,2 @@
1
+ import '@vaadin/text-field/theme/lumo/vaadin-lit-text-field.js';
2
+ import '../../src/vaadin-lit-grid-filter.js';
@@ -1,3 +1,2 @@
1
- import '@vaadin/text-field/theme/lumo/vaadin-text-field-styles.js';
2
- import '@vaadin/input-container/theme/lumo/vaadin-input-container-styles.js';
1
+ import '@vaadin/text-field/theme/lumo/vaadin-lit-text-field.js';
3
2
  import '../../src/vaadin-lit-grid-filter.js';
@@ -0,0 +1,2 @@
1
+ import '@vaadin/checkbox/theme/lumo/vaadin-lit-checkbox.js';
2
+ import '../../src/vaadin-lit-grid-selection-column.js';
@@ -1,2 +1,2 @@
1
- import '@vaadin/checkbox/theme/lumo/vaadin-checkbox-styles.js';
1
+ import '@vaadin/checkbox/theme/lumo/vaadin-lit-checkbox.js';
2
2
  import '../../src/vaadin-lit-grid-selection-column.js';
@@ -0,0 +1,2 @@
1
+ import './vaadin-lit-grid-sorter.js';
2
+ import '../../src/vaadin-lit-grid-sort-column.js';
@@ -0,0 +1,2 @@
1
+ import './vaadin-grid-sorter-styles.js';
2
+ import '../../src/vaadin-lit-grid-sorter.js';
@@ -0,0 +1,2 @@
1
+ import './vaadin-lit-grid-tree-toggle.js';
2
+ import '../../src/vaadin-lit-grid-tree-column.js';
@@ -0,0 +1,2 @@
1
+ import './vaadin-grid-tree-toggle-styles.js';
2
+ import '../../src/vaadin-lit-grid-tree-toggle.js';
@@ -0,0 +1,2 @@
1
+ import './vaadin-grid-styles.js';
2
+ import '../../src/vaadin-lit-grid.js';
@@ -0,0 +1,11 @@
1
+ import './vaadin-grid-column-group.js';
2
+ import './vaadin-grid-column.js';
3
+ import './vaadin-grid-filter.js';
4
+ import './vaadin-grid-filter-column.js';
5
+ import './vaadin-grid-selection-column.js';
6
+ import './vaadin-grid-sorter.js';
7
+ import './vaadin-grid-sort-column.js';
8
+ import './vaadin-grid-tree-toggle.js';
9
+ import './vaadin-grid-tree-column.js';
10
+ import './vaadin-grid.js';
11
+ import '../../src/all-imports.js';
@@ -0,0 +1,11 @@
1
+ import './vaadin-lit-grid-column-group.js';
2
+ import './vaadin-lit-grid-column.js';
3
+ import './vaadin-lit-grid-filter.js';
4
+ import './vaadin-lit-grid-filter-column.js';
5
+ import './vaadin-lit-grid-selection-column.js';
6
+ import './vaadin-lit-grid-sorter.js';
7
+ import './vaadin-lit-grid-sort-column.js';
8
+ import './vaadin-lit-grid-tree-toggle.js';
9
+ import './vaadin-lit-grid-tree-column.js';
10
+ import './vaadin-lit-grid.js';
11
+ import '../../src/lit-all-imports.js';
@@ -0,0 +1 @@
1
+ import '../../src/vaadin-grid-column-group.js';
@@ -0,0 +1 @@
1
+ import '../../src/vaadin-grid-column.js';
@@ -0,0 +1,2 @@
1
+ import './vaadin-grid-filter.js';
2
+ import '../../src/vaadin-grid-filter-column.js';