Skip to content

Commit 015e6d4

Browse files
vursenvursen
authored
refactor: apply CSS parts using Element's part property (#10480)
1 parent 175fb95 commit 015e6d4

11 files changed

+34
-38
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export const ActiveItemMixin = (superClass) =>
7373
// No clicked cell available
7474
!cell ||
7575
// Cell is a details cell
76-
cell.getAttribute('part').includes('details-cell') ||
76+
cell.part.contains('details-cell') ||
7777
// Cell is the empty state cell
7878
cell === this.$.emptystatecell ||
7979
// Cell content is focused

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { animationFrame } from '@vaadin/component-base/src/async.js';
77
import { Debouncer } from '@vaadin/component-base/src/debounce.js';
88
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
99
import { get } from '@vaadin/component-base/src/path-utils.js';
10-
import { updateCellState } from './vaadin-grid-helpers.js';
10+
import { updateCellState, updatePart } from './vaadin-grid-helpers.js';
1111

1212
/**
1313
* @polymerMixin
@@ -518,7 +518,7 @@ export const ColumnBaseMixin = (superClass) =>
518518

519519
if (resizable) {
520520
const handle = document.createElement('div');
521-
handle.setAttribute('part', 'resize-handle');
521+
updatePart(handle, 'resize-handle', true);
522522
cell.appendChild(handle);
523523
}
524524
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ export const ColumnReorderingMixin = (superClass) =>
134134
}
135135

136136
const headerCell = this._cellFromPoint(e.detail.x, e.detail.y);
137-
if (!headerCell || !headerCell.getAttribute('part').includes('header-cell')) {
137+
if (!headerCell || !headerCell.part.contains('header-cell')) {
138138
return;
139139
}
140140

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,22 +20,16 @@ export const ColumnResizingMixin = (superClass) =>
2020
scroller.addEventListener('touchmove', (e) => scroller.hasAttribute('column-resizing') && e.preventDefault());
2121

2222
// Disable contextmenu on any resize separator.
23-
scroller.addEventListener(
24-
'contextmenu',
25-
(e) => e.target.getAttribute('part') === 'resize-handle' && e.preventDefault(),
26-
);
23+
scroller.addEventListener('contextmenu', (e) => e.target.part.contains('resize-handle') && e.preventDefault());
2724

2825
// Disable native cell focus when resizing
29-
scroller.addEventListener(
30-
'mousedown',
31-
(e) => e.target.getAttribute('part') === 'resize-handle' && e.preventDefault(),
32-
);
26+
scroller.addEventListener('mousedown', (e) => e.target.part.contains('resize-handle') && e.preventDefault());
3327
}
3428

3529
/** @private */
3630
_onHeaderTrack(e) {
3731
const handle = e.target;
38-
if (handle.getAttribute('part') === 'resize-handle') {
32+
if (handle.part.contains('resize-handle')) {
3933
const cell = handle.parentElement;
4034
let column = cell._column;
4135

‎packages/grid/src/vaadin-grid-drag-and-drop-mixin.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -447,7 +447,7 @@ export const DragAndDropMixin = (superClass) =>
447447
return rows
448448
.map((row) => {
449449
return Array.from(row.children)
450-
.filter((cell) => !cell.hidden && cell.getAttribute('part').indexOf('details-cell') === -1)
450+
.filter((cell) => !cell.hidden && !cell.part.contains('details-cell'))
451451
.sort((a, b) => {
452452
return a._column._order > b._column._order ? 1 : -1;
453453
})

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ export const EventContextMixin = (superClass) =>
4040
return context;
4141
}
4242

43-
context.section = ['body', 'header', 'footer', 'details'].find(
44-
(section) => cell.getAttribute('part').indexOf(section) > -1,
43+
context.section = ['body', 'header', 'footer', 'details'].find((section) =>
44+
cell.part.contains(`${section}-cell`),
4545
);
4646

4747
if (cell._column) {

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
*/
66
import { microTask } from '@vaadin/component-base/src/async.js';
77
import { Debouncer } from '@vaadin/component-base/src/debounce.js';
8-
import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
98

109
/**
1110
* Returns the cells of the given row, excluding the details cell.
@@ -85,11 +84,8 @@ export function updateState(element, attribute, value) {
8584
* @param {boolean | string | null | undefined} value
8685
*/
8786
export function updatePart(element, part, value) {
88-
if (value || value === '') {
89-
addValueToAttribute(element, 'part', part);
90-
} else {
91-
removeValueFromAttribute(element, 'part', part);
92-
}
87+
element.part.toggle(part, value || value === '');
88+
element.part.length === 0 && element.removeAttribute('part');
9389
}
9490

9591
/**

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
77
import { animationFrame } from '@vaadin/component-base/src/async.js';
88
import { Debouncer } from '@vaadin/component-base/src/debounce.js';
9-
import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
9+
import { updatePart } from './vaadin-grid-helpers.js';
1010

1111
function isRow(element) {
1212
return element instanceof HTMLTableRowElement;
@@ -169,11 +169,11 @@ export const KeyboardNavigationMixin = (superClass) =>
169169
/** @private */
170170
_focusedCellChanged(focusedCell, oldFocusedCell) {
171171
if (oldFocusedCell) {
172-
removeValueFromAttribute(oldFocusedCell, 'part', 'focused-cell');
172+
updatePart(oldFocusedCell, 'focused-cell', false);
173173
}
174174

175175
if (focusedCell) {
176-
addValueToAttribute(focusedCell, 'part', 'focused-cell');
176+
updatePart(focusedCell, 'focused-cell', true);
177177
}
178178
}
179179

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

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -354,9 +354,10 @@ export const GridMixin = (superClass) =>
354354
const rows = [];
355355
for (let i = 0; i < count; i++) {
356356
const row = document.createElement('tr');
357-
row.setAttribute('part', 'row body-row');
358357
row.setAttribute('role', 'row');
359358
row.setAttribute('tabindex', '-1');
359+
updatePart(row, 'row', true);
360+
updatePart(row, 'body-row', true);
360361
if (this._columnTree) {
361362
this.__initRow(row, this._columnTree[this._columnTree.length - 1], 'body', false, true);
362363
}
@@ -503,7 +504,8 @@ export const GridMixin = (superClass) =>
503504
}
504505
column._cells.push(cell);
505506
}
506-
cell.setAttribute('part', 'cell body-cell');
507+
updatePart(cell, 'cell', true);
508+
updatePart(cell, 'body-cell', true);
507509
cell.__parentRow = row;
508510
// Cache the cell reference
509511
row.__cells.push(cell);
@@ -565,7 +567,8 @@ export const GridMixin = (superClass) =>
565567
column._emptyCells.push(cell);
566568
}
567569
}
568-
cell.part.add('cell', `${section}-cell`);
570+
updatePart(cell, 'cell', true);
571+
updatePart(cell, `${section}-cell`, true);
569572
}
570573

571574
if (!cell._content.parentElement) {
@@ -713,15 +716,17 @@ export const GridMixin = (superClass) =>
713716

714717
while (this.$.header.children.length < columnTree.length) {
715718
const headerRow = document.createElement('tr');
716-
headerRow.setAttribute('part', 'row header-row');
717719
headerRow.setAttribute('role', 'row');
718720
headerRow.setAttribute('tabindex', '-1');
721+
updatePart(headerRow, 'row', true);
722+
updatePart(headerRow, 'header-row', true);
719723
this.$.header.appendChild(headerRow);
720724

721725
const footerRow = document.createElement('tr');
722-
footerRow.setAttribute('part', 'row footer-row');
723726
footerRow.setAttribute('role', 'row');
724727
footerRow.setAttribute('tabindex', '-1');
728+
updatePart(footerRow, 'row', true);
729+
updatePart(footerRow, 'footer-row', true);
725730
this.$.footer.appendChild(footerRow);
726731
}
727732
while (this.$.header.children.length > columnTree.length) {

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* Copyright (c) 2016 - 2025 Vaadin Ltd.
44
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
55
*/
6-
import { iterateChildren } from './vaadin-grid-helpers.js';
6+
import { iterateChildren, updatePart } from './vaadin-grid-helpers.js';
77

88
/**
99
* @polymerMixin
@@ -109,7 +109,8 @@ export const RowDetailsMixin = (superClass) =>
109109
* @protected
110110
*/
111111
_configureDetailsCell(cell) {
112-
cell.setAttribute('part', 'cell details-cell');
112+
updatePart(cell, 'cell', true);
113+
updatePart(cell, 'details-cell', true);
113114
// Freeze the details cell, so that it does not scroll horizontally
114115
// with the normal cells. This way it looks less weird.
115116
cell.toggleAttribute('frozen', true);

0 commit comments

Comments
 (0)