Use nothing in more lit template (#15966)

* Use nothing in more lit template

* Use nothing in more lit template
This commit is contained in:
Paul Bottein 2023-03-29 12:20:25 +02:00 committed by GitHub
parent 0f5320c6fb
commit 4d2d7cd125
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 86 additions and 85 deletions

View File

@ -1,13 +1,6 @@
// @ts-ignore
import chipStyles from "@material/chips/dist/mdc.chips.min.css";
import {
css,
CSSResultGroup,
html,
LitElement,
TemplateResult,
unsafeCSS,
} from "lit";
import { css, CSSResultGroup, html, LitElement, nothing, unsafeCSS } from "lit";
import { customElement, property } from "lit/decorators";
@customElement("ha-chip")
@ -18,14 +11,14 @@ export class HaChip extends LitElement {
@property({ type: Boolean }) public noText = false;
protected render(): TemplateResult {
protected render() {
return html`
<div class="mdc-chip ${this.noText ? "no-text" : ""}">
${this.hasIcon
? html`<div class="mdc-chip__icon mdc-chip__icon--leading">
<slot name="icon"></slot>
</div>`
: null}
: nothing}
<div class="mdc-chip__ripple"></div>
<span role="gridcell">
<span role="button" tabindex="0" class="mdc-chip__primary-action">
@ -36,7 +29,7 @@ export class HaChip extends LitElement {
? html`<div class="mdc-chip__icon mdc-chip__icon--trailing">
<slot name="trailing-icon"></slot>
</div>`
: null}
: nothing}
</div>
`;
}

View File

@ -1,4 +1,4 @@
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import type { HomeAssistant } from "../../types";
import "./ha-form";
@ -26,7 +26,7 @@ export class HaFormExpendable extends LitElement implements HaFormElement {
@property() public computeHelper?: (schema: HaFormSchema) => string;
protected render(): TemplateResult {
protected render() {
return html`
<ha-expansion-panel outlined .expanded=${Boolean(this.schema.expanded)}>
<div
@ -38,7 +38,7 @@ export class HaFormExpendable extends LitElement implements HaFormElement {
? html` <ha-icon .icon=${this.schema.icon}></ha-icon> `
: this.schema.iconPath
? html` <ha-svg-icon .path=${this.schema.iconPath}></ha-svg-icon> `
: null}
: nothing}
${this.schema.title}
</div>
<div class="content">

View File

@ -1,4 +1,4 @@
import { CSSResultGroup, html, css, LitElement, TemplateResult } from "lit";
import { CSSResultGroup, html, css, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
@ -8,12 +8,12 @@ export class HaTileImage extends LitElement {
@property() public imageAlt?: string;
protected render(): TemplateResult {
protected render() {
return html`
<div class="image">
${this.imageUrl
? html`<img alt=${ifDefined(this.imageAlt)} src=${this.imageUrl} />`
: null}
: nothing}
</div>
`;
}

View File

@ -1,4 +1,11 @@
import { CSSResultGroup, html, css, LitElement, TemplateResult } from "lit";
import {
CSSResultGroup,
html,
css,
LitElement,
TemplateResult,
nothing,
} from "lit";
import { customElement, property } from "lit/decorators";
@customElement("ha-tile-info")
@ -7,13 +14,13 @@ export class HaTileInfo extends LitElement {
@property() public secondary?: string | TemplateResult<1>;
protected render(): TemplateResult {
protected render() {
return html`
<div class="info">
<span class="primary">${this.primary}</span>
${this.secondary
? html`<span class="secondary">${this.secondary}</span>`
: null}
: nothing}
</div>
`;
}

View File

@ -15,7 +15,6 @@ import {
LitElement,
nothing,
PropertyValues,
TemplateResult,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation";
@ -114,9 +113,9 @@ class MoreInfoFan extends LitElement {
}
}
protected render(): TemplateResult | null {
protected render() {
if (!this.hass || !this.stateObj) {
return null;
return nothing;
}
const supportsSpeed = supportsFeature(
@ -185,7 +184,7 @@ class MoreInfoFan extends LitElement {
<ha-svg-icon .path=${mdiPower}></ha-svg-icon>
</md-outlined-icon-button>
`
: null}
: nothing}
${supportsDirection
? html`
<md-outlined-icon-button

View File

@ -1,6 +1,6 @@
import { mdiPower, mdiPowerOff } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-attributes";
import type { HomeAssistant } from "../../../types";
@ -14,9 +14,9 @@ class MoreInfoInputBoolean extends LitElement {
@property({ attribute: false }) public stateObj?: HassEntity;
protected render(): TemplateResult | null {
protected render() {
if (!this.hass || !this.stateObj) {
return null;
return nothing;
}
return html`

View File

@ -13,8 +13,8 @@ import {
CSSResultGroup,
html,
LitElement,
nothing,
PropertyValues,
TemplateResult,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation";
@ -62,9 +62,9 @@ class MoreInfoLight extends LitElement {
}
}
protected render(): TemplateResult | null {
protected render() {
if (!this.hass || !this.stateObj) {
return null;
return nothing;
}
const supportsColorTemp = lightSupportsColorMode(
@ -137,7 +137,7 @@ class MoreInfoLight extends LitElement {
<ha-svg-icon .path=${mdiPower}></ha-svg-icon>
</md-outlined-icon-button>
`
: null}
: nothing}
${supportsColorTemp || supportsColor
? html`
<md-outlined-icon-button
@ -153,7 +153,7 @@ class MoreInfoLight extends LitElement {
<ha-svg-icon .path=${mdiPalette}></ha-svg-icon>
</md-outlined-icon-button>
`
: null}
: nothing}
${supportsWhite
? html`
<md-outlined-icon-button
@ -169,7 +169,7 @@ class MoreInfoLight extends LitElement {
<ha-svg-icon .path=${mdiFileWordBox}></ha-svg-icon>
</md-outlined-icon-button>
`
: null}
: nothing}
${supportsEffects && this.stateObj.attributes.effect_list
? html`
<ha-button-menu
@ -204,10 +204,10 @@ class MoreInfoLight extends LitElement {
)}
</ha-button-menu>
`
: null}
: nothing}
</div>
`
: null}
: nothing}
</div>
<ha-attributes

View File

@ -1,6 +1,6 @@
import { mdiVolumeHigh, mdiVolumeOff } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-attributes";
import type { HomeAssistant } from "../../../types";
@ -14,9 +14,9 @@ class MoreInfoSiren extends LitElement {
@property({ attribute: false }) public stateObj?: HassEntity;
protected render(): TemplateResult | null {
protected render() {
if (!this.hass || !this.stateObj) {
return null;
return nothing;
}
return html`

View File

@ -1,6 +1,6 @@
import { mdiPower, mdiPowerOff } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-attributes";
import type { HomeAssistant } from "../../../types";
@ -14,9 +14,9 @@ class MoreInfoSwitch extends LitElement {
@property({ attribute: false }) public stateObj?: HassEntity;
protected render(): TemplateResult | null {
protected render() {
if (!this.hass || !this.stateObj) {
return null;
return nothing;
}
return html`

View File

@ -308,7 +308,7 @@ export class QuickBar extends LitElement {
>${item.altText}</span
>
`
: null}
: nothing}
</ha-list-item>
`;
}

View File

@ -126,7 +126,7 @@ class DialogRestart extends LitElement {
</span>
</ha-list-item>
`
: null}
: nothing}
<ha-list-item
graphic="avatar"
twoline
@ -201,7 +201,7 @@ class DialogRestart extends LitElement {
</mwc-list>
</ha-expansion-panel>
`
: null}
: nothing}
`}
</ha-dialog>
`;

View File

@ -3,7 +3,7 @@ import "@material/mwc-list/mwc-list-item";
import { mdiPower } from "@mdi/js";
import type { ChartOptions } from "chart.js";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement, nothing, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
@ -209,7 +209,7 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
}
}
protected render(): TemplateResult {
protected render() {
let boardId: string | undefined;
let boardName: string | undefined;
let imageURL: string | undefined;
@ -343,7 +343,7 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
)}
</mwc-button>
`
: null}
: nothing}
${isComponentLoaded(this.hass, "hassio")
? html`
<mwc-button @click=${this._openHardware}>
@ -352,7 +352,7 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
)}
</mwc-button>
`
: null}
: nothing}
</div>`
: ""}
</ha-card>

View File

@ -7,8 +7,8 @@ import {
CSSResultGroup,
html,
LitElement,
nothing,
PropertyValues,
TemplateResult,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
@ -357,7 +357,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
}
}
protected render(): TemplateResult {
protected render() {
if (!this._configEntries) {
return html`<hass-loading-screen
.hass=${this.hass}
@ -531,7 +531,9 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
.supportsDiagnostics=${this._diagnosticHandlers
? this._diagnosticHandlers[domain]
: false}
.logInfo=${this._logInfos ? this._logInfos[domain] : null}
.logInfo=${this._logInfos
? this._logInfos[domain]
: nothing}
></ha-integration-card>`
)
: this._filter &&

View File

@ -320,7 +320,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
return html`
<ha-card style=${styleMap(style)} class=${classMap({ active })}>
${this._shouldRenderRipple ? html`<mwc-ripple></mwc-ripple>` : null}
${this._shouldRenderRipple ? html`<mwc-ripple></mwc-ripple>` : nothing}
<div class="tile">
<div
class="background"
@ -369,7 +369,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
})}
></ha-tile-badge>
`
: null}
: nothing}
</div>
<ha-tile-info
class="info"

View File

@ -1,5 +1,5 @@
import "@material/mwc-list/mwc-list-item";
import { css, html, LitElement } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import {
@ -51,7 +51,7 @@ export class HuiColorPicker extends LitElement {
${this.renderColorCircle(this.value || "grey")}
</span>
`
: null}
: nothing}
<mwc-list-item value="default">
${this.hass.localize(
`ui.panel.lovelace.editor.color-picker.default_color`

View File

@ -1,6 +1,6 @@
import { mdiDelete, mdiDrag, mdiListBox, mdiPencil, mdiPlus } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
import type { SortableEvent } from "sortablejs";
@ -150,9 +150,9 @@ export class HuiTileCardFeaturesEditor extends LitElement {
.filter((type) => this._supportsFeatureType(type));
}
protected render(): TemplateResult | null {
protected render() {
if (!this.features || !this.hass) {
return null;
return nothing;
}
const supportedFeaturesType = this._getSupportedFeaturesType();
@ -179,7 +179,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
)}
</ha-alert>
`
: null}
: nothing}
<div class="features">
${repeat(
this.features,
@ -204,7 +204,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
)}
</span>
`
: null}
: nothing}
</div>
</div>
${editable
@ -220,7 +220,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
.disabled=${!supported}
></ha-icon-button>
`
: null}
: nothing}
<ha-icon-button
.label=${this.hass!.localize(
`ui.panel.lovelace.editor.card.tile.features.remove`
@ -260,7 +260,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
)}
${types.length > 0 && customTypes.length > 0
? html`<li divider role="separator"></li>`
: null}
: nothing}
${customTypes.map(
(type) => html`
<ha-list-item .value=${type}>
@ -270,7 +270,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
)}
</ha-button-menu>
`
: null}
: nothing}
</div>
</ha-expansion-panel>
`;

View File

@ -111,7 +111,7 @@ export class HuiDialogSelectView extends LitElement {
<mwc-radio-list-item
.graphic=${this._config?.views.some(({ icon }) => icon)
? "icon"
: null}
: nothing}
@click=${this._viewChanged}
.value=${idx.toString()}
.selected=${this._selectedViewIdx === idx}

View File

@ -1,6 +1,6 @@
import { mdiStop } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import {
@ -74,14 +74,14 @@ class HuiCoverOpenCloseTileFeature
});
}
protected render(): TemplateResult | null {
protected render() {
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsCoverOpenCloseTileFeature(this.stateObj)
) {
return null;
return nothing;
}
return html`
@ -100,7 +100,7 @@ class HuiCoverOpenCloseTileFeature
></ha-svg-icon>
</ha-control-button>
`
: null}
: nothing}
${supportsFeature(this.stateObj, CoverEntityFeature.STOP)
? html`
<ha-control-button
@ -113,7 +113,7 @@ class HuiCoverOpenCloseTileFeature
<ha-svg-icon .path=${mdiStop}></ha-svg-icon>
</ha-control-button>
`
: null}
: nothing}
${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE)
? html`
<ha-control-button
@ -128,7 +128,7 @@ class HuiCoverOpenCloseTileFeature
></ha-svg-icon>
</ha-control-button>
`
: undefined}
: nothing}
</ha-control-button-group>
`;
}

View File

@ -1,6 +1,6 @@
import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import { supportsFeature } from "../../../common/entity/supports-feature";
@ -70,14 +70,14 @@ class HuiCoverTiltTileFeature
});
}
protected render(): TemplateResult | null {
protected render() {
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsCoverTiltTileFeature
) {
return null;
return nothing;
}
return html`
@ -94,7 +94,7 @@ class HuiCoverTiltTileFeature
<ha-svg-icon .path=${mdiArrowTopRight}></ha-svg-icon>
</ha-control-button>
`
: null}
: nothing}
${supportsFeature(this.stateObj, CoverEntityFeature.STOP_TILT)
? html`
<ha-control-button
@ -107,7 +107,7 @@ class HuiCoverTiltTileFeature
<ha-svg-icon .path=${mdiStop}></ha-svg-icon>
</ha-control-button>
`
: null}
: nothing}
${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE_TILT)
? html`
<ha-control-button
@ -120,7 +120,7 @@ class HuiCoverTiltTileFeature
<ha-svg-icon .path=${mdiArrowBottomLeft}></ha-svg-icon>
</ha-control-button>
`
: undefined}
: nothing}
</ha-control-button-group>
`;
}

View File

@ -1,5 +1,5 @@
import { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeAttributeNameDisplay } from "../../../common/entity/compute_attribute_display";
import { computeDomain } from "../../../common/entity/compute_domain";
@ -67,14 +67,14 @@ class HuiFanSpeedTileFeature extends LitElement implements LovelaceTileFeature {
);
}
protected render(): TemplateResult | null {
protected render() {
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsFanSpeedTileFeature(this.stateObj)
) {
return null;
return nothing;
}
const speedCount = computeFanSpeedCount(this.stateObj);

View File

@ -1,5 +1,5 @@
import { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import { stateActive } from "../../../common/entity/state_active";
@ -39,14 +39,14 @@ class HuiLightBrightnessTileFeature
this._config = config;
}
protected render(): TemplateResult | null {
protected render() {
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsLightBrightnessTileFeature(this.stateObj)
) {
return null;
return nothing;
}
const position =

View File

@ -8,7 +8,7 @@ import {
mdiTargetVariant,
} from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import { supportsFeature } from "../../../common/entity/supports-feature";
@ -169,14 +169,14 @@ class HuiVacuumCommandTileFeature
});
}
protected render(): TemplateResult | null {
protected render() {
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsVacuumCommandTileFeature(this.stateObj)
) {
return null;
return nothing;
}
const stateObj = this.stateObj as VacuumEntity;