Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/grid

Package Overview
Dependencies
Maintainers
12
Versions
405
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/grid - npm Package Compare versions

Comparing version 24.0.0-alpha4 to 24.0.0-alpha5

20

package.json
{
"name": "@vaadin/grid",
"version": "24.0.0-alpha4",
"version": "24.0.0-alpha5",
"publishConfig": {

@@ -49,13 +49,13 @@ "access": "public"

"@polymer/polymer": "^3.0.0",
"@vaadin/checkbox": "24.0.0-alpha4",
"@vaadin/component-base": "24.0.0-alpha4",
"@vaadin/lit-renderer": "24.0.0-alpha4",
"@vaadin/text-field": "24.0.0-alpha4",
"@vaadin/vaadin-lumo-styles": "24.0.0-alpha4",
"@vaadin/vaadin-material-styles": "24.0.0-alpha4",
"@vaadin/vaadin-themable-mixin": "24.0.0-alpha4"
"@vaadin/checkbox": "24.0.0-alpha5",
"@vaadin/component-base": "24.0.0-alpha5",
"@vaadin/lit-renderer": "24.0.0-alpha5",
"@vaadin/text-field": "24.0.0-alpha5",
"@vaadin/vaadin-lumo-styles": "24.0.0-alpha5",
"@vaadin/vaadin-material-styles": "24.0.0-alpha5",
"@vaadin/vaadin-themable-mixin": "24.0.0-alpha5"
},
"devDependencies": {
"@esm-bundle/chai": "^4.3.4",
"@vaadin/polymer-legacy-adapter": "24.0.0-alpha4",
"@vaadin/polymer-legacy-adapter": "24.0.0-alpha5",
"@vaadin/testing-helpers": "^0.3.2",

@@ -69,3 +69,3 @@ "lit": "^2.0.0",

],
"gitHead": "66be46e82c4d0a673859fbc9bdb1581dd89f360c"
"gitHead": "fc0b1721eda9e39cb289b239e440fc9e29573a31"
}

19

src/vaadin-grid-a11y-mixin.js

@@ -6,2 +6,3 @@ /**

*/
import { iterateChildren } from './vaadin-grid-helpers.js';

@@ -46,5 +47,5 @@ /**

_a11yUpdateHeaderRows() {
Array.from(this.$.header.children).forEach((headerRow, index) =>
headerRow.setAttribute('aria-rowindex', index + 1),
);
iterateChildren(this.$.header, (headerRow, index) => {
headerRow.setAttribute('aria-rowindex', index + 1);
});
}

@@ -54,5 +55,5 @@

_a11yUpdateFooterRows() {
Array.from(this.$.footer.children).forEach((footerRow, index) =>
footerRow.setAttribute('aria-rowindex', this._a11yGetHeaderRowCount(this._columnTree) + this.size + index + 1),
);
iterateChildren(this.$.footer, (footerRow, index) => {
footerRow.setAttribute('aria-rowindex', this._a11yGetHeaderRowCount(this._columnTree) + this.size + index + 1);
});
}

@@ -77,3 +78,5 @@

row.setAttribute('aria-selected', Boolean(selected));
Array.from(row.children).forEach((cell) => cell.setAttribute('aria-selected', Boolean(selected)));
iterateChildren(row, (cell) => {
cell.setAttribute('aria-selected', Boolean(selected));
});
}

@@ -115,3 +118,3 @@

_a11ySetRowDetailsCell(row, detailsCell) {
Array.from(row.children).forEach((cell) => {
iterateChildren(row, (cell) => {
if (cell !== detailsCell) {

@@ -118,0 +121,0 @@ cell.setAttribute('aria-controls', detailsCell.id);

5

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

@@ -114,3 +114,6 @@ /**

),
).filter((element) => element.getAttribute('part') !== 'cell body-cell');
).filter((element) => {
const part = element.getAttribute('part');
return !(part && part.includes('body-cell'));
});

@@ -117,0 +120,0 @@ const isFocusableElement = focusables.includes(target);

10

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

@@ -7,3 +7,3 @@ /**

import { addListener } from '@vaadin/component-base/src/gestures.js';
import { updateColumnOrders } from './vaadin-grid-helpers.js';
import { iterateChildren, updateColumnOrders } from './vaadin-grid-helpers.js';

@@ -308,7 +308,7 @@ /**

_setSiblingsReorderStatus(column, status) {
Array.from(column.parentNode.children)
.filter((child) => /column/.test(child.localName) && this._isSwapAllowed(child, column))
.forEach((sibling) => {
iterateChildren(column.parentNode, (sibling) => {
if (/column/.test(sibling.localName) && this._isSwapAllowed(sibling, column)) {
sibling._reorderStatus = status;
});
}
});
}

@@ -315,0 +315,0 @@

24

src/vaadin-grid-column.js

@@ -11,2 +11,3 @@ /**

import { processTemplates } from '@vaadin/component-base/src/templates.js';
import { updateCellState } from './vaadin-grid-helpers.js';

@@ -345,3 +346,5 @@ /**

this._allCells.forEach((cell) => cell.toggleAttribute('frozen', frozen));
this._allCells.forEach((cell) => {
updateCellState(cell, 'frozen', frozen);
});

@@ -364,3 +367,4 @@ if (this._grid && this._grid._frozenCellsChanged) {

}
cell.toggleAttribute('frozen-to-end', frozenToEnd);
updateCellState(cell, 'frozen-to-end', frozenToEnd);
});

@@ -375,3 +379,5 @@

_lastFrozenChanged(lastFrozen) {
this._allCells.forEach((cell) => cell.toggleAttribute('last-frozen', lastFrozen));
this._allCells.forEach((cell) => {
updateCellState(cell, 'last-frozen', lastFrozen);
});

@@ -391,3 +397,3 @@ if (this.parentElement && this.parentElement._columnPropChanged) {

cell.toggleAttribute('first-frozen-to-end', firstFrozenToEnd);
updateCellState(cell, 'first-frozen-to-end', firstFrozenToEnd);
});

@@ -416,3 +422,11 @@

_reorderStatusChanged(reorderStatus) {
this._allCells.forEach((cell) => cell.setAttribute('reorder-status', reorderStatus));
const prevStatus = this.__previousReorderStatus;
const oldPart = prevStatus ? `reorder-${prevStatus}-cell` : '';
const newPart = `reorder-${reorderStatus}-cell`;
this._allCells.forEach((cell) => {
updateCellState(cell, 'reorder-status', reorderStatus, newPart, oldPart);
});
this.__previousReorderStatus = reorderStatus;
}

@@ -419,0 +433,0 @@

29

src/vaadin-grid-data-provider-mixin.js

@@ -8,2 +8,3 @@ /**

import { Debouncer } from '@vaadin/component-base/src/debounce.js';
import { getBodyRowCells, iterateChildren, updateCellsPart, updateState } from './vaadin-grid-helpers.js';

@@ -264,3 +265,3 @@ /**

if (item) {
el.toggleAttribute('loading', false);
this.__updateLoading(el, false);
this._updateItem(el, item);

@@ -271,3 +272,3 @@ if (this._isExpanded(item)) {

} else {
el.toggleAttribute('loading', true);
this.__updateLoading(el, true);
this._loadPage(this._getPageForIndex(scaledIndex), cache);

@@ -278,2 +279,17 @@ }

/**
* @param {!HTMLElement} row
* @param {boolean} loading
* @private
*/
__updateLoading(row, loading) {
const cells = getBodyRowCells(row);
// Row state attribute
updateState(row, 'loading', loading);
// Cells part attribute
updateCellsPart(cells, 'loading-row-cell', loading);
}
/**
* Returns a value that identifies the item. Uses `itemIdPath` if available.

@@ -396,5 +412,4 @@ * Can be customized by overriding.

Array.from(this.$.items.children)
.filter((row) => !row.hidden)
.forEach((row) => {
iterateChildren(this.$.items, (row) => {
if (!row.hidden) {
const cachedItem = this._cache.getItemForIndex(row.index);

@@ -404,3 +419,4 @@ if (cachedItem) {

}
});
}
});

@@ -519,2 +535,3 @@ this.__scrollToPendingIndex();

/** @private */
__scrollToPendingIndex() {

@@ -521,0 +538,0 @@ if (this.__pendingScrollToIndex && this.$.items.children.length) {

34

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

@@ -6,2 +6,4 @@ /**

*/
import { iterateChildren, updateRowStates } from './vaadin-grid-helpers.js';
const DropMode = {

@@ -158,3 +160,3 @@ BETWEEN: 'between',

this._updateRowState(row, 'dragstart', rows.length > 1 ? `${rows.length}` : '');
updateRowStates(row, { dragstart: rows.length > 1 ? `${rows.length}` : '' });
this.style.setProperty('--_grid-drag-start-x', `${e.clientX - rowRect.left + 20}px`);

@@ -164,3 +166,3 @@ this.style.setProperty('--_grid-drag-start-y', `${e.clientY - rowRect.top + 10}px`);

requestAnimationFrame(() => {
this._updateRowState(row, 'dragstart', null);
updateRowStates(row, { dragstart: null });
this.style.setProperty('--_grid-drag-start-x', '');

@@ -259,3 +261,3 @@ this.style.setProperty('--_grid-drag-start-y', '');

if (row.getAttribute('dragover') !== this._dropLocation) {
this._updateRowState(row, 'dragover', this._dropLocation, true);
updateRowStates(row, { dragover: this._dropLocation }, true);
}

@@ -314,4 +316,4 @@ } else {

this.removeAttribute('dragover');
Array.from(this.$.items.children).forEach((row) => {
this._updateRowState(row, 'dragover', null, true);
iterateChildren(this.$.items, (row) => {
updateRowStates(row, { dragover: null }, true);
});

@@ -379,7 +381,7 @@ }

filterDragAndDrop() {
Array.from(this.$.items.children)
.filter((row) => !row.hidden)
.forEach((row) => {
iterateChildren(this.$.items, (row) => {
if (!row.hidden) {
this._filterDragAndDrop(row, this.__getRowModel(row));
});
}
});
}

@@ -397,14 +399,14 @@

const draggableElements = Array.from(row.children).map((cell) => cell._content);
draggableElements.forEach((e) => {
iterateChildren(row, (cell) => {
if (dragDisabled) {
e.removeAttribute('draggable');
cell._content.removeAttribute('draggable');
} else {
e.setAttribute('draggable', true);
cell._content.setAttribute('draggable', true);
}
});
this._updateRowState(row, 'drag-disabled', !!dragDisabled);
this._updateRowState(row, 'drop-disabled', !!dropDisabled);
updateRowStates(row, {
'drag-disabled': !!dragDisabled,
'drop-disabled': !!dropDisabled,
});
}

@@ -411,0 +413,0 @@

5

src/vaadin-grid-dynamic-columns-mixin.js

@@ -10,2 +10,3 @@ /**

import { Debouncer } from '@vaadin/component-base/src/debounce.js';
import { updateCellState } from './vaadin-grid-helpers.js';

@@ -164,4 +165,4 @@ function arrayEquals(arr1, arr2) {

.forEach((cell, cellIndex, children) => {
cell.toggleAttribute('first-column', cellIndex === 0);
cell.toggleAttribute('last-column', cellIndex === children.length - 1);
updateCellState(cell, 'first-column', cellIndex === 0);
updateCellState(cell, 'last-column', cellIndex === children.length - 1);
});

@@ -168,0 +169,0 @@ }

103

src/vaadin-grid-helpers.js

@@ -6,4 +6,21 @@ /**

*/
import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
/**
* @param {HTMLTableRowElement} row the table row
* @return {HTMLTableCellElement[]} array of cells
*/
export function getBodyRowCells(row) {
return Array.from(row.querySelectorAll('[part~="cell"]:not([part~="details-cell"])'));
}
/**
* @param {HTMLElement} container the DOM element with children
* @param {Function} callback function to call on each child
*/
export function iterateChildren(container, callback) {
[...container.children].forEach(callback);
}
/**
* @param {Array<Object>} columns array of columns to be modified

@@ -25,1 +42,87 @@ * @param {number} scope multiplier added to base order for each column

}
/**
* @param {!HTMLElement} element
* @param {string} attribute
* @param {boolean | string | null | undefined} value
*/
export function updateState(element, attribute, value) {
switch (typeof value) {
case 'boolean':
element.toggleAttribute(attribute, value);
break;
case 'string':
element.setAttribute(attribute, value);
break;
default:
// Value set to null / undefined
element.removeAttribute(attribute);
break;
}
}
/**
* @param {!HTMLElement} element
* @param {boolean | string | null | undefined} value
* @param {string} part
*/
export function updatePart(element, value, part) {
if (value || value === '') {
addValueToAttribute(element, 'part', part);
} else {
removeValueFromAttribute(element, 'part', part);
}
}
/**
* @param {HTMLTableCellElement[]} cells
* @param {string} part
* @param {boolean | string | null | undefined} value
*/
export function updateCellsPart(cells, part, value) {
cells.forEach((cell) => {
updatePart(cell, value, part);
});
}
/**
* @param {!HTMLElement} row
* @param {Object} states
* @param {boolean} appendValue
*/
export function updateRowStates(row, states, appendValue) {
const cells = getBodyRowCells(row);
Object.entries(states).forEach(([state, value]) => {
// Row state attribute
updateState(row, state, value);
const rowPart = appendValue ? `${state}-${value}-row` : `${state}-row`;
// Row part attribute
updatePart(row, value, rowPart);
// Cells part attribute
updateCellsPart(cells, `${rowPart}-cell`, value);
});
}
/**
* @param {!HTMLElement} cell
* @param {string} attribute
* @param {boolean | string | null | undefined} value
* @param {string} part
* @param {?string} oldPart
*/
export function updateCellState(cell, attribute, value, part, oldPart) {
// Toggle state attribute on the cell
updateState(cell, attribute, value);
// Remove old part from the attribute
if (oldPart) {
updatePart(cell, false, oldPart);
}
// Add new part to the cell attribute
updatePart(cell, value, part || `${attribute}-cell`);
}

5

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

@@ -784,2 +784,7 @@ /**

const { section, cell, row } = this._getGridEventLocation(e);
if (!cell && !this.__rowFocusMode) {
return;
}
this._detectInteracting(e);

@@ -786,0 +791,0 @@

7

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

@@ -6,2 +6,3 @@ /**

*/
import { iterateChildren } from './vaadin-grid-helpers.js';

@@ -82,3 +83,3 @@ /**

// Only update the rows if the column tree has already been initialized
Array.from(this.$.items.children).forEach((row) => {
iterateChildren(this.$.items, (row) => {
if (!row.querySelector('[part~=details-cell]')) {

@@ -100,3 +101,3 @@ this._updateRow(row, this._columnTree[this._columnTree.length - 1]);

[...this.$.items.children].forEach((row) => {
iterateChildren(this.$.items, (row) => {
// Re-renders the row to possibly close the previously opened details.

@@ -168,3 +169,3 @@ if (row.hasAttribute('details-opened')) {

_updateDetailsCellHeights() {
[...this.$.items.children].forEach((row) => {
iterateChildren(this.$.items, (row) => {
this._updateDetailsCellHeight(row);

@@ -171,0 +172,0 @@ });

4

src/vaadin-grid-styles.js

@@ -251,2 +251,6 @@ /**

[first-frozen-to-end] {
margin-inline-start: auto;
}
/* Hide resize handle if scrolled to end */

@@ -253,0 +257,0 @@ :host(:not([overflow~='end'])) [first-frozen-to-end] [part~='resize-handle'] {

38

src/vaadin-grid-styling-mixin.d.ts

@@ -10,4 +10,9 @@ /**

export type GridCellClassNameGenerator<TItem> = (column: GridColumn<TItem>, model: GridItemModel<TItem>) => string;
export type GridCellPartNameGenerator<TItem> = (column: GridColumn<TItem>, model: GridItemModel<TItem>) => string;
/**
* @deprecated Use `GridPartCellGenerator` type and `cellPartNameGenerator` API instead.
*/
export type GridCellClassNameGenerator<TItem> = GridCellPartNameGenerator<TItem>;
export declare function StylingMixin<TItem, T extends Constructor<HTMLElement>>(

@@ -33,2 +38,4 @@ base: T,

* - `model.selected` Selected state.
*
* @deprecated Use `cellPartNameGenerator` instead.
*/

@@ -38,2 +45,21 @@ cellClassNameGenerator: GridCellClassNameGenerator<TItem> | null | undefined;

/**
* A function that allows generating CSS `part` names for grid cells in Shadow DOM based
* on their row and column, for styling from outside using the `::part()` selector.
*
* The return value should be the generated part name as a string, or multiple part names
* separated by whitespace characters.
*
* Receives two arguments:
* - `column` The `<vaadin-grid-column>` element (`undefined` for details-cell).
* - `model` The object with the properties related with
* the rendered item, contains:
* - `model.index` The index of the item.
* - `model.item` The item.
* - `model.expanded` Sublevel toggle state.
* - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
* - `model.selected` Selected state.
*/
cellPartNameGenerator: GridCellPartNameGenerator<TItem> | null | undefined;
/**
* Runs the `cellClassNameGenerator` for the visible cells.

@@ -43,4 +69,14 @@ * If the generator depends on varying conditions, you need to

* the conditions change.
*
* @deprecated Use `cellPartNameGenerator` and `generateCellPartNames()` instead.
*/
generateCellClassNames(): void;
/**
* Runs the `cellPastNameGenerator` for the visible cells.
* If the generator depends on varying conditions, you need to
* call this function manually in order to update the styles when
* the conditions change.
*/
generateCellPartNames(): void;
}

82

src/vaadin-grid-styling-mixin.js

@@ -6,2 +6,3 @@ /**

*/
import { iterateChildren, updatePart } from './vaadin-grid-helpers.js';

@@ -32,4 +33,26 @@ /**

* @type {GridCellClassNameGenerator | null | undefined}
* @deprecated Use `cellPartNameGenerator` instead.
*/
cellClassNameGenerator: Function,
/**
* A function that allows generating CSS `part` names for grid cells in Shadow DOM based
* on their row and column, for styling from outside using the `::part()` selector.
*
* The return value should be the generated part name as a string, or multiple part names
* separated by whitespace characters.
*
* Receives two arguments:
* - `column` The `<vaadin-grid-column>` element (`undefined` for details-cell).
* - `model` The object with the properties related with
* the rendered item, contains:
* - `model.index` The index of the item.
* - `model.item` The item.
* - `model.expanded` Sublevel toggle state.
* - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
* - `model.selected` Selected state.
*
* @type {GridCellPartNameGenerator | null | undefined}
*/
cellPartNameGenerator: Function,
};

@@ -39,5 +62,9 @@ }

static get observers() {
return ['__cellClassNameGeneratorChanged(cellClassNameGenerator)'];
return [
'__cellClassNameGeneratorChanged(cellClassNameGenerator)',
'__cellPartNameGeneratorChanged(cellPartNameGenerator)',
];
}
/** @private */
__cellClassNameGeneratorChanged() {

@@ -47,2 +74,7 @@ this.generateCellClassNames();

/** @private */
__cellPartNameGeneratorChanged() {
this.generateCellPartNames();
}
/**

@@ -53,12 +85,30 @@ * Runs the `cellClassNameGenerator` for the visible cells.

* the conditions change.
*
* @deprecated Use `cellPartNameGenerator` and `generateCellPartNames()` instead.
*/
generateCellClassNames() {
Array.from(this.$.items.children)
.filter((row) => !row.hidden && !row.hasAttribute('loading'))
.forEach((row) => this._generateCellClassNames(row, this.__getRowModel(row)));
iterateChildren(this.$.items, (row) => {
if (!row.hidden && !row.hasAttribute('loading')) {
this._generateCellClassNames(row, this.__getRowModel(row));
}
});
}
/**
* Runs the `cellPartNameGenerator` for the visible cells.
* If the generator depends on varying conditions, you need to
* call this function manually in order to update the styles when
* the conditions change.
*/
generateCellPartNames() {
iterateChildren(this.$.items, (row) => {
if (!row.hidden && !row.hasAttribute('loading')) {
this._generateCellPartNames(row, this.__getRowModel(row));
}
});
}
/** @private */
_generateCellClassNames(row, model) {
Array.from(row.children).forEach((cell) => {
iterateChildren(row, (cell) => {
if (cell.__generatedClasses) {

@@ -76,2 +126,24 @@ cell.__generatedClasses.forEach((className) => cell.classList.remove(className));

}
/** @private */
_generateCellPartNames(row, model) {
iterateChildren(row, (cell) => {
if (cell.__generatedParts) {
cell.__generatedParts.forEach((partName) => {
// Remove previously generated part names
updatePart(cell, null, partName);
});
}
if (this.cellPartNameGenerator) {
const result = this.cellPartNameGenerator(cell._column, model);
cell.__generatedParts = result && result.split(' ').filter((partName) => partName.length > 0);
if (cell.__generatedParts) {
cell.__generatedParts.forEach((partName) => {
// Add the newly generated names to part
updatePart(cell, true, partName);
});
}
}
});
}
};

133

src/vaadin-grid.d.ts

@@ -33,4 +33,7 @@ /**

import type { SortMixinClass } from './vaadin-grid-sort-mixin.js';
import type { StylingMixinClass } from './vaadin-grid-styling-mixin.js';
import { GridCellClassNameGenerator } from './vaadin-grid-styling-mixin.js';
import type {
GridCellClassNameGenerator,
GridCellPartNameGenerator,
StylingMixinClass,
} from './vaadin-grid-styling-mixin.js';

@@ -40,2 +43,3 @@ export {

GridCellClassNameGenerator,
GridCellPartNameGenerator,
GridDataProvider,

@@ -304,53 +308,82 @@ GridDataProviderCallback,

*
* Part name | Description
* -----------------------|----------------
* `row` | Row in the internal table
* `expanded-row` | Expanded row
* `selected-row` | Selected row
* `details-opened-row` | Row with details open
* `odd-row` | Odd row
* `first-row` | The first body row
* `last-row` | The last body row
* `dragstart-row` | Set on the row for one frame when drag is starting. The value is a number when multiple rows are dragged
* `dragover-above-row` | Set on the row when the a row is dragged over above
* `dragover-below-row` | Set on the row when the a row is dragged over below
* `dragover-on-top-row` | Set on the row when the a row is dragged over on top
* `drag-disabled-row` | Set to a row that isn't available for dragging
* `drop-disabled-row` | Set to a row that can't be dropped on top of
* `cell` | Cell in the internal table
* `header-cell` | Header cell in the internal table
* `body-cell` | Body cell in the internal table
* `footer-cell` | Footer cell in the internal table
* `details-cell` | Row details cell in the internal table
* `focused-cell` | Focused cell in the internal table
* `resize-handle` | Handle for resizing the columns
* `reorder-ghost` | Ghost element of the header cell being dragged
* Part name | Description
* ---------------------------|----------------
* `row` | Row in the internal table
* `expanded-row` | Expanded row
* `selected-row` | Selected row
* `details-opened-row` | Row with details open
* `odd-row` | Odd row
* `even-row` | Even row
* `first-row` | The first body row
* `last-row` | The last body row
* `dragstart-row` | Set on the row for one frame when drag is starting.
* `dragover-above-row` | Set on the row when the a row is dragged over above
* `dragover-below-row` | Set on the row when the a row is dragged over below
* `dragover-on-top-row` | Set on the row when the a row is dragged over on top
* `drag-disabled-row` | Set to a row that isn't available for dragging
* `drop-disabled-row` | Set to a row that can't be dropped on top of
* `cell` | Cell in the internal table
* `header-cell` | Header cell in the internal table
* `body-cell` | Body cell in the internal table
* `footer-cell` | Footer cell in the internal table
* `details-cell` | Row details cell in the internal table
* `focused-cell` | Focused cell in the internal table
* `odd-row-cell` | Cell in an odd row
* `even-row-cell` | Cell in an even row
* `first-row-cell` | Cell in the first body row
* `last-row-cell` | Cell in the last body row
* `first-header-row-cell` | Cell in the first header row
* `first-footer-row-cell` | Cell in the first footer row
* `last-header-row-cell` | Cell in the last header row
* `last-footer-row-cell` | Cell in the last footer row
* `loading-row-cell` | Cell in a row that is waiting for data from data provider
* `selected-row-cell` | Cell in a selected row
* `expanded-row-cell` | Cell in an expanded row
* `details-opened-row-cell` | Cell in an row with details open
* `dragstart-row-cell` | Cell in a row that user started to drag (set for one frame)
* `dragover-above-row-cell` | Cell in a row that has another row dragged over above
* `dragover-below-row-cell` | Cell in a row that has another row dragged over below
* `dragover-on-top-row-cell` | Cell in a row that has another row dragged over on top
* `drag-disabled-row-cell` | Cell in a row that isn't available for dragging
* `drop-disabled-row-cell` | Cell in a row that can't be dropped on top of
* `frozen-cell` | Frozen cell in the internal table
* `frozen-to-end-cell` | Frozen to end cell in the internal table
* `last-frozen-cell` | Last frozen cell
* `first-frozen-to-end-cell` | First cell frozen to end
* `first-column-cell` | First visible cell on a row
* `last-column-cell` | Last visible cell on a row
* `reorder-allowed-cell` | Cell in a column where another column can be reordered
* `reorder-dragging-cell` | Cell in a column currently being reordered
* `resize-handle` | Handle for resizing the columns
* `reorder-ghost` | Ghost element of the header cell being dragged
*
* The following state attributes are available for styling:
*
* Attribute | Description | Part name
* -------------|-------------|------------
* `loading` | Set when the grid is loading data from data provider | :host
* `interacting` | Keyboard navigation in interaction mode | :host
* `navigating` | Keyboard navigation in navigation mode | :host
* `overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host
* `reordering` | Set when the grid's columns are being reordered | :host
* `dragover` | Set when the grid (not a specific row) is dragged over | :host
* `dragging-rows` | Set when grid rows are dragged | :host
* `reorder-status` | Reflects the status of a cell while columns are being reordered | cell
* `frozen` | Frozen cell | cell
* `last-frozen` | Last frozen cell | cell
* `first-column` | First visible cell on a row | cell
* `last-column` | Last visible cell on a row | cell
* `selected` | Selected row | row
* `expanded` | Expanded row | row
* `details-opened` | Row with details open | row
* `loading` | Row that is waiting for data from data provider | row
* `odd` | Odd row | row
* `first` | The first body row | row
* `last` | The last body row | row
* `dragstart` | Set for one frame when drag of a row is starting. The value is a number when multiple rows are dragged | row
* `dragover` | Set when the row is dragged over | row
* `drag-disabled` | Set to a row that isn't available for dragging | row
* `drop-disabled` | Set to a row that can't be dropped on top of | row
* Attribute | Description | Part name
* -----------------------|---------------------------------------------------------------------------------------------------|-----------
* `loading` | Set when the grid is loading data from data provider | :host
* `interacting` | Keyboard navigation in interaction mode | :host
* `navigating` | Keyboard navigation in navigation mode | :host
* `overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host
* `reordering` | Set when the grid's columns are being reordered | :host
* `dragover` | Set when the grid (not a specific row) is dragged over | :host
* `dragging-rows` | Set when grid rows are dragged | :host
* `reorder-status` | Reflects the status of a cell while columns are being reordered | cell
* `frozen` | Frozen cell | cell
* `frozen-to-end` | Cell frozen to end | cell
* `last-frozen` | Last frozen cell | cell
* `first-frozen-to-end` | First cell frozen to end | cell
* `first-column` | First visible cell on a row | cell
* `last-column` | Last visible cell on a row | cell
* `selected` | Selected row | row
* `expanded` | Expanded row | row
* `details-opened` | Row with details open | row
* `loading` | Row that is waiting for data from data provider | row
* `odd` | Odd row | row
* `first` | The first body row | row
* `last` | The last body row | row
* `dragstart` | Set for one frame when starting to drag a row. The value is a number when dragging multiple rows | row
* `dragover` | Set when the row is dragged over | row
* `drag-disabled` | Set to a row that isn't available for dragging | row
* `drop-disabled` | Set to a row that can't be dropped on top of | row
*

@@ -357,0 +390,0 @@ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.

222

src/vaadin-grid.js

@@ -12,3 +12,2 @@ /**

import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';

@@ -30,2 +29,3 @@ import { TabindexMixin } from '@vaadin/component-base/src/tabindex-mixin.js';

import { FilterMixin } from './vaadin-grid-filter-mixin.js';
import { getBodyRowCells, iterateChildren, updateCellsPart, updateRowStates } from './vaadin-grid-helpers.js';
import { KeyboardNavigationMixin } from './vaadin-grid-keyboard-navigation-mixin.js';

@@ -178,53 +178,82 @@ import { RowDetailsMixin } from './vaadin-grid-row-details-mixin.js';

*
* Part name | Description
* -----------------------|----------------
* `row` | Row in the internal table
* `expanded-row` | Expanded row
* `selected-row` | Selected row
* `details-opened-row` | Row with details open
* `odd-row` | Odd row
* `first-row` | The first body row
* `last-row` | The last body row
* `dragstart-row` | Set on the row for one frame when drag is starting. The value is a number when multiple rows are dragged
* `dragover-above-row` | Set on the row when the a row is dragged over above
* `dragover-below-row` | Set on the row when the a row is dragged over below
* `dragover-on-top-row` | Set on the row when the a row is dragged over on top
* `drag-disabled-row` | Set to a row that isn't available for dragging
* `drop-disabled-row` | Set to a row that can't be dropped on top of
* `cell` | Cell in the internal table
* `header-cell` | Header cell in the internal table
* `body-cell` | Body cell in the internal table
* `footer-cell` | Footer cell in the internal table
* `details-cell` | Row details cell in the internal table
* `focused-cell` | Focused cell in the internal table
* `resize-handle` | Handle for resizing the columns
* `reorder-ghost` | Ghost element of the header cell being dragged
* Part name | Description
* ---------------------------|----------------
* `row` | Row in the internal table
* `expanded-row` | Expanded row
* `selected-row` | Selected row
* `details-opened-row` | Row with details open
* `odd-row` | Odd row
* `even-row` | Even row
* `first-row` | The first body row
* `last-row` | The last body row
* `dragstart-row` | Set on the row for one frame when drag is starting.
* `dragover-above-row` | Set on the row when the a row is dragged over above
* `dragover-below-row` | Set on the row when the a row is dragged over below
* `dragover-on-top-row` | Set on the row when the a row is dragged over on top
* `drag-disabled-row` | Set to a row that isn't available for dragging
* `drop-disabled-row` | Set to a row that can't be dropped on top of
* `cell` | Cell in the internal table
* `header-cell` | Header cell in the internal table
* `body-cell` | Body cell in the internal table
* `footer-cell` | Footer cell in the internal table
* `details-cell` | Row details cell in the internal table
* `focused-cell` | Focused cell in the internal table
* `odd-row-cell` | Cell in an odd row
* `even-row-cell` | Cell in an even row
* `first-row-cell` | Cell in the first body row
* `last-row-cell` | Cell in the last body row
* `first-header-row-cell` | Cell in the first header row
* `first-footer-row-cell` | Cell in the first footer row
* `last-header-row-cell` | Cell in the last header row
* `last-footer-row-cell` | Cell in the last footer row
* `loading-row-cell` | Cell in a row that is waiting for data from data provider
* `selected-row-cell` | Cell in a selected row
* `expanded-row-cell` | Cell in an expanded row
* `details-opened-row-cell` | Cell in an row with details open
* `dragstart-row-cell` | Cell in a row that user started to drag (set for one frame)
* `dragover-above-row-cell` | Cell in a row that has another row dragged over above
* `dragover-below-row-cell` | Cell in a row that has another row dragged over below
* `dragover-on-top-row-cell` | Cell in a row that has another row dragged over on top
* `drag-disabled-row-cell` | Cell in a row that isn't available for dragging
* `drop-disabled-row-cell` | Cell in a row that can't be dropped on top of
* `frozen-cell` | Frozen cell in the internal table
* `frozen-to-end-cell` | Frozen to end cell in the internal table
* `last-frozen-cell` | Last frozen cell
* `first-frozen-to-end-cell` | First cell frozen to end
* `first-column-cell` | First visible cell on a row
* `last-column-cell` | Last visible cell on a row
* `reorder-allowed-cell` | Cell in a column where another column can be reordered
* `reorder-dragging-cell` | Cell in a column currently being reordered
* `resize-handle` | Handle for resizing the columns
* `reorder-ghost` | Ghost element of the header cell being dragged
*
* The following state attributes are available for styling:
*
* Attribute | Description | Part name
* -------------|-------------|------------
* `loading` | Set when the grid is loading data from data provider | :host
* `interacting` | Keyboard navigation in interaction mode | :host
* `navigating` | Keyboard navigation in navigation mode | :host
* `overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host
* `reordering` | Set when the grid's columns are being reordered | :host
* `dragover` | Set when the grid (not a specific row) is dragged over | :host
* `dragging-rows` | Set when grid rows are dragged | :host
* `reorder-status` | Reflects the status of a cell while columns are being reordered | cell
* `frozen` | Frozen cell | cell
* `last-frozen` | Last frozen cell | cell
* `first-column` | First visible cell on a row | cell
* `last-column` | Last visible cell on a row | cell
* `selected` | Selected row | row
* `expanded` | Expanded row | row
* `details-opened` | Row with details open | row
* `loading` | Row that is waiting for data from data provider | row
* `odd` | Odd row | row
* `first` | The first body row | row
* `last` | The last body row | row
* `dragstart` | Set for one frame when drag of a row is starting. The value is a number when multiple rows are dragged | row
* `dragover` | Set when the row is dragged over | row
* `drag-disabled` | Set to a row that isn't available for dragging | row
* `drop-disabled` | Set to a row that can't be dropped on top of | row
* Attribute | Description | Part name
* ----------------------|---------------------------------------------------------------------------------------------------|-----------
* `loading` | Set when the grid is loading data from data provider | :host
* `interacting` | Keyboard navigation in interaction mode | :host
* `navigating` | Keyboard navigation in navigation mode | :host
* `overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host
* `reordering` | Set when the grid's columns are being reordered | :host
* `dragover` | Set when the grid (not a specific row) is dragged over | :host
* `dragging-rows` | Set when grid rows are dragged | :host
* `reorder-status` | Reflects the status of a cell while columns are being reordered | cell
* `frozen` | Frozen cell | cell
* `frozen-to-end` | Cell frozen to end | cell
* `last-frozen` | Last frozen cell | cell
* `first-frozen-to-end` | First cell frozen to end | cell
* `first-column` | First visible cell on a row | cell
* `last-column` | Last visible cell on a row | cell
* `selected` | Selected row | row
* `expanded` | Expanded row | row
* `details-opened` | Row with details open | row
* `loading` | Row that is waiting for data from data provider | row
* `odd` | Odd row | row
* `first` | The first body row | row
* `last` | The last body row | row
* `dragstart` | Set for one frame when starting to drag a row. The value is a number when dragging multiple rows | row
* `dragover` | Set when the row is dragged over | row
* `drag-disabled` | Set to a row that isn't available for dragging | row
* `drop-disabled` | Set to a row that can't be dropped on top of | row
*

@@ -765,3 +794,3 @@ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.

Array.from(row.children).forEach((cell) => {
iterateChildren(row, (cell) => {
cell._vacant = true;

@@ -895,5 +924,4 @@ });

this._updateRowState(row, 'first', index === 0);
this._updateRowState(row, 'last', index === this._effectiveSize - 1);
this._updateRowState(row, 'odd', index % 2);
this._updateRowOrderParts(row, index);
this._a11yUpdateRowRowindex(row, index);

@@ -909,2 +937,21 @@ this._getItem(index, row);

/** @private */
_updateRowOrderParts(row, index = row.index) {
updateRowStates(row, {
first: index === 0,
last: index === this._effectiveSize - 1,
odd: index % 2,
even: index % 2 === 0,
});
}
/** @private */
_updateRowStateParts(row, { expanded, selected, detailsOpened }) {
updateRowStates(row, {
expanded,
selected,
'details-opened': detailsOpened,
});
}
/**

@@ -915,6 +962,11 @@ * @param {!Array<!GridColumn>} columnTree

_renderColumnTree(columnTree) {
Array.from(this.$.items.children).forEach((row) =>
this._updateRow(row, columnTree[columnTree.length - 1], null, false, true),
);
iterateChildren(this.$.items, (row) => {
this._updateRow(row, columnTree[columnTree.length - 1], null, false, true);
const model = this.__getRowModel(row);
this._updateRowOrderParts(row);
this._updateRowStateParts(row, model);
this._filterDragAndDrop(row, model);
});
while (this.$.header.children.length < columnTree.length) {

@@ -938,10 +990,18 @@ const headerRow = document.createElement('tr');

Array.from(this.$.header.children).forEach((headerRow, index) =>
this._updateRow(headerRow, columnTree[index], 'header', index === columnTree.length - 1),
);
iterateChildren(this.$.header, (headerRow, index, rows) => {
this._updateRow(headerRow, columnTree[index], 'header', index === columnTree.length - 1);
Array.from(this.$.footer.children).forEach((footerRow, index) =>
this._updateRow(footerRow, columnTree[columnTree.length - 1 - index], 'footer', index === 0),
);
const cells = getBodyRowCells(headerRow);
updateCellsPart(cells, 'first-header-row-cell', index === 0);
updateCellsPart(cells, 'last-header-row-cell', index === rows.length - 1);
});
iterateChildren(this.$.footer, (footerRow, index, rows) => {
this._updateRow(footerRow, columnTree[columnTree.length - 1 - index], 'footer', index === 0);
const cells = getBodyRowCells(footerRow);
updateCellsPart(cells, 'first-footer-row-cell', index === 0);
updateCellsPart(cells, 'last-footer-row-cell', index === rows.length - 1);
});
// Sizer rows

@@ -958,4 +1018,6 @@ this._updateRow(this.$.sizer, columnTree[columnTree.length - 1]);

this.generateCellClassNames();
this.generateCellPartNames();
}
/** @private */
__updateFooterPositioning() {

@@ -987,10 +1049,9 @@ // TODO: fixed in Firefox 99, remove when we can drop Firefox ESR 91 support

this._updateRowState(row, 'expanded', model.expanded);
this._updateRowState(row, 'selected', model.selected);
this._updateRowState(row, 'details-opened', model.detailsOpened);
this._updateRowStateParts(row, model);
this._generateCellClassNames(row, model);
this._generateCellPartNames(row, model);
this._filterDragAndDrop(row, model);
Array.from(row.children).forEach((cell) => {
iterateChildren(row, (cell) => {
if (cell._renderer) {

@@ -1007,31 +1068,2 @@ const owner = cell._column || this;

/**
* @param {!HTMLElement} row
* @param {string} state
* @param {boolean | string | null | undefined} value
* @param {boolean} partWithValue
* @protected
*/
_updateRowState(row, state, value, partWithValue) {
switch (typeof value) {
case 'boolean':
row.toggleAttribute(state, value);
break;
case 'string':
row.setAttribute(state, value);
break;
default:
// Value set to null / undefined
row.removeAttribute(state);
break;
}
const part = partWithValue ? `${state}-${value}-row` : `${state}-row`;
if (value || value === '') {
addValueToAttribute(row, 'part', part);
} else {
removeValueFromAttribute(row, 'part', part);
}
}
/** @private */

@@ -1038,0 +1070,0 @@ _resizeHandler() {

web-types.json

Sorry, the diff of this file is too big to display

web-types.lit.json

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc