mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Update lit-virtualizer (#11623)
This commit is contained in:
Bram Kragten
GitHub
parent
5435218187
commit
5f43715dd8
File diff suppressed because one or more lines are too long
@ -1,11 +1,10 @@
|
||||
diff --git a/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js b/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js
|
||||
index d92179f7fd5315203f870a6963e871dc8ddf6c0c..362e284121b97e0fba0925225777aebc32e26b8d 100644
|
||||
--- a/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js
|
||||
+++ b/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js
|
||||
@@ -1,14 +1,15 @@
|
||||
-let _ET, ET;
|
||||
+let _ET;
|
||||
+let ET;
|
||||
diff --git a/polyfillLoaders/EventTarget.js b/polyfillLoaders/EventTarget.js
|
||||
index 4e18ade7ba485849f17f28c94c42f0e0e01ac387..8f34f4f646c7f7becc208fb5a546c96034fc74dc 100644
|
||||
--- a/polyfillLoaders/EventTarget.js
|
||||
+++ b/polyfillLoaders/EventTarget.js
|
||||
@@ -6,16 +6,15 @@
|
||||
let _ET;
|
||||
let ET;
|
||||
export default async function EventTarget() {
|
||||
- return ET || init();
|
||||
+ return ET || init();
|
||||
@ -26,4 +25,5 @@ index d92179f7fd5315203f870a6963e871dc8ddf6c0c..362e284121b97e0fba0925225777aebc
|
||||
+ _ET = (await import("event-target-shim")).default.EventTarget;
|
||||
+ }
|
||||
+ return (ET = _ET);
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=EventTarget.js.map
|
||||
@ -46,7 +46,7 @@
|
||||
"@fullcalendar/daygrid": "5.9.0",
|
||||
"@fullcalendar/interaction": "5.9.0",
|
||||
"@fullcalendar/list": "5.9.0",
|
||||
"@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.6.0#./.yarn/patches/@lit-labs/virtualizer/0.7.0.patch",
|
||||
"@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.7.0-pre.2#./.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch",
|
||||
"@material/chips": "14.0.0-canary.261f2db59.0",
|
||||
"@material/data-table": "14.0.0-canary.261f2db59.0",
|
||||
"@material/mwc-button": "0.25.3",
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { Layout1d, scroll } from "@lit-labs/virtualizer";
|
||||
import { mdiArrowDown, mdiArrowUp } from "@mdi/js";
|
||||
import deepClone from "deep-clone-simple";
|
||||
import {
|
||||
@ -31,6 +30,7 @@ import type { HaCheckbox } from "../ha-checkbox";
|
||||
import "../ha-svg-icon";
|
||||
import { filterData, sortData } from "./sort-filter";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import "@lit-labs/virtualizer";
|
||||
|
||||
declare global {
|
||||
// for fire event
|
||||
@ -337,111 +337,99 @@ export class HaDataTable extends LitElement {
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<div
|
||||
<lit-virtualizer
|
||||
scroller
|
||||
class="mdc-data-table__content scroller ha-scrollbar"
|
||||
@scroll=${this._saveScrollPos}
|
||||
>
|
||||
${scroll({
|
||||
items: this._items,
|
||||
layout: Layout1d,
|
||||
renderItem: (row: DataTableRowData, index) => {
|
||||
// not sure how this happens...
|
||||
if (!row) {
|
||||
return html``;
|
||||
}
|
||||
if (row.append) {
|
||||
return html`
|
||||
<div class="mdc-data-table__row">${row.content}</div>
|
||||
`;
|
||||
}
|
||||
if (row.empty) {
|
||||
return html` <div class="mdc-data-table__row"></div> `;
|
||||
}
|
||||
return html`
|
||||
<div
|
||||
aria-rowindex=${index! + 2}
|
||||
role="row"
|
||||
.rowId=${row[this.id]}
|
||||
@click=${this._handleRowClick}
|
||||
class="mdc-data-table__row ${classMap({
|
||||
"mdc-data-table__row--selected":
|
||||
this._checkedRows.includes(String(row[this.id])),
|
||||
clickable: this.clickable,
|
||||
})}"
|
||||
aria-selected=${ifDefined(
|
||||
this._checkedRows.includes(String(row[this.id]))
|
||||
? true
|
||||
: undefined
|
||||
)}
|
||||
.selectable=${row.selectable !== false}
|
||||
>
|
||||
${this.selectable
|
||||
? html`
|
||||
<div
|
||||
class="mdc-data-table__cell mdc-data-table__cell--checkbox"
|
||||
role="cell"
|
||||
>
|
||||
<ha-checkbox
|
||||
class="mdc-data-table__row-checkbox"
|
||||
@change=${this._handleRowCheckboxClick}
|
||||
.rowId=${row[this.id]}
|
||||
.disabled=${row.selectable === false}
|
||||
.checked=${this._checkedRows.includes(
|
||||
String(row[this.id])
|
||||
)}
|
||||
>
|
||||
</ha-checkbox>
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
${Object.entries(this.columns).map(
|
||||
([key, column]) => {
|
||||
if (column.hidden) {
|
||||
return "";
|
||||
}
|
||||
return html`
|
||||
<div
|
||||
role="cell"
|
||||
class="mdc-data-table__cell ${classMap({
|
||||
"mdc-data-table__cell--numeric":
|
||||
column.type === "numeric",
|
||||
"mdc-data-table__cell--icon":
|
||||
column.type === "icon",
|
||||
"mdc-data-table__cell--icon-button":
|
||||
column.type === "icon-button",
|
||||
"mdc-data-table__cell--overflow-menu":
|
||||
column.type === "overflow-menu",
|
||||
grows: Boolean(column.grows),
|
||||
forceLTR: Boolean(column.forceLTR),
|
||||
})}"
|
||||
style=${column.width
|
||||
? styleMap({
|
||||
[column.grows ? "minWidth" : "width"]:
|
||||
column.width,
|
||||
maxWidth: column.maxWidth
|
||||
? column.maxWidth
|
||||
: "",
|
||||
})
|
||||
: ""}
|
||||
>
|
||||
${column.template
|
||||
? column.template(row[key], row)
|
||||
: row[key]}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
`;
|
||||
},
|
||||
})}
|
||||
</div>
|
||||
.items=${this._items}
|
||||
.renderItem=${this._renderRow}
|
||||
></lit-virtualizer>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private _renderRow = (
|
||||
row: DataTableRowData,
|
||||
index: number
|
||||
): TemplateResult => {
|
||||
// not sure how this happens...
|
||||
if (!row) {
|
||||
return html``;
|
||||
}
|
||||
if (row.append) {
|
||||
return html` <div class="mdc-data-table__row">${row.content}</div> `;
|
||||
}
|
||||
if (row.empty) {
|
||||
return html` <div class="mdc-data-table__row"></div> `;
|
||||
}
|
||||
return html`
|
||||
<div
|
||||
aria-rowindex=${index + 2}
|
||||
role="row"
|
||||
.rowId=${row[this.id]}
|
||||
@click=${this._handleRowClick}
|
||||
class="mdc-data-table__row ${classMap({
|
||||
"mdc-data-table__row--selected": this._checkedRows.includes(
|
||||
String(row[this.id])
|
||||
),
|
||||
clickable: this.clickable,
|
||||
})}"
|
||||
aria-selected=${ifDefined(
|
||||
this._checkedRows.includes(String(row[this.id])) ? true : undefined
|
||||
)}
|
||||
.selectable=${row.selectable !== false}
|
||||
>
|
||||
${this.selectable
|
||||
? html`
|
||||
<div
|
||||
class="mdc-data-table__cell mdc-data-table__cell--checkbox"
|
||||
role="cell"
|
||||
>
|
||||
<ha-checkbox
|
||||
class="mdc-data-table__row-checkbox"
|
||||
@change=${this._handleRowCheckboxClick}
|
||||
.rowId=${row[this.id]}
|
||||
.disabled=${row.selectable === false}
|
||||
.checked=${this._checkedRows.includes(String(row[this.id]))}
|
||||
>
|
||||
</ha-checkbox>
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
${Object.entries(this.columns).map(([key, column]) => {
|
||||
if (column.hidden) {
|
||||
return "";
|
||||
}
|
||||
return html`
|
||||
<div
|
||||
role="cell"
|
||||
class="mdc-data-table__cell ${classMap({
|
||||
"mdc-data-table__cell--numeric": column.type === "numeric",
|
||||
"mdc-data-table__cell--icon": column.type === "icon",
|
||||
"mdc-data-table__cell--icon-button":
|
||||
column.type === "icon-button",
|
||||
"mdc-data-table__cell--overflow-menu":
|
||||
column.type === "overflow-menu",
|
||||
grows: Boolean(column.grows),
|
||||
forceLTR: Boolean(column.forceLTR),
|
||||
})}"
|
||||
style=${column.width
|
||||
? styleMap({
|
||||
[column.grows ? "minWidth" : "width"]: column.width,
|
||||
maxWidth: column.maxWidth ? column.maxWidth : "",
|
||||
})
|
||||
: ""}
|
||||
>
|
||||
${column.template ? column.template(row[key], row) : row[key]}
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
private async _sortFilterData() {
|
||||
const startTime = new Date().getTime();
|
||||
this.curRequest++;
|
||||
@ -970,6 +958,9 @@ export class HaDataTable extends LitElement {
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
lit-virtualizer {
|
||||
contain: size layout !important;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import "../../components/ha-textfield";
|
||||
import { Layout1d, scroll } from "@lit-labs/virtualizer";
|
||||
import "@lit-labs/virtualizer";
|
||||
import "@material/mwc-list/mwc-list";
|
||||
import type { List } from "@material/mwc-list/mwc-list";
|
||||
import { SingleSelectedEvent } from "@material/mwc-list/mwc-list-foundation";
|
||||
@ -13,7 +12,7 @@ import {
|
||||
mdiReload,
|
||||
mdiServerNetwork,
|
||||
} from "@mdi/js";
|
||||
import { css, html, LitElement } from "lit";
|
||||
import { css, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, query, state } from "lit/decorators";
|
||||
import { ifDefined } from "lit/directives/if-defined";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
@ -36,11 +35,12 @@ import "../../components/ha-chip";
|
||||
import "../../components/ha-circular-progress";
|
||||
import "../../components/ha-header-bar";
|
||||
import "../../components/ha-icon-button";
|
||||
import "../../components/ha-textfield";
|
||||
import { domainToName } from "../../data/integration";
|
||||
import { getPanelNameTranslationKey } from "../../data/panel";
|
||||
import { PageNavigation } from "../../layouts/hass-tabs-subpage";
|
||||
import { configSections } from "../../panels/config/ha-panel-config";
|
||||
import { haStyleDialog } from "../../resources/styles";
|
||||
import { haStyleDialog, haStyleScrollbar } from "../../resources/styles";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import {
|
||||
ConfirmationDialogParams,
|
||||
@ -210,25 +210,24 @@ export class QuickBar extends LitElement {
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<mwc-list
|
||||
@rangechange=${this._handleRangeChanged}
|
||||
@keydown=${this._handleListItemKeyDown}
|
||||
@selected=${this._handleSelected}
|
||||
style=${styleMap({
|
||||
height: this._narrow
|
||||
? "calc(100vh - 56px)"
|
||||
: `${Math.min(
|
||||
items.length * (this._commandMode ? 56 : 72) + 26,
|
||||
this._done ? 500 : 0
|
||||
)}px`,
|
||||
})}
|
||||
>
|
||||
${scroll({
|
||||
items,
|
||||
layout: Layout1d,
|
||||
renderItem: (item: QuickBarItem, index) =>
|
||||
this._renderItem(item, index),
|
||||
})}
|
||||
<mwc-list @selected=${this._handleSelected}>
|
||||
<lit-virtualizer
|
||||
scroller
|
||||
@keydown=${this._handleListItemKeyDown}
|
||||
@rangechange=${this._handleRangeChanged}
|
||||
class="ha-scrollbar"
|
||||
style=${styleMap({
|
||||
height: this._narrow
|
||||
? "calc(100vh - 56px)"
|
||||
: `${Math.min(
|
||||
items.length * (this._commandMode ? 56 : 72) + 26,
|
||||
this._done ? 500 : 0
|
||||
)}px`,
|
||||
})}
|
||||
.items=${items}
|
||||
.renderItem=${this._renderItem}
|
||||
>
|
||||
</lit-virtualizer>
|
||||
</mwc-list>
|
||||
`}
|
||||
${this._hint ? html`<div class="hint">${this._hint}</div>` : ""}
|
||||
@ -261,14 +260,14 @@ export class QuickBar extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
private _renderItem(item: QuickBarItem, index?: number) {
|
||||
private _renderItem = (item: QuickBarItem, index: number): TemplateResult => {
|
||||
if (!item) {
|
||||
return html``;
|
||||
}
|
||||
return isCommandItem(item)
|
||||
? this._renderCommandItem(item, index)
|
||||
: this._renderEntityItem(item as EntityItem, index);
|
||||
}
|
||||
};
|
||||
|
||||
private _renderEntityItem(item: EntityItem, index?: number) {
|
||||
return html`
|
||||
@ -431,16 +430,21 @@ export class QuickBar extends LitElement {
|
||||
|
||||
private _handleListItemKeyDown(ev: KeyboardEvent) {
|
||||
const isSingleCharacter = ev.key.length === 1;
|
||||
const isFirstListItem =
|
||||
(ev.target as HTMLElement).getAttribute("index") === "0";
|
||||
const index = (ev.target as HTMLElement).getAttribute("index");
|
||||
const isFirstListItem = index === "0";
|
||||
this._focusListElement = ev.target as ListItem;
|
||||
if (ev.key === "ArrowDown") {
|
||||
this._getItemAtIndex(Number(index) + 1)?.focus();
|
||||
}
|
||||
if (ev.key === "ArrowUp") {
|
||||
if (isFirstListItem) {
|
||||
this._filterInputField?.focus();
|
||||
} else {
|
||||
this._getItemAtIndex(Number(index) - 1)?.focus();
|
||||
}
|
||||
}
|
||||
if (ev.key === "Backspace" || isSingleCharacter) {
|
||||
(ev.currentTarget as List).scrollTop = 0;
|
||||
(ev.currentTarget as HTMLElement).scrollTop = 0;
|
||||
this._filterInputField?.focus();
|
||||
}
|
||||
}
|
||||
@ -683,6 +687,7 @@ export class QuickBar extends LitElement {
|
||||
|
||||
static get styles() {
|
||||
return [
|
||||
haStyleScrollbar,
|
||||
haStyleDialog,
|
||||
css`
|
||||
.heading {
|
||||
@ -780,6 +785,10 @@ export class QuickBar extends LitElement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
lit-virtualizer {
|
||||
contain: size layout !important;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Layout1d, scroll } from "@lit-labs/virtualizer";
|
||||
import "@lit-labs/virtualizer";
|
||||
import {
|
||||
css,
|
||||
CSSResultGroup,
|
||||
@ -97,12 +97,13 @@ class HaLogbook extends LitElement {
|
||||
@scroll=${this._saveScrollPos}
|
||||
>
|
||||
${this.virtualize
|
||||
? scroll({
|
||||
items: this.entries,
|
||||
layout: Layout1d,
|
||||
renderItem: (item: LogbookEntry, index) =>
|
||||
this._renderLogbookItem(item, index),
|
||||
})
|
||||
? html`<lit-virtualizer
|
||||
scroller
|
||||
class="ha-scrollbar"
|
||||
.items=${this.entries}
|
||||
.renderItem=${this._renderLogbookItem}
|
||||
>
|
||||
</lit-virtualizer>`
|
||||
: this.entries.map((item, index) =>
|
||||
this._renderLogbookItem(item, index)
|
||||
)}
|
||||
@ -110,11 +111,11 @@ class HaLogbook extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private _renderLogbookItem(
|
||||
private _renderLogbookItem = (
|
||||
item: LogbookEntry,
|
||||
index?: number
|
||||
): TemplateResult {
|
||||
if (index === undefined) {
|
||||
index: number
|
||||
): TemplateResult => {
|
||||
if (!item || index === undefined) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
@ -239,7 +240,7 @@ class HaLogbook extends LitElement {
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
||||
@eventOptions({ passive: true })
|
||||
private _saveScrollPos(e: Event) {
|
||||
@ -362,10 +363,15 @@ class HaLogbook extends LitElement {
|
||||
max-height: var(--logbook-max-height);
|
||||
}
|
||||
|
||||
:host([virtualize]) .container {
|
||||
.container,
|
||||
lit-virtualizer {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
lit-virtualizer {
|
||||
contain: size layout !important;
|
||||
}
|
||||
|
||||
.narrow .entry {
|
||||
line-height: 1.5;
|
||||
padding: 8px;
|
||||
|
||||
22
yarn.lock
22
yarn.lock
@ -1960,25 +1960,25 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@lit-labs/virtualizer@0.6.0":
|
||||
version: 0.6.0
|
||||
resolution: "@lit-labs/virtualizer@npm:0.6.0"
|
||||
"@lit-labs/virtualizer@0.7.0-pre.2":
|
||||
version: 0.7.0-pre.2
|
||||
resolution: "@lit-labs/virtualizer@npm:0.7.0-pre.2"
|
||||
dependencies:
|
||||
event-target-shim: ^5.0.1
|
||||
lit: ^2.0.0-rc.1
|
||||
lit: ^2.0.0
|
||||
tslib: ^1.10.0
|
||||
checksum: c18a49c331a66f82a896a8de7d856277cc48dc4c9ca90df9513c1a73c887a36d1363178233a902d8d0fe5e1aa88f71302d68ac7a0cb1dc6ccbe593282d1cee72
|
||||
checksum: 88d5fffe73213c305160257e4e3a63a93087a90e63ca6640a81d156faacb68a8f84a82b94153b9364aeab3f5de45484acad1f8dcc2673e8464e394672358a3cc
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@lit-labs/virtualizer@patch:@lit-labs/virtualizer@0.6.0#./.yarn/patches/@lit-labs/virtualizer/0.7.0.patch::locator=home-assistant-frontend%40workspace%3A.":
|
||||
version: 0.6.0
|
||||
resolution: "@lit-labs/virtualizer@patch:@lit-labs/virtualizer@npm%3A0.6.0#./.yarn/patches/@lit-labs/virtualizer/0.7.0.patch::version=0.6.0&hash=0c4ec6&locator=home-assistant-frontend%40workspace%3A."
|
||||
"@lit-labs/virtualizer@patch:@lit-labs/virtualizer@0.7.0-pre.2#./.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch::locator=home-assistant-frontend%40workspace%3A.":
|
||||
version: 0.7.0-pre.2
|
||||
resolution: "@lit-labs/virtualizer@patch:@lit-labs/virtualizer@npm%3A0.7.0-pre.2#./.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch::version=0.7.0-pre.2&hash=cef165&locator=home-assistant-frontend%40workspace%3A."
|
||||
dependencies:
|
||||
event-target-shim: ^5.0.1
|
||||
lit: ^2.0.0-rc.1
|
||||
lit: ^2.0.0
|
||||
tslib: ^1.10.0
|
||||
checksum: 66bed3149dce8a0099e567ec3f1d249fb1855bf0df41e644453d044debe5f686c8c1b2078d45b4de5c488e821119eae1734b040a2145862efec54c442b83ff0f
|
||||
checksum: ea8bdd610530fc9b50dd327cc3b8c70d4e45300636d731969af7b9475047c91066fe7973e04ac91f80111c116c80a989f1507da7fbfc526f7c0dff3a54719a4d
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@ -9124,7 +9124,7 @@ fsevents@^1.2.7:
|
||||
"@fullcalendar/interaction": 5.9.0
|
||||
"@fullcalendar/list": 5.9.0
|
||||
"@koa/cors": ^3.1.0
|
||||
"@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.6.0#./.yarn/patches/@lit-labs/virtualizer/0.7.0.patch"
|
||||
"@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.7.0-pre.2#./.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch"
|
||||
"@material/chips": 14.0.0-canary.261f2db59.0
|
||||
"@material/data-table": 14.0.0-canary.261f2db59.0
|
||||
"@material/mwc-button": 0.25.3
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user