Skip to content

Commit 1700588

Browse files
anezthesjouni
anezthes
and
jouni
authored
experiment: add grid-pro base styles and visual tests (#9720)
Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>
1 parent 157c943 commit 1700588

File tree

65 files changed

+604
-25
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+604
-25
lines changed

‎dev/grid-pro.html‎

Lines changed: 243 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,266 @@
77
<title>Grid Pro</title>
88
<link rel="stylesheet" href="/packages/vaadin-lumo-styles/lumo.css" />
99
<script type="module" src="./common.js"></script>
10+
11+
<style>
12+
.controls {
13+
display: grid;
14+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
15+
gap: 2rem;
16+
margin-bottom: 2rem;
17+
font-size: 0.875rem;
18+
}
19+
20+
.control-group {
21+
display: flex;
22+
flex-direction: column;
23+
gap: 1em;
24+
}
25+
26+
.control-group h3 {
27+
margin-top: 0;
28+
font-size: var(--lumo-font-size-m);
29+
}
30+
31+
vaadin-grid-pro.auto-width {
32+
width: fit-content;
33+
}
34+
35+
vaadin-grid-pro.max-width {
36+
max-width: 50%;
37+
}
38+
39+
vaadin-grid-pro.max-height {
40+
max-height: 250px;
41+
}
42+
</style>
1043
</head>
1144
<body>
12-
<vaadin-grid-pro single-cell-edit>
13-
<vaadin-grid-pro-edit-column path="name.first"></vaadin-grid-pro-edit-column>
14-
<vaadin-grid-pro-edit-column path="name.last"></vaadin-grid-pro-edit-column>
45+
<div class="controls">
46+
<div class="control-group">
47+
<vaadin-checkbox-group label="Sizing">
48+
<vaadin-checkbox id="autoWidth" value="autoWidth" label="Auto Width"></vaadin-checkbox>
49+
<vaadin-checkbox id="all-rows" value="all-rows" label="Auto Height"></vaadin-checkbox>
50+
<vaadin-checkbox id="maxWidth" value="maxWidth" label="Max Width"></vaadin-checkbox>
51+
<vaadin-checkbox id="maxHeight" value="maxHeight" label="Max Height"></vaadin-checkbox>
52+
</vaadin-checkbox-group>
53+
54+
<vaadin-radio-group id="items" label="Items">
55+
<vaadin-checkbox id="details" value="details" label="Details"></vaadin-checkbox>
56+
</vaadin-radio-group>
57+
</div>
58+
59+
<div class="control-group">
60+
<vaadin-checkbox-group label="Column Features">
61+
<vaadin-checkbox id="header" value="header" label="Header" checked></vaadin-checkbox>
62+
<vaadin-checkbox id="footer" value="footer" label="Footer"></vaadin-checkbox>
63+
<vaadin-checkbox id="autoWidthCols" value="autoWidth" label="Auto Width"></vaadin-checkbox>
64+
<vaadin-checkbox id="resizable" value="resizable" label="Resizable"></vaadin-checkbox>
65+
<vaadin-checkbox id="frozen" value="frozen" label="Freeze First Name Column"></vaadin-checkbox>
66+
<vaadin-checkbox id="frozenEnd" value="frozenEnd" label="Freeze Married Column"></vaadin-checkbox>
67+
</vaadin-checkbox-group>
68+
<vaadin-select id="textAlign" label="Text Align"></vaadin-select>
69+
</div>
70+
71+
<div class="control-group">
72+
<vaadin-checkbox-group label="Theme Variants">
73+
<vaadin-checkbox value="no-border" label="No Border"></vaadin-checkbox>
74+
<vaadin-checkbox value="no-row-borders" label="No Row Border"></vaadin-checkbox>
75+
<vaadin-checkbox value="column-borders" label="Column Borders"></vaadin-checkbox>
76+
<vaadin-checkbox value="row-stripes" label="Row Stripes"></vaadin-checkbox>
77+
<vaadin-checkbox value="wrap-cell-content" label="Wrap Cell Content"></vaadin-checkbox>
78+
<vaadin-checkbox value="highlight-editable-cells" label="Highlight Editable Cells"></vaadin-checkbox>
79+
<vaadin-checkbox value="highlight-read-only-cells" label="Highlight Read-Only Cells"></vaadin-checkbox>
80+
</vaadin-checkbox-group>
81+
</div>
82+
83+
<div class="control-group">
84+
<vaadin-radio-group id="dropMode" label="Drop Mode">
85+
<vaadin-radio-button value="none" label="None"></vaadin-radio-button>
86+
<vaadin-radio-button value="on-grid" label="On Grid"></vaadin-radio-button>
87+
<vaadin-radio-button value="between" label="Between" checked></vaadin-radio-button>
88+
<vaadin-radio-button value="on-top" label="On Top"></vaadin-radio-button>
89+
</vaadin-radio-group>
90+
</div>
91+
</div>
92+
93+
<vaadin-grid-pro single-cell-edit column-reordering-allowed>
94+
<vaadin-grid-selection-column></vaadin-grid-selection-column>
95+
<vaadin-grid-pro-edit-column path="name.first" header="First Name"></vaadin-grid-pro-edit-column>
96+
<vaadin-grid-pro-edit-column path="name.last" header="Last Name"></vaadin-grid-pro-edit-column>
1597
<vaadin-grid-pro-edit-column
1698
path="name.title"
99+
header="Title"
17100
editor-type="select"
18101
editor-options='["mr", "mrs", "ms"]'
19102
></vaadin-grid-pro-edit-column>
103+
<vaadin-grid-sort-column path="email" header="Email"></vaadin-grid-sort-column>
20104
<vaadin-grid-pro-edit-column path="married" editor-type="checkbox"></vaadin-grid-pro-edit-column>
21105
</vaadin-grid-pro>
22106

23107
<script type="module">
108+
import '@vaadin/grid/all-imports';
109+
import '@vaadin/checkbox';
110+
import '@vaadin/checkbox-group';
111+
import '@vaadin/radio-group';
112+
import '@vaadin/select';
113+
import '@vaadin/list-box';
24114
import '@vaadin/grid-pro';
25115
import '@vaadin/grid-pro/vaadin-grid-pro-edit-column.js';
26116
import { users } from '../packages/grid-pro/test/visual/users.js';
27117

28118
const grid = document.querySelector('vaadin-grid-pro');
29119
grid.items = users;
120+
121+
// Setup grid and controls
122+
const selectionColumn = grid.querySelector('vaadin-grid-selection-column');
123+
124+
// Setup row details renderer
125+
const rowDetailsRenderer = (root, grid, model) => {
126+
root.innerHTML = `
127+
<div style="padding: 1rem">
128+
<h4>Details for ${model.item.name}</h4>
129+
<p>Additional information could be shown here.</p>
130+
</div>
131+
`;
132+
};
133+
134+
// Setup selects
135+
const textAlignSelect = document.getElementById('textAlign');
136+
textAlignSelect.items = [
137+
{ label: 'Start', value: 'start' },
138+
{ label: 'Center', value: 'center' },
139+
{ label: 'End', value: 'end' },
140+
];
141+
142+
// Enable drag and drop by default
143+
grid.rowsDraggable = true;
144+
grid.dropMode = 'between';
145+
146+
// Sizing Controls
147+
document.getElementById('autoWidth').addEventListener('checked-changed', (e) => {
148+
grid.classList.toggle('auto-width', e.detail.value);
149+
});
150+
151+
document.getElementById('all-rows').addEventListener('checked-changed', (e) => {
152+
grid.allRowsVisible = e.detail.value;
153+
});
154+
155+
document.getElementById('maxWidth').addEventListener('checked-changed', (e) => {
156+
grid.classList.toggle('max-width', e.detail.value);
157+
});
158+
159+
document.getElementById('maxHeight').addEventListener('checked-changed', (e) => {
160+
grid.classList.toggle('max-height', e.detail.value);
161+
});
162+
163+
document.getElementById('details').addEventListener('checked-changed', (e) => {
164+
grid.rowDetailsRenderer = e.detail.value ? rowDetailsRenderer : undefined;
165+
});
166+
167+
// Column Controls
168+
document.getElementById('header').addEventListener('checked-changed', (e) => {
169+
grid
170+
.querySelectorAll(
171+
'vaadin-grid-column-group, vaadin-grid-column, vaadin-grid-tree-column, vaadin-grid-filter-column, vaadin-grid-sort-column, vaadin-grid-pro-edit-column',
172+
)
173+
.forEach((col) => {
174+
col.__headerText = col.header ?? col.__headerText;
175+
col.header = e.detail.value ? col.__headerText : null;
176+
col.headerRenderer = e.detail.value
177+
? (root) => {
178+
root.textContent = col.__headerText || col.path;
179+
}
180+
: null;
181+
});
182+
});
183+
184+
document.getElementById('footer').addEventListener('checked-changed', (e) => {
185+
grid
186+
.querySelectorAll(
187+
'vaadin-grid-column-group, vaadin-grid-column, vaadin-grid-tree-column, vaadin-grid-filter-column, vaadin-grid-sort-column, vaadin-grid-pro-edit-column',
188+
)
189+
.forEach((col) => {
190+
col.__headerText = col.header ?? col.__headerText;
191+
col.footerRenderer = e.detail.value
192+
? (root) => {
193+
root.textContent = col.__headerText ?? col.path;
194+
}
195+
: null;
196+
});
197+
});
198+
199+
document.getElementById('autoWidthCols').addEventListener('checked-changed', (e) => {
200+
grid
201+
.querySelectorAll(
202+
'vaadin-grid-column, vaadin-grid-tree-column, vaadin-grid-filter-column, vaadin-grid-sort-column, vaadin-grid-pro-edit-column',
203+
)
204+
.forEach((col) => {
205+
col.autoWidth = e.detail.value;
206+
col.width = e.detail.value ? undefined : '100px';
207+
col.flexGrow = 1;
208+
});
209+
grid.recalculateColumnWidths();
210+
});
211+
212+
document.getElementById('resizable').addEventListener('checked-changed', (e) => {
213+
grid
214+
.querySelectorAll(
215+
'vaadin-grid-column, vaadin-grid-tree-column, vaadin-grid-filter-column, vaadin-grid-sort-column, vaadin-grid-pro-edit-column',
216+
)
217+
.forEach((col) => {
218+
col.resizable = e.detail.value;
219+
});
220+
});
221+
222+
document.getElementById('frozen').addEventListener('checked-changed', (e) => {
223+
const firstCol = grid.querySelector('vaadin-grid-pro-edit-column');
224+
if (firstCol) {
225+
firstCol.frozen = e.detail.value;
226+
}
227+
// Also freeze the selection column
228+
const selectionColumn = grid.querySelector('vaadin-grid-selection-column');
229+
if (selectionColumn) {
230+
selectionColumn.frozen = e.detail.value;
231+
}
232+
});
233+
234+
document.getElementById('frozenEnd').addEventListener('checked-changed', (e) => {
235+
const lastCol = Array.from(grid.querySelectorAll('vaadin-grid-pro-edit-column')).pop();
236+
if (lastCol) {
237+
lastCol.frozenToEnd = e.detail.value;
238+
}
239+
});
240+
241+
document.getElementById('textAlign').addEventListener('value-changed', (e) => {
242+
grid
243+
.querySelectorAll('vaadin-grid-tree-column, vaadin-grid-sort-column, vaadin-grid-filter-column')
244+
.forEach((col) => {
245+
col.textAlign = e.detail.value;
246+
});
247+
});
248+
249+
// Handle active item changes for details
250+
grid.addEventListener('active-item-changed', (e) => {
251+
const item = e.detail.value;
252+
grid.detailsOpenedItems = item ? [item] : [];
253+
});
254+
255+
// Drag & Drop Controls
256+
document.getElementById('dropMode').addEventListener('value-changed', (e) => {
257+
grid.dropMode = e.detail.value;
258+
});
259+
260+
// Theme Controls
261+
document.querySelectorAll('[label="Theme Variants"] vaadin-checkbox').forEach((control) => {
262+
control.addEventListener('checked-changed', (e) => {
263+
if (e.detail.value) {
264+
grid.setAttribute('theme', `${grid.getAttribute('theme') || ''} ${control.value}`.trim());
265+
} else {
266+
grid.setAttribute('theme', (grid.getAttribute('theme') || '').replace(control.value, '').trim());
267+
}
268+
});
269+
});
30270
</script>
31271
</body>
32272
</html>

‎packages/grid-pro/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@
2323
"lit.d.ts",
2424
"lit.js",
2525
"src",
26+
"!src/styles/*-base-styles.d.ts",
27+
"!src/styles/*-base-styles.js",
2628
"theme",
2729
"vaadin-*.d.ts",
2830
"vaadin-*.js",

‎packages/grid-pro/src/styles/vaadin-grid-pro-base-styles.d.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2000 - 2025 Vaadin Ltd.
4+
*
5+
* This program is available under Vaadin Commercial License and Service Terms.
6+
*
7+
*
8+
* See https://vaadin.com/commercial-license-and-service-terms for the full
9+
* license.
10+
*/
11+
import type { CSSResult } from 'lit';
12+
13+
export const gridProStyles: CSSResult;

‎packages/grid-pro/src/styles/vaadin-grid-pro-base-styles.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2000 - 2025 Vaadin Ltd.
4+
*
5+
* This program is available under Vaadin Commercial License and Service Terms.
6+
*
7+
*
8+
* See https://vaadin.com/commercial-license-and-service-terms for the full
9+
* license.
10+
*/
11+
import '@vaadin/component-base/src/style-props.js';
12+
import { css } from 'lit';
13+
import { gridStyles } from '@vaadin/grid/src/styles/vaadin-grid-base-styles.js';
14+
15+
const gridPro = css`
16+
[part~='body-cell'] {
17+
--_highlight-color: color-mix(in srgb, currentColor 5%, transparent);
18+
--_highlight-color2: color-mix(in srgb, currentColor 10%, transparent);
19+
--_highlight-bg: linear-gradient(var(--_highlight-color), var(--_highlight-color));
20+
}
21+
22+
[part~='editable-cell'] {
23+
display: flex;
24+
align-items: inherit;
25+
align-self: stretch;
26+
flex: 1;
27+
min-width: 0;
28+
cursor: var(--vaadin-clickable-cursor);
29+
outline: 0;
30+
}
31+
32+
[part~='editable-cell']:hover,
33+
:host([navigating]) [part~='editable-cell']:focus {
34+
background: var(--vaadin-grid-pro-editable-cell-background-hover, var(--_highlight-bg));
35+
}
36+
37+
/* Indicate editable cells */
38+
39+
:host([theme~='highlight-editable-cells']) [part~='editable-cell'] {
40+
background: var(--vaadin-grid-pro-editable-cell-background, var(--_highlight-bg));
41+
}
42+
43+
:host([theme~='highlight-editable-cells']) [part~='editable-cell']:is(:hover, :focus-visible) {
44+
background:
45+
var(--vaadin-grid-pro-editable-cell-background-hover, var(--_highlight-bg)),
46+
var(--vaadin-grid-pro-editable-cell-background, var(--_highlight-bg));
47+
}
48+
49+
/* Indicate read-only cells */
50+
51+
/* prettier-ignore */
52+
:host([theme~='highlight-read-only-cells']) [part~='body-cell']:not(:has([part~='editable-cell'])) {
53+
--vaadin-grid-cell-background-hover: repeating-linear-gradient(
54+
-45deg,
55+
transparent,
56+
transparent 30%,
57+
var(--_highlight-color2) 30%,
58+
var(--_highlight-color2) 50%
59+
);
60+
background-size: 6px 6px;
61+
}
62+
63+
/* Loading editor cell styles are used by Flow GridPro */
64+
:host([loading-editor]) [part~='focused-cell']::before {
65+
content: '';
66+
position: absolute;
67+
inset: 0;
68+
pointer-events: none;
69+
box-shadow: inset 0 0 0 var(--vaadin-focus-ring-width) var(--vaadin-focus-ring-color);
70+
animation: loading-editor 1.4s infinite;
71+
opacity: 0;
72+
}
73+
74+
@keyframes loading-editor {
75+
50% {
76+
opacity: 1;
77+
}
78+
}
79+
80+
[part~='updating-cell']::after {
81+
content: '';
82+
position: absolute;
83+
inset: var(--_cell-padding);
84+
margin: var(--vaadin-focus-ring-width);
85+
border-radius: 4px;
86+
background-size: max(4em, 50%);
87+
background-repeat: no-repeat;
88+
background-position: min(-200%, -4em) 0;
89+
background-image: linear-gradient(90deg, transparent, currentColor, transparent);
90+
animation: updating-cell 1.3s ease-out infinite;
91+
opacity: 0.1;
92+
}
93+
94+
@keyframes updating-cell {
95+
100% {
96+
background-position: max(300%, 8em) 0;
97+
}
98+
}
99+
`;
100+
101+
export const gridProStyles = [gridPro, gridStyles];

0 commit comments

Comments
 (0)