Skip to content

Commit 936ab62

Browse files
vursenvursen
committed
wip
1 parent 7a1b4c7 commit 936ab62

File tree

3 files changed

+123
-47
lines changed

3 files changed

+123
-47
lines changed

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

Lines changed: 81 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -121,19 +121,35 @@ export const gridStyles = css`
121121
[part~='reorder-ghost'] {
122122
font-size: var(--vaadin-grid-header-font-size, 1em);
123123
font-weight: var(--vaadin-grid-header-font-weight, 500);
124-
color: var(--vaadin-grid-text-header-color, var(--vaadin-text-color));
124+
color: var(--vaadin-grid-header-text-color, var(--vaadin-text-color));
125125
}
126126
127127
[part~='row'] {
128-
display: flex;
128+
--_row-background-color: var(--vaadin-grid-row-background-color, var(--vaadin-background-color));
129+
display: grid;
130+
grid-template-columns: var(--_template-columns);
131+
grid-template-rows: min-content 4px;
129132
width: 100%;
130133
box-sizing: border-box;
131134
margin: 0;
132135
position: relative;
133-
}
134136
135-
[part~='row']:empty {
136-
height: 100%;
137+
&::before {
138+
content: '';
139+
display: none;
140+
position: absolute;
141+
box-sizing: border-box;
142+
grid-row: 1 / -1;
143+
grid-column: 1 / -1;
144+
inset: calc(var(--_row-border-width) * -1) 0 0 0;
145+
background-image: var(--_selected-background-image);
146+
background-color: var(--_row-background-color);
147+
border-block: var(--_row-border-width) solid var(--_border-color);
148+
}
149+
150+
&:empty {
151+
height: 100%;
152+
}
137153
}
138154
139155
[part~='row']:not(:focus-within) {
@@ -144,16 +160,31 @@ export const gridStyles = css`
144160
visibility: hidden;
145161
}
146162
147-
[column-rendering='lazy'] [part~='body-cell']:not([frozen]):not([frozen-to-end]) {
148-
transform: translateX(var(--_grid-lazy-columns-start));
163+
[part~='body-row'] {
164+
&::before {
165+
display: block;
166+
}
167+
168+
&:focus,
169+
&:focus-within {
170+
z-index: 4;
171+
172+
&:not([part~='selected-row'])::before {
173+
border-color: transparent;
174+
background-clip: padding-box;
175+
}
176+
}
177+
178+
&[selected] {
179+
z-index: 3;
180+
}
149181
}
150182
151183
[part~='cell'] {
152-
--vaadin-grid-cell-background-color: yellow;
184+
grid-row-start: 1;
153185
padding: 0;
154186
box-sizing: border-box;
155187
background: var(--vaadin-grid-cell-background, var(--vaadin-background-color));
156-
border-block: var(--_row-border-width) var(--_border-color);
157188
}
158189
159190
[part~='body-cell'],
@@ -166,7 +197,13 @@ export const gridStyles = css`
166197
position: relative;
167198
align-items: center;
168199
white-space: nowrap;
200+
z-index: 1;
169201
border-inline: var(--_column-border-width) var(--_border-color);
202+
border-block: var(--_row-border-width) var(--_border-color);
203+
204+
&:focus {
205+
z-index: 4;
206+
}
170207
}
171208
172209
/* Column borders */
@@ -183,32 +220,49 @@ export const gridStyles = css`
183220
}
184221
185222
/* Row borders */
223+
/* #table {
224+
background: var(--_border-color);
225+
} */
226+
227+
/* [part~='cell'] {
228+
229+
} */
230+
186231
#header {
187-
padding-bottom: var(--_row-border-width);
188-
margin-bottom: calc(var(--_row-border-width) * -1);
232+
/* padding-bottom: var(--_row-border-width);
233+
margin-bottom: calc(var(--_row-border-width) * -1); */
189234
}
190235
191-
[part~='header-cell']:not([part~='last-header-row-cell']),
192-
[part~='footer-cell']:not([part~='last-footer-row-cell']) {
193-
border-bottom-style: solid;
236+
#header [part~='row'],
237+
#footer [part~='row'] {
238+
&::before {
239+
display: block;
240+
}
241+
}
242+
243+
[part~='first-row-cell'] {
244+
margin-top: 0;
245+
}
246+
[part~='last-header-row-cell'] {
247+
border-bottom: 0;
194248
}
195249
196250
[part~='body-cell']:not([part~='last-row-cell']),
197251
[part~='body-cell']:not([part~='last-row-cell']) + [part~='details-cell'] {
198-
border-bottom-style: solid;
252+
/* padding-bottom: var(--_row-border-width); */
199253
}
200254
201255
/* Grid with header */
202256
#table:has(#header > tr:not([hidden])) {
203257
[part~='first-row-cell'] {
204-
border-block-start-style: solid;
258+
/* padding-top: var(--_row-border-width); */
205259
}
206260
}
207261
208262
/* Grid with footer */
209263
#table:has(#footer > tr:not([hidden])) {
210264
[part~='last-row-cell'] {
211-
border-block-end-style: solid;
265+
/* padding-bottom: var(--_row-border-width); */
212266
}
213267
}
214268
@@ -233,7 +287,11 @@ export const gridStyles = css`
233287
var(--_hover-background-image, none) padding-box,
234288
var(--_selected-background-image, none) border-box,
235289
var(--_highlight-background-image) padding-box,
236-
var(--vaadin-grid-cell-background-color) border-box;
290+
var(--vaadin-grid-cell-background-color, var(--_row-background-color)) border-box;
291+
}
292+
293+
[column-rendering='lazy'] [part~='body-cell']:not([frozen]):not([frozen-to-end]) {
294+
transform: translateX(var(--_grid-lazy-columns-start));
237295
}
238296
239297
/* Variant: wrap cell contents */
@@ -244,31 +302,18 @@ export const gridStyles = css`
244302
245303
/* Variant: row stripes */
246304
[part~='odd-row'] {
247-
--vaadin-grid-cell-background-color: var(--vaadin-grid-row-odd-background-color, var(--vaadin-background-color));
305+
--vaadin-grid-cell-background-color: var(--vaadin-grid-row-odd-background-color, var(--_row-background-color));
248306
}
249307
250308
:host([theme~='row-stripes']) [part~='odd-row'] {
251309
--vaadin-grid-cell-background-color: var(
252310
--vaadin-grid-row-odd-background-color,
253-
color-mix(in srgb, var(--vaadin-text-color) 4%, var(--vaadin-background-color))
311+
color-mix(in srgb, var(--vaadin-text-color) 4%, var(--_row-background-color))
254312
);
255313
}
256314
257315
/* Raise highlighted rows above others */
258316
259-
[part~='selected-row'] {
260-
z-index: 3;
261-
}
262-
263-
[part~='row']:focus,
264-
[part~='row']:focus-within {
265-
z-index: 4;
266-
267-
[part~='cell']:not([part~='selected-row-cell']) {
268-
border-top-color: transparent;
269-
}
270-
}
271-
272317
/* @container style(--vaadin-grid-row-odd-background-color) {
273318
[part~='odd-row'] {
274319
z-index: 1;
@@ -321,11 +366,11 @@ export const gridStyles = css`
321366
}
322367
323368
[part~='selected-row-cell'] {
324-
border-top-style: solid;
369+
/* border-top-style: solid; */
325370
}
326371
327372
[part~='selected-row-cell']:not([part~='first-row-cell']) {
328-
margin-top: calc(var(--_row-border-width) * -1);
373+
/* margin-top: calc(var(--_row-border-width) * -1); */
329374
}
330375
331376
/* Empty state */
@@ -605,9 +650,9 @@ export const gridStyles = css`
605650
606651
/* Sizer styles */
607652
#sizer {
608-
display: flex;
609653
visibility: hidden;
610654
border: none !important;
655+
grid-template-rows: none !important;
611656
}
612657
613658
#sizer [part~='details-cell'],

‎packages/grid/src/vaadin-grid-column-mixin.js‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -374,32 +374,44 @@ export const ColumnBaseMixin = (superClass) =>
374374
}
375375

376376
/** @private */
377-
_flexGrowChanged(flexGrow) {
377+
_flexGrowChanged(_flexGrow) {
378378
if (this.parentElement && this.parentElement._columnPropChanged) {
379379
this.parentElement._columnPropChanged('flexGrow');
380380
}
381381

382-
this._allCells.forEach((cell) => {
383-
cell.style.flexGrow = flexGrow;
384-
});
382+
if (this._grid && this._grid.__updateCSSGridTemplateColumns) {
383+
this._grid.__updateCSSGridTemplateColumns();
384+
}
385+
386+
// this._allCells.forEach((cell) => {
387+
// cell.style.flexGrow = flexGrow;
388+
// });
385389
}
386390

387391
/** @private */
388392
_orderChanged(order) {
389393
this._allCells.forEach((cell) => {
390394
cell.style.order = order;
391395
});
396+
397+
if (this._grid && this._grid._cellOrderChanged) {
398+
this._grid._cellOrderChanged();
399+
}
392400
}
393401

394402
/** @private */
395-
_widthChanged(width) {
403+
_widthChanged(_width) {
396404
if (this.parentElement && this.parentElement._columnPropChanged) {
397405
this.parentElement._columnPropChanged('width');
398406
}
399407

400-
this._allCells.forEach((cell) => {
401-
cell.style.width = width;
402-
});
408+
// this._allCells.forEach((cell) => {
409+
// cell.style.width = width;
410+
// });
411+
412+
if (this._grid && this._grid.__updateCSSGridTemplateColumns) {
413+
this._grid.__updateCSSGridTemplateColumns();
414+
}
403415
}
404416

405417
/** @private */
@@ -419,9 +431,9 @@ export const ColumnBaseMixin = (superClass) =>
419431

420432
/** @private */
421433
_frozenToEndChanged(frozenToEnd) {
422-
if (this.parentElement && this.parentElement._columnPropChanged) {
423-
this.parentElement._columnPropChanged('frozenToEnd', frozenToEnd);
424-
}
434+
// if (this.parentElement && this.parentElement._columnPropChanged) {
435+
// this.parentElement._columnPropChanged('frozenToEnd', frozenToEnd);
436+
// }
425437

426438
this._allCells.forEach((cell) => {
427439
// Skip sizer cells to keep correct scrollWidth.

‎packages/grid/src/vaadin-grid-mixin.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -585,6 +585,24 @@ export const GridMixin = (superClass) =>
585585
this._updateFirstAndLastColumnForRow(row);
586586
}
587587

588+
/** @private */
589+
__updateCSSGridTemplateColumns() {
590+
if (!this._columnTree) {
591+
return;
592+
}
593+
594+
const templateColumns = this._columnTree[this._columnTree.length - 1]
595+
.map((column) => {
596+
if (column.flexGrow > 0) {
597+
return `minmax(${column.width}, ${column.flexGrow}fr)`;
598+
}
599+
return column.width;
600+
})
601+
.join(' ');
602+
603+
this.$.table.style.setProperty('--_template-columns', templateColumns);
604+
}
605+
588606
/**
589607
* @param {HTMLTableRowElement} row
590608
* @protected
@@ -746,6 +764,7 @@ export const GridMixin = (superClass) =>
746764
// Sizer rows
747765
this.__initRow(this.$.sizer, columnTree[columnTree.length - 1]);
748766

767+
this.__updateCSSGridTemplateColumns();
749768
this._resizeHandler();
750769
this._frozenCellsChanged();
751770
this._updateFirstAndLastColumn();

0 commit comments

Comments
 (0)